/*
 * Fuzzwork theme system: base layer.
 *
 * Everything in this file is scoped to html[data-fw-theme], an attribute that
 * themes/theme-boot.js only sets for non-classic themes. With the default
 * "classic" theme none of these rules match, and the legacy stylesheets
 * (bootstrap.min.css, main.css, dark-mode.css) render the site as before.
 *
 * Attributes on <html>:
 *   data-fw-theme="orbit"   which theme (absent = classic)
 *   data-theme="dark"       light/dark mode, unchanged from the legacy toggle
 *
 * LAYER 1: token contract.
 * Every theme file (themes/css/theme-*.css) sets these custom properties for
 * html[data-fw-theme="<name>"], and again for [data-theme="dark"] if the
 * theme supports dark mode. The defaults below are a neutral fallback so a
 * theme that leaves a token out still renders legibly.
 *
 * LAYER 2: bridge.
 * Bootstrap 3.1.1 components, jQuery UI, DataTables (1.9 and 1.10) and
 * tablesorter, restyled once using only the tokens. Themes should not need
 * to repeat any of this; theme files hold token values plus decoration.
 *
 * Table backgrounds are painted on td/th (not tr), because Bootstrap paints
 * cell backgrounds and those override row-level rules.
 */

/* ---------- Layer 1: token defaults ---------- */

html[data-fw-theme] {
    --fw-bg: #f4f4f4;
    --fw-surface: #ffffff;
    --fw-surface-2: #ececec;          /* raised areas: panel headings, wells, table heads */
    --fw-text: #1e1e1e;
    --fw-muted: #555555;
    --fw-border: #cccccc;             /* hairlines */
    --fw-border-strong: #1e1e1e;      /* outlines that are part of the look */
    --fw-border-width: 1px;
    --fw-accent: #2a5db0;             /* primary fills */
    --fw-on-accent: #ffffff;          /* text on accent fills */
    --fw-accent-2: #e0a020;           /* secondary highlight */
    --fw-on-accent-2: #1e1e1e;
    --fw-link: #2a5db0;
    --fw-link-hover: #1a3f7a;
    --fw-focus: rgba(42, 93, 176, 0.35);
    --fw-positive: #2e7d4f;
    --fw-negative: #b3261e;
    --fw-warning: #e0a020;
    --fw-info: #2f6690;
    --fw-on-status: #ffffff;          /* text on positive/negative/info fills */
    --fw-on-warning: #1e1e1e;
    --fw-nav-bg: #222222;
    --fw-nav-text: #eeeeee;
    --fw-footer-bg: #ececec;
    --fw-footer-text: #555555;
    --fw-input-bg: #ffffff;
    --fw-code-bg: #ececec;
    --fw-row-stripe: rgba(0, 0, 0, 0.035);
    --fw-row-hover: rgba(42, 93, 176, 0.08);
    --fw-radius-sm: 3px;
    --fw-radius-md: 4px;
    --fw-radius-lg: 6px;
    --fw-radius-pill: 999px;
    --fw-font-body: "Helvetica Neue", Helvetica, Arial, sans-serif;
    --fw-font-display: var(--fw-font-body);
    --fw-font-mono: Menlo, Monaco, Consolas, "Courier New", monospace;

    /* Tool conventions shared across apps (see "Shared tool components") */
    --fw-sec-high: #90ee90;           /* security status cell fills */
    --fw-sec-low: #ffa500;
    --fw-sec-null: #e0605a;
    --fw-on-sec: #111111;             /* text on security fills */
    --fw-status-good: #90ee90;        /* status cells: td.good / .ok / .bad / .hover */
    --fw-status-ok: #ffff00;
    --fw-status-bad: #ff0000;
    --fw-status-hover: #a9a9a9;
    --fw-on-status-cell: #111111;
    --fw-group-row: #dddddd;          /* group header rows inside tables */
    --fw-shadow-raised: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

/* ---------- Layer 2: bridge ---------- */

/* Page */
html[data-fw-theme] body {
    background-color: var(--fw-bg);
    color: var(--fw-text);
    font-family: var(--fw-font-body);
}
html[data-fw-theme] h1, html[data-fw-theme] h2, html[data-fw-theme] h3,
html[data-fw-theme] .h1, html[data-fw-theme] .h2, html[data-fw-theme] .h3 {
    font-family: var(--fw-font-display);
}
html[data-fw-theme] a { color: var(--fw-link); }
html[data-fw-theme] a:hover,
html[data-fw-theme] a:focus { color: var(--fw-link-hover); }
html[data-fw-theme] hr,
html[data-fw-theme] .page-header { border-color: var(--fw-border); }
html[data-fw-theme] blockquote { border-left-color: var(--fw-border); }
html[data-fw-theme] .text-muted,
html[data-fw-theme] .help-block,
html[data-fw-theme] small,
html[data-fw-theme] .small { color: var(--fw-muted); }
html[data-fw-theme] .text-primary { color: var(--fw-accent); }
html[data-fw-theme] .text-success { color: var(--fw-positive); }
html[data-fw-theme] .text-danger { color: var(--fw-negative); }
html[data-fw-theme] .text-info { color: var(--fw-info); }
html[data-fw-theme] ::selection { background: var(--fw-accent-2); color: var(--fw-on-accent-2); }
html[data-fw-theme] pre,
html[data-fw-theme] code,
html[data-fw-theme] kbd {
    background-color: var(--fw-code-bg);
    color: var(--fw-text);
    border-color: var(--fw-border);
    font-family: var(--fw-font-mono);
}
html[data-fw-theme] .close { color: var(--fw-text); text-shadow: none; opacity: 0.6; }

/* Navbar (shared menu/menubootstrap.php uses .navbar-inverse) */
html[data-fw-theme] .navbar-inverse {
    background-color: var(--fw-nav-bg);
    border-color: var(--fw-border);
}
html[data-fw-theme] .navbar-inverse .navbar-brand,
html[data-fw-theme] .navbar-inverse .navbar-nav > li > a {
    color: var(--fw-nav-text);
}
html[data-fw-theme] .navbar-inverse .navbar-brand:hover,
html[data-fw-theme] .navbar-inverse .navbar-nav > li > a:hover,
html[data-fw-theme] .navbar-inverse .navbar-nav > li > a:focus,
html[data-fw-theme] .navbar-inverse .navbar-nav > .open > a,
html[data-fw-theme] .navbar-inverse .navbar-nav > .open > a:hover,
html[data-fw-theme] .navbar-inverse .navbar-nav > .open > a:focus,
html[data-fw-theme] .navbar-inverse .navbar-nav > .active > a {
    background-color: var(--fw-accent);
    color: var(--fw-on-accent);
}
html[data-fw-theme] .navbar-inverse .navbar-nav .caret,
html[data-fw-theme] .navbar-inverse .navbar-nav > .dropdown > a .caret,
html[data-fw-theme] .navbar-inverse .navbar-nav > .dropdown > a:hover .caret,
html[data-fw-theme] .navbar-inverse .navbar-nav > .open > a .caret {
    border-top-color: currentColor;
    border-bottom-color: currentColor;
}
html[data-fw-theme] .navbar-inverse .navbar-toggle { border-color: var(--fw-border); }
html[data-fw-theme] .navbar-inverse .navbar-toggle:hover,
html[data-fw-theme] .navbar-inverse .navbar-toggle:focus { background-color: var(--fw-surface-2); }
html[data-fw-theme] .navbar-inverse .navbar-toggle .icon-bar { background-color: var(--fw-nav-text); }
html[data-fw-theme] .navbar-inverse .navbar-collapse,
html[data-fw-theme] .navbar-inverse .navbar-form { border-color: var(--fw-border); }

/* Light/dark toggle icon (legacy icon lives in dark-mode.css, which is off for non-classic themes) */
html[data-fw-theme] #theme-toggle-btn::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: -3px;
    border: 2px solid currentColor;
    border-radius: 50%;
    box-sizing: border-box;
    background: linear-gradient(90deg, currentColor 50%, transparent 50%);
}

/* Dropdowns */
html[data-fw-theme] .dropdown-menu,
html[data-fw-theme] .navbar-inverse .dropdown-menu {
    background-color: var(--fw-surface);
    border: var(--fw-border-width) solid var(--fw-border-strong);
    border-radius: var(--fw-radius-md);
}
html[data-fw-theme] .dropdown-menu > li > a,
html[data-fw-theme] .navbar-inverse .navbar-nav .open .dropdown-menu > li > a { color: var(--fw-text); }
html[data-fw-theme] .dropdown-menu > li > a:hover,
html[data-fw-theme] .dropdown-menu > li > a:focus,
html[data-fw-theme] .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover,
html[data-fw-theme] .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus,
html[data-fw-theme] .dropdown-menu > .active > a,
html[data-fw-theme] .dropdown-menu > .active > a:hover {
    background-color: var(--fw-accent);
    color: var(--fw-on-accent);
}
html[data-fw-theme] .dropdown-menu .dropdown-header,
html[data-fw-theme] .navbar-inverse .navbar-nav .open .dropdown-menu .dropdown-header { color: var(--fw-muted); }
html[data-fw-theme] .dropdown-menu .divider,
html[data-fw-theme] .navbar-inverse .navbar-nav .open .dropdown-menu .divider { background-color: var(--fw-border); }

/* Buttons */
html[data-fw-theme] .btn { border-radius: var(--fw-radius-md); }
html[data-fw-theme] .btn-default,
html[data-fw-theme] :where(button:not(.btn, .navbar-toggle, .close)),
html[data-fw-theme] :where(input[type="button"]:not(.btn), input[type="submit"]:not(.btn), input[type="reset"]:not(.btn)) {
    background-color: var(--fw-surface);
    color: var(--fw-text);
    border-color: var(--fw-border-strong);
}
html[data-fw-theme] .btn-default:hover,
html[data-fw-theme] .btn-default:focus,
html[data-fw-theme] .btn-default.active,
html[data-fw-theme] .open .dropdown-toggle.btn-default {
    background-color: var(--fw-surface-2);
    color: var(--fw-text);
    border-color: var(--fw-border-strong);
}
html[data-fw-theme] .btn-primary { background-color: var(--fw-accent); border-color: var(--fw-accent); color: var(--fw-on-accent); }
html[data-fw-theme] .btn-success { background-color: var(--fw-positive); border-color: var(--fw-positive); color: var(--fw-on-status); }
html[data-fw-theme] .btn-danger { background-color: var(--fw-negative); border-color: var(--fw-negative); color: var(--fw-on-status); }
html[data-fw-theme] .btn-info { background-color: var(--fw-info); border-color: var(--fw-info); color: var(--fw-on-status); }
html[data-fw-theme] .btn-warning { background-color: var(--fw-warning); border-color: var(--fw-warning); color: var(--fw-on-warning); }
html[data-fw-theme] .btn-primary:hover, html[data-fw-theme] .btn-primary:focus,
html[data-fw-theme] .btn-success:hover, html[data-fw-theme] .btn-success:focus,
html[data-fw-theme] .btn-danger:hover, html[data-fw-theme] .btn-danger:focus,
html[data-fw-theme] .btn-info:hover, html[data-fw-theme] .btn-info:focus,
html[data-fw-theme] .btn-warning:hover, html[data-fw-theme] .btn-warning:focus { filter: brightness(1.1); }
html[data-fw-theme] .btn-link { color: var(--fw-link); }
html[data-fw-theme] .btn:focus { outline: 2px solid var(--fw-focus); outline-offset: 2px; }

/* Forms (raw inputs too: many older tools don't use .form-control) */
html[data-fw-theme] .form-control,
html[data-fw-theme] input:not([type]),
html[data-fw-theme] input[type="text"],
html[data-fw-theme] input[type="number"],
html[data-fw-theme] input[type="search"],
html[data-fw-theme] input[type="email"],
html[data-fw-theme] input[type="password"],
html[data-fw-theme] select,
html[data-fw-theme] textarea {
    background-color: var(--fw-input-bg);
    color: var(--fw-text);
    border: var(--fw-border-width) solid var(--fw-border-strong);
    border-radius: var(--fw-radius-sm);
}
html[data-fw-theme] .form-control { border-radius: var(--fw-radius-md); box-shadow: none; }
html[data-fw-theme] .form-control:focus,
html[data-fw-theme] input:focus,
html[data-fw-theme] select:focus,
html[data-fw-theme] textarea:focus {
    border-color: var(--fw-accent);
    box-shadow: 0 0 0 3px var(--fw-focus);
    outline: none;
}
html[data-fw-theme] input::placeholder,
html[data-fw-theme] textarea::placeholder { color: var(--fw-muted); opacity: 1; }
html[data-fw-theme] .form-control[disabled],
html[data-fw-theme] .form-control[readonly] { background-color: var(--fw-surface-2); }
html[data-fw-theme] .input-group-addon {
    background-color: var(--fw-surface-2);
    color: var(--fw-text);
    border-color: var(--fw-border-strong);
}
html[data-fw-theme] label,
html[data-fw-theme] legend { color: var(--fw-text); border-color: var(--fw-border); }

/* Panels, wells, jumbotron, list groups */
/* Panel corners scale with panel width: theme-boot.js writes each panel's
   width to --fw-box-w, and the radius runs from --fw-radius-sm on narrow
   panels up to --fw-radius-lg on wide ones (reached at about 1100px). Before
   the measurement lands, the 1000px fallback gives a near-full radius. */
html[data-fw-theme] .panel,
html[data-fw-theme] .well,
html[data-fw-theme] .jumbotron {
    --fw-panel-radius: clamp(var(--fw-radius-sm), calc(var(--fw-box-w, 1000px) * 0.036), var(--fw-radius-lg));
}
html[data-fw-theme] .panel {
    background-color: var(--fw-surface);
    border: var(--fw-border-width) solid var(--fw-border-strong);
    border-radius: var(--fw-panel-radius);
    box-shadow: none;
    overflow: hidden;
}
html[data-fw-theme] .panel > .panel-heading {
    background-color: var(--fw-surface-2);
    color: var(--fw-text);
    border-color: var(--fw-border);
}
html[data-fw-theme] .panel-primary > .panel-heading { background-color: var(--fw-accent); color: var(--fw-on-accent); }
html[data-fw-theme] .panel-title { font-family: var(--fw-font-display); }
html[data-fw-theme] .panel-footer { background-color: var(--fw-surface-2); border-color: var(--fw-border); }
html[data-fw-theme] .well,
html[data-fw-theme] .jumbotron {
    background-color: var(--fw-surface-2);
    color: var(--fw-text);
    border-color: var(--fw-border);
    box-shadow: none;
}
html[data-fw-theme] .list-group-item {
    background-color: var(--fw-surface);
    color: var(--fw-text);
    border-color: var(--fw-border);
}
html[data-fw-theme] a.list-group-item:hover,
html[data-fw-theme] a.list-group-item:focus { background-color: var(--fw-surface-2); color: var(--fw-text); }
html[data-fw-theme] .list-group-item.active,
html[data-fw-theme] .list-group-item.active:hover {
    background-color: var(--fw-accent);
    border-color: var(--fw-accent);
    color: var(--fw-on-accent);
}

/* Tables: backgrounds on cells, not rows */
html[data-fw-theme] table { border-color: var(--fw-border); }
html[data-fw-theme] th,
html[data-fw-theme] td { color: inherit; }
html[data-fw-theme] .table { color: var(--fw-text); background-color: transparent; }
html[data-fw-theme] .table > thead > tr > th,
html[data-fw-theme] .table > thead > tr > td,
html[data-fw-theme] .table > tbody > tr > th,
html[data-fw-theme] .table > tbody > tr > td,
html[data-fw-theme] .table > tfoot > tr > th,
html[data-fw-theme] .table > tfoot > tr > td {
    background-color: transparent;
    border-color: var(--fw-border);
    font-variant-numeric: tabular-nums;
}
html[data-fw-theme] .table > thead > tr > th { border-bottom: 2px solid var(--fw-border-strong); }
html[data-fw-theme] .table-striped > tbody > tr:nth-child(odd) > td,
html[data-fw-theme] .table-striped > tbody > tr:nth-child(odd) > th { background-color: var(--fw-row-stripe); }
html[data-fw-theme] .table-hover > tbody > tr:hover > td,
html[data-fw-theme] .table-hover > tbody > tr:hover > th { background-color: var(--fw-row-hover); }
html[data-fw-theme] .table-bordered,
html[data-fw-theme] .table-bordered > thead > tr > th,
html[data-fw-theme] .table-bordered > tbody > tr > td,
html[data-fw-theme] .table-bordered > tbody > tr > th,
html[data-fw-theme] .table-bordered > tfoot > tr > td { border-color: var(--fw-border); }
/* Contextual rows/cells. Fallback first for browsers without color-mix(). */
html[data-fw-theme] .table > tbody > tr > td.success, html[data-fw-theme] .table > tbody > tr.success > td { background-color: var(--fw-surface-2); background-color: color-mix(in srgb, var(--fw-positive) 22%, transparent); }
html[data-fw-theme] .table > tbody > tr > td.danger, html[data-fw-theme] .table > tbody > tr.danger > td { background-color: var(--fw-surface-2); background-color: color-mix(in srgb, var(--fw-negative) 22%, transparent); }
html[data-fw-theme] .table > tbody > tr > td.warning, html[data-fw-theme] .table > tbody > tr.warning > td { background-color: var(--fw-surface-2); background-color: color-mix(in srgb, var(--fw-warning) 28%, transparent); }
html[data-fw-theme] .table > tbody > tr > td.info, html[data-fw-theme] .table > tbody > tr.info > td { background-color: var(--fw-surface-2); background-color: color-mix(in srgb, var(--fw-info) 22%, transparent); }
html[data-fw-theme] .table > tbody > tr > td.active, html[data-fw-theme] .table > tbody > tr.active > td { background-color: var(--fw-surface-2); }

/* Shared status cells (classic values in bootstrap/main.css). Cells only:
   the market viewer uses "hover" as a DataTables table class. */
html[data-fw-theme] td.good, html[data-fw-theme] th.good { background-color: var(--fw-status-good) !important; color: var(--fw-on-status-cell); }
html[data-fw-theme] td.ok, html[data-fw-theme] th.ok { background-color: var(--fw-status-ok) !important; color: var(--fw-on-status-cell); }
html[data-fw-theme] td.bad, html[data-fw-theme] th.bad { background-color: var(--fw-status-bad) !important; color: var(--fw-on-status-cell); }
html[data-fw-theme] td.hover, html[data-fw-theme] th.hover { background-color: var(--fw-status-hover) !important; color: var(--fw-on-status-cell); }
html[data-fw-theme] td.good a, html[data-fw-theme] td.ok a,
html[data-fw-theme] td.bad a, html[data-fw-theme] td.hover a { color: inherit; text-decoration: underline; }

/* Alerts, labels, badges */
html[data-fw-theme] .alert { border-width: var(--fw-border-width); border-radius: var(--fw-radius-md); color: var(--fw-text); }
html[data-fw-theme] .alert-success { border-color: var(--fw-positive); background-color: var(--fw-surface); background-color: color-mix(in srgb, var(--fw-positive) 14%, var(--fw-surface)); }
html[data-fw-theme] .alert-danger { border-color: var(--fw-negative); background-color: var(--fw-surface); background-color: color-mix(in srgb, var(--fw-negative) 14%, var(--fw-surface)); }
html[data-fw-theme] .alert-warning { border-color: var(--fw-warning); background-color: var(--fw-surface); background-color: color-mix(in srgb, var(--fw-warning) 18%, var(--fw-surface)); }
html[data-fw-theme] .alert-info { border-color: var(--fw-info); background-color: var(--fw-surface); background-color: color-mix(in srgb, var(--fw-info) 14%, var(--fw-surface)); }
html[data-fw-theme] .alert .alert-link { color: var(--fw-link); }
html[data-fw-theme] .label-default { background-color: var(--fw-muted); color: var(--fw-bg); }
html[data-fw-theme] .label-primary,
html[data-fw-theme] .badge { background-color: var(--fw-accent); color: var(--fw-on-accent); }
html[data-fw-theme] .label-success { background-color: var(--fw-positive); color: var(--fw-on-status); }
html[data-fw-theme] .label-danger { background-color: var(--fw-negative); color: var(--fw-on-status); }
html[data-fw-theme] .label-info { background-color: var(--fw-info); color: var(--fw-on-status); }
html[data-fw-theme] .label-warning { background-color: var(--fw-warning); color: var(--fw-on-warning); }

/* Navigation components */
html[data-fw-theme] .nav-tabs { border-bottom-color: var(--fw-border-strong); }
html[data-fw-theme] .nav-tabs > li > a:hover,
html[data-fw-theme] .nav > li > a:hover,
html[data-fw-theme] .nav > li > a:focus { background-color: var(--fw-surface-2); border-color: transparent; }
html[data-fw-theme] .nav-tabs > li.active > a,
html[data-fw-theme] .nav-tabs > li.active > a:hover,
html[data-fw-theme] .nav-tabs > li.active > a:focus {
    background-color: var(--fw-bg);
    color: var(--fw-text);
    border-color: var(--fw-border-strong);
    border-bottom-color: transparent;
}
html[data-fw-theme] .nav-pills > li.active > a,
html[data-fw-theme] .nav-pills > li.active > a:hover,
html[data-fw-theme] .nav-pills > li.active > a:focus { background-color: var(--fw-accent); color: var(--fw-on-accent); }
html[data-fw-theme] .breadcrumb { background-color: var(--fw-surface-2); }
html[data-fw-theme] .breadcrumb > .active { color: var(--fw-muted); }
html[data-fw-theme] .pagination > li > a,
html[data-fw-theme] .pagination > li > span {
    background-color: var(--fw-surface);
    color: var(--fw-link);
    border-color: var(--fw-border);
}
html[data-fw-theme] .pagination > li > a:hover,
html[data-fw-theme] .pagination > li > a:focus { background-color: var(--fw-surface-2); }
html[data-fw-theme] .pagination > .active > a,
html[data-fw-theme] .pagination > .active > span,
html[data-fw-theme] .pagination > .active > a:hover {
    background-color: var(--fw-accent);
    border-color: var(--fw-accent);
    color: var(--fw-on-accent);
}
html[data-fw-theme] .pagination > .disabled > a,
html[data-fw-theme] .pagination > .disabled > span { background-color: var(--fw-surface); color: var(--fw-muted); }
html[data-fw-theme] .progress { background-color: var(--fw-surface-2); box-shadow: none; }
html[data-fw-theme] .progress-bar { background-color: var(--fw-accent); color: var(--fw-on-accent); }

/* Overlays */
html[data-fw-theme] .modal-content,
html[data-fw-theme] .popover {
    background-color: var(--fw-surface);
    color: var(--fw-text);
    border: var(--fw-border-width) solid var(--fw-border-strong);
    border-radius: var(--fw-radius-lg);
}
html[data-fw-theme] .modal-header,
html[data-fw-theme] .modal-footer,
html[data-fw-theme] .popover-title { border-color: var(--fw-border); background-color: transparent; }
html[data-fw-theme] .tooltip-inner { background-color: var(--fw-text); color: var(--fw-bg); }

/* Footer (bootstrap/footer.php). The legacy layout fixes the footer at 60px
   and pulls it up with a negative margin on #wrap, so a painted footer gets
   clipped and its text spills out. Token themes use a flex sticky footer:
   #wrap grows, the footer takes the height its content needs. */
html[data-fw-theme] body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
html[data-fw-theme] #wrap {
    flex: 1 0 auto;
    min-height: 0;
    margin-bottom: 0;
    /* Keep #wrap at window width even when a wide table overflows (ore
       full.php): otherwise it widens to the table and the centred navbar
       ends up off-screen. The table overflows as it does on classic. */
    min-width: 0;
    width: 100%;
}
html[data-fw-theme] #footer { min-width: 0; width: 100%; }
html[data-fw-theme] #footer {
    flex-shrink: 0;
    height: auto;
    padding: 16px 0 20px;
    background-color: var(--fw-footer-bg);
    color: var(--fw-footer-text);
}
html[data-fw-theme] #footer a { color: inherit; text-decoration: underline; }

/* jQuery UI (autocomplete on most tools, dialogs/tabs/spinners on a few) */
html[data-fw-theme] .ui-widget { font-family: var(--fw-font-body); }
html[data-fw-theme] .ui-widget-content {
    background: var(--fw-surface);
    color: var(--fw-text);
    border-color: var(--fw-border-strong);
}
html[data-fw-theme] .ui-widget-content a { color: var(--fw-text); }
html[data-fw-theme] .ui-widget-header {
    background: var(--fw-surface-2);
    color: var(--fw-text);
    border-color: var(--fw-border);
}
html[data-fw-theme] .ui-state-default,
html[data-fw-theme] .ui-widget-content .ui-state-default,
html[data-fw-theme] .ui-widget-header .ui-state-default {
    background: var(--fw-surface);
    color: var(--fw-text);
    border-color: var(--fw-border);
}
html[data-fw-theme] .ui-state-hover,
html[data-fw-theme] .ui-widget-content .ui-state-hover,
html[data-fw-theme] .ui-widget-header .ui-state-hover,
html[data-fw-theme] .ui-state-focus,
html[data-fw-theme] .ui-widget-content .ui-state-focus,
html[data-fw-theme] .ui-widget-header .ui-state-focus,
html[data-fw-theme] .ui-state-active,
html[data-fw-theme] .ui-widget-content .ui-state-active,
html[data-fw-theme] .ui-menu .ui-menu-item a.ui-state-focus,
html[data-fw-theme] .ui-menu .ui-menu-item a.ui-state-active {
    background: var(--fw-accent);
    color: var(--fw-on-accent);
    border-color: var(--fw-accent);
    margin: 0;
}
html[data-fw-theme] .ui-autocomplete { border-radius: var(--fw-radius-md); overflow: hidden; }
html[data-fw-theme] .ui-spinner-input { background: transparent; color: var(--fw-text); border: none; }
html[data-fw-theme][data-theme="dark"] .ui-icon { filter: invert(1); }

/* DataTables. 1.10's display/stripe classes out-specify anything reasonable,
   so cell backgrounds use !important here. Cells carrying the apps' status
   classes are excluded so their fills survive. */
html[data-fw-theme] table.dataTable { color: var(--fw-text); }
html[data-fw-theme] table.dataTable thead th,
html[data-fw-theme] table.dataTable tfoot th { border-color: var(--fw-border-strong); }
/* The status-cell exclusions sit in :where() so they add no specificity,
   which lets the fw-grid rules below override these cleanly. */
html[data-fw-theme] table.dataTable tbody tr:not(.group),
html[data-fw-theme] table.dataTable tbody tr:not(.group) > td:where(:not(.good, .ok, .bad, .hover, .highsec, .lowsec, .nullsec)) {
    background-color: transparent !important;
}
html[data-fw-theme] table.dataTable tbody tr.odd:not(.group) > td:where(:not(.good, .ok, .bad, .hover, .highsec, .lowsec, .nullsec)) {
    background-color: var(--fw-row-stripe) !important;
}
html[data-fw-theme] table.dataTable tbody tr:not(.group):hover > td:where(:not(.good, .ok, .bad, .hover, .highsec, .lowsec, .nullsec)) {
    background-color: var(--fw-row-hover) !important;
}
/* DataTables inside an fw-grid (e.g. PI) keep the grid's surface cells, since
   the grid's table background is its line colour. Also covers nested tables,
   whose rows match the descendant selectors above. */
html[data-fw-theme] .fw-grid table.dataTable tbody tr:not(.group) > td:where(:not(.good, .ok, .bad, .hover, .highsec, .lowsec, .nullsec)) {
    background-color: var(--fw-surface) !important;
}
html[data-fw-theme] .fw-grid table.dataTable tbody tr.odd:not(.group) > td:where(:not(.good, .ok, .bad, .hover, .highsec, .lowsec, .nullsec)) {
    background-color: var(--fw-surface) !important;
    background-image: linear-gradient(var(--fw-row-stripe), var(--fw-row-stripe));
}
html[data-fw-theme] .fw-grid table.dataTable tbody tr:not(.group):hover > td:where(:not(.good, .ok, .bad, .hover, .highsec, .lowsec, .nullsec)) {
    background-color: var(--fw-surface) !important;
    background-image: linear-gradient(var(--fw-row-hover), var(--fw-row-hover));
}
html[data-fw-theme] table.dataTable td { border-color: var(--fw-border); }
html[data-fw-theme] .dataTables_wrapper,
html[data-fw-theme] .dataTables_wrapper .dataTables_info,
html[data-fw-theme] .dataTables_wrapper .dataTables_length,
html[data-fw-theme] .dataTables_wrapper .dataTables_filter { color: var(--fw-muted); }
html[data-fw-theme] .dataTables_wrapper .paginate_button,
html[data-fw-theme] .dataTables_wrapper .paginate_enabled_previous,
html[data-fw-theme] .dataTables_wrapper .paginate_enabled_next { color: var(--fw-link) !important; }
html[data-fw-theme] .dataTables_wrapper .paginate_button.current,
html[data-fw-theme] .dataTables_wrapper .paginate_button:hover {
    background: var(--fw-accent) !important;
    color: var(--fw-on-accent) !important;
    border-color: var(--fw-accent) !important;
}
html[data-fw-theme][data-theme="dark"] table.dataTable thead .sorting,
html[data-fw-theme][data-theme="dark"] table.dataTable thead .sorting_asc,
html[data-fw-theme][data-theme="dark"] table.dataTable thead .sorting_desc { background-blend-mode: difference; }

/* ---------- Shared tool components ----------
   Class conventions used by the tools (first by the blueprint calculator).
   Apps keep their own classic colours, scoped to html:not([data-fw-theme]);
   themed colours live here. !important matches the apps' classic rules,
   which need it to beat DataTables' sorted-column tint. */

/* Security status cells: cost index tables, route lists */
html[data-fw-theme] td.highsec { background-color: var(--fw-sec-high) !important; color: var(--fw-on-sec); }
html[data-fw-theme] td.lowsec { background-color: var(--fw-sec-low) !important; color: var(--fw-on-sec); }
html[data-fw-theme] td.nullsec { background-color: var(--fw-sec-null) !important; color: var(--fw-on-sec); }

/* Group header rows (DataTables row grouping). Painted on the cells, since
   cell backgrounds would otherwise cover a row-level fill. */
html[data-fw-theme] tr.group,
html[data-fw-theme] tr.group > td,
html[data-fw-theme] tr.group > th,
html[data-fw-theme] tr.group:hover > td,
html[data-fw-theme] tr.group:hover > th {
    background-color: var(--fw-group-row) !important;
    color: var(--fw-text);
    font-weight: 600;
}

/* Raised toggle buttons, e.g. the blueprint "make it yourself" M button */
html[data-fw-theme] .makeme {
    box-shadow: var(--fw-shadow-raised);
    border-radius: var(--fw-radius-sm);
    min-width: 28px;
    font-weight: 700;
}

/* Plain data grids (opt-in: class="fw-grid" on a wrapper). Older tools build
   nested <table border=1> layouts without Bootstrap's .table class; classic
   colours for these are in bootstrap/main.css and dark-mode.css. The table
   background shows through the cell spacing, so it doubles as grid lines. */
html[data-fw-theme] .fw-grid table {
    background-color: var(--fw-border);
    color: var(--fw-text);
    font-family: inherit;
}
html[data-fw-theme] .fw-grid table[border] { border-color: var(--fw-border); border-style: solid; }
html[data-fw-theme] .fw-grid th {
    background-color: var(--fw-surface-2);
    color: var(--fw-text);
    border-color: var(--fw-border);
}
html[data-fw-theme] .fw-grid td {
    background-color: var(--fw-surface);
    color: var(--fw-text);
    border-color: var(--fw-border);
    font-variant-numeric: tabular-nums;
}
html[data-fw-theme] .fw-grid tr.odd > td {
    background-color: var(--fw-surface);
    background-image: linear-gradient(var(--fw-row-stripe), var(--fw-row-stripe));
}
html[data-fw-theme] .fw-grid .headerSortUp,
html[data-fw-theme] .fw-grid .headerSortDown { background-color: var(--fw-row-hover); }

/* Section heading rows inside a grid (e.g. one per reaction) */
html[data-fw-theme] .fw-grid .fw-group-row {
    background-color: var(--fw-group-row);
    color: var(--fw-text);
    font-family: var(--fw-font-display);
    font-weight: 400;
    font-size: 15px;
    padding: 8px 10px;
}

/* Draggable price summary heading on the blueprint display */
html[data-fw-theme] #priceheader { font-family: var(--fw-font-display); color: var(--fw-text); }

/* tablesorter (header arrows are background images, so only tint the cell) */
html[data-fw-theme] table.tablesorter thead tr th,
html[data-fw-theme] th.header,
html[data-fw-theme] th.headerSortUp,
html[data-fw-theme] th.headerSortDown {
    background-color: var(--fw-surface-2);
    color: var(--fw-text);
    cursor: pointer;
}
html[data-fw-theme] th.headerSortUp,
html[data-fw-theme] th.headerSortDown { background-color: var(--fw-row-hover); }