/* ============================================================================
   SPUQC TAS prototype — app.css
   Prototype-only layout (shell grid, page scaffolding). NO token definitions,
   NO raw colors — everything references design-system.css tokens.
   ========================================================================== */

/* App shell grid — DS §9.1 */
.app-shell {
  display: grid;
  grid-template-columns: [nav] auto [main] 1fr;
  grid-template-rows: [topbar] auto [body] 1fr;
  grid-template-areas:
    "topbar topbar"
    "nav    main";
  min-height: 100vh;
}
.app-main {
  grid-area: main;
  padding: var(--space-6);
  min-width: 0;
}
@media (max-width: 1023px) {
  .app-shell { grid-template-columns: 1fr; grid-template-areas: "topbar" "main"; }
  .leftnav { display: none; }
  .app-main { padding: var(--space-4); }
}

/* Public routes (login, kiosk) mount full-bleed — shell chrome hidden */
.app-shell--public { display: block; }

/* Dashboard composition — DS §9.3 */
.dash-feed-col { display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; }
.dash-side-col { display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; }

/* Detail pages — DS §9.4: main 8 cols + side panel 4 cols */
.detail-grid { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-6); align-items: start; }
@media (max-width: 1023px) { .detail-grid { grid-template-columns: 1fr; } }

/* Settings landing cards */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-6); }

/* Feed header inside a card */
.feed-card__header {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-4) var(--space-4) var(--space-3);
  flex-wrap: wrap;
}
.feed-card__title { font-size: var(--text-lg); font-weight: var(--fw-semibold); color: var(--text-primary); }

/* Demo state switcher (dev affordance for honest states) */
.state-switcher {
  position: fixed; bottom: var(--space-4); left: var(--space-4);
  z-index: var(--z-dropdown);
  display: flex; align-items: center; gap: var(--space-2);
  background: var(--color-surface); border-radius: var(--radius-full);
  box-shadow: var(--shadow-md); padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs); color: var(--text-muted);
}
.state-switcher select {
  border: 0; background: transparent; font-size: var(--text-xs); color: var(--text-primary); cursor: pointer;
}
@media print { .state-switcher { display: none; } }

/* Role switcher chip in topbar user menu */
.user-menu { position: relative; }

/* Roles & permissions matrix */
.rbac-matrix td.rbac-yes { color: var(--color-success); }
.rbac-matrix td.rbac-no { color: var(--text-disabled); }
.rbac-matrix td { text-align: center; }
.rbac-matrix td.rbac-perm { text-align: left; }

/* Report result placeholder spacing */
.filters-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-4); }

/* Kiosk success check */
.kiosk-success { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-4); padding: var(--space-8) 0; }
.kiosk-success__icon { display: inline-flex; width: 64px; height: 64px; color: var(--color-success); }