/*
 * Application design system
 * Layer 1: tokens and deterministic layout.
 * base.css remains only as a compatibility layer for legacy page components.
 * premium.css owns page-level presentation and never defines the application shell.
 */
:root {
  --header-h: 64px;
  --sidebar-w: 240px;
  --content-max: 1480px;
  --page-gutter: clamp(20px, 2.5vw, 40px);
  --page-block: 30px;
  --bg: #f5f7fb;
  --card-bg: #ffffff;
  --surface: #ffffff;
  --surface-solid: #ffffff;
  --surface-muted: #f1f3f8;
  --text: #172033;
  --text-secondary: #68738a;
  --text-tertiary: #98a1b3;
  --border: #e6eaf1;
  --border-strong: #d8deea;
  --hover: #f2f1ff;
  --primary: #6d5dfc;
  --primary-soft: #f0efff;
  --primary-gradient: linear-gradient(135deg, #6d5dfc, #5145e5);
  --header-bg: #ffffff;
  --sidebar-bg: #ffffff;
  --footer-bg: #ffffff;
}
[data-theme="dark"] {
  --bg: #0c1019;
  --card-bg: #151b28;
  --surface: #151b28;
  --surface-solid: #151b28;
  --surface-muted: #1b2231;
  --text: #f4f6fb;
  --text-secondary: #a1aabc;
  --text-tertiary: #747f94;
  --border: #293244;
  --border-strong: #354056;
  --hover: rgba(109,93,252,.14);
  --primary: #9187ff;
  --primary-soft: rgba(109,93,252,.14);
  --header-bg: #111722;
  --sidebar-bg: #111722;
  --footer-bg: #111722;
}

*, *::before, *::after { box-sizing: border-box; }
html { min-width: 320px; overflow-x: hidden; }
body { min-width: 320px; margin: 0; overflow-x: hidden; }
#app { min-height: 100vh; }

/* Fixed application chrome */
.app-header {
  position: fixed !important;
  inset: 0 0 auto 0 !important;
  z-index: 1000 !important;
  width: 100% !important;
  height: var(--header-h) !important;
}
.header-inner {
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 var(--page-gutter) !important;
}
.app-layout {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 100vh !important;
  padding: var(--header-h) 0 0 !important;
}
.app-sidebar {
  position: fixed !important;
  z-index: 500 !important;
  inset: var(--header-h) auto 0 0 !important;
  width: var(--sidebar-w) !important;
  height: auto !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}
.app-content {
  width: auto !important;
  min-width: 0 !important;
  min-height: calc(100vh - var(--header-h)) !important;
  margin: 0 0 0 var(--sidebar-w) !important;
  padding: var(--page-block) var(--page-gutter) 64px !important;
}
.guest-layout .app-content {
  width: 100% !important;
  margin-left: 0 !important;
}
.app-content > *:not(.auth-page) {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
}
.immersive-layout, .immersive-content { width: 100%; min-height: 100vh; }
.app-footer { display: none !important; }

/* Predictable page grids */
.feed-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)) !important;
  align-items: start !important;
}
.admin-overview-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.msg-layout, .message-layout { display: grid !important; grid-template-columns: minmax(270px, 320px) minmax(0, 1fr) !important; }

@media (max-width: 1120px) and (min-width: 761px) {
  :root { --sidebar-w: 84px; --page-gutter: 24px; }
  .sidebar-text { display: none !important; }
  .sidebar-item { justify-content: center !important; padding-inline: 0 !important; }
  .sidebar-item:hover { padding-inline: 0 !important; }
  .admin-overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 760px) {
  :root { --header-h: 58px; --page-gutter: 12px; --page-block: 12px; }
  .header-inner { padding-inline: 14px !important; }
  .app-layout { padding: var(--header-h) 0 calc(72px + env(safe-area-inset-bottom)) !important; }
  .app-sidebar { display: none !important; }
  .app-content {
    width: 100% !important;
    min-height: calc(100vh - var(--header-h) - 68px) !important;
    margin-left: 0 !important;
    padding: var(--page-block) var(--page-gutter) 28px !important;
  }
  .guest-layout { padding-bottom: 0 !important; }
  .app-footer {
    display: block !important;
    position: fixed !important;
    z-index: 1000 !important;
    inset: auto 0 0 !important;
  }
  .guest-layout + .app-footer, .guest-layout ~ .app-footer { display: none !important; }
  .feed-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .admin-overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .msg-layout, .message-layout { display: block !important; }
}

@media (max-width: 380px) {
  .feed-grid { gap: 8px !important; }
  .admin-overview-grid { grid-template-columns: 1fr !important; }
}