/* Grid Agents — demo-scoped styles */
.badge-demo{ font-size:.78rem; padding:6px 14px; border-radius:999px; border:1px solid rgba(212,175,55,.45); color:var(--gold); background:rgba(212,175,55,.08); white-space:nowrap; }
.site-footer-local{ border-top:1px solid var(--border); margin-top:40px; padding:24px 0; color:var(--muted); font-size:.85rem; text-align:center; }

.ga-app{ padding:20px 0 60px; display:flex; flex-direction:column; gap:20px; }
.ga-panel{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:18px; box-shadow:var(--shadow); }

.ga-top-grid{ display:grid; grid-template-columns:1.3fr .7fr; gap:20px; align-items:start; }
@media (max-width:960px){ .ga-top-grid{ grid-template-columns:1fr; } }

.ga-map-wrap{ position:relative; }
.ga-map-svg{ width:100%; height:auto; }
.ga-seg-node{ cursor:pointer; }
.ga-seg-node circle{ transition:.2s; }
.ga-seg-node:hover circle{ filter:brightness(1.3); }
.ga-seg-node text{ font-family:Arial,sans-serif; font-size:11px; fill:#EAF0FF; text-anchor:middle; pointer-events:none; }
.ga-seg-node .cust-label{ font-size:9.5px; fill:#93A1C2; }
.ga-feeder-line{ stroke:#3a4a70; stroke-width:3; fill:none; }
.ga-feeder-line.fault{ stroke:#ff5a5a; stroke-dasharray:6 4; animation:ga-dash 1s linear infinite; }
@keyframes ga-dash{ to{ stroke-dashoffset:-20; } }
.ga-pulse{ animation:ga-pulse 1.4s ease-in-out infinite; }
@keyframes ga-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }

.ga-controls{ display:flex; gap:10px; margin-top:14px; flex-wrap:wrap; }
.ga-controls button{ background:var(--surface-2); border:1px solid var(--border); color:var(--ink); border-radius:var(--radius-md); padding:10px 18px; font-weight:600; font-size:.85rem; }
.ga-controls button.primary{ background:linear-gradient(135deg,var(--gold),var(--teal)); color:#241a00; border-color:transparent; }
.ga-controls button:disabled{ opacity:.5; cursor:not-allowed; }
.ga-live-badge{ display:inline-flex; align-items:center; gap:6px; font-size:.75rem; color:var(--teal); font-weight:700; }
.ga-live-badge .dot{ width:8px; height:8px; border-radius:50%; background:var(--teal); }

.ga-kpi-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
@media (max-width:960px){ .ga-kpi-grid{ grid-template-columns:repeat(2,1fr); } }
.ga-kpi{ background:rgba(255,255,255,0.03); border:1px solid var(--border); border-radius:var(--radius-md); padding:14px; }
.ga-kpi .k-label{ font-size:.72rem; color:var(--muted); margin-bottom:6px; }
.ga-kpi .k-val{ font-size:1.4rem; font-weight:700; }

.ga-chart-wrap{ position:relative; height:220px; margin-top:10px; }

.ga-agents-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media (max-width:960px){ .ga-agents-grid{ grid-template-columns:1fr; } }
.ga-agent-card{ background:rgba(255,255,255,0.02); border:1px solid var(--border); border-radius:var(--radius-md); padding:16px; }
.ga-agent-card h4{ display:flex; align-items:center; gap:8px; font-size:.95rem; margin-bottom:10px; }
.ga-agent-status{ font-size:.72rem; padding:3px 10px; border-radius:999px; font-weight:700; margin-inline-start:auto; }
.ga-agent-status.idle{ background:rgba(147,161,194,.15); color:var(--muted); }
.ga-agent-status.working{ background:rgba(212,175,55,.18); color:var(--gold); }
.ga-agent-status.done{ background:rgba(25,195,176,.15); color:var(--teal); }
.ga-agent-body{ font-size:.82rem; color:var(--muted); line-height:1.7; min-height:70px; }
.ga-agent-body .sms-box{ margin-top:8px; background:rgba(212,175,55,.08); border:1px solid rgba(212,175,55,.25); border-radius:8px; padding:10px; color:var(--ink); font-size:.8rem; }

.ga-log{ display:flex; flex-direction:column; gap:8px; max-height:260px; overflow-y:auto; margin-top:10px; }
.ga-log-item{ display:flex; gap:10px; font-size:.8rem; padding:8px 10px; border-radius:8px; background:rgba(255,255,255,0.02); border-inline-start:3px solid var(--border); }
.ga-log-item.forecast{ border-inline-start-color:var(--violet); }
.ga-log-item.outage{ border-inline-start-color:#ff5a5a; }
.ga-log-item.customer{ border-inline-start-color:var(--gold); }
.ga-log-time{ color:var(--muted); white-space:nowrap; font-family:monospace; }


/* ---- Bilingual layout (EN = LTR default, AR = RTL). site.css hard-codes body{direction:rtl}. ---- */
html[dir="ltr"] body{ direction:ltr; }
html[lang="en"] body{ font-family:var(--font-en), var(--font-ar), sans-serif; }
.skip-link{ right:auto; left:auto; inset-inline-start:16px; transform:translateY(-150%); }
.skip-link:focus{ right:auto; transform:none; }
.demo-head-actions{ display:flex; align-items:center; gap:10px; flex:none; }
.demo-head-actions .btn-ghost{ padding:8px 16px; border-radius:999px; border:1px solid var(--border-strong); font-size:.85rem; white-space:nowrap; }
.lang-toggle{ background:transparent; color:var(--ink); border:1px solid var(--border-strong); border-radius:999px; padding:8px 14px; font-size:.85rem; font-weight:600; white-space:nowrap; }
.lang-toggle:hover, .lang-toggle:focus-visible{ border-color:var(--teal); }
.lang-toggle[lang="ar"]{ font-family:var(--font-ar); }
.lang-toggle[lang="en"]{ font-family:var(--font-en); }
.demo-hero{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; }
.demo-title{ font-size:1.9rem; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.demo-title .title-alt{ font-size:1rem; color:var(--muted); font-weight:400; }
html[lang="en"] .demo-title .title-alt{ display:none; }
.demo-lede{ color:var(--muted); margin-top:8px; max-width:640px; }
.ga-top-grid > *, .ga-agents-grid > *{ min-width:0; }
.ga-kpi .k-val{ overflow-wrap:anywhere; }
@media (max-width:560px){
  .site-header .wrap{ gap:10px; padding:0 14px; }
  .demo-head-actions{ gap:6px; }
  .demo-head-actions .btn-ghost, .lang-toggle{ padding:6px 10px; font-size:.78rem; }
  .demo-title{ font-size:1.5rem; }
  .ga-kpi .k-val{ font-size:1.15rem; }
}

/* keep side gutters: the base rule above resets .wrap padding to 0 */
.ga-app{ padding-inline:24px; }
@media (max-width:560px){ .ga-app{ padding-inline:14px; } }