/* ==========================================================================
   Modern agent panel — DARK
   --------------------------------------------------------------------------
   Loads after modern-agent.css and modern-agent-components.css.

   ONE SELECTOR PREFIX. An inline script in header-staff.inc.php resolves the
   theme before first paint and always stamps html[data-theme]. So this file
   never needs a prefers-color-scheme block, and no rule has to be written
   twice. Without that script the panel simply stays light — a safe default.

   MOST OF THE WORK IS TOKENS. Everything in the two stylesheets above is
   already expressed as var(--a-*), so redefining the ramp re-themes the queue
   cards, panels, tags and chrome for free. What follows the token block is the
   part that is NOT free: ~100 hardcoded light values in scp.css, scp-agent.css
   and custom.css that would otherwise punch white holes through the page.

   The queue is safe to darken now because the card rewrite stopped emitting
   the admin's inline background-color (queue-tickets.tmpl.php:375 captures
   $styles and never prints it). Those pale inline creams, chosen against
   white, are what made the earlier dark attempt unusable.
   ========================================================================== */

html[data-theme="dark"] {
  /* slate, inverted — same hue family as the light ramp so accents still sit
     correctly against it */
  --a-bg:            #0b0f14;
  --a-surface:       #121820;
  --a-surface-2:     #1a222c;
  --a-surface-3:     #253040;
  --a-inset:         #0f151c;

  --a-border:        #243040;
  --a-border-strong: #35455a;

  --a-text:          #e6edf5;
  --a-muted:         #9aabbf;
  --a-subtle:        #6b7d93;

  --a-accent:        #60a5fa;   /* blue-400 — blue-600 is too dark on this ground */
  --a-accent-hover:  #93c5fd;
  --a-accent-fg:     #0b0f14;
  --a-accent-soft:   #16273f;
  --a-accent-border: #29456b;

  --a-neutral:       #9aabbf;
  --a-neutral-soft:  #1a222c;
  --a-neutral-border:#35455a;

  --a-success:       #4ade80;
  --a-success-soft:  #10241a;
  --a-success-border:#1d4531;
  --a-warning:       #fbbf24;
  --a-warning-soft:  #2a2010;
  --a-warning-border:#4a3616;
  --a-danger:        #f87171;
  --a-danger-soft:   #2b1416;
  --a-danger-border: #522024;
  --a-info:          #2dd4bf;
  --a-info-soft:     #0d2422;
  --a-info-border:   #17453f;
  --a-violet:        #a78bfa;
  --a-violet-soft:   #1e1a33;
  --a-violet-border: #372f5c;

  /* must be a step ABOVE --a-surface, or the menu section labels and table
     headers that use it disappear into the panel they sit on */
  --a-thead:         #1a222c;
  --a-focus:         0 0 0 3px rgba(96, 165, 250, .32);
  --a-shadow:        0 1px 2px rgba(0, 0, 0, .5);
  --a-shadow-lg:     0 12px 32px rgba(0, 0, 0, .6);

  color-scheme: dark;
}

/* ==========================================================================
   Structural sweep — the containers stock CSS paints white
   ========================================================================== */

html[data-theme="dark"] body,
html[data-theme="dark"] #container,
html[data-theme="dark"] #content,
html[data-theme="dark"] #wrapper,
html[data-theme="dark"] .main-content {
  background: var(--a-bg) !important;
  color: var(--a-text) !important;
}
html[data-theme="dark"] #header,
html[data-theme="dark"] .navbar,
html[data-theme="dark"] .navbar-default {
  background: var(--a-surface) !important;
  border-bottom-color: var(--a-border) !important;
}
html[data-theme="dark"] #footer { color: var(--a-subtle) !important; }

/* Bootstrap panels carry the bulk of the un-rewritten screens */
html[data-theme="dark"] .panel,
html[data-theme="dark"] .panel-body,
html[data-theme="dark"] .panel-default,
html[data-theme="dark"] .panel-info,
html[data-theme="dark"] .panel-success,
html[data-theme="dark"] .well,
html[data-theme="dark"] .tab_content,
html[data-theme="dark"] .content_wrapper {
  background: var(--a-surface) !important;
  border-color: var(--a-border) !important;
  color: var(--a-text) !important;
}
html[data-theme="dark"] .panel-heading,
html[data-theme="dark"] .panel-title {
  background: var(--a-surface-2) !important;
  border-color: var(--a-border) !important;
  color: var(--a-text) !important;
}

/* generic tables on screens that are still stock */
html[data-theme="dark"] table.list,
html[data-theme="dark"] table.table,
html[data-theme="dark"] .settings_table {
  background: var(--a-surface) !important;
  color: var(--a-text) !important;
}
html[data-theme="dark"] table.list th,
html[data-theme="dark"] table.table th,
html[data-theme="dark"] .settings_table th {
  background: var(--a-surface-2) !important;
  color: var(--a-muted) !important;
  border-color: var(--a-border) !important;
  text-shadow: none !important;
}
html[data-theme="dark"] table.list td,
html[data-theme="dark"] table.table td,
html[data-theme="dark"] .settings_table td {
  background: transparent !important;
  color: var(--a-text) !important;
  border-color: var(--a-border) !important;
}
html[data-theme="dark"] table.list tr:nth-child(2n+1) td,
html[data-theme="dark"] table.list tr.highlight td { background: var(--a-surface-2) !important; }

/* form controls */
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .select2-container .select2-choice,
html[data-theme="dark"] .select2-drop {
  background: var(--a-inset) !important;
  background-image: none !important;
  border-color: var(--a-border-strong) !important;
  color: var(--a-text) !important;
}
html[data-theme="dark"] ::placeholder { color: var(--a-subtle) !important; }
html[data-theme="dark"] .select2-results .select2-highlighted {
  background: var(--a-accent-soft) !important;
  color: var(--a-accent) !important;
}

/* buttons */
html[data-theme="dark"] .button,
html[data-theme="dark"] .btn,
html[data-theme="dark"] input[type="submit"],
html[data-theme="dark"] input[type="button"],
html[data-theme="dark"] button.action-button {
  background: var(--a-surface-2) !important;
  background-image: none !important;
  border-color: var(--a-border-strong) !important;
  color: var(--a-text) !important;
  text-shadow: none !important;
}
html[data-theme="dark"] .button:hover,
html[data-theme="dark"] .btn:hover { background: var(--a-surface-3) !important; }

/* dropdowns, dialogs, tooltips */
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .customQ-dropdown,
html[data-theme="dark"] .noclick-dropdown,
html[data-theme="dark"] .action-dropdown,
html[data-theme="dark"] .ui-dialog,
html[data-theme="dark"] .ui-widget-content,
html[data-theme="dark"] #popup,
html[data-theme="dark"] .popup {
  background: var(--a-surface) !important;
  border-color: var(--a-border-strong) !important;
  color: var(--a-text) !important;
}
html[data-theme="dark"] .ui-dialog-titlebar,
html[data-theme="dark"] .ui-widget-header {
  background: var(--a-surface-2) !important;
  border-color: var(--a-border) !important;
  color: var(--a-text) !important;
}
html[data-theme="dark"] .tooltip-inner { background: var(--a-surface-3) !important; }
html[data-theme="dark"] #overlay { background: rgba(0, 0, 0, .6) !important; }

/* the queue tree keeps its own light rules in custom.css */
html[data-theme="dark"] .customQ-dropdown ul a,
html[data-theme="dark"] .tickets-menu a { color: var(--a-text) !important; }
html[data-theme="dark"] .customQ-dropdown li > span.queue-count { color: var(--a-muted) !important; }

/* ==========================================================================
   Ticket view — still stock markup, so it needs naming rather than tokens
   ========================================================================== */

/* NOTE: the thread entry headers are deliberately NOT restyled here.
   modern-agent.css colour-codes customer / agent / internal note from tokens,
   and those tokens already flip for dark. An earlier version of this file
   painted all three var(--a-surface-2), which silently destroyed the one
   distinction that page exists to communicate. Do not re-add that. */

html[data-theme="dark"] .thread-entry,
html[data-theme="dark"] .thread-body {
  background: var(--a-surface) !important;
  border-color: var(--a-border) !important;
  color: var(--a-text) !important;
}
/* .thread-body hardcodes #fff / #333 and a 14px !important font size */
html[data-theme="dark"] .thread-body,
html[data-theme="dark"] .thread-body * {
  background-color: transparent !important;
  color: var(--a-text) !important;
}
html[data-theme="dark"] .thread-body a { color: var(--a-accent) !important; }
html[data-theme="dark"] #ticket_thread .thread-entry.avatar > .avatar { filter: brightness(.85); }

html[data-theme="dark"] .tixTitle,
html[data-theme="dark"] #ticket-title { color: var(--a-text) !important; }

html[data-theme="dark"] .response-tabs li a,
html[data-theme="dark"] .tabs li a {
  background: var(--a-surface-2) !important;
  border-color: var(--a-border) !important;
  color: var(--a-muted) !important;
}
html[data-theme="dark"] .response-tabs li.active a,
html[data-theme="dark"] .tabs li.active a {
  background: var(--a-surface) !important;
  color: var(--a-accent) !important;
}

/* Redactor — the reply editor. It builds its own chrome and hardcodes white
   throughout, including inside the edit surface. */
html[data-theme="dark"] .redactor-box,
html[data-theme="dark"] .redactor-toolbar,
html[data-theme="dark"] .redactor-editor,
html[data-theme="dark"] .redactor-in {
  background: var(--a-inset) !important;
  border-color: var(--a-border-strong) !important;
  color: var(--a-text) !important;
}
html[data-theme="dark"] .redactor-toolbar { background: var(--a-surface-2) !important; }
html[data-theme="dark"] .redactor-toolbar li a {
  color: var(--a-muted) !important;
  background: transparent !important;
}
html[data-theme="dark"] .redactor-toolbar li a:hover {
  background: var(--a-surface-3) !important;
  color: var(--a-accent) !important;
}
html[data-theme="dark"] .redactor-editor,
html[data-theme="dark"] .redactor-editor * { color: var(--a-text) !important; }
html[data-theme="dark"] .redactor-dropdown {
  background: var(--a-surface) !important;
  border-color: var(--a-border-strong) !important;
}
html[data-theme="dark"] .redactor-dropdown a { color: var(--a-text) !important; }

/* ==========================================================================
   Queue cards — tokens cover almost everything; the avatar ramp does not,
   because those are literal pastels that only work on white.
   ========================================================================== */

html[data-theme="dark"] .m-scope .m-av[data-tone="0"] { background: #17304f; color: #93c5fd; }
html[data-theme="dark"] .m-scope .m-av[data-tone="1"] { background: #14321f; color: #86efac; }
html[data-theme="dark"] .m-scope .m-av[data-tone="2"] { background: #33260d; color: #fcd34d; }
html[data-theme="dark"] .m-scope .m-av[data-tone="3"] { background: #351527; color: #f9a8d4; }
html[data-theme="dark"] .m-scope .m-av[data-tone="4"] { background: #241d43; color: #c4b5fd; }
html[data-theme="dark"] .m-scope .m-av[data-tone="5"] { background: #0d302b; color: #5eead4; }
html[data-theme="dark"] .m-scope .m-av {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
}
html[data-theme="dark"] .m-scope .m-card:hover {
  box-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 6px 16px -10px rgba(0, 0, 0, .8);
}
html[data-theme="dark"] .m-scope .m-cardlist input[type="checkbox"]:checked::after,
html[data-theme="dark"] .m-scope .m-cardlist input[type="checkbox"]:indeterminate::after {
  border-color: var(--a-accent-fg);
  background: var(--a-accent-fg);
}
html[data-theme="dark"] .m-scope .m-cardlist input[type="checkbox"]:checked::after {
  background: none;
  border-top: 0;
  border-right: 0;
}

/* ==========================================================================
   The toggle itself
   ========================================================================== */

.m-themetoggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin: 8px 4px 0;
  padding: 0;
  border: 1px solid var(--a-border);
  border-radius: 8px;
  background: transparent;
  color: var(--a-muted);
  cursor: pointer;
  transition: background-color .13s ease, color .13s ease, border-color .13s ease;
}
.m-themetoggle:hover {
  background: var(--a-surface-2);
  color: var(--a-accent);
  border-color: var(--a-border-strong);
}
.m-themetoggle:focus-visible { outline: 2px solid var(--a-accent); outline-offset: 2px; }
.m-themetoggle svg { display: block; width: 15px; height: 15px; }
.m-themetoggle .m-moon { display: block; }
.m-themetoggle .m-sun  { display: none; }
html[data-theme="dark"] .m-themetoggle .m-moon { display: none; }
html[data-theme="dark"] .m-themetoggle .m-sun  { display: block; }

/* images and syntax-lit content should not glare on a dark ground */
html[data-theme="dark"] .thread-body img:not([src*=".svg"]) { opacity: .92; }