/* ═══════════════════════════════════════════════════════════════
   Manzoma Accessibility and Polish Styles
   Phase 2 split: extracted runtime support styles from style.css.
   Load order: tokens.css → base.css → layout.css → components.css → pages → support styles → style.css.
═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   SCROLLBARS & FOCUS
═══════════════════════════════════════════════════════════════ */
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--b2);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--g4)}
:focus-visible{outline:2px solid var(--g4);outline-offset:2px}
.nav-item:focus-visible{outline:2px solid rgba(255,255,255,.65);outline-offset:-2px}body.wbs-open{overflow:hidden}

/* legacy aliases for JS compatibility */
.pg{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:13px}
.tg{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:13px}

/* ═══════════════════════════════════════════════════════════════
   UX IMPROVEMENTS — Focus, Accessibility, Polish
═══════════════════════════════════════════════════════════════ */

/* Global focus ring — keyboard nav accessibility */
*:focus-visible{
  outline:2px solid var(--g4);
  outline-offset:2px;
  border-radius:4px;
}

/* Nav SVG icons */
.nav-icon svg{width:15px;height:15px;transition:transform .14s}
.nav-item:hover .nav-icon svg{transform:scale(1.1)}
.nav-item.active .nav-icon svg{color:var(--accent)}

/* Topbar SVG buttons */
.btn-primary svg,.btn-sec svg,.btn-portfolio svg{flex-shrink:0}
.ham-btn:hover{background:var(--g5);border-color:var(--g4);color:var(--g3)}

/* Skeleton pulse */
@keyframes shimmer{
  0%{background-position:200% 0}
  100%{background-position:-200% 0}
}

/* Empty states */
.ei{font-size:36px;opacity:.5;line-height:1}
.empty p{font-size:13px;color:var(--t4);max-width:260px}

/* Toast color variants */
#toast.ok{background:var(--g2);border-color:rgba(16,185,129,.2)}
#toast.err{background:#7f1d1d;border-color:rgba(239,68,68,.2)}

/* Smooth scrollbar */
.main::-webkit-scrollbar{width:4px}
.main::-webkit-scrollbar-track{background:transparent}
.main::-webkit-scrollbar-thumb{background:var(--s4);border-radius:4px}
.main::-webkit-scrollbar-thumb:hover{background:var(--t4)}

/* Better mobile topbar */
@media(max-width:767px){
  .topbar{padding:10px 12px;gap:8px}
  .topbar-title{font-size:14px}
  .topbar-sub{display:none}
  .btn-portfolio{display:none}
  .btn-sec .btn-lbl{display:none}
  .btn-primary{padding:8px 12px;font-size:12px}
}

/* Hover tooltip for nav items */
@media(min-width:768px){
  .nav-item span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.nav-item{cursor:pointer}
}

/* Task card hover cursor */
.task-card{cursor:default}
.tc-name{cursor:pointer}

/* Transition for all interactive elements */
button,a,.chip,.nav-item{transition-property:background,color,border-color,box-shadow,transform,opacity}


/* TASKS PAGE — Complete Rebuild v4 styles moved to styles/pages/tasks.css. */

/* ═══════════════════════════════════════════════════════════════
   KPI CARD — SVG icon sizing
═══════════════════════════════════════════════════════════════ */
.kpi-ic svg{width:16px;height:16px;display:block}
.kpi-ic{
  width:34px;height:34px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:12px;
}

/* ═══════════════════════════════════════════════════════════════
   ACCESSIBILITY — Focus trap overlay
═══════════════════════════════════════════════════════════════ */
.overlay:focus{outline:none}
[role="dialog"]{outline:none}
.overlay.open{animation:none}

/* Chart loading state */
#ringChart{min-height:120px}
#team-bars:empty::after{
  content:'جارٍ التحميل...';
  display:block;padding:20px;
  font-size:12px;color:var(--t4);text-align:center;
}


/* PM IMPROVEMENTS — Team workload + Task comment button styles moved to styles/pages/team.css. */

/* PROJECT CARDS — Full CSS (was missing after cleanup) styles moved to styles/pages/projects.css. */

/* PROJECT GANTT (ppg-*) — CSS for buildProjectGantt() styles moved to styles/pages/project-page.css. */

/* WBS — Professional improvements styles moved to styles/pages/project-page.css. */

/* PERIODIC REPORTS — Professional layout styles moved to styles/pages/periodic.css. */

/* ═══════════════════════════════════════════════════════════════
   ACCESSIBILITY & POLISH LAYER — UX v2 (appended, non-destructive)
   WCAG 2.2 AA · Apple HIG touch targets · reading-comfort
═══════════════════════════════════════════════════════════════ */

/* ── 1. Reduced motion (WCAG 2.3.3 / vestibular safety) ── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* ── 2. Global keyboard focus ring (WCAG 2.4.7) ── */
:where(button,a,input,select,textarea,[tabindex],.nav-item,.tp-tab,.chip,.act-btn,.kpi-card):focus-visible{
  outline:2.5px solid var(--accent);
  outline-offset:2px;
  border-radius:var(--r4);
}
/* on the dark sidebar use a light ring instead */
.sidebar :where(.nav-item,button,a):focus-visible{
  outline-color:rgba(255,255,255,.85);
}

/* ── 3. Reading-comfort max-width on very large screens ── */
@media(min-width:1700px){
  .page{max-width:1560px;margin-inline:auto;width:100%}
}

/* ── 4. Minimum touch target safety net (interactive controls) ── */
@media(pointer:coarse){
  .nav-item,.tp-tab,.uf-btn,.btn-sec,.btn-primary,.btn-portfolio{min-height:44px}
  .tp-search-clear,.act-btn{min-width:40px;min-height:40px}
}

/* ── 5. Reusable Empty State primitive ── */
.empty-state{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:var(--sp3);
  padding:var(--sp7) var(--sp5);
  color:var(--t3);
}
.empty-state-ic{
  width:56px;height:56px;border-radius:50%;
  background:var(--g5);color:var(--g3);
  display:flex;align-items:center;justify-content:center;
  font-size:26px;margin-bottom:var(--sp1);
}
.empty-state-title{font-size:var(--fz-md);font-weight:700;color:var(--t1)}
.empty-state-sub{font-size:var(--fz-sm);color:var(--t4);max-width:340px;line-height:1.6}

/* ── 6. Smoother scroll + selection color ── */
html{scroll-behavior:smooth}
::selection{background:var(--accent-soft);color:var(--g2)}

/* ── 7. Card hover consistency (unified interactive feel) ── */
.chart-card{transition:box-shadow .2s var(--ease),border-color .2s}
.chart-card:hover{box-shadow:var(--sh2);border-color:var(--b1)}

/* Overview page styles moved to styles/pages/overview.css. */

/* PIPELINE v2 — رحلة المنتج (Product Journey) styles moved to styles/pages/pipeline.css. */

/* METRO LINE (mtr*) — خط مترو المشروع styles moved to styles/pages/metro.css. */

/* ORG CHART CARDS — Colors + Alerts Enhancement styles moved to styles/pages/projects.css. */

/* PROJECT FILES — 4 Dots + Modal styles moved to styles/pages/projects.css. */

/* PROJECT PAGE — Files Section styles moved to styles/pages/project-page.css. */