/* BLC professional layout system
   Loaded after feature/page CSS and before typography-system.css.
   Desktop-only structural normalization; mobile remains intentionally untouched
   until the dedicated mobile pass. */

:root{
  --ui-space-1:4px;
  --ui-space-2:8px;
  --ui-space-3:12px;
  --ui-space-4:16px;
  --ui-space-5:20px;
  --ui-space-6:24px;
  --ui-space-8:32px;
  --ui-page-gap:20px;
  --ui-section-gap:16px;
  --ui-control-height:40px;
  --ui-card-radius:13px;
  --ui-toolbar-radius:12px;
  --ui-card-shadow:0 1px 3px rgba(17,24,39,.045);
}

@media (min-width:1001px){
  /* Keep the desktop sidebar anchored to the viewport while only the workspace scrolls. */
  .app-shell:not(.auth-locked) .sidebar{
    position:fixed!important;
    top:0!important;
    right:0!important;
    bottom:0!important;
    left:auto!important;
    height:100vh!important;
    height:100dvh!important;
    max-height:100dvh!important;
    align-self:start!important;
    overflow:hidden!important;
    overscroll-behavior:contain!important;
  }
  .app-shell:not(.auth-locked) .sidebar nav{
    min-height:0!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    scrollbar-gutter:stable;
  }
}

@media (min-width:1081px){
  /* One predictable vertical rhythm for every authenticated work page. */
  .app-shell:not(.auth-locked) .page.active-page:not(#dashboard):not(#settings){
    display:grid!important;
    align-content:start;
    gap:var(--ui-page-gap)!important;
  }

  /* Page header: context on the right, primary action on the left. */
  .app-shell:not(.auth-locked) .page-title,
  .app-shell:not(.auth-locked) .workspace-header{
    min-height:72px!important;
    margin:0!important;
    padding:0 0 18px!important;
    display:flex!important;
    align-items:flex-end!important;
    justify-content:space-between!important;
    gap:var(--ui-space-6)!important;
    border-bottom:1px solid var(--line,var(--border))!important;
  }
  .app-shell:not(.auth-locked) .page-title>div:first-child,
  .app-shell:not(.auth-locked) .workspace-header>div:first-child{
    min-width:0;
    flex:1 1 auto;
  }
  .app-shell:not(.auth-locked) .page-title .eyebrow,
  .app-shell:not(.auth-locked) .workspace-header .eyebrow{
    margin-bottom:var(--ui-space-1)!important;
  }
  .app-shell:not(.auth-locked) .page-title h2,
  .app-shell:not(.auth-locked) .workspace-header h2{
    margin:0!important;
  }
  .app-shell:not(.auth-locked) .page-title p,
  .app-shell:not(.auth-locked) .workspace-header p{
    max-width:68ch!important;
    margin:var(--ui-space-2) 0 0!important;
  }
  .app-shell:not(.auth-locked) .page-title>.primary,
  .app-shell:not(.auth-locked) .page-title>.secondary,
  .app-shell:not(.auth-locked) .page-title>.calendar-controls{
    flex:0 0 auto;
  }

  /* Search/filter bars are deliberate surfaces rather than floating controls. */
  .app-shell:not(.auth-locked) .toolbar{
    min-height:58px!important;
    margin:0!important;
    padding:9px 10px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:var(--ui-space-3)!important;
    border:1px solid var(--line,var(--border))!important;
    border-radius:var(--ui-toolbar-radius)!important;
    background:var(--card-bg,var(--surface))!important;
    box-shadow:none!important;
  }
  .app-shell:not(.auth-locked) .toolbar input,
  .app-shell:not(.auth-locked) .toolbar select{
    min-height:var(--ui-control-height)!important;
    margin:0!important;
  }
  #events .toolbar input,
  #clients .toolbar input{
    width:min(100%,430px)!important;
    max-width:430px!important;
  }
  #quotes .toolbar{
    display:grid!important;
    grid-template-columns:minmax(260px,1fr) 190px!important;
  }
  #quotes .toolbar input,
  #quotes .toolbar select{
    width:100%!important;
    max-width:none!important;
  }

  /* Shared surface language across cards, lists and work areas. */
  .app-shell:not(.auth-locked) .panel,
  .app-shell:not(.auth-locked) .inventory-card,
  .app-shell:not(.auth-locked) .stock-card,
  .app-shell:not(.auth-locked) .data-card,
  .app-shell:not(.auth-locked) .table-surface,
  .app-shell:not(.auth-locked) .inventory-summary article,
  .app-shell:not(.auth-locked) .calendar-grid,
  .app-shell:not(.auth-locked) .empty-state{
    border-color:var(--line,var(--border))!important;
    border-radius:var(--ui-card-radius)!important;
    background:var(--card-bg,var(--surface))!important;
    box-shadow:var(--ui-card-shadow)!important;
  }

  /* Lists use one row rhythm; table-like lists avoid nested card clutter. */
  .app-shell:not(.auth-locked) .data-list{
    margin:0!important;
    display:grid!important;
    gap:10px!important;
  }
  .app-shell:not(.auth-locked) .data-card{
    min-height:72px!important;
    margin:0!important;
    padding:15px 18px!important;
    align-items:center!important;
  }
  .app-shell:not(.auth-locked) .table-surface{
    overflow:hidden!important;
    padding:0!important;
    gap:0!important;
  }
  .app-shell:not(.auth-locked) .table-surface>.data-card,
  .app-shell:not(.auth-locked) .table-surface .data-card{
    border:0!important;
    border-bottom:1px solid var(--line,var(--border))!important;
    border-radius:0!important;
    box-shadow:none!important;
  }
  .app-shell:not(.auth-locked) .table-surface>.data-card:last-child,
  .app-shell:not(.auth-locked) .table-surface .data-card:last-child{
    border-bottom:0!important;
  }

  /* Summary cards and inventory grids align to a consistent content grid. */
  .app-shell:not(.auth-locked) .inventory-grid,
  .app-shell:not(.auth-locked) .data-grid{
    margin:0!important;
    gap:14px!important;
    align-items:stretch!important;
  }
  .app-shell:not(.auth-locked) .inventory-summary{
    margin:0!important;
    gap:12px!important;
  }
  .app-shell:not(.auth-locked) .inventory-summary article{
    min-height:96px!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
  }

  /* Calculator/workspace sections have a clear step-by-step flow. */
  #calculator .calculator-mode-switch,
  #calculator .calculator-ai-panel,
  #calculator .calculator-workspace{
    margin:0!important;
  }
  #calculator .calculator-form{
    display:grid!important;
    gap:var(--ui-section-gap)!important;
  }
  #calculator .calc-step{
    margin:0!important;
  }
  #calculator .calc-layout{
    gap:var(--ui-section-gap)!important;
    align-items:start!important;
  }
  #calculator .panel-head{
    padding-bottom:var(--ui-space-4)!important;
  }

  /* Calendar controls read as one grouped control. */
  .app-shell:not(.auth-locked) .calendar-controls{
    min-height:var(--ui-control-height)!important;
    padding:4px!important;
    display:flex!important;
    align-items:center!important;
    gap:var(--ui-space-2)!important;
    border:1px solid var(--line,var(--border))!important;
    border-radius:10px!important;
    background:var(--card-bg,var(--surface))!important;
  }
  .app-shell:not(.auth-locked) .calendar-controls .secondary{
    min-height:32px!important;
  }
  .app-shell:not(.auth-locked) .calendar-controls strong{
    min-width:120px;
    text-align:center;
  }

  /* Empty states keep the same visual hierarchy everywhere. */
  .app-shell:not(.auth-locked) .empty-state{
    min-height:250px!important;
    margin:0!important;
    padding:48px 24px!important;
  }

  /* Controls align and do not introduce accidental height differences. */
  .app-shell:not(.auth-locked) .primary,
  .app-shell:not(.auth-locked) .secondary,
  .app-shell:not(.auth-locked) .toolbar input,
  .app-shell:not(.auth-locked) .toolbar select{
    min-height:var(--ui-control-height)!important;
  }
}