/* ================================================================
   مطاعم أبوزيد — v4.8 Global Overrides
   Applied: Thursday 7 May 2026
   Purpose:
     1. Grey → Black readability fix (all --text-secondary instances)
     2. .kpi-last-updated caption class
     3. Center alignment insurance for page content
   ================================================================ */

/* ──────────────────────────────────────────────────────────────
   1. GREY → BLACK: Override --text-secondary (#5a7a82) to #000
      Targets every known consumer of var(--text-secondary)
      that carries user-visible label / caption text.
   ────────────────────────────────────────────────────────────── */

/* KPI Card V2 — labels, units, targets, prev-month row */
.kpi-v2-label,
.kpi-v2-unit,
.kpi-v2-target,
.kpi-v2-prev {
  color: #000000 !important;
}

/* Chart cards — title & subtitle */
.chart-subtitle {
  color: #000000 !important;
}

/* Dept KPI Card (DKC) — secondary labels */
.dkc-unit,
.dkc-vs,
.dkc-target,
.dkc-footer,
.dkc-pct-label {
  color: #000000 !important;
}

/* Favorites section — KPI name and unit labels */
.fav-kpi-name,
.fav-kpi-unit {
  color: #000000 !important;
}

/* Branch heatmap — branch name label */
.bh-name,
.bh-kpi-label {
  color: #000000 !important;
}

/* Prime cost heatmap / madar — secondary labels */
.prime-heatmap-branch,
.prime-heatmap-target,
.madar-kpi-label,
.madar-kpi-target {
  color: #000000 !important;
}

/* HR doc sub-labels */
.hr-doc-sub {
  color: #000000 !important;
}

/* KPI Tooltip — row labels */
.kpi-tooltip-row-label {
  color: #000000 !important;
}

/* Weekly perf table headers */
.weekly-perf-table th {
  color: #000000 !important;
}

/* Follow-up table headers */
.followup-table th {
  color: #000000 !important;
}

/* Complaints week label */
.complaints-week-label {
  color: #000000 !important;
}

/* Favorites subtitle / hint */
.favorites-subtitle,
.favorites-hint {
  color: #000000 !important;
}

/* P&L period button default state */
.pl-period-btn {
  color: #000000 !important;
}

/* Follow-up tab default state */
.followup-tab:not(.active) {
  color: #000000 !important;
}

/* Override the CSS variable itself so any missed consumers also update */
:root {
  --text-secondary: #000000 !important;
}

/* ──────────────────────────────────────────────────────────────
   2. .kpi-last-updated — "Last Updated" caption below every
      KPI card and chart card.
      Injected via _injectLastUpdatedCaptions() in app.js.
   ────────────────────────────────────────────────────────────── */
.kpi-last-updated {
  font-size: 0.62rem;
  font-weight: 600;
  color: #000000;
  margin-top: 10px;
  padding-top: 7px;
  border-top: 1px solid var(--border);
  text-align: center;
  font-family: 'Tajawal', sans-serif;
  letter-spacing: 0.01em;
  opacity: 0.75;
  display: block;
  width: 100%;
  direction: rtl;
}

/* Slightly more prominent on chart cards (more space) */
.chart-card .kpi-last-updated {
  margin-top: 14px;
  opacity: 0.8;
}

/* ══════════════════════════════════════════════════════════════
   3. DEAD SPACE FIX — ROOT CAUSE & SURGICAL CURE
   ══════════════════════════════════════════════════════════════

   ROOT CAUSE (confirmed by code audit):
   ┌─────────────────────────────────────────────────────────┐
   │ .main-wrapper  { margin-right: 268px }   ← style.css   │
   │   └── .page-content { margin-right: 268px } ← dash-v5  │
   │                                                         │
   │  RESULT: 268 + 268 = 536px pushed away = DEAD ZONE      │
   └─────────────────────────────────────────────────────────┘

   THE FIX:
   .page-content lives INSIDE .main-wrapper.
   .main-wrapper already offsets for the sidebar.
   .page-content must have margin-right: 0 — it fills its parent.

   CORRECT layout tree (RTL):
     sidebar  (position:fixed; right:0; width:268px)
     .main-wrapper  (margin-right:268px; width:calc(100%-268px))
       .topbar       ← fills 100% of .main-wrapper  ✓
       .page-content ← fills 100% of .main-wrapper  ✓ (no extra margin!)
         section.page  ← inner content, padded 28px each side
   ══════════════════════════════════════════════════════════════ */

/* ── FIX 1: Kill the duplicate margin-right on .page-content ── */
.page-content {
  margin-right: 0 !important;   /* was: var(--sidebar-w) = 268px — WRONG */
  margin-left:  0 !important;
  width: 100% !important;
  box-sizing: border-box;
  padding: 24px 28px !important;
}

/* ── FIX 2: Inner .page sections fill 100% width, well padded ─ */
.page-content > section.page,
.page-content > .page {
  width: 100%;
  box-sizing: border-box;
}

/* ── FIX 3: Mobile — padding shrinks, no sidebar offset ───── */
@media (max-width: 768px) {
  .page-content {
    padding: 12px 10px !important;
    margin-right: 0 !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   4. CHART SUBTITLE — black everywhere (belt + suspenders)
      Some chart subtitles use inline style="color:#000" already
      (added in the v4.8 HTML edits) but this covers any others.
   ────────────────────────────────────────────────────────────── */
.chart-card-header .chart-subtitle,
.chart-card .chart-subtitle {
  color: #000000 !important;
  font-weight: 600;
}

/* ──────────────────────────────────────────────────────────────
   5. VERIFIED DATA BADGE — new green badge added in v4.8
   ────────────────────────────────────────────────────────────── */
.verified-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #dcfce7;
  color: #16a34a;
  font-size: 0.62rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 20px;
  border: 1px solid #bbf7d0;
  font-family: 'Tajawal', sans-serif;
  white-space: nowrap;
}

/* ──────────────────────────────────────────────────────────────
   6. QUALITY GAUGE CANVAS — container sizing fix
      Ensures canvas has defined dimensions before
      _drawQualityGauge() reads offsetWidth/offsetHeight.
   ────────────────────────────────────────────────────────────── */
#cockpitQualityGauge {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* ──────────────────────────────────────────────────────────────
   7. BRANCH BAR CHART — overflow clip for long Arabic names
   ────────────────────────────────────────────────────────────── */
#cockpitBranchBarChart {
  width: 100% !important;
  display: block;
}

/* ──────────────────────────────────────────────────────────────
   END v4.8 Overrides
   ────────────────────────────────────────────────────────────── */