/* ============================================================
   Miteda app shell — layout + responsive rules.
   Visuals come from the design-system tokens (var(--*)).
   ============================================================ */

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font-sans);
  background: var(--surface-page);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
#app { height: 100%; }

/* ---- App frame ------------------------------------------- */
.app-shell { display: flex; height: 100vh; overflow: hidden; }

.main {
  flex: 1; min-width: 0;
  height: 100%; overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--app-gap);
  padding: 24px;
  scroll-behavior: smooth;
}
.main::-webkit-scrollbar { width: 10px; height: 10px; }
.main::-webkit-scrollbar-thumb {
  background: var(--line-300); border-radius: 999px;
  border: 3px solid var(--surface-page);
}

/* ---- Sidebar --------------------------------------------- */
.sidebar {
  width: 256px; flex: 0 0 auto;
  background: var(--brand-forest);
  display: flex; flex-direction: column;
  padding: 24px 12px 16px;
  gap: 8px; height: 100%; overflow-y: auto;
  transition: width var(--dur-base) var(--ease-standard), padding var(--dur-base) var(--ease-standard);
}
.sidebar-scrim { display: none; }

/* ---- Content grids --------------------------------------- */
.stack { display: flex; flex-direction: column; gap: var(--app-gap); min-width: 0; }
.grid-aside {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 372px;
  gap: var(--app-gap); align-items: start;
}
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--app-gap); align-items: start; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--app-gap); align-items: start; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--app-gap); align-items: start; }
.grid-auto {
  display: grid; gap: var(--app-gap); align-items: start;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
/* container-driven (collapse on the COLUMN width, not the viewport) —
   for grids nested inside the narrow main column of grid-aside */
.grid-fit {
  display: grid; gap: var(--app-gap); align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.grid-fit-sm {
  display: grid; gap: var(--app-gap); align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* section heading shared */
.sec-title {
  margin: 0; font-size: var(--text-heading); line-height: var(--lh-heading);
  font-weight: var(--fw-medium); letter-spacing: var(--tracking-tight); color: var(--ink-900);
}
.sec-sub { margin: 0; font-size: var(--text-body); color: var(--ink-500); }

a.plain { color: inherit; text-decoration: none; }

/* ---- Mobile menu button (hidden on desktop) -------------- */
.menu-btn { display: none; align-items: center; justify-content: center; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1240px) {
  .grid-3-sm { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1080px) {
  .grid-aside { grid-template-columns: 1fr; }
  .grid-aside > *:first-child { order: 2; }
  .grid-aside > *:last-child  { order: 1; }
}
@media (max-width: 860px) {
  .grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .hdr { padding: 14px 16px; flex-wrap: nowrap; align-items: center; }
  .hdr__l { flex: 1 1 0; min-width: 0; }
  .hdr__r { flex: 0 0 auto; margin-left: auto; gap: 6px; }
  .hdr__sub { display: none; }
  .hdr__actions { order: unset; flex-basis: auto; padding-top: 0; }
  .hdr__actions > * { width: auto; }
  .hdr__actions button > span { display: none; }
}
@media (max-width: 560px) {
  .hdr__io { display: none; }
}

@media (max-width: 760px) {
  .sidebar {
    position: fixed; top: 0; left: 0; z-index: 60;
    transform: translateX(-100%);
    transition: transform var(--dur-base) var(--ease-standard);
    box-shadow: var(--shadow-lg);
  }
  .app-shell.nav-open .sidebar { transform: translateX(0); }
  .app-shell.nav-open .sidebar-scrim {
    display: block; position: fixed; inset: 0; z-index: 50;
    background: rgba(3,3,2,0.45);
  }
  .menu-btn { display: inline-flex; }
  .main { padding: 16px; }
}

@keyframes notif-backdrop-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}