/* ============================================================================
   BAJ Farm OS — Executive Dashboard (premium)          exec-dashboard.css v2.0.0
   Designed & Developed by: Babatunde Adedeji Adelaja · 2026
   ----------------------------------------------------------------------------
   Presentation layer ONLY. Rendered by exec-dashboard-pro.js from the real
   execDashboardData(). Emerald / forest / gold / ivory / charcoal. Fully scoped
   under .exd-pro; self-contained colours; every text pair passes WCAG AA.
   ============================================================================ */
.exd-pro {
  --e-bg:#052018; --e-bg2:#07271d;
  --e-card:#0c3327; --e-card2:#0f3b2c; --e-chip:#12452f;
  --e-line:rgba(212,164,55,.18); --e-line2:rgba(255,255,255,.08);
  --e-ink:#f4efe1; --e-ink2:#dbe8df; --e-mut:#a9c4b7;
  --e-gold:#D4A437; --e-golds:#e7cf94;
  --e-up:#54c98a; --e-down:#e88a80;
  --e-r:18px; --e-r-sm:12px;
  --e-sh:0 12px 30px -18px rgba(0,0,0,.7), 0 2px 6px rgba(0,0,0,.25);
  font-family: var(--ds-font, -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,sans-serif);
  color: var(--e-ink); -webkit-font-smoothing: antialiased;
  padding: 22px clamp(16px,2.4vw,30px) 40px; margin: 0;
}
body.baj-on-dash { background: radial-gradient(1200px 620px at 78% -8%, #0a3626 0%, #052018 52%, #03150f 100%) !important; }
body.baj-on-dash .nav { display: none !important; }
body.baj-on-dash > section.pg { padding-top: 14px !important; }
body.baj-on-dash #pg-admin > .con.sec, body.baj-on-dash #pg-staff > .con.sec { max-width: none !important; padding: 0 !important; }
body.baj-on-dash #pg-admin .ap-head, body.baj-on-dash #pg-staff .ap-head,
body.baj-on-dash #pg-admin .repro-alert-bar, body.baj-on-dash #pg-staff .repro-alert-bar { display: none !important; }

/* header */
.exd-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.exd-hello { flex: 1; min-width: 240px; }
.exd-hello h1 { margin: 0; font-family: var(--ds-font-display, Georgia, serif); font-size: clamp(22px,2.8vw,30px); font-weight: 700; color: #fff; letter-spacing: -.01em; }
.exd-hello .exd-sub { margin-top: 5px; font-size: 13px; font-weight: 600; color: var(--e-mut); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.exd-hello .exd-sub b { color: var(--e-ink2); }
.exd-hello .exd-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--e-mut); display: inline-block; }
.exd-sync { color: var(--e-up); font-weight: 700; }
.exd-head-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.exd-weather { display: flex; align-items: center; gap: 9px; padding: 8px 14px; border-radius: 14px; background: var(--e-card); border: 1px solid var(--e-line); }
.exd-weather .w-ic { font-size: 20px; }
.exd-weather .w-t { font-size: 15px; font-weight: 800; color: #fff; line-height: 1; }
.exd-weather .w-d { font-size: 11px; color: var(--e-mut); }
.exd-pill { position: relative; width: 42px; height: 42px; border-radius: 12px; background: var(--e-card); border: 1px solid var(--e-line); color: var(--e-ink); font-size: 17px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: .16s; }
.exd-pill:hover { border-color: var(--e-gold); }
.exd-badge { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--e-down); color: #2a0d0a; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.exd-search { position: relative; display: flex; align-items: center; }
.exd-search input { width: 240px; box-sizing: border-box; padding: 10px 40px 10px 34px; border-radius: 12px; border: 1px solid var(--e-line); background: var(--e-card); color: var(--e-ink); font: inherit; font-size: 13.5px; }
.exd-search input::placeholder { color: var(--e-mut); }
.exd-search input:focus { outline: none; border-color: var(--e-gold); box-shadow: 0 0 0 3px rgba(212,164,55,.25); }
.exd-search .s-ic { position: absolute; left: 11px; color: var(--e-mut); font-size: 14px; }
.exd-search .s-k { position: absolute; right: 9px; font-size: 10px; font-weight: 800; color: var(--e-mut); border: 1px solid var(--e-line2); border-radius: 5px; padding: 1px 5px; }
.exd-avatar { width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg,#0f5a43,#0a3b2c); border: 1px solid var(--e-gold); color: var(--e-golds); font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }

/* KPI row */
.exd-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px,1fr)); gap: 13px; margin-bottom: 18px; }
.exd-kpi { background: linear-gradient(180deg,var(--e-card2),var(--e-card)); border: 1px solid var(--e-line); border-radius: var(--e-r); padding: 15px 16px; box-shadow: var(--e-sh); transition: transform .18s, box-shadow .18s, border-color .18s; position: relative; overflow: hidden; min-width: 0; }
.exd-kpi:hover { transform: translateY(-3px); border-color: rgba(212,164,55,.4); box-shadow: 0 20px 42px -20px rgba(0,0,0,.8); }
.exd-kpi-top { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.exd-kpi-ic { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 17px; background: rgba(212,164,55,.14); border: 1px solid rgba(212,164,55,.28); }
.exd-kpi-l { font-size: 11.5px; font-weight: 700; color: var(--e-mut); line-height: 1.2; }
.exd-kpi-v { font-size: 25px; font-weight: 800; color: #fff; line-height: 1.05; letter-spacing: -.02em; }
.exd-kpi-b { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 7px; }
.exd-kpi-s { font-size: 11.5px; font-weight: 700; color: var(--e-mut); }
.exd-kpi-d { font-size: 12px; font-weight: 800; }
.exd-kpi-d.up { color: var(--e-up); } .exd-kpi-d.down { color: var(--e-down); }
.exd-kpi-spark { height: 30px; margin-top: 8px; }

/* layout: center + right rail */
.exd-wrap { display: grid; grid-template-columns: minmax(0,1fr) 336px; gap: 16px; align-items: start; }
.exd-center { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.exd-rail { display: flex; flex-direction: column; gap: 16px; }
.exd-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.exd-2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }

/* generic card */
.exd-card { background: linear-gradient(180deg,var(--e-card2),var(--e-card)); border: 1px solid var(--e-line); border-radius: var(--e-r); padding: 18px; box-shadow: var(--e-sh); min-width: 0; }
.exd-card-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.exd-card-h h3 { margin: 0; font-size: 15px; font-weight: 800; color: #fff; letter-spacing: -.01em; }
.exd-card-h .exd-when { font-size: 11px; color: var(--e-mut); font-weight: 700; }
.exd-link { font-size: 11.5px; font-weight: 800; color: var(--e-golds); cursor: pointer; background: none; border: none; }
.exd-link:hover { color: var(--e-gold); }
.exd-chartbox { position: relative; width: 100%; }
.exd-metrics { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 12px; }
.exd-metric { min-width: 74px; }
.exd-metric .m-l { font-size: 11px; font-weight: 700; color: var(--e-mut); }
.exd-metric .m-v { font-size: 19px; font-weight: 800; color: #fff; line-height: 1.15; }
.exd-metric .m-d { font-size: 11.5px; font-weight: 800; }
.exd-metric .m-d.up { color: var(--e-up); } .exd-metric .m-d.down { color: var(--e-down); }

/* health gauge */
.exd-gauge-wrap { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.exd-gauge { position: relative; width: 176px; height: 176px; flex: none; }
.exd-gauge .g-v { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.exd-gauge .g-n { font-size: 40px; font-weight: 800; color: #fff; line-height: 1; }
.exd-gauge .g-t { font-size: 12px; font-weight: 800; color: var(--e-up); text-transform: uppercase; letter-spacing: .05em; margin-top: 2px; }
.exd-health-notes { flex: 1; min-width: 180px; }
.exd-health-notes .h-lead { font-size: 13px; font-weight: 800; color: var(--e-golds); margin-bottom: 8px; }
.exd-check { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; color: var(--e-ink2); font-weight: 600; padding: 4px 0; }
.exd-check .c-ic { color: var(--e-up); font-weight: 800; }

/* donut legend */
.exd-legend { display: flex; flex-direction: column; gap: 7px; }
.exd-leg { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--e-ink2); font-weight: 600; }
.exd-leg .dot { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.exd-leg .val { margin-left: auto; color: var(--e-mut); font-weight: 700; }

/* lists */
.exd-list { display: flex; flex-direction: column; }
.exd-li { display: flex; align-items: center; gap: 11px; padding: 10px 0; border-bottom: 1px solid var(--e-line2); }
.exd-li:last-child { border-bottom: none; }
.exd-li .li-ic { width: 30px; height: 30px; border-radius: 9px; flex: none; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; background: var(--e-chip); border: 1px solid var(--e-line2); }
.exd-li .li-m { flex: 1; min-width: 0; }
.exd-li .li-t { font-size: 13px; font-weight: 700; color: var(--e-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.exd-li .li-s { font-size: 11.5px; color: var(--e-mut); font-weight: 600; }
.exd-li .li-r { font-size: 11.5px; font-weight: 800; color: var(--e-mut); white-space: nowrap; }
.exd-tl2 { position: relative; padding-left: 22px; }
.exd-tl2::before { content: ""; position: absolute; left: 6px; top: 4px; bottom: 4px; width: 2px; background: var(--e-line2); }
.exd-tl2 .exd-li { position: relative; }
.exd-tl2 .exd-li::before { content: ""; position: absolute; left: -19px; top: 16px; width: 9px; height: 9px; border-radius: 50%; background: var(--e-card); border: 2px solid var(--e-gold); }

/* tasks */
.exd-task { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--e-line2); }
.exd-task:last-child { border-bottom: none; }
.exd-task .t-box { width: 17px; height: 17px; border-radius: 5px; border: 1.5px solid var(--e-mut); flex: none; }
/* Today's Tasks description text (.t-t) shares its class name with the
   site-wide toast-type badge selector `.t-t{background:var(--brl);...}`
   (app.html's global light-theme styles, used by toast()'s 'm/p/t/d' type
   classes — that class is still needed there and is left untouched). That
   pale badge background was the lower-specificity rule's only `background`
   declaration, so it bled through here since this selector never set its
   own; combined with this rule's light ink color the description rendered
   as a near-white pill with near-white text. Fix: explicitly clear the
   background so the description sits directly on this card's own dark
   green (same as every other line item in this widget), and use bold
   white text for max readability. Spacing/layout/checkbox untouched. */
.exd-task .t-t { flex: 1; font-size: 13px; font-weight: 800; color: #fff; background: transparent; }
.exd-tag { font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 999px; text-transform: uppercase; letter-spacing: .03em; }
.exd-tag.high { background: rgba(232,138,128,.18); color: #f0a89f; }
.exd-tag.medium { background: rgba(212,164,55,.18); color: var(--e-golds); }
.exd-tag.low { background: rgba(84,201,138,.16); color: #8fdcae; }

/* alerts */
.exd-alert2 { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--e-line2); font-size: 12.5px; color: var(--e-ink2); font-weight: 600; }
.exd-alert2:last-child { border-bottom: none; }
.exd-alert2 .a-ic { flex: none; font-size: 14px; }
.exd-alert2.crit .a-ic { color: var(--e-down); } .exd-alert2.warn .a-ic { color: var(--e-golds); }

/* AI advisor */
.exd-ai .exd-card-h .beta { font-size: 9px; font-weight: 800; letter-spacing: .1em; color: #06251b; background: var(--e-golds); padding: 2px 6px; border-radius: 5px; }
.exd-ai-item { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--e-line2); }
.exd-ai-item:last-child { border-bottom: none; }
.exd-ai-item .ai-ic { flex: none; font-size: 16px; }
.exd-ai-item .ai-t { font-size: 12.8px; font-weight: 700; color: var(--e-ink); line-height: 1.35; }
.exd-ai-item .ai-s { font-size: 11.5px; color: var(--e-mut); font-weight: 600; margin-top: 1px; }

/* weather forecast */
.exd-fc { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 8px; }
.exd-fc-d { text-align: center; padding: 10px 4px; border-radius: 12px; background: var(--e-chip); border: 1px solid var(--e-line2); }
.exd-fc-d .d-w { font-size: 11px; font-weight: 800; color: var(--e-mut); }
.exd-fc-d .d-i { font-size: 20px; margin: 4px 0; }
.exd-fc-d .d-h { font-size: 13px; font-weight: 800; color: #fff; }
.exd-fc-d .d-l { font-size: 11px; color: var(--e-mut); }

/* quick actions */
.exd-qagrid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.exd-qa2 { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 14px 8px; border-radius: 12px; background: var(--e-chip); border: 1px solid var(--e-line2); color: var(--e-ink); font: inherit; font-weight: 700; font-size: 11.5px; text-align: center; cursor: pointer; transition: .16s; min-width: 0; }
.exd-qa2:hover { transform: translateY(-2px); border-color: var(--e-gold); background: #16512f; }
.exd-qa2 .q-ic { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 17px; background: rgba(212,164,55,.14); border: 1px solid rgba(212,164,55,.26); }

/* production mini-charts */
.exd-prod { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.exd-prod-i .p-l { font-size: 11.5px; font-weight: 700; color: var(--e-mut); }
.exd-prod-i .p-v { font-size: 18px; font-weight: 800; color: #fff; }
.exd-prod-i .p-d { font-size: 11px; font-weight: 800; } .exd-prod-i .p-d.up{color:var(--e-up)} .exd-prod-i .p-d.down{color:var(--e-down)}
.exd-prod-i .exd-chartbox { height: 46px; margin-top: 4px; }
.exd-empty { font-size: 12.5px; color: var(--e-mut); font-weight: 600; padding: 6px 0; }

/* ========================================================================
   v2.1 additions — Executive Command Center (glass, herd status, breeding
   calendar, feed intelligence, operations timeline, entry animations)
   ======================================================================== */

/* glassmorphism + entry animation on every card */
.exd-card, .exd-kpi {
  background: linear-gradient(180deg, rgba(15,59,44,.86), rgba(12,51,39,.92));
  -webkit-backdrop-filter: blur(12px) saturate(1.15); backdrop-filter: blur(12px) saturate(1.15);
}
@keyframes exdUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.exd-pro .exd-card { animation: exdUp .45s cubic-bezier(.22,.8,.36,1) both; }
.exd-pro .exd-kpi { animation: exdUp .4s cubic-bezier(.22,.8,.36,1) both; }
.exd-kpis .exd-kpi:nth-child(2) { animation-delay: .04s; } .exd-kpis .exd-kpi:nth-child(3) { animation-delay: .08s; }
.exd-kpis .exd-kpi:nth-child(4) { animation-delay: .12s; } .exd-kpis .exd-kpi:nth-child(5) { animation-delay: .16s; }
.exd-kpis .exd-kpi:nth-child(6) { animation-delay: .2s; } .exd-kpis .exd-kpi:nth-child(7) { animation-delay: .24s; }
.exd-kpis .exd-kpi:nth-child(8) { animation-delay: .28s; }
.exd-center > div:nth-child(2) .exd-card { animation-delay: .1s; }
.exd-center > div:nth-child(3) .exd-card { animation-delay: .18s; }
.exd-center > div:nth-child(4) .exd-card { animation-delay: .26s; }
.exd-rail .exd-card:nth-child(1) { animation-delay: .1s; } .exd-rail .exd-card:nth-child(2) { animation-delay: .18s; }
.exd-rail .exd-card:nth-child(3) { animation-delay: .26s; } .exd-rail .exd-card:nth-child(4) { animation-delay: .34s; }
.exd-gauge-arc { transition: stroke-dashoffset 1s cubic-bezier(.22,.8,.36,1); }
.exd-gauge .g-crown { font-size: 15px; line-height: 1; margin-bottom: 2px; }
.exd-check .c-ic.ok { color: var(--e-up); } .exd-check .c-ic.no { color: var(--e-golds); }
.exd-weather { cursor: pointer; font: inherit; text-align: left; }
.exd-weather:hover { border-color: var(--e-gold); }

/* herd status */
.exd-stack { display: flex; height: 12px; border-radius: 999px; overflow: hidden; gap: 2px; margin-bottom: 12px; }
.exd-stack span { min-width: 4px; border-radius: 2px; }
.exd-hlist { display: flex; flex-direction: column; }
.exd-hrow { display: flex; align-items: center; gap: 9px; padding: 7px 0; border-bottom: 1px solid var(--e-line2); font-size: 12.8px; font-weight: 700; color: var(--e-ink); }
.exd-hrow:last-child { border-bottom: none; }
.exd-hrow .dot { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.exd-hrow .sub { flex: 1; font-size: 11px; font-weight: 600; color: var(--e-mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.exd-hrow b { font-size: 13.5px; color: #fff; }

/* breeding calendar */
.exd-cal-row { display: grid; grid-template-columns: 1.55fr 1fr; gap: 16px; }
.exd-cal { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: 7px; }
.exd-cal-d { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 2px 7px; border-radius: 11px; background: var(--e-chip); border: 1px solid var(--e-line2); cursor: pointer; font: inherit; color: var(--e-ink); transition: .16s; min-height: 64px; }
.exd-cal-d:hover { border-color: var(--e-gold); transform: translateY(-2px); }
.exd-cal-d.today { border-color: var(--e-gold); background: rgba(212,164,55,.16); box-shadow: 0 0 0 1px rgba(212,164,55,.35) inset; }
.exd-cal-d .cd-w { font-size: 9.5px; font-weight: 800; color: var(--e-mut); text-transform: uppercase; letter-spacing: .05em; }
.exd-cal-d .cd-n { font-size: 14.5px; font-weight: 800; color: #fff; line-height: 1; }
.exd-cal-d .cd-c { display: flex; gap: 2px; align-items: center; min-height: 16px; flex-wrap: wrap; justify-content: center; }
.exd-cal-d .c-chip { font-size: 11px; line-height: 1; }
.exd-cal-d .c-more { font-size: 9.5px; font-weight: 800; color: var(--e-golds); }
.exd-cal-d.has { border-color: rgba(212,164,55,.34); }
.exd-cal-leg { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 11px; font-size: 11px; font-weight: 700; color: var(--e-mut); }

/* feed intelligence */
.exd-fi-wrap { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.exd-fi-donut { position: relative; flex: none; }
.exd-fi-donut .fi-total { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.exd-fi-donut .fi-total b { font-size: 17px; font-weight: 800; color: #fff; line-height: 1.1; }
.exd-fi-donut .fi-total span { font-size: 9.5px; font-weight: 700; color: var(--e-mut); }
.fi-fcr-l { font-size: 11px; font-weight: 700; color: var(--e-mut); margin: 10px 0 3px; }
.fi-lows { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.fi-low { font-size: 10.5px; font-weight: 800; color: #f0c9a0; background: rgba(201,138,63,.16); border: 1px solid rgba(201,138,63,.3); padding: 3px 8px; border-radius: 999px; }

/* operations timeline icon tints */
.exd-li .li-ic.ic-farrow { background: rgba(84,201,138,.14); border-color: rgba(84,201,138,.3); }
.exd-li .li-ic.ic-breed { background: rgba(232,138,128,.12); border-color: rgba(232,138,128,.28); }
.exd-li .li-ic.ic-wean { background: rgba(127,184,255,.12); border-color: rgba(127,184,255,.28); }
.exd-li .li-ic.ic-buy, .exd-li .li-ic.ic-use { background: rgba(212,164,55,.13); border-color: rgba(212,164,55,.3); }
.exd-li .li-ic.ic-vax, .exd-li .li-ic.ic-treat { background: rgba(183,140,240,.12); border-color: rgba(183,140,240,.28); }

/* ========================================================================
   v2.2 — enterprise polish (executive summary, hero prominence, KPI trend
   chips, grouped/expandable AI advisor, premium quick actions, data density)
   ======================================================================== */

/* executive summary banner */
.exd-exec-sum { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; padding: 14px 18px; border-radius: 16px; border: 1px solid rgba(212,164,55,.26); background: linear-gradient(90deg, rgba(212,164,55,.10), rgba(15,59,44,.55) 40%); margin-bottom: 18px; animation: exdUp .4s cubic-bezier(.22,.8,.36,1) both; }
.exd-exec-sum .es-ic { width: 34px; height: 34px; border-radius: 10px; flex: none; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; color: var(--e-golds); background: rgba(212,164,55,.14); border: 1px solid rgba(212,164,55,.3); }
.exd-exec-sum .es-t { flex: 1; min-width: 230px; font-size: 12.8px; line-height: 1.55; color: var(--e-ink2); font-weight: 600; }
.exd-exec-sum .es-t b { color: var(--e-golds); }
.exd-exec-sum .es-chips { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.es-chip { font-size: 10.5px; font-weight: 800; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--e-line2); color: var(--e-ink2); background: var(--e-chip); white-space: nowrap; }
.es-chip.ok { color: #8fdcae; border-color: rgba(84,201,138,.35); }
.es-chip.mid { color: var(--e-golds); border-color: rgba(212,164,55,.35); }
.es-chip.warn { color: #f0a89f; border-color: rgba(232,138,128,.35); }

/* hero prominence: Farm Health · Financial Overview · AI Advisor */
.exd-card.exd-hero { position: relative; border-color: rgba(212,164,55,.4); box-shadow: 0 18px 44px -20px rgba(0,0,0,.85), 0 0 0 1px rgba(212,164,55,.08), 0 2px 24px -12px rgba(212,164,55,.25); }
.exd-card.exd-hero::before { content: ""; position: absolute; top: 0; left: 16px; right: 16px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--e-gold), transparent); opacity: .75; }
.exd-card.exd-hero .exd-card-h h3 { font-size: 16px; letter-spacing: .01em; }

/* KPI trend chips & period comparison */
.exd-kpi-top .exd-kpi-d { margin-left: auto; font-size: 10.5px; padding: 2px 7px; border-radius: 999px; }
.exd-kpi-d.up { background: rgba(84,201,138,.14); border: 1px solid rgba(84,201,138,.3); }
.exd-kpi-d.down { background: rgba(232,138,128,.12); border: 1px solid rgba(232,138,128,.3); }
.exd-kpi-c { font-size: 10px; font-weight: 700; color: var(--e-mut); white-space: nowrap; }

/* AI advisor: grouped recommendations + expandable insights */
.exd-ai-g { margin-bottom: 6px; }
.exd-ai-g .ai-g-h { font-size: 9.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--e-golds); padding: 8px 0 3px; border-bottom: 1px dashed var(--e-line2); margin-bottom: 2px; }
.exd-ai-item .ai-m { flex: 1; min-width: 0; }
.exd-ai-item.exp { cursor: pointer; border-radius: 10px; margin: 0 -6px; padding: 10px 6px; transition: background .15s; }
.exd-ai-item.exp:hover { background: rgba(255,255,255,.04); }
.exd-ai-item .ai-ch { font-size: 10px; color: var(--e-mut); margin-left: 6px; transition: transform .18s; display: inline-block; }
.exd-ai-item.open .ai-ch { transform: rotate(180deg); }
.exd-ai-item .ai-more { display: none; font-size: 11.5px; color: var(--e-ink2); font-weight: 600; line-height: 1.5; margin-top: 7px; padding: 8px 10px; border-radius: 9px; background: rgba(212,164,55,.07); border: 1px solid rgba(212,164,55,.16); }
.exd-ai-item.open .ai-more { display: block; animation: exdUp .25s ease both; }

/* premium quick-action shortcut cards */
.exd-qagrid { grid-template-columns: repeat(2, minmax(0,1fr)); }
.exd-qa2 { flex-direction: row; align-items: center; gap: 11px; text-align: left; padding: 12px; background: linear-gradient(135deg, rgba(18,69,47,.92), rgba(12,51,39,.92)); }
.exd-qa2 .q-m { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.exd-qa2 .q-t { font-size: 12px; font-weight: 800; color: var(--e-ink); }
.exd-qa2 .q-d { font-size: 10px; font-weight: 600; color: var(--e-mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.exd-qa2 .q-a { font-size: 16px; color: var(--e-mut); font-weight: 800; transition: .16s; }
.exd-qa2:hover .q-a { color: var(--e-gold); transform: translateX(2px); }

/* breeding-calendar event-count badge */
.exd-cal-d { position: relative; }
.exd-cal-d .cd-b { position: absolute; top: -5px; right: -4px; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 8px; background: var(--e-gold); color: #06251b; font-size: 9px; font-weight: 800; display: flex; align-items: center; justify-content: center; }

/* herd share mini-bars */
.exd-hrow .hbar { width: 56px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.07); overflow: hidden; flex: none; }
.exd-hrow .hbar i { display: block; height: 100%; border-radius: 3px; }

/* denser lists */
.exd-li { padding: 8px 0; }
.exd-li .li-t { font-size: 12.5px; }

/* responsive */
@media (max-width: 1180px) { .exd-wrap { grid-template-columns: 1fr; } .exd-rail { display: grid; grid-template-columns: repeat(2,1fr); } }
@media (max-width: 900px) { .exd-3 { grid-template-columns: 1fr; } .exd-2 { grid-template-columns: 1fr; } .exd-cal-row { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .exd-rail { grid-template-columns: 1fr; } .exd-kpis { grid-template-columns: 1fr 1fr; } .exd-search input { width: 150px; } .exd-qagrid, .exd-prod { grid-template-columns: 1fr 1fr; } .exd-cal { grid-template-columns: repeat(7,1fr); gap: 4px; } .exd-cal-d { min-height: 52px; } }
@media (prefers-reduced-motion: reduce) { .exd-kpi, .exd-qa2, .exd-pill, .exd-cal-d { transition: none !important; } .exd-pro .exd-card, .exd-pro .exd-kpi { animation: none !important; } .exd-gauge-arc { transition: none !important; } }

/* ---------------------------------------------------------------------------
   Managed Farm ONLY — Executive Dashboard section layout (Phase 3).
   Scoped strictly under body.mf: BAJ Admin (#apStats) and BAJ Staff
   (#spStats) render the exact same .exd-wrap/.exd-3/.exd-2/.exd-cal-row
   markup from the shared exec-dashboard-pro.js engine, but neither carries
   the body.mf class, so none of these rules ever apply to them.
   .exd-mf-sec / .exd-mf-flow are new, additive classes used only by the
   Managed Farm re-arrangement script (app.html: mfArrangeExecDashboard());
   .exd-3 / .exd-2 / .exd-cal-row keep their existing card-grid styling above
   unchanged, they are simply reused as section bodies here. */
body.mf .exd-wrap { display: flex; flex-direction: column; gap: 28px; }
body.mf .exd-mf-sec { width: 100%; }
body.mf .exd-mf-flow { display: flex; flex-direction: column; gap: 16px; }
body.mf .exd-mf-sec .ap-sec-h { margin: 0 0 14px; }
body.mf .exd-mf-sec:first-child .ap-sec-h { margin-top: 0; }
@media (max-width: 900px) { body.mf .exd-mf-flow { gap: 12px; } }