/**
 * dark.css — shared skin for every theme with "style": "dark".
 *
 * Token architecture (do not re-scramble):
 * theme.js writes the 12 color slots (--color-primary … --color-solid) as INLINE style on <html>,
 * which beats the :root fallbacks below — so every derived token here is computed live from the
 * active theme via color-mix() over the slots, never from hardcoded palette values.
 * Layers: 1) slot fallbacks (flash-of-load only), 2) derived surface/ink tokens (all component
 * rules consume these), 3) fixed status colors (one polished set shared by all dark themes),
 * 4) !important bootstrap aliases (--success, --dark, …) that beat the inline slot styles.
 * Surfaces step UP from --color-background by mixing in --color-text (page -> panel -> control),
 * hovers shift surface luminance instead of swapping hue, borders are alpha hairlines.
 */

:root {

    /* slot fallbacks — used only before theme.js applies the active theme inline */
    --color-primary:    #4c7ca8;
    --color-secondary:  #4c7ca8;
    --color-shadow:     #8b96a326;
    --color-light:      #525456;
    --color-white:      #eef1f5;
    --color-text:       #dde1e6;
    --color-subtext:    #9aa3ad;
    --color-background: #1c1e21;
    --color-solid:      #24272b;
    --color-dark:       #2b2f34;
    --color-highlight:  #8fbede;
    --color-menu:       #a4adb8;
    --shadow:           #00000055 0px 4px 8px -2px;

    /* derived surfaces — stepped elevation, page canvas upward, brightened with body ink */
    --surface-1:        color-mix(in srgb, var(--color-text) 5%, var(--color-background));
    --surface-2:        color-mix(in srgb, var(--color-text) 9%, var(--color-background));
    --surface-3:        color-mix(in srgb, var(--color-text) 14%, var(--color-background));

    /* derived interaction tints — translucent so they sit on any surface */
    --hover-tint:       color-mix(in srgb, var(--color-text) 8%, transparent);
    --zebra-tint:       color-mix(in srgb, var(--color-text) 4%, transparent);

    /* derived hairlines — alpha borders that never look heavy */
    --hairline:         color-mix(in srgb, var(--color-text) 14%, transparent);
    --hairline-strong:  color-mix(in srgb, var(--color-text) 26%, transparent);

    /* derived inks — muted text and placeholders stepped down from body text */
    --text-muted:       color-mix(in srgb, var(--color-text) 62%, var(--color-background));
    --text-placeholder: color-mix(in srgb, var(--color-text) 50%, transparent);

    /* derived accent washes — selected rows, text selection, soft focus ring */
    --accent-soft:      color-mix(in srgb, var(--color-primary) 20%, var(--color-background));
    --selection:        color-mix(in srgb, var(--color-primary) 35%, var(--color-background));
    --focus-ring-color: color-mix(in srgb, var(--color-highlight) 40%, transparent);

    /* status system — one fixed desaturated set tuned for every dark canvas:
       *-fill carries --on-status text at >= 4.5:1, *-text reads on the canvas at >= 4.5:1 */
    --on-status:            #f2f4f7;
    --status-success:       #2e6b41;
    --status-success-text:  #56a862;
    --status-danger:        #9c3a34;
    --status-danger-text:   #e4746b;
    --status-warning:       #8a5e10;
    --status-warning-text:  #c99a2e;
    --status-info:          #34617e;
    --status-info-text:     #5ea3e8;

    /* bootstrap aliases — !important so they beat the inline slot styles from theme.js */
    --success:          var(--status-success) !important;
    --warning:          var(--status-warning) !important;
    --danger:           var(--status-danger) !important;
    --info:             var(--status-info) !important;
    --white:            var(--color-white) !important;
    --primary:          var(--color-primary) !important;
    --secondary:        var(--color-secondary) !important;
    --light:            var(--color-light) !important;
    --dark:             var(--surface-3) !important;

    /* rgb map — legacy names repointed at the status text set; black is a deep derived surface */
    --rgb-red:          var(--status-danger-text);
    --rgb-green:        var(--status-success-text);
    --rgb-orange:       var(--status-warning-text);
    --rgb-yellow:       var(--status-warning-text);
    --rgb-blue:         var(--status-info-text);
    --rgb-black:        color-mix(in srgb, var(--color-background) 80%, #000000);
    --rgb-white:        var(--color-white);

    --font-main:        Arial, 'Montserrat', 'Roboto', 'Open Sans', sans-serif;
    --font-weight:      400;
    --font-normal:      12pt;

}


/** Base **/

p, div, a, td, span {
    font-weight: var(--font-weight);
}

* {
    border-color:       var(--color-shadow) !important;
}

body {
    background-color:       var(--color-background) !important;
    color:                  var(--color-text) !important;
    font-family:            var(--font-main) !important;
    font-size:              var(--font-normal) !important;
    font-weight:            var(--font-weight) !important;
    letter-spacing:         0px;
    text-shadow:            none;
}

*::selection {
    background-color:   var(--selection);
    color:              var(--color-text);
}


/** Focus visibility — app.css kills outlines globally, restore an accessible ring here **/

input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.form-control:focus-visible,
button:focus-visible,
.btn:focus-visible,
a:focus-visible {
    outline:            none !important;
    box-shadow:         0 0 0 3px var(--focus-ring-color) !important;
}


/** Buttons **/

.btn-success    {background-color:var(--success) !important;color:var(--on-status) !important;}
.btn-primary    {background-color:var(--primary) !important;color:var(--color-white) !important;}
.btn-secondary  {background-color:var(--secondary) !important;color:var(--color-white) !important;}
.btn-info       {background-color:var(--info) !important;color:var(--on-status) !important;}
.btn-danger     {background-color:var(--danger) !important;color:var(--on-status) !important;}
.btn-warning    {background-color:var(--warning) !important;color:var(--on-status) !important;}
.btn-dark       {background-color:var(--dark) !important;color:var(--color-text) !important;}
.btn-light      {background-color:var(--light) !important;}
.btn-white      {background-color:var(--white) !important;}
.btn-muted      {background-color:var(--surface-3) !important;color:var(--text-muted) !important;}


/** Text utilities — status text uses the bright variants so it stays readable on the canvas **/

.text-success   {color:var(--status-success-text) !important;}
.text-primary   {color:var(--primary) !important;}
.text-secondary {color:var(--secondary) !important;}
.text-info      {color:var(--status-info-text) !important;}
.text-danger    {color:var(--status-danger-text) !important;}
.text-warning   {color:var(--status-warning-text) !important;}
.text-dark      {color:var(--color-text) !important;}
.text-light     {color:var(--light) !important;}
.text-white     {color:var(--color-white) !important;}
.text-muted     {color:var(--color-menu) !important;}

/* app.css paints text-dark links with --dark (now a surface) — keep them readable ink */
a.text-dark:focus, a.text-dark:hover, a.text-dark:active, .text-dark:focus {
    color: var(--color-text) !important;
}


/** Backgrounds & badges **/

/* bootstrap's stock badge ink assumes its own bright fills — repin to the status ink */
.badge-primary, .badge-secondary, .badge-success,
.badge-danger,  .badge-warning,   .badge-info {
    color:              var(--on-status) !important;
}

.badge-dark,  .bg-dark, .button-dark, .thead-dark, .table .thead-dark th {
    background-color:   var(--dark) !important;
    color:              var(--color-text) !important;
}

/* light slot is a bright FOREGROUND in dark themes — light panels become an elevated surface */
.badge-light,  .bg-light, .button-light, .thead-light, .thead-light th {
    background-color:   var(--surface-1) !important;
    color:              var(--color-text) !important;
}

.bg-white {
    background-color:   var(--color-background) !important;
}

.bg-solid-white {
    background-color:   var(--color-solid) !important;
}


/** Borders **/

.border, .border-top, .border-left, .border-bottom, .border-right {
    border-color: var(--hairline) !important;
}

.border-primary {
    border-color: var(--color-primary) !important;
}

.border-secondary {
    border-color: var(--color-secondary) !important;
}

.border-success {
    border-color: var(--status-success-text) !important;
}

.border-danger {
    border-color: var(--status-danger-text) !important;
}

.border-warning {
    border-color: var(--status-warning-text) !important;
}

.border-info {
    border-color: var(--status-info-text) !important;
}

.border-dark {
    border-color: var(--hairline-strong) !important;
}

.border-light {
    border-color: var(--hairline) !important;
}


/** Surfaces **/

.modal-content {
    background-color: var(--color-solid) !important;
    color: var(--color-text) !important;
    box-shadow: var(--shadow);
}

.modal-body, .modal-title {
    color: var(--color-text) !important;
}

.card {
    background-color:   var(--surface-1);
    border:             solid 1px var(--hairline) !important;
    border-radius:      0px !important;
    box-shadow:         none !important;
    color:              var(--color-text) !important;
}

.box {
    border:             solid 1px var(--hairline) !important;
    border-radius:      0px !important;
    margin:             0px;
    background-color:   var(--surface-1);
}

.box.colored {
    background-color:   var(--color-dark);
}

.page-header {
    background-color: var(--color-secondary);
}

.h-grad {
    background: linear-gradient(245deg, var(--color-secondary) -80%, var(--color-background) 100%);
}

.v-grad {
    background: linear-gradient(0deg, var(--color-secondary) -80%, var(--color-background) 80%);
}

.item-sm,
.item-md,
.item-lg,
.item {
    background-color:   var(--color-dark) !important;
    box-shadow: none !important;
}

/* accent hover carries the accent's text token, never the page background */
.item-sm.hover:hover {
    background-color: var(--color-secondary) !important;
    background-image: none !important;
    color: var(--color-white) !important;
}

/* app.css floats a pure-white scroll button — sit it on a derived surface instead */
.scroll-top {
    background-color:   var(--surface-2);
    color:              var(--color-highlight);
}

.context-menu {
    background-color:   var(--color-solid);
    box-shadow:         var(--shadow);
}

/* bootstrap close (x) button ships black text with a white halo */
.close {
    color:              var(--color-text);
    text-shadow:        none;
    opacity:            0.7;
}

.disabled {
    background-color:   var(--surface-1) !important;
    color:              var(--text-muted) !important;
}

.disabled a {
    color:              var(--text-muted) !important;
}


/** Alerts — calm tinted surfaces with an accent stripe, not saturated fills **/

.alert-primary  {
    background-color: color-mix(in srgb, var(--color-primary) 18%, var(--color-background));
    color: var(--color-highlight);
    box-shadow: inset 3px 0 0 var(--color-primary);
}

.alert-secondary{
    background-color: color-mix(in srgb, var(--color-secondary) 18%, var(--color-background));
    color: var(--color-highlight);
    box-shadow: inset 3px 0 0 var(--color-secondary);
}

.alert-info     {
    background-color: color-mix(in srgb, var(--status-info) 18%, var(--color-background));
    color: var(--status-info-text);
    box-shadow: inset 3px 0 0 var(--status-info-text);
}

.alert-success  {
    background-color: color-mix(in srgb, var(--status-success) 18%, var(--color-background));
    color: var(--status-success-text);
    box-shadow: inset 3px 0 0 var(--status-success-text);
}

.alert-danger   {
    background-color: color-mix(in srgb, var(--status-danger) 18%, var(--color-background));
    color: var(--status-danger-text);
    box-shadow: inset 3px 0 0 var(--status-danger-text);
}

.alert-warning  {
    background-color: color-mix(in srgb, var(--status-warning) 18%, var(--color-background));
    color: var(--status-warning-text);
    box-shadow: inset 3px 0 0 var(--status-warning-text);
}


/** Forms **/

input,
textarea,
select {
    background-color:   var(--color-dark) !important;
    border: solid 1px var(--color-shadow);
}

.form-control {
    background-color:   var(--color-dark) !important;
    border: solid 1px var(--color-shadow);
}

select option,
select optgroup {
    background-color:   var(--color-solid) !important;
    color: var(--color-text) !important;
}

input, textarea, select, .form-control {
    color:              var(--color-text) !important;
}

/* app.css paints checkboxes with the light slot — now a bright foreground, so repaint */
input[type="checkbox"] {
    background-color:   var(--color-dark);
    border: 1px solid var(--color-shadow);
}

input[type="checkbox"]:checked {
    background-color:   var(--color-dark);
}

input[type="checkbox"]:checked:after {
    color: var(--color-highlight) !important;
}

/* placeholders must read as hints, not values */
*::placeholder {
    color: var(--text-placeholder) !important;
    opacity: 1 !important;
}

*::-webkit-input-placeholder {
    color: var(--text-placeholder) !important;
    opacity: 1 !important;
}

.dropdown-menu {
    background-color:   var(--color-solid) !important;
    color:              var(--color-text) !important;
    border: solid 1px var(--hairline);
    box-shadow: var(--shadow);
}

.dropdown-item {
    color:              var(--color-text) !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color:   var(--hover-tint) !important;
    color:              var(--color-highlight) !important;
}

.dropdown-item.active {
    background-color:   var(--accent-soft) !important;
    color:              var(--color-text) !important;
}


/** Tables **/

pre {
    background-color:   var(--surface-1);
    color:              var(--color-text);
}

table td {
    color: var(--color-text) !important;
}

table, table.table {
    color: var(--color-text) !important;
}

table.dataTable.table tr {
    background-color:   var(--color-background) !important;
}

table.dataTable.table tr.hover:hover {
    background-color:   var(--hover-tint) !important;
}

/* hover shifts luminance a step, text stays body ink — never same slot both sides */
tr.hover:hover {
    color: var(--color-text);
    background-color: var(--hover-tint) !important;
}

/* app.css stripes odd rows with the white slot — repaint with a translucent zebra tint */
.table.table-striped tbody>tr:nth-of-type(odd) {
    background-color: var(--zebra-tint) !important;
}

/* the ticket list stripes even rows by toggling .bg-info on the row (ticketList.js) —
   row-scoped so real informational .bg-info badges/panels keep the status fill */
tr.bg-info {
    background-color: var(--zebra-tint) !important;
}

.table-hover tbody tr:hover {
    background-color: var(--hover-tint);
    color: var(--color-text);
}

.dataTables_length,
.dataTables_length select {
    color:              var(--color-text) !important;
}

.paginate_button {
    background:         none !important;
    background-color:   var(--color-background) !important;
    color:              var(--color-text) !important;
}

.paginate_button.current {
    background:         none !important;
    background-color:   var(--color-secondary) !important;
    color:              var(--color-white) !important;
}


/** Links & hover **/

a {
    color:              var(--color-primary);
}

a:focus, .btn:focus {
    color: var(--color-highlight) !important;
}

.nav-item:hover,
.nav-item:hover>a.nav-link,
a:hover,
a.hover:hover,
.hover:hover {
    color:              var(--color-highlight) !important;
    cursor:             pointer;
}

/* app.css sends nested hover links to --rgb-black — keep them on the highlight ink */
.hover:hover a:hover {
    color:              var(--color-highlight) !important;
}

.signshow {
    filter:             brightness(200%) grayscale(100%);
    -webkit-filter:     brightness(200%) grayscale(100%);
}


/** Navigation **/

a.active.quote-section-link {
    background-color:   var(--color-background) !important;
    border-color:       var(--hairline) !important;
    border-radius:      0px !important;
}

a.active.quote-section-link:hover {
    color:   var(--color-highlight) !important;
}

a.quote-section-link {
    border-color:       var(--hairline) !important;
    border-radius:      0px !important;
}

.nav-tabs .nav-link {
    border:             solid 1px var(--color-secondary) !important;
    border-bottom:      solid 0px var(--color-secondary) !important;
    background-color:   var(--color-secondary) !important;
    color:              var(--color-white) !important;
    border-radius:      0px !important;
}

.nav-tabs .nav-link.active {
    border:             solid 1px var(--color-secondary);
    border-bottom:      solid 0px var(--color-secondary);
    background-color:   transparent;
    color:              var(--color-text) !important;
}

#menu_bar_left .nav .nav-item {
    background-color: transparent;
}


/** Syntax Highlighting **/

    .toolbar-item>span, .toolbar-item>button {
        border-radius: 0px !important;
        box-shadow: none !important;
    }

    /* code blocks sit on a derived panel surface, never on a text token */
    :not(pre)>code[class*=language-], pre[class*=language-] {
        background: var(--surface-1) !important;
        color: var(--color-text);
        box-shadow: none;
        border: solid 1px var(--hairline);
    }

    .token.block-comment,
    .token.cdata,
    .token.comment,
    .token.doctype,
    .token.prolog {
        color: var(--text-muted);
    }

    .token.punctuation {
        color: var(--color-subtext);
    }

    .token.attr-name,
    .token.deleted,
    .token.namespace,
    .token.tag {
        color: var(--status-danger-text);
    }

    .token.function-name {
        color: var(--color-highlight);
    }

    .token.boolean,
    .token.function,
    .token.number {
        color: var(--status-info-text);
    }

    .token.class-name,
    .token.constant,
    .token.property,
    .token.symbol {
        color: var(--color-text);
    }

    .token.atrule,
    .token.builtin,
    .token.important,
    .token.keyword,
    .token.selector {
        color: var(--color-highlight);
    }

    .token.attr-value,
    .token.char,
    .token.regex,
    .token.string,
    .token.variable {
        color: var(--status-success-text);
    }

    .token.entity,
    .token.operator,
    .token.url {
        color: var(--status-info-text);
    }

    .token.bold,
    .token.important {
        font-weight: 700;
    }

    .token.italic {
        font-style: italic;
    }

    .token.entity {
        cursor: help;
    }

    .token.inserted {
        color: var(--status-success-text);
    }

/** Syntax Highlighting **/


/** Scrollbars **/

::-webkit-scrollbar-track {
    background: var(--color-dark);
    filter: var(--filter);
    cursor: pointer !important;
}

::-webkit-scrollbar-track:hover {
    background-color: var(--surface-2);
    filter: var(--filter);
    cursor: pointer !important;
}

::-webkit-scrollbar-thumb {
    background-color: var(--color-secondary) !important;
    filter: var(--filter);
    cursor: pointer !important;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-primary) !important;
    filter: var(--filter);
    cursor: pointer !important;
}


/** Wait spinner **/

.wait-value:before {
    content:            url('../images/circle_half_light_24.png');
}

.lg.wait-value:before {
    content:            url('../images/circle_half_light_48.png');
}