/* ==========================================================================
   IronFit ERP — UI redesign prototype  ("Operational Console")
   DISPOSABLE. Everything is scoped under `.rd-body` and prefixed `rd-` so it
   cannot leak into the live app's crm.css. Delete this file + the redesign
   route/controller/views/js to remove the prototype entirely.
   ========================================================================== */

/* --- tokens ------------------------------------------------------------- */
.rd-body {
    /* brand — kept, used sparingly */
    --rd-accent: #2456c6;
    --rd-accent-deep: #1a429b;
    --rd-accent-ink: #14316f;
    --rd-accent-soft: #e9f0fc;
    --rd-accent-hover: #1d49ad; /* primary-action hover */
    --rd-head-tint: #eef3fc;    /* table + form/section header band */

    /* cool blue-gray console neutrals */
    --rd-ink: #0f1722;       /* headings */
    --rd-text: #283541;      /* body */
    --rd-muted: #5f6e7b;     /* secondary */
    --rd-faint: #6b7785;     /* tertiary / placeholder — darkened to clear WCAG AA */
    --rd-faintest: #97a4b0;  /* decorative only (dots, dividers) — not for text */
    --rd-line: #e7ebef;      /* hairline */
    --rd-line-2: #d6dde3;    /* stronger hairline */
    --rd-canvas: #f4f6f8;
    --rd-surface: #ffffff;
    --rd-surface-2: #fafbfc;

    /* sidebar */
    --rd-side: #14161b;
    --rd-side-2: #1c1f27;
    --rd-side-line: rgba(255,255,255,.075);
    --rd-side-text: rgba(255,255,255,.60);
    --rd-side-strong: rgba(255,255,255,.94);

    /* status */
    --rd-ok: #15a34a;   --rd-ok-soft: #e7f6ec;   --rd-ok-ink: #0f7a37;
    --rd-warn: #c2710a; --rd-warn-soft: #fbf0df; --rd-warn-ink: #8a5200;
    --rd-bad: #d92d20;  --rd-bad-soft: #fcebea;  --rd-bad-ink: #b42318;

    --rd-r-card: 8px;
    --rd-r-ctl: 6px;
    --rd-r-pill: 999px;

    /* sidebar icon column — fixed so icons hold their lane across rail collapse.
       (content - slot)/2 == padx == 10px keeps the icon dead-centre of the 62px rail. */
    --rd-row-padx: 10px;
    --rd-ico-slot: 22px;

    --rd-pop: 0 10px 30px -12px rgba(15,23,34,.32), 0 0 0 1px var(--rd-line);
    --rd-bar-shadow: 0 -1px 0 var(--rd-line), 0 -10px 26px -18px rgba(15,23,34,.25);

    --rd-ff: 'Sora', system-ui, -apple-system, sans-serif;
    --rd-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

    margin: 0;
    background: var(--rd-canvas);
    color: var(--rd-text);
    font-family: var(--rd-ff);
    font-size: 13px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

.rd-body *,
.rd-body *::before,
.rd-body *::after { box-sizing: border-box; }

.rd-body h1, .rd-body h2, .rd-body h3, .rd-body h4 {
    margin: 0;
    color: var(--rd-ink);
    font-weight: 600;
    line-height: 1.2;
}
.rd-body a { color: inherit; text-decoration: none; }
.rd-body button { font-family: inherit; }
.rd-mono { font-family: var(--rd-mono); font-feature-settings: "tnum" 1; }
.rd-num  { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* tiny shared label */
.rd-eyebrow {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--rd-faint);
}

/* --- shell -------------------------------------------------------------- */
/* Sidebar is fixed + content gets a matching margin, so the icon-rail can
   overlay-expand on hover WITHOUT reflowing the page. */
.rd-shell { min-height: 100vh; }

.rd-side {
    width: 226px;
    background: var(--rd-side);
    color: var(--rd-side-text);
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    z-index: 40;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    padding: 14px 10px 16px;
    border-right: 1px solid #000;
    transition: width .18s ease, box-shadow .18s ease, transform .22s ease;
}
.rd-side::-webkit-scrollbar { width: 6px; }
.rd-side::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); border-radius: 99px; }

.rd-brand {
    display: flex; align-items: center; gap: 9px;
    /* left pad sized so the 28px logo mark centres on x=31 — the same column as
       every nav icon, so the logo doesn't shift when the rail collapses/expands. */
    padding: 4px 8px 14px 7px;
    color: #fff; font-weight: 700; font-size: 13px; letter-spacing: .04em;
    /* flex items default to min-width:auto (content size), which lets a wide child
       (the logo image) escape .rd-side's overflow-x:hidden in the collapsed 62px
       rail instead of being clipped — reset it so the image clips cleanly there. */
    min-width: 0;
}
/* Drawer close (×) — a mobile-only affordance. On desktop (≥861px) the sidebar is permanent,
   so it's display:none there and revealed inside the @media (max-width:860px) block. Sits at
   the drawer's top-right via margin-left:auto within the flex .rd-brand row. */
.rd-side-close {
    display: none; margin-left: auto; flex-shrink: 0;
    width: 32px; height: 32px; padding: 0;
    border: 0; border-radius: 7px; background: transparent;
    color: rgba(255,255,255,.6); cursor: pointer;
    align-items: center; justify-content: center;
    transition: color .14s, background .14s;
}
.rd-side-close svg { width: 18px; height: 18px; }
.rd-side-close:hover, .rd-side-close:active { color: #fff; background: var(--rd-side-2); }
/* nav: sectioned, collapsible, draggable — mirrors the live app's sidebar */
/* min-width: 0 — same reason as .rd-brand above: .rd-nav is itself a direct flex-item child of
   .rd-side (also a column flex container), so without this its automatic min-width would equal
   its content's size, letting it (and everything else in .rd-side) escape overflow-x:hidden in
   the collapsed 62px rail instead of clipping there. */
.rd-nav { display: flex; flex-direction: column; gap: 1px; min-width: 0; }

.rd-nav-link {
    position: relative;
    display: flex; align-items: center; gap: 9px;
    padding: 7px 10px 7px var(--rd-row-padx); border-radius: 6px;
    color: var(--rd-side-text); font-size: 12.5px; font-weight: 500;
    transition: background .14s, color .14s;
}
.rd-nav-link .rd-ico {
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0; width: var(--rd-ico-slot); transition: opacity .12s;
}
.rd-nav-link .rd-ico svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 1.7; fill: none; }
.rd-nav-link .rd-label-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-nav-link:hover { background: var(--rd-side-2); color: var(--rd-side-strong); }
.rd-nav-link.is-active { background: var(--rd-side-2); color: #fff; box-shadow: inset 2px 0 0 var(--rd-accent); }
.rd-nav-link.is-soon { color: rgba(255,255,255,.30); cursor: default; }
.rd-nav-link.is-soon:hover { background: transparent; color: rgba(255,255,255,.30); }
.rd-nav-top { margin-bottom: 3px; }

.rd-nav-tag, .rd-nav-soon { font-size: 8.5px; font-weight: 700; letter-spacing: .08em; padding: 1px 5px; border-radius: 99px; flex-shrink: 0; }
.rd-nav-tag { background: rgba(36,86,198,.22); color: #b9ccf5; }
.rd-nav-soon { background: rgba(255,255,255,.07); color: rgba(255,255,255,.4); text-transform: uppercase; letter-spacing: .1em; }

/* section group */
.rd-nav-group { display: flex; flex-direction: column; margin-top: 3px; }
/* section header = a full-bleed separator BAND: the gray that used to sit on the
   small icon tile now spans the whole sidebar width (both rail + expanded), so
   sections read as clearly divided. The -10px side margins cancel .rd-side's 10px
   padding to reach both edges; the matching +10px left padding keeps the section
   icon on the shared x=31 icon column, so nothing shifts on collapse. */
.rd-nav-section {
    position: relative; display: flex; align-items: center; gap: 0;
    margin: 0 -10px; padding-left: 10px; padding-right: 10px;
    background: rgba(255,255,255,.07); transition: background .14s;
}
.rd-nav-section:hover { background: rgba(255,255,255,.10); }
.rd-nav-section-toggle {
    flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px;
    background: transparent; border: 0; cursor: pointer;
    padding: 5px 6px 5px var(--rd-row-padx); color: rgba(255,255,255,.34);
    font-size: 9.5px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
}
.rd-nav-section-toggle .rd-label-text { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* labels fade (not display-toggle) so they don't hard-pop while the rail width animates */
.rd-label-text { transition: opacity .15s ease; }
.rd-nav-section-toggle:hover { color: rgba(255,255,255,.62); }
.rd-caret { display: inline-flex; flex-shrink: 0; }
.rd-caret svg { width: 13px; height: 13px; transition: transform .16s; }
.rd-nav-group.is-collapsed .rd-caret svg { transform: rotate(-90deg); }
.rd-nav-group.is-collapsed .rd-nav-group-items { display: none; }
.rd-nav-group-items { display: flex; flex-direction: column; gap: 1px; padding-top: 4px; padding-bottom: 3px; }

/* drag handle — its OWN slot on the FAR RIGHT (order:2 pushes it past the toggle /
   the pin star), no longer overlapping the icon column, so the grip is an easy,
   unambiguous grab target instead of fighting the icon for the pointer. Height is
   capped to the label line so it can't make a row taller expanded than collapsed
   (where it's display:none) — no vertical drift. Reveals on row hover. */
.rd-drag-handle {
    order: 2; flex-shrink: 0;
    width: var(--rd-ico-slot); height: 18px; border-radius: 5px;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: grab; color: rgba(255,255,255,.32); touch-action: none;
    opacity: 0; transition: opacity .12s, color .12s, background .12s;
}
.rd-drag-handle:hover { color: rgba(255,255,255,.85); background: rgba(255,255,255,.08); }
.rd-drag-handle:active { cursor: grabbing; }
.rd-nav-section:hover .rd-drag-handle,
.rd-nav-link.is-quick:hover .rd-drag-handle { opacity: 1; }
.rd-nav-group.rd-dragging { opacity: .6; outline: 1px dashed rgba(36,86,198,.55); border-radius: 8px; background: var(--rd-side-2); }
.rd-nav-link.rd-dragging { opacity: .6; background: var(--rd-side-2); border-radius: 6px; }
/* while a drag is in progress: grabbing cursor everywhere, no text selection */
body.rd-dragging-active, body.rd-dragging-active * { cursor: grabbing !important; user-select: none !important; }

/* pin star — height capped at the label's line box (≤18.75px) so it never makes
   the row taller than it is when collapsed (pin is display:none there). Otherwise
   every pinnable row grows ~3px on expand and the whole list drifts down. */
.rd-nav-pin {
    margin-left: auto; flex-shrink: 0;
    width: 22px; height: 18px; padding: 0; border: 0; border-radius: 5px;
    background: transparent; color: rgba(255,255,255,.22); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity .12s, color .12s, background .12s;
}
.rd-nav-pin svg { width: 14px; height: 14px; }
.rd-nav-link:hover .rd-nav-pin { opacity: 1; }
.rd-nav-pin:hover { color: var(--rd-accent); background: rgba(255,255,255,.08); }
.rd-nav-pin.is-pinned { opacity: 1; color: var(--rd-accent); }
.rd-nav-link.is-quick .rd-nav-pin { opacity: 1; }

/* recent-visit close button — height capped like the pin so recent rows keep the
   same height whether or not the close button (display:none when collapsed) shows. */
.rd-recent-close {
    margin-left: auto; flex-shrink: 0; width: 20px; height: 18px;
    border: 0; background: transparent; color: rgba(255,255,255,.3);
    font-size: 15px; line-height: 1; cursor: pointer; border-radius: 5px;
    opacity: 0; transition: opacity .12s, color .12s;
}
.rd-nav-link:hover .rd-recent-close { opacity: 1; }
.rd-recent-close:hover { color: #fff; background: rgba(255,255,255,.08); }
.rd-nav-recent-empty { padding: 4px 12px 7px; font-size: 11px; color: rgba(255,255,255,.3); white-space: nowrap; transition: opacity .15s ease; }
.rd-side-foot {
    margin-top: auto; padding: 12px 6px 2px;
    display: flex; align-items: center; gap: 8px;
    /* same auto-min-width reset as .rd-brand/.rd-nav above — .rd-side-foot is .rd-side's third
       and last direct flex-item child. */
    min-width: 0;
}
.rd-side-foot-text { font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.3); }
.rd-rail-toggle {
    width: 30px; height: 30px; flex-shrink: 0; border: 0; border-radius: 7px;
    background: var(--rd-side-2); color: rgba(255,255,255,.55); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    /* pinned to the row's far end when expanded (next to "DEMO · 2026"); the collapsed-rail
       rule already re-centers the whole row once the label is display:none, so this margin
       only matters in the expanded state. */
    margin-left: auto;
    transition: color .14s, background .14s;
}
.rd-rail-toggle svg { width: 16px; height: 16px; transition: transform .18s ease; }
.rd-rail-toggle:hover { color: #fff; background: #2a2f3a; }

/* section icon — the section anchor: shown in BOTH states, in the same fixed x=31
   column as the item icons below it, so it never moves when the rail collapses.
   No longer a filled tile — the full-width section BAND behind it now carries the
   "this is a section header" cue (in both the rail and expanded), so the glyph just
   sits on the band, a touch brighter than the item glyphs for readability. */
.rd-nav-sec-ico {
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0; width: var(--rd-ico-slot);
    color: rgba(255,255,255,.62);
    transition: opacity .12s, color .12s;
}
.rd-nav-sec-ico svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 1.8; fill: none; }
/* the active section's band + glyph pick up the brand accent so you can spot where
   you are at a glance, even in the collapsed rail. Excludes "Terakhir Dibuka"
   (data-rd-group="__recent"): the current page is ALWAYS in your history, so that
   section would light up permanently — a meaningless cue. History stays neutral. */
.rd-nav-group:not([data-rd-group="__recent"]):has(.rd-nav-link.is-active) .rd-nav-section {
    background: rgba(36,86,198,.14); box-shadow: inset 2px 0 0 var(--rd-accent);
}
.rd-nav-group:not([data-rd-group="__recent"]):has(.rd-nav-link.is-active) .rd-nav-sec-ico { color: #b9ccf5; }
/* and don't flag the active page's own row inside the history list either — the real
   active marker lives under its actual module section. */
[data-rd-recent] .rd-nav-link.is-active {
    background: transparent; color: var(--rd-side-text); box-shadow: none;
}

/* ---- icon-rail (auto-collapse), desktop only --------------------------- */
@media (min-width: 861px) {
    .rd-shell.is-rail .rd-side { width: 62px; }
    .rd-shell.is-rail .rd-content { margin-left: 62px; }
    /* expand as an overlay on hover / keyboard focus / forced peek (e.g. during a drag) */
    .rd-shell.is-rail .rd-side:hover,
    .rd-shell.is-rail .rd-side:focus-within,
    .rd-shell.is-rail .rd-side.is-peek { width: 226px; box-shadow: 12px 0 48px -16px rgba(0,0,0,.7); }
    /* chevrons point left ("collapse") when the sidebar is pinned open */
    .rd-shell:not(.is-rail) .rd-rail-toggle svg { transform: rotate(180deg); }
    /* in the collapsed rail the "DEMO · 2026" label is hidden, so drop the toggle's auto margin
       (which would otherwise consume the free space and pin it flush-right) to center it. */
    .rd-shell.is-rail .rd-side:not(:hover):not(:focus-within):not(.is-peek) .rd-rail-toggle { margin-left: 0; }

    /* collapsed look — applies only while NOT peeking */
    .rd-shell.is-rail .rd-side:not(:hover):not(:focus-within):not(.is-peek) :is(.rd-nav-tag, .rd-nav-soon, .rd-nav-pin, .rd-recent-close, .rd-drag-handle, .rd-caret, .rd-side-foot-text) { display: none; }
    /* labels + the empty-recent placeholder stay in layout but fade to 0 — keeping
       them in flow means the row/section heights are identical collapsed vs expanded,
       so NOTHING drifts vertically; fading + the width animation read as one motion. */
    .rd-shell.is-rail .rd-side:not(:hover):not(:focus-within):not(.is-peek) :is(.rd-label-text, .rd-nav-recent-empty) { opacity: 0; }
    /* nav rows + the logo keep their padding and the shared icon column, so NOTHING
       shifts horizontally on collapse — every glyph already sits on x=31. Only the
       foot toggle (no shared column) gets centred. */
    .rd-shell.is-rail .rd-side:not(:hover):not(:focus-within):not(.is-peek) .rd-side-foot { justify-content: center; gap: 0; padding-left: 0; padding-right: 0; }
}

.rd-content { margin-left: 226px; min-width: 0; min-height: 100vh; display: flex; flex-direction: column; transition: margin-left .18s ease; }

/* --- command bar (page header) ----------------------------------------- */
.rd-cmdbar {
    position: sticky; top: 0; z-index: 20;
    background: rgba(255,255,255,.86);
    backdrop-filter: saturate(1.4) blur(8px);
    border-bottom: 1px solid var(--rd-line);
    padding: 13px 24px 12px;
    display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
}
.rd-cmdbar-crumb { font-size: 11px; color: var(--rd-faint); margin-bottom: 3px; }
.rd-cmdbar-crumb a:hover { color: var(--rd-accent-ink); }
.rd-cmdbar h1 { font-size: 19px; letter-spacing: -.01em; }

/* inline context "ticker" under the title */
.rd-ticker {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px;
    margin-top: 6px; font-size: 12px; color: var(--rd-muted);
}
.rd-ticker b { color: var(--rd-ink); font-weight: 600; }
.rd-ticker .rd-tick { display: inline-flex; align-items: center; gap: 6px; }
.rd-ticker .rd-tick + .rd-tick::before {
    content: ""; width: 3px; height: 3px; border-radius: 50%;
    background: var(--rd-line-2); margin-right: 14px;
}
.rd-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: var(--rd-faintest); }
.rd-dot.is-ok { background: var(--rd-ok); }
.rd-dot.is-warn { background: var(--rd-warn); }
.rd-dot.is-bad { background: var(--rd-bad); }
.rd-dot.is-off { background: var(--rd-faintest); }

.rd-cmdbar-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* --- buttons ------------------------------------------------------------ */
.rd-btn {
    display: inline-flex; align-items: center; gap: 7px;
    height: 32px; padding: 0 14px;
    border-radius: var(--rd-r-ctl);
    border: 1px solid var(--rd-line-2);
    background: var(--rd-surface);
    color: var(--rd-text);
    font-size: 12px; font-weight: 600; letter-spacing: .005em;
    cursor: pointer; white-space: nowrap;
    transition: background .14s, border-color .14s, color .14s, box-shadow .14s;
}
.rd-btn svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 1.8; fill: none; }
.rd-btn:hover { border-color: var(--rd-faint); background: var(--rd-surface-2); }
.rd-btn:active { transform: translateY(.5px); }
.rd-btn.is-primary {
    /* brand-cyan fill for primary actions; darker cyan on hover. */
    background: var(--rd-accent); border-color: var(--rd-accent);
    color: #fff; box-shadow: 0 6px 14px -8px rgba(20,49,111,.55);
}
.rd-btn.is-primary:hover { background: var(--rd-accent-hover); border-color: var(--rd-accent-hover); }
.rd-btn.is-quiet { border-color: transparent; background: transparent; color: var(--rd-muted); }
.rd-btn.is-quiet:hover { background: var(--rd-canvas); color: var(--rd-ink); }
.rd-btn.is-danger { color: var(--rd-bad); border-color: var(--rd-line-2); }
.rd-btn.is-danger:hover { background: var(--rd-bad-soft); border-color: var(--rd-bad); }
.rd-btn.is-sm { height: 27px; padding: 0 10px; font-size: 11.5px; }
.rd-icon-btn {
    width: 30px; height: 30px; padding: 0; justify-content: center;
    border-radius: var(--rd-r-ctl);
}

/* --- main scroll region ------------------------------------------------- */
.rd-main { padding: 18px 24px 64px; }
.rd-main.is-narrow { max-width: 1180px; }

/* --- filter toolbar ----------------------------------------------------- */
.rd-toolbar {
    position: sticky; top: var(--rd-cmdh, 92px); z-index: 15;
    display: flex; align-items: center; gap: 8px;
    padding: 9px 10px;
    background: var(--rd-surface);
    border: 1px solid var(--rd-line);
    border-radius: var(--rd-r-card);
    box-shadow: 0 1px 0 rgba(15,23,34,.02);
}
.rd-search {
    position: relative; flex: 0 1 300px; min-width: 160px;
}
.rd-search svg {
    position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
    width: 15px; height: 15px; stroke: var(--rd-faint); stroke-width: 1.8; fill: none;
    pointer-events: none;
}
.rd-search input {
    width: 100%; height: 32px; padding: 0 10px 0 32px;
    border: 1px solid var(--rd-line-2); border-radius: var(--rd-r-ctl);
    background: var(--rd-surface); color: var(--rd-text);
    font-family: inherit; font-size: 12.5px;
}
.rd-search input::placeholder { color: var(--rd-faint); }

/* segmented control */
.rd-seg {
    display: inline-flex; padding: 2px;
    background: var(--rd-canvas); border: 1px solid var(--rd-line);
    border-radius: var(--rd-r-ctl);
}
.rd-seg button {
    border: 0; background: transparent; cursor: pointer;
    height: 26px; padding: 0 12px; border-radius: 4px;
    font-size: 11.5px; font-weight: 600; color: var(--rd-muted);
    transition: background .14s, color .14s, box-shadow .14s;
}
.rd-seg button.is-on {
    background: var(--rd-surface); color: var(--rd-ink);
    box-shadow: 0 1px 2px rgba(15,23,34,.12);
}

.rd-toolbar-spacer { flex: 1; }
.rd-result-count { font-size: 11.5px; color: var(--rd-muted); white-space: nowrap; }
.rd-result-count b { color: var(--rd-ink); font-weight: 600; }

/* filter popover */
.rd-pop-wrap { position: relative; }
.rd-pop-trigger.has-active { border-color: var(--rd-accent); color: var(--rd-accent-ink); }
.rd-pop-trigger .rd-pop-badge {
    min-width: 16px; height: 16px; padding: 0 4px; border-radius: 99px;
    background: var(--rd-accent-ink); color: #fff;
    font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
}
.rd-pop {
    position: absolute; top: calc(100% + 6px); right: 0; z-index: 60;
    width: 320px; padding: 12px;
    background: var(--rd-surface); border-radius: var(--rd-r-card);
    box-shadow: var(--rd-pop);
}
.rd-pop[hidden] { display: none; }
.rd-pop-row { margin-bottom: 10px; }
.rd-pop-row:last-of-type { margin-bottom: 0; }
.rd-pop-foot {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--rd-line);
}
.rd-field-label {
    display: block; font-size: 10px; font-weight: 600; letter-spacing: .1em;
    text-transform: uppercase; color: var(--rd-muted); margin-bottom: 4px;
}
.rd-select, .rd-input {
    width: 100%; height: 32px; padding: 0 10px;
    border: 1px solid var(--rd-line-2); border-radius: var(--rd-r-ctl);
    background: var(--rd-surface); color: var(--rd-text);
    font-family: inherit; font-size: 12.5px;
}
.rd-select:disabled { background: var(--rd-canvas); color: var(--rd-faint); cursor: not-allowed; }
textarea.rd-input { height: auto; padding: 8px 10px; line-height: 1.5; resize: vertical; }

.rd-check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 12.5px; color: var(--rd-text); }
.rd-check input { width: 15px; height: 15px; accent-color: var(--rd-accent); }

/* active filter chips */
.rd-chips { display: none; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.rd-chips.is-shown { display: flex; }
.rd-chip {
    display: inline-flex; align-items: center; gap: 6px;
    height: 24px; padding: 0 6px 0 10px;
    background: var(--rd-accent-soft); color: var(--rd-accent-ink);
    border: 1px solid #cfddf7; border-radius: var(--rd-r-pill);
    font-size: 11px; font-weight: 600;
}
.rd-chip .rd-chip-k { color: var(--rd-accent-ink); font-weight: 500; }
.rd-chip button {
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px; border: 0; border-radius: 50%;
    background: transparent; color: var(--rd-accent-ink); cursor: pointer;
}
.rd-chip button:hover { background: rgba(20,49,111,.16); }
.rd-chip button svg { width: 11px; height: 11px; stroke: currentColor; stroke-width: 2.2; fill: none; }
.rd-chip-clear {
    border: 0; background: transparent; cursor: pointer;
    font-size: 11px; font-weight: 600; color: var(--rd-muted);
    padding: 0 6px; height: 24px;
}
.rd-chip-clear:hover { color: var(--rd-bad); }

/* --- filter abjad (A-Z strip, js/ui/alpha.js) ---------------------------- */
/* Its own row UNDER .rd-toolbar rather than inside it: katalog.js already fills the toolbar with
   a search box plus two seg groups, and ~18 letter buttons would wrap it into an unreadable
   block. Metrics deliberately echo .rd-seg so the two read as one control family. */
.vc-azbar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 2px;
    margin-top: 8px; padding: 4px 6px;
    background: var(--rd-surface);
    border: 1px solid var(--rd-line);
    border-radius: var(--rd-r-card);
}
.vc-azbar button {
    border: 0; background: transparent; cursor: pointer;
    min-width: 26px; height: 24px; padding: 0 6px; border-radius: 4px;
    font-family: inherit; font-size: 11.5px; font-weight: 600; color: var(--rd-muted);
    transition: background .14s, color .14s;
}
.vc-azbar button:first-child { padding: 0 10px; }
.vc-azbar button:hover { background: var(--rd-canvas); color: var(--rd-ink); }
.vc-azbar button.is-on { background: var(--rd-accent-soft); color: var(--rd-accent-ink); }

/* Sortable-column affordance — visible BEFORE the first click (the ▲/▼ only shows up after). */
.rd-table thead th .rd-sorthint {
    margin-left: 4px; font-size: 9.5px; font-weight: 400; color: var(--rd-faintest);
}
.rd-table thead th:hover .rd-sorthint { color: var(--rd-muted); }

/* --- card / surface ----------------------------------------------------- */
.rd-card {
    background: var(--rd-surface);
    border: 1px solid var(--rd-line);
    border-radius: var(--rd-r-card);
}
.rd-card-head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 11px 14px; border-bottom: 1px solid var(--rd-line);
    background: var(--rd-head-tint);
    border-radius: var(--rd-r-card) var(--rd-r-card) 0 0;
}
.rd-card-head h3 { font-size: 13px; }
.rd-card-pad { padding: 14px; }

/* --- table -------------------------------------------------------------- */
.rd-tablewrap { margin-top: 12px; border: 1px solid var(--rd-line); border-radius: var(--rd-r-card); background: var(--rd-surface); }
.rd-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.rd-table thead th {
    background: var(--rd-head-tint);
    text-align: left;
    font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
    color: var(--rd-muted);
    padding: 9px 12px;
    border-bottom: 1px solid var(--rd-line);
    white-space: nowrap;
}
.rd-table thead th.rd-r { text-align: right; }
/* sticky header opt-in (list page only) — kept off cards so short tables
   don't detach their header. No overflow ancestor, so sticky binds to the page. */
.rd-table.is-sticky thead th { position: sticky; top: calc(var(--rd-cmdh, 92px) + 52px); z-index: 5; }
/* round the inner corners so a non-clipping wrapper still looks crisp */
.rd-tablewrap .rd-table thead th:first-child { border-top-left-radius: var(--rd-r-card); }
.rd-tablewrap .rd-table thead th:last-child { border-top-right-radius: var(--rd-r-card); }
.rd-tablewrap .rd-table tbody tr:last-child td:first-child { border-bottom-left-radius: var(--rd-r-card); }
.rd-tablewrap .rd-table tbody tr:last-child td:last-child { border-bottom-right-radius: var(--rd-r-card); }
.rd-table tbody td {
    padding: 9px 12px; border-bottom: 1px solid var(--rd-line);
    color: var(--rd-text); font-size: 12.5px; vertical-align: middle;
}
.rd-table tbody tr:last-child td { border-bottom: 0; }
.rd-table tbody tr { position: relative; }
.rd-table tbody tr:hover td { background: #f5f8fe; }
.rd-table tbody td.rd-r { text-align: right; }
/* footer total row — share the body cells' padding + right-alignment so the
   totals line up under their column headers (without this, tfoot .rd-r falls
   back to left-align and every total drifts a column left). */
.rd-table tfoot td { padding: 9px 12px; vertical-align: middle; }
.rd-table tfoot td.rd-r { text-align: right; }

/* name cell with mono sku caption */
.rd-name { display: flex; align-items: center; gap: 10px; }
.rd-name .rd-name-main { min-width: 0; }
.rd-name .rd-name-t { font-weight: 600; color: var(--rd-ink); font-size: 12.5px; line-height: 1.25; }
.rd-name .rd-name-sku {
    font-family: var(--rd-mono); font-size: 10.5px; color: var(--rd-faint);
    letter-spacing: -.01em; margin-top: 1px;
}
/* Customer cell (daftar-pp Pelanggan column). MUST stay single-line — a wrapped company name would
   push the row past the virtualized 44px row-height contract and desync the window math. Caps width
   and ellipsis-truncates the longest names (full value stays in the cell's title tooltip). */
.vc-cust { display: block; max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* the signature: stock-level meter */
.rd-stock { display: inline-flex; align-items: center; gap: 9px; justify-content: flex-end; white-space: nowrap; }
.rd-stock .rd-stock-n { font-family: var(--rd-mono); font-size: 12px; color: var(--rd-ink); min-width: 38px; text-align: right; }
.rd-meter { width: 52px; height: 5px; border-radius: 99px; background: var(--rd-line); overflow: hidden; }
.rd-meter span { display: block; height: 100%; border-radius: 99px; background: var(--rd-ok); }
.rd-meter.is-warn span { background: var(--rd-warn); }
.rd-meter.is-bad span { background: var(--rd-bad); }

.rd-price { font-family: var(--rd-mono); font-size: 12px; color: var(--rd-ink); white-space: nowrap; }

/* status / level pills */
.rd-pill {
    display: inline-flex; align-items: center; gap: 5px;
    height: 19px; padding: 0 8px; border-radius: var(--rd-r-pill);
    font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    background: var(--rd-canvas); color: var(--rd-muted);
}
.rd-pill.is-ok { background: var(--rd-ok-soft); color: var(--rd-ok-ink); }
.rd-pill.is-warn { background: var(--rd-warn-soft); color: var(--rd-warn-ink); }
.rd-pill.is-bad { background: var(--rd-bad-soft); color: var(--rd-bad-ink); }
.rd-pill.is-off { background: var(--rd-canvas); color: var(--rd-muted); }

/* Planner priority (js/ui/pills.js prioPill). Tinggi is ACCENT BLUE, never red — red is reserved
   for alerts and Mendesak already owns it; priority and status are independent axes and must not
   look like one. `button.vc-prio` is the PP list's click-to-cycle control wearing the same pill. */
.rd-pill.is-prio-tinggi { background: var(--rd-accent-soft); color: var(--rd-accent-ink); }
.vc-prio .vc-prio-g { font-size: 8.5px; line-height: 1; }
button.vc-prio { border: 0; font-family: inherit; cursor: pointer; transition: box-shadow .14s; }
button.vc-prio:hover { box-shadow: 0 0 0 2px var(--rd-accent-soft); }
button.vc-prio:focus-visible { outline: 2px solid var(--rd-accent); outline-offset: 1px; }
/* Tinggi marker on the floor views (board.js cards, layar-operator tiles). Only Tinggi renders
   one — a badge on 32 of 35 cards marks nothing. */
.vc-mini-prio {
    display: inline-flex; align-items: center; gap: 3px;
    margin-left: 6px; padding: 0 6px; height: 15px; border-radius: var(--rd-r-pill);
    background: var(--rd-accent-soft); color: var(--rd-accent-ink);
    font-size: 8.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    white-space: nowrap; vertical-align: middle;
}

/* Global flash banner (session status/error), rendered by the layout above page content. */
.rd-flash {
    margin-bottom: 16px; padding: 11px 14px; border-radius: 10px;
    font-size: 13px; font-weight: 500;
    border: 1px solid var(--rd-ok); background: var(--rd-ok-soft); color: var(--rd-ok-ink);
}
.rd-flash.is-error { border-color: var(--rd-bad); background: var(--rd-bad-soft); color: var(--rd-bad-ink); }

.rd-tag {
    display: inline-flex; align-items: center; height: 18px; padding: 0 8px;
    border-radius: var(--rd-r-pill); font-size: 10px; font-weight: 600; color: #fff;
}

.rd-muted { color: var(--rd-faint); }
.rd-rowmenu { color: var(--rd-faint); }
.rd-rowmenu:hover { color: var(--rd-ink); }

.rd-empty { padding: 40px 16px; text-align: center; color: var(--rd-faint); font-size: 12.5px; }

/* table footer */
.rd-tfoot {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 12px; font-size: 12px; color: var(--rd-muted);
}
.rd-pager { display: inline-flex; gap: 4px; }
.rd-pager a, .rd-pager span {
    min-width: 28px; height: 28px; padding: 0 8px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--rd-line); border-radius: var(--rd-r-ctl);
    font-size: 12px; color: var(--rd-text); background: var(--rd-surface);
}
.rd-pager .is-on { background: var(--rd-accent-ink); border-color: var(--rd-accent-ink); color: #fff; }
.rd-pager .is-mute { color: var(--rd-faint); pointer-events: none; }

/* Server-rendered Laravel paginator wrapper. The redesign shell loads no Tailwind,
   so links()'s default Tailwind markup is functional but visually plain — a custom
   rd-styled paginator view is a reasonable follow-up. This just gives it spacing. */
.rd-pagination { margin-top: 12px; font-size: 12px; }
.rd-pagination a, .rd-pagination button { color: var(--rd-accent-ink); }
.rd-pagination svg { display: inline; width: 16px; height: 16px; vertical-align: middle; }

/* ==========================================================================
   Detail page
   ========================================================================== */
.rd-hero {
    background: var(--rd-surface);
    border: 1px solid var(--rd-line);
    border-radius: var(--rd-r-card);
    padding: 16px 18px;
}
.rd-hero-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.rd-hero h2 { font-size: 21px; letter-spacing: -.01em; }
.rd-hero-sku { font-family: var(--rd-mono); font-size: 12px; color: var(--rd-muted); margin-top: 3px; }
.rd-hero-facts { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; font-size: 12px; color: var(--rd-muted); }
.rd-hero-facts b { color: var(--rd-text); font-weight: 600; }
.rd-hero-actions { display: flex; gap: 8px; flex-shrink: 0; }

/* stat strip */
.rd-stats {
    display: grid; grid-template-columns: repeat(4, 1fr);
    margin-top: 16px; border: 1px solid var(--rd-line); border-radius: var(--rd-r-card);
    overflow: hidden;
}
.rd-stat { padding: 12px 14px; border-right: 1px solid var(--rd-line); background: var(--rd-surface); }
.rd-stat:last-child { border-right: 0; }
.rd-stat .rd-stat-l { font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--rd-faint); }
.rd-stat .rd-stat-v { margin-top: 6px; font-size: 23px; font-weight: 600; color: var(--rd-ink); font-variant-numeric: tabular-nums; line-height: 1; }
.rd-stat .rd-stat-v small { font-size: 12px; font-weight: 600; color: var(--rd-muted); }
.rd-stat .rd-stat-s { margin-top: 5px; font-size: 11px; color: var(--rd-muted); }

.rd-grid2 { display: grid; grid-template-columns: minmax(0,1.7fr) minmax(0,1fr); gap: 14px; margin-top: 14px; }

/* definition list */
.rd-dl { display: grid; grid-template-columns: auto 1fr; gap: 9px 16px; }
.rd-dl dt { font-size: 11px; color: var(--rd-faint); letter-spacing: .04em; }
.rd-dl dd { margin: 0; color: var(--rd-text); font-size: 12.5px; text-align: right; }

/* warehouse mini rows */
.rd-whrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--rd-line); }
.rd-whrow:last-child { border-bottom: 0; }
.rd-whrow .rd-wh-name { font-size: 12.5px; color: var(--rd-text); }
.rd-whrow .rd-wh-sub { font-size: 10.5px; color: var(--rd-faint); margin-top: 1px; }

/* movements timeline */
.rd-tl { position: relative; padding-left: 18px; }
.rd-tl::before { content: ""; position: absolute; left: 5px; top: 4px; bottom: 4px; width: 1.5px; background: var(--rd-line); }
.rd-tl-item { position: relative; padding: 0 0 14px; }
.rd-tl-item:last-child { padding-bottom: 0; }
.rd-tl-item::before {
    content: ""; position: absolute; left: -16px; top: 4px;
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--rd-surface); border: 2px solid var(--rd-faint);
}
.rd-tl-item.is-in::before { border-color: var(--rd-ok); }
.rd-tl-item.is-out::before { border-color: var(--rd-bad); }
.rd-tl-item.is-adjust::before { border-color: var(--rd-warn); }
.rd-tl-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rd-tl-t { font-size: 12.5px; color: var(--rd-ink); font-weight: 600; }
.rd-tl-q { font-family: var(--rd-mono); font-size: 12px; }
.rd-tl-q.is-pos { color: var(--rd-ok-ink); }
.rd-tl-q.is-neg { color: var(--rd-bad-ink); }
.rd-tl-sub { font-size: 11px; color: var(--rd-faint); margin-top: 2px; }

/* ==========================================================================
   Form page
   ========================================================================== */
.rd-formgrid { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 18px; align-items: start; }
/* Single-column variant for simple forms that have no summary rail (Tags/Brands/etc.) —
   avoids the dead 320px gutter left by the two-column default. */
.rd-formgrid.is-single { grid-template-columns: minmax(0,1fr); max-width: 760px; }
.rd-form-col { display: flex; flex-direction: column; gap: 14px; }

.rd-section { background: var(--rd-surface); border: 1px solid var(--rd-line); border-radius: var(--rd-r-card); }
.rd-section-head { padding: 12px 16px 11px; border-bottom: 1px solid var(--rd-line); background: var(--rd-head-tint); border-radius: var(--rd-r-card) var(--rd-r-card) 0 0; }
.rd-section-head h3 { font-size: 13px; }
.rd-section-head p { margin: 2px 0 0; font-size: 11.5px; color: var(--rd-faint); }
.rd-section-body { padding: 14px 16px; }

.rd-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.rd-field { display: flex; flex-direction: column; }
.rd-field.is-full { grid-column: 1 / -1; }
.rd-field > label {
    font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
    color: var(--rd-muted); margin-bottom: 4px;
}
.rd-field > label .rd-req { color: var(--rd-bad); margin-left: 2px; }
.rd-field .rd-hint { font-size: 10.5px; color: var(--rd-faint); margin-top: 4px; line-height: 1.45; }
.rd-input:focus, .rd-select:focus, .rd-search input:focus {
    outline: none; border-color: var(--rd-accent);
    box-shadow: 0 0 0 3px rgba(36,86,198,.16);
}

/* sticky summary rail */
.rd-rail { position: sticky; top: calc(var(--rd-cmdh, 84px) + 8px); display: flex; flex-direction: column; gap: 14px; }
.rd-rail .rd-card-pad { padding: 14px 16px; }
.rd-sku-preview {
    font-family: var(--rd-mono); font-size: 15px; color: var(--rd-ink);
    background: var(--rd-canvas); border: 1px dashed var(--rd-line-2);
    border-radius: var(--rd-r-ctl); padding: 10px 12px; word-break: break-all;
}
.rd-sku-preview .rd-sku-empty { color: var(--rd-faint); }
.rd-rail-note { font-size: 11.5px; color: var(--rd-muted); line-height: 1.5; }

/* sticky action bar.
   The content row (note + buttons) stays inside the narrow form column, but the
   bar's background must bleed edge-to-edge across the full content area. We paint
   it with a full-bleed ::before (width:100vw) and clip the overflow on the page
   that actually has an action bar — `clip` (not `hidden`) so the sticky cmdbar /
   action bar stay anchored to the viewport instead of a new scroll container. */
.rd-content:has(.rd-actionbar) { overflow-x: clip; }
.rd-actionbar {
    position: sticky; bottom: 0; z-index: 18;
    margin: auto -24px -64px;  /* margin-top:auto pins the bar to the bottom on short forms */
    padding: 12px 24px;
    display: flex; align-items: center; justify-content: flex-end; gap: 8px;
}
.rd-actionbar::before {
    content: ""; position: absolute; inset: 0 auto 0 0;
    width: 100vw; z-index: -1;
    background: rgba(255,255,255,.9);
    backdrop-filter: saturate(1.4) blur(8px);
    border-top: 1px solid var(--rd-line);
    box-shadow: var(--rd-bar-shadow);
}
.rd-actionbar .rd-ab-note { margin-right: auto; font-size: 11.5px; color: var(--rd-faint); }
/* Only on pages with an action bar: let the form fill the content column so the bar
   sits at the bottom of the viewport on short forms (and scrolls naturally on tall ones). */
.rd-main:has(.rd-actionbar) { flex: 1; display: flex; flex-direction: column; }
.rd-main:has(.rd-actionbar) > form { flex: 1; display: flex; flex-direction: column; }

/* prototype ribbon */
.rd-proto {
    display: inline-flex; align-items: center; gap: 6px;
    height: 20px; padding: 0 9px; border-radius: var(--rd-r-pill);
    background: #fff4d6; color: #8a5a00; border: 1px solid #f3d98a;
    font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}

/* ==========================================================================
   PEMBELIAN (Purchasing) module additions
   ========================================================================== */

/* --- KPI stat strip variant with accent feature tile -------------------- */
.rd-stat.is-feature { background: linear-gradient(180deg, #fbfeff, #f1fbfd); }
.rd-stat.is-feature .rd-stat-v { color: var(--rd-accent-ink); }
.rd-stat-v.is-money { font-size: 18px; }
.rd-stat-v.is-money small { font-size: 11px; }

/* --- pipeline board (overview hero) ------------------------------------- */
.rd-pipe {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
    margin-top: 16px;
}
.rd-lane {
    position: relative;
    background: var(--rd-surface); border: 1px solid var(--rd-line);
    border-radius: var(--rd-r-card); padding: 14px 14px 12px;
    display: flex; flex-direction: column; min-height: 132px;
    transition: border-color .14s, box-shadow .14s, transform .14s;
}
.rd-lane:hover { border-color: var(--rd-line-2); box-shadow: 0 8px 22px -16px rgba(15,23,34,.4); transform: translateY(-1px); }
.rd-lane::after {
    content: ""; position: absolute; right: -8px; top: 50%; z-index: 2;
    width: 16px; height: 16px; transform: translateY(-50%) rotate(45deg);
    border-top: 1px solid var(--rd-line); border-right: 1px solid var(--rd-line);
    background: var(--rd-canvas);
}
.rd-pipe .rd-lane:last-child::after { display: none; }
.rd-lane-stage { font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--rd-accent-ink); }
.rd-lane-label { margin-top: 3px; font-size: 14px; font-weight: 600; color: var(--rd-ink); }
.rd-lane-sub { font-size: 11px; color: var(--rd-faint); margin-top: 1px; }
.rd-lane-count { margin-top: auto; font-size: 30px; font-weight: 700; color: var(--rd-ink); line-height: 1; font-variant-numeric: tabular-nums; }
.rd-lane-count small { font-size: 12px; font-weight: 600; color: var(--rd-muted); }
.rd-lane-val { margin-top: 5px; font-size: 11.5px; color: var(--rd-muted); }
.rd-lane-val b { color: var(--rd-text); font-weight: 600; font-family: var(--rd-mono); }

/* --- warehouse pipeline: delivery schedule + 4-stage operational board --- */

/* label band above the operational board */
.rd-board-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 22px 2px 12px; }
.rd-board-head h2 { font-size: 14.5px; font-weight: 600; color: var(--rd-ink); }
.rd-board-head .rd-board-sub { font-size: 11.5px; color: var(--rd-muted); }

/* delivery schedule — date-spined agenda (top zone) */
.rd-agenda { display: flex; flex-direction: column; }
.rd-agenda-day { display: grid; grid-template-columns: 60px minmax(0,1fr); gap: 16px; padding: 13px 14px; border-bottom: 1px solid var(--rd-line); }
.rd-agenda-day:last-child { border-bottom: 0; }
.rd-agenda-day.is-today { background: var(--rd-accent-soft); }
.rd-date { text-align: center; padding-top: 2px; }
.rd-date-num { font-size: 25px; font-weight: 700; color: var(--rd-ink); line-height: 1; font-variant-numeric: tabular-nums; }
.rd-date.is-today .rd-date-num { color: var(--rd-accent-ink); }
.rd-date-mon { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--rd-faint); margin-top: 4px; }
.rd-date-dow { font-size: 10.5px; color: var(--rd-muted); margin-top: 1px; }
.rd-date-tag { display: inline-block; margin-top: 6px; font-size: 8.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--rd-accent-ink); }
.rd-agenda-list { display: flex; flex-direction: column; gap: 8px; min-width: 0; }

/* one scheduled trip */
.rd-trip { display: flex; align-items: center; gap: 13px; padding: 9px 12px; border: 1px solid var(--rd-line); border-radius: var(--rd-r-ctl); background: var(--rd-surface); transition: border-color .14s; }
.rd-trip:hover { border-color: var(--rd-line-2); }
.rd-trip-time { font-family: var(--rd-mono); font-size: 11.5px; color: var(--rd-muted); width: 46px; flex-shrink: 0; text-align: center; }
.rd-trip-main { min-width: 0; flex: 1; }
.rd-trip-t { font-size: 12.5px; color: var(--rd-text); }
.rd-trip-t b { color: var(--rd-ink); font-weight: 600; }
.rd-trip-sub { display: flex; flex-wrap: wrap; gap: 1px 12px; margin-top: 2px; font-size: 11px; color: var(--rd-faint); }
.rd-trip-meta { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

/* the 4-stage operational board */
.rd-board { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; align-items: start; }
.rd-col { position: relative; display: flex; flex-direction: column; background: var(--rd-surface-2); border: 1px solid var(--rd-line); border-radius: var(--rd-r-card); }
/* connective flow chevron between lanes — reads the board left-to-right */
.rd-board .rd-col::after {
    content: ""; position: absolute; right: -8px; top: 24px; z-index: 2;
    width: 13px; height: 13px; transform: translateY(-50%) rotate(45deg);
    border-top: 1px solid var(--rd-line-2); border-right: 1px solid var(--rd-line-2);
    background: var(--rd-canvas);
}
.rd-board .rd-col:last-child::after { display: none; }
.rd-col-head { padding: 10px 12px; background: var(--rd-surface); border-bottom: 1px solid var(--rd-line); border-top: 2px solid var(--rd-faintest); border-radius: var(--rd-r-card) var(--rd-r-card) 0 0; }
.rd-col-stage { font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--rd-faint); }
.rd-col-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 3px; }
.rd-col-title h3 { font-size: 13px; font-weight: 600; }
.rd-col-n { font-family: var(--rd-mono); font-size: 11.5px; font-weight: 600; color: var(--rd-muted); background: var(--rd-canvas); border-radius: var(--rd-r-pill); padding: 1px 9px; }
.rd-col-body { display: flex; flex-direction: column; gap: 8px; padding: 10px; }
.rd-col-empty { padding: 20px 10px; text-align: center; font-size: 11px; color: var(--rd-faint); }

/* stage tones — Akan Datang stays calm slate (inbound supply); the outbound
   lanes progress accent → warn → ok */
.rd-col.is-plan  .rd-col-head { border-top-color: var(--rd-accent); }
.rd-col.is-plan  .rd-col-stage { color: var(--rd-accent-ink); }
.rd-col.is-inden .rd-col-head { border-top-color: var(--rd-warn); }
.rd-col.is-inden .rd-col-stage { color: var(--rd-warn-ink); }
.rd-col.is-ready .rd-col-head { border-top-color: var(--rd-ok); }
.rd-col.is-ready .rd-col-stage { color: var(--rd-ok-ink); }

/* a card inside a lane */
.rd-mini { background: var(--rd-surface); border: 1px solid var(--rd-line); border-radius: var(--rd-r-ctl); padding: 9px 11px; transition: border-color .14s, box-shadow .14s; }
.rd-mini:hover { border-color: var(--rd-line-2); box-shadow: 0 6px 16px -14px rgba(15,23,34,.45); }
.rd-mini-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.rd-mini-no { font-family: var(--rd-mono); font-size: 11.5px; font-weight: 600; color: var(--rd-ink); }
.rd-mini-cust { font-size: 11px; color: var(--rd-muted); margin-top: 2px; line-height: 1.35; }
.rd-mini-sku { font-family: var(--rd-mono); font-size: 10.5px; color: var(--rd-faint); margin-top: 4px; }
.rd-mini-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.rd-mini-val { font-family: var(--rd-mono); font-size: 11.5px; font-weight: 600; color: var(--rd-ink); }
.rd-mini-meta { font-size: 10.5px; color: var(--rd-faint); }
.rd-mini-note { display: flex; align-items: center; gap: 5px; margin-top: 7px; font-size: 10.5px; color: var(--rd-muted); }
.rd-mini-note svg { width: 12px; height: 12px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 1.8; }
.rd-mini-note.is-ok { color: var(--rd-ok-ink); }
.rd-mini-note.is-faint { color: var(--rd-faint); }
/* completed-stage ghost card ("Tampilkan tahap selesai") — dashed + canvas so it reads as history
   behind the solid, active work cards; no hover lift. */
.rd-mini.is-done { background: var(--rd-canvas); border-style: dashed; }
.rd-mini.is-done .rd-mini-no { color: var(--rd-muted); font-weight: 500; }
.rd-mini.is-done:hover { box-shadow: none; border-color: var(--rd-line-2); }
.rd-eta { display: inline-flex; align-items: center; height: 18px; padding: 0 7px; border-radius: var(--rd-r-pill); background: var(--rd-canvas); color: var(--rd-muted); font-family: var(--rd-mono); font-size: 10px; font-weight: 600; white-space: nowrap; flex-shrink: 0; }
.rd-qty { font-family: var(--rd-mono); font-size: 11px; color: var(--rd-muted); }

/* --- the signature: DP / balance payment split bar ---------------------- */
.rd-split { display: flex; flex-direction: column; gap: 7px; }
.rd-split-track {
    display: flex; height: 8px; border-radius: 99px; overflow: hidden;
    background: var(--rd-line);
}
.rd-split-track > span { display: block; height: 100%; }
.rd-split-track > span.is-dp { background: var(--rd-accent); }
.rd-split-track > span.is-paid { background: var(--rd-ok); }
.rd-split-track > span.is-due { background: var(--rd-warn); }
.rd-split-track > span.is-due.is-overdue { background: var(--rd-bad); }
.rd-split-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 11px; color: var(--rd-muted); }
.rd-split-legend span { display: inline-flex; align-items: center; gap: 6px; }
.rd-split-legend i { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }
.rd-split-legend i.is-dp { background: var(--rd-accent); }
.rd-split-legend i.is-paid { background: var(--rd-ok); }
.rd-split-legend i.is-due { background: var(--rd-warn); }
.rd-split-legend i.is-due.is-overdue { background: var(--rd-bad); }
.rd-split-legend b { color: var(--rd-ink); font-weight: 600; font-family: var(--rd-mono); }

/* compact inline split for table cells */
.rd-split.is-inline { flex-direction: row; align-items: center; gap: 9px; justify-content: flex-end; }
.rd-split.is-inline .rd-split-track { width: 72px; flex-shrink: 0; }
.rd-split.is-inline.is-tri .rd-split-track { width: 104px; }  /* 3-segment (commercial) needs more room */
.rd-split-pct { font-family: var(--rd-mono); font-size: 11.5px; color: var(--rd-muted); min-width: 30px; text-align: right; }

/* --- lifecycle stepper -------------------------------------------------- */
.rd-steps { display: flex; padding: 4px 6px 2px; margin: 0; list-style: none; }
.rd-step { flex: 1; position: relative; text-align: center; min-width: 0; }
.rd-step::before {
    content: ""; position: absolute; top: 10px; left: -50%; width: 100%; height: 2px;
    background: var(--rd-line-2); z-index: 0;
}
.rd-step:first-child::before { display: none; }
.rd-step.is-done::before, .rd-step.is-current::before { background: var(--rd-accent); }
.rd-step-dot {
    position: relative; z-index: 1; margin: 0 auto;
    width: 22px; height: 22px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--rd-surface); border: 2px solid var(--rd-line-2);
    font-size: 10px; font-weight: 700; color: var(--rd-faint);
    font-variant-numeric: tabular-nums;
}
.rd-step-dot svg { width: 12px; height: 12px; stroke: #fff; stroke-width: 3; fill: none; }
.rd-step.is-done .rd-step-dot { background: var(--rd-accent); border-color: var(--rd-accent); color: #fff; }
.rd-step.is-current .rd-step-dot { border-color: var(--rd-accent); color: var(--rd-accent-ink); box-shadow: 0 0 0 4px rgba(36,86,198,.14); }
.rd-step-label { margin-top: 8px; font-size: 11px; color: var(--rd-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-step.is-current .rd-step-label { color: var(--rd-ink); font-weight: 600; }
.rd-step.is-done .rd-step-label { color: var(--rd-muted); }
.rd-steps-cancelled {
    display: flex; align-items: center; gap: 8px; padding: 10px 12px;
    background: var(--rd-bad-soft); border-radius: var(--rd-r-ctl);
    color: var(--rd-bad-ink); font-size: 12.5px; font-weight: 600;
}

/* --- supplier avatar ---------------------------------------------------- */
.rd-ava {
    width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; letter-spacing: .02em;
    background: var(--rd-accent-soft); color: var(--rd-accent-ink);
}
.rd-ava.is-import { background: #efeafe; color: #6536c7; }
.rd-ava.is-lg { width: 44px; height: 44px; border-radius: 10px; font-size: 15px; }

/* --- attention list (overview) ------------------------------------------ */
.rd-attn-row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-bottom: 1px solid var(--rd-line); }
.rd-attn-row:last-child { border-bottom: 0; }
.rd-attn-row:hover { background: #f5f8fe; }
.rd-attn-ic {
    width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
}
.rd-attn-ic svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 1.9; fill: none; }
.rd-attn-ic.is-bad { background: var(--rd-bad-soft); color: var(--rd-bad-ink); }
.rd-attn-ic.is-warn { background: var(--rd-warn-soft); color: var(--rd-warn-ink); }
.rd-attn-ic.is-mute { background: var(--rd-canvas); color: var(--rd-muted); }
.rd-attn-main { min-width: 0; flex: 1; }
.rd-attn-t { font-size: 12.5px; font-weight: 600; color: var(--rd-ink); }
.rd-attn-t .rd-attn-no { font-family: var(--rd-mono); font-size: 11px; color: var(--rd-accent-ink); margin-left: 6px; }
.rd-attn-sub { font-size: 11px; color: var(--rd-faint); margin-top: 1px; }
.rd-attn-amt { font-family: var(--rd-mono); font-size: 12px; color: var(--rd-ink); white-space: nowrap; }
.rd-empty-soft { padding: 26px 14px; text-align: center; color: var(--rd-faint); font-size: 12px; }

/* --- document trail (cross-pipeline links) ------------------------------ */
.rd-trail { position: relative; padding-left: 20px; }
.rd-trail::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 1.5px; background: var(--rd-line); }
.rd-trail-item { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 0; }
.rd-trail-item::before {
    content: ""; position: absolute; left: -18px; top: 12px;
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--rd-surface); border: 2px solid var(--rd-accent);
}
.rd-trail-item.is-self::before { background: var(--rd-accent); }
.rd-trail-l { min-width: 0; }
.rd-trail-type { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--rd-faint); }
.rd-trail-no { font-family: var(--rd-mono); font-size: 12px; color: var(--rd-ink); }
.rd-trail-no a:hover { color: var(--rd-accent-ink); }
.rd-trail-self { font-family: var(--rd-mono); font-size: 12px; color: var(--rd-ink); font-weight: 600; }

/* --- editable line table (forms) ---------------------------------------- */
.rd-table td.rd-cellpad { padding: 6px 8px; }
.rd-cellinput {
    width: 100%; height: 28px; padding: 0 8px;
    border: 1px solid var(--rd-line-2); border-radius: 5px;
    background: var(--rd-surface); color: var(--rd-text);
    font-family: inherit; font-size: 12px;
}
.rd-cellinput.rd-num-input { text-align: right; font-family: var(--rd-mono); }
.rd-cellinput:focus { outline: none; border-color: var(--rd-accent); box-shadow: 0 0 0 3px rgba(36,86,198,.16); }
.rd-cellinput::placeholder { color: var(--rd-faint); }
.rd-cell-amt { font-family: var(--rd-mono); font-size: 12px; color: var(--rd-ink); white-space: nowrap; }
.rd-line-del {
    width: 26px; height: 26px; padding: 0; border: 0; border-radius: 5px;
    background: transparent; color: var(--rd-faint); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.rd-line-del:hover { background: var(--rd-bad-soft); color: var(--rd-bad); }
.rd-line-del svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; fill: none; }
.rd-line-add {
    display: inline-flex; align-items: center; gap: 7px;
    margin: 10px 0 0; padding: 7px 12px;
    border: 1px dashed var(--rd-line-2); border-radius: var(--rd-r-ctl);
    background: var(--rd-surface-2); color: var(--rd-accent-ink);
    font-size: 12px; font-weight: 600; cursor: pointer; width: 100%;
    justify-content: center; transition: border-color .14s, background .14s;
}
.rd-line-add:hover { border-color: var(--rd-accent-ink); background: var(--rd-accent-soft); }
.rd-line-add svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 2; fill: none; }

/* source-pull picker rows (proforma/commercial/PL create) */
.rd-pick { display: flex; flex-direction: column; gap: 8px; }
.rd-pick-row {
    display: flex; align-items: center; gap: 12px; padding: 11px 12px;
    border: 1px solid var(--rd-line); border-radius: var(--rd-r-ctl);
    background: var(--rd-surface); transition: border-color .14s, background .14s;
}
.rd-pick-row:has(input:checked) { border-color: var(--rd-accent); background: var(--rd-accent-soft); }
.rd-pick-row input { width: 16px; height: 16px; accent-color: var(--rd-accent); flex-shrink: 0; }
.rd-pick-main { flex: 1; min-width: 0; }
.rd-pick-no { font-family: var(--rd-mono); font-size: 12.5px; color: var(--rd-ink); font-weight: 600; }
.rd-pick-sub { font-size: 11px; color: var(--rd-faint); margin-top: 1px; }
.rd-pick-amt { font-family: var(--rd-mono); font-size: 12.5px; color: var(--rd-ink); white-space: nowrap; }

/* --- form totals panel (rail) ------------------------------------------- */
.rd-totals { display: flex; flex-direction: column; }
.rd-totals-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--rd-line); font-size: 12.5px; color: var(--rd-muted); }
.rd-totals-row .v { font-family: var(--rd-mono); font-size: 12.5px; color: var(--rd-text); }
.rd-totals-row.is-accent .v { color: var(--rd-accent-ink); }
.rd-totals-row.is-grand { border-bottom: 0; padding-top: 11px; font-size: 13px; color: var(--rd-ink); font-weight: 600; }
.rd-totals-row.is-grand .v { font-size: 16px; font-weight: 700; color: var(--rd-ink); }

/* --- money / currency helpers ------------------------------------------- */
.rd-cur { font-size: 10.5px; font-weight: 600; letter-spacing: .04em; color: var(--rd-faint); }
.rd-money-big { font-family: var(--rd-mono); font-variant-numeric: tabular-nums; }
.rd-sub2 { font-size: 10.5px; color: var(--rd-faint); margin-top: 1px; }

/* --- a11y / motion ------------------------------------------------------ */
.rd-body :focus-visible {
    /* deep teal clears the 3:1 non-text-contrast floor on both the white
       content surfaces and the dark sidebar */
    outline: 2px solid var(--rd-accent-ink);
    outline-offset: 2px;
    border-radius: 3px;
}
/* visually-hidden text for screen-reader-only state words */
.rd-sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* horizontal scroll wrapper for dense editable line tables on small screens */
.rd-scrollx { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (prefers-reduced-motion: reduce) {
    .rd-body * { transition: none !important; animation: none !important; }
}

/* --- responsive --------------------------------------------------------- */
@media (max-width: 1080px) {
    /* minmax(0, 1fr), not a bare 1fr: a grid item's automatic min-width is otherwise its
       content's max-content size (same "auto min-size" gotcha as flexbox), so a wide,
       non-wrapping table inside a .rd-card (e.g. dashboard's PP mendesak table) forces this
       single column — and the whole page — wider than the viewport on narrow screens. */
    .rd-grid2 { grid-template-columns: minmax(0, 1fr); }
    .rd-formgrid { grid-template-columns: 1fr; }
    .rd-rail { position: static; }
    .rd-pipe { grid-template-columns: repeat(2, 1fr); }
    /* 2x2 wrap: directional arrows become ambiguous (some would point into the
       gutter), so drop them — the grid reads naturally left-to-right, top-to-bottom */
    .rd-lane::after { display: none; }
    .rd-board { grid-template-columns: repeat(2, 1fr); }
    .rd-board .rd-col::after { display: none; }
}
@media (max-width: 860px) {
    /* rail is desktop-only; on mobile the sidebar is the off-canvas drawer */
    .rd-content, .rd-shell.is-rail .rd-content { margin-left: 0; }
    .rd-side, .rd-shell.is-rail .rd-side { width: 240px; transform: translateX(-100%); transition: transform .22s; z-index: 80; box-shadow: none; }
    /* The shell keeps its `is-rail` class at every width (rail is a desktop-only look, but the
       class isn't stripped on mobile), so `.rd-shell.is-rail .rd-side` sets the off-canvas
       translateX at specificity (0,3,0). The open rule must match that reach or the drawer
       can't slide in when the burger adds `is-open` while the rail is collapsed. */
    .rd-side.is-open, .rd-shell.is-rail .rd-side.is-open { transform: translateX(0); box-shadow: 0 20px 60px -10px rgba(0,0,0,.5); }
    .rd-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 70; }
    .rd-backdrop[hidden] { display: none; }
    .rd-burger { display: inline-flex !important; }
    /* the drawer's own close (×) — burger is buried under the drawer/backdrop once open, so the
       drawer needs its own in-panel dismiss affordance here (see js/app.js wireDrawer). */
    .rd-side-close { display: inline-flex; }
    /* rail toggle is a desktop-only affordance — drop it from the mobile drawer foot, which
       also removes the one way a user could set `is-rail` on a phone (see the is-open rule
       above). `.rd-side-foot` keeps its margin-top:auto so "DEMO · 2026" stays pinned bottom. */
    .rd-rail-toggle { display: none; }
    .rd-stats { grid-template-columns: repeat(2, 1fr); }
    .rd-stat:nth-child(2) { border-right: 0; }
    .rd-stat:nth-child(1), .rd-stat:nth-child(2) { border-bottom: 1px solid var(--rd-line); }
    /* drop sticky stacking on small screens so the three bars can't collide */
    .rd-cmdbar { position: static; }
    .rd-toolbar { flex-wrap: wrap; position: static; }
    .rd-search { flex: 1 1 100%; }
    .rd-table.is-sticky thead th { position: static; }
    /* let the dense table scroll horizontally rather than clip (thead is static here) */
    .rd-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
.rd-burger { display: none; }
@media (max-width: 640px) {
    .rd-main { padding: 14px 14px 64px; }
    .rd-cmdbar { padding: 12px 14px; flex-wrap: wrap; }
    .rd-fields { grid-template-columns: 1fr; }
    .rd-stats { grid-template-columns: 1fr; }
    .rd-stat { border-right: 0; border-bottom: 1px solid var(--rd-line); }
    .rd-stat:last-child { border-bottom: 0; }
    .rd-hide-sm { display: none !important; }
    .rd-actionbar { margin-left: -14px; margin-right: -14px; padding-left: 14px; padding-right: 14px; }
    .rd-pipe { grid-template-columns: 1fr; }
    .rd-board { grid-template-columns: 1fr; }
    .rd-agenda-day { grid-template-columns: 50px minmax(0,1fr); gap: 12px; padding: 12px; }
    .rd-lane { min-height: 0; }
    /* single column: every lane (except the last) points down to the next */
    .rd-lane::after { display: block; right: 50%; top: auto; bottom: -8px; transform: translateX(50%) rotate(135deg); }
    .rd-pipe .rd-lane:last-child::after { display: none; }
    /* let lifecycle stage labels wrap instead of truncating to ellipsis */
    .rd-step-label { font-size: 10px; white-space: normal; text-overflow: clip; line-height: 1.2; }
}

/* ===== VANCO additions (folded from mockups) ===== */
@keyframes vcfade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.vc-pagehead{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin:2px 2px 14px}
.vc-pagehead h2{font-size:19px;letter-spacing:-.01em}
.vc-pagehead .vc-sub{font-size:12px;color:var(--rd-muted);margin-top:4px}
.vc-pagehead .vc-sub b{color:var(--rd-text);font-weight:600}
/* callouts */
.vc-callout{display:flex;gap:12px;align-items:flex-start;padding:12px 15px;border-radius:10px;font-size:12.5px;line-height:1.55;margin-bottom:14px}
.vc-callout svg{width:19px;height:19px;flex-shrink:0;fill:none;stroke-width:1.8;margin-top:1px}
.vc-callout.is-good{border:1px solid var(--rd-accent);background:var(--rd-accent-soft);color:var(--rd-accent-ink)}
.vc-callout.is-good svg{stroke:var(--rd-accent-ink)}
.vc-callout.is-ok{border:1px solid var(--rd-ok);background:var(--rd-ok-soft);color:var(--rd-ok-ink)}
.vc-callout.is-ok svg{stroke:var(--rd-ok-ink)}
.vc-callout b{font-weight:700}
.vc-callout.is-bad{border:1px solid var(--rd-bad);background:var(--rd-bad-soft);color:var(--rd-bad-ink)}
.vc-callout.is-bad svg{stroke:var(--rd-bad-ink)}
/* progress */
.vc-prog{display:flex;align-items:center;gap:9px;min-width:130px;justify-content:flex-end}
.vc-prog .bar{flex:1;max-width:90px;height:6px;border-radius:99px;background:var(--rd-line);overflow:hidden}
.vc-prog .bar>span{display:block;height:100%;background:var(--rd-accent);border-radius:99px}
.vc-prog .bar>span.is-ok{background:var(--rd-ok)}
.vc-prog .pct{font-family:var(--rd-mono);font-size:11px;color:var(--rd-muted);min-width:32px;text-align:right}
.vc-stagechip{display:inline-flex;align-items:center;height:18px;padding:0 9px;border-radius:999px;background:var(--rd-canvas);color:var(--rd-muted);font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.vc-stagechip.is-active{background:var(--rd-accent-soft);color:var(--rd-accent-ink)}
.vc-stagechip.is-done{background:var(--rd-ok-soft);color:var(--rd-ok-ink)}
.rd-table tbody tr.vc-click{cursor:pointer}
/* per-rakitan rows (detail) */
.vc-sa-row{display:grid;grid-template-columns:minmax(0,1.5fr) auto minmax(140px,1fr);gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--rd-line)}
.vc-sa-row:last-child{border-bottom:0}
.vc-sa-name{font-weight:600;color:var(--rd-ink);font-size:12.5px}
.vc-sa-sku{font-family:var(--rd-mono);font-size:10.5px;color:var(--rd-faint);margin-top:1px}
/* operator screen */
.vc-op{display:flex;align-items:center;gap:16px;padding:15px 17px;border:1px solid var(--rd-line);border-radius:12px;background:var(--rd-surface);margin-bottom:11px}
.vc-op.is-now{border-color:var(--rd-accent);box-shadow:0 0 0 3px var(--rd-accent-soft)}
.vc-op .seqn{width:30px;height:30px;border-radius:8px;background:var(--rd-canvas);color:var(--rd-muted);display:flex;align-items:center;justify-content:center;font-family:var(--rd-mono);font-weight:700;font-size:13px;flex-shrink:0}
.vc-op.is-now .seqn{background:var(--rd-accent);color:#fff}
.vc-op .main{flex:1;min-width:0}
.vc-op .t{font-size:15px;font-weight:600;color:var(--rd-ink)}
.vc-op .sub{font-size:12px;color:var(--rd-muted);margin-top:3px;display:flex;flex-wrap:wrap;gap:3px 14px}
.vc-op .sub .ok{color:var(--rd-ok-ink);font-weight:600}
.vc-bigdone{height:46px;padding:0 24px;border-radius:10px;border:0;background:var(--rd-accent);color:#fff;font-weight:700;font-size:14px;font-family:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:8px;flex-shrink:0;box-shadow:0 8px 18px -10px rgba(36,86,198,.7)}
.vc-bigdone:hover{background:var(--rd-accent-hover)}
.vc-bigdone svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2.2}
.vc-bigdone.is-ghost{background:var(--rd-surface);color:var(--rd-muted);border:1px solid var(--rd-line-2);box-shadow:none;font-weight:600}
.vc-bigdone.is-ghost svg{stroke:var(--rd-muted)}
/* load bars */
.vc-load-row{display:grid;grid-template-columns:130px 1fr 96px;gap:14px;align-items:center;padding:13px 2px;border-bottom:1px solid var(--rd-line)}
.vc-load-row:last-child{border-bottom:0}
.vc-load-name{font-weight:600;color:var(--rd-ink);font-size:12.5px}
.vc-load-bar{height:11px;border-radius:99px;background:var(--rd-line);overflow:hidden}
.vc-load-bar>span{display:block;height:100%;border-radius:99px;background:var(--rd-accent)}
.vc-load-bar>span.is-warn{background:var(--rd-warn)}
.vc-load-bar>span.is-bad{background:var(--rd-bad)}
.vc-load-meta{text-align:right;font-family:var(--rd-mono);font-size:12px;color:var(--rd-muted)}
.rd-pill.is-make{background:var(--rd-accent-soft);color:var(--rd-accent-ink)}
.rd-board.is-6{grid-template-columns:repeat(6,minmax(0,1fr))}
@media(max-width:1140px){.rd-board.is-6{grid-template-columns:repeat(3,1fr)}.rd-board.is-6 .rd-col::after{display:none}}
@media(max-width:720px){.rd-board.is-6{grid-template-columns:1fr}.vc-sa-row{grid-template-columns:1fr auto}}
.rd-col.is-cut .rd-col-head{border-top-color:#2456c6}.rd-col.is-cut .rd-col-stage{color:#1a429b}
.rd-col.is-mold .rd-col-head{border-top-color:#6536c7}.rd-col.is-mold .rd-col-stage{color:#6536c7}
.rd-col.is-weld .rd-col-head{border-top-color:var(--rd-warn)}.rd-col.is-weld .rd-col-stage{color:var(--rd-warn-ink)}
.rd-col.is-asm .rd-col-head{border-top-color:#0e7c86}.rd-col.is-asm .rd-col-stage{color:#0e7c86}
.rd-col.is-paint .rd-col-head{border-top-color:#c026a3}.rd-col.is-paint .rd-col-stage{color:#a01f86}
.rd-col.is-qc .rd-col-head{border-top-color:var(--rd-ok)}.rd-col.is-qc .rd-col-stage{color:var(--rd-ok-ink)}
/* BOM tree */
.vc-node{display:flex;align-items:center;gap:9px;min-width:0}
.vc-node .vc-twig{color:var(--rd-faintest);font-family:var(--rd-mono);font-size:12px;white-space:pre}
.vc-node .vc-cap{font-weight:600;color:var(--rd-ink);font-size:12.5px}
.vc-node .vc-sku{font-family:var(--rd-mono);font-size:10.5px;color:var(--rd-faint);margin-left:2px}
.rd-pill.is-labor{background:#efeafe;color:#6536c7}
.rd-pill.is-buy{background:var(--rd-canvas);color:var(--rd-muted)}
.vc-mini-stage{display:inline-flex;align-items:center;height:16px;padding:0 6px;border-radius:999px;font-size:9px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;background:var(--rd-canvas);color:var(--rd-muted)}
/* virtualization note */
.vc-virtnote{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--rd-muted);margin-top:6px;padding:8px 12px;background:var(--rd-accent-soft);border-radius:8px}
.vc-virtnote svg{width:15px;height:15px;stroke:var(--rd-accent-ink);fill:none;stroke-width:1.8;flex-shrink:0}
.vc-virtnote b{color:var(--rd-accent-ink);font-weight:600}
/* demo banner ribbon in cmdbar */
.vc-demoflag{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 10px;border-radius:999px;background:var(--rd-bad-soft);color:var(--rd-bad-ink);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.rd-main > .vc-page{animation:vcfade .18s ease}

/* ===== virtual table (T10) ===== */
/* Fixed 44px row height enforced via CSS (not per-row inline styles) — single rule covers
   every windowed table; cells clip instead of wrapping so the fixed row height never doubles. */
.rd-table.is-virtual tbody tr{height:44px}
.rd-table.is-virtual tbody td{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* rd-name-sku is a <div> (block) in the mockup's verbatim component — fine in ordinary tables,
   but .rd-name{display:flex} only lays out its OWN direct children, so inside a virtualized row
   the block-level SKU caption still forces a second line inside .rd-name-main, pushing the
   rendered row past the fixed 44px the window math assumes. Flatten to inline ONLY here (scoped
   to virtualized tables) so every current/future rd-name cell in a virtual table stays single-line
   without touching the component elsewhere. */
.rd-table.is-virtual .rd-name-sku{display:inline;margin-left:8px}
/* .rd-table.is-sticky's default `top: calc(cmdh + 52px)` assumes the page itself scrolls
   (its own comment: "No overflow ancestor, so sticky binds to the page"). The virtual table's
   .rd-tablewrap is its OWN overflow:auto scrollport (engine-set inline height), so that's the
   sticky containing block here — the header must stick at the top of THAT box, not offset by
   the outer cmdbar/toolbar height, or it floats down and overlaps the first rendered rows. */
.rd-tablewrap > .rd-table.is-virtual.is-sticky thead th{top:0}
/* T16: rd-col-head is link-wrapped (Papan Stasiun → Layar Operator nav) — reset anchor chrome
   so the wrapped head still looks/feels exactly like the plain (non-link) column head. */
.vc-colhead-link{display:block;color:inherit;text-decoration:none;cursor:pointer}

/* Per-row action icon (daftar-pp → "Lihat di Papan Stasiun"). Subtle by default, accent on the
   row's hover so the affordance is discoverable without competing with the row content. */
/* 24px (not 28) so the icon + the row's 18px vertical padding + 1px border stays within the 44px
   virtualized row-height contract — a 28px control silently pushed rows to 47px and desynced the
   window math. See virtual-table.js's 44px warning. */
.vc-rowact{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:6px;color:var(--rd-faint);transition:color .14s,background .14s}
.vc-rowact svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.8;fill:none}
.rd-table tbody tr:hover .vc-rowact{color:var(--rd-muted)}
.vc-rowact:hover{color:var(--rd-accent) !important;background:var(--rd-accent-soft)}

/* Scope banner (Papan Stasiun deep-linked to one PP): a light accent bar with a clear-scope link. */
.vc-scope{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px;padding:9px 6px 9px 12px;background:var(--rd-accent-soft);border:1px solid var(--rd-line);border-radius:var(--rd-r-ctl);font-size:12.5px;color:var(--rd-ink)}
.vc-scope .vc-scope-ico{width:16px;height:16px;stroke:var(--rd-accent);stroke-width:1.9;fill:none;flex-shrink:0}
.vc-scope b{font-weight:600}
.vc-scope-clear{margin-left:auto;padding:4px 10px;border-radius:6px;color:var(--rd-accent-ink);font-weight:600;text-decoration:none;white-space:nowrap}
.vc-scope-clear:hover{background:#fff}