/* Shared visual language for the shop workspace. */
:root {
  --brand-primary:#205a40; --brand-secondary:#133425; --brand-focus:#2d805b;
  --brand-ink:#133425; --brand-white:#ffffff; --brand-border:#dedfd5;
  --line:#dedfd5; --muted:#60776c; --accent:var(--brand-primary);
  --sidebar-width:232px; --header-height:64px;
  color:#133425; background:#faf9f6;
}
body {font-weight:400; line-height:1.55}
button,input,select,textarea {border-radius:5px}
button {font-weight:550; box-shadow:none; transition:background-color .12s,border-color .12s}
button:hover {filter:none; background:var(--brand-secondary)}
.quiet {background:#fff; color:#354b40; border-color:#ddddd8}
.quiet:hover {background:#f5f5f0; border-color:#b7cac1}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,
.product-table-wrap:focus-visible {outline:2px solid var(--brand-focus); outline-offset:3px}
button[aria-busy=true] {cursor:progress}
button[aria-busy=true]::after {content:''; display:inline-block; width:12px; height:12px; margin-left:8px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:ui-spin .6s linear infinite}
input,select,textarea {border-color:#ddddd8; background:#fff; line-height:20px; color:#133425}
input::placeholder,textarea::placeholder {color:#778c82; opacity:1}
input:disabled,select:disabled,textarea:disabled {background:#f7f7f2; color:#687d73}
input[type=checkbox],input[type=radio] {accent-color:var(--accent)}
label {gap:6px; margin-bottom:16px; font-weight:450}
h1,h2,h3 {color:#133425; letter-spacing:-.3px; font-weight:650}
h2 {font-size:20px; line-height:28px}
h3 {font-size:14px; line-height:20px; margin-bottom:16px}
small,.footnote {line-height:1.5}
#workspace .eyebrow {display:none}
.panel,.table-wrap,.dash-panel,.notes-list-panel,.notes-editor-panel {border-color:var(--line); border-radius:6px; background:#fff; box-shadow:none}
.panel {padding:24px}
.panel h3+.footnote {margin-top:-6px}
.section-head {margin-bottom:20px; gap:16px}
.section-head h2 {margin:0}
.section-head p {margin:4px 0 0}
.actions {gap:8px}
.spaced {margin-top:24px}
.form-row {gap:16px}
.toolbar {gap:12px}
.empty,.dash-list-empty,.notes-no-results {color:var(--muted); padding:40px 24px; line-height:1.7}
.context-label {display:block; color:var(--muted); font-size:11px; font-weight:600; letter-spacing:.7px; margin-bottom:8px}
.danger-text {color:#a53434; border-color:#e2c8c8}
.pagination {gap:12px; font-size:12px; margin:16px 0}
.pagination button {background:#fff}
.method-note {font-size:12px; color:var(--muted); margin-top:20px; max-width:1100px}
.method-note summary {cursor:pointer; padding:8px 0; font-weight:500; color:#466053}
.method-note p {margin-top:8px}
footer {font-size:12px; border-color:var(--line)}

/* shodesk branding uses the forest and ivory palette across the workspace. */
#workspace>.app-header {height:var(--header-height); padding:10px 24px; border-color:var(--line); gap:20px}
.brand-mark {display:block; height:32px; width:32px; border-radius:5px; background:var(--brand-primary)}
.brand-wordmark {display:block; width:108px; height:25px; object-fit:contain}
.app-brand strong {display:block}
.login-brand {display:block; width:172px; height:40px; object-fit:contain; object-position:left center}
.login {background:#fff; border:1px solid var(--line); border-radius:6px; box-shadow:none; padding:36px; width:calc(100% - 32px)}
.login h1 {font-size:34px; line-height:1.2; color:var(--brand-ink)}
.login .muted {font-size:14px}
.footer-brand {color:var(--brand-primary); font-weight:650; letter-spacing:-.3px}
.app-brand strong {font-size:14px; font-weight:600}
.app-brand #shop-label {font-size:12px; color:var(--muted)}
.nav-location {font-size:13px; gap:16px}
.app-header #logout {border-color:transparent; font-size:12px; min-height:36px}
#app-sidebar {background:#fcfcf7; border-color:var(--line); padding-top:16px}
#app-sidebar .sidebar-heading {background:#fcfcf7; font-size:11px; font-weight:550; color:#6a8176}
#app-sidebar nav :is(button,:where(a[data-route-link])) {font-weight:500; color:#465e52; gap:10px; padding:9px 12px; min-height:40px; border-radius:7px}
#app-sidebar nav :is(button,:where(a[data-route-link])) svg {width:20px; height:20px}
#app-sidebar nav :is(button,:where(a[data-route-link])):hover {background:#f2f2ed}
#app-sidebar nav :is(button,:where(a[data-route-link])).active,#app-sidebar nav .nav-parent>[data-tab].active {background:#edede8; color:#2a4d3c}
#app-sidebar nav .nav-children :is(button,:where(a[data-route-link])) {font-size:13px; font-weight:400; padding:8px 12px}
#app-sidebar nav .nav-children :is(button,:where(a[data-route-link])).active {background:transparent}
#app-sidebar nav .nav-children :is(button,:where(a[data-route-link]))[aria-current=page] {background:#ebebe6; color:#294b3b; font-weight:600}
.nav-children {border-color:#ddddd8; margin-left:22px}
.sidebar-footnote {font-size:11px; color:#71877c; padding-top:24px}
#workspace>#app-main {padding:24px 28px 40px}
#workspace>footer {margin-left:calc(var(--sidebar-width) + 28px)}
#warehouse .warehouse-panel>.section-head {border-top:0; padding-top:0}
#warehouse .warehouse-panel>.section-head>div {min-width:0}

/* Compact summaries replace tall stacks of metric cards on working lists. */
.metrics,.ord-metrics {
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0;
  background:#fff; border:1px solid var(--line); border-radius:5px;
  margin:0 0 20px; overflow:hidden;
}
.ord-metrics {grid-template-columns:repeat(4,minmax(0,1fr))}
.metrics>div,.ord-metrics>div {display:flex; flex-direction:row; align-items:center; justify-content:space-between; gap:12px; min-width:0; padding:14px 16px; border:0; border-right:1px solid var(--line); border-radius:0; background:transparent}
.metrics>div:last-child,.ord-metrics>div:last-child {border-right:0}
.metrics span,.ord-metrics span {font-size:12px; line-height:18px; max-width:none; color:var(--muted)}
.metrics strong,.ord-metrics strong {font-size:22px; line-height:28px; font-weight:550; margin:0; letter-spacing:-.4px; font-variant-numeric:tabular-nums}

/* Products: views, a single toolbar, optional advanced filters, and the data. */
.product-view-bar {display:flex; align-items:center; gap:12px; margin-bottom:12px; min-width:0}
.view-picker {margin:0; min-width:0; max-width:350px}
.view-picker select {font-size:14px; font-weight:600; width:100%; border-color:transparent; background-color:transparent; padding-left:0}
#product-view-save {background:transparent; border-color:transparent; color:var(--muted); font-size:12px; padding:6px 8px}
.product-layout-switch {display:none; margin-left:auto; flex:none; border:1px solid var(--line); border-radius:5px; padding:2px; background:#fff}
.product-layout-switch button {border:0; border-radius:5px; background:transparent; font-size:12px; padding:6px 10px}
.product-layout-switch [aria-pressed=true] {background:#edede8; color:#2a4d3c}
.product-list-toolbar {display:grid; grid-template-columns:minmax(220px,1fr) minmax(145px,190px) minmax(120px,145px) auto; align-items:end; gap:10px; margin-bottom:12px}
.product-list-toolbar>label {margin:0; min-width:0; font-size:12px}
.product-list-toolbar input,.product-list-toolbar select {width:100%; min-width:0}
.product-table-tools {display:flex; gap:8px; align-items:center; min-width:0}
.product-table-tools label {margin:0; min-width:0}
.product-table-tools button {white-space:nowrap}
#product-column-preset {font-size:13px; max-width:170px}
#product-filter-count:not(:empty) {display:inline-grid; place-items:center; min-width:18px; height:18px; margin-left:4px; padding:0 4px; border-radius:5px; background:#e3e3de; font-size:11px; color:#315041}
.product-selection-tools {display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 12px}
.product-selection-tools label {margin:0; display:flex; flex-direction:row; align-items:center; gap:10px; color:var(--muted); font-size:12px}
.product-selection-tools select {font-size:12px; max-width:290px; min-height:32px; padding:5px 8px; background:transparent; border-color:transparent}
#select-filtered {background:transparent; border-color:transparent; font-size:12px; color:#476255; padding:5px 8px; min-height:32px}
.active-filters {display:flex; flex-wrap:wrap; gap:6px; margin:0 0 12px}
.filter-chip {display:inline-flex; align-items:center; gap:8px; padding:4px 9px; min-height:28px; max-width:100%; overflow-wrap:anywhere; background:#eeeee9; color:#344c40; border:1px solid #dcdcd7; font-size:12px; border-radius:6px; text-align:left}
.filter-chip:hover {background:#e3e3de; color:#263d32}
.filter-chip span {font-size:16px; line-height:1; flex:none}
.clear-filters {background:transparent; border:0; color:var(--muted); font-size:12px; padding:4px 8px; min-height:28px}
.batch-bar {position:sticky; top:calc(var(--header-height) + 8px); z-index:15; padding:12px 16px; background:#f2f2ed; border:1px solid #c8c8c3; border-radius:5px; margin:0 0 12px; font-size:13px; box-shadow:0 4px 12px #263b2c0a}
.batch-bar>.actions,.batch-bar>div {gap:6px}
.batch-bar .quiet {border-color:transparent; background:transparent}

.product-table-wrap {max-height:calc(100dvh - 310px); min-height:180px; scrollbar-width:thin; scrollbar-color:#b7c5be transparent; scroll-padding-top:56px; overscroll-behavior-x:contain}
th {font-size:12px; font-weight:550; color:#526d60; background:#fbfbf6; padding:12px; line-height:18px}
td {font-size:13px; padding:12px; border-color:#f2f2ed; line-height:20px}
td small {font-size:12px; color:var(--muted); margin-top:3px}
tbody tr:hover td {background:#fbfbf6}
#product-table {border-collapse:separate; border-spacing:0}
#product-table thead th {position:sticky; top:0; z-index:3; white-space:normal; hyphens:none; overflow-wrap:normal; vertical-align:middle}
#product-table th small {font-size:11px; line-height:16px; font-weight:400}
#product-table [data-column=select] {position:sticky; left:0; z-index:2; background:#fff}
#product-table [data-column=product] {position:sticky; left:var(--select-column-width,48px); z-index:1; background:#fff; box-shadow:1px 0 0 #edede8}
#product-table th[data-column=select],#product-table th[data-column=product] {background:#fbfbf6; z-index:5}
#product-table tr:hover [data-column=select],#product-table tr:hover [data-column=product] {background:#fbfbf6}
#product-table td.number,#product-table th:is([data-column=cost],[data-column=price],[data-column=newPrice],[data-column=gain],[data-column=fixed],[data-column=vat],[data-column=profit],[data-column=margin],[data-column=weight],[data-column=inventory]) {text-align:right}
.product-cell {gap:10px}
.product-thumbnail,.product-thumbnail-empty {width:36px; height:36px; min-height:36px; flex-basis:36px; border-color:#e7e7e2; border-radius:7px}
.product-title {font-size:13px; font-weight:600; line-height:20px; padding:0; min-height:0; width:100%; border:0; background:transparent; color:#24342c; text-align:left; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; overflow-wrap:anywhere}
.product-title:hover {background:transparent; color:#315946; text-decoration:underline}
#product-table .cost-button,#product-table .product-tags-button {background:transparent; border-color:transparent; font-size:13px; font-weight:450; min-height:32px; padding:5px 7px; color:#263b31; line-height:20px}
#product-table .cost-button:hover,#product-table .product-tags-button:hover {background:#f1f1ec; border-color:#d2d2cd}
#product-table .product-tags-button {text-align:left; font-size:12px}
#product-table .product-status {background:#f4f4ef; border-color:transparent; border-radius:6px; font-size:12px; font-weight:500; min-height:30px; padding:4px 7px; gap:6px}
#product-table .delete-product-button {color:#7a8c83; border-color:transparent; background:transparent; width:32px; height:32px; min-height:32px; padding:8px}
#product-table .delete-product-button:hover {background:#fff0ed; color:#a83b2f}
.column-resizer {border-color:transparent}
.product-card-more {display:none}

/* Filters and detail panels share the same modal vocabulary. */
dialog {padding:24px; border-color:var(--line); border-radius:7px; background:#fff; box-shadow:0 16px 64px #182c2226}
dialog::backdrop {background:#203b2e59; backdrop-filter:none}
dialog .section-head {align-items:flex-start; flex-direction:row}
dialog .section-head>div {min-width:0}
.dialog-x {height:36px; width:36px; min-height:36px; padding:0; font-size:24px; line-height:1; flex:none; background:transparent; border-color:transparent}
.filter-drawer {inset:0 0 0 auto; margin:0; width:440px; max-width:100%; height:100dvh; max-height:100dvh; border:0; border-left:1px solid var(--line); border-radius:0}
.filter-drawer[open] {display:flex; flex-direction:column}
.filter-drawer-fields {min-height:0; overflow-y:auto; flex:1; padding:4px}
.filter-drawer-fields label {margin-bottom:20px}
.drawer-actions {display:flex; gap:10px; justify-content:space-between; flex:none; border-top:1px solid var(--line); padding-top:16px; margin-top:8px; background:#fff}
#product-views-dialog {max-width:560px}
.saved-view-list {margin-top:24px; border-top:1px solid var(--line); padding-top:20px}
.saved-view-list>div {display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px solid #f2f2ed}
.saved-view-list>div>span {min-width:0; overflow-wrap:anywhere}
.saved-view-list button {font-size:12px; padding:5px 9px; min-height:30px}
#product-details-dialog {max-width:650px}
#product-details-title {overflow-wrap:anywhere}
.product-detail-values {margin:20px 0 24px}
.product-detail-values>div {display:grid; grid-template-columns:1fr 1.5fr; gap:16px; padding:10px 0; border-bottom:1px solid #f2f2ed}
.product-detail-values dt {color:var(--muted)}
.product-detail-values dd {margin:0; overflow-wrap:anywhere}
.product-detail-actions {display:grid; grid-template-columns:1fr 1fr; gap:8px}

/* Dashboard: metrics, priorities, then the working overview and the catalog. */
.dash-head {gap:16px; margin-bottom:16px}
#dashboard h2 {font-size:24px; line-height:32px; margin:0}
#dashboard h3 {font-size:14px; font-weight:600}
.dash-head>div>p {display:none}
.dash-controls {gap:10px}
.dash-controls label {font-size:12px}
.dash-controls button {min-height:38px; height:auto}
.dash-status {font-size:12px; margin-bottom:20px; color:var(--muted)}
.dash-kpis {gap:12px; margin-bottom:16px}
.dash-kpi {padding:20px; border-color:var(--line); border-radius:6px; background:#fff}
.dash-kpi.featured {background:#fff; color:inherit; border-top:3px solid var(--brand-focus); padding-top:18px}
.dash-kpi.featured>span,.dash-kpi.featured>small {color:var(--muted)}
.dash-kpi>span:first-child {font-size:12px; font-weight:500}
.dash-kpi>strong {font-size:30px; line-height:36px; font-weight:550; margin:12px 0; letter-spacing:-.8px}
.dash-kpi>small {font-size:11px; line-height:16px; margin-top:8px}
.dash-change {font-size:12px; line-height:18px}
.dash-change small {font-size:11px}
.dash-primary,.dash-bottom {gap:16px; margin-bottom:20px}
.dash-panel {padding:20px}
.dash-panel-head {margin-bottom:16px}
.dash-panel-head p {font-size:12px}
.dash-order-attention {margin:0 0 20px; padding:14px 16px; background:#f2f2ed; border-color:#dbdbd6; border-radius:5px; gap:8px}
.dash-order-attention>div {font-size:13px}
.dash-order-attention small {font-size:11px}
.dash-order-attention button {font-size:12px; background:#fff; padding:7px 10px; min-height:34px}
.dash-queue-row {padding:13px 0; border-color:#f2f2ed}
.dash-queue-row strong {font-size:13px; font-weight:550}
.dash-queue-row small {font-size:12px}
.dash-queue-row>b {font-size:22px; font-weight:550}
.dash-queue-icon {border-radius:5px; width:32px; height:32px}
.dash-tabs {gap:4px; border-bottom:1px solid var(--line); padding-bottom:8px; margin-bottom:8px}
.dash-tabs button {border:0; background:transparent; color:var(--muted); font-size:12px; padding:6px 10px; min-height:32px; border-radius:6px}
.dash-tabs button.active {background:#eeeee9; color:#2a4d3c; font-weight:600}
.dash-order-link {border:0; background:transparent; color:#2e5341; font-size:13px; font-weight:600; min-height:0; padding:0; text-align:left}
.dash-order-link:hover {background:transparent; color:#203a2d; text-decoration:underline}
.dash-scroll th {background:#fbfbf6; font-size:12px}
.dash-scroll td {font-size:13px}
.dash-pill,.ord-pill {font-size:11px; line-height:16px; padding:3px 7px; border-radius:5px; font-weight:450}
.dash-attention {gap:10px}
.dash-attention-card {padding:16px; background:#fff; border-color:var(--line); border-radius:5px}
.dash-attention-card>strong {font-size:24px; font-weight:550; margin:10px 0}
.dash-attention-card>span {font-size:12px; color:#465b51}
.dash-attention-card>small {font-size:11px; color:var(--muted)}
.dash-stock-note {font-size:12px; padding:14px 0; background:transparent; border:0}
.dash-catalog {margin-top:24px}
.dash-method {font-size:12px; margin-top:20px}
.dash-leaders li {padding:14px 0}
.dash-leaders li strong {font-size:13px; line-height:20px}
.dash-units {font-size:16px; font-weight:550}
.dash-rank,.dash-units small {font-size:11px}

/* Orders retain their existing forms and confirmation flows. */
.ord-filters {gap:10px}
.ord-filters label {font-size:12px; min-width:150px}
.ord-filter-details {font-size:12px; margin-bottom:16px}
.ord-filter-details summary {padding:4px 0; margin-bottom:8px}
.ord-name {min-height:32px; font-size:13px; font-weight:600}
.ord-list-table td {vertical-align:top}
.ord-list-table th {background:#fbfbf6}
.ord-pills {gap:5px; margin:4px 0}
.ord-notice {font-size:12px; padding:12px 14px; line-height:20px; border-radius:5px}
.ord-back {font-size:12px; margin-bottom:16px; border-color:transparent; background:transparent; padding-left:0}
.order-section-nav {display:flex; flex-wrap:wrap; gap:8px; padding:0 0 14px; margin-bottom:20px; border-bottom:1px solid var(--line)}
.order-section-nav button {font-size:12px; border:0; background:transparent; padding:7px 10px; color:#556e62}
.order-section-nav button:hover {background:#edede8; color:#2a4c3b}
.ord-main .panel,.ord-side .panel {padding:20px}
.ord-main h3,.ord-side h3 {margin-bottom:14px; font-size:14px}
.ord-main .spaced,.ord-main>#order-local-form {margin-top:16px}
.ord-main .footnote {font-size:12px}
[id^=order-][id$=-section] {scroll-margin-top:calc(var(--header-height) + 20px)}
.order-form-actions {display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:20px; padding-top:16px; border-top:1px solid var(--line)}
.order-form-actions>span {color:var(--muted); font-size:12px; min-width:0}
.order-form-actions .is-dirty {color:#896113}
#order-local-form>.order-form-actions {position:sticky; bottom:16px; z-index:10; padding:12px 16px; border:1px solid #d8d8d3; border-radius:5px; background:#fff; box-shadow:0 6px 22px #283a2d12}
.ord-ledger {font-size:13px; margin:16px 0}
.ord-ledger>div {padding:9px 0; gap:12px; border-color:#f2f2ed}
.ord-ledger dt small {display:block; font-size:11px; margin-top:3px}
.ord-ledger dd {font-weight:550}
.ord-profit-total {background:#f3f3ee; border-radius:5px; padding:16px; margin:16px 0}
.ord-profit-total>strong {font-size:28px; letter-spacing:-.5px; margin:8px 0}
.ord-profit-total>span,.ord-profit-total>small {font-size:12px}
#order-editor-summary strong {font-size:22px; line-height:28px}
.ord-main textarea {font-size:14px; line-height:22px}

/* Notes, settings, supplier rules and feeds use the same surfaces and rhythm. */
#notes h2 {font-size:20px; margin:0}
#notes-subtitle {display:none}
.notes-filters {gap:12px; margin-bottom:20px}
.notes-filters button {min-height:38px}
.notes-layout {gap:16px; grid-template-columns:minmax(250px,310px) minmax(0,1fr)}
.notes-list-head {padding:16px; background:#fbfbf6; gap:3px}
.notes-list-head strong {font-size:13px}
.notes-list-head>span {font-size:12px}
.notes-list-item {padding:16px; border-color:#f2f2ed}
.notes-list-item:hover {background:#fafaf5}
.notes-list-item.is-selected {background:#f3f3ee; box-shadow:inset 3px 0 var(--brand-focus)}
.notes-item-heading strong {font-size:14px; font-weight:550; line-height:21px}
.notes-item-preview {font-size:13px; line-height:20px; margin-top:8px; color:var(--muted)}
.notes-item-group {font-size:11px; margin-top:12px}
.notes-item-tags>span {font-size:11px; border-radius:5px; background:#eeeee9; color:#3b584a; padding:3px 7px}
#notes-editor {padding:24px}
.notes-editor-bar {padding-bottom:16px; margin-bottom:20px}
.notes-title-label input {font-size:20px; font-weight:600; border:0; border-bottom:1px solid var(--line); border-radius:0; padding:10px 0; background:transparent}
.notes-body-label textarea {font-size:14px; background:#fff; border-color:#e6e6e1; padding:14px; line-height:24px; min-height:300px}
.notes-welcome {background:#fff; padding:48px 24px; min-height:440px}
.notes-welcome>span {background:#f3f3ee; color:#648a78; border-radius:7px}
.notes-welcome h3 {font-size:20px; line-height:28px}
.notes-welcome p {font-size:14px; line-height:22px}
.notes-organization-head h3 {font-size:18px}
.notes-label-icon {width:40px; height:40px; font-size:23px; background:#f3f3ee; border-radius:5px}
.notes-tag-choice {font-size:12px; background:#fafaf5; border-color:#e1e1dc}
.notes-tag-choice:has(input:checked) {background:#edede8; border-color:#8aab9b}
.notes-editor-footer {font-size:12px}
.mode-option,.rule-preview {background:#fdfdf8; border-color:var(--line); border-radius:5px}
.mode-option:has(input:checked) {background:#f2f2ed; border-color:#93b1a2; box-shadow:none}
.formula {background:#f8f8f3; border-radius:5px; font-size:13px}
.rule-card {padding:16px 0; border-color:#f2f2ed}
.rule-card strong {font-size:14px; font-weight:600}
.rule-card p {font-size:12px}
.feed-card {border-color:var(--line); background:#fff; border-radius:6px}
.feed-field-picker,.feed-mapping {border-color:var(--line)}
.feed-column {background:#fdfdf8; border-color:var(--line); border-radius:5px}
.feed-available-fields label {border-color:var(--line)}
.feed-available-fields label:has(input:checked) {background:#f2f2ed; border-color:#97b3a5}
.shipping-calc-card {background:#fff; border-color:var(--line); border-radius:5px}
.shipping-summary-table th:first-child {background:#fbfbf6}
.banner {background:#f2f2ed; border-color:#d4d4cf; font-size:13px; border-radius:9px; padding:12px 16px; margin-bottom:20px}
.notification {background:#fff; color:#25322c; border:1px solid #e1e1dc; border-left:4px solid #5d8668; border-radius:5px; box-shadow:0 6px 24px #20352b21; font-size:13px; line-height:20px; padding:14px 16px}
.notification.error {background:#fff; color:#79322c; border-color:#ead4d1; border-left-color:#b45a4e}
.notification-close {color:#5c7f6e; background:transparent; border-color:transparent; width:28px; height:28px; min-height:28px; font-size:21px; padding:0}
.notification-close:hover {background:#f3f3ee}

@media(min-width:1101px) {
  button,input,select {min-height:38px; padding:8px 12px}
  input[type=checkbox],input[type=radio] {min-height:0}
  #app-sidebar nav .nav-children :is(button,:where(a[data-route-link])) {min-height:36px}
  #app-sidebar .nav-disclosure {min-height:36px; width:32px; padding:8px}
}
@media(min-width:1200px) {
  .ord-detail-grid {grid-template-columns:minmax(0,1fr) 310px; gap:20px}
  .ord-side {position:sticky; top:calc(var(--header-height) + 16px); display:block}
  .ord-side .spaced {margin-top:16px}
}
@media(min-width:1301px) {
  .dash-primary {grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr)}
  .dash-bottom {grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr)}
  .dash-kpis {grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:1300px) {
  .product-list-toolbar {grid-template-columns:minmax(180px,2fr) minmax(140px,1fr) minmax(120px,1fr)}
  .product-table-tools {grid-column:1/-1; justify-content:flex-end}
  .product-table-wrap {max-height:calc(100dvh - 360px)}
  .metrics>div,.ord-metrics>div {padding:12px; flex-direction:column; align-items:flex-start; gap:4px}
}
@media(max-width:1199px) {
  .ord-detail-grid {grid-template-columns:1fr}
  .ord-side {position:static; display:grid; grid-template-columns:1fr 1fr; gap:16px}
  .ord-side .spaced {margin-top:0}
}
@media(max-width:1100px) {
  :root {
  --brand-primary:#205a40; --brand-secondary:#133425; --brand-focus:#2d805b;
  --brand-ink:#133425; --brand-white:#ffffff; --brand-border:#dedfd5;--header-height:64px}
  #workspace>.app-header {padding:10px 20px; gap:14px}
  #workspace>#app-main {padding:24px}
  #workspace>footer {margin:0 24px}
  #app-sidebar {padding-top:16px}
  #app-sidebar nav :is(button,:where(a[data-route-link])) {min-height:46px; font-size:14px}
  #app-sidebar nav .nav-children :is(button,:where(a[data-route-link])) {font-size:14px; min-height:44px}
  button,input,select {min-height:44px}
  input[type=checkbox],input[type=radio] {min-height:0}
  #workspace input,#workspace select,#workspace textarea,dialog input,dialog select,dialog textarea {font-size:16px}
  #product-column-preset,#product-view {font-size:14px}
  #product-details-dialog .quiet,.drawer-actions button,.dialog-x {min-height:44px}
  .notes-layout {grid-template-columns:minmax(230px,280px) minmax(0,1fr)}
  .notes-filters button {min-height:44px}
}
@media(max-width:800px) {
  .dash-head {flex-direction:column; align-items:stretch; gap:14px}
  #dashboard h2 {font-size:22px; line-height:30px}
  .dash-controls {display:flex; flex-wrap:nowrap; align-items:end}
  .dash-controls label {flex:1; min-width:0}
  .dash-controls button {flex:1; min-height:44px; font-size:13px}
  .dash-kpis {grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
  .dash-kpi {padding:16px}
  .dash-kpi.featured {padding-top:14px}
  .dash-kpi>strong {font-size:26px; line-height:32px; margin:8px 0}
  .dash-change small {display:block}
  .dash-kpi>small {font-size:11px}
  .dash-primary,.dash-bottom {grid-template-columns:1fr; gap:16px}
  .dash-panel {padding:18px}
  .dash-order-attention {padding:14px; gap:8px}
  .dash-order-attention>div {flex-basis:100%; min-width:0}
  .dash-order-attention button {flex:1 1 auto; min-height:44px}
  .dash-attention {grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
  .dash-attention-card {padding:14px}
  .dash-attention-card>strong {font-size:22px}
  .notes-layout {grid-template-columns:1fr}
  .notes-filters {margin-bottom:16px}
  .notes-editor-bar {gap:10px}
  #notes-editor {padding:20px}
  .section-head {gap:12px}
  .product-table-wrap {max-height:70dvh}
}
@media(max-width:700px) {
  #workspace>.app-header {padding:10px 12px; gap:10px}
  #workspace>#app-main {padding:20px 16px 32px}
  #workspace>footer {margin:0 16px; font-size:11px}
  .app-brand strong {font-size:13px}
  .app-brand #shop-label {font-size:11px}
  .app-header #logout {font-size:12px; min-height:40px; padding:7px 9px}
  .panel {padding:18px}
  h2 {font-size:20px; line-height:28px}
  #products>.section-head {flex-direction:row; align-items:flex-start}
  #products>.section-head>.actions {flex:none}
  #products>.section-head>.actions>button {padding:9px 12px; font-size:13px}
  #sync-time {font-size:12px; line-height:18px}
  .metrics,.ord-metrics {margin-bottom:16px}
  .metrics {grid-template-columns:repeat(3,minmax(0,1fr))}
  .metrics>div,.ord-metrics>div {padding:12px; flex-direction:column; align-items:flex-start; gap:6px}
  .metrics span,.ord-metrics span {font-size:11px; line-height:16px}
  .metrics strong,.ord-metrics strong,#order-editor-summary strong {font-size:20px; line-height:26px; margin:0}
  .ord-metrics {grid-template-columns:repeat(2,minmax(0,1fr))}
  .ord-metrics>div:nth-child(-n+2) {border-bottom:1px solid var(--line)}
  .ord-metrics>div:nth-child(2) {border-right:0}
  .product-view-bar {gap:6px; flex-wrap:wrap; margin-bottom:12px}
  .view-picker {max-width:calc(100% - 140px); flex:1}
  .view-picker select {min-height:38px; padding-right:22px}
  #product-view-save {order:3; padding-left:0; min-height:30px}
  .product-layout-switch {display:flex}
  .product-layout-switch button {min-height:34px; padding:6px 8px}
  .product-list-toolbar {grid-template-columns:1fr 1fr; gap:10px}
  .product-list-toolbar>.search {grid-column:1/-1}
  .product-table-tools {display:grid; grid-template-columns:auto minmax(0,1fr) auto; justify-content:stretch; gap:8px}
  #product-column-preset {max-width:none; width:100%; padding-left:8px; padding-right:20px; font-size:13px}
  .product-table-tools button {padding:9px 10px; font-size:13px}
  .product-selection-tools {flex-wrap:wrap; gap:4px; margin-bottom:12px}
  .product-selection-tools label {width:100%; justify-content:space-between; font-size:11px; gap:6px}
  .product-selection-tools select {font-size:12px!important; max-width:225px; min-height:34px; padding:5px}
  #select-filtered {padding-left:0; font-size:12px; min-height:32px}
  .filter-chip {min-height:36px}
  .clear-filters {min-height:36px}
  .batch-bar {top:calc(var(--header-height) + 4px); padding:12px; gap:10px}
  .batch-bar>div {display:flex; flex-wrap:wrap; gap:6px; width:100%}
  .batch-bar button {min-height:40px; padding:8px 10px; font-size:12px; flex:1 1 auto}
  #products[data-mobile-layout=cards] .product-table-wrap {overflow:visible; background:transparent; border:0; max-height:none; min-height:0; border-radius:0}
  #products[data-mobile-layout=cards] #product-table {display:block; table-layout:auto; width:100%!important; min-width:0}
  #products[data-mobile-layout=cards] #product-table colgroup {display:none}
  #products[data-mobile-layout=cards] #product-table thead,#products[data-mobile-layout=cards] #product-table tbody {display:block; width:100%}
  #products[data-mobile-layout=cards] #product-table thead tr {display:block; margin-bottom:8px}
  #products[data-mobile-layout=cards] #product-table thead th {display:none; position:static; box-shadow:none}
  #products[data-mobile-layout=cards] #product-table th[data-column=select] {display:flex; align-items:center; gap:10px; background:transparent; padding:8px 0; width:100%}
  #products[data-mobile-layout=cards] #product-table th[data-column=select]::after {content:'Επιλογή σελίδας'; font-weight:400}
  #products[data-mobile-layout=cards] .column-resizer {display:none}
  #products[data-mobile-layout=cards] #product-table tbody tr {display:grid; grid-template-columns:22px minmax(0,1fr) minmax(0,1fr); gap:10px 12px; border:1px solid var(--line); border-radius:6px; background:#fff; padding:16px; margin-bottom:12px}
  #products[data-mobile-layout=cards] #product-table tbody td {display:none!important; position:static; border:0; background:transparent; padding:0; box-shadow:none; width:auto; min-width:0; text-align:left}
  #products[data-mobile-layout=cards] #product-table td[data-column=select] {display:block!important; grid-column:1; grid-row:1/5; padding-top:10px}
  #products[data-mobile-layout=cards] #product-table td[data-column=product] {display:block!important; grid-column:2/-1; grid-row:1}
  #products[data-mobile-layout=cards] #product-table td[data-column=status] {display:block!important; grid-column:2/-1; grid-row:2}
  #products[data-mobile-layout=cards] #product-table td[data-column=price],#products[data-mobile-layout=cards] #product-table td[data-column=inventory] {display:block!important; grid-row:3; border-top:1px solid #f2f2ed; padding-top:10px}
  #products[data-mobile-layout=cards] #product-table td[data-column=price] {grid-column:2}
  #products[data-mobile-layout=cards] #product-table td[data-column=inventory] {grid-column:3}
  #products[data-mobile-layout=cards] #product-table td[data-column=price]::before,#products[data-mobile-layout=cards] #product-table td[data-column=inventory]::before {content:attr(data-card-label); display:block; font-size:11px; color:var(--muted); margin-bottom:4px}
  #products[data-mobile-layout=cards] .product-title {font-size:14px; line-height:21px}
  #products[data-mobile-layout=cards] .product-cell {align-items:flex-start; gap:10px}
  #products[data-mobile-layout=cards] .product-thumbnail,#products[data-mobile-layout=cards] .product-thumbnail-empty {width:44px; height:44px; min-height:44px; flex-basis:44px}
  #products[data-mobile-layout=cards] .product-card-more {display:block; font-size:12px; padding:5px 0; background:transparent; color:#355c49; border:0; min-height:36px; text-align:left; margin-top:3px}
  #products[data-mobile-layout=cards] #product-table .cost-button {padding:5px 0; font-size:14px; min-height:36px}
  #products[data-mobile-layout=cards] #product-table tbody tr:has(.empty) {display:block}
  #products[data-mobile-layout=cards] #product-table td.empty {display:block!important; padding:24px 12px}
  .filter-drawer {width:min(440px,100vw); padding:20px 16px max(20px,env(safe-area-inset-bottom))}
  .drawer-actions {flex-wrap:wrap}
  .drawer-actions button {flex:1; font-size:13px}
  dialog {padding:20px; width:calc(100vw - 24px); max-height:92dvh}
  .product-detail-actions {gap:10px}
  .product-detail-values>div {grid-template-columns:1fr 1.4fr; gap:12px}
  .ord-side {grid-template-columns:1fr}
  .ord-main .panel,.ord-side .panel {padding:18px}
  .order-section-nav {gap:4px; padding-bottom:12px; margin-bottom:16px}
  .order-section-nav button {font-size:12px; min-height:40px; padding:7px 8px}
  .order-form-actions {align-items:flex-start; flex-direction:column; gap:8px}
  .order-form-actions>button {width:100%; font-size:13px}
  #order-local-form>.order-form-actions {bottom:8px; padding:12px}
  .ord-main textarea {font-size:16px}
  .ord-list-table td small {font-size:12px}
  .ord-list-table tbody td[data-label]:before {font-size:11px}
  .ord-list-table tbody tr {padding:16px; border-color:var(--line)}
  .notes-list-item {padding:16px}
  .notes-item-heading strong {font-size:14px}
  .notes-item-preview {font-size:13px}
  .notes-item-group,.notes-item-tags>span {font-size:12px}
  #notes-editor {padding:18px 16px}
  .notes-title-label input {font-size:18px!important; padding:8px 0}
  .notes-body-label textarea {font-size:16px!important; line-height:26px}
  .notes-editor-bar button {font-size:13px; min-height:42px}
  .notes-filters {gap:10px}
  .notification {font-size:13px}
}
@media(prefers-reduced-motion:reduce) {button{transition:none}button[aria-busy=true]::after{animation:none}}
@keyframes ui-spin {to{transform:rotate(360deg)}}
/* Keep headings and controls separate when the mobile header wraps. */
.column-resizer::after {border-right-color:transparent}
#product-table th:hover .column-resizer::after {border-right-color:#d1d1cc}
@media(max-width:700px){
  #products>.section-head>div:first-child{flex:1;min-width:0}
  #products>.section-head>.actions{width:auto;flex:0 0 auto}
  #product-view-save{flex-basis:100%;text-align:left}
  .view-picker{max-width:calc(100% - 140px);min-width:120px}
}
#product-view-save svg{display:none}
#product-filter-primary-fields:empty{display:none}
@media(max-width:700px){
  .product-view-bar{flex-wrap:nowrap;gap:6px}
  .view-picker{max-width:none;min-width:120px}
  #product-view-save{order:2;flex:0 0 34px;width:34px;min-height:36px;padding:8px;display:grid;place-items:center}
  #product-view-save>span{display:none}
  #product-view-save svg{display:block;width:17px;height:17px}
  .product-layout-switch{order:3;margin-left:0}
  .product-list-toolbar{grid-template-columns:minmax(0,1fr) auto}
  .product-list-toolbar>.search{grid-column:1}
  .product-table-tools{grid-column:2;display:flex;justify-content:flex-end}
  #products[data-mobile-layout=cards] .product-table-tools>label,#products[data-mobile-layout=cards] #product-columns-open{display:none}
  #products[data-mobile-layout=table] .product-list-toolbar>.search{grid-column:1/-1}
  #products[data-mobile-layout=table] .product-table-tools{grid-column:1/-1}
  .product-selection-tools label{font-size:12px}
  .metrics>div{padding:12px 10px}
}
.edit-cue{display:inline-block;width:12px;height:12px;vertical-align:middle;margin-left:6px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;opacity:0;flex:none}
#product-table button:hover .edit-cue,#product-table button:focus-visible .edit-cue{opacity:1}
#product-table button:disabled .edit-cue{opacity:0}
@media(hover:none){.edit-cue{opacity:.65}}
#product-table tr:has([data-select]:checked) td,.ord-list-table tr:has([data-order-select]:checked) td{background:#f3f3ee}

/* Record tabs distinguish navigation from commands. */
.record-mark {display:inline-block; width:13px; height:13px; margin-inline-start:7px; vertical-align:-1px; flex:none; fill:none; stroke:currentColor; stroke-width:1.3; opacity:.7}
button:hover .record-mark,a:hover .record-mark {opacity:1}
.login h1 {font-size:26px; letter-spacing:-.4px; margin-top:28px}
#app-sidebar nav :is(button,:where(a[data-route-link])) {border-radius:4px}
#app-sidebar nav :is(button,:where(a[data-route-link]))[aria-current=page] {box-shadow:inset 2px 0 var(--brand-primary)}
.dash-kpis {gap:0; border-block:1px solid var(--line); background:#fff}
.dash-kpi,.dash-kpi.featured {border:0; border-inline-end:1px solid var(--line); border-radius:0; padding:20px; background:transparent}
.dash-kpi:last-child {border-inline-end:0}
.dash-kpi>strong {font-size:32px; font-weight:600; letter-spacing:-.6px}
.dash-panel {border:0; border-top:2px solid var(--brand-primary); border-radius:0; padding:20px 0 0; background:transparent}
.dash-primary,.dash-bottom {gap:28px}
.dash-scroll th {background:transparent; border-bottom:1px solid var(--line)}
.dash-tabs {padding:0; gap:16px}
.dash-tabs button {border-radius:0; padding:9px 0; border-bottom:2px solid transparent}
.dash-tabs button.active {background:transparent; border-bottom-color:var(--brand-primary); color:var(--brand-primary)}
.dash-queue-icon {width:24px; height:28px; background:transparent; color:var(--muted); font-size:11px; font-variant-numeric:tabular-nums; border-radius:0}
.dash-order-attention {background:transparent; border:0; border-block:1px solid var(--line); border-radius:0; padding:16px 0}
.dash-order-attention button {background:transparent; border-color:var(--line); border-radius:4px}
.dash-attention {display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 28px; border-top:1px solid var(--line)}
.dash-attention-card {display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:3px 16px; border:0; border-bottom:1px solid var(--line); border-radius:0; padding:14px 0; background:transparent; color:var(--brand-ink)}
.dash-attention-card:hover {background:transparent; transform:none; border-color:var(--brand-primary)}
.dash-attention-card>span {min-height:0; font-size:13px}
.dash-attention-card>strong {grid-column:2; grid-row:1 / 3; margin:0; font-size:22px; gap:8px; font-variant-numeric:tabular-nums}
.dash-attention-card>small {grid-column:1; min-height:0}
.dash-attention-card .record-mark {width:12px; height:12px}
.dash-chart-empty {background:transparent; border:1px dashed var(--line); border-radius:0}
.dash-meter {border-radius:0; height:3px}
.dash-meter>span {border-radius:0}
.notes-welcome>span {display:none}
.dash-order-link,.ord-name,.dash-link {text-decoration-thickness:1px; text-underline-offset:3px}
#notes-pages button,.notification-center-pages button {font-size:12px; padding:7px 10px}
@media(max-width:800px){
 .dash-kpis {grid-template-columns:repeat(2,minmax(0,1fr))}
 .dash-kpi:nth-child(2) {border-inline-end:0}
 .dash-kpi:nth-child(-n+2) {border-bottom:1px solid var(--line)}
 .dash-primary,.dash-bottom {gap:24px}
}
@media(max-width:500px){
 .dash-attention {grid-template-columns:1fr}
 .dash-kpi,.dash-kpi.featured {padding:16px 12px}
 .dash-kpi>strong {font-size:clamp(20px,6vw,28px)}
 .dash-panel {padding:16px 0 0}
 .dash-order-attention {gap:8px}
 .dash-order-attention>div {width:100%}
 .dash-order-attention button {flex:1; text-align:left}
 .dash-order-attention button .record-mark {display:none}
}

.dash-head {text-align:left; align-items:flex-start}
.dash-head>div:first-child {align-self:flex-start}
@media(min-width:1101px){.dash-head {flex-direction:row; align-items:flex-end}}


#workspace>.app-header .app-brand {align-self:center;align-items:center}
#workspace>.app-header .brand-wordmark {display:block;margin-block:0;max-height:100%;transform:none}
#app-main table th {word-break:normal;overflow-wrap:normal}
#app-main table:not(#product-table) th {min-width:5rem}
#app-main #product-table th {overflow-wrap:normal;word-break:normal}
#app-main #product-table th[data-column="product"] {white-space:nowrap}
#app-main #product-table td[data-column="product"] .product-title {word-break:normal;overflow-wrap:normal;white-space:normal}