/* ── Palette tokens now live in themes.css (six theme x mode blocks).
      This file keeps STRUCTURE + component styling and consumes those tokens;
      it must never hardcode a color again. ── */

body {
    color: var(--cw-body-text);
    background-color: var(--cw-body-bg);
    font-family: "Segoe UI", Helvetica, Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--cw-heading-text);
}

a {
    color: var(--cw-link);
}

a:hover {
    color: var(--cw-link-hover);
}

/* ── Navbar (verbatim pattern from cw-2026 public site) ───────────── */
.navbar-cw {
    background-color: var(--cw-navbar-bg);
}

.navbar-cw .navbar-brand {
    display: flex;
    align-items: center;
}

.navbar-cw .nav-link {
    color: var(--cw-navbar-text);
    font-size: .92rem;
}

.navbar-cw .nav-link:hover,
.navbar-cw .nav-link:focus {
    color: var(--cw-navbar-text-hover);
}

/* Desktop tool-switcher navbar: dev-reference only, hidden below lg */
.desktop-navbar .navbar-nav {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 1.25rem;
}

/* ── Brand text lockup: "CW" (light) + tool name (bold) ───────────── */
.brand-cw,
.brand-tool {
    font-size: 1.5rem;
    line-height: 1;
}

.brand-cw {
    color: var(--cw-brand-text);
    font-weight: 300;
}

.brand-tool {
    color: var(--cw-brand-accent);
    font-weight: 700;
    margin-left: .15rem;
}

/* ── Mobile topbar: brand + sidebar toggle, replaces the hidden nav ── */
.mobile-topbar {
    border-bottom: 1px solid var(--cw-navbar-border);
}

.mobile-topbar .brand-cw,
.mobile-topbar .brand-tool {
    font-size: 1.1rem;
}

/* ── Sidebar / responsive offcanvas nav ────────────────────────────── */
.sidebar-col {
    --bs-offcanvas-width: 280px;
}

@media (max-width: 991.98px) {
    .sidebar-col.show,
    .sidebar-col.showing:not(.hiding) {
        transform: none;
    }
}

@media (min-width: 992px) {
    .sidebar-col {
        flex: 0 0 auto;
        width: 260px;
        margin-right: 1.5rem;
    }

    .sidebar-col .offcanvas-body {
        padding: 0;
    }
}

.sidebar-col .list-group-item {
    background-color: var(--cw-sidebar-bg);
}

.sidebar-col .list-group-item:not(.list-group-item-secondary):nth-child(even) {
    background-color: var(--cw-table-stripe);
}

.sidebar-col .list-group-item-secondary {
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    background-color: var(--cw-sidebar-header-bg);
    color: var(--cw-sidebar-header-text);
}

.sidebar-col .list-group-item a {
    color: var(--cw-sidebar-text);
    text-decoration: none;
    display: block;
}

.sidebar-col .list-group-item a:hover {
    color: var(--cw-sidebar-link-hover);
}

/* Zebra-striped list-group, for use outside the sidebar (e.g. Node Detail's Events/Alarms) --
   same --cw-table-stripe token every .table-striped already bridges to. */
.list-group-striped .list-group-item:nth-child(even) {
    background-color: var(--cw-table-stripe);
}

/* ── Cards / tables ─────────────────────────────────────────────────── */
.card {
    --bs-card-bg: var(--cw-surface);
    border-color: var(--cw-border);
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
}

.card-header {
    background-color: var(--cw-card-header-bg, var(--cw-surface-alt));
    color: var(--cw-card-header-text, var(--cw-body-text));
    border-bottom-color: var(--cw-border);
    font-weight: 600;
}

/* Headings inside a card-header (e.g. login.html's <h5>) should take the
   header's own color -- which already accounts for .login-card-header's
   .text-white override or a theme's --cw-card-header-text -- not the
   page-title --cw-heading-text below, which is a different, unrelated
   role. */
.card-header h1, .card-header h2, .card-header h3,
.card-header h4, .card-header h5, .card-header h6 {
    color: inherit;
    font-weight: 600;
}

.login-card-header {
    background-color: var(--cw-primary);
}

.stat-tile .stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--cw-primary-dark);
}

.stat-tile .stat-label {
    font-size: .82rem;
    color: var(--cw-text-muted);
    text-transform: uppercase;
    letter-spacing: .03em;
}

/* ── Footer: developer/technical info, not marketing links ─────────── */
.site-footer-tool {
    background-color: var(--cw-footer-bg);
    color: var(--cw-footer-text);
    padding: 2rem 0 1.5rem;
    margin-top: 2rem;
    font-family: "Segoe UI", Helvetica, Arial, sans-serif;
}

.site-footer-tool h6 {
    color: var(--cw-footer-heading);
    font-weight: 600;
    font-size: .78rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    margin-bottom: .75rem;
}

.footer-meta {
    font-size: .82rem;
    font-family: "Consolas", "SFMono-Regular", Menlo, monospace;
    color: var(--cw-footer-text);
    margin-bottom: .3rem;
}

.footer-bottom-tool {
    background-color: var(--cw-footer-bottom-bg);
    color: var(--cw-footer-bottom-text);
    font-size: .78rem;
    font-family: "Consolas", "SFMono-Regular", Menlo, monospace;
    padding: .7rem 0;
}

/* Slightly wider than the desktop navbar's own `.container` (maxes out at 1320px at the xxl
   breakpoint) so the page never reads as dramatically wider than the nav above it on large
   displays. A max-width + auto margins only ever caps/centers this wrapper -- it never
   overrides Bootstrap's own narrower breakpoint widths below 1400px, so shrinking on smaller
   viewports and the offcanvas sidebar's mobile behavior are both untouched. The sidebar itself
   keeps its fixed 260px width (see .sidebar-col above) either way, since only the space left
   over for .main-content changes. */
.content-shell {
    max-width: 1470px;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 1rem;
}

/* ── Reports: CSS-only bar charts (no charting library) ─────────────── */
.chart-bars {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 140px;
}

.chart-bar {
    flex: 1 1 auto;
    background-color: var(--cw-primary);
    border-radius: 2px 2px 0 0;
    min-height: 2px;
}

/* ── Graph builder line-color swatch ─────────────────────────────────── */
.color-swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 3px;
    border: 1px solid var(--cw-border);
}

/* ── NOC view: dense status-tile board ──────────────────────────────── */
.noc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: .5rem;
}

.noc-tile {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: .75rem;
    border-radius: 6px;
    color: #fff;
    text-decoration: none;
    min-height: 64px;
}

.noc-tile:hover {
    opacity: .88;
    color: #fff;
}

.noc-tile-name {
    font-weight: 600;
    font-size: .85rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.noc-tile-status {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    opacity: .9;
}

/* ── Calendar grid ───────────────────────────────────────────────────── */
.calendar-table th {
    text-align: center;
    background-color: var(--cw-table-header-bg);
    color: var(--cw-table-header-text);
    font-size: .8rem;
}

.calendar-table td {
    width: 14.28%;
    height: 100px;
    vertical-align: top;
    padding: .4rem;
}

.calendar-day-number {
    font-weight: 600;
    font-size: .85rem;
    margin-bottom: .25rem;
}

.calendar-event {
    font-size: .72rem;
    color: var(--cw-primary-dark);
    background-color: var(--cw-accent-soft);
    border-radius: 3px;
    padding: .1rem .3rem;
    margin-bottom: .2rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.calendar-today {
    background-color: var(--cw-accent-soft);
}

/* ── Bootstrap component color bridges (color only) ─────────────────── */
/* --cw-primary-contrast is each theme's own curated answer to "what text color reads on top of
   --cw-primary" -- most themes already pick white here, but a theme whose --cw-primary is itself
   light/bright (Steampowered's old-gold #bfba50, and every theme's brightened dark-mode primary)
   correctly picks a dark color instead, the same reasoning the reference twp-steampowered.css
   theme uses for its own .btn-primary/.btn-warning/.page-item.active. Amber (cwmonitor) is the one
   deliberate exception: its --cw-primary-contrast is pinned to equal --cw-brand-text in themes.css
   (not overridden here) so its buttons read the same light text as its badges. Don't reintroduce a
   blanket --cw-brand-text swap here -- that was tried and broke every theme whose primary is light
   enough to need dark text (Steampowered chief among them). */
.btn-primary {
    --bs-btn-bg: var(--cw-primary);
    --bs-btn-border-color: var(--cw-primary);
    --bs-btn-color: var(--cw-primary-contrast);
    --bs-btn-hover-bg: var(--cw-primary-dark);
    --bs-btn-hover-border-color: var(--cw-primary-dark);
    --bs-btn-hover-color: var(--cw-primary-contrast);
    --bs-btn-active-bg: var(--cw-primary-dark);
    --bs-btn-active-border-color: var(--cw-primary-dark);
    --bs-btn-active-color: var(--cw-primary-contrast);
    --bs-btn-disabled-bg: var(--cw-primary);
    --bs-btn-disabled-border-color: var(--cw-primary);
    --bs-btn-disabled-color: var(--cw-primary-contrast);
}

.btn-outline-primary {
    --bs-btn-color: var(--cw-primary);
    --bs-btn-border-color: var(--cw-primary);
    --bs-btn-hover-bg: var(--cw-primary);
    --bs-btn-hover-border-color: var(--cw-primary);
    --bs-btn-hover-color: var(--cw-primary-contrast);
    --bs-btn-active-bg: var(--cw-primary);
    --bs-btn-active-border-color: var(--cw-primary);
    --bs-btn-active-color: var(--cw-primary-contrast);
}

/* Bootstrap pairs its lighter bg-* badge variants (warning, info, light) with a `.text-dark`
   utility class for contrast, which renders as low-contrast black-on-yellow and reads poorly.
   `.text-dark` sets its color via !important, so it has to be defeated the same way here --
   every badge in this project should read as light text regardless of its bg-* variant.
   --cw-brand-text is reused rather than a flat #fff because it's the one token every theme
   defines identically across both its light and dark mode blocks (unlike --cw-primary-contrast
   or --cw-heading-text, which invert to a dark color in dark mode) -- it's already each theme's
   answer to "light text on a colored surface," so most themes get pure white but a few (Amber,
   Parchment, Steampowered) get their own subtly warmer near-white instead. */
.badge {
    color: var(--cw-brand-text);
}

.badge.text-dark {
    color: var(--cw-brand-text) !important;
}

.table {
    --bs-table-bg: var(--cw-surface);
    --bs-table-color: var(--cw-body-text);
    --bs-table-border-color: var(--cw-border);
    --bs-table-striped-bg: var(--cw-table-stripe);
    --bs-table-striped-color: var(--cw-body-text);
    --bs-table-hover-bg: var(--cw-accent-soft);
    --bs-table-hover-color: var(--cw-body-text);
}

.table > thead {
    --bs-table-bg: var(--cw-table-header-bg);
    --bs-table-color: var(--cw-table-header-text);
}

.dropdown-menu {
    --bs-dropdown-bg: var(--cw-dropdown-bg);
    --bs-dropdown-color: var(--cw-dropdown-text);
    --bs-dropdown-link-color: var(--cw-dropdown-text);
    --bs-dropdown-link-hover-bg: var(--cw-primary);
    --bs-dropdown-link-hover-color: var(--cw-primary-contrast);
    --bs-dropdown-border-color: var(--cw-border);
}

.pagination {
    --bs-pagination-color: var(--cw-primary);
    --bs-pagination-bg: var(--cw-surface);
    --bs-pagination-border-color: var(--cw-border);
    --bs-pagination-hover-color: var(--cw-primary-dark);
    --bs-pagination-hover-bg: var(--cw-accent-soft);
    --bs-pagination-hover-border-color: var(--cw-border);
    --bs-pagination-active-color: var(--cw-primary-contrast);
    --bs-pagination-active-bg: var(--cw-primary);
    --bs-pagination-active-border-color: var(--cw-primary);
    --bs-pagination-disabled-color: var(--cw-text-muted);
    --bs-pagination-disabled-bg: var(--cw-surface);
    --bs-pagination-disabled-border-color: var(--cw-border);
}

/* Accordion inherits --bs-accordion-bg/--bs-accordion-color from --bs-body-bg/--bs-body-color (already
   bridged above), which reads flush against the page instead of as its own panel -- give it the same
   surface/header treatment as .card/.card-header instead. --bs-accordion-btn-icon/--active-icon bake a
   literal Bootstrap gray/blue hex into the chevron's SVG data URI, which can't be parameterized with a
   --cw-* var -- disabled here and replaced by a mask-based chevron below (shape via mask-image, color via
   background-color) so it can follow --cw-body-text/--cw-primary-dark like every other themed icon.
   --bs-accordion-active-bg/--active-color and the focus border/box-shadow are Bootstrap's own compiled
   primary-subtle/emphasis colors and a hardcoded #86b7fe -- none of those derive from --bs-primary at
   runtime, so all three need the same explicit override .form-control's focus ring already gets below. */
.accordion {
    --bs-accordion-bg: var(--cw-surface);
    --bs-accordion-color: var(--cw-body-text);
    --bs-accordion-border-color: var(--cw-border);
    --bs-accordion-btn-bg: var(--cw-card-header-bg, var(--cw-surface-alt));
    --bs-accordion-btn-color: var(--cw-card-header-text, var(--cw-body-text));
    --bs-accordion-btn-icon: none;
    --bs-accordion-btn-active-icon: none;
    --bs-accordion-active-bg: var(--cw-accent-soft);
    --bs-accordion-active-color: var(--cw-primary-dark);
    --bs-accordion-btn-focus-border-color: var(--cw-primary-light);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem rgba(var(--cw-primary-rgb), .25);
}

.accordion-button::after {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: var(--bs-accordion-btn-icon-width);
    mask-size: var(--bs-accordion-btn-icon-width);
    background-color: var(--cw-card-header-text, var(--cw-body-text));
}

.accordion-button:not(.collapsed)::after {
    background-color: var(--cw-primary-dark);
}

.external-link i {
    margin-left: .25rem;
    font-size: .85em;
}

.offcanvas,
.offcanvas-lg {
    --bs-offcanvas-bg: var(--cw-body-bg);
    --bs-offcanvas-color: var(--cw-sidebar-text);
}

/* Form controls default to Bootstrap's --bs-body-bg, which is fine when body-bg
   is near-white/near-black (every theme but Win95) but breaks badly for a
   saturated non-neutral body-bg (Win95's teal desktop) -- pin them to the card
   surface instead, with a --cw-input-bg override point for a theme (Win95) that
   needs an authentically different "edit control" color from its card chrome. */
.form-control,
.form-select,
.form-check-input:not(:checked) {
    background-color: var(--cw-input-bg, var(--cw-surface));
    color: var(--cw-body-text);
    border-color: var(--cw-border);
    box-shadow: inset 1px 1px 2px rgba(0, 0, 0, .15);
}

.form-control::placeholder {
    color: var(--cw-text-muted);
}

.form-control:focus,
.form-select:focus {
    background-color: var(--cw-input-bg, var(--cw-surface));
    color: var(--cw-body-text);
    border-color: var(--cw-primary-light);
    box-shadow: 0 0 0 .25rem rgba(var(--cw-primary-rgb), .25);
}

/* Bootstrap's checked checkbox/switch fill is a Sass-compiled literal color,
   not driven by any --bs-* custom property, so the theme bridge above never
   reaches it -- every theme showed the same stock Bootstrap blue regardless
   of --cw-primary until this explicit override. */
.form-check-input:checked {
    background-color: var(--cw-primary);
    border-color: var(--cw-primary);
}

.form-check-input:focus {
    border-color: var(--cw-primary-light);
    box-shadow: 0 0 0 .25rem rgba(var(--cw-primary-rgb), .25);
}

/* ── Win95's classic chunky grey scrollbar. Scoped to this one theme --
      every other theme keeps the browser/OS default scrollbar, this is a
      deliberate one-theme retro touch, not a general feature. Track uses
      --cw-surface-alt (the lighter bevel-highlight grey) and the thumb/
      buttons use --cw-surface (the window-face grey) with a white/gray
      "outset" bevel border, the same convention as .form-control's border
      elsewhere in this file. --cw-surface/--cw-surface-alt/--cw-border(-light)
      are identical between win95 light and dark, so this looks the same in
      both modes automatically. ─────────────────────────────────────────── */
[data-cw-theme="win95"] {
    scrollbar-color: var(--cw-surface) var(--cw-surface-alt);
    scrollbar-width: auto;
}

[data-cw-theme="win95"] ::-webkit-scrollbar {
    width: 16px;
    height: 16px;
}

[data-cw-theme="win95"] ::-webkit-scrollbar-track {
    background-color: var(--cw-surface-alt);
}

[data-cw-theme="win95"] ::-webkit-scrollbar-thumb,
[data-cw-theme="win95"] ::-webkit-scrollbar-button {
    background-color: var(--cw-surface);
    border-top: 1px solid var(--cw-border-light);
    border-left: 1px solid var(--cw-border-light);
    border-bottom: 1px solid var(--cw-border);
    border-right: 1px solid var(--cw-border);
}

[data-cw-theme="win95"] ::-webkit-scrollbar-button {
    height: 16px;
    width: 16px;
}

[data-cw-theme="win95"] ::-webkit-scrollbar-corner {
    background-color: var(--cw-surface-alt);
}