/* NavigaTrack – Custom styles */

/* ── Typography ──────────────────────────────────────────── */
:root {
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;

  /* Colour tokens – light */
  --color-bg:            #f8fafc;
  --color-surface:       #ffffff;
  --color-border:        #e2e8f0;
  --color-text:          #0f172a;
  --color-text-muted:    #64748b;
  --color-primary:       #0ea5e9;
  --color-primary-dark:  #0284c7;
  --color-danger:        #ef4444;
  --color-success:       #22c55e;
  --color-warning:       #f59e0b;
  --sidebar-width:       16rem;          /* 256 px */
  --header-height:       3.5rem;         /* 56 px  */
}

/* ── Dark mode (system preference) ───────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg:          #0f172a;
    --color-surface:     #1e293b;
    --color-border:      #334155;
    --color-text:        #f1f5f9;
    --color-text-muted:  #94a3b8;
    --color-primary:     #38bdf8;
    --color-primary-dark:#0ea5e9;
  }

  body {
    background-color: var(--color-bg);
    color:            var(--color-text);
  }

  /* Tailwind utility overrides for dark backgrounds */
  .bg-white       { background-color: var(--color-surface)  !important; }
  .bg-gray-50     { background-color: var(--color-bg)        !important; }
  .bg-gray-100    { background-color: #1e293b                !important; }
  .bg-gray-200    { background-color: #334155                !important; }
  .bg-gray-800    { background-color: #0f172a                !important; }
  .border-gray-200{ border-color:     var(--color-border)    !important; }
  .text-gray-900  { color:            var(--color-text)      !important; }
  .text-gray-700  { color:            #cbd5e1                !important; }
  .text-gray-600  { color:            #94a3b8                !important; }
  .text-gray-500  { color:            #64748b                !important; }
  .text-gray-400  { color:            #475569                !important; }
  .divide-gray-200 > * + * { border-color: var(--color-border) !important; }
  .hover\:bg-gray-100:hover { background-color: #334155 !important; }
  .hover\:bg-gray-50:hover  { background-color: #1e293b !important; }

  /* Sidebar */
  aside.bg-white {
    background-color: var(--color-surface) !important;
    border-right-color: var(--color-border) !important;
  }

  /* Toasts */
  #messages-container .bg-white { background-color: var(--color-surface) !important; }

  /* Form inputs */
  input, select, textarea {
    background-color: #1e293b !important;
    border-color:     var(--color-border) !important;
    color:            var(--color-text)   !important;
  }
  input::placeholder,
  textarea::placeholder { color: #475569 !important; }

  /* Tables */
  .bg-gray-50.divide-y,
  thead.bg-gray-50 { background-color: #1e293b !important; }
  tr.hover\:bg-gray-50:hover { background-color: #334155 !important; }
}

/* ── Base body & font ─────────────────────────────────────── */
body {
  font-family: var(--font-sans);
  background-color: var(--color-bg);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Scrollbar (webkit) ──────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 9999px; }
@media (prefers-color-scheme: dark) {
  ::-webkit-scrollbar-thumb { background: #334155; }
}

/* ── Focus ring ───────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ── Smooth transitions on interactive elements ──────────── */
a, button { transition: color 150ms ease, background-color 150ms ease, opacity 150ms ease; }

/* ── Sidebar active link ─────────────────────────────────── */
.sidebar-link.active {
  background-color: #eff6ff;
  color: #1d4ed8;
}
@media (prefers-color-scheme: dark) {
  .sidebar-link.active {
    background-color: #1e3a5f;
    color: #93c5fd;
  }
}

/* ── Cards ───────────────────────────────────────────────── */
.card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

/* ── Map container ───────────────────────────────────────── */
.map-container { border-radius: 0.5rem; overflow: hidden; }