@import url('./tokens.css');

:root{
  font-family:var(--font-family);
  color:var(--color-text);
  background:var(--color-canvas);
  font-synthesis:none;
  --green:var(--color-brand);
  --deep:var(--color-sidebar);
  --muted:var(--color-text-muted);
  --line:var(--color-border);
  --paper:var(--color-surface);
  --accent:var(--color-accent)}
*{
  box-sizing:border-box}
body{
  margin:0}
button,input,select,textarea{
  font:inherit}
button,a,input,select,textarea{
  -webkit-tap-highlight-color:transparent}
button{
  cursor:pointer}
button:disabled{
  opacity:var(--opacity-disabled);
  cursor:not-allowed}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:var(--focus-width) solid var(--color-focus);
  outline-offset:var(--focus-offset)}
button svg{
  flex-shrink:0}
h1,h2,h3,p{
  margin:0}
a{
  color:inherit}
button{
  color:inherit}
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0}
.skip-link{
  position:fixed;
  top:-60px;
  left:15px;
  background:white;
  padding:var(--space-12);
  z-index:9}
.skip-link:focus{
  top:12px}
.shell{
  display:grid;
  grid-template-columns:238px minmax(0,1fr);
  min-height:100vh}
.sidebar{
  position:sticky;
  top:0;
  height:100vh;
  background:var(--deep);
  color:var(--color-sidebar-text);
  padding:33px var(--space-22) var(--space-24);
  display:flex;
  flex-direction:column}
.brand{
  display:flex;
  gap:11px;
  align-items:center;
  margin:0 var(--space-10) 42px}
.brand-symbol{
  width:38px;
  height:41px;
  display:grid;
  place-items:center;
  border:1px solid var(--color-brand-symbol-border);
  border-radius:14px 3px 14px 3px;
  color:var(--color-brand-symbol-color)}
.brand-symbol svg{
  width:26px;
  height:26px}
.brand strong{
  font-size:var(--text-25);
  letter-spacing:-.8px}
.brand small{
  display:block;
  margin-top:1px;
  color:var(--color-brand-small-color);
  font-size:var(--text-10);
  letter-spacing:2px;
  text-transform:uppercase}
.workspace-label{
  font-size:var(--text-10);
  color:var(--color-workspace-label-color);
  text-transform:uppercase;
  letter-spacing:1.5px;
  padding:0 var(--space-12);
  margin-bottom:13px}
.nav{
  display:grid;
  gap:7px}
.nav button{
  display:flex;
  align-items:center;
  gap:var(--space-12);
  text-align:left;
  border:0;
  border-radius:var(--radius-medium);
  background:none;
  color:var(--color-sidebar-muted);
  padding:13px var(--space-14);
  font-size:var(--text-14);
  font-weight:var(--font-weight-medium)}
.nav button:hover{
  background:var(--color-nav-button-hover-background)}
.nav button.active{
  background:var(--color-nav-active);
  color:var(--color-nav-active-text);
  font-weight:var(--font-weight-strong)}
.nav-count{
  margin-left:auto;
  background:var(--color-nav-count-background);
  border-radius:5px;
  min-width:21px;
  text-align:center;
  font-size:var(--text-11);
  padding:2px}
.sidebar-bottom{
  margin-top:auto;
  padding-top:var(--space-36)}
.local-status{
  padding:var(--space-16) 13px;
  background:var(--color-local-status-background);
  border:1px solid var(--color-local-status-border);
  border-radius:10px;
  font-size:var(--text-12);
  color:var(--color-local-status-color);
  line-height:1.6}
.local-status strong{
  display:flex;
  align-items:center;
  gap:7px;
  color:var(--color-local-status-strong-color);
  margin-bottom:5px;
  font-size:var(--text-12)}
.dot{
  display:inline-block;
  width:6px;
  height:6px;
  background:var(--color-dot-background);
  border-radius:50%}
.profile{
  display:flex;
  align-items:center;
  gap:var(--space-10);
  margin-top:var(--space-22);
  padding:0 var(--space-10)}
.avatar{
  display:grid;
  place-items:center;
  width:31px;
  height:31px;
  background:var(--color-avatar-background);
  border-radius:50%;
  font-size:var(--text-11)}
.profile strong{
  font-size:var(--text-12)}
.profile small{
  display:block;
  font-size:var(--text-10);
  color:var(--color-profile-small-color);
  margin-top:3px}
.main-content{
  min-width:0}
.topbar{
  height:72px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 var(--space-36);
  background:var(--color-topbar-background);
  gap:var(--space-16)}
.breadcrumb{
  font-size:var(--text-12);
  color:var(--color-breadcrumb-color)}
.breadcrumb strong{
  font-weight:var(--font-weight-medium);
  color:var(--color-breadcrumb-strong-color)}
.crumb-divider{
  margin:0 var(--space-10);
  color:var(--color-crumb-divider-color)}
.top-date{
  font-size:var(--text-12);
  color:var(--color-text-muted)}
.content{
  max-width:1600px;
  margin:auto;
  padding:var(--space-28) var(--space-36) var(--space-40)}
.demo-banner{
  display:flex;
  gap:var(--space-10);
  align-items:center;
  margin-bottom:var(--space-28);
  background:var(--color-demo-banner-background);
  border:1px solid var(--color-demo-banner-border);
  padding:var(--space-10) var(--space-14);
  border-radius:var(--radius-medium);
  font-size:var(--text-11);
  line-height:var(--line-height-control);
  color:var(--color-demo-banner-color)}
.demo-label{
  font-size:var(--text-9);
  font-weight:var(--font-weight-bold);
  letter-spacing:.7px;
  border-radius:var(--radius-small);
  background:var(--color-demo-label-background);
  padding:3px var(--space-6);
  color:var(--color-demo-label-color);
  white-space:nowrap}
.page-heading{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:var(--space-20);
  margin-bottom:var(--space-26)}
.page-heading h1{
  font-size:var(--text-29);
  font-weight:var(--font-weight-strong);
  letter-spacing:-.9px;
  line-height:var(--line-height-heading)}
.page-heading p{
  font-size:var(--text-12);
  color:var(--muted);
  margin-top:var(--space-8);
  line-height:1.6}
.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-8);
  padding:11px var(--space-16);
  background:var(--green);
  color:var(--color-surface);
  border:1px solid var(--green);
  border-radius:var(--radius-control);
  font-size:var(--text-12);
  font-weight:var(--font-weight-semibold);
  line-height:var(--line-height-control);
  text-decoration:none;
  white-space:nowrap}
.button:hover{
  background:var(--color-brand-hover)}
.button-secondary{
  background:var(--color-surface);
  color:var(--color-button-secondary-color);
  border-color:var(--color-button-secondary-border-color)}
.button-secondary:hover{
  background:var(--color-button-secondary-hover-background)}
.button-small{
  padding:7px 11px;
  font-size:var(--text-11)}
.text-button{
  border:0;
  background:none;
  color:var(--color-link);
  font-size:var(--text-11);
  padding:var(--space-6) 0;
  display:inline-flex;
  gap:7px;
  align-items:center;
  font-weight:var(--font-weight-semibold)}
.text-button:hover{
  color:var(--color-link-hover);
  text-decoration:underline}
.text-button svg{
  width:15px;
  height:15px}
.icon-button{
  width:31px;
  height:31px;
  display:inline-grid;
  place-items:center;
  border:1px solid transparent;
  background:transparent;
  border-radius:var(--radius-field);
  color:var(--color-icon-button-color)}
.icon-button:hover{
  background:var(--color-icon-button-hover-background);
  border-color:var(--color-icon-button-hover-border-color)}
.stats-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--space-16);
  margin-bottom:23px}
.stat-card{
  background:var(--color-surface);
  border:1px solid var(--line);
  border-radius:var(--radius-panel);
  padding:var(--space-20) var(--space-20) var(--space-18);
  box-shadow:var(--shadow-card)}
.stat-label{
  font-size:var(--text-11);
  color:var(--color-stat-label-color);
  font-weight:var(--font-weight-medium)}
.stat-value{
  font-size:var(--text-26);
  letter-spacing:-.8px;
  font-weight:var(--font-weight-strong);
  margin:15px 0 var(--space-10);
  white-space:nowrap}
.stat-detail{
  font-size:var(--text-10);
  color:var(--color-stat-detail-color);
  line-height:var(--line-height-control)}
.stat-accent{
  background:var(--color-surface-accent);
  border-color:var(--color-stat-accent-border-color)}
.stat-accent .stat-value{
  color:var(--color-stat-accent-stat-value-color)}
.panel{
  background:var(--color-surface);
  border:1px solid var(--line);
  border-radius:var(--radius-panel);
  margin-bottom:23px;
  overflow:hidden}
.section-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  padding:var(--space-22) var(--space-22) var(--space-18)}
.section-title h2{
  font-size:var(--text-16);
  letter-spacing:-.3px;
  font-weight:var(--font-weight-strong);
  margin-top:5px}
.eyebrow{
  font-size:var(--text-8);
  letter-spacing:1.5px;
  color:var(--color-eyebrow-color);
  font-weight:var(--font-weight-strong)}
.tasks-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--space-14);
  padding:0 var(--space-22) var(--space-22)}
.task-card{
  display:flex;
  align-items:center;
  gap:13px;
  background:var(--color-task-card-background);
  border:1px solid var(--color-task-card-border);
  border-radius:var(--radius-medium);
  padding:17px 15px;
  text-align:left}
.task-card:hover{
  background:var(--color-task-card-hover-background);
  border-color:var(--color-task-card-hover-border-color)}
.task-count{
  flex-shrink:0;
  display:grid;
  place-items:center;
  height:37px;
  width:37px;
  background:var(--color-task-count-background);
  color:var(--color-task-count-color);
  border-radius:9px;
  font-size:var(--text-18);
  font-weight:var(--font-weight-semibold)}
.task-zero{
  background:var(--color-task-zero-background);
  color:var(--color-task-zero-color)}
.task-card strong{
  font-size:var(--text-11);
  display:block}
.task-card small{
  font-size:var(--text-9);
  line-height:var(--line-height-control);
  display:block;
  color:var(--color-task-card-small-color);
  margin-top:5px}
.task-card>svg{
  margin-left:auto;
  min-width:15px;
  width:15px;
  color:var(--color-task-card-svg-color)}
.dashboard-grid{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:23px}
.stock-list{
  padding:0 var(--space-22)}
.stock-item{
  display:flex;
  align-items:center;
  gap:var(--space-12);
  border-bottom:1px solid var(--color-stock-item-border-bottom);
  padding:var(--space-16) 0}
.stock-item:last-child{
  border-bottom:0}
.product-symbol{
  width:34px;
  height:37px;
  display:grid;
  place-items:center;
  border-radius:var(--radius-control);
  background:var(--color-product-symbol-background);
  color:var(--color-product-symbol-color)}
.stock-item strong{
  font-size:var(--text-12);
  display:block}
.stock-item small{
  font-size:var(--text-9);
  color:var(--color-stock-item-small-color);
  display:block;
  margin-top:var(--space-6);
  line-height:var(--line-height-control)}
.stock-amount{
  margin-left:auto;
  text-align:right;
  white-space:nowrap}
.stock-amount>strong{
  font-size:var(--text-17);
  color:var(--color-stock-amount-strong-color)}
.stock-amount>strong span{
  font-size:var(--text-10);
  font-weight:var(--font-weight-regular)}
.stock-amount .text-button{
  font-size:var(--text-9);
  justify-content:end}
.panel-footnote{
  font-size:var(--text-9);
  color:var(--color-panel-footnote-color);
  line-height:var(--line-height-body);
  margin:var(--space-14) var(--space-22) 19px}
.chart-caption{
  font-size:var(--text-10);
  color:var(--color-panel-footnote-color);
  margin:0 var(--space-22)}
.bar-chart{
  display:flex;
  align-items:end;
  justify-content:space-around;
  gap:var(--space-10);
  height:155px;
  margin:23px var(--space-22) 0;
  padding-bottom:1px}
.chart-column{
  display:flex;
  flex-direction:column;
  align-items:center;
  min-width:0;
  max-width:110px;
  flex:1;
  height:100%}
.chart-value{
  font-size:var(--text-9);
  color:var(--color-chart-value-color);
  margin-bottom:7px;
  white-space:nowrap}
.bar-track{
  width:100%;
  max-width:40px;
  flex:1;
  display:flex;
  align-items:end}
.chart-bar{
  background:var(--color-chart-bar-background);
  width:100%;
  border-radius:5px 5px 0 0;
  min-height:3px}
.chart-date{
  font-size:var(--text-9);
  color:var(--color-chart-date-color);
  padding-top:var(--space-10);
  margin-top:0;
  width:100%;
  text-align:center;
  border-top:1px solid var(--color-chart-date-border-top)}
.table-wrap{
  /* Keep absolute accessible labels inside the table's scroll area. */
  position:relative;
  overflow:auto}
table{
  width:100%;
  border-collapse:collapse;
  font-size:var(--text-11);
  text-align:left;
  white-space:nowrap}
th{
  background:var(--color-th-background);
  font-weight:var(--font-weight-medium);
  font-size:var(--text-9);
  color:var(--color-th-color);
  padding:13px var(--space-22);
  border-top:1px solid var(--color-th-border-top);
  border-bottom:1px solid var(--color-th-border-bottom)}
td{
  padding:17px var(--space-22);
  border-bottom:1px solid var(--color-td-border-bottom)}
tr:last-child td{
  border-bottom:0}
tbody tr:hover{
  background:var(--color-tbody-tr-hover-background)}
.numeric{
  text-align:right;
  font-variant-numeric:tabular-nums}
.strong{
  font-weight:var(--font-weight-strong)}
.table-link{
  background:none;
  padding:0;
  border:0;
  color:var(--color-table-link-color);
  font-size:var(--text-11);
  font-weight:var(--font-weight-strong);
  text-align:left}
.table-link:hover{
  text-decoration:underline}
.cell-secondary{
  display:block;
  color:var(--color-cell-secondary-color);
  font-size:var(--text-9);
  margin-top:var(--space-6)}
.text-danger{
  color:var(--color-text-danger-color)}
.status-stack{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  max-width:200px}
.badge{
  display:inline-flex;
  align-items:center;
  white-space:nowrap;
  font-size:var(--text-9);
  font-weight:var(--font-weight-medium);
  line-height:1.4;
  padding:var(--space-4) 7px;
  border-radius:var(--radius-small);
  background:var(--color-neutral-bg);
  color:var(--color-neutral-text)}
.badge-success{
  background:var(--color-success-bg);
  color:var(--color-success-text)}
.badge-warning{
  background:var(--color-warning-bg);
  color:var(--color-warning-text)}
.badge-danger{
  background:var(--color-danger-bg);
  color:var(--color-danger-text)}
.badge-info{
  background:var(--color-info-bg);
  color:var(--color-info-text)}
.toolbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;
  padding:17px var(--space-22);
  flex-wrap:wrap}
.search-field{
  display:flex;
  align-items:center;
  gap:var(--space-8);
  max-width:310px;
  flex:1}
.search-field svg{
  width:16px;
  color:var(--color-search-field-svg-color)}
.search-field input{
  border:0;
  padding:var(--space-8) 0;
  background:transparent;
  font-size:var(--text-11);
  min-width:100px;
  width:100%;
  color:var(--color-search-field-input-color)}
.search-field input::placeholder{
  color:var(--color-search-field-input-placeholder-color)}
.filter-select{
  font-size:var(--text-11);
  padding:var(--space-8) 11px;
  border:1px solid var(--color-filter-select-border);
  border-radius:var(--radius-field);
  background:var(--color-surface);
  color:var(--color-filter-select-color)}
.tabs{
  display:flex;
  gap:var(--space-20);
  padding:0 var(--space-22);
  border-bottom:1px solid var(--line)}
.tab{
  font-size:var(--text-11);
  border:0;
  background:none;
  padding:var(--space-16) 0;
  border-bottom:2px solid transparent;
  color:var(--color-tab-color)}
.tab.active{
  border-color:var(--color-tab-active-border-color);
  color:var(--color-tab-active-color);
  font-weight:var(--font-weight-strong)}
.notice{
  font-size:var(--text-11);
  line-height:var(--line-height-body);
  padding:var(--space-14) var(--space-18);
  border:1px solid var(--color-notice-border);
  border-radius:var(--radius-medium);
  background:var(--color-notice-background);
  color:var(--color-notice-color);
  margin-bottom:21px}
.empty-state{
  text-align:center;
  padding:45px 25px;
  color:var(--color-empty-state-color)}
.empty-state>svg{
  width:30px;
  height:30px;
  margin-bottom:var(--space-14);
  color:var(--color-empty-state-svg-color)}
.empty-state h3{
  font-size:var(--text-15);
  color:var(--color-empty-state-h3-color);
  margin-bottom:9px}
.empty-state p{
  max-width:360px;
  font-size:var(--text-12);
  line-height:1.6;
  margin:auto}
.loading{
  display:grid;
  place-items:center;
  padding:100px;
  color:var(--color-loading-color)}
.footer{
  display:flex;
  justify-content:space-between;
  gap:var(--space-10);
  font-size:var(--text-9);
  color:var(--color-footer-color);
  padding:3px 1px;
  line-height:1.6}
.toast{
  position:fixed;
  bottom:23px;
  left:50%;
  transform:translateX(-50%);
  background:var(--deep);
  color:white;
  padding:var(--space-14) var(--space-22);
  border-radius:var(--radius-medium);
  box-shadow:var(--shadow-toast);
  z-index:20;
  font-size:var(--text-13);
  max-width:90vw}
.toast[hidden]{
  display:none}
dialog{
  border:1px solid var(--color-dialog-border);
  border-radius:var(--radius-dialog);
  padding:0;
  width:min(var(--dialog-width),calc(100vw - 32px));
  max-height:90vh;
  box-shadow:var(--shadow-dialog);
  color:var(--color-dialog-color);
  background:var(--color-surface)}
dialog.wide{
  width:min(var(--dialog-width-wide),calc(100vw - 32px))}
dialog::backdrop{
  background:var(--color-backdrop);
  backdrop-filter:blur(2px)}
.dialog-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:var(--space-22) var(--space-26);
  border-bottom:1px solid var(--line)}
.dialog-heading h2{
  font-size:var(--text-20);
  letter-spacing:-.4px}
.dialog-body{
  padding:23px var(--space-26)}
.dialog-description{
  font-size:var(--text-12);
  line-height:var(--line-height-body);
  color:var(--color-dialog-description-color);
  margin-bottom:var(--space-20)}
.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-18)}
.field{
  display:flex;
  flex-direction:column;
  gap:7px;
  font-size:var(--text-11);
  font-weight:var(--font-weight-semibold)}
.field-full{
  grid-column:1/-1}
.field input,.field select,.field textarea{
  width:100%;
  padding:var(--space-10) 11px;
  border:1px solid var(--color-control-border);
  border-radius:var(--radius-field);
  background:var(--color-surface);
  color:var(--color-control-text);
  font-size:var(--text-12);
  min-height:var(--control-min-height)}
.field small{
  font-size:var(--text-10);
  color:var(--color-field-small-color);
  font-weight:var(--font-weight-regular);
  line-height:1.6}
.field textarea{
  resize:vertical;
  min-height:75px}
.dialog-footer{
  display:flex;
  justify-content:end;
  gap:var(--space-10);
  padding:var(--space-18) var(--space-26);
  border-top:1px solid var(--line);
  background:var(--color-surface-subtle)}
.form-error{
  padding:var(--space-12);
  margin:0 0 17px;
  background:var(--color-error-bg);
  border-radius:var(--radius-field);
  font-size:var(--text-12);
  line-height:1.6;
  color:var(--color-error-text)}
.form-error:empty{
  display:none}
.item-list{
  display:grid;
  gap:var(--space-12);
  margin:15px 0}
.purchase-item{
  display:grid;
  grid-template-columns:minmax(140px,1.5fr) 1fr 1fr 28px;
  align-items:end;
  gap:var(--space-10);
  padding:var(--space-14) var(--space-12);
  background:var(--color-surface-row);
  border:1px solid var(--color-purchase-item-border);
  border-radius:var(--radius-control)}
.purchase-item .icon-button{
  margin-bottom:var(--space-4)}
.form-section-heading{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:var(--space-24)}
.form-section-heading h3{
  font-size:var(--text-13)}
.form-total{
  text-align:right;
  font-size:var(--text-12);
  margin-top:var(--space-16);
  color:var(--color-form-total-color)}
.form-total strong{
  font-size:var(--text-20);
  color:var(--color-form-total-strong-color);
  margin-left:var(--space-14)}
.detail-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-18);
  margin-bottom:var(--space-20)}
.detail-grid dt{
  font-size:var(--text-10);
  color:var(--color-detail-grid-dt-color);
  margin-bottom:var(--space-6)}
.detail-grid dd{
  margin:0;
  font-size:var(--text-13);
  color:var(--color-detail-grid-dd-color);
  overflow-wrap:anywhere}
.dialog-actions{
  display:flex;
  gap:var(--space-10);
  flex-wrap:wrap;
  margin-top:var(--space-22)}
.detail-items{
  margin:0 -26px}
.detail-total{
  padding:var(--space-20) 0 0;
  text-align:right;
  font-size:var(--text-17);
  font-weight:var(--font-weight-strong)}
.dashboard-grid .panel{
  height:calc(100% - 23px)}
@media(min-width:1600px){
  .content{
  padding-top:34px}
.stat-value{
  font-size:var(--text-30)}
.task-card strong{
  font-size:var(--text-13)}
.task-card small{
  font-size:var(--text-11)}
table{
  font-size:var(--text-12)}
.table-link{
  font-size:var(--text-12)}
}
@media(max-width:1200px){
  .shell{
  grid-template-columns:195px minmax(0,1fr)}
.sidebar{
  padding-left:var(--space-14);
  padding-right:var(--space-14)}
.topbar{
  padding:0 var(--space-24)}
.content{
  padding:var(--space-24)}
.stat-card{
  padding:17px var(--space-14)}
.stat-value{
  font-size:var(--text-22)}
.stats-grid{
  gap:var(--space-10)}
.tasks-grid{
  gap:var(--space-10)}
.task-card{
  padding:13px var(--space-10);
  gap:9px}
.task-count{
  height:30px;
  width:30px;
  font-size:var(--text-15)}
.task-card>svg{
  display:none}
.section-title{
  padding:19px var(--space-18) 15px}
.tasks-grid{
  padding:0 var(--space-18) var(--space-18)}
.dashboard-grid{
  gap:var(--space-18);
  grid-template-columns:1.1fr 1fr}
th,td{
  padding-left:17px;
  padding-right:17px}
.stock-list{
  padding:0 var(--space-18)}
.page-heading h1{
  font-size:var(--text-27)}
}
@media(max-width:950px){
  .shell{
  grid-template-columns:165px minmax(0,1fr)}
.sidebar{
  padding:25px var(--space-10)}
.brand{
  margin-left:5px;
  gap:var(--space-8)}
.brand strong{
  font-size:var(--text-22)}
.brand small{
  font-size:var(--text-8)}
.brand-symbol{
  width:32px;
  height:36px}
.nav button{
  padding:var(--space-12) var(--space-10);
  font-size:var(--text-12);
  gap:9px}
.local-status{
  font-size:var(--text-10);
  padding:11px}
.profile{
  padding-left:5px}
.content{
  padding:var(--space-22)}
.topbar{
  padding:0 var(--space-22)}
.stats-grid{
  grid-template-columns:repeat(2,minmax(0,1fr))}
.tasks-grid{
  grid-template-columns:1fr}
.task-card strong{
  font-size:var(--text-12)}
.task-card small{
  font-size:var(--text-10)}
.task-card>svg{
  display:block}
.dashboard-grid{
  grid-template-columns:1fr}
.bar-chart{
  height:140px}
.chart-panel .panel-footnote{
  margin-bottom:var(--space-18)}
.dashboard-grid .panel{
  height:auto}
.section-title{
  flex-wrap:wrap}
.page-heading{
  align-items:flex-start}
}
@media(max-width:650px){
  .shell{
  display:block}
.sidebar{
  position:relative;
  height:auto;
  padding:var(--space-16) var(--space-18) 11px}
.brand{
  margin:0 0 var(--space-18)}
.brand strong{
  font-size:var(--text-23)}
.brand small{
  font-size:var(--text-8)}
.brand-symbol{
  height:33px}
.workspace-label,.sidebar-bottom{
  display:none}
.nav{
  display:flex;
  gap:5px}
.nav button{
  flex:1;
  justify-content:center;
  flex-direction:column;
  gap:5px;
  padding:9px var(--space-6);
  font-size:var(--text-10)}
.nav-count{
  display:none}
.nav svg{
  width:18px;
  height:18px}
.topbar{
  height:48px;
  padding:0 var(--space-18)}
.top-date{
  font-size:var(--text-10)}
.breadcrumb{
  font-size:var(--text-10)}
.content{
  padding:19px var(--space-16)}
.demo-banner{
  font-size:var(--text-10);
  align-items:flex-start;
  margin-bottom:23px}
.page-heading{
  gap:var(--space-12);
  margin-bottom:21px}
.page-heading h1{
  font-size:var(--text-25)}
.page-heading p{
  font-size:var(--text-10);
  max-width:200px}
.page-heading .button{
  font-size:var(--text-10);
  padding:9px 11px;
  gap:5px}
.page-heading .button svg{
  width:15px;
  height:15px}
.stat-value{
  font-size:var(--text-21);
  margin:var(--space-12) 0 var(--space-8)}
.stat-label{
  font-size:var(--text-10)}
.stat-detail{
  font-size:var(--text-9)}
.stat-card{
  padding:15px var(--space-12)}
.panel{
  margin-bottom:17px}
.section-title h2{
  font-size:var(--text-15)}
.section-title{
  padding:17px var(--space-16)}
.section-title .badge{
  font-size:var(--text-8)}
.stock-list{
  padding:0 var(--space-16)}
.stock-item{
  gap:9px}
.stock-item strong{
  font-size:var(--text-11)}
.stock-item small{
  font-size:var(--text-9)}
.product-symbol{
  width:30px;
  height:33px}
.stock-amount>strong{
  font-size:var(--text-16)}
.footer{
  flex-direction:column;
  margin-top:var(--space-20)}
.form-grid{
  grid-template-columns:1fr}
.field-full{
  grid-column:auto}
.dialog-heading{
  padding:var(--space-18) var(--space-20)}
.dialog-heading h2{
  font-size:var(--text-18)}
.dialog-body{
  padding:var(--space-20)}
.dialog-footer{
  padding:var(--space-16) var(--space-20)}
.purchase-item{
  grid-template-columns:1fr 1fr 28px}
.purchase-item .field:first-child{
  grid-column:1/-1}
.detail-items{
  margin:0 -20px}
.detail-grid{
  gap:17px}
.toolbar{
  padding:13px var(--space-16)}
.tabs{
  padding:0 var(--space-16)}
.notice{
  font-size:var(--text-10);
  padding:var(--space-12)}
.toast{
  width:calc(100% - 32px);
  text-align:center}
.status-stack{
  min-width:145px}
}
.shell,.main-content,#page-content,.panel,.table-wrap{
  min-width:0;
  max-width:100%}
.content{
  width:100%;
  min-width:0}
.table-wrap{
  width:100%}
.task-card>span:not(.task-count),.stock-item>div:not(.stock-amount){
  min-width:0;
  overflow-wrap:anywhere}
.demo-banner>span:last-child{
  min-width:0;
  overflow-wrap:anywhere}
.restaurant-brand{
  min-width:0;
  align-items:center}
.restaurant-brand .brand-symbol{
  flex-shrink:0;
  width:42px;
  height:46px;
  border-radius:9px;
  font-size:var(--text-15);
  font-weight:var(--font-weight-strong);
  letter-spacing:.5px}
.restaurant-brand .has-logo{
  background:var(--color-surface);
  border-color:var(--color-restaurant-brand-has-logo-border-color);
  padding:var(--space-4)}
.restaurant-brand img{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain}
.brand-copy{
  min-width:0}
.restaurant-brand strong{
  font-size:var(--text-18);
  line-height:1.25;
  letter-spacing:-.4px;
  overflow-wrap:anywhere;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden}
.restaurant-brand small{
  font-size:var(--text-8);
  letter-spacing:1.2px;
  margin-top:var(--space-6)}
.profile .avatar{
  flex-shrink:0}
.profile>div{
  min-width:0}
.profile strong{
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis}
.nav .settings-nav{
  margin-top:var(--space-16);
  border-top:1px solid var(--color-nav-settings-nav-border-top);
  border-radius:0 0 8px 8px}
.breadcrumb{
  display:flex;
  align-items:center;
  min-width:0}
.breadcrumb-name{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:360px}
.breadcrumb strong,.top-date{
  flex-shrink:0}
.settings-panel{
  max-width:1000px}
.settings-body{
  padding:0 25px 27px}
.settings-description{
  font-size:var(--text-12);
  line-height:var(--line-height-body);
  color:var(--muted);
  margin-bottom:25px;
  max-width:620px}
.settings-layout{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
  gap:var(--space-36)}
.settings-fields{
  display:flex;
  flex-direction:column;
  gap:25px;
  min-width:0}
.settings-fields .field{
  font-size:var(--text-12)}
.settings-fields input{
  font-size:var(--text-13)}
.settings-fields .field small{
  font-size:var(--text-11)}
.settings-fields input[type=file]{
  padding:var(--space-8);
  font-size:var(--text-11);
  max-width:100%;
  overflow:hidden}
.settings-fields input[type=file]::file-selector-button{
  font:inherit;
  padding:var(--space-8) var(--space-10);
  border:0;
  border-radius:var(--radius-small);
  background:var(--color-settings-fields-input-type-file-file-selector-button-background);
  color:var(--color-settings-fields-input-type-file-file-selector-button-color);
  margin-right:var(--space-8);
  cursor:pointer}
.logo-field>.text-button{
  margin-top:9px}
.branding-preview{
  align-self:start;
  background:var(--color-branding-preview-background);
  border:1px solid var(--color-branding-preview-border);
  border-radius:10px;
  padding:var(--space-20);
  min-width:0}
.restaurant-brand-preview{
  margin:var(--space-18) 0 15px;
  padding:var(--space-20) 17px;
  background:var(--deep);
  border-radius:9px;
  color:var(--color-sidebar-text)}
.restaurant-brand-preview .brand-symbol{
  width:54px;
  height:58px;
  font-size:var(--text-19)}
.restaurant-brand-preview strong{
  font-size:var(--text-20)}
.preview-note{
  font-size:var(--text-10);
  color:var(--color-preview-note-color);
  line-height:var(--line-height-body)}
.settings-footer{
  border-top:1px solid var(--line);
  padding:19px 25px;
  background:var(--color-surface-subtle);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:var(--space-18)}
.settings-footer>div{
  display:flex;
  gap:9px}
.settings-footer p{
  font-size:var(--text-11);
  color:var(--color-settings-footer-p-color);
  line-height:var(--line-height-control)}
.settings-footer .button:disabled{
  cursor:default}
.settings-footer .button-secondary:disabled{
  opacity:.45}
@media(max-width:1100px){
  .settings-layout{
  grid-template-columns:1fr;
  gap:var(--space-24)}
.branding-preview{
  max-width:420px}
.settings-footer{
  align-items:flex-start;
  flex-direction:column}
.restaurant-brand{
  margin-left:3px;
  margin-right:3px;
  gap:9px}
.restaurant-brand strong{
  font-size:var(--text-16)}
.restaurant-brand .brand-symbol{
  width:36px;
  height:40px}
.restaurant-brand-preview{
  margin:var(--space-18) 0 15px}
.restaurant-brand-preview strong{
  font-size:var(--text-20)}
.restaurant-brand-preview .brand-symbol{
  width:54px;
  height:58px}
}
@media(max-width:650px){
  .restaurant-brand{
  margin:0 0 var(--space-16)}
.restaurant-brand strong{
  font-size:var(--text-20);
  -webkit-line-clamp:2}
.restaurant-brand .brand-symbol{
  width:40px;
  height:42px}
.nav{
  gap:3px}
.nav button{
  font-size:var(--text-9);
  min-width:0;
  padding-left:3px;
  padding-right:3px}
.nav .settings-nav{
  margin-top:0;
  border-top:0;
  border-radius:var(--radius-medium)}
.breadcrumb-name{
  max-width:120px}
.crumb-divider{
  margin:0 7px}
.top-date{
  font-size:var(--text-9)}
.settings-body{
  padding:0 var(--space-16) var(--space-22)}
.settings-description{
  font-size:var(--text-11)}
.settings-layout{
  gap:var(--space-20)}
.branding-preview{
  padding:var(--space-16);
  width:100%}
.restaurant-brand-preview{
  margin:var(--space-16) 0 var(--space-12)}
.restaurant-brand-preview .brand-symbol{
  width:50px;
  height:54px}
.settings-footer{
  padding:var(--space-16)}
.settings-footer>div{
  width:100%}
.settings-footer .button{
  flex:1;
  font-size:var(--text-11);
  padding:var(--space-10)}
.settings-fields .field small{
  font-size:var(--text-10)}
}
.recipe-table-actions{
  display:flex;
  gap:15px;
  align-items:center}
.recipe-ingredient-list{
  display:grid;
  gap:var(--space-10);
  margin:var(--space-14) 0 23px}
.recipe-ingredient{
  display:grid;
  grid-template-columns:minmax(160px,1.7fr) minmax(100px,1fr) minmax(95px,.8fr) 28px;
  align-items:end;
  gap:var(--space-12);
  padding:var(--space-14) var(--space-12);
  background:var(--color-surface-row);
  border:1px solid var(--color-recipe-ingredient-border);
  border-radius:var(--radius-medium)}
.recipe-ingredient>.icon-button{
  margin-bottom:5px}
.recipe-ingredient .field{
  min-width:0}
.recipe-ingredient input,.recipe-ingredient select{
  min-width:0}
.recipe-line-price{
  font-size:var(--text-10);
  color:var(--color-recipe-line-price-color);
  text-align:right;
  padding-bottom:7px;
  line-height:var(--line-height-control)}
.recipe-line-price strong{
  display:block;
  font-size:var(--text-13);
  margin-top:5px;
  color:var(--color-recipe-line-price-strong-color)}
.recipe-cost-summary{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-16);
  margin:21px 0 var(--space-16);
  padding:19px var(--space-20);
  background:var(--color-recipe-cost-summary-background);
  border:1px solid var(--color-recipe-cost-summary-border);
  border-radius:9px}
.recipe-cost-summary>div{
  display:flex;
  flex-direction:column;
  gap:var(--space-8)}
.recipe-cost-summary span{
  font-size:var(--text-11);
  color:var(--color-recipe-cost-summary-span-color)}
.recipe-cost-summary strong{
  font-size:var(--text-24);
  letter-spacing:-.5px}
.recipe-cost-summary small{
  font-size:var(--text-10);
  color:var(--color-recipe-cost-summary-small-color);
  line-height:var(--line-height-control)}
.recipe-cost-note{
  font-size:var(--text-10);
  line-height:var(--line-height-body);
  color:var(--color-recipe-cost-note-color);
  margin:var(--space-12) 0 0}
.recipe-breakdown{
  border:1px solid var(--line);
  border-radius:var(--radius-control)}
.recipe-breakdown th,.recipe-breakdown td{
  padding-left:15px;
  padding-right:15px}
.dialog-heading h2{
  min-width:0;
  overflow-wrap:anywhere}
.dialog-heading .icon-button{
  flex-shrink:0}
@media(max-width:650px){
  .nav{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:5px}
.nav button{
  font-size:var(--text-11);
  flex-direction:row;
  gap:7px;
  padding:var(--space-10) var(--space-4)}
.recipe-ingredient{
  grid-template-columns:minmax(0,1fr) minmax(85px,.7fr) 28px;
  gap:var(--space-10);
  padding:var(--space-12)}
.recipe-product-field{
  grid-column:1/-1}
.recipe-line-price{
  padding-bottom:var(--space-4);
  font-size:var(--text-9)}
.recipe-ingredient>.icon-button{
  margin-bottom:var(--space-4)}
.recipe-cost-summary{
  padding:var(--space-16) 13px;
  gap:var(--space-14)}
.recipe-cost-summary span{
  font-size:var(--text-10)}
.recipe-cost-summary strong{
  font-size:var(--text-21)}
.recipe-cost-summary small{
  font-size:var(--text-9)}
.recipe-cost-note{
  font-size:var(--text-9)}
.form-section-heading h3{
  font-size:var(--text-11)}
.form-section-heading .text-button{
  font-size:var(--text-10)}
}

/* Shared form states: retain native validation and expose explicit story states. */
.field input[aria-invalid=true],.field select[aria-invalid=true]{border-color:var(--color-error-text)}
.field .field-error{color:var(--color-error-text)}
.field input:disabled,.field select:disabled{background:var(--color-control-disabled);cursor:not-allowed}
.finance-stats { grid-template-columns:repeat(3,minmax(0,1fr)); min-width:0; max-width:100%; }
.finance-stats>.stat-card { min-width:0; }
.finance-stats .stat-value { overflow-wrap:anywhere; white-space:normal; }
.finance-filter { display:flex; align-items:end; flex-wrap:wrap; gap:var(--space-16); padding:var(--space-20) var(--space-22); }
.finance-filter .field { flex:1; min-width:150px; max-width:230px; }
.finance-filter-actions { display:flex; gap:var(--space-8); flex-wrap:wrap; min-width:0; max-width:100%; }
.finance-filter input { min-width:0; }
.finance-filter-error { margin:0 var(--space-22) var(--space-20); }
.finance-period { font-size:var(--text-11); color:var(--color-text-muted); line-height:var(--line-height-body); margin:0 0 var(--space-18); }
.finance-period strong { color:var(--color-text); font-weight:var(--font-weight-semibold); }
.finance-description { min-width:180px; max-width:350px; white-space:normal; overflow-wrap:anywhere; line-height:var(--line-height-control); }
.finance-description strong { font-size:var(--text-11); font-weight:var(--font-weight-semibold); }
.finance-error { padding:var(--space-22); }
.finance-chart { width:100%; min-width:0; max-width:100%; max-height:340px; overflow-y:auto; overflow-x:hidden; }
.finance-chart>.table-wrap { contain:inline-size; overflow-x:auto; }
.finance-chart table { table-layout:fixed; min-width:420px; }
.finance-chart th:first-child { width:140px; }
.finance-chart th { position:sticky; top:0; z-index:1; }
.finance-chart td { padding-top:var(--space-8); padding-bottom:var(--space-8); }
.finance-chart-cell { position:relative; display:block; padding:var(--space-8) var(--space-10); min-height:34px; }
.finance-chart-cell>span:last-child { position:relative; font-variant-numeric:tabular-nums; }
.finance-chart-bar { position:absolute; left:0; top:0; bottom:0; border-radius:var(--radius-small); }
.finance-chart-revenue { background:var(--color-success-bg); border-left:3px solid var(--color-success-text); }
.finance-chart-cost { background:var(--color-warning-bg); border-left:3px solid var(--color-warning-text); }
.finance-chart-bar[style="width:0%"] { border-left:0; }
.demo-integrations-body { padding:var(--space-22); }
.demo-integrations-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-16); }
.demo-provider-card { min-width:0; padding:var(--space-20); border:1px solid var(--color-border); border-radius:var(--radius-small); }
.demo-provider-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--space-8); margin-bottom:var(--space-12); }
.demo-provider-heading h3 { font-size:var(--text-16); }
.demo-provider-card p,.demo-import-future p { color:var(--color-text-muted); font-size:var(--text-12); line-height:var(--line-height-body); }
.demo-provider-card p { margin-bottom:var(--space-16); }
.demo-provider-card .button { white-space:normal; }
.demo-invoice-list { display:grid; gap:var(--space-12); min-width:0; }
.demo-invoice { min-width:0; max-width:100%; border:1px solid var(--color-border); border-radius:var(--radius-small); }
.demo-invoice summary { cursor:pointer; padding:var(--space-16); overflow-wrap:anywhere; }
.demo-invoice summary>span { display:inline-block; max-width:100%; vertical-align:middle; margin-right:var(--space-16); }
.demo-invoice summary>strong { display:inline-block; margin-top:var(--space-8); font-size:var(--text-12); }
.demo-invoice summary:focus-visible { outline:var(--focus-width) solid var(--color-focus); outline-offset:var(--focus-offset); }
.demo-invoice-body { padding:var(--space-16); border-top:1px solid var(--color-border); min-width:0; }
.demo-invoice-reference { overflow-wrap:anywhere; }
.demo-import-future { display:grid; gap:var(--space-12); justify-items:start; margin-top:var(--space-20); }
.demo-import-future .button { white-space:normal; }
.auth-page { min-height:100vh; display:grid; place-items:center; padding:var(--space-24); }
.auth-card { width:100%; max-width:480px; min-width:0; padding:var(--space-28); background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-dialog); }
.auth-card h1 { margin:var(--space-14) 0; font-size:var(--text-25); }
.auth-intro,.auth-footnote { font-size:var(--text-12); line-height:var(--line-height-body); color:var(--color-text-muted); }
.auth-intro { margin-bottom:var(--space-22); }
.auth-footnote { margin-top:var(--space-20); }
.auth-card fieldset { display:grid; gap:var(--space-18); padding:0; margin:0; border:0; min-width:0; }
.auth-card .field,.auth-card input { min-width:0; }
.auth-card .button { white-space:normal; }
.session-account { display:flex; align-items:center; gap:var(--space-12); min-width:0; }
.session-account>span { min-width:0; text-align:right; }
.session-account strong { display:block; font-size:var(--text-11); max-width:180px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.session-account small { display:block; font-size:var(--text-10); color:var(--color-text-muted); }
.session-account .button { flex-shrink:0; }
.account-body { padding:var(--space-22); }
.team-section-heading { margin:var(--space-22) 0 var(--space-12); }
.team-note { white-space:normal; overflow-wrap:anywhere; min-width:150px; }
.availability-rows { display:grid; gap:var(--space-16); margin-bottom:var(--space-18); }
.availability-row { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr); gap:var(--space-12); padding:var(--space-12); border:1px solid var(--color-border); border-radius:var(--radius-small); }
.availability-row .field,.availability-row input,.availability-row select { min-width:0; }
.availability-row>.text-button { grid-column:1/-1; justify-self:start; }
.production-tab-content { padding:var(--space-20); }
.production-totals,.production-card-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-16); margin:var(--space-20) 0; }
.production-card-grid .panel { margin:0; min-width:0; }
.production-card-grid .section-title { flex-wrap:wrap; gap:var(--space-8); }
.production-card-grid h2 { overflow-wrap:anywhere; }
.production-card-body { padding:var(--space-20); }
.production-metrics { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-20) var(--space-12); margin:0 0 var(--space-20); }
.production-metrics>div { min-width:0; overflow-wrap:anywhere; }
.production-metrics dt { font-size:var(--text-11); color:var(--color-text-muted); margin:0 0 var(--space-4); }
.production-metrics dd { font-size:var(--text-18); font-weight:600; margin:0; }
.production-metrics small { display:block; margin-top:var(--space-4); color:var(--color-text-muted); font-size:var(--text-10); line-height:var(--line-height-body); }
.production-actions { display:flex; flex-wrap:wrap; gap:var(--space-10); margin:var(--space-12) 0; }
.production-actions .button,.production-recipes .button { white-space:normal; }
.production-recipes { padding:0 var(--space-20); }
.production-recipes>div { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-12); padding:var(--space-12) 0; border-bottom:1px solid var(--color-border); }
.production-recipes>div:last-child { border-bottom:0; }
.production-recipes>div>span { min-width:0; overflow-wrap:anywhere; }
.production-recipes small,.production-ingredient small { display:block; color:var(--color-text-muted); font-size:var(--text-11); margin-top:var(--space-4); }
.production-checkbox { display:flex; gap:var(--space-10); align-items:flex-start; grid-column:1/-1; font-size:var(--text-12); line-height:var(--line-height-body); }
.production-checkbox input { flex-shrink:0; margin-top:3px; width:18px; height:18px; }
.production-checkbox small { display:block; color:var(--color-text-muted); font-size:var(--text-11); margin-top:var(--space-4); }
.production-ingredients { display:grid; gap:var(--space-12); }
.production-ingredient { display:grid; grid-template-columns:minmax(0,1fr) minmax(100px,170px); gap:var(--space-16); align-items:center; padding:var(--space-12); border:1px solid var(--color-border); border-radius:var(--radius-small); }
.production-ingredient>div { min-width:0; overflow-wrap:anywhere; }
.production-ingredient .field,.production-ingredient input { min-width:0; }
form[data-form^="production-"] .dialog-footer { flex-wrap:wrap; }
form[data-form^="production-"] .dialog-footer .button { min-width:0; white-space:normal; }
.audit-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-16); margin:var(--space-20) 0; }
.audit-metrics { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-20); margin:var(--space-20) 0; }
.audit-metrics>div { min-width:0; overflow-wrap:anywhere; }
.audit-metrics dt { color:var(--color-text-muted); font-size:var(--text-12); margin-bottom:var(--space-4); }
.audit-metrics dd { margin:0; font-size:var(--text-18); font-weight:600; }
.audit-reason { font-size:var(--text-12); line-height:var(--line-height-body); overflow-wrap:anywhere; }
form[data-form="inventory-audit"] .dialog-footer { flex-wrap:wrap; }
form[data-form="inventory-audit"] .button { min-width:0; white-space:normal; }
.schedule-filter { display:flex; flex-wrap:wrap; align-items:end; gap:var(--space-12); padding:var(--space-20); }
.schedule-filter .field { min-width:0; max-width:260px; flex:1 1 200px; }
.schedule-week-actions,.schedule-views,.schedule-publish,.schedule-shift-actions { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-12); }
.schedule-week-actions { margin-left:auto; }
.schedule-controls { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-16); margin:var(--space-20) 0; }
.schedule-controls .button,.schedule-filter .button,.schedule-shift .button { white-space:normal; }
.schedule-days { display:grid; gap:var(--space-20); padding:var(--space-20); min-width:0; }
.schedule-day { min-width:0; }
.schedule-day h3 { margin:0 0 var(--space-12); font-size:var(--text-14); }
.schedule-day h3 span { display:inline-block; margin-left:var(--space-8); color:var(--color-text-muted); font-size:var(--text-12); font-weight:400; }
.schedule-shift { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--space-12); padding:var(--space-14); border:1px solid var(--color-border); border-radius:var(--radius-small); margin-bottom:var(--space-8); }
.schedule-shift-copy { display:grid; gap:var(--space-4); min-width:0; overflow-wrap:anywhere; }
.schedule-shift-copy>strong { font-size:var(--text-14); }
.schedule-shift-copy>span { font-size:var(--text-12); }
.schedule-shift-copy>small,.schedule-no-shifts,.schedule-overnight { color:var(--color-text-muted); font-size:var(--text-11); }
.schedule-overnight { display:inline-block; font-weight:400; }
.schedule-no-shifts { margin:0; padding-bottom:var(--space-12); }
.schedule-conflicts { padding:var(--space-16); margin:var(--space-16) 0; border:1px solid var(--color-border); border-radius:var(--radius-small); overflow-wrap:anywhere; }
.schedule-conflicts h3 { font-size:var(--text-14); margin:0 0 var(--space-12); }
.schedule-conflicts ul { padding-left:var(--space-20); margin:0; }
.schedule-conflicts li,.schedule-conflicts p { font-size:var(--text-12); line-height:var(--line-height-body); }
@media(max-width:950px) { .finance-stats { grid-template-columns:minmax(0,1fr); } }
@media(max-width:650px) {
  .audit-stats { grid-template-columns:minmax(0,1fr); }
  .audit-metrics { gap:var(--space-16) var(--space-12); }
  .production-tab-content,.production-card-body { padding:var(--space-16); }
  .production-card-grid,.production-totals { grid-template-columns:minmax(0,1fr); }
  .production-tab-content .production-metrics { grid-template-columns:minmax(0,1fr); }
  .production-ingredient { grid-template-columns:minmax(0,1fr); }
  .production-detail-metrics { gap:var(--space-16) var(--space-12); }
  .tabs:has([data-tab=batches]) { flex-wrap:wrap; }
  .schedule-filter,.schedule-days { padding:var(--space-16); }
  .schedule-filter .field { flex-basis:100%; max-width:none; }
  .schedule-week-actions { width:100%; justify-content:space-between; margin-left:0; }
  .schedule-publish { align-items:flex-start; flex-direction:column; }
  .availability-row { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .availability-row .field:first-child { grid-column:1/-1; }
  .auth-page { padding:var(--space-16); }
  .auth-card { padding:var(--space-20); }
  .topbar:has(.session-account) { min-height:74px; height:auto; padding-top:var(--space-10); padding-bottom:var(--space-10); flex-wrap:wrap; gap:var(--space-8); }
  .session-account { margin-left:auto; max-width:100%; gap:var(--space-8); }
  .session-account strong { max-width:140px; }
  .account-body { padding:var(--space-16); }
  .demo-integrations-body { padding:var(--space-16); }
  .demo-integrations-grid { grid-template-columns:minmax(0,1fr); }
  .demo-provider-card { padding:var(--space-16); }
  .nav { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .nav button { flex-direction:column; font-size:var(--text-10); gap:var(--space-4); padding:var(--space-10) var(--space-4); }
  .finance-filter { padding:var(--space-16); gap:var(--space-12); }
  .finance-filter .field { min-width:0; max-width:none; flex-basis:calc(50% - var(--space-12)); }
  .finance-filter-actions { width:100%; }
  .finance-filter-actions .button { flex:1; min-width:0; white-space:normal; font-size:var(--text-11); padding:var(--space-10); }
  .finance-filter-error { margin:0 var(--space-16) var(--space-16); }
  .finance-period { font-size:var(--text-10); }
}