/* Breakeven: two clear headline figures, one outcome, optional supporting detail. */
#fin-be-body { container-type: inline-size; }
.be-kpis { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin: 8px 0 18px; }
.be-kpi { min-width: 0; padding: 14px; border: 1px solid var(--ci-border); border-radius: 12px; background: var(--ci-surface-strong); }
.be-kpi > span { display: block; color: var(--ci-dark); font-size: 13px; margin-bottom: 8px; }
.be-kpi > strong { display: block; font-size: clamp(22px,5.5cqi,32px); line-height: 1.25; color: var(--ci-dark); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.be-kpi small, .be-result small { font-size: .6em; font-weight: 500; }
.be-sales { background: color-mix(in srgb,var(--ci-success) 10%,var(--ci-surface)); border-color: color-mix(in srgb,var(--ci-success) 35%,var(--ci-border)); }
.be-sales > strong { color: var(--ci-success); }
.be-progress-label { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; font-size: 12px; color: var(--ci-dark); }
.be-progress { height: 10px; border-radius: 999px; background: var(--ci-surface-accent); overflow: hidden; }
.be-progress > div { height: 100%; border-radius: inherit; }
.be-result { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 14px 0; color: var(--ci-danger); }
.be-result > span { font-size: 13px; }
.be-result > strong { font-size: 23px; font-variant-numeric: tabular-nums; }
.be-result.is-reached { color: var(--ci-success); }
.be-details { border-top: 1px solid var(--ci-border); }
.be-details > summary { cursor: pointer; padding: 12px 0 2px; font-size: 12px; color: var(--ci-dark); min-height: 36px; }
.be-detail-content { padding-top: 8px; line-height: 1.7; }
.be-detail-content p { margin: 0 0 6px; font-size: 12px; color: var(--ci-dark); }
@container (max-width: 360px) {
  .be-kpis { grid-template-columns: minmax(0,1fr); gap: 8px; }
  .be-kpi { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px; }
  .be-kpi > span { margin: 0; flex-shrink: 0; }
  .be-kpi > strong { font-size: 26px; }
}

/* Sales date navigation: keep the native date picker compact and inside its row. */
.sales-day-toolbar { min-width: 0; }
.sales-day-nav { min-width: 0; flex-wrap: nowrap; }
.sales-date-wrap {
  min-width: min(220px,45vw) !important;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 3px;
  line-height: 1.25;
}
.sales-date-input {
  display: block;
  box-sizing: border-box;
  width: 142px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 30px !important;
  min-height: 30px !important;
  margin: 0 auto;
  padding: 2px 6px !important;
  border: 1px solid color-mix(in srgb,var(--ci-border) 72%,transparent) !important;
  border-radius: 8px !important;
  background: var(--ci-surface-strong) !important;
  line-height: 24px !important;
  text-align: center;
}
.sales-date-input::-webkit-date-and-time-value { text-align: center; }
.sales-date-input::-webkit-calendar-picker-indicator { margin: 0; padding: 2px; }
@container page (max-width: 620px) {
  .sales-day-nav { display: grid !important; grid-template-columns: 44px minmax(0,1fr) 44px; width: 100%; }
  .sales-date-wrap { min-width: 0 !important; width: 100%; }
  .sales-date-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
  .sales-today-btn { grid-column: 1 / -1; width: 100%; min-height: 42px; }
}
/* Shared content layout: respond to usable space, not the window behind a sidebar. */
#app > .view { min-width: 0; min-height: 0; container-type: inline-size; container-name: page; }
#app > .view > * { box-sizing: border-box; min-width: 0; }
.metrics-grid > *, .finance-summary > *, .menu-cost-grid > *, .emp-summary-grid > *,
.two-col > *, .three-col > *, .iai-level-dashboard > *, .fai-chart-grid > * { min-width: 0; }
.card-title, .cost-page-toolbar, .emp-page-header { flex-wrap: wrap; gap: 12px; }
.cost-page-toolbar > *, .emp-page-header > *, .iai-toolbar > * { min-width: 0; }
.cost-page-actions { flex-wrap: wrap; }
.stock-readonly-notice { flex-wrap: wrap; }
.stock-readonly-notice > div { flex-wrap: wrap; }

/* Dashboard: a complete toolbar card rather than an unpadded white strip. */
#dash-toolbar { padding: 14px 16px; border: 1px solid var(--ci-border); border-radius: 16px; gap: 12px; align-items: center; }
#dash-chips-row { min-width: 0; gap: 8px !important; }
#dash-toolbar .dash-wchip { min-height: 36px; background: var(--ci-surface-strong); color: var(--ci-dark); border-color: var(--ci-border); }
#dash-toolbar:not(.is-editing) .dash-wchip-x { display: none; }
#dash-toolbar #dash-edit-btn, #dash-toolbar #btn-add-widget { min-height: 40px; padding: 8px 14px !important; border-radius: 11px !important; background: var(--ci-surface-strong) !important; color: var(--ci-red) !important; }
#dash-toolbar.is-editing { outline: 1px solid var(--ci-gold); }
#dash-toolbar.is-editing .dash-wchip { background: var(--ci-surface-accent); }
#widget-popover { top: calc(100% + 8px); max-width: calc(100vw - 40px); background: var(--ci-surface); color: var(--ci-dark); }
.wp-icon { color: var(--ci-dark); }

/* Common page gutters; remove the second set of padding on purchase/sales. */
@media (min-width: 737px) {
  #app > .view { padding: 24px 28px 32px; }
  #app > .view > * { max-width: 1360px; margin-left: auto; margin-right: auto; }
  #app > .view > .purchase-page-wrap, #app > .view > #sales-container { width: 100%; max-width: 1360px; padding: 0; }
  #app > .view > .iai-shell, #app > .view > .uix-section-card, #app > .view > .uix-users-hero { width: 100%; max-width: 1360px; }
  #fin-export-bar { width: 100%; justify-content: space-between; padding: 12px 14px; background: var(--ci-surface); }
  .emp-page-header, .cost-page-toolbar { padding: 14px 16px; border: 1px solid var(--ci-border); border-radius: 14px; background: var(--ci-surface); }
  #stock-section-tabs { display: grid !important; grid-template-columns: repeat(4,minmax(0,1fr)); padding: 6px; border: 1px solid var(--ci-border); border-radius: 14px; background: var(--ci-surface); }
  #stock-section-tabs > button { min-width: 0; min-height: 44px; white-space: normal; }
  .menu-cost-grid { grid-template-columns: repeat(auto-fit,minmax(min(250px,100%),1fr)); }
  .metrics-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .finance-summary, .purchase-summary { grid-template-columns: repeat(3,minmax(0,1fr)); }
}

@container page (max-width: 1050px) {
  .two-col, .three-col, .emp-main-layout { grid-template-columns: minmax(0,1fr) !important; }
  .fin-chart-box { flex: none; height: 280px; min-height: 0; }
  .emp-summary-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@container page (max-width: 900px) {
  .sales-month-stats { grid-template-columns: repeat(3,minmax(0,1fr)) !important; }
}
@container page (max-width: 780px) {
  #dash-toolbar { display: grid; grid-template-columns: minmax(0,1fr) auto; }
  #dash-chips-row { grid-column: 1 / -1; }
  #dash-edit-btn, #widget-picker-wrap, #btn-add-widget { width: 100%; }
  .iai-toolbar { grid-template-columns: minmax(0,1fr) auto; }
  .iai-toolbar > div:first-child { grid-column: 1 / -1; }
  .fai-chart-grid { grid-template-columns: minmax(0,1fr); }
  .iai-level-dashboard { grid-template-columns: minmax(0,1fr); }
  .iai-summary-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .sales-month-stats, .sales-kpi-grid, .metrics-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  .uix-users-nav { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .uix-perm-list { grid-template-columns: minmax(0,1fr); }
  .fin-bar-left, .fin-bar-right { flex: 1 1 100%; }
  .cost-page-toolbar { align-items: stretch; }
  .cost-page-actions { flex: 1 1 100%; }
}
@container page (max-width: 480px) {
  #dash-toolbar { grid-template-columns: repeat(2,minmax(0,1fr)); padding: 12px; }
  #dash-toolbar #dash-edit-btn, #dash-toolbar #btn-add-widget { padding: 8px !important; font-size: 12px; }
  .iai-toolbar { grid-template-columns: minmax(0,1fr); }
  .iai-toolbar > div:first-child { grid-column: auto; }
  .finance-summary { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .emp-page-header > div:last-child { flex-wrap: wrap; gap: 8px; }
}

/* User history filters: keep horizontal scrolling inside the card, never the page. */
#view-users div:has(> .log-filter-btn) { max-width: 100%; min-width: 0; flex-wrap: wrap !important; overflow: visible !important; gap: 8px !important; }
#view-users .log-date-nav { flex-wrap: wrap; }
#view-users .log-filter-btn { flex: 0 1 auto; white-space: normal; }
#view-users .uix-log-section .card-title + div { flex-wrap: wrap !important; overflow: visible !important; min-width: 0; max-width: 100%; }
@media (max-width: 736px) {
  #app > .view > .purchase-page-wrap, #app > .view > #sales-container { width: 100%; padding: 0; }
  #dash-toolbar { margin-bottom: 16px; }
  #dash-chips-row { max-width: 100%; }
  .emp-page-header { align-items: flex-start; }
  .emp-page-header > div { max-width: 100%; }
}
@media print {
  #app > .view { container-type: normal; padding: 0; }
  #dash-toolbar { display: none !important; }
}