/* ============================================================================
   MGIOT — Hader pages layout (موظفو حاضر / إعدادات حاضر / رواتب حاضر)
   Restores the .hader-* page-body classes that mgiot-commercial-hader.css held
   before the Phase B teardown. Only the scoped page classes are kept here — the
   old file's global .mg-* !important overrides are intentionally dropped, and
   the hero + hero-logo are handled in mgiot-components-2028.css (do not redefine).
   ========================================================================== */
.hader-admin-page{ display:grid; gap:16px; }

.hader-kicker{ display:inline-flex; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.22); padding:6px 10px; border-radius:999px; font-weight:900; font-size:12px; }
.hader-hero-actions{ display:flex; gap:8px; flex-wrap:wrap; }

.hader-card{ padding:16px; }
.hader-stat-grid{ margin:16px 0; }

.hader-employee-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:14px; }
.hader-emp-card{ background:#fff; border:1px solid var(--hader-border, var(--mg-border, #E3EDF8)); border-radius:20px; padding:16px; box-shadow:0 12px 28px rgba(15,77,150,.07); }
.hader-emp-head{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.hader-emp-cell{ display:flex; align-items:center; gap:8px; }
.hader-emp-metrics{ display:grid; gap:8px; margin:12px 0; }
.hader-emp-actions{ display:flex; gap:8px; flex-wrap:wrap; }

.hader-avatar,.hader-avatar-mini{ display:inline-grid; place-items:center; background:linear-gradient(135deg,#0F4D96,#00AEEF); color:#fff; font-weight:1000; }
.hader-avatar{ width:48px; height:48px; border-radius:16px; font-size:20px; }
.hader-avatar-mini{ width:30px; height:30px; border-radius:10px; }

.hader-modal-note{ background:#f0f8ff; border:1px solid #cfe4fa; color:#0F4D96; border-radius:14px; padding:10px 12px; font-weight:800; margin-bottom:12px; }
.hader-settings-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; }
.hader-policy{ padding:18px; }

@media (max-width:700px){
  .hader-hero-actions{ width:100%; }
  .hader-employee-grid{ grid-template-columns:1fr; }
  .hader-settings-grid{ grid-template-columns:1fr; }
}