/* ============================================================
   shuchaye.css
   Shared design tokens + basic component styles for all portals.
   Colors/radii/spacing are taken from Designs/DESIGN_NOTES.md (the B2C
   app look) and Blueprint NFR-001/002 (12px card radius, 48px CTA height).
   Every page should use these classes/variables instead of hard-coding
   a hex value or a pixel size.
   ============================================================ */

:root {
    /* Brand colors */
    --shu-primary: #1B7A3B;
    --shu-primary-dark: #166B33;
    --shu-primary-tint: #E8F5EC;
    --shu-primary-tint-soft: #F1F8F2;

    /* Text colors */
    --shu-text-dark: #1A1A1A;
    --shu-text-body: #4A4A4A;
    --shu-text-muted: #8A8A8A;

    /* Status colors */
    --shu-error: #D93025;
    --shu-error-tint: #FDECEA;
    --shu-error-border: #F5C6C0;
    --shu-warning: #F5A623;
    --shu-warning-tint: #FFF4E0;
    --shu-info: #1A73E8;
    --shu-info-tint: #EAF2FD;
    --shu-accent-orange: #E8871E;
    --shu-star-gold: #F5B300;

    /* Surfaces */
    --shu-border: #E0E0E0;
    --shu-surface: #FFFFFF;
    --shu-page-bg: #FAFAFA;

    /* Layout tokens (Blueprint NFR-001/002) */
    --shu-radius-card: 12px;
    --shu-radius-input: 8px;
    --shu-cta-height: 48px;
    --shu-gutter: 16px;
}

/* ============ BASE ============ */

body {
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
    color: var(--shu-text-body);
    background-color: var(--shu-page-bg);
    margin: 0;
}

h1, h2, h3, h4, h5 {
    color: var(--shu-text-dark);
    font-weight: 600;
}

a {
    color: var(--shu-primary);
}

    a:hover {
        color: var(--shu-primary-dark);
    }

/* ============ PUBLIC (pre-login) LAYOUT ============ */

.shu-public-body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

.shu-public-wrap {
    width: 100%;
    max-width: 420px;
    padding: var(--shu-gutter);
}

.shu-public-card {
    padding: 24px;
}

/* ============ TOP BAR (used by all 6 master pages) ============ */

.shu-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--shu-surface);
    border-bottom: 1px solid var(--shu-border);
    padding: 12px var(--shu-gutter);
}

.shu-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 20px;
    font-weight: 700;
    color: var(--shu-primary);
    text-decoration: none;
}

.shu-logo .shu-logo-dark {
    color: var(--shu-text-dark);
}

.shu-topbar-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.shu-user-name {
    color: var(--shu-text-dark);
    font-weight: 600;
}

.shu-role-badge {
    background-color: var(--shu-primary-tint);
    color: var(--shu-primary-dark);
    border-radius: var(--shu-radius-input);
    padding: 2px 10px;
    font-size: 12px;
    font-weight: 600;
}

.shu-role-badge-inactive {
    background-color: var(--shu-error-tint);
    color: var(--shu-error);
    border-radius: var(--shu-radius-input);
    padding: 2px 10px;
    font-size: 12px;
    font-weight: 600;
}

/* Small uppercase label above a page's <h5> title (Admin/Users.aspx's
   role-scoped pages: "Users" eyebrow + "B2B Contacts"/"Agents"/etc. title)
   — the same eyebrow-plus-heading pattern used for section labels across
   modern console UIs (Stripe, Linear), so the page names both "what group
   this belongs to" and "which specific view this is" without needing a
   breadcrumb trail. */
.shu-page-eyebrow {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--shu-text-muted);
}

/* ============ SIDE NAV (Enterprise / Agent / Aggregator / Admin) ============ */

.shu-layout {
    display: flex;
    min-height: calc(100vh - 57px);
}

.shu-sidenav {
    width: 230px;
    flex-shrink: 0;
    background-color: var(--shu-surface);
    border-right: 1px solid var(--shu-border);
    padding: var(--shu-gutter) 0;
}

    .shu-sidenav a {
        display: block;
        padding: 10px var(--shu-gutter);
        color: var(--shu-text-body);
        text-decoration: none;
        font-size: 14px;
        border-left: 3px solid transparent;
    }

        .shu-sidenav a:hover,
        .shu-sidenav a.active {
            background-color: var(--shu-primary-tint-soft);
            color: var(--shu-primary-dark);
            border-left-color: var(--shu-primary);
            font-weight: 600;
        }

.shu-content {
    flex: 1;
    padding: var(--shu-gutter);
}

/* ============ BOTTOM NAV (Customer portal, mirrors the MAUI app) ============ */

.shu-bottom-nav {
    display: flex;
    justify-content: space-around;
    background-color: var(--shu-surface);
    border-top: 1px solid var(--shu-border);
    padding: 8px 0;
    position: sticky;
    bottom: 0;
    position: fixed;
    width:100%;
}

    .shu-bottom-nav a {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        color: var(--shu-text-muted);
        text-decoration: none;
        font-size: 11px;
        text-align: center;
    }

        .shu-bottom-nav a.active {
            color: var(--shu-primary);
            font-weight: 600;
        }

    .shu-bottom-nav .shu-nav-icon {
        width: 22px;
        height: 22px;
        stroke-width: 2;
    }

/* ============ CARDS ============ */

.shu-card {
    background-color: var(--shu-surface);
    border: 1px solid var(--shu-border);
    border-radius: var(--shu-radius-card);
    padding: var(--shu-gutter);
    margin-bottom: var(--shu-gutter);
}

.shu-card-primary {
    background-color: var(--shu-primary-dark);
    color: #FFFFFF;
    border-radius: var(--shu-radius-card);
    padding: var(--shu-gutter);
}

/* ============ BUTTONS ============ */

.btn-shu-primary {
    height: var(--shu-cta-height);
    background-color: var(--shu-primary);
    color: #FFFFFF;
    border: none;
    border-radius: var(--shu-radius-card);
    padding: 0 20px;
    font-weight: 600;
    font-size: 15px;
}

    .btn-shu-primary:hover {
        background-color: var(--shu-primary-dark);
        color: #FFFFFF;
    }

.btn-shu-outline {
    height: var(--shu-cta-height);
    background-color: #FFFFFF;
    color: var(--shu-primary);
    border: 1px solid var(--shu-primary);
    border-radius: var(--shu-radius-card);
    padding: 0 20px;
    font-weight: 600;
    font-size: 15px;
}

/* Admin/Aggregator new-theme (assets/css/main.css) Bootstrap buttons —
   themed the same green as btn-shu-primary/btn-shu-outline above instead
   of the template's default blue. This file loads after main.css on both
   Admin.master and Aggregator.master, so the cascade applies these
   without needing !important. */
.btn-primary {
    background-color: var(--shu-primary);
    border-color: var(--shu-primary);
    color: #FFFFFF;
}

    .btn-primary:hover {
        background-color: var(--shu-primary-dark);
        border-color: var(--shu-primary-dark);
        color: #FFFFFF;
    }

.btn-outline-primary {
    background-color: #FFFFFF;
    color: var(--shu-primary);
    border: 1px solid var(--shu-primary);
}

    .btn-outline-primary:hover {
        background-color: var(--shu-primary);
        border-color: var(--shu-primary);
        color: #FFFFFF;
    }

/* ============ LINK BUTTON (Login/Otp/Register, Step S50) ============ */

.shu-link-button {
    background: none;
    border: none;
    color: var(--shu-primary);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
}

/* ============ ALERTS (map to the amber/red/blue/green tints in the designs) ============ */

.alert-shu-error {
    background-color: var(--shu-error-tint);
    border: 1px solid var(--shu-error-border);
    color: var(--shu-error);
    border-radius: var(--shu-radius-card);
    padding: var(--shu-gutter);
}

.alert-shu-warning {
    background-color: var(--shu-warning-tint);
    color: #7A4E00;
    border-radius: var(--shu-radius-card);
    padding: var(--shu-gutter);
}

.alert-shu-info {
    background-color: var(--shu-info-tint);
    color: var(--shu-info);
    border-radius: var(--shu-radius-card);
    padding: var(--shu-gutter);
}

.alert-shu-success {
    background-color: var(--shu-primary-tint);
    color: var(--shu-primary-dark);
    border-radius: var(--shu-radius-card);
    padding: var(--shu-gutter);
}

/* ============ TOASTS (used by Scripts/shuchaye.js -> shuchayeToast) ============ */

#shuToastContainer {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 1080;
}

/* ============ RATE TREND ARROWS (Admin/Rates.aspx, Step S18) ============ */

.shu-trend-up {
    color: var(--shu-primary);
    font-weight: 600;
}

.shu-trend-down {
    color: var(--shu-error);
    font-weight: 600;
}

.shu-trend-same {
    color: var(--shu-text-muted);
}

/* ============ FOOTER ============ */

.shu-footer {
    text-align: center;
    color: var(--shu-text-muted);
    font-size: 12px;
    padding: 16px;
}

/* ============ PICKUP CARD LIST (Agent/DailyPickups.aspx, Step S31) ============ */
/* Big touch targets per Blueprint M06 UI Behavior — 48px CTAs via --shu-cta-height. */

.shu-pickup-card {
    background-color: var(--shu-surface);
    border: 1px solid var(--shu-border);
    border-radius: var(--shu-radius-card);
    padding: var(--shu-gutter);
    margin-bottom: var(--shu-gutter);
}

.shu-pickup-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.shu-stop-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: var(--shu-primary-tint);
    color: var(--shu-primary-dark);
    font-weight: 700;
    font-size: 13px;
    margin-right: 8px;
}

.shu-pickup-code {
    font-weight: 600;
    color: var(--shu-text-dark);
}

.shu-pickup-meta {
    font-size: 13px;
    color: var(--shu-text-muted);
    margin: 2px 0;
}

.shu-status-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-radius: 999px;
    padding: 3px 10px;
    white-space: nowrap;
}

.shu-status-assigned { color: var(--shu-info); background-color: var(--shu-info-tint); }
.shu-status-enroute  { color: var(--shu-accent-orange); background-color: var(--shu-warning-tint); }
.shu-status-arrived  { color: var(--shu-primary-dark); background-color: var(--shu-primary-tint); }
.shu-status-default  { color: var(--shu-text-muted); background-color: var(--shu-page-bg); }

/* Appliance item statuses (Step U34, design 28/29) — reuses the same
   .shu-status-badge shape as pickup statuses above. */
.shu-status-confirmed         { color: var(--shu-primary-dark); background-color: var(--shu-primary-tint); }
.shu-status-awaiting-approval { color: var(--shu-accent-orange); background-color: var(--shu-warning-tint); }
.shu-status-approved          { color: var(--shu-primary-dark); background-color: var(--shu-primary-tint); }
.shu-status-rejected          { color: var(--shu-error); background-color: var(--shu-error-tint); }
.shu-status-cancelled         { color: var(--shu-error); background-color: var(--shu-error-tint); }

/* Generic enabled/disabled flag badge (Admin/Masters grids — replaces the
   raw checkbox column with a readable pill). Named "flag" rather than
   reusing "shu-status-active" since that class already means something
   different (in-progress pickup, colored blue) elsewhere on this page's
   own stylesheet. */
.shu-flag-active   { color: var(--shu-primary-dark); background-color: var(--shu-primary-tint); }
.shu-flag-inactive { color: var(--shu-text-muted); background-color: var(--shu-page-bg); }
.shu-flag-hub      { color: var(--shu-accent-orange); background-color: var(--shu-warning-tint); }
.shu-flag-none      { color: var(--shu-text-muted); }

/* Friendlier empty state for the Admin/Masters/{Regions,Zones,Pincodes}
   grids (icon + message) than the GridView default plain-text
   EmptyDataText row. */
.shu-grid-empty {
    text-align: center;
    padding: 40px 16px;
    color: var(--shu-text-muted);
}

    .shu-grid-empty i {
        font-size: 28px;
        display: block;
        margin-bottom: 10px;
        opacity: .5;
    }

.shu-appliance-item-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 0;
    border-bottom: 1px solid var(--shu-border);
}

    .shu-appliance-item-row:last-child {
        border-bottom: none;
    }

.shu-appliance-item-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

    .shu-appliance-item-actions a {
        height: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 14px;
        border-radius: var(--shu-radius-card);
        font-weight: 600;
        font-size: 13px;
        text-decoration: none;
    }

.shu-pickup-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

    .shu-pickup-actions a,
    .shu-pickup-actions button,
    .shu-pickup-actions .btn-shu-outline,
    .shu-pickup-actions .btn-shu-primary {
        height: var(--shu-cta-height);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 18px;
        border-radius: var(--shu-radius-card);
        font-weight: 600;
        font-size: 14px;
        text-decoration: none;
    }

.shu-report-link {
    background: none;
    border: 1px solid var(--shu-error);
    color: var(--shu-error);
}

/* ============ AGENT PORTAL CHAT (Step U24) ============ */

.shu-agent-chat-messages {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 300px;
    overflow-y: auto;
    margin-bottom: 12px;
}

.shu-agent-chat-bubble {
    max-width: 75%;
    padding: 8px 12px;
    border-radius: var(--shu-radius-card);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

    .shu-agent-chat-bubble.mine {
        align-self: flex-end;
        background-color: var(--shu-primary-tint);
        color: var(--shu-primary-dark);
    }

    .shu-agent-chat-bubble.theirs {
        align-self: flex-start;
        background-color: var(--shu-page-bg);
        color: var(--shu-text-body);
    }

.shu-agent-chat-time {
    font-size: 11px;
    opacity: 0.7;
    align-self: flex-end;
}

.shu-agent-chat-input-row {
    display: flex;
    gap: 8px;
}

    .shu-agent-chat-input-row input {
        flex: 1;
    }

/* ============ MUTED HELPER TEXT ============ */
/* Was used as a class across Agg/Agent pages since S16 but never actually
   defined here (only the --shu-text-muted *variable* existed) — that text
   rendered unstyled. Defined once, globally, when Agent/Weighing.aspx
   (Step S37) needed it too. */

.shu-text-muted {
    color: var(--shu-text-muted);
    font-size: 13px;
}

/* ============ DIGITAL WEIGHING (Agent/Weighing.aspx, Step S37) ============ */

.shu-weigh-locked {
    text-align: center;
}

.shu-weigh-value {
    font-size: 40px;
    font-weight: 700;
    color: var(--shu-primary-dark);
    line-height: 1.1;
}

.shu-weigh-unit {
    font-size: 20px;
    color: var(--shu-text-muted);
}

.shu-weigh-awaiting {
    text-align: center;
    padding: 12px;
    border: 1px dashed var(--shu-border);
    border-radius: var(--shu-radius-card);
}

.shu-manual-flag {
    color: var(--shu-accent-orange);
    font-weight: 700;
}

.shu-payout-card {
    background-color: var(--shu-primary-tint);
}

.shu-payout-total {
    font-size: 22px;
    font-weight: 700;
    color: var(--shu-primary-dark);
}

/* ============ SWIPE-TO-PAY (Agent/Payment.aspx, Step S40) ============ */
/* BR-06/FR-032: payout fires only on an explicit >=90% swipe (accidental-
   tap prevention). Custom slider — no jQuery-UI dependency. */

.shu-swipe {
    position: relative;
    height: 56px;
    border-radius: 28px;
    background: var(--shu-primary-tint);
    border: 1px solid var(--shu-primary);
    overflow: hidden;
    user-select: none;
    touch-action: none;
    margin: 8px 0;
}

.shu-swipe-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--shu-primary-dark);
    font-weight: 600;
    pointer-events: none;
}

.shu-swipe-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--shu-primary);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    cursor: grab;
    touch-action: none;
}

    .shu-swipe-thumb:active {
        cursor: grabbing;
    }

.shu-swipe.done {
    background: var(--shu-primary);
}

    .shu-swipe.done .shu-swipe-label {
        color: #FFFFFF;
    }

/* ============ COMPLETION (Agent/Completion.aspx, Step S40) ============ */

.shu-complete-hero {
    text-align: center;
    padding: 24px 0;
}

.shu-complete-icon {
    font-size: 56px;
    color: var(--shu-primary);
    background-color: var(--shu-primary-tint);
    width: 88px;
    height: 88px;
    line-height: 88px;
    border-radius: 50%;
    margin: 0 auto 12px;
}

.shu-receipt-amount {
    font-size: 32px;
    font-weight: 700;
    color: var(--shu-primary-dark);
}

.shu-receipt-utr {
    font-size: 13px;
    color: var(--shu-text-muted);
}

/* ============ HOME / WALLET WIDGET / FAB (Home.aspx, Step S51) ============ */

.shu-home {
    padding-bottom: 24px;
}

.shu-wallet-card {
    display: block;
    background-color: var(--shu-primary-dark);
    color: #FFFFFF;
    border-radius: var(--shu-radius-card);
    padding: var(--shu-gutter);
    margin-bottom: var(--shu-gutter);
    text-decoration: none;
}

    .shu-wallet-card:hover {
        color: #FFFFFF;
    }

/* ============ NAV CARD (Home.aspx "Rewards" link, Step S54) ============ */

.shu-nav-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--shu-surface);
    border: 1px solid var(--shu-border);
    border-radius: var(--shu-radius-card);
    padding: 14px var(--shu-gutter);
    margin-bottom: var(--shu-gutter);
    font-size: 14px;
    font-weight: 600;
    color: var(--shu-text-dark);
    text-decoration: none;
}

.shu-nav-card-arrow {
    color: var(--shu-text-muted);
    font-size: 18px;
}

.shu-wallet-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    opacity: 0.9;
}

.shu-wallet-icon {
    font-size: 20px;
}

.shu-wallet-amount {
    font-size: 28px;
    font-weight: 700;
    margin: 4px 0;
}

.shu-wallet-caption {
    font-size: 12px;
    opacity: 0.85;
    margin: 0;
}

.shu-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

    .shu-section-header h5 {
        margin: 0;
    }

    .shu-section-header a {
        font-size: 13px;
        font-weight: 600;
        text-decoration: none;
    }

.shu-rate-scroll {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 8px;
}

.shu-rate-card {
    flex: 0 0 auto;
    min-width: 130px;
    background-color: var(--shu-surface);
    border: 1px solid var(--shu-border);
    border-radius: var(--shu-radius-card);
    padding: 12px;
    text-decoration: none;
    display: block;
}

.shu-rate-material {
    font-size: 13px;
    font-weight: 600;
    color: var(--shu-text-dark);
}

.shu-rate-grade {
    font-size: 11px;
    color: var(--shu-text-muted);
    margin-bottom: 6px;
}

.shu-rate-value {
    font-size: 15px;
    font-weight: 700;
    color: var(--shu-text-dark);
}

.shu-fab {
    position: fixed;
    right: 24px;
    bottom: 80px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: var(--shu-primary);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
    z-index: 20;
}

    .shu-fab:hover {
        background-color: var(--shu-primary-dark);
        color: #FFFFFF;
    }

/* ============ SCRAP RATES LISTING (Rates.aspx, Step S51) ============ */

.shu-rates-page {
    padding-bottom: 24px;
}

.shu-category-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    margin-bottom: 16px;
    padding-bottom: 4px;
}

.shu-chip {
    flex: 0 0 auto;
    border: 1px solid var(--shu-border);
    background-color: var(--shu-surface);
    color: var(--shu-text-body);
    border-radius: 999px;
    padding: 6px 16px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
}

    .shu-chip.active {
        background-color: var(--shu-primary);
        border-color: var(--shu-primary);
        color: #FFFFFF;
    }

.shu-rate-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--shu-surface);
    border: 1px solid var(--shu-border);
    border-radius: var(--shu-radius-card);
    padding: 12px var(--shu-gutter);
    margin-bottom: 8px;
    text-decoration: none;
}

.shu-rate-row-material {
    font-size: 14px;
    font-weight: 600;
    color: var(--shu-text-dark);
}

.shu-rate-row-category {
    font-size: 12px;
    color: var(--shu-text-muted);
}

.shu-rate-row-value {
    font-size: 14px;
    font-weight: 700;
    color: var(--shu-primary-dark);
    white-space: nowrap;
}

/* ============ RATE DETAILS (RateDetail.aspx, Step S51) ============ */

.shu-rate-detail {
    padding-bottom: 24px;
}

.shu-rate-detail-hero {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin: 8px 0 16px;
}

.shu-rate-detail-price {
    font-size: 28px;
    font-weight: 700;
    color: var(--shu-text-dark);
}

.shu-sparkline-wrap {
    background-color: var(--shu-surface);
    border: 1px solid var(--shu-border);
    border-radius: var(--shu-radius-card);
    padding: 8px;
}

.shu-sparkline-caption {
    font-size: 11px;
    margin-top: 4px;
}

/* ============ BOOKING CAROUSEL (Booking.aspx, Step S52) ============ */

.shu-booking {
    padding-bottom: 24px;
}

.shu-progress-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: var(--shu-gutter);
}

.shu-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--shu-border);
    display: inline-block;
}

    .shu-dot.active {
        background-color: var(--shu-primary);
    }

.shu-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--shu-text-dark);
    margin: 12px 0 4px;
}

.shu-field-error {
    color: var(--shu-error);
    font-size: 13px;
    margin: 4px 0 0;
}

/* ---------- Permissions checklist (Admin/Users.aspx, Agg/StaffUsers.aspx) ----------
   Redesigned as a settings-style list (macOS System Settings / Windows
   Settings toggle-row conventions): one clean full-width row per
   permission, a branded checkbox instead of the stock browser one, the
   whole row tinting when its box is checked, and a select-all/clear
   toolbar with a live count. Previously this was `display:grid` on the
   CheckBoxList's default RepeatLayout="Table" output — CSS grid on a
   <table> element doesn't distribute <tr> children the way it would a
   normal block container, so the grid rule silently never applied and the
   list always rendered as one plain native-checkbox column regardless of
   width. Fixed at the markup level too: RepeatLayout="UnorderedList" now
   gives a real <ul>/<li> per item for this CSS to target. */

.shu-permissions-panel {
    margin-top: 4px;
}

.shu-permissions-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 10px 0 8px;
}

.shu-permissions-count {
    font-size: 12px;
    font-weight: 600;
    color: var(--shu-text-muted);
}

.shu-permissions-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.shu-permissions-link {
    background: none;
    border: none;
    padding: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--shu-primary);
    cursor: pointer;
}

    .shu-permissions-link:hover {
        color: var(--shu-primary-dark);
        text-decoration: underline;
    }

.shu-permissions-sep {
    color: var(--shu-border);
}

.shu-checkbox-list {
    list-style: none;
    margin: 0;
    padding: 4px;
    max-height: 280px;
    overflow-y: auto;
    border: 1px solid var(--shu-border);
    border-radius: var(--shu-radius-card);
    background-color: var(--shu-surface);
}

    /* CheckBoxList still renders the wrapping <ul> even with zero items
       (e.g. a restricted admin with nothing left to grant) — :empty
       matches that case for a friendlier message than a bare box. */
    .shu-checkbox-list:empty::before {
        content: "No permissions available to grant.";
        display: block;
        padding: 20px 12px;
        text-align: center;
        font-size: 13px;
        color: var(--shu-text-muted);
    }

.shu-checkbox-list li {
    display: flex;
    align-items: center;
    border-radius: 8px;
    transition: background-color .12s ease;
}

    .shu-checkbox-list li:hover {
        background-color: var(--shu-page-bg);
    }

    /* The whole row tints when its own checkbox is checked, not just the
       checkbox itself — the same "this setting is on" feedback a native
       settings list gives at a glance, scannable without reading every
       checkbox individually. */
    .shu-checkbox-list li:has(input:checked) {
        background-color: var(--shu-primary-tint-soft);
    }

.shu-checkbox-list label {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 10px;
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--shu-text-dark);
    cursor: pointer;
}

/* Native checkbox, restyled — appearance:none strips the browser default
   (a tiny, inconsistent-across-browsers square that always read as an
   afterthought next to a 14px label) so a brand-consistent, slightly
   larger control can take its place. Stays a real <input type=checkbox>
   throughout — full keyboard/screen-reader support for free, no custom
   ARIA needed. */
.shu-checkbox-list input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin: 0;
    border: 1.5px solid var(--shu-border);
    border-radius: 6px;
    background-color: var(--shu-surface);
    cursor: pointer;
    position: relative;
    transition: background-color .12s ease, border-color .12s ease;
}

    .shu-checkbox-list input[type="checkbox"]:hover {
        border-color: var(--shu-primary);
    }

    .shu-checkbox-list input[type="checkbox"]:checked {
        background-color: var(--shu-primary);
        border-color: var(--shu-primary);
    }

    /* Checkmark drawn as a CSS-only glyph (rotated border corner) rather
       than an image asset — no extra file, trivially recolours. */
    .shu-checkbox-list input[type="checkbox"]:checked::after {
        content: "";
        position: absolute;
        left: 6px;
        top: 2px;
        width: 5px;
        height: 10px;
        border: solid #FFFFFF;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
    }

    .shu-checkbox-list input[type="checkbox"]:focus-visible {
        outline: 2px solid var(--shu-primary);
        outline-offset: 2px;
    }

.shu-pincode-ok {
    color: var(--shu-primary-dark);
    font-size: 13px;
    margin: 4px 0 0;
}

.shu-booking-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--shu-surface);
    border: 1px solid var(--shu-border);
    border-radius: var(--shu-radius-card);
    padding: 12px var(--shu-gutter);
    margin-bottom: 8px;
}

.shu-booking-item-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--shu-text-dark);
}

.shu-booking-item-weight {
    font-size: 12px;
    color: var(--shu-text-muted);
}

.shu-remove-btn {
    color: var(--shu-error);
    text-decoration: none;
    font-size: 16px;
    padding: 4px 8px;
}

.shu-address-card {
    display: block;
    border: 1px solid var(--shu-border);
    border-radius: var(--shu-radius-card);
    padding: var(--shu-gutter);
    margin-bottom: 8px;
}

    .shu-address-card.selected {
        border-color: var(--shu-primary);
        border-width: 2px;
        background-color: var(--shu-primary-tint-soft);
    }

.shu-address-card-btn {
    display: block;
    width: 100%;
    text-align: left;
    text-decoration: none;
    color: inherit;
    background: none;
    border: none;
    padding: 0;
}

.shu-address-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.shu-address-label {
    font-weight: 600;
    color: var(--shu-text-dark);
    font-size: 14px;
}

.shu-address-unserviceable {
    color: var(--shu-error);
    font-size: 12px;
    font-weight: 600;
}

.shu-address-line,
.shu-address-pincode {
    font-size: 13px;
    color: var(--shu-text-muted);
    margin-top: 2px;
}

.shu-new-address {
    background-color: var(--shu-surface);
    border: 1px solid var(--shu-border);
    border-radius: var(--shu-radius-card);
    padding: var(--shu-gutter);
}

.shu-tc-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

.shu-slot-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.shu-booking-nav {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 24px;
}

    .shu-booking-nav .btn-shu-primary,
    .shu-booking-nav .btn-shu-outline {
        flex: 1;
    }

/* ============ BOOKING CONFIRMATION (BookingConfirm.aspx, Step S52) ============ */

.shu-confirm-success {
    text-align: center;
    padding: 48px var(--shu-gutter);
}

.shu-success-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background-color: var(--shu-primary-tint);
    color: var(--shu-primary);
    font-size: 32px;
    margin-bottom: 16px;
}

.shu-confirm-success .shu-pickup-code {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--shu-primary-dark);
    margin: 8px 0 16px;
}

.shu-confirm-success .btn-shu-primary,
.shu-confirm-success .btn-shu-outline {
    display: block;
    max-width: 320px;
    margin: 0 auto;
    line-height: var(--shu-cta-height);
    text-align: center;
    text-decoration: none;
}

/* ============ TRACKING TIMELINE (Track.aspx, Step S53) ============ */

.shu-timeline {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
}

.shu-timeline-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 6px 0;
}

.shu-timeline-dot {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--shu-primary);
    margin-top: 5px;
}

.shu-timeline-status {
    font-size: 14px;
    font-weight: 600;
    color: var(--shu-text-dark);
}

.shu-timeline-time {
    font-size: 12px;
    color: var(--shu-text-muted);
}

/* ============ DOORSTEP VERIFY (TrackVerify.aspx, Step S53) ============ */

.shu-verify-card {
    text-align: center;
    padding: 32px var(--shu-gutter);
}

.shu-otp-display {
    font-size: 40px;
    font-weight: 700;
    letter-spacing: 8px;
    color: var(--shu-primary-dark);
    margin: 12px 0;
}

/* ============ PAYMENT CONFIRM (PaymentConfirm.aspx, Step S53) ============ */

.shu-pc-actions {
    display: flex;
    gap: 12px;
}

    .shu-pc-actions .btn-shu-primary,
    .shu-pc-actions .btn-shu-outline {
        flex: 1;
    }

@media print {
    .shu-topbar, .shu-bottom-nav, .shu-pc-actions {
        display: none !important;
    }
}

/* All four staff portals (Admin/Agg/Agent/Enterprise) now share the same
   Bootstrap-5 dashboard shell (.app-sidebar / .app__header__area), which
   replaced the old simple .shu-topbar/.shu-sidenav layout. The per-page
   print rules below (@media print { .shu-topbar, .shu-sidenav, .shu-xxx-
   noprint {...} }) predate that shell and only ever hid the OLD chrome
   classes — those selectors are now dead for every migrated page, so
   printing (Invoice/ESG/Manifest/Settlement/Executive, etc.) left the
   sidebar and header visible on the page. One shared rule instead of
   patching each page's own print block individually. -->
@media print {
    .app-sidebar, .app__header__area, .app__offcanvas-overlay, .body__overlay {
        display: none !important;
    }
}

/* ============ WALLET (Wallet.aspx, Step S54) ============ */
/* Ported from Shuchaye.Mobile's Wallet.razor.css (Step S42) — same class
   names, dropped Blazor scoping attributes. */

.shu-wallet-page {
    padding-bottom: 8px;
}

.shu-wallet-balance-card {
    background-color: var(--shu-primary-dark);
    color: #FFFFFF;
    border-radius: var(--shu-radius-card);
    padding: 24px var(--shu-gutter);
    text-align: center;
}

.shu-wallet-balance-label {
    font-size: 14px;
    opacity: 0.9;
}

.shu-wallet-balance-amount {
    font-size: 36px;
    font-weight: 700;
    margin-top: 4px;
}

.shu-wallet-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.shu-link-btn {
    background: none;
    border: none;
    color: var(--shu-primary);
    font-weight: 600;
    font-size: 14px;
}

.shu-beneficiary-row,
.shu-txn-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--shu-border);
}

    .shu-beneficiary-row:last-child,
    .shu-txn-row:last-child {
        border-bottom: none;
    }

.shu-beneficiary-name,
.shu-txn-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--shu-text-dark);
}

.shu-beneficiary-sub,
.shu-txn-date {
    font-size: 12px;
    color: var(--shu-text-muted);
}

.shu-txn-credit {
    color: var(--shu-primary-dark);
    font-weight: 700;
}

.shu-txn-debit {
    color: var(--shu-error);
    font-weight: 700;
}

.shu-remove-btn {
    background: none;
    border: none;
    color: var(--shu-error);
    font-size: 14px;
    padding: 4px 8px;
}

.shu-new-beneficiary {
    background-color: var(--shu-page-bg);
    border: 1px solid var(--shu-border);
    border-radius: var(--shu-radius-card);
    padding: var(--shu-gutter);
}

.shu-wallet-form-nav {
    display: flex;
    gap: 12px;
    margin-top: 16px;
}

    .shu-wallet-form-nav .btn-shu-outline,
    .shu-wallet-form-nav .btn-shu-primary {
        flex: 1;
    }

/* ============ REWARDS (Rewards.aspx, Step S54) ============ */
/* Ported from Shuchaye.Mobile's Rewards.razor.css (Step S45). */

.shu-rewards-page {
    padding-bottom: 8px;
}

.shu-points-card {
    background: linear-gradient(135deg, var(--shu-primary) 0%, var(--shu-primary-dark) 100%);
    color: #FFFFFF;
    border-radius: var(--shu-radius-card);
    padding: 24px var(--shu-gutter);
    text-align: center;
}

.shu-points-label {
    font-size: 14px;
    opacity: 0.9;
}

.shu-points-value {
    font-size: 44px;
    font-weight: 700;
    line-height: 1.1;
    margin: 4px 0;
}

.shu-points-sub {
    font-size: 12px;
    opacity: 0.85;
}

.shu-reward-tabs {
    display: flex;
    gap: 8px;
}

    .shu-reward-tabs .shu-chip {
        flex: 1;
        text-align: center;
    }

.shu-reward-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--shu-border);
}

    .shu-reward-row:last-child {
        border-bottom: none;
    }

.shu-reward-narration {
    font-size: 14px;
    font-weight: 600;
    color: var(--shu-text-dark);
}

.shu-reward-date {
    font-size: 12px;
    color: var(--shu-text-muted);
}

.shu-reward-earn {
    color: var(--shu-primary-dark);
    font-weight: 700;
    font-size: 16px;
}

.shu-reward-spend {
    color: var(--shu-accent-orange);
    font-weight: 700;
    font-size: 16px;
}

/* ============ PICKUP HISTORY (History.aspx, Step S55) ============ */
/* Reuses the existing .shu-pickup-card/.shu-pickup-meta/.shu-status-badge/
   .shu-chip rules as-is (shared with Agent pages) rather than overriding
   their padding/margin to match Shuchaye.Mobile's History.razor.css exactly
   — changing those would also affect Agent/DailyPickups.aspx etc. Only the
   genuinely new pieces are added here. */

.shu-history {
    padding-bottom: 24px;
}

.shu-status-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    margin-bottom: 16px;
    padding-bottom: 4px;
}

.shu-pickup-code-sm {
    font-size: 14px;
    font-weight: 600;
    color: var(--shu-text-dark);
}

.shu-pickup-amount {
    font-size: 15px;
    font-weight: 700;
    color: var(--shu-primary-dark);
    margin-top: 4px;
}

.shu-status-active {
    color: var(--shu-info);
    background-color: var(--shu-info-tint);
}

.shu-status-completed {
    color: var(--shu-primary-dark);
    background-color: var(--shu-primary-tint);
}

.shu-status-cancelled {
    color: var(--shu-error);
    background-color: var(--shu-error-tint);
}

.shu-cancel-link {
    background: none;
    border: none;
    color: var(--shu-error);
    font-size: 13px;
    font-weight: 600;
    padding: 8px 0 0;
}

.shu-cancel-confirm {
    margin-top: 8px;
}

.shu-cancel-actions {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

    .shu-cancel-actions .btn-shu-outline,
    .shu-cancel-actions .shu-btn-danger {
        flex: 1;
    }

.shu-btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--shu-cta-height);
    background-color: var(--shu-error);
    color: #FFFFFF;
    border: none;
    border-radius: var(--shu-radius-card);
    padding: 0 20px;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
}

/* ============ SUSTAINABILITY (Sustainability.aspx, Step S55) ============ */
/* Ported from Shuchaye.Mobile's Sustainability.razor.css (Step S46) — same
   class names, dropped Blazor scoping attributes. */

.shu-sustainability-page {
    padding-bottom: 24px;
}

.shu-impact-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.shu-impact-card {
    background-color: var(--shu-surface);
    border: 1px solid var(--shu-border);
    border-radius: var(--shu-radius-card);
    padding: 14px 8px;
    text-align: center;
}

.shu-impact-icon {
    font-size: 22px;
}

.shu-impact-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--shu-primary-dark);
    margin: 4px 0 2px;
}

.shu-impact-label {
    font-size: 11px;
    color: var(--shu-text-muted);
}

.shu-bar-chart {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 6px;
    height: 140px;
}

.shu-bar-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}

.shu-bar-track {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.shu-bar-fill {
    width: 60%;
    background-color: var(--shu-primary);
    border-radius: 4px 4px 0 0;
    min-height: 2px;
}

.shu-bar-label {
    font-size: 10px;
    color: var(--shu-text-muted);
    margin-top: 4px;
}

/* ============ TOPBAR BELL BADGE (Customer.master, Step S56) ============ */
/* Ported from Shuchaye.Mobile's MainLayout.razor.css bell (Step S48). */

.shu-bell {
    position: relative;
    font-size: 20px;
    text-decoration: none;
    line-height: 1;
}

.shu-bell-badge {
    position: absolute;
    top: -6px;
    right: -8px;
    background-color: var(--shu-error);
    color: #FFFFFF;
    font-size: 10px;
    font-weight: 700;
    border-radius: 999px;
    padding: 1px 5px;
    line-height: 1.3;
}

/* A generic small "success" inline message — pairs with the existing
   .shu-field-error, used across Support/Profile save/create confirmations
   (Step S56); ported from the MAUI *.razor.css files that already defined
   it identically in several places. */
.shu-field-success {
    color: var(--shu-primary-dark);
    font-size: 13px;
    margin: 4px 0 0;
    font-weight: 600;
}

/* ============ SUPPORT (Support.aspx, Step S56) ============ */
/* Ported from Shuchaye.Mobile's Support.razor.css (Step S47). */

.shu-support-page {
    padding-bottom: 24px;
}

.shu-support-tabs {
    display: flex;
    gap: 8px;
    margin: 12px 0;
}

    .shu-support-tabs .shu-chip {
        flex: 1;
        text-align: center;
    }

.shu-faq-item {
    border-bottom: 1px solid var(--shu-border);
}

.shu-faq-question {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: none;
    border: none;
    padding: 12px 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--shu-text-dark);
    text-align: left;
}

.shu-faq-answer {
    padding: 0 0 12px;
    font-size: 13px;
    color: var(--shu-text-body);
}

.shu-support-form-nav {
    display: flex;
    gap: 12px;
    margin-top: 16px;
}

    .shu-support-form-nav .btn-shu-outline,
    .shu-support-form-nav .btn-shu-primary {
        flex: 1;
    }

.shu-ticket-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--shu-surface);
    border: 1px solid var(--shu-border);
    border-radius: var(--shu-radius-card);
    padding: 12px var(--shu-gutter);
    margin-bottom: 8px;
    text-decoration: none;
}

.shu-ticket-subject {
    font-size: 14px;
    font-weight: 600;
    color: var(--shu-text-dark);
}

.shu-ticket-meta {
    font-size: 12px;
    color: var(--shu-text-muted);
}

.shu-status-open     { color: var(--shu-info); background-color: var(--shu-info-tint); }
.shu-status-progress { color: var(--shu-accent-orange); background-color: var(--shu-warning-tint); }
.shu-status-closed   { color: var(--shu-text-muted); background-color: var(--shu-page-bg); }

/* ============ SUPPORT TICKET THREAD (SupportTicket.aspx, Step S56) ============ */
/* Ported from Shuchaye.Mobile's SupportTicket.razor.css (Step S47). */

.shu-ticket-page {
    padding-bottom: 24px;
}

.shu-thread {
    margin-top: 16px;
}

.shu-msg {
    max-width: 85%;
    border-radius: var(--shu-radius-card);
    padding: 10px 14px;
    margin-bottom: 10px;
}

.shu-msg-me {
    background-color: var(--shu-primary-tint);
    margin-left: auto;
}

.shu-msg-staff {
    background-color: var(--shu-surface);
    border: 1px solid var(--shu-border);
}

.shu-msg-sender {
    font-size: 11px;
    font-weight: 700;
    color: var(--shu-text-muted);
    text-transform: uppercase;
}

.shu-msg-body {
    font-size: 14px;
    color: var(--shu-text-dark);
    margin: 2px 0;
    white-space: pre-wrap;
}

.shu-msg-time {
    font-size: 11px;
    color: var(--shu-text-muted);
}

.shu-reply-box {
    margin-top: 16px;
}

/* ============ PROFILE (Profile.aspx, Step S56) ============ */
/* Ported from Shuchaye.Mobile's Profile.razor.css (Step S48). Reuses the
   existing .shu-address-label/.shu-address-line/.shu-address-pincode
   (Booking.aspx, S52) and .shu-link-btn (Wallet.aspx, S54) as-is. */

.shu-profile-page {
    padding-bottom: 24px;
}

.shu-profile-avatar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 4px 16px;
}

.shu-avatar-circle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: var(--shu-primary);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 700;
}

.shu-profile-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--shu-text-dark);
}

.shu-profile-mobile {
    font-size: 13px;
    color: var(--shu-text-muted);
}

.shu-profile-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.shu-address-row {
    padding: 8px 0;
    border-bottom: 1px solid var(--shu-border);
}

    .shu-address-row:last-child {
        border-bottom: none;
    }

/* ============ NOTIFICATIONS (Notifications.aspx, Step S56) ============ */
/* Ported from Shuchaye.Mobile's Notifications.razor.css (Step S48). */

.shu-notifications-page {
    padding-bottom: 24px;
}

.shu-notif-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.shu-notif-item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    background-color: var(--shu-surface);
    border: 1px solid var(--shu-border);
    border-radius: var(--shu-radius-card);
    padding: 12px var(--shu-gutter);
    margin-bottom: 8px;
    cursor: pointer;
    text-decoration: none;
    width: 100%;
    text-align: left;
}

    .shu-notif-item.unread {
        background-color: var(--shu-primary-tint-soft);
        border-color: var(--shu-primary);
    }

.shu-notif-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--shu-primary);
    margin-top: 6px;
    flex-shrink: 0;
    display: inline-block;
}

.shu-notif-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--shu-text-dark);
}

.shu-notif-body {
    font-size: 13px;
    color: var(--shu-text-body);
    margin-top: 2px;
}

.shu-notif-time {
    font-size: 11px;
    color: var(--shu-text-muted);
    margin-top: 4px;
}

/* ============ B2B DASHBOARD (B2B/Dashboard.aspx, Step S58) ============ */
/* First screen of the Enterprise portal — same KPI-tile grid language as
   Sustainability.aspx's .shu-impact-grid (Step S55), new class names since
   this is a different portal (Enterprise.master, not Customer.master). */

.shu-kpi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--shu-gutter);
}

.shu-kpi-card {
    background-color: var(--shu-surface);
    border: 1px solid var(--shu-border);
    border-radius: var(--shu-radius-card);
    padding: var(--shu-gutter);
    text-align: center;
}

.shu-kpi-icon {
    font-size: 26px;
}

.shu-kpi-value {
    font-size: 26px;
    font-weight: 700;
    color: var(--shu-primary-dark);
    margin: 4px 0 2px;
}

.shu-kpi-label {
    font-size: 12px;
    color: var(--shu-text-muted);
}

.shu-b2b-actions {
    display: flex;
    gap: 12px;
}

/* ============ B2B BULK REQUEST (BulkRequest.aspx, Step S59) ============ */
/* Reuses .shu-remove-btn (Wallet.aspx, S54) and .shu-field-error/
   -field-success (already shared classes) as-is. */

.shu-rfq-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--shu-page-bg);
    border: 1px solid var(--shu-border);
    border-radius: var(--shu-radius-card);
    padding: 10px var(--shu-gutter);
    margin-bottom: 8px;
}

.shu-rfq-line-material {
    font-size: 14px;
    font-weight: 600;
    color: var(--shu-text-dark);
}

.shu-rfq-line-meta {
    font-size: 12px;
    color: var(--shu-text-muted);
    margin-top: 2px;
}

.shu-rfq-nav {
    display: flex;
    gap: 12px;
}

/* ============ B2B UPLOAD IMAGES (UploadImages.aspx, Step S59) ============ */

.shu-thumbnail-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.shu-thumbnail {
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: var(--shu-radius-input);
    overflow: hidden;
    border: 1px solid var(--shu-border);
}

    .shu-thumbnail img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.shu-thumbnail-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.6);
    color: #FFFFFF;
    border-radius: 50%;
    font-size: 12px;
    text-decoration: none;
}

/* ============ RFQ/QUOTE STATUS (RfqDashboard/QuoteDetail/QuoteIssue,
   Step S60) ============ */
/* A dedicated 6-color vocabulary — the existing 3-bucket schemes
   (.shu-status-active/-completed/-cancelled from History.aspx S55,
   .shu-status-open/-progress/-closed from Support.aspx S56) are pickup/
   ticket-specific and too coarse for RFQ's 6 statuses (Draft/Submitted/
   Quoted/Accepted/Rejected/Expired) or Quote's 5 (Draft/Sent/Accepted/
   Rejected/Expired) — both share the same status-code vocabulary, so one
   set of classes covers both. */

.shu-status-draft     { color: var(--shu-text-muted); background-color: var(--shu-page-bg); }
.shu-status-submitted,
.shu-status-sent      { color: var(--shu-info); background-color: var(--shu-info-tint); }
.shu-status-quoted    { color: var(--shu-accent-orange); background-color: var(--shu-warning-tint); }
.shu-status-accepted  { color: var(--shu-primary-dark); background-color: var(--shu-primary-tint); }
.shu-status-rejected  { color: var(--shu-error); background-color: var(--shu-error-tint); }
.shu-status-expired   { color: var(--shu-text-muted); background-color: var(--shu-page-bg); }

/* ============ QUOTE DETAIL (QuoteDetail.aspx, Step S60) ============ */

.shu-btn-disabled {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--shu-cta-height);
    padding: 0 20px;
    font-weight: 600;
    font-size: 14px;
    opacity: 0.5;
    cursor: not-allowed;
}

/* ============ INVOICE STATUS (Invoices.aspx, Step S62) ============ */
/* Invoice's 5 statuses (Draft/Sent/Paid/Overdue/Cancelled) mostly reuse the
   RFQ/Quote 6-color vocabulary above (.shu-status-draft/-sent already
   cover 2 of them) plus History.aspx's own .shu-status-cancelled
   (Step S55) for the 3rd — only Paid and Overdue are genuinely new. */

.shu-status-paid    { color: var(--shu-primary-dark); background-color: var(--shu-primary-tint); }
.shu-status-overdue { color: var(--shu-error); background-color: var(--shu-error-tint); }

.shu-invoice-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--shu-gutter);
}

    .shu-invoice-filters > div {
        flex: 1 1 160px;
        min-width: 160px;
    }

.shu-invoice-amount {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

/* ============ INVOICE DETAIL (InvoiceDetail.aspx, Step S62) ============ */
/* "Download" uses the browser's own window.print() (same reasoning as
   PaymentConfirm.aspx, S53 — no server-side PDF generation exists anywhere
   in this codebase yet). Enterprise.master uses a sidenav layout
   (.shu-sidenav), unlike Customer.master's bottom-nav, so this print rule
   hides that instead of .shu-bottom-nav. */

.shu-invoice-page {
    padding-bottom: 24px;
}

.shu-invoice-totals {
    text-align: right;
    margin-top: 12px;
}

@media print {
    .shu-topbar, .shu-sidenav, .shu-invoice-noprint {
        display: none !important;
    }
}

/* ============ SMART BINS (B2B/Bins.aspx, Step S63) ============ */
/* First circular-gauge UI element in the project — a plain CSS
   conic-gradient ring (--fill-pct/--gauge-color custom properties set
   per-card in code-behind), no charting library or SVG needed, same "no
   charting library needed" posture as RateDetail.aspx's inline-SVG
   sparkline (S51) and Sustainability.aspx's CSS bar chart (S55) — just an
   even simpler shape here (a ring, not a path). Color bands per Blueprint
   M11: <60 green, 60-80 amber, >80 red. */

.shu-bin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--shu-gutter);
}

.shu-bin-card {
    background-color: var(--shu-surface);
    border: 1px solid var(--shu-border);
    border-radius: var(--shu-radius-card);
    padding: var(--shu-gutter);
    text-align: center;
}

.shu-bin-gauge {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    margin: 0 auto 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: conic-gradient(var(--gauge-color, var(--shu-border)) calc(var(--fill-pct, 0) * 1%), var(--shu-border) 0);
}

.shu-bin-gauge-inner {
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background-color: var(--shu-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    color: var(--shu-text-dark);
}

.shu-bin-code {
    font-weight: 600;
    color: var(--shu-text-dark);
    margin-top: 4px;
}

.shu-bin-meta {
    font-size: 12px;
    color: var(--shu-text-muted);
}

/* ============ ESG DASHBOARD (B2B/EsgDashboard.aspx, Step S65) ============ */
/* Tonnage-by-material breakdown as a plain hand-built proportional-bar
   list — same "no charting library" posture as RateDetail.aspx's sparkline
   (S51), Sustainability.aspx's bar chart (S55) and Bins.aspx's gauge ring
   (S63). .shu-impact-* (KPI cards) is reused as-is from Sustainability.aspx
   (S55), not redefined here. Export reuses window.print(), same as
   InvoiceDetail.aspx (S62) — Enterprise.master's sidenav layout means this
   print rule hides .shu-sidenav, matching that file's own rule exactly. */

.shu-esg-material-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.shu-esg-material-label {
    width: 140px;
    flex-shrink: 0;
    font-size: 14px;
    color: var(--shu-text-dark);
}

.shu-esg-material-track {
    flex: 1;
    height: 10px;
    background-color: var(--shu-border);
    border-radius: 6px;
    overflow: hidden;
}

.shu-esg-material-fill {
    height: 100%;
    background-color: var(--shu-primary);
    border-radius: 6px;
}

.shu-esg-material-value {
    width: 80px;
    flex-shrink: 0;
    text-align: right;
    font-size: 13px;
    color: var(--shu-text-muted);
}

@media print {
    .shu-topbar, .shu-sidenav, .shu-esg-noprint {
        display: none !important;
    }
}

/* ============ OUTBOUND DISPATCH (Agg/Dispatch.aspx, Step S68) ============ */
/* .shu-manifest-net-readout is the first-ever live (no-postback) jQuery
   calculation in this codebase — Blueprint's own "live net-weight calc
   (jQuery)" requirement — just a plain readonly-looking box, no special
   widget. Print reuses InvoiceDetail.aspx's own window.print() + noprint
   convention (Step S62), renamed for this page. */

.shu-manifest-net-readout {
    font-weight: 600;
    color: var(--shu-text-dark);
    background-color: var(--shu-surface-alt, var(--shu-border));
}

.shu-manifest-page {
    padding-bottom: 24px;
}

@media print {
    .shu-topbar, .shu-sidenav, .shu-manifest-noprint {
        display: none !important;
    }
}

/* ============ COLLECTION CENTER INVENTORY (Agg/Inventory.aspx,
   Admin/HubInventory.aspx, Step S69) ============ */
/* Low/High stock badges — Blueprint's own "low/high indicators" UI note
   gives no thresholds, so these are documented, easily-tunable constants
   in code-behind (LowStockThresholdKg/HighStockThresholdKg), same posture
   as the 2% manifest-variance tolerance (Q-34, Step S66/S68). */

.shu-stock-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

.shu-stock-low {
    background-color: var(--shu-error);
    color: #fff;
}

.shu-stock-high {
    background-color: var(--shu-accent-orange);
    color: #fff;
}

.shu-stock-normal {
    background-color: var(--shu-border);
    color: var(--shu-text-dark);
}

/* ============ REVENUE & SETTLEMENT (Agg/Settlement.aspx, Step S70) ============ */
/* KPI cards reuse .shu-impact-* (Sustainability.aspx, S55) and the daily
   trend reuses .shu-bar-chart/-col/-track/-fill/-label (same file) as-is
   — no new chart CSS needed. Export reuses window.print(), same
   .shu-*-noprint convention as InvoiceDetail.aspx (S62)/EsgDashboard.aspx
   (S65)/Dispatch.aspx (S68). */

@media print {
    .shu-topbar, .shu-sidenav, .shu-settlement-noprint {
        display: none !important;
    }
}

/* ============ AGENT EARNINGS (Agent/Earnings.aspx, Step S71) ============ */
/* Today/Week/Month cards — a 3-up variant of the .shu-impact-card look
   (Sustainability.aspx, S55); the daily trend below reuses .shu-bar-chart
   as-is, no new chart CSS. */

.shu-earnings-period-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--shu-gutter);
}

.shu-earnings-period-card {
    background-color: var(--shu-surface);
    border: 1px solid var(--shu-border);
    border-radius: var(--shu-radius-card);
    padding: var(--shu-gutter);
    text-align: center;
}

.shu-earnings-period-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--shu-text-muted);
    margin-bottom: 4px;
}

/* ============ AGGREGATOR SPOKE OVERVIEW (Agg/Dashboard.aspx, Step S72) ============ */
/* Split screen (FR-059) — live map card + hourly tonnage chart card,
   side by side on wide screens, stacking naturally on narrow ones (grid
   auto-fit, no separate media query needed — same technique as
   .shu-bin-grid, S63). Multi-marker Google Map reuses Track.aspx's own
   GoogleMapsApiKey graceful-degradation pattern (S53); the bar chart
   reuses .shu-bar-chart as-is (S55). */

.shu-spoke-split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--shu-gutter);
    align-items: start;
}

/* ============ EXECUTIVE DASHBOARD (Admin/Executive.aspx, Step S74) ============ */
/* Trend sparklines reuse RateDetail.aspx's own inline-SVG polyline
   technique (S51) with a caller-supplied stroke color. The material-mix
   pie is a plain CSS conic-gradient circle — a multi-segment generalization
   of Bins.aspx's single-color gauge ring (S63) — still no charting
   library. Region league table uses a proportional-bar row, same
   technique as B2B/EsgDashboard.aspx's material breakdown (S65). */

.shu-exec-growth {
    font-size: 12px;
    margin-top: 4px;
}

.shu-exec-growth-up {
    color: var(--shu-primary);
    font-weight: 600;
}

.shu-exec-growth-down {
    color: var(--shu-error);
    font-weight: 600;
}

.shu-exec-region-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.shu-exec-region-label {
    width: 140px;
    flex-shrink: 0;
    font-size: 14px;
    color: var(--shu-text-dark);
}

.shu-exec-region-track {
    flex: 1;
    height: 10px;
    background-color: var(--shu-border);
    border-radius: 6px;
    overflow: hidden;
}

.shu-exec-region-fill {
    height: 100%;
    background-color: var(--shu-primary);
    border-radius: 6px;
}

.shu-exec-region-value {
    width: 90px;
    flex-shrink: 0;
    text-align: right;
    font-size: 13px;
    color: var(--shu-text-muted);
}

.shu-exec-pie-wrap {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.shu-exec-pie {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    flex-shrink: 0;
}

.shu-exec-pie-legend {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 13px;
    color: var(--shu-text-dark);
}

.shu-exec-pie-legend li {
    margin-bottom: 6px;
    display: flex;
    align-items: center;
}

.shu-exec-pie-swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 8px;
}

@media print {
    .shu-topbar, .shu-sidenav, .shu-exec-noprint {
        display: none !important;
    }
}

/* ============ RESPONSIVE (NFR-001: mobile 390x844 baseline) ============ */

@media (max-width: 600px) {
    .shu-layout {
        flex-direction: column;
    }

    .shu-sidenav {
        width: 100%;
        display: flex;
        overflow-x: auto;
        border-right: none;
        border-bottom: 1px solid var(--shu-border);
        padding: 8px;
    }

        .shu-sidenav a {
            white-space: nowrap;
            border-left: none;
            border-bottom: 3px solid transparent;
        }

            .shu-sidenav a:hover,
            .shu-sidenav a.active {
                border-left-color: transparent;
                border-bottom-color: var(--shu-primary);
            }

    .shu-kpi-grid {
        grid-template-columns: 1fr;
    }
}