/* ═══════════════════════════════════════════════════════════════
   Manzoma Feedback and Loading 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.
═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   TOAST
═══════════════════════════════════════════════════════════════ */
#toast{
  position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--g1);color:#fff;
  padding:11px 20px;border-radius:20px;
  font-size:13px;font-weight:600;
  box-shadow:0 8px 28px rgba(0,0,0,.22),0 2px 8px rgba(0,0,0,.1);
  z-index:9999;opacity:0;pointer-events:none;
  transition:opacity .22s var(--ease),transform .22s var(--ease);
  white-space:nowrap;max-width:calc(100vw - 40px);
  border:1px solid rgba(255,255,255,.08);
}
#toast.show{transform:translateX(-50%) translateY(0)}
#toast.ok{background:var(--g3)}
#toast.err{background:var(--red)}

/* PROJECT GRID (shared by both old pc2 and new prj-card) styles moved to styles/pages/projects.css. */

/* TEAM CARDS V2 styles moved to styles/pages/team.css. */

/* ORG CHART styles moved to styles/pages/team.css. */

/* PORTFOLIO STRUCTURE — نظام الهيكلة الديناميكية styles moved to styles/pages/projects.css. */

/* PORTFOLIO STRUCTURE — Org Chart + Project Page styles moved to styles/pages/projects.css. */

/* PROJECT PAGE OVERLAY styles moved to styles/pages/project-page.css. */

/* WBS MODAL (full-screen panel) styles moved to styles/pages/project-page.css. */

/* PERIODIC REPORTS styles moved to styles/pages/periodic.css. */

/* ═══════════════════════════════════════════════════════════════
   LOADING SKELETONS
═══════════════════════════════════════════════════════════════ */
@keyframes shimmer{0%{background-position:200% center}100%{background-position:-200% center}}
.skeleton{
  border-radius:8px;
  background:linear-gradient(90deg,var(--s2) 25%,var(--s1) 50%,var(--s2) 75%);
  background-size:200% auto;
  animation:shimmer 1.5s ease infinite;
}
.skeleton-kpi{height:100px;border-radius:var(--r)}
.skeleton-row{height:44px;border-radius:var(--r3);margin-bottom:4px}
.skeleton-card{height:150px;border-radius:var(--r)}

/* ═══════════════════════════════════════════════════════════════
   SKELETONS — Loading placeholders
═══════════════════════════════════════════════════════════════ */
@keyframes shimmer{
  0%{background-position:200% 0}
  100%{background-position:-200% 0}
}
.kpi-skeleton{
  height:108px;border-radius:var(--r);
  background:linear-gradient(90deg,var(--s2) 25%,var(--s3) 50%,var(--s2) 75%);
  background-size:200% 100%;
  animation:shimmer 1.6s infinite;
  border:1px solid var(--b0);
}
.uc-skeleton{
  height:52px;border-radius:8px;margin-bottom:4px;
  background:linear-gradient(90deg,var(--s2) 25%,var(--s3) 50%,var(--s2) 75%);
  background-size:200% 100%;
  animation:shimmer 1.6s infinite;
}
.uc-skeleton + .uc-skeleton{animation-delay:.15s}
.uc-skeleton + .uc-skeleton + .uc-skeleton{animation-delay:.3s}