/* The admin frame every system shares (packages/ui/app.js). Colours only from theme variables.
   Wide screens: fixed sidebar. Phones and tablets: top bar + slide-out menu. */

.frame { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; }
.topbar { display: none; }
.scrim { display: none; }
.side { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: var(--s5);
  padding: var(--s5) var(--s4); border-right: 1px solid var(--line); background: var(--surface); }
.side-head { padding: 0 var(--s3); display: flex; flex-direction: column; gap: var(--s1); }
.side-head .title { font-size: 22px; }
.side nav { display: flex; flex-direction: column; gap: var(--s1); flex: 1; overflow-y: auto; }
.side nav a { display: flex; align-items: center; gap: var(--s2); min-height: var(--touch); padding: 0 var(--s3); border-radius: var(--r-btn);
  color: var(--text-soft); text-decoration: none; font-size: var(--fs-small); font-weight: 500; }
.side nav a:hover { background: var(--surface-2); color: var(--text); }
.side nav a[aria-current="page"] { background: var(--primary); color: var(--on-primary); }
.nav-badge { min-width: 22px; height: 22px; padding: 0 var(--s2); border-radius: var(--r-chip); display: inline-grid; place-items: center;
  font-size: var(--fs-label); font-weight: 500; background: var(--warn); color: var(--g-ink); }
.side-foot { padding: var(--s3); border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: var(--s2); font-size: var(--fs-small); }
.side-foot .btn { justify-content: flex-start; padding: 0; min-height: 32px; }

@media (max-width: 1099px) {
  .frame { display: block; }
  .topbar { display: flex; align-items: center; gap: var(--s2); position: sticky; top: 0; z-index: 30; height: 56px; padding: 0 var(--s2);
    background: var(--surface); border-bottom: 1px solid var(--line); }
  .topbar-title { font-weight: 500; }
  .menu-btn { width: var(--touch); padding: 0; }
  .side { position: fixed; z-index: 45; top: 0; left: 0; bottom: 0; height: auto; width: min(300px, 86vw); transform: translateX(-102%);
    transition: transform var(--t-med) var(--ease); border-right: 1px solid var(--line); }
  .side.open { transform: none; }
  .scrim.open { display: block; position: fixed; inset: 0; z-index: 44; background: var(--overlay); }
}

main { padding: var(--s6) var(--s7); min-width: 0; display: flex; flex-direction: column; gap: var(--s5); }
main > * { width: 100%; max-width: 1320px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; }
.page-head .stack { gap: var(--s1); }
.banner { padding: var(--s3) var(--s4); border-radius: var(--r-btn); border: 1px solid var(--warn); font-size: var(--fs-small); }
.back { font-size: var(--fs-small); color: var(--text-soft); text-decoration: none; }
.back:hover { color: var(--text); }

.search { display: flex; gap: var(--s3); flex-wrap: wrap; }
.search input[type="search"] { flex: 1; min-width: 240px; }
.search select { width: auto; min-width: 180px; }

.side-apps { padding: var(--s3); border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: var(--s1); }
.side-apps .app-link { min-height: 36px; display: flex; align-items: center; color: var(--text-soft); text-decoration: none; font-size: var(--fs-small); }
.side-apps .app-link:hover { color: var(--text); }

.auth { min-height: 100vh; display: grid; place-items: center; padding: var(--s5); }
.auth .card { width: min(440px, 100%); padding: var(--s6); display: flex; flex-direction: column; gap: var(--s5); }
.auth .brands { font-size: var(--fs-small); color: var(--text-soft); }


@media (max-width: 900px) {
  main { padding: var(--s5) var(--s4) var(--s7); }
  .page-head .title { font-size: 26px; }
}