/* ============================================================================
   MGIoT 2028 — Clean shell foundation (topbar · sidebar · page container).
   Replaces the shell styling that was scattered across mgiot-shell.css,
   mgiot-sidebar-fix.css (132 !important), and the shell bits of theme-2026 /
   redesign-2027. Token-driven, RTL/LTR-safe via logical properties, no
   !important. Loads last so it is authoritative once the legacy shell sheets
   are unlinked.
   ========================================================================== */

/* ---------- App layout ---------------------------------------------------- */
body{ background:var(--mg-bg); }
.app-page{
  min-height:100dvh;
  background:var(--mg-bg);
}
@media (min-width:1024px){
  .app-page{ display:flex; align-items:stretch; }
}

/* ---------- Sidebar ------------------------------------------------------- */
.sidebar{
  width:280px; flex:0 0 280px;
  background:var(--mg-surface);
  display:flex; flex-direction:column;
  z-index:var(--z-drawer,1000);
}
/* Desktop: persistent, hairline divider on the inline-end edge */
@media (min-width:1024px){
  .sidebar{
    position:sticky; top:0; align-self:flex-start;
    height:100dvh; overflow-y:auto;
    border-inline-start:1px solid var(--mg-border);
    box-shadow:none;
  }
}
/* Mobile: off-canvas drawer that slides in from the inline-start edge (RTL=right) */
@media (max-width:1023.98px){
  .sidebar{
    position:fixed; inset-block:0; inset-inline-start:0;
    transform:translateX(-102%);
    box-shadow:20px 0 60px rgba(15,23,42,.20);
    transition:transform .28s cubic-bezier(.2,.7,.2,1);
  }
  html[dir="rtl"] .sidebar{ inset-inline-start:auto; inset-inline-end:0; transform:translateX(102%); }
  body.sidebar-open .sidebar{ transform:translateX(0); }
}

.sidebar-backdrop{
  position:fixed; inset:0; z-index:calc(var(--z-drawer,1000) - 1);
  background:rgba(15,23,42,.48);
  opacity:0; visibility:hidden; transition:opacity .28s ease, visibility .28s ease;
}
body.sidebar-open .sidebar-backdrop{ opacity:1; visibility:visible; }
@media (min-width:1024px){ .sidebar-backdrop{ display:none; } }

/* Sidebar header */
.sidebar-header{
  display:flex; align-items:center; gap:12px;
  padding:20px 18px 16px;
  border-bottom:1px solid var(--mg-border-soft);
}
.sidebar-logo-box{
  width:44px; height:44px; border-radius:12px; flex:none;
  display:grid; place-items:center; overflow:hidden;
  background:var(--mg-brand-50); border:1px solid var(--mg-border);
}
.sidebar-logo-box img{ width:30px; height:30px; object-fit:contain; }
.sidebar-header h2{ margin:0; font-size:15px; font-weight:800; color:var(--mg-text-strong); letter-spacing:-.01em; }
.sidebar-header #sidebarUser{ margin:2px 0 0; font-size:12.5px; color:var(--mg-text-muted); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Nav */
.sidebar-nav{ padding:12px 12px 20px; display:flex; flex-direction:column; gap:2px; overflow-y:auto; }

.nav-top-item{
  display:flex; align-items:center; gap:12px;
  padding:10px 12px; border-radius:12px; cursor:pointer;
  font-size:13.5px; font-weight:800; color:var(--mg-text-mid);
  transition:background var(--t), color var(--t);
}
.nav-top-item:hover{ background:var(--mg-neutral-bg); color:var(--mg-text-strong); }
.nav-top-item.active{ color:#fff; background:var(--mg-grad-brand); box-shadow:var(--shadow-primary); }
.nav-top-item .section-icon{ display:inline-flex; }
.nav-top-item.active .section-icon{ color:#fff; }

/* Accordion sections */
.nav-section{ margin-top:4px; }
.nav-section-hdr{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:11px; cursor:pointer;
  font-size:13px; font-weight:700; color:var(--mg-text-soft);
  transition:background var(--t), color var(--t);
}
.nav-section-hdr:hover{ background:var(--mg-neutral-bg); color:var(--mg-text-strong); }
.nav-section-hdr .section-icon{ display:inline-flex; color:var(--mg-text-muted); }
.nav-section-hdr .section-label{ flex:1; }
/* Existing ▼ glyph in markup — rotate it for the collapsed/expanded state. */
.section-arrow{
  margin-inline-start:auto; font-size:10px; line-height:1;
  color:var(--mg-text-faint); transition:transform .25s ease;
}
.nav-section.collapsed .section-arrow{ transform:rotate(-90deg); }

.nav-section-body{
  overflow:hidden; max-height:1200px;
  transition:max-height .3s ease;
  display:flex; flex-direction:column; gap:1px;
  padding-block:2px;
}
.nav-section.collapsed .nav-section-body{ max-height:0; }

.nav-item{
  position:relative;
  display:flex; align-items:center; gap:12px;
  padding:8px 12px 8px 14px; border-radius:11px; cursor:pointer;
  font-size:13px; font-weight:600; color:var(--mg-text-mid);
  transition:background var(--t), color var(--t);
}
.nav-item:hover{ background:var(--mg-neutral-bg); color:var(--mg-text-strong); }
.nav-item.active{ background:var(--mg-brand-50); color:var(--mg-brand); font-weight:700; }
.nav-item.active::before{
  content:""; position:absolute; inset-inline-start:4px; inset-block:8px;
  width:3px; border-radius:2px; background:var(--mg-brand);
}
.nav-item-icon{ display:inline-flex; color:currentColor; opacity:.9; }
.sidebar-badge{
  margin-inline-start:auto; min-width:18px; height:18px; padding:0 5px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:800; color:#fff; background:var(--mg-danger-strip,#DC2626);
  border-radius:999px;
}

/* ---------- Main + topbar ------------------------------------------------- */
.main{ flex:1 1 auto; min-width:0; background:var(--mg-bg); display:flex; flex-direction:column; }

.main-header{
  position:sticky; top:0; z-index:var(--z-sticky,40);
  display:flex; align-items:center; gap:14px;
  padding:14px 22px; margin:12px 16px 4px;
  border-radius:16px;
  background:color-mix(in srgb, var(--mg-surface) 85%, transparent);
  -webkit-backdrop-filter:saturate(1.6) blur(14px);
  backdrop-filter:saturate(1.6) blur(14px);
  border:1px solid var(--mg-border-soft);
}
.sidebar-toggle{
  display:inline-grid; place-items:center;
  width:42px; height:42px; border-radius:12px; flex:none; cursor:pointer;
  background:var(--mg-surface); color:var(--mg-text-mid);
  border:1px solid var(--mg-border-strong);
  transition:background var(--t), color var(--t), border-color var(--t);
}
.sidebar-toggle:hover{ color:var(--mg-brand); border-color:var(--mg-brand); }
@media (min-width:1024px){ .sidebar-toggle{ display:none; } }

.main-header-titles h1{ margin:0; font-size:19px; font-weight:800; color:var(--mg-brand); letter-spacing:-.01em; line-height:1.15; }
.main-header-titles p{ margin:2px 0 0; font-size:12.5px; color:var(--mg-text-muted); font-weight:600; }

.topbar-actions{ display:flex; align-items:center; gap:10px; margin-inline-start:auto; }
.topbar-btn{
  display:inline-grid; place-items:center;
  min-width:42px; height:42px; padding:0 12px; border-radius:12px; cursor:pointer;
  font-size:13px; font-weight:800; color:var(--mg-text-mid);
  background:var(--mg-surface); border:1px solid var(--mg-border-strong);
  transition:background var(--t), color var(--t), border-color var(--t), transform var(--t);
}
.topbar-btn:hover{ color:var(--mg-brand); border-color:var(--mg-brand); }
.topbar-btn:active{ transform:translateY(1px); }
.wh-switcher:empty{ display:none; }

/* ---------- View container ------------------------------------------------ */
.view{ padding:16px; }
.view:not(.active){ display:none; }
@media (min-width:768px){ .view{ padding:20px 22px 40px; } }

/* ---------- Dark-mode topbar fix -----------------------------------------
   redesign-2027 hardcodes a LIGHT glassy topbar + white topbar buttons with
   !important, which are unreadable in dark mode (light title on light bar).
   Re-express with theme tokens (surface/border/text flip per theme) at
   matching specificity so they win by load order. */
.app-page .main .main-header{
  background:color-mix(in srgb, var(--mg-surface) 88%, transparent) !important;
  border-bottom:1px solid var(--mg-border-soft) !important;
}
.app-page .main .main-header #viewTitle{ color:var(--mg-brand) !important; }
html[data-theme="dark"] .app-page .main .main-header #viewTitle{ color:var(--mg-text-strong) !important; }
.app-page .main .main-header #viewDesc{ color:var(--mg-text-muted) !important; }
.app-page .main .topbar-actions .topbar-btn,
.app-page .main .main-header .topbar-btn{
  background:var(--mg-surface) !important; color:var(--mg-text-mid) !important;
  border:1px solid var(--mg-border-strong) !important;
}
.app-page .main .main-header .topbar-btn:hover{ background:var(--mg-neutral-bg) !important; color:var(--mg-brand) !important; }