/* ==========================================================================
   lcscCode - Light / Dark theme (Bootstrap 4)
   - Light = original look.
   - Dark  = html[data-theme="dark"] overrides (specific enough to win over the
             inline <style> blocks that live inside individual views).
   ========================================================================== */

:root {
  color-scheme: light;
  --t-bg: #ffffff;
  --t-surface: #ffffff;
  --t-surface-alt: #f4f6f8;
  --t-text: #212529;
  --t-heading: #212529;
  --t-border: #dee2e6;
  --t-primary: #1b6ec2;
  --t-primary-hover: #1861ac;
  --t-primary-contrast: #ffffff;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --t-bg: #0f1520;
  --t-surface: #172032;
  --t-surface-alt: #111a29;
  --t-text: #e2e8f0;
  --t-heading: #eaf0fa;
  --t-border: #2b3a52;
  --t-primary: #5b9bf0;
  --t-primary-hover: #7db1f5;
  --t-primary-contrast: #08121f;
}

html, body { transition: background-color 0.25s ease, color 0.25s ease; }

/* ---------- Toggle button (created by theme.js) ---------- */
.theme-toggle {
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--t-border);
  border-radius: 50%;
  background: var(--t-surface);
  color: var(--t-text);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, background-color 0.25s ease, border-color 0.25s ease;
}
button.theme-toggle,
button.theme-toggle:hover {
  width: 42px;
  padding: 0;
  background: var(--t-surface);
  color: var(--t-text);
  font-weight: 400;
}
.theme-toggle:hover { transform: scale(1.08); border-color: var(--t-primary); }
.theme-toggle:focus { outline: none; box-shadow: 0 0 0 3px rgba(91, 155, 240, 0.45); }

/* ==========================================================================
   DARK MODE
   ========================================================================== */
html[data-theme="dark"] body { background-color: var(--t-bg); color: var(--t-text); }
html[data-theme="dark"] a { color: var(--t-primary); }
html[data-theme="dark"] a:hover { color: var(--t-primary-hover); }
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6 { color: var(--t-heading); }
html[data-theme="dark"] hr { border-color: var(--t-border); }
html[data-theme="dark"] .text-muted { color: #93a0b8 !important; }
html[data-theme="dark"] .text-dark { color: var(--t-text) !important; }
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-light { background-color: var(--t-surface) !important; }
html[data-theme="dark"] ::placeholder { color: #7f8ca6 !important; opacity: 1; }

/* ---------- Navbar / footer ---------- */
html[data-theme="dark"] .navbar-light { background-color: var(--t-surface) !important; }
html[data-theme="dark"] .navbar-light .navbar-brand,
html[data-theme="dark"] .navbar-light .navbar-nav .nav-link { color: var(--t-heading); }
html[data-theme="dark"] .navbar-light .navbar-nav .nav-link:hover { color: var(--t-primary); }
html[data-theme="dark"] .border-top,
html[data-theme="dark"] .border-bottom { border-color: var(--t-border) !important; }
html[data-theme="dark"] .box-shadow { box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.4); }
html[data-theme="dark"] .footer { background-color: var(--t-surface-alt); }
html[data-theme="dark"] .footer.text-muted,
html[data-theme="dark"] .footer a { color: #9aa7bf !important; }

/* ---------- Tables ---------- */
html[data-theme="dark"] .table { color: var(--t-text); background-color: transparent; }
html[data-theme="dark"] .table th,
html[data-theme="dark"] .table td,
html[data-theme="dark"] .table thead th { border-color: var(--t-border); }
html[data-theme="dark"] .table thead th { color: var(--t-heading); background-color: var(--t-surface-alt); }
html[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) { background-color: rgba(255, 255, 255, 0.04); }
html[data-theme="dark"] .table-hover tbody tr:hover { background-color: rgba(255, 255, 255, 0.08); color: var(--t-heading); }
html[data-theme="dark"] .table-bordered,
html[data-theme="dark"] .table-bordered th,
html[data-theme="dark"] .table-bordered td { border-color: var(--t-border); }
/* ---------- lcscCode table text readability (dark mode) ---------- */
/* Contextual header rows (table-warning / table-success / table-info) come from
   Bootstrap's contextual colour classes which are too light to read on the
   dark lcscCode theme.  Force them to the same dark background + dark text. */
html[data-theme="dark"] .table tr.table-warning th,
html[data-theme="dark"] .table tr.table-success th,
html[data-theme="dark"] .table tr.table-info th {
    color: var(--t-heading) !important;
    background-color: var(--t-surface-alt) !important;
    border-color: var(--t-border) !important;
}

/* ---------- Forms ---------- */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .custom-select,
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
  background-color: #0e1726;
  color: var(--t-text);
  border-color: var(--t-border);
}
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] input:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] select:focus {
  background-color: #13203a;
  color: var(--t-heading);
  border-color: var(--t-primary);
  box-shadow: 0 0 0 0.2rem rgba(91, 155, 240, 0.25);
}
html[data-theme="dark"] .form-control:disabled,
html[data-theme="dark"] .form-control[readonly],
html[data-theme="dark"] input:disabled { background-color: #0a1220; opacity: 0.8; }
html[data-theme="dark"] label,
html[data-theme="dark"] .form-text { color: var(--t-text); }

/* ---------- Buttons ---------- */
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .nav-pills .nav-link.active,
html[data-theme="dark"] .nav-pills .show > .nav-link {
  background-color: var(--t-primary);
  border-color: var(--t-primary);
  color: var(--t-primary-contrast);
}
html[data-theme="dark"] .btn-primary:hover,
html[data-theme="dark"] .btn-primary:focus { background-color: var(--t-primary-hover); border-color: var(--t-primary-hover); color: var(--t-primary-contrast); }
html[data-theme="dark"] .btn-secondary { background-color: #3a4763; border-color: #3a4763; color: #fff; }
html[data-theme="dark"] .btn-secondary:hover { background-color: #4a5a7c; border-color: #4a5a7c; }
html[data-theme="dark"] .btn-success { background-color: #2e9e5b; border-color: #2e9e5b; color: #fff; }
html[data-theme="dark"] .btn-danger { background-color: #d9444a; border-color: #d9444a; color: #fff; }
html[data-theme="dark"] .btn-warning { background-color: #e0a526; border-color: #e0a526; color: #1b1b1b; }
html[data-theme="dark"] .btn-info { background-color: #2fa4c7; border-color: #2fa4c7; color: #08141a; }
html[data-theme="dark"] .btn-light { background-color: #26344f; border-color: #26344f; color: var(--t-heading); }
html[data-theme="dark"] .btn-light:hover { background-color: #314264; border-color: #314264; color: #fff; }
html[data-theme="dark"] .btn-outline-primary { color: var(--t-primary); border-color: var(--t-primary); }
html[data-theme="dark"] .btn-outline-primary:hover { background-color: var(--t-primary); color: var(--t-primary-contrast); }
html[data-theme="dark"] .btn-outline-secondary { color: #b4bfd5; border-color: #4a5a7c; }
html[data-theme="dark"] .btn-outline-secondary:hover { background-color: #4a5a7c; color: #fff; }
html[data-theme="dark"] .nav-pills .nav-link { background-color: #26344f; color: #cdd5e4; }

/* ---------- Cards / alerts ---------- */
html[data-theme="dark"] .card,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .list-group-item { background-color: var(--t-surface); color: var(--t-text); border-color: var(--t-border); }
html[data-theme="dark"] .card-header,
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer { background-color: var(--t-surface-alt); border-color: var(--t-border); color: var(--t-heading); }
html[data-theme="dark"] .close { color: var(--t-heading); text-shadow: none; }
html[data-theme="dark"] .alert { border-color: var(--t-border); }
html[data-theme="dark"] .alert-success { background-color: #12301f; color: #a9e3c0; border-color: #1f5636; }
html[data-theme="dark"] .alert-danger { background-color: #3a1519; color: #f4b3b7; border-color: #6a2a30; }
html[data-theme="dark"] .alert-warning { background-color: #3a2e0f; color: #f1d58b; border-color: #6b551a; }
html[data-theme="dark"] .alert-info,
html[data-theme="dark"] .alert-primary { background-color: #12273d; color: #a9d0f2; border-color: #1f4a73; }
html[data-theme="dark"] .alert-heading,
html[data-theme="dark"] .alert h4 { color: inherit; }
html[data-theme="dark"] .alert hr { border-color: currentColor; opacity: 0.25; }

/* ---------- Standalone pages (Login / Admin) ---------- */
html[data-theme="dark"] .main-block { background-image: linear-gradient(rgba(6, 10, 18, 0.6), rgba(6, 10, 18, 0.6)) !important; }
html[data-theme="dark"] .main-block form {
  background: var(--t-surface);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
  border: 1px solid var(--t-border);
  border-radius: 8px;
}
html[data-theme="dark"] .main-block h1 { color: var(--t-heading) !important; }
html[data-theme="dark"] .main-block p,
html[data-theme="dark"] .main-block label { color: var(--t-text); }
html[data-theme="dark"] .main-block button { background-image: linear-gradient(rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.18)); color: #fff; }
html[data-theme="dark"] .main-block button:hover { background-image: linear-gradient(rgba(0, 0, 0, 0.32), rgba(0, 0, 0, 0.32)); }

/* ---------- Inline colours used by the views become readable on dark ---------- */
html[data-theme="dark"] [style*="color:black"],
html[data-theme="dark"] [style*="color: black"] { color: var(--t-text) !important; }

/* Tracker tables in dark mode: light text so it's readable on the dark page bg.
   (Row backgrounds white/pink/orange are handled by the view's inline bg styles.) */
html[data-theme="dark"] #trackTable td,
html[data-theme="dark"] #trackTable span,
html[data-theme="dark"] #trackTable2 td,
html[data-theme="dark"] #trackTable2 span {
    color: var(--t-text) !important;
}

/* Keep inline blue text (e.g. Company Short Name) readable/colored in dark mode. */
html[data-theme="dark"] #trackTable span[style*="color:blue"],
html[data-theme="dark"] #trackTable td[style*="color:blue"],
html[data-theme="dark"] #trackTable2 span[style*="color:blue"],
html[data-theme="dark"] #trackTable2 td[style*="color:blue"] {
    color: #7db1f5 !important;
}

/* Keep inline red/green/orange text (e.g. Notpass/Pass/Reject counts) readable/colored in dark mode. */
html[data-theme="dark"] #trackTable span[style*="color:red"],
html[data-theme="dark"] #trackTable td[style*="color:red"],
html[data-theme="dark"] #trackTable2 span[style*="color:red"],
html[data-theme="dark"] #trackTable2 td[style*="color:red"] {
    color: #ff7b80 !important;
}
html[data-theme="dark"] #trackTable span[style*="color:green"],
html[data-theme="dark"] #trackTable td[style*="color:green"],
html[data-theme="dark"] #trackTable2 span[style*="color:green"],
html[data-theme="dark"] #trackTable2 td[style*="color:green"] {
    color: #5fd38a !important;
}
html[data-theme="dark"] #trackTable span[style*="color:orange"],
html[data-theme="dark"] #trackTable td[style*="color:orange"],
html[data-theme="dark"] #trackTable2 span[style*="color:orange"],
html[data-theme="dark"] #trackTable2 td[style*="color:orange"] {
    color: #ffb84d !important;
}

html[data-theme="dark"] [style*="color:blue"],
html[data-theme="dark"] [style*="color: blue"] { color: #7db1f5 !important; }
html[data-theme="dark"] [style*="color:darkblue"],
html[data-theme="dark"] [style*="color: darkblue"] { color: #8fb4f0 !important; }
html[data-theme="dark"] [style*="color:darkcyan"],
html[data-theme="dark"] [style*="color: darkcyan"] { color: #4fd1d9 !important; }
html[data-theme="dark"] [style*="color:red"],
html[data-theme="dark"] [style*="color: red"] { color: #ff7b80 !important; }
html[data-theme="dark"] [style*="color:crimson"] { color: #ff6f8a !important; }
html[data-theme="dark"] [style*="color:green"],
html[data-theme="dark"] [style*="color: green"] { color: #5fd38a !important; }
html[data-theme="dark"] [style*="color:orange"],
html[data-theme="dark"] [style*="color: orange"] { color: #ffb84d !important; }