/* ---- داشبورد آمار مدیریتی ---------------------------------------------------
   The geometry rule this file exists to hold: the plot band of every chart — SVG or HTML — is the
   middle 88% of a 3:1 box. The line chart puts it there through its viewBox (y 12→188 of 200) and
   the bar chart through `inset:6% 0`, so one axis column, positioned once, labels both. Change one
   of those three numbers and the axis stops pointing at the gridlines it names. */

.stats-intro { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.stats-intro .button { flex:none; }
/* The rate the dirham figures were converted with. Quieter than the intro above it: it is provenance
   for the numbers in the cards, not a reading of its own. */
.stats-fx { margin:6px 0 0; color:#8b85a6; font-size:12.5px; line-height:1.8; }

.metric-grid { grid-template-columns:repeat(auto-fit,minmax(232px,1fr)); margin:0 0 18px; }
.metric-card { align-items:flex-start; }
.metric-card > div { min-width:0; }
.stat-icon.pink { background:#ff5e871c; color:#ff9ab4; }
.stat-note { margin:6px 0 0; color:#8b85a6; font-size:12.5px; line-height:1.75; }
.stat-money { display:block; margin-top:3px; color:#7fd8ff; font-size:13px; font-style:normal; }
/* Direction is the whole point of a delta, so it is carried by the colour and the sign together —
   colour alone would say nothing to a reader who cannot separate the two greens from the two reds. */
.stat-delta { display:block; margin-top:6px; font-size:12.5px; font-style:normal; font-weight:700; }
.stat-delta.up { color:#65d7ae; } .stat-delta.down { color:#ff8fa8; } .stat-delta.flat { color:#8b85a6; }
.stat-delta span { color:#8b85a6; font-weight:400; }

.chart-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:17px; margin-top:20px; align-items:start; }
.chart-card { margin-top:0; padding:20px 22px 22px; min-width:0; }
.chart-card.wide { grid-column:1 / -1; }
.chart-head { margin-bottom:16px; }
.chart-head h2 { margin:0; font-size:16.5px; }
.chart-head p { margin:6px 0 0; color:var(--muted); font-size:13px; line-height:1.8; }
.chart-empty { margin:0; padding:26px 0; text-align:center; color:#8b85a6; font-size:13.5px; }

.chart-legend { display:flex; flex-wrap:wrap; gap:6px 16px; margin-bottom:13px; color:#b3adca; font-size:12.5px; }
.chart-legend span { display:inline-flex; align-items:center; gap:6px; }
.chart-legend i { width:10px; height:10px; border-radius:3px; flex:none; }

/* The axis lives in a gutter the plot is padded out of, so its labels can never sit on the drawing.
   Logical properties, not left/right: on this RTL page inline-start is the right-hand edge, which is
   both where the value axis belongs in a right-to-left layout and where the oldest column sits. */
/* The inline-start gutter holds the axis. The inline-end one holds nothing and exists only so the
   newest column's label has somewhere to go: a label is centred on a slot ~9px wide, so on a phone
   «۱۳ مرداد» hung 27px past the card and was painted as «۱۳ مر». Aligning the edge cell inward does
   not fix it — an RTL line wider than its box anchors at the start edge and spills past the end no
   matter what text-align says, which is measurable: the glyphs painted from x=7 while the card began
   at x=18. Reserving the room is the fix. Both gutters are taken off the tick row too, so the plot
   and the labels keep the same width and the same edges. */
.chart-plot { position:relative; padding-inline:44px 30px; }
.chart-axis { position:absolute; inset-block:6%; inset-inline-start:0; width:40px; display:flex; flex-direction:column; justify-content:space-between; align-items:flex-end; color:#7d7799; font-size:11.5px; }
.chart-axis span { line-height:1; transform:translateY(-50%); }
.chart-plot svg { display:block; width:100%; height:auto; overflow:visible; }
.grid-line { stroke:#2c2749; stroke-width:1; vector-effect:non-scaling-stroke; }
.grid-line.base { stroke:#403a67; }
.chart-plot rect:hover { fill:#ffffff08; }

/* One cell per data point, in the same order and the same direction as the plot above it, so a
   label is under its own reading without either side measuring the other. */
.chart-ticks { display:flex; gap:2px; margin-block-start:9px; margin-inline:44px 30px; color:#7d7799; font-size:11.5px; }
.chart-ticks span { flex:1 1 0; min-width:0; text-align:center; white-space:nowrap; overflow:visible; }

.chart-bars { position:relative; aspect-ratio:3 / 1; }
.bar-grid { position:absolute; inset:6% 0; display:flex; flex-direction:column; justify-content:space-between; }
.bar-grid i { display:block; height:1px; background:#2c2749; }
.bar-grid i:last-child { background:#403a67; }
.bar-track { position:absolute; inset:6% 0; display:flex; align-items:flex-end; gap:2px; }
.bar-col { flex:1 1 0; min-width:0; height:100%; display:flex; flex-direction:column-reverse; justify-content:flex-start; border-radius:5px 5px 0 0; overflow:hidden; transition:filter .15s; }
.bar-col:hover { filter:brightness(1.25); }
.bar-col i { display:block; width:100%; min-height:2px; }
/* A day with nothing on it is not a gap in the data — it is a day nobody worked, and the chart says
   so with a flat mark on the baseline rather than by leaving the slot blank. */
.bar-zero { height:3px; background:#453e70; }

.donut-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.donut-wrap { display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.donut { position:relative; width:132px; flex:none; }
.donut svg { display:block; width:100%; height:auto; }
.donut circle { transition:opacity .15s; }
.donut:hover circle { opacity:.55; }
.donut circle:hover { opacity:1; }
.donut-center { position:absolute; inset:0; display:grid; place-content:center; text-align:center; pointer-events:none; }
.donut-center strong { display:block; font-size:19px; color:#fff; }
.donut-center span { color:#8b85a6; font-size:11.5px; }
.donut-legend { flex:1 1 150px; min-width:0; margin:0; padding:0; list-style:none; display:grid; gap:9px; }
.donut-legend li { display:grid; grid-template-columns:10px 1fr auto auto; align-items:center; gap:9px; font-size:13px; color:#b3adca; }
.donut-legend i { width:10px; height:10px; border-radius:3px; }
.donut-legend span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.donut-legend b { color:#ece9ff; font-size:13px; }
.donut-legend em { color:#7d7799; font-size:11.5px; font-style:normal; min-width:34px; text-align:end; }

.leader-table { display:grid; }
.leader-head, .leader-row { display:grid; grid-template-columns:2fr repeat(3,1fr); gap:12px; align-items:center; padding:11px 0; border-bottom:1px solid var(--line); font-size:13.5px; }
.leader-head { color:#938da8; font-size:12.5px; }
.leader-row:last-child { border:0; }
.leader-row > span { color:#b3adca; overflow-wrap:anywhere; }
.leader-row strong { display:block; color:#ece9ff; font-size:13.5px; }
.leader-row small { display:block; margin-top:2px; color:#7d7799; font-size:11.5px; }
/* Three-column boards keep the same rhythm as the four-column one instead of stretching the name. */
.chart-card:not(.wide) .leader-head, .chart-card:not(.wide) .leader-row { grid-template-columns:2fr 1fr 1fr; }
.chart-card.wide .leader-head, .chart-card.wide .leader-row { grid-template-columns:2fr 1fr 1fr 1fr; }

@media (max-width:1100px) { .donut-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:900px) {
  .chart-grid, .donut-grid { grid-template-columns:1fr; }
  /* One chart per row from here down, so the narrow charts get the full card and only the gutters
     and the type come in. */
  .chart-plot { padding-inline:38px 26px; }
  .chart-ticks { margin-inline:38px 26px; font-size:10.5px; }
  .chart-axis { width:34px; font-size:10.5px; }
}
@media (max-width:760px) {
  .stats-intro { align-items:flex-start; }
  .chart-card { padding:17px 15px 18px; }
  /* Half the dates come off on a phone: six of them fit a desktop card and collide on a 390px one.
     visibility, not display — the cell has to stay in the row or every label after it slides off the
     column it names. */
  .chart-ticks .tick-minor { visibility:hidden; }
  .donut-wrap { gap:14px; }
  .donut { width:110px; margin:0 auto; }
  .leader-head, .leader-row, .chart-card.wide .leader-head, .chart-card.wide .leader-row { grid-template-columns:1.6fr 1fr 1fr; }
  .leader-head span:nth-child(4), .leader-row span:nth-child(4) { display:none; }
}