/* ==========================================================================
   BUSIFY — APP SHELL LAYOUT
   ========================================================================== */

.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  min-height: 100vh;
  transition: grid-template-columns var(--duration-slow) var(--ease-standard);
}

/* Every page wraps <header class="app-header"> + <main class="app-main">
   together in one unclassed <div> — that div, not .app-main, is the
   actual CSS Grid item sitting in the "1fr" track. Grid items default to
   min-width:auto (their content's min-content size), so without this,
   ANY wide content anywhere on the page (a data table, a row of tabs
   that doesn't wrap, a toolbar of filters) silently forced this whole
   track — and the entire page — wider than the viewport. This one rule
   was the root cause behind a 320–768px horizontal-overflow audit that
   initially flagged nearly every internal page in the app; min-width:0
   directly on .app-main alone did NOT fix it, since .app-main is a
   normal block child of THIS div, not the grid item itself. */
.app-shell > div {
  min-width: 0;
}

.app-shell.is-collapsed {
  grid-template-columns: var(--sidebar-width-collapsed) 1fr;
}

/* ---------- Sidebar ---------- */
.sidebar {
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  height: 100vh;
  position: sticky;
  top: 0;
  overflow-y: auto;
  z-index: var(--z-sidebar);
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5);
  height: var(--header-height);
}

.brand-mark {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  flex-shrink: 0;
  box-shadow: var(--clay-shadow-button);
}

.brand-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  white-space: nowrap;
}

.app-shell.is-collapsed .brand-name,
.app-shell.is-collapsed .nav-label,
.app-shell.is-collapsed .nav-section-title,
.app-shell.is-collapsed .sidebar-plan {
  display: none;
}

.app-shell.is-collapsed .sidebar-brand { justify-content: center; }
.app-shell.is-collapsed .nav-item { justify-content: center; }

.sidebar-nav {
  flex: 1;
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  padding: var(--space-4) var(--space-3) var(--space-2);
}

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  font-weight: 500;
  font-size: var(--text-body);
  position: relative;
  transition: background var(--duration-fast), color var(--duration-fast);
}

.nav-item:hover {
  background: var(--color-border-subtle);
  color: var(--color-text-primary);
}

.nav-item.is-active {
  background: var(--color-primary-subtle);
  color: var(--color-primary);
  font-weight: 600;
}

.nav-item .icon { flex-shrink: 0; }

.sidebar-footer {
  padding: var(--space-3);
  border-top: 1px solid var(--color-border-subtle);
}

.sidebar-plan {
  background: var(--color-primary-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin: var(--space-2) var(--space-1) var(--space-3);
}

/* ---------- Header ---------- */
.app-header {
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 0 var(--space-6);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
  position: sticky;
  top: 0;
  z-index: var(--z-header);
}

.header-left {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-width: 0;
}

.header-right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.mobile-menu-btn { display: none; }

.header-search {
  display: none;
}

@media (min-width: 900px) {
  .header-search {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 320px;
    height: 40px;
    padding: 0 var(--space-4);
    border-radius: var(--radius-full);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
  }
}

.header-search kbd {
  margin-left: auto;
  font-size: 11px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 5px;
  padding: 1px 6px;
}

/* ---------- Main content ---------- */
.app-main {
  padding: var(--space-6);
  max-width: var(--content-max-width);
  width: 100%;
  /* Grid items default to min-width:auto (their content's min-content
     size) — without this, a wide table/card anywhere on the page forces
     this whole track wider than the viewport, and the entire app-shell
     overflows horizontally. This single line was the root cause behind
     the overwhelming majority of a 320–768px overflow audit across every
     internal page (dashboard/orders/reports/etc. all share this shell) —
     each page's own wide content (a table, a stat grid) was silently
     stretching the page instead of scrolling internally. */
  min-width: 0;
}

.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}

.page-head-text p {
  margin-top: 4px;
}

.page-actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* ---------- Grids ---------- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
  margin-bottom: var(--space-6);
}

.dashboard-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-5);
  align-items: start;
}

.quick-action-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.quick-action-grid.cols-5 { grid-template-columns: repeat(5, 1fr); }

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}

/* ---------- Mobile bottom nav ---------- */
.mobile-tabbar {
  display: none;
}

@media (max-width: 767px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .mobile-menu-btn { display: inline-flex; }
  .app-main { padding: var(--space-4); padding-bottom: 88px; }
  .stat-grid { grid-template-columns: 1fr 1fr; gap: var(--space-3); }
  .quick-action-grid { grid-template-columns: 1fr 1fr; }
  .quick-action-grid.cols-5 { grid-template-columns: 1fr 1fr; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .two-col { grid-template-columns: 1fr; }

  .mobile-tabbar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 64px;
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    z-index: var(--z-header);
    padding-bottom: env(safe-area-inset-bottom);
  }

  .tabbar-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: var(--color-text-muted);
    font-size: 11px;
    font-weight: 600;
  }

  .tabbar-item.is-active { color: var(--color-primary); }

  .tabbar-item.fab-item .tabbar-fab {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    background: var(--color-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -22px;
    box-shadow: var(--clay-shadow-button);
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .quick-action-grid { grid-template-columns: repeat(3, 1fr); }
  .quick-action-grid.cols-5 { grid-template-columns: repeat(3, 1fr); }
  .dashboard-grid { grid-template-columns: 1fr; }
}

/* ---------- Dashboard polish: no overflow, tidy quick actions ---------- */
.dashboard-grid > * { min-width: 0; }
.dashboard-grid > .card, .app-main .card { min-width: 0; max-width: 100%; }
.chart-toggle { max-width: 100%; overflow-x: auto; }
.quick-action-grid.cols-5 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
@media (max-width: 767px) {
  .quick-action-grid.cols-5 { grid-template-columns: 1fr 1fr; }
  .quick-action-grid.cols-5 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .dashboard-grid { grid-template-columns: minmax(0, 1fr); }
  .quick-action-grid.cols-5 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .quick-action-grid.cols-5 { grid-template-columns: repeat(6, 1fr); }
  .quick-action-grid.cols-5 > * { grid-column: span 2; }
  .quick-action-grid.cols-5 > :nth-child(n+4) { grid-column: span 3; }
}

/* Compact quick actions on phones: icon beside label so the first screen shows real numbers. */
@media (max-width: 767px) {
  .quick-action-grid { gap: var(--space-3); margin-bottom: var(--space-5); }
  .quick-action-grid .quick-action { flex-direction: row; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); }
  .quick-action-grid .quick-action .text-card-title { font-size: 14px; line-height: 1.25; }
  .quick-action-icon { flex: none; width: 34px; height: 34px; }
}

/* Admin on phones: brand + sign out on one row, tabs scroll sideways underneath */
@media (max-width: 767px) {
  .admin-shell .sidebar {
    display: flex !important; flex-direction: row; flex-wrap: wrap; align-items: center;
    position: static; width: 100%; height: auto; min-height: 0; padding: 10px 12px 0;
    border-right: 0; border-bottom: 1px solid var(--color-border);
  }
  .admin-shell .sidebar-brand { flex: 1; padding: 0; }
  .admin-shell .sidebar-footer { order: 2; padding: 0; border: 0; margin: 0; width: auto; }
  .admin-shell .sidebar-nav { order: 3; flex: 0 0 100%; width: 100%; max-width: 100%; display: flex; flex-direction: row; gap: 4px; overflow-x: auto; padding: 8px 0 10px; }
  .admin-shell .nav-item { flex: none; white-space: nowrap; padding: 8px 12px; }
  .admin-shell .nav-item [data-icon] { display: none; }
}