﻿/* RS Consolidated Stylesheet (Final)
   — Deduplicated and organized
   — Conflicts resolved by keeping the *latest* definition
   — Minor fixes (typos/stray text) and syntax corrections
   — Generated by MattGPT on 2025-09-05
   — Updated to make feedback text bolder and larger
*/
/* =====================================
   CSS Variables
===================================== */
:root {
    --rs-gap: .45rem;
    --rs-gap-sm: .3rem;
    --rs-card-radius: 12px;
    --rs-shadow-3d: 0 10px 20px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.25);
    --rs-shadow-2d: 0 4px 12px rgba(0,0,0,.25);
    --rs-surface-1: #1f1f1f;
    --rs-surface-2: #242424;
    --rs-surface-3: #2a2a2a;
    --rs-bluegrey: #7a8a99;
    --rs-ltsteel: #b0c4de;
    --rs-dksteel: #2b3f56;
    --rs-row1-h: 200px;
    --rs-green: #2e7d32;
    --rs-green-ok: #2e7d32;
    --rs-red-bad: #b71c1c;
    --rs-dkyellow: #8b6b00;
    --rs-dkblue: #0b3a6b;
    --rs-darkgrey: #222;
    --rs-darkergrey: #1b1b1b;
    --rs-label-col-pct: 33.333%;
    --rs-sep-left-gap: .5rem;
    --rs-sep-color: rgba(255,255,255,.13);
    --rs-metrics-bg: #0c3f20;
    --rs-chip-green: #147a3d;
    --rs-chip-darkyellow: #7a6a00;
    --rs-chip-darkblue: #0b3a7a;
    --rs-text-inverse: #ffffff;
    --rs-item-label-w: 11rem;
    --rs-flag-red: #c62828;
    --m3-surface: #1c1c1c;
    --m3-surface-variant: #242424;
    --m3-outline: rgba(255,255,255,.06);
    --m3-primary: #8ad6ff;
    --m3-on-primary: #0b2d45;
    --m3-shadow-1: 0 1px 2px rgba(0,0,0,.40), 0 1px 1px rgba(255,255,255,.04) inset;
    --m3-shadow-2: 0 4px 12px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.04) inset;
    --m3-shadow-3: 0 12px 28px rgba(0,0,0,.55), 0 2px 0 rgba(255,255,255,.05) inset;
    /* Inputs */
    --rs-teal: #26a69a;
    --rs-aqua: #4dd0e1;
    --rs-input-bg: #323232;
    --rs-input-fg: #b0c4de;
}
/* =====================================
   Utilities & Text
===================================== */
.rs-highlight {
    color: #2196f3 !important;
}

.rs-hotpink {
    color: hotpink !important;
}

.rs-dev-toggle {
    margin-left: .5rem;
}

.rs-text-center {
    text-align: center;
}

.rs-text-warn {
    color: var(--rs-dkyellow);
    font-size: .85rem;
    margin-top: .25rem;
}
/* =====================================
   App Shell & Cards
===================================== */
.rs-app-shell {
    position: relative;
    background: linear-gradient(180deg,#171717 0%, #141414 60%, #111 100%);
}

    .rs-app-shell::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background-image: radial-gradient(rgba(255,255,255,.03) 1px, transparent 1px);
        background-size: 3px 3px;
        opacity: .25;
    }

.rs-card {
    background: var(--m3-surface-variant) !important;
    border: 1px solid var(--m3-outline);
    box-shadow: var(--m3-shadow-2);
}

.rs-header-3d, .rs-toolbar-3d {
    background: linear-gradient(180deg,#1f1f1f,#1a1a1a);
    box-shadow: var(--m3-shadow-3);
}
/* =====================================
   Header
===================================== */
.rs-header-card {
    position: relative;
    overflow: hidden;
    border-radius: 0;
    padding: 0;
    border: 1px solid rgba(255,255,255,.06);
    box-shadow: 0 12px 24px rgba(0,0,0,.28), inset 0 -1px 0 rgba(255,255,255,.06);
    background: linear-gradient(180deg,#1f1f1f,#1a1a1a);
    min-height: 44px !important;
}

.rs-header-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: stretch;
    min-height: 64px;
}

.rs-header-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .25rem .5rem;
    min-height: 44px;
}

.rs-header-left {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: var(--rs-surface-2);
    overflow: hidden;
}

.rs-header-left-inner {
    height: 100%;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .65rem;
    width: 100%;
}

.rs-header-right {
    position: relative;
    padding: 0;
    overflow: hidden;
}

.rs-title {
    font-size: 1.5rem;
    white-space: nowrap;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 1px 0 rgba(0,0,0,.35);
    margin-right: .5rem;
}

.rs-title-teal {
    color: #00acc1 !important;
    display: flex;
    align-items: center;
    font-weight: 800;
    text-shadow: 0 1px 0 rgba(0,0,0,.35);
}

.rs-brand {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .75rem;
}

.rs-brand-logo {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,.45);
}
/* Feedback banner (status slab) */
.rs-feedback-banner {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--rs-surface-2);
}

    .rs-feedback-banner.success {
        background: linear-gradient(135deg, #0f6a1f, #12a150);
    }

    .rs-feedback-banner.warning {
        background: linear-gradient(135deg, #7a5e00, #c6a400);
    }

    .rs-feedback-banner.danger {
        background: linear-gradient(135deg, #7a1a1a, #c62828);
    }

    .rs-feedback-banner.info {
        background: linear-gradient(135deg, #1e3a5f, #2a63a5);
    }
/* Headers (status slab container) */
.rs-status-slab {
    position: relative;
    display: flex;
    align-items: center;
    padding: .5rem .75rem;
    border-left: 1px solid rgba(255,255,255,.06);
}

.is-success .rs-status-slab {
    background: linear-gradient(180deg,#153821,#0e2a19);
}

.is-danger .rs-status-slab {
    background: linear-gradient(180deg,#3a1a1a,#2a1414);
}

.is-warning .rs-status-slab {
    background: linear-gradient(180deg,#3a320e,#2c250b);
}

.is-info .rs-status-slab {
    background: linear-gradient(180deg,#14263a,#101d2d);
}
/* Mode pill */
.rs-mode-pill {
    margin-left: auto;
    height: 40px;
    min-width: 25px;
    width: 100%;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .25rem .6rem;
    box-shadow: var(--m3-shadow-2);
    border: 1px solid var(--m3-outline);
}

    .rs-mode-pill .rs-mode-icon {
        width: 18px;
        height: 18px;
        border-radius: 50%;
        box-shadow: inset 0 0 0 2px rgba(0,0,0,.25);
    }

    .rs-mode-pill .rs-mode-text {
        font-weight: 800;
        white-space: nowrap;
        font-size: .8rem;
        letter-spacing: .02em;
    }

    .rs-mode-pill.is-prod {
        background: #b0c4de;
        color: #0b2d45;
    }

        .rs-mode-pill.is-prod .rs-mode-icon {
            background: #4c7ea3;
        }

    .rs-mode-pill.is-dev {
        background: #ffb26b;
        color: #4a2600;
    }

        .rs-mode-pill.is-dev .rs-mode-icon {
            background: #ff8a1e;
        }

.rs-mode-switch {
    margin-left: auto;
}
/* =====================================
   Client-specific card accents
===================================== */
.rs-card-client {
    background: #2a2230 !important;
    border: 1px solid rgba(255,255,255,.06);
    color: #c9b8d6;
}

    .rs-card-client .rs-sec-notes {
        background: #392a46 !important;
        color: #e8ddf4 !important;
    }

.rs-card-clover {
    background: #1f2a21 !important;
    border: 1px solid rgba(255,255,255,.06);
    color: #cfe5cf;
}

    .rs-card-clover .rs-sec-notes {
        background: #27422b !important;
        color: #e8f4ea !important;
    }
/* =====================================
   Buttons & Inputs
===================================== */
.rz-button, .rz-button .rz-button-text {
    font-weight: 800;
}

    .rz-button:active {
        transform: translateY(1px);
    }
/* Primary pill button */
.rs-btn-oval {
    border-radius: 9999px !important;
    background: #b3e5ff !important;
    color: #0d47a1 !important;
    border: 1px solid #6ec1ff !important;
    box-shadow: var(--m3-shadow-2);
}

.rs-btn-neutral {
    background: #d9d9d9 !important;
    color: #4a4a4a !important;
    border-radius: 10px !important;
    border: 1px solid #b8b8b8 !important;
}

    .rs-btn-neutral:hover {
        filter: brightness(0.98);
    }

.rs-btn-flag {
    width: 100%;
    border-radius: 9999px !important;
    background-color: var(--rs-flag-red) !important;
    color: #fff !important;
}

.rs-btn-compact.rz-button {
    padding: .15rem .4rem !important;
    height: 26px !important;
    min-height: 26px !important;
    min-width: 64px !important;
    font-size: .7rem !important;
    line-height: 1 !important;
    border-radius: 8px !important;
}

.rs-pill-btn {
    border-radius: 9999px !important;
}

.rs-btn-wide {
    width: 100%;
    max-width: 200px;
}
/* Code buttons (Radzen) */
.rs-code-btn.rz-button {
    border-radius: 6px !important;
    padding: .25rem .5rem !important;
    margin: 0 !important;
    width: 100%;
    font-size: .75rem !important;
    font-weight: 800;
    white-space: normal !important;
    word-break: break-word !important;
    text-align: center;
    flex: 0 1 auto;
    max-width: 100%;
    box-shadow: var(--m3-shadow-1);
}
/* Inputs & focus */
.rz-inputtext:focus, .rz-dropdown:focus, .rz-multiselect:focus, .rz-autocomplete:focus {
    box-shadow: none !important;
    outline: 2px solid #5aa7ff33 !important;
    border-color: #5aa7ff !important;
}

.rs-dd, .rs-dd-wide, .rs-dd-block {
    width: 100%;
}

.rs-dd {
    background: var(--rs-darkgrey);
    color: var(--rs-ltsteel);
    border: 1px solid #3b3b3b;
    border-radius: 10px;
}

    .rs-dd .rz-inputtext, .rs-dd .rz-dropdown {
        background: var(--rs-darkgrey);
        color: var(--rs-ltsteel);
    }

.rs-input, .rs-textarea-flex {
    background: var(--rs-input-bg) !important;
    color: var(--rs-input-fg) !important;
    border: 1px solid #3b3b3b !important;
    border-radius: 10px !important;
}

.rs-textarea-flex {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    height: 100%;
    resize: none;
    overflow: auto;
}
/* Part rows & qty */
.rs-part-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    flex: 0 1 auto;
    margin-bottom: .25rem;
}

    .rs-part-row .rs-code-btn {
        flex: 1 1 auto;
    }

.rs-part-qty, .rs-part-qty.rz-numeric {
    width: 60px;
    font-size: .75rem;
}
/* Match dropdown height for station actions */
.rs-station-row {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: .5rem;
    align-items: center;
}

.rs-station-dd .rz-dropdown, .rs-station-dd .rz-inputtext {
    height: 40px;
}
/* Small, equal-sized station buttons */
.rs-station-btn {
    min-width: 32px !important;
    max-width: 32px !important;
    height: 32px !important;
    font-size: .8rem !important;
    font-weight: 700 !important;
    padding: 0 .5rem !important;
    text-align: center;
}
/* =====================================
   Feedback & Alerts
===================================== */
.rs-feedback-wrap {
    padding: .35rem;
}

.rs-feedback-shell {
    backdrop-filter: blur(6px);
    background: rgba(18,18,18,.68);
    border: 1px solid var(--m3-outline);
    border-radius: 12px;
    box-shadow: var(--m3-shadow-2);
    padding: .35rem .6rem;
}

.rs-feedback .rz-alert {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    margin: 0;
    padding: .25rem 0;
}

    .rs-feedback .rz-alert .rz-alert-message {
        font-weight: 900; /* Bolder */
        font-size: 1.25rem; /* Larger */
        letter-spacing: .2px;
    }
/* Feedback variants */
.rs-feedback-success .rs-feedback-shell {
    background: rgba(24,46,28,.72);
}

.rs-feedback-danger .rs-feedback-shell {
    background: rgba(54,22,22,.72);
}

.rs-feedback-warning .rs-feedback-shell {
    background: rgba(66,54,10,.75);
}

.rs-feedback-info .rs-feedback-shell {
    background: rgba(20,32,48,.75);
}
/* Fixed toolbars */
.rs-toolbar-footer {
    position: fixed;
    left: 0;
    bottom: 1rem;
    width: 25vw;
    padding: 0 .75rem;
    z-index: 1000;
}

.rs-btn-flag-fixed {
    width: 100%;
}

.rs-raiseflag-fixed {
    position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    z-index: 1000;
}
/* Inline feedback surface (status bar) */
.rs-feedback-surface {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .35rem .5rem;
    background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.12)), var(--rs-sev-bg);
    color: var(--rs-sev-text);
    box-shadow: inset 0 8px 16px rgba(255,255,255,.04), inset 0 -8px 16px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.3);
    border-left: 4px solid var(--rs-sev-border);
    width: 100%;
}

.feedback-bar.rz-alert {
    background: transparent !important;
    border: none !important;
    padding: .15rem 0 !important;
    color: var(--rs-sev-text) !important;
    font-weight: 900; /* Bolder */
    font-size: 1.25rem; /* Larger */
    text-shadow: 0 1px 0 rgba(0,0,0,.35);
}

.feedback-bar {
    pointer-events: none;
}

    .feedback-bar .feedback-text {
        font-size: 1.25rem; /* Larger */
        font-weight: 900; /* Bolder */
        letter-spacing: .2px;
    }

.feedback-bar-static {
    width: 100%;
    padding: .5rem .75rem;
    font-size: 1.25rem; /* Larger */
    font-weight: 900; /* Bolder */
    text-align: center;
    user-select: text;
}
/* =====================================
   Log & Severity Chips
===================================== */
.rs-log {
    background: var(--rs-surface-3) !important;
    font-size: .78rem;
    line-height: 1.1rem;
    padding: .4rem;
    overflow: auto;
    height: 100%;
    border-radius: 10px;
    box-shadow: 0 6px 14px rgba(0,0,0,.35) inset;
}

.rs-log-entry {
    border-bottom: 1px solid #3a3a3a;
    padding: .2rem 0;
}

    .rs-log-entry:last-child {
        border-bottom: none;
    }

.rs-log-line1 {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .25rem;
}

.rs-log-chip {
    background: var(--rs-sev-border);
    color: #0a0a0a;
    font-weight: 800;
    font-size: .70rem;
    padding: .15rem .45rem;
    border-radius: 9999px;
    letter-spacing: .02em;
}

.rs-log-time {
    opacity: .85;
    font-size: .78rem;
    min-width: 56px;
}

.rs-log-summary {
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rs-log-detail {
    font-size: .82rem;
    opacity: .95;
    line-height: 1.2rem;
}
/* Severity palettes */
.rs-sev-success {
    --rs-sev-bg: #1b5e20;
    --rs-sev-text: #fff;
    --rs-sev-border: #2ecc71;
}

.rs-sev-warning {
    --rs-sev-bg: #7a5e00;
    --rs-sev-text: #fff;
    --rs-sev-border: #f1c40f;
}

.rs-sev-danger {
    --rs-sev-bg: #7f1d1d;
    --rs-sev-text: #fff;
    --rs-sev-border: #ff6b6b;
}

.rs-sev-info {
    --rs-sev-bg: #1e3a5f;
    --rs-sev-text: #fff;
    --rs-sev-border: #4aa3ff;
}
/* =====================================
   State Chips & Workflow Labels
===================================== */
.rs-statebar {
    display: flex;
    justify-content: flex-end;
    padding: .25rem .5rem .5rem;
}

.rs-state-chip {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .65rem;
    border-radius: 999px;
    font-weight: 800;
    letter-spacing: .02em;
    color: #eaf1ff;
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 6px 16px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.25);
    width: 100%;
}

    .rs-state-chip .dot {
        width: .6rem;
        height: .6rem;
        border-radius: 50%;
        box-shadow: 0 0 8px rgba(0,0,0,.35), inset 0 0 0 2px rgba(0,0,0,.25);
    }

    .rs-state-chip.is-notstarted {
        background-color: #303030;
    }

    .rs-state-chip.is-checkin {
        background-color: #124f2f;
    }

    .rs-state-chip.is-readyclose {
        background-color: #654d0a;
    }

    .rs-state-chip.is-produced {
        background-color: #123b6b;
    }

    .rs-state-chip.is-voided {
        background-color: #6b1d1d;
    }

    .rs-state-chip.is-notstarted .dot {
        background: #9aa3ad;
    }

    .rs-state-chip.is-checkin .dot {
        background: #2ecc71;
    }

    .rs-state-chip.is-readyclose .dot {
        background: #f1c40f;
    }

    .rs-state-chip.is-produced .dot {
        background: #4aa3ff;
    }

    .rs-state-chip.is-voided .dot,
    .rs-state-chip.is-diverted .dot {
        background: #ff6b6b;
    }
/* Workflow label badges */
.rs-workflow-label {
    background: #0b1a0b;
    border: 1px solid #123012;
}

    .rs-workflow-label.is-notstarted {
        background-color: #303030;
    }

    .rs-workflow-label.is-checkin {
        background-color: #124f2f;
    }

    .rs-workflow-label.is-readyclose {
        background-color: #654d0a;
    }

    .rs-workflow-label.is-produced {
        background-color: #123b6b;
    }

    .rs-workflow-label.is-voided {
        background-color: #6b1d1d;
    }

    .rs-workflow-label .dot {
        width: .6rem;
        height: .6rem;
        border-radius: 50%;
    }

    .rs-workflow-label.is-notstarted .dot {
        background: #9aa3ad;
    }

    .rs-workflow-label.is-checkin .dot {
        background: #2ecc71;
    }

    .rs-workflow-label.is-readyclose .dot {
        background: #f1c40f;
    }

    .rs-workflow-label.is-produced .dot {
        background: #4aa3ff;
    }

    .rs-workflow-label.is-voided .dot {
        background: #ff6b6b;
    }
/* =====================================
   Layout: Columns, Grids, Sections
===================================== */
.rs-col-grid {
    display: grid;
    grid-template-rows: auto 1fr;
    row-gap: var(--rs-gap);
    min-height: 0;
    height: 100%;
}

.rs-gap-none {
    row-gap: 0 !important;
}
/* 3-col main grid */
.rs-main-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto 2fr 1fr 1fr;
    gap: var(--rs-gap);
    height: 100%;
    min-height: 0;
}

.rs-cell {
    min-height: 0;
}

.r-top {
    grid-row: 1;
}

.r-a {
    grid-row: 2;
}

.r-b {
    grid-row: 3;
}

.r-c {
    grid-row: 4;
}

.rs-c1 {
    grid-column: 1;
}

.rs-c2 {
    grid-column: 2;
}

.rs-c3 {
    grid-column: 3;
}

.r-bc {
    grid-row: 3 / span 2;
}

.rs-span-3 {
    grid-row: 2 / span 3;
}

.rs-span-2 {
    grid-row: 1 / span 2;
}
/* Stacked tool panel */
.rs-toolbar-wrapper {
    display: grid;
    grid-template-rows: auto 2fr 1fr 1fr;
    gap: var(--rs-gap);
    height: 100%;
    min-height: 0;
}

.rs-tc-top {
    grid-row: 1;
    padding-top: 1rem;
}

.rs-tc-a {
    grid-row: 2;
    display: flex;
    flex-direction: column;
    gap: var(--rs-gap-sm);
    min-height: 0;
}

.rs-tc-bc {
    grid-row: 3 / span 2;
    min-height: 0;
    display: flex;
}
/* Sidebar/body layout (Radzen) */
.rz-layout {
    height: 100vh;
    overflow: hidden;
}

.rz-sidebar {
    width: 25vw;
    height: 100%;
    overflow: hidden;
}

.rz-body {
    width: 75vw;
    height: 100%;
    overflow: hidden;
}

.rz-row {
    height: 100%;
}

.rz-column {
    display: flex;
    align-items: center;
    justify-content: center;
}

.rz-text {
    color: var(--m3-surface-variant);
}

.rz-text-danger {
    color: var(--rs-red-bad);
}
/* Split panes */
.rs-toolbar-stack {
    display: flex;
    flex-direction: column;
    gap: var(--rs-gap);
    min-height: 0;
    height: 100%;
    padding-bottom: 4rem;
}

.rs-split-vertical {
    display: flex;
    flex-direction: column;
    gap: var(--rs-gap);
    flex: 1 1 auto;
    min-height: 0;
}

.rs-split-50 > .rs-half {
    flex: 1 1 0;
    min-height: 0;
}
/* =====================================
   Scan / Workflow / Item Details
===================================== */
.rs-scan-wrap {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.rs-scan-top, .rs-workflow-top {
    height: auto !important;
    flex: 0 0 auto;
    margin: 0;
    padding: .5rem .75rem;
}

    .rs-scan-top.rs-slim {
        padding-block: .5rem;
    }

.rs-align-with-scan .rz-form-field {
    margin-top: 0;
}

.rs-item-card, .rs-card-fill {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}

.rs-item-body, .rs-fill-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

.rs-item-details-onecol {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

    .rs-item-details-onecol .rs-item-label {
        opacity: .75;
        font-weight: 600;
    }

    .rs-item-details-onecol .rs-item-value {
        font-weight: 700;
    }

.rs-item-2col {
    display: grid;
    grid-template-columns: var(--rs-item-label-w) 1fr;
    grid-auto-rows: minmax(1.6rem,auto);
    column-gap: .125rem;
    row-gap: .25rem;
    align-items: start;
    min-width: 0;
}

.rs-item-label {
    color: var(--rs-bluegrey);
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
}

.rs-item-value {
    color: var(--rs-ltsteel);
    font-weight: 800;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rs-item-wrap {
    white-space: normal;
    overflow: visible;
    text-overflow: initial;
}
/* Section headers & notes */
.rs-sec-header, .rs-sec-item, .rs-sec-notes {
    font-size: .85rem !important;
    line-height: 1rem !important;
    padding: .25rem .5rem !important;
}

.rs-sec-header {
    background: #284b7a;
    color: #ffffff;
    text-align: center;
    border-radius: 8px;
    margin: 0 0 .25rem;
    font-weight: 700;
}

.rs-sec-item {
    background: #203448;
    color: #b7d4ff;
    font-weight: 700;
    text-align: center;
    border-radius: 8px;
    margin: 0 0 .25rem;
}

.rs-sec-notes {
    background: var(--rs-darkgrey);
    color: #e0e0e0;
    font-weight: 700;
    text-align: center;
    border-radius: 8px;
    padding: .35rem .5rem;
    margin-bottom: .25rem;
}
/* Visual section variants */
.rs-sec-header--visual {
    background: #1b3d66 !important;
    color: #eaf2ff !important;
}

.rs-sec-header--log {
    background: #123458 !important;
    color: #dbe9ff !important;
}
/* Putaway banner */
.rs-putaway {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    border-radius: 10px;
    padding: .5rem .75rem;
    background: #3a3a3a;
    color: #aaaaaa;
    border: 1px solid #4a4a4a;
    white-space: nowrap;
    gap: .75rem;
    margin-top: .35rem;
}

    .rs-putaway .rs-putaway-title {
        color: #cccccc;
        font-weight: 700;
        opacity: .85;
        margin-right: .5rem;
    }

    .rs-putaway .rs-putaway-value {
        margin-left: auto;
        color: #dddddd;
    }
/* Workflow (compact chip lists) */
.rs-wf {
    margin-top: .25rem;
    border-radius: 10px;
    padding: .5rem .75rem;
    background: #0f2e0f;
    color: #888;
    border: 1px solid #1a461a;
    font-size: .95rem;
}

.rs-wf-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--rs-gap-sm);
}

.rs-btn-wf {
    width: 100%;
}

.rs-chip-full {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
/* Separator */
.rs-row-tight {
    align-items: center !important;
}

    .rs-row-tight .rz-column {
        padding-top: .1rem;
        padding-bottom: .1rem;
    }

.rs-sep {
    border-top: 1px solid var(--rs-sep-color);
    margin: .35rem 0;
    height: 0;
    opacity: .9;
}

.rs-sep-indent {
    margin-left: calc(var(--rs-label-col-pct) + var(--rs-sep-left-gap));
}
/* =====================================
   Service Columns & Bodies
===================================== */
.rs-service-column, .rs-service-col, .rs-service-card, .rs-card-repair, .rs-card-fail, .rs-card-parts, .rs-card-finalact {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
}

.rs-card-finalact, .rs-card-repair, .rs-card-fail, .rs-card-parts {
    flex: 0 0 auto !important;
    margin-bottom: .35rem;
    min-height: 40px;
    display: flex;
    flex-direction: column;
}

.rs-service-card {
    overflow: auto !important;
}

/* Let the whole service column grow by content */
.rs-service-col {
    height: auto !important;
}
/* Each section grows by content; no internal scrolling */
.rs-card-finalact, .rs-card-repair, .rs-card-fail, .rs-card-parts {
    flex: 0 0 auto !important;
    margin-bottom: .35rem;
    display: flex;
    flex-direction: column;
}
/* Bodies show all items and wrap; no scrollbars */
.rs-service-body {
    flex: 0 0 auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    padding: .25rem;
    width: 100%;
}
/* Row with three columns proportionally */
.rs-service-row {
    display: flex;
    gap: var(--rs-gap);
    height: 100%;
}

.rs-service-repair {
    flex: 2 1 0;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.rs-service-fail {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.rs-service-parts {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
/* Empty states */
.rs-service-empty {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed #555;
    color: #aaa;
    border-radius: 8px;
    opacity: .85;
}
/* =====================================
   Media Pane
===================================== */
.rs-media-card {
    display: flex;
    flex-direction: column;
    gap: var(--rs-gap-sm);
    min-height: 0;
    flex: 1 1 0;
}

.rs-media-col {
    display: flex;
    flex-direction: column;
    gap: var(--rs-gap-sm);
    height: 100%;
}

.rs-media-wrap {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    overflow: hidden;
    background: #2b2b2b;
}

.rs-media-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    background: #3b3b3b;
    color: #eaf7ff;
    border: 1px solid #4a4a4a;
    border-radius: 8px;
    padding: .35rem;
}

    .rs-media-list .rz-listbox {
        flex: 1 1 auto;
        min-height: 0;
        width: 100%;
        height: 100%;
    }

.rs-media-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: .9;
    height: 100%;
    color: #e0e0e0;
}

.rs-media-img, .rs-media-video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.rs-media-link {
    color: #9ad9ff;
    text-decoration: underline;
}
/* Capture row */
.rs-capture-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--rs-gap-sm);
}

.rs-capture-btn {
    flex: 1 1 0;
}
/* =====================================
   Metrics
===================================== */
.rs-metrics-area {
    flex: 0 0 auto;
    margin-top: 0 !important;
}

.rs-metrics-card {
    background: var(--rs-metrics-bg);
    color: var(--rs-text-inverse);
    padding: .5rem;
}

.rs-metrics-row {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: var(--rs-gap-sm);
    width: 100%;
}

.rs-metric-box {
    flex: 1 1 0;
    height: 64px !important;
    min-width: 75px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: .25rem;
    border-radius: 6px;
    text-align: center;
    color: var(--rs-text-inverse);
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rs-metric-icon {
    font-size: 1rem;
    margin-bottom: .1rem;
}

.rs-metric-value {
    font-size: .95rem;
    font-weight: 700;
}

.rs-metric-label {
    font-size: .72rem;
    opacity: .9;
    font-weight: 600;
    letter-spacing: .02em;
}

.rs-chip-green {
    background: var(--rs-chip-green);
}

.rs-chip-darkyellow {
    background: var(--rs-chip-darkyellow);
}

.rs-chip-darkblue {
    background: var(--rs-chip-darkblue);
}

.rs-metrics-loading {
    font-size: .85rem;
    opacity: .85;
    text-align: center;
    padding: .5rem;
}
/* =====================================
   Login
===================================== */
.rs-login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    width: 100vw;
    background: var(--m3-surface);
}

.rs-login {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    padding: 1rem;
}

.rs-login-inner {
    display: flex;
    flex-direction: column;
    gap: var(--rs-gap);
}
/* =====================================
   Misc
===================================== */
.rs-topcard.rs-topcard-slim {
    margin-bottom: .25rem;
}

.rs-note-flex {
    flex: 1 1 0;
    min-height: 0;
}

.rs-instructions {
    margin-top: .35rem;
}

    .rs-instructions .rz-text {
        color: #eaf7ff !important;
    }

.rs-instructions-text {
    color: #e8f0ff !important;
}

.rs-rz-column-right {
    text-align: right;
}

.rs-rz-stack {
    width: 100%;
}

.rs-finalact-body {
    max-height: 120px;
    overflow: auto;
}
/* Grid chip area */
.rs-grid-chiparea {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px,1fr));
    gap: var(--rs-gap-sm);
    width: 100%;
    grid-auto-flow: row dense;
}
/* Card variant */
.rs-card-item {
    background: #111923 !important;
    border: 1px solid rgba(255,255,255,.05);
    color: #857c8e;
    opacity: .9;
}
/* Labels & values accents */
.rs-label-aqua {
    color: var(--rs-aqua) !important;
}

.rs-value-aqua {
    color: #bdefff !important;
    font-weight: 800;
}
/* Inputs fill horizontally */
.rs-fill {
    width: 100% !important;
}

.rz-form-field .rs-input, .rz-form-field .rs-dd, .rz-form-field .rz-dropdown, .rz-form-field .rz-inputtext {
    width: 100%;
}

.rs-fill, .rs-dd-wide, .rs-dd-block {
    width: 100% !important;
}
/* Left-align dropdown selected text */
.rs-leftalign .rz-dropdown-label {
    justify-content: flex-start !important;
    align-items: center !important;
}
/* Visual container */
.rs-visual {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.rs-visual-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
}
/* =====================================
   Form Fields (stacked label above control)
===================================== */
.rs-form-col {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.rs-form-label {
    color: var(--rs-aqua);
    font-weight: 700;
    line-height: 1rem;
    font-size: .85rem;
}

.rs-form-value {
    color: #cfe8ff;
    font-weight: 800;
}
/* =====================================
   Toolbar Block (horizontal, right-aligned action)
===================================== */
.rs-toolbar-block {
    display: grid;
    grid-template-columns: auto .5fr .25fr .625fr .875fr .5fr;
    gap: 0.1rem;
    align-items: center;
}

.rs-toolbar-spacer {
    width: 1px;
}
/* =====================================
   Toolbar Block — Responsive collapses
===================================== */
.rs-toolbar-block > * {
    min-width: 0;
}

@media (max-width: 1024px) {
    .rs-toolbar-block {
        grid-template-columns: 1.5fr 1fr 1fr 1fr;
    }

    .rs-toolbar-spacer {
        display: none;
    }
}

@media (max-width: 768px) {
    .rs-toolbar-block {
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: auto;
        grid-auto-flow: row dense;
    }

        .rs-toolbar-block > *:first-child {
            grid-column: 1 / -1;
        }

        .rs-toolbar-block > *:last-child {
            grid-column: 2 / 3;
            justify-self: end;
        }
}
/* =====================================
   Service Columns & Bodies — Equalized override
===================================== */
.rs-service-column,
.rs-service-col {
    display: flex;
    flex-direction: column;
    gap: var(--rs-gap);
    height: 100% !important;
    min-height: 0;
}

.rs-card-finalact,
.rs-card-repair,
.rs-card-fail,
.rs-card-parts {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    display: flex;
    flex-direction: column;
    margin-bottom: 0 !important;
}

.rs-service-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: auto !important;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    padding: .25rem;
    width: 100%;
}
/* =====================================
   Dropdown exact-width variants
===================================== */
.rs-dd--facility .rz-dropdown {
    width: 2ch !important;
}

.rs-dd--line .rz-dropdown {
    width: 5ch !important;
}