:root {
  color-scheme: light;
  --bg: #f3f6f7;
  --surface: #ffffff;
  --surface-2: #edf3f3;
  --surface-3: #e2ebeb;
  --text: #142225;
  --muted: #66777a;
  --border: #dce5e6;
  --primary: #0f766e;
  --primary-strong: #0b5e58;
  --primary-soft: #d9f3ef;
  --danger: #b42318;
  --warning: #b54708;
  --success: #067647;
  --shadow: 0 16px 45px rgba(18, 47, 50, .08);
  --radius: 18px;
  --sidebar: 264px;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0c1416;
  --surface: #121d20;
  --surface-2: #182629;
  --surface-3: #223235;
  --text: #ecf6f5;
  --muted: #9fb0b2;
  --border: #27383b;
  --primary: #2dd4bf;
  --primary-strong: #5eead4;
  --primary-soft: #123b38;
  --danger: #ff8a80;
  --warning: #fdb022;
  --success: #47cd89;
  --shadow: 0 18px 55px rgba(0, 0, 0, .24);
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: var(--bg); color: var(--text); line-height: 1.45; }
button, input, select { font: inherit; }
button { color: inherit; }
code { background: var(--surface-2); border-radius: 7px; padding: 2px 6px; font-size: .86em; overflow-wrap: anywhere; }
.icon { width: 21px; height: 21px; fill: currentColor; flex: 0 0 auto; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; background: #102c2d; color: #eafffb; padding: 20px 14px 14px; display: flex; flex-direction: column; z-index: 50; }
.brand { display: grid; grid-template-columns: 44px minmax(0,1fr) auto; align-items: center; gap: 11px; padding: 4px 6px 22px; }
.brand-logo { width: 44px; height: 44px; border-radius: 13px; background: #27c7b4; color: #082d2a; display: grid; place-items: center; font-weight: 900; overflow: hidden; }
.brand-logo img { width: 100%; height: 100%; object-fit: cover; }
.brand strong, .brand span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand strong { font-size: .97rem; }.brand span { color: #9cc7c3; font-size: .76rem; margin-top: 2px; }
.nav-list { display: flex; flex-direction: column; gap: 4px; overflow-y: auto; padding-right: 2px; }
.nav-item { border: 0; background: transparent; color: #b9d1cf; display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 10px 12px; border-radius: 12px; cursor: pointer; text-align: left; transition: .18s ease; }
.nav-item:hover { background: rgba(255,255,255,.07); color: white; }.nav-item.active { background: #1f4d4b; color: white; box-shadow: inset 3px 0 #5eead4; }
.sidebar-footer { margin-top: auto; display: flex; align-items: center; gap: 8px; border-top: 1px solid rgba(255,255,255,.1); padding: 16px 6px 2px; }
.user-chip { display: flex; gap: 9px; min-width: 0; flex: 1; align-items: center; }.user-chip strong,.user-chip span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.user-chip strong { font-size: .82rem; }.user-chip span { font-size: .72rem; color: #9cc7c3; text-transform: capitalize; }
.avatar { width: 34px; height: 34px; border-radius: 10px; background: #2b5a58; display: grid; place-items: center; font-size: .72rem; font-weight: 800; flex: 0 0 auto; }
.main-shell { min-width: 0; }
.topbar { position: sticky; top: 0; z-index: 30; min-height: 70px; background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); padding: 0 24px; display: flex; align-items: center; gap: 14px; }
.topbar-title { min-width: 0; flex: 1; }.topbar-title strong,.topbar-title span { display: block; }.topbar-title strong { font-size: 1rem; }.topbar-title span { color: var(--muted); font-size: .75rem; }
.topbar-actions { display: flex; align-items: center; gap: 8px; }.connection-pill { font-size: .75rem; display: flex; align-items: center; gap: 6px; color: var(--success); background: var(--surface-2); padding: 7px 10px; border-radius: 999px; }.connection-pill i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }.connection-pill.offline { color: var(--danger); }
.icon-btn { width: 40px; height: 40px; border: 0; border-radius: 11px; background: transparent; display: grid; place-items: center; cursor: pointer; }.icon-btn:hover { background: rgba(255,255,255,.08); }.topbar .icon-btn:hover { background: var(--surface-2); }.menu-button,.sidebar-close { display: none; }
.content { padding: 28px; max-width: 1600px; margin: 0 auto; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 22px; }.page-heading.compact { align-items: center; }.page-heading h1 { font-size: clamp(1.65rem, 3vw, 2.15rem); line-height: 1.1; margin: 4px 0 7px; letter-spacing: -.035em; }.page-heading p { color: var(--muted); margin: 0; }.eyebrow { color: var(--primary); text-transform: uppercase; letter-spacing: .14em; font-size: .68rem; font-weight: 800; }.date-chip { background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 9px 13px; font-size: .8rem; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; min-width: 0; }.card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 15px; margin-bottom: 16px; }.card h2 { font-size: 1rem; margin: 0 0 4px; }.card p { color: var(--muted); margin: 0; font-size: .86rem; }
.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; margin-bottom: 18px; }.kpi-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); }.kpi-card span,.kpi-card strong,.kpi-card small { display: block; }.kpi-card span { color: var(--muted); font-size: .78rem; }.kpi-card strong { font-size: 1.65rem; margin: 8px 0 4px; letter-spacing: -.04em; }.kpi-card small { color: var(--muted); font-size: .72rem; }
.dashboard-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }.span-2 { grid-column: span 2; }.span-3 { grid-column: span 3; }
.empty-chart { min-height: 250px; display: grid; place-items: center; align-content: center; gap: 12px; background: linear-gradient(180deg, transparent, var(--surface-2)); border-radius: 14px; }.bars { height: 120px; width: min(90%,560px); display: flex; align-items: end; gap: 8px; border-bottom: 1px solid var(--border); padding: 0 8px; }.bars i { display: block; flex: 1; background: var(--primary-soft); border-radius: 8px 8px 0 0; }.bars i:nth-child(1){height:24%}.bars i:nth-child(2){height:42%}.bars i:nth-child(3){height:36%}.bars i:nth-child(4){height:68%}.bars i:nth-child(5){height:54%}.bars i:nth-child(6){height:80%}.bars i:nth-child(7){height:61%}
.mini-list { display: grid; gap: 4px; }.mini-list div { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--border); }.mini-list div:last-child { border: 0; }.mini-list span { color: var(--muted); font-size: .84rem; }
.milestone-row { display: flex; flex-wrap: wrap; gap: 10px; }.milestone { display: flex; align-items: center; gap: 7px; padding: 9px 11px; border-radius: 10px; background: var(--surface-2); font-size: .8rem; }.milestone i { font-style: normal; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; }.milestone.done i { color: var(--success); background: color-mix(in srgb, var(--success) 12%, transparent); }.milestone.next i { color: var(--warning); background: color-mix(in srgb, var(--warning) 12%, transparent); }
.btn { min-height: 42px; border-radius: 11px; padding: 9px 14px; border: 1px solid transparent; font-weight: 750; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: .18s ease; }.btn:disabled { opacity: .48; cursor: not-allowed; }.btn-primary { background: var(--primary); color: #fff; }.btn-primary:hover:not(:disabled) { background: var(--primary-strong); transform: translateY(-1px); }.btn-secondary { background: var(--surface); border-color: var(--border); }.btn-secondary:hover:not(:disabled) { background: var(--surface-2); }.btn-block { width: 100%; }.btn-small { min-height: 34px; padding: 6px 10px; font-size: .78rem; }.action-row { display: flex; gap: 8px; }
.input,.select { width: 100%; min-height: 42px; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 9px 11px; outline: none; }.input:focus,.select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent); }.file-input { padding: 7px; }
label { display: grid; gap: 7px; color: var(--muted); font-size: .78rem; font-weight: 650; }.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }.field-help { font-size: .75rem !important; }
.status { display: inline-flex; align-items: center; justify-content: center; padding: 5px 9px; border-radius: 999px; font-size: .68rem; font-weight: 800; white-space: nowrap; background: var(--surface-2); color: var(--muted); }.status-pending,.status-unpaid { background:#eef2f6;color:#475467}.status-preparing { background:#fef0c7;color:#93370d}.status-ready-for-delivery {background:#d1e9ff;color:#175cd3}.status-out-for-delivery {background:#ebe9fe;color:#5925dc}.status-delivered,.status-paid {background:#dcfae6;color:#067647}.status-failed-delivery {background:#fee4e2;color:#b42318}.status-cancelled {background:#e4e7ec;color:#344054}.status-foundation { background: var(--primary-soft); color: var(--primary-strong); }
:root[data-theme="dark"] .status-pending,:root[data-theme="dark"] .status-unpaid,:root[data-theme="dark"] .status-cancelled { background:#29383b;color:#d1dddf }:root[data-theme="dark"] .status-preparing {background:#4b3514;color:#fdb022}:root[data-theme="dark"] .status-ready-for-delivery{background:#153454;color:#84caff}:root[data-theme="dark"] .status-out-for-delivery{background:#2d245a;color:#bdb4fe}:root[data-theme="dark"] .status-delivered,:root[data-theme="dark"] .status-paid{background:#153b2d;color:#75e0a7}:root[data-theme="dark"] .status-failed-delivery{background:#4a2020;color:#fda29b}
.pos-layout { display: grid; grid-template-columns: minmax(0,1fr) 380px; gap: 18px; }.pos-products { min-height: 620px; }.pos-cart { display: flex; flex-direction: column; min-height: 620px; }.search-row { display: grid; grid-template-columns: 1fr auto; gap: 9px; }.module-placeholder,.empty-state { min-height: 300px; display: grid; place-items: center; align-content: center; text-align: center; gap: 7px; padding: 30px; }.module-placeholder strong,.empty-state strong { font-size: 1.05rem; }.module-placeholder p,.empty-state p { max-width: 580px; }.empty-state.compact { min-height: 150px; }.cart-total { margin-top: auto; display: flex; justify-content: space-between; align-items: center; padding: 20px 0; border-top: 1px solid var(--border); }.cart-total strong { font-size: 1.5rem; }
.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }.toolbar .input { max-width: 360px; }.muted { color: var(--muted); font-size: .78rem; }
.table-wrap { overflow: auto; border: 1px solid var(--border); border-radius: 13px; }table { width: 100%; border-collapse: collapse; min-width: 780px; }th,td { padding: 13px 14px; text-align: left; border-bottom: 1px solid var(--border); font-size: .8rem; vertical-align: middle; }th { position: sticky; top: 0; background: var(--surface-2); color: var(--muted); font-size: .7rem; text-transform: uppercase; letter-spacing: .07em; }tbody tr:last-child td { border-bottom: 0; }td strong,td small { display: block; }td small { color: var(--muted); margin-top: 3px; }.table-loading { text-align: center; padding: 50px; color: var(--muted); }
.delivery-summary { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin-bottom: 18px; }.delivery-card { display: flex; gap: 12px; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: 15px; padding: 15px; box-shadow: var(--shadow); }.delivery-card span,.delivery-card strong { display: block; }.delivery-card div span { color: var(--muted); font-size: .75rem; }.delivery-card strong { font-size: 1.35rem; margin-top: 3px; }.status-dot { width: 11px; height: 36px; border-radius: 999px; background:#98a2b3}.dot-ready-for-delivery{background:#2e90fa}.dot-out-for-delivery{background:#7a5af8}.dot-delivered{background:#12b76a}
.delivery-toolbar { align-items: flex-start; }.segmented { display: flex; flex-wrap: wrap; gap: 5px; }.segment { border: 1px solid var(--border); background: var(--surface); border-radius: 999px; min-height: 34px; padding: 6px 10px; cursor: pointer; font-size: .72rem; }.segment.active { background: var(--primary); border-color: var(--primary); color: white; }
.settings-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }.settings-card { display: grid; gap: 16px; align-content: start; }.permission-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }.check { display: flex; align-items: center; gap: 8px; background: var(--surface-2); border-radius: 9px; padding: 9px; font-size: .72rem; overflow-wrap: anywhere; }.role-list { display: grid; gap: 9px; }.role-list div { display: flex; justify-content: space-between; gap: 12px; padding: 12px; border-radius: 10px; background: var(--surface-2); }.role-list span { color: var(--muted); font-size: .76rem; }
.login-page { min-height: 100vh; display: grid; grid-template-columns: 1.15fr .85fr; background: var(--surface); }.login-panel { position: relative; overflow: hidden; background: #0d3434; color: white; padding: clamp(28px,6vw,80px); display: flex; flex-direction: column; justify-content: space-between; min-height: 100vh; }.login-panel::before { content:""; position:absolute; width:520px;height:520px;border-radius:50%;background:#1b6260;filter:blur(2px);right:-230px;bottom:-170px;opacity:.75 }.login-panel::after { content:""; position:absolute; width:300px;height:300px;border-radius:70px;background:#1db8a5;transform:rotate(36deg);left:-180px;top:22%;opacity:.16 }.login-brand,.login-copy { position: relative; z-index: 1; }.login-brand { display: flex; align-items: center; gap: 12px; }.login-brand strong,.login-brand span { display:block }.login-brand span { color:#a5cfcb;font-size:.76rem }.login-logo-mark,.login-logo-image { width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:#37d3bf;color:#093b37;font-weight:900;object-fit:cover }.login-copy { max-width:700px; }.login-copy .eyebrow { color:#70f0df }.login-copy h1 { font-size:clamp(2.4rem,6vw,5rem);line-height:.96;letter-spacing:-.055em;margin:14px 0 22px }.login-copy p { color:#c3ddda;font-size:1rem;max-width:620px }.login-features { display:flex;flex-wrap:wrap;gap:8px;margin-top:28px }.login-features span { border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:8px 11px;font-size:.72rem;color:#daf0ed }
.login-form-panel { display:grid;place-items:center;padding:32px;background:var(--bg) }.login-card { width:min(430px,100%);background:var(--surface);border:1px solid var(--border);border-radius:24px;padding:clamp(24px,5vw,38px);box-shadow:var(--shadow);display:grid;gap:18px }.login-card h2 { font-size:1.75rem;margin:4px 0 }.login-card p { color:var(--muted);margin:0;font-size:.83rem }.login-help { border-top:1px solid var(--border);padding-top:16px }.form-error { color:var(--danger);font-size:.78rem;min-height:1.1em }.spinner { width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:spin .7s linear infinite }@keyframes spin{to{transform:rotate(360deg)}}
.blocked-page { min-height:100vh;display:grid;place-items:center;padding:24px;background:var(--bg) }.blocked-card { width:min(520px,100%);background:var(--surface);border:1px solid var(--border);border-radius:24px;box-shadow:var(--shadow);padding:36px;text-align:center;display:grid;justify-items:center;gap:14px }.blocked-card h1,.blocked-card p { margin:0 }.blocked-card p { color:var(--muted) }
.toast-region { position:fixed;right:18px;bottom:18px;z-index:200;display:grid;gap:8px;max-width:min(380px,calc(100vw - 36px)) }.toast { background:#142225;color:#fff;border-radius:12px;padding:12px 14px;box-shadow:0 14px 40px rgba(0,0,0,.22);font-size:.82rem;transform:translateY(14px);opacity:0;transition:.2s ease }.toast.show { transform:none;opacity:1 }.toast-success{background:#067647}.toast-error{background:#b42318}.toast-warning{background:#b54708}
.mobile-overlay { display:none; }
@media (max-width: 1100px) { .kpi-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.dashboard-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.span-3 { grid-column: span 2; }.pos-layout { grid-template-columns: minmax(0,1fr) 330px; }.delivery-summary { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 840px) {
  .app-shell { grid-template-columns: 1fr; }.sidebar { position:fixed;left:0;transform:translateX(-102%);width:min(290px,88vw);transition:.22s ease;box-shadow:20px 0 60px rgba(0,0,0,.28) }.sidebar-open .sidebar { transform:none }.mobile-overlay { display:block;position:fixed;inset:0;background:rgba(5,15,17,.55);z-index:40;opacity:0;pointer-events:none;transition:.22s ease }.sidebar-open .mobile-overlay { opacity:1;pointer-events:auto }.menu-button,.sidebar-close { display:grid }.sidebar-close { color:#eafffb }.content { padding:22px 18px }.topbar { padding:0 16px }.pos-layout { grid-template-columns:1fr }.pos-products,.pos-cart { min-height:auto }.dashboard-grid { grid-template-columns:1fr }.span-2,.span-3 { grid-column:span 1 }.settings-grid { grid-template-columns:1fr }.settings-grid .span-2 { grid-column:span 1 }.login-page { grid-template-columns:1fr }.login-panel { min-height:400px;padding:34px }.login-copy h1 { font-size:clamp(2.5rem,12vw,4.6rem) }.login-form-panel { padding:22px; }
}
@media (max-width: 560px) { .content { padding:18px 12px }.page-heading { align-items:flex-start;flex-direction:column }.page-heading .action-row,.page-heading>.btn { width:100% }.action-row .btn { flex:1 }.kpi-grid,.delivery-summary { grid-template-columns:1fr }.kpi-card strong { font-size:1.45rem }.card { padding:15px;border-radius:15px }.toolbar { align-items:stretch;flex-direction:column }.toolbar .input { max-width:none }.delivery-toolbar { align-items:stretch }.form-grid,.permission-grid { grid-template-columns:1fr }.connection-pill { display:none }.topbar { min-height:62px }.login-panel { min-height:360px }.login-copy p { font-size:.88rem }.login-features { display:none }.login-form-panel { padding:12px }.login-card { border-radius:18px }.role-list div { flex-direction:column;gap:3px } }

/* Phase 3-4: user administration and inventory */
a.btn { text-decoration: none; }
.inventory-heading { align-items: flex-start; }
.inventory-actions { flex-wrap: wrap; justify-content: flex-end; }
.inventory-summary { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 12px; margin-bottom: 18px; }
.mini-stat { background: var(--surface); border: 1px solid var(--border); border-radius: 15px; padding: 15px 16px; box-shadow: var(--shadow); }
.mini-stat span,.mini-stat strong { display:block; }.mini-stat span { color:var(--muted);font-size:.75rem }.mini-stat strong { margin-top:5px;font-size:1.2rem;letter-spacing:-.025em }
.inventory-toolbar { display:flex;justify-content:space-between;align-items:flex-end;gap:14px;margin-bottom:16px }
.inventory-filter-grid { display:grid;grid-template-columns:minmax(220px,1.7fr) minmax(160px,1fr) minmax(150px,.8fr);gap:10px;flex:1 }
.compact-label { gap:5px;font-size:.7rem }.compact-label .input,.compact-label .select { min-height:39px }
.inventory-table { min-width:1120px }.table-actions { display:flex;gap:6px;flex-wrap:wrap }.input-table { min-width:130px;min-height:36px;padding:6px 8px }
.pagination-bar { display:flex;align-items:center;justify-content:flex-end;gap:12px;padding-top:14px;font-size:.78rem;color:var(--muted) }
.modal-open { overflow:hidden }
.modal-backdrop { position:fixed;inset:0;z-index:300;background:rgba(5,15,17,.62);display:grid;place-items:center;padding:18px;overflow:auto }
.modal-backdrop[hidden] { display:none }
.modal-card { width:min(560px,100%);max-height:calc(100vh - 36px);overflow:auto;background:var(--surface);border:1px solid var(--border);border-radius:20px;box-shadow:0 28px 90px rgba(0,0,0,.32);padding:22px }
.modal-wide { width:min(880px,100%) }.modal-extra-wide { width:min(1240px,100%) }
.modal-header { display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:20px }.modal-header h2 { margin:4px 0 0 }.modal-close { font-size:1.55rem;background:var(--surface-2) }
.modal-actions { display:flex;justify-content:flex-end;gap:9px;margin-top:8px }.product-form .span-2 { grid-column:span 2 }
.import-file-note { display:flex;justify-content:space-between;gap:12px;align-items:center;padding:12px 14px;background:var(--surface-2);border-radius:12px;margin-bottom:14px }.import-file-note span { color:var(--muted);font-size:.77rem }
.import-summary-grid { display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px;margin-bottom:16px }.import-summary-grid article { background:var(--surface-2);border-radius:12px;padding:12px }.import-summary-grid span,.import-summary-grid strong { display:block }.import-summary-grid span { color:var(--muted);font-size:.68rem }.import-summary-grid strong { margin-top:4px;font-size:1.1rem }
.preview-grid { display:grid;grid-template-columns:1fr 1fr;gap:16px }.preview-grid h3 { font-size:.88rem;margin:0 0 8px }.preview-grid table { min-width:560px }
.import-progress { margin-top:16px;padding:13px;background:var(--surface-2);border-radius:12px }.import-progress div { display:flex;justify-content:space-between;gap:12px;font-size:.76rem;margin-bottom:8px }.import-progress progress { width:100%;height:10px;accent-color:var(--primary) }
.role-cards { display:grid;gap:9px }.role-card-button { width:100%;border:1px solid var(--border);background:var(--surface-2);color:var(--text);border-radius:12px;padding:12px;display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:center;text-align:left;cursor:pointer }.role-card-button:hover:not(:disabled) { border-color:var(--primary) }.role-card-button:disabled { cursor:default }.role-card-button span strong,.role-card-button span small { display:block }.role-card-button small { color:var(--muted);font-size:.7rem }.role-card-button b { font-size:1rem }

@media (max-width: 1200px) {
  .inventory-summary { grid-template-columns:repeat(3,minmax(0,1fr)) }
  .import-summary-grid { grid-template-columns:repeat(3,minmax(0,1fr)) }
  .preview-grid { grid-template-columns:1fr }
}
@media (max-width: 840px) {
  .inventory-heading { flex-direction:column }.inventory-actions { width:100%;justify-content:flex-start }
  .inventory-filter-grid { grid-template-columns:1fr 1fr }.inventory-filter-grid label:first-child { grid-column:span 2 }
  .inventory-toolbar { align-items:stretch;flex-direction:column }
}
@media (max-width: 560px) {
  .inventory-actions { display:grid;grid-template-columns:1fr 1fr }.inventory-actions .btn { width:100% }
  .inventory-summary { grid-template-columns:1fr 1fr }.inventory-summary .mini-stat:last-child { grid-column:span 2 }
  .inventory-filter-grid { grid-template-columns:1fr }.inventory-filter-grid label:first-child { grid-column:span 1 }
  .modal-backdrop { padding:8px }.modal-card { max-height:calc(100vh - 16px);padding:16px;border-radius:16px }
  .product-form .span-2 { grid-column:span 1 }.modal-actions { flex-direction:column-reverse }.modal-actions .btn { width:100% }
  .import-summary-grid { grid-template-columns:1fr 1fr }.import-file-note { align-items:flex-start;flex-direction:column }
  .role-card-button { grid-template-columns:1fr auto }.role-card-button .status { grid-column:span 2;justify-self:start }
}

/* Phase 5: live POS checkout */
.button-count { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center; background: var(--surface-2); font-size: .7rem; }
.pos-heading { align-items: flex-start; }
.pos-live-layout { grid-template-columns: minmax(0,1fr) minmax(360px,420px); align-items: start; }
.pos-catalog-card { min-height: calc(100vh - 150px); }
.pos-live-cart { position: sticky; top: 92px; min-height: calc(100vh - 122px); max-height: calc(100vh - 98px); display: flex; flex-direction: column; overflow: hidden; }
.pos-search-toolbar { display: grid; grid-template-columns: minmax(260px,1fr) auto minmax(130px,160px); gap: 10px; align-items: end; }
.pos-search-box { gap: 5px; }
.pos-search-box span { font-size: .7rem; }
.pos-search-box .input { min-height: 46px; font-size: 1rem; }
.pos-scan-button { min-height: 46px; }
.pos-price-mode .select { min-height: 46px; }
.pos-category-row { display: flex; gap: 7px; overflow-x: auto; padding: 14px 1px 8px; scrollbar-width: thin; }
.category-chip { flex: 0 0 auto; border: 1px solid var(--border); background: var(--surface); color: var(--muted); border-radius: 999px; min-height: 34px; padding: 6px 12px; cursor: pointer; font-size: .75rem; font-weight: 750; }
.category-chip:hover,.category-chip.active { color: var(--primary-strong); border-color: var(--primary); background: var(--primary-soft); }
.pos-catalog-meta { display: flex; justify-content: space-between; gap: 14px; color: var(--muted); font-size: .7rem; padding: 4px 2px 12px; }
.pos-product-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; align-content: start; }
.pos-product-grid > .empty-state,.pos-product-grid > .table-loading { grid-column: 1 / -1; }
.pos-product-card { position: relative; min-width: 0; min-height: 112px; display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 10px; align-items: start; border: 1px solid var(--border); border-radius: 14px; padding: 12px; background: var(--surface); color: var(--text); text-align: left; cursor: pointer; transition: .16s ease; }
.pos-product-card:hover:not(:disabled) { border-color: var(--primary); box-shadow: 0 9px 24px color-mix(in srgb, var(--primary) 12%, transparent); transform: translateY(-1px); }
.pos-product-card:disabled { cursor: not-allowed; opacity: .58; }
.pos-product-icon { width: 42px; height: 42px; border-radius: 12px; background: var(--primary-soft); color: var(--primary-strong); display: grid; place-items: center; font-size: .7rem; font-weight: 900; }
.pos-product-copy { min-width: 0; display: grid; gap: 3px; }
.pos-product-copy strong,.pos-product-copy small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pos-product-copy strong { font-size: .82rem; }
.pos-product-copy small { color: var(--muted); font-size: .66rem; }
.pos-product-copy > span { color: var(--primary-strong); font-size: .82rem; font-weight: 850; margin-top: 5px; }
.pos-product-copy em { color: var(--muted); font-size: .66rem; font-style: normal; font-weight: 500; }
.pos-stock { position: absolute; right: 9px; bottom: 8px; max-width: calc(100% - 18px); padding: 3px 7px; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-size: .61rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pos-stock.out { color: var(--danger); }
.pos-cart-header { flex: 0 0 auto; }
.pos-cart-lines { flex: 1 1 auto; overflow-y: auto; display: grid; align-content: start; gap: 8px; min-height: 160px; margin: 0 -4px; padding: 1px 4px 10px; }
.pos-cart-line { position: relative; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px 12px; align-items: center; padding: 11px 30px 11px 11px; background: var(--surface-2); border: 1px solid transparent; border-radius: 12px; }
.pos-cart-line-main { min-width: 0; }
.pos-cart-line-main strong,.pos-cart-line-main small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pos-cart-line-main strong { font-size: .78rem; }
.pos-cart-line-main small { color: var(--muted); font-size: .65rem; margin-top: 2px; }
.pos-quantity-control { display: grid; grid-template-columns: 30px 58px 30px; align-items: center; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; background: var(--surface); }
.pos-quantity-control button { width: 30px; height: 31px; border: 0; background: transparent; cursor: pointer; font-weight: 900; }
.pos-quantity-control button:hover { background: var(--surface-3); }
.pos-quantity-control input { width: 58px; height: 31px; border: 0; border-left: 1px solid var(--border); border-right: 1px solid var(--border); background: var(--surface); color: var(--text); text-align: center; font-size: .7rem; outline: none; }
.pos-line-total { font-size: .78rem; }
.pos-line-remove { position: absolute; right: 6px; top: 6px; width: 24px; height: 24px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); cursor: pointer; font-size: 1rem; }
.pos-line-remove:hover { color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); }
.pos-discount-panel { flex: 0 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; border-top: 1px solid var(--border); padding-top: 12px; }
.pos-discount-panel .input,.pos-discount-panel .select { min-height: 38px; }
.pos-totals { flex: 0 0 auto; display: grid; gap: 5px; padding: 12px 0; }
.pos-totals > div { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: .76rem; }
.pos-totals strong { color: var(--text); }
.pos-totals .grand-total { border-top: 1px solid var(--border); padding-top: 10px; margin-top: 5px; align-items: end; }
.pos-totals .grand-total span { color: var(--text); font-weight: 800; }
.pos-totals .grand-total strong { font-size: 1.55rem; letter-spacing: -.04em; color: var(--primary-strong); }
.pos-cart-actions { display: grid; grid-template-columns: 100px minmax(0,1fr); gap: 9px; flex: 0 0 auto; }
.pos-cart-actions .btn { min-height: 48px; }
.textarea { min-height: 82px; resize: vertical; font-family: inherit; }
.payment-layout { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(260px,.75fr); gap: 20px; }
.payment-fields { display: grid; gap: 13px; }
.payment-fields > div:not(.form-grid) { display: grid; gap: 13px; }
.payment-summary { background: var(--surface-2); border-radius: 15px; padding: 17px; align-self: start; position: sticky; top: 0; }
.payment-summary h3 { margin: 0 0 12px; font-size: .9rem; }
.payment-summary > div { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; color: var(--muted); font-size: .76rem; }
.payment-summary > div strong { color: var(--text); }
.payment-summary .payment-grand { margin-top: 7px; padding-top: 11px; border-top: 1px solid var(--border); font-size: .9rem; }
.payment-summary .payment-grand strong { font-size: 1.35rem; color: var(--primary-strong); }
.payment-summary p { margin-top: 16px; font-size: .68rem; line-height: 1.5; }
.receipt-paper { width: min(100%,620px); margin: 0 auto; padding: 18px; border: 1px dashed var(--border); border-radius: 14px; background: var(--surface); }
.receipt-brand { display: grid; justify-items: center; text-align: center; gap: 3px; }
.receipt-brand img { width: 58px; height: 58px; object-fit: contain; border-radius: 10px; margin-bottom: 4px; }
.receipt-brand strong { font-size: 1.2rem; }.receipt-brand span { color: var(--muted); font-size: .72rem; }
.receipt-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 18px 0; padding: 12px 0; border-top: 1px dashed var(--border); border-bottom: 1px dashed var(--border); }
.receipt-meta div span,.receipt-meta div strong { display: block; }.receipt-meta span { color: var(--muted); font-size: .65rem; }.receipt-meta strong { font-size: .75rem; }
.receipt-items { width: 100%; min-width: 0; font-size: .72rem; }.receipt-items th,.receipt-items td { padding: 8px 5px; }.receipt-items th:first-child,.receipt-items td:first-child { text-align: left; }.receipt-items th:not(:first-child),.receipt-items td:not(:first-child) { text-align: right; }.receipt-items td strong,.receipt-items td small { display: block; }.receipt-items td small { color: var(--muted); font-size: .6rem; }
.receipt-totals { width: min(100%,310px); margin: 14px 0 0 auto; display: grid; gap: 4px; }
.receipt-totals > div { display: flex; justify-content: space-between; gap: 12px; font-size: .74rem; }.receipt-grand { border-top: 2px solid var(--text); margin-top: 5px; padding-top: 8px; font-size: .95rem !important; }
.receipt-customer { display: grid; gap: 2px; border-top: 1px dashed var(--border); padding-top: 12px; margin-top: 16px; font-size: .72rem; }.receipt-customer span { color: var(--muted); }
.receipt-footer { text-align: center; margin-top: 22px !important; font-size: .72rem !important; }
.held-sales-list { display: grid; gap: 9px; }
.held-sale-row { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.held-sale-row strong,.held-sale-row small { display: block; }.held-sale-row small { color: var(--muted); font-size: .68rem; margin-top: 3px; }
.scanner-card { width: min(520px,100%); }
.scanner-viewport { position: relative; overflow: hidden; aspect-ratio: 4/3; border-radius: 15px; background: #050909; }
.scanner-viewport video { width: 100%; height: 100%; object-fit: cover; }
.scanner-viewport span { position: absolute; left: 10%; right: 10%; top: 50%; height: 2px; background: #2dd4bf; box-shadow: 0 0 15px #2dd4bf; }

@media (max-width: 1280px) {
  .pos-product-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .pos-live-layout { grid-template-columns: minmax(0,1fr) 360px; }
}
@media (max-width: 1000px) {
  .pos-live-layout { grid-template-columns: 1fr; }
  .pos-live-cart { position: static; min-height: auto; max-height: none; }
  .pos-cart-lines { max-height: 420px; }
  .pos-product-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 760px) {
  .pos-search-toolbar { grid-template-columns: minmax(0,1fr) auto; }
  .pos-price-mode { grid-column: 1 / -1; }
  .pos-product-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .payment-layout { grid-template-columns: 1fr; }
  .payment-summary { position: static; }
}
@media (max-width: 520px) {
  .pos-heading .action-row { display: grid; grid-template-columns: 1fr 1fr; }
  .pos-search-toolbar { grid-template-columns: 1fr; }
  .pos-scan-button,.pos-price-mode { grid-column: auto; }
  .pos-product-grid { grid-template-columns: 1fr 1fr; gap: 7px; }
  .pos-product-card { grid-template-columns: 34px minmax(0,1fr); min-height: 105px; padding: 9px; gap: 8px; }
  .pos-product-icon { width: 34px; height: 34px; border-radius: 9px; }
  .pos-product-copy strong { font-size: .72rem; }
  .pos-product-copy > span { font-size: .72rem; }
  .pos-catalog-meta { display: block; }.pos-catalog-meta span:last-child { display: none; }
  .pos-cart-line { grid-template-columns: 1fr; }
  .pos-quantity-control { width: 118px; }
  .pos-line-total { position: absolute; right: 31px; bottom: 15px; }
  .pos-discount-panel { grid-template-columns: 1fr 1fr; }
  .pos-cart-actions { grid-template-columns: 88px 1fr; }
  .receipt-paper { padding: 10px; }
  .receipt-meta { grid-template-columns: 1fr; }
  .receipt-items th:nth-child(3),.receipt-items td:nth-child(3) { display: none; }
  .held-sale-row { align-items: flex-start; flex-direction: column; }
  .held-sale-row .action-row { width: 100%; }
  .held-sale-row .btn { flex: 1; }
}
.transactions-table { min-width: 980px; }
.transactions-table td small { display: block; color: var(--muted); font-size: .66rem; margin-top: 2px; }
.transaction-detail-meta { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 9px; margin-bottom: 15px; }
.transaction-detail-meta article { background: var(--surface-2); border-radius: 11px; padding: 11px; }
.transaction-detail-meta span,.transaction-detail-meta strong { display: block; }.transaction-detail-meta span { color: var(--muted); font-size: .66rem; }.transaction-detail-meta strong { font-size: .78rem; margin-top: 3px; }
.transaction-detail-totals { width: min(100%,330px); margin: 15px 0 0 auto; display: grid; gap: 5px; }
.transaction-detail-totals > div { display: flex; justify-content: space-between; gap: 12px; font-size: .78rem; }.transaction-detail-totals .grand { border-top: 2px solid var(--text); padding-top: 8px; margin-top: 4px; font-size: .95rem; }
@media (max-width: 700px) { .transaction-detail-meta { grid-template-columns: 1fr 1fr; } }