/* BeverageHub HARD APP COLOR CONTRACT
   Non-negotiable: dark burgundy filled surfaces belong ONLY to the sidebar/navigation.
   The authenticated workspace is light. Blue is the workspace accent; gradients are reserved
   for hero/summary surfaces so the UI stays calm, readable and premium. */

:root{
  --bh-hard-canvas:#ffffff;
  --bh-hard-surface:#ffffff;
  --bh-hard-soft:#f8fafc;
  --bh-hard-soft-blue:#eff6ff;
  --bh-hard-border:#dde5ef;
  --bh-hard-border-strong:#cfd9e6;
  --bh-hard-text:#172033;
  --bh-hard-muted:#667085;
  --bh-hard-accent:#2563eb;
  --bh-hard-accent-dark:#1d4ed8;
  --bh-hard-accent-soft:#eff6ff;
  --bh-hard-accent-border:#bfdbfe;
  --bh-hard-hero:linear-gradient(135deg,#ffffff 0%,#f5f9ff 45%,#e8f1ff 100%);
  --bh-hard-summary:linear-gradient(135deg,#f4f8ff 0%,#e4eeff 55%,#d8e7ff 100%);
  --bh-hard-shadow:0 8px 24px rgba(15,23,42,.06);
  --bh-hard-shadow-soft:0 3px 12px rgba(15,23,42,.045);
  --bh-panel-radius:10px;
  --bh-control-radius:7px;
  --bh-space-1:4px;
  --bh-space-2:8px;
  --bh-space-3:12px;
  --bh-space-4:16px;
  --bh-space-5:24px;
  --bh-space-6:32px;
}

/* Workspace tokens. Sidebar is deliberately outside this scope. */
body .app.app>main,
body .app.app>main *{
  --bh-burgundy:#2563eb!important;
  --bh-burgundy-dark:#1d4ed8!important;
  --ts-accent:#2563eb!important;
  --ts-accent-2:#3b82f6!important;
  --ts-accent-dark:#1d4ed8!important;
  --ts-accent-soft:#eff6ff!important;
  --team-accent:#2563eb!important;
  --team-accent-soft:#eff6ff!important;
  --batch-wine:#2563eb!important;
  --batch-wine-soft:#eff6ff!important;
}

body .app.app>main{
  background:var(--bh-hard-canvas)!important;
  background-color:var(--bh-hard-canvas)!important;
  background-image:none!important;
  color:var(--bh-hard-text)!important;
}

/* Core surfaces and the main canvas remain white. Gradients are never the default card treatment. */
body .app.app>main .panel,
body .app.app>main .table-wrap,
body .app.app>main .team-sales-v2-controls,
body .app.app>main .team-sales-v2-leaderboard,
body .app.app>main .team-sales-v2-days,
body .app.app>main .team-sales-v2-item-finder,
body .app.app>main .team-sales-table-panel,
body .app.app>main .recipe-manager .panel,
body .app.app>main .recipe-section,
body .app.app>main .recipe-accordion article,
body .app.app>main .batching-controls,
body .app.app>main .batching-table,
body .app.app>main .batching-elements,
body .app.app>main .batching-guidance article{
  background:var(--bh-hard-surface)!important;
  background-color:var(--bh-hard-surface)!important;
  background-image:none!important;
  border-color:var(--bh-hard-border)!important;
  color:var(--bh-hard-text)!important;
  box-shadow:var(--bh-hard-shadow-soft)!important;
}

/* Hero surfaces: one restrained gradient focal point per module.
   team-sales-v2-head is deliberately excluded here -- team-sales-info-
   cleanup.css strips it down to a zero-footprint action row (no
   padding/border/background), and this shared hero treatment was
   fighting that, redrawing the light-blue card it was supposed to
   remove. */
body .app.app>main .team-sales-hero,
body .app.app>main .commercial-hero,
body .app.app>main .house-tonic-hero,
body .app.app>main .library-hero,
body .app.app>main .my-tasks-welcome,
body .app.app>main .recipe-hero,
body .app.app>main .week-selector{
  background:var(--bh-hard-hero)!important;
  background-color:#f5f9ff!important;
  border-color:#d8e5f7!important;
  color:var(--bh-hard-text)!important;
  box-shadow:var(--bh-hard-shadow)!important;
}
body .app.app>main .week-selector{
  border-left-color:#60a5fa!important;
}
body .app.app>main .team-sales-v2-head::before{
  background:linear-gradient(180deg,#60a5fa,#2563eb)!important;
}

/* Primary summary surfaces: visually important, but still light. */
body .app.app>main .stream-card.stream-total,
body .app.app>main .revenue-kpis article:last-child,
body .app.app>main .batching-summary .total,
body .app.app>main .team-sales-v2-kpis article.primary,
body .app.app>main .team-sales-kpis article.net{
  background:var(--bh-hard-summary)!important;
  background-color:#e8f1ff!important;
  background-image:var(--bh-hard-summary)!important;
  border-color:#bdd3f6!important;
  color:var(--bh-hard-text)!important;
  box-shadow:0 8px 22px rgba(37,99,235,.10)!important;
}
body .app.app>main .team-sales-v2-kpis article.primary::before{
  height:3px!important;
  background:linear-gradient(90deg,#60a5fa,#2563eb)!important;
}
body .app.app>main :is(.stream-card.stream-total,.revenue-kpis article:last-child,.batching-summary .total,.team-sales-v2-kpis article.primary,.team-sales-kpis article.net) :is(h1,h2,h3,h4,b,strong){
  color:var(--bh-hard-text)!important;
}
body .app.app>main :is(.stream-card.stream-total,.revenue-kpis article:last-child,.batching-summary .total,.team-sales-v2-kpis article.primary,.team-sales-kpis article.net) :is(small,span,p,em){
  color:#61728a!important;
}

/* Hero typography is always dark/readable. */
body .app.app>main :is(.team-sales-v2-head,.team-sales-hero,.commercial-hero,.house-tonic-hero,.library-hero,.my-tasks-welcome,.recipe-hero,.week-selector) :is(h1,h2,h3,h4,b,strong){
  color:var(--bh-hard-text)!important;
}
body .app.app>main :is(.team-sales-v2-head,.team-sales-hero,.commercial-hero,.house-tonic-hero,.library-hero,.my-tasks-welcome,.recipe-hero,.week-selector) :is(small,p,span,em){
  color:var(--bh-hard-muted)!important;
}

/* Default workspace buttons are neutral, not wall-to-wall blue. */
body .app.app>main button{
  background:#fff!important;
  background-color:#fff!important;
  background-image:none!important;
  border-color:var(--bh-hard-border-strong)!important;
  color:#344054!important;
  box-shadow:none!important;
}
body .app.app>main button:hover:not(:disabled){
  background:#f8fbff!important;
  background-color:#f8fbff!important;
  border-color:#b9cbe2!important;
  color:#1f3f6d!important;
}

/* Explicit primary actions only. */
body .app.app>main button.primary,
body .app.app>main button[type="submit"],
body .app.app>main .report-action-buttons>button:not(.secondary):not(.sign-out-btn),
body .app.app>main .batching-actions>button:not(.secondary),
body .app.app>main .batching-editor button:not(.secondary):not(.danger):not(.ghost):not(.icon-btn),
body .app.app>main .recipe-library-head button,
body .app.app>main .recipe-edit,
body .app.app>main .recipe-section>header button{
  background:linear-gradient(135deg,#3b82f6,#2563eb)!important;
  background-color:#2563eb!important;
  background-image:linear-gradient(135deg,#3b82f6,#2563eb)!important;
  border-color:#2563eb!important;
  color:#fff!important;
  box-shadow:0 4px 12px rgba(37,99,235,.16)!important;
}
body .app.app>main button.primary:hover:not(:disabled),
body .app.app>main button[type="submit"]:hover:not(:disabled),
body .app.app>main .report-action-buttons>button:not(.secondary):not(.sign-out-btn):hover:not(:disabled),
body .app.app>main .batching-actions>button:not(.secondary):hover:not(:disabled),
body .app.app>main .recipe-library-head button:hover:not(:disabled),
body .app.app>main .recipe-edit:hover:not(:disabled),
body .app.app>main .recipe-section>header button:hover:not(:disabled){
  background:linear-gradient(135deg,#2563eb,#1d4ed8)!important;
  background-color:#1d4ed8!important;
  border-color:#1d4ed8!important;
  color:#fff!important;
}

/* Secondary, utility and navigation controls stay light. */
body .app.app>main :is(.secondary,.icon-btn,.current-user-trigger,.notification-trigger,.admin-registration-alert,.mapping-item-open,.detail-section-toggle,.product-group-toggle,.link-btn,.recipe-preview,.recipe-back,.recipe-archive-link){
  background:#fff!important;
  background-color:#fff!important;
  background-image:none!important;
  border-color:var(--bh-hard-border-strong)!important;
  color:#475467!important;
  box-shadow:none!important;
}
body .app.app>main .sign-out-btn{
  background:#fff7ed!important;
  background-image:none!important;
  border-color:#f4c98d!important;
  color:#8a541d!important;
}
body .app.app>main .library-hero .library-add{
  background:#fff!important;
  background-image:none!important;
  border-color:var(--bh-hard-border-strong)!important;
  color:#344054!important;
}
body .app.app>main :is(.danger,.danger-btn){
  background:#fff5f5!important;
  background-image:none!important;
  border-color:#efcaca!important;
  color:#b42318!important;
}

/* The profile card's icon+number badges (active users, tasks, to-complete)
   are meant to be borderless and blend into the card -- but the generic
   ":is(...,.notification-trigger,.admin-registration-alert,...)" rule
   above this file also matches two of them (they still carry those classes
   for their click behaviour/icon colour) and its higher specificity beat
   the plain ".badge-chip" rule in visual-refresh.css, leaving one badge
   bordered/white and the other two floating with no visual grouping at
   all (confirmed live, 2026-09-16). Match at least as specifically here,
   in the file that loads last, instead of fighting it upstream. */
body .app.app>main .profile-card-badges .badge-chip{
  background:transparent!important;
  background-image:none!important;
  border-color:transparent!important;
  box-shadow:none!important;
  color:#70293e!important;
}
body .app.app>main .profile-card-badges .badge-chip.active-users-alert{
  color:#2f8f4e!important;
}
body .app.app>main .profile-card-badges .badge-chip.has-pending,
body .app.app>main .profile-card-badges .badge-chip.active{
  background:#fff4e7!important;
  border-color:#df9a55!important;
  color:#a85018!important;
}

body .app.app>main :is(button,input,select,textarea,[role="button"]):focus-visible{
  outline:3px solid rgba(37,99,235,.20)!important;
  outline-offset:2px!important;
}

/* Account/header controls. */
body .app.app>main .current-user-trigger,
body .app.app>main .user-task-summary>.current-user-trigger{
  background:#fff!important;
  background-image:none!important;
  border:1px solid var(--bh-hard-border)!important;
  color:var(--bh-hard-text)!important;
  box-shadow:var(--bh-hard-shadow-soft)!important;
}
body .app.app>main .current-user-trigger:hover,
body .app.app>main .user-task-summary>.current-user-trigger:hover{
  background:#f8fbff!important;
  border-color:#c9d9ec!important;
}
body .app.app>main .current-user-trigger small,
body .app.app>main .user-task-summary>.current-user-trigger small{
  color:var(--bh-hard-muted)!important;
  border-left-color:#d8e1ec!important;
}

/* Active tabs and segmented controls: soft blue, never dark fills. */
body .app.app>main .checklist-view-tabs button.active,
body .app.app>main .dashboard-arrange-actions button.active,
body .app.app>main .mapping-workspace-tabs button.active,
body .app.app>main .team-sales-source-switch button.active,
body .app.app>main .team-sales-v2-segment button.active,
body .app.app>main .team-sales-v2-head-actions button.is-active,
body .app.app>main .recipe-filters button.active,
body .app.app>main .recipe-category-nav button.active,
body .app.app>main .recipe-tabs button.active{
  background:var(--bh-hard-accent-soft)!important;
  background-color:var(--bh-hard-accent-soft)!important;
  background-image:none!important;
  border-color:var(--bh-hard-accent-border)!important;
  color:var(--bh-hard-accent-dark)!important;
  box-shadow:none!important;
}
body .app.app>main .recipe-tabs button.active{
  border-top-color:transparent!important;
  border-left-color:transparent!important;
  border-right-color:transparent!important;
  border-bottom:2px solid #2563eb!important;
  border-radius:0!important;
}

/* Blue accent badges/icons. */
body .app.app>main .library-account-card>span,
body .app.app>main .mapping-workspace-tabs button b,
body .app.app>main .task-notification-list .tonic-dot,
body .app.app>main .team-sales-v2-drawer-count,
body .app.app>main .recipe-row-number,
body .app.app>main .recipe-accordion article>span:first-child,
body .app.app>main .recipe-thumb,
body .app.app>main .recipe-photo{
  background:var(--bh-hard-accent-soft)!important;
  background-color:var(--bh-hard-accent-soft)!important;
  background-image:none!important;
  border-color:var(--bh-hard-accent-border)!important;
  color:var(--bh-hard-accent-dark)!important;
}

/* Detailed Reports source switch remains compact and calm. */
body .app.app>main .detail-report-source-switch button{
  background:#e9edf2!important;
  background-color:#e9edf2!important;
  background-image:none!important;
  border:1px solid #d5dde7!important;
  color:var(--bh-hard-text)!important;
  box-shadow:none!important;
}
body .app.app>main .detail-report-source-switch.is-v2 button{
  background:#e8f1ff!important;
  background-color:#e8f1ff!important;
  border-color:#c7daf7!important;
  color:#1d4ed8!important;
}
body .app.app>main .detail-report-source-switch button i{
  background:#fff!important;
  box-shadow:0 1px 3px rgba(15,23,42,.18)!important;
}

/* Dashboard: reduce the old rainbow feeling to blue + semantic exceptions. */
body .app.app>main .stream-card{
  background:#fff!important;
  background-image:none!important;
  border-color:var(--bh-hard-border)!important;
  border-left-color:#93c5fd!important;
  box-shadow:var(--bh-hard-shadow-soft)!important;
}
body .app.app>main .stream-card.stream-dry{border-left-color:#f0b35a!important}
body .app.app>main .stream-card.stream-pool{border-left-color:#93a4c7!important}
body .app.app>main .core-category-section{
  background:#f4f8fd!important;
  background-image:none!important;
  border-color:#dce7f4!important;
}
body .app.app>main .category-kpis article{
  background:#fff!important;
  background-image:none!important;
  border-color:var(--bh-hard-border)!important;
  border-top-color:#93c5fd!important;
  box-shadow:var(--bh-hard-shadow-soft)!important;
}
body .app.app>main .category-kpis .category-bottle-beer{border-top-color:#f0b35a!important}
body .app.app>main .category-kpis .category-soft-drinks{border-top-color:#7fc69d!important}
body .app.app>main .category-kpis .category-wine,
body .app.app>main .category-kpis .category-spirits,
body .app.app>main .category-kpis .category-cocktail-sales,
body .app.app>main .category-kpis .category-wet-items,
body .app.app>main .category-kpis .category-team-sales{border-top-color:#93c5fd!important}
body .app.app>main .team-sales-dashboard-card{
  background:#fff!important;
  background-image:none!important;
  border-color:#dbe7f5!important;
}
body .app.app>main .team-sales-dashboard-card-head>span,
body .app.app>main .team-sales-dashboard-breakdown b{color:#2563eb!important}
body .app.app>main .team-sales-dashboard-breakdown>span:not(:first-child){background:#eff6ff!important;color:#475467!important}
body .app.app>main .wine-leader:nth-child(2){border-top-color:#93c5fd!important}

/* Team Sales: gradient only on hero + primary KPI; everything else white. */
body .app.app>main .team-sales-v2-head small,
body .app.app>main .team-sales-v2-empty svg,
body .app.app>main .team-sales-v2-no-location-sales svg,
body .app.app>main .team-sales-v2-employee-name,
body .app.app>main .team-sales-v2-leaderboard a{
  color:#2563eb!important;
}
body .app.app>main .team-sales-v2-controls>label:focus-within,
body .app.app>main .team-sales-v2-search:focus-within,
body .app.app>main .team-sales-v2-controls>select:focus{
  border-color:#93b8ee!important;
  box-shadow:0 0 0 3px rgba(37,99,235,.08)!important;
}
body .app.app>main .team-sales-v2-departments button{
  background:#fff!important;
  background-image:none!important;
  border-color:var(--bh-hard-border)!important;
  color:var(--bh-hard-text)!important;
}
body .app.app>main .team-sales-v2-departments button.active{
  background:#eff6ff!important;
  border-color:#bfdbfe!important;
  color:#1d4ed8!important;
}

/* Recipe Manager: remove hardcoded burgundy while keeping content surfaces clean. */
body .app.app>main .recipe-library-head small,
body .app.app>main .recipe-info small,
body .app.app>main .recipe-section small,
body .app.app>main .recipe-accordion small,
body .app.app>main .recipe-category-nav>small,
body .app.app>main .recipe-recent>small,
body .app.app>main .recipe-back,
body .app.app>main .recipe-tabs button.active,
body .app.app>main .recipe-row-actions button{
  color:#2563eb!important;
}
body .app.app>main .recipe-list>button.active{
  background:#f2f7ff!important;
  box-shadow:inset 3px 0 0 #60a5fa!important;
}
body .app.app>main .recipe-list>button:hover,
body .app.app>main .recipe-category-nav button:hover{
  background:#f8fbff!important;
}
body .app.app>main .recipe-search,
body .app.app>main .recipe-cell-input,
body .app.app>main .recipe-cell-select,
body .app.app>main .recipe-info select{
  border-color:var(--bh-hard-border)!important;
  background:#fff!important;
}
body .app.app>main .recipe-used{
  background:#f2f7ff!important;
  color:var(--bh-hard-text)!important;
}
body .app.app>main .recipe-used-icon{
  background:#dbeafe!important;
  color:#2563eb!important;
}
body .app.app>main .recipe-used ul{color:#365b8d!important}

/* Batching: one blue summary card, white data workspaces, semantic notices untouched. */
body .app.app>main .batching-summary article{
  background:#fff!important;
  background-image:none!important;
  border-color:var(--bh-hard-border)!important;
  color:var(--bh-hard-text)!important;
  box-shadow:var(--bh-hard-shadow-soft)!important;
}
body .app.app>main .batching-summary article>svg{
  background:#eff6ff!important;
  color:#2563eb!important;
}
body .app.app>main .batching-summary .total>svg{
  background:rgba(255,255,255,.62)!important;
  color:#2563eb!important;
}
body .app.app>main .batching-table header small,
body .app.app>main .batching-guidance small,
body .app.app>main .batching-elements header small,
body .app.app>main .batching-table tbody td strong,
body .app.app>main .batching-guidance header>svg,
body .app.app>main .batching-guidance li b{
  color:#2563eb!important;
}
body .app.app>main .batching-table header>b,
body .app.app>main .batching-note{
  background:#eff6ff!important;
  border-color:#bfdbfe!important;
  color:#365b8d!important;
}
body .app.app>main .batching-controls input:focus,
body .app.app>main .batching-controls select:focus,
body .app.app>main .batching-editor input:focus,
body .app.app>main .batching-editor select:focus,
body .app.app>main .batching-editor textarea:focus,
body .app.app>main .batching-element-picker select:focus{
  border-color:#93b8ee!important;
  box-shadow:0 0 0 3px rgba(37,99,235,.08)!important;
}

/* Status/semantic colors are intentionally preserved. */
body .app.app>main .dashboard-mapping-alert button{
  background:#fff7ed!important;
  background-image:none!important;
  border:1px solid #f0c58f!important;
  color:#8a541d!important;
}
body .app.app>main :is(.success,.verified){color:#2f6f49!important}
body .app.app>main :is(.warning,.draft){color:#8a611c!important}

/* Tables are text-first: no decorative gradients. */
body .app.app>main table,
body .app.app>main tbody,
body .app.app>main td{
  background-image:none!important;
}
body .app.app>main th{
  background:#f4f7fa!important;
  background-image:none!important;
  color:#5d697a!important;
}
body .app.app>main tbody tr:nth-child(even) td{background:#fbfcfe!important}
body .app.app>main tbody tr:hover td{background:#f4f8fd!important}

/* NO DARK BURGUNDY WORKSPACE SURFACES
   A dark burgundy fill is a navigation-only treatment. Any formerly dark workspace
   panel is rendered with the shared light-blue gradient and dark, readable type. */
body .app.app>main :is(
  .insight,
  .my-tasks-welcome,
  .stream-card.stream-total,
  .revenue-kpis article:last-child,
  .batching-summary .total,
  .team-sales-v2-kpis article.primary,
  .team-sales-kpis article.net,
  .commercial-hero,
  .house-tonic-hero,
  .library-hero,
  .recipe-hero,
  .team-sales-hero,
  .week-selector
){
  background:var(--bh-hard-summary)!important;
  background-color:#e8f1ff!important;
  background-image:var(--bh-hard-summary)!important;
  border-color:#c7d9f2!important;
  color:var(--bh-hard-text)!important;
}
body .app.app>main :is(
  .insight,
  .my-tasks-welcome,
  .stream-card.stream-total,
  .revenue-kpis article:last-child,
  .batching-summary .total,
  .team-sales-v2-kpis article.primary,
  .team-sales-kpis article.net,
  .commercial-hero,
  .house-tonic-hero,
  .library-hero,
  .recipe-hero,
  .team-sales-hero,
  .team-sales-v2-head,
  .week-selector
) :is(h1,h2,h3,h4,h5,h6,b,strong){color:var(--bh-hard-text)!important}
body .app.app>main :is(
  .insight,
  .my-tasks-welcome,
  .stream-card.stream-total,
  .revenue-kpis article:last-child,
  .batching-summary .total,
  .team-sales-v2-kpis article.primary,
  .team-sales-kpis article.net,
  .commercial-hero,
  .house-tonic-hero,
  .library-hero,
  .recipe-hero,
  .team-sales-hero,
  .team-sales-v2-head,
  .week-selector
) :is(p,small,span,em){color:var(--bh-hard-muted)!important}

/* Shared density contract: smaller radii and a predictable spacing rhythm. */
body .app.app>main :is(
  .panel,
  .table-wrap,
  .notice,
  .week-selector,
  [class$="-hero"],
  [class*="-hero "],
  .team-sales-v2-controls,
  .team-sales-v2-leaderboard,
  .team-sales-v2-days,
  .team-sales-v2-item-finder,
  .team-sales-table-panel,
  .recipe-section,
  .batching-controls,
  .batching-table,
  .batching-elements
){border-radius:var(--bh-panel-radius)!important}
body .app.app>main :is(button,input,select,textarea,[role="button"]){border-radius:var(--bh-control-radius)!important}
body .app.app>main :is(.grid2,.kpis,.revenue-kpis,.category-kpis,.batching-summary){gap:var(--bh-space-3)!important}
body .app.app>main :is(.team-sales-v2-page,.batching-page,.recipe-manager,.settings-page){gap:var(--bh-space-4)!important}

/* Long data sets stay readable instead of compressing every column into the viewport. */
body .app.app>main .table-wrap{
  max-width:100%!important;
  overflow-x:auto!important;
  overscroll-behavior-inline:contain;
  scrollbar-gutter:stable;
}
body .app.app>main :is(.apicbase-import-details,.weekly-history-page,.history-page) .table-wrap table{
  min-width:820px!important;
}
/* Header actions no longer squeeze multi-word page titles on medium screens. */
@media (max-width:1100px){
  body .app.app>main>header{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    align-items:start!important;
    gap:var(--bh-space-4)!important;
  }
  body .app.app>main>header>.header-actions{
    display:flex!important;
    width:100%!important;
    min-width:0!important;
    flex-wrap:wrap!important;
    justify-content:flex-start!important;
  }
  body .app.app>main>header>.header-actions :is(.user-task-summary,.report-action-buttons){
    min-width:0!important;
    flex-wrap:wrap!important;
  }
  body .app.app>main .team-sales-v2-kpis{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
  body .app.app>main .team-sales-v2-kpis article.primary{
    grid-column:auto!important;
    grid-row:auto!important;
  }
  body .app.app>main .batching-summary{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
}

/* Tablet shell: keep the existing sidebar palette, but use a compact vertical rail.
   No background/color declaration is allowed in this block. */
@media (min-width:761px) and (max-width:1100px){
  body .app.app{
    display:grid!important;
    grid-template-columns:76px minmax(0,1fr)!important;
    min-height:100vh!important;
  }
  body .app.app>aside{
    position:fixed!important;
    inset:0 auto 0 0!important;
    display:flex!important;
    width:76px!important;
    height:100vh!important;
    padding:16px 10px!important;
    overflow:hidden!important;
    flex-direction:column!important;
  }
  body .app.app>aside .brand{
    display:flex!important;
    justify-content:center!important;
    padding:0 0 14px!important;
  }
  body .app.app>aside .beveragehub-wordmark{
    width:40px!important;
    height:40px!important;
    max-width:40px!important;
    object-fit:cover!important;
    object-position:left center!important;
  }
  body .app.app>aside nav{
    display:flex!important;
    min-height:0!important;
    padding:0!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    flex:1 1 auto!important;
    flex-direction:column!important;
    gap:6px!important;
    scrollbar-width:none!important;
  }
  body .app.app>aside nav::-webkit-scrollbar{display:none!important}
  body .app.app>aside nav button{
    display:flex!important;
    width:56px!important;
    min-width:56px!important;
    height:46px!important;
    min-height:46px!important;
    padding:0!important;
    flex:0 0 46px!important;
    justify-content:center!important;
    border-radius:9px!important;
    font-size:0!important;
  }
  body .app.app>aside nav button svg{
    width:19px!important;
    height:19px!important;
    margin:0!important;
  }
  body .app.app>aside .desktop-update-tile{
    display:flex!important;
    width:56px!important;
    height:46px!important;
    min-height:46px!important;
    margin-top:8px!important;
    padding:0!important;
    flex:0 0 46px!important;
    justify-content:center!important;
  }
  body .app.app>aside .desktop-update-tile>span,
  body .app.app>aside .aside-foot{display:none!important}
  body .app.app>aside .desktop-update-tile-icon{
    width:22px!important;
    height:22px!important;
    flex-basis:22px!important;
  }
  body .app.app>main{
    grid-column:2!important;
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    padding:24px!important;
    overflow-x:hidden!important;
  }
}

@media (max-width:760px){
  body .app.app>main{padding:16px 12px 40px!important}
  body .app.app>main>header>.header-actions{display:grid!important;grid-template-columns:1fr!important}
  body .app.app>main .team-sales-v2-kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body .app.app>main .team-sales-v2-kpis article.primary{grid-column:1/-1!important}
  body .app.app>main .batching-summary{grid-template-columns:1fr!important}
}

@media (max-width:520px){
  body .app.app>main .team-sales-v2-kpis,
  body .app.app>main .batching-summary{grid-template-columns:1fr!important}
}

/* Detailed Reports: the profile chip and Export/Sign out actions must stay in
   one row, adjacent to each other. Several older detailed-report-*.css files
   independently turn .header-actions into a grid (detailed-report-layout-fix,
   detailed-report-render-header, etc.) with tracks sized wide enough to push
   the two groups apart at >=1101px. This file is the last-loaded stylesheet
   (see index.html and scripts/postbuild-burgundy-contract.mjs) and its
   selector specificity already beats those files' `:has()`-based rules, so
   pin the intended layout here instead of adding another competing override.
   The <=1100px range is covered separately above and in src/visual-refresh.css. */
@media (min-width:1101px){
  body .app.app.page-details>main>header>.header-actions{
    display:flex!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:8px!important;
  }
  /* The chip's own parent is separately forced into a 4-column grid by
     detailed-report-layout-fix.css (one column per admin-alert/notification/
     badge item), but those sibling items are display:none on every page
     except Dashboard. The empty reserved columns are what actually reads as
     "far from the export buttons" -- fix it at the source: this element
     should only ever be as wide as its one visible child here. */
  body .app.app.page-details>main>header>.header-actions .user-task-summary{
    display:flex!important;
    width:auto!important;
    flex:0 0 auto!important;
  }
}

/* Same problem, phone width: the max-width:760px rule above turns
   .header-actions into a single-column grid (one item per row) on every
   page, which is the right call for Dashboard (profile chip has three
   counters plus up to three export/sign-out buttons -- too much for one
   row), but every other page only ever has the profile chip and Sign out
   (Export Excel is hidden on pages it doesn't apply to), so keep those two
   side by side there too instead of stacking. */
@media (max-width:760px){
  body .app.app:not(.page-dashboard)>main>header>.header-actions{
    display:flex!important;
    flex-wrap:wrap!important;
    align-items:center!important;
    gap:8px!important;
  }
  body .app.app:not(.page-dashboard)>main>header>.header-actions .user-task-summary{
    display:flex!important;
    width:auto!important;
    flex:0 0 auto!important;
  }
  body .app.app:not(.page-dashboard)>main>header>.header-actions .profile-card,
  body .app.app:not(.page-dashboard)>main>header>.header-actions .report-action-buttons>button{
    width:auto!important;
    flex:0 0 auto!important;
  }
  /* .report-action-buttons itself (the wrapper around Sign out / Add
     Cocktail) was never constrained here -- only the buttons inside it --
     so it kept its wider default sizing (a `display:grid` block meant for
     desktop) and claimed the rest of the row's width, forcing itself onto
     its own line below .user-task-summary instead of sitting beside it. */
  body .app.app:not(.page-dashboard)>main>header>.header-actions .report-action-buttons{
    display:flex!important;
    width:auto!important;
    flex:0 0 auto!important;
    flex-wrap:wrap!important;
    gap:8px!important;
  }
}

/* Sidebar is intentionally outside this contract and remains the only dark-burgundy region. */