/* =============================================================================
   Dark theme - GENERATED by tools/gen-dark-theme.php on 2026-09-17. Do not edit.
   -----------------------------------------------------------------------------
   Regenerate with:
     php tools/gen-dark-theme.php <docroot> > assets/css/theme-dark.css

   The overrides below exist because the app sets colours as literals rather
   than tokens. Every selector listed was found to hardcode a colour, so it is
   re-pointed at a token. Once a stylesheet is converted to tokens its selectors
   simply stop appearing here.
   ============================================================================= */

:root[data-theme="dark"] {
  color-scheme: dark;

  --sh-accent:          #4aa8e8;
  --sh-accent-strong:   #7cc3f2;
  --sh-accent-soft:     #142433;
  --sh-accent-weak:     #142433;
  --sh-warm:            #f5b544;
  --sh-warm-soft:       #2b2010;
  --sh-accent-border:   #24486a;

  --sh-bg:              #0b1119;
  --sh-surface:         #131c27;
  --sh-surface-2:       #1a2531;
  --sh-surface-sunken:  #0e1621;
  --sh-tint-from:       #16263a;
  --sh-tint-to:         #101d2e;

  --sh-text:            #e8eef5;
  --sh-text-muted:      #93a7b8;
  --sh-text-faint:      #6b8096;
  --sh-text-on-accent:  #06121d;
  --sh-heading:         #cfe4f5;

  --sh-border:          #243040;
  --sh-border-strong:   #33445a;

  --sh-success:         #4ac48c;
  --sh-success-soft:    #0f2a20;
  --sh-danger:          #ef7367;
  --sh-danger-soft:     #2c1512;
  --sh-warning:         #e0a44a;
  --sh-warning-soft:    #2b1f0d;

  --sh-shadow-1: 0 1px 2px rgba(0, 0, 0, .5);
  --sh-shadow-2: 0 2px 8px rgba(0, 0, 0, .55);
  --sh-shadow-3: 0 12px 36px rgba(0, 0, 0, .6);
  --sh-ring:     0 0 0 3px rgba(74, 168, 232, .45);

  --primary-bg-color:   var(--sh-tint-from);
  --secondary-bg-color: var(--sh-accent-border);
  --text-color:         var(--sh-text);
  --icon-color:         var(--sh-accent);
  --txt-title-color:    var(--sh-heading);
}

/* Stated by hand because the generator skips gradients. */
:root[data-theme="dark"] body,
:root[data-theme="dark"] body #loaderOverlay {
  background: var(--sh-bg);
  color: var(--sh-text);
}
/* `body > header`, never `body header`: the page heads inside <main> are
   <header> elements too and must not be painted as a second app bar. */
:root[data-theme="dark"] body > header {
  background: var(--sh-glass);
  border-bottom-color: var(--sh-border);
}
:root[data-theme="dark"] body .bottom-nav {
  background: var(--sh-glass-strong);
  border-color: var(--sh-border);
}
:root[data-theme="dark"] body .nav-item.nav-center .nav-icon-center {
  background: linear-gradient(135deg, var(--sh-accent) 0%, var(--sh-accent-strong) 100%);
}
:root[data-theme="dark"] .logo-circle img {
  filter: brightness(1.08);
}



/* text colours (1 selectors) */
:root[data-theme="dark"] .resend-link:hover {
  color: var(--sh-text);
}

/* secondary text (7 selectors) */
:root[data-theme="dark"] .btn-back,
:root[data-theme="dark"] .btn-facebook i,
:root[data-theme="dark"] .btn-messenger i,
:root[data-theme="dark"] .forgot-icon,
:root[data-theme="dark"] .resend-link,
:root[data-theme="dark"] .success-icon,
:root[data-theme="dark"] .success-title {
  color: var(--sh-text-muted);
}

/* panels (11 selectors) */
:root[data-theme="dark"] .btn-back,
:root[data-theme="dark"] .forgot-password-card,
:root[data-theme="dark"] .form-input-modern,
:root[data-theme="dark"] .form-input-modern:focus,
:root[data-theme="dark"] .lang-switch,
:root[data-theme="dark"] .otp-input,
:root[data-theme="dark"] .otp-input:focus,
:root[data-theme="dark"] .otp-input:not(:placeholder-shown),
:root[data-theme="dark"] .sh-voice-ripple,
:root[data-theme="dark"] .success-icon {
  background-color: var(--sh-surface);
}

/* tinted panels (3 selectors) */
:root[data-theme="dark"] .btn-back:hover,
:root[data-theme="dark"] .btn-modern:disabled,
:root[data-theme="dark"] .forgot-icon {
  background-color: var(--sh-surface-2);
}

/* rules and dividers (1 selectors) */
:root[data-theme="dark"] .sh-voice-fab.is-listening::after {
  border-color: var(--sh-border);
}

/* Semantic colours, restated after the generated block so they survive it. */
:root[data-theme="dark"] body .btn-on {
  background: var(--sh-success-soft);
  color: var(--sh-success);
  border-color: rgba(74, 196, 140, .3);
}
:root[data-theme="dark"] body .btn-off {
  background: var(--sh-danger-soft);
  color: var(--sh-danger);
  border-color: rgba(239, 115, 103, .3);
}
:root[data-theme="dark"] body .alert-success { background: var(--sh-success-soft); color: var(--sh-success); }
:root[data-theme="dark"] body .alert-danger  { background: var(--sh-danger-soft);  color: var(--sh-danger); }
:root[data-theme="dark"] body .alert-warning { background: var(--sh-warning-soft); color: var(--sh-warning); }
:root[data-theme="dark"] body .btn-primary {
  background: linear-gradient(135deg, var(--sh-accent) 0%, var(--sh-accent-strong) 100%);
  color: var(--sh-text-on-accent);
}
:root[data-theme="dark"] body .wifi-status-btn.connected    { color: var(--sh-success); }
:root[data-theme="dark"] body .wifi-status-btn.disconnected { color: var(--sh-danger); }
:root[data-theme="dark"] [data-device-presence].is-online {
  color: var(--sh-success);
  background: var(--sh-success-soft);
}
:root[data-theme="dark"] [data-device-presence].is-offline {
  color: var(--sh-text-faint);
  background: var(--sh-surface-sunken);
}

/* Inputs and modals: the generator only repaints what was stated as a literal,
   and these are mostly Bootstrap defaults that state nothing. */
:root[data-theme="dark"] body .form-control,
:root[data-theme="dark"] body .form-select,
:root[data-theme="dark"] body textarea,
:root[data-theme="dark"] body input[type="text"],
:root[data-theme="dark"] body input[type="number"],
:root[data-theme="dark"] body input[type="password"],
:root[data-theme="dark"] body input[type="tel"],
:root[data-theme="dark"] body input[type="time"] {
  background: var(--sh-surface-2);
  border-color: var(--sh-border-strong);
  color: var(--sh-text);
}
:root[data-theme="dark"] body .modal-content {
  background: var(--sh-surface);
  border-color: var(--sh-border);
}
:root[data-theme="dark"] body .list-group-item,
:root[data-theme="dark"] body .table {
  background: transparent;
  color: var(--sh-text);
}
:root[data-theme="dark"] body .toast {
  background: var(--sh-surface);
  color: var(--sh-text);
  border-color: var(--sh-border);
}