/* ============================================================
   MATIOS UI — matios-ui-shell.css
   MTS.Shell — Orquestador de layout: Topbar + SideNav + StatusBar + main
   Requiere: matios-ui-base.css
   ============================================================ */

/* ── Root ──────────────────────────────────────────── */
.mts-shell {
  --mts-shell-height: 100vh;

  display: grid;
  height: var(--mts-shell-height);
  overflow: hidden;

  /* Sin modificadores: solo main */
  grid-template:
    "main" 1fr
    / 1fr;
}

/* ── Slots — grid-area siempre definida ────────────── */
.mts-shell__topbar    { grid-area: topbar;  }
.mts-shell__sidenav   { grid-area: sidenav; min-height: 0; overflow-y: auto; }
.mts-shell__main      { grid-area: main;    overflow: hidden; position: relative; }
.mts-shell__main--scroll { overflow: auto; }   /* opt-in cuando el main necesita scroll propio */
.mts-shell__statusbar { grid-area: status;  }

/* ── Scrollbar temático para las áreas scrollables del shell ──
   Mismo look token-driven que MTS.Scroll → se adapta a dark/light/accent. */
.mts-shell__sidenav,
.mts-shell__main--scroll {
  scrollbar-width: thin;                                /* Firefox */
  scrollbar-color: var(--mts-border-color-strong) var(--mts-bg-surface-2);
}
.mts-shell__sidenav::-webkit-scrollbar,
.mts-shell__main--scroll::-webkit-scrollbar { width: 8px; height: 8px; }

.mts-shell__sidenav::-webkit-scrollbar-track,
.mts-shell__main--scroll::-webkit-scrollbar-track { background: var(--mts-bg-surface-2); }

.mts-shell__sidenav::-webkit-scrollbar-thumb,
.mts-shell__main--scroll::-webkit-scrollbar-thumb {
  background: var(--mts-border-color-strong);
  border-radius: 99px;
  border: 1px solid var(--mts-bg-surface-2);
  background-clip: padding-box;
  transition: background .15s;
}
.mts-shell__sidenav::-webkit-scrollbar-thumb:hover,
.mts-shell__main--scroll::-webkit-scrollbar-thumb:hover { background: var(--mts-color-primary); }

/* ════════════════════════════════════════════════════
   COMBINACIONES — CSS Grid templates
   top (T) · side (S) · status (St)
   ════════════════════════════════════════════════════ */

/* T ─────────────────────────────────────────────────── */
.mts-shell--top:not(.mts-shell--side):not(.mts-shell--status) {
  grid-template:
    "topbar" auto
    "main  " 1fr
    / 1fr;
}

/* S ─────────────────────────────────────────────────── */
.mts-shell--side:not(.mts-shell--top):not(.mts-shell--status) {
  grid-template:
    "sidenav main" 1fr
    / auto 1fr;
}

/* St ────────────────────────────────────────────────── */
.mts-shell--status:not(.mts-shell--top):not(.mts-shell--side) {
  grid-template:
    "main  " 1fr
    "status" auto
    / 1fr;
}

/* T + S ─────────────────────────────────────────────── */
.mts-shell--top.mts-shell--side:not(.mts-shell--status) {
  grid-template:
    "topbar  topbar" auto
    "sidenav main  " 1fr
    / auto 1fr;
}

/* T + St ────────────────────────────────────────────── */
.mts-shell--top.mts-shell--status:not(.mts-shell--side) {
  grid-template:
    "topbar" auto
    "main  " 1fr
    "status" auto
    / 1fr;
}

/* S + St ────────────────────────────────────────────── */
.mts-shell--side.mts-shell--status:not(.mts-shell--top) {
  grid-template:
    "sidenav main  " 1fr
    "status  status" auto
    / auto 1fr;
}

/* T + S + St — shell completo ───────────────────────── */
.mts-shell--top.mts-shell--side.mts-shell--status {
  grid-template:
    "topbar  topbar " auto
    "sidenav main   " 1fr
    "status  status " auto
    / auto 1fr;
}