/* ═══════════════════════════════════════════════════════════════
   THEME VARIABLES
   Light: #FFF8F0 bg · #1A1A1A text · #101828 sidebar
   Dark:  #101828 bg · #FFF8F0 text · #0A1020 sidebar
   Accent (both): #EB0A1E red
═══════════════════════════════════════════════════════════════ */

:root,
[data-theme="light"] {
  /* Surfaces */
  --app-bg:            #FFF8F0;
  --app-surface:       #FFFFFF;
  --app-surface-2:     #F5EDE4;
  --app-surface-hover: #EDE3D8;

  /* Sidebar (light in light mode, dark in dark mode) */
  --app-sidebar:       #FFFFFF;
  --app-sidebar-text:  #374151;
  --app-sidebar-muted: #9CA3AF;

  /* Text */
  --app-text:          #1A1A1A;
  --app-text-muted:    #7A6B5D;

  /* Border / shadow */
  --app-border:        #EAE0D8;
  --app-shadow:        0 1px 5px rgba(16,24,40,0.08);
  --app-shadow-md:     0 4px 16px rgba(16,24,40,0.12);

  /* Accent */
  --app-accent:        #EB0A1E;
  --app-accent-hover:  #C5081A;
  --app-accent-muted:  rgba(235,10,30,0.12);

  /* Table */
  --app-table-head:    #1A1A1A;
  --app-table-head-text: #FFFFFF;
  --app-table-stripe:  #FBF3EC;
  --app-table-border:  #EAE0D8;

  /* Inputs */
  --app-input-bg:      #FFFFFF;
  --app-input-border:  #D6CCC4;
  --app-input-focus:   rgba(235,10,30,0.25);

  /* Metric card */
  --app-metric-bg:     #FFFFFF;

  /* Auth page gradient */
  --app-auth-grad-a:   #101828;
  --app-auth-grad-b:   #1C2A3E;

  /* Bootstrap CSS variable overrides */
  --bs-body-bg:          #FFF8F0;
  --bs-body-color:       #1A1A1A;
  --bs-secondary-color:  #7A6B5D;
  --bs-card-bg:          #FFFFFF;
  --bs-border-color:     #EAE0D8;
  --bs-secondary-bg:     #F5EDE4;
  --bs-tertiary-bg:      #EDE3D8;
  --bs-emphasis-color:   #1A1A1A;
}

[data-theme="dark"] {
  /* Surfaces */
  --app-bg:            #101828;
  --app-surface:       #1C2535;
  --app-surface-2:     #243248;
  --app-surface-hover: #2C3D58;

  /* Sidebar (slightly darker than page bg) */
  --app-sidebar:       #0A1020;
  --app-sidebar-text:  #B8C4D4;
  --app-sidebar-muted: #5A6A80;

  /* Text */
  --app-text:          #FFF8F0;
  --app-text-muted:    #8FA4BE;

  /* Border / shadow */
  --app-border:        #263348;
  --app-shadow:        0 1px 6px rgba(0,0,0,0.35);
  --app-shadow-md:     0 4px 20px rgba(0,0,0,0.45);

  /* Accent */
  --app-accent:        #EB0A1E;
  --app-accent-hover:  #FF2035;
  --app-accent-muted:  rgba(235,10,30,0.18);

  /* Table */
  --app-table-head:    #0A1020;
  --app-table-head-text: #D8E4F0;
  --app-table-stripe:  #1A2840;
  --app-table-border:  #263348;

  /* Inputs */
  --app-input-bg:      #1C2535;
  --app-input-border:  #2E4060;
  --app-input-focus:   rgba(235,10,30,0.3);

  /* Metric card */
  --app-metric-bg:     #1C2535;

  /* Auth page gradient */
  --app-auth-grad-a:   #060E1C;
  --app-auth-grad-b:   #101828;

  /* Bootstrap CSS variable overrides */
  --bs-body-bg:          #101828;
  --bs-body-color:       #FFF8F0;
  --bs-secondary-color:  #8FA4BE;
  --bs-card-bg:          #1C2535;
  --bs-border-color:     #263348;
  --bs-secondary-bg:     #243248;
  --bs-tertiary-bg:      #1C2535;
  --bs-emphasis-color:   #FFF8F0;
  --bs-heading-color:    #FFF8F0;
  --bs-link-color:       #6EB0FF;
  --bs-link-hover-color: #90C4FF;
}

/* ═══════════════════════════════════════════════════════════════
   GLOBAL
═══════════════════════════════════════════════════════════════ */

body {
  background: var(--app-bg);
  color: var(--app-text);
  font-size: 0.9rem;
  transition: background 0.2s, color 0.2s;
}

/* ═══════════════════════════════════════════════════════════════
   LAYOUT
═══════════════════════════════════════════════════════════════ */

.sidebar {
  width: 240px;
  min-height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background: var(--app-sidebar);
  overflow-y: auto;
  z-index: 100;
  transition: width 0.25s ease, background 0.2s;
}

body.sidebar-collapsed .sidebar {
  width: 0;
  overflow: hidden;
}

body.sidebar-collapsed .main-content {
  margin-left: 0;
}

[data-theme="light"] .sidebar {
  border-right: 1px solid #EAE0D8;
  box-shadow: 2px 0 8px rgba(0,0,0,0.04);
}

.main-content {
  margin-left: 240px;
  padding: 16px 28px 28px 8px;
  min-height: 100vh;
  transition: margin-left 0.25s ease;
}

/* Toggle button column */
.toggle-col {
  flex-shrink: 0;
  width: 56px;
  padding-top: 2px;
}

/* Page content column */
.content-col {
  flex: 1;
  min-width: 0;
}

/* Sidebar toggle button */
#sidebar-toggle {
  width: 32px;
  height: 32px;
  background: var(--app-accent);
  border: none;
  border-radius: 6px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  font-size: 0.9rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  flex-shrink: 0;
}

#sidebar-toggle:hover {
  background: var(--app-accent-hover);
}

/* ═══════════════════════════════════════════════════════════════
   SIDEBAR
═══════════════════════════════════════════════════════════════ */

.sidebar-divider {
  border-color: rgba(255,255,255,0.08);
  margin: 0 12px;
}

[data-theme="light"] .sidebar-divider {
  border-color: rgba(0,0,0,0.08);
}

.sidebar-link {
  color: var(--app-sidebar-text) !important;
  border-radius: 8px;
  padding: 8px 12px;
  transition: background 0.15s, color 0.15s;
  font-size: 0.87rem;
  text-decoration: none;
  display: block;
}

.sidebar-link:hover {
  background: var(--app-accent-muted);
  color: #fff !important;
}

[data-theme="light"] .sidebar-link:hover {
  background: rgba(0,0,0,0.06);
  color: var(--app-sidebar-text) !important;
}

.sidebar-link.active {
  background: var(--app-accent);
  color: #fff !important;
  font-weight: 600;
}

/* Theme toggle button — hidden (dark mode disabled) */
.theme-toggle-btn {
  visibility: hidden;
  pointer-events: none;
  height: 0;
  padding: 0;
  margin: 0;
  border: none;
  overflow: hidden;
}

/* Keep original styles as dead code below */
.theme-toggle-btn-unused {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--app-sidebar-text) !important;
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 0.83rem;
  text-align: left;
  width: 100%;
  transition: background 0.15s, border-color 0.15s;
  cursor: pointer;
}

.theme-toggle-btn:hover {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.2);
  color: #fff !important;
}

[data-theme="light"] .theme-toggle-btn {
  border-color: rgba(0,0,0,0.12);
}

[data-theme="light"] .theme-toggle-btn:hover {
  background: rgba(0,0,0,0.06);
  border-color: rgba(0,0,0,0.2);
  color: var(--app-sidebar-text) !important;
}

/* ═══════════════════════════════════════════════════════════════
   PAGE TITLE
═══════════════════════════════════════════════════════════════ */

.page-title {
  color: var(--app-accent);
  font-weight: 700;
  margin-bottom: 4px;
}

/* ═══════════════════════════════════════════════════════════════
   CARDS
═══════════════════════════════════════════════════════════════ */

.card {
  background: var(--app-surface) !important;
  border: 1px solid var(--app-border) !important;
  box-shadow: var(--app-shadow);
  border-radius: 10px;
  transition: background 0.2s, border-color 0.2s;
}

.card-header {
  border-radius: 10px 10px 0 0 !important;
  border-bottom: 1px solid var(--app-border) !important;
}

.card-header:not(.bg-danger) {
  background: var(--app-surface-2) !important;
  color: var(--app-text) !important;
}

/* ═══════════════════════════════════════════════════════════════
   FORMS
═══════════════════════════════════════════════════════════════ */

.form-control,
.form-select {
  background-color: var(--app-input-bg) !important;
  border-color: var(--app-input-border) !important;
  color: var(--app-text) !important;
  transition: background 0.2s, border-color 0.15s;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--app-accent) !important;
  box-shadow: 0 0 0 3px var(--app-input-focus) !important;
  background-color: var(--app-input-bg) !important;
}

.form-control::placeholder {
  color: var(--app-text-muted);
  opacity: 0.7;
}

/* Chevron indicator for typable datalist inputs */
input[list] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%239CA3AF'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  background-size: 10px 6px;
  padding-right: 28px !important;
  cursor: pointer;
}

.form-label {
  color: var(--app-text);
}

.form-check-input:checked {
  background-color: var(--app-accent);
  border-color: var(--app-accent);
}

/* ═══════════════════════════════════════════════════════════════
   TABLES
═══════════════════════════════════════════════════════════════ */

.results-table {
  font-size: 0.82rem;
  color: var(--app-text);
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--app-table-border);
  border-radius: 8px;
  overflow: clip;
}

/* Themed red header matching card headers */
.table-app-head th {
  background: var(--app-accent) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,0.15) !important;
  border-right: 1px solid rgba(255,255,255,0.3) !important;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 8px 10px !important;
}
.table-app-head th:last-child {
  border-right: none !important;
}

.results-table td {
  background: var(--app-surface);
  border-color: var(--app-table-border) !important;
  border-top: 1px solid var(--app-table-border);
  border-right: 1px solid var(--app-table-border);
  vertical-align: top;
  text-align: left;
  padding: 6px 10px !important;
}
.results-table td:last-child {
  border-right: none;
}

.results-table tbody tr:nth-child(even) td {
  background: var(--app-table-stripe);
}

.results-table tbody tr:hover td {
  background: var(--app-surface-hover) !important;
}

/* Main data table wrapper: cap at ~20 rows, scroll beyond */
.table-responsive:has(> table.results-table) {
  max-height: 730px;
  overflow-y: auto;
}

/* View All Columns fullscreen modal — table fills all available height, no empty space */
#allColsModal .modal-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}
#allColsModal .modal-body {
  flex: 1 1 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0.5rem !important;
}
#allColsModal .modal-body .table-responsive {
  flex: 1 1 0;
  max-height: none !important;
  overflow-y: auto;
  margin-top: 0;
}

/* Sticky header row — stays at top while body scrolls */
.results-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
}

/* Freeze Item column — sticky left like Excel */
.results-table thead th.freeze-col {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 4;                        /* above both sticky header and sticky column */
  box-shadow: 2px 0 4px rgba(0,0,0,0.12);
  width: 1px;                        /* shrink to minimum content width */
  white-space: nowrap;
}
.results-table tbody td.freeze-col {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--app-surface) !important;
  box-shadow: 2px 0 3px rgba(0,0,0,0.06);
  width: 1px;
  white-space: nowrap;
}
.results-table tbody tr:nth-child(even) td.freeze-col {
  background: var(--app-table-stripe) !important;
}
.results-table tbody tr:hover td.freeze-col {
  background: var(--app-surface-hover) !important;
}

/* Scrollable table wrapper — shows ~5 rows then scrolls; header stays sticky */
.table-scroll-5 .table-responsive {
  max-height: 220px;
  overflow-y: auto;
}
.table-scroll-5 .table-app-head th {
  position: sticky;
  top: 0;
  z-index: 2;
}

.cell-text {
  max-width: 220px;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: top;
  color: var(--app-text);
}

.modal-fullscreen .results-table th {
  white-space: nowrap;
}

/* Wrap class for long-text columns — works in all tables */
.cell-wrap {
  max-width: 280px;
  white-space: normal;
  word-break: break-word;
  display: inline-block;
  vertical-align: top;
}

/* Slightly wider wrap inside fullscreen modal */
.modal-fullscreen .cell-wrap {
  max-width: 320px;
  overflow: visible;
  text-overflow: clip;
}

.copy-btn {
  opacity: 0;
  transition: opacity 0.15s;
  font-size: 0.7rem;
  padding: 1px 5px !important;
  line-height: 1.4;
  border-color: var(--app-border) !important;
  color: var(--app-text-muted) !important;
}

td:hover .copy-btn {
  opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════
   ALERTS
═══════════════════════════════════════════════════════════════ */

.alert {
  border-radius: 8px;
}

[data-theme="dark"] .alert-info {
  background: rgba(110,176,255,0.12);
  border-color: rgba(110,176,255,0.2);
  color: #A8CCEE;
}

[data-theme="dark"] .alert-success {
  background: rgba(25,180,90,0.12);
  border-color: rgba(25,180,90,0.2);
  color: #7DCCA0;
}

[data-theme="dark"] .alert-warning {
  background: rgba(240,160,30,0.12);
  border-color: rgba(240,160,30,0.2);
  color: #D4AA60;
}

[data-theme="dark"] .alert-danger {
  background: rgba(235,10,30,0.15);
  border-color: rgba(235,10,30,0.25);
  color: #F08090;
}

/* ═══════════════════════════════════════════════════════════════
   TABS
═══════════════════════════════════════════════════════════════ */

.nav-tabs {
  border-color: var(--app-border);
}

.nav-tabs .nav-link {
  color: var(--app-text-muted);
  border-color: transparent;
}

.nav-tabs .nav-link:hover {
  color: var(--app-text);
  border-color: var(--app-border);
}

.nav-tabs .nav-link.active {
  background: var(--app-surface);
  color: var(--app-accent);
  border-color: var(--app-border) var(--app-border) var(--app-surface);
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════
   METRIC CARDS
═══════════════════════════════════════════════════════════════ */

.metric-card {
  background: var(--app-metric-bg) !important;
  border: 1px solid var(--app-border) !important;
  border-radius: 10px;
  box-shadow: var(--app-shadow);
  transition: background 0.2s;
}

/* ═══════════════════════════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════════════════════════ */

.btn-danger,
.btn-danger:focus {
  background-color: var(--app-accent);
  border-color: var(--app-accent);
  color: #fff;
}

.btn-danger:hover,
.btn-danger:active {
  background-color: var(--app-accent-hover);
  border-color: var(--app-accent-hover);
}

.btn-outline-danger {
  color: var(--app-accent);
  border-color: var(--app-accent);
}

.btn-outline-danger:hover {
  background-color: var(--app-accent);
  border-color: var(--app-accent);
  color: #fff;
}

/* ═══════════════════════════════════════════════════════════════
   BADGES
═══════════════════════════════════════════════════════════════ */

.badge.bg-secondary {
  background-color: var(--app-surface-2) !important;
  color: var(--app-text-muted) !important;
  border: 1px solid var(--app-border);
}

/* ═══════════════════════════════════════════════════════════════
   SELECT MULTIPLE (car models)
═══════════════════════════════════════════════════════════════ */

select[multiple] {
  background-color: var(--app-input-bg) !important;
  color: var(--app-text) !important;
  border-color: var(--app-input-border) !important;
}

select[multiple] option:checked {
  background: var(--app-accent);
  color: #fff;
}

/* ═══════════════════════════════════════════════════════════════
   AUTH PAGES
═══════════════════════════════════════════════════════════════ */

.auth-body {
  background: linear-gradient(135deg, #FFF8F0 0%, #F5EDE4 100%);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.auth-card {
  width: 100%;
  max-width: 420px;
  border-radius: 16px;
  background: #FFFFFF;
  color: #1A1A1A;
  border: none !important;
  box-shadow: 0 8px 40px rgba(0,0,0,0.25) !important;
}

.auth-card .form-label { color: #1A1A1A; }
.auth-card .form-control { background: #FFFFFF; color: #1A1A1A; border-color: #D0D5DD; }
.auth-card .form-control::placeholder { color: #9AA4B2; }
.auth-card .text-muted { color: #6B7280 !important; }

/* ═══════════════════════════════════════════════════════════════
   MISC
═══════════════════════════════════════════════════════════════ */

.text-muted {
  color: var(--app-text-muted) !important;
}

code {
  background: var(--app-surface-2);
  color: var(--app-accent);
  padding: 2px 6px;
  border-radius: 4px;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .sidebar         { display: none; }
  .main-content    { margin-left: 0; padding: 16px; }
  .toggle-col      { display: none; }
}

[data-theme="dark"] .results-table {
  border-color: var(--app-table-border);
}

/* ═══════════════════════════════════════════════════════════════
   MODAL Z-INDEX STACKING
   srchEditModal is raised to 1060 so it can sit on top of
   allColsModal (default 1055). confirmSaveModal must be above that
   so it is always reachable when triggered from srchEditModal.
═══════════════════════════════════════════════════════════════ */
#confirmSaveModal {
  --bs-modal-zindex: 1070;
}

/* ═══════════════════════════════════════════════════════════════
   MODAL BACKDROP SHIM
   srchEditModal uses data-bs-backdrop="false" (so it can stack on
   top of allColsModal without a double-backdrop fight). We dim the
   full-screen modal div itself instead — it is already position:fixed
   and fills the viewport, so this achieves the same visual effect.
═══════════════════════════════════════════════════════════════ */
#srchEditModal.show {
  background-color: rgba(0, 0, 0, 0.45);
}

/* ═══════════════════════════════════════════════════════════════
   UNDO TOAST
═══════════════════════════════════════════════════════════════ */
.undo-toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  background: #1a1a1a;
  color: #fff;
  border-radius: 10px;
  padding: 13px 20px 16px;
  display: none;
  align-items: center;
  gap: 14px;
  min-width: 300px;
  max-width: 480px;
  box-shadow: 0 4px 20px rgba(0,0,0,.3);
  animation: toastIn .2s ease;
}
@keyframes toastIn {
  from { opacity:0; transform: translateX(-50%) translateY(10px); }
  to   { opacity:1; transform: translateX(-50%) translateY(0);    }
}
.undo-toast-msg  { flex:1; font-size:.88rem; }
.undo-toast-undo {
  border: 1px solid rgba(255,255,255,.45);
  background: transparent;
  color: #fff;
  border-radius: 5px;
  padding: 3px 13px;
  cursor: pointer;
  font-size: .84rem;
  white-space: nowrap;
  transition: background .15s;
}
.undo-toast-undo:hover { background: rgba(255,255,255,.15); }
.undo-toast-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  border-radius: 0 0 10px 10px;
  background: var(--app-accent);
}