/* ===== SPP Theme Tokens ===== */
:root {
    --spp-red: #c8102e; /* Primary accent */
    --spp-blue: #003b71; /* Header/nav background */
    --spp-dark: #1b1b1b; /* Footer background */
    --spp-gray: #f5f5f5; /* Page background */
    --text: #222;
}

/* Global */
html, body {
    color: var(--text);
}

body {
    background-color: var(--spp-gray);
    font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Header + Navbar */
.spp-header {
    background: var(--spp-blue);
}

.spp-nav .navbar-brand {
    color: #fff;
}

.spp-nav .nav-link {
    color: #fff !important;
    font-weight: 500;
}

    .spp-nav .nav-link:hover {
        color: var(--spp-red) !important;
    }

.spp-logo {
    height: 62px;
}

/* Left Sidebar */
.spp-sidebar {
    background: #0f2a4a; /* darker blue panel */
    color: #fff;
    border-right: 1px solid rgba(255,255,255,.08);
    width: 240px !important;
    max-width: 240px !important;
    flex: 0 0 240px !important
}

.divheading {
    font-size: 1.125rem; /* ~18px */
    font-weight: 600;
    color: #fff;
    margin-bottom: .25rem;
}

.hrclass {
    margin: 0;
    border-color: rgba(255,255,255,.15);
}

.divlink {
    font-size: 1rem;
    color: #e6e6e6;
    text-decoration: none;
    padding: .15rem 0;
}

    .divlink:hover {
        color: var(--spp-red);
    }

.smalldivlink {
    font-size: .9rem;
    color: #cfe3ff;
    text-decoration: none;
    padding: .05rem 0;
}

    .smalldivlink:hover {
        color: #fff;
    }

/* Content */
main {
    background: #fff;
    border-radius: .5rem;
    box-shadow: 0 6px 18px rgba(0,0,0,.06);
}

/* Footer */
.spp-footer {
    background-color: var(--spp-dark);
    color: #fff;
}

/* Components (appearance only) */
.btn-primary {
    background-color: var(--spp-red);
    border-color: var(--spp-red);
}

    .btn-primary:hover {
        background-color: #a00d26;
        border-color: #a00d26;
    }

.card {
    border-radius: .5rem;
    box-shadow: 0 12px 24px rgba(0,0,0,.06);
}

/* Tables, forms polishing */
.table {
    border-radius: .5rem;
    overflow: hidden;
}

input, select, textarea {
    border-radius: .4rem;
    border: 1px solid #cfd8dc;
    padding: .5rem .6rem;
}

/* Reduce “2003” spacing feel */
h1, h2, h3, h4 {
    letter-spacing: .2px;
}

.price-matrix-table table td,
.price-matrix-table table th {
    padding: 6px 10px;
    font-size: 14px;
}

.price-matrix-table table th {
    background-color: #f8f9fa;
    font-weight: 600;
    text-align: center;
}


/* Fixed-width table container for Price Matrix */

.rate-table-fixed {
    width: 650px;
    margin-left: 0;
    padding-left: .75rem; /* matches Bootstrap container padding */
}


    .rate-table-fixed table {
        width: 100% !important; /* ensures table fits inside fixed box */
    }


/* ===== SPP Theme Tokens ===== */
:root {
    --spp-red: #c8102e;
    --spp-blue: #003b71;
    --spp-dark: #1b1b1b;
    --spp-gray: #f5f5f5;
    --text: #222;
}

/* Body */
.spp-theme {
    color: var(--text);
    background-color: var(--spp-gray);
    font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Header + Navbar */
.spp-header {
    background: var(--spp-blue);
}

.spp-nav .navbar-brand {
    color: #fff;
}

.spp-nav .nav-link {
    color: #fff !important;
    font-weight: 500;
}

    .spp-nav .nav-link:hover {
        color: var(--spp-red) !important;
    }

.spp-logo {
    height: 32px;
}

/* Shell layout (left sidebar + page content) */
.row {
    display: flex;
}

.spp-sidebar {
    background: #0f2a4a;
    color: #fff;
    width: 200px; /* Narrow, modern */
    max-width: 200px;
    flex: 0 0 200px;
    padding: 1rem;
    border-right: 1px solid rgba(255,255,255,.08);
}

.page-content {
    flex: 1 1 auto;
    min-width: 0; /* prevents overflow on flex children */
    padding-left: 1rem;
}

/* Legacy link classes (recolored for modern look) */
.divheading {
    font-size: 1.125rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: .25rem;
}

.hrclass {
    margin: 0;
    border-color: rgba(255,255,255,.15);
}

.divlink {
    font-size: 1rem;
    color: #e6e6e6;
    text-decoration: none;
    padding: .15rem 0;
    display: block;
}

    .divlink:hover {
        color: var(--spp-red);
    }

.smalldivlink {
    font-size: .9rem;
    color: #cfe3ff;
    text-decoration: none;
    padding: .05rem 0;
    display: block;
}

    .smalldivlink:hover {
        color: #fff;
    }

/* Footer */
.spp-footer {
    background-color: var(--spp-dark);
    color: #fff;
}

/* Optional: constrain very wide legacy tables */
.fixed-content-650 {
    width: 650px;
    margin-left: 0;
    padding: 10px 0;
}

    .fixed-content-650 table {
        width: 100% !important;
    }
/* Remove top margin/padding caused by legacy ASPX + Bootstrap containers */
.spp-theme .page-content {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

    /* Kill container top spacing inside .aspx pages */
    .spp-theme .page-content .container {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    /* Remove row offset at top of container */
    .spp-theme .page-content .row:first-child {
        margin-top: 0 !important;
    }

/* Safety net: ensure first visible element is flush with header */
.spp-theme #MainContent > div:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
/* --- Kill legacy Bootstrap 3 navbar margins that create the big gap --- */
.spp-header .navbar {
    margin-bottom: 0 !important; /* BS3 adds 20px; this removes it */
}

/* --- Normalize top spacing in the content shell from the master page --- */
.spp-theme .page-content {
    padding-top: 0 !important; /* remove py-3 top padding from master */
    margin-top: 0 !important; /* guard against stacked margins */
}

/* --- Legacy WebForms pages often start with `.container` + `.row` --- */
/* Remove any automatic top spacing from those first containers/rows */
.spp-theme #MainContent .container {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.spp-theme #MainContent .row:first-child {
    margin-top: 0 !important;
}

/* --- HRs at the top of pages can stack margins; tame the first one --- */
.spp-theme .page-content hr:first-of-type {
    margin-top: .25rem !important; /* small visual rhythm, no big gap */
}

/* --- Headings: prevent large top margin on the first heading --- */
.spp-theme .page-content h1:first-child,
.spp-theme .page-content h2:first-child {
    margin-top: .25rem !important;
}

/* ===== Legacy Compatibility Shell (emulates old Site.Master table layout) ===== */
.legacy-shell {
    display: grid;
    flex: 1 0 auto;
    grid-template-columns: 200px 10px minmax(0, 1fr); /* sidebar | spacer | content */
    align-items: start; /* replaces table-cell vertical-align: top */
    gap: 0; /* no gutters */
}

    /* Sidebar column: identical width to old master */
    .legacy-shell .spp-sidebar {
        background: #0f2a4a; /* SPP dark blue */
        color: #fff;
        padding: 1rem;
        border-right: 1px solid rgba(255,255,255,.08);
        /* No extra top margin */
        margin-top: 0 !important;
    }

    /* Spacer column: exactly 10px */
    .legacy-shell .legacy-spacer {
        width: 10px;
    }

    /* Main content column: emulate old cell padding & alignment */
    .legacy-shell .legacy-main {
        padding-top: 10px; /* match old td style="padding-top:10px" */
        min-width: 0; /* prevent overflow when nested Bootstrap rows exist */
        margin-top: 0 !important; /* neutralize stacked margins */
    }

/* Remove Bootstrap 3 navbar bottom gap that pushes content down */
.spp-header .navbar {
    margin-bottom: 0 !important;
}
/* Normalize all typography for legacy ASPX pages */
.spp-theme .legacy-main,
.spp-theme #MainContent {
    font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: #222;
    font-size: 16px;
}

    /* Headings match Razor pages */
    .spp-theme #MainContent h1,
    .spp-theme #MainContent h2,
    .spp-theme #MainContent .page-header,
    .spp-theme #MainContent span[style*='XX-Large'] {
        font-weight: 600;
        color: #003b71; /* SPP dark blue */
        margin-top: 0 !important;
        margin-bottom: .75rem;
        font-size: 1.75rem; /* ~28px like Price Matrix */
    }
    /* Links consistent with Price Matrix page */
    .spp-theme #MainContent a {
        color: #003b71;
        text-decoration: none;
        font-weight: 500;
    }

        .spp-theme #MainContent a:hover {
            color: #c8102e; /* SPP red accent */
            text-decoration: underline;
        }
    /* Modern table styling like Price Matrix Razor page */
    .spp-theme #MainContent table {
        border-collapse: collapse;
        width: 100%;
        margin-top: 1rem;
        background: white;
        border: 1px solid #ddd;
        border-radius: 8px;
        overflow: hidden; /* gives rounded corners */
    }

        /* Table cells */
        .spp-theme #MainContent table td,
        .spp-theme #MainContent table th {
            padding: 8px 12px;
            font-size: 14px;
            border: 1px solid #e5e5e5;
        }

        /* Header row */
        .spp-theme #MainContent table th {
            background: #f3f4f6;
            font-weight: 600;
            text-align: left;
        }

        /* Alternating rows */
        .spp-theme #MainContent table tr:nth-child(even) {
            background: #fafafa;
        }
    . /* ASPX Buttons look like modern Bootstrap buttons */
    .spp-theme #MainContent input[type=submit],
    .spp-theme #MainContent input[type=button],
    .spp-theme #MainContent button {
        background-color: #003b71;
        color: white;
        border: none;
        padding: .45rem 1rem;
        border-radius: 6px;
        font-size: 14px;
        font-weight: 500;
    }

        .spp-theme #MainContent input[type=submit]:hover,
        .spp-theme #MainContent input[type=button]:hover,
        .spp-theme #MainContent button:hover {
            background-color: #002a54;
        }

    .spp-theme #MainContent input[type=text],
    .spp-theme #MainContent input[type=date],
    .spp-theme #MainContent select,
    .spp-theme #MainContent textarea {
        border: 1px solid #cfd8dc;
        border-radius: 6px;
        padding: .45rem .6rem;
        font-size: 14px;
        width: auto;
    }
    /* Remove Bootstrap container centering effect */
    .spp-theme #MainContent .container {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
/* Match Price Matrix horizontal offset */
.spp-theme #MainContent {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
}

/* =====================================================================================
   MATCH LEGACY .ASPX PAGES TO MODERN RAZOR PAGES (Price Matrix Look)
   ===================================================================================== */

/* Indent legacy ASPX content to match Razor pages */
.content-offset {
    padding-left: 2rem;
    padding-right: 2rem;
    max-width: 1000px; /* keeps content from being super wide */
}
/* Centered fixed-width table wrapper */
.table-wrapper {
    max-width: 900px;
    margin: 1.5rem 0;
    border-radius: 8px;
}

    .table-wrapper table {
        width: 100% !important;
    }

/* Indent page to match Price Matrix */
.content-offset {
    padding-left: 2rem;
    padding-right: 2rem;
    max-width: 1100px;
}

/* Section spacing */
.page-section {
    margin-bottom: 2rem;
}

/* Sub-navigation */
.page-subnav a {
    color: #003b71;
    font-weight: 500;
}

.page-subnav .active-link {
    color: #333;
    font-weight: 600;
}

/* Table wrapper to avoid full screen tables */
.table-wrapper {
    max-width: 1000px;
    margin: 2rem 0;
}

/* SPP-themed modern table */
.spp-table {
    border-collapse: collapse;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    background: white;
    border: 1px solid #d0d7dd;
    font-size: 14px;
}

    /* Table header */
    .spp-table thead th {
        background: #e8f0fa; /* SPP light blue */
        color: #003b71;
        font-weight: 600;
        padding: 12px;
        border-bottom: 1px solid #d0d7dd;
    }

    /* Table cells */
    .spp-table td {
        padding: 10px 12px;
        border-bottom: 1px solid #e5e7eb;
    }

    /* Alternating row shading */
    .spp-table tbody tr:nth-child(even) {
        background: #f7f9fb;
    }

    /* Hover highlight */
    .spp-table tbody tr:hover {
        background: #eef4fb;
    }

/* Make the shell a proper row */
.legacy-shell {
    display: flex;
    align-items: stretch;
}

/* Centers the image in the main column and keeps it responsive */
.home-logo {
    display: block;
    margin: 24px; /* centers horizontally */
    max-width: 100%;
    height: auto;
}

.legacy-main {
    font-size: 0.9rem;
}

/* Sidebar: fixed column */
.spp-sidebar {
    flex: 0 0 260px; /* set your actual sidebar width */
    background-color: #0c3055; /* example; already looks dark blue */
    position: relative; /* establishes stacking context */
    z-index: 2; /* keeps it visually above main when needed */
}

/* Spacer: the old 10px td */
.legacy-spacer {
    flex: 0 0 10px;
}

/* Main content: flexible column */
.legacy-main {
    flex: 1 1 auto;
    background: #fff;
    position: relative;
    z-index: 1;
    min-width: 0; /* prevents flex overflow issues with long content */
}

/* Inner padding for page content */
.content-offset {
    padding: 16px;
}


/* In branding.css (or wherever hrclass is defined) */
.spp-sidebar .hrclass {
    /* Keep the rule inside the sidebar’s box */
    position: static; /* ensure it participates in normal flow */
    display: block;
    width: 100%; /* not 100vw */
    margin: 0.5rem 0; /* avoid negative/large horizontal margins */
    height: 1px; /* thin line */
    border: 0;
    background-color: rgba(255, 255, 255, 0.3); /* subtle line on dark bg */
    border-radius: 0; /* remove pill shape so it doesn’t jut out */
    box-shadow: none;
}

/* Shared typography */
.spp-theme #MainContent,
.spp-theme .legacy-main {
    font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 16px;
    color: #222;
    line-height: 1.55;
}

    /* Headings match Razor (Price Matrix) */
    .spp-theme #MainContent h1,
    .spp-theme #MainContent h2,
    .spp-theme #MainContent span[style*='XX-Large'] {
        font-weight: 600;
        color: #003b71; /* SPP dark blue */
        font-size: 1.75rem;
        margin-top: 0 !important;
        margin-bottom: 1rem;
    }

    /* Subheadings */
    .spp-theme #MainContent h3,
    .spp-theme #MainContent h4 {
        font-weight: 600;
        color: #003b71;
        margin-top: 1.5rem;
        margin-bottom: .5rem;
    }

    /* Links */
    .spp-theme #MainContent a {
        color: #003b71;
        font-weight: 500;
        text-decoration: none;
    }

        .spp-theme #MainContent a:hover {
            color: #c8102e; /* SPP red */
            text-decoration: underline;
        }

    /* Modern table styling like Price Matrix */
    .spp-theme #MainContent table {
        width: 100%;
        border-collapse: collapse;
        margin: 1rem 0;
        border-radius: 8px;
        overflow: hidden;
        background: #fff;
        border: 1px solid #d0d7dd;
    }

        /* Header row */
        .spp-theme #MainContent table th {
            background: #f3f4f6;
            font-weight: 600;
            padding: 10px 12px;
            font-size: 15px;
            border: 1px solid #e5e7eb;
            color: #111;
        }

        /* Cells */
        .spp-theme #MainContent table td {
            padding: 10px 12px;
            font-size: 14px;
            border: 1px solid #e5e7eb;
        }

        /* Alternate row shading */
        .spp-theme #MainContent table tr:nth-child(even) {
            background-color: #fafafa;
        }

        /* Remove outdated yellow highlights from old tables */
        .spp-theme #MainContent table tr td[style*='background'],
        .spp-theme #MainContent table tr[style*='background'] {
            background: transparent !important;
        }

    /* Form Inputs (match Razor) */
    .spp-theme #MainContent input[type=text],
    .spp-theme #MainContent select,
    .spp-theme #MainContent textarea {
        border-radius: 6px;
        border: 1px solid #cfd8dc;
        padding: .45rem .6rem;