/* ==========================================================================
   Bonanza dark mode
   --------------------------------------------------------------------------
   Loaded AFTER stylesheet.css and build/vendor.css so it can override both
   without either of them being edited.

   Everything is gated on html[data-theme="dark"], which theme-toggle.js
   stamps on the document element before first paint. The script resolves the
   three user-facing states -- Light / Dark / System -- down to that single
   attribute, so this sheet needs only one gate and no duplicated rule bodies.

   Palette is anchored on #083040, the navy the app already uses for
   .main-header; the surface ladder is grown upward from it. All foreground
   and surface pairs clear WCAG AA (4.5:1); text-muted is rated for
   surface-0..2 only (4.40:1 on surface-3).
   ========================================================================== */

html[data-theme="dark"] {
    /* surfaces */
    --chrome:    #083040;   /* .main-header, unchanged from light */
    --chrome-2:  #0E5F8A;   /* .sub-header, #007FBB dimmed */
    --s0:        #0E2A36;   /* page ground */
    --s1:        #12313F;   /* content well, table rows */
    --s2:        #17394A;   /* cards, comment bodies, table heads, zebra alt */
    --s3:        #1D4557;   /* inputs, selects, row hover */
    --line:      #24485A;
    --line-2:    #35667D;
    --hover:     #1F4E63;

    /* text */
    --ink:       #E6EEF2;
    --ink-2:     #A8BCC6;
    --ink-3:     #97ADB8;

    /* accent + semantic */
    --link:      #5FBBEE;
    --link-2:    #8FD0F0;
    --btn:       #0F6B99;   /* .hbutton / .reload-button */
    --go:        #2FA85A;   /* primary action green */
    --go-hover:  #46C776;
    --go-active: #22874A;
    --go-ink:    #08222C;
    --danger:    #B3332A;
    --mark:      #F0C14B;   /* search highlight */
    --mark-ink:  #10222B;

    /* priority scale -- narrow contrast band, hue does the work */
    --pri-critical: #FF9494;  --pri-critical-bg: #4A1F22;
    --pri-urgent:   #F591D3;  --pri-urgent-bg:   #43203B;
    --pri-high:     #F2A24A;  --pri-high-bg:     #4A3A18;
    --pri-routine:  #6FB8D8;  --pri-routine-bg:  #16394B;
    --pri-low:      #5FC85A;  --pri-low-bg:      #1C4023;
    --pri-minimum:  #A0B4BE;  --pri-minimum-bg:  #2E3438;

    color-scheme: dark;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

html[data-theme="dark"] body            { background-color: var(--s0); color: var(--ink); }
html[data-theme="dark"] a               { color: var(--link); }
html[data-theme="dark"] a:hover         { color: var(--link-2); }
html[data-theme="dark"] hr              { border-color: var(--line); }

html[data-theme="dark"] :focus-visible {
    outline: 2px solid var(--link-2);
    outline-offset: 1px;
}

/* --------------------------------------------------------------------------
   Chrome
   -------------------------------------------------------------------------- */

html[data-theme="dark"] .main-header    { background-color: var(--chrome); }
html[data-theme="dark"] .sub-header     { background-color: var(--chrome-2); }
html[data-theme="dark"] .header         { color: #ffffff; }
html[data-theme="dark"] .header a       { color: #ffffff; }
html[data-theme="dark"] .header .separator { color: #7FA4B5; }

html[data-theme="dark"] .hbutton {
    background-color: var(--btn);
    border-color: var(--link);
    color: #ffffff !important;
}
html[data-theme="dark"] .hbutton:hover  { border-color: var(--link-2); }
html[data-theme="dark"] .hbutton:active { border-color: #ffffff; }

html[data-theme="dark"] .main-div       { background-color: var(--s0); }
html[data-theme="dark"] .main-div a     { color: var(--link); }

html[data-theme="dark"] .side-div       { background-color: var(--s1); color: var(--ink-2); }
html[data-theme="dark"] .side-div a     { background-color: transparent; color: var(--link); }

html[data-theme="dark"] .main-table     { border-color: var(--line-2); }
html[data-theme="dark"] .bottom-div     { background: var(--s1); border-color: var(--line-2); color: var(--ink-2); }

/* --------------------------------------------------------------------------
   Issue list
   -------------------------------------------------------------------------- */

html[data-theme="dark"] div.issue-list-header        { background-color: var(--s2); }
html[data-theme="dark"] div.issue-list-header > span { color: var(--link-2); }

html[data-theme="dark"] table.issues,
html[data-theme="dark"] table.projects,
html[data-theme="dark"] table.users,
html[data-theme="dark"] table.groups                 { background-color: var(--s1); }

html[data-theme="dark"] table.issues thead,
html[data-theme="dark"] table.projects thead,
html[data-theme="dark"] table.users thead,
html[data-theme="dark"] table.groups thead           { color: var(--ink-3); }

html[data-theme="dark"] table.issues thead th,
html[data-theme="dark"] table.projects thead th,
html[data-theme="dark"] table.users thead th,
html[data-theme="dark"] table.groups thead th {
    background-color: var(--s2);
    border-bottom-color: var(--line-2);
}

html[data-theme="dark"] table.issues tbody tr td,
html[data-theme="dark"] table.projects td,
html[data-theme="dark"] table.users td,
html[data-theme="dark"] table.groups td              { border-bottom-color: var(--line); color: var(--ink-2); }

html[data-theme="dark"] table.issues tbody td.issue-title        { color: var(--ink); }
html[data-theme="dark"] table.issues tbody td.issue-title a      { color: var(--ink); }
html[data-theme="dark"] table.issues tbody td.issue-title a:hover { color: var(--link-2); }

html[data-theme="dark"] .odd            { background: var(--s1); }
html[data-theme="dark"] .even           { background: var(--s2); }

html[data-theme="dark"] #projects tr:hover,
html[data-theme="dark"] #users tr:hover,
html[data-theme="dark"] #groups tr:hover,
html[data-theme="dark"] table.issues tbody tr:hover  { background-color: var(--hover); }
html[data-theme="dark"] #resolved-issues tr:hover    { background-color: #4A3E2E; }

html[data-theme="dark"] #projects th,
html[data-theme="dark"] #resolved-issues th,
html[data-theme="dark"] #users th       { background: var(--s2); color: var(--ink-3); }

/* --------------------------------------------------------------------------
   Priority
   -------------------------------------------------------------------------- */

html[data-theme="dark"] .pri-critical { color: var(--pri-critical); border-color: var(--pri-critical); background-color: var(--pri-critical-bg); }
html[data-theme="dark"] .pri-urgent   { color: var(--pri-urgent);   border-color: var(--pri-urgent);   background-color: var(--pri-urgent-bg); }
html[data-theme="dark"] .pri-high     { color: var(--pri-high);     border-color: var(--pri-high);     background-color: var(--pri-high-bg); }
html[data-theme="dark"] .pri-routine  { color: var(--pri-routine);  border-color: var(--pri-routine);  background-color: var(--pri-routine-bg); }
html[data-theme="dark"] .pri-low      { color: var(--pri-low);      border-color: var(--pri-low);      background-color: var(--pri-low-bg); }
html[data-theme="dark"] .pri-minimum  { color: var(--pri-minimum);  border-color: var(--pri-minimum);  background-color: var(--pri-minimum-bg); }

html[data-theme="dark"] .pri-critical-inv { background-color: var(--pri-critical-bg); color: var(--pri-critical-bg); }
html[data-theme="dark"] .pri-urgent-inv   { background-color: var(--pri-urgent-bg);   color: var(--pri-urgent-bg); }
html[data-theme="dark"] .pri-high-inv     { background-color: var(--pri-high-bg);     color: var(--pri-high-bg); }
html[data-theme="dark"] .pri-routine-inv  { background-color: var(--pri-routine-bg);  color: var(--pri-routine-bg); }
html[data-theme="dark"] .pri-low-inv      { background-color: var(--pri-low-bg);      color: var(--pri-low-bg); }
html[data-theme="dark"] .pri-minimum-inv  { background-color: var(--pri-minimum-bg);  color: var(--pri-minimum-bg); }

html[data-theme="dark"] .issueform-table-critical, html[data-theme="dark"] .issueform-table-critical td { background-color: var(--pri-critical-bg); color: var(--ink); }
html[data-theme="dark"] .issueform-table-urgent,   html[data-theme="dark"] .issueform-table-urgent td   { background-color: var(--pri-urgent-bg);   color: var(--ink); }
html[data-theme="dark"] .issueform-table-high,     html[data-theme="dark"] .issueform-table-high td     { background-color: var(--pri-high-bg);     color: var(--ink); }
html[data-theme="dark"] .issueform-table-routine,  html[data-theme="dark"] .issueform-table-routine td  { background-color: var(--pri-routine-bg);  color: var(--ink); }
html[data-theme="dark"] .issueform-table-low,      html[data-theme="dark"] .issueform-table-low td      { background-color: var(--pri-low-bg);      color: var(--ink); }
html[data-theme="dark"] .issueform-table-minimum,  html[data-theme="dark"] .issueform-table-minimum td  { background-color: var(--pri-minimum-bg);  color: var(--ink); }

/* --------------------------------------------------------------------------
   Issue page: description, comments, diffs
   -------------------------------------------------------------------------- */

html[data-theme="dark"] .issue-description,
html[data-theme="dark"] .comments .body {
    background-color: var(--s2);
    border-color: #2E6B87;
    color: var(--ink-2);
}

html[data-theme="dark"] .comments.git .body     { background-color: #33301C; border-color: #6A6034; }

html[data-theme="dark"] .client-comments        { background-color: #45222A; border-color: #8A4048; color: var(--ink-2); }
html[data-theme="dark"] .client-comments .comment { background-color: #45222A !important; color: var(--ink-2); }
html[data-theme="dark"] #client-comment-row textarea { background-color: #45222A; color: var(--ink); }

html[data-theme="dark"] .comment                { color: var(--ink-2); }
html[data-theme="dark"] .comment-header,
html[data-theme="dark"] .comment-header a       { color: var(--ink-3); }
html[data-theme="dark"] .stickied-comments,
html[data-theme="dark"] .edited-stickied-comments { color: var(--ink-2); }
html[data-theme="dark"] .edited-comment         { background-color: var(--pri-low-bg); color: var(--ink); }

html[data-theme="dark"] .diff                   { border-top-color: #2E6B87; color: var(--ink-3); }
html[data-theme="dark"] .comments.status .diff  { background-color: var(--s1); border-color: var(--line); color: var(--ink-3); }

html[data-theme="dark"] .panel .title           { border-bottom-color: var(--line-2); color: var(--ink-2); }
html[data-theme="dark"] .issue-main .sep        { border-bottom-color: var(--line-2); }
html[data-theme="dark"] .desc-title a.action    { color: var(--link); }

html[data-theme="dark"] .issue-page .issue-title  { color: var(--ink); }
html[data-theme="dark"] .issue-page a.project-name { color: var(--link); }
html[data-theme="dark"] .issue-label,
html[data-theme="dark"] .field-label,
html[data-theme="dark"] .issue-main .control > label { color: var(--ink); }
html[data-theme="dark"] .issueform-references td  { color: var(--ink-2); }

html[data-theme="dark"] .info-box               { background-color: var(--s0); color: var(--ink-2); }
html[data-theme="dark"] .client-header          { background-color: var(--s0) !important; }
html[data-theme="dark"] div.create-issue        { background-color: var(--s2); color: var(--ink); }

html[data-theme="dark"] .recent-change          { background-color: #2B2E6B; border-color: var(--line-2); color: #C3C6FF; }

html[data-theme="dark"] .highlight              { background-color: var(--mark); color: var(--mark-ink); }

html[data-theme="dark"] .single-project span,
html[data-theme="dark"] .multiple-projects span { color: var(--ink); }
html[data-theme="dark"] .multiple-projects      { color: var(--pri-critical); }

html[data-theme="dark"] .issue-feedback         { color: var(--pri-critical); }

/* --------------------------------------------------------------------------
   Messages
   -------------------------------------------------------------------------- */

html[data-theme="dark"] .error-messages,
html[data-theme="dark"] div.message.warning     { background-color: var(--danger); color: #ffffff; }

html[data-theme="dark"] .teknograd-warning {
    background-color: #4A4413;
    border-color: #8A7F2A;
    color: #FFE66D;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

html[data-theme="dark"] .button,
html[data-theme="dark"] .issue-button {
    background-color: var(--go);
    color: var(--go-ink) !important;
}
html[data-theme="dark"] .button:hover,  html[data-theme="dark"] .button:focus,
html[data-theme="dark"] .issue-button:hover, html[data-theme="dark"] .issue-button:focus {
    background-color: var(--go-hover);
    color: var(--go-ink) !important;
}
html[data-theme="dark"] .button:active,
html[data-theme="dark"] .issue-button:active   { background-color: var(--go-active); }

html[data-theme="dark"] .reload-button          { background-color: var(--btn); color: #ffffff !important; }

/* Secondary action -- was an inline lightgray/black style in showproject.nml */
html[data-theme="dark"] .button.secondary       { background-color: #2A4E60; color: var(--ink) !important; }
html[data-theme="dark"] .button.secondary:hover,
html[data-theme="dark"] .button.secondary:focus { background-color: var(--line-2); color: var(--ink) !important; }

/* Italic helper text -- was inline color:gray in several templates */
html[data-theme="dark"] .hint                   { color: var(--ink-3); }

html[data-theme="dark"] .comment-button         { background-color: #2A4E60; color: var(--ink) !important; }
html[data-theme="dark"] .comment-button.delete  { background-color: var(--danger); color: #ffffff !important; }
html[data-theme="dark"] .comment-button.sticky,
html[data-theme="dark"] .comment-button.unformat.enabled { background-color: var(--go); color: var(--go-ink) !important; }

html[data-theme="dark"] .login-button {
    background-image: linear-gradient(-180deg, var(--go-hover) 0%, var(--go) 100%);
    color: var(--go-ink);
}

/* --------------------------------------------------------------------------
   Form controls
   -------------------------------------------------------------------------- */

html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="date"],
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
    background-color: var(--s3);
    border: 1px solid var(--line-2);
    color: var(--ink);
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: var(--ink-3); }

html[data-theme="dark"] .issue textarea,
html[data-theme="dark"] textarea.issue-comment,
html[data-theme="dark"] .issue input#issue\.subject {
    background-color: var(--s3);
    border-color: var(--line-2);
    color: var(--ink);
}

html[data-theme="dark"] .clearable      { background-color: var(--s3); color: var(--ink); }

html[data-theme="dark"] option          { background-color: var(--s3); color: var(--ink); }
html[data-theme="dark"] option.selected { background: var(--btn); color: #ffffff; }

/* The select chrome uses a dark-on-white PNG arrow; swap in an SVG that is
   drawn in the theme's own ink instead of trying to filter the bitmap. */
html[data-theme="dark"] .select-style {
    background-color: var(--s3);
    border-color: var(--line-2);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 2l4.5 4 4.5-4' fill='none' stroke='%23A8BCC6' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
    background-size: 12px 8px;
    background-position: right 6px center;
}
/* The select inside .select-style is wider than its wrapper and clipped by
   overflow:hidden; the arrow belongs to the wrapper and shows through. Keep
   the select transparent or it paints over the arrow. */
html[data-theme="dark"] .select-style select {
    background: transparent;
    color: var(--ink);
}

html[data-theme="dark"] .task-label:hover  { background-color: var(--s3); }
html[data-theme="dark"] .tasks-table td    { color: var(--ink-2); }

html[data-theme="dark"] i.fa               { color: var(--link); }

/* Toggle switches */
html[data-theme="dark"] .toggle label                  { color: var(--ink-2); }
html[data-theme="dark"] .toggle .toggle-button,
html[data-theme="dark"] .toggle .toggle-button .toggle-tab { border-color: var(--link); }
html[data-theme="dark"] .toggle input[type=checkbox]:checked ~ label .toggle-button { background-color: var(--btn); }

/* --------------------------------------------------------------------------
   Tooltips, mentions, misc app widgets
   -------------------------------------------------------------------------- */

html[data-theme="dark"] table.issue_tooltip     { background-color: var(--s2); border-color: var(--line-2); color: var(--ink-2); }
html[data-theme="dark"] .issue_tooltip img      { border-right-color: var(--line-2); }
html[data-theme="dark"] .issue_tooltip .title   { color: var(--ink); }

html[data-theme="dark"] .qtip-content           { background-color: var(--s2) !important; color: var(--ink-2) !important; }
html[data-theme="dark"] .qtip-content a         { color: var(--link); }
html[data-theme="dark"] .qtip-contentWrapper    { border-color: var(--line-2) !important; }

html[data-theme="dark"] .textcomplete-dropdown          { background-color: var(--s2); border-color: var(--line); }
html[data-theme="dark"] .textcomplete-dropdown li       { border-top-color: var(--line); }
html[data-theme="dark"] .textcomplete-dropdown li a     { color: var(--ink); }
html[data-theme="dark"] .textcomplete-dropdown li:hover,
html[data-theme="dark"] .textcomplete-dropdown .active  { background-color: var(--btn); color: #ffffff; }

html[data-theme="dark"] img.vash                { border-color: var(--line-2); }

/* --------------------------------------------------------------------------
   Vendor widgets -- overridden here rather than in build/vendor.css so the
   bundle can still be regenerated without losing this work.
   -------------------------------------------------------------------------- */

/* SelectTypeahead -- the project picker in the sub-header, on every page */
html[data-theme="dark"] .SelectTypeahead                { color: var(--ink); }
html[data-theme="dark"] .SelectTypeahead > input {
    background-color: var(--s3);
    border-color: var(--line-2);
    color: var(--ink);
}
html[data-theme="dark"] .SelectTypeahead > ul           { background: var(--s2); border-color: var(--line-2); color: var(--ink); }
html[data-theme="dark"] .SelectTypeahead > ul > li      { color: var(--ink-2); }
html[data-theme="dark"] .SelectTypeahead > ul > li.active,
html[data-theme="dark"] .SelectTypeahead > ul > li:hover { background-color: var(--hover); color: var(--ink); }
html[data-theme="dark"] .SelectTypeahead > .dropdown-button {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5' fill='none' stroke='%23A8BCC6' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    background-size: 24px 24px;
}

/* sexy-combo */
html[data-theme="dark"] div.sexy input          { background: var(--s3); border-color: var(--line-2); color: var(--ink); }
html[data-theme="dark"] div.sexy ul             { background-color: var(--s2); border-color: var(--line-2); }
html[data-theme="dark"] .header div.sexy li,
html[data-theme="dark"] div.sexy li             { color: var(--ink-2); }
html[data-theme="dark"] div.sexy li.sexy-hover  { background-color: var(--hover); color: var(--ink); }

/* jQuery UI 1.8 (ui-lightness) */
html[data-theme="dark"] .ui-widget-content {
    background: var(--s1) none;
    border-color: var(--line-2);
    color: var(--ink-2);
}
html[data-theme="dark"] .ui-widget-content a    { color: var(--link); }
html[data-theme="dark"] .ui-widget-header {
    background: var(--chrome) none;
    border-color: var(--line-2);
    color: #ffffff;
}
html[data-theme="dark"] .ui-widget-header a     { color: #ffffff; }
html[data-theme="dark"] .ui-state-default,
html[data-theme="dark"] .ui-widget-content .ui-state-default,
html[data-theme="dark"] .ui-widget-header .ui-state-default {
    background: var(--s3) none;
    border-color: var(--line-2);
    color: var(--ink);
}
html[data-theme="dark"] .ui-state-hover,
html[data-theme="dark"] .ui-widget-content .ui-state-hover,
html[data-theme="dark"] .ui-state-focus {
    background: var(--hover) none;
    border-color: var(--link);
    color: var(--ink);
}
html[data-theme="dark"] .ui-state-active,
html[data-theme="dark"] .ui-widget-content .ui-state-active {
    background: var(--btn) none;
    border-color: var(--link);
    color: #ffffff;
}
html[data-theme="dark"] .ui-state-highlight,
html[data-theme="dark"] .ui-widget-content .ui-state-highlight {
    background: var(--pri-high-bg) none;
    border-color: var(--pri-high);
    color: var(--pri-high);
}
html[data-theme="dark"] .ui-widget-overlay      { background: #000000 none; opacity: .6; }
/* jQuery UI ships its icons as a dark sprite sheet */
html[data-theme="dark"] .ui-icon                { filter: invert(1) brightness(1.6); }
html[data-theme="dark"] .ui-datepicker          { background: var(--s1); }
html[data-theme="dark"] .ui-datepicker-title    { color: #ffffff; }
html[data-theme="dark"] .ui-datepicker th       { color: var(--ink-3); }

/* jquery.datePicker (the older popup) */
html[data-theme="dark"] table.jCalendar         { background: var(--s1); border-color: var(--line-2); }
html[data-theme="dark"] table.jCalendar th      { background: var(--s2); color: var(--ink-3); border-color: var(--line); }
html[data-theme="dark"] table.jCalendar td      { background: var(--s1); color: var(--ink-2); border-color: var(--line); }
html[data-theme="dark"] table.jCalendar td.other-month { color: var(--ink-3); opacity: .5; }
html[data-theme="dark"] table.jCalendar td.today       { background: var(--pri-high-bg); color: var(--pri-high); }
html[data-theme="dark"] table.jCalendar td.selected    { background: var(--btn); color: #ffffff; }
html[data-theme="dark"] table.jCalendar td:hover,
html[data-theme="dark"] table.jCalendar td.dp-hover    { background: var(--hover); color: var(--ink); }
html[data-theme="dark"] div.dp-popup            { background: var(--s1); border-color: var(--line-2); color: var(--ink-2); }
html[data-theme="dark"] div.dp-popup h2         { color: var(--ink); }
html[data-theme="dark"] div.dp-popup a          { color: var(--link); }

/* chosen */
html[data-theme="dark"] .chzn-container .chzn-single,
html[data-theme="dark"] .chzn-container .chzn-drop,
html[data-theme="dark"] .chzn-container .chzn-choices {
    background: var(--s3) none;
    border-color: var(--line-2);
    color: var(--ink);
    box-shadow: none;
}
html[data-theme="dark"] .chzn-container .chzn-results          { color: var(--ink-2); }
html[data-theme="dark"] .chzn-container .chzn-results li.highlighted { background: var(--btn) none; color: #ffffff; }
html[data-theme="dark"] .chzn-container .chzn-search input     { background-color: var(--s3); border-color: var(--line-2); color: var(--ink); }

/* pretty-checkbox */
html[data-theme="dark"] .pretty input:checked ~ .state.primary label:after,
html[data-theme="dark"] .pretty.p-default.p-fill input:checked ~ .state.primary label:after { background-color: var(--link) !important; }
html[data-theme="dark"] .pretty .state label:before { border-color: var(--line-2); }
html[data-theme="dark"] .pretty .state label        { color: var(--ink-2); }

/* tablesorter headers */
html[data-theme="dark"] table.tablesorter thead tr th {
    background-color: var(--s2);
    color: var(--ink-3);
    border-color: var(--line);
}

/* simplemodal confirm dialog */
html[data-theme="dark"] #confirm                { background: var(--s1); border: 1px solid var(--line-2); color: var(--ink-2); }
html[data-theme="dark"] #confirm .header        { background: var(--chrome); color: #ffffff; }
html[data-theme="dark"] #confirm .message       { color: var(--ink-2); }
html[data-theme="dark"] #confirm .buttons div   { background: var(--s3); color: var(--ink); }
html[data-theme="dark"] #confirm .buttons .yes  { background: var(--go); color: var(--go-ink); }
html[data-theme="dark"] .simplemodal-overlay    { background-color: #000000 !important; }

/* mmenu (mobile) already targets #083040 in stylesheet.css */
html[data-theme="dark"] .mm-navbar              { border-color: var(--line-2); }

/* --------------------------------------------------------------------------
   Icons shipped as dark-on-white bitmaps
   -------------------------------------------------------------------------- */

html[data-theme="dark"] img.ui-datepicker-trigger,
html[data-theme="dark"] img[src*="calendar"],
html[data-theme="dark"] img[src*="dropdown-arrow"],
html[data-theme="dark"] img[src*="/search.png"],
html[data-theme="dark"] img[src*="/edit.png"],
html[data-theme="dark"] img[src*="/delete.png"],
html[data-theme="dark"] img[src*="/logout.png"],
html[data-theme="dark"] img[src*="/branch.png"],
html[data-theme="dark"] img[src*="/new.png"] {
    filter: invert(1) hue-rotate(180deg) brightness(1.15);
}

/* --------------------------------------------------------------------------
   Login page
   -------------------------------------------------------------------------- */

html[data-theme="dark"] body.login {
    background-image:
        linear-gradient(rgba(11, 31, 41, .72), rgba(11, 31, 41, .72)),
        url("/static/bonanzaspring.jpg");
    background-size: cover, cover;
    background-repeat: no-repeat, no-repeat;
    background-attachment: fixed, fixed;
}
html[data-theme="dark"] div.login form          { background: var(--s2); }
html[data-theme="dark"] div.login table td.field { color: var(--ink-2); }
html[data-theme="dark"] div.login form table input {
    background: var(--s3);
    border-color: var(--line-2);
    color: var(--ink);
}

/* --------------------------------------------------------------------------
   Theme toggle injected by theme-toggle.js

   Not gated on the theme: the button sits on the navy header bar in both
   light and dark, so it is styled once against that bar.
   -------------------------------------------------------------------------- */

.theme-toggle {
    display: inline-block;
    vertical-align: middle;
    margin-left: 14px;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .4);
    border-radius: 50%;
    background: transparent;
    color: #ffffff;
    font-size: 14px;
    line-height: 24px;
    text-align: center;
    cursor: pointer;
}

.theme-toggle:hover {
    background: rgba(255, 255, 255, .18);
    border-color: #ffffff;
}

.theme-toggle:active {
    background: rgba(255, 255, 255, .3);
}

/* stylesheet.css paints every i.fa in the app blue, and dark.css repaints it;
   inside the button the glyph has to take the button's own colour. */
.theme-toggle .fa,
html[data-theme="dark"] .theme-toggle .fa {
    color: inherit;
}

/*
 * Font Awesome ships inside build/vendor.css, which only normal.nml loads --
 * login, 403, 404 and friends have no icon font at all. Rather than pull 100 KB
 * of vendor CSS onto the login page for two glyphs, declare just what the
 * toggle needs. Same family and same font file as the bundle, so on pages that
 * do load vendor.css this is a harmless duplicate.
 */
@font-face {
    font-family: 'FontAwesome';
    src: url('/static/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),
         url('/static/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),
         url('/static/fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.theme-toggle .fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.theme-toggle .fa-moon-o:before { content: "\f186"; }
.theme-toggle .fa-sun-o:before  { content: "\f185"; }

/* Pages with no header bar: login, 403, 404. */
.theme-toggle-floating {
    position: fixed;
    top: 12px;
    right: 12px;
    z-index: 99999;
    margin-left: 0;
    background: rgba(8, 48, 64, .85);
}

.theme-toggle-floating:hover {
    background: rgba(8, 48, 64, 1);
}