/* ==========================================================================
   Design tokens — single source of truth for color, spacing, radius, shadow.
   --rgft-primary / --rgft-dark stay overridable per-factory (Stations
   settings inject a :root override via wp_add_inline_style, which — being
   a second :root rule loaded after this stylesheet — wins on those two
   properties only, cascade order, no !important needed). Everything else
   here is a fixed system value: these are UI-semantic (success/danger/etc),
   not brand identity, so they don't need to vary per factory.

   Before this, colors were invented ad hoc per feature as they were built —
   two different "greens" (#1a7d4e / #1a7d3a), three near-identical
   "beiges" (#f3eee0 / #f3efe2 / #f3eed8), two different "muted grays"
   (#666 / #555) all coexisted with no single source of truth. Any new
   UI element should pull from these tokens, not invent a new hex value. */
:root {
    /* Brand — configurable per factory */
    --rgft-primary:      #b8963e;
    --rgft-primary-dark: #8a6f23;
    --rgft-dark:          #1a1a1a;

    /* Neutrals */
    --rgft-text:        #1a1a1a;
    --rgft-text-muted:  #8a8275;
    --rgft-text-soft:   #5a5240;
    --rgft-border:      #ede7d6;
    --rgft-border-soft: #f0e8d4;
    --rgft-bg-page:     #fafaf5;
    --rgft-bg-card:     #ffffff;
    --rgft-bg-subtle:   #f3eee0;

    /* Semantic status — one value per meaning, not one per feature */
    --rgft-success:        #1a7d3a;
    --rgft-success-bg:     #eef7ee;
    --rgft-success-border: #cdeccd;
    --rgft-danger:         #a83232;
    --rgft-danger-bg:      #fdecec;
    --rgft-danger-border:  #f0b8b8;
    --rgft-info:           #2a6f8a;
    --rgft-info-bg:        #eaf4f8;
    --rgft-info-border:    #c9e3ec;
    --rgft-warning:        #b87a00;
    --rgft-warning-bg:     #fdf6e3;
    --rgft-warning-border: #f0e5c4;

    /* Spacing scale (4px base) */
    --rgft-space-1: 4px;
    --rgft-space-2: 8px;
    --rgft-space-3: 12px;
    --rgft-space-4: 16px;
    --rgft-space-5: 24px;
    --rgft-space-6: 32px;

    /* Radius */
    --rgft-radius-sm: 6px;
    --rgft-radius-md: 10px;
    --rgft-radius-lg: 16px;

    /* Shadow — for lifting cards off the page instead of relying on borders */
    --rgft-shadow-sm: 0 1px 2px rgba(26, 26, 26, .06);
    --rgft-shadow-md: 0 4px 16px rgba(26, 26, 26, .08);

    /* Type */
    --rgft-font-heading: 'Playfair Display', serif;
    --rgft-font-body:    'Cairo', sans-serif;
}

/* Full-bleed layout override — the plugin's shortcode pages must own the
   whole viewport on any device (laptop / TV-size monitor / tablet / phone)
   regardless of the active theme. Block themes especially cap normal page
   content at a fixed reading width (commonly ~650–840px via
   --wp--style--global--content-size on .entry-content /
   .wp-block-post-content / .is-layout-constrained), which squeezes our
   full-width sidebar+grid layouts into a narrow centered column instead of
   filling the screen. Neutralize every ancestor container's width on
   .rgft-page rather than fighting each theme's specific class names one at
   a time. */
html.rgft-page,
body.rgft-page {
    max-width: none !important;
    width: 100% !important;
    overflow-x: hidden;
}
.rgft-page .wp-site-blocks,
.rgft-page .site-content,
.rgft-page .site-main,
.rgft-page #content,
.rgft-page #primary,
/* `main` here means the THEME's content wrapper, which has to be
   neutralised. But the dashboard's own content element is also a <main>
   (.d2-main) and was being caught by this too — its `padding:24px 26px
   48px` was killed by the !important, so the dashboard rendered flush to
   both edges while the topbar and every other page kept their gutters.
   That's the "sidebar/header is in the wrong place on the dashboard"
   symptom. Exclude our own element. */
.rgft-page main:not(.d2-main),
.rgft-page article,
.rgft-page .entry-content,
.rgft-page .wp-block-post-content,
.rgft-page .is-layout-constrained,
.rgft-page .is-layout-flow,
.rgft-page .alignwide,
.rgft-page .alignfull {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}
/* Root wrapper width — actual ancestor-container neutralizing now happens
   via JS (see rgft_render_nav()'s inline script), which walks up the real
   DOM and overrides whatever theme markup is actually there instead of
   guessing selectors or relying on a viewport-vs-parent-centering trick.
   That JS approach replaced an earlier `width:100vw` + negative-margin
   breakout here, which broke on this theme's layout (assumes the element
   is symmetrically centered by its parent before the trick applies — this
   theme's container isn't, so part of the content rendered off-screen to
   the left and got clipped by overflow-x:hidden instead of shown). */
.rgft-page .rgft-dash2,
.rgft-page .rgft-orders,
.rgft-page .rgft-stats,
.rgft-page .rgft-station {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}
/* .rgft-dash2 used to lay its own sidebar out as its own sticky grid
   column with scoped duplicate CSS — now removed in favor of reusing the
   exact same fixed .rgft-sidebar every other page uses (that duplication
   was exactly why the sidebar visibly resized/reflowed when navigating
   between the dashboard and other pages). So it now needs this reserved
   space just like the others. */
/* The reserved width is now a single custom property so the sidebar toggle
   can change it from one place instead of every consumer re-declaring a
   breakpoint. --rgft-rail is the ONLY thing the toggle changes about
   layout; nothing measures or writes inline geometry (that stays the sole
   job of the position-fix script). Specificity note: the narrow-screen
   override repeats the .rgft-nav-collapsed selector so it still wins over
   the class rule regardless of source order. */
:root { --rgft-rail: 240px; --rgft-gutter: 24px; }
html.rgft-nav-collapsed { --rgft-rail: 0px; }
@media (min-width: 1800px) { :root { --rgft-rail: 264px; } html.rgft-nav-collapsed { --rgft-rail: 0px; } }
@media (max-width: 1080px) {
    :root,
    html.rgft-nav-collapsed { --rgft-rail: 0px; }
}
@media (max-width: 700px) { :root { --rgft-gutter: 16px; } }
/* The gutter term is what keeps the right edge breathing once the rail is
   gone — this rule wins over each page's own `padding: 24px`, so without it
   a collapsed sidebar left the content flush against the viewport edge. */
.rgft-page .rgft-dash2,
.rgft-page .rgft-orders,
.rgft-page .rgft-stats,
.rgft-page .rgft-station {
    padding-right: calc(var(--rgft-rail) + var(--rgft-gutter)) !important;
    transition: padding-right .22s ease;
}
/* The dashboard is the one page that doesn't put its padding on the root —
   it hangs it off the inner .d2-main instead. So the shared gutter above
   lands on top of .d2-main's own, giving that page a right inset of
   gutter+26px against a left inset of 26px: visibly off-centre, and worst
   on a phone where it ate ~40px of a 390px screen. It only needs the rail
   reserved; .d2-main supplies the breathing room. */
.rgft-page .rgft-dash2 { --rgft-gutter: 0px; }

/* Reusable status-pill component — replaces the one-off inline-styled
   badges (material active/inactive, logout link, stock balance readout,
   etc.) that had each been hand-rolled with their own hardcoded colors. */
.rgft-pill {
    display: inline-block;
    padding: var(--rgft-space-2) var(--rgft-space-3);
    border-radius: var(--rgft-radius-sm);
    font-weight: 700;
    font-size: 12px;
    border: 1px solid transparent;
}
.rgft-pill--success { background: var(--rgft-success-bg); color: var(--rgft-success); border-color: var(--rgft-success-border); }
.rgft-pill--danger  { background: var(--rgft-danger-bg);  color: var(--rgft-danger);  border-color: var(--rgft-danger-border); }
.rgft-pill--info    { background: var(--rgft-info-bg);    color: var(--rgft-info);    border-color: var(--rgft-info-border); }
.rgft-pill--warning { background: var(--rgft-warning-bg); color: var(--rgft-warning); border-color: var(--rgft-warning-border); }
.rgft-pill--neutral { background: var(--rgft-bg-subtle);  color: var(--rgft-text-soft); border-color: var(--rgft-border); }

/* Reusable table component — replaces the raw inline-styled <table> markup
   duplicated across stats.php/costs.php with borrowed hex values instead
   of tokens. Wrap in a scrollable div for narrow screens. */
.rgft-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--rgft-border);
    border-radius: var(--rgft-radius-md);
}
.rgft-table,
.rgft-cost-table,
.rgft-timeline__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.rgft-table thead tr,
.rgft-cost-table thead tr,
.rgft-timeline__table thead tr {
    background: var(--rgft-bg-subtle);
}
.rgft-table th,
.rgft-cost-table th,
.rgft-timeline__table th {
    padding: var(--rgft-space-3) var(--rgft-space-4);
    text-align: right;
    color: var(--rgft-text-soft);
    font-weight: 600;
    font-size: 12px;
}
.rgft-table td,
.rgft-cost-table td,
.rgft-timeline__table td {
    padding: var(--rgft-space-3) var(--rgft-space-4);
    color: var(--rgft-text);
}
.rgft-table tbody tr,
.rgft-cost-table tr,
.rgft-timeline__table tr {
    border-bottom: 1px solid var(--rgft-border);
}
.rgft-table tbody tr:hover,
.rgft-cost-table tr:hover,
.rgft-timeline__table tr:hover {
    background: var(--rgft-bg-subtle);
}
.rgft-timeline__table tr:last-child td,
.rgft-cost-table tr:last-child td { border-bottom: none; }
.rgft-cost-table__general td { background: var(--rgft-bg-subtle); }

/* Plugin pages provide their own complete header, nav, and footer — the
   active theme's own header/footer template parts (whatever they contain,
   collapsible mobile menus included) should never appear here at all. */
.rgft-page header.site-header,
.rgft-page .site-header,
.rgft-page footer.site-footer,
.rgft-page .site-footer {
    display: none !important;
}
.rgft-page main:not(.d2-main) {
    margin-block-start: 0 !important;
}

/* On pages that host our shortcodes (body has .rgft-page class), hide the
   theme's default page-title heading so the branded header is first. */
.rgft-page .entry-title,
.rgft-page .page-title,
.rgft-page .entry-header h1,
.rgft-page article > header h1.entry-title,
.rgft-page header.entry-header,
.rgft-page .wp-block-post-title {
    display: none !important;
}

/* Hide the theme's auto-generated page list / nav on plugin pages, since the
   plugin provides its own branded navigation. The wp-block-navigation block,
   the wp-block-page-list block, and common nav wrappers all match. */
.rgft-page .wp-block-page-list,
.rgft-page .wp-block-navigation,
.rgft-page .menu-primary,
.rgft-page .nav-menu,
.rgft-page .main-navigation,
.rgft-page .site-header nav,
.rgft-page header.site-header .menu {
    display: none !important;
}

.rgft-page .rgft-dashboard,
.rgft-page .rgft-stats,
.rgft-page .rgft-station,
.rgft-page .rgft-orders {
    margin-top: 0;
}

/* ─── Sidebar (fixed, replaces the old horizontal top-nav) ────────────
   Space for it is reserved via padding-right directly on each page's root
   wrapper class (.rgft-dash2/.rgft-orders/.rgft-stats/.rgft-station — see
   the rule near the top of this file), not on body — a single mechanism
   shared by every page now that the dashboard uses the exact same fixed
   sidebar as everything else instead of its own scoped grid-column
   version. Sidebar sits on the right since content reads RTL. It keeps this
   same full form at every screen size and slides off-canvas instead of
   restyling itself — see the toggle block further down. */
.rgft-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    width: 240px;
    height: 100vh;
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 20px 14px;
    background: var(--rgft-dark);
    overflow-y: auto;
    box-sizing: border-box;
    z-index: 100;
}
/* WordPress's own admin toolbar is ALSO position:fixed at top:0 with a
   higher z-index (99999 by default), so without this the top slice of
   the sidebar (including the logo box) renders underneath/behind it for
   any logged-in user with the toolbar enabled — which is effectively
   everyone using this internal tool. WP adds the `admin-bar` body class
   whenever the toolbar is showing, and switches to a taller 46px bar
   below its own 782px breakpoint — matched exactly here so the two never
   drift out of sync. */
body.admin-bar .rgft-sidebar {
    top: 32px;
    height: calc(100vh - 32px);
}
@media screen and (max-width: 782px) {
    body.admin-bar .rgft-sidebar {
        top: 46px;
        height: calc(100vh - 46px);
    }
}
.rgft-sidebar__brand {
    background: #fff;
    border-radius: 12px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.rgft-sidebar__brand-logo {
    max-width: 100%;
    max-height: 52px;
    object-fit: contain;
}
.rgft-sidebar__brand-text {
    font-family: var(--rgft-font-heading);
    font-size: 15px;
    font-weight: 600;
    color: #15171b;
}
.rgft-sidebar__nav {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.rgft-sidebar__label {
    font-size: 10px;
    color: #6f6f68;
    letter-spacing: .12em;
    padding: 18px 10px 8px;
}
.rgft-sidebar__label:first-child { padding-top: 0; }
.rgft-sidebar__item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 9px !important;
    border: 1px solid transparent;
    color: #b9b9b2 !important;
    text-decoration: none !important;
    font-size: 13.5px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
    list-style: none !important;
    box-sizing: border-box;
}
.rgft-sidebar__item > span:first-of-type {
    display: flex;
    align-items: center;
    gap: 10px;
}
.rgft-sidebar__item::-webkit-details-marker { display: none; }
.rgft-sidebar__item::marker { content: ''; }
.rgft-sidebar__item:hover,
.rgft-sidebar__item:focus {
    background: rgba(255, 255, 255, .06);
    color: #fff;
}
.rgft-sidebar__item--active {
    background: rgba(255, 255, 255, .05) !important;
    border-color: rgba(255, 255, 255, .14) !important;
    color: #fff !important;
    font-weight: 600 !important;
}
.rgft-sidebar__item--active::before {
    content: '';
    width: 6px;
    height: 6px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--rgft-primary, #b8963e);
}
.rgft-sidebar__icon {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    opacity: .85;
}
.rgft-sidebar__badge {
    font-size: 11px;
    color: #6f6f68;
    font-variant-numeric: tabular-nums;
    margin-inline-start: auto;
}
.rgft-sidebar__item--active .rgft-sidebar__badge {
    color: var(--rgft-primary, #b8963e);
}
.rgft-sidebar__group[open] > summary.rgft-sidebar__item {
    color: #fff;
}
.rgft-sidebar__group > summary.rgft-sidebar__item::after {
    content: '▾';
    font-size: 11px;
    transition: transform .15s;
    margin-inline-start: var(--rgft-space-2);
}
.rgft-sidebar__group[open] > summary.rgft-sidebar__item::after {
    transform: rotate(180deg);
}
.rgft-sidebar__subitem {
    display: block;
    padding: 8px 12px 8px 34px;
    color: #8b8b84;
    text-decoration: none;
    font-size: 12.5px;
    border-radius: 8px;
}
.rgft-sidebar__subitem:hover,
.rgft-sidebar__subitem:focus {
    color: #fff;
    background: rgba(255, 255, 255, .06);
}
.rgft-sidebar__subitem--active {
    color: #fff;
    background: rgba(255, 255, 255, .1);
}
.rgft-sidebar__footer {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, .08);
}
.rgft-sidebar__profile {
    display: flex;
    align-items: center;
    gap: 10px;
}
.rgft-sidebar__avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #2c3038;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #c9c9c2;
    flex-shrink: 0;
}
.rgft-sidebar__profile-text {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    overflow: hidden;
}
.rgft-sidebar__profile-name {
    font-size: 12.5px;
    color: #e9e9e6;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rgft-sidebar__profile-role {
    font-size: 10.5px;
    color: #6f6f68;
}
.rgft-sidebar__logout {
    margin-inline-start: auto;
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8b8b84;
    text-decoration: none !important;
}
.rgft-sidebar__logout:hover,
.rgft-sidebar__logout:focus {
    background: rgba(168, 50, 50, .18);
    color: #ffb3b3;
}
.rgft-sidebar__logout .rgft-sidebar__icon {
    width: 16px;
    height: 16px;
    opacity: 1;
}

/* ─── Sidebar toggle: topbar, scrim, drawer ───────────────────────────
   Replaces the old "collapse into a horizontal icon strip below 880px"
   behaviour, which kept the nav on screen but stripped every label off it —
   on a phone you got a row of unlabelled icons, and on a tablet the strip
   ate a whole band of vertical space above the content. The sidebar now
   keeps its full labelled form at every size and simply slides off-canvas
   when it isn't wanted:

     ≥1081px  rail visible by default; toggle collapses it (remembered)
     ≤1080px  rail off-canvas by default; toggle opens it over a scrim

   Same markup, same classes, one state class on <html> — nothing here is
   duplicated per page. */
.rgft-sidebar {
    transition: transform .22s ease;
    will-change: transform;
}
.rgft-topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
.rgft-topbar__title,
.rgft-topbar__logo { display: none; }
.rgft-navtoggle {
    flex: none;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid var(--rgft-line, #e7e6e1);
    border-radius: 11px;
    cursor: pointer;
    padding: 0;
    color: var(--rgft-dark, #15171b);
    transition: background .15s ease, border-color .15s ease;
}
.rgft-navtoggle:hover,
.rgft-navtoggle:focus-visible {
    background: var(--rgft-dark, #15171b);
    border-color: var(--rgft-dark, #15171b);
    color: #fff;
}
.rgft-navtoggle__bars {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.rgft-navtoggle__bars i {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
}
.rgft-navscrim {
    position: fixed;
    inset: 0;
    background: rgba(10, 11, 13, .55);
    z-index: 110;
    border: 0;
}
.rgft-sidebar__close {
    display: none;
    position: absolute;
    top: 14px;
    inset-inline-start: 12px;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 9px;
    background: #23262c;
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

/* Wide screens — collapsible rail. */
@media (min-width: 1081px) {
    html.rgft-nav-collapsed .rgft-sidebar { transform: translateX(100%); }
    .rgft-navscrim { display: none; }
}

/* Narrow screens — off-canvas drawer. */
@media (max-width: 1080px) {
    .rgft-sidebar {
        width: min(280px, 86vw);
        transform: translateX(100%);
        box-shadow: -18px 0 40px rgba(10, 11, 13, .28);
        z-index: 120;
    }
    html.rgft-nav-open .rgft-sidebar { transform: none; }
    html:not(.rgft-nav-open) .rgft-navscrim { display: none; }
    .rgft-sidebar__close { display: block; }
    /* Dark sticky topbar with the toggle, current page name and the logo —
       the sidebar's job on small screens, minus the space it used to take. */
    .rgft-topbar {
        position: sticky;
        top: 0;
        z-index: 90;
        justify-content: space-between;
        background: var(--rgft-dark, #15171b);
        border-radius: 12px;
        padding: 8px 10px;
        margin-bottom: 16px;
    }
    /* Same admin-bar overlap fix as .rgft-sidebar above — once this
       sticks to the viewport top during scroll it would otherwise sit
       exactly where WP's own fixed toolbar already is. */
    body.admin-bar .rgft-topbar { top: 46px; } /* WP's toolbar is already the 46px mobile height at this breakpoint */
    .rgft-topbar__title {
        display: block;
        font-size: 15px;
        font-weight: 600;
        color: #fff;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .rgft-topbar__logo {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: none;
        width: 78px;
        height: 34px;
        background: #fff;
        border-radius: 9px;
        padding: 3px 5px;
        box-sizing: border-box;
    }
    .rgft-topbar__logo--empty { visibility: hidden; }
    .rgft-topbar__logo img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }
    .rgft-navtoggle {
        background: #23262c;
        border-color: #23262c;
        color: #fff;
    }
}
@media (max-width: 520px) {
    .rgft-topbar__logo { display: none; }
}

/* MiFactro — premium UI */

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700&family=Playfair+Display:wght@500;700&display=swap');

.rgft-dashboard,
.rgft-station,
.rgft-stats,
.rgft-orders {
    direction: rtl;
    text-align: right;
    font-family: 'Cairo', 'Tajawal', 'Segoe UI', Tahoma, sans-serif;
    color: var(--rgft-dark, #1a1a1a);
    margin: 0;
    padding: 24px;
    background: #f7f5f0;
    min-height: 100vh;
    box-sizing: border-box;
}

/* ─── Shared v2 page header (dashboard/station/stock/costs/orders/etc.) ──
   One canonical header for every page: centered title + date + logo pill.
   Replaced the old .rgft-page-header (serif font, side-floated logo) and
   .d2-head/.s2-head/.rgft-o__head (each a near-duplicate reinvention) —
   every front-end template now points at this single definition. */
/* ─── Shared v2 page header (dashboard/station/stock/costs) ──────────────
   One canonical header for every "d2-style" redesigned page: centered
   title + date + logo pill. Pixel-identical to dashboard.php's own
   .d2-head (kept separate there since it predates this shared class) —
   any future d2-style page should use THIS class, not reinvent one. */
.rgft-page-head-v2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    margin-bottom: 22px;
}
.rgft-page-head-v2 h1 {
    margin: 0;
    font-size: 27px;
    font-weight: 600;
    letter-spacing: -.01em;
    font-family: 'IBM Plex Sans Arabic', system-ui, sans-serif;
}
.rgft-page-head-v2 .rgft-page-head-v2__date {
    font-size: 13px;
    color: #7c7c74;
}
/* Bulletproof: a background-image on a FIXED-size box, not an <img> tag.
   object-fit / max-height on a replaced element still depends on the
   browser's replaced-element sizing algorithm, and that kept failing
   live for reasons this sandbox can't see (no real browser, no access to
   the actual logo asset or any caching layer in front of it).
   background-size:contain on an explicit width/height box has no such
   dependency — the image is painted inside a box whose size is fixed by
   CSS alone, period, regardless of the source file's real dimensions.
   Genuinely cannot blow out. Used by station/stock/costs' shared header;
   dashboard.php's own .d2-head is untouched (still fine, don't risk it). */
.rgft-page-head-v2__logo {
    width: 180px;
    height: 64px;
    background-repeat: no-repeat;
    background-position: center center;
    /* background-size:contain (not a fixed zoom) — the 180% zoom used
       here previously was tuned to a DIFFERENT, older logo file that
       had heavy transparent padding baked in around its visible mark;
       zooming past 100% compensated for that padding by cropping it
       away. The Royal Garden logo currently uploaded (ROYAL + tree
       mark on one line, GARDEN stacked below) is NOT padded that way —
       a fixed zoom just crops straight into the actual "GARDEN" text
       instead of empty margin, regardless of how tall the box is (a
       percentage zoom crops the same FRACTION of the image no matter
       the box's absolute pixel size, which is why making the box
       taller alone didn't fix it). "contain" guarantees the whole
       image is visible, height-constrained to the box — the safe
       default for a file with little/no padding. If a FUTURE logo
       upload again has heavy padding and renders too small under
       "contain", that's the v2.7.38 problem returning — re-measure
       real pixels from a fresh screenshot rather than reintroducing a
       guessed zoom percentage. */
    background-size: contain;
    box-sizing: border-box;
    flex: none;
}

/* ─── KPIs ─────────────────────────────────────────────── */
.rgft-live-panel {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}
.rgft-live-panel__col {
    background: #fff;
    border: 1px solid #ede7d6;
    border-radius: 14px;
    padding: 18px 20px;
}
.rgft-live-panel__title {
    font-size: 15px;
    font-weight: 700;
    color: var(--rgft-dark, #1a1a1a);
    margin: 0 0 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.rgft-live-panel__empty { color: #8a8275; font-size: 13px; text-align: center; padding: 20px 0; margin: 0; }
.rgft-bottleneck-tag {
    font-size: 11px;
    font-weight: 700;
    color: #a83232;
    background: #fdecec;
    border: 1px solid #f0b8b8;
    border-radius: 999px;
    padding: 3px 10px;
}
.rgft-station-bars { display: flex; flex-direction: column; gap: var(--rgft-space-3); }
.rgft-station-bar-row {
    background: var(--rgft-bg-card);
    border: 1px solid var(--rgft-border);
    border-radius: var(--rgft-radius-md);
    padding: var(--rgft-space-3) var(--rgft-space-4);
    box-shadow: var(--rgft-shadow-sm);
    transition: box-shadow .15s, transform .15s;
}
.rgft-station-bar-row:hover {
    box-shadow: var(--rgft-shadow-md);
    transform: translateY(-1px);
}
.rgft-station-bar-row__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--rgft-space-3);
    margin-bottom: var(--rgft-space-2);
}
.rgft-station-bar-row__label {
    font-size: 14px;
    color: var(--rgft-text);
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rgft-station-bar-row__flag { color: var(--rgft-danger); margin-inline-start: 4px; }
.rgft-station-bar-row__count {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--rgft-success);
    white-space: nowrap;
    flex-shrink: 0;
}
.rgft-station-bar-row__count-pending {
    color: var(--rgft-text-muted);
    font-weight: 600;
    padding: 2px 8px;
    background: var(--rgft-bg-subtle);
    border-radius: 999px;
}
.rgft-station-bar-track {
    background: var(--rgft-bg-subtle);
    border-radius: 999px;
    height: 16px;
    overflow: hidden;
}
.rgft-station-bar-fill {
    background: var(--rgft-success);
    height: 100%;
    border-radius: 999px;
    transition: width 0.4s ease;
}
.rgft-overdue-list { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow-y: auto; }
.rgft-overdue-list__item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 9px 0;
    border-bottom: 1px solid #f3eee0;
    font-size: 13px;
}
.rgft-overdue-list__item:last-child { border-bottom: none; }
.rgft-overdue-list__item a { color: var(--rgft-dark, #1a1a1a); text-decoration: none; font-weight: 600; }
.rgft-overdue-list__item a:hover { color: var(--rgft-primary, #b8963e); }
.rgft-overdue-list__days { color: #a83232; font-weight: 700; font-size: 12px; white-space: nowrap; }

.rgft-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

/* ─── Donut chart card (order status) ──────────────────── */
.rgft-donut-card { margin-bottom: 20px; }
.rgft-donut-card__body {
    display: flex;
    align-items: center;
    gap: var(--rgft-space-6);
    padding: var(--rgft-space-2) 0;
    flex-wrap: wrap;
}
.rgft-donut-card__canvas-wrap {
    width: 160px;
    height: 160px;
    flex-shrink: 0;
}
.rgft-donut-legend {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.rgft-donut-legend__item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--rgft-text-soft);
}
.rgft-donut-legend__item strong {
    margin-inline-start: auto;
    color: var(--rgft-text);
    font-size: 15px;
}
.rgft-donut-legend__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.rgft-kpi {
    background: #fff;
    border: 1px solid #ede7d6;
    border-radius: 10px;
    padding: 16px 18px;
    transition: transform 0.15s;
}
.rgft-kpi:hover {
    transform: translateY(-1px);
}
.rgft-kpi--link {
    display: block;
    text-decoration: none;
    cursor: pointer;
}
.rgft-kpi--link:hover {
    border-color: #d8cfae;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.rgft-kpi--green  { border-right: 3px solid #1a7d4e; }
.rgft-kpi--amber  { border-right: 3px solid #b87a00; }
.rgft-kpi--gold   { border-right: 3px solid var(--rgft-primary, #b8963e); }
.rgft-kpi--red    { border-right: 3px solid #a83232; }

.rgft-kpi__label {
    font-size: 11px;
    color: #8a8275;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    font-weight: 500;
}
.rgft-kpi__value {
    font-size: 30px;
    font-weight: 600;
    color: var(--rgft-dark, #1a1a1a);
    line-height: 1;
}
.rgft-kpi--green .rgft-kpi__value { color: #1a7d4e; }
.rgft-kpi--amber .rgft-kpi__value { color: #b87a00; }
.rgft-kpi--gold  .rgft-kpi__value { color: var(--rgft-primary, #b8963e); }
.rgft-kpi--red   .rgft-kpi__value { color: #a83232; }

/* ─── Filters ──────────────────────────────────────────── */
.rgft-filters {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    align-items: center;
}
.rgft-select,
.rgft-search {
    background: #fff;
    border: 1px solid #d4cdb8;
    border-radius: 8px;
    padding: 9px 12px;
    font-size: 13px;
    font-family: inherit;
    color: var(--rgft-dark, #1a1a1a);
    height: 38px;
    box-sizing: border-box;
    transition: border-color 0.15s;
}
.rgft-select { min-width: 150px; }
.rgft-search { flex: 1; min-width: 200px; }
.rgft-select:focus,
.rgft-search:focus {
    outline: none;
    border-color: var(--rgft-primary, #b8963e);
}

.rgft-btn {
    border: none;
    border-radius: 8px;
    padding: 9px 20px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    height: 38px;
    transition: opacity 0.15s, transform 0.05s;
}
.rgft-btn:active { transform: scale(0.97); }
.rgft-btn--primary { background: var(--rgft-dark, #1a1a1a); color: #fff; }
.rgft-btn--primary:hover { opacity: 0.85; }

/* ─── Parent order card ────────────────────────────────── */
.rgft-card {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #ede7d6;
    margin-bottom: 14px;
    overflow: hidden;
}
.rgft-card__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    background: linear-gradient(to left, #faf7ee, #fff);
    border-bottom: 1px solid #ede7d6;
}
.rgft-card__head-left {
    display: flex;
    align-items: center;
    gap: 12px;
}
.rgft-id-badge {
    background: var(--rgft-primary, #b8963e);
    color: #fff;
    padding: 5px 11px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    font-family: 'Cairo', sans-serif;
}
.rgft-card__customer {
    font-size: 16px;
    font-weight: 600;
    color: var(--rgft-dark, #1a1a1a);
}
.rgft-card__sub {
    font-size: 12px;
    color: #8a8275;
    margin-top: 2px;
}

/* ─── Status pills ─────────────────────────────────────── */
.rgft-card__head-right {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
.rgft-status {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.rgft-status--active     { background: #e8f5ee; color: #1a7d4e; }
.rgft-status--idle       { background: #fff3e0; color: #b87a00; }
.rgft-status--pending    { background: #f0eee5; color: #6a6358; }
.rgft-status--completed  { background: #e8eef7; color: #1a4d8f; }
.rgft-status--cancelled  { background: #f5f1f1; color: #8a4a4a; text-decoration: line-through; }

/* Cost pill — total spend on the order so far; links to its cost log in wp-admin */
.rgft-cost-pill {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    background: #fdf6e3;
    color: #8a6f23;
    transition: opacity 0.15s;
}
.rgft-cost-pill:hover { opacity: 0.8; text-decoration: none; }

/* ─── Notes area ───────────────────────────────────────── */
.rgft-notes-area {
    background: #fffdf6;
    border-top: 1px solid #f0e5c4;
    border-bottom: 1px solid #f0e5c4;
}
.rgft-notes-list:empty { display: none; }
.rgft-notes-list:not(:empty) + .rgft-note-form { border-top: 1px solid #f3eed8; }

.rgft-note {
    padding: 12px 18px;
    border-bottom: 1px solid #f3eed8;
}
.rgft-note:last-child { border-bottom: none; }

/* Recent (≤24h) — bright + pulsing dot */
.rgft-note--recent {
    background: linear-gradient(to left, #fff8e1, #fffdf2);
    position: relative;
    animation: rgft-slide-in 0.5s ease-out;
}
.rgft-note--recent .rgft-note__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}
.rgft-note--recent .rgft-note__label {
    color: #6b4f00;
    font-size: 13px;
    font-weight: 600;
}
.rgft-note--recent .rgft-note__meta {
    color: #8a8275;
    font-size: 11px;
}
.rgft-note--recent .rgft-note__body {
    color: #4d3800;
    font-size: 14px;
    line-height: 1.7;
    padding-right: 19px;
}

/* Older notes — compact, muted */
.rgft-note--old {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #fffdf6;
}

/* Pinned/general legacy note */
.rgft-note--pinned {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: linear-gradient(to left, #fef0e8, #fff8f3);
    border-right: 3px solid #d46b3f;
}
.rgft-note--pinned .rgft-note__icon { color: #d46b3f; }
.rgft-note--pinned .rgft-note__meta {
    color: #8a4a2e;
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 2px;
}
.rgft-note--pinned .rgft-note__body {
    color: #5a2d18;
    font-size: 14px;
    line-height: 1.6;
}
.rgft-note__icon {
    color: #a89160;
    flex-shrink: 0;
    margin-top: 3px;
}
.rgft-note__col { flex: 1; }
.rgft-note--old .rgft-note__meta {
    color: #8a8275;
    font-size: 11px;
    margin-bottom: 2px;
}
.rgft-note--old .rgft-note__body {
    color: #5a5240;
    font-size: 13px;
    line-height: 1.6;
}

/* Pulsing dot */
.rgft-pulse-dot {
    position: relative;
    display: inline-block;
    width: 10px;
    height: 10px;
    flex-shrink: 0;
}
.rgft-pulse-dot::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--rgft-primary, #b8963e);
    animation: rgft-pulse-dot 1.6s ease-in-out infinite;
}
.rgft-pulse-dot::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--rgft-primary, #b8963e);
    animation: rgft-pulse-ring 1.6s ease-out infinite;
}

@keyframes rgft-pulse-dot {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.4); opacity: 0.5; }
}
@keyframes rgft-pulse-ring {
    0% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(2.4); opacity: 0; }
}
@keyframes rgft-slide-in {
    from { transform: translateY(-8px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* Note add form */
.rgft-note-form {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: #fafaf5;
    border-top: 1px solid #f3eed8;
}
.rgft-note-form__input {
    flex: 1;
    background: #fff;
    border: 1px solid #d4cdb8;
    border-radius: 8px;
    padding: 9px 12px;
    font-size: 13px;
    font-family: inherit;
    color: var(--rgft-dark, #1a1a1a);
    height: 38px;
    box-sizing: border-box;
}
.rgft-note-form__input:focus {
    outline: none;
    border-color: var(--rgft-primary, #b8963e);
}
.rgft-note-form__btn {
    background: var(--rgft-primary, #b8963e);
    color: #fff;
    border: none;
    padding: 0 20px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    height: 38px;
    transition: opacity 0.15s, transform 0.05s;
}
.rgft-note-form__btn:hover { opacity: 0.9; }
.rgft-note-form__btn:active { transform: scale(0.97); }
.rgft-note-form__btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ─── Products list inside parent card ─────────────────── */
.rgft-product {
    display: grid;
    grid-template-columns: 36px 64px 70px 1fr 130px 90px 110px;
    gap: 12px;
    align-items: center;
    padding: 12px 18px;
    border-bottom: 1px solid #f3eee0;
    transition: background 0.15s;
}
.rgft-product:last-child { border-bottom: none; }
.rgft-product:hover { background: #fafaf5; }

.rgft-product__toggle {
    background: #fff;
    border: 1px solid #ede7d6;
    border-radius: 6px;
    width: 28px;
    height: 28px;
    color: var(--rgft-primary, #b8963e);
    font-size: 12px;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, transform 0.05s;
    font-family: inherit;
}
.rgft-product__toggle:hover { background: #fafaf5; }
.rgft-product__toggle:active { transform: scale(0.92); }

/* Timeline expandable panel */
.rgft-timeline {
    background: #fafaf5;
    border-bottom: 1px solid #f3eee0;
    padding: 14px 18px;
    animation: rgft-slide-in 0.25s ease-out;
}
.rgft-timeline__empty {
    color: #8a8275;
    font-size: 13px;
    text-align: center;
    padding: 16px;
}
.rgft-timeline__transfers {
    margin-top: 12px;
    background: #fdf6e3;
    border: 1px solid #f0e0a8;
    border-radius: 8px;
    padding: 10px 14px;
}
.rgft-timeline__transfers-title {
    font-size: 12px;
    font-weight: 700;
    color: #8a6f23;
    margin-bottom: 6px;
}
.rgft-timeline__transfer-row {
    font-size: 12px;
    color: #5a5240;
    line-height: 1.8;
}
.rgft-timeline__now {
    color: #1a7d4e;
    font-size: 11px;
}

.rgft-product__thumb {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #ede7d6;
    background: #fafafa;
}
.rgft-product__thumb--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c4bda5;
    background: #f3efe2;
}
.rgft-product__id {
    color: var(--rgft-primary, #b8963e);
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
}
.rgft-product__id:hover { color: #8a6f23; }
.rgft-product__title {
    font-size: 14px;
    font-weight: 500;
    color: var(--rgft-dark, #1a1a1a);
}
.rgft-product__time {
    font-size: 11px;
    color: #8a8275;
    margin-top: 2px;
}
.rgft-product__stage {
    font-size: 13px;
    color: var(--rgft-dark, #1a1a1a);
}
.rgft-product__elapsed {
    font-size: 13px;
    color: #1a7d4e;
    font-weight: 600;
}

/* ─── Empty state ──────────────────────────────────────── */
.rgft-empty {
    background: #fff;
    border: 1px dashed #d4cdb8;
    border-radius: 10px;
    padding: 40px;
    text-align: center;
    color: #8a8275;
    font-size: 15px;
}

/* ─── Generic message (login required, etc.) ───────────── */
.rgft-msg {
    background: #fff;
    border: 1px solid #ede7d6;
    border-radius: 10px;
    padding: 24px;
    text-align: center;
    color: #5a5240;
}
.rgft-msg--error {
    background: #fbecec;
    border-color: #e8b9b9;
    color: #a83232;
}
.rgft-msg a {
    color: var(--rgft-primary, #b8963e);
    font-weight: 600;
}

/* ═══ Station page (worker UI) ═══════════════════════════ */
.rgft-station {
    max-width: 600px;
}
.rgft-station__header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
    padding-bottom: 16px;
    margin-bottom: 24px;
    border-bottom: 1px solid #e6e0d0;
}
.rgft-station__header-title {
    grid-column: 2;
    text-align: center;
}
.rgft-station__header-title h1 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 28px;
    font-weight: 500;
    margin: 0;
    color: var(--rgft-dark, #1a1a1a);
}
.rgft-station__header .rgft-page-header__date {
    margin-top: 4px;
}
.rgft-station__header .rgft-page-header__logo-wrap {
    grid-column: 3;
    justify-self: end;
}

.rgft-scan-card {
    background: #fff;
    border: 1px solid #ede7d6;
    border-radius: 14px;
    padding: 24px;
    margin-bottom: 16px;
}
.rgft-scan-card__title {
    font-size: 12px;
    color: #8a8275;
    letter-spacing: 1px;
    margin: 0 0 12px;
    font-weight: 500;
}
.rgft-scan-card__input {
    width: 100%;
    height: 72px;
    font-size: 28px;
    font-weight: 700;
    padding: 0 20px;
    border: 2px solid #ede7d6;
    border-radius: 12px;
    background: #fafaf5;
    text-align: center;
    font-family: 'Cairo', sans-serif;
    color: var(--rgft-dark, #1a1a1a);
    box-sizing: border-box;
    letter-spacing: 1px;
    transition: border-color 0.15s, background 0.15s;
}
.rgft-scan-card__input:focus {
    outline: none;
    border-color: var(--rgft-primary, #b8963e);
    background: #fff;
}
.rgft-scan-card__select {
    width: 100%;
    height: 56px;
    font-size: 17px;
    font-weight: 600;
    padding: 0 16px;
    border: 2px solid #ede7d6;
    border-radius: 12px;
    background: #fafaf5;
    font-family: 'Cairo', sans-serif;
    color: var(--rgft-dark, #1a1a1a);
    box-sizing: border-box;
    margin-bottom: 18px;
    transition: border-color 0.15s, background 0.15s;
}
.rgft-scan-card__select:focus {
    outline: none;
    border-color: var(--rgft-primary, #b8963e);
    background: #fff;
}

.rgft-transfer-panel {
    background: #fffdf6;
    border: 1px solid #f0e5c4;
    border-radius: 12px;
    padding: 14px;
    margin-top: 10px;
}
.rgft-transfer-panel .rgft-scan-card__select { margin-bottom: 10px; }
.rgft-transfer-panel .rgft-scan-actions { margin: 4px 0 0; }

.rgft-scan-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 14px;
}
.rgft-scan-btn {
    height: 64px;
    font-size: 17px;
    font-weight: 700;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    font-family: inherit;
    transition: opacity 0.15s, transform 0.05s;
    color: #fff;
}
.rgft-scan-btn:active { transform: scale(0.98); }
.rgft-scan-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.rgft-scan-btn--start { background: #1a7d4e; }
.rgft-scan-btn--end   { background: var(--rgft-primary, #b8963e); }

/* The one main action button — label/color change with the product's state */
.rgft-scan-btn--primary {
    width: 100%;
    height: 76px;
    font-size: 19px;
    font-weight: 700;
    border: none;
    border-radius: 14px;
    cursor: pointer;
    font-family: inherit;
    color: #fff;
    background: #8a8275;
    transition: background 0.15s, opacity 0.15s, transform 0.05s;
}
.rgft-scan-btn--primary:active { transform: scale(0.98); }
.rgft-scan-btn--primary:disabled { opacity: 0.5; cursor: not-allowed; }
.rgft-scan-btn--primary.is-start  { background: #1a7d4e; }
.rgft-scan-btn--primary.is-finish { background: var(--rgft-primary, #b8963e); }

.rgft-secondary-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}
.rgft-scan-btn--secondary {
    flex: 1;
    height: 42px;
    font-size: 13px;
    font-weight: 600;
    background: #fff;
    color: #5a5240;
    border: 1px solid #ede7d6;
    border-radius: 10px;
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.15s, color 0.15s, opacity 0.15s;
}
.rgft-scan-btn--secondary:hover { border-color: var(--rgft-primary, #b8963e); color: #8a6f23; }
.rgft-scan-btn--secondary:disabled { opacity: 0.4; cursor: not-allowed; }

.rgft-scan-btn--handoff {
    width: 100%;
    height: 48px;
    margin-top: 10px;
    font-size: 14px;
    font-weight: 600;
    background: #fff;
    color: #5a5240;
    border: 2px solid #ede7d6;
}
.rgft-scan-btn--handoff:hover { border-color: var(--rgft-primary, #b8963e); color: #8a6f23; }

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

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

/* Active list on station page */
.rgft-active-card {
    background: #fff;
    border: 1px solid #ede7d6;
    border-radius: 14px;
    padding: 20px;
}

/* Station notes block (above active list) */
.rgft-station-notes {
    background: #fff;
    border: 1px solid #f0e5c4;
    border-radius: 14px;
    margin-bottom: 16px;
    overflow: hidden;
}
.rgft-station-notes__title {
    font-size: 14px;
    font-weight: 700;
    color: #6b4f00;
    margin: 0;
    padding: 12px 18px;
    background: linear-gradient(to left, #fff8e1, #fffdf2);
    border-bottom: 1px solid #f0e5c4;
    display: flex;
    align-items: center;
    gap: 8px;
}
.rgft-station-notes__group {
    border-bottom: 1px solid #f3eed8;
}
.rgft-station-notes__group:last-child { border-bottom: none; }
.rgft-station-notes__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    background: #fafaf5;
    border-bottom: 1px solid #f3eed8;
}
.rgft-station-notes__head strong {
    font-size: 14px;
    color: var(--rgft-dark, #1a1a1a);
}
.rgft-station-notes .rgft-note {
    padding: 12px 18px;
}
.rgft-station-notes .rgft-note:last-child {
    border-bottom: none;
}
.rgft-active-card__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--rgft-dark, #1a1a1a);
    margin: 0 0 14px;
}
.rgft-active-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.rgft-active-list__empty {
    text-align: center;
    color: #8a8275;
    padding: 24px;
    font-size: 14px;
}
.rgft-active-list__item {
    display: grid;
    grid-template-columns: 50px 96px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid #f3eee0;
    border-radius: 10px;
    margin-bottom: 8px;
    background: #fafaf5;
}
.rgft-active-list__item:last-child { margin-bottom: 0; }
.rgft-active-list__item img {
    width: 88px; height: 88px; object-fit: cover;
    border-radius: 8px; border: 1px solid #ede7d6;
}
.rgft-active-list__thumb-empty {
    width: 88px; height: 88px; border-radius: 8px;
    background: #f3efe2; color: #c4bda5;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px;
}
.rgft-active-list__id { color: var(--rgft-primary, #b8963e); font-weight: 700; font-size: 14px; }
.rgft-active-list__product { font-size: 13px; color: var(--rgft-dark, #1a1a1a); line-height: 1.5; }
.rgft-active-list__worker { font-size: 12px; color: #8a6f23; font-weight: 500; }
.rgft-transfer-badge {
    margin-top: 6px;
    padding: 6px 10px;
    background: #fdecec;
    border: 1px solid #f0b8b8;
    border-radius: 8px;
    color: #a83232;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
}
.rgft-transfer-badge__note { font-weight: 400; color: #8a4a4a; }
.rgft-active-list__customer { font-size: 11px; color: #8a8275; }
.rgft-active-list__time { font-size: 12px; color: #8a8275; font-weight: 500; }

/* Tappable list items (both the pending picker and the active list) */
.rgft-pickable {
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, transform 0.05s;
}
.rgft-pickable:hover { border-color: #d9cba0; }
.rgft-pickable:active { transform: scale(0.99); }
.rgft-pickable:focus-visible {
    outline: 2px solid var(--rgft-primary, #b8963e);
    outline-offset: 1px;
}
.rgft-pickable.is-selected {
    background: #fdf6e3;
    border-color: var(--rgft-primary, #b8963e);
    box-shadow: 0 0 0 1px var(--rgft-primary, #b8963e) inset;
}

/* Selected-order summary box in the scan card */
.rgft-selected-order {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 2px solid #ede7d6;
    border-radius: 12px;
    background: #fafaf5;
    margin-bottom: 14px;
    min-height: 96px;
}
.rgft-selected-order--compact {
    min-height: 56px;
    padding: 8px 10px;
    margin-bottom: 12px;
}
.rgft-selected-order--compact img,
.rgft-selected-order--compact .rgft-selected-order__thumb-empty {
    width: 44px;
    height: 44px;
}
.rgft-selected-order--compact.rgft-selected-order--empty {
    font-size: 13px;
}
.rgft-selected-order--empty {
    color: #8a8275;
    font-size: 14px;
    justify-content: center;
}
.rgft-selected-order img {
    width: 88px; height: 88px; object-fit: cover;
    border-radius: 10px; border: 1px solid #ede7d6; flex-shrink: 0;
}
.rgft-selected-order__thumb-empty {
    width: 88px; height: 88px; border-radius: 10px; flex-shrink: 0;
    background: #f3efe2; color: #c4bda5;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px;
}
.rgft-selected-order__text { min-width: 0; }
.rgft-selected-order__product {
    font-size: 14px; font-weight: 700; color: var(--rgft-dark, #1a1a1a);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rgft-selected-order__customer { font-size: 12px; color: #8a8275; margin-top: 2px; }

/* Picker card: search + "ready to start" list */
.rgft-picker-card {
    background: #fff;
    border: 1px solid #ede7d6;
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 16px;
}
.rgft-picker-search {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    border: 1px solid #ede7d6;
    border-radius: 10px;
    background: #fafaf5;
    font-family: 'Cairo', sans-serif;
    font-size: 14px;
    color: var(--rgft-dark, #1a1a1a);
    box-sizing: border-box;
    margin-bottom: 14px;
}
.rgft-picker-search:focus {
    outline: none;
    border-color: var(--rgft-primary, #b8963e);
    background: #fff;
}
.rgft-picker-card__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--rgft-dark, #1a1a1a);
    margin: 0 0 12px;
}
.rgft-picker-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 340px;
    overflow-y: auto;
}
.rgft-picker-list__empty {
    text-align: center;
    color: #8a8275;
    padding: 24px;
    font-size: 14px;
}

/* ─── Orders page ──────────────────────────────────────── */
.rgft-kpi--active {
    border-right: 3px solid var(--rgft-primary, #b8963e);
}
.rgft-orders__notice {
    background: #e8f5ee;
    color: #1a7d4e;
    border: 1px solid #cfe9da;
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 14px;
    margin-bottom: 16px;
}
.rgft-orders__notice--error {
    background: #fbeeee;
    color: #a83232;
    border-color: #edd2d2;
}
.rgft-badge {
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    display: inline-block;
}
.rgft-badge--pending   { background: #f0f0f0; color: #666; }
.rgft-badge--idle      { background: #f3f0e8; color: #8b6f00; }
.rgft-badge--active    { background: #e8f5ee; color: #1a7d4e; }
.rgft-badge--completed { background: #e6f0ff; color: #1a4d8f; }
.rgft-badge--cancelled { background: #efefef; color: #555; text-decoration: line-through; }

.rgft-orders__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 18px 0;
    flex-wrap: wrap;
}
.rgft-orders__search {
    display: flex;
    gap: 8px;
    flex: 1;
    min-width: 240px;
    max-width: 420px;
}
.rgft-orders__search input {
    flex: 1;
    height: 42px;
    padding: 0 14px;
    border: 1px solid #ede7d6;
    border-radius: 10px;
    background: #fff;
    font-family: 'Cairo', sans-serif;
    font-size: 14px;
}
.rgft-orders__search input:focus {
    outline: none;
    border-color: var(--rgft-primary, #b8963e);
}
.rgft-orders__search button {
    height: 42px;
    padding: 0 18px;
    border: 1px solid #ede7d6;
    border-radius: 10px;
    background: #fff;
    font-family: 'Cairo', sans-serif;
    font-size: 14px;
    cursor: pointer;
}
.rgft-orders__new-btn {
    height: 42px;
    padding: 0 20px;
    border-radius: 10px;
    background: var(--rgft-primary, #b8963e);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    transition: opacity 0.15s;
}
.rgft-orders__new-btn:hover { opacity: 0.9; }

.rgft-orders__empty {
    text-align: center;
    color: #8a8275;
    padding: 60px 20px;
    font-size: 14px;
    background: #fff;
    border: 1px solid #ede7d6;
    border-radius: 14px;
}

.rgft-orders__list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ─── Materials grid (compact tiles, not full-width rows) ── */
.rgft-materials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--rgft-space-3);
}
.rgft-material-tile {
    background: var(--rgft-bg-card);
    border: 1px solid var(--rgft-border);
    border-radius: var(--rgft-radius-md);
    padding: var(--rgft-space-3);
    text-align: center;
}
.rgft-material-tile__balance {
    font-weight: 700;
    font-size: 16px;
    color: var(--rgft-primary);
}
.rgft-material-tile__name {
    font-weight: 700;
    font-size: 13px;
    margin-top: 4px;
    color: var(--rgft-text);
}
.rgft-material-tile__cat {
    font-size: 11px;
    color: var(--rgft-text-muted);
    margin-top: 2px;
}
.rgft-material-tile__delete-form { margin-top: 8px; }
.rgft-material-tile__delete {
    background: none;
    border: none;
    color: var(--rgft-danger);
    font-size: 11px;
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
}

.rgft-order-card {
    display: grid;
    grid-template-columns: 60px 1fr auto;
    align-items: center;
    gap: 18px;
    background: #fff;
    border: 1px solid #ede7d6;
    border-radius: 12px;
    padding: 16px 20px;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.15s, border-color 0.15s;
}
.rgft-order-card:hover {
    border-color: #d8cfae;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}
.rgft-order-card__id {
    font-weight: 700;
    font-size: 15px;
    color: var(--rgft-primary, #b8963e);
}
.rgft-order-card__customer {
    font-weight: 700;
    font-size: 15px;
    color: var(--rgft-dark, #1a1a1a);
    margin-bottom: 4px;
}
.rgft-order-card__products {
    font-size: 13px;
    color: #8a8275;
}
.rgft-order-card__meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
.rgft-order-card__due {
    font-size: 12px;
    color: #8a8275;
    white-space: nowrap;
}
.rgft-order-card__due--late {
    color: #a83232;
    font-weight: 600;
}

/* ─── New-order form ───────────────────────────────────── */
.rgft-order-form__back {
    display: inline-block;
    margin-bottom: 16px;
    color: #8a8275;
    text-decoration: none;
    font-size: 13px;
}
.rgft-order-form__back:hover { color: var(--rgft-dark, #1a1a1a); }

.rgft-order-form__section {
    padding: 22px 24px;
    margin-bottom: 16px;
}
.rgft-order-form__section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}
.rgft-order-form__section-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 18px;
    font-weight: 500;
    margin: 0 0 14px;
    color: var(--rgft-dark, #1a1a1a);
}
.rgft-order-form__section-head .rgft-order-form__section-title { margin-bottom: 0; }

.rgft-order-form__hint {
    font-size: 13px;
    color: #8a8275;
    margin: 4px 0 16px;
}
.rgft-order-form__hint--warn {
    color: #a06a15;
    background: #fdf5e6;
    border: 1px solid #f0e0a8;
    border-radius: 8px;
    padding: 8px 12px;
    margin: 4px 0 16px;
}
.rgft-order-form__price-source {
    font-weight: 400;
    font-size: 12px;
    color: #8a8275;
    font-family: 'Cairo', sans-serif;
}

.rgft-order-form__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 16px;
}
.rgft-order-form__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.rgft-order-form__field span {
    font-size: 13px;
    color: #5a5240;
    font-weight: 600;
}
.rgft-order-form__field input,
.rgft-order-form__field textarea,
.rgft-order-form__field select {
    height: 46px;
    padding: 0 14px;
    border: 1px solid #ede7d6;
    border-radius: 10px;
    background: #fafaf5;
    font-family: 'Cairo', sans-serif;
    font-size: 15px;
}
.rgft-order-form__field textarea {
    height: auto;
    padding: 12px 14px;
    resize: vertical;
}
.rgft-order-form__field input:focus,
.rgft-order-form__field textarea:focus,
.rgft-order-form__field select:focus {
    outline: none;
    border-color: var(--rgft-primary, #b8963e);
    background: #fff;
}
.rgft-order-form__field--wide { grid-column: 1 / -1; }

.rgft-order-form__add-btn {
    height: 40px;
    padding: 0 18px;
    border: 1px solid var(--rgft-primary, #b8963e);
    border-radius: 10px;
    background: #fff;
    color: var(--rgft-primary, #b8963e);
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
}
.rgft-order-form__add-btn:hover { background: #fbf8f0; }

.rgft-order-form__rows {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.rgft-order-form__row {
    border: 1px solid #ede7d6;
    border-radius: 12px;
    padding: 14px;
    background: #fafaf5;
}
.rgft-order-form__row-main {
    display: grid;
    grid-template-columns: 1fr 90px 1fr auto;
    gap: 10px;
    align-items: center;
}
.rgft-order-form__row-main--priced {
    grid-template-columns: 1fr 90px 110px 1fr auto;
}
.rgft-order-form__row-main select,
.rgft-order-form__row-main input[type="number"],
.rgft-order-form__row-main input[type="file"] {
    height: 44px;
    padding: 0 12px;
    border: 1px solid #ede7d6;
    border-radius: 8px;
    background: #fff;
    font-family: 'Cairo', sans-serif;
    font-size: 14px;
}
.rgft-order-form__row-main input[type="file"] { padding: 6px; }
.rgft-order-form__row-price {
    border-color: #e2d4ae !important;
    background: #fdfaf2 !important;
}
.rgft-order-form__row-remove {
    height: 44px;
    padding: 0 16px;
    border: 1px solid #e0c4c4;
    border-radius: 8px;
    background: #fff;
    color: #a83232;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
}
.rgft-order-form__row-remove:hover { background: #fbf0f0; }

.rgft-order-form__row-image-swap {
    position: relative;
    height: 44px;
    padding: 0 16px;
    border: 1px solid #ede7d6;
    border-radius: 8px;
    background: #fff;
    color: var(--rgft-dark, #1a1a1a);
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    overflow: hidden;
}
.rgft-order-form__row-image-swap:hover { background: #fafaf5; }
.rgft-order-form__row-image-swap input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
}

.rgft-order-form__row-lock {
    height: 44px;
    padding: 0 14px;
    border: 1px solid #f0e5c4;
    border-radius: 8px;
    background: #fffdf6;
    color: #6b4f00;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.rgft-order-form__row-lock:hover { background: #fff8e1; }
.rgft-order-form__row-lock input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
    accent-color: var(--rgft-primary, #b8963e);
}

.rgft-order-form__stations-label {
    font-size: 12px;
    color: #8a8275;
    margin: 10px 0 6px;
}
.rgft-order-form__stations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 8px;
}
.rgft-order-form__stations-grid select {
    height: 38px;
    padding: 0 10px;
    border: 1px solid #ede7d6;
    border-radius: 7px;
    background: #fff;
    font-family: 'Cairo', sans-serif;
    font-size: 13px;
}

.rgft-order-form__submit {
    display: flex;
    justify-content: flex-end;
}
.rgft-order-form__submit .rgft-orders__new-btn {
    border: none;
    cursor: pointer;
    font-family: 'Cairo', sans-serif;
}
.rgft-order-form__submit--split {
    justify-content: space-between;
}
.rgft-order-form__delete-btn {
    height: 42px;
    padding: 0 18px;
    border: 1px solid #e0c4c4;
    border-radius: 10px;
    background: #fff;
    color: #a83232;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    font-family: 'Cairo', sans-serif;
}
.rgft-order-form__delete-btn:hover { background: #fbf0f0; }

.rgft-order-form__row--existing { background: #fff; }
.rgft-order-form__row-main--existing {
    grid-template-columns: 48px 50px 1fr 70px auto auto auto;
}
.rgft-order-form__row-main--existing.rgft-order-form__row-main--priced {
    grid-template-columns: 48px 50px 1fr 70px 110px auto auto auto;
}
.rgft-order-form__row-thumb {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid #ede7d6;
}
.rgft-order-form__row-thumb--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f0f0f0;
    color: #aaa;
    font-size: 11px;
}
.rgft-order-form__row-id {
    font-weight: 700;
    font-size: 13px;
    color: var(--rgft-primary, #b8963e);
}

.rgft-order-form__subhead {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 15px;
    font-weight: 500;
    margin: 20px 0 12px;
    color: var(--rgft-dark, #1a1a1a);
}
.rgft-cost-table-wrap {
    overflow-x: auto;
    margin-bottom: 8px;
    border: 1px solid var(--rgft-border);
    border-radius: var(--rgft-radius-md);
}

.rgft-cost-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 8px;
}
.rgft-cost-summary__item {
    background: #fafaf5;
    border: 1px solid #ede7d6;
    border-radius: 10px;
    padding: 12px 14px;
}
.rgft-cost-summary__item span {
    display: block;
    font-size: 12px;
    color: #8a8275;
    margin-bottom: 4px;
}
.rgft-cost-summary__item strong {
    font-size: 15px;
    color: var(--rgft-dark, #1a1a1a);
}
.rgft-cost-summary__item--total strong { color: var(--rgft-primary, #b8963e); }
.rgft-cost-summary__breakdown {
    margin: 6px 0 0;
    padding-right: 16px;
    font-size: 11px;
    color: #8a8275;
}

/* ─── Footer ────────────────────────────────────────────── */
.rgft-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 32px 0 20px;
    margin-top: 24px;
}
.rgft-footer__logo {
    max-height: 54px;
    max-width: 272px;
    object-fit: contain;
    opacity: 0.7;
}
.rgft-footer__copyright {
    font-size: 12px;
    color: #8a8275;
    text-align: center;
}

/* ═══ Mobile ═════════════════════════════════════════════ */
@media (max-width: 700px) {
    .rgft-dashboard,
    .rgft-station,
    .rgft-stats,
    .rgft-orders { padding: 16px; }

    .rgft-page-header {
        gap: 8px;
    }
    .rgft-page-header__logo-wrap {
        position: static;
        transform: none;
    }

    .rgft-kpis { grid-template-columns: 1fr 1fr; }
    .rgft-live-panel { grid-template-columns: 1fr; }

    .rgft-filters { gap: 6px; }
    .rgft-select, .rgft-search, .rgft-btn { font-size: 14px; }
    .rgft-search { width: 100%; flex-basis: 100%; }

    .rgft-card__head {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .rgft-product {
        grid-template-columns: 28px 56px 1fr auto;
        gap: 10px;
        padding: 12px 14px;
    }
    .rgft-product__id,
    .rgft-product__stage,
    .rgft-product__elapsed { display: none; }

    .rgft-timeline { padding: 10px 12px; }
    .rgft-timeline__table th,
    .rgft-timeline__table td { padding: 8px; font-size: 12px; }

    .rgft-scan-actions { grid-template-columns: 1fr; }
    .rgft-scan-card__input { font-size: 24px; height: 64px; }

    .rgft-order-card {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .rgft-order-card__meta {
        justify-content: space-between;
    }
    .rgft-orders__toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    .rgft-orders__search { max-width: none; }
    .rgft-orders__new-btn { justify-content: center; }

    .rgft-order-form__grid { grid-template-columns: 1fr; }
    .rgft-order-form__row-main { grid-template-columns: 1fr; }
    .rgft-order-form__row-main--existing { grid-template-columns: 1fr; }
    .rgft-order-form__row-main--priced { grid-template-columns: 1fr; }
    .rgft-order-form__row-main--existing.rgft-order-form__row-main--priced { grid-template-columns: 1fr; }
    .rgft-order-form__submit { justify-content: stretch; }
    .rgft-order-form__submit .rgft-orders__new-btn { width: 100%; justify-content: center; }
    .rgft-order-form__submit--split {
        flex-direction: column-reverse;
        gap: 10px;
    }
    .rgft-order-form__delete-btn { width: 100%; }
    .rgft-cost-summary { grid-template-columns: 1fr 1fr; }
}

/* ═══ Orders page (.rgft-o) ═══════════════════════════════════════════
   Scoped entirely to the inner `.rgft-o` wrapper — see the note at the
   top of templates/orders.php for why nothing here touches `.rgft-orders`
   itself. Layout is a real grid table on wide screens that reflows into
   stacked cards on narrow ones using grid-template-areas, so the same
   markup serves phone → TV without a second set of elements. */
.rgft-o,
.rgft-o *,
.rgft-o *::before,
.rgft-o *::after { box-sizing: border-box; }
.rgft-o {
    --o-line: #e7e6e1;
    --o-line-soft: #f4f3ef;
    --o-muted: #7c7c74;
    --o-faint: #9a9a92;
    --o-ink: #15171b;
    --o-red: #b4372c;
    --o-amber: #b26a00;
    --o-green: #0f7a4a;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
    color: var(--o-ink);
}
@media (min-width: 1800px) {
    .rgft-o {
        max-width: 1560px;
        margin-inline: auto;
        width: 100%;
    }
}

.rgft-o__notice {
    background: #e9f5ee;
    border: 1px solid #c6e3d2;
    color: #0f7a4a;
    border-radius: 12px;
    padding: 12px 16px;
    font-size: 13.5px;
}

/* KPI cards double as filter links, so the selected one is marked. */
.rgft-o__kpis {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
}
.rgft-o-kpi {
    background: #fff;
    border: 1px solid var(--o-line);
    border-radius: 14px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: inherit;
    min-width: 0;
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.rgft-o-kpi:hover { border-color: #d6d5cf; }
.rgft-o-kpi.is-on {
    border-color: var(--o-ink);
    box-shadow: inset 0 0 0 1px var(--o-ink);
}
.rgft-o-kpi span { font-size: 12.5px; color: var(--o-muted); }
.rgft-o-kpi strong {
    font-size: 28px;
    font-weight: 600;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.rgft-o-kpi--red { border-color: #f2d4cf; }
.rgft-o-kpi--red span, .rgft-o-kpi--red strong { color: var(--o-red); }
.rgft-o-kpi--red.is-on { border-color: var(--o-red); box-shadow: inset 0 0 0 1px var(--o-red); }
.rgft-o-kpi--amber { border-color: #f0e0be; }
.rgft-o-kpi--amber span, .rgft-o-kpi--amber strong { color: var(--o-amber); }
.rgft-o-kpi--amber.is-on { border-color: var(--o-amber); box-shadow: inset 0 0 0 1px var(--o-amber); }
.rgft-o-kpi--green { border-color: #c7e4d4; }
.rgft-o-kpi--green span, .rgft-o-kpi--green strong { color: var(--o-green); }
.rgft-o-kpi--green.is-on { border-color: var(--o-green); box-shadow: inset 0 0 0 1px var(--o-green); }

.rgft-o__toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.rgft-o__search {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    background: #fff;
    border: 1px solid var(--o-line);
    border-radius: 12px;
    padding: 0 14px;
    height: 46px;
    box-sizing: border-box;
}
.rgft-o__search-lbl { font-size: 14px; color: var(--o-faint); }
.rgft-o__search input[type="text"] {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font-family: inherit;
    font-size: 13.5px;
    color: var(--o-ink);
    height: 44px;
    box-shadow: none;
    padding: 0;
}
.rgft-o__search-go {
    flex: none;
    border: 0;
    background: transparent;
    color: var(--o-faint);
    font-size: 16px;
    cursor: pointer;
    padding: 4px 6px;
}
.rgft-o__search-go:hover { color: var(--o-ink); }
.rgft-o__new {
    background: var(--o-ink);
    color: #fff;
    font-size: 13.5px;
    font-weight: 500;
    padding: 0 20px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    text-decoration: none;
    flex: none;
}
.rgft-o__new:hover { color: #fff; opacity: .9; }
.rgft-o__range-form { flex: none; }
.rgft-o__range-select {
    height: 46px;
    padding: 0 14px;
    border: 1px solid var(--o-line);
    border-radius: 12px;
    background: #fff;
    font-family: inherit;
    font-size: 13px;
    color: var(--o-ink);
    cursor: pointer;
}

.rgft-o__chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding-bottom: 2px;
}
.rgft-o-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    font-size: 12.5px;
    padding: 9px 16px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--o-line);
    color: var(--o-muted);
    text-decoration: none;
}
.rgft-o-chip b {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    opacity: .65;
}
.rgft-o-chip:hover { color: var(--o-ink); border-color: #d6d5cf; }
.rgft-o-chip.is-on {
    background: var(--o-ink);
    border-color: var(--o-ink);
    color: #fff;
    font-weight: 500;
}

.rgft-o__table {
    background: #fff;
    border: 1px solid var(--o-line);
    border-radius: 14px;
    overflow: hidden;
}
.rgft-o-row {
    display: grid;
    gap: 14px;
    align-items: center;
    grid-template-columns: 74px minmax(0, 1.25fr) minmax(0, 1.7fr) 150px 104px;
    grid-template-areas: "id cust prod due badge";
    padding: 15px 18px;
}
.rgft-o__thead {
    padding: 11px 18px;
    background: #faf9f7;
    border-bottom: 1px solid #f0efeb;
    font-size: 11px;
    color: var(--o-faint);
}
.rgft-o__thead span:last-child { text-align: left; }
.rgft-o-row--link {
    border-bottom: 1px solid var(--o-line-soft);
    color: inherit;
    text-decoration: none;
}
.rgft-o-row--link:last-child { border-bottom: 0; }
.rgft-o-row--link:hover { background: #faf9f7; color: inherit; }
.rgft-o-row__id {
    grid-area: id;
    font-size: 13px;
    font-weight: 600;
    color: var(--rgft-primary, #2f5fe0);
    font-variant-numeric: tabular-nums;
}
.rgft-o-row__cust {
    grid-area: cust;
    font-size: 13.5px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rgft-o-row__prod {
    grid-area: prod;
    font-size: 12.5px;
    color: var(--o-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rgft-o-row__due {
    grid-area: due;
    font-size: 12.5px;
    color: var(--o-muted);
    font-variant-numeric: tabular-nums;
}
.rgft-o-row__due i { font-style: normal; color: var(--o-faint); }
.rgft-o-row__due.is-late, .rgft-o-row__due.is-late i { color: var(--o-red); }
.rgft-o-badge {
    grid-area: badge;
    justify-self: end;
    font-size: 11.5px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid;
    white-space: nowrap;
}
.rgft-o-badge--active    { color: #1e42a8; background: #eef2ff; border-color: #c6d2f7; }
.rgft-o-badge--idle      { color: var(--o-amber); background: #fdf4e5; border-color: #f0e0be; }
.rgft-o-badge--pending   { color: var(--o-muted); background: #f4f3ef; border-color: var(--o-line); }
.rgft-o-badge--completed { color: #0f7a4a; background: #e9f5ee; border-color: #c6e3d2; }
.rgft-o-badge--cancelled { color: var(--o-faint); background: #f4f3ef; border-color: var(--o-line); }
.rgft-o-badge--late      { color: var(--o-red); background: #fbeeec; border-color: #f2d4cf; }

.rgft-o__empty {
    background: #fff;
    border: 1px solid var(--o-line);
    border-radius: 14px;
    padding: 34px 18px;
    text-align: center;
    color: var(--o-muted);
    font-size: 13.5px;
}
.rgft-o__count {
    font-size: 12px;
    color: var(--o-faint);
    text-align: center;
    padding-top: 6px;
}

/* Tablet — five KPI cards don't fit comfortably, and the table's fixed
   columns start truncating, so both step down a tier before the phone
   layout kicks in. */
@media (max-width: 1240px) {
    .rgft-o__kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .rgft-o-row { grid-template-columns: 66px minmax(0, 1.2fr) minmax(0, 1.4fr) 132px 96px; gap: 10px; }
}

/* Phone — the header row disappears and each row becomes a stacked card.
   Same elements, re-placed via grid-template-areas. */
@media (max-width: 780px) {
    .rgft-o__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .rgft-o__thead { display: none; }
    .rgft-o-row {
        grid-template-columns: 1fr auto;
        grid-template-areas: "id badge" "cust cust" "prod prod" "due due";
        gap: 4px 10px;
        padding: 14px 16px;
    }
    .rgft-o-row__cust, .rgft-o-row__prod { white-space: normal; }
    .rgft-o-row__due { justify-self: start; margin-top: 6px; }
    .rgft-o__toolbar {
        flex-direction: column;
        align-items: stretch;
        /* nowrap is load-bearing, not tidiness: a wrapping COLUMN flex
           container sizes its line to the widest item's max-content width
           and stretches every item to that line — so the search box and the
           button both blew out to 398px inside a 358px container and hung
           off the edge. */
        flex-wrap: nowrap;
    }
    .rgft-o__new { width: 100%; }
    .rgft-o__range-select { width: 100%; }
    /* Chips scroll sideways instead of wrapping into three tall rows. */
    .rgft-o__chips {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .rgft-o__chips::-webkit-scrollbar { display: none; }
    .rgft-o-chip { flex: none; }
}

/* TV / very large displays — bump the reading sizes so the page stays
   legible from across a room rather than shrinking into the corner. */
@media (min-width: 1800px) {
    .rgft-o-kpi strong { font-size: 34px; }
    .rgft-o-kpi span { font-size: 14px; }
    .rgft-o-row { padding: 19px 22px; }
    .rgft-o-row__cust { font-size: 15px; }
    .rgft-o-row__prod, .rgft-o-row__due { font-size: 14px; }
    .rgft-o-chip { font-size: 14px; padding: 11px 20px; }
}

/* ─── LTR (English) overrides ──────────────────────────────────────────
   Every rule above assumes RTL (direction:rtl / text-align:right / a
   right-hand sidebar) since Arabic was the only language this plugin
   supported until the i18n system (includes/class-i18n.php) was added.
   Rather than rewriting every directional declaration to a logical
   property (a much larger, riskier diff touching hundreds of existing,
   already-verified rules), this block re-declares just the ones that are
   actually direction-sensitive, scoped to [dir="ltr"] so they only apply
   when RGFT_I18n::dir() switches a page to English — RTL (the default)
   is completely untouched. Selectors here intentionally mirror the
   original ones' specificity as closely as possible and are placed last
   in the file so normal cascade order also favors them. */
.rgft-dashboard[dir="ltr"],
.rgft-station[dir="ltr"],
.rgft-stats[dir="ltr"],
.rgft-orders[dir="ltr"] {
    direction: ltr;
    text-align: left;
}
.rgft-page .rgft-dash2[dir="ltr"],
.rgft-page .rgft-orders[dir="ltr"],
.rgft-page .rgft-stats[dir="ltr"],
.rgft-page .rgft-station[dir="ltr"] {
    padding-right: 24px !important;
    padding-left: calc(var(--rgft-rail) + var(--rgft-gutter)) !important;
    transition: padding-left .22s ease;
}
[dir="ltr"] .rgft-sidebar {
    right: auto;
    left: 0;
}
[dir="ltr"] .rgft-table th,
[dir="ltr"] .rgft-cost-table th,
[dir="ltr"] .rgft-timeline__table th,
[dir="ltr"] .rgft-table td,
[dir="ltr"] .rgft-cost-table td,
[dir="ltr"] .rgft-timeline__table td {
    text-align: left;
}
[dir="ltr"] .rgft-kpi--green   { border-right: 0; border-left: 3px solid #1a7d4e; }
[dir="ltr"] .rgft-kpi--amber   { border-right: 0; border-left: 3px solid #b87a00; }
[dir="ltr"] .rgft-kpi--gold    { border-right: 0; border-left: 3px solid var(--rgft-primary, #b8963e); }
[dir="ltr"] .rgft-kpi--red     { border-right: 0; border-left: 3px solid #a83232; }
[dir="ltr"] .rgft-kpi--active  { border-right: 0; border-left: 3px solid var(--rgft-primary, #b8963e); }
[dir="ltr"] .rgft-note--recent .rgft-note__body {
    padding-right: 0;
    padding-left: 19px;
}
[dir="ltr"] .rgft-note--pinned {
    background: linear-gradient(to right, #fef0e8, #fff8f3);
    border-right: 0;
    border-left: 3px solid #d46b3f;
}
[dir="ltr"] .rgft-cost-summary__breakdown {
    padding-right: 0;
    padding-left: 16px;
}