/* ============================================================================
   Rhyfeel ERP — theme
   Plain CSS, loaded AFTER the Bootstrap CDN link. No Sass, no build step (D1).

   ── DIRECTION ──────────────────────────────────────────────────────────────
   This is a mill that sells nonwoven fabric by WEIGHT, METERAGE and GSM. The
   product is numbers, so the numbers carry the personality: everything is set
   in tabular figures with the unit as a quiet suffix, so a column of weights
   aligns to the digit and reads like a calibrated readout rather than prose.

   The signature is taken from the logo itself — the 2x2 magenta/indigo dot
   grid beside "rhyfeel". It marks the active nav item, the loading state and
   the empty state, so the shell is recognisably Rhyfeel's rather than a themed
   admin template.

   The old 250px saturated-indigo rail is gone: it fought the logo (which is
   indigo-on-white) and is the most dated thing a 2026 admin can wear. The shell
   is light and precise; indigo is spent on ACTIONS, where it carries meaning.

   ⚠ THE ONE RULE THAT CANNOT BE SIMPLIFIED AWAY:
   Bootstrap 5.3's `.btn-primary` is emitted by the button-variant() SASS MIXIN,
   which bakes literal hex into component-local vars. It NEVER reads
   --bs-primary, and with no Sass compile there is no $primary to override. So
   brand colour is applied TWICE: :root tokens AND component-local overrides.
   Setting only the tokens ships brand links next to Bootstrap-blue buttons.

   Palette sampled from assets/logo.jpg, checked for WCAG AA:
     indigo  #4F4BA6  7.27:1 on white  (white text on it: 7.27:1)   PASS
     magenta #E5108C  4.39:1 on white  -> decorative / large only
     magenta-dark #C40C77  5.73:1      -> when accent must carry text
     ⚠ magenta on indigo = 1.66:1 — UNREADABLE. Never text, only shapes.
   ============================================================================ */

/* ---- 1. Tokens ---------------------------------------------------------- */
:root {
    /* Brand */
    --rf-indigo: #4F4BA6;
    --rf-indigo-hover: #413E8A;
    --rf-indigo-active: #37346F;
    --rf-indigo-rgb: 79, 75, 166;
    --rf-indigo-tint: #F1F0FA;
    --rf-indigo-line: #DDD9F3;

    --rf-magenta: #E5108C;
    --rf-magenta-dark: #C40C77;
    --rf-magenta-rgb: 229, 16, 140;
    --rf-magenta-tint: #FDEFF7;

    /* Ink & surfaces — cool and precise, not cosy. No cream, no gradients. */
    --rf-ink: #16192B;
    --rf-ink-2: #454A63;
    --rf-ink-3: #767C93;
    --rf-ink-4: #A4A9BC;
    --rf-line: #E7E9F2;
    --rf-line-2: #F1F2F8;
    --rf-surface: #FFFFFF;
    --rf-canvas: #F6F7FB;

    --rf-ok: #0F7B4F;
    --rf-ok-tint: #E9F7F0;
    --rf-warn: #9A6700;
    --rf-warn-tint: #FFF8E5;
    --rf-bad: #B02A37;
    --rf-bad-tint: #FDF0F1;

    --rf-sidebar-w: 244px;
    --rf-header-h: 60px;
    --rf-radius: 10px;

    /* Depth: one soft shadow, used sparingly. Nothing floats without reason. */
    --rf-shadow: 0 1px 2px rgba(22, 25, 43, .04), 0 4px 16px rgba(22, 25, 43, .05);
    --rf-shadow-lift: 0 2px 6px rgba(22, 25, 43, .07), 0 12px 32px rgba(22, 25, 43, .09);

    /* Bootstrap tokens — necessary but NOT sufficient (see §2 below). */
    --bs-primary: #4F4BA6;
    --bs-primary-rgb: 79, 75, 166;
    --bs-link-color: #4F4BA6;
    --bs-link-color-rgb: 79, 75, 166;
    --bs-link-hover-color: #413E8A;
    --bs-link-hover-color-rgb: 65, 62, 138;
    --bs-body-color: #16192B;
    --bs-body-bg: #F6F7FB;
    --bs-border-color: #E7E9F2;
    --bs-border-radius: 10px;
    --bs-body-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---- 2. Type ------------------------------------------------------------
   System stack: zero webfont CDN, zero FOUT, and it is what precision looks
   like on a Windows mill PC. The personality is in the SETTING, not the face. */
body {
    font-family: var(--bs-body-font-family);
    font-size: .9rem;
    line-height: 1.5;
    color: var(--rf-ink);
    background: var(--rf-canvas);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .rf-h { letter-spacing: -.014em; color: var(--rf-ink); }

/* THE RULE: this product is measurements. Every figure is tabular so a column
   aligns to the digit, and lining so it sits on the baseline like a readout. */
.rf-num, .rf-figure, td.rf-num, th.rf-num, .rf-stat-value, dd, input[inputmode="decimal"], input[inputmode="numeric"] {
    font-variant-numeric: tabular-nums lining-nums;
    font-feature-settings: "tnum" 1, "lnum" 1;
}
.rf-num, td.rf-num, th.rf-num { text-align: right; }

.rf-mono {
    font-family: ui-monospace, "Cascadia Code", "SF Mono", Consolas, monospace;
    font-variant-ligatures: none;
}

/* Micro-label: the instrument-panel voice. Used for every field caption. */
.rf-label, .rf-eyebrow, .rf-nav-heading, .rf-stat-key, dt {
    font-size: .655rem;
    font-weight: 650;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--rf-ink-3);
}
.rf-eyebrow { color: var(--rf-magenta-dark); }

/* The unit is a suffix, never a peer of the number. */
.rf-unit {
    margin-left: .22em;
    font-size: .64em;
    font-weight: 500;
    letter-spacing: .01em;
    color: var(--rf-ink-4);
}

/* ---- 3. THE SIGNATURE: the four-dot mark --------------------------------
   Lifted from the logo. Marks what is live: the active nav item, a loading
   state, an empty state. It is a SHAPE, which is the only sanctioned use of
   magenta next to indigo (as text it would be 1.66:1). */
.rf-dots {
    display: inline-grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2px;
    width: 11px;
    height: 11px;
    flex: 0 0 auto;
}
.rf-dots i {
    display: block;
    border-radius: 50%;
    background: var(--rf-magenta);
}
.rf-dots i:nth-child(1), .rf-dots i:nth-child(4) { background: var(--rf-indigo); }

.rf-dots-lg { width: 22px; height: 22px; gap: 4px; }

/* Loading / empty: the mark breathes. */
.rf-dots-pulse i { animation: rf-dot 1.1s ease-in-out infinite; }
.rf-dots-pulse i:nth-child(2) { animation-delay: .14s; }
.rf-dots-pulse i:nth-child(3) { animation-delay: .28s; }
.rf-dots-pulse i:nth-child(4) { animation-delay: .42s; }
@keyframes rf-dot { 0%, 100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
    .rf-dots-pulse i { animation: none; opacity: .7; }
    * { scroll-behavior: auto !important; }
}

/* ---- 4. Component-local brand — the half everyone forgets ---------------- */
.btn {
    --bs-btn-font-size: .82rem;
    --bs-btn-font-weight: 600;
    --bs-btn-padding-y: .4rem;
    --bs-btn-padding-x: .8rem;
    --bs-btn-border-radius: 8px;
}
.btn-lg { --bs-btn-font-size: .9rem; --bs-btn-padding-y: .55rem; --bs-btn-padding-x: 1.1rem; }
.btn-sm { --bs-btn-font-size: .76rem; --bs-btn-padding-y: .25rem; --bs-btn-padding-x: .6rem; }

.btn-primary {
    --bs-btn-bg: var(--rf-indigo);
    --bs-btn-border-color: var(--rf-indigo);
    --bs-btn-hover-bg: var(--rf-indigo-hover);
    --bs-btn-hover-border-color: var(--rf-indigo-hover);
    --bs-btn-active-bg: var(--rf-indigo-active);
    --bs-btn-active-border-color: var(--rf-indigo-active);
    --bs-btn-disabled-bg: var(--rf-indigo);
    --bs-btn-disabled-border-color: var(--rf-indigo);
    box-shadow: 0 1px 2px rgba(var(--rf-indigo-rgb), .28);
}
.btn-outline-primary {
    --bs-btn-color: var(--rf-indigo);
    --bs-btn-border-color: var(--rf-indigo-line);
    --bs-btn-hover-bg: var(--rf-indigo);
    --bs-btn-hover-border-color: var(--rf-indigo);
    --bs-btn-active-bg: var(--rf-indigo);
    --bs-btn-active-border-color: var(--rf-indigo);
    --bs-btn-disabled-color: var(--rf-indigo);
    --bs-btn-disabled-border-color: var(--rf-indigo-line);
}
.btn-light {
    --bs-btn-bg: #fff;
    --bs-btn-border-color: var(--rf-line);
    --bs-btn-color: var(--rf-ink-2);
    --bs-btn-hover-bg: var(--rf-line-2);
    --bs-btn-hover-border-color: var(--rf-line);
}
.btn-outline-secondary {
    --bs-btn-color: var(--rf-ink-2);
    --bs-btn-border-color: var(--rf-line);
    --bs-btn-hover-bg: var(--rf-line-2);
    --bs-btn-hover-color: var(--rf-ink);
    --bs-btn-hover-border-color: #d5d9e6;
    --bs-btn-active-bg: var(--rf-line-2);
    --bs-btn-active-color: var(--rf-ink);
    --bs-btn-active-border-color: #d5d9e6;
}

.form-control, .form-select {
    font-size: .84rem;
    border-color: var(--rf-line);
    border-radius: 8px;
    color: var(--rf-ink);
}
.form-control:focus, .form-select:focus {
    border-color: #a8a4dd;
    box-shadow: 0 0 0 3px rgba(var(--rf-indigo-rgb), .14);
}
.form-control::placeholder { color: var(--rf-ink-4); }
.form-check-input:checked { background-color: var(--rf-indigo); border-color: var(--rf-indigo); }
.form-check-input:focus { border-color: #a8a4dd; box-shadow: 0 0 0 3px rgba(var(--rf-indigo-rgb), .14); }
.form-label { font-size: .78rem; font-weight: 600; color: var(--rf-ink-2); margin-bottom: .25rem; }
.form-text { font-size: .74rem; color: var(--rf-ink-3); }

.text-primary { color: var(--rf-indigo) !important; }
.bg-primary { background-color: var(--rf-indigo) !important; }
.border-primary { border-color: var(--rf-indigo) !important; }

.page-link { color: var(--rf-indigo); border-color: var(--rf-line); font-size: .8rem; }
.page-item.active .page-link { background-color: var(--rf-indigo); border-color: var(--rf-indigo); }

.badge { font-weight: 600; letter-spacing: .01em; }
.text-bg-light { background: var(--rf-line-2) !important; color: var(--rf-ink-2) !important; }

.dropdown-menu {
    border-color: var(--rf-line);
    border-radius: var(--rf-radius);
    box-shadow: var(--rf-shadow-lift);
    font-size: .84rem;
    padding: .3rem;
}
.dropdown-item { border-radius: 6px; padding: .4rem .6rem; }
.dropdown-item:active { background: var(--rf-indigo); }

.modal-content { border: 0; border-radius: 14px; box-shadow: var(--rf-shadow-lift); }
.modal-header, .modal-footer { border-color: var(--rf-line); }

.alert { border-radius: var(--rf-radius); border-width: 1px; font-size: .84rem; }
.alert-success { background: var(--rf-ok-tint); border-color: #bfe3d2; color: var(--rf-ok); }
.alert-danger  { background: var(--rf-bad-tint); border-color: #f2c3c8; color: var(--rf-bad); }
.alert-warning { background: var(--rf-warn-tint); border-color: #f2e0ab; color: var(--rf-warn); }
.alert-info    { background: var(--rf-indigo-tint); border-color: var(--rf-indigo-line); color: var(--rf-indigo-active); }

:focus-visible { outline: 2px solid var(--rf-indigo); outline-offset: 2px; border-radius: 4px; }

/* ---- 5. Shell ----------------------------------------------------------- */
.rf-sidebar {
    width: var(--rf-sidebar-w);
    flex: 0 0 var(--rf-sidebar-w);   /* flex children shrink by default; this is a fixed rail */
    background: var(--rf-surface);
    border-right: 1px solid var(--rf-line);
}

/* ⚠ Bootstrap ships `.offcanvas-lg{background-color:transparent!important}`
   inside its own @media (min-width:992px). Only an !important in the SAME
   breakpoint wins; without this the sidebar renders transparent at desktop. */
@media (min-width: 992px) {
    .rf-sidebar.offcanvas-lg {
        background-color: var(--rf-surface) !important;
        visibility: visible !important;
        transform: none !important;
    }
}

.rf-brand {
    height: var(--rf-header-h);
    display: flex;
    align-items: center;
    padding: 0 1rem;
    border-bottom: 1px solid var(--rf-line);
}
.rf-brand img { max-height: 30px; width: auto; }

.rf-sidebar nav { padding: .75rem .6rem; }

.rf-nav-heading { padding: .9rem .6rem .3rem; }
.rf-sidebar .rf-nav-heading:first-child { padding-top: .2rem; }

.rf-sidebar .nav-link {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .48rem .6rem;
    margin-bottom: 1px;
    border-radius: 8px;
    font-size: .845rem;
    font-weight: 500;
    color: var(--rf-ink-2);
    transition: background-color .12s ease, color .12s ease;
}
.rf-sidebar .nav-link i { font-size: .95rem; color: var(--rf-ink-4); transition: color .12s ease; }
.rf-sidebar .nav-link:hover { background: var(--rf-line-2); color: var(--rf-ink); }
.rf-sidebar .nav-link:hover i { color: var(--rf-ink-2); }

.rf-sidebar .nav-link.active {
    background: var(--rf-indigo-tint);
    color: var(--rf-indigo-active);
    font-weight: 650;
}
.rf-sidebar .nav-link.active i { color: var(--rf-indigo); }
/* The signature marks what is live. */
.rf-sidebar .nav-link .rf-dots { margin-left: auto; opacity: 0; transition: opacity .12s ease; }
.rf-sidebar .nav-link.active .rf-dots { opacity: 1; }

.rf-header {
    height: var(--rf-header-h);
    background: var(--rf-surface);
    border-bottom: 1px solid var(--rf-line);
}

.rf-main { background: var(--rf-canvas); }

.rf-avatar {
    display: grid;
    place-items: center;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    background: var(--rf-indigo);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
}

.rf-footer {
    border-top: 1px solid var(--rf-line);
    background: var(--rf-surface);
    font-size: .74rem;
    color: var(--rf-ink-4);
}

/* ---- 6. Cards & tables -------------------------------------------------- */
.card {
    border: 1px solid var(--rf-line);
    border-radius: var(--rf-radius);
    box-shadow: var(--rf-shadow);
}
.card-body { padding: 1rem 1.1rem; }

.rf-panel {
    background: var(--rf-surface);
    border: 1px solid var(--rf-line);
    border-radius: var(--rf-radius);
    box-shadow: var(--rf-shadow);
}
.rf-panel-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
    padding: .7rem 1rem;
    border-bottom: 1px solid var(--rf-line);
}
.rf-panel-title { font-size: .92rem; font-weight: 650; margin: 0; }

.table { --bs-table-bg: transparent; margin: 0; color: var(--rf-ink); }
.table > thead > tr > th {
    padding: .55rem .8rem;
    font-size: .655rem;
    font-weight: 650;
    letter-spacing: .085em;
    text-transform: uppercase;
    color: var(--rf-ink-3);
    background: var(--rf-line-2);
    border-bottom: 1px solid var(--rf-line);
    white-space: nowrap;
}
.table > tbody > tr > td { padding: .55rem .8rem; font-size: .84rem; border-color: var(--rf-line-2); vertical-align: middle; }
.table > tbody > tr:last-child > td { border-bottom: 0; }
.table-hover > tbody > tr:hover > * { background: var(--rf-indigo-tint); }

/* ---- 6b. Dashboard ------------------------------------------------------ */
.rf-stat {
    position: relative;
    height: 100%;
    padding: .85rem 1rem;
    background: var(--rf-surface);
    border: 1px solid var(--rf-line);
    border-radius: var(--rf-radius);
    box-shadow: var(--rf-shadow);
    overflow: hidden;
}
/* The four-dot mark, quiet, as a watermark of ownership. */
.rf-stat::after {
    content: "";
    position: absolute;
    top: .85rem;
    right: 1rem;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--rf-magenta);
    opacity: .5;
}
.rf-stat-value {
    display: flex;
    align-items: baseline;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.15;
    margin: .15rem 0 .25rem;
    color: var(--rf-ink);
}
.rf-stat-foot { display: flex; align-items: center; gap: .35rem; font-size: .7rem; }
.rf-delta { display: inline-flex; align-items: center; gap: .12rem; font-weight: 650; }
.rf-delta.up { color: var(--rf-ok); }
.rf-delta.down { color: var(--rf-bad); }

.rf-panel-foot { padding: .6rem 1rem; border-top: 1px solid var(--rf-line); }
.rf-panel-foot:empty { display: none !important; }

.rf-daterange .btn { font-size: .74rem; }
.rf-table-busy { opacity: .55; transition: opacity .12s ease; }

/* ---- 7. Page furniture -------------------------------------------------- */
.breadcrumb { font-size: .76rem; margin-bottom: .6rem; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--rf-ink-4); }
.breadcrumb a { color: var(--rf-ink-3); text-decoration: none; }
.breadcrumb a:hover { color: var(--rf-indigo); }
.breadcrumb-item.active { color: var(--rf-ink-2); }

.rf-page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
    margin-bottom: .9rem;
}
.rf-page-title { font-size: 1.15rem; font-weight: 700; margin: 0; }
.rf-page-sub { font-size: .8rem; color: var(--rf-ink-3); margin: .1rem 0 0; }

.rf-empty { padding: 3rem 1rem; text-align: center; color: var(--rf-ink-3); font-size: .84rem; }
.rf-empty .rf-dots { margin: 0 auto .8rem; }

.rf-dot-sep { color: var(--rf-ink-4); margin: 0 .4rem; }

.rf-code {
    font-family: ui-monospace, Consolas, monospace;
    font-size: .74rem;
    padding: .08rem .32rem;
    border-radius: 4px;
    background: var(--rf-line-2);
    color: var(--rf-ink-3);
}

/* ---- 8. Preview grid (§12.3) -------------------------------------------- */
.rf-consignment {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1.5rem;
    padding: 1rem 1.15rem;
    background: var(--rf-surface);
    border: 1px solid var(--rf-line);
    border-left: 3px solid var(--rf-indigo);
    border-radius: var(--rf-radius);
    box-shadow: var(--rf-shadow);
}
.rf-consignment-main { flex: 1 1 auto; min-width: 0; }
.rf-consignment-no {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -.015em;
    margin: .1rem 0 .15rem;
}
.rf-consignment-route { font-size: .84rem; color: var(--rf-ink-2); }
.rf-consignment-route .rf-arrow { color: var(--rf-magenta-dark); margin: 0 .4rem; font-weight: 700; }
.rf-consignment-route .rf-dot { color: var(--rf-ink-4); margin: 0 .45rem; }

.rf-consignment-stats { display: flex; gap: 1.6rem; margin: 0; }
.rf-consignment-stats dd { margin: 0; font-size: 1.05rem; font-weight: 650; }

.rf-weigh-callout {
    display: flex;
    gap: .7rem;
    padding: .75rem .95rem;
    font-size: .82rem;
    line-height: 1.5;
    color: var(--rf-ink-2);
    background: var(--rf-indigo-tint);
    border: 1px solid var(--rf-indigo-line);
    border-radius: var(--rf-radius);
}
.rf-weigh-callout i { color: var(--rf-indigo); font-size: 1rem; }
.rf-weigh-callout .rf-hint { display: block; margin-top: .2rem; color: var(--rf-ink-3); }
kbd {
    font-size: .7em;
    background: #fff;
    color: var(--rf-ink-2);
    border: 1px solid var(--rf-line);
    border-radius: 4px;
    box-shadow: none;
    padding: .05em .3em;
}

.rf-pallet {
    background: var(--rf-surface);
    border: 1px solid var(--rf-line);
    border-radius: var(--rf-radius);
    margin-bottom: .7rem;
    overflow: hidden;
    box-shadow: var(--rf-shadow);
}
.rf-pallet-block { content-visibility: auto; contain-intrinsic-size: auto 300px; }

.rf-pallet-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    padding: .65rem .85rem;
    border-bottom: 1px solid var(--rf-line-2);
}
.rf-sr {
    display: grid;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 7px;
    background: var(--rf-indigo-tint);
    color: var(--rf-indigo);
    font-size: .74rem;
    font-weight: 700;
}
.rf-pallet-id { flex: 1 1 14rem; min-width: 0; }
.rf-pallet-no {
    font-family: ui-monospace, Consolas, monospace;
    font-size: .95rem;
    font-weight: 700;
    margin: 0;
}
.rf-item { font-size: .76rem; color: var(--rf-ink-3); }
.rf-item-name { font-weight: 600; color: var(--rf-ink-2); }
.rf-item-code {
    font-family: ui-monospace, Consolas, monospace;
    margin-left: .45rem;
    padding: .04rem .3rem;
    border-radius: 4px;
    background: var(--rf-line-2);
    color: var(--rf-ink-3);
}

.rf-spec label { display: block; margin-bottom: .1rem; }
.rf-spec input {
    width: 4.8rem;
    padding: .18rem .4rem;
    text-align: right;
    font-size: .82rem;
    border: 1px solid var(--rf-line);
    border-radius: 6px;
    background: #fff;
}

.rf-recon { margin-left: auto; text-align: right; }
.rf-recon-label { display: block; margin-bottom: .05rem; }
.rf-recon-figures { display: flex; align-items: baseline; justify-content: flex-end; gap: .1rem; }
.rf-recon-sum { font-size: 1.1rem; font-weight: 700; color: var(--rf-ink); }
.rf-recon-note { font-size: .68rem; color: var(--rf-ink-3); }
.rf-recon[data-state="ok"] .rf-recon-sum { color: var(--rf-ok); }
.rf-recon[data-state="partial"] .rf-recon-sum { color: var(--rf-warn); }
.rf-recon[data-state="empty"] .rf-recon-sum { color: var(--rf-ink-4); }

.rf-rolls { width: 100%; table-layout: fixed; border-collapse: collapse; }
.rf-rolls .rf-col-num { width: 8rem; }
.rf-rolls .rf-col-weigh { width: 10rem; }
.rf-rolls thead th {
    padding: .3rem .6rem;
    font-size: .625rem;
    font-weight: 650;
    letter-spacing: .085em;
    text-transform: uppercase;
    color: var(--rf-ink-3);
    text-align: left;
    background: transparent;
    border-bottom: 1px solid var(--rf-line-2);
    white-space: nowrap;
}
.rf-rolls th.rf-col-num { text-align: right; }
.rf-rolls td { padding: .12rem .3rem; border-bottom: 1px solid var(--rf-line-2); }
.rf-rolls tbody tr:last-child td { border-bottom: 0; }
.rf-rolls tbody tr:focus-within { background: var(--rf-indigo-tint); }
.rf-rolls input {
    width: 100%;
    padding: .22rem .42rem;
    font-size: .8rem;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--rf-ink);
}
.rf-rolls td.rf-col-num input { text-align: right; }
.rf-rolls input:hover { border-color: var(--rf-line); background: #fff; }
.rf-rolls input:focus {
    outline: none;
    border-color: var(--rf-indigo);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(var(--rf-indigo-rgb), .13);
}
.rf-rolls .rf-col-weigh { background: var(--rf-indigo-tint); }
.rf-rolls th.rf-col-weigh { color: var(--rf-indigo); }
.rf-rolls .rf-col-weigh:nth-last-child(2) { border-left: 1px solid var(--rf-indigo-line); }
.rf-rolls td.rf-col-weigh input { font-weight: 600; border-color: var(--rf-indigo-line); background: #fff; }
.rf-rolls td.rf-col-weigh input:hover { border-color: #b9b0e6; }
.rf-rolls td.rf-col-roll input { font-family: ui-monospace, Consolas, monospace; font-size: .76rem; }
.rf-rolls td.rf-readonly { font-size: .76rem; color: var(--rf-ink-3); padding-left: .7rem; }

.rf-dirty { border-color: var(--rf-warn) !important; background: var(--rf-warn-tint) !important; }
.rf-invalid { border-color: var(--rf-bad) !important; background: var(--rf-bad-tint) !important; }

.rf-echo, .rf-echo-inline {
    display: block;
    padding: 0 .42rem;
    font-size: .6rem;
    line-height: 1.1;
    color: var(--rf-ink-4);
    cursor: help;
}
.rf-echo-inline { display: inline; padding: 0; font-style: italic; }
.rf-rolls td.rf-col-weigh { padding-bottom: .26rem; }

.rf-optional { border-top: 1px solid var(--rf-line-2); background: #fcfcfe; }
.rf-optional summary {
    padding: .4rem .85rem;
    font-size: .73rem;
    font-weight: 600;
    color: var(--rf-ink-3);
    cursor: pointer;
    user-select: none;
}
.rf-optional summary:hover { color: var(--rf-indigo); }
.rf-optional[open] summary { border-bottom: 1px solid var(--rf-line-2); }
.rf-optional-state { margin-left: .4rem; font-weight: 400; font-style: italic; color: var(--rf-ink-4); }

.rf-commitbar {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-top: .7rem;
    padding: .65rem .95rem;
    background: var(--rf-surface);
    border: 1px solid var(--rf-line);
    border-radius: var(--rf-radius);
    box-shadow: 0 -4px 20px rgba(22, 25, 43, .08);
}
.rf-commitbar-status { display: flex; align-items: center; gap: .9rem; font-size: .8rem; }
.rf-commit-pallets { display: flex; align-items: center; gap: .35rem; font-weight: 600; color: var(--rf-ink-3); }
.rf-commit-edits { color: var(--rf-ink-4); }
.rf-commitbar-actions { margin-left: auto; display: flex; gap: .45rem; }
.rf-commit-pallets[data-state="ok"] { color: var(--rf-ok); }

/* ---- 9. Scan ------------------------------------------------------------ */
.rf-scan-input {
    font-size: 1.4rem;
    padding: .9rem 1.1rem;
    letter-spacing: .06em;
    font-family: ui-monospace, Consolas, monospace;
    text-align: center;
}

/* ---- 10. Print ---------------------------------------------------------- */
@media print {
    .rf-sidebar, .rf-header, .rf-footer, .rf-noprint, .rf-commitbar { display: none !important; }
    .rf-main { background: #fff; }
    .card, .rf-panel { border: 0; box-shadow: none; }
    a[href]::after { content: none !important; }
}

@media (max-width: 767.98px) {
    .rf-recon { margin-left: 0; text-align: left; }
    .rf-recon-figures { justify-content: flex-start; }
    .rf-consignment-stats { gap: 1rem; }
}

/* ---- 11. Profile -------------------------------------------------------- */
.rf-logo-preview {
    display: grid;
    place-items: center;
    padding: 1.2rem;
    min-height: 96px;
    background: var(--rf-line-2);
    border: 1px dashed var(--rf-line);
    border-radius: var(--rf-radius);
}
.rf-logo-preview img { max-height: 56px; max-width: 100%; }

/* ---- 12. Public pallet page (a QR scan target) --------------------------
   Opened by a phone camera, so it is mobile-first and standalone — no shell,
   no nav, nothing to navigate INTO. It shows one pallet and nothing else. */
.rf-public { background: var(--rf-canvas); }
.rf-public-head {
    display: flex;
    justify-content: center;
    padding: 1rem;
    background: var(--rf-surface);
    border-bottom: 1px solid var(--rf-line);
}
.rf-public-head img { max-height: 28px; }

.rf-public-main { max-width: 640px; margin: 0 auto; padding: 1rem; }

.rf-public-hero {
    padding: 1rem 1.1rem;
    margin-bottom: .75rem;
    background: var(--rf-surface);
    border: 1px solid var(--rf-line);
    border-left: 3px solid var(--rf-indigo);
    border-radius: var(--rf-radius);
    box-shadow: var(--rf-shadow);
}
.rf-public-no {
    font-family: ui-monospace, Consolas, monospace;
    font-size: 1.5rem;
    font-weight: 700;
    margin: .1rem 0 .2rem;
    word-break: break-all;
}
.rf-public-route { font-size: .88rem; color: var(--rf-ink-2); }
.rf-public-route .rf-arrow { color: var(--rf-magenta-dark); margin: 0 .4rem; font-weight: 700; }

.rf-public-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .6rem;
    margin-bottom: .9rem;
}
.rf-public-stats > div {
    padding: .6rem .8rem;
    background: var(--rf-surface);
    border: 1px solid var(--rf-line);
    border-radius: var(--rf-radius);
}
.rf-public-stats dd {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--rf-ink);
}
@media (min-width: 576px) { .rf-public-stats { grid-template-columns: repeat(4, 1fr); } }

.rf-public .table th.rf-label { width: 34%; background: transparent; }
.rf-public-foot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    margin: 1.4rem 0 .6rem;
    font-size: .72rem;
    color: var(--rf-ink-4);
}