/* =====================================================================
   SRTTS MONO THEME  -  the one place that defines light and dark mode
   Loaded LAST in includes/header.php (app pages only; the public landing page is not touched).

   LIGHT MODE : black letters on a white background
   DARK MODE  : white letters on a black background  (the exact opposite)

   To change the look, edit the colour tokens in sections 1 and 2 only.
   Everything else in the app reads from these tokens.
   Status colours (green / amber / red) are kept on purpose, so
   "Resolved", "Pending" and "Urgent" can still be told apart at a glance.
   ===================================================================== */

/* ---------- 1. LIGHT tokens: black on white ---------- */
:root {
  color-scheme: light;

  --app-bg:        #FFFFFF;
  --surface:       #FFFFFF;
  --surface-2:     #F4F4F4;
  --sidebar-bg:    #FFFFFF;

  --text:          #000000;
  --text-strong:   #000000;
  --text-muted:    #4A4A4A;   /* 8.9 : 1 on white */
  --text-subtle:   #262626;

  --border:        #D4D4D4;
  --border-strong: #8A8A8A;   /* 3.4 : 1, clear field and button edges */
  --input-bg:      #FFFFFF;
  --input-border:  #6B6B6B;

  --brand:         #000000;
  --brand-solid:   #000000;
  --brand-600:     #333333;   /* hover */
  --brand-700:     #000000;
  --brand-100:     #EDEDED;
  --brand-50:      #F5F5F5;
  --brand-10:      rgba(0, 0, 0, .05);
  --brand-active:  rgba(0, 0, 0, .09);
  --brand-ring:    rgba(0, 0, 0, .22);
  --on-brand:      #FFFFFF;   /* text on a black button */
  --accent-cyan:   #404040;
  --accent-violet: #404040;

  --shadow-card:   0 1px 2px rgba(0, 0, 0, .06), 0 2px 10px rgba(0, 0, 0, .05);
  --shadow-bar:    0 1px 0 var(--border);

  /* messages: info is neutral, the other three keep their meaning colour */
  --info-bg:       #F4F4F4;  --info-text:    #1A1A1A;  --info-border:    #BDBDBD;
  --success-bg:    #ECFDF3;  --success-text: #14532D;  --success-border: #86EFAC;
  --warning-bg:    #FFF8E1;  --warning-text: #7A4A00;  --warning-border: #F5D37A;
  --danger-bg:     #FEF2F2;  --danger-text:  #991B1B;  --danger-border:  #FECACA;

  /* status badges */
  --st-amber-bg:   #FFF1C2;  --st-amber-fg:  #5C3B00;  --st-amber-bd:  #E8C766;
  --st-green-bg:   #DDF5E7;  --st-green-fg:  #0F5132;  --st-green-bd:  #8FD3AE;
  --st-red-bg:     #FDE3E3;  --st-red-fg:    #8A1C1C;  --st-red-bd:    #F0A3A3;

  /* charts */
  --c-pending:     #E0A21B;
  --c-progress:    #404040;
  --c-resolved:    #1E8E5F;
  --c-closed:      #A6A6A6;
  --ch-dot:        #FFFFFF;
}

/* ---------- 2. DARK tokens: white on black ---------- */
html[data-theme="dark"] {
  color-scheme: dark;

  --app-bg:        #000000;
  --surface:       #0B0B0B;   /* cards sit just above the black page, edges show */
  --surface-2:     #171717;
  --sidebar-bg:    #000000;

  --text:          #FFFFFF;
  --text-strong:   #FFFFFF;
  --text-muted:    #B3B3B3;   /* 10 : 1 on black */
  --text-subtle:   #DEDEDE;

  --border:        #2E2E2E;
  --border-strong: #707070;
  --input-bg:      #000000;
  --input-border:  #8F8F8F;

  --brand:         #FFFFFF;
  --brand-solid:   #FFFFFF;
  --brand-600:     #D6D6D6;
  --brand-700:     #FFFFFF;
  --brand-100:     #222222;
  --brand-50:      #121212;
  --brand-10:      rgba(255, 255, 255, .08);
  --brand-active:  rgba(255, 255, 255, .15);
  --brand-ring:    rgba(255, 255, 255, .30);
  --on-brand:      #000000;   /* text on a white button */
  --accent-cyan:   #CFCFCF;
  --accent-violet: #CFCFCF;

  --shadow-card:   none;
  --shadow-bar:    0 1px 0 var(--border);

  --info-bg:       #171717;  --info-text:    #EDEDED;  --info-border:    #4A4A4A;
  --success-bg:    #0D2418;  --success-text: #8FE0B5;  --success-border: #1F5A3F;
  --warning-bg:    #2A2008;  --warning-text: #F3CF7A;  --warning-border: #5C4818;
  --danger-bg:     #2B1114;  --danger-text:  #FFA9AE;  --danger-border:  #6B2A31;

  --st-amber-bg:   #3A2E10;  --st-amber-fg:  #F5CC6B;  --st-amber-bd:  #6B5517;
  --st-green-bg:   #0F2E21;  --st-green-fg:  #8FE0B5;  --st-green-bd:  #1F5A3F;
  --st-red-bg:     #3A1519;  --st-red-fg:    #FFA9AE;  --st-red-bd:    #6B2A31;

  --c-pending:     #F0BC4A;
  --c-progress:    #D9D9D9;
  --c-resolved:    #3FBF8A;
  --c-closed:      #6E6E6E;
  --ch-dot:        #0B0B0B;
}

/* ---------- 2b. Older variable names used by payment.css and some PHP pages ----------
   These names were used but never defined, so they fell back to light colours in dark mode.
   They are declared on BOTH selectors so they resolve against the right mode's tokens. */
:root,
html[data-theme="dark"] {
  --color-surface:     var(--surface);
  --color-surface-alt: var(--surface-2);
  --color-border:      var(--border);
  --color-primary:     var(--text-strong);
  --color-heading:     var(--text-strong);
  --color-text:        var(--text);
  --color-text-muted:  var(--text-muted);
  --radius:            10px;
}

/* ---------- 3. Page basics ---------- */
html { background: var(--app-bg); }

body.page-app,
html[data-theme="dark"] body.page-app {
  background: var(--app-bg);          /* plain white / plain black: no glow, no gradient */
  background-image: none;
  color: var(--text);
  accent-color: var(--text-strong);   /* checkboxes and radio buttons follow the theme */
}

body.page-app ::selection { background: var(--text-strong); color: var(--on-brand); }

/* One clear focus ring everywhere (keyboard users can always see where they are) */
body.page-app :focus-visible,
html[data-theme="dark"] body.page-app :focus-visible {
  outline: 3px solid var(--text-strong);
  outline-offset: 2px;
  box-shadow: none;
}

/* Links: black / white, underlined so they never rely on colour alone */
body.page-app .app-content a:not(.btn):not(.dx-tile):not(.dx-ttl):not(.qa):not(.req):not(.no-ul):not([class*="tk-"]):not([class*="sb-"]) {
  color: var(--text-strong);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
body.page-app .app-content a:not(.btn):not(.dx-tile):not(.no-ul):not([class*="tk-"]):not([class*="sb-"]):hover {
  text-decoration-thickness: 2px;
}
body.page-app .app-content a.dx-ttl,
body.page-app .app-content a.dx-rowlink { color: var(--text-strong); font-weight: 700; text-decoration: none; }
body.page-app .app-content a.dx-ttl:hover,
body.page-app .app-content a.dx-rowlink:hover { text-decoration: underline; }
body.page-app a.btn, body.page-app a.btn:hover { text-decoration: none; }

/* page header band */
body.page-app .app-content > .page-header:first-child,
html[data-theme="dark"] body.page-app .app-content > .page-header:first-child {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: none;
}
body.page-app .app-topbar,
html[data-theme="dark"] body.page-app .app-topbar { background: var(--surface); box-shadow: none; }

/* cards: flat, bordered, same in both modes (no gradient, no blur) */
body.page-app .card,
body.page-app .panel,
body.page-app .chart-box,
body.page-app .stat-card,
body.page-app .dsh-table-wrap,
html[data-theme="dark"] body.page-app .card,
html[data-theme="dark"] body.page-app .panel,
html[data-theme="dark"] body.page-app .chart-box,
html[data-theme="dark"] body.page-app .stat-card,
html[data-theme="dark"] body.page-app .dsh-table-wrap {
  background: var(--surface);
  background-image: none;
  backdrop-filter: none;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
}
body.page-app .card:hover { box-shadow: var(--shadow-card); }
body.page-app .card-footer,
html[data-theme="dark"] body.page-app .card-footer { background: var(--surface-2); }

/* tables */
body.page-app .data-table th { background: var(--surface-2); color: var(--text-subtle); }
body.page-app .data-table tr:nth-child(even) td { background: transparent; }
body.page-app .data-table tbody tr:hover td { background: var(--surface-2); }

/* ---------- 4. Buttons ---------- */
body.page-app .btn-primary,
html[data-theme="dark"] body.page-app .btn-primary {
  background: var(--brand-solid);
  background-image: none;
  color: var(--on-brand);
  border: 1.5px solid var(--brand-solid);
  box-shadow: none;
}
body.page-app .btn-primary:hover,
html[data-theme="dark"] body.page-app .btn-primary:hover {
  background: var(--brand-600);
  border-color: var(--brand-600);
  color: var(--on-brand);
  box-shadow: none;
}

body.page-app .btn-outline,
body.page-app .btn-soft,
html[data-theme="dark"] body.page-app .btn-outline,
html[data-theme="dark"] body.page-app .btn-soft {
  background: var(--surface);
  color: var(--text-strong);
  border: 1.5px solid var(--text-strong);
  box-shadow: none;
}
body.page-app .btn-outline:hover,
body.page-app .btn-soft:hover,
html[data-theme="dark"] body.page-app .btn-outline:hover,
html[data-theme="dark"] body.page-app .btn-soft:hover {
  background: var(--brand-100);
  border-color: var(--text-strong);
}

body.page-app .btn-secondary,
html[data-theme="dark"] body.page-app .btn-secondary {
  background: var(--brand-100);
  color: var(--text-strong);
  border: 1.5px solid var(--border);
}
body.page-app .btn-secondary:hover,
html[data-theme="dark"] body.page-app .btn-secondary:hover { background: var(--brand-active); }

body.page-app .btn:disabled,
body.page-app .btn[disabled],
body.page-app .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

/* ---------- 5. Fields ---------- */
body.page-app .form-control:hover { border-color: var(--text-strong); }
body.page-app .form-control:focus,
html[data-theme="dark"] body.page-app .form-control:focus {
  border-color: var(--text-strong);
  box-shadow: 0 0 0 3px var(--brand-ring);
}
body.page-app .form-group.has-error .form-control { border-color: var(--danger-text); background: var(--danger-bg); }
body.page-app .field-error { color: var(--danger-text); }

/* ---------- 6. Status and priority badges (flat, with an edge, readable in both modes) ---------- */
body.page-app .badge {
  background-image: none;
  border: 1px solid var(--border-strong);
  font-weight: 700;
  box-shadow: none;
}
/* neutral: waiting for a person */
body.page-app .badge-status-review,
body.page-app .badge-status-closed,
body.page-app .badge-priority-normal,
body.page-app .badge-status-default,
html[data-theme="dark"] body.page-app .badge-status-review,
html[data-theme="dark"] body.page-app .badge-status-closed,
html[data-theme="dark"] body.page-app .badge-priority-normal,
html[data-theme="dark"] body.page-app .badge-status-default {
  background: var(--surface-2); color: var(--text-strong); border-color: var(--border-strong);
}
body.page-app .badge-status-closed,
html[data-theme="dark"] body.page-app .badge-status-closed { color: var(--text-muted); }
/* active work: solid, the strongest badge */
body.page-app .badge-status-progress,
html[data-theme="dark"] body.page-app .badge-status-progress {
  background: var(--text-strong); color: var(--on-brand); border-color: var(--text-strong);
}
/* needs attention / money step: amber */
body.page-app .badge-status-submitted,
body.page-app .badge-status-forpay,
body.page-app .badge-status-paypending,
body.page-app .badge-priority-high,
html[data-theme="dark"] body.page-app .badge-status-submitted,
html[data-theme="dark"] body.page-app .badge-status-forpay,
html[data-theme="dark"] body.page-app .badge-status-paypending,
html[data-theme="dark"] body.page-app .badge-priority-high {
  background: var(--st-amber-bg); color: var(--st-amber-fg); border-color: var(--st-amber-bd);
}
/* done / good: green */
body.page-app .badge-status-payverified,
body.page-app .badge-status-ready,
body.page-app .badge-status-claimed,
body.page-app .badge-status-resolved,
html[data-theme="dark"] body.page-app .badge-status-payverified,
html[data-theme="dark"] body.page-app .badge-status-ready,
html[data-theme="dark"] body.page-app .badge-status-claimed,
html[data-theme="dark"] body.page-app .badge-status-resolved {
  background: var(--st-green-bg); color: var(--st-green-fg); border-color: var(--st-green-bd);
}
/* urgent: red */
body.page-app .badge-priority-urgent,
html[data-theme="dark"] body.page-app .badge-priority-urgent {
  background: var(--st-red-bg); color: var(--st-red-fg); border-color: var(--st-red-bd);
}
/* small roles / pills */
body.page-app .user-badge { background: var(--surface-2); color: var(--text-strong); border: 1px solid var(--border-strong); }

/* ---------- 7. Progress: stepper, tracker, timeline, dashboard dots ---------- */
body.page-app .status-stepper li.step-current {
  background: var(--text-strong); background-image: none; color: var(--on-brand);
}
body.page-app .timeline-marker { background: var(--text-strong); border-color: var(--surface); box-shadow: 0 0 0 2px var(--text-strong); }
body.page-app .timeline::before { background: var(--border-strong); }
body.page-app .timeline-content { background: var(--surface); border: 1px solid var(--border); box-shadow: none; }

body.page-app .pay-step-dot { background: var(--surface); color: var(--text-muted); border: 2px solid var(--border-strong); }
body.page-app .pay-step.is-done .pay-step-dot { background: var(--text-strong); border-color: var(--text-strong); color: var(--on-brand); }
body.page-app .pay-step.is-current .pay-step-dot { background: var(--surface); border-color: var(--text-strong); color: var(--text-strong); box-shadow: 0 0 0 4px var(--brand-active); }
body.page-app .pay-step.is-current .pay-step-label { color: var(--text-strong); font-weight: 800; }

body.page-app .dx-steps span { background: var(--border); }
body.page-app .dx-steps span.on { background: var(--text-strong); }

/* ---------- 8. Sidebar ---------- */
aside.app-sidebar.sb,
html[data-theme="dark"] aside.app-sidebar.sb {
  --sb-bg:           var(--sidebar-bg);
  --sb-text:         var(--text-strong);
  --sb-label:        var(--text-muted);
  --sb-icon:         var(--text-strong);
  --sb-muted:        var(--text-muted);
  --sb-border:       var(--border);
  --sb-pop:          var(--surface);
  --sb-pop-border:   var(--border-strong);
  --sb-primary:      var(--text-strong);
  --sb-active-text:  var(--on-brand);
  --sb-hover-tint:   var(--brand-10);
  --sb-active-tint:  var(--text-strong);
  --sb-badge-bg:     var(--text-strong);
  --sb-badge-text:   var(--on-brand);
  --sb-focus:        var(--text-strong);
  --sb-search-bg:    var(--surface-2);
  background: var(--sidebar-bg);
  border-right: 1px solid var(--border);
  box-shadow: none;
}

/* current page: solid black (light) / solid white (dark) pill */
.sb .sb-link.is-active,
.sb .sb-link.is-active:hover,
html[data-theme="dark"] .sb .sb-link.is-active,
html[data-theme="dark"] .sb .sb-link.is-active:hover {
  background: var(--text-strong);
  color: var(--on-brand);
  box-shadow: none;
  outline: 0;
}
.sb .sb-link.is-active .sb-ico,
.sb .sb-link.is-active:hover .sb-ico,
.sb .sb-link.is-active .sb-text { color: var(--on-brand); }
.sb .sb-link:not(.is-active):hover { background: var(--brand-10); color: var(--text-strong); }

/* count badges: red = needs action, amber = waiting, mono = information */
.sb .sb-badge--alert { background: #C92A3A; color: #FFFFFF; }
.sb .sb-badge--warn  { background: #F5A524; color: #1A1100; }
.sb .sb-badge--info  { background: var(--text-strong); color: var(--on-brand); }
.sb .sb-link.is-active .sb-badge--info { background: var(--on-brand); color: var(--text-strong); }
html[data-theme="dark"] .sb .sb-badge--alert { background: #FF6B78; color: #1A0003; }

/* search field and account row */
.sb .sb-search { background: var(--surface-2); border-color: var(--border-strong); }
.sb .sb-search:focus-within { border-color: var(--text-strong); box-shadow: 0 0 0 3px var(--brand-ring); }
.sb .sb-avatar,
html[data-theme="dark"] .sb .sb-avatar { background: var(--text-strong); color: var(--on-brand); box-shadow: none; }

/* dark-mode switch in the account menu */
.sb .sb-track { background: var(--border-strong); }
.sb .sb-track::after { background: var(--surface); }
.sb #themeToggle[aria-checked="true"] .sb-track { background: var(--text-strong); }
.sb #themeToggle[aria-checked="true"] .sb-track::after { background: var(--on-brand); }

/* the logo keeps its original blue colours; in dark mode it sits on a white chip so the navy letters stay readable */
.sb .sb-logo,
.sb .sb-mark { filter: none; }
html[data-theme="dark"] .sb .sb-logo {
  background: #FFFFFF;
  border-radius: 10px;
  padding: 3px 8px;
  box-shadow: none;
  filter: none;
}
html[data-theme="dark"] .sb .sb-mark { background: none; box-shadow: none; filter: none; }

/* ---------- 8b. Compact sidebar: the full admin menu fits without scrolling ----------
   Applies to mouse and trackpad screens. Touch screens keep the big tap targets.
   If the window is still too short, only the menu list scrolls: the logo and the
   account row stay where they are. */
@media (pointer: fine) {
  aside.app-sidebar.sb { padding-top: 6px; }
  .sb .sb-brand  { padding: 12px 16px 8px; }
  .sb .sb-logo   { height: 34px; }
  .sb .sb-search { margin: 0 12px 6px; }
  .sb .sb-search input { height: 36px; font-size: 13.5px; }
  .sb .sb-nav    { padding: 4px 10px 6px; gap: 0; }
  .sb .sb-group + .sb-group { margin-top: 8px; }
  .sb .sb-label  { padding: 0 12px 3px; font-size: .7rem; }
  .sb .sb-list   { gap: 1px; }
  .sb .sb-link   { min-height: 36px; font-size: 14px; gap: 10px; }
  .sb .sb-foot   { padding: 6px 10px; }
  .sb .sb-user   { height: 46px; }
}
@media (pointer: fine) and (max-height: 700px) {
  .sb .sb-brand  { padding: 8px 16px 6px; }
  .sb .sb-logo   { height: 30px; }
  .sb .sb-search input { height: 34px; }
  .sb .sb-link   { min-height: 33px; }
  .sb .sb-label  { padding-bottom: 1px; }
  .sb .sb-foot   { padding: 4px 10px; }
  .sb .sb-user   { height: 40px; }
}
html:not(.sb-collapsed) .sb .sb-nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

/* ---------- 9. Dashboards, hero images, charts ---------- */
body.page-app .dx-welcome-img img,
body.page-app .hero img { filter: grayscale(1) contrast(1.05); }
body.page-app .dx-welcome,
html[data-theme="dark"] body.page-app .dx-welcome { background-image: none; background-color: var(--surface-2); border: 1px solid var(--border); }

body.page-app .ln-line, body.page-app .ln-dot { stroke: var(--text-strong); }
body.page-app .ln-area, body.page-app .rank-fill { fill: var(--text-strong); background: var(--text-strong); }
body.page-app .ln-area { opacity: .08; }
html[data-theme="dark"] body.page-app .ln-area { opacity: .16; }

/* scrollbars */
body.page-app ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 8px; }

/* search boxes: always a visible edge */
body.page-app .tt-search .form-control,
body.page-app .tb-search input { border-color: var(--input-border); }

/* required-field asterisk: dark red on white, light red on black (passes contrast in both modes) */
body.page-app .required-mark { color: var(--danger-text); }

/* ---------- 10. Fix: primary button inside a page header was black text on a black button ----------
   design-system.css colours every link in .page-header with the brand colour, and that rule is
   more specific than the button rule, so the label disappeared (white on white in dark mode). */
body.page-app .page-header a.btn-primary,
html[data-theme="dark"] body.page-app .page-header a.btn-primary { color: var(--on-brand); }
body.page-app .page-header a.btn-outline,
body.page-app .page-header a.btn-soft,
body.page-app .page-header a.btn-secondary { color: var(--text-strong); }