/* ==========================================================================
   App shell — mobile first
   Mobile (<768): top header + bottom navigation
   Tablet (768–1279): navigation rail (88px)
   Desktop (>=1280): sidebar (256px)
   ========================================================================== */
.app{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.app__nav{display:none}
.app__main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}
@media (min-width:768px){
  .app{flex-direction:row}
  .app__nav{display:flex;position:sticky;top:0;height:100vh;height:100dvh;flex:none}
  .app__main{padding-bottom:0}
}

/* Top header */
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:var(--spacing-sm);height:var(--topbar-height);padding:0 var(--page-padding-x);background:var(--color-surface);border-bottom:var(--border-default) solid var(--color-border)}
.topbar__brand{display:none}
.topbar__brand img{height:36px;width:auto}

.global-search{flex:1 1 auto;min-width:0;max-width:440px;display:flex;align-items:center;gap:10px;height:var(--size-control);padding:0 18px;border-radius:var(--radius-input);background:var(--color-surface-muted);border:var(--border-default) solid transparent;transition:border-color var(--transition-fast),background var(--transition-fast)}
.global-search:focus-within{background:var(--color-surface);border-color:var(--color-focus)}
.global-search input{flex:1;min-width:0;border:0;background:transparent;outline:0;font-size:var(--fs-body-sm)}
.global-search input::placeholder{color:var(--color-text-muted)}
.topbar__actions{margin-inline-start:auto;display:flex;align-items:center;gap:var(--spacing-xs)}
@media (max-width:767.98px){.global-search{max-width:none}.topbar__actions{margin-inline-start:0}}

/* Page */
.page{width:100%;max-width:var(--content-max-width);margin:0 auto;display:flex;flex-direction:column}
.page-header{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-sm);padding:20px var(--page-padding-x) 16px}
.page-header__text{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1 1 auto}
.page-header__title{font-size:var(--fs-page-title);line-height:var(--lh-page-title);font-weight:var(--fw-bold)}
.page-header__subtitle{color:var(--color-text-muted)}
.page-header__actions{display:flex;align-items:center;gap:var(--spacing-xs);flex:none}
.page-header--stack{flex-direction:column;align-items:stretch}
.page-header--stack .page-header__actions{justify-content:flex-start}
@media (min-width:768px){.page-header{padding:24px var(--page-padding-x) 16px;gap:var(--spacing-md)}}
@media (min-width:1280px){.page-header{padding:28px var(--page-padding-x) 24px}}
.page-body{display:flex;flex-direction:column;gap:var(--spacing-md);padding:0 var(--page-padding-x) 32px}
@media (min-width:768px){.page-body{gap:var(--spacing-lg)}}
@media (min-width:1280px){.page-body{gap:var(--spacing-xl);padding-bottom:40px}}
.breadcrumb{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:var(--fs-caption);line-height:var(--lh-caption);font-weight:var(--fw-medium);color:var(--color-text-muted)}
.breadcrumb a{color:var(--color-primary)}
.breadcrumb a:hover{text-decoration:underline}
@media (min-width:1280px){.breadcrumb{font-size:var(--fs-body-sm);line-height:var(--lh-body-sm)}}

/* Grids */
.grid-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--spacing-sm)}
@media (min-width:768px){.grid-stats{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1280px){.grid-stats{grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--spacing-md)}.grid-stats--4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.grid-stats--4{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:768px){.grid-stats--4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.grid-actions{display:grid;grid-template-columns:1fr;gap:var(--spacing-sm)}
@media (min-width:1280px){.grid-actions{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--spacing-md)}}
.two-col{display:flex;flex-direction:column;gap:var(--spacing-md)}
.two-col__side{display:flex;flex-direction:column;gap:var(--spacing-md)}
.two-col__main{display:flex;flex-direction:column;gap:var(--spacing-md);min-width:0}
@media (min-width:1280px){
  .two-col{flex-direction:row-reverse;align-items:flex-start;gap:var(--spacing-xl)}
  .two-col--start{flex-direction:row}
  .two-col__side{width:360px;flex:none;position:sticky;top:96px;gap:var(--spacing-xl)}
  .two-col__main{flex:1;gap:var(--spacing-xl)}
}
.form-layout{display:flex;flex-direction:column;gap:var(--spacing-md)}
.form-layout__form{display:flex;flex-direction:column;gap:var(--spacing-md);min-width:0}
.form-layout__guide{display:flex;flex-direction:column;gap:var(--spacing-sm)}
@media (min-width:768px) and (max-width:1279.98px){.form-layout__guide{order:2}}
@media (min-width:1280px){
  .form-layout{flex-direction:row-reverse;align-items:flex-start;gap:var(--spacing-xl);justify-content:center}
  .form-layout__form{flex:1 1 auto;max-width:800px;min-width:0;gap:var(--spacing-xl)}
  .form-layout__guide{order:0;width:296px;flex:none;gap:var(--spacing-xl);position:sticky;top:96px}
}
.field-pair{display:grid;grid-template-columns:1fr;gap:var(--spacing-md)}
@media (min-width:1280px){.field-pair{grid-template-columns:1fr 1fr;gap:var(--spacing-lg)}}
@media (min-width:768px) and (max-width:1279.98px){.field-pair--tablet{grid-template-columns:1fr 1fr}}
.avatar-btn{border-radius:50%;flex:none}
.avatar-btn:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}
@media (min-width:1280px){.topbar__avatar{display:none}}
#main{outline:0;flex:1}
.skip-link{position:fixed;top:8px;inset-inline-start:8px;z-index:200;padding:10px 16px;border-radius:999px;background:var(--color-primary);color:#fff;font-weight:var(--fw-semibold);transform:translateY(-200%)}
.skip-link:focus{transform:none}