/* ═══════════════════════════════════════════════════════════
   RPLE Workspace, powered by Synciva — style.css
   Professional internal SaaS style. Mobile-first.
   ═══════════════════════════════════════════════════════════ */

/* ── Reset & Tokens ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
.hidden { display:none !important; }

:root {
  /* Surfaces */
  --bg:        #f4f5f7;
  --surface:   #ffffff;
  --surface2:  #fafafb;
  --surface3:  #eceef2;
  --border:    #e4e6e9;
  --border-s:  #d6d9de;

  /* Text */
  --txt:     #17191d;
  --txt2:    #565a61;
  --muted:   #8a8e95;

  /* Brand */
  --accent:    #1677e8;
  --accent-h:  #0066d6;
  --accent-lt: #eef6ff;
  --accent-t:  #0066d6;
  --accent-b:  #dcebff;
  --brand:     #c79a2b;
  --brand-lt:  #f8eccb;
  --purple:    #7657d6;
  --purple-bg: #f4f0ff;

  /* Status */
  --green:    #248a3d; --green-bg:  #eef8f0; --green-t:  #1f6f34; --green-b:  #d5ead9;
  --red:      #d70015; --red-bg:    #fff1f2; --red-t:    #a80d1e; --red-b:    #f6d3d7;
  --yellow:   #a86400; --yellow-bg: #fff8e8; --yellow-t: #805100; --yellow-b: #f1dfb8;
  --blue:     #007aff; --blue-bg:   #eef6ff; --blue-t:   #0066d6; --blue-b:   #c8e1ff;

  /* Typography */
  --font:  -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Inter', 'Segoe UI', sans-serif;
  --mono:  'SF Mono', 'Fira Code', 'Courier New', monospace;

  /* Spacing */
  --r:   8px;
  --r-lg: 12px;
  --shadow: 0 1px 2px rgba(16,18,22,.035);
  --shadow-md: 0 22px 70px rgba(0,0,0,.16), 0 3px 12px rgba(0,0,0,.06);
  --sidebar-w: 220px;
  --topbar-h: 64px;
}

html[data-theme="dark"] {
  --bg:#0f131a;
  --surface:#171d27;
  --surface2:#1c2330;
  --surface3:#242d3a;
  --border:#2a3342;
  --border-s:#364254;
  --txt:#f4f7fa;
  --txt2:#b5bec9;
  --muted:#7f8a99;
  --accent:#3b8ff3;
  --accent-h:#63a6f5;
  --accent-lt:#152e4a;
  --accent-t:#63a6f5;
  --accent-b:#274d73;
  --brand:#d5a82f;
  --brand-lt:#342b15;
  --purple:#9b7aef;
  --purple-bg:#2a2140;
  --green:#4db66a; --green-bg:#153421; --green-t:#67c97f; --green-b:#28543a;
  --red:#f05b6b; --red-bg:#3a1820; --red-t:#ff7a88; --red-b:#68303b;
  --yellow:#d48b27; --yellow-bg:#38270f; --yellow-t:#eda94d; --yellow-b:#64471f;
  --blue:#3b8ff3; --blue-bg:#152e4a; --blue-t:#63a6f5; --blue-b:#274d73;
  --shadow:0 1px 2px rgba(0,0,0,.18);
  --shadow-md:0 22px 70px rgba(0,0,0,.48),0 3px 12px rgba(0,0,0,.26);
}

body { font-family:var(--font); background:var(--bg); color:var(--txt); min-height:100vh; -webkit-font-smoothing:antialiased; font-size:15px; line-height:1.5; }
*, input, select, textarea, button { font-family:var(--font); }

/* ── Login ───────────────────────────────────────────────── */
#login-screen { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; background:var(--bg); }
.login-box { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:36px 32px; width:100%; max-width:380px; box-shadow:var(--shadow-md); }
.login-brand { display:flex; align-items:center; gap:12px; margin-bottom:28px; }
.login-logo { width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; overflow:hidden; }
.login-logo img { width:100%; height:100%; object-fit:contain; }
.login-brand h1 { font-size:18px; font-weight:600; }
.login-brand p  { font-size:12px; color:var(--muted); }
.login-error { font-size:13px; color:var(--red-t); text-align:center; margin-top:10px; min-height:18px; }

/* ── App shell ───────────────────────────────────────────── */
#app { display:none; min-height:100vh; }

/* ── Top bar ─────────────────────────────────────────────── */
.topbar { background:var(--surface); border-bottom:1px solid var(--border); padding:0 16px; display:flex; align-items:center; gap:12px; height:52px; position:sticky; top:0; z-index:40; }
.topbar-brand { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.topbar-logo { width:28px; height:28px; border-radius:7px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.topbar-logo img { width:100%; height:100%; object-fit:contain; }
.topbar-name  { font-size:14px; font-weight:600; }
.topbar-right { margin-left:auto; display:flex; align-items:center; gap:8px; }
.user-chip    { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--txt2); }
.role-pill    { padding:2px 8px; border-radius:99px; font-size:10px; font-weight:600; background:var(--accent-lt); color:var(--accent-t); text-transform:uppercase; letter-spacing:.04em; }

/* ── Notification centre ────────────────────────────────── */
.notification-shell { position:relative; }
.notification-bell { width:34px; height:34px; border:1px solid var(--border); border-radius:9px; background:var(--surface2); color:var(--txt2); display:flex; align-items:center; justify-content:center; cursor:pointer; position:relative; transition:.15s ease; }
.notification-bell:hover, .notification-bell[aria-expanded="true"] { color:var(--accent); border-color:var(--accent-b); background:var(--accent-lt); }
.notification-bell > i { font-size:18px; }
.notification-count { position:absolute; top:-6px; right:-7px; min-width:18px; height:18px; padding:0 4px; border-radius:10px; background:var(--red); color:#fff; border:2px solid var(--surface); font-size:9px; line-height:14px; font-weight:700; text-align:center; }
.notification-count.hidden { display:none; }
.notification-panel { display:none; position:absolute; top:42px; right:0; width:min(390px,calc(100vw - 24px)); max-height:min(610px,calc(100vh - 72px)); overflow:hidden; background:var(--surface); border:1px solid var(--border); border-radius:14px; box-shadow:0 18px 50px rgba(15,23,42,.18),var(--shadow-md); z-index:100; }
.notification-panel.open { display:block; animation:notification-panel-in .16s ease-out; }
@keyframes notification-panel-in { from { opacity:0; transform:translateY(-6px) scale(.985); } to { opacity:1; transform:none; } }
.notification-panel-header { min-height:65px; padding:13px 14px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; gap:12px; }
.notification-panel-header > div { display:flex; flex-direction:column; min-width:0; }
.notification-panel-header strong { font-size:14px; }
.notification-panel-header span { color:var(--muted); font-size:11px; }
.notification-read-all { border:0; background:none; color:var(--accent); font-size:11px; font-weight:600; cursor:pointer; white-space:nowrap; }
.notification-read-all:hover { text-decoration:underline; }
.notification-read-all.hidden { display:none; }
.notification-list { max-height:min(530px,calc(100vh - 140px)); overflow-y:auto; overscroll-behavior:contain; }
.notification-item { width:100%; border:0; border-bottom:1px solid var(--border); background:var(--accent-lt); color:var(--txt); padding:12px 13px; text-align:left; display:grid; grid-template-columns:38px 1fr 8px; gap:10px; align-items:start; cursor:pointer; transition:background .15s; }
.notification-item:last-child { border-bottom:0; }
.notification-item:hover { background:var(--surface3); }
.notification-item.is-read { background:var(--surface); }
.notification-item-icon { width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:var(--blue-bg); color:var(--blue-t); border:1px solid var(--blue-b); }
.notification-item-icon.priority-high { background:var(--yellow-bg); color:var(--yellow-t); border-color:var(--yellow-b); }
.notification-item-icon.priority-urgent { background:var(--red-bg); color:var(--red-t); border-color:var(--red-b); }
.notification-item-icon i { font-size:18px; }
.notification-item-copy { display:flex; flex-direction:column; min-width:0; }
.notification-item-copy strong { font-size:12px; line-height:1.35; }
.notification-item-copy span { color:var(--txt2); font-size:11px; line-height:1.4; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:2px; }
.notification-item-copy small { color:var(--muted); font-size:10px; margin-top:4px; }
.notification-unread-dot { width:7px; height:7px; border-radius:50%; background:var(--accent); margin-top:5px; }
.notification-empty { padding:38px 22px; color:var(--muted); display:flex; flex-direction:column; align-items:center; text-align:center; gap:4px; }
.notification-empty > i { font-size:30px; color:var(--green); margin-bottom:4px; }
.notification-empty strong { color:var(--txt); font-size:13px; }
.notification-empty span { font-size:11px; max-width:260px; }

.notification-popup-stack { position:fixed; top:64px; right:18px; width:min(370px,calc(100vw - 28px)); display:flex; flex-direction:column; gap:10px; z-index:190; pointer-events:none; }
.notification-popup { width:100%; border:1px solid var(--border); border-left:4px solid var(--accent); border-radius:12px; background:var(--surface); color:var(--txt); padding:12px; display:grid; grid-template-columns:38px 1fr 18px; align-items:center; gap:10px; text-align:left; box-shadow:0 14px 38px rgba(15,23,42,.18),var(--shadow-md); cursor:pointer; pointer-events:auto; opacity:0; transform:translateX(24px); transition:opacity .22s ease,transform .22s ease; }
.notification-popup.show { opacity:1; transform:none; }
.notification-popup.priority-high { border-left-color:var(--yellow); }
.notification-popup.priority-urgent { border-left-color:var(--red); }
.notification-popup-icon { width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; color:var(--accent-t); background:var(--accent-lt); }
.notification-popup.priority-high .notification-popup-icon { color:var(--yellow-t); background:var(--yellow-bg); }
.notification-popup.priority-urgent .notification-popup-icon { color:var(--red-t); background:var(--red-bg); }
.notification-popup-icon i { font-size:19px; }
.notification-popup-copy { min-width:0; display:flex; flex-direction:column; }
.notification-popup-copy small { color:var(--muted); font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.notification-popup-copy strong { font-size:12px; line-height:1.35; margin-top:1px; }
.notification-popup-copy span { color:var(--txt2); font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px; }
.notification-popup-arrow { color:var(--muted); font-size:16px; }

/* ── Tabs nav ────────────────────────────────────────────── */
.tabs-nav { background:var(--surface); border-bottom:1px solid var(--border); display:flex; overflow-x:auto; position:sticky; top:52px; z-index:39; }
.tabs-nav::-webkit-scrollbar { display:none; }
.tab-btn { flex-shrink:0; padding:0 16px; height:44px; font-size:13px; font-weight:500; color:var(--txt2); border:none; border-bottom:2px solid transparent; background:none; cursor:pointer; display:flex; align-items:center; gap:6px; white-space:nowrap; transition:color .15s; }
.tab-btn i { font-size:15px; }
.tab-btn.active { color:var(--accent); border-bottom-color:var(--accent); }
.tab-btn.hidden { display:none; }

.connectivity-banner { display:none; max-width:1160px; margin:10px auto 0; padding:10px 13px; border:1px solid var(--yellow-b); border-radius:var(--r); background:var(--yellow-bg); color:var(--yellow-t); align-items:center; gap:10px; box-shadow:var(--shadow); }
.connectivity-banner.show { display:flex; }
.connectivity-banner > i { font-size:20px; flex:0 0 auto; }
.connectivity-banner strong, .connectivity-banner span { display:block; }
.connectivity-banner strong { font-size:12px; }
.connectivity-banner span { font-size:10px; margin-top:1px; }
.draft-save-status { display:none; align-items:center; gap:4px; color:var(--green-t); font-size:9px; font-weight:500; margin-top:3px; }
.draft-save-status.visible { display:flex; }
.draft-save-status i { font-size:12px; }
.page-draft-status { min-height:18px; margin:0 0 8px; }

/* ── Page ────────────────────────────────────────────────── */
.page { display:none; padding:16px; max-width:860px; margin:0 auto; }
.page.active { display:block; }
.page-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; gap:8px; flex-wrap:wrap; }
.page-title  { font-size:17px; font-weight:600; }

/* ── Cards ───────────────────────────────────────────────── */
.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:16px; margin-bottom:14px; box-shadow:var(--shadow); }
.card-title { font-size:13px; font-weight:600; color:var(--txt2); text-transform:uppercase; letter-spacing:.05em; margin-bottom:12px; }

/* ── Home dashboard ─────────────────────────────────────── */
.home-hero { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:10px 2px 18px; }
.home-eyebrow { color:var(--accent); font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; margin-bottom:3px; }
.home-hero h1 { font-size:24px; line-height:1.2; font-weight:700; letter-spacing:-.02em; }
.home-date { color:var(--txt2); font-size:13px; margin-top:4px; }
.home-refresh { flex-shrink:0; }
.home-hero-actions { display:flex; align-items:center; gap:7px; }

.home-widget-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; align-items:start; }
.home-widget-wide { grid-column:1/-1; }
.home-widget-grid > .home-loading, .home-widget-grid > .home-error { grid-column:1/-1; }
.home-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.home-metric { appearance:none; width:100%; min-width:0; padding:14px; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface); color:var(--txt); box-shadow:var(--shadow); cursor:pointer; text-align:left; display:flex; align-items:center; gap:11px; transition:transform .15s,border-color .15s,box-shadow .15s; }
.home-metric:hover { transform:translateY(-1px); border-color:var(--border-s); box-shadow:var(--shadow-md); }
.home-metric-icon { width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.home-metric-icon i { font-size:19px; }
.metric-blue  { color:var(--accent-t); background:var(--accent-lt); }
.metric-cyan  { color:var(--blue-t);   background:var(--blue-bg); }
.metric-green { color:var(--green-t);  background:var(--green-bg); }
.metric-amber { color:var(--yellow-t); background:var(--yellow-bg); }
.home-metric-copy { min-width:0; display:flex; flex-direction:column; }
.home-metric-copy strong { font-size:23px; line-height:1; font-weight:700; }
.home-metric-copy > span { font-size:12px; font-weight:600; margin-top:5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.home-metric-copy small { color:var(--muted); font-size:10px; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.home-metric-arrow { color:var(--muted); font-size:14px; margin-left:auto; flex:0 0 auto; }

.home-grid { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:14px; align-items:start; }
.home-panel { margin-bottom:0; }
.home-panel-header { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:14px; }
.home-panel-header h2 { font-size:14px; font-weight:650; }
.home-panel-header p { color:var(--muted); font-size:11px; margin-top:2px; }
.home-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.home-action { min-height:64px; padding:12px; border:1px solid var(--border); border-radius:var(--r); background:var(--surface2); color:var(--txt2); cursor:pointer; text-align:left; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:5px; transition:background .15s,border-color .15s,color .15s; }
.home-action:hover { background:var(--accent-lt); border-color:var(--accent-b); color:var(--accent-t); }
.home-action i { font-size:18px; }
.home-action span { font-size:12px; font-weight:600; }
.home-action.hidden { display:none; }
.home-recent-list { display:flex; flex-direction:column; }
.home-recent-order { width:100%; appearance:none; border:0; border-top:1px solid var(--border); background:transparent; color:var(--txt); padding:10px 2px; display:flex; align-items:center; gap:10px; text-align:left; cursor:pointer; }
.home-recent-order:first-child { border-top:0; padding-top:2px; }
.home-recent-order:last-child { padding-bottom:2px; }
.home-recent-order:hover .home-order-number { color:var(--accent); }
.home-order-icon { width:30px; height:30px; border-radius:8px; background:var(--surface3); color:var(--txt2); display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.home-order-copy { display:flex; flex-direction:column; min-width:0; flex:1; }
.home-order-number { font-size:12px; font-weight:700; transition:color .15s; }
.home-order-customer { color:var(--muted); font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.home-loading { min-height:120px; color:var(--muted); font-size:12px; display:flex; align-items:center; justify-content:center; gap:8px; }
.home-loading .spinner { border-color:var(--border-s); border-top-color:var(--accent); }
.home-error { min-height:120px; color:var(--red-t); font-size:12px; display:flex; align-items:center; justify-content:center; text-align:center; }
.home-empty { min-height:120px; color:var(--muted); font-size:12px; display:flex; align-items:center; justify-content:center; text-align:center; }
.modal-subtitle { margin-top:3px; color:var(--muted); font-size:11px; }
.home-widget-options { display:flex; flex-direction:column; gap:7px; }
.home-widget-option { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:center; padding:9px; border:1px solid var(--border); border-radius:var(--r); background:var(--surface2); }
.home-widget-option.enabled { border-color:var(--accent-b); background:var(--accent-lt); }
.home-widget-option > label { margin:0; display:flex; align-items:center; gap:9px; min-width:0; text-transform:none; letter-spacing:0; cursor:pointer; }
.home-widget-option > label > span:last-child { min-width:0; }
.home-widget-option strong, .home-widget-option small { display:block; }
.home-widget-option strong { color:var(--txt); font-size:12px; }
.home-widget-option small { margin-top:2px; color:var(--muted); font-size:9px; line-height:1.3; }
.home-widget-option-icon { width:31px; height:31px; flex:0 0 31px; display:flex; align-items:center; justify-content:center; border-radius:8px; background:var(--surface3); color:var(--accent-t); }
.home-widget-order { display:flex; gap:3px; }
.home-widget-order .btn-icon:disabled { opacity:.3; cursor:not-allowed; }

/* ── Forms ───────────────────────────────────────────────── */
.fg { margin-bottom:14px; }
.fg:last-child { margin-bottom:0; }
label { display:block; font-size:12px; font-weight:600; color:var(--txt2); margin-bottom:5px; text-transform:uppercase; letter-spacing:.04em; }
.req { color:var(--red); margin-left:2px; }
.field-hint { font-size:11px; color:var(--muted); margin-top:3px; }

input, select, textarea {
  width:100%; padding:9px 12px; border:1px solid var(--border-s);
  border-radius:var(--r); font-size:15px; background:var(--surface);
  color:var(--txt); outline:none; transition:border-color .15s, box-shadow .15s;
  -webkit-appearance:none; appearance:none;
}
input:focus, select:focus, textarea:focus {
  border-color:var(--accent); box-shadow:0 0 0 3px rgba(37,99,235,.12);
}
input.err, select.err { border-color:var(--red); }
input.mono { font-family:var(--mono); letter-spacing:.04em; }
input[type=number] { -moz-appearance:textfield; }
input[type=number]::-webkit-inner-spin-button { -webkit-appearance:none; }
input[type=checkbox] {
  width:16px; height:16px; padding:0; flex:0 0 16px;
  -webkit-appearance:checkbox; appearance:auto;
  accent-color:var(--accent); box-shadow:none;
}
select { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%236b6b67' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center; padding-right:30px; }

/* ── Buttons ─────────────────────────────────────────────── */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:9px 16px; border-radius:var(--r); font-size:13px; font-weight:500; cursor:pointer; border:1px solid transparent; transition:all .15s; white-space:nowrap; line-height:1; }
.btn i { font-size:15px; }
.btn:disabled { opacity:.45; cursor:not-allowed; }
.btn-primary   { background:var(--accent);   color:#fff; border-color:var(--accent); }
.btn-primary:hover   { background:var(--accent-h); border-color:var(--accent-h); }
.btn-secondary { background:var(--surface);  color:var(--txt2); border-color:var(--border-s); }
.btn-secondary:hover { background:var(--surface3); }
.btn-danger    { background:var(--red-bg);   color:var(--red-t); border-color:var(--red-b); }
.btn-danger:hover    { background:var(--red); color:#fff; border-color:var(--red); }
.btn-warning   { background:var(--yellow-bg); color:var(--yellow-t); border-color:var(--yellow-b); }
.btn-ghost     { background:transparent; color:var(--txt2); border-color:transparent; }
.btn-ghost:hover     { background:var(--surface3); }
.btn-sm        { padding:5px 10px; font-size:12px; }
.btn-sm i      { font-size:13px; }
.btn-full      { width:100%; }
.btn-icon      { padding:6px; background:none; border:none; cursor:pointer; color:var(--muted); border-radius:6px; display:inline-flex; align-items:center; font-size:16px; transition:all .15s; }
.btn-icon:hover        { background:var(--surface3); color:var(--txt); }
.btn-icon.btn-edit:hover   { background:var(--accent-lt); color:var(--accent); }
.btn-icon.btn-del:hover    { background:var(--red-bg);    color:var(--red); }

/* ── Mode toggle ─────────────────────────────────────────── */
.mode-row  { display:flex; gap:8px; margin-bottom:14px; }
.mode-pill { flex:1; padding:9px; border-radius:var(--r); font-size:13px; font-weight:500; cursor:pointer; border:1px solid var(--border-s); background:var(--surface2); color:var(--txt2); text-align:center; display:flex; align-items:center; justify-content:center; gap:6px; transition:all .15s; }
.mode-pill.active { background:var(--accent-lt); color:var(--accent-t); border-color:var(--accent-b); }

/* ── Scanner ─────────────────────────────────────────────── */
.scanner-shell { position:relative; background:#000; border-radius:var(--r-lg); overflow:hidden; margin-bottom:10px; width:100%; aspect-ratio:16/10; max-height:280px; }
.scanner-shell::after { content:'✓'; position:absolute; z-index:5; left:50%; top:50%; width:76px; height:76px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:rgba(22,163,74,.94); color:#fff; font-size:46px; font-weight:700; line-height:1; opacity:0; transform:translate(-50%,-50%) scale(.55); pointer-events:none; }
.scanner-shell.scan-confirmed { box-shadow:0 0 0 3px var(--green),0 0 24px rgba(22,163,74,.55); }
.scanner-shell.scan-confirmed::after { animation:scan-confirm .65s ease-out; }
@keyframes scan-confirm { 0%{opacity:0;transform:translate(-50%,-50%) scale(.55)} 18%{opacity:1;transform:translate(-50%,-50%) scale(1.08)} 72%{opacity:1;transform:translate(-50%,-50%) scale(1)} 100%{opacity:0;transform:translate(-50%,-50%) scale(1.15)} }
@media (prefers-reduced-motion:reduce) { .scanner-shell.scan-confirmed::after { animation-duration:.15s; } }
.scan-idle { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; cursor:pointer; background:var(--surface2); border:1px dashed var(--border-s); border-radius:var(--r-lg); }
.scan-idle-icon { width:64px; height:64px; border-radius:12px; background:var(--accent-lt); display:flex; align-items:center; justify-content:center; }
.scan-idle-icon i { font-size:28px; color:var(--accent); }
.scan-idle p { font-size:13px; color:var(--txt2); }
.scanner-shell video { display:none; width:100%; height:100%; object-fit:cover; }
.scan-overlay { display:none; position:absolute; inset:0; pointer-events:none; }
.scan-overlay.on { display:block; }
.s-mask { position:absolute; background:rgba(0,0,0,.55); }
.s-top    { top:0;left:0;right:0;height:20%; }
.s-bottom { bottom:0;left:0;right:0;height:20%; }
.s-left   { top:20%;bottom:20%;left:0;width:6%; }
.s-right  { top:20%;bottom:20%;right:0;width:6%; }
.s-box    { position:absolute; top:20%;bottom:20%;left:6%;right:6%; }
.s-box::before,.s-box::after,.s-box .bc::before,.s-box .bc::after { content:''; position:absolute; width:22px; height:22px; }
.s-box::before  { top:-1px;left:-1px;  border-top:3px solid #fff; border-left:3px solid #fff; border-radius:2px 0 0 0; }
.s-box::after   { top:-1px;right:-1px; border-top:3px solid #fff; border-right:3px solid #fff; border-radius:0 2px 0 0; }
.s-box .bc::before { bottom:-1px;left:-1px;  border-bottom:3px solid #fff; border-left:3px solid #fff; border-radius:0 0 0 2px; }
.s-box .bc::after  { bottom:-1px;right:-1px; border-bottom:3px solid #fff; border-right:3px solid #fff; border-radius:0 0 2px 0; }
.s-laser { position:absolute; left:2%;right:2%; height:2px; background:linear-gradient(90deg,transparent 0%,#e53e3e 40%,#e53e3e 60%,transparent 100%); box-shadow:0 0 8px 2px rgba(229,62,62,.6); animation:laser 1.8s ease-in-out infinite; }
@keyframes laser { 0%{top:2%;opacity:1} 48%{opacity:1} 50%{top:96%;opacity:0} 51%{top:2%;opacity:0} 53%{opacity:1} 100%{top:96%;opacity:1} }
.scan-status-bar { display:none; position:absolute; bottom:0;left:0;right:0; padding:7px 14px; font-size:12px; font-weight:500; text-align:center; color:#fff; background:rgba(0,0,0,.7); }
.scan-status-bar.on  { display:block; }
.scan-status-bar.ok  { background:rgba(22,163,74,.88); }
.scan-status-bar.err { background:rgba(220,38,38,.88); }
.scan-hint { font-size:12px; color:var(--muted); text-align:center; margin-bottom:10px; }
.scan-controls { display:flex; gap:8px; margin-bottom:14px; }
.scan-controls .btn { flex:1; }

/* ── Customer / SO Picker ────────────────────────────────── */
.picker-wrap { position:relative; }
.picker-btn { width:100%; padding:9px 12px; border:1px solid var(--border-s); border-radius:var(--r); font-size:15px; background:var(--surface); color:var(--txt); cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:8px; text-align:left; transition:border-color .15s; }
.picker-btn:hover,.picker-btn.open { border-color:var(--accent); }
.picker-btn.err  { border-color:var(--red); }
.picker-btn .ph  { color:var(--muted); font-size:14px; }
.picker-btn .val { font-size:14px; }
.picker-btn i    { color:var(--muted); font-size:14px; flex-shrink:0; }
.picker-dd { display:none; position:absolute; top:calc(100% + 4px); left:0; right:0; background:var(--surface); border:1px solid var(--border-s); border-radius:var(--r-lg); z-index:60; box-shadow:var(--shadow-md); max-height:300px; flex-direction:column; overflow:hidden; }
.picker-dd.open { display:flex; }
.picker-search { padding:8px; border-bottom:1px solid var(--border); flex-shrink:0; }
.picker-search input { border-radius:6px; font-size:14px; padding:8px 10px; }
.picker-list { overflow-y:auto; flex:1; }
.picker-opt { padding:9px 12px; font-size:13px; cursor:pointer; border-bottom:1px solid var(--border); transition:background .1s; }
.picker-opt:last-child { border-bottom:none; }
.picker-opt:hover { background:var(--accent-lt); }
.picker-opt.new   { color:var(--accent-t); font-weight:600; display:flex; align-items:center; gap:6px; }
.picker-opt .sub  { font-size:11px; color:var(--muted); margin-top:2px; }
.picker-opt .code { font-family:var(--mono); font-size:11px; color:var(--muted); }
.picker-footer { padding:8px 12px; border-top:1px solid var(--border); flex-shrink:0; }
.picker-footer label { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--txt2); text-transform:none; letter-spacing:0; cursor:pointer; }
.picker-footer input[type=checkbox] { width:auto; padding:0; }

/* Quick-create inline form */
.quick-form { background:var(--accent-lt); border:1px solid var(--accent-b); border-radius:var(--r); padding:12px; margin-top:8px; display:none; }
.quick-form.open { display:block; }
.quick-form-title { font-size:12px; font-weight:600; color:var(--accent-t); margin-bottom:10px; display:flex; align-items:center; gap:5px; }

/* ── Batch queue ─────────────────────────────────────────── */
.batch-box { background:var(--surface2); border:1px solid var(--border); border-radius:var(--r-lg); margin-bottom:14px; overflow:hidden; }
.batch-head { padding:9px 12px; font-size:12px; font-weight:600; color:var(--txt2); text-transform:uppercase; letter-spacing:.05em; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
.batch-cnt { color:var(--accent-t); }
.batch-rows { max-height:150px; overflow-y:auto; }
.batch-row { display:flex; align-items:center; justify-content:space-between; padding:7px 12px; border-bottom:1px solid var(--border); font-size:13px; }
.batch-row:last-child { border-bottom:none; }
.batch-sn { font-family:var(--mono); font-size:12px; font-weight:600; }
.batch-empty { padding:16px; text-align:center; font-size:13px; color:var(--muted); }

/* ── Divider ─────────────────────────────────────────────── */
.divider { display:flex; align-items:center; gap:8px; margin:14px 0; color:var(--muted); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; }
.divider::before,.divider::after { content:''; flex:1; height:1px; background:var(--border); }

/* ── Toolbar / Filters ───────────────────────────────────── */
.toolbar { display:flex; gap:8px; margin-bottom:12px; align-items:center; flex-wrap:wrap; }
.search-box { position:relative; flex:1; min-width:160px; }
.search-box i { position:absolute; left:10px; top:50%; transform:translateY(-50%); color:var(--muted); font-size:15px; pointer-events:none; }
.search-box input { padding-left:32px; }
.filter-row { display:flex; gap:6px; margin-bottom:12px; overflow-x:auto; padding-bottom:2px; }
.filter-row::-webkit-scrollbar { display:none; }
.f-pill { padding:5px 12px; border-radius:99px; font-size:12px; border:1px solid var(--border); background:var(--surface); color:var(--txt2); cursor:pointer; white-space:nowrap; font-weight:400; transition:all .15s; }
.f-pill.active { background:var(--accent-lt); color:var(--accent-t); border-color:var(--accent-b); font-weight:500; }

/* ── Stats ───────────────────────────────────────────────── */
.stats-row { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:16px; }
.stat-box  { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:14px 12px; text-align:center; box-shadow:var(--shadow); }
.stat-n    { font-size:26px; font-weight:700; line-height:1; }
.stat-l    { font-size:11px; color:var(--muted); margin-top:4px; text-transform:uppercase; letter-spacing:.05em; }
.c-green   { color:var(--green); } .c-blue { color:var(--accent); } .c-red { color:var(--red); } .c-yellow { color:var(--yellow); }

/* ── Record cards ────────────────────────────────────────── */
.rec-list { display:flex; flex-direction:column; gap:8px; }
.rec-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:14px; box-shadow:var(--shadow); transition:border-color .15s; }
.rec-card:hover { border-color:var(--border-s); }
.rec-top   { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; margin-bottom:8px; }
.rec-sn    { font-family:var(--mono); font-size:14px; font-weight:700; letter-spacing:.03em; }
.rec-model { font-size:11px; color:var(--muted); margin-top:2px; }
.rec-rows  { display:flex; flex-direction:column; gap:4px; }
.rec-row   { font-size:12px; color:var(--txt2); display:flex; align-items:center; gap:5px; }
.rec-row i { font-size:13px; flex-shrink:0; }
.cust-name { font-weight:700; color:var(--txt); }
.rec-notes { font-size:12px; color:var(--muted); margin-top:8px; padding-top:8px; border-top:1px solid var(--border); }
.rec-foot  { display:flex; align-items:center; justify-content:space-between; margin-top:10px; padding-top:8px; border-top:1px solid var(--border); flex-wrap:wrap; gap:6px; }
.rec-meta  { font-size:11px; color:var(--muted); line-height:1.5; }
.rec-actions { display:flex; gap:2px; }

/* ── Customer cards ──────────────────────────────────────── */
.cust-card  { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:14px; box-shadow:var(--shadow); display:flex; align-items:flex-start; gap:12px; }
.cust-avatar { width:38px; height:38px; border-radius:10px; background:var(--accent-lt); display:flex; align-items:center; justify-content:center; color:var(--accent); font-size:15px; font-weight:700; flex-shrink:0; }
.cust-info   { flex:1; min-width:0; }
.cust-code   { font-family:var(--mono); font-size:11px; color:var(--muted); margin-bottom:2px; }
.cust-name2  { font-size:14px; font-weight:600; }
.cust-loc    { font-size:12px; color:var(--txt2); margin-top:2px; display:flex; align-items:center; gap:4px; }
.cust-foot   { display:flex; align-items:center; justify-content:space-between; margin-top:8px; padding-top:8px; border-top:1px solid var(--border); }
.cust-meta   { font-size:11px; color:var(--muted); }

/* ── User cards ──────────────────────────────────────────── */
.user-card   { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:12px 14px; display:flex; align-items:center; gap:12px; box-shadow:var(--shadow); }
.user-av     { width:36px; height:36px; border-radius:99px; background:var(--accent-lt); color:var(--accent-t); display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; flex-shrink:0; }
.user-info   { flex:1; min-width:0; }
.user-name2  { font-size:14px; font-weight:500; }
.user-meta2  { font-size:12px; color:var(--muted); display:flex; align-items:center; flex-wrap:wrap; gap:4px; margin-top:2px; }
.user-acts   { display:flex; gap:4px; }

/* ── Audit log table ─────────────────────────────────────── */
.log-table  { width:100%; border-collapse:collapse; font-size:12px; }
.log-table th { padding:8px 10px; text-align:left; font-size:11px; font-weight:600; color:var(--txt2); text-transform:uppercase; letter-spacing:.04em; border-bottom:2px solid var(--border); background:var(--surface2); white-space:nowrap; }
.log-table td { padding:9px 10px; border-bottom:1px solid var(--border); vertical-align:middle; }
.log-table tr:hover td { background:var(--surface2); }
.log-wrap   { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; overflow-x:auto; box-shadow:var(--shadow); }

/* ── Badges ──────────────────────────────────────────────── */
.badge { display:inline-flex; align-items:center; padding:2px 9px; border-radius:99px; font-size:11px; font-weight:600; white-space:nowrap; gap:4px; }
.b-installed { background:var(--green-bg); color:var(--green-t); }
.b-stock     { background:var(--accent-lt); color:var(--accent-t); }
.b-fault     { background:var(--red-bg);    color:var(--red-t); }
.b-active    { background:var(--green-bg);  color:var(--green-t); }
.b-inactive  { background:var(--yellow-bg); color:var(--yellow-t); }
.b-open      { background:var(--blue-bg);   color:var(--blue-t); }
.b-closed    { background:var(--surface3);  color:var(--muted); }
.so-pill     { font-family:var(--mono); font-size:11px; color:var(--blue-t); background:var(--blue-bg); padding:2px 8px; border-radius:99px; font-weight:600; }
.so-external-link { display:inline-flex; align-items:center; gap:4px; text-decoration:none; cursor:pointer; transition:filter .15s, box-shadow .15s; }
.so-external-link:hover { filter:brightness(.9); box-shadow:0 0 0 2px var(--blue-bg); }
.so-external-link:focus-visible { outline:2px solid var(--blue-t); outline-offset:2px; }
.so-external-link .ti { font-size:11px; }

/* Action badge colors in audit log */
.act-LOGIN          { color:var(--green-t);  background:var(--green-bg);  }
.act-LOGOUT         { color:var(--muted);    background:var(--surface3);  }
.act-LOGIN_FAILED   { color:var(--red-t);    background:var(--red-bg);    }
.act-CREATED        { color:var(--blue-t);   background:var(--blue-bg);   }
.act-UPDATED        { color:var(--yellow-t); background:var(--yellow-bg); }
.act-DELETED        { color:var(--red-t);    background:var(--red-bg);    }

/* ── Modal ───────────────────────────────────────────────── */
.modal-bg { display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:100; align-items:center; justify-content:center; padding:16px; }
.modal-bg.open { display:flex; }
.modal    { background:var(--surface); border-radius:var(--r-lg); padding:20px; width:100%; max-width:440px; max-height:92vh; overflow-y:auto; box-shadow:var(--shadow-md); }
.modal-hdr { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.modal-hdr h2 { font-size:16px; font-weight:600; }
.modal-ftr { display:flex; gap:8px; margin-top:16px; }
.modal-ftr .btn { flex:1; }

/* Confirm modal */
.confirm-box  { text-align:center; }
.confirm-icon { font-size:36px; margin-bottom:10px; }
.confirm-box h2 { margin-bottom:8px; }
.confirm-box p  { font-size:14px; color:var(--txt2); margin-bottom:4px; }
.confirm-box .target { font-weight:700; color:var(--txt); font-family:var(--mono); word-break:break-all; }
.confirm-box .warn { font-size:13px; color:var(--red-t); background:var(--red-bg); border:1px solid var(--red-b); border-radius:var(--r); padding:8px 12px; margin-top:10px; }
.confirm-password-wrap { margin-top:14px; text-align:left; }
.confirm-password-wrap label { margin-bottom:5px; }
.confirm-password-wrap small { display:block; margin-top:4px; color:var(--muted); font-size:10px; }

.draft-recovery-bg { z-index:150; }
.draft-recovery-modal { max-width:430px; text-align:center; }
.draft-recovery-icon { width:48px; height:48px; margin:0 auto 10px; border-radius:14px; display:flex; align-items:center; justify-content:center; color:var(--accent-t); background:var(--accent-lt); border:1px solid var(--accent-b); }
.draft-recovery-icon i { font-size:25px; }
.draft-recovery-modal > h2 { font-size:17px; }
.draft-recovery-modal > p { color:var(--txt2); font-size:12px; line-height:1.45; margin-top:6px; }
.draft-recovery-modal > span { display:block; color:var(--muted); font-size:10px; margin-top:5px; }
.draft-recovery-note { display:flex; align-items:flex-start; gap:8px; padding:9px 10px; margin-top:13px; border:1px solid var(--border); border-radius:var(--r); background:var(--surface2); color:var(--txt2); text-align:left; }
.draft-recovery-note i { color:var(--accent); font-size:16px; flex:0 0 auto; }
.draft-recovery-note span { font-size:10px; line-height:1.4; }

/* ── Toast ───────────────────────────────────────────────── */
.toast { position:fixed; bottom:20px; left:50%; transform:translateX(-50%) translateY(60px); background:#1a1d23; color:#fff; padding:10px 18px; border-radius:99px; font-size:13px; font-weight:500; opacity:0; transition:all .22s; z-index:200; pointer-events:none; max-width:90vw; text-align:center; display:flex; align-items:center; gap:7px; white-space:nowrap; }
.toast.show     { opacity:1; transform:translateX(-50%) translateY(0); }
.toast.t-ok     { background:var(--green); }
.toast.t-err    { background:var(--red); }
.toast.t-warn   { background:var(--yellow); color:#fff; }

/* ── Spinner ─────────────────────────────────────────────── */
.spinner { width:15px; height:15px; border:2px solid rgba(255,255,255,.3); border-top-color:#fff; border-radius:50%; animation:spin .6s linear infinite; display:inline-block; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ── Empty state ─────────────────────────────────────────── */
.empty { text-align:center; padding:3rem 1rem; color:var(--muted); }
.empty i { font-size:32px; display:block; margin-bottom:8px; opacity:.5; }
.empty p { font-size:13px; }
.empty .sub { font-size:12px; margin-top:4px; }

/* ── Misc ────────────────────────────────────────────────── */
.gap-row  { display:flex; gap:8px; }
.gap-row .btn { flex:1; }
.mt-4  { margin-top:4px; }
.mt-8  { margin-top:8px; }
.mt-12 { margin-top:12px; }
.list-gap { display:flex; flex-direction:column; gap:8px; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width:720px) {
  .home-metrics { grid-template-columns:1fr 1fr; }
  .home-grid, .home-widget-grid { grid-template-columns:1fr; }
  .home-widget-wide { grid-column:1; }
}
@media (max-width:480px) {
  .page { padding:12px; }
  .home-hero h1 { font-size:21px; }
  .home-refresh { padding:7px; }
  .home-refresh i { font-size:16px; }
  .home-refresh { font-size:0; }
  .home-hero-actions .btn { padding:7px 9px; }
  .home-metrics { gap:8px; }
  .home-metric { padding:12px; }
  .home-metric-icon { display:none; }
  .stats-row { grid-template-columns:repeat(3,1fr); gap:7px; }
  .stat-n  { font-size:22px; }
  .modal   { padding:16px; }
  .topbar  { height:48px; }
  .topbar-name { display:none; }
  .user-chip #hdr-role { display:none; }
  .notification-panel { position:fixed; top:54px; right:8px; width:calc(100vw - 16px); max-height:calc(100vh - 64px); }
  .notification-list { max-height:calc(100vh - 135px); }
  .notification-popup-stack { top:56px; right:10px; width:calc(100vw - 20px); }
  .connectivity-banner { margin:8px 10px 0; }
  .tabs-nav { top:48px; }
  .scanner-shell { max-height:240px; }
  .log-table { font-size:11px; }
  .log-table th, .log-table td { padding:7px 8px; }
}

/* Prepare Machines operational workstation */
.page-header-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.prepare-start-grid{display:grid;grid-template-columns:minmax(300px,.8fr) minmax(420px,1.2fr);gap:16px}
.prepare-create-card,.prepare-active-card,.prepare-scan-panel,.prepare-bulk-tools{padding:20px}
.prepare-create-card{display:flex;flex-direction:column;gap:14px;align-self:start}.prepare-create-card .btn{align-self:flex-start}
.prepare-batch-list{display:flex;flex-direction:column;gap:8px}.prepare-batch-card{width:100%;display:grid;grid-template-columns:minmax(0,1fr) 110px 18px;align-items:center;gap:14px;padding:13px;border:1px solid var(--border);border-radius:12px;background:var(--surface2);color:var(--txt);text-align:left;cursor:pointer}.prepare-batch-card:hover{border-color:var(--accent-b);background:var(--accent-lt)}.prepare-batch-card>span:first-child{display:flex;min-width:0;flex-direction:column}.prepare-batch-card small{color:var(--muted);font-size:11px}.prepare-batch-progress{display:flex;flex-direction:column;gap:5px;text-align:right;font-size:11px}.prepare-batch-progress i{height:5px;overflow:hidden;border-radius:99px;background:var(--surface3)}.prepare-batch-progress em{display:block;height:100%;border-radius:inherit;background:var(--green)}
.prepare-workspace-head{display:flex;justify-content:space-between;align-items:end;gap:20px}.prepare-workspace-head h2{margin-top:8px;font-size:24px}.prepare-workspace-head p{margin-top:2px;color:var(--muted);font-size:12px}.prepare-progress-copy{display:flex;flex-direction:column;align-items:flex-end}.prepare-progress-copy strong{font-size:17px}.prepare-progress-copy span{color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.08em}.prepare-progress-track{height:8px;margin:14px 0 20px;overflow:hidden;border-radius:99px;background:var(--surface3)}.prepare-progress-track span{display:block;height:100%;border-radius:inherit;background:var(--green);transition:width .25s}
.prepare-complete{min-height:310px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border-color:var(--green-b);background:var(--green-bg)}.prepare-complete.hidden{display:none}.prepare-complete-check{width:64px;height:64px;display:flex;align-items:center;justify-content:center;margin-bottom:14px;border-radius:50%;background:var(--green);color:#fff;font-size:34px}.prepare-complete h3{font-size:24px}.prepare-complete p{margin-top:6px;color:var(--green-t);font-size:14px}.prepare-complete strong{margin-top:4px;font-size:13px}.prepare-complete small{margin-top:18px;color:var(--muted)}
.prepare-station-grid{display:grid;grid-template-columns:minmax(270px,340px) minmax(0,1fr);gap:16px;align-items:start}.prepare-scan-panel{position:sticky;top:calc(var(--topbar-h) + 18px)}.prepare-scan-panel h3{font-size:16px}.prepare-scanner{margin-top:14px;max-height:205px}.prepare-scan-panel>strong{display:block;padding-top:4px;color:var(--txt2);font-size:12px}
.prepare-assignment-panel{min-width:0}.prepare-bulk-tools{display:grid;grid-template-columns:minmax(140px,1fr) 150px auto 76px auto;gap:8px;align-items:center;margin-bottom:12px}.prepare-bulk-tools>div{display:flex;flex-direction:column}.prepare-bulk-tools>div span{color:var(--muted);font-size:10px}.prepare-bulk-tools select,.prepare-bulk-tools input{min-width:0;height:36px}
.prepare-assignment-list{display:flex;flex-direction:column;gap:9px}.prepare-reader-row{display:grid;grid-template-columns:minmax(160px,1fr) minmax(210px,1.1fr) minmax(220px,1.15fr) auto;align-items:center;gap:14px;padding:14px;border:1px solid var(--border);border-radius:14px;background:var(--surface)}.prepare-reader-row.is-configured{border-color:var(--green-b);background:var(--green-bg)}.prepare-reader-identity{display:flex;align-items:center;gap:10px;min-width:0}.prepare-row-number{width:28px;height:28px;display:flex;align-items:center;justify-content:center;flex:0 0 28px;border-radius:50%;background:var(--surface3);color:var(--muted);font-size:11px;font-weight:700}.prepare-reader-identity>div{display:flex;min-width:0;flex-direction:column}.prepare-reader-identity strong{overflow:hidden;text-overflow:ellipsis}.prepare-reader-identity small{color:var(--muted);font-size:10px}.prepare-reader-fields{display:grid;grid-template-columns:1fr 90px;gap:8px}.prepare-reader-fields .fg{gap:3px}.prepare-reader-fields label{font-size:9px}.prepare-reader-fields select,.prepare-reader-fields input{height:35px;min-width:0;padding:6px 8px}.prepare-generated{display:flex;min-width:0;flex-direction:column}.prepare-generated>span{color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.05em}.prepare-generated>strong{overflow:hidden;font-size:12px;text-overflow:ellipsis;white-space:nowrap}.prepare-copy-actions{display:flex;gap:2px;margin-top:3px}.prepare-copy-actions .btn{height:27px;padding:3px 6px;font-size:9px}.prepare-row-action{display:flex;align-items:center;gap:6px}.prepare-row-action .btn-primary{white-space:nowrap}.prepare-workspace-actions{display:flex;justify-content:flex-end;margin-top:14px}

/* Legacy import */
.stock-import-modal{max-width:980px}.stock-import-mapping{margin-top:8px}.stock-import-map-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.stock-import-summary{display:flex;align-items:center;gap:14px;margin:16px 0 8px;padding:12px;border:1px solid var(--border);border-radius:10px;background:var(--surface2);font-size:12px}.import-valid{color:var(--green-t)}.import-invalid{color:var(--red-t)}.stock-import-preview{max-height:360px;overflow:auto;border:1px solid var(--border);border-radius:10px}.stock-import-preview .stock-table{min-width:720px}.stock-import-preview .import-row-invalid{background:var(--red-bg)}

/* Operational Overview */
.stock-ops-widget{display:flex;flex-direction:column;gap:14px}.stock-ops-metrics{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}.stock-ops-metrics button{display:grid;grid-template-columns:38px 1fr;grid-template-rows:auto auto;gap:0 10px;align-items:center;padding:13px;border:1px solid var(--border);border-radius:14px;background:var(--surface);color:var(--txt);text-align:left;cursor:pointer}.stock-ops-metrics .home-metric-icon{grid-row:1/3;width:38px;height:38px}.stock-ops-metrics strong{font-size:20px;line-height:1}.stock-ops-metrics small{color:var(--muted);font-size:9px}.metric-purple{color:#af52de;background:rgba(175,82,222,.1)}.metric-orange{color:#c45b00;background:rgba(255,149,0,.12)}.metric-red{color:var(--red-t);background:var(--red-bg)}
.stock-ops-summary-grid{display:grid;grid-template-columns:340px minmax(0,1fr);gap:14px}.stock-status-chart,.stock-throughput-chart{padding:18px}.stock-status-chart{display:grid;grid-template-columns:125px 1fr;grid-template-rows:auto 1fr;align-items:center}.stock-status-chart .home-panel-header{grid-column:1/-1}.stock-donut{width:112px;height:112px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:50%;background:radial-gradient(circle,var(--surface) 0 55%,transparent 57%),conic-gradient(var(--stock-donut));box-shadow:inset 0 0 0 1px var(--border)}.stock-donut strong{font-size:22px}.stock-donut span{color:var(--muted);font-size:9px}.stock-chart-legend{display:grid;grid-template-columns:1fr 1fr;gap:9px;font-size:10px}.stock-chart-legend span{display:flex;align-items:center;gap:6px}.stock-chart-legend i{width:8px;height:8px;border-radius:50%}.dot-new{background:#af52de}.dot-setup{background:var(--blue)}.dot-finalized{background:#14b8a6}.dot-ready{background:var(--green)}.dot-faulty{background:var(--red)}.stock-throughput-chart{display:flex;flex-direction:column}.stock-bars{height:115px;display:flex;align-items:end;gap:3px;margin-top:auto;padding-top:12px;border-bottom:1px solid var(--border)}.stock-bars i{flex:1;min-width:2px;border-radius:3px 3px 0 0;background:var(--accent);opacity:.72}.stock-bars i:hover{opacity:1}.stock-bars-axis{display:flex;justify-content:space-between;margin-top:5px;color:var(--muted);font-size:9px}.stock-ops-action-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.stock-activity-list{display:flex;flex-direction:column}.stock-activity-list>div{display:flex;align-items:flex-start;gap:10px;padding:10px 0;border-bottom:1px solid var(--border)}.stock-activity-list>div:last-child{border-bottom:0}.stock-activity-list p{display:flex;min-width:0;flex-direction:column}.stock-activity-list p strong{font-size:10px;text-transform:capitalize}.stock-activity-list p span,.stock-activity-list p small{overflow:hidden;color:var(--muted);font-size:9px;text-overflow:ellipsis;white-space:nowrap}

@media(max-width:1100px){.prepare-station-grid{grid-template-columns:1fr}.prepare-scan-panel{position:static}.prepare-bulk-tools{grid-template-columns:1fr 150px auto 75px auto}.prepare-reader-row{grid-template-columns:1fr 1fr}.prepare-row-action{justify-content:flex-end}.stock-ops-metrics{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.page-header-actions{justify-content:flex-start}.prepare-start-grid,.stock-ops-summary-grid,.stock-ops-action-grid{grid-template-columns:1fr}.prepare-workspace-head{align-items:flex-start;flex-direction:column}.prepare-progress-copy{align-items:flex-start}.prepare-bulk-tools{grid-template-columns:1fr 1fr}.prepare-bulk-tools>div{grid-column:1/-1}.prepare-reader-row{grid-template-columns:1fr}.prepare-row-action{justify-content:flex-start}.stock-import-map-grid{grid-template-columns:1fr 1fr}.stock-ops-metrics{grid-template-columns:1fr 1fr}.stock-status-chart{grid-template-columns:120px 1fr}}
@media(max-width:480px){.stock-import-map-grid{grid-template-columns:1fr}.prepare-bulk-tools{grid-template-columns:1fr}.prepare-bulk-tools>div{grid-column:auto}.stock-ops-metrics{grid-template-columns:1fr}.stock-status-chart{grid-template-columns:1fr;justify-items:center}.stock-chart-legend{margin-top:14px}}
@media (max-width:380px) {
  .page-header { flex-direction:column; align-items:flex-start; }
  .home-actions { grid-template-columns:1fr; }
  .stats-row   { grid-template-columns:repeat(3,1fr); gap:5px; }
}

/* ═══════════════════════════════════════════════════════════
   SOAP DISPENSER — Label print styles
   ═══════════════════════════════════════════════════════════ */

/* Label preview in modal */
.label-preview {
  background: #fff;
  border: 1.5px solid var(--border-s);
  border-radius: var(--r-lg);
  padding: 20px;
  max-width: 340px;
  margin: 0 auto;
  text-align: center;
  font-family: var(--mono);
}
.label-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 14px;
}
.label-logo-box {
  width: 36px; height: 36px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.label-logo-box img { width:100%; height:100%; object-fit:contain; }
.label-logo-name {
  font-family: var(--font);
  font-size: 16px; font-weight: 700;
  color: #1a1a18;
}
.label-type {
  font-family: var(--font);
  font-size: 11px;
  color: #6b6b67;
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: 12px;
}
.label-qr {
  margin: 12px auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.label-sn {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  color: #1a1a18;
  word-break: break-all;
  margin-top: 10px;
  padding: 8px;
  background: #f5f5f3;
  border-radius: 6px;
  letter-spacing: .04em;
}
.label-interface {
  margin-top: 8px;
  color: #1a1a18;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
}
.label-dispatch-question { margin-top:12px; padding:10px 11px; display:flex; align-items:center; gap:9px; border:1px solid var(--accent-b); border-radius:var(--r); background:var(--accent-lt); color:var(--accent-t); }
.label-dispatch-question > i { font-size:22px; flex:0 0 auto; }
.label-dispatch-question strong, .label-dispatch-question span { display:block; }
.label-dispatch-question strong { font-size:12px; }
.label-dispatch-question span { margin-top:2px; font-size:10px; line-height:1.35; }
.label-actions { flex-wrap:wrap; }
.label-actions #btn-print-dispatch { order:-1; flex-basis:100%; min-height:40px; }
.label-divider {
  border: none;
  border-top: 1px dashed #ccc;
  margin: 12px 0;
}

/* SD preview card */
.sd-preview-card {
  background: var(--accent-lt);
  border: 1px solid var(--accent-b);
  border-radius: var(--r-lg);
  padding: 14px;
  margin: 12px 0;
  text-align: center;
}
.sd-preview-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent-t);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 6px;
}
.sd-preview-sn {
  font-family: var(--mono);
  font-size: 18px;
  font-weight: 700;
  color: var(--accent-t);
  word-break: break-all;
  letter-spacing: .04em;
}

/* SD stats */
.sd-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 99px;
  background: #f0f9ff;
  color: #075985;
  border: 1px solid #bae6fd;
}

/* @media print — handled by popup window, this just hides print-area on screen */
@media print {
  #print-area { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════
   DISPATCH WORKFLOW
   ═══════════════════════════════════════════════════════════ */
.dispatch-page { max-width:1180px; }
.dispatch-header-actions { display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.dispatch-subtitle { color:var(--muted); font-size:12px; margin-top:2px; }
.dispatch-flow-guide { display:flex; align-items:center; gap:10px; margin-bottom:14px; padding:12px 14px; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--shadow); }
.dispatch-flow-guide > div { display:flex; align-items:center; gap:9px; min-width:0; flex:1; }
.dispatch-flow-guide > div > b { width:27px; height:27px; flex:0 0 27px; display:flex; align-items:center; justify-content:center; border-radius:99px; background:var(--accent-lt); color:var(--accent-t); font-size:12px; }
.dispatch-flow-guide span, .dispatch-flow-guide strong, .dispatch-flow-guide small { display:block; }
.dispatch-flow-guide strong { font-size:12px; }
.dispatch-flow-guide small { margin-top:1px; color:var(--muted); font-size:9px; }
.dispatch-flow-guide > i { color:var(--border-s); flex:0 0 auto; }
.dispatch-layout { display:grid; grid-template-columns:minmax(260px,.72fr) minmax(0,1.7fr); gap:14px; align-items:start; }
.dispatch-list-panel, .dispatch-detail { min-width:0; }
.dispatch-list-panel { padding:12px; }
.dispatch-panel-title { margin-bottom:10px; }
.dispatch-panel-title strong, .dispatch-panel-title small { display:block; }
.dispatch-panel-title strong { font-size:13px; }
.dispatch-panel-title small { margin-top:2px; color:var(--muted); font-size:10px; }
.dispatch-list { display:flex; flex-direction:column; gap:7px; }
.dispatch-list-item {
  width:100%; padding:11px 12px; border:1px solid var(--border); border-radius:var(--r);
  background:var(--surface); color:var(--txt); cursor:pointer; text-align:left;
  display:flex; flex-direction:column; gap:3px; box-shadow:var(--shadow);
}
.dispatch-list-item:hover { border-color:var(--border-s); }
.dispatch-list-item.active { border-color:var(--accent-b); background:var(--accent-lt); box-shadow:inset 3px 0 0 var(--accent); }
.dispatch-list-top { display:flex; align-items:center; justify-content:space-between; gap:6px; }
.dispatch-list-item strong { font-size:13px; }
.dispatch-list-item > span:not(.dispatch-list-top) { font-size:12px; font-weight:600; }
.dispatch-list-item small { color:var(--muted); font-size:10px; }
.dispatch-detail { display:flex; flex-direction:column; gap:10px; }
.dispatch-empty { min-height:310px; padding:28px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; border:1px dashed var(--border-s); border-radius:var(--r-lg); background:var(--surface); color:var(--muted); }
.dispatch-empty > i { margin-bottom:10px; font-size:34px; color:var(--accent); }
.dispatch-empty strong { color:var(--txt2); font-size:14px; }
.dispatch-empty p { margin-top:4px; font-size:11px; }
.dispatch-detail-head {
  display:flex; align-items:flex-start; justify-content:space-between; gap:10px;
  padding:14px; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--shadow);
}
.dispatch-detail-head strong, .dispatch-detail-head span { display:block; }
.dispatch-detail-head strong { font-size:15px; }
.dispatch-detail-head span { margin-top:3px; color:var(--muted); font-size:11px; }
.dispatch-detail-actions { display:flex; align-items:center; gap:7px; flex:0 0 auto; }
.dispatch-role-strip { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.dispatch-role-strip > div { padding:9px 10px; border:1px solid var(--border); border-radius:var(--r); background:var(--surface); }
.dispatch-role-strip span, .dispatch-role-strip strong { display:block; }
.dispatch-role-strip span { color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.04em; }
.dispatch-role-strip strong { margin-top:2px; font-size:12px; }
.dispatch-stage-card { padding:14px; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--shadow); }
.dispatch-stage-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:12px; }
.dispatch-stage-heading strong, .dispatch-stage-heading span { display:block; }
.dispatch-stage-heading strong { font-size:14px; }
.dispatch-stage-heading span { color:var(--muted); font-size:11px; margin-top:2px; }
.dispatch-stage-heading > b { font-size:12px; color:var(--accent-t); background:var(--accent-lt); border:1px solid var(--accent-b); border-radius:99px; padding:3px 8px; }
.dispatch-machine-list { display:flex; flex-direction:column; gap:9px; }
.dispatch-machine-card { border:1px solid var(--border); border-radius:var(--r); background:var(--surface2); padding:11px; }
.dispatch-machine-head { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; margin-bottom:9px; }
.dispatch-machine-head strong, .dispatch-machine-head small { display:block; }
.dispatch-machine-head strong { font-family:var(--mono); font-size:12px; word-break:break-all; }
.dispatch-machine-head small { color:var(--muted); font-size:10px; margin-top:2px; }
.dispatch-section-label { color:var(--txt2); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; margin-bottom:7px; }
.dispatch-warranty-block { border-top:1px solid var(--border); padding-top:8px; margin-bottom:9px; }
.dispatch-warranty-readonly { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:11px; }
.dispatch-warranty-editor { display:grid; grid-template-columns:170px minmax(180px,1fr) auto; gap:7px; align-items:start; }
.dispatch-warranty-editor > .btn { margin-top:21px; }
.dispatch-warranty-editor select, .dispatch-warranty-editor input { font-size:12px; padding:7px 9px; }
.dispatch-warranty-detail small { display:block; margin-top:4px; color:var(--muted); font-size:9px; line-height:1.3; }
.dispatch-proof-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
.dispatch-proof-row { min-width:0; padding:8px; border:1px solid var(--border); border-radius:var(--r); background:var(--surface); display:grid; grid-template-columns:28px minmax(0,1fr); gap:7px; align-items:center; }
.dispatch-proof-row.complete { border-color:var(--green-b); background:var(--green-bg); }
.dispatch-proof-icon { width:28px; height:28px; border-radius:7px; display:flex; align-items:center; justify-content:center; color:var(--txt2); background:var(--surface3); }
.dispatch-proof-row.complete .dispatch-proof-icon { color:var(--green-t); background:var(--green-b); }
.dispatch-proof-copy { min-width:0; }
.dispatch-proof-copy strong, .dispatch-proof-copy small { display:block; }
.dispatch-proof-copy strong { font-size:11px; }
.dispatch-help-label { display:flex !important; align-items:center; gap:4px; }
.dispatch-proof-copy small { color:var(--muted); font-size:9px; margin-top:1px; }
.dispatch-upload-btn { grid-column:1/-1; margin:0; padding:6px 8px; border:1px dashed var(--border-s); border-radius:6px; cursor:pointer; color:var(--accent-t); background:var(--accent-lt); font-size:11px; font-weight:600; text-transform:none; letter-spacing:0; text-align:center; }
.dispatch-upload-btn input { display:none; }
.dispatch-proof-thumbs { grid-column:1/-1; display:flex; flex-wrap:wrap; gap:5px; }
.pending-evidence-local { grid-column:1/-1; display:grid; grid-template-columns:25px minmax(0,1fr) auto; gap:7px; align-items:center; padding:7px 8px; border:1px solid var(--yellow-b); border-radius:6px; background:var(--yellow-bg); color:var(--yellow-t); }
.pending-evidence-local > i { font-size:17px; }
.pending-evidence-local span, .pending-evidence-local strong, .pending-evidence-local small { display:block; }
.pending-evidence-local strong { font-size:9px; }
.pending-evidence-local small { font-size:8px; margin-top:1px; opacity:.85; }
.pending-evidence-local .btn { padding:4px 7px; font-size:9px; }
.dispatch-signature-pad > .pending-evidence-local, .dispatch-signature-pending > .pending-evidence-local { margin-top:8px; }
.dispatch-proof-thumb { width:58px; text-decoration:none; color:var(--muted); }
.dispatch-proof-thumb img { width:58px; height:44px; object-fit:cover; display:block; border-radius:5px; border:1px solid var(--border); background:var(--surface3); }
.dispatch-proof-thumb span { display:none; }
.dispatch-signature-pad, .dispatch-signature-complete, .dispatch-signature-pending { margin-top:10px; padding:10px; border:1px solid var(--border); border-radius:var(--r); background:var(--surface2); }
.dispatch-signature-pad input { margin-bottom:7px; }
.dispatch-input-label { margin:6px 0 4px; }
.dispatch-signature-pad canvas { display:block; width:100%; height:120px; border:1px solid var(--border-s); border-radius:var(--r); background:var(--surface); touch-action:none; margin-bottom:7px; }
.dispatch-signature-complete { display:flex; align-items:center; gap:9px; color:var(--green-t); background:var(--green-bg); border-color:var(--green-b); }
.dispatch-signature-complete > i { font-size:23px; }
.dispatch-signature-complete strong, .dispatch-signature-complete span { display:block; }
.dispatch-signature-complete span { font-size:10px; margin-top:2px; }
.dispatch-signature-complete .dispatch-proof-thumbs { margin-left:auto; grid-column:auto; }
.dispatch-signature-pending { color:var(--muted); font-size:12px; }
.dispatch-stage-submit { width:100%; margin-top:10px; }
.dispatch-info { color:var(--muted); background:var(--surface2); border:1px solid var(--border); border-radius:var(--r); padding:9px 11px; margin-top:10px; font-size:11px; }
.dispatch-scan-list { display:flex; flex-direction:column; gap:5px; margin-bottom:9px; }
.dispatch-scan-item { display:grid; grid-template-columns:20px minmax(0,1fr) auto; gap:7px; align-items:center; padding:7px 9px; border:1px solid var(--border); border-radius:var(--r); background:var(--surface2); font-family:var(--mono); font-size:11px; }
.dispatch-scan-item small { color:var(--muted); font-family:var(--font); font-size:9px; }
.dispatch-scan-item.complete { color:var(--green-t); border-color:var(--green-b); background:var(--green-bg); }
.dispatch-scan-box { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:7px; margin-bottom:9px; }
.dispatch-field-block { margin-top:9px; }
.dispatch-field-block > label { margin-bottom:5px; }
.dispatch-field-control > label { margin-bottom:4px; }
.dispatch-complete-help { display:flex; align-items:center; gap:7px; }
.dispatch-complete-help .dispatch-stage-submit { flex:1; }
.dispatch-create-modal { max-width:620px; }
.dispatch-machine-options { max-height:280px; overflow-y:auto; border:1px solid var(--border); border-radius:var(--r); }
.dispatch-machine-option { margin:0; padding:9px 10px; display:flex; align-items:center; gap:9px; border-bottom:1px solid var(--border); text-transform:none; letter-spacing:0; cursor:pointer; }
.dispatch-machine-option:last-child { border-bottom:0; }
.dispatch-machine-option input { width:auto; flex:0 0 auto; }
.dispatch-machine-option:has(input:checked) { background:var(--accent-lt); color:var(--accent-t); }
.dispatch-machine-option > span { display:flex; align-items:center; justify-content:space-between; gap:8px; min-width:0; width:100%; }
.dispatch-machine-option strong { font-family:var(--mono); font-size:11px; word-break:break-all; }
.dispatch-machine-option small { display:flex; align-items:center; gap:5px; }
.dispatch-queue-card { margin-bottom:14px; padding:13px; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--shadow); }
.dispatch-queue-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:10px; }
.dispatch-queue-head strong, .dispatch-queue-head small { display:block; }
.dispatch-queue-head strong { font-size:13px; }
.dispatch-queue-head small { margin-top:2px; max-width:650px; color:var(--muted); font-size:10px; line-height:1.35; }
.dispatch-queue-head span { min-width:22px; padding:2px 7px; border-radius:99px; text-align:center; color:var(--accent-t); background:var(--accent-lt); }
.dispatch-queue-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; max-height:240px; overflow:auto; }
.dispatch-queue-item { min-width:0; border:1px solid var(--border); border-radius:var(--r); padding:9px; background:var(--surface2); color:var(--txt); text-align:left; cursor:pointer; display:grid; grid-template-columns:30px minmax(0,1fr) auto auto; gap:8px; align-items:center; }
.dispatch-queue-item:hover { border-color:var(--accent-b); background:var(--accent-lt); }
.dispatch-queue-icon { width:30px; height:30px; display:flex; align-items:center; justify-content:center; border-radius:7px; background:var(--accent-lt); color:var(--accent-t); }
.dispatch-queue-copy { min-width:0; }
.dispatch-queue-copy strong, .dispatch-queue-copy span, .dispatch-queue-copy small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dispatch-queue-copy strong { font:600 10px var(--mono); }
.dispatch-queue-copy span { margin-top:2px; font-size:10px; }
.dispatch-queue-copy small { margin-top:2px; color:var(--muted); font-size:9px; }
.dispatch-queue-item > .ti-chevron-right { color:var(--muted); }
.dispatch-queue-empty { margin:0; color:var(--muted); font-size:10px; }
.dispatch-driver-picker { margin:10px 0; }
.dispatch-driver-picker label { display:block; margin-bottom:5px; }
.dispatch-driver-picker label.label-with-help { display:flex; }
.dispatch-address { display:flex; gap:9px; padding:10px; margin-bottom:10px; border:1px solid var(--border); border-radius:var(--r); background:var(--surface2); }
.dispatch-address > i { color:var(--accent); font-size:20px; }
.dispatch-address strong, .dispatch-address span, .dispatch-address small { display:block; }
.dispatch-address span, .dispatch-address small { margin-top:3px; color:var(--muted); font-size:10px; }
.dispatch-delivery-fields { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.dispatch-proof-summary { margin-top:10px; padding:10px; border:1px solid var(--green-b); border-radius:var(--r); background:var(--green-bg); color:var(--green-t); }
.dispatch-proof-summary strong, .dispatch-proof-summary span, .dispatch-proof-summary small { display:block; }
.dispatch-proof-summary span, .dispatch-proof-summary small { margin-top:3px; font-size:10px; }
.dispatch-scanner-modal { max-width:520px; }
.dispatch-qr-video { display:block; width:100%; min-height:280px; max-height:60vh; object-fit:cover; border-radius:var(--r); background:#111; }
.permission-groups { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:9px; }
.permission-group { min-width:0; padding:9px; border:1px solid var(--border); border-radius:var(--r); }
.permission-group legend { padding:0 4px; color:var(--txt2); font-size:10px; font-weight:700; text-transform:uppercase; }
.permission-option { display:flex; align-items:flex-start; gap:7px; margin:6px 0 0; color:var(--txt2); font-size:11px; font-weight:500; text-transform:none; letter-spacing:0; }
.permission-option input { width:auto; margin-top:1px; }
.permission-disabled { opacity:.55; }

/* Dispatch contextual help */
.label-with-help { display:flex; align-items:center; justify-content:flex-start; gap:5px; }
.field-help-btn { width:19px; height:19px; flex:0 0 19px; border:1px solid var(--accent-b); border-radius:50%; background:var(--accent-lt); color:var(--accent-t); display:inline-flex; align-items:center; justify-content:center; padding:0; cursor:pointer; vertical-align:middle; transition:.15s ease; }
.field-help-btn:hover, .field-help-btn:focus-visible { color:#fff; background:var(--accent); border-color:var(--accent); outline:none; transform:translateY(-1px); }
.field-help-btn i { font-size:12px; font-weight:700; }
.dispatch-help-modal { max-width:760px; max-height:min(820px,calc(100vh - 32px)); overflow-y:auto; }
.dispatch-help-intro { color:var(--muted); font-size:11px; margin-top:3px; }
.dispatch-help-flow { display:flex; flex-direction:column; gap:0; margin-top:4px; }
.dispatch-help-flow article { display:grid; grid-template-columns:38px minmax(0,1fr); gap:11px; position:relative; padding:8px 0 13px; }
.dispatch-help-flow article:not(:last-child)::after { content:""; position:absolute; left:18px; top:40px; bottom:-1px; width:2px; background:var(--accent-b); }
.dispatch-help-flow article > b { width:38px; height:38px; z-index:1; border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--accent-t); background:var(--accent-lt); border:1px solid var(--accent-b); font-size:13px; }
.dispatch-help-flow article strong { display:block; font-size:13px; }
.dispatch-help-flow article p { color:var(--txt2); font-size:11px; line-height:1.45; margin-top:2px; }
.dispatch-help-flow article small { display:block; width:max-content; max-width:100%; color:var(--accent-t); background:var(--accent-lt); border-radius:99px; padding:3px 8px; font-size:9px; margin-top:6px; }
.dispatch-help-rules { padding:11px 12px; border:1px solid var(--green-b); border-radius:var(--r); background:var(--green-bg); color:var(--green-t); display:flex; flex-direction:column; gap:5px; }
.dispatch-help-rules strong { font-size:11px; text-transform:uppercase; letter-spacing:.04em; }
.dispatch-help-rules span { display:flex; align-items:flex-start; gap:6px; font-size:10px; }
.dispatch-help-rules i { margin-top:1px; }
.field-help-popover { display:none; position:fixed; width:min(340px,calc(100vw - 24px)); padding:15px; z-index:240; border:1px solid var(--accent-b); border-radius:12px; background:var(--surface); color:var(--txt); box-shadow:0 18px 48px rgba(15,23,42,.24),var(--shadow-md); }
.field-help-popover.open { display:block; animation:field-help-in .15s ease-out; }
@keyframes field-help-in { from { opacity:0; transform:translateY(-4px) scale(.985); } to { opacity:1; transform:none; } }
.field-help-close { position:absolute; top:9px; right:9px; width:25px; height:25px; border:0; border-radius:7px; background:var(--surface2); color:var(--muted); cursor:pointer; display:flex; align-items:center; justify-content:center; }
.field-help-close:hover { color:var(--txt); background:var(--surface3); }
.field-help-eyebrow { display:block; color:var(--accent); font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; margin-bottom:3px; }
.field-help-popover > strong { display:block; padding-right:25px; font-size:14px; }
.field-help-popover > p { color:var(--txt2); font-size:11px; line-height:1.5; margin-top:5px; }
.field-help-example { margin-top:10px; padding:9px 10px; border-left:3px solid var(--accent); border-radius:0 7px 7px 0; background:var(--accent-lt); }
.field-help-example small, .field-help-example span { display:block; }
.field-help-example small { color:var(--accent-t); font-size:8px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.field-help-example span { color:var(--txt2); font-size:10px; line-height:1.4; margin-top:2px; }
.field-help-tip { display:flex; align-items:flex-start; gap:7px; color:var(--yellow-t); background:var(--yellow-bg); border:1px solid var(--yellow-b); border-radius:7px; padding:8px 9px; margin-top:8px; }
.field-help-tip i { flex:0 0 auto; font-size:14px; margin-top:1px; }
.field-help-tip span { font-size:10px; line-height:1.4; }

@media (max-width:850px) {
  .dispatch-layout { grid-template-columns:1fr; }
  .dispatch-list { display:grid; grid-template-columns:repeat(2,1fr); }
  .dispatch-queue-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:620px) {
  .dispatch-flow-guide { display:grid; grid-template-columns:1fr 1fr; }
  .dispatch-flow-guide > i { display:none; }
  .dispatch-role-strip, .dispatch-proof-grid { grid-template-columns:1fr; }
  .dispatch-warranty-editor { grid-template-columns:1fr; }
  .dispatch-warranty-editor > .btn { margin-top:0; }
  .dispatch-list { grid-template-columns:1fr; }
  .dispatch-queue-list { grid-template-columns:1fr; }
  .dispatch-scan-item { grid-template-columns:20px minmax(0,1fr); }
  .dispatch-scan-item small { grid-column:2; }
  .dispatch-scan-box { grid-template-columns:1fr; }
  .permission-groups, .dispatch-delivery-fields { grid-template-columns:1fr; }
  .dispatch-header-actions { width:100%; }
  .dispatch-header-actions .btn { flex:1; }
  .field-help-popover { left:10px !important; right:10px; top:auto !important; bottom:10px; width:auto; }
}

/* ═══════════════════════════════════════════════════════════
   SOAP DISPENSER — Checklist styles
   ═══════════════════════════════════════════════════════════ */

/* ── Checklist — compact grouped layout ───────────────────── */
.sd-checklist-card {
  border: 1px solid var(--border);
}

.cl-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2px;
}

.cl-header .card-title { margin-bottom: 0; }

.cl-header .card-title i {
  font-size: 15px;
  margin-right: 4px;
}

.cl-progress-text {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-t);
  white-space: nowrap;
}

.cl-progress-bar {
  height: 3px;
  background: var(--border);
  border-radius: 2px;
  margin-bottom: 10px;
  overflow: hidden;
}

.cl-progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  transition: width .3s ease;
  width: 0;
}

.cl-progress-fill.complete { background: var(--green); }

/* Groups */
.cl-group { margin-bottom: 6px; }

.cl-group-title {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--accent-t);
  padding: 3px 0 2px;
  border-bottom: 1px solid var(--accent-b);
  margin-bottom: 4px;
}

.cl-group-items {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Checklist row — compact inline layout */
.cl-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 12px;
  row-gap: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 5px 8px;
}

.cl-row-error {
  border-color: var(--red);
  background: var(--red-bg);
}

.cl-q {
  min-width: 0;
  font-size: 12.5px;
  color: var(--txt);
  font-weight: 500;
  line-height: 1.35;
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
}

.cl-num {
  font-weight: 700;
  color: var(--accent);
  margin-right: 3px;
  font-size: 11px;
}

.cl-opts {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
  white-space: nowrap;
}

.cl-reason-wrap {
  grid-column: 1 / -1;
  margin-top: 2px;
}

.cl-reason {
  width: 100%;
  padding: 5px 8px;
  border: 1px solid var(--border-s);
  border-radius: var(--r);
  font-size: 12px;
  background: var(--surface);
  color: var(--txt);
  outline: none;
  resize: vertical;
  min-height: 28px;
  font-family: var(--font);
  transition: border-color .15s;
}

.cl-reason:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}

.cl-err {
  grid-column: 1 / -1;
  font-size: 11px;
  color: var(--red-t);
  font-weight: 600;
  margin-top: 1px;
  min-height: 0;
}

.cl-validation-err {
  display: none;
  font-size: 13px;
  color: var(--red-t);
  background: var(--red-bg);
  border: 1px solid var(--red-b);
  border-radius: var(--r);
  padding: 8px 12px;
  margin-top: 8px;
  font-weight: 600;
  text-align: center;
}

/* Yes/No button-style selectors */
.cl-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: var(--r);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid var(--border-s);
  background: var(--surface);
  color: var(--txt2);
  transition: all .15s;
  line-height: 1;
}

.cl-btn:hover {
  background: var(--surface3);
  border-color: var(--border-s);
}

.cl-btn i { font-size: 13px; }

.cl-btn-yes.active {
  background: var(--green-bg);
  color: var(--green-t);
  border-color: var(--green);
}

.cl-btn-yes.active:hover { background: var(--green-b); }

.cl-btn-no.active {
  background: var(--red-bg);
  color: var(--red-t);
  border-color: var(--red);
}

.cl-btn-no.active:hover { background: var(--red-b); }

/* ── Batch register rows ─────────────────────────────────── */
.sd-batch-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.sd-batch-rows-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 320px;
  overflow-y: auto;
}

.sd-batch-row {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 10px 12px;
}

.sd-batch-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.sd-batch-row-num {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  font-family: var(--mono);
}

.sd-batch-row-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.sd-batch-row-fields .fg {
  margin-bottom: 0;
}

.sd-batch-row-fields label {
  font-size: 11px;
}

.sd-batch-row-fields input {
  font-size: 13px;
  padding: 7px 8px;
}

.sd-batch-row-preview {
  grid-column: 1 / -1;
  margin-top: 4px;
  padding: 5px 8px;
  background: var(--accent-lt);
  border: 1px solid var(--accent-b);
  border-radius: var(--r);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--accent-t);
  word-break: break-all;
  display: none;
}

.sd-batch-row-preview.on {
  display: block;
}

.sd-batch-row-err {
  grid-column: 1 / -1;
  font-size: 11px;
  color: var(--red-t);
  font-weight: 600;
  margin-top: 2px;
}

.soap-header-actions{display:flex;gap:8px;align-items:center}.sd-lifecycle-badges{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.sd-destination{margin-top:16px}.sd-destination+div{margin-bottom:14px}.sd-qr-manual{display:flex;gap:8px;margin-top:10px}.sd-qr-manual input{flex:1}.sd-scan-result{margin-top:14px;padding:16px;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);display:grid;gap:12px}.sd-scan-result-head,.sd-scan-result-error{display:flex;gap:10px;align-items:center}.sd-scan-result-head>i,.sd-scan-result-error>i{font-size:26px;color:var(--primary)}.sd-scan-result-head>div,.sd-scan-assignment{display:flex;flex-direction:column;gap:2px}.sd-scan-result-head span,.sd-scan-assignment span,.sd-scan-result-error span{font-size:12px;color:var(--muted)}.sd-scan-result-error>i{color:var(--red)}

@media(max-width:640px){.soap-header-actions{width:100%}.soap-header-actions .btn{flex:1}}

@media (max-width: 480px) {
  .sd-batch-row-fields {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 600px) {
  .cl-row {
    grid-template-columns: 1fr;
  }
  .cl-opts {
    justify-content: flex-start;
  }
}

/* Checklist summary in record cards */
.cl-summary {
  font-size: 12px;
  padding: 6px 10px;
  margin: 6px 0 4px;
  border-radius: var(--r);
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

.cl-summary i {
  font-size: 14px;
}

.cl-summary-ok {
  background: var(--green-bg);
  color: var(--green-t);
}

.cl-summary-warn {
  background: var(--yellow-bg);
  color: var(--yellow-t);
}

.cl-summary-allgood {
  font-weight: 600;
  margin-left: auto;
}

.cl-summary-no {
  font-weight: 600;
  margin-left: auto;
}

.cl-summary-detail {
  width: 100%;
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px dashed var(--border);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cl-summary-item {
  font-size: 11px;
  display: flex;
  gap: 4px;
}

.cl-summary-num {
  font-weight: 700;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted);
  min-width: 18px;
}

/* Nayax Stock */
#page-nayax-stock .stats-row{grid-template-columns:repeat(5,minmax(0,1fr))}
#page-nayax-stock .toolbar{display:grid;grid-template-columns:minmax(240px,1fr) 170px 220px;align-items:center}
#page-nayax-stock .faulty-toolbar{grid-template-columns:minmax(240px,1fr) 220px}
#page-nayax-stock .toolbar .search-box{min-width:0}
#page-nayax-stock .toolbar select{width:100%;min-width:0}
.stock-subtabs{display:flex;gap:8px;margin-bottom:16px}.faulty-toolbar{display:grid}.stock-relationship{margin:12px 0;padding:12px;border-left:3px solid var(--accent);background:var(--surface);border-radius:4px}.stock-relationship strong{display:block;margin-top:4px;font-family:var(--mono)}
.stock-fault-summary{display:grid;gap:8px;margin-bottom:16px;padding:12px;background:var(--surface);border-radius:var(--r);font-size:13px}.stock-fault-summary span{color:var(--muted)}
.stock-stat-card{width:100%;font:inherit;color:inherit;cursor:pointer;transition:border-color .15s,transform .15s}.stock-stat-card:hover{border-color:var(--accent);transform:translateY(-1px)}
.stock-percentage-dashboard{margin:0 0 16px;padding:14px 16px;border:1px solid var(--border);border-radius:var(--r);background:var(--surface)}.stock-percentage-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:11px}.stock-percentage-head div{display:flex;flex-direction:column;gap:2px}.stock-percentage-head span{font-size:11px;color:var(--muted)}.stock-percentage-head>strong{font-size:12px;color:var(--txt2)}
.stock-percentage-bar{display:flex;height:10px;overflow:hidden;border-radius:999px;background:var(--surface3)}.stock-percentage-bar span{display:block;min-width:0;transition:width .25s}.pct-ready{background:var(--green)}.pct-setup{background:var(--blue)}.pct-finalized{background:#14b8a6}.pct-faulty{background:var(--red)}
.stock-percentage-legend{display:flex;gap:20px;margin-top:11px}.stock-percentage-legend button{display:flex;align-items:center;gap:7px;border:0;background:none;color:var(--txt2);font:inherit;font-size:12px;cursor:pointer}.stock-percentage-legend button:hover span{color:var(--txt)}.stock-percentage-legend i{width:9px;height:9px;border-radius:50%}.stock-percentage-legend strong{color:var(--txt)}.legend-ready{background:var(--green)}.legend-setup{background:var(--blue)}.legend-finalized{background:#14b8a6}.legend-faulty{background:var(--red)}
.stock-table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--r);background:var(--surface)}
.faulty-table{min-width:0;table-layout:fixed}.faulty-table th:nth-child(1){width:25%}.faulty-table th:nth-child(2){width:29%}.faulty-table th:nth-child(3){width:15%}.faulty-table th:nth-child(4){width:16%}.faulty-table th:nth-child(5){width:15%}.faulty-table.has-actions th:nth-child(1){width:22%}.faulty-table.has-actions th:nth-child(2){width:26%}.faulty-table.has-actions th:nth-child(3){width:14%}.faulty-table.has-actions th:nth-child(4){width:15%}.faulty-table.has-actions th:nth-child(5){width:14%}.faulty-table.has-actions th:nth-child(6){width:9%}.faulty-table td{vertical-align:top}.faulty-table td:not(.stock-row-actions)>strong,.faulty-table td:not(.stock-row-actions)>span,.faulty-table td:not(.stock-row-actions)>small{display:block}.faulty-table td:not(.stock-row-actions)>span{margin-top:3px;color:var(--txt2);line-height:1.35}.faulty-table td:not(.stock-row-actions)>small{margin-top:4px;color:var(--muted);line-height:1.3}.faulty-table td:first-child strong{white-space:nowrap;font-size:12px;letter-spacing:-.02em}.faulty-table td:nth-child(5){vertical-align:middle}.faulty-table td:nth-child(5) .stock-status{display:inline-flex;width:auto;max-width:100%;white-space:nowrap}.stock-row-actions{vertical-align:middle!important;white-space:nowrap}.faulty-unrelated{color:var(--muted)!important;font-size:12px}
#faulty-list{overflow-x:auto}
.stock-table{width:100%;border-collapse:collapse;min-width:680px}
.stock-table th,.stock-table td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--border);font-size:13px}
.stock-table th{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.05em}
.stock-table tbody tr{cursor:pointer}.stock-table tbody tr:hover,.stock-table tbody tr:focus{background:var(--surface);outline:none}
.stock-status{display:inline-flex;align-items:center;padding:4px 9px;border-radius:999px;font-size:11px;font-weight:700;border:1px solid var(--border)}
.status-new,.status-ready{color:var(--green-t);background:var(--green-bg);border-color:var(--green-b)}.status-setup,.status-allocated,.status-returned_replaced{color:var(--blue-t);background:var(--blue-bg);border-color:var(--blue-b)}
.status-faulty{color:var(--red-t);background:var(--red-bg);border-color:var(--red-b)}.status-sent_to_nayax{color:var(--yellow-t);background:var(--yellow-bg);border-color:var(--yellow-b)}.status-closed,.status-returned{color:var(--txt2);background:var(--surface2);border-color:var(--border)}
.stock-pagination{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:14px;font-size:12px;color:var(--muted)}
.stock-add-modal,.stock-detail-modal{max-width:720px}.stock-scanner{max-height:260px}
.stock-manual-row{display:flex;gap:8px;margin:12px 0}.stock-manual-row input{flex:1}
.stock-save-results{display:flex;flex-direction:column;gap:5px;margin-top:12px;padding:12px;border-radius:var(--r);background:var(--green-bg);color:var(--green-t)}
.stock-detail-meta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:16px;font-size:12px;color:var(--muted)}
.stock-history{display:flex;flex-direction:column;gap:10px}.stock-event{display:flex;gap:10px;padding:10px;border-left:3px solid var(--accent);background:var(--surface);border-radius:4px}
.stock-event div{display:flex;flex-direction:column;gap:2px}.stock-event span,.stock-event small{font-size:11px;color:var(--muted)}
@media (max-width:720px){
  #page-nayax-stock .stats-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  #page-nayax-stock .toolbar{grid-template-columns:1fr}
  .stock-percentage-legend{justify-content:space-between;gap:8px}.stock-percentage-legend button{gap:4px}
  .faulty-table th:nth-child(3),.faulty-table td:nth-child(3),.faulty-table th:nth-child(4),.faulty-table td:nth-child(4){display:none}.faulty-table th:nth-child(1){width:42%}.faulty-table th:nth-child(2){width:38%}.faulty-table th:nth-child(5){width:20%}.faulty-table th,.faulty-table td{padding:10px 8px}.faulty-table td:first-child strong{font-size:11px}
}

/* ═══════════════════════════════════════════════════════════
   2026 WORKSPACE REDESIGN
   Shared Apple-inspired product system and desktop app shell.
   ═══════════════════════════════════════════════════════════ */

html { background:var(--bg); }
body {
  background:var(--bg);
  color:var(--txt);
  font-size:14px;
  letter-spacing:-.006em;
}
button, input, select, textarea { letter-spacing:inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline:2px solid rgba(0,122,255,.45);
  outline-offset:2px;
}

/* Authentication */
#login-screen {
  background:
    radial-gradient(circle at 50% 18%, rgba(255,255,255,.96), rgba(255,255,255,0) 38%),
    var(--bg);
}
.login-box {
  max-width:400px;
  padding:38px;
  border-color:rgba(29,29,31,.07);
  border-radius:22px;
  box-shadow:0 24px 80px rgba(0,0,0,.08), 0 2px 10px rgba(0,0,0,.025);
}
.login-brand { margin-bottom:30px; }
.login-logo { width:44px; height:44px; border-radius:12px; }
.login-brand h1 { font-size:20px; font-weight:650; letter-spacing:-.025em; }
.login-brand p { margin-top:2px; color:var(--muted); }

/* Application shell */
#app {
  min-height:100vh;
  grid-template-columns:var(--sidebar-w) minmax(0,1fr);
  grid-template-rows:var(--topbar-h) minmax(calc(100vh - var(--topbar-h)),auto);
  background:var(--bg);
}
.topbar {
  grid-column:2;
  grid-row:1;
  height:var(--topbar-h);
  padding:0 26px;
  background:color-mix(in srgb,var(--surface) 94%,transparent);
  border-bottom:1px solid var(--border);
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  z-index:45;
}
.topbar-context { display:flex; align-items:center; gap:10px; min-width:0; }
.topbar-page-title { font-size:14px; font-weight:600; color:var(--txt); }
.mobile-nav-toggle {
  display:none;
  width:36px;
  height:36px;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:9px;
  background:transparent;
  color:var(--txt2);
  cursor:pointer;
}
.mobile-nav-toggle i { font-size:20px; }
.topbar-right { gap:10px; }
.user-chip { gap:8px; color:var(--txt); font-weight:500; }
.role-pill {
  padding:3px 7px;
  background:rgba(29,29,31,.055);
  color:var(--muted);
  font-size:9px;
  letter-spacing:.06em;
}
.notification-bell {
  width:36px;
  height:36px;
  border-color:transparent;
  border-radius:10px;
  background:transparent;
}
.notification-bell:hover, .notification-bell[aria-expanded="true"] {
  color:var(--txt);
  border-color:var(--border);
  background:var(--surface);
}
.notification-panel { top:45px; border-radius:18px; box-shadow:var(--shadow-md); }
.theme-shell { position:relative; }
.theme-toggle {
  width:36px;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid transparent;
  border-radius:10px;
  background:transparent;
  color:var(--txt2);
  cursor:pointer;
  transition:background .16s ease,border-color .16s ease,color .16s ease;
}
.theme-toggle:hover, .theme-toggle[aria-expanded="true"] { border-color:var(--border); background:var(--surface); color:var(--txt); }
.theme-toggle i { font-size:18px; }
.theme-menu {
  display:none;
  position:absolute;
  top:45px;
  right:0;
  width:176px;
  padding:7px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  box-shadow:var(--shadow-md);
  z-index:101;
}
.theme-menu.open { display:block; animation:notification-panel-in .16s ease-out; }
.theme-menu > span { display:block; padding:5px 8px 7px; color:var(--muted); font-size:10px; font-weight:650; letter-spacing:.06em; text-transform:uppercase; }
.theme-menu button {
  width:100%;
  min-height:34px;
  padding:0 8px;
  display:grid;
  grid-template-columns:20px 1fr 16px;
  align-items:center;
  gap:7px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:var(--txt2);
  font-size:12px;
  text-align:left;
  cursor:pointer;
}
.theme-menu button:hover { background:var(--surface3); color:var(--txt); }
.theme-menu button > i:last-child { visibility:hidden; color:var(--accent); }
.theme-menu button.active { color:var(--txt); font-weight:600; }
.theme-menu button.active > i:last-child { visibility:visible; }

/* Sidebar */
.tabs-nav {
  grid-column:1;
  grid-row:1 / 3;
  position:sticky;
  top:0;
  width:var(--sidebar-w);
  height:100vh;
  padding:20px 12px 14px;
  flex-direction:column;
  align-items:stretch;
  gap:3px;
  overflow-y:auto;
  overflow-x:hidden;
  background:#171f2d;
  border:0;
  border-right:1px solid var(--border);
  z-index:50;
}
.sidebar-brand {
  display:flex;
  align-items:center;
  gap:10px;
  min-height:42px;
  margin:0 7px 22px;
}
.sidebar-logo {
  width:34px;
  height:34px;
  flex:0 0 34px;
  border-radius:9px;
  overflow:hidden;
  box-shadow:0 1px 2px rgba(0,0,0,.06);
}
.sidebar-logo img { display:block; width:100%; height:100%; object-fit:contain; }
.sidebar-brand strong, .sidebar-brand span { display:block; line-height:1.15; }
.sidebar-brand strong { color:#fff; font-size:14px; font-weight:680; letter-spacing:-.02em; }
.sidebar-brand span { margin-top:2px; color:#8f9aaa; font-size:10px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; }
.sidebar-label {
  display:block;
  margin:11px 10px 5px;
  color:#6f7a8a;
  font-size:10px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.tab-btn {
  width:100%;
  height:38px;
  padding:0 10px;
  flex:0 0 auto;
  gap:10px;
  border:0;
  border-radius:9px;
  background:transparent;
  color:#b9c0ca;
  font-size:12px;
  font-weight:500;
  text-align:left;
  transition:background .16s ease,color .16s ease;
}
.tab-btn i { width:17px; font-size:17px; color:#8790a0; text-align:center; }
.tab-btn:hover { background:#202a3a; color:#fff; }
.tab-btn.active {
  color:#fff;
  background:#253248;
  border:0;
  font-weight:600;
}
.tab-btn.active i { color:var(--brand); }
.sidebar-spacer { flex:1 1 auto; min-height:28px; }
.sidebar-foot {
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:4px;
  margin:14px 10px 0;
  color:#6f7a8a;
  font-size:9px;
}
.sidebar-foot strong { color:#b9c0ca; font-size:10px; font-weight:600; }
.sidebar-foot small { flex-basis:100%; margin-top:4px; color:#687486; font-size:8px; }
.sidebar-scrim { display:none; }

.connectivity-banner {
  position:fixed;
  top:72px;
  right:24px;
  width:min(420px,calc(100vw - 48px));
  margin:0;
  z-index:80;
  border-radius:12px;
  box-shadow:0 12px 35px rgba(0,0,0,.1);
}

/* Page hierarchy */
.page {
  grid-column:2;
  grid-row:2;
  width:100%;
  max-width:1240px;
  margin:0 auto;
  padding:26px clamp(24px,3vw,44px) 64px;
}
.page.active { display:block; animation:page-in .18s ease-out; }
@keyframes page-in { from { opacity:0; transform:translateY(3px); } to { opacity:1; transform:none; } }
.page-header {
  min-height:46px;
  margin-bottom:26px;
  align-items:flex-end;
  gap:18px;
}
.page-header > div:first-child { min-width:0; }
.page-title {
  font-size:29px;
  line-height:1.12;
  font-weight:650;
  letter-spacing:-.035em;
}
.page-eyebrow, .home-eyebrow {
  margin-bottom:6px;
  color:var(--muted);
  font-size:10px;
  font-weight:650;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.field-hint, .dispatch-subtitle {
  margin-top:6px;
  color:var(--muted);
  font-size:13px;
  line-height:1.45;
}
#page-register, #page-inventory { max-width:940px; }
#page-dispatch { max-width:1380px; }

/* Controls */
.btn {
  min-height:40px;
  padding:0 15px;
  border-radius:10px;
  font-size:13px;
  font-weight:580;
  line-height:1;
  box-shadow:none;
  transition:background .16s ease,border-color .16s ease,color .16s ease,transform .16s ease,box-shadow .16s ease;
}
.btn:hover:not(:disabled) { transform:translateY(-1px); }
.btn:active:not(:disabled) { transform:translateY(0); }
.btn-primary { border-color:var(--accent); background:var(--accent); box-shadow:0 1px 1px rgba(0,84,180,.12); }
.btn-primary:hover { border-color:var(--accent-h); background:var(--accent-h); box-shadow:0 4px 12px rgba(0,122,255,.18); }
.btn-secondary { border-color:var(--border-s); background:rgba(255,255,255,.72); color:var(--txt); }
.btn-secondary:hover { border-color:rgba(29,29,31,.2); background:var(--surface); }
.btn-danger { border-color:transparent; }
.btn-sm { min-height:34px; padding:0 11px; border-radius:9px; font-size:12px; }
.btn-icon { min-width:32px; min-height:32px; border-radius:8px; align-items:center; justify-content:center; }

.fg { margin-bottom:17px; }
label {
  margin-bottom:7px;
  color:var(--txt2);
  font-size:12px;
  font-weight:560;
  letter-spacing:0;
  text-transform:none;
}
input, select, textarea {
  min-height:42px;
  padding:9px 12px;
  border-color:var(--border-s);
  border-radius:10px;
  background:var(--surface);
  color:var(--txt);
  font-size:14px;
  box-shadow:0 1px 1px rgba(0,0,0,.018);
}
input::placeholder, textarea::placeholder { color:#a5a5aa; }
input:hover, select:hover, textarea:hover { border-color:rgba(29,29,31,.23); }
input:focus, select:focus, textarea:focus {
  border-color:rgba(0,122,255,.62);
  box-shadow:0 0 0 3px rgba(0,122,255,.12);
}
.search-box i { left:12px; color:#8c8c91; }
.search-box input { padding-left:36px; background:rgba(255,255,255,.82); }
.toolbar {
  gap:10px;
  margin-bottom:16px;
  padding:0;
}
.filter-row, .stock-subtabs {
  gap:3px;
  width:max-content;
  max-width:100%;
  margin-bottom:18px;
  padding:3px;
  border-radius:10px;
  background:rgba(29,29,31,.055);
}
.f-pill, .mode-pill {
  min-height:32px;
  padding:0 12px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:var(--txt2);
  font-size:12px;
  font-weight:520;
  box-shadow:none;
}
.f-pill:hover, .mode-pill:hover { background:rgba(255,255,255,.6); }
.f-pill.active, .mode-pill.active {
  border:0;
  background:var(--surface);
  color:var(--txt);
  box-shadow:0 1px 3px rgba(0,0,0,.08);
}
.mode-row { width:max-content; padding:3px; gap:3px; border-radius:10px; background:rgba(29,29,31,.055); }

/* Surfaces and list primitives */
.card {
  padding:20px;
  border-color:var(--border);
  border-radius:16px;
  box-shadow:var(--shadow);
}
.card-title {
  margin-bottom:16px;
  color:var(--txt);
  font-size:15px;
  font-weight:620;
  letter-spacing:-.015em;
  text-transform:none;
}
.rec-list, .list-gap {
  gap:0;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:16px;
  background:var(--surface);
  box-shadow:var(--shadow);
}
.rec-card, .user-card {
  margin:0;
  padding:17px 18px;
  border:0;
  border-bottom:1px solid var(--border);
  border-radius:0;
  box-shadow:none;
  transition:background .15s ease;
}
.rec-card:last-child, .user-card:last-child { border-bottom:0; }
.rec-card:hover, .user-card:hover { border-color:var(--border); background:#fbfbfc; }
.rec-sn { font-size:13px; letter-spacing:0; }
.rec-model, .rec-meta { color:var(--muted); }
.rec-foot { margin-top:12px; padding-top:10px; border-color:var(--border); }
.cust-avatar, .user-av { background:var(--surface3); color:var(--txt2); }
.badge, .stock-status {
  min-height:22px;
  padding:3px 8px;
  border:1px solid transparent;
  border-radius:999px;
  font-size:11px;
  font-weight:560;
  letter-spacing:0;
}
.empty {
  min-height:220px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:34px;
  color:var(--muted);
}
.empty i { width:36px; height:36px; margin-bottom:12px; display:flex; align-items:center; justify-content:center; border-radius:10px; background:var(--surface3); font-size:18px; opacity:1; }
.empty p { color:var(--txt2); font-size:13px; font-weight:550; }

/* Dashboard */
.home-hero { padding:2px 0 30px; align-items:flex-end; }
.home-hero h1 { font-size:31px; font-weight:650; letter-spacing:-.04em; }
.home-date { margin-top:7px; color:var(--muted); }
.home-widget-grid { gap:18px; }
.home-metrics {
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:16px;
  background:var(--surface);
}
.home-metric {
  min-height:128px;
  padding:20px;
  align-items:flex-start;
  border:0;
  border-right:1px solid var(--border);
  border-radius:0;
  box-shadow:none;
}
.home-metric:last-child { border-right:0; }
.home-metric:hover { transform:none; border-color:var(--border); background:#fbfbfc; box-shadow:none; }
.home-metric-icon { width:30px; height:30px; border-radius:8px; background:var(--surface3); color:var(--txt2); }
.home-metric-icon i { font-size:16px; }
.home-metric-copy strong { font-size:28px; font-weight:650; letter-spacing:-.035em; }
.home-metric-copy > span { margin-top:8px; font-size:13px; }
.home-metric-copy small { margin-top:3px; font-size:11px; }
.home-metric-arrow { margin-top:7px; }
.home-panel-header h2 { font-size:17px; font-weight:620; letter-spacing:-.02em; }
.home-panel-header p { color:var(--muted); font-size:12px; }
.home-action { border-radius:10px; background:var(--surface2); }
.home-action:hover { background:var(--surface3); }

/* Statistics */
.stats-row, #page-nayax-stock .stats-row {
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;
  overflow:hidden;
  margin-bottom:20px;
  border:1px solid var(--border);
  border-radius:16px;
  background:var(--surface);
}
.stat-box {
  min-height:100px;
  padding:18px;
  border:0;
  border-right:1px solid var(--border);
  border-radius:0;
  background:transparent;
  text-align:left;
  box-shadow:none;
}
.stat-box:last-child { border-right:0; }
.stat-n { color:var(--txt); font-size:27px; font-weight:650; letter-spacing:-.035em; }
.stat-l { margin-top:9px; color:var(--muted); font-size:11px; font-weight:550; letter-spacing:.035em; }
.stock-stat-card:hover { transform:none; border-color:var(--border); background:#fbfbfc; }
.stock-percentage-dashboard { padding:17px 18px; border-radius:16px; }
.stock-percentage-bar { height:6px; }

/* Tables */
.stock-table-wrap, .log-wrap {
  border-color:var(--border);
  border-radius:16px;
  box-shadow:var(--shadow);
}
.stock-table, .log-table { border-collapse:separate; border-spacing:0; }
.stock-table th, .log-table th {
  position:sticky;
  top:0;
  z-index:2;
  padding:11px 16px;
  border:0;
  border-bottom:1px solid var(--border);
  background:#fafafa;
  color:var(--muted);
  font-size:10px;
  font-weight:650;
  letter-spacing:.055em;
}
.stock-table td, .log-table td {
  padding:14px 16px;
  border:0;
  border-bottom:1px solid var(--border);
  color:var(--txt2);
  font-size:13px;
}
.stock-table tbody tr:last-child td, .log-table tbody tr:last-child td { border-bottom:0; }
.stock-table tbody tr:hover, .stock-table tbody tr:focus, .log-table tr:hover td { background:#fafafa; }
.stock-table td strong, .log-table td strong { color:var(--txt); }

/* Modals and reader drawers */
.modal-bg {
  padding:24px;
  background:rgba(20,20,22,.34);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
}
.modal-bg.open { animation:backdrop-in .18s ease-out; }
@keyframes backdrop-in { from { opacity:0; } to { opacity:1; } }
.modal {
  max-width:500px;
  padding:24px;
  border:1px solid rgba(255,255,255,.62);
  border-radius:20px;
  box-shadow:var(--shadow-md);
  animation:modal-in .2s ease-out;
}
@keyframes modal-in { from { opacity:0; transform:translateY(8px) scale(.985); } to { opacity:1; transform:none; } }
.modal-hdr { margin-bottom:22px; align-items:flex-start; }
.modal-hdr h2 { font-size:19px; font-weight:640; letter-spacing:-.025em; }
.modal-subtitle, .modal-hdr p { margin-top:4px; color:var(--muted); font-size:12px; }
.modal-ftr { justify-content:flex-end; margin-top:24px; }
.modal-ftr .btn { flex:0 0 auto; min-width:96px; }
#modal-stock-detail, #modal-faulty-detail, #modal-stock-fault { justify-content:flex-end; padding:0; }
#modal-stock-detail .modal, #modal-faulty-detail .modal, #modal-stock-fault .modal {
  width:min(520px,100vw);
  max-width:520px;
  height:100vh;
  max-height:100vh;
  padding:28px;
  border-radius:20px 0 0 20px;
  animation:drawer-in .22s ease-out;
}
@keyframes drawer-in { from { opacity:.7; transform:translateX(24px); } to { opacity:1; transform:none; } }
.toast { bottom:24px; padding:11px 16px; border-radius:11px; background:#2c2c2e; box-shadow:0 8px 24px rgba(0,0,0,.18); }

/* Operational flows */
.dispatch-flow-guide {
  padding:15px 18px;
  border-radius:16px;
  box-shadow:none;
}
.dispatch-flow-guide > div > b { background:var(--surface3); color:var(--txt2); }
.dispatch-queue-card { border-radius:16px; }
.dispatch-layout { gap:18px; }
.dispatch-list-panel { padding:16px; }
.dispatch-list-item { box-shadow:none; }
.dispatch-list-item.active { border-color:var(--accent-b); background:var(--accent-lt); box-shadow:inset 2px 0 0 var(--accent); }
.dispatch-detail-head, .dispatch-role-strip > div { box-shadow:none; }
.scanner-shell { border-radius:16px; border-color:var(--border); box-shadow:none; }
.batch-box, .picker-menu, .permission-group { border-radius:12px; box-shadow:none; }
.cl-row { border-radius:10px; }

/* Dark appearance keeps the same quiet hierarchy with elevated charcoal surfaces. */
html[data-theme="dark"] #login-screen {
  background:radial-gradient(circle at 50% 18%, rgba(55,55,58,.42), rgba(17,17,19,0) 40%),var(--bg);
}
html[data-theme="dark"] .tabs-nav { background:#171719; }
html[data-theme="dark"] .topbar { background:rgba(17,17,19,.88); }
html[data-theme="dark"] .sidebar-label { color:#707075; }
html[data-theme="dark"] .sidebar-brand span,
html[data-theme="dark"] .sidebar-foot,
html[data-theme="dark"] .sidebar-foot strong { color:#77777c; }
html[data-theme="dark"] .tab-btn { color:#a8a8ad; }
html[data-theme="dark"] .tab-btn i { color:#8e8e93; }
html[data-theme="dark"] .tab-btn:hover { background:rgba(255,255,255,.045); color:var(--txt); }
html[data-theme="dark"] .tab-btn.active { background:rgba(255,255,255,.085); color:var(--txt); }
html[data-theme="dark"] .role-pill { background:rgba(255,255,255,.07); }
html[data-theme="dark"] .btn-secondary,
html[data-theme="dark"] .search-box input { background:rgba(28,28,30,.76); }
html[data-theme="dark"] .btn-secondary:hover { background:var(--surface2); border-color:rgba(255,255,255,.22); }
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea { color-scheme:dark; box-shadow:none; }
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color:#69696e; }
html[data-theme="dark"] .rec-card:hover,
html[data-theme="dark"] .user-card:hover,
html[data-theme="dark"] .home-metric:hover,
html[data-theme="dark"] .stock-stat-card:hover,
html[data-theme="dark"] .stock-table tbody tr:hover,
html[data-theme="dark"] .stock-table tbody tr:focus,
html[data-theme="dark"] .log-table tr:hover td { background:#222224; }
html[data-theme="dark"] .stock-table th,
html[data-theme="dark"] .log-table th { background:#202022; }
html[data-theme="dark"] .modal { border-color:rgba(255,255,255,.09); }
html[data-theme="dark"] .notification-bell:hover,
html[data-theme="dark"] .notification-bell[aria-expanded="true"],
html[data-theme="dark"] .theme-toggle:hover,
html[data-theme="dark"] .theme-toggle[aria-expanded="true"] { background:var(--surface2); }
html[data-theme="dark"] .home-action { background:var(--surface2); }
html[data-theme="dark"] .home-action:hover { background:var(--surface3); }
html[data-theme="dark"] .label-preview { border-color:#d1d1d6; }

@media (max-width:1000px) {
  :root { --sidebar-w:216px; }
  .page { padding-right:28px; padding-left:28px; }
  .home-widget-grid { grid-template-columns:1fr; }
  .home-widget-wide { grid-column:1; }
}

@media (max-width:880px) {
  #app { grid-template-columns:minmax(0,1fr); }
  .topbar { grid-column:1; padding:0 18px; }
  .mobile-nav-toggle { display:inline-flex; }
  .tabs-nav {
    position:fixed;
    left:0;
    top:0;
    width:min(286px,86vw);
    transform:translateX(-102%);
    box-shadow:18px 0 45px rgba(0,0,0,.1);
    transition:transform .2s ease;
  }
  .nav-open .tabs-nav { transform:translateX(0); }
  .sidebar-scrim {
    display:block;
    position:fixed;
    inset:0;
    z-index:49;
    border:0;
    background:rgba(20,20,22,.25);
    opacity:0;
    pointer-events:none;
    transition:opacity .2s ease;
  }
  .nav-open .sidebar-scrim { opacity:1; pointer-events:auto; }
  .page { grid-column:1; }
}

@media (max-width:720px) {
  :root { --topbar-h:56px; }
  .topbar { padding:0 12px; }
  .topbar-page-title { display:none; }
  .user-chip #hdr-role, .logout-btn span { display:none; }
  .logout-btn { width:36px; min-width:36px; padding:0; }
  .page { padding:24px 16px 48px; }
  .page-header { margin-bottom:22px; align-items:flex-start; }
  .page-title { font-size:25px; }
  .page-header > .btn, .page-header > .dispatch-header-actions { width:100%; }
  .page-header > .btn { justify-content:center; }
  .home-hero { align-items:flex-start; }
  .home-hero h1 { font-size:27px; }
  .home-hero-actions { flex-wrap:wrap; justify-content:flex-end; }
  .home-metrics, .stats-row, #page-nayax-stock .stats-row { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .home-metric, .stat-box { border-right:1px solid var(--border); border-bottom:1px solid var(--border); }
  .home-metric:nth-child(2n), .stat-box:nth-child(2n) { border-right:0; }
  .home-metric:nth-last-child(-n+2), .stat-box:nth-last-child(-n+2) { border-bottom:0; }
  .home-metric { min-height:112px; padding:16px; }
  .home-metric-icon { display:flex; }
  #page-nayax-stock .toolbar { grid-template-columns:1fr; }
  .modal-bg { padding:12px; }
  .modal { padding:20px; border-radius:18px; }
  .modal-ftr { flex-direction:row; }
  .modal-ftr .btn { flex:1; min-width:0; }
  #modal-stock-detail .modal, #modal-faulty-detail .modal, #modal-stock-fault .modal { width:100%; padding:22px 18px; border-radius:18px 0 0 18px; }
  .dispatch-flow-guide { overflow-x:auto; }
}

@media (max-width:430px) {
  .page { padding-right:12px; padding-left:12px; }
  .page-title { font-size:23px; }
  .home-hero { flex-direction:column; }
  .home-hero-actions { width:100%; justify-content:flex-start; }
  .home-hero-actions .btn { flex:1; }
  .home-metrics { grid-template-columns:1fr; }
  .home-metric { border-right:0; border-bottom:1px solid var(--border); }
  .home-metric:nth-last-child(-n+2) { border-bottom:1px solid var(--border); }
  .home-metric:last-child { border-bottom:0; }
  .user-chip { display:none; }
  .stock-percentage-legend { align-items:flex-start; flex-direction:column; }
}

@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ═══════════════════════════════════════════════════════════
   NAYAX STOCK — operational stock workspace
   ═══════════════════════════════════════════════════════════ */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
#page-nayax-stock { max-width:1440px; }
#page-nayax-stock > .page-header { margin-bottom:14px; }
#page-nayax-stock > .page-header .field-hint { font-size:11px; }
#page-nayax-stock .stock-subtabs {
  width:auto;
  margin:0 0 12px;
  padding:0;
  gap:8px;
  border-radius:0;
  background:transparent;
}
#page-nayax-stock .stock-subtabs .f-pill {
  position:relative;
  min-height:34px;
  padding:0 12px;
  border-radius:9px 9px 0 0;
  box-shadow:none;
}
#page-nayax-stock .stock-subtabs .f-pill::after {
  content:"";
  position:absolute;
  right:10px;
  bottom:0;
  left:10px;
  height:2px;
  border-radius:2px;
  background:transparent;
}
#page-nayax-stock .stock-subtabs .f-pill.active { background:var(--surface2); color:var(--txt); }
#page-nayax-stock .stock-subtabs .f-pill.active::after { background:var(--accent); }

#page-nayax-stock .stats-row {
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:0;
  overflow:visible;
  margin-bottom:10px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface);
}
#page-nayax-stock .stock-stat-card {
  min-height:58px;
  padding:10px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border:0;
  border-right:1px solid var(--border);
  border-radius:0;
  background:transparent;
}
#page-nayax-stock .stock-stat-card:last-child { border-right:0; }
#page-nayax-stock .stock-stat-card:hover { background:var(--surface2); }
.stock-stat-copy { display:flex; min-width:0; flex-direction:column; align-items:flex-start; }
.stock-stat-copy strong { color:var(--txt); font-size:20px; line-height:1; font-weight:700; letter-spacing:-.04em; }
.stock-stat-copy small { overflow:hidden; max-width:100%; margin-top:5px; color:var(--muted); font-size:8px; font-weight:700; letter-spacing:.055em; text-align:left; text-overflow:ellipsis; text-transform:uppercase; white-space:nowrap; }
.stock-stat-icon { width:28px; height:28px; flex:0 0 28px; display:flex; align-items:center; justify-content:center; border-radius:8px; font-size:14px; }
.stock-stat-total .stock-stat-icon { background:var(--accent-lt); color:var(--accent-t); }
.stock-stat-ready .stock-stat-icon { background:var(--green-bg); color:var(--green); }
.stock-stat-setup .stock-stat-icon { background:var(--blue-bg); color:var(--blue); }
.stock-stat-faulty .stock-stat-icon { background:var(--red-bg); color:var(--red); }
.stock-stat-finalized .stock-stat-icon { background:rgba(20,184,166,.12); color:#0f9f91; }

#page-nayax-stock .stock-percentage-dashboard {
  display:none;
}
#page-nayax-stock .stock-percentage-head { margin-bottom:14px; }
#page-nayax-stock .stock-percentage-head strong { font-size:13px; }
#page-nayax-stock .stock-percentage-head span { margin-top:2px; font-size:11px; }
#page-nayax-stock .stock-percentage-bar { height:10px; gap:2px; background:var(--surface3); }
#page-nayax-stock .stock-percentage-bar span:first-child { border-radius:999px 3px 3px 999px; }
#page-nayax-stock .stock-percentage-bar span:last-child { border-radius:3px 999px 999px 3px; }
.pct-new { background:#73737a; }
#page-nayax-stock .stock-percentage-legend { gap:24px; flex-wrap:wrap; margin-top:15px; }
#page-nayax-stock .stock-percentage-legend button { gap:7px; color:var(--txt2); }
#page-nayax-stock .stock-percentage-legend button strong { margin-left:-2px; font-weight:600; }
.legend-new { background:#73737a; }

.stock-data-panel {
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface);
  box-shadow:var(--shadow);
}
#page-nayax-stock .stock-data-panel .toolbar {
  grid-template-columns:minmax(260px,1fr) 170px 200px;
  margin:0;
  padding:10px 12px;
  border-bottom:1px solid var(--border);
  background:var(--surface);
}
#page-nayax-stock .stock-data-panel .toolbar .search-box { max-width:440px; }
#page-nayax-stock .stock-data-panel .toolbar input,
#page-nayax-stock .stock-data-panel .toolbar select { min-height:36px; background:var(--surface2); }
#page-nayax-stock .stock-data-panel .stock-table-wrap { min-height:360px; max-height:calc(100vh - 342px); overflow:auto; border:0; border-radius:0; box-shadow:none; }
#page-nayax-stock .stock-table { min-width:1040px; }
#page-nayax-stock .stock-table th { padding:10px 14px; background:var(--surface2); font-size:9px; }
#page-nayax-stock .stock-table td { height:43px; padding:8px 14px; color:var(--txt2); font-size:11px; white-space:nowrap; }
#page-nayax-stock .stock-table td:first-child strong { color:var(--txt); font-size:12px; }
#page-nayax-stock .stock-table .stock-serial { color:var(--txt); letter-spacing:-.015em; }
#page-nayax-stock .stock-table th:last-child,
#page-nayax-stock .stock-table td:last-child { width:52px; text-align:center; }
#page-nayax-stock .stock-pagination { min-height:54px; margin:0; border-top:1px solid var(--border); }

.stock-status.status-new { border-color:var(--border-s); background:var(--surface3); color:var(--txt2); }
.stock-status.status-ready { border-color:var(--green-b); background:var(--green-bg); color:var(--green-t); }
.stock-status.status-setup { border-color:var(--blue-b); background:var(--blue-bg); color:var(--blue-t); }
.stock-status.status-faulty { border-color:var(--red-b); background:var(--red-bg); color:var(--red-t); }

.stock-activate-modal { position:relative; max-width:400px; padding:24px; text-align:center; }
.stock-activate-close { position:absolute; top:13px; right:13px; }
.stock-activate-icon { width:38px; height:38px; margin:0 auto 13px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:var(--surface3); color:var(--txt2); font-size:20px; }
.stock-activate-modal h2 { font-size:17px; font-weight:640; letter-spacing:-.02em; }
.stock-activate-modal > p { margin:9px auto 0; color:var(--txt2); font-size:12px; line-height:1.5; }
.stock-activate-reader { margin:16px 0 2px; padding:10px 12px; display:flex; align-items:center; justify-content:space-between; gap:10px; border:1px solid var(--border); border-radius:10px; background:var(--surface2); text-align:left; }
.stock-activate-reader > span { color:var(--muted); font-size:11px; }
.stock-activate-reader button { min-width:0; display:flex; align-items:center; gap:7px; border:0; background:transparent; color:var(--txt); cursor:pointer; }
.stock-activate-reader strong { overflow:hidden; font-family:var(--mono); font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.stock-activate-reader i { color:var(--muted); }
.stock-activate-modal .modal-ftr { justify-content:center; }

html[data-theme="dark"] #page-nayax-stock .stats-row,
html[data-theme="dark"] .stock-data-panel { background:var(--surface); }
html[data-theme="dark"] #page-nayax-stock .stock-data-panel .toolbar { background:var(--surface); }
html[data-theme="dark"] #page-nayax-stock .stock-data-panel .toolbar input,
html[data-theme="dark"] #page-nayax-stock .stock-data-panel .toolbar select,
html[data-theme="dark"] #page-nayax-stock .stock-table th { background:var(--surface2); }
html[data-theme="dark"] #page-nayax-stock .stock-table tbody tr:hover { background:var(--surface2); }

@media (max-width:900px) {
  #page-nayax-stock .stats-row { grid-template-columns:repeat(3,minmax(0,1fr)); }
  #page-nayax-stock .stock-stat-card:nth-child(3) { border-right:0; }
  #page-nayax-stock .stock-stat-card:nth-child(n+4) { border-top:1px solid var(--border); }
  #page-nayax-stock .stock-data-panel .toolbar { grid-template-columns:1fr 1fr; }
  #page-nayax-stock .stock-data-panel .toolbar .search-box { grid-column:1/-1; max-width:none; }
}
@media (max-width:720px) {
  #page-nayax-stock .stats-row { gap:0; }
  #page-nayax-stock .stock-stat-card { min-height:58px; padding:10px; }
  .stock-stat-icon { width:28px; height:28px; flex-basis:28px; font-size:14px; }
  .stock-stat-copy strong { font-size:20px; }
  .stock-stat-copy small { margin-top:5px; font-size:8px; }
  #page-nayax-stock .stock-percentage-legend { gap:12px; }
}
@media (max-width:480px) {
  #page-nayax-stock .stats-row { grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; }
  #page-nayax-stock .stock-stat-card:nth-child(3) { border-right:1px solid var(--border); }
  #page-nayax-stock .stock-stat-card:nth-child(even) { border-right:0; }
  #page-nayax-stock .stock-stat-card:nth-child(n+3) { border-top:1px solid var(--border); }
  #page-nayax-stock .stock-data-panel .toolbar { grid-template-columns:1fr; }
  #page-nayax-stock .stock-data-panel .toolbar .search-box { grid-column:auto; }
  #page-nayax-stock .stock-percentage-legend { display:grid; grid-template-columns:1fr 1fr; }
  .stock-activate-modal { padding:22px 18px; }
}

/* Prepare Machines controls share explicit component sizes so the later global
   form minimums cannot stretch compact controls independently. */
#page-prepare-machines { --prepare-control-height:40px; max-width:1440px; }
#page-prepare-machines > .page-header { margin-bottom:16px; }
#page-prepare-machines > .page-header .field-hint { max-width:760px; font-size:11px; }
.prepare-start-grid { grid-template-columns:minmax(420px,.9fr) minmax(0,1.1fr); gap:14px; }
.prepare-create-card,.prepare-active-card { min-height:0; padding:16px; border-radius:10px; }
.prepare-create-card { gap:12px; }
.prepare-create-card .home-panel-header,.prepare-active-card .home-panel-header { margin-bottom:2px; }
.prepare-create-card .home-panel-header h2,.prepare-active-card .home-panel-header h2 { font-size:15px; }
.prepare-create-card .home-panel-header p,.prepare-active-card .home-panel-header p { font-size:10px; }
.prepare-active-card { max-height:calc(100vh - 180px); overflow:auto; }
.prepare-create-card { container-type:inline-size; }
.prepare-create-card .form-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:end;
  gap:10px;
}
.prepare-create-card .form-grid > .span-2 { grid-column:1/-1; }
.prepare-create-card input:not([type="hidden"]),
.prepare-create-card select {
  height:var(--prepare-control-height);
  min-height:var(--prepare-control-height);
}
.prepare-purpose-options {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}
.prepare-purpose-option {
  min-width:0;
  min-height:54px;
  padding:8px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface2);
  color:var(--txt2);
  font:inherit;
  font-size:11px;
  font-weight:650;
  line-height:1.2;
  text-align:center;
  cursor:pointer;
}
.prepare-purpose-option i { font-size:16px; color:var(--muted); }
.prepare-purpose-option:hover { border-color:var(--accent-b); color:var(--txt); }
.prepare-purpose-option.active { border-color:var(--accent-b); background:var(--accent-lt); color:var(--accent-t); }
.prepare-purpose-option.active i { color:var(--accent); }
.prepare-order-row {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:stretch;
  gap:8px;
}
.prepare-order-row > select,
.prepare-order-row > .btn {
  width:auto;
  min-width:0;
  height:var(--prepare-control-height);
  min-height:var(--prepare-control-height);
  margin:0;
}
.prepare-order-row > .btn { align-self:stretch; white-space:nowrap; }
.prepare-customer-row {
  min-width:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:stretch;
  gap:6px;
}
.prepare-customer-row > select,
.prepare-customer-row > .btn {
  width:auto;
  min-width:0;
  height:var(--prepare-control-height);
  min-height:var(--prepare-control-height);
  margin:0;
}
.prepare-customer-row > .btn { padding-inline:9px; align-self:stretch; white-space:nowrap; }
.prepare-inline-so {
  margin-top:10px;
  padding:14px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface2);
}
.prepare-inline-so-head {
  margin-bottom:12px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.prepare-inline-so-head > div { display:flex; min-width:0; flex-direction:column; }
.prepare-inline-so-head strong { font-size:13px; }
.prepare-inline-so-head span { color:var(--muted); font-size:10px; }
.prepare-inline-so .form-grid { gap:10px; }
.prepare-inline-so .fg { margin:0; }
.prepare-inline-so input,
.prepare-inline-so select { height:var(--prepare-control-height); min-height:var(--prepare-control-height); }
.prepare-inline-so-actions { margin-top:12px; display:flex; justify-content:flex-end; gap:8px; }
.prepare-inline-so-actions > .btn { align-self:stretch; min-height:36px; }
.prepare-inline-customer {
  margin-top:12px;
  padding:12px;
  border:1px solid var(--accent-b);
  border-radius:10px;
  background:var(--surface);
}
.prepare-inline-customer-head {
  margin-bottom:10px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.prepare-inline-customer-head > div { display:flex; min-width:0; flex-direction:column; }
.prepare-inline-customer-head strong { font-size:12px; }
.prepare-inline-customer-head span { color:var(--muted); font-size:10px; }
.prepare-inline-customer-actions { margin-top:10px; display:flex; justify-content:flex-end; gap:8px; }
.prepare-inline-customer-actions > .btn { align-self:stretch; min-height:36px; }
.prepare-assignment-panel { container-type:inline-size; }
.prepare-bulk-tools {
  grid-template-columns:minmax(150px,.7fr) repeat(2,minmax(250px,1fr));
  align-items:end;
  gap:10px;
  position:sticky;
  top:calc(var(--topbar-h) + 10px);
  z-index:4;
  margin-bottom:8px;
  padding:12px;
  border-radius:9px;
  box-shadow:0 5px 18px rgba(15,19,26,.06);
}
.prepare-bulk-tools > .prepare-bulk-copy { align-self:center; }
.prepare-bulk-tools > .prepare-bulk-control {
  min-width:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:stretch;
  gap:8px;
}
.prepare-bulk-control > input,
.prepare-bulk-control > select,
.prepare-bulk-control > .btn {
  width:auto;
  min-width:0;
  height:var(--prepare-control-height);
  min-height:var(--prepare-control-height);
  margin:0;
}
.prepare-reader-fields .fg { gap:5px; margin:0; }
.prepare-reader-fields label { margin:0; line-height:1.2; }
.prepare-reader-fields select,
.prepare-reader-fields input {
  height:var(--prepare-control-height);
  min-height:var(--prepare-control-height);
}
.prepare-row-action > .btn,
.prepare-row-action > .btn-icon {
  height:var(--prepare-control-height);
  min-height:var(--prepare-control-height);
}
.prepare-row-action > .btn-icon { min-width:var(--prepare-control-height); }
.prepare-copy-actions { gap:4px; }
.prepare-copy-actions .btn {
  height:30px;
  min-height:30px;
  padding:0 8px;
}
.prepare-scan-panel .stock-manual-row > input,
.prepare-scan-panel .stock-manual-row > .btn {
  height:var(--prepare-control-height);
  min-height:var(--prepare-control-height);
}

.prepare-station-grid { grid-template-columns:minmax(250px,300px) minmax(0,1fr); gap:12px; }
.prepare-scan-panel { padding:16px; border-radius:10px; }
.prepare-scanner { margin-top:10px; max-height:180px; border-radius:8px; }
.prepare-assignment-list { gap:6px; }
.prepare-reader-row { gap:10px; padding:10px 12px; border-radius:8px; }
.prepare-row-number { width:24px; height:24px; flex-basis:24px; border-radius:7px; }
.prepare-progress-track { height:6px; margin:10px 0 14px; }
.prepare-workspace-head h2 { font-size:21px; }

html[data-theme="dark"] .prepare-bulk-tools { box-shadow:0 6px 22px rgba(0,0,0,.22); }

@media (max-width:1100px) {
  .prepare-station-grid { grid-template-columns:1fr; }
  .prepare-scan-panel { position:static; }
  .prepare-bulk-tools { position:static; }
}
@media (max-width:900px) {
  .prepare-start-grid { grid-template-columns:1fr; }
  .prepare-active-card { max-height:none; }
}

#page-nayax-stock .outgoing-toolbar { grid-template-columns:minmax(280px,1fr) minmax(190px,240px) minmax(220px,300px); }
#page-nayax-stock .outgoing-table { min-width:1040px; }
#page-nayax-stock .outgoing-table td:nth-child(4) strong,
#page-nayax-stock .outgoing-table td:nth-child(4) small { display:block; }
#page-nayax-stock .outgoing-table td:nth-child(4) small { margin-top:2px; color:var(--muted); font-size:10px; }
.stock-outgoing-context {
  margin:14px 0;
  padding:12px;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px 16px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface2);
}
.stock-outgoing-context > div { min-width:0; display:flex; flex-direction:column; }
.stock-outgoing-context span { color:var(--muted); font-size:9px; font-weight:650; letter-spacing:.05em; text-transform:uppercase; }
.stock-outgoing-context strong { overflow-wrap:anywhere; color:var(--txt2); font-size:12px; }
.outgoing-table td:nth-child(2) small { display:block; margin-top:4px; color:var(--muted); font-size:10px; }

@container (max-width:900px) {
  .prepare-reader-row { grid-template-columns:minmax(0,1fr) minmax(230px,1fr); }
  .prepare-row-action { justify-content:flex-end; }
}
@container (max-width:780px) {
  .prepare-bulk-tools { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .prepare-bulk-tools > .prepare-bulk-copy { grid-column:1/-1; }
}
@container (max-width:520px) {
  .prepare-bulk-tools { grid-template-columns:1fr; }
  .prepare-bulk-tools > .prepare-bulk-copy { grid-column:auto; }
  .prepare-bulk-tools > .prepare-bulk-control { grid-template-columns:1fr; }
  .prepare-bulk-control > .btn { width:100%; }
  .prepare-reader-row { grid-template-columns:1fr; }
  .prepare-reader-fields { grid-template-columns:minmax(0,1fr) minmax(90px,.45fr); }
  .prepare-row-action { display:grid; grid-template-columns:minmax(0,1fr) var(--prepare-control-height); }
  .prepare-row-action > .btn { width:100%; }
}

@container (max-width:380px) {
  .prepare-purpose-options { grid-template-columns:1fr; }
  .prepare-purpose-option { min-height:44px; flex-direction:row; justify-content:flex-start; padding:9px 11px; }
  .prepare-order-row { grid-template-columns:1fr; }
  .prepare-order-row > .btn { width:100%; justify-content:center; }
  .prepare-customer-row { grid-template-columns:1fr; }
  .prepare-customer-row > .btn { width:100%; justify-content:center; }
  .prepare-create-card .form-grid { grid-template-columns:1fr; }
  .prepare-create-card .form-grid > .span-2 { grid-column:auto; }
  .prepare-inline-so-actions > .btn,
  .prepare-inline-customer-actions > .btn { flex:1; justify-content:center; }
}

@media (max-width:900px) {
  #page-nayax-stock .outgoing-toolbar { grid-template-columns:1fr; }
  #page-nayax-stock .outgoing-toolbar .search-box { grid-column:auto; }
}
@media (max-width:520px) {
  .stock-outgoing-context { grid-template-columns:1fr; }
}

/* ═══════════════════════════════════════════════════════════
   RPLE operational design system — approved Phase 1 shell
   ═══════════════════════════════════════════════════════════ */
html[data-theme="dark"] .tabs-nav { background:#090d13; }
html[data-theme="dark"] .topbar { background:color-mix(in srgb,var(--surface) 94%,transparent); }

#page-home { max-width:1440px; }
#page-home .home-hero { padding:0 0 20px; align-items:center; }
#page-home .home-hero h1 { font-size:26px; line-height:1.2; font-weight:700; letter-spacing:-.03em; }
#page-home .home-date { margin-top:4px; font-size:11px; color:var(--muted); }
#page-home .home-hero-actions { gap:8px; }
#page-home .home-widget-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }

.ops-dashboard { grid-column:1/-1; display:flex; flex-direction:column; gap:22px; }
.ops-kpis { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.ops-kpi {
  min-width:0;
  min-height:82px;
  padding:14px 16px;
  display:grid;
  grid-template-columns:10px 1fr;
  grid-template-rows:auto auto;
  column-gap:10px;
  align-items:center;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface);
  color:var(--txt);
  text-align:left;
  cursor:pointer;
  transition:background .14s ease,border-color .14s ease;
}
.ops-kpi:hover { border-color:var(--border-s); background:var(--surface2); }
.ops-kpi-dot { width:9px; height:9px; grid-row:1; border-radius:50%; background:var(--muted); }
.ops-kpi-dot.is-red { background:var(--red); }
.ops-kpi-dot.is-amber { background:var(--yellow); }
.ops-kpi-dot.is-blue { background:var(--accent); }
.ops-kpi-dot.is-green { background:var(--green); }
.ops-kpi-dot.is-purple { background:var(--purple); }
.ops-kpi-label { overflow:hidden; color:var(--txt2); font-size:11px; font-weight:650; white-space:nowrap; text-overflow:ellipsis; }
.ops-kpi-value { grid-column:1/3; display:flex; align-items:baseline; gap:9px; min-width:0; }
.ops-kpi-value strong { color:var(--txt); font-size:24px; line-height:1; font-weight:720; letter-spacing:-.035em; }
.ops-kpi-value small { overflow:hidden; color:var(--muted); font-size:10px; white-space:nowrap; text-overflow:ellipsis; }

.ops-dashboard-grid { display:grid; grid-template-columns:minmax(0,1fr) 324px; gap:24px; align-items:start; }
.ops-section { min-width:0; }
.ops-section-heading { min-height:40px; margin-bottom:10px; display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.ops-section-heading h2 { font-size:15px; line-height:1.25; font-weight:700; letter-spacing:-.015em; }
.ops-section-heading p { margin-top:3px; color:var(--muted); font-size:11px; }
.ops-section-heading .btn { min-height:32px; }

.ops-attention-table { overflow:hidden; border:1px solid var(--border); border-radius:10px; background:var(--surface); }
.ops-attention-head,
.ops-attention-row { display:grid; grid-template-columns:86px minmax(210px,1fr) 126px 78px 116px; gap:8px; align-items:center; }
.ops-attention-head { min-height:34px; padding:0 16px; background:var(--surface2); color:var(--muted); font-size:9px; font-weight:700; letter-spacing:.055em; text-transform:uppercase; }
.ops-attention-row { width:100%; min-height:58px; padding:8px 16px; border:0; border-top:1px solid var(--border); background:var(--surface); color:var(--txt); text-align:left; cursor:pointer; }
.ops-attention-row:hover { background:var(--surface2); }
.ops-priority { width:max-content; min-width:68px; padding:3px 8px; border-radius:999px; background:var(--surface3); color:var(--txt2); font-size:9px; font-weight:700; letter-spacing:.03em; text-align:center; text-transform:uppercase; }
.ops-priority.is-red { background:var(--red-bg); color:var(--red-t); }
.ops-priority.is-amber { background:var(--yellow-bg); color:var(--yellow-t); }
.ops-priority.is-blue { background:var(--blue-bg); color:var(--blue-t); }
.ops-work-item { display:flex; flex-direction:column; min-width:0; }
.ops-work-item strong { overflow:hidden; font-size:12px; font-weight:650; white-space:nowrap; text-overflow:ellipsis; }
.ops-work-item small { overflow:hidden; margin-top:2px; color:var(--muted); font-size:10px; white-space:nowrap; text-overflow:ellipsis; }
.ops-owner,.ops-age { overflow:hidden; color:var(--txt2); font-size:10px; white-space:nowrap; text-overflow:ellipsis; }
.ops-next { color:var(--accent-t); font-size:10px; font-weight:700; }
.ops-empty-row { min-height:168px; display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:11px; }

.ops-side { display:flex; flex-direction:column; gap:24px; }
.ops-side-card { overflow:hidden; border:1px solid var(--border); border-radius:10px; background:var(--surface); }
.ops-plan-row { min-height:48px; padding:0 16px; display:grid; grid-template-columns:54px minmax(0,1fr) auto; gap:8px; align-items:center; border-top:1px solid var(--border); }
.ops-plan-row:first-child { border-top:0; }
.ops-plan-row time { color:var(--muted); font-size:9px; font-weight:650; }
.ops-plan-row strong { overflow:hidden; font-size:10px; font-weight:650; white-space:nowrap; text-overflow:ellipsis; }
.ops-plan-row span { color:var(--txt2); font-size:9px; font-weight:600; }
.ops-plan-row span.is-alert { color:var(--red-t); }
.ops-flow-list { padding:12px 16px 14px; }
.ops-flow { margin-top:13px; }
.ops-flow:first-child { margin-top:0; }
.ops-flow-copy { margin-bottom:6px; display:flex; justify-content:space-between; gap:10px; color:var(--txt2); font-size:10px; }
.ops-flow-copy strong { color:var(--txt); font-weight:650; }
.ops-flow-track { height:5px; overflow:hidden; border-radius:999px; background:var(--bg); }
.ops-flow-track i { display:block; height:100%; border-radius:inherit; background:var(--accent); }
.ops-flow.is-amber i { background:var(--yellow); }
.ops-flow.is-purple i { background:var(--purple); }
.ops-flow.is-red i { background:var(--red); }
.ops-flow.is-green i { background:var(--green); }

.ops-shift-note { min-height:82px; padding:16px 18px; display:flex; align-items:center; justify-content:space-between; gap:18px; border-radius:10px; background:#202b3b; color:#fff; }
.ops-shift-note div { min-width:0; }
.ops-shift-note small { display:block; margin-bottom:7px; color:#8f9aaa; font-size:9px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.ops-shift-note strong { display:block; font-size:12px; line-height:1.45; font-weight:620; }
.ops-shift-note .btn { flex:0 0 auto; border-color:#415066; background:#171d27; color:#fff; }

html[data-theme="dark"] .ops-shift-note { background:#202b3b; }
html[data-theme="dark"] .ops-shift-note .btn { border-color:#364254; background:#171d27; }

@media (max-width:1120px) {
  .ops-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ops-dashboard-grid { grid-template-columns:1fr; }
  .ops-side { display:grid; grid-template-columns:1fr 1fr; }
}
@media (max-width:760px) {
  #page-home .home-hero { align-items:flex-start; }
  #page-home .home-hero-actions { width:100%; justify-content:flex-start; }
  #page-home .home-hero-actions .btn { flex:0 1 auto; }
  .ops-attention-table { overflow-x:auto; }
  .ops-attention-head,.ops-attention-row { min-width:760px; }
  .ops-side { grid-template-columns:1fr; }
}
@media (max-width:520px) {
  .ops-kpis { grid-template-columns:1fr; }
  .ops-kpi { min-height:74px; }
  .ops-shift-note { align-items:flex-start; flex-direction:column; }
  .ops-shift-note .btn { width:100%; }
}

/* ═══════════════════════════════════════════════════════════
   CUSTOMER VIEW — connected 360° operational context
   ═══════════════════════════════════════════════════════════ */
#page-customers { max-width:1440px; }
#page-customers .page-header { margin-bottom:14px; }
#page-customers .page-header .field-hint { margin-top:3px; font-size:11px; }
.customer-directory-tools { margin-bottom:12px; display:grid; grid-template-columns:minmax(280px,1fr) auto; align-items:center; gap:14px; }
.customer-directory-tools .search-box { max-width:520px; }
.customer-directory-tools .filter-row { margin:0; justify-content:flex-end; }
.customer-directory-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.customer-directory-grid > .empty { grid-column:1/-1; min-height:320px; border:1px solid var(--border); border-radius:10px; background:var(--surface); }
.customer-directory-card { min-width:0; padding:14px; border:1px solid var(--border); border-radius:10px; background:var(--surface); color:var(--txt); cursor:pointer; transition:background .14s ease,border-color .14s ease; }
.customer-directory-card:hover,.customer-directory-card:focus { border-color:var(--border-s); background:var(--surface2); outline:none; }
.customer-directory-main { display:flex; align-items:flex-start; gap:10px; }
.customer-directory-copy { min-width:0; flex:1; }
.customer-directory-copy .cust-name2,.customer-directory-copy .cust-loc { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.customer-directory-foot { margin-top:13px; padding-top:10px; display:flex; align-items:center; justify-content:space-between; gap:8px; border-top:1px solid var(--border); }
.customer-directory-foot .rec-actions { display:flex; align-items:center; gap:5px; color:var(--accent-t); font-size:9px; font-weight:700; }
.customer-directory-foot .rec-actions > i { font-size:13px; }
.customer-directory-foot .rec-meta { font-size:9px; }

.customer-360-loading { min-height:420px; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:10px; color:var(--muted); font-size:11px; }
.customer-360-head { margin-bottom:14px; display:flex; align-items:flex-end; justify-content:space-between; gap:20px; }
.customer-360-head > div:first-child { min-width:0; }
.customer-identity { margin-top:12px; display:flex; align-items:center; gap:12px; }
.customer-identity > span { width:44px; height:44px; flex:0 0 44px; display:flex; align-items:center; justify-content:center; border-radius:10px; background:var(--brand-lt); color:var(--brand); font-size:18px; font-weight:750; }
.customer-identity > div { min-width:0; }
.customer-identity small { color:var(--muted); font-family:var(--mono); font-size:9px; font-weight:700; letter-spacing:.06em; }
.customer-identity h2 { overflow:hidden; font-size:22px; line-height:1.15; letter-spacing:-.025em; text-overflow:ellipsis; white-space:nowrap; }
.customer-identity p { margin-top:3px; display:flex; align-items:center; gap:4px; color:var(--muted); font-size:10px; }
.customer-identity .badge { margin-left:6px; }
.customer-360-actions { display:flex; gap:8px; }

.customer-360-kpis { margin-bottom:14px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); overflow:hidden; border:1px solid var(--border); border-radius:10px; background:var(--surface); }
.customer-360-kpis > div { min-height:62px; padding:11px 14px; display:flex; justify-content:center; flex-direction:column; border-right:1px solid var(--border); }
.customer-360-kpis > div:last-child { border-right:0; }
.customer-360-kpis small { color:var(--muted); font-size:8px; font-weight:700; letter-spacing:.055em; text-transform:uppercase; }
.customer-360-kpis strong { margin-top:5px; font-size:20px; line-height:1; letter-spacing:-.035em; }

.customer-360-grid { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:14px; align-items:start; }
.customer-op-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.customer-op-section { overflow:hidden; min-width:0; border:1px solid var(--border); border-radius:10px; background:var(--surface); }
.customer-op-heading { min-height:40px; padding:0 12px; display:flex; align-items:center; gap:8px; border-bottom:1px solid var(--border); background:var(--surface2); }
.customer-op-heading > i { color:var(--muted); font-size:15px; }
.customer-op-heading h3 { flex:1; font-size:11px; font-weight:700; }
.customer-op-heading span { min-width:21px; height:21px; padding:0 6px; display:flex; align-items:center; justify-content:center; border-radius:99px; background:var(--surface3); color:var(--txt2); font-size:9px; font-weight:700; }
.customer-op-list { min-height:148px; }
.customer-op-row { width:100%; min-height:49px; padding:8px 12px; display:flex; align-items:center; justify-content:space-between; gap:10px; border:0; border-bottom:1px solid var(--border); background:transparent; color:var(--txt); text-align:left; }
button.customer-op-row { cursor:pointer; }
button.customer-op-row:hover { background:var(--surface2); }
.customer-op-row:last-child { border-bottom:0; }
.customer-op-row > span:first-child { min-width:0; display:flex; flex-direction:column; }
.customer-op-row strong,.customer-op-row small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.customer-op-row strong { font-size:10px; font-weight:700; }
.customer-op-row small { margin-top:2px; color:var(--muted); font-size:9px; }
.customer-op-empty { min-height:148px; display:flex; align-items:center; justify-content:center; padding:20px; color:var(--muted); font-size:10px; text-align:center; }

.customer-360-aside { display:flex; flex-direction:column; gap:10px; }
.customer-360-aside > section { padding:14px; border:1px solid var(--border); border-radius:10px; background:var(--surface); }
.customer-360-aside h3 { margin-bottom:12px; font-size:11px; font-weight:750; }
.customer-360-aside dl > div { padding:7px 0; display:grid; grid-template-columns:96px minmax(0,1fr); gap:10px; border-top:1px solid var(--border); }
.customer-360-aside dl > div:first-child { border-top:0; }
.customer-360-aside dt { color:var(--muted); font-size:9px; }
.customer-360-aside dd { overflow-wrap:anywhere; color:var(--txt2); font-size:9px; font-weight:650; text-align:right; }
.customer-history { display:flex; flex-direction:column; }
.customer-history > div { padding:8px 0; display:grid; grid-template-columns:24px minmax(0,1fr); gap:8px; border-top:1px solid var(--border); }
.customer-history > div:first-child { border-top:0; }
.customer-history > div > i { width:23px; height:23px; display:flex; align-items:center; justify-content:center; border-radius:7px; background:var(--surface3); color:var(--muted); font-size:12px; }
.customer-history span { min-width:0; display:flex; flex-direction:column; }
.customer-history strong { overflow:hidden; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
.customer-history small { margin-top:2px; color:var(--muted); font-size:8px; line-height:1.35; }

@media (max-width:1050px) {
  .customer-directory-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .customer-360-grid { grid-template-columns:1fr; }
  .customer-360-aside { display:grid; grid-template-columns:1fr 1fr; }
}
@media (max-width:700px) {
  .customer-directory-tools { grid-template-columns:1fr; }
  .customer-directory-tools .search-box { max-width:none; }
  .customer-directory-tools .filter-row { justify-content:flex-start; }
  .customer-directory-grid,.customer-op-grid,.customer-360-aside { grid-template-columns:1fr; }
  .customer-360-head { align-items:flex-start; flex-direction:column; }
  .customer-360-actions { width:100%; }
  .customer-360-actions .btn { flex:1; }
  .customer-360-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .customer-360-kpis > div:nth-child(2) { border-right:0; }
  .customer-360-kpis > div:nth-child(n+3) { border-top:1px solid var(--border); }
}

/* ── Connected operational system ────────────────────────── */
.global-search-trigger { height:34px; padding:0 9px; display:flex; align-items:center; gap:7px; border:1px solid var(--border); border-radius:9px; background:var(--surface2); color:var(--txt2); cursor:pointer; font-size:12px; }
.global-search-trigger:hover { border-color:var(--accent-b); background:var(--accent-lt); color:var(--accent-t); }
.global-search-trigger kbd,.global-search-footer kbd { padding:1px 5px; border:1px solid var(--border-s); border-bottom-width:2px; border-radius:5px; background:var(--surface); color:var(--muted); font-size:10px; font-family:var(--font); }
.global-search-dialog { width:min(680px,calc(100vw - 24px)); max-width:none; padding:0; overflow:hidden; align-self:flex-start; margin-top:min(12vh,100px); }
.global-search-input { height:60px; padding:0 13px 0 18px; display:grid; grid-template-columns:24px minmax(0,1fr) 34px; align-items:center; gap:8px; border-bottom:1px solid var(--border); }
.global-search-input > i { color:var(--accent); font-size:21px; }
.global-search-input input { width:100%; height:100%; border:0; outline:0; background:transparent; color:var(--txt); font-size:16px; }
.global-search-results { max-height:min(560px,65vh); overflow-y:auto; padding:8px; }
.global-search-results section + section { margin-top:7px; }
.global-search-results h3 { padding:6px 8px; display:flex; align-items:center; gap:7px; color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.08em; }
.global-search-results h3 span { padding:1px 6px; border-radius:20px; background:var(--surface3); }
.global-search-result { width:100%; min-height:54px; padding:8px 10px; display:grid; grid-template-columns:34px minmax(0,1fr) auto; align-items:center; gap:10px; border:1px solid transparent; border-radius:9px; background:transparent; color:var(--txt); text-align:left; cursor:pointer; }
.global-search-result:hover,.global-search-result.active { border-color:var(--accent-b); background:var(--accent-lt); }
.global-search-result > i:first-child { width:32px; height:32px; display:flex; align-items:center; justify-content:center; border-radius:8px; background:var(--surface3); color:var(--txt2); font-size:17px; }
.global-search-result > span { min-width:0; display:flex; flex-direction:column; }
.global-search-result strong,.global-search-result small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.global-search-result strong { font-size:13px; }.global-search-result small { color:var(--muted); font-size:11px; }
.global-search-empty { min-height:190px; padding:30px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; color:var(--txt2); text-align:center; }
.global-search-empty > i { color:var(--muted); font-size:30px; }.global-search-empty small { color:var(--muted); font-size:11px; }
.global-search-footer { min-height:40px; padding:8px 14px; display:flex; align-items:center; gap:16px; border-top:1px solid var(--border); background:var(--surface2); color:var(--muted); font-size:10px; }
.global-search-footer span { display:flex; align-items:center; gap:4px; }

#page-nayax-stock.reader-detail-open > :not(#reader-detail-view) { display:none !important; }
.connected-detail { width:100%; }
.connected-loading,.connected-error { min-height:360px; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:10px; color:var(--muted); }
.connected-error > i { color:var(--red); font-size:34px; }.connected-error strong { color:var(--txt); }
.connected-detail-head { margin-bottom:16px; display:flex; align-items:flex-end; justify-content:space-between; gap:20px; }
.connected-detail-head h2 { margin:3px 0; font-size:25px; line-height:1.15; }.connected-detail-head p:not(.page-eyebrow) { color:var(--muted); font-size:12px; }
.connected-detail-head .btn-ghost { margin-bottom:18px; padding-left:0; }
.connected-detail-actions { display:flex; align-items:center; gap:8px; }
.connected-summary-grid { margin-bottom:14px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border:1px solid var(--border); border-radius:11px; background:var(--surface); overflow:hidden; }
.connected-summary-grid section { min-width:0; padding:15px; border-right:1px solid var(--border); display:flex; flex-direction:column; gap:4px; }.connected-summary-grid section:last-child { border-right:0; }
.connected-summary-grid small { color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.04em; }.connected-summary-grid strong { overflow-wrap:anywhere; font-size:16px; }
.connected-layout { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(260px,.75fr); gap:14px; align-items:start; }.connected-layout main,.connected-layout aside { min-width:0; display:flex; flex-direction:column; gap:14px; }
.connected-panel { border:1px solid var(--border); border-radius:11px; background:var(--surface); overflow:hidden; }
.connected-panel-head { min-height:48px; padding:11px 14px; display:flex; align-items:center; justify-content:space-between; gap:10px; border-bottom:1px solid var(--border); }
.connected-panel-head h3 { display:flex; align-items:center; gap:7px; font-size:12px; }.connected-panel-head h3 i { color:var(--accent); font-size:16px; }.connected-panel-head span { color:var(--muted); font-size:10px; }
.connected-definition-grid { padding:13px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }.connected-definition-grid.single { grid-template-columns:1fr; }
.connected-definition-grid > div { min-width:0; padding:10px; display:flex; flex-direction:column; gap:4px; border:1px solid var(--border); border-radius:8px; background:var(--surface2); }
.connected-definition-grid small { color:var(--muted); font-size:9px; text-transform:uppercase; letter-spacing:.04em; }.connected-definition-grid strong { overflow-wrap:anywhere; font-size:11px; }
.connected-inline-link { width:max-content; max-width:100%; border:0; background:none; color:var(--accent-t); display:flex; align-items:center; gap:4px; font-size:11px; font-weight:700; text-align:left; cursor:pointer; }.connected-inline-link:hover { text-decoration:underline; }
.connected-resource-list { display:flex; flex-direction:column; }.connected-resource-row { width:100%; min-height:54px; padding:9px 13px; display:flex; align-items:center; justify-content:space-between; gap:12px; border:0; border-bottom:1px solid var(--border); background:transparent; color:var(--txt); text-align:left; }.connected-resource-row:last-child { border-bottom:0; }button.connected-resource-row { cursor:pointer; }button.connected-resource-row:hover { background:var(--surface2); }
.connected-resource-row > span:first-child { min-width:0; display:flex; flex-direction:column; }.connected-resource-row strong,.connected-resource-row small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.connected-resource-row strong { font-size:11px; }.connected-resource-row small { margin-top:2px; color:var(--muted); font-size:9px; }
.connected-empty { min-height:82px; padding:20px; display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:10px; text-align:center; }
.connected-activity { padding:3px 13px; }.connected-activity-row,.ops-recent-activity-row { padding:9px 0; display:grid; grid-template-columns:27px minmax(0,1fr); gap:8px; border-bottom:1px solid var(--border); }.connected-activity-row:last-child,.ops-recent-activity-row:last-child { border-bottom:0; }
.connected-activity-row > i,.ops-recent-activity-row > i { width:25px; height:25px; display:flex; align-items:center; justify-content:center; border-radius:7px; background:var(--surface3); color:var(--muted); font-size:12px; }.connected-activity-row span,.ops-recent-activity-row span { min-width:0; display:flex; flex-direction:column; }.connected-activity-row strong,.ops-recent-activity-row strong { font-size:10px; }.connected-activity-row small,.ops-recent-activity-row small { color:var(--muted); font-size:9px; }
.connected-timeline { padding:12px 15px; }.connected-timeline > div:not(.connected-empty) { position:relative; padding:0 0 16px 20px; display:flex; }.connected-timeline > div:last-child { padding-bottom:0; }.connected-timeline > div:not(.connected-empty)::before { content:""; position:absolute; left:4px; top:8px; bottom:-4px; width:1px; background:var(--border-s); }.connected-timeline > div:last-child::before { display:none; }.connected-timeline i { position:absolute; left:0; top:4px; width:9px; height:9px; border:2px solid var(--surface); border-radius:50%; background:var(--accent); box-shadow:0 0 0 1px var(--accent); }.connected-timeline span { display:flex; flex-direction:column; }.connected-timeline strong { font-size:10px; }.connected-timeline small { color:var(--muted); font-size:9px; }
.connected-notes { padding:14px; color:var(--txt2); font-size:11px; white-space:pre-wrap; }
.connected-clickable { cursor:pointer; }.connected-clickable:hover { border-color:var(--accent-b); }.connected-open-label { display:flex; align-items:center; gap:4px; color:var(--accent-t); font-size:10px; font-weight:700; }
.ops-recent-activity { margin-top:14px; }.ops-recent-activity .ops-side-card { padding:3px 13px; }.ops-recent-activity-row { grid-template-columns:27px minmax(0,1fr); }

@media (max-width:900px) {
  .connected-layout { grid-template-columns:1fr; }.connected-summary-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.connected-summary-grid section:nth-child(2) { border-right:0; }.connected-summary-grid section:nth-child(n+3) { border-top:1px solid var(--border); }
}
@media (max-width:700px) {
  .global-search-trigger span,.global-search-trigger kbd { display:none; }.global-search-trigger { width:34px; justify-content:center; padding:0; }
  .global-search-dialog { margin-top:10px; }.global-search-footer { display:none; }
  .connected-detail-head { align-items:flex-start; flex-direction:column; }.connected-detail-actions { width:100%; }.connected-summary-grid { grid-template-columns:1fr; }.connected-summary-grid section { border-right:0; border-top:1px solid var(--border); }.connected-summary-grid section:first-child { border-top:0; }.connected-definition-grid { grid-template-columns:1fr; }
}