.rgft-dash2{--d2-accent:var(--rgft-primary,#2f5fe0);--d2-ink:var(--rgft-dark,#15171b);
  --d2-tint:color-mix(in srgb,var(--d2-accent) 10%,#fff);
  --d2-soft:color-mix(in srgb,var(--d2-accent) 35%,#fff);
  --d2-deep:color-mix(in srgb,var(--d2-accent) 80%,#000);
  --d2-line:#e3e3e6;--d2-muted:#78787b;--d2-faint:#969699;--d2-canvas:#f7f7f5;
  font-family:'IBM Plex Sans Arabic',system-ui,sans-serif;color:#15171b;background:var(--d2-canvas);
  box-sizing:border-box;-webkit-font-smoothing:antialiased}
.rgft-dash2 .d2-main{padding:24px 26px 48px;min-width:0}
.rgft-dash2 *{box-sizing:border-box}
.rgft-dash2 a{text-decoration:none;color:var(--d2-accent)}
.d2-kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-bottom:16px}
@media(max-width:1180px){.d2-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.d2-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
.d2-kpi{background:#fff;border:1px solid var(--d2-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:18px;display:flex;
  flex-direction:column;gap:10px;color:inherit;min-width:0}
.d2-kpi:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(15,23,42,.05),0 16px 36px -12px rgba(15,23,42,.14)}
.d2-kpi span{font-size:12.5px;color:var(--d2-muted)}
.d2-kpi strong{font-size:36px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums}
.d2-kpi i{display:block;height:3px;border-radius:2px;background:#e8e8eb;overflow:hidden}
.d2-kpi i b{display:block;height:100%;background:var(--d2-accent)}
.d2-kpi--red{box-shadow:inset 4px 0 0 #b4372c}
.d2-kpi--red span,.d2-kpi--red strong{color:#b4372c}
.d2-kpi--green strong{color:#0f7a4a}
.d2-kpi--amber strong{color:#b26a00}
/* Stalled-station alert row — deliberately a stronger, fully-tinted red
   (not just the KPI cards' subtle inset accent bar) matching the same
   "urgent, look now" register used for station.php's own urgent-notes
   banner elsewhere in the plugin, reused here for visual consistency. */
.d2-stalled{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px}
.d2-stalled__card{background:#fdeeec;border:1px solid #e2564a;border-radius:12px;
  padding:12px 16px;min-width:170px;flex:1 1 170px}
.d2-stalled__title{font-size:12.5px;font-weight:600;color:#a8281b;margin:0 0 4px}
.d2-stalled__since{font-size:15px;font-weight:700;color:#c0392b;margin:0 0 4px}
.d2-stalled__reason{font-size:12px;color:#8a4740;margin:0}
/* Deliberately calm/neutral colors — NOT red like .d2-stalled above,
   since "empty" is normal factory rhythm, not a problem. A live report:
   the first version of this (a single quiet gray text line) was too
   subtle to even notice on the page — restructured with the same
   card-like visual weight (clear border, bold heading, distinct pills
   for each station) the rest of this dashboard already uses for other
   info blocks, just in a neutral color instead of red/amber, so it
   reads as a real, findable section without reading as an alert. */
.d2-empty-stations{background:#fff;border:2px solid #d1d1d5;border-radius:12px;
  padding:14px 18px;margin-bottom:16px}
.d2-empty-stations__label{font-weight:700;font-size:14px;color:#363639;margin:0 0 10px;
  display:block}
.d2-empty-stations__chips{display:flex;flex-wrap:wrap;gap:8px}
.d2-empty-stations__chip{font-size:12.5px;font-weight:600;padding:6px 13px;border-radius:999px;
  background:#e9e9ec;color:#545458;border:1px solid #d1d1d5}
.d2-ot-alert{display:flex;align-items:center;gap:10px;background:#fdeeec;border:1px solid #e2564a;
  border-radius:12px;padding:12px 16px;margin-bottom:16px;color:#a8281b;font-size:13.5px;font-weight:600;
  text-decoration:none}
.d2-ot-alert:hover{background:#fbe0dd;color:#a8281b}
.d2-ot-alert b{font-size:15px}
.d2-cols{display:grid;grid-template-columns:1.55fr 1fr;gap:14px;align-items:start;margin-bottom:22px}
@media(max-width:1000px){.d2-cols{grid-template-columns:1fr}}
.d2-card{background:#fff;border:1px solid var(--d2-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:20px}
.d2-card:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(15,23,42,.05),0 16px 36px -12px rgba(15,23,42,.14)}
.d2-card h2{margin:0;font-size:15px;font-weight:600}
.d2-cardhead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.d2-flag{font-size:11.5px;font-weight:500;color:#b4372c;background:#fbeeec;border:1px solid #f2d4cf;
  padding:5px 10px;border-radius:999px}
.d2-legend{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:11.5px;color:var(--d2-muted);margin-bottom:14px;white-space:nowrap}
.d2-legend span{display:flex;align-items:center;gap:6px}
.d2-legend i{width:10px;height:10px;border-radius:3px;display:block}
.d2-bars{display:flex;flex-direction:column;gap:12px}
.d2-bar{display:grid;grid-template-columns:92px 1fr 118px;align-items:center;gap:14px;
  padding:6px 8px;margin:-6px -8px;border-radius:10px;color:inherit}
.d2-bar:hover{background:#faf9f7}
.d2-bar__name{font-size:13px}
.d2-bar__track{display:flex;height:22px;background:#f1f1f3;border-radius:6px;overflow:hidden}
.d2-bar__track b{display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:#fff}
.d2-bar__track b.q{background:var(--d2-soft);color:var(--d2-deep)}
.d2-bar__track b.w{background:var(--d2-accent)}
.d2-bar__num{display:flex;flex-direction:column;gap:2px;text-align:left}
.d2-bar__num em{font-style:normal;font-size:13px;font-weight:600}
.d2-bar__num small{font-size:11.5px;color:var(--d2-faint)}
.d2-bar--hot .d2-bar__name{color:#b4372c;font-weight:600}
.d2-bar--hot .d2-bar__track b.w{background:#b4372c}
.d2-bar--hot .d2-bar__track b.q{background:#f0c9c3;color:#8f2b22}
.d2-bar--hot .d2-bar__num em{color:#b4372c}
.d2-total{margin-top:18px;padding-top:14px;border-top:1px solid #ededef;display:flex;justify-content:space-between;
  gap:12px;flex-wrap:wrap;font-size:12.5px;color:var(--d2-muted)}
.d2-total b{color:#15171b;font-weight:600}
.d2-dark{background:var(--d2-ink);color:#e9e9e6;border-radius:14px;padding:20px}
.d2-dark h2{margin:0 0 14px;font-size:15px;font-weight:600;color:#fff}
.d2-late{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px;border-radius:10px;color:#e9e9e6}
.d2-late:hover{background:rgba(255,255,255,.06);color:#fff}
.d2-late span{font-size:13px}
.d2-late em{font-style:normal;font-size:11.5px;color:#ff9d92}
.d2-dark .d2-foot{margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.1);
  display:flex;justify-content:space-between;font-size:12px;color:#87878a}
.d2-dark .d2-foot b{color:#fff;font-weight:600}
/* Profitability rows reuse .d2-dark/.d2-late's structure — same shape as
   the overdue-orders section, distinguished only by an accent-color
   override (green for "earning more than usual", red for "earning less
   than usual" — .d2-late em's default IS already this same red, so the
   down variant needs no override, just the up variant needs one). */
.d2-late--profit-up em{color:#6fd9a8}
/* Amber, not the default red -- matches the low-stock warning's own
   "cautionary, not yet critical" severity established elsewhere
   (stock.php's is-low tile state, this same file's own idle KPI/chip
   colors), one step below out-of-stock's red urgency. */
.d2-late--stock-low em{color:#f0b429}
/* A live report: this new section is a standalone .d2-dark sibling, not
   a child of .d2-col-stack like the existing overdue/at-risk sections
   are -- those get their spacing from that flex container's own gap,
   which masked the fact that .d2-dark itself carries zero margin of its
   own. Without this, the section sat completely flush against "الطلبات
   الجارية" right after it, with no visual separation at all. Scoped to
   this section's own id rather than added to .d2-dark globally, so the
   existing sections (already spaced correctly via the flex gap) are
   untouched. */
#rgft-stock-warning-section{margin-bottom:20px}
.d2-late--at-risk em{color:#ffc27a}
.d2-subtle{margin:-8px 0 14px;font-size:11.5px;color:#87878a;line-height:1.5}
.d2-col-stack{display:flex;flex-direction:column;gap:14px}
/* With "▲ top-earning products" moved to stats.php, the left stack can
   now hold just the station card alone while the right stack still has
   up to 3 sections (overdue+at-risk+underperforming) -- the exact same
   height-mismatch this fixes was v2.7.173/174's problem in reverse.
   align-self:stretch matches each stack's own height to the taller
   sibling; flex:1 on a stack's card then lets IT (not empty stack
   padding) absorb any resulting extra space, so a lone card's own white
   background fills it rather than leaving bare page background showing. */
.d2-cols > .d2-col-stack{align-self:stretch;min-height:100%}
.d2-col-stack > .d2-card{flex:1}
.d2-empty{font-size:13px;color:var(--d2-faint)}
.d2-secttl{margin:0 0 12px;font-size:15px;font-weight:600}
.d2-filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.d2-filters select,.d2-filters input{font-family:inherit;font-size:12.5px;padding:9px 12px;border:1px solid var(--d2-line);
  border-radius:9px;background:#fff;color:#15171b}
.d2-filters input{min-width:220px}
.d2-filters button{border:0;background:var(--d2-ink);color:#fff;border-radius:9px;padding:9px 18px;
  font-family:inherit;font-size:12.5px;cursor:pointer}
.d2-filters button:hover{background:var(--d2-accent)}
.d2-count{font-size:12px;color:var(--d2-faint);margin:0 0 12px}
.d2-pagination{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;margin-top:8px}
.d2-page{font-family:inherit;font-size:13px;min-width:38px;height:38px;padding:0 8px;display:inline-flex;
  align-items:center;justify-content:center;border-radius:9px;border:1px solid var(--d2-line);
  background:#fff;color:var(--d2-muted);text-decoration:none}
.d2-page:hover{border-color:var(--d2-accent);color:var(--d2-accent)}
.d2-page.is-active{background:var(--d2-ink);border-color:var(--d2-ink);color:#fff;font-weight:600;cursor:default}
.d2-page--nav{padding:0 14px;white-space:nowrap}
.d2-page--nav.is-disabled{opacity:.4;pointer-events:none}
.d2-page--gap{border:0;background:transparent;color:var(--d2-faint);min-width:auto;cursor:default}
.d2-order{background:#fff;border:1px solid var(--d2-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;overflow:hidden;margin-bottom:12px}
.d2-order:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(15,23,42,.05),0 16px 36px -12px rgba(15,23,42,.14)}
.d2-order--late{box-shadow:inset -4px 0 0 #b4372c}
.d2-order--soon{box-shadow:inset -4px 0 0 #b26a00}
.d2-order__head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 18px;
  border-bottom:1px solid #ededef;flex-wrap:wrap}
.d2-id{font-size:12px;font-weight:600;color:var(--d2-accent);background:var(--d2-tint);border-radius:8px;
  padding:7px 10px;font-variant-numeric:tabular-nums}
.d2-id:hover{background:var(--d2-soft)}
.d2-cust{font-size:15px;font-weight:600}
.d2-sub{font-size:12px;color:var(--d2-muted)}
.d2-prog{display:flex;align-items:center;gap:8px;margin-top:4px}
.d2-prog i{width:130px;height:6px;background:#ebebee;border-radius:999px;overflow:hidden;display:block}
.d2-prog i b{display:block;height:100%;background:#0f7a4a;border-radius:999px}
.d2-prog small{font-size:11.5px;color:var(--d2-muted)}
.d2-cost{font-size:12px;color:#58585b;background:#f1f1f3;border:1px solid var(--d2-line);padding:7px 11px;
  border-radius:999px;font-variant-numeric:tabular-nums;white-space:nowrap}
.d2-cost:hover{background:#e8e8eb;color:#15171b}
.d2-chip{font-size:11.5px;font-weight:600;padding:6px 11px;border-radius:999px;white-space:nowrap;border:1px solid transparent}
.d2-chip--active,.d2-chip--completed{color:#0f7a4a;background:#eaf5ee;border-color:#cfe7d8}
.d2-chip--idle{color:#b26a00;background:#eeeef6;border-color:#f0e0be}
.d2-chip--pending{color:#2a6f8a;background:#eaf3f7;border-color:#cde1ea}
.d2-chip--cancelled{color:#b4372c;background:#fbeeec;border-color:#f2d4cf}
.d2-row,.d2-rowhead{display:grid;grid-template-columns:1.4fr .7fr .9fr 1fr .8fr;gap:12px;padding:14px 18px;align-items:center}
.d2-rowhead{padding:10px 18px;background:#faf9f7;border-bottom:1px solid #ededef;font-size:11px;color:var(--d2-faint)}
.d2-row{border-bottom:1px solid #f1f1f3;font-size:13px}
.d2-row__prod{display:flex;align-items:center;gap:12px}
.d2-row__prod img,.d2-row__ph{width:40px;height:40px;border-radius:9px;object-fit:cover;background:#ededef;border:1px solid var(--d2-line);flex:none}
.d2-row__t{display:flex;flex-direction:column;gap:3px}
.d2-row__t b{font-size:13.5px;font-weight:500}
.d2-row__t small{font-size:11.5px;color:var(--d2-faint)}
.d2-row .rgft-product__toggle{width:26px;height:26px;flex:none;border:1px solid var(--d2-line);background:#fff;
  border-radius:7px;color:#58585b;font-family:inherit;font-size:13px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center}
.d2-row .rgft-product__toggle:hover{border-color:var(--d2-accent);color:var(--d2-accent)}
.d2-tl{padding:0 18px 16px;background:#fbfaf8;border-bottom:1px solid #f1f1f3}
.d2-tl table{width:100%;border-collapse:collapse;background:#fff;border:1px solid #e6e6e9;border-radius:10px;overflow:hidden;font-size:12.5px}
.d2-tl th{background:#faf9f7;color:var(--d2-faint);font-weight:500;font-size:11px;text-align:right;padding:9px 14px}
.d2-tl td{padding:11px 14px;border-top:1px solid #f1f1f3}
.d2-tl__transfers{margin-top:10px;font-size:12px;color:#58585b;display:flex;flex-direction:column;gap:6px}
/* The shared topbar is a sibling of .d2-main, and since this page keeps its
   gutters on .d2-main rather than on the root, the bar was rendering
   full-bleed while every card below it sat inset — the "sidebar is in the
   wrong place on the dashboard" symptom. Match .d2-main's horizontal
   padding so the bar lines up with the content it belongs to. */
.rgft-dash2 > .rgft-topbar{margin-inline:26px}
@media(max-width:820px){.d2-row,.d2-rowhead{grid-template-columns:1fr;gap:6px}.d2-rowhead{display:none}}
/* Phone: the station bars were `92px 1fr 118px` at every width, so on a
   390px screen the fixed 92+118+gaps left the 1fr track around 60px and it
   read as no bar at all — the whole point of the row. Name and figure keep
   one line; the track drops to its own full-width line underneath. */
@media(max-width:600px){
  .d2-bar{grid-template-columns:1fr auto;grid-template-areas:"name num" "track track";gap:7px 10px}
  .d2-bar__name{grid-area:name}
  .d2-bar__track{grid-area:track;height:18px}
  .d2-bar__num{grid-area:num;flex-direction:row;align-items:baseline;gap:6px}
  /* .d2-main carries this page's own gutters, so the root's reserved-rail
     rule adds a second one on top — halve this one on phones instead of
     spending ~52px of a 390px screen on padding. */
  .rgft-dash2 .d2-main{padding:16px 14px 40px}
  .rgft-dash2 > .rgft-topbar{margin-inline:14px}
  .d2-kpi{padding:14px}
  .d2-kpi strong{font-size:29px}
  .d2-card{padding:16px}
}

/* LTR (English) override — see the equivalent block in rtl.css for the
   full rationale. Root direction/text-align for .rgft-dash2[dir="ltr"]
   is already handled centrally in rtl.css; only this file's one local
   text-align:right rule needs re-declaring here. */
.rgft-dash2[dir="ltr"] .d2-tl th{
    text-align: left;
}