/* Product elements contract. Loaded last; see DESIGN.md before adding overrides. */
:root{--control-height:44px;--control-radius:8px;--layout-gap:16px;--control-gap:8px;--page-padding:24px}
.content-page{padding:20px var(--page-padding) 32px}
.primary,.secondary,.filter-btn,.icon-btn,.sort-btn,.table-action{min-height:var(--control-height);border-radius:var(--control-radius);font-size:13px;line-height:1.4;gap:8px;align-items:center;justify-content:center;text-decoration:none}
.primary,.secondary{display:inline-flex;padding:10px 14px;font-weight:600;max-width:100%}
.primary{background:var(--green);border:1px solid var(--green);color:var(--on-accent)}
.secondary{background:var(--surface);border:1px solid var(--line);color:var(--ink)}
.secondary:hover:not(:disabled){background:var(--green-soft);border-color:var(--green)}
.primary:hover:not(:disabled){background:var(--green-dark)}
.primary .icon,.secondary .icon,.sort-btn .icon,.table-action .icon{width:16px;height:16px;font-size:16px}
.icon-btn,.filter-btn{width:44px;height:44px;min-width:44px;min-height:44px;flex-shrink:0}
.table-action{display:inline-flex;padding:8px;color:var(--green);text-align:left;justify-content:flex-start}
.primary:disabled,.secondary:disabled{opacity:.55;cursor:not-allowed}
.primary.danger{background:var(--danger);border-color:var(--danger);color:var(--surface)}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[role=tabpanel]:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.form-field>label,.form-field>.field-label{font-size:12px;line-height:1.5}
select,.form-field select,.form-field input:not([type=checkbox]):not([type=radio]),.searchbox,.search-picker-trigger{min-height:44px;border-radius:8px;font-size:14px}
.searchbox{height:44px;background:var(--surface);border:1px solid var(--line)}
.searchbox input{font-size:14px;min-width:0}
.panel{border-radius:12px}
.page-heading{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 24px;margin:0 0 16px;min-width:0}
.page-heading>.page-heading-copy{flex:1 1 200px;min-width:0}
.page-heading h1{font:600 22px/1.3 var(--sans);letter-spacing:-.4px;margin:0;color:var(--ink);overflow-wrap:anywhere}
.page-heading p{font-size:12px;line-height:1.5;margin:6px 0 0}
.page-heading>.page-actions{display:flex;align-items:center;justify-content:flex-end;flex:0 1 auto;width:auto;max-width:100%;gap:8px;flex-wrap:wrap;margin:0}
.page-heading .page-actions>.primary,.page-heading .page-actions>.secondary{flex:0 1 auto;white-space:normal;min-height:44px;font-size:13px;padding:10px 14px}
.page-actions .action-menu{flex:0 1 auto}
.page-actions .action-menu>summary{display:inline-flex}
.page-actions .action-menu-body{right:0;left:auto}
.page-actions .movement-export-controls{gap:8px;max-width:100%;flex:0 1 auto}
#movement-export-status:empty{display:none}
.section-nav{display:block;margin:0 0 16px;min-width:0;max-width:100%}
.business-tabs,.section-nav>.business-tabs,.settings-tabs{display:flex;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;align-items:stretch;width:100%;max-width:100%;min-width:0;gap:4px;padding:4px;margin:0;border-radius:8px;scrollbar-width:thin}
.business-tabs button{flex:0 0 auto;min-height:44px;padding:10px 14px;white-space:nowrap;font:600 13px/1.4 var(--sans);border-radius:6px}
.business-tabs .icon{display:inline-flex;width:16px;height:16px;font-size:16px}
.business-tabs [aria-selected=true]{background:var(--surface);color:var(--green);box-shadow:0 1px 3px #0001}
.settings-tabs{margin-bottom:16px}
.page-scope{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;padding:12px 16px;margin:0 0 16px;border:1px solid var(--line);border-radius:12px;background:var(--surface);min-width:0}
.page-scope>.inventory-context{flex:0 1 280px;max-width:100%;margin:0;padding:0;min-width:0;border:0}
.page-scope>.form-field{flex:0 1 280px;min-width:0;margin:0}
.page-scope .form-field{margin-bottom:0}
.page-scope .inventory-context>.form-field{width:100%;min-width:0;margin:0}
.page-scope .picker-full-value{display:block;font-size:12px}
.toolbar,.earnings-toolbar,.activity-filters{display:flex;align-items:flex-end;flex-wrap:wrap;gap:8px;margin:0 0 16px;min-width:0}
.toolbar>.searchbox,.activity-filters>.searchbox{order:0;flex:1 1 260px;min-width:0;max-width:none}
.toolbar>.form-field,.earnings-toolbar>.form-field{flex:0 1 220px;min-width:0;margin:0;max-width:none}
.toolbar>select{flex:0 1 220px;font-size:14px}
.toolbar .advanced-filters,.earnings-toolbar .advanced-filters{margin-left:0}
.action-menu>summary,.advanced-filters>summary{min-height:44px;list-style:none;display:inline-flex;align-items:center;gap:8px}
.advanced-filter-body{right:0;left:auto;gap:12px}
.schedule-toolbar{align-items:flex-end}
.schedule-toolbar>.attendance-view-switch{align-self:flex-end}
.schedule-toolbar>.icon-btn,.schedule-toolbar>strong{align-self:flex-end}
.schedule-toolbar>strong{display:flex;align-items:center;min-height:44px;font-size:13px}
.schedule-toolbar>.form-field{flex:0 1 150px}
.attendance-view-switch .secondary[aria-pressed=true]{background:var(--green-soft);color:var(--green);border-color:var(--green)}
.earnings-toolbar>.primary{order:0;margin:0}
.activity-filters{padding:12px 16px;background:var(--surface)}
.activity-filter-actions{display:flex;gap:8px;align-items:center;margin-left:auto}
.results-footer{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:12px 16px;margin:0;border-top:1px solid var(--line);min-width:0;background:var(--surface);border-radius:0 0 12px 12px}
.results-meta{font-size:12px;line-height:1.5;color:var(--muted)}
.results-controls{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-left:auto}
.movement-list+.results-footer,.activity-list+.results-footer{margin-top:0}
.table-wrap th,.table-wrap td{padding:12px 16px}
.table-wrap th{font-size:12px;font-weight:600}
.table-wrap td{font-size:13px;font-variant-numeric:tabular-nums}
.panel-header{gap:12px;flex-wrap:wrap}
.panel-header h2{font:600 15px/1.4 var(--sans)}
.compact-settings{max-width:none}
.compact-help,.hint,.compact-context,.stat-foot,.summary-strip .stat-foot{font-size:12px;line-height:1.5}
.report-context{font-size:12px}
.report-dates{align-items:flex-end;gap:8px}
.modal-head h2{font:600 20px/1.3 var(--sans)}
.modal-footer{display:flex;justify-content:flex-end;align-items:center;gap:8px;border-top:1px solid var(--line)}
.modal-footer>.primary,.modal-footer>.secondary{min-height:44px}
.modal-footer>.danger{margin-right:auto}
.appearance-footer{gap:16px;align-items:center;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:16px}
.appearance-footer>div{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}
.pos-controls .held-btn,.pos-controls .pos-focus-toggle{min-height:44px}
.pos-store-control{display:flex;flex-direction:column;gap:6px;min-width:0;max-width:100%}
.pos-store-control>.hint{margin:0;font-size:12px;line-height:1.5}
.pos-store-control>.secondary{white-space:normal}
.pos-controls .held-btn .label{display:inline}
.catalog .results-footer{margin-top:12px}
.topbar-right{gap:var(--control-gap)}
.topbar-right .icon-btn{width:44px;height:44px;min-width:44px;min-height:44px}
.compact-welcome .welcome-intro,.compact-welcome .welcome-form input{font-size:14px}

@media(max-width:700px){
 :root{--page-padding:16px}
 .content-page{padding:16px 16px 24px}
 .page-heading{gap:12px;margin-bottom:16px}
 .page-heading>.page-heading-copy{flex-basis:100%}
 .page-heading>.page-actions{width:100%;flex:1 1 100%;justify-content:flex-start}
 .page-heading .page-actions>.primary,.page-heading .page-actions>.secondary{flex:0 1 auto}
 .business-tabs button{flex:0 0 auto!important;font-size:13px;padding:10px 12px}
 .business-tabs .icon{display:inline-flex}
 .page-scope{padding:12px;gap:12px}
 .page-scope>.inventory-context,.page-scope>.form-field{flex:1 1 200px}
 .toolbar>.searchbox,.activity-filters>.searchbox{order:0;flex:1 1 100%}
 .toolbar>.form-field,.earnings-toolbar>.form-field{flex:1 1 150px;min-width:0}
 .activity-filters{padding:12px}
 .activity-filter-actions{margin-left:0;flex-wrap:wrap}
 .page-actions .action-menu-body{right:auto;left:0}
 .advanced-filter-body{left:0;right:auto;max-width:calc(100vw - 32px)}
 .results-footer{padding:12px;gap:8px}
 .results-controls{margin-left:auto}
 .modal-footer button{flex:0 1 auto}
 .modal-footer>.danger{margin-right:auto}
 .pos-controls .held-btn .label{display:inline}
 .topbar{gap:8px}
 .schedule-toolbar>.attendance-view-switch{flex-basis:100%}
}
@media print{.page-actions,.page-scope,.toolbar,.earnings-toolbar,.results-controls{display:none!important}}

/* Attach metadata to its corresponding asynchronous result block. */
.movement-list,.activity-list{margin-bottom:0}

.results-heading{font:600 15px/1.4 var(--sans);margin:16px 0 12px}

/* Keep POS controls named in focus mode and identity actions touch-sized. */
body.pos-focus .pos-controls .held-btn .label{display:inline}
.account-signout{width:44px;height:44px;min-width:44px;min-height:44px}

/* Receipt rows reserve a column for amounts; prose metadata uses the full width. */
.receipt-preview{width:100%;max-width:360px;padding:20px;text-align:left;font-size:12px;line-height:1.6;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.receipt-preview h3{font-size:26px;line-height:1.2;overflow-wrap:anywhere}
.receipt-preview p{font-size:12px;line-height:1.5}
.receipt-preview .receipt-line{display:grid;grid-template-columns:minmax(0,1fr) max-content;gap:12px;align-items:baseline;padding-block:3px}
.receipt-preview .receipt-line>:last-child{text-align:right}
.receipt-preview .receipt-line.receipt-stacked,.receipt-preview .receipt-line.receipt-reference{display:block;margin-block:8px}
.receipt-preview .receipt-line.receipt-stacked>span,.receipt-preview .receipt-line.receipt-reference>span{display:block;white-space:normal;overflow-wrap:anywhere;text-align:left}
.receipt-preview .receipt-stacked>span:first-child,.receipt-preview .receipt-reference>span:first-child{font-weight:600}
@media print{.receipt-preview{width:100%;max-width:80mm;padding:4mm;margin-inline:auto;break-inside:auto}.receipt-preview .receipt-line{break-inside:avoid}}

/* Feature Settings uses the shared panel, heading, tabs and toggle controls. */
.feature-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:16px 0}
.feature-groups .panel{min-width:0;margin:0}
.feature-groups .panel-header h2{display:flex;align-items:center;gap:8px}
.feature-groups .toggle-row{gap:16px;align-items:center}
.feature-groups .toggle-row>div{min-width:0}
.feature-groups .toggle-row p{font-size:12px;line-height:1.6}
.feature-groups .toggle{flex-shrink:0}
.feature-groups .feature-child{padding-left:16px;border-left:2px solid var(--line)}
.feature-groups .toggle:disabled{opacity:.5;cursor:default}
@media(max-width:700px){.feature-groups{grid-template-columns:1fr}}

.toggle{width:54px;min-width:54px;height:44px;min-height:44px;display:flex;align-items:center;padding:8px;border:1px solid var(--line)}
.toggle:after{width:20px;height:20px;flex-shrink:0}
.toggle.on:after{transform:translateX(16px)}
.feature-groups .toggle-row strong{font-size:13px}

.pos-opening-page{width:100%;max-width:640px;margin:0 auto}
.pos-opening-fields{min-width:0;margin:0;padding:0;border:0}
.pos-opening-fields>.primary{width:100%;margin-top:8px}
.cash-details{margin-block:16px;min-width:0;overflow-wrap:anywhere}
.cash-details>summary{min-height:44px;padding:12px 0;font-size:14px;font-weight:600;cursor:pointer}
.cash-details[open]>summary{margin-bottom:8px}
.cash-session-summary .bill-line,.cash-session-summary .notice,.pos-opening-page>.notice,#cash-shift-form .bill-line,#cash-shift-form .notice,.cash-details .table-detail,.cash-details small,.cash-details th,.cash-details td,.cash-history-list .cell-note{font-size:12px;line-height:1.5}

.product-identity{display:flex;align-items:flex-end;gap:16px;margin-bottom:16px;min-width:0}
.product-identity>.form-field{flex:1;min-width:0;margin:0}
.product-appearance-trigger{flex:0 0 auto;flex-direction:column}
.product-identity-preview{display:flex;width:56px;height:56px;align-items:center;justify-content:center}
.product-identity-preview>.appearance-thumb{width:56px;height:56px;object-fit:cover;border-radius:6px}

.cart-panel .cart-thumb{display:inline-flex;flex:0 0 40px;width:40px;height:40px;object-fit:cover}

/* Quiet sync details affordance; keep the shared 44px icon hit target. */
.topbar-right:has(.offline-pos-button) .connection { display:none; }
.offline-pos-focus-status { display:none; }
body.pos-focus .offline-pos-focus-status { display:inline-flex; }
.offline-pos-button { border:0; background:transparent; box-shadow:none; color:var(--muted); }
.offline-pos-button:hover { border:0; background:transparent; color:var(--ink); }

/* Compact POS actions keep neutral borders and full touch targets. */
.pos-controls .secondary.icon-btn { padding:0; }