/* ====================================================================
   Orion Tracking Theme - Light
   This file contains light token overrides and light-only component tweaks.
   ==================================================================== */

html[data-theme="light"] {
  --color-bg-primary: #f4f1eb;
  --color-bg-secondary: #f7f6f2;
  --color-bg-tertiary: #ffffff;

  --color-text-primary: #1c1f25;
  --color-text-secondary: #4f5663;
  --color-text-muted: #666f7d;

  --color-accent-primary: #2f80ed;
  --color-accent-hover: #1f6fdd;
  --color-accent-active: #195fbf;

  --color-status-success: #22c55e;
  --color-status-warning: #f59e0b;
  --color-status-error: #ef4444;
  --color-status-info: #2f80ed;

  --color-border-default: #d7d0c4;
  --color-border-light: #e9e3d9;
  --color-border-dark: #c6beb1;

  --header-bg: #ffffff;
  --header-text: var(--color-text-primary);
  --header-border: var(--color-border-default);

  --sidebar-bg: #fbfbfb;
  --sidebar-text: var(--color-text-primary);
  --sidebar-border: var(--color-border-default);

  --nav-bg: #fbfbfb;
  --nav-text: var(--color-text-primary);
  --nav-hover: rgba(47, 128, 237, 0.1);
  --nav-active: var(--color-text-primary);
  --nav-link-hover-bg: rgba(47, 128, 237, 0.08);
  --nav-active-bg: rgba(47, 128, 237, 0.1);
  --nav-active-bg-hover: rgba(47, 128, 237, 0.16);
  --nav-active-shadow: 0 10px 24px rgba(26, 33, 52, 0.06);
  --nav-active-icon-glow: 0 0 6px rgba(47, 128, 237, 0.28);

  --table-bg: #ffffff;
  --table-header-bg: #f1ede5;
  --table-border: var(--color-border-default);
  --table-hover-bg: rgba(47, 128, 237, 0.09);
  --table-row-even: #fbfbfb;

  --content-bg: var(--color-bg-primary);
  --content-border: var(--color-border-default);

  --modal-bg: #ffffff;
  --modal-border: var(--color-border-default);
  --modal-shadow: 0 12px 26px rgba(26, 33, 52, 0.11);
  --message-window-text: #000000;

  --form-input-bg: #ffffff;
  --form-input-border: #cfc7ba;
  --form-input-text: var(--color-text-primary);
  --form-input-placeholder: #666f7d;
  --form-input-focus: var(--color-accent-primary);
  --form-input-focus-border: var(--color-accent-primary);
  --form-label-text: var(--color-text-secondary);

  --btn-primary-bg: var(--color-accent-primary);
  --btn-primary-text: #ffffff;
  --btn-primary-hover: var(--color-accent-hover);
  --btn-secondary-bg: #fbfbfb;
  --btn-secondary-text: var(--color-text-primary);
  --btn-secondary-hover: #f7f6f2;
  --btn-danger-bg: var(--color-status-error);
  --btn-danger-text: #ffffff;
  --btn-danger-hover: #f87171;
  --btn-success-bg: var(--color-status-success);
  --btn-success-text: #ffffff;
  --btn-success-hover: #34d399;
  --btn-warning-bg: var(--color-status-warning);
  --btn-warning-text: #1c1f25;
  --btn-warning-hover: #fbbf24;

  --dropdown-bg: #ffffff;
  --dropdown-border: #cfc7ba;
  --dropdown-text: var(--color-text-primary);
  --dropdown-hover-bg: rgba(47, 128, 237, 0.08);
  --dropdown-active-bg: rgba(47, 128, 237, 0.14);

  --alert-success-bg: rgba(34, 197, 94, 0.14);
  --alert-success-border: var(--color-status-success);
  --alert-success-text: var(--color-status-success);
  --alert-error-bg: rgba(239, 68, 68, 0.12);
  --alert-error-border: var(--color-status-error);
  --alert-error-text: var(--color-status-error);
  --alert-warning-bg: rgba(245, 158, 11, 0.14);
  --alert-warning-border: var(--color-status-warning);
  --alert-warning-text: var(--color-status-warning);
  --alert-info-bg: rgba(47, 128, 237, 0.12);
  --alert-info-border: var(--color-status-info);
  --alert-info-text: var(--color-text-primary);

  --shadow-sm: 0 8px 18px rgba(26, 33, 52, 0.05);
  --shadow-md: 0 10px 24px rgba(26, 33, 52, 0.08);
  --shadow-lg: 0 14px 32px rgba(26, 33, 52, 0.1);

  --glow-primary: 0 0 10px rgba(47, 128, 237, 0.3);
  --glow-secondary: 0 0 15px rgba(47, 128, 237, 0.2);
  --glow-success: 0 0 10px rgba(34, 197, 94, 0.28);
  --glow-error: 0 0 10px rgba(239, 68, 68, 0.28);

  /* Field change indicators and effects */
  --particle-color: rgba(47, 128, 237, 0.45);
  --changed-field-bg-light: rgba(47, 128, 237, 0.08);
  --changed-field-bg-medium: rgba(47, 128, 237, 0.12);
  --changed-field-bg-heavy: rgba(47, 128, 237, 0.16);
  --changed-field-bg-max: rgba(47, 128, 237, 0.22);
  --changed-field-shadow-light: rgba(47, 128, 237, 0.14);
  --changed-field-shadow-medium: rgba(47, 128, 237, 0.2);
  --changed-field-shadow-heavy: rgba(47, 128, 237, 0.28);

  /* Overlays and semi-transparent colors */
  --overlay-white-light: rgba(28, 31, 37, 0.05);
  --overlay-white-medium: rgba(28, 31, 37, 0.1);
  --overlay-white-strong: rgba(28, 31, 37, 0.2);
  --overlay-cyan: rgba(47, 128, 237, 0.18);

  /* Compact semantic overlay/tone tokens for style.css */
  --tone-surface: #ffffff;
  --tone-accent: #1c1f25;
  --tone-text-soft: #666f7d;
  --tone-text-danger-soft: #ef4444;

  --overlay-surface: rgba(255, 255, 255, 0.82);
  --overlay-contrast: rgba(28, 31, 37, 0.1);
  --overlay-accent: rgba(47, 128, 237, 0.2);
  --overlay-success: rgba(34, 197, 94, 0.18);
  --overlay-danger: rgba(239, 68, 68, 0.18);
  --overlay-warning: rgba(245, 158, 11, 0.2);
  --overlay-info: rgba(47, 128, 237, 0.18);
  --overlay-neutral: rgba(129, 136, 150, 0.2);
  --overlay-text-highlight: rgba(28, 31, 37, 0.94);
  --overlay-border-positive: rgba(34, 197, 94, 0.34);

  --backdrop: rgba(28, 31, 37, 0.08);
  --backdrop-blur: blur(8px);

  --gradient-primary: linear-gradient(135deg, #f4f1eb 0%, #f7f6f2 50%, #ffffff 100%);
  --gradient-accent: linear-gradient(135deg, var(--color-accent-primary) 0%, var(--color-accent-active) 100%);
  --gradient-success: linear-gradient(135deg, var(--color-status-success) 0%, #16a34a 100%);

  --hdr-chip-bg: rgba(255, 255, 255, 0.94);
  --hdr-chip-br: rgba(28, 31, 37, 0.12);
  --hdr-chip-fg: #1c1f25;
  --hdr-chip-bg-hover: rgba(255, 255, 255, 1);
  --hdr-chip-br-hover: rgba(28, 31, 37, 0.2);
}

/* Light-specific page adjustments */
html[data-theme="light"] .content {
  background: var(--color-bg-primary);
  background-image: none;
}

html[data-theme="light"] #main-particles {
  background: linear-gradient(135deg, #f4f1eb 0%, #f7f6f2 50%, #ffffff 100%) !important;
}

html[data-theme="light"] #sidebar-particles {
  background: linear-gradient(135deg, #fbfbfb 0%, #ffffff 100%) !important;
}

html[data-theme="light"] .particle {
  background: rgba(47, 128, 237, 0.45);
}

html[data-theme="light"] .status-body {
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
}

html[data-theme="light"] .status-page {
  background: linear-gradient(135deg, rgba(47, 128, 237, 0.07) 0%, rgba(245, 158, 11, 0.06) 100%), var(--color-bg-primary);
  border: 1px solid var(--color-border-default);
}

html[data-theme="light"] .status-code {
  color: var(--color-text-primary);
}

html[data-theme="light"] .glow-effect {
  text-shadow: 0 0 10px rgba(47, 128, 237, 0.3);
}

html[data-theme="light"] .card,
html[data-theme="light"] .panel,
html[data-theme="light"] .modal,
html[data-theme="light"] .dropdown-menu {
  background: var(--color-bg-primary);
  border-color: var(--color-border-default);
}

html[data-theme="light"] table {
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
}

html[data-theme="light"] table thead {
  background: var(--table-header-bg);
}

html[data-theme="light"] table tbody tr:hover {
  background: var(--table-hover-bg);
}

html[data-theme="light"] input,
html[data-theme="light"] textarea,
html[data-theme="light"] select {
  background: var(--form-input-bg);
  color: var(--form-input-text);
  border-color: var(--form-input-border);
}

html[data-theme="light"] input:focus,
html[data-theme="light"] textarea:focus,
html[data-theme="light"] select:focus {
  border-color: var(--form-input-focus-border);
  box-shadow: 0 0 0 3px rgba(47, 128, 237, 0.24);
}

html[data-theme="light"] .alert,
html[data-theme="light"] .notification {
  border-color: currentColor;
}

html[data-theme="light"] .modal-content {
  background: var(--modal-bg);
  color: var(--color-text-primary);
}

html[data-theme="light"] .modal-backdrop {
  background: var(--backdrop);
}

html[data-theme="light"] a {
  color: var(--color-text-primary);
  text-decoration: underline;
  text-decoration-color: rgba(28, 31, 37, 0.35);
  text-underline-offset: 2px;
}

html[data-theme="light"] a:hover {
  color: #000000;
  text-decoration-color: rgba(0, 0, 0, 0.75);
}

html[data-theme="light"] pre,
html[data-theme="light"] code {
  background: var(--table-header-bg);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-default);
}

html[data-theme="light"] .badge,
html[data-theme="light"] .label {
  background: var(--color-accent-primary);
  color: var(--btn-primary-text);
}

/* Active main menu item must be black in light theme */
html[data-theme="light"] .nav-link.active {
  color: #000000 !important;
  border-left-color: #000000 !important;
  background: rgba(0, 0, 0, 0.08) !important;
  box-shadow: none !important;
}

html[data-theme="light"] .nav-link.active i {
  color: #000000 !important;
  text-shadow: none !important;
}

html[data-theme="light"] .nav-link.active:hover {
  background: rgba(0, 0, 0, 0.12) !important;
}

/* Management pages: unify top action buttons to match "Cars for sync" design */
html[data-theme="light"] #toggle-inactive-cars-btn,
html[data-theme="light"] #btn-sync-cars,
html[data-theme="light"] .btn-add[data-type="car"],
html[data-theme="light"] #toggleUsersBtn,
html[data-theme="light"] #btn-sync-users,
html[data-theme="light"] .btn-add[data-type="user"],
html[data-theme="light"] #toggle-status-btn,
html[data-theme="light"] #btn-sync-companies,
html[data-theme="light"] .btn-add[data-type="company"],
html[data-theme="light"] .btn-add[data-type="tag"],
html[data-theme="light"] #toggleTripsBtn,
html[data-theme="light"] #btn-sync-trips,
html[data-theme="light"] .btn-add[data-type="trip"],
html[data-theme="light"] .btn-add[data-type="support-task"] {
  background: var(--btn-secondary-bg) !important;
  color: var(--btn-secondary-text) !important;
  border: 1px solid var(--overlay-contrast) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

html[data-theme="light"] #toggle-inactive-cars-btn:hover,
html[data-theme="light"] #btn-sync-cars:hover,
html[data-theme="light"] .btn-add[data-type="car"]:hover,
html[data-theme="light"] #toggleUsersBtn:hover,
html[data-theme="light"] #btn-sync-users:hover,
html[data-theme="light"] .btn-add[data-type="user"]:hover,
html[data-theme="light"] #toggle-status-btn:hover,
html[data-theme="light"] #btn-sync-companies:hover,
html[data-theme="light"] .btn-add[data-type="company"]:hover,
html[data-theme="light"] .btn-add[data-type="tag"]:hover,
html[data-theme="light"] #toggleTripsBtn:hover,
html[data-theme="light"] #btn-sync-trips:hover,
html[data-theme="light"] .btn-add[data-type="trip"]:hover,
html[data-theme="light"] .btn-add[data-type="support-task"]:hover,
html[data-theme="light"] #toggle-inactive-cars-btn:focus,
html[data-theme="light"] #btn-sync-cars:focus,
html[data-theme="light"] .btn-add[data-type="car"]:focus,
html[data-theme="light"] #toggleUsersBtn:focus,
html[data-theme="light"] #btn-sync-users:focus,
html[data-theme="light"] .btn-add[data-type="user"]:focus,
html[data-theme="light"] #toggle-status-btn:focus,
html[data-theme="light"] #btn-sync-companies:focus,
html[data-theme="light"] .btn-add[data-type="company"]:focus,
html[data-theme="light"] .btn-add[data-type="tag"]:focus,
html[data-theme="light"] #toggleTripsBtn:focus,
html[data-theme="light"] #btn-sync-trips:focus,
html[data-theme="light"] .btn-add[data-type="trip"]:focus,
html[data-theme="light"] .btn-add[data-type="support-task"]:focus,
html[data-theme="light"] #toggle-inactive-cars-btn:active,
html[data-theme="light"] #btn-sync-cars:active,
html[data-theme="light"] .btn-add[data-type="car"]:active,
html[data-theme="light"] #toggleUsersBtn:active,
html[data-theme="light"] #btn-sync-users:active,
html[data-theme="light"] .btn-add[data-type="user"]:active,
html[data-theme="light"] #toggle-status-btn:active,
html[data-theme="light"] #btn-sync-companies:active,
html[data-theme="light"] .btn-add[data-type="company"]:active,
html[data-theme="light"] .btn-add[data-type="tag"]:active,
html[data-theme="light"] #toggleTripsBtn:active,
html[data-theme="light"] #btn-sync-trips:active,
html[data-theme="light"] .btn-add[data-type="trip"]:active,
html[data-theme="light"] .btn-add[data-type="support-task"]:active {
  background: var(--btn-secondary-hover) !important;
  color: var(--btn-secondary-text) !important;
  border-color: var(--color-border-default) !important;
  transform: none !important;
  box-shadow: none !important;
}

html[data-theme="light"] #toggle-inactive-cars-btn .btn-label,
html[data-theme="light"] #btn-sync-cars .btn-label,
html[data-theme="light"] .btn-add[data-type="car"] .btn-label,
html[data-theme="light"] #toggleUsersBtn .btn-label,
html[data-theme="light"] #btn-sync-users .btn-label,
html[data-theme="light"] .btn-add[data-type="user"] .btn-label,
html[data-theme="light"] #toggle-status-btn .btn-label,
html[data-theme="light"] #btn-sync-companies .btn-label,
html[data-theme="light"] .btn-add[data-type="company"] .btn-label,
html[data-theme="light"] .btn-add[data-type="tag"] .btn-label,
html[data-theme="light"] #toggleTripsBtn .btn-label,
html[data-theme="light"] #btn-sync-trips .btn-label,
html[data-theme="light"] .btn-add[data-type="trip"] .btn-label,
html[data-theme="light"] .btn-add[data-type="support-task"] .btn-label {
  display: none !important;
}

/* Table headers must be black in light theme */
html[data-theme="light"] table th,
html[data-theme="light"] th {
  color: #000000 !important;
}

html[data-theme="light"] .spinner::before,
html[data-theme="light"] .loader::before {
  border-top-color: var(--color-accent-primary);
  border-right-color: rgba(47, 128, 237, 0.32);
}

/* Force remaining accent/info text usages to black in light theme */
html[data-theme="light"] .visible-count-number-ref,
html[data-theme="light"] .visible-count-number-ref-bottom,
html[data-theme="light"] #aiAssistantModal .markdown-body a,
html[data-theme="light"] .violation-score,
html[data-theme="light"] .violation-points,
html[data-theme="light"] .driver-name i,
html[data-theme="light"] .driver-phone i {
  color: #000000 !important;
}

/* Catch inline style color assignments that still use accent/info tokens */
html[data-theme="light"] [style*="color: var(--color-accent-primary)"],
html[data-theme="light"] [style*="color:var(--color-accent-primary)"],
html[data-theme="light"] [style*="color: var(--color-accent-hover)"],
html[data-theme="light"] [style*="color:var(--color-accent-hover)"],
html[data-theme="light"] [style*="color: var(--color-status-info)"],
html[data-theme="light"] [style*="color:var(--color-status-info)"],
html[data-theme="light"] [style*="color: var(--btn-primary-bg)"],
html[data-theme="light"] [style*="color:var(--btn-primary-bg)"] {
  color: #000000 !important;
}

/* Reports page: dropdown text must be black in light theme */
html[data-theme="light"] .report-container #report-select,
html[data-theme="light"] .report-container #report-view-select,
html[data-theme="light"] .report-container #weeks-select,
html[data-theme="light"] .report-container #company-select,
html[data-theme="light"] .report-container #car-select,
html[data-theme="light"] .report-container #tag-select {
  color: #000000 !important;
  background: #ffffff !important;
  border-color: var(--color-border-dark) !important;
}

html[data-theme="light"] .report-container .choices,
html[data-theme="light"] .report-container .choices__inner,
html[data-theme="light"] .report-container .choices__input,
html[data-theme="light"] .report-container .choices__item,
html[data-theme="light"] .report-container .choices__item--choice,
html[data-theme="light"] .report-container .choices__list--dropdown .choices__item,
html[data-theme="light"] .report-container .choices__list[aria-expanded] .choices__item {
  color: #000000 !important;
}

html[data-theme="light"] .report-container .choices,
html[data-theme="light"] .report-container .choices__inner,
html[data-theme="light"] .report-container .choices__list--dropdown,
html[data-theme="light"] .report-container .choices__list[aria-expanded],
html[data-theme="light"] .report-container .choices__list--dropdown .choices__item,
html[data-theme="light"] .report-container .choices__list[aria-expanded] .choices__item {
  background: #ffffff !important;
  border-color: var(--color-border-dark) !important;
}

html[data-theme="light"] .report-container .choices__placeholder,
html[data-theme="light"] .report-container .choices.is-disabled .choices__inner,
html[data-theme="light"] .report-container .choices.is-disabled .choices__item {
  color: #000000 !important;
}

/* Reports page: 4 split tables (headers + data rows) in light gray alternation */
html[data-theme="light"] .report-container #summary-left-viewport {
  background-color: #f7f6f2 !important;
  border-right: 1px solid var(--color-border-default) !important;
}

html[data-theme="light"] .report-container #summary-left-head-table thead th,
html[data-theme="light"] .report-container #summary-right-head-table thead th,
html[data-theme="light"] .report-container #summary-table thead th {
  background-color: #f1ede5 !important;
  color: #000000 !important;
  border: 1px solid var(--color-border-default) !important;
  box-shadow: 0 1px 0 var(--color-border-default) !important;
}

/* Keep sort indicators readable on light header */
html[data-theme="light"] .report-container #summary-table thead th[data-orion-sortable="1"]::after,
html[data-theme="light"] .report-container #summary-left-head-table thead th[data-orion-sortable="1"]::after,
html[data-theme="light"] .report-container #summary-right-head-table thead th[data-orion-sortable="1"]::after {
  color: #2f3640 !important;
  text-shadow: none !important;
}

html[data-theme="light"] .report-container #summary-table tbody td,
html[data-theme="light"] .report-container #summary-left-body-table tbody td {
  background-color: #fbfbfb !important;
  border: 1px solid var(--color-border-default) !important;
}

html[data-theme="light"] .report-container #summary-table tbody tr:nth-child(even) td,
html[data-theme="light"] .report-container #summary-left-body-table tbody tr:nth-child(even) td {
  background-color: #f7f6f2 !important;
}

/* Light-specific syntax colors */
html[data-theme="light"] .cm-syntax-string { color: #22863a; }
html[data-theme="light"] .cm-syntax-number { color: #1c1f25; }
html[data-theme="light"] .cm-syntax-atom { color: #1c1f25; }
html[data-theme="light"] .cm-syntax-keyword { color: #d73a49; }
html[data-theme="light"] .cm-syntax-property { color: #24292e; }