:root {
    /* SS Medical, Inc. brand palette (sampled from the logo) */
    --sswip-red: #b01c31;    /* eagle wing crimson - primary accent */
    --sswip-navy: #1d2c5c;   /* eagle wing navy - dark surfaces, headings */
    --sswip-gold: #f2b233;   /* eagle beak - occasional highlight */

    --sswip-primary: var(--sswip-red);   /* buttons, links, active states */
    --sswip-dark: var(--sswip-navy);     /* navbar, headings */
    --sswip-radius: 0.75rem;
    --sswip-shadow-sm: 0 0.125rem 0.5rem rgba(29, 44, 92, 0.06);

    /* Re-point Bootstrap's own primary so .text-primary icons, links, badges, etc.
       pick up the brand red without touching every markup site. */
    --bs-primary: #b01c31;
    --bs-primary-rgb: 176, 28, 49;
}

body {
    background-color: #f4f6fb;
    font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

h1, h2, h3, .h1, .h2, .h3 {
    letter-spacing: -0.01em;
}

/* ---- Left sidebar layout ---------------------------------------------------------------
   The app menu docks down the left on lg+ screens and collapses behind a top-bar hamburger
   below lg. The shell is a flex column on mobile (top bar, then collapsed menu, then content)
   and a flex row on desktop (sidebar left, content right). */
.sswip-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.sswip-topbar {
    background-color: var(--sswip-dark);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
}

.sswip-sidebar {
    background-color: var(--sswip-dark);
    color: rgba(255, 255, 255, 0.85);
    padding: 1rem 0.75rem;
    flex-direction: column;
    gap: 0.15rem;
}

.sswip-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.sswip-content {
    flex: 1 0 auto;
}

/* .collapse.d-lg-flex: Bootstrap's .collapse hides the sidebar below lg (shown via the toggle);
   d-lg-flex forces it back to a visible flex column at lg+ regardless of collapse state. */
@media (min-width: 992px) {
    .sswip-shell {
        flex-direction: row;
    }

    .sswip-sidebar {
        width: 260px;
        flex: 0 0 260px;
        position: sticky;
        top: 0;
        height: 100vh;
        overflow-y: auto;
    }
}

.sswip-brand {
    justify-content: center;
    padding-bottom: 1rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.brand-logo-sidebar {
    max-width: 170px;
    height: auto;
    background: #fff;
    padding: 6px 10px;
    border-radius: 8px;
}

/* Sidebar nav links + collapsible group toggles */
.sswip-nav .nav-link,
.sswip-nav .sswip-group-toggle {
    color: rgba(255, 255, 255, 0.85);
    border-radius: 0.4rem;
    padding: 0.45rem 0.65rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    transition: background-color 0.1s ease, color 0.1s ease;
}

.sswip-nav .nav-link:hover,
.sswip-nav .sswip-group-toggle:hover {
    background-color: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.sswip-nav .nav-link.active,
.sswip-nav .sswip-group-toggle.active {
    background-color: rgba(255, 255, 255, 0.18);
    color: #fff;
    font-weight: 600;
}

.sswip-group-toggle {
    cursor: pointer;
    justify-content: space-between;
}

.sswip-group-toggle .bi-chevron-down {
    font-size: 0.75rem;
    transition: transform 0.15s ease;
}

.sswip-group-toggle[aria-expanded="true"] .bi-chevron-down {
    transform: rotate(180deg);
}

.sswip-subnav {
    margin: 0.1rem 0 0.25rem;
}

.sswip-subnav .nav-link {
    font-size: 0.9rem;
    padding-left: 1.85rem;
}

.sswip-sidebar-footer {
    margin-top: auto;
    padding-top: 0.85rem;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.85);
}

.login-body {
    min-height: 100vh;
    /* Solid deep navy - neutral and calm, maximizes contrast behind the white login card
       (was a navy->crimson gradient that competed with the card). */
    background-color: var(--sswip-navy);
}

.login-card {
    border-radius: 1rem;
}

/* Brand logo (SS Medical, Inc.) - the source PNG has a white background, so in the
   dark navbar it sits in a small white chip to read as intentional. On the light login
   card it shows full-bleed. */
.brand-logo-navbar {
    height: 40px;
    width: auto;
    background: #fff;
    padding: 4px 8px;
    border-radius: 8px;
}

.brand-logo-login {
    max-width: 240px;
    height: auto;
}

.dash-card {
    border-radius: 0.75rem;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.dash-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 0.75rem 1.5rem rgba(15, 37, 69, 0.15) !important;
}

.card-title {
    color: var(--sswip-dark);
}

.card {
    border: 1px solid rgba(15, 37, 69, 0.08);
    border-radius: var(--sswip-radius);
}

/* Table header polish - applies site-wide via the shared .table class, no per-view changes needed */
.table > thead {
    background-color: #eef1f8;
}

.table > thead > tr > th {
    color: var(--sswip-dark);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: 600;
    border-bottom-width: 1px;
}

.table-responsive {
    border-radius: 0.5rem;
    overflow: hidden;
}

/* Scroll wrapper for long/wide list tables: scrolls both directions on its own (so a wide
   many-column table like Current WIP isn't clipped) and keeps the column headers pinned while
   you scroll down. Opt-in via <div class="table-sticky-wrap"> around the table - short tables
   (dashboard stats, etc.) don't use it and keep normal page flow. */
.table-sticky-wrap {
    max-height: 75vh;
    overflow: auto;
    border-radius: 0.5rem;
}

.table-sticky-wrap > table > thead > tr > th {
    position: sticky;
    top: 0;
    z-index: 2;
    /* Opaque so scrolling rows pass underneath, not through. Matches .table > thead below. */
    background-color: #eef1f8;
}

.btn {
    transition: transform 0.08s ease, box-shadow 0.08s ease;
}

.btn-primary {
    --bs-btn-bg: var(--sswip-red);
    --bs-btn-border-color: var(--sswip-red);
    --bs-btn-hover-bg: #921527;
    --bs-btn-hover-border-color: #921527;
    --bs-btn-active-bg: #7c1220;
    --bs-btn-active-border-color: #7c1220;
    --bs-btn-disabled-bg: var(--sswip-red);
    --bs-btn-disabled-border-color: var(--sswip-red);
}

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

.form-control:focus,
.form-select:focus {
    border-color: var(--sswip-primary);
    box-shadow: 0 0 0 0.2rem rgba(176, 28, 49, 0.15);
}

/* Back-to-parent links used throughout (e.g. "Back to Admin") - small visual lift so they
   read as navigation rather than body text. */
a.text-muted.text-decoration-none:hover {
    color: var(--sswip-primary) !important;
}

/* Current WIP staleness indicators - mirrors legacy wip.aspx row coloring */
.wip-table {
    background-color: #fff;
}

/* Bootstrap paints background-color on each <td> directly (via its CSS variables),
   which sits on top of and hides any color set on the parent <tr>. Force cells to
   pick up the row's color instead. */
.wip-table > tbody > tr > td {
    background-color: inherit !important;
}

.wip-row-stale {
    background-color: #f8d7da !important;
}

.wip-row-recent {
    background-color: #fff3cd !important;
}

.wip-row-normal {
    background-color: transparent;
}

.wip-legend-swatch {
    display: inline-block;
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 0.2rem;
    vertical-align: middle;
    border: 1px solid rgba(0, 0, 0, 0.1);
}