:root {
  color-scheme: light;
}

html,
body {
  transition: background-color 150ms ease-out, color 150ms ease-out;
}

html.dark {
  color-scheme: dark;

  --app-ink: #e5e7eb;
  --app-ink-soft: #cbd5e1;
  --app-muted: #aebbd0;
  --app-muted-light: #94a3b8;
  --app-line: #334155;
  --app-line-soft: #243044;
  --app-canvas: #090f1c;
  --app-surface: #111827;
  --app-surface-muted: #172033;
  --app-sidebar: #070d19;
  --app-sidebar-soft: #111c33;
  --app-sidebar-active: #1e3a5f;
  --app-sidebar-text: #dbeafe;
  --app-sidebar-muted: #94a3b8;
  --app-primary: #60a5fa;
  --app-primary-strong: #3b82f6;
  --app-primary-soft: #172554;
  --app-info: #7dd3fc;
  --app-info-soft: #0c2d45;
  --app-success: #6ee7b7;
  --app-success-strong: #34d399;
  --app-success-soft: #0d3428;
  --app-warning: #fcd34d;
  --app-warning-strong: #fbbf24;
  --app-warning-soft: #3a2a0b;
  --app-danger: #fca5a5;
  --app-danger-strong: #f87171;
  --app-danger-soft: #3b151b;
  --app-badge-red: #4b1f2a;
  --app-badge-blue: #172554;

  --color-fleet-ink: var(--app-ink);
  --color-fleet-ink-soft: var(--app-ink-soft);
  --color-fleet-muted: var(--app-muted);
  --color-fleet-muted-light: var(--app-muted-light);
  --color-fleet-line: var(--app-line);
  --color-fleet-line-soft: var(--app-line-soft);
  --color-fleet-canvas: var(--app-canvas);
  --color-fleet-surface: var(--app-surface);
  --color-fleet-surface-muted: var(--app-surface-muted);
  --color-fleet-sidebar: var(--app-sidebar);
  --color-fleet-sidebar-soft: var(--app-sidebar-soft);
  --color-fleet-sidebar-active: var(--app-sidebar-active);
  --color-fleet-sidebar-text: var(--app-sidebar-text);
  --color-fleet-sidebar-muted: var(--app-sidebar-muted);
  --color-fleet-primary: var(--app-primary);
  --color-fleet-primary-strong: var(--app-primary-strong);
  --color-fleet-primary-soft: var(--app-primary-soft);
  --color-fleet-info: var(--app-info);
  --color-fleet-info-soft: var(--app-info-soft);
  --color-fleet-success: var(--app-success);
  --color-fleet-success-strong: var(--app-success-strong);
  --color-fleet-success-soft: var(--app-success-soft);
  --color-fleet-warning: var(--app-warning);
  --color-fleet-warning-strong: var(--app-warning-strong);
  --color-fleet-warning-soft: var(--app-warning-soft);
  --color-fleet-danger: var(--app-danger);
  --color-fleet-danger-strong: var(--app-danger-strong);
  --color-fleet-danger-soft: var(--app-danger-soft);
  --color-fleet-badge-red: var(--app-badge-red);
  --color-fleet-badge-blue: var(--app-badge-blue);
}

html.dark,
html.dark body {
  background: var(--app-canvas);
  color: var(--app-ink);
}

html.dark input,
html.dark select,
html.dark textarea {
  color-scheme: dark;
}

html.dark select,
html.dark select option,
html.dark select optgroup {
  background-color: var(--app-surface);
  color: var(--app-ink);
}

html.dark input::placeholder,
html.dark textarea::placeholder {
  color: var(--app-muted);
}

.fleet-theme-toggle {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 9998;
  display: inline-flex;
  min-width: 2.75rem;
  height: 2.75rem;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 1px solid var(--app-line);
  border-radius: 0.875rem;
  background: var(--app-surface);
  padding: 0 0.75rem;
  color: var(--app-ink);
  box-shadow: 0 12px 28px rgb(15 23 42 / 0.22), 0 2px 6px rgb(15 23 42 / 0.14);
  cursor: pointer;
  transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease, transform 150ms ease;
}

.fleet-theme-toggle:hover {
  border-color: var(--app-primary);
  color: var(--app-primary);
  transform: translateY(-1px);
}

.fleet-theme-toggle:focus-visible {
  outline: 2px solid var(--app-primary);
  outline-offset: 3px;
}

.fleet-theme-icon {
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 auto;
}

.fleet-theme-icon-sun,
html.dark .fleet-theme-icon-moon {
  display: none;
}

html.dark .fleet-theme-icon-sun {
  display: block;
}

.fleet-theme-label {
  font-size: 0.75rem;
  font-weight: 700;
}

html.dark .page-loading-overlay {
  background: rgb(9 15 28 / 0.94);
}

html.dark .page-loading-card,
html.dark .page-loading-title {
  color: var(--app-ink);
}

html.dark .page-loading-message {
  color: var(--app-muted);
}

html.dark .bg-white,
html.dark .bg-slate-50,
html.dark .bg-slate-100,
html.dark .bg-slate-200 {
  background-color: var(--app-surface);
}

html.dark .text-slate-600,
html.dark .text-slate-700,
html.dark .text-slate-800,
html.dark .text-slate-900,
html.dark .text-blue-800,
html.dark .text-blue-900 {
  color: var(--app-ink);
}

html.dark .text-blue-700,
html.dark .text-fleet-primary {
  color: var(--app-primary);
}

html.dark .text-fleet-sidebar {
  color: #bfdbfe;
}

html.dark .border-slate-200,
html.dark .border-slate-300,
html.dark .border-blue-200,
html.dark .border-blue-300,
html.dark .border-emerald-200,
html.dark .border-amber-200,
html.dark .border-orange-200,
html.dark .border-red-200,
html.dark .border-red-300,
html.dark .border-green-200,
html.dark .border-green-300 {
  border-color: var(--app-line);
}

html.dark .bg-blue-50,
html.dark .bg-blue-100 {
  background-color: #172554;
}

html.dark .bg-emerald-50,
html.dark .bg-green-50,
html.dark .bg-green-100 {
  background-color: #0d3428;
}

html.dark .bg-amber-50,
html.dark .bg-orange-50,
html.dark .bg-orange-100 {
  background-color: #3a2a0b;
}

html.dark .bg-red-50,
html.dark .bg-red-100 {
  background-color: #3b151b;
}

html.dark .dashboard-shell {
  background: radial-gradient(circle at 0 0, rgb(37 99 235 / 0.18), transparent 26rem),
    radial-gradient(circle at 100% 0, rgb(14 165 233 / 0.12), transparent 22rem),
    linear-gradient(180deg, #0c1424 0%, #090f1c 100%);
  box-shadow: 0 18px 60px rgb(0 0 0 / 0.28);
}

html.dark .dashboard-search,
html.dark .dashboard-panel,
html.dark .dashboard-panel-chart,
html.dark .dashboard-panel-alerts,
html.dark .driver-subcard,
html.dark .border-dashed,
html.dark .driver-table-card table thead,
html.dark .mailbox-folder-header,
html.dark .mailbox-thread-header,
html.dark .mailbox-quick-reply {
  background: var(--app-surface);
  border-color: var(--app-line);
  color: var(--app-ink);
}

html.dark .dashboard-notice-card-info,
html.dark .dashboard-notice-card-primary {
  background: var(--app-info-soft);
  border-color: var(--app-line);
}

html.dark .dashboard-panel tbody tr.bg-white\/70 {
  background-color: var(--app-surface-muted);
}

html.dark .dashboard-panel tbody td.text-fleet-ink {
  color: #f1f5f9;
}

html.dark .dashboard-panel tbody td.text-fleet-muted {
  color: #cbd5e1;
}

html.dark .dashboard-panel thead.text-fleet-muted {
  color: #dbeafe;
}

html.dark .driver-table-card table tbody tr:hover,
html.dark .mailbox-list-item:hover {
  background: rgb(96 165 250 / 0.08);
}

html.dark .login-panel-form {
  background: var(--app-canvas);
}

html.dark .login-panel-form::before {
  background: radial-gradient(circle, rgb(37 99 235 / 0.2), transparent 70%);
}

html.dark .login-card {
  color: var(--app-ink);
}

html.dark .login-card h2,
html.dark .login-card-field label {
  color: var(--app-ink);
}

html.dark .login-card-sub,
html.dark .login-card-footer,
html.dark .login-form-divider {
  color: var(--app-muted);
}

html.dark .login-input {
  background: var(--app-surface);
  border-color: var(--app-line);
  color: var(--app-ink);
}

html.dark .login-input:focus {
  background: var(--app-surface-muted);
  border-color: var(--app-primary);
}

html.dark .login-password-toggle:hover {
  background: var(--app-surface-muted);
  color: var(--app-ink);
}

html.dark .login-form-divider::before,
html.dark .login-form-divider::after {
  border-color: var(--app-line);
}

html.dark .landing-page [data-home-header] {
  background: rgb(9 15 28 / 0.95);
  border-color: var(--app-line);
}

html.dark .landing-page section:not(.landing-hero),
html.dark .landing-showcase-section,
html.dark .landing-showcase-shell {
  background-color: var(--app-canvas);
  border-color: var(--app-line);
}

html.dark .landing-showcase-shell {
  background: linear-gradient(180deg, #111827 0%, #0c1424 100%);
}

html.dark [role='dialog'] > div,
html.dark [role='dialog'] section {
  border-color: var(--app-line);
}

html.dark .shadow-sm,
html.dark .shadow-md,
html.dark .shadow-lg,
html.dark .shadow-xl,
html.dark .shadow-fleet-card {
  --tw-shadow-color: rgb(0 0 0 / 0.38);
}

html.dark ::selection {
  background: rgb(37 99 235 / 0.55);
  color: #ffffff;
}

@media (max-width: 40rem) {
  .fleet-theme-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  html,
  body,
  .fleet-theme-toggle {
    transition-duration: 0ms;
  }
}

@media print {
  .fleet-theme-toggle {
    display: none !important;
  }
}