/* ================================================================
   Reliable Caps Customer Portal
   Brand palette and typography sourced from reliablecaps.com:
   green #008846, navy #13294b / #002865, ink #262729,
   Lato (body) + Roboto Condensed (headings).
   ================================================================ */

:root {
    --green: #008846;
    --green-dark: #046a38;
    --green-deep: #00552c;
    --navy: #13294b;
    --navy-deep: #002865;
    --ink: #262729;
    --muted: #717171;
    --bg: #f9f9f9;
    --surface: #ffffff;
    --border: #e4e4e4;
    --border-strong: #d1d1d1;
    --amber: #b97a00;
    --amber-bg: #fdf3e0;
    --red: #b3261e;
    --red-bg: #fdecea;
    --radius: 12px;
    --shadow: 0 1px 3px rgba(19, 41, 75, .08), 0 4px 16px rgba(19, 41, 75, .06);
    --shadow-lift: 0 4px 10px rgba(19, 41, 75, .10), 0 12px 32px rgba(19, 41, 75, .10);
    --font-body: "Lato", "Segoe UI", Arial, sans-serif;
    --font-head: "Roboto Condensed", "Arial Narrow", sans-serif;
}

* { box-sizing: border-box; }

html { height: 100%; }

body {
    margin: 0;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.55;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: var(--font-head);
    color: var(--navy);
    line-height: 1.15;
    margin: 0 0 .35em;
}

a { color: var(--green-dark); text-decoration: none; }
a:hover { color: var(--green); text-decoration: underline; }

.container {
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 20px;
}

.muted { color: var(--muted); }
.mono { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.strong { font-weight: 700; }

/* ---------------------------------------------------------------
   Header / navigation
   --------------------------------------------------------------- */

.site-header {
    background: var(--surface);
    border-bottom: 3px solid var(--green);
    box-shadow: 0 1px 4px rgba(19, 41, 75, .08);
    position: sticky;
    top: 0;
    z-index: 50;
}

.header-inner {
    display: flex;
    align-items: center;
    gap: 28px;
    min-height: 68px;
    flex-wrap: wrap;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
}
.brand:hover { text-decoration: none; }
.brand img { height: 44px; width: auto; display: block; }

.brand-portal {
    font-family: var(--font-head);
    font-weight: 300;
    font-size: 1.05rem;
    color: var(--navy);
    text-transform: uppercase;
    letter-spacing: .12em;
    border-left: 1px solid var(--border-strong);
    padding-left: 12px;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
}

.nav-link {
    font-family: var(--font-head);
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--navy);
    padding: 22px 14px 19px;
    border-bottom: 3px solid transparent;
    margin-bottom: -3px;   /* sit on the header's green rule */
}
.nav-link:hover { color: var(--green); text-decoration: none; }
.nav-link.active { color: var(--green-dark); border-bottom-color: var(--navy); font-weight: 700; }

.nav-user {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 14px;
}

.nav-user-info {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    text-align: right;
}
.nav-user-name { font-weight: 700; font-size: .92rem; }
.nav-user-company { color: var(--muted); font-size: .8rem; }

/* Mobile toggle (checkbox hack — no JS required) */
.nav-toggle { display: none; }
.nav-toggle-label { display: none; }

/* ---------------------------------------------------------------
   Buttons, badges, alerts, forms
   --------------------------------------------------------------- */

.btn {
    display: inline-block;
    font-family: var(--font-head);
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 11px 22px;
    border-radius: 6px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.btn-primary { background: var(--green); color: #fff; }
.btn-primary:hover { background: var(--green-dark); color: #fff; text-decoration: none; }

.btn-outline { background: transparent; color: var(--navy); border-color: var(--border-strong); }
.btn-outline:hover { border-color: var(--green); color: var(--green-dark); text-decoration: none; }

.btn-sm { padding: 6px 14px; font-size: .85rem; }
.btn-block { width: 100%; }

.badge {
    font-family: var(--font-head);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    white-space: nowrap;
    align-self: flex-start;
}
.badge-green { background: #e2f3ea; color: var(--green-deep); }
.badge-navy  { background: #e6ebf4; color: var(--navy); }
.badge-amber { background: var(--amber-bg); color: var(--amber); }
.badge-gray  { background: #efefef; color: var(--muted); }

.alert {
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 18px;
    font-size: .95rem;
}
.alert-error   { background: var(--red-bg); color: var(--red); border: 1px solid #f3c2be; }
.alert-info    { background: #e6ebf4; color: var(--navy); border: 1px solid #c6d2e6; word-break: break-all; }
.alert-success { background: #e2f3ea; color: var(--green-deep); border: 1px solid #b8e0c9; }

.form-field { margin-bottom: 18px; }
.form-field label {
    display: block;
    font-family: var(--font-head);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: .85rem;
    color: var(--navy);
    margin-bottom: 6px;
}
.form-field input,
.filter-bar input {
    width: 100%;
    padding: 11px 14px;
    font: inherit;
    color: var(--ink);
    border: 1.5px solid var(--border-strong);
    border-radius: 6px;
    background: var(--surface);
}
.form-field input:focus,
.filter-bar input:focus {
    outline: none;
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(0, 136, 70, .15);
}
.field-error { color: var(--red); font-size: .85rem; }

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
@media (max-width: 480px) {
    .form-row { grid-template-columns: 1fr; }
}

.section-sub {
    font-size: 1rem;
    margin: 22px 0 4px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

/* ---------------------------------------------------------------
   Page scaffolding
   --------------------------------------------------------------- */

.site-main { flex: 1; }
.site-main-anon { display: flex; }

.page { padding: 28px 20px 48px; }

.page-hero {
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 70%);
    color: #fff;
    padding: 34px 0 30px;
    border-bottom: 4px solid var(--green);
}
.page-hero h1 { color: #fff; font-size: 2.1rem; margin: 0; }
.hero-eyebrow {
    font-family: var(--font-head);
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: .85rem;
    color: #9fd6bb;
    margin: 0 0 6px;
}
.hero-eyebrow a { color: #9fd6bb; }
.hero-eyebrow a:hover { color: #fff; }
.hero-sub { color: #c9d4e6; margin: 8px 0 0; max-width: 62ch; }

.page-nav { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.section-heading { font-size: 1.25rem; margin: 0 0 12px; }

.site-footer {
    background: var(--navy);
    color: #c9d4e6;
    font-size: .88rem;
    margin-top: auto;
}
.footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 18px 20px;
}
.site-footer a { color: #9fd6bb; }

/* ---------------------------------------------------------------
   Cards, stats, tables
   --------------------------------------------------------------- */

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 22px 24px;
    margin-bottom: 22px;
}

.card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}
.card-head h2 { font-size: 1.25rem; margin: 0; }
.card-link { font-family: var(--font-head); text-transform: uppercase; letter-spacing: .05em; font-size: .85rem; white-space: nowrap; }

.stat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-bottom: 26px;
}

.stat-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 5px solid var(--green);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 18px 22px;
    display: flex;
    flex-direction: column;
    color: inherit;
    transition: box-shadow .15s ease, transform .15s ease;
}
.stat-card:hover { text-decoration: none; box-shadow: var(--shadow-lift); transform: translateY(-2px); color: inherit; }
.stat-value { font-family: var(--font-head); font-weight: 700; font-size: 2.3rem; color: var(--navy); line-height: 1.1; }
.stat-label { font-size: .9rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-family: var(--font-head); }

.dash-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    align-items: start;
}

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: .95rem;
}
.table th {
    font-family: var(--font-head);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: .8rem;
    color: var(--muted);
    text-align: left;
    padding: 10px 12px;
    border-bottom: 2px solid var(--border-strong);
}
.table td {
    padding: 12px;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}
.table tbody tr:last-child td { border-bottom: none; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table-hover tbody tr:hover td { background: #f2f8f5; }
.row-action { text-align: right; }

/* ---------------------------------------------------------------
   Feature pieces
   --------------------------------------------------------------- */

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    gap: 22px;
}
.product-card { margin-bottom: 0; }
.product-card h2 { font-size: 1.15rem; }

.line-card h2 { font-size: 1.2rem; }

/* Cap / liner image links — shown under an order line heading and in the
   pricing grid's Images column. Hidden entirely when an item has neither. */
.image-links {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    font-size: .85rem;
    white-space: nowrap;
}
.line-card .image-links { margin-top: 6px; }

.line-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px 16px;
    margin: 14px 0;
}
.line-facts > div { display: flex; flex-direction: column; }
.fact-label {
    font-family: var(--font-head);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: .75rem;
    color: var(--muted);
}
.fact-value { font-weight: 700; font-variant-numeric: tabular-nums; }

/* Lead-time bands on the product detail page. The bar is scaled against the
   longest band, so it compares the bands with each other and carries no absolute
   scale of its own — which is why every row also states its weeks in figures. */
.band-list { list-style: none; margin: 0; padding: 0; }

.band-row {
    display: grid;
    grid-template-columns: 150px 1fr 64px 92px;
    align-items: center;
    gap: 14px;
    padding: 7px 0;
}
.band-row-alt { border-top: 1px solid var(--border); margin-top: 6px; padding-top: 13px; }

.band-label { font-size: .95rem; }

.band-track {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    height: 14px;
    overflow: hidden;
}
.band-fill { display: block; height: 100%; background: var(--green); border-radius: 3px; }
.band-fill-alt { background: var(--amber); }

.band-weeks { font-weight: 700; font-variant-numeric: tabular-nums; }
.band-ending { color: var(--muted); font-size: .85rem; font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
    /* The bar is the first thing worth dropping on a narrow screen: the weeks and
       the week ending say everything it does, and a 60px track compares nothing. */
    .band-row { grid-template-columns: 1fr auto; gap: 4px 12px; }
    .band-track { display: none; }
    .band-ending { grid-column: 1 / -1; }
}

.filter-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.filter-bar .filter-label {
    font-family: var(--font-head);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: .85rem;
    color: var(--navy);
}
.filter-bar input { width: 220px; padding: 8px 12px; }
.filter-bar select {
    padding: 8px 12px;
    font: inherit;
    color: var(--ink);
    border: 1.5px solid var(--border-strong);
    border-radius: 6px;
    background: var(--surface);
}
.filter-bar select:focus {
    outline: none;
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(0, 136, 70, .15);
}

.empty-state {
    background: var(--surface);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius);
    text-align: center;
    padding: 56px 24px;
}
.empty-state h1, .empty-state h2 { margin-bottom: 8px; }
.empty-state p { color: var(--muted); margin: 0 auto 18px; max-width: 46ch; }

/* ---------------------------------------------------------------
   Data grid: toolbar, sortable headers, pager
   --------------------------------------------------------------- */

.grid-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}
.grid-toolbar input[type="search"] { width: 300px; max-width: 100%; }
.grid-toolbar input[type="search"],
.grid-toolbar select {
    padding: 9px 12px;
    font: inherit;
    color: var(--ink);
    border: 1.5px solid var(--border-strong);
    border-radius: 6px;
    background: var(--surface);
}
.grid-toolbar input[type="search"]:focus,
.grid-toolbar select:focus {
    outline: none;
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(0, 136, 70, .15);
}

.grid-table th a {
    color: var(--muted);
    text-decoration: none;
    white-space: nowrap;
}
.grid-table th a:hover { color: var(--green-dark); }

.grid-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
    flex-wrap: wrap;
}

.pager { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.pager-btn {
    font-family: var(--font-head);
    font-size: .9rem;
    min-width: 38px;
    text-align: center;
    padding: 7px 10px;
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    color: var(--navy);
    background: var(--surface);
}
.pager-btn:hover { border-color: var(--green); color: var(--green-dark); text-decoration: none; }
.pager-btn.current { background: var(--navy); color: #fff; border-color: var(--navy); }
.pager-btn.current:hover { color: #fff; }
.pager-btn.disabled { opacity: .4; pointer-events: none; }
.pager-gap { padding: 0 4px; color: var(--muted); }

@media (max-width: 640px) {
    .grid-toolbar input[type="search"] { width: 100%; }
    .grid-footer { flex-direction: column; align-items: flex-start; }
}

/* ---------------------------------------------------------------
   Auth (sign-in) pages
   --------------------------------------------------------------- */

.auth-page {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 20px;
    background:
        radial-gradient(1100px 500px at 85% -10%, rgba(0, 136, 70, .25), transparent 60%),
        linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
    width: 100%;
}

.auth-panel {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    width: 100%;
    max-width: 880px;
    background: var(--surface);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(0, 0, 0, .35);
}
.auth-panel-single { grid-template-columns: 1fr; max-width: 520px; text-align: center; }

.auth-brand-side {
    background: linear-gradient(160deg, var(--green-dark), var(--green-deep));
    color: #fff;
    padding: 44px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.auth-brand-side h1 {
    color: #fff;
    font-size: 2rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin: 18px 0 6px;
}
.auth-brand-side p { color: #d9efe4; margin: 0 0 18px; }

.auth-logo {
    height: 60px;
    width: auto;
    align-self: flex-start;
    background: #fff;
    border-radius: 8px;
    padding: 7px 10px;
}
.auth-logo-sm { height: 48px; align-self: center; margin-bottom: 10px; }

.auth-points {
    margin: 0;
    padding: 0;
    list-style: none;
    color: #eaf6f0;
}
.auth-points li {
    padding-left: 26px;
    position: relative;
    margin-bottom: 10px;
}
.auth-points li::before {
    content: "✓";
    position: absolute;
    left: 0;
    font-weight: 700;
    color: #9fd6bb;
}

.auth-form-side { padding: 44px 40px; }
.auth-form-side h2 { font-size: 1.6rem; }
.auth-hint { color: var(--muted); margin-top: 0; }
.auth-footnote { color: var(--muted); font-size: .9rem; margin-top: 22px; }

.sent-icon {
    font-size: 2.6rem;
    line-height: 1;
    color: var(--green);
    margin-bottom: 10px;
}
.dev-link { word-break: break-all; font-size: .85rem; }

/* ---------------------------------------------------------------
   Responsive
   --------------------------------------------------------------- */

@media (max-width: 960px) {
    .header-inner { gap: 12px; }

    .nav-toggle-label {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        margin-left: auto;
        width: 40px;
        height: 40px;
        padding: 8px;
        cursor: pointer;
        border: 1px solid var(--border-strong);
        border-radius: 6px;
    }
    .nav-toggle-label span {
        display: block;
        height: 2.5px;
        background: var(--navy);
        border-radius: 2px;
        transition: transform .2s ease, opacity .2s ease;
    }
    .nav-toggle:checked + .nav-toggle-label span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
    .nav-toggle:checked + .nav-toggle-label span:nth-child(2) { opacity: 0; }
    .nav-toggle:checked + .nav-toggle-label span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

    .site-nav {
        display: none;
        flex-direction: column;
        align-items: stretch;
        flex-basis: 100%;
        padding: 8px 0 16px;
        gap: 0;
    }
    .nav-toggle:checked ~ .site-nav { display: flex; }

    .nav-link {
        padding: 13px 8px;
        margin-bottom: 0;
        border-bottom: 1px solid var(--border);
    }
    .nav-link.active { border-bottom-color: var(--border); }

    .nav-user {
        margin: 14px 0 0;
        justify-content: space-between;
    }
    .nav-user-info { text-align: left; }

    .dash-columns { grid-template-columns: 1fr; }
    .stat-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
}

@media (max-width: 760px) {
    .auth-panel { grid-template-columns: 1fr; }
    .auth-brand-side { padding: 32px 28px; }
    .auth-form-side { padding: 32px 28px; }
    .page-hero h1 { font-size: 1.7rem; }
    .stat-grid { grid-template-columns: 1fr; }
    .brand-portal { display: none; }
}

/* Tables collapse to stacked "cards" on small screens */
@media (max-width: 640px) {
    .table thead { display: none; }
    .table, .table tbody, .table tr, .table td { display: block; width: 100%; }
    .table tr { border-bottom: 1px solid var(--border-strong); padding: 10px 0; }
    .table tr:last-child { border-bottom: none; }
    .table td {
        display: flex;
        justify-content: space-between;
        gap: 16px;
        border: none;
        padding: 5px 4px;
        text-align: right;
    }
    .table td::before {
        content: attr(data-label);
        font-family: var(--font-head);
        text-transform: uppercase;
        letter-spacing: .06em;
        font-size: .78rem;
        color: var(--muted);
        text-align: left;
        flex-shrink: 0;
    }
    .table td.row-action { justify-content: flex-end; }
    .table td.row-action::before { content: none; }
    .table td.cell-empty { display: none; }
    .table .num { text-align: right; }
}