/* Site-wide tokens and responsive typography */
:root {
  --font-size-base: 14px;
  --font-size-lg: 16px;

  /* Light theme tokens */
  --color-bg: #ffffff;
  --color-text: #212529;
  --color-card-bg: #ffffff;
  --color-card-border: #e9ecef;
  --color-primary: #0d6efd; /* bootstrap primary */
  --color-muted: #6c757d;
  --focus-ring: 0 0 0 0.15rem rgba(37,140,251,0.25);

  /* Semantic tokens for tables */
  --table-header-bg: #f8f9fa;
  --table-row-bg: #ffffff;
  --table-text: var(--color-text);
  --table-success-bg: #d4edda;
}

/* Prevent transitions during initial theme application to avoid FOUC */
.no-theme-transition *,
.no-theme-transition *::before,
.no-theme-transition *::after {
  transition: none !important;
}

/* Smooth transition for theme changes afterwards */
* {
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

@media (min-width: 768px) {
  :root { --font-size-base: var(--font-size-lg); }
}

/* Dark mode overrides (toggle by adding `dark-mode` on html or body) */
html.dark-mode, body.dark-mode {
  --color-bg: #121212;
  --color-text: #e0e0e0;
  --color-card-bg: #1e1e1e;
  --color-card-border: #2c2c2c;
  --color-primary: #258cfb;
  --color-muted: #a0a0a0;
  --focus-ring: 0 0 0 0.15rem rgba(37,140,251,0.18);

  --table-header-bg: #2c2c2c;
  --table-row-bg: #1e1e1e;
  --table-text: #ffffff;
  --price-color: #66d17a;
  --table-success-bg: #1e4620;
}

/* Basic layout */
html { font-size: var(--font-size-base); position: relative; min-height: 100%; }
body { background-color: var(--color-bg); color: var(--color-text); margin-bottom: 60px; font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; }

/* Buttons and focus styles */
.btn-primary { padding: 10px; font-weight: 500; background-color: var(--color-primary); border-color: var(--color-primary); }
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  outline: none; box-shadow: var(--focus-ring);
}

/* Cards */
.card { border-radius: 12px; background-color: var(--color-card-bg); border: 1px solid var(--color-card-border); box-shadow: 0 6px 18px rgba(18,18,18,0.06); }

/* Form floating placeholders alignment */
.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
  color: var(--color-muted);
  text-align: end;
}
.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* Dark-mode specific form control styling (keeps contrast) */
body.dark-mode .form-control { background-color: #2a2a2a; color: #fff; border: 1px solid #444; }

/* Global loader overlay */
#globalLoader { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 9999; display: flex; justify-content: center; align-items: center; }

/* Table styles */
.table { color: var(--table-text); border-collapse: collapse; width: 100%; border-radius: 8px; overflow: hidden; }
.table th { font-weight: 600; background: var(--table-header-bg); }
.table thead th { position: sticky; top: 0; z-index: 2; background: linear-gradient(180deg, var(--table-header-bg), rgba(0,0,0,0.02)); }
.table tbody tr { background-color: var(--table-row-bg); }
.table-hover tbody tr:hover { /* remove transform to prevent layout shift */ transition: background-color 0.12s ease, transform 0.12s ease; background-color: rgba(0,0,0,0.03); transform: translateY(-2px); }

.table-success { background-color: var(--table-success-bg) !important; color: #000 !important; }
body.dark-mode .table-success { color: #fff !important; }

/* Accessibility helpers */
a:focus { outline: 2px dashed var(--color-primary); outline-offset: 2px; }

/* Keep any other small utility tweaks centralized */
.visually-hidden { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }


/* Merged dark-theme.css - focused dark-mode overrides kept here to avoid separate file */
/* These rules reinforce dark-mode visuals and rely on variables defined above. */

body.dark-mode {
    background-color: var(--color-bg, #121212);
    color: var(--color-text, #e0e0e0);
}

/* Navbar */
/* Ensure navbar and utilities switch correctly in dark mode */
html.dark-mode .navbar,
body.dark-mode .navbar {
    background-color: var(--color-card-bg, #1f1f1f) !important;
}

/* override utility background classes used in layout (e.g. bg-white) */
html.dark-mode .bg-white,
body.dark-mode .bg-white {
    background-color: var(--color-card-bg, #1f1f1f) !important;
}

html.dark-mode .nav-link,
body.dark-mode .nav-link {
    color: var(--color-text, #fff) !important;
}

/* navbar brand and buttons */
html.dark-mode .navbar-brand,
body.dark-mode .navbar-brand,
html.dark-mode .navbar-brand *,
body.dark-mode .navbar-brand * {
    color: var(--color-text, #fff) !important;
}

html.dark-mode .navbar .btn,
body.dark-mode .navbar .btn {
    color: var(--color-text, #fff) !important;
}

/* primary button in navbar should remain bright */
html.dark-mode .btn-primary,
body.dark-mode .btn-primary {
    background-color: var(--color-primary, #258cfb) !important;
    border-color: var(--color-primary, #258cfb) !important;
    color: #fff !important;
}

/* Ensure any elements forced to dark text (e.g. 'text-dark' utility) are readable in dark mode */
body.dark-mode .text-dark {
    color: var(--color-text, #fff) !important;
}

/* Navbar brand should be visible in dark-mode */
body.dark-mode .navbar-brand,
body.dark-mode .navbar-brand > * {
    color: var(--color-text, #fff) !important;
}

/* Cards */
html.dark-mode .card, body.dark-mode .card {
    background-color: var(--color-card-bg, #1e1e1e);
    color: var(--color-text, #fff);
    border-color: var(--color-card-border, #2c2c2c);
}

/* Form controls */
body.dark-mode input,
body.dark-mode .form-control,
body.dark-mode textarea,
body.dark-mode select {
    background-color: #2a2a2a;
    color: var(--color-text, #fff);
    border: 1px solid #444;
}

/* Footer */
body.dark-mode footer,
body.dark-mode .footer {
    background-color: var(--color-card-bg, #1f1f1f);
    color: var(--color-text, #fff);
}

/* Tables */
body.dark-mode .table { color: var(--table-text, #fff); }
body.dark-mode .table thead { background-color: var(--table-header-bg, #2c2c2c); color: var(--table-text, #fff); }
body.dark-mode .table tbody tr { background-color: var(--table-row-bg, #1e1e1e); color: var(--table-text, #fff); }
body.dark-mode .table-hover tbody tr:hover { background-color: rgba(255,255,255,0.03); }

/* Price value styling */
.price-value { color: var(--price-color, #198754); font-weight: 700; letter-spacing: -0.2px; }
body.dark-mode .price-value { color: var(--price-color, #66d17a); }

/* Override Bootstrap table cell backgrounds (Bootstrap sets white on td/ th) */
.table td,
.table th {
  background-color: transparent;
}

/* Stronger dark-mode overrides to ensure cells use dark backgrounds and readable text */
body.dark-mode .table > thead > tr > th {
  background-color: var(--table-header-bg, #2c2c2c) !important;
  color: var(--table-text, #fff) !important;
}

body.dark-mode .table > tbody > tr > td {
  background-color: var(--table-row-bg, #1e1e1e) !important;
  color: var(--table-text, #fff) !important;
  border-color: rgba(255,255,255,0.06) !important;
}

/* Ensure Bootstrap striped rows don't show white in dark mode */
body.dark-mode .table.table-striped tbody tr:nth-of-type(odd) > td,
body.dark-mode .table.table-striped tbody tr:nth-of-type(odd) > th,
body.dark-mode .table.table-striped tbody tr:nth-of-type(even) > td,
body.dark-mode .table.table-striped tbody tr:nth-of-type(even) > th {
  background-color: var(--table-row-bg, #1e1e1e) !important;
  color: var(--table-text, #fff) !important;
}

/* Make sure hover state uses subtle highlight that works on dark backgrounds */
body.dark-mode .table-hover tbody tr:hover > td,
body.dark-mode .table-hover tbody tr:hover > th {
  background-color: rgba(255,255,255,0.03) !important;
}

/* Fallback: force any td/th inside dark-mode table to use dark backgrounds */
body.dark-mode .table td,
body.dark-mode .table th {
  background-color: var(--table-row-bg, #1e1e1e) !important;
  color: var(--table-text, #fff) !important;
}

/* Primary buttons */
body.dark-mode .btn-primary { background-color: var(--color-primary, #258cfb); border-color: var(--color-primary, #258cfb); color: #fff; }

/* Focus visibility */
body.dark-mode a:focus,
body.dark-mode .btn:focus,
body.dark-mode .form-control:focus { box-shadow: var(--focus-ring, 0 0 0 0.15rem rgba(37,140,251,0.18)); outline: none; }