/* ============================================================================
   MGIoT — Approved 2026 UI/UX theme layer  (visual only, brand = MGIoT)
   ----------------------------------------------------------------------------
   Loads LAST. Re-skins the whole dashboard through the existing shared classes
   and CSS variables. No JS, routes, APIs, permissions, data, or business logic
   are touched. Dashboard web files only → APK rebuild NOT required.

   Direction: modern enterprise SaaS — dark navy sidebar, soft-glass surfaces,
   strong MGIoT blue + cyan accents, rounded cards, refined shadows, RTL-first.
   Palette:
     Deep navy   #061B3A / #081D39
     MGIoT blue  #0A58CA
     Electric    #006DFF
     Cyan        #00C2FF
     Soft bg     #F4F8FC / #F2F5F9
   ========================================================================== */

/* ─── 1. Palette tokens — re-point existing variable systems ───────────── */
:root{
  /* MGIoT 2026 source palette */
  --mg2-navy-1:#061B3A;
  --mg2-navy-2:#081D39;
  --mg2-navy-3:#0A2348;
  --mg2-blue:#0A58CA;
  --mg2-blue-dark:#0747A6;
  --mg2-electric:#006DFF;
  --mg2-cyan:#00C2FF;
  --mg2-cyan-soft:#E4F8FF;
  --mg2-bg:#F4F8FC;
  --mg2-bg-2:#F2F5F9;
  --mg2-surface:#FFFFFF;
  --mg2-border:#E3EAF3;
  --mg2-border-2:#CFDAEA;
  --mg2-text:#0C1E3A;
  --mg2-muted:#5A6B85;
  --mg2-faint:#8A99B2;
  --mg2-success:#0F9D6B;
  --mg2-warning:#E08A0B;
  --mg2-danger:#E23D5A;
  /* surface helpers (flipped to dark by mgiot-dark-2026.css) */
  --mg2-surface-2:#F6F9FD;
  --mg2-row-border:#EEF3FA;
  --mg2-row-hover:#F6FAFF;
  --mg2-grid:#EEF3FA;
  --mg2-th-bg:#F1F6FD;
  --mg2-th-text:#34507A;
  --mg2-input-bg:#FFFFFF;

  --mg2-grad-brand:linear-gradient(135deg,#006DFF 0%,#0A58CA 55%,#00C2FF 140%);
  --mg2-grad-navy:linear-gradient(180deg,#081D39 0%,#061B3A 60%,#05152C 100%);
  --mg2-shadow-sm:0 1px 2px rgba(8,29,57,.06), 0 1px 3px rgba(8,29,57,.05);
  --mg2-shadow-md:0 10px 26px rgba(8,29,57,.10);
  --mg2-shadow-lg:0 22px 60px rgba(6,27,58,.16);
  --mg2-ring:0 0 0 4px rgba(0,109,255,.14);
  --mg2-r-sm:12px; --mg2-r:16px; --mg2-r-lg:20px; --mg2-r-xl:26px;

  /* Re-point the existing professional-theme variables (--mgo-*) */
  --mgo-primary:#0A58CA;
  --mgo-primary-dark:#0747A6;
  --mgo-primary-soft:#EAF2FE;
  --mgo-primary-100:#D7E6FC;
  --mgo-primary-200:#B6D2F8;
  --mgo-accent:#00C2FF;
  --mgo-accent-soft:#E4F8FF;
  --mgo-bg:#F4F8FC;
  --mgo-surface:#FFFFFF;
  --mgo-surface-2:#F6F9FD;
  --mgo-border:#E3EAF3;
  --mgo-border-2:#CFDAEA;
  --mgo-text:#0C1E3A;
  --mgo-muted:#5A6B85;
  --mgo-soft:#8A99B2;
  --mgo-success:#0F9D6B;
  --mgo-warning:#E08A0B;
  --mgo-danger:#E23D5A;
  --mgo-shadow-sm:var(--mg2-shadow-sm);
  --mgo-shadow:var(--mg2-shadow-md);
  --mgo-shadow-lg:var(--mg2-shadow-lg);

  /* Re-point the mgiot-v2 design tokens (--mg-*) used across many pages */
  --mg-brand:#0A58CA;
  --mg-brand-hover:#0747A6;
  --mg-brand-active:#063C8C;
  --mg-brand-50:#EAF2FE;
  --mg-brand-100:#D7E6FC;
  --mg-bg:#F4F8FC;
  --mg-page-bg:#F4F8FC;
  --mg-surface:#FFFFFF;
  --mg-surface-soft:#F6F9FD;
  --mg-surface-row:rgba(244,248,252,.7);
  --mg-border:#E3EAF3;
  --mg-border-soft:#EEF3FA;
  --mg-info-strip:#00C2FF;
  --mg-shadow-sm:var(--mg2-shadow-sm);
  --mg-shadow-md:var(--mg2-shadow-md);
}

/* ─── 2. Page background — soft, premium, RTL glow on the sidebar side ──── */
body{
  background:
    radial-gradient(1000px 520px at 100% -200px, rgba(0,109,255,.10), transparent 60%),
    radial-gradient(820px 460px at 0% 120px, rgba(0,194,255,.08), transparent 60%),
    var(--mg2-bg) !important;
}
html[dir="ltr"] body{
  background:
    radial-gradient(1000px 520px at 0% -200px, rgba(0,109,255,.10), transparent 60%),
    radial-gradient(820px 460px at 100% 120px, rgba(0,194,255,.08), transparent 60%),
    var(--mg2-bg) !important;
}
.app-page.active{ background:transparent !important; }
.main{ background:transparent !important; }

/* ─── 3. Sidebar — dark navy gradient, premium nav ────────────────────── */
.sidebar{
  background:var(--mg2-grad-navy) !important;
  color:#E7EEF8 !important;
  border-inline-end:1px solid rgba(255,255,255,.06) !important;
  box-shadow:0 18px 60px rgba(4,17,38,.45) !important;
}
.sidebar-header{
  background:transparent !important;
  border-bottom:1px solid rgba(255,255,255,.08) !important;
  padding:20px 18px !important;
}
.sidebar-logo-box{
  background:rgba(255,255,255,.06) !important;
  border:1px solid rgba(0,194,255,.30) !important;
  box-shadow:0 8px 22px rgba(0,109,255,.22) !important;
}
.sidebar-header h2{ color:#FFFFFF !important; letter-spacing:.4px !important; }
.sidebar-header p, #sidebarUser{ color:#9FB4D4 !important; }

/* Group accordions */
.sidebar .nav-section{ border:1px solid transparent !important; background:transparent !important; box-shadow:none !important; }
.sidebar .nav-section:not(.collapsed){
  background:rgba(255,255,255,.04) !important;
  border-color:rgba(255,255,255,.07) !important;
  box-shadow:inset 0 0 0 1px rgba(0,194,255,.05) !important;
}

/* Rows: top-item, section header, nav item */
.sidebar .nav-top-item,
.sidebar .nav-section-hdr,
.sidebar .nav-item{
  color:#C6D4EA !important;
  background:transparent !important;
  box-shadow:none !important;
  font-weight:700 !important;
}
.sidebar .nav-top-item:hover,
.sidebar .nav-section-hdr:hover,
.sidebar .nav-item:hover{
  background:rgba(255,255,255,.07) !important;
  color:#FFFFFF !important;
}

/* Open section header */
.sidebar .nav-section:not(.collapsed) > .nav-section-hdr{
  background:rgba(0,109,255,.16) !important;
  color:#EAF3FF !important;
  box-shadow:none !important;
}

/* Active item — electric blue → cyan, with inline-start accent bar */
.sidebar .nav-item.active,
.sidebar .nav-top-item.active{
  background:var(--mg2-grad-brand) !important;
  color:#FFFFFF !important;
  box-shadow:0 10px 24px rgba(0,109,255,.34) !important;
  position:relative !important;
}
.sidebar .nav-item.active::after,
.sidebar .nav-top-item.active::after{
  content:"" !important; position:absolute !important; top:18% !important; bottom:18% !important;
  inset-inline-start:0 !important; width:3px !important; border-radius:999px !important;
  background:var(--mg2-cyan) !important; box-shadow:0 0 10px rgba(0,194,255,.8) !important;
}

/* Icons */
.sidebar .section-icon,
.sidebar .nav-item-icon{
  background:rgba(255,255,255,.08) !important;
  color:#7FD8FF !important;
}
.sidebar .nav-section:not(.collapsed) > .nav-section-hdr .section-icon,
.sidebar .nav-item.active .nav-item-icon,
.sidebar .nav-top-item.active .section-icon{
  background:rgba(255,255,255,.22) !important;
  color:#FFFFFF !important;
}
.sidebar .nav-top-item:hover .section-icon,
.sidebar .nav-section-hdr:hover .section-icon,
.sidebar .nav-item:hover .nav-item-icon{
  background:rgba(0,194,255,.18) !important;
  color:#BDEBFF !important;
}

/* Arrows + badges */
.sidebar .section-arrow{ background:rgba(255,255,255,.08) !important; color:#9FB4D4 !important; }
.sidebar .nav-section:not(.collapsed) > .nav-section-hdr .section-arrow{ background:rgba(255,255,255,.18) !important; color:#EAF3FF !important; }
.sidebar .sidebar-badge{ background:var(--mg2-cyan) !important; color:#062033 !important; font-weight:800 !important; }

/* Footer on dark */
.sidebar-footer{ border-top:1px solid rgba(255,255,255,.08) !important; background:transparent !important; }
.sidebar .footer-role{ color:#9FB4D4 !important; }
.sidebar .footer-copy{ color:#7E91B2 !important; }
.sidebar .footer-logout{
  background:rgba(255,255,255,.06) !important; color:#C6D4EA !important;
  border:1px solid rgba(255,255,255,.10) !important; border-radius:12px !important;
}
.sidebar .footer-logout:hover{ background:rgba(226,61,90,.20) !important; color:#FFD7DE !important; }

/* Scrollbar in the dark sidebar */
.sidebar-nav::-webkit-scrollbar{ width:8px; }
.sidebar-nav::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.12); border-radius:999px; }

/* ─── 4. Topbar — sticky soft-glass header ────────────────────────────── */
.main-header,.topbar,.page-header,.view-header{
  background:rgba(255,255,255,.82) !important;
  border:1px solid rgba(255,255,255,.7) !important;
  box-shadow:0 8px 30px rgba(8,29,57,.08) !important;
  border-radius:var(--mg2-r-lg) !important;
  backdrop-filter:saturate(160%) blur(14px) !important;
  -webkit-backdrop-filter:saturate(160%) blur(14px) !important;
  padding:14px 18px !important;
  position:sticky !important; top:14px !important; z-index:30 !important;
}
.main-header h1,#viewTitle{ color:var(--mg2-text) !important; font-weight:800 !important; letter-spacing:-.2px !important; }
.main-header-titles p,#viewDesc{ color:var(--mg2-muted) !important; font-weight:600 !important; }
.topbar-btn,.sidebar-toggle{
  border:1px solid var(--mg2-border) !important; background:#fff !important;
  color:var(--mg2-blue) !important; border-radius:12px !important;
  min-height:40px !important; padding:0 14px !important; font-weight:800 !important;
  box-shadow:var(--mg2-shadow-sm) !important;
  transition:background .16s ease, box-shadow .16s ease, transform .12s ease !important;
}
.topbar-btn:hover,.sidebar-toggle:hover{ background:var(--mgo-primary-soft) !important; box-shadow:var(--mg2-shadow-md) !important; }
.topbar-btn:active,.sidebar-toggle:active{ transform:translateY(1px) !important; }

/* ─── 5. Cards & panels — rounded, soft, hover lift ───────────────────── */
.mg-card,.card,.panel,.section-card,.stat-card,.kpi-card,.quote-card,.table-card,.form-card,.data-card,.mg-data-card{
  background:#fff !important;
  border:1px solid var(--mg2-border) !important;
  border-radius:var(--mg2-r-lg) !important;
  box-shadow:var(--mg2-shadow-sm) !important;
  transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease !important;
}
.mg-card:hover,.card:hover,.stat-card:hover,.kpi-card:hover,.data-card:hover{
  box-shadow:var(--mg2-shadow-md) !important;
  border-color:var(--mgo-primary-100) !important;
}

/* ─── 6. Stat / KPI cards — brand gradient accent + cyan number glow ───── */
.mg-stat,.stat-card,.kpi-card{
  position:relative !important; overflow:hidden !important;
  border-radius:var(--mg2-r-lg) !important;
}
.mg-stat::before{ width:5px !important; background:var(--mg2-grad-brand) !important; }
.stat-card::before,.kpi-card::before{ background:var(--mg2-grad-brand) !important; height:5px !important; }
.mg-stat-value,.stat-card .value,.kpi-card .value,.stat-value{
  color:var(--mg2-blue) !important; font-weight:900 !important;
}
.mg-stat--success::before{ background:linear-gradient(180deg,#12B981,#0F9D6B) !important; }
.mg-stat--warn::before{ background:linear-gradient(180deg,#F6A609,#E08A0B) !important; }
.mg-stat--danger::before{ background:linear-gradient(180deg,#F4566F,#E23D5A) !important; }
.mg-stat--info::before{ background:var(--mg2-grad-brand) !important; }

/* ─── 7. Buttons — unified, brand gradient primary ────────────────────── */
.mg-btn{ border-radius:12px !important; font-weight:800 !important; transition:transform .12s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease !important; }
.mg-btn:hover{ box-shadow:var(--mg2-shadow-sm) !important; }
.mg-btn:active{ transform:translateY(1px) !important; }
.mg-btn--primary,.btn-primary,.primary-btn,button.primary,button.save{
  background:var(--mg2-grad-brand) !important; color:#fff !important; border-color:transparent !important;
  box-shadow:0 10px 22px rgba(0,109,255,.24) !important;
}
.mg-btn--primary:hover,.btn-primary:hover{ filter:brightness(1.04) !important; }
.mg-btn--ghost-brand{ background:var(--mgo-primary-soft) !important; color:var(--mg2-blue) !important; border-color:var(--mgo-primary-100) !important; }
.inst-btn,.action-btn{ border-radius:11px !important; }

/* ─── 8. Inputs — refined focus ring (cyan/blue) ──────────────────────── */
.mg-search-input,.mg-select,input,select,textarea{
  border-radius:12px !important; border-color:var(--mg2-border) !important;
}
.mg-search-input:focus,.mg-select:focus,input:focus,select:focus,textarea:focus{
  border-color:var(--mg2-electric) !important; box-shadow:var(--mg2-ring) !important;
}

/* ─── 9. Tables — clean, readable, premium header ─────────────────────── */
.mg-table,.table-wrap,.table-container,.data-table-wrap{
  border-radius:var(--mg2-r-lg) !important; border-color:var(--mg2-border) !important;
}
.mg-table thead th,th{
  background:#F1F6FD !important; color:#34507A !important; font-weight:800 !important;
  border-bottom:1px solid var(--mg2-border) !important;
}
.mg-table tbody td,td{ border-bottom:1px solid #EEF3FA !important; color:#2A3C5A !important; }
.mg-table tbody tr:hover td,tr:hover td{ background:#F6FAFF !important; }

/* ─── 10. Status badges — text + color (a11y), consistent pills ───────── */
.mg-badge,.badge,.status,.pill,.tag{ border-radius:999px !important; font-weight:800 !important; padding:4px 11px !important; }
.mg-badge--success,.badge.success,.status.success,.pill.success{ background:#E7F8F0 !important; color:#0B7A52 !important; border-color:#AEE9CE !important; }
.mg-badge--warn,.badge.warning,.status.warning,.pill.warning{ background:#FFF6E6 !important; color:#A8650A !important; border-color:#FBE0A6 !important; }
.mg-badge--danger,.badge.danger,.status.danger,.pill.danger{ background:#FDECEF !important; color:#B92742 !important; border-color:#F6C4CE !important; }
.mg-badge--info,.badge.info,.status.info,.pill.info{ background:var(--mg2-cyan-soft) !important; color:#066A8C !important; border-color:#B7EAFA !important; }

/* ─── 11. Page header accent strip → cyan/blue ────────────────────────── */
.mg-strip{ background:var(--mg2-grad-brand) !important; }
.mg-card-title{ color:var(--mg2-text) !important; }

/* ─── 12. Modals ──────────────────────────────────────────────────────── */
.modal,.dialog,.modal-card,.quote-modal{ border-radius:var(--mg2-r-xl) !important; box-shadow:var(--mg2-shadow-lg) !important; }
.modal-bg.show,.modal-backdrop.show{ background:rgba(6,27,58,.5) !important; backdrop-filter:blur(8px) !important; }

/* ─── 13. Empty / loading states ──────────────────────────────────────── */
.mg-empty,.empty-state{ color:var(--mg2-muted) !important; }
.mg-empty-icon{ color:var(--mg2-faint) !important; }
.mg-loading{ color:var(--mg2-muted) !important; }

/* ─── 14. Quick-action / "new" primary CTA buttons across pages ───────── */
[onclick*="renderInstallEditor"],.mg-cta,.btn-cta{ }

/* ─── 15. Responsive: mobile drawer keeps dark theme + safe spacing ────── */
@media (max-width:900px){
  .main-header,.topbar,.page-header,.view-header{ top:8px !important; border-radius:16px !important; }
  .mg-card,.card,.stat-card,.kpi-card,.table-wrap{ border-radius:16px !important; }
}
@media (prefers-reduced-motion: reduce){
  .mg-card,.mg-btn,.topbar-btn,.sidebar .nav-item{ transition:none !important; }
}