.rgft-station{
    --st-accent: var(--rgft-primary, #b8963e);
    --st-active: #1e42a8;
    --st-active-bg: #eef2ff;
    --st-active-line: #c6d2f7;
    --st-ready-bg: #eeeef6;
    --st-ready-line: #e8d9ae;
    --st-notes: #17845f;
    --st-notes-bg: #eaf7f1;
    --st-notes-line: #b9e4d1;
    --st-ink: #15171b;
    --st-line: #e3e3e6;
    --st-muted: #78787b;
    --st-faint: #969699;
    --st-canvas: #f7f7f5;
    font-family: 'IBM Plex Sans Arabic', system-ui, sans-serif;
    color: #15171b;
    background: var(--st-canvas);
    -webkit-font-smoothing: antialiased;
}
.rgft-station *{ box-sizing: border-box; }
.rgft-station a{ color: var(--st-accent); text-decoration: none; }
.rgft-station a:hover{ color: #8a6f23; }

/* ── Header ─────────────────────────────────────────────────────────── */
/* Page title/date/logo now uses the shared .rgft-page-head-v2 (rtl.css) —
   same header markup as dashboard/stock/costs, per the user's request that
   every page's header look identical. Just give it the grid's max-width
   and top padding so it lines up with the content below. */
.rgft-station > .rgft-page-head-v2{
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 26px;
}
@media (max-width: 900px){
    .rgft-station > .rgft-page-head-v2{ padding: 0 14px; }
}

/* ── Urgent notes banner ───────────────────────────────────────────────
   Deliberately separate, bolder styling from the settled notes section
   below (gold/cream) — red/orange, larger text, animated pulse — since
   this is the ONE thing on the page meant to interrupt rather than just
   inform. Only ever holds notes < 15 minutes old (see station.php /
   station.js — both re-check that window, so a note quietly drops out of
   this banner on its own once it's no longer fresh, no page reload
   needed). Sits above even the picker/scan grid, on purpose — the single
   exception to "ready-to-start products are always the first thing". */
.rgft-station .rgft-urgent-notes{
    max-width: 1180px;
    margin: 0 auto 16px;
    padding: 0 26px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
@media (max-width: 900px){
    .rgft-station .rgft-urgent-notes{ padding: 0 14px; }
}
.rgft-station .rgft-urgent-note{
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #fdeeec;
    border: 2px solid #e2564a;
    border-radius: 14px;
    padding: 14px 16px;
    box-shadow: 0 2px 10px rgba(226,86,74,.18);
}
.rgft-station .rgft-urgent-note .rgft-pulse-dot::before,
.rgft-station .rgft-urgent-note .rgft-pulse-dot::after{
    background: #c0392b;
}
.rgft-station .rgft-urgent-note__col{
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.rgft-station .rgft-urgent-note__head{
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 13px;
}
.rgft-station .rgft-urgent-note__head strong{
    color: #a8281b;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .02em;
}
.rgft-station .rgft-urgent-note__body{
    font-size: 15px;
    font-weight: 500;
    line-height: 1.6;
    color: #5c1a13;
}

/* ── Two-column layout ─────────────────────────────────────────────── */
.rgft-station-grid{
    max-width: 1180px;
    margin: 0 auto;
    padding: 20px 26px 120px;
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(0,1.15fr) minmax(0,1fr);
    align-items: start;
}
/* Explicit placement (not the old auto-flow + .rgft-full spanning) so the
   scan card ("مين بيشتغل؟") can sit in its OWN column, spanning every row
   the left column ends up with, and stay position:sticky safely — a
   sticky item's containing block is its full GRID AREA regardless of its
   own content height, so as long as the left column's real stacked
   height is what defines that area (not an over-wide auto-flow guess),
   sticky can't escape it the way it did before (v2.7.90 removed sticky
   entirely because of that; this restores it properly instead). The
   "1 / 40" row-span is deliberately generous, not a literal row count —
   a grid item can't force empty rows into existing after it, so this
   just means "as many rows as column 1 actually has", however many that
   turns out to be, without hardcoding an exact number that would go
   stale the moment a new full-width section is added or removed. */
.rgft-station .rgft-picker-card{ grid-column: 1; grid-row: 1; }
.rgft-station .rgft-scan-card{
    grid-column: 2;
    grid-row: 1 / 40;
    align-self: start;
    position: sticky;
    top: 20px;
}
.rgft-station .rgft-active-card{ grid-column: 1; grid-row: 3; }
.rgft-station .rgft-station-notes{ grid-column: 1; grid-row: 2; }
/* Column-count breakpoint deliberately narrower than the OTHER "900px"
   breakpoints below (header/urgent-notes padding, active-list item
   internals, button stacking) — those are about internal compactness
   within a column and reasonably still kick in for tablet widths too
   (a narrower per-column tablet benefits from the same tighter spacing
   phones get). This ONE specifically controls 2-column vs. 1-column, and
   the user explicitly wants tablets to KEEP the 2-column side-by-side
   layout (picker+scan) — only true phone widths should stack. 600px
   comfortably separates common phones (≤480px even in landscape-ish
   cases) from the smallest common tablets (≥600px even in portrait). */
@media (max-width: 600px){
    .rgft-station-grid{
        grid-template-columns: 1fr;
        padding: 18px 14px 130px;
        gap: 14px;
    }
    /* Single column on phones only — explicit placement stops meaning
       anything useful (there's no second column for the sidebar pattern
       to sit in), and a sticky sidebar doesn't fit a stacked phone
       layout anyway, so everything just resets to normal document flow
       in DOM order (picker, scan, active, notes). */
    .rgft-station .rgft-picker-card,
    .rgft-station .rgft-scan-card,
    .rgft-station .rgft-active-card,
    .rgft-station .rgft-station-notes{
        grid-column: auto;
        grid-row: auto;
        position: static;
    }
}

/* ── Cards ──────────────────────────────────────────────────────────── */
.rgft-station .rgft-picker-card,
.rgft-station .rgft-scan-card,
.rgft-station .rgft-active-card{
    background: #fff;
    border: 1px solid var(--st-line);
    border-radius:16px;box-shadow:0 1px 2px rgba(15,23,42,.04),0 10px 28px -10px rgba(15,23,42,.10);transition:box-shadow .18s ease,transform .18s ease;
    padding: 16px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}
.rgft-station .rgft-picker-card:hover,
.rgft-station .rgft-scan-card:hover,
.rgft-station .rgft-active-card:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(15,23,42,.05),0 16px 36px -12px rgba(15,23,42,.14)}
.rgft-station .rgft-picker-card__title,
.rgft-station .rgft-active-card__title,
.rgft-station .rgft-scan-card__title{
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--st-muted);
    letter-spacing: 0;
}
/* Distinct visual identity for each list's header, so a worker glancing
   quickly gets a color cue before even reading the text — matches the
   item-level distinction below. */
.rgft-station .rgft-picker-card__title--ready,
.rgft-station .rgft-active-card__title--working{
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--st-ink);
    font-size: 14px;
}
.rgft-station .rgft-picker-card__title--ready::before,
.rgft-station .rgft-active-card__title--working::before{
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: none;
}
.rgft-station .rgft-picker-card__title--ready::before{ background: var(--st-accent); }
.rgft-station .rgft-active-card__title--working::before{ background: var(--st-active); }

/* ── Search box ─────────────────────────────────────────────────────── */
.rgft-station .rgft-search-box{
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f7f7f9;
    border: 1px solid #dfdfe8;
    border-radius: 10px;
    padding: 0 14px;
    height: 44px;
}
.rgft-station .rgft-search-box__icon{
    font-size: 13px;
    color: var(--st-faint);
    flex: none;
}
.rgft-station .rgft-search-box:focus-within{
    border-color: var(--st-accent);
    background: #fff;
}
.rgft-station .rgft-picker-search{
    flex: 1;
    min-width: 0;
    height: 42px;
    border: 0;
    outline: 0;
    background: transparent;
    font-family: inherit;
    font-size: 14px;
    color: #15171b;
    padding: 0;
    margin: 0;
}

/* ── Lists (pending + active share the same item markup) ─────────────── */
.rgft-station .rgft-picker-list,
.rgft-station .rgft-active-list{
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: none;
    overflow: visible;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.rgft-station .rgft-picker-list__empty,
.rgft-station .rgft-active-list__empty{
    padding: 26px;
    text-align: center;
    font-size: 13px;
    color: var(--st-faint);
}
.rgft-station .rgft-active-list__item{
    display: grid;
    grid-template-columns: 50px 96px minmax(0,1fr) auto;
    grid-template-areas: "thumb id main time";
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid #e7e7ef;
    background: #f7f7f9;
    margin: 0;
}
/* The one, deliberate visual difference between "ready to start" and
   "currently working" cards — same markup/layout otherwise, so this
   needs to read at a glance without requiring the worker to read text.
   Blue matches the plugin-wide "active" convention used in badges
   elsewhere (order-edit.php, orders.php), not a one-off color. */
.rgft-station .rgft-active-list__item--working{
    border-color: var(--st-active-line);
    border-inline-start: 4px solid var(--st-active);
    background: var(--st-active-bg);
}
/* Same treatment, gold instead of blue — completes the two-tier color
   system (gold=ready, blue=working) rather than leaving "ready" as an
   unmarked default, once the blue side had proven itself. */
.rgft-station .rgft-active-list__item--ready{
    border-color: var(--st-ready-line);
    border-inline-start: 4px solid var(--st-accent);
    background: var(--st-ready-bg);
}
.rgft-station .rgft-working-pill{
    display: inline-flex;
    align-items: center;
    gap: 5px;
    align-self: flex-start;
    font-size: 10.5px;
    font-weight: 700;
    color: #fff;
    background: var(--st-active);
    border-radius: 999px;
    padding: 3px 9px;
    letter-spacing: .01em;
}
.rgft-station .rgft-active-list__item img,
.rgft-station .rgft-active-list__thumb-empty{
    grid-area: thumb;
    width: 88px;
    height: 88px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid #dfdfe8;
}
.rgft-station .rgft-active-list__thumb-empty{
    background: #e9e9ef;
    color: #b1b1be;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    border: none;
}
.rgft-station .rgft-active-list__id{
    grid-area: id;
    font-size: 14px;
    font-weight: 700;
    color: var(--st-accent);
    font-variant-numeric: tabular-nums;
}
.rgft-station .rgft-active-list__main{
    grid-area: main;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    text-align: right;
}
.rgft-station .rgft-active-list__product{
    font-size: 13px;
    font-weight: 400;
    color: #15171b;
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rgft-station .rgft-active-list__worker{
    font-size: 12px;
    color: #8a6f23;
    font-weight: 500;
}
.rgft-station .rgft-active-list__customer{
    font-size: 11px;
    color: #7d7d84;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rgft-station .rgft-active-list__time{
    grid-area: time;
    justify-self: end;
    font-size: 12px;
    color: #7d7d84;
    font-weight: 500;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.rgft-station .rgft-transfer-badge{
    margin-top: 6px;
    font-size: 12px;
    color: #a83232;
    background: #fdecec;
    border: 1px solid #f0b8b8;
    border-radius: 8px;
    padding: 6px 10px;
    align-self: flex-start;
    font-weight: 600;
    line-height: 1.5;
}
.rgft-station .rgft-transfer-badge__note{ color: #8a4a4a; font-weight: 400; }
.rgft-station .rgft-offroute-badge{
    margin-top: 6px;
    font-size: 12px;
    color: #8a5a00;
    background: #e7e7f4;
    border: 1px solid #f0d38a;
    border-radius: 8px;
    padding: 6px 10px;
    align-self: flex-start;
    font-weight: 600;
    line-height: 1.5;
}
.rgft-station .rgft-selected-order .rgft-offroute-badge{ margin-top: 4px; }

/* Tappable state */
.rgft-station .rgft-pickable{
    position: relative;
    cursor: pointer;
    transition: border-color .15s, background .15s, transform .05s;
    width: 100%;
    text-align: right;
    font-family: inherit;
}
.rgft-station .rgft-pickable:hover{ border-color: #d9cba0; }
.rgft-station .rgft-pickable:active{ transform: scale(0.99); }
.rgft-station .rgft-pickable:focus-visible{
    outline: 2px solid var(--st-accent);
    outline-offset: 1px;
}
/* Selection needs to read clearly on top of EITHER the gold "ready" or
   blue "working" card background — a same-family tint (the old
   #ededf7) barely showed up against the ready cards' own gold tint.
   A dark ring + checkmark badge works identically well on both. */
.rgft-station .rgft-pickable.is-selected{
    border-color: var(--st-ink);
    box-shadow: 0 0 0 2px var(--st-ink) inset;
}
.rgft-station .rgft-pickable.is-selected::after{
    content: '✓';
    position: absolute;
    top: -8px;
    inset-inline-start: -8px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--st-ink);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0,0,0,.35);
    line-height: 1;
}

@media (max-width: 900px){
    .rgft-station .rgft-active-list__item{
        grid-template-columns: 66px minmax(0,1fr);
        grid-template-areas: "thumb main" "thumb time";
        row-gap: 3px;
    }
    .rgft-station .rgft-active-list__item img,
    .rgft-station .rgft-active-list__thumb-empty{ width: 60px; height: 60px; }
    .rgft-station .rgft-active-list__id{ display: none; }
    .rgft-station .rgft-active-list__time{ justify-self: start; }
}

/* ── Worker / selection / actions ──────────────────────────────────── */
.rgft-station .rgft-scan-card__select{
    width: 100%;
    height: 56px;
    font-family: inherit;
    font-size: 17px;
    font-weight: 600;
    padding: 0 16px;
    border: 2px solid #dfdfe8;
    background: #f7f7f9;
    border-radius: 12px;
    color: #15171b;
    margin: 0;
}
.rgft-station .rgft-scan-card__select:focus{
    outline: none;
    border-color: var(--st-accent);
    background: #fff;
}

.rgft-station .rgft-selected-order{
    font-size: 14px;
    min-height: 56px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 12px;
    border: 2px solid #dfdfe8;
    background: #f7f7f9;
    color: #1a1a1a;
    margin: 0;
}
.rgft-station .rgft-selected-order--empty{
    justify-content: center;
    color: #7d7d84;
    font-size: 13px;
}
.rgft-station .rgft-selected-order img,
.rgft-station .rgft-selected-order__thumb-empty{
    width: 44px;
    height: 44px;
    border-radius: 9px;
    flex-shrink: 0;
    object-fit: cover;
    border: 1px solid #dfdfe8;
}
.rgft-station .rgft-selected-order__thumb-empty{
    background: #e9e9ef;
    color: #b1b1be;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    border: none;
}
.rgft-station .rgft-selected-order__text{ min-width: 0; }
.rgft-station .rgft-selected-order__product{
    font-size: 14px;
    font-weight: 700;
    color: #1a1a1a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rgft-station .rgft-selected-order__customer{
    font-size: 12px;
    color: #7d7d84;
    margin-top: 2px;
}
.rgft-station .rgft-selected-order .rgft-transfer-badge{ margin-top: 4px; }

.rgft-station .rgft-scan-btn--primary{
    width: 100%;
    height: 76px;
    font-family: inherit;
    font-size: 19px;
    font-weight: 700;
    border: 0;
    border-radius: 14px;
    cursor: pointer;
    background: #7d7d84;
    color: #fff;
    transition: background .15s, opacity .15s, transform .05s;
}
.rgft-station .rgft-scan-btn--primary:active{ transform: scale(0.98); }
.rgft-station .rgft-scan-btn--primary:disabled{ opacity: .5; cursor: not-allowed; }
.rgft-station .rgft-scan-btn--primary.is-start{
    /* A live report: flat fills on the main action buttons read flat --
       a subtle top-to-bottom gradient plus a colored shadow gives them
       real depth and makes them read as clearly pressable. */
    background: linear-gradient(180deg, color-mix(in srgb, #1a7d4e 88%, #fff) 0%, #1a7d4e 100%);
    box-shadow: 0 4px 14px -4px color-mix(in srgb, #1a7d4e 55%, transparent);
}
.rgft-station .rgft-scan-btn--primary.is-finish{
    background: linear-gradient(180deg, color-mix(in srgb, var(--rgft-primary, #b8963e) 88%, #fff) 0%, var(--rgft-primary, #b8963e) 100%);
    box-shadow: 0 4px 14px -4px color-mix(in srgb, var(--rgft-primary, #b8963e) 55%, transparent);
}

.rgft-station .rgft-secondary-actions{
    display: flex;
    gap: 8px;
    margin: 0;
}
.rgft-station .rgft-scan-btn--secondary{
    flex: 1;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    height: 42px;
    border-radius: 10px;
    border: 1px solid #dfdfe8;
    background: #fff;
    color: #4a4a54;
    cursor: pointer;
    transition: border-color .15s, color .15s, opacity .15s;
}
.rgft-station .rgft-scan-btn--secondary:hover:not(:disabled){ border-color: var(--st-accent); color: #8a6f23; }
.rgft-station .rgft-scan-btn--secondary:disabled{ opacity: .4; cursor: not-allowed; }

.rgft-station .rgft-transfer-panel{
    border: 1px solid #d7d7e4;
    background: #fafafd;
    border-radius: 12px;
    padding: 14px;
    margin: 0;
}
.rgft-station .rgft-transfer-panel:not([hidden]){
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.rgft-station .rgft-transfer-panel .rgft-scan-card__select{ margin: 0; }
.rgft-station .rgft-transfer-panel .rgft-scan-actions{ margin: 0; }
.rgft-station .rgft-scan-actions{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 0;
}
.rgft-station .rgft-scan-btn--start,
.rgft-station .rgft-scan-btn--end{
    height: 64px;
    font-family: inherit;
    font-size: 17px;
    font-weight: 700;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    color: #fff;
    transition: opacity .15s, transform .05s;
}
.rgft-station .rgft-scan-btn--start{
    background: linear-gradient(180deg, color-mix(in srgb, #1a7d4e 88%, #fff) 0%, #1a7d4e 100%);
    box-shadow: 0 4px 14px -4px color-mix(in srgb, #1a7d4e 55%, transparent);
}
.rgft-station .rgft-scan-btn--end{
    background: linear-gradient(180deg, color-mix(in srgb, var(--rgft-primary, #b8963e) 88%, #fff) 0%, var(--rgft-primary, #b8963e) 100%);
    box-shadow: 0 4px 14px -4px color-mix(in srgb, var(--rgft-primary, #b8963e) 55%, transparent);
}
.rgft-station .rgft-scan-btn--start:active,
.rgft-station .rgft-scan-btn--end:active{ transform: scale(0.98); }

.rgft-station .rgft-complete-toggle:not([hidden]){
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    margin: 0;
    background: #fafafd;
    border: 1px solid #d7d7e4;
    border-radius: 10px;
    font-size: 14px;
    color: #4a4a54;
    cursor: pointer;
}
.rgft-station .rgft-complete-toggle input[type="checkbox"]{
    width: 20px;
    height: 20px;
    margin: 0;
    cursor: pointer;
}

.rgft-station .rgft-result{
    margin: 0;
    padding: 14px 16px;
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.5;
    display: none;
}
.rgft-station .rgft-result.is-success{ display: block; background: #e8f5ee; color: #1a7d4e; border: 1px solid #b8d8c4; }
.rgft-station .rgft-result.is-error{ display: block; background: #fbecec; color: #a83232; border: 1px solid #e8b9b9; }

@media (max-width: 900px){
    .rgft-station .rgft-secondary-actions,
    .rgft-station .rgft-scan-actions{ flex-direction: column; }
}

/* ── Notes ──────────────────────────────────────────────────────────── */
/* Deliberately its OWN color (purple), not gold or blue — those are
   already taken (gold = "ready to start", blue = "currently active"),
   and reusing gold here made the settled notes section visually blend
   into the "ready products" list, undermining the whole point of a
   separate section (user's report). Urgent (< 15 min) notes keep their
   own separate red/orange banner styling above — unrelated to this. */
.rgft-station .rgft-station-notes{
    background: var(--st-notes-bg);
    border: 1px solid var(--st-notes-line);
    border-radius: 14px;
    padding: 16px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: visible;
}
.rgft-station .rgft-station-notes__title{
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--st-notes);
}
.rgft-station .rgft-station-notes__body{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.rgft-station .rgft-station-notes__group{
    display: flex;
    flex-direction: column;
    gap: 8px;
    border: 0;
    padding: 0;
}
.rgft-station .rgft-station-notes__head{
    background: none;
    border: 0;
    padding: 0;
    gap: 8px;
    flex-wrap: wrap;
}
.rgft-station .rgft-station-notes__head strong{ font-size: 13px; }
.rgft-station .rgft-note,
.rgft-station .rgft-station-notes .rgft-note{
    background: #fff;
    border: 1px solid var(--st-notes-line);
    border-radius: 11px;
    padding: 12px 14px;
    margin: 0;
}
.rgft-station .rgft-note__body{ font-size: 13px; line-height: 1.65; color: #3d3f45; }
.rgft-station .rgft-note__meta{ font-size: 11px; color: #969699; }
.rgft-station .rgft-note--recent .rgft-note__label{ color: #b4372c; }
.rgft-station .rgft-note--pinned .rgft-note__icon{ color: var(--st-notes); }

/* ── Complete-toggle + result live at the end of the scan card already;
   just make sure the section itself flows with the new gap rhythm. ── */
.rgft-station .rgft-scan-card > *{ margin: 0; }

/* LTR (English) override — see the equivalent block in rtl.css for the
   full rationale. Only the handful of rules in this file that explicitly
   set text-align:right need re-declaring; everything else in this file
   is already direction-neutral. */
.rgft-station[dir="ltr"] .rgft-active-list__main,
.rgft-station[dir="ltr"] .rgft-pickable{
    text-align: left;
}