/* Scoped to .s2-inner (an inner wrapper), never to .rgft-stats itself —
   .rgft-stats is the shared sidebar-integration wrapper class (reserved
   padding-right + JS position-fix apply to it on every page); it must
   stay completely bare so nothing here can ever conflict with that. */
.s2-inner{--accent:var(--rgft-primary,#2f5fe0);--ink:var(--rgft-dark,#15171b);
  font-family:'IBM Plex Sans Arabic',system-ui,sans-serif;color:#15171b;-webkit-font-smoothing:antialiased;
  max-width:1240px;margin:0 auto;padding:0 30px 56px;display:flex;flex-direction:column;gap:14px;box-sizing:border-box}
.s2-inner *{box-sizing:border-box}
/* A live report: this page was the last one still on the old Cairo/
   Playfair Display combo -- every other "v2" page had already moved to
   IBM Plex Sans Arabic. h2 no longer needs its own override at all now
   that it correctly inherits the same font as the rest of the page. */
.s2-filters{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:8px}
.s2-filters a,.s2-filters button{font-size:12.5px;padding:8px 16px;border-radius:999px;border:1px solid #e3e3e6;background:#fff;color:#78787b;font-weight:400;font-family:inherit;cursor:pointer;text-decoration:none}
.s2-filters a.active{border-color:var(--ink);background:var(--ink);color:#fff;font-weight:500}
/* A live report: the export section, even as a properly-styled .s2-card,
   still permanently occupied vertical space on a page most visits never
   use it on. Collapsed by default behind native <details>/<summary> --
   the summary itself is styled as a small pill matching the page's own
   filter-pill language, so it reads as one more compact control in the
   row above it, not a stray full-width block. */
.s2-export-toggle{margin:0 auto 16px}
.s2-export-toggle summary{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;padding:8px 16px;border-radius:999px;border:1px solid #e3e3e6;background:#fff;color:#78787b;cursor:pointer;list-style:none;user-select:none}
.s2-export-toggle summary::-webkit-details-marker{display:none}
.s2-export-toggle summary:hover{border-color:var(--accent);color:var(--accent)}
.s2-export-toggle__icon{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:var(--accent);color:#fff;font-size:13px;line-height:1;font-weight:700;transition:transform .15s}
.s2-export-toggle[open] summary{border-color:var(--accent);color:var(--accent)}
.s2-export-toggle[open] .s2-export-toggle__icon{transform:rotate(45deg)}
.s2-export-toggle__panel{background:#fff;border:1px solid #e3e3e6;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;margin-top:10px}
.s2-export-toggle__panel:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(15,23,42,.05),0 16px 36px -12px rgba(15,23,42,.14)}
.s2-export-rows{display:flex;flex-direction:column;gap:10px}
.s2-export-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.s2-export-row__label{font-size:13px;font-weight:600;color:var(--ink);min-width:90px}
.s2-export-row__actions{display:flex;gap:8px;flex-wrap:wrap}
.s2-export-row__actions a{font-size:12.5px;padding:7px 16px;border-radius:999px;border:1px solid #e3e3e6;background:#fff;color:#78787b;font-weight:400;text-decoration:none}
.s2-export-row__actions a:hover{border-color:var(--accent);color:var(--accent)}
.s2-filters .s2-custom{display:flex;align-items:center;gap:6px}
.s2-filters .s2-custom input{border:none;background:transparent;font-family:inherit;font-size:12px;color:#78787b}
/* A live report (screenshot from the real production site): this page
   ALWAYS renders exactly 4 KPI cards (the 4th, "منتجات رجعت بعيوب", is
   never conditionally hidden — checked the template directly). The old
   auto-fit grid picked however many 240px+ columns fit the viewport,
   which happened to be 3 at this exact width — leaving the 4th card
   alone on its own row with two glaringly empty cells beside it. A
   fixed, KNOWN card count doesn't need a responsive auto-fit guess: 4
   equal columns divide evenly at wide widths, 2 columns divide evenly
   into two full rows of 2 at medium widths, 1 column at narrow widths
   — never an incomplete row at any breakpoint. */
.s2-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:8px}
@media (max-width:900px){.s2-kpis{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.s2-kpis{grid-template-columns:1fr}}
.s2-kpi{background:#fff;border:1px solid #e3e3e6;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;min-width:0}
.s2-kpi:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(15,23,42,.05),0 16px 36px -12px rgba(15,23,42,.14)}
.s2-kpi .lbl{font-size:12.5px;color:#78787b}
.s2-kpi .val{font-size:clamp(24px,2.4vw,32px);font-weight:600;line-height:1.1;font-variant-numeric:tabular-nums;white-space:nowrap}
.s2-kpi .val small{font-size:14px;font-weight:500;color:#78787b;margin-inline-start:5px}
.s2-kpi .sub{font-size:11.5px;color:#969699;display:flex;align-items:center;gap:5px}
.s2-kpi .sub2{font-size:11.5px;color:#969699;line-height:1.6}
.s2-kpi .bar{height:3px;background:#e8e8eb;border-radius:2px;overflow:hidden}
.s2-kpi .bar b{display:block;height:100%;background:var(--accent)}
.s2-kpi .bar--split{display:flex}
.s2-kpi .bar--split i{display:block;height:100%;flex:none}
.s2-up{color:#0f7a4a;font-weight:600;font-variant-numeric:tabular-nums}
.s2-down{color:#b4372c;font-weight:600;font-variant-numeric:tabular-nums}
.s2-cols2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}
/* A live report (screenshot): the shorter of the two side-by-side cards
   here ("الالتزام بمواعيد التسليم", a handful of stats) still visibly
   stretched to match its much longer sibling ("الربحية", a full
   revenue/cost/top-and-bottom-products breakdown), leaving a large,
   obviously empty gap at its own bottom -- even though this grid
   already sets align-items:start. Root cause: .s2-card's OWN
   height:100% (needed elsewhere, where cards genuinely should fill a
   fixed-height row) overrides that per-item alignment intent here,
   forcing every card in this specific pairing to always match
   whichever one happens to be tallest that week. Scoped to just this
   grid rather than changing .s2-card globally, since other pages/
   sections may genuinely rely on the fill behavior. */
.s2-cols2 .s2-card{height:auto}
.s2-card{background:#fff;border:1px solid #e3e3e6;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;height:100%}
.s2-card:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(15,23,42,.05),0 16px 36px -12px rgba(15,23,42,.14)}
.s2-card h2{margin:0;font-size:15px;font-weight:600}
.s2-card p.sub{margin:4px 0 0;font-size:12.5px;color:#78787b}
.s2-cardhead{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.s2-flag{font-size:11.5px;font-weight:500;color:#b4372c;background:#fbeeec;border:1px solid #f2d4cf;padding:5px 10px;border-radius:999px}
.s2-stat-row{display:flex;flex-wrap:wrap;gap:22px}
.s2-stat{display:flex;flex-direction:column;gap:5px;min-width:96px}
.s2-stat span{font-size:11.5px;color:#78787b}
.s2-stat b{font-size:24px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap;color:#15171b}
.s2-foot{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:#78787b}
.s2-bars{display:flex;flex-direction:column;gap:12px}
.s2-bar-row{display:grid;grid-template-columns:120px 1fr 118px;align-items:center;gap:14px}
.s2-bar-row .name{font-size:13px}
.s2-bar-row .track{display:flex;height:22px;background:#f1f1f3;border-radius:6px;overflow:hidden}
.s2-bar-row .track b{background:var(--accent);display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:600}
.s2-bar-row .num{display:flex;flex-direction:column;gap:2px;text-align:left}
.s2-bar-row .num span{font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.s2-bar-row .num small{font-size:11.5px;color:#969699}
.s2-bar-row .num-simple{text-align:left;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.s2-table-wrap{overflow-x:auto;border:1px solid #ededef;border-radius:11px}
.s2-table{width:100%;border-collapse:collapse;font-size:13px}
.s2-table th{background:#faf9f7;color:#969699;font-weight:500;font-size:11px;text-align:right;padding:10px 14px;border-bottom:1px solid #ededef}
.s2-table td{padding:12px 14px;border-bottom:1px solid #f1f1f3}
.s2-table tbody tr:last-child td{border-bottom:none}
.s2-table tfoot td{background:#faf9f7;font-weight:600;border-top:1px solid #ededef}
.s2-mini-bar{display:block;height:6px;background:#ebebee;border-radius:999px;overflow:hidden;max-width:120px}
.s2-mini-bar b{display:block;height:100%;background:var(--accent);border-radius:999px}
.s2-pill-tag{font-size:11.5px;font-weight:600;padding:5px 10px;border-radius:999px;color:#8a6a12;background:#eeeef6;border:1px solid #f0e0be;margin-inline-start:6px}
.s2-warn-box{margin-bottom:16px;padding:12px 14px;background:#fbeeec;border:1px solid #f2d4cf;border-radius:10px;font-size:12.5px;color:#8f2b22;line-height:1.7}
.s2-worker-block{padding-bottom:16px;border-bottom:1px solid #ededef;margin-bottom:16px}
.s2-worker-block:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}
.s2-worker-block .who{display:flex;align-items:baseline;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.s2-worker-block .who b{font-size:14px;font-weight:600}
.s2-worker-block .who span{font-size:12px;color:#78787b}
@media (max-width:880px){.s2-cols2{grid-template-columns:1fr}}
/* Until now this file had exactly one media query — the line above — so
   every bar row, card and stat block below it was still laid out at desktop
   widths on a phone. Same failure as the dashboard: `120px 1fr 118px` left
   the coloured track about 50px wide at 390px and 20px at 360px, i.e.
   invisible. Track moves to its own line; everything else just loosens. */
@media (max-width:600px){
  .s2-bar-row{grid-template-columns:1fr auto;grid-template-areas:"name num" "track track";gap:7px 10px}
  .s2-bar-row .name{grid-area:name}
  .s2-bar-row .track{grid-area:track;height:18px}
  .s2-bar-row .num,.s2-bar-row .num-simple{grid-area:num}
  .s2-bar-row .num{flex-direction:row;align-items:baseline;gap:6px}
  .s2-card{padding:16px}
  .s2-kpi{padding:15px}
  .s2-stat-row{gap:14px}
  .s2-stat{min-width:78px}
  .s2-stat b{font-size:20px}
  .s2-foot{flex-direction:column;gap:6px}
  .s2-table th,.s2-table td{padding:9px 11px}
}

/* LTR (English) override — see the equivalent block in rtl.css for the
   full rationale. Only this file's one local text-align:right rule needs
   re-declaring. */
.rgft-stats[dir="ltr"] .s2-table th{
    text-align: left;
}