/* =====================================================================
   بصيرة — v2 executive dashboard
   Layered on top of dashboard.css: only the components this page adds.
   ===================================================================== */

/* ================= Card header tools ================= */
.c-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end;flex:0 0 auto}

/* ================= Per-card date filter ================= */
.date-filter{position:relative;flex:0 0 auto}
.df-btn{
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-family:inherit;
  font-size:11px;font-weight:600;padding:5px 11px;border-radius:var(--r-full);
  border:1px solid var(--line-2);background:var(--surface);color:var(--ink-2);transition:all .15s;
}
.df-btn:hover{border-color:var(--green-400);color:var(--green-700);background:var(--green-50)}
.df-btn svg{flex:0 0 auto;opacity:.8}
.df-caret{transition:transform .18s}
.date-filter.open .df-btn{border-color:var(--green-600);color:var(--green-700);background:var(--green-50)}
.date-filter.open .df-caret{transform:rotate(180deg)}
.date-filter.filtered .df-btn{
  border-color:var(--ai-500);background:var(--ai-50);color:var(--ai-700);
}
.df-label{max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* الوثيقة RTL: inset-inline-end == left، أي نفس ما كان عليه الوضع سابقًا */
.df-pop{
  position:absolute;top:calc(100% + 8px);inset-inline-end:0;inset-inline-start:auto;z-index:70;width:288px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-3);padding:12px 14px;
  opacity:0;transform:translateY(-6px);pointer-events:none;transition:all .16s ease;
}
.date-filter.open .df-pop{opacity:1;transform:translateY(0);pointer-events:auto}
.df-h{
  display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  font-size:12px;font-weight:700;padding-bottom:9px;border-bottom:1px solid var(--line);margin-bottom:10px;
}
.df-basis{font-size:9.5px;font-weight:500;color:var(--ink-3)}
.df-presets{display:flex;gap:6px;flex-wrap:wrap}
.df-presets button{
  font-family:inherit;font-size:10.5px;font-weight:600;cursor:pointer;padding:5px 11px;
  border-radius:var(--r-full);border:1px solid var(--line-2);background:var(--surface-2);
  color:var(--ink-2);transition:all .15s;
}
.df-presets button:hover{border-color:var(--green-400);color:var(--green-700)}
.df-presets button.on{background:var(--green-600);border-color:var(--green-600);color:#fff}
.df-custom{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:11px}
.df-custom label{display:flex;flex-direction:column;gap:4px;font-size:10px;color:var(--ink-3);font-weight:600}
.df-custom input{
  font-family:inherit;font-size:11.5px;padding:6px 9px;border-radius:var(--r-sm);
  border:1px solid var(--line-2);background:var(--surface-2);color:var(--ink);outline:none;
  direction:ltr;text-align:center;transition:border .15s, box-shadow .15s;
}
.df-custom input:focus{border-color:var(--green-500);box-shadow:0 0 0 3px rgba(14,96,88,.12);background:#fff}
.df-actions{display:flex;gap:8px;margin-top:11px}
.df-actions button{
  flex:1;font-family:inherit;font-size:11px;font-weight:600;cursor:pointer;padding:7px 10px;
  border-radius:var(--r-sm);transition:all .15s;
}
.df-apply{background:var(--green-600);border:1px solid var(--green-600);color:#fff}
.df-apply:hover{background:var(--green-700)}
.df-reset{background:var(--surface);border:1px solid var(--line-2);color:var(--ink-2)}
.df-reset:hover{border-color:var(--green-400);color:var(--green-700)}
.df-hint{margin-top:9px;font-size:9.5px;color:var(--ink-3);line-height:1.5}

/* Cards with no date column of their own */
.df-snapshot{
  display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:600;
  padding:4px 11px;border-radius:var(--r-full);
  background:var(--surface-2);border:1px dashed var(--line-2);color:var(--ink-3);cursor:default;
}

/* Card refresh state */
.card.is-loading{position:relative}
.card.is-loading::after{
  content:'';position:absolute;inset:0;border-radius:var(--r-lg);
  background:rgba(255,255,255,.55);backdrop-filter:blur(1px);pointer-events:none;
}

/* ================= Executive tile strip ================= */
.tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.tile{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 16px;
  box-shadow:var(--sh-1);transition:box-shadow .2s,transform .2s,border-color .2s;position:relative;overflow:hidden;
}
.tile:hover{box-shadow:var(--sh-2);transform:translateY(-2px);border-color:var(--line-2)}
.tile::before{content:'';position:absolute;inset-inline-start:0;top:0;bottom:0;width:3px;background:var(--green-500)}
.tile .t-h{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.tile .t-l{font-size:11.5px;color:var(--ink-2);font-weight:500;line-height:1.45}
.tile .t-v{font-size:25px;font-weight:700;line-height:1.25;margin-top:6px;display:flex;align-items:baseline;gap:5px}
.tile .t-v small{font-size:12px;font-weight:600;color:var(--ink-3)}
.tile .t-n{
  margin-top:7px;padding-top:7px;border-top:1px dashed var(--line-2);
  font-size:10.6px;color:var(--ink-3);line-height:1.55;
}

/* ================= Chart sizing helpers ================= */
.chart-box.sm{height:210px}
.chart-box.md{height:250px}
.chart-box.lg{height:330px}
.chart-box.xl{height:400px}
.empty-chart{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;
  border:1px dashed var(--line-2);border-radius:var(--r-md);background:var(--surface-2);
  font-size:12px;color:var(--ink-3);padding:20px;
}

/* ================= Governorate load heatmap ================= */
.heat{margin-top:12px;overflow-x:auto;scrollbar-width:thin}
.heat-grid{display:grid;gap:4px;min-width:420px}
.heat-cell{
  border-radius:7px;display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;height:34px;
  transition:transform .12s, box-shadow .12s;cursor:default;
}
.heat-cell:hover{transform:scale(1.05);box-shadow:var(--sh-2)}
.heat-head{
  font-size:10px;font-weight:600;color:var(--ink-3);text-align:center;
  padding-bottom:4px;line-height:1.3;align-self:end;
}
.heat-row-label{
  font-size:11.5px;font-weight:600;color:var(--ink-2);display:flex;align-items:center;
  justify-content:flex-start;padding-inline-end:8px;
}
.heat-scale{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:10.5px;color:var(--ink-3)}
.heat-scale .bar{
  flex:1;height:8px;border-radius:4px;max-width:190px;
  background:linear-gradient(to left, rgba(7,76,70,.10), rgba(7,76,70,.95));
}

/* ================= Compact metric rows under a chart ================= */
.mini-rows{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.mini-rows .mr{
  display:flex;align-items:center;gap:10px;font-size:11.5px;
  border:1px solid var(--line);border-radius:var(--r-md);padding:8px 12px;background:var(--surface-2);
}
.mini-rows .mr .k{font-weight:600;color:var(--ink-2);flex:0 0 auto;min-width:78px}
.mini-rows .mr .track{flex:1;height:8px;border-radius:4px;background:#fff;border:1px solid var(--line);overflow:hidden}
.mini-rows .mr .track i{display:block;height:100%;border-radius:4px;background:var(--green-500)}
.mini-rows .mr .v{font-weight:700;font-variant-numeric:tabular-nums;direction:ltr;flex:0 0 auto;min-width:56px;text-align:left}

/* ================= Section spacing ================= */
.sec-stack{display:flex;flex-direction:column;gap:16px}
.sec-h .src{
  font-size:10px;font-weight:600;color:var(--ink-3);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-full);padding:3px 11px;
}

/* =====================================================================
   Sticky sector navigator — narrow viewports only.
   The page is eight tall sections in one column; on a phone this strip is
   the only practical way to reach a sector without scrolling past the rest.
   --hd-h is measured from header.top by dashboard-v2.js (fallback below).
   ===================================================================== */
.sec-nav{
  display:none;position:sticky;top:var(--hd-h,61px);z-index:40;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-full);
  box-shadow:var(--sh-2);padding:5px;
}
.sec-nav-track{
  flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;
  scrollbar-width:none;-ms-overflow-style:none;
  /* تلاشٍ على الحافة الداخلية النهائية (اليسار في RTL) للدلالة على إمكانية السحب */
  -webkit-mask-image:linear-gradient(to left,black calc(100% - 26px),transparent);
  mask-image:linear-gradient(to left,black calc(100% - 26px),transparent);
}
.sec-nav-track::-webkit-scrollbar{display:none}
.sec-nav a{
  flex:0 0 auto;min-height:40px;display:inline-flex;align-items:center;
  text-decoration:none;white-space:nowrap;
}

/* ================= Responsive ================= */
@media(max-width:1400px){
  .tiles{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:1280px){
  .tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:1100px){
  .sec-nav{display:block}
  /* الأقسام يجب ألا تختفي خلف الترويسة اللاصقة + شريط القطاعات */
  .content > section{scroll-margin-top:calc(var(--hd-h,61px) + 70px)}
}
@media(max-width:900px){
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  /* --- Executive tiles: two per row, ten tiles must not become a preamble --- */
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .tile{padding:12px}
  .tile .t-h{flex-direction:column;align-items:flex-start;gap:5px}
  .tile .t-l{font-size:11.5px}
  .tile .t-v{font-size:20px}
  .tile .t-v small{font-size:11px}
  .tile .t-n{font-size:11px}
  .tile .sbadge{max-width:100%;white-space:normal}

  /* --- Charts get more height on a narrow canvas, not less --- */
  .chart-box.sm{height:210px}
  .chart-box.md{height:270px}
  .chart-box.lg{height:340px}
  .chart-box.xl{height:400px}

  /* Card-header stacking and the mini-tabs scroller live in dashboard.css —
     /classic shares those base classes but loads only that stylesheet. */
  .c-tools{justify-content:flex-start;width:100%}
  /* the balance-line badge is 30 characters of nowrap inside a ~300px card */
  .c-tools .sbadge{max-width:100%;white-space:normal;text-align:start}

  /* --- Date filter: touch targets, readable text, on-screen popover --- */
  .df-btn{min-height:40px;font-size:11.5px}
  .df-label{max-width:150px}
  .df-basis{font-size:11px}
  .df-presets button{font-size:11px;min-height:40px}
  .df-custom label{font-size:11px}
  .df-custom input{font-size:16px;min-height:40px}
  .df-actions button{min-height:40px}
  .df-hint{font-size:11px}
  .df-snapshot{font-size:11px}
  .df-pop{
    inset-inline-start:0;inset-inline-end:auto;
    width:min(288px, calc(100vw - 40px));
    max-height:min(70vh,380px);overflow-y:auto;overscroll-behavior:contain;
  }

  /* --- Heatmap: narrower label column, taller-touch cells, scroll hint --- */
  .heat{
    --heat-label:52px;
    -webkit-mask-image:linear-gradient(to left,black calc(100% - 22px),transparent);
    mask-image:linear-gradient(to left,black calc(100% - 22px),transparent);
  }
  .heat-grid{min-width:352px}
  .heat-cell{height:30px;font-size:11px}
  .heat-head{font-size:11px}
  .heat-row-label{font-size:11px;padding-inline-end:6px}
  .heat-scale{font-size:11px}

  /* --- Channel rows wrap: label + value on one line, track on its own --- */
  .mini-rows .mr{flex-wrap:wrap;gap:6px 10px;padding:8px 10px}
  .mini-rows .mr .k{flex:1 1 auto;min-width:0}
  .mini-rows .mr .track{flex:1 1 100%;order:3}

  /* --- Legibility floor: nothing below 11px on a phone --- */
  .foot-note{font-size:11px}
  .sbadge{font-size:11px}
  .sec-h .src{font-size:11px}
  .brief .meta{font-size:11.5px}
  .empty-chart{font-size:12px;padding:14px}
}
@media(max-width:379.98px){
  /* المدخلان التاريخيان الأصليان يحتاجان ~135px لكل منهما */
  .df-custom{grid-template-columns:1fr}
}
@media(max-width:359.98px){
  .tiles{grid-template-columns:1fr}
}