/*
| Stratgik brand layer.
|
| Committed, hand-written CSS — this project has no Node toolchain and
| public/build is treated as source (see CLAUDE.md). It loads AFTER Skote's
| app.min.css and re-points the handful of variables and classes that carry
| colour, so the console reads as Stratgik without forking the theme.
|
| The values are the live tokens from stratgik.com, read from its stylesheet on
| 12 September 2026 — not approximations sampled off a screenshot:
|
|   --sg-ink        #0A3949   the deep teal the wordmark is set in
|   --sg-accent     #C63A33   the red of the mark
|   --sg-surface-2  #F4F8F9   page ground
|   --sg-border     #D9E6E9
|
| Skote's own palette stays underneath as the fallback for anything not mapped
| here, so an unstyled corner degrades to the stock theme rather than to
| nothing.
*/

:root {
    --sg-ink: #0A3949;
    --sg-ink-2: #10495B;
    --sg-ink-3: #17596C;
    --sg-ink-deep: #083340;

    --sg-surface: #FFFFFF;
    --sg-surface-2: #F4F8F9;
    --sg-surface-3: #E7F0F2;
    --sg-border: #D9E6E9;
    --sg-border-strong: #B5CAD1;

    --sg-text: #0A3949;
    --sg-text-2: #456068;
    --sg-text-3: #5A727B;

    --sg-accent: #C63A33;
    --sg-accent-bright: #DD4942;
    --sg-accent-600: #AE302A;
    --sg-accent-soft: #FDECEB;

    --sg-good: #0E8F6F;
    --sg-warn: #B07203;
    --sg-bad: #A82F28;

    /* Bootstrap/Skote's own hooks, so components we never touch inherit it. */
    --bs-primary: #0A3949;
    --bs-primary-rgb: 10, 57, 73;
    --bs-link-color: #0A3949;
    --bs-link-hover-color: #C63A33;
    --bs-body-color: #0A3949;
}

/* -- Primary: teal, not Skote's indigo ---------------------------------- */

.btn-primary {
    background-color: var(--sg-ink);
    border-color: var(--sg-ink);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary:first-child:active {
    background-color: var(--sg-ink-deep);
    border-color: var(--sg-ink-deep);
}

.btn-primary:focus-visible {
    box-shadow: 0 0 0 .15rem rgba(10, 57, 73, .35);
}

.btn-outline-primary {
    color: var(--sg-ink);
    border-color: var(--sg-ink);
}

.btn-outline-primary:hover {
    background-color: var(--sg-ink);
    border-color: var(--sg-ink);
}

.text-primary { color: var(--sg-ink) !important; }
.bg-primary { background-color: var(--sg-ink) !important; }
.border-primary { border-color: var(--sg-ink) !important; }
.badge.bg-primary { background-color: var(--sg-ink) !important; }
.btn-soft-primary { color: var(--sg-ink); background-color: var(--sg-surface-3); }
.btn-soft-primary:hover { color: #fff; background-color: var(--sg-ink); }

a { color: var(--sg-ink); }
a:hover { color: var(--sg-accent); }

.form-control:focus,
.form-select:focus {
    border-color: var(--sg-border-strong);
    box-shadow: 0 0 0 .15rem rgba(10, 57, 73, .12);
}

.form-check-input:checked {
    background-color: var(--sg-ink);
    border-color: var(--sg-ink);
}

/* -- The red is an accent, and stays one -------------------------------- */

.btn-danger,
.badge.bg-danger,
.bg-danger { background-color: var(--sg-accent) !important; border-color: var(--sg-accent); }
.text-danger { color: var(--sg-accent) !important; }
.btn-soft-danger { color: var(--sg-accent); background-color: var(--sg-accent-soft); }

.bg-success, .badge.bg-success { background-color: var(--sg-good) !important; }
.text-success { color: var(--sg-good) !important; }
.bg-warning, .badge.bg-warning { background-color: var(--sg-warn) !important; }
.text-warning { color: var(--sg-warn) !important; }

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

body { background-color: var(--sg-surface-2); color: var(--sg-text); }

.vertical-menu,
.navbar-brand-box { background: var(--sg-ink-deep); }

#sidebar-menu ul li a { color: rgba(255, 255, 255, .72); }
#sidebar-menu ul li a:hover,
#sidebar-menu ul li a.mm-active,
#sidebar-menu ul li a.active { color: #fff; }
#sidebar-menu ul li ul.sub-menu li a:hover,
#sidebar-menu ul li ul.sub-menu li a.active { color: #fff; }
#sidebar-menu .menu-title { color: rgba(255, 255, 255, .45); }

/* Skote's own active colour is its indigo, set with !important. Now that
   metisMenu actually runs and the active state is visible, it has to be the
   brand's teal-on-dark instead. */
.mm-active,
.mm-active > a,
.mm-active > a i,
.mm-active > i,
#sidebar-menu ul li a.mm-active,
#sidebar-menu ul li ul.sub-menu li a.active { color: #fff !important; }

#sidebar-menu ul li.mm-active > a,
#sidebar-menu ul li a.mm-active { background: rgba(255, 255, 255, .06); }

/* The scrollbar simplebar draws inside the dark sidebar. */
.vertical-menu .simplebar-scrollbar:before { background: rgba(255, 255, 255, .35); }

.page-title-box { border-bottom: 1px solid var(--sg-border); }
.card { border: 1px solid var(--sg-border); box-shadow: 0 1px 2px rgba(10, 57, 73, .04); }

/* The wordmark carries its own whitespace; the box just gives it room. */
.sg-mark { display: inline-flex; align-items: center; }
.sg-mark img { height: 26px; width: auto; display: block; }
.navbar-brand-box .sg-mark img { height: 24px; }
/* On the dark sidebar the teal wordmark would disappear, so it is knocked
   back to white there — the mark keeps its red. */
.navbar-brand-box .sg-mark img,
.sg-mark--inverse img { filter: brightness(0) invert(1); }
.sg-mark--inverse .sg-mark__dot { filter: none; }