/* Operational screens only. Public, authentication and private owner pages keep
   their own layouts. Dialogs are siblings of the verified .app-shell wrapper. */
.app-shell {
  --workspace-sidebar: 252px;
  --workspace-gutter: clamp(20px, 2.7vw, 40px);
  --workspace-card-space: clamp(20px, 2vw, 28px);
  min-height: 100dvh;
  font-size: 14px;
  line-height: 1.5;
}
.app-shell .sidebar {
  width: var(--workspace-sidebar);
  padding: 24px 16px 18px;
  background: #11151a;
  overscroll-behavior: contain;
  scrollbar-color: var(--control-line) transparent;
  scrollbar-width: thin;
}
.app-shell .main-column { margin-left: var(--workspace-sidebar); }
.app-shell .sidebar-logo { padding: 0 12px 24px; }
.app-shell .workspace-switch { padding: 12px; margin: 0 0 22px; border-radius: 10px; }
.app-shell .workspace-logo { width: 38px; height: 38px; flex-shrink: 0; border-radius: 8px; }
.app-shell .workspace-name { gap: 4px; }
.app-shell .workspace-name small { font-size: 12px; }
.app-shell .sidebar-nav { gap: 8px; padding: 0 2px 8px; }
.app-shell .nav-caption { font-size: 10px; letter-spacing: .13em; margin-top: 12px; }
.app-shell .nav-item { min-height: 46px; padding: 11px 13px; gap: 12px; border-radius: 8px; font-size: 14px; }
.app-shell .nav-item svg { width: 19px; height: 19px; }
.app-shell .nav-item.active { background: #2a251c; }
.app-shell .nav-more summary { min-height: 46px; border-radius: 8px; }
.app-shell .sidebar-bottom { padding-top: 16px; gap: 14px; }
.app-shell .sidebar-trial { padding: 15px; border-radius: 9px; }
.app-shell .sidebar-trial p { overflow-wrap: anywhere; }
.app-shell .profile-chip { min-width: 0; padding-top: 16px; }
.app-shell .profile-chip > span:nth-child(2) { min-width: 0; }
.app-shell .profile-chip strong { overflow-wrap: anywhere; }
.app-shell .topbar {
  position: sticky;
  top: 0;
  z-index: 9;
  min-height: 78px;
  height: auto;
  padding: 14px var(--workspace-gutter);
  background: #11151af5;
  backdrop-filter: blur(14px);
  gap: 18px;
}
.app-shell .topbar-left { font-size: 13px; gap: 12px; }
.app-shell .topbar-left strong { font-size: 14px; }
.app-shell .topbar-right { gap: 10px; }
.app-shell .topbar-quick { min-height: 44px; padding: 10px 16px; font-size: 13px; }
.app-shell .topbar-help { font-size: 13px; }
.app-shell .round-avatar { width: 44px; height: 44px; flex-shrink: 0; }
.app-shell .dashboard-content {
  max-width: 1480px;
  padding: 30px var(--workspace-gutter) 48px;
  min-width: 0;
}
.app-shell .dashboard-content :where(a, button, input, select, textarea, summary, [tabindex]) {
  scroll-margin-block: 108px 28px;
}
.app-shell .page-heading { gap: 20px; margin-bottom: 28px; align-items: flex-end; }
.app-shell .page-heading > div { min-width: 0; }
.app-shell .page-heading h1 {
  font-size: clamp(28px, 2.65vw, 36px);
  line-height: 1.15;
  letter-spacing: -.035em;
  overflow-wrap: anywhere;
}
.app-shell .page-heading p { font-size: 14px; line-height: 1.7; max-width: 65ch; }
.app-shell .page-heading-action { gap: 10px; }
.app-shell .small-overline { font-size: 10px; letter-spacing: .14em; }
.app-shell .surface-card { border-radius: 12px; box-shadow: 0 4px 20px #00000012; }
.app-shell .btn { min-height: 44px; font-size: 14px; border-radius: 8px; line-height: 1.4; }
.app-shell .icon-btn { min-width: 44px; min-height: 44px; border-radius: 8px; }
.app-shell :where(button, a, summary):focus-visible { outline: 3px solid var(--gold-hover); outline-offset: 4px; }
.app-shell .workspace-status { padding: 16px 20px; border-radius: 10px; background: var(--surface); }
.app-shell .workspace-status > div { min-width: 0; }
.app-shell .workspace-status p { max-width: 67ch; }
.app-shell .cloud-bar { border-color: var(--line); background: var(--surface); border-radius: 10px; gap: 10px 16px; }
.app-shell .cloud-bar select { min-height: 44px; min-width: 0; border-color: var(--control-line); background: var(--bg); }
.app-shell .cloud-save-state { font-size: 12px; }
.app-shell .setup-mini { padding: 18px 20px; border-radius: 10px; }
.app-shell .stats-grid, .app-shell .finance-stats, .app-shell .closing-stats { gap: 16px; }
.app-shell .stat-card, .app-shell .closing-stat { padding: 22px; gap: 13px; }
.app-shell .stat-card > strong, .app-shell .closing-stat h2 {
  font-size: clamp(26px, 2.6vw, 34px);
  letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.app-shell .stat-top > span:first-child { font-size: 13px; line-height: 1.6; }
.app-shell .stat-change { font-size: 12px; line-height: 1.6; align-items: flex-start; }
.app-shell .stat-change svg { margin-top: 2px; }
.app-shell .stat-icon { width: 36px; height: 36px; border-radius: 9px; }
.app-shell :is(.chart-card, .attention-card, .recent-card, .quick-card, .checkin-card,
  .settings-card, .help-panel, .member-hub-card, .closing-table-card, .closing-cash-card,
  .closing-review-card, .closing-history-card) { padding: var(--workspace-card-space); }
.app-shell .card-head { flex-wrap: wrap; gap: 12px; }
.app-shell .card-head h2 { font-size: 18px; line-height: 1.4; }
.app-shell .card-head p { font-size: 14px; line-height: 1.6; max-width: 60ch; }
.app-shell .overview-layout, .app-shell .overview-layout.lower { gap: 22px; margin-top: 22px; }
.app-shell .overview-primary { gap: 12px; }
.app-shell .quick-actions { gap: 10px; }
.app-shell .quick-actions button { min-height: 54px; font-size: 14px; padding: 12px; border-radius: 8px; }
.app-shell .quick-actions span { width: 34px; height: 34px; border-radius: 7px; }
.app-shell .attention-list button { min-height: 68px; padding: 16px 4px; border-radius: 5px; }
.app-shell .attention-list strong, .app-shell .recent-item strong { font-size: 14px; line-height: 1.5; }
.app-shell .attention-list small, .app-shell .recent-item small { font-size: 12px; line-height: 1.5; }
.app-shell .recent-item { gap: 12px; padding: 16px 0; }
.app-shell .recent-amount { font-size: 13px; font-variant-numeric: tabular-nums; }
.app-shell .mini-stats { gap: 12px; }
.app-shell .mini-stats > div { min-width: 140px; border-radius: 10px; padding: 16px 18px; }
.app-shell .mini-stats strong { font-size: 26px; font-variant-numeric: tabular-nums; }
.app-shell .table-toolbar { padding: 20px; gap: 14px; }
.app-shell .search-field { height: 48px; min-width: 180px; border-radius: 8px; }
.app-shell .segmented { border-radius: 8px; gap: 4px; }
.app-shell .segmented button { min-height: 44px; border-radius: 5px; font-size: 13px; }
.app-shell .member-filter-control { font-size: 14px; }
.app-shell .member-filter-control select { border-radius: 8px; min-height: 46px; }
/* Local/scroll backgrounds shade only the edges with content still offscreen. */
.app-shell .table-scroll {
  min-width: 0;
  max-width: 100%;
  overscroll-behavior-x: contain;
  scrollbar-color: var(--gold) var(--bg);
  background:
    linear-gradient(to right, var(--surface) 30%, transparent) left center / 42px 100% local no-repeat,
    linear-gradient(to left, var(--surface) 30%, transparent) right center / 42px 100% local no-repeat,
    linear-gradient(to right, #00000060, transparent) left center / 14px 100% scroll no-repeat,
    linear-gradient(to left, #00000060, transparent) right center / 14px 100% scroll no-repeat;
}
.app-shell .table-scroll::-webkit-scrollbar { height: 10px; }
.app-shell .table-scroll::-webkit-scrollbar-track { background: var(--bg); }
.app-shell .table-scroll::-webkit-scrollbar-thumb { background: var(--gold-line); border: 2px solid var(--bg); border-radius: 10px; }
.app-shell .table-scroll:focus-visible { outline: 3px solid var(--gold-hover); outline-offset: -3px; }
.app-shell .data-table th { font-size: 11px; letter-spacing: .04em; padding: 16px 20px; }
.app-shell .data-table td { font-size: 14px; line-height: 1.6; padding: 16px 20px; }
.app-shell .data-table td strong { font-size: 14px; line-height: 1.5; }
.app-shell .member-cell { min-width: 200px; gap: 12px; }
.app-shell .member-cell > div { min-width: 0; }
.app-shell .member-cell strong { white-space: normal; max-width: 32ch; overflow-wrap: anywhere; }
.app-shell .member-avatar { width: 38px; height: 38px; border-radius: 8px; flex-shrink: 0; }
.app-shell .table-actions { gap: 8px; align-items: center; }
.app-shell .table-actions > button { min-width: 44px; min-height: 44px; border-radius: 7px; }
.app-shell .member-tools summary { border-radius: 7px; }
.app-shell .table-bottom { padding: 16px 20px; font-size: 12px; align-items: center; }
.app-shell .table-bottom > span { line-height: 1.7; }
.app-shell .member-hub-grid, .app-shell .member-hub-history-grid { gap: 22px; }
.app-shell .member-hub-access { border-radius: 10px; }
.app-shell .member-hub-total { padding: 16px; border-radius: 8px; }
.app-shell .member-hub-facts { gap: 22px 24px; }
.app-shell .member-hub-facts dt { font-size: 12px; }
.app-shell .member-hub-facts dd { font-size: 15px; }
.app-shell .member-hub-service-actions { gap: 10px; }
.app-shell .closing-section-head h2 { font-size: 21px; }
.app-shell .closing-stat-breakdown { gap: 10px; }
.app-shell .closing-stat small { font-size: 12px; line-height: 1.7; }
.app-shell .closing-bottom { gap: 22px; }
.app-shell .closing-cash-metrics > div { border-radius: 8px; }
.app-shell .closing-breakdown summary, .app-shell .closing-expenses summary,
.app-shell .closing-voids summary { min-height: 52px; }
.app-shell .closing-note { font-size: 14px; line-height: 1.7; }
.app-shell .report-period { font-size: 13px; gap: 10px; }
.app-shell .report-period input { min-height: 44px; min-width: 0; font-size: 14px; border-radius: 8px; }
.app-shell .modal-form { gap: 20px; }
.app-shell .modal-form label { font-size: 14px; line-height: 1.5; }
.app-shell .modal-form :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  min-height: 48px;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 16px;
}
.app-shell .modal-form textarea { min-height: 110px; }
.app-shell .settings-rows > div { align-items: flex-start; gap: 20px; }
.app-shell .settings-rows strong { max-width: 65%; }
.app-shell .team-row > div, .app-shell .history-row > div { min-width: 0; }
.app-shell .team-row strong, .app-shell .team-row small, .app-shell .history-row small { overflow-wrap: anywhere; }
.app-shell .team-row select { min-height: 44px; font-size: 14px; max-width: 100%; }
.app-shell ~ .modal-backdrop { padding: 24px; }
.app-shell ~ .modal-backdrop .modal {
  max-height: calc(100dvh - 48px);
  padding: 28px;
  border-radius: 16px;
  scroll-padding-block: 20px;
}
.app-shell ~ .modal-backdrop .modal:not(.modal-wide) { width: min(100%, 550px); }
.app-shell ~ .modal-backdrop .modal-head { gap: 16px; margin-bottom: 24px; }
.app-shell ~ .modal-backdrop .modal-head > div { min-width: 0; }
.app-shell ~ .modal-backdrop .modal-head h2 { font-size: 24px; line-height: 1.25; overflow-wrap: anywhere; }
.app-shell ~ .modal-backdrop .icon-btn { min-width: 44px; min-height: 44px; flex-shrink: 0; }
.app-shell ~ .modal-backdrop .modal-form { gap: 20px; }
.app-shell ~ .modal-backdrop .modal-form label { font-size: 14px; line-height: 1.5; }
.app-shell ~ .modal-backdrop .modal-form :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  min-height: 48px;
  font-size: 16px;
  padding: 12px 14px;
  border-radius: 8px;
}
.app-shell ~ .modal-backdrop .modal-actions { gap: 12px; padding-top: 22px; }
.app-shell ~ .modal-backdrop .modal-actions .btn { min-height: 46px; border-radius: 8px; font-size: 14px; }

@media (hover: hover) and (pointer: fine) {
  .app-shell .quick-actions button { transition: border-color .18s ease, background-color .18s ease, transform .18s ease; }
  .app-shell .quick-actions button:hover { transform: translateX(2px); }
  .app-shell .nav-item, .app-shell .attention-list button { transition: color .18s ease, background-color .18s ease, border-color .18s ease; }
}
@media (max-width: 1180px) {
  .app-shell { --workspace-sidebar: 236px; --workspace-gutter: 24px; }
  .app-shell .sidebar-logo { padding-inline: 8px; }
  .app-shell .sidebar-logo .brand-wordmark { width: 176px; }
  .app-shell .topbar-left > span, .app-shell .topbar-left > svg { display: none; }
  .app-shell .member-hub-grid, .app-shell .member-hub-history-grid { grid-template-columns: minmax(0, 1fr); }
  .app-shell .overview-layout, .app-shell .overview-layout.lower { grid-template-columns: minmax(0, 1fr); }
  .app-shell .closing-stats, .app-shell .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .app-shell .attendance-layout, .app-shell .feedback-layout { grid-template-columns: minmax(0, 1fr); }
  .app-shell .page-heading { flex-wrap: wrap; align-items: flex-start; }
  .app-shell .finance-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Match the existing 780px menu logic so hidden navigation stays inert. */
@media (max-width: 780px) {
  .app-shell { --workspace-gutter: 22px; --workspace-sidebar: min(290px, calc(100vw - 24px)); }
  .app-shell .sidebar { padding-top: 22px; }
  .app-shell .sidebar-logo { padding-inline: 8px; }
  .app-shell .sidebar-logo .brand-wordmark { width: 183px; max-width: 100%; }
  .app-shell .main-column { margin-left: 0; }
  .app-shell .topbar { min-height: 72px; padding-block: 12px; gap: 12px; }
  .app-shell .topbar-left { gap: 8px; }
  .app-shell .topbar-left strong { white-space: normal; line-height: 1.3; }
  .app-shell .dashboard-content { padding-top: 24px; }
  .app-shell .workspace-status { align-items: stretch; }
  .app-shell .workspace-status-access { justify-content: flex-start; }
  .app-shell .table-toolbar { flex-direction: column; align-items: stretch; }
  .app-shell .table-toolbar .search-field { width: 100%; min-width: 0; max-width: none; flex: auto; }
  .app-shell .member-filter-control { width: 100%; justify-content: space-between; }
  .app-shell .member-filter-control select { flex: 1; min-width: 0; }
  .app-shell .segmented { width: 100%; }
  .app-shell .segmented button { flex: 1; white-space: normal; }
  .app-shell .cloud-bar select { max-width: 100%; }
  .app-shell .mini-stats > div { min-width: 0; }
  .app-shell .settings-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 545px) {
  .app-shell { --workspace-gutter: 16px; --workspace-card-space: 20px; }
  .app-shell .page-heading { gap: 18px; margin-bottom: 24px; }
  .app-shell .page-heading h1 { font-size: 29px; }
  .app-shell .page-heading-action { width: 100%; gap: 10px; }
  .app-shell .page-heading-action .btn { flex: 1 1 140px; padding: 11px 14px; }
  .app-shell .stat-card, .app-shell .closing-stat { padding: 17px 15px; }
  .app-shell .stats-grid, .app-shell .finance-stats, .app-shell .closing-stats { gap: 12px; }
  .app-shell .stat-card > strong, .app-shell .closing-stat h2 { font-size: clamp(22px, 6.4vw, 30px); }
  .app-shell .stat-top > span:first-child { font-size: 12px; }
  .app-shell .stat-change { font-size: 12px; }
  .app-shell .stat-icon { width: 30px; height: 30px; }
  .app-shell .table-toolbar { padding: 17px; gap: 12px; }
  .app-shell .data-table th, .app-shell .data-table td { padding: 16px; }
  .app-shell .table-bottom { padding: 16px; gap: 12px; }
  .app-shell .mini-stats { gap: 8px; }
  .app-shell .mini-stats > div { padding: 14px 10px; }
  .app-shell .mini-stats span { font-size: 12px; }
  .app-shell .workspace-status, .app-shell .setup-mini { padding: 16px; }
  .app-shell .member-hub-service-actions { grid-column: 1 / -1; }
  .app-shell .member-hub-service-actions .btn, .app-shell .member-hub-actions .btn { flex: 1 1 140px; }
  .app-shell .member-hub-pagination { align-items: stretch; }
  .app-shell .member-hub-pagination > div { justify-content: space-between; }
  .app-shell .member-hub-facts { gap: 18px; }
  .app-shell .closing-header-actions .report-period { min-width: 0; justify-content: space-between; }
  .app-shell .closing-header-actions .report-period input { flex: 1; max-width: 190px; }
  .app-shell .closing-cash-summary, .app-shell .closing-review-summary,
  .app-shell .closing-expense-methods { grid-template-columns: minmax(0, 1fr) minmax(0, .7fr); }
  .app-shell .closing-cash-metrics { grid-template-columns: minmax(0, 1fr); }
  .app-shell .team-row .team-actions { flex-wrap: wrap; }
  .app-shell .team-row .team-actions select { flex: 1 1 150px; }
  .app-shell .team-row .team-actions .btn { flex: 1 1 120px; }
  .app-shell .settings-rows > div { gap: 12px; }
  .app-shell .settings-rows strong { max-width: 60%; }
  .app-shell ~ .modal-backdrop { padding: 12px; align-items: center; }
  .app-shell ~ .modal-backdrop .modal { max-height: calc(100dvh - 24px); padding: 22px 20px; border-radius: 13px; }
  .app-shell ~ .modal-backdrop .modal-head h2 { font-size: 23px; }
  .app-shell ~ .modal-backdrop .modal-actions .btn { flex: 1 1 120px; }
  .app-shell ~ .modal-backdrop .form-row { grid-template-columns: minmax(0, 1fr); }
  .app-shell ~ .modal-backdrop .import-pick { flex-direction: column; align-items: stretch; }
}
@media (max-width: 460px) {
  .app-shell .topbar { flex-wrap: wrap; gap: 8px; }
  .app-shell .topbar-left { flex: 1 1 100%; }
  .app-shell .topbar-right { flex: 1 1 100%; justify-content: flex-end; gap: 10px; }
  .app-shell .topbar-quick { flex: 1; font-size: 14px; }
  .app-shell .topbar-help { min-width: 44px; }
  .app-shell .dashboard-content :where(a, button, input, select, textarea, summary, [tabindex]) { scroll-margin-top: 150px; }
  .app-shell .member-hub-facts { grid-template-columns: minmax(0, 1fr); }
  .app-shell .stat-icon { display: none; }
  .app-shell .recent-item { flex-wrap: wrap; }
  .app-shell .recent-amount { margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .app-shell .sidebar, .app-shell .quick-actions button, .app-shell .nav-item,
  .app-shell .attention-list button { transition: none; }
  .app-shell .quick-actions button:hover { transform: none; }
}
@media print {
  .app-shell .sidebar, .app-shell .topbar { display: none !important; }
  .app-shell .main-column { margin-left: 0; }
  .app-shell .dashboard-content { padding: 0; max-width: none; }
  .app-shell .surface-card { box-shadow: none; }
  .app-shell .table-scroll { overflow: visible; background: none; }
  .app-shell .data-table { white-space: normal; }
  .app-shell .stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .app-shell ~ .modal-backdrop { position: static; padding: 0; background: white; }
  .app-shell ~ .modal-backdrop .modal { max-height: none; box-shadow: none; }
}