/* ============================================================================
   MGIoT — Redesign 2027 · PILOT (Overview + shared shell)
   Approved direction: "Light & Minimal" — white sidebar, glassy topbar, airy
   canvas, hairline cards, blue as a precise accent.
   Loads LAST so it wins over the legacy stack. Shell rules are global (shared
   frame); Overview content is scoped to #viewOverview so other pages are
   untouched until rollout.  Does NOT change the accordion collapse logic.
   ========================================================================== */

:root{
  --r27-brand:#0F4D96; --r27-brand-600:#0B3E78; --r27-accent:#2563EB;
  --r27-canvas:#FBFCFE; --r27-surface:#FFFFFF; --r27-surface-2:#F7F9FC;
  --r27-line:#ECEFF4; --r27-line-2:#E3E8F0;
  --r27-ink:#111726; --r27-ink-mid:#3C475A; --r27-ink-soft:#6B7686; --r27-ink-faint:#9BA6B5;
  --r27-green:#15A34A; --r27-green-bg:#EAF8F0; --r27-amber:#C77A06; --r27-amber-bg:#FBF1E0;
  --r27-red:#DC2626; --r27-red-bg:#FCEDED; --r27-cyan:#0E8FAE; --r27-cyan-bg:#E4F5F9; --r27-violet:#6D40D6; --r27-violet-bg:#F0EBFB;
  --r27-r:14px; --r27-r-lg:18px; --r27-pill:999px;
  --r27-sh:0 1px 2px rgba(17,23,38,.04);
  --r27-sh-md:0 8px 24px -16px rgba(17,23,38,.22);
  --r27-ease:220ms cubic-bezier(.2,.7,.2,1);
}

/* ── Canvas ──────────────────────────────────────────────────────────── */
.app-page .main{ background:var(--r27-canvas) !important; }

/* ════════════════════════════════════════════════════════════════════════
   SIDEBAR (clean white)
   ═══════════════════════════════════════════════════════════════════════ */
.app-page .sidebar{
  background:var(--r27-surface) !important;
  border-inline-start:1px solid var(--r27-line) !important;
  box-shadow:none !important;
}
.app-page .sidebar-header{
  display:flex; align-items:center; gap:11px;
  padding:8px 10px 14px !important; border-bottom:1px solid var(--r27-line) !important;
  margin-bottom:10px; background:transparent !important;
}
.app-page .sidebar-logo-box{
  width:44px; height:44px; border-radius:12px;
  background:#fff !important; border:1px solid var(--r27-line) !important;
  display:grid; place-items:center; padding:5px !important; box-shadow:var(--r27-sh);
}
.app-page .sidebar-logo-box img{ width:100%; height:100%; object-fit:contain; filter:none !important; }
.app-page .sidebar-header h2{ font-size:15px; font-weight:800; color:var(--r27-ink) !important; margin:0; }
.app-page .sidebar-header #sidebarUser{ font-size:10.5px; color:var(--r27-ink-faint) !important; margin:1px 0 0; }

.app-page .sidebar-nav{ padding:6px 10px 90px !important; }

/* "لوحة التحكم" top item = filled brand button with leading icon tile */
.app-page .sidebar .nav-top-item{
  display:flex; align-items:center; gap:11px;
  padding:9px 11px !important; border-radius:12px !important;
  background:linear-gradient(135deg,var(--r27-brand),#2D6FC4) !important; color:#fff !important;
  font-weight:800 !important; font-size:13.5px !important; margin:0 6px 10px !important;
  border:0 !important; box-shadow:0 10px 20px -12px rgba(15,77,150,.9);
  transition:filter var(--r27-ease) !important;
}
.app-page .sidebar .nav-top-item:hover{ filter:brightness(1.06); color:#fff !important; }
.app-page .sidebar .nav-top-item .section-icon{
  width:30px !important; height:30px !important; flex:0 0 30px; border-radius:9px;
  display:grid; place-items:center; background:rgba(255,255,255,.18) !important; color:#fff !important; font-size:15px;
}
.app-page .sidebar .nav-top-item.active{ background:linear-gradient(135deg,var(--r27-brand-600),#1E5BA8) !important; color:#fff !important; }

/* Section header = quiet uppercase label with a tiny leading marker */
.app-page .sidebar .nav-section{ margin:6px 0 2px !important; }
.app-page .sidebar .nav-section-hdr{
  display:flex !important; align-items:center; gap:9px;
  height:auto !important; padding:10px 12px 6px !important;
  background:transparent !important; border:0 !important;
  font-size:10.5px !important; font-weight:800 !important; letter-spacing:.07em;
  text-transform:uppercase; color:var(--r27-ink-faint) !important; cursor:pointer;
  transition:color var(--r27-ease);
}
.app-page .sidebar .nav-section-hdr:hover{ color:var(--r27-ink-soft) !important; }
.app-page .sidebar .nav-section-hdr .section-icon{ font-size:12px; color:var(--r27-ink-faint) !important; width:auto !important; height:auto !important; }
.app-page .sidebar .nav-section-hdr .section-label{ flex:1; color:var(--r27-ink-faint) !important; }
.app-page .sidebar .nav-section-hdr .section-arrow{ font-size:9px; color:var(--r27-ink-faint) !important; opacity:.6; transition:transform var(--r27-ease); }
/* OPEN/expanded section header — legacy dark-theme made this near-white.
   Force readable colors (higher specificity than mgiot-theme-2026). */
.app-page .sidebar .nav-section:not(.collapsed) > .nav-section-hdr,
.app-page .sidebar .nav-section:not(.collapsed) > .nav-section-hdr .section-label{
  color:var(--r27-ink-soft) !important; background:transparent !important;
}
.app-page .sidebar .nav-section:not(.collapsed) > .nav-section-hdr .section-icon,
.app-page .sidebar .nav-section:not(.collapsed) > .nav-section-hdr .section-arrow{
  color:var(--r27-ink-faint) !important; background:transparent !important;
}

/* body container — keep collapse behavior, clean spacing */
.app-page .sidebar .nav-section-body{
  border:0 !important; background:transparent !important; padding:0 !important;
  display:flex; flex-direction:column; gap:2px;
}

/* ── Nav items: leading icon TILE, label, trailing badge (reordered in CSS) ── */
.app-page .sidebar .nav-item{
  display:flex !important; align-items:center; gap:10px;
  padding:7px 10px !important; border-radius:11px !important; margin:0 !important;
  font-size:13px !important; font-weight:600 !important;
  color:var(--r27-ink-mid) !important; background:transparent !important;
  position:relative;
  transition:background var(--r27-ease), color var(--r27-ease) !important;
}
/* the emoji icon → a soft leading tile */
.app-page .sidebar .nav-item .nav-item-icon{
  order:-1 !important; margin:0 !important;
  width:30px !important; height:30px !important; flex:0 0 30px;
  display:grid; place-items:center; border-radius:9px;
  background:var(--r27-surface-2) !important; color:var(--r27-ink-soft) !important;
  font-size:15px !important; line-height:1; opacity:1 !important;
  transition:background var(--r27-ease), color var(--r27-ease);
}
/* the label takes the middle, ellipsis if long */
.app-page .sidebar .nav-item > span:not(.sidebar-badge):not(.nav-item-icon),
.app-page .sidebar .nav-item .nav-text{
  flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* trailing count badge */
.app-page .sidebar .nav-item .sidebar-badge{
  order:2; margin:0 !important; background:var(--r27-red) !important; color:#fff !important;
  font-size:10px; font-weight:800; border-radius:999px; padding:1px 7px; min-width:18px; text-align:center;
}

.app-page .sidebar .nav-item:hover{
  background:var(--r27-surface-2) !important; color:var(--r27-ink) !important;
}
.app-page .sidebar .nav-item:hover .nav-item-icon{ background:#E5EBF3 !important; color:var(--r27-ink-mid) !important; }
.app-page .sidebar .nav-item:hover > span{ color:var(--r27-ink) !important; }

.app-page .sidebar .nav-item.active{
  background:#EAF1FC !important; color:var(--r27-brand) !important; font-weight:800 !important;
}
/* Keep the SELECTED item's label readable (brand blue on the light pill).
   Higher specificity than the legacy redesign-system rule that forced white. */
.app-page .sidebar .nav-item.active,
.app-page .sidebar .nav-item.active .nav-text,
.app-page .sidebar .nav-item.active > span:not(.nav-item-icon):not(.sidebar-badge){
  color:var(--r27-brand) !important;
}
.app-page .sidebar .nav-item.active .nav-item-icon{
  background:linear-gradient(135deg,var(--r27-brand),#2D6FC4) !important; color:#fff !important;
  box-shadow:0 6px 14px -8px rgba(15,77,150,.8);
}

/* SVG nav icons sit crisply inside the tiles */
.app-page .sidebar .nav-item .nav-item-icon svg{ width:18px; height:18px; }
.app-page .sidebar .nav-top-item .section-icon svg{ width:18px; height:18px; }
.app-page .sidebar .nav-section-hdr .section-icon svg{ width:14px; height:14px; vertical-align:middle; }

/* Sidebar custom scrollbar */
.app-page .sidebar-nav{ scrollbar-width:thin; scrollbar-color:#D7DEE8 transparent; }
.app-page .sidebar-nav::-webkit-scrollbar{ width:7px; }
.app-page .sidebar-nav::-webkit-scrollbar-thumb{ background:#DCE3EC; border-radius:999px; }
.app-page .sidebar-nav::-webkit-scrollbar-thumb:hover{ background:#C7D1DE; }

/* ════════════════════════════════════════════════════════════════════════
   TOPBAR (glassy white)
   ═══════════════════════════════════════════════════════════════════════ */
.app-page .main .main-header{
  background:rgba(251,252,254,.85) !important; backdrop-filter:blur(8px);
  border-bottom:1px solid var(--r27-line) !important; box-shadow:none !important;
  padding:14px 30px !important; gap:14px;
}
.app-page .main .main-header #viewTitle{
  font-size:19px !important; font-weight:800 !important; letter-spacing:-.01em; color:var(--r27-ink) !important; margin:0;
}
.app-page .main .main-header #viewDesc{
  font-size:12px !important; color:var(--r27-ink-faint) !important; margin:2px 0 0;
}
.app-page .main .topbar-actions .topbar-btn,
.app-page .main .main-header .topbar-btn{
  border:1px solid var(--r27-line-2) !important; background:#fff !important;
  color:var(--r27-ink-mid) !important; border-radius:11px !important; font-weight:700 !important;
  padding:8px 14px !important; transition:background var(--r27-ease), border-color var(--r27-ease) !important;
}
.app-page .main .main-header .topbar-btn:hover{ background:var(--r27-surface-2) !important; }
.app-page .main .sidebar-toggle{
  border:1px solid var(--r27-line-2) !important; background:#fff !important; border-radius:11px !important;
  color:var(--r27-ink-mid) !important;
}

/* ════════════════════════════════════════════════════════════════════════
   OVERVIEW CONTENT  (scoped to #viewOverview)
   ═══════════════════════════════════════════════════════════════════════ */
#viewOverview .mg-page{ gap:24px !important; }

/* Hero — light welcome card with accent stripe */
#viewOverview .ov-welcome{
  position:relative; overflow:hidden;
  display:flex; align-items:center; gap:18px;
  background:var(--r27-surface) !important;
  border:1px solid var(--r27-line) !important; border-radius:var(--r27-r-lg) !important;
  padding:22px 26px !important; box-shadow:var(--r27-sh) !important;
  color:var(--r27-ink) !important;
}
#viewOverview .ov-welcome::before{
  content:""; position:absolute; inset-inline-start:0; top:0; bottom:0; width:4px;
  background:linear-gradient(180deg,var(--r27-accent),var(--r27-brand));
}
#viewOverview .ov-welcome-text h1{
  font-size:20px !important; font-weight:800 !important; color:var(--r27-ink) !important; margin:0;
}
#viewOverview .ov-welcome-text p{
  font-size:13px !important; color:var(--r27-ink-soft) !important; margin:5px 0 0; max-width:560px;
}
#viewOverview .ov-welcome-actions{ margin-inline-start:auto; display:flex; gap:10px; }
#viewOverview .ov-cta{
  background:var(--r27-brand) !important; color:#fff !important; border:0 !important;
  border-radius:10px !important; font-weight:700 !important; padding:10px 16px !important;
  box-shadow:0 8px 18px -10px rgba(15,77,150,.8); transition:transform var(--r27-ease), background var(--r27-ease) !important;
}
#viewOverview .ov-cta:hover{ background:var(--r27-brand-600) !important; transform:translateY(-1px); }
#viewOverview .ov-ghost{
  background:var(--r27-surface-2) !important; color:var(--r27-ink-mid) !important;
  border:1px solid var(--r27-line-2) !important; border-radius:10px !important; font-weight:700 !important; padding:10px 16px !important;
}
#viewOverview .ov-ghost:hover{ background:#fff !important; }

/* KPI tiles — flat with thin colored top accent */
#viewOverview .mg-stat-grid{ gap:14px !important; }
#viewOverview .mg-stat{
  position:relative; overflow:hidden;
  background:var(--r27-surface) !important; border:1px solid var(--r27-line) !important;
  border-radius:var(--r27-r) !important; padding:18px !important;
  box-shadow:var(--r27-sh) !important; transition:transform var(--r27-ease), box-shadow var(--r27-ease) !important;
}
#viewOverview .mg-stat:hover{ transform:translateY(-2px); box-shadow:var(--r27-sh-md) !important; }
#viewOverview .mg-stat::before{
  content:""; position:absolute !important; top:0 !important; inset-inline:0 !important;
  left:0 !important; right:0 !important; bottom:auto !important;
  width:auto !important; height:3px !important; border-radius:0 !important;
  background:var(--r27-accent) !important;
}
#viewOverview .mg-stat--success::before{ background:var(--r27-green) !important; }
#viewOverview .mg-stat--warn::before{ background:var(--r27-amber) !important; }
#viewOverview .mg-stat--danger::before{ background:var(--r27-red) !important; }
#viewOverview .mg-stat--info::before{ background:var(--r27-accent) !important; }
#viewOverview .mg-stat-ic{
  width:38px !important; height:38px !important; border-radius:11px !important;
  background:#EAF1FC !important; color:var(--r27-accent) !important;
}
#viewOverview .mg-stat--success .mg-stat-ic{ background:var(--r27-green-bg) !important; color:var(--r27-green) !important; }
#viewOverview .mg-stat--warn .mg-stat-ic{ background:var(--r27-amber-bg) !important; color:var(--r27-amber) !important; }
#viewOverview .mg-stat--danger .mg-stat-ic{ background:var(--r27-red-bg) !important; color:var(--r27-red) !important; }
#viewOverview .mg-stat-ic svg{ width:19px !important; height:19px !important; }
#viewOverview .mg-stat-value{
  font-size:27px !important; font-weight:800 !important; letter-spacing:-.02em !important;
  color:var(--r27-ink) !important; margin-top:14px !important;
}
#viewOverview .mg-stat--success .mg-stat-value,
#viewOverview .mg-stat--warn .mg-stat-value,
#viewOverview .mg-stat--danger .mg-stat-value,
#viewOverview .mg-stat--info .mg-stat-value{ color:var(--r27-ink) !important; }
#viewOverview .mg-stat-label{ font-size:12.5px !important; font-weight:600 !important; color:var(--r27-ink-soft) !important; }
#viewOverview .mg-stat-sub{ font-size:11px !important; color:var(--r27-ink-faint) !important; margin-top:9px !important; }

/* Panels (analytics + recent) */
#viewOverview .ov-panel{
  background:var(--r27-surface) !important; border:1px solid var(--r27-line) !important;
  border-radius:var(--r27-r) !important; padding:20px !important; box-shadow:var(--r27-sh) !important;
}
#viewOverview .ov-analytics{ gap:14px !important; }
#viewOverview .ov-panel-head{ margin-bottom:14px !important; }
#viewOverview .ov-panel-strip{
  width:4px !important; height:30px !important; border-radius:4px !important;
  background:linear-gradient(180deg,var(--r27-accent),var(--r27-brand)) !important;
}
#viewOverview .ov-panel-title{ font-size:15px !important; font-weight:800 !important; color:var(--r27-ink) !important; }
#viewOverview .ov-panel-sub{ font-size:11.5px !important; color:var(--r27-ink-faint) !important; }
#viewOverview .ov-legend{ font-size:12px !important; color:var(--r27-ink-soft) !important; font-weight:600; }

/* Quick cards */
#viewOverview .ov-quick{ gap:14px !important; }
#viewOverview .ov-quick-card{
  background:var(--r27-surface) !important; border:1px solid var(--r27-line) !important;
  border-radius:var(--r27-r) !important; padding:15px 18px !important; box-shadow:var(--r27-sh) !important;
  transition:transform var(--r27-ease), box-shadow var(--r27-ease) !important;
}
#viewOverview .ov-quick-card:hover{ transform:translateY(-2px); box-shadow:var(--r27-sh-md) !important; }
#viewOverview .ov-quick-ic{ width:44px !important; height:44px !important; border-radius:12px !important; }
#viewOverview .ov-quick-ic.q-amber{ background:var(--r27-amber-bg) !important; color:var(--r27-amber) !important; }
#viewOverview .ov-quick-ic.q-blue{ background:#EAF1FC !important; color:var(--r27-accent) !important; }
#viewOverview .ov-quick-ic.q-green{ background:var(--r27-green-bg) !important; color:var(--r27-green) !important; }
#viewOverview .ov-quick-ic.q-cyan{ background:var(--r27-cyan-bg) !important; color:var(--r27-cyan) !important; }
#viewOverview .ov-quick-v{ font-size:20px !important; font-weight:800 !important; color:var(--r27-ink) !important; }
#viewOverview .ov-quick-l{ font-size:12px !important; color:var(--r27-ink-soft) !important; }

/* Buttons inside overview panels */
#viewOverview .mg-btn{
  border:1px solid var(--r27-line-2) !important; background:var(--r27-surface-2) !important;
  color:var(--r27-ink-mid) !important; border-radius:10px !important; font-weight:700 !important;
  transition:background var(--r27-ease), transform var(--r27-ease) !important;
}
#viewOverview .mg-btn:hover{ background:#fff !important; transform:translateY(-1px); }

/* ════════════════════════════════════════════════════════════════════════
   GLOBAL ROLLOUT — applies the Light & Minimal system to ALL pages.
   Scoped under `.app-page .main` so it never touches the login screen.
   Warehouse pages keep their own ID-scoped "silky" styles (same family).
   ═══════════════════════════════════════════════════════════════════════ */

/* Page rhythm */
.app-page .main .mg-page{ gap:22px !important; }

/* Cards */
.app-page .main .mg-card{
  background:var(--r27-surface) !important;
  border:1px solid var(--r27-line) !important;
  border-radius:var(--r27-r) !important;
  box-shadow:var(--r27-sh) !important;
  padding:22px !important;
}
.app-page .main .mg-card-head{ gap:14px !important; }
.app-page .main .mg-card-title,
.app-page .main .mg-pagehead-title,
.app-page .main .mg-head-text h2{
  font-size:16px !important; font-weight:800 !important; letter-spacing:-.01em; color:var(--r27-ink) !important;
}
.app-page .main .mg-card-subtitle{ color:var(--r27-ink-faint) !important; font-size:12px !important; }
/* Header accent = a clean small vertical bar; never a circle/box.
   Also kill any stray chip border/background some legacy sheets paint on the
   title/subtitle so page headers always read clean. */
.app-page .main .mg-strip{
  width:4px !important; height:28px !important; min-height:28px !important;
  border-radius:var(--r27-pill) !important; align-self:center !important; flex-shrink:0 !important;
  background:linear-gradient(180deg,var(--r27-accent),var(--r27-brand)) !important;
}
.app-page .main .mg-card-title-wrap,
.app-page .main .mg-card-title-wrap > div,
.app-page .main .mg-head-text,
.app-page .main .mg-card-title,
.app-page .main .mg-card-subtitle{
  border:0 !important; outline:0 !important; background:none !important; box-shadow:none !important;
}

/* ════════════════════════════════════════════════════════════════════════
   GLOBAL "boxed text" FIX
   mgiot-professional-style.css applies border+bg+shadow to [class*="card"],
   which wrongly matches card SUB-PARTS (mg-card-title, req-card-line,
   mg-row-card-sub, req-card-type, …) and draws a box around the text.
   This flattens those sub-parts (anything with "card-" in the class) while
   leaving real card containers (mg-card, req-card, inst-card, …) intact.
   Extra :not()s raise specificity above the offending rule.
   ═══════════════════════════════════════════════════════════════════════ */
.app-page .main [class*="card-"]:not(.mg-card):not(.mg-stat):not(.req-card-note):not(.hader-emp-card){
  border:0 !important; background:none !important; box-shadow:none !important;
}

/* ── Shared clean page/card header (rx-head) — used by redesigned pages ─── */
.app-page .main .rx-head{
  display:flex; align-items:center; gap:14px;
  padding-bottom:16px; margin-bottom:2px; border-bottom:1px solid var(--r27-line);
}
.app-page .main .rx-head-text{ display:flex; align-items:center; gap:11px; flex:1; min-width:0; }
.app-page .main .rx-accent{
  width:4px; height:30px; border-radius:999px; flex-shrink:0;
  background:linear-gradient(180deg,var(--r27-accent),var(--r27-brand));
}
.app-page .main .rx-title{
  margin:0; font-size:16px; font-weight:800; letter-spacing:-.01em; color:var(--r27-ink);
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.app-page .main .rx-sub{ margin:2px 0 0; font-size:12px; color:var(--r27-ink-faint); }
.app-page .main .rx-head-actions{ margin-inline-start:auto; display:flex; gap:8px; flex-wrap:wrap; }
/* When rx-head is the whole header card (mg-pagehead), drop the inner divider.
   Make the header card a stacking layer ABOVE the cards below it and allow its
   dropdown menu to overflow, so the "Create Agreement" menu floats over content
   instead of being clipped or hidden behind the cards. */
.app-page .main .mg-pagehead{
  padding:18px 22px !important; overflow:visible !important;
  position:relative !important; z-index:60 !important;
}
.app-page .main .mg-pagehead .rx-head{ border-bottom:0; padding-bottom:0; margin-bottom:0; }

/* The dropdown itself: clean style + high z-index within the header layer */
#agrCreateMenuBox{
  z-index:3000 !important;
  border:1px solid var(--r27-line) !important; border-radius:12px !important;
  box-shadow:0 20px 44px -16px rgba(17,23,38,.32) !important; padding:6px !important;
}
#agrCreateMenuBox .mg-btn{ border:0 !important; border-radius:9px !important; }
#agrCreateMenuBox .mg-btn:hover{ background:var(--r27-surface-2) !important; }

/* ── Reusable rich bits (avatars, chips, status pills, entity cells) ───── */
.app-page .main .rx-avatar{
  width:34px; height:34px; border-radius:10px; flex-shrink:0;
  display:grid; place-items:center; color:#fff; font-weight:800; font-size:14px;
  background:linear-gradient(135deg,var(--r27-brand),#2D6FC4);
  box-shadow:0 6px 14px -8px rgba(15,77,150,.7);
}
.app-page .main .rx-avatar--lg{ width:46px; height:46px; border-radius:14px; font-size:20px; }
.app-page .main .rx-avatar--soft{ background:#EAF1FC; color:var(--r27-accent); box-shadow:none; }
.app-page .main .rx-cell-entity{ display:flex; align-items:center; gap:10px; }
.app-page .main .rx-chip{
  display:inline-block; background:var(--r27-surface-2); border:1px solid var(--r27-line);
  border-radius:var(--r27-pill); padding:2px 10px; font-size:11.5px; font-weight:700; color:var(--r27-ink-mid);
}
.app-page .main .rx-pill{ display:inline-block; border-radius:var(--r27-pill); padding:2px 10px; font-size:11.5px; font-weight:800; }
.app-page .main .rx-pill--blue{ background:#EAF1FC; color:var(--r27-accent); }
.app-page .main .rx-pill--violet{ background:var(--r27-violet-bg); color:var(--r27-violet); }
.app-page .main .rx-pill--green{ background:var(--r27-green-bg); color:var(--r27-green); }
.app-page .main .rx-pill--amber{ background:var(--r27-amber-bg); color:var(--r27-amber); }
.app-page .main .rx-pill--red{ background:var(--r27-red-bg); color:var(--r27-red); }
.app-page .main .rx-pill--mut{ background:var(--r27-surface-2); color:var(--r27-ink-faint); border:1px solid var(--r27-line); }
.app-page .main .rx-money{ font-weight:800; color:var(--r27-ink); font-variant-numeric:tabular-nums; white-space:nowrap; }

/* Stat tiles (all pages) — flat with thin colored top accent */
.app-page .main .mg-stat-grid{ gap:14px !important; }
.app-page .main .mg-stat{
  position:relative; overflow:hidden;
  background:var(--r27-surface) !important; border:1px solid var(--r27-line) !important;
  border-radius:var(--r27-r) !important; padding:18px !important;
  box-shadow:var(--r27-sh) !important; transition:transform var(--r27-ease), box-shadow var(--r27-ease) !important;
}
.app-page .main .mg-stat:hover{ transform:translateY(-2px); box-shadow:var(--r27-sh-md) !important; }
.app-page .main .mg-stat::before{
  content:""; position:absolute !important; top:0 !important; bottom:auto !important;
  left:0 !important; right:0 !important; inset-inline:0 !important;
  width:auto !important; height:3px !important; border-radius:0 !important;
  background:var(--r27-accent) !important;
}
.app-page .main .mg-stat--success::before{ background:var(--r27-green) !important; }
.app-page .main .mg-stat--warn::before{ background:var(--r27-amber) !important; }
.app-page .main .mg-stat--danger::before{ background:var(--r27-red) !important; }
.app-page .main .mg-stat--info::before{ background:var(--r27-accent) !important; }
.app-page .main .mg-stat--primary::before{ background:var(--r27-accent) !important; }
.app-page .main .mg-stat--bad::before{ background:var(--r27-red) !important; }
.app-page .main .mg-stat-value{ font-size:25px !important; font-weight:800 !important; letter-spacing:-.02em !important; color:var(--r27-ink) !important; }
.app-page .main .mg-stat--success .mg-stat-value,
.app-page .main .mg-stat--warn .mg-stat-value,
.app-page .main .mg-stat--danger .mg-stat-value,
.app-page .main .mg-stat--info .mg-stat-value{ color:var(--r27-ink) !important; }
.app-page .main .mg-stat-label{ font-size:12px !important; font-weight:600 !important; color:var(--r27-ink-soft) !important; text-transform:none !important; letter-spacing:0 !important; }
.app-page .main .mg-stat-ic{ width:38px !important; height:38px !important; border-radius:11px !important; background:#EAF1FC !important; color:var(--r27-accent) !important; }
.app-page .main .mg-stat--success .mg-stat-ic{ background:var(--r27-green-bg) !important; color:var(--r27-green) !important; }
.app-page .main .mg-stat--warn .mg-stat-ic{ background:var(--r27-amber-bg) !important; color:var(--r27-amber) !important; }
.app-page .main .mg-stat--danger .mg-stat-ic{ background:var(--r27-red-bg) !important; color:var(--r27-red) !important; }

/* Buttons */
.app-page .main .mg-btn{
  border:1px solid var(--r27-line-2) !important; background:var(--r27-surface) !important;
  color:var(--r27-ink-mid) !important; border-radius:10px !important; font-weight:700 !important;
  padding:9px 14px !important; transition:background var(--r27-ease), border-color var(--r27-ease), transform var(--r27-ease) !important;
}
.app-page .main .mg-btn:hover{ background:var(--r27-surface-2) !important; border-color:#D7DEE8 !important; transform:translateY(-1px); }
.app-page .main .mg-btn--primary{
  background:var(--r27-brand) !important; border-color:var(--r27-brand) !important; color:#fff !important;
  box-shadow:0 8px 18px -10px rgba(15,77,150,.8) !important;
}
.app-page .main .mg-btn--primary:hover{ background:var(--r27-brand-600) !important; border-color:var(--r27-brand-600) !important; }
.app-page .main .mg-btn--danger{ background:var(--r27-red-bg) !important; border-color:#F3C9C9 !important; color:var(--r27-red) !important; }
.app-page .main .mg-btn--sm{ padding:6px 11px !important; font-size:12px !important; }

/* Toolbar / search / selects / inputs */
.app-page .main .mg-toolbar{ gap:12px !important; }
.app-page .main .mg-search{
  border:1px solid var(--r27-line-2) !important; border-radius:11px !important; background:var(--r27-surface) !important;
  transition:border-color var(--r27-ease), box-shadow var(--r27-ease) !important;
}
.app-page .main .mg-search:focus-within{ border-color:var(--r27-brand) !important; box-shadow:0 0 0 4px rgba(15,77,150,.10) !important; }
.app-page .main .mg-select,
.app-page .main .mg-input{
  border:1px solid var(--r27-line-2) !important; border-radius:11px !important; background:#fff !important;
  color:var(--r27-ink-mid) !important; transition:border-color var(--r27-ease), box-shadow var(--r27-ease) !important;
}
.app-page .main .mg-select:focus,
.app-page .main .mg-input:focus{ border-color:var(--r27-brand) !important; box-shadow:0 0 0 4px rgba(15,77,150,.10) !important; outline:none !important; }
.app-page .main .mg-field-label{ font-size:12px !important; font-weight:700 !important; color:var(--r27-ink-mid) !important; }
.app-page .main .mg-result-count{ color:var(--r27-ink-faint) !important; font-size:12px !important; font-weight:700 !important; }

/* Tables — airy, hairline */
.app-page .main .mg-table-wrap{
  background:var(--r27-surface) !important; border:1px solid var(--r27-line) !important;
  border-radius:var(--r27-r) !important; box-shadow:var(--r27-sh) !important; overflow:hidden;
}
.app-page .main .mg-table{ border-collapse:separate !important; border-spacing:0 !important; }
.app-page .main .mg-table thead th{
  background:var(--r27-surface-2) !important; color:var(--r27-ink-faint) !important;
  font-size:11px !important; font-weight:800 !important; letter-spacing:.03em; text-transform:uppercase;
  padding:12px 16px !important; border-bottom:1px solid var(--r27-line) !important;
}
.app-page .main .mg-table tbody td{ padding:12px 16px !important; border-bottom:1px solid var(--r27-line) !important; font-size:13px !important; }
.app-page .main .mg-table tbody tr{ transition:background var(--r27-ease) !important; }
.app-page .main .mg-table tbody tr:hover{ background:var(--r27-surface-2) !important; }
.app-page .main .mg-table tbody tr:last-child td{ border-bottom:0 !important; }

/* Badges */
.app-page .main .mg-badge{ border-radius:var(--r27-pill) !important; font-weight:800 !important; font-size:11px !important; padding:3px 10px !important; }

/* Row cards + info boxes */
.app-page .main .mg-row-card{
  background:var(--r27-surface) !important; border:1px solid var(--r27-line) !important;
  border-radius:var(--r27-r) !important; box-shadow:var(--r27-sh) !important; padding:18px !important;
  transition:transform var(--r27-ease), box-shadow var(--r27-ease) !important;
}
.app-page .main .mg-row-card:hover{ transform:translateY(-2px); box-shadow:var(--r27-sh-md) !important; }
.app-page .main .mg-row-card-title{ font-size:15px !important; font-weight:800 !important; color:var(--r27-ink) !important; }
.app-page .main .mg-row-card-sub{ font-size:12px !important; color:var(--r27-ink-faint) !important; }
/* Kill any stray chip border/background some legacy sheet paints on row-card text */
.app-page .main .mg-row-card-head > div,
.app-page .main .mg-row-card-title,
.app-page .main .mg-row-card-sub,
#viewProducts .mg-row-card-head > div,
#viewProducts .mg-row-card-title,
#viewProducts .mg-row-card-sub{
  border:0 !important; outline:0 !important; background:none !important; box-shadow:none !important; padding:0 !important;
}
.app-page .main .mg-info-box{
  background:var(--r27-surface-2) !important; border:1px solid var(--r27-line) !important; border-radius:11px !important; padding:11px 13px !important;
}
.app-page .main .mg-info-label{ font-size:11px !important; font-weight:700 !important; color:var(--r27-ink-faint) !important; }
.app-page .main .mg-info-value{ font-size:13px !important; font-weight:700 !important; color:var(--r27-ink) !important; }

/* Empty / loading */
.app-page .main .mg-empty{ padding:52px 24px !important; }
.app-page .main .mg-empty-title{ font-weight:800 !important; color:var(--r27-ink) !important; }
.app-page .main .mg-empty-text{ color:var(--r27-ink-faint) !important; }

/* ── Installations cards (custom markup, ID-scoped) ──────────────────── */
#viewInstallations .inst-card{
  background:var(--r27-surface) !important; border:1px solid var(--r27-line) !important;
  border-radius:var(--r27-r) !important; box-shadow:var(--r27-sh) !important; padding:18px !important;
  transition:transform var(--r27-ease), box-shadow var(--r27-ease), border-color var(--r27-ease) !important;
}
#viewInstallations .inst-card:hover{ transform:translateY(-3px); box-shadow:var(--r27-sh-md) !important; border-color:#DCE6F3 !important; }
#viewInstallations .inst-customer{ font-size:15px !important; font-weight:800 !important; color:var(--r27-ink) !important; }
#viewInstallations .inst-subline{ font-size:12px !important; color:var(--r27-ink-faint) !important; }
#viewInstallations .inst-subline strong{ color:var(--r27-ink-mid) !important; font-weight:800 !important; }
#viewInstallations .inst-detail-label{ color:var(--r27-ink-faint) !important; font-weight:700 !important; }
#viewInstallations .inst-detail-val{ color:var(--r27-ink-mid) !important; font-weight:600 !important; }
#viewInstallations .inst-actions{ border-top:1px solid var(--r27-line) !important; padding-top:10px !important; }
#viewInstallations .inst-btn{
  border:1px solid var(--r27-line-2) !important; background:var(--r27-surface) !important; color:var(--r27-ink-mid) !important;
  border-radius:9px !important; font-weight:700 !important; transition:background var(--r27-ease), transform var(--r27-ease) !important;
}
#viewInstallations .inst-btn:hover{ background:var(--r27-surface-2) !important; transform:translateY(-1px); }
#viewInstallations .inst-btn--success{ background:var(--r27-green-bg) !important; border-color:#BDE9CE !important; color:var(--r27-green) !important; }
#viewInstallations .inst-btn--danger{ background:var(--r27-red-bg) !important; border-color:#F3C9C9 !important; color:var(--r27-red) !important; }

/* ── Modals app-wide (render at body level — not under .app-page) ─────── */
.mg-modal-overlay{ background:rgba(17,23,38,.5) !important; backdrop-filter:blur(3px); }
.mg-modal{ border-radius:18px !important; box-shadow:0 30px 70px -24px rgba(17,23,38,.45) !important; border:1px solid var(--r27-line) !important; }
.mg-modal-head{ padding:18px 22px !important; border-bottom:1px solid var(--r27-line) !important; background:linear-gradient(180deg,#FAFCFE,#fff) !important; }
.mg-modal-title{ font-size:16px !important; font-weight:800 !important; color:var(--r27-brand) !important; }
.mg-modal-x{ border-radius:10px !important; }
.mg-modal-foot{ background:var(--r27-surface-2) !important; border-top:1px solid var(--r27-line) !important; padding:14px 22px !important; }
.mg-modal-foot .mg-btn{
  border:1px solid var(--r27-line-2) !important; background:#fff !important; color:var(--r27-ink-mid) !important;
  border-radius:10px !important; font-weight:800 !important;
}
.mg-modal-foot .mg-btn--primary{ background:var(--r27-brand) !important; border-color:var(--r27-brand) !important; color:#fff !important; }
.mg-modal-body .mg-input,
.mg-modal-body select,
.mg-modal-body input[type="text"],
.mg-modal-body input[type="number"]{
  border:1px solid var(--r27-line-2) !important; border-radius:10px !important;
}

/* ════════════════════════════════════════════════════════════════════════
   BESPOKE WIDGETS — legacy buttons + legacy modal system + agreements
   (finance, collections, custody, reports, agreements)
   ═══════════════════════════════════════════════════════════════════════ */

/* Legacy .btn family (page content) */
.app-page .main .btn{
  border:1px solid var(--r27-line-2) !important; background:var(--r27-surface) !important;
  color:var(--r27-ink-mid) !important; border-radius:10px !important; font-weight:700 !important;
  padding:9px 14px !important; transition:background var(--r27-ease), border-color var(--r27-ease), transform var(--r27-ease) !important;
}
.app-page .main .btn:hover{ background:var(--r27-surface-2) !important; border-color:#D7DEE8 !important; transform:translateY(-1px); }
.app-page .main .btn-sm{ padding:6px 11px !important; font-size:12px !important; border-radius:9px !important; }
.app-page .main .btn-primary{ background:var(--r27-brand) !important; border-color:var(--r27-brand) !important; color:#fff !important; box-shadow:0 8px 18px -10px rgba(15,77,150,.8) !important; }
.app-page .main .btn-primary:hover{ background:var(--r27-brand-600) !important; border-color:var(--r27-brand-600) !important; }
.app-page .main .btn-secondary{ background:var(--r27-surface-2) !important; border-color:var(--r27-line-2) !important; color:var(--r27-ink-mid) !important; }
.app-page .main .btn-success{ background:var(--r27-green-bg) !important; border-color:#BDE9CE !important; color:var(--r27-green) !important; }
.app-page .main .btn-danger{ background:var(--r27-red-bg) !important; border-color:#F3C9C9 !important; color:var(--r27-red) !important; }
.app-page .main .btn-warning{ background:var(--r27-amber-bg) !important; border-color:#F4DDB0 !important; color:var(--r27-amber) !important; }

/* Legacy modal system (renders at <body> level) */
.modal-bg{ background:rgba(17,23,38,.5) !important; backdrop-filter:blur(3px) !important; }
.modal-card{
  border:1px solid var(--r27-line) !important; border-radius:18px !important;
  box-shadow:0 30px 70px -24px rgba(17,23,38,.45) !important; padding:0 !important; overflow:hidden !important;
}
.modal-hd{
  padding:18px 22px !important; border-bottom:1px solid var(--r27-line) !important;
  background:linear-gradient(180deg,#FAFCFE,#fff) !important; margin:0 !important;
}
.modal-hd h2, .modal-hd h3{ font-size:16px !important; font-weight:800 !important; color:var(--r27-brand) !important; margin:0 !important; }
.modal-x{ border-radius:10px !important; transition:background var(--r27-ease) !important; }
.modal-x:hover{ background:var(--r27-surface-2) !important; }
.modal-body{ padding:20px 22px !important; }
.modal-lbl{ font-size:12px !important; font-weight:800 !important; color:var(--r27-ink-mid) !important; margin-bottom:6px !important; }
.modal-card .login-error{ color:var(--r27-red) !important; font-size:12.5px !important; }
.modal-body input, .modal-body select, .modal-body textarea{
  border:1px solid var(--r27-line-2) !important; border-radius:10px !important;
  transition:border-color var(--r27-ease), box-shadow var(--r27-ease) !important;
}
.modal-body input:focus, .modal-body select:focus, .modal-body textarea:focus{
  border-color:var(--r27-brand) !important; box-shadow:0 0 0 4px rgba(15,77,150,.10) !important; outline:none !important;
}
/* legacy buttons inside legacy modals */
.modal-card .btn{ border:1px solid var(--r27-line-2) !important; background:#fff !important; color:var(--r27-ink-mid) !important; border-radius:10px !important; font-weight:800 !important; }
.modal-card .btn-primary{ background:var(--r27-brand) !important; border-color:var(--r27-brand) !important; color:#fff !important; }
.modal-card .btn-success{ background:var(--r27-green-bg) !important; border-color:#BDE9CE !important; color:var(--r27-green) !important; }
.modal-card .btn-danger{ background:var(--r27-red-bg) !important; border-color:#F3C9C9 !important; color:var(--r27-red) !important; }
.modal-card .btn-warning{ background:var(--r27-amber-bg) !important; border-color:#F4DDB0 !important; color:var(--r27-amber) !important; }
/* footer divider area used by some legacy modals */
.modal-actions, .modal-footer{ border-top:1px solid var(--r27-line) !important; }

/* Agreements panes */
.app-page .main .agr-pane{
  background:var(--r27-surface) !important; border:1px solid var(--r27-line) !important;
  border-radius:var(--r27-r) !important; box-shadow:var(--r27-sh) !important;
}
.app-page .main .agr-section-h{ color:var(--r27-ink) !important; font-weight:800 !important; }
.app-page .main .agr-legal-note{ color:var(--r27-ink-soft) !important; }

/* ════════════════════════════════════════════════════════════════════════
   HADER PAGES — unify the branded "حاضر HR" design to Light & Minimal
   (CSS-only; overrides mgiot-commercial-hader.css which loads earlier)
   ═══════════════════════════════════════════════════════════════════════ */
.app-page .main .hader-hero{
  position:relative; overflow:hidden;
  background:var(--r27-surface) !important; color:var(--r27-ink) !important;
  border:1px solid var(--r27-line) !important; border-radius:var(--r27-r-lg) !important;
  box-shadow:var(--r27-sh) !important; padding:20px 24px !important;
}
.app-page .main .hader-hero::before{
  content:""; position:absolute; inset-inline-start:0; top:0; bottom:0; width:4px;
  background:linear-gradient(180deg,var(--r27-accent),var(--r27-brand));
}
.app-page .main .hader-hero h2{ color:var(--r27-ink) !important; font-size:20px !important; font-weight:800 !important; }
.app-page .main .hader-hero p{ color:var(--r27-ink-soft) !important; }
.app-page .main .hader-kicker{
  background:#EAF1FC !important; color:var(--r27-accent) !important; border:0 !important; font-weight:800 !important;
}
.app-page .main .hader-hero-logo{ background:#fff; border-radius:10px; padding:4px; box-shadow:var(--r27-sh); }
.app-page .main .hader-hero .mg-btn{
  background:var(--r27-surface) !important; color:var(--r27-ink-mid) !important; border:1px solid var(--r27-line-2) !important;
}
.app-page .main .hader-hero .mg-btn--primary{
  background:var(--r27-brand) !important; color:#fff !important; border-color:var(--r27-brand) !important;
}
.app-page .main .hader-emp-card,
.app-page .main .hader-policy{
  background:var(--r27-surface) !important; border:1px solid var(--r27-line) !important;
  border-radius:var(--r27-r) !important; box-shadow:var(--r27-sh) !important;
  transition:transform var(--r27-ease), box-shadow var(--r27-ease);
}
.app-page .main .hader-emp-card:hover{ transform:translateY(-2px); box-shadow:var(--r27-sh-md) !important; }
.app-page .main .hader-emp-head h3{ color:var(--r27-ink) !important; }
.app-page .main .hader-emp-head p{ color:var(--r27-ink-faint) !important; }
.app-page .main .hader-avatar,
.app-page .main .hader-avatar-mini{
  background:linear-gradient(135deg,var(--r27-brand),#2D6FC4) !important; border-radius:12px !important;
}
.app-page .main .hader-emp-metrics span{
  background:var(--r27-surface-2) !important; border:1px solid var(--r27-line) !important;
  color:var(--r27-ink-mid) !important; border-radius:11px !important;
}
.app-page .main .hader-modal-note{
  background:#EAF1FC !important; border:1px solid #CFE0F8 !important; color:var(--r27-accent) !important; border-radius:11px !important;
}
.app-page .main .hader-policy h3{ color:var(--r27-brand) !important; }
.app-page .main .hader-policy p{ color:var(--r27-ink-soft) !important; }
.view#viewPayroll .mg-card:first-child{ border-top:0 !important; }

@media (prefers-reduced-motion: reduce){
  .app-page *{ transition:none !important; }
}