/* PHASE 9 UI: dashboard primitives — marsoud shape, farm-adapted.
   Every class here is scoped under #dash-root so it never leaks into
   the rest of the app. This ports marsoud's dashboard visual language
   as vanilla CSS on top of Bootstrap; framework migration would be too
   much for one iteration. */

/* DASHBOARD REDESIGN (Material Design 3 pilot) — this block's values
   are hard-coded to the M3 palette/type-scale instead of the --ms-*
   tokens on purpose: the dashboard is the pilot for a new visual
   language, separate from the rest of the app (sidebar, forms, other
   pages) which must keep rendering exactly as before. Once the pilot
   is approved, these values migrate into tokens.css as the new
   canonical --ms-* set and this block goes back to referencing them. */
#dash-root {
  --d-brand:       #004863;   /* M3 "primary" */
  --d-brand-dark:  #1f607e;   /* M3 "primary-container" */
  --d-brand-tint:  #eff4ff;   /* M3 "surface-container-low" */
  --d-brand-soft:  #dce9ff;   /* M3 "surface-container-high" */
  --d-radius:      0.5rem;    /* M3 "xl" radius */
  --d-radius-sm:   0.25rem;   /* M3 "lg" radius */
  --d-shadow:      0 1px 8px rgba(0,0,0,0.04);
  --d-shadow-hov:  0 4px 16px rgba(0,0,0,0.08);
  --d-ink:         #0b1c30;   /* M3 "on-surface" */
  --d-ink-variant: #40484d;   /* M3 "on-surface-variant" */
  --d-font:        "Plus Jakarta Sans", "Noto Sans Arabic", var(--ms-font-sans);

  color: var(--d-ink-variant);
  font-family: var(--d-font);
  background: #f8f9ff;   /* M3 "surface" */
}

/* ================ HEADER ================ */
#dash-root .dash-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 20px;
}
#dash-root .dash-head h1 {
  font-size: var(--ms-fs-h1);
  font-weight: 800;
  color: var(--d-ink);
  margin: 0 0 4px;
}
#dash-root .dash-head .dash-sub {
  color: var(--ms-ink-3);
  font-size: var(--ms-fs-sm);
  margin: 0;
}

/* Pill-in-pill period switcher */
#dash-root .period {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--ms-surface);
  border: 1px solid var(--ms-line);
  border-radius: var(--ms-radius-pill);
  box-shadow: var(--ms-shadow-sm);
}
#dash-root .period a {
  display: inline-block;
  padding: 6px 14px;
  border-radius: var(--ms-radius-pill);
  font-size: var(--ms-fs-sm);
  font-weight: 600;
  color: var(--ms-ink-3);
  text-decoration: none;
  transition: all .15s ease;
}
#dash-root .period a:hover { color: var(--d-brand-dark); }
#dash-root .period a.on {
  background: var(--d-brand);
  color: #fff;
  box-shadow: 0 2px 6px rgba(67, 185, 233, .35);
}

/* ================ PHASE 17: GREETING HERO ================ */
#dash-root .dash-hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  background: var(--ms-app-bg);
  border: 1px solid var(--ms-line);
  border-radius: var(--ms-radius-lg);
  padding: 22px 26px;
  margin-bottom: 22px;
  box-shadow: var(--ms-shadow-sm);
}
#dash-root .dash-hero-l { display: flex; align-items: center; gap: 18px; min-width: 0; }
#dash-root .dash-hero-wave {
  font-size: 40px; line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.08));
}
#dash-root .dash-hero h1 {
  font-size: 22px; font-weight: 800; color: var(--ms-ink-1);
  margin: 0 0 4px;
}
#dash-root .dash-hero-sub {
  margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  color: var(--ms-ink-3); font-size: var(--ms-fs-sm);
}
#dash-root .today-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px;
  background: var(--ms-surface); border: 1px solid var(--ms-line);
  border-radius: var(--ms-radius-pill);
  color: var(--ms-brand-dark); font-weight: 600; font-size: 12px;
}
#dash-root .today-chip i { font-size: 13px; }
#dash-root .today-hint { color: var(--ms-ink-3); }
#dash-root .dash-hero-r { display: flex; align-items: center; gap: 8px; }
#dash-root .dash-refresh {
  width: 36px; height: 36px;
  border-radius: var(--ms-radius-pill);
  border: 1px solid var(--ms-line);
  background: var(--ms-surface);
  color: var(--ms-ink-3);
  cursor: pointer;
  transition: all .15s ease;
  display: inline-flex; align-items: center; justify-content: center;
}
#dash-root .dash-refresh:hover {
  color: var(--ms-brand-dark); border-color: var(--ms-brand); transform: rotate(45deg);
}

/* ================ SECTION LABELS ================ */
/* PHASE 17: colored dot + Bootstrap Icon in front of every section label,
   colour picked from the [data-section] tone map already defined in app.css.
   The old emoji labels are replaced template-side. */
#dash-root .section-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 26px 2px 14px;
  font-size: 14px;
  font-weight: 800;
  color: var(--ms-ink-1);
  letter-spacing: -0.2px;
}
#dash-root .section-label::before {
  content: "";
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--section-tone, var(--ms-brand));
  flex-shrink: 0;
}
#dash-root .section-label i {
  color: var(--section-tone, var(--ms-brand));
  font-size: 15px;
}
#dash-root .section-label .more {
  margin-inline-start: auto;
  font-size: var(--ms-fs-xs);
  font-weight: 500;
  color: var(--d-brand-dark);
  text-decoration: none;
}
#dash-root .section-label .more:hover { text-decoration: underline; }

/* ================ KPI CARDS (financial health) ================ */
#dash-root .kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
/* PHASE 16 FIX: breakpoints raised so the grid collapses BEFORE the fixed
   sidebar (264px) plus 56px content padding eats the viewport. Otherwise on
   a 1366-wide laptop the 4-col KPI grid sat at ~1394px and pushed the whole
   dashboard past the right edge, forcing a horizontal scroll. */
@media (max-width: 1500px) { #dash-root .kpis { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { #dash-root .kpis { grid-template-columns: 1fr; } }

#dash-root .kpi {
  display: block;
  background: var(--ms-surface);
  border: 1px solid var(--ms-line);
  border-radius: var(--d-radius);
  box-shadow: var(--d-shadow);
  padding: 17px 18px;
  text-decoration: none;
  color: inherit;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
#dash-root .kpi:hover {
  transform: translateY(-3px);
  box-shadow: var(--d-shadow-hov);
  border-color: var(--d-brand-tint);
}
#dash-root .kpi-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}
#dash-root .kpi-ico {
  /* Smaller + more muted so the icon reads as a small accent, not a
     colored block competing with the number for attention. */
  width: 28px; height: 28px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center; justify-content: center;
  font-size: 14px;
  opacity: 0.85;
}
#dash-root .kpi-trend {
  font-size: var(--ms-fs-xs);
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--ms-radius-pill);
}
/* Muted trend badges — no background fill, just a colored small label,
   so the strongest color on the card stays reserved for the number. */
#dash-root .trend-up   { color: #059669; background: transparent; padding-inline-start: 0; }
#dash-root .trend-down { color: #dc2626; background: transparent; padding-inline-start: 0; }
#dash-root .trend-flat { color: var(--ms-ink-3); background: transparent; padding-inline-start: 0; }

#dash-root .kpi-label {
  font-size: 13px;
  color: var(--ms-ink-3);
  margin-bottom: 4px;
  font-weight: 500;
}
/* PHASE 17: KPI values 26 → 32 px so the big numbers actually dominate. */
#dash-root .kpi-val {
  font-size: 32px;
  font-weight: 800;
  color: var(--d-ink);
  letter-spacing: -0.8px;
  line-height: 1.1;
}
#dash-root .kpi-val .cur {
  font-size: 14px;
  color: var(--ms-ink-3);
  margin-inline-start: 4px;
  font-weight: 500;
}
#dash-root .kpi-extra {
  font-size: var(--ms-fs-xs);
  color: var(--ms-ink-3);
  margin-top: 6px;
}
#dash-root .spark-wrap {
  height: 32px;
  margin-top: 10px;
}

/* Icon tones (marsoud palette + our brand) */
/* almustashar-style: icon badges are all one neutral grey tile —
   color is no longer used to distinguish KPI type, only the label
   and number carry meaning. */
#dash-root .i-blue,
#dash-root .i-green,
#dash-root .i-amber,
#dash-root .i-red,
#dash-root .i-teal,
#dash-root .i-violet {
  background: var(--ms-surface-soft);
  color: var(--ms-ink-3);
}
#dash-root .i-brand  { background: var(--d-brand-tint);    color: var(--d-brand-dark); }

/* ================ OPS TILES (farm overview) ================ */
#dash-root .ops {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
#dash-root .op {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--ms-surface);
  border: 1px solid var(--ms-line);
  border-radius: var(--d-radius);
  box-shadow: var(--d-shadow);
  padding: 14px 15px;
  text-decoration: none;
  color: inherit;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
#dash-root .op:hover {
  transform: translateY(-2px);
  box-shadow: var(--d-shadow-hov);
  border-color: var(--d-brand-tint);
}
#dash-root .op-ico {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center; justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
#dash-root .op-val {
  font-size: 20px;
  font-weight: 800;
  color: var(--d-ink);
  letter-spacing: -0.4px;
  line-height: 1.1;
}
#dash-root .op-label {
  font-size: var(--ms-fs-sm);
  color: var(--ms-ink-3);
  margin: 2px 0;
}
#dash-root .op-extra {
  font-size: var(--ms-fs-xs);
  margin-top: 4px;
}

/* PHASE 17: alert tags gain a soft chip background — they used to be
   text-only and vanished on dense rows. Now they read as proper chips
   using the semantic -soft tokens. */
#dash-root .tag-red,
#dash-root .tag-amber,
#dash-root .tag-green,
#dash-root .tag-blue {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--ms-radius-pill);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.5;
}
#dash-root .tag-red   { color: #991b1b; background: var(--ms-danger-soft);  }
#dash-root .tag-amber { color: #92400e; background: var(--ms-warning-soft); }
#dash-root .tag-green { color: var(--ms-brand-dark); background: var(--ms-success-soft); }
#dash-root .tag-blue  { color: #1e40af; background: var(--ms-info-soft);    }

/* ================ ACTION PANELS (needs attention) ================ */
#dash-root .action-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 1200px) { #dash-root .action-grid { grid-template-columns: 1fr; } }

#dash-root .d-panel {
  background: var(--ms-surface);
  border: 1px solid var(--ms-line);
  border-radius: var(--d-radius);
  padding: 16px;
  box-shadow: var(--d-shadow);
}
#dash-root .d-panel.panel-red {
  border-color: #fecaca;
  background: linear-gradient(180deg, #fef2f2 0%, #ffffff 60%);
}
#dash-root .d-panel.panel-amber {
  border-color: #fde68a;
  background: linear-gradient(180deg, #fffbeb 0%, #ffffff 60%);
}
#dash-root .d-panel-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
#dash-root .d-panel-head .icon {
  width: 34px; height: 34px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center; justify-content: center;
  font-size: 17px;
}
#dash-root .d-panel-head h5 {
  margin: 0;
  font-size: var(--ms-fs-lg);
  font-weight: 800;
  color: var(--d-ink);
  flex-grow: 1;
}
#dash-root .d-panel-head .pill {
  font-size: var(--ms-fs-xs);
  font-weight: 700;
  padding: 3px 9px;
  border-radius: var(--ms-radius-pill);
}
#dash-root .pill-red   { color: #991b1b; background: #fee2e2; }
#dash-root .pill-amber { color: #92400e; background: #fef3c7; }

#dash-root .d-panel-meta {
  font-size: var(--ms-fs-xs);
  color: var(--ms-ink-3);
  margin-bottom: 8px;
}

#dash-root .d-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 8px;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  transition: background .15s ease;
}
#dash-root .d-row:hover { background: rgba(255, 255, 255, .5); }
#dash-root .d-row + .d-row { border-top: 1px solid #fecaca55; }

#dash-root .row-l { display: flex; align-items: center; gap: 10px; min-width: 0; }
#dash-root .row-ava {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--d-brand-tint);
  color: var(--d-brand-dark);
  display: inline-flex;
  align-items: center; justify-content: center;
  font-weight: 800;
  font-size: 13px;
  flex-shrink: 0;
}
#dash-root .row-name {
  font-size: var(--ms-fs-base);
  font-weight: 700;
  color: var(--d-ink);
  line-height: 1.15;
}
#dash-root .row-sub {
  font-size: var(--ms-fs-xs);
  color: var(--ms-ink-3);
  margin-top: 2px;
}
#dash-root .row-r { text-align: end; }
#dash-root .row-amt {
  font-size: var(--ms-fs-base);
  font-weight: 700;
  color: var(--d-ink);
  font-family: var(--ms-font-mono);
}
#dash-root .row-tag {
  font-size: var(--ms-fs-xs);
  margin-top: 2px;
}

#dash-root .d-panel-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #fecaca55;
  font-size: var(--ms-fs-xs);
  color: var(--ms-ink-3);
}
#dash-root .d-panel-foot a {
  color: var(--d-brand-dark);
  text-decoration: none;
  font-weight: 700;
}
#dash-root .d-panel-foot a:hover { text-decoration: underline; }

#dash-root .empty-state {
  text-align: center;
  padding: 20px;
  color: var(--ms-ink-3);
}
#dash-root .empty-state .icon {
  font-size: 24px;
  display: block;
  margin-bottom: 6px;
}

/* ================ TREND / BREAKDOWN CARDS ================ */
#dash-root .lower-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 14px;
}
@media (max-width: 1200px) { #dash-root .lower-grid { grid-template-columns: 1fr; } }

#dash-root .d-card {
  background: var(--ms-surface);
  border: 1px solid var(--ms-line);
  border-radius: var(--d-radius);
  box-shadow: var(--d-shadow);
  padding: 19px;
}
#dash-root .d-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 14px;
}
#dash-root .d-card-head h5 {
  margin: 0;
  font-size: var(--ms-fs-lg);
  font-weight: 800;
  color: var(--d-ink);
}
#dash-root .d-card-head .sub {
  font-size: var(--ms-fs-xs);
  color: var(--ms-ink-3);
}
#dash-root .legend {
  display: flex;
  gap: 12px;
  font-size: var(--ms-fs-xs);
  color: var(--ms-ink-3);
}
#dash-root .legend .sw {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 2px;
  margin-inline-end: 4px;
  vertical-align: middle;
}
#dash-root .chart-wrap {
  height: 240px;
  position: relative;
}

/* Breakdown list */
#dash-root .bd-item {
  padding: 8px 0;
  border-bottom: 1px dashed var(--ms-line);
}
#dash-root .bd-item:last-child { border-bottom: 0; }
#dash-root .bd-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--ms-fs-sm);
  margin-bottom: 5px;
}
#dash-root .bd-name { display: inline-flex; align-items: center; gap: 8px; color: var(--ms-ink-2); }
#dash-root .bd-dot {
  width: 10px; height: 10px;
  border-radius: 3px;
  display: inline-block;
}
#dash-root .bd-right {
  font-family: var(--ms-font-mono);
  color: var(--d-ink);
  font-weight: 700;
}
#dash-root .bd-right .pct {
  color: var(--ms-ink-3);
  font-weight: 500;
  margin-inline-end: 8px;
  font-size: var(--ms-fs-xs);
}
#dash-root .bd-bar {
  height: 5px;
  background: var(--ms-surface-soft);
  border-radius: 3px;
  overflow: hidden;
}
#dash-root .bd-bar i {
  display: block;
  height: 100%;
  border-radius: 3px;
  transition: width .3s ease;
}

/* ================ QUICK ACTIONS ================ */
#dash-root .quick {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}
#dash-root .q {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 10px;
  background: var(--ms-surface);
  border: 1px solid var(--ms-line);
  border-radius: var(--d-radius-sm);
  text-decoration: none;
  color: var(--ms-ink-2);
  font-size: 11.5px;
  font-weight: 600;
  text-align: center;
  transition: all .15s ease;
}
#dash-root .q:hover {
  background: var(--d-brand-tint);
  border-color: var(--d-brand);
  color: var(--d-brand-dark);
  transform: translateY(-1px);
}
#dash-root .q-ico { font-size: 22px; }

/* ================ TCARD (team performance — kept for compatibility) ================ */
#dash-root .team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 1500px) { #dash-root .team-grid { grid-template-columns: 1fr; } }
#dash-root .tcard {
  background: var(--ms-surface);
  border: 1px solid var(--ms-line);
  border-radius: var(--d-radius);
  padding: 16px;
  box-shadow: var(--d-shadow);
}

/* ══════════════════════════════════════════════════════════
   M3 PILOT — full visual overhaul, appended so it wins the
   cascade over the marsoud-shape rules earlier in this file.
   Same classes, same Jinja data bindings — only appearance
   changes. Font forced on every descendant so Arabic text
   picks up Noto Sans Arabic instead of Cairo/Tajawal here.
   ══════════════════════════════════════════════════════════ */
#dash-root, #dash-root * { font-family: var(--d-font) !important; }

/* ---- Hero ---- */
#dash-root .dash-hero {
  background: #fff;
  border: none;
  border-radius: var(--d-radius);
  box-shadow: var(--d-shadow);
  padding: 20px;
}
#dash-root .dash-hero-wave {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: var(--d-brand-tint);
  color: var(--d-brand);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
}
#dash-root .dash-hero h1 { color: var(--d-ink); font-weight: 700; }
#dash-root .today-chip {
  background: var(--d-brand-tint);
  color: var(--d-brand-dark);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 600;
}
#dash-root .period {
  background: var(--d-brand-tint);
  border-radius: 12px;
  padding: 4px;
}
#dash-root .period a {
  border-radius: 8px;
  color: var(--d-ink-variant);
  font-weight: 500;
}
#dash-root .period a.on {
  background: #fff;
  color: var(--d-brand);
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
#dash-root .dash-refresh {
  border-radius: 12px;
  border: 1px solid var(--d-brand-tint);
  background: #fff;
  color: var(--d-ink-variant);
}

/* ---- Section labels: drop the colored dot, plain bold heading ---- */
#dash-root .section-label {
  color: var(--d-ink);
  font-weight: 700;
  font-size: 14px;
}
#dash-root .section-label i { color: var(--d-brand); }

/* ---- Financial KPI cards ---- */
#dash-root .kpi {
  background: #fff;
  border: none;
  border-radius: var(--d-radius);
  box-shadow: var(--d-shadow);
  padding: 18px;
  transition: box-shadow .15s ease;
}
#dash-root .kpi:hover {
  box-shadow: var(--d-shadow-hov);
  transform: none;
  border-color: transparent;
}
#dash-root .kpi-ico {
  width: 34px; height: 34px;
  border-radius: 10px;
  background: var(--d-brand-tint) !important;
  color: var(--d-brand) !important;
  opacity: 1;
  font-size: 16px;
}
#dash-root .kpi-trend {
  background: var(--d-brand-tint);
  border-radius: 999px;
  font-weight: 700;
}
#dash-root .kpi-label {
  color: var(--d-ink-variant);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
#dash-root .kpi-val {
  color: var(--d-ink);
  font-weight: 800;
  font-size: 30px;
  letter-spacing: -0.02em;
}
#dash-root .kpi-val .cur { color: var(--d-ink-variant); font-weight: 500; }
#dash-root .kpi-extra { font-size: 11px; font-weight: 600; }

/* ---- Farm overview telemetry tiles ---- */
#dash-root .ops { gap: 10px; }
#dash-root .op {
  background: #fff;
  border: none;
  border-radius: var(--d-radius-sm);
  box-shadow: var(--d-shadow);
  padding: 12px;
  transition: box-shadow .15s ease;
}
#dash-root .op:hover { box-shadow: var(--d-shadow-hov); border-color: transparent; }
#dash-root .op-ico {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: var(--d-brand-tint) !important;
  color: var(--d-brand) !important;
  font-size: 14px;
}
#dash-root .op-val { color: var(--d-ink); font-weight: 800; font-size: 18px; }
#dash-root .op-label { color: var(--d-ink-variant); font-size: 11px; }
#dash-root .op-extra {
  border-radius: 6px;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
}

/* ---- Alerts panels (فواتير متأخرة) ---- */
#dash-root .d-panel {
  background: #fff;
  border: none;
  border-radius: var(--d-radius);
  box-shadow: var(--d-shadow);
}
#dash-root .d-panel-head h5 { color: var(--d-ink); font-weight: 700; }
#dash-root .row-name { color: var(--d-ink); font-weight: 600; }
#dash-root .row-amt { color: var(--d-ink); font-weight: 700; }

/* ---- Charts section ---- */
#dash-root .d-card {
  background: #fff;
  border: none;
  border-radius: var(--d-radius);
  box-shadow: var(--d-shadow);
  padding: 18px;
}
#dash-root .d-card-head h5 { color: var(--d-ink); font-weight: 700; font-size: 14px; }
#dash-root .d-card-head .sub { color: var(--d-ink-variant); font-size: 12px; }
#dash-root .bd-name { color: var(--d-ink); font-size: 13px; font-weight: 600; }
#dash-root .bd-bar { border-radius: 999px; background: var(--d-brand-tint); }

/* ---- Quick actions ---- */
#dash-root .quick { gap: 10px; }
#dash-root .q {
  background: #fff;
  border: none;
  border-radius: var(--d-radius-sm);
  box-shadow: var(--d-shadow);
  color: var(--d-ink-variant);
  font-weight: 600;
  font-size: 12px;
  transition: box-shadow .15s ease, color .15s ease;
}
#dash-root .q:hover {
  box-shadow: var(--d-shadow-hov);
  color: var(--d-brand);
  border-color: transparent;
}
#dash-root .q-ico {
  width: 34px; height: 34px;
  border-radius: 10px;
  background: var(--d-brand-tint);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
}

/* ---- Overall dashboard background ---- */
#dash-root { background: #f8f9ff; padding: 4px; border-radius: var(--d-radius); }

/* ══════════════════════════════════════════════════════════
   M3 PILOT — full visual overhaul, appended so it wins the
   cascade over the marsoud-shape rules earlier in this file.
   Same classes, same Jinja data bindings — only appearance
   changes. Font forced on every descendant so Arabic text
   picks up Noto Sans Arabic instead of Cairo/Tajawal here.
   ══════════════════════════════════════════════════════════ */
#dash-root, #dash-root * { font-family: var(--d-font) !important; }

/* ---- Hero ---- */
#dash-root .dash-hero {
  background: #fff;
  border: none;
  border-radius: var(--d-radius);
  box-shadow: var(--d-shadow);
  padding: 20px;
}
#dash-root .dash-hero-wave {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: var(--d-brand-tint);
  color: var(--d-brand);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
}
#dash-root .dash-hero h1 { color: var(--d-ink); font-weight: 700; }
#dash-root .today-chip {
  background: var(--d-brand-tint);
  color: var(--d-brand-dark);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 600;
}
#dash-root .period {
  background: var(--d-brand-tint);
  border-radius: 12px;
  padding: 4px;
}
#dash-root .period a {
  border-radius: 8px;
  color: var(--d-ink-variant);
  font-weight: 500;
}
#dash-root .period a.on {
  background: #fff;
  color: var(--d-brand);
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
#dash-root .dash-refresh {
  border-radius: 12px;
  border: 1px solid var(--d-brand-tint);
  background: #fff;
  color: var(--d-ink-variant);
}

/* ---- Section labels: drop the colored dot, plain bold heading ---- */
#dash-root .section-label {
  color: var(--d-ink);
  font-weight: 700;
  font-size: 14px;
}
#dash-root .section-label i { color: var(--d-brand); }

/* ---- Financial KPI cards ---- */
#dash-root .kpi {
  background: #fff;
  border: none;
  border-radius: var(--d-radius);
  box-shadow: var(--d-shadow);
  padding: 18px;
  transition: box-shadow .15s ease;
}
#dash-root .kpi:hover {
  box-shadow: var(--d-shadow-hov);
  transform: none;
  border-color: transparent;
}
#dash-root .kpi-ico {
  width: 34px; height: 34px;
  border-radius: 10px;
  background: var(--d-brand-tint) !important;
  color: var(--d-brand) !important;
  opacity: 1;
  font-size: 16px;
}
#dash-root .kpi-trend {
  background: var(--d-brand-tint);
  border-radius: 999px;
  font-weight: 700;
}
#dash-root .kpi-label {
  color: var(--d-ink-variant);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
#dash-root .kpi-val {
  color: var(--d-ink);
  font-weight: 800;
  font-size: 30px;
  letter-spacing: -0.02em;
}
#dash-root .kpi-val .cur { color: var(--d-ink-variant); font-weight: 500; }
#dash-root .kpi-extra { font-size: 11px; font-weight: 600; }

/* ---- Farm overview telemetry tiles ---- */
#dash-root .ops { gap: 10px; }
#dash-root .op {
  background: #fff;
  border: none;
  border-radius: var(--d-radius-sm);
  box-shadow: var(--d-shadow);
  padding: 12px;
  transition: box-shadow .15s ease;
}
#dash-root .op:hover { box-shadow: var(--d-shadow-hov); border-color: transparent; }
#dash-root .op-ico {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: var(--d-brand-tint) !important;
  color: var(--d-brand) !important;
  font-size: 14px;
}
#dash-root .op-val { color: var(--d-ink); font-weight: 800; font-size: 18px; }
#dash-root .op-label { color: var(--d-ink-variant); font-size: 11px; }
#dash-root .op-extra {
  border-radius: 6px;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
}

/* ---- Alerts panels (فواتير متأخرة) ---- */
#dash-root .d-panel {
  background: #fff;
  border: none;
  border-radius: var(--d-radius);
  box-shadow: var(--d-shadow);
}
#dash-root .d-panel-head h5 { color: var(--d-ink); font-weight: 700; }
#dash-root .row-name { color: var(--d-ink); font-weight: 600; }
#dash-root .row-amt { color: var(--d-ink); font-weight: 700; }

/* ---- Charts section ---- */
#dash-root .d-card {
  background: #fff;
  border: none;
  border-radius: var(--d-radius);
  box-shadow: var(--d-shadow);
  padding: 18px;
}
#dash-root .d-card-head h5 { color: var(--d-ink); font-weight: 700; font-size: 14px; }
#dash-root .d-card-head .sub { color: var(--d-ink-variant); font-size: 12px; }
#dash-root .bd-name { color: var(--d-ink); font-size: 13px; font-weight: 600; }
#dash-root .bd-bar { border-radius: 999px; background: var(--d-brand-tint); }

/* ---- Quick actions ---- */
#dash-root .quick { gap: 10px; }
#dash-root .q {
  background: #fff;
  border: none;
  border-radius: var(--d-radius-sm);
  box-shadow: var(--d-shadow);
  color: var(--d-ink-variant);
  font-weight: 600;
  font-size: 12px;
  transition: box-shadow .15s ease, color .15s ease;
}
#dash-root .q:hover {
  box-shadow: var(--d-shadow-hov);
  color: var(--d-brand);
  border-color: transparent;
}
#dash-root .q-ico {
  width: 34px; height: 34px;
  border-radius: 10px;
  background: var(--d-brand-tint);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
}

/* ---- Overall dashboard background ---- */
#dash-root { background: #f8f9ff; padding: 4px; border-radius: var(--d-radius); }

/* ══════════════════════════════════════════════════════════
   M3 PILOT — full visual overhaul, appended so it wins the
   cascade over the marsoud-shape rules earlier in this file.
   Same classes, same Jinja data bindings — only appearance
   changes. Font forced on every descendant so Arabic text
   picks up Noto Sans Arabic instead of Cairo/Tajawal here.
   ══════════════════════════════════════════════════════════ */
#dash-root, #dash-root * { font-family: var(--d-font) !important; }

/* ---- Hero ---- */
#dash-root .dash-hero {
  background: #fff;
  border: none;
  border-radius: var(--d-radius);
  box-shadow: var(--d-shadow);
  padding: 20px;
}
#dash-root .dash-hero-wave {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: var(--d-brand-tint);
  color: var(--d-brand);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
}
#dash-root .dash-hero h1 { color: var(--d-ink); font-weight: 700; }
#dash-root .today-chip {
  background: var(--d-brand-tint);
  color: var(--d-brand-dark);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 600;
}
#dash-root .period {
  background: var(--d-brand-tint);
  border-radius: 12px;
  padding: 4px;
}
#dash-root .period a {
  border-radius: 8px;
  color: var(--d-ink-variant);
  font-weight: 500;
}
#dash-root .period a.on {
  background: #fff;
  color: var(--d-brand);
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
#dash-root .dash-refresh {
  border-radius: 12px;
  border: 1px solid var(--d-brand-tint);
  background: #fff;
  color: var(--d-ink-variant);
}

/* ---- Section labels: drop the colored dot, plain bold heading ---- */
#dash-root .section-label {
  color: var(--d-ink);
  font-weight: 700;
  font-size: 14px;
}
#dash-root .section-label i { color: var(--d-brand); }

/* ---- Financial KPI cards ---- */
#dash-root .kpi {
  background: #fff;
  border: none;
  border-radius: var(--d-radius);
  box-shadow: var(--d-shadow);
  padding: 18px;
  transition: box-shadow .15s ease;
}
#dash-root .kpi:hover {
  box-shadow: var(--d-shadow-hov);
  transform: none;
  border-color: transparent;
}
#dash-root .kpi-ico {
  width: 34px; height: 34px;
  border-radius: 10px;
  background: var(--d-brand-tint) !important;
  color: var(--d-brand) !important;
  opacity: 1;
  font-size: 16px;
}
#dash-root .kpi-trend {
  background: var(--d-brand-tint);
  border-radius: 999px;
  font-weight: 700;
}
#dash-root .kpi-label {
  color: var(--d-ink-variant);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
#dash-root .kpi-val {
  color: var(--d-ink);
  font-weight: 800;
  font-size: 30px;
  letter-spacing: -0.02em;
}
#dash-root .kpi-val .cur { color: var(--d-ink-variant); font-weight: 500; }
#dash-root .kpi-extra { font-size: 11px; font-weight: 600; }

/* ---- Farm overview telemetry tiles ---- */
#dash-root .ops { gap: 10px; }
#dash-root .op {
  background: #fff;
  border: none;
  border-radius: var(--d-radius-sm);
  box-shadow: var(--d-shadow);
  padding: 12px;
  transition: box-shadow .15s ease;
}
#dash-root .op:hover { box-shadow: var(--d-shadow-hov); border-color: transparent; }
#dash-root .op-ico {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: var(--d-brand-tint) !important;
  color: var(--d-brand) !important;
  font-size: 14px;
}
#dash-root .op-val { color: var(--d-ink); font-weight: 800; font-size: 18px; }
#dash-root .op-label { color: var(--d-ink-variant); font-size: 11px; }
#dash-root .op-extra {
  border-radius: 6px;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
}

/* ---- Alerts panels (فواتير متأخرة) ---- */
#dash-root .d-panel {
  background: #fff;
  border: none;
  border-radius: var(--d-radius);
  box-shadow: var(--d-shadow);
}
#dash-root .d-panel-head h5 { color: var(--d-ink); font-weight: 700; }
#dash-root .row-name { color: var(--d-ink); font-weight: 600; }
#dash-root .row-amt { color: var(--d-ink); font-weight: 700; }

/* ---- Charts section ---- */
#dash-root .d-card {
  background: #fff;
  border: none;
  border-radius: var(--d-radius);
  box-shadow: var(--d-shadow);
  padding: 18px;
}
#dash-root .d-card-head h5 { color: var(--d-ink); font-weight: 700; font-size: 14px; }
#dash-root .d-card-head .sub { color: var(--d-ink-variant); font-size: 12px; }
#dash-root .bd-name { color: var(--d-ink); font-size: 13px; font-weight: 600; }
#dash-root .bd-bar { border-radius: 999px; background: var(--d-brand-tint); }

/* ---- Quick actions ---- */
#dash-root .quick { gap: 10px; }
#dash-root .q {
  background: #fff;
  border: none;
  border-radius: var(--d-radius-sm);
  box-shadow: var(--d-shadow);
  color: var(--d-ink-variant);
  font-weight: 600;
  font-size: 12px;
  transition: box-shadow .15s ease, color .15s ease;
}
#dash-root .q:hover {
  box-shadow: var(--d-shadow-hov);
  color: var(--d-brand);
  border-color: transparent;
}
#dash-root .q-ico {
  width: 34px; height: 34px;
  border-radius: 10px;
  background: var(--d-brand-tint);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
}

/* ---- Overall dashboard background ---- */
#dash-root { background: #f8f9ff; padding: 4px; border-radius: var(--d-radius); }

/* ══════════════════════════════════════════════════════════
   M3 PILOT — full visual overhaul, appended so it wins the
   cascade over the marsoud-shape rules earlier in this file.
   Same classes, same Jinja data bindings — only appearance
   changes. Font forced on every descendant so Arabic text
   picks up Noto Sans Arabic instead of Cairo/Tajawal here.
   ══════════════════════════════════════════════════════════ */
#dash-root, #dash-root * { font-family: var(--d-font) !important; }

/* ---- Hero ---- */
#dash-root .dash-hero {
  background: #fff;
  border: none;
  border-radius: var(--d-radius);
  box-shadow: var(--d-shadow);
  padding: 20px;
}
#dash-root .dash-hero-wave {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: var(--d-brand-tint);
  color: var(--d-brand);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
}
#dash-root .dash-hero h1 { color: var(--d-ink); font-weight: 700; }
#dash-root .today-chip {
  background: var(--d-brand-tint);
  color: var(--d-brand-dark);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 600;
}
#dash-root .period {
  background: var(--d-brand-tint);
  border-radius: 12px;
  padding: 4px;
}
#dash-root .period a {
  border-radius: 8px;
  color: var(--d-ink-variant);
  font-weight: 500;
}
#dash-root .period a.on {
  background: #fff;
  color: var(--d-brand);
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
#dash-root .dash-refresh {
  border-radius: 12px;
  border: 1px solid var(--d-brand-tint);
  background: #fff;
  color: var(--d-ink-variant);
}

/* ---- Section labels: drop the colored dot, plain bold heading ---- */
#dash-root .section-label {
  color: var(--d-ink);
  font-weight: 700;
  font-size: 14px;
}
#dash-root .section-label i { color: var(--d-brand); }

/* ---- Financial KPI cards ---- */
#dash-root .kpi {
  background: #fff;
  border: none;
  border-radius: var(--d-radius);
  box-shadow: var(--d-shadow);
  padding: 18px;
  transition: box-shadow .15s ease;
}
#dash-root .kpi:hover {
  box-shadow: var(--d-shadow-hov);
  transform: none;
  border-color: transparent;
}
#dash-root .kpi-ico {
  width: 34px; height: 34px;
  border-radius: 10px;
  background: var(--d-brand-tint) !important;
  color: var(--d-brand) !important;
  opacity: 1;
  font-size: 16px;
}
#dash-root .kpi-trend {
  background: var(--d-brand-tint);
  border-radius: 999px;
  font-weight: 700;
}
#dash-root .kpi-label {
  color: var(--d-ink-variant);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
#dash-root .kpi-val {
  color: var(--d-ink);
  font-weight: 800;
  font-size: 30px;
  letter-spacing: -0.02em;
}
#dash-root .kpi-val .cur { color: var(--d-ink-variant); font-weight: 500; }
#dash-root .kpi-extra { font-size: 11px; font-weight: 600; }

/* ---- Farm overview telemetry tiles ---- */
#dash-root .ops { gap: 10px; }
#dash-root .op {
  background: #fff;
  border: none;
  border-radius: var(--d-radius-sm);
  box-shadow: var(--d-shadow);
  padding: 12px;
  transition: box-shadow .15s ease;
}
#dash-root .op:hover { box-shadow: var(--d-shadow-hov); border-color: transparent; }
#dash-root .op-ico {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: var(--d-brand-tint) !important;
  color: var(--d-brand) !important;
  font-size: 14px;
}
#dash-root .op-val { color: var(--d-ink); font-weight: 800; font-size: 18px; }
#dash-root .op-label { color: var(--d-ink-variant); font-size: 11px; }
#dash-root .op-extra {
  border-radius: 6px;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
}

/* ---- Alerts panels (فواتير متأخرة) ---- */
#dash-root .d-panel {
  background: #fff;
  border: none;
  border-radius: var(--d-radius);
  box-shadow: var(--d-shadow);
}
#dash-root .d-panel-head h5 { color: var(--d-ink); font-weight: 700; }
#dash-root .row-name { color: var(--d-ink); font-weight: 600; }
#dash-root .row-amt { color: var(--d-ink); font-weight: 700; }

/* ---- Charts section ---- */
#dash-root .d-card {
  background: #fff;
  border: none;
  border-radius: var(--d-radius);
  box-shadow: var(--d-shadow);
  padding: 18px;
}
#dash-root .d-card-head h5 { color: var(--d-ink); font-weight: 700; font-size: 14px; }
#dash-root .d-card-head .sub { color: var(--d-ink-variant); font-size: 12px; }
#dash-root .bd-name { color: var(--d-ink); font-size: 13px; font-weight: 600; }
#dash-root .bd-bar { border-radius: 999px; background: var(--d-brand-tint); }

/* ---- Quick actions ---- */
#dash-root .quick { gap: 10px; }
#dash-root .q {
  background: #fff;
  border: none;
  border-radius: var(--d-radius-sm);
  box-shadow: var(--d-shadow);
  color: var(--d-ink-variant);
  font-weight: 600;
  font-size: 12px;
  transition: box-shadow .15s ease, color .15s ease;
}
#dash-root .q:hover {
  box-shadow: var(--d-shadow-hov);
  color: var(--d-brand);
  border-color: transparent;
}
#dash-root .q-ico {
  width: 34px; height: 34px;
  border-radius: 10px;
  background: var(--d-brand-tint);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
}

/* ---- Overall dashboard background ---- */
#dash-root { background: #f8f9ff; padding: 4px; border-radius: var(--d-radius); }

/* ══════════════════════════════════════════════════════════
   M3 REWRITE — Hero banner (new HTML structure, matches the
   reference design's ambient-glow hero card).
   ══════════════════════════════════════════════════════════ */
#dash-root .m3-hero {
  position: relative;
  overflow: hidden;
  background: #fff;
  border-radius: var(--d-radius);
  box-shadow: var(--d-shadow);
  padding: 24px;
}
#dash-root .m3-hero-glow-a {
  position: absolute;
  left: -80px; top: -80px;
  width: 280px; height: 280px;
  border-radius: 50%;
  background: rgba(148, 206, 240, 0.25);
  filter: blur(60px);
  pointer-events: none;
}
#dash-root .m3-hero-glow-b {
  position: absolute;
  right: 30%; bottom: -100px;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: rgba(79, 222, 163, 0.15);
  filter: blur(60px);
  pointer-events: none;
}
#dash-root .m3-hero-top {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
#dash-root .m3-hero-text h1 {
  color: var(--d-ink);
  font-weight: 700;
  font-size: 24px;
  margin: 0;
  letter-spacing: -0.01em;
}
#dash-root .m3-wave {
  display: inline-block;
  transition: transform 0.2s ease;
}
#dash-root .m3-hero-text h1:hover .m3-wave { transform: rotate(15deg); }
#dash-root .m3-hero-sub {
  color: var(--d-ink-variant);
  font-size: 14px;
  margin: 6px 0 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
#dash-root .m3-hero-dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: #c0c7ce;
  display: inline-block;
}
#dash-root .m3-hero-date {
  display: flex;
  align-items: center;
  gap: 4px;
}
#dash-root .m3-hero-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
#dash-root .m3-refresh-btn {
  height: 40px;
  padding: 0 14px;
  border-radius: 12px;
  border: none;
  background: var(--d-brand-tint);
  color: var(--d-ink-variant);
  font-weight: 600;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: background 0.15s ease;
}
#dash-root .m3-refresh-btn:hover { background: var(--d-brand-soft); }

/* ══════════════════════════════════════════════════════════
   M3 REWRITE — Financial KPI cards (new HTML structure).
   ══════════════════════════════════════════════════════════ */
#dash-root .m3-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 1500px) { #dash-root .m3-kpis { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { #dash-root .m3-kpis { grid-template-columns: 1fr; } }

#dash-root .m3-kpi {
  display: block;
  background: #fff;
  border-radius: var(--d-radius);
  box-shadow: var(--d-shadow);
  padding: 18px;
  text-decoration: none;
  color: inherit;
  transition: box-shadow .15s ease;
}
#dash-root .m3-kpi:hover {
  box-shadow: var(--d-shadow-hov);
  text-decoration: none;
}
#dash-root .m3-kpi-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}
#dash-root .m3-kpi-label {
  color: var(--d-ink-variant);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  display: block;
}
#dash-root .m3-kpi-val-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-top: 4px;
}
#dash-root .m3-kpi-val {
  color: var(--d-ink);
  font-weight: 800;
  font-size: 28px;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
#dash-root .m3-kpi-cur {
  color: var(--d-ink-variant);
  font-size: 12px;
  font-weight: 500;
}
#dash-root .m3-kpi-ico {
  width: 40px; height: 40px;
  border-radius: 12px;
  background: var(--d-brand-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
#dash-root .m3-kpi-foot {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid #f1f4f9;
}
#dash-root .m3-trend {
  font-size: 12px;
  font-weight: 700;
}
#dash-root .m3-trend.up   { color: #16a34a; }
#dash-root .m3-trend.down { color: #dc2626; }
#dash-root .m3-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  display: inline-block;
}
#dash-root .m3-badge.warn   { background: #fef3c7; color: #92400e; }
#dash-root .m3-badge.danger { background: #fee2e2; color: #991b1b; }