/* =====================================================
   CABIX POS — светлая тема, сенсор + мышь
   ===================================================== */

:root{
  --bg:#0b0e14;
  --bg-alt:#111520;
  --panel:#161b22;
  --panel-2:#1c2230;
  --panel-3:#22293a;
  --surface:#161b22;
  --surface-2:#1c2230;
  --surface-3:#22293a;
  --border:rgba(255,255,255,0.08);
  --border-2:rgba(255,255,255,0.14);
  --text:#e6e6ef;
  --dim:#8b8b9e;
  --dim-2:#5a5a6e;
  --dim-3:#444455;
  --primary:#e54d5e;
  --primary-dark:#c93d4e;
  --primary-soft:rgba(229,77,94,0.14);
  --danger:#ef4444;
  --danger-soft:rgba(239,68,68,0.15);
  --danger-edge:rgba(239,68,68,0.3);
  --warn:#f59e0b;
  --warn-soft:rgba(245,158,11,0.15);
  --ok:#22c55e;
  --ok-soft:rgba(34,197,94,0.15);
  --ok-edge:rgba(34,197,94,0.3);
  --ok-deep:#27c93f;
  --grid-line:rgba(255,255,255,0.06);
  --grid-size:32px;
  --chip-dim:#1c2230;
  --scroll:#232d3f;
  --toast-ink:#0b0e14;
  --on-primary:#ffffff;
  --login-bg:linear-gradient(160deg,#0b0e14 0%,#161b22 100%);
  --paper:#ffffff;
  --radius:12px;
  --radius-lg:14px;
  --radius-sm:9px;
  --shadow:0 1px 3px rgba(0,0,0,.4),0 4px 16px rgba(0,0,0,.3);
  --shadow-lg:0 12px 36px rgba(0,0,0,.5);
  --tap:42px;
  --ease:cubic-bezier(0.16,1,0.3,1);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;height:100%;max-width:100vw;overflow-x:hidden;touch-action:manipulation;-webkit-text-size-adjust:100%}
body{
  background-color:var(--bg);
  background-image:
    linear-gradient(to right,var(--grid-line) 1px,transparent 1px),
    linear-gradient(to bottom,var(--grid-line) 1px,transparent 1px);
  background-size:var(--grid-size) var(--grid-size);
  background-attachment:fixed;
  color:var(--text);
  font:15px/1.45 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Inter,sans-serif;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior:none;
  transition:background-color 0.3s var(--ease),color 0.3s var(--ease);
}
.hidden{display:none!important}
button{font-family:inherit;cursor:pointer}
input,select,textarea{font-family:inherit;font-size:15px}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:var(--scroll);border-radius:8px}

/* ---------- Кнопки ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--tap);padding:0 18px;border-radius:var(--radius);border:1px solid var(--border);background:var(--panel);color:var(--text);font-size:15px;font-weight:600;user-select:none;transition:background .12s,border-color .12s,transform .05s}
.btn:hover{border-color:var(--border-2);background:var(--panel-2)}
.btn:active{transform:scale(.98)}
.btn:disabled{opacity:.5;cursor:default}
.btn-primary{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.btn-primary:hover{background:var(--primary-dark);border-color:var(--primary-dark)}
.btn-danger{background:var(--danger-soft);border-color:var(--danger-edge);color:var(--danger)}
.btn-ok{background:var(--ok-soft);border-color:var(--ok-edge);color:var(--ok)}
.btn-ghost{border-color:transparent;background:transparent}
.btn-ghost:hover{background:var(--panel-2)}
.btn-lg{min-height:54px;font-size:16px;border-radius:14px}
.btn-sm{min-height:36px;padding:0 12px;font-size:13.5px;border-radius:10px}
.btn-block{width:100%}
.icon-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0.3rem;
  min-width:38px;
  height:38px;
  padding:0 0.55rem;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--panel-2);
  color:var(--text);
  font:inherit;
  font-size:16px;
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
  transition:background 0.18s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.18s cubic-bezier(0.16, 1, 0.3, 1), transform 0.1s cubic-bezier(0.16, 1, 0.3, 1), color 0.18s;
}
.icon-btn:hover{
  background:var(--chip-dim);
  border-color:var(--border-2);
  color:var(--primary);
  transform:translateY(-1px);
}
.icon-btn:active{
  transform:scale(0.95);
}
.icon-btn svg{
  width:18px;
  height:18px;
  stroke:currentColor;
  fill:none;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.theme-icon--slate, .theme-icon--dark{display:block}
.theme-icon--light, .theme-icon--emerald, .theme-icon--amber{display:none}

html[data-theme="light"] .theme-icon--slate,
html[data-theme="light"] .theme-icon--dark,
html[data-theme="light"] .theme-icon--emerald,
html[data-theme="light"] .theme-icon--amber{display:none}
html[data-theme="light"] .theme-icon--light{display:block}

html[data-theme="emerald"] .theme-icon--slate,
html[data-theme="emerald"] .theme-icon--dark,
html[data-theme="emerald"] .theme-icon--light,
html[data-theme="emerald"] .theme-icon--amber{display:none}
html[data-theme="emerald"] .theme-icon--emerald{display:block}

html[data-theme="amber"] .theme-icon--slate,
html[data-theme="amber"] .theme-icon--dark,
html[data-theme="amber"] .theme-icon--light,
html[data-theme="amber"] .theme-icon--emerald{display:none}
html[data-theme="amber"] .theme-icon--amber{display:block}

.theme-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  display:inline-block;
  margin-right:6px;
  flex:0 0 10px;
}

/* OmniRoute Language Dropdown */
.lang{position:relative;display:inline-flex}
.lang-dropdown{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  width:190px;
  max-height:280px;
  overflow-y:auto;
  background:var(--panel);
  border:1px solid var(--border-2);
  border-radius:12px;
  box-shadow:var(--shadow-lg);
  padding:6px;
  display:none;
  flex-direction:column;
  gap:2px;
  z-index:150;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
.lang-dropdown.open{
  display:flex;
  animation:omni-pop 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
.lang-option{
  padding:8px 12px;
  border-radius:8px;
  font-size:13px;
  font-weight:600;
  color:var(--dim);
  display:flex;
  align-items:center;
  justify-content:space-between;
  cursor:pointer;
  transition:background 0.12s, color 0.12s;
  user-select:none;
}
.lang-option:hover{
  background:var(--panel-2);
  color:var(--text);
}
.lang-option.active{
  background:var(--primary-soft);
  color:var(--primary);
  font-weight:700;
}
@keyframes omni-pop{
  from{opacity:0;transform:scale(0.95) translateY(-6px)}
  to{opacity:1;transform:scale(1) translateY(0)}
}
.notif-btn{position:relative}
.notif-badge{position:absolute;top:4px;right:4px;width:8px;height:8px;border-radius:50%;background:var(--primary);box-shadow:0 0 8px var(--primary)}

/* ---------- Поля ---------- */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field>span{font-size:13px;color:var(--dim);font-weight:600}
.field input,.field select,.field textarea,
input.inp,select.inp,textarea.inp{min-height:var(--tap);border:1px solid var(--border);border-radius:var(--radius);padding:10px 14px;background:var(--panel);color:var(--text);width:100%}
.field textarea{min-height:70px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.search-box{position:relative;flex:1;min-width:180px}
.search-box input{width:100%;min-height:var(--tap);border:1px solid var(--border);border-radius:var(--radius);padding:10px 40px 10px 42px;background:var(--panel)}
.search-box::before{content:"⌕";position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--dim-2);font-size:19px}
.search-clear{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:40px;height:40px;border:none;background:transparent;color:var(--dim-2);font-size:17px;border-radius:10px}
.search-clear:hover{background:var(--panel-2);color:var(--text)}

/* ---------- Вход ---------- */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;background:var(--login-bg)}
.login-card{width:100%;max-width:400px;background:var(--panel);border:1px solid var(--border);border-radius:20px;padding:34px 30px;box-shadow:var(--shadow-lg)}
.login-brand{display:flex;align-items:center;gap:14px;margin-bottom:24px}
.login-logo{width:52px;height:52px;border-radius:14px;background:var(--primary);color:var(--on-primary);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:20px}
.login-title{font-size:20px;font-weight:800}
.login-sub{color:var(--dim);font-size:13px}
.login-error{background:var(--danger-soft);color:var(--danger);border-radius:10px;padding:11px 14px;font-size:14px;margin-bottom:14px}
.login-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:var(--panel-2);border:1px solid var(--border);border-radius:12px;padding:4px;margin-bottom:18px}
.login-tabs button{min-height:42px;border:none;border-radius:9px;background:transparent;color:var(--dim);font-size:14px;font-weight:700}
.login-tabs button.active{background:var(--panel);color:var(--primary);box-shadow:var(--shadow)}
.key-input{text-transform:uppercase;letter-spacing:1px;font-family:"SF Mono",ui-monospace,Menlo,monospace;font-size:16px!important;text-align:center}
.mono-key{font-family:"SF Mono",ui-monospace,Menlo,monospace;font-size:12.5px;font-weight:700;letter-spacing:.5px}
.login-foot{text-align:center;color:var(--dim-2);font-size:12.5px;margin-top:18px;line-height:1.5}

/* Segmented Control / Tabs */
.seg{display:flex;gap:6px;background:var(--panel-2);border:1px solid var(--border);padding:5px;border-radius:var(--radius);align-items:center}
.seg button{flex:1 1 auto;min-height:38px;padding:6px 12px;border-radius:8px;border:1px solid transparent;background:transparent;color:var(--dim);font-size:13.5px;font-weight:600;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;transition:background 0.15s ease,color 0.15s ease,border-color 0.15s ease,transform 0.08s ease;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.seg button:hover{background:var(--panel-3);color:var(--text)}
.seg button:active{transform:scale(0.97)}
.seg button.active{background:var(--panel);color:var(--primary);border-color:var(--border-2);font-weight:800;box-shadow:var(--shadow)}

/* ---------- Каркас (OmniRoute Header Aesthetics) ---------- */
.app{display:grid;grid-template-columns:210px 1fr;grid-template-rows:60px 1fr;grid-template-areas:"top top" "nav view";height:100vh;height:100dvh;background:transparent}
.topbar{grid-area:top;display:flex;align-items:center;gap:14px;padding:0 18px;background:var(--panel);border-bottom:1px solid var(--border);z-index:30;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:background 0.25s ease,border-color 0.25s ease}
.topbar-store{flex:1;min-width:0}
.store-name{font-weight:700;font-size:15px;letter-spacing:-0.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.store-user{font-size:12px;color:var(--dim)}
.topbar-right{display:flex;align-items:center;gap:8px}
/* Часы в шапке */
.clock{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:1px;
  padding:4px 10px;border-radius:9px;background:var(--panel-2);border:1px solid var(--border);
  line-height:1.1;font-variant-numeric:tabular-nums;min-width:96px;transition:border-color 0.18s ease}
.clock .clock-time{font-size:15.5px;font-weight:800;font-family:var(--font-mono, monospace);letter-spacing:0.2px;color:var(--text)}
.clock .clock-time small{font-size:10.5px;font-weight:700;color:var(--dim-2);margin-left:3px}
.clock .clock-date{font-size:10.5px;font-weight:600;color:var(--dim);white-space:nowrap}
.net-badge{font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:99px;background:var(--ok-soft);color:var(--ok);border:1px solid var(--ok-edge);display:inline-flex;align-items:center;gap:5px;letter-spacing:0.02em;text-transform:capitalize}
.net-badge::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ok);display:inline-block;animation:omni-pulse 2s infinite}
.net-badge.off{background:var(--danger-soft);color:var(--danger);border-color:var(--danger-edge)}
.net-badge.off::before{background:var(--danger);animation:none}
@keyframes omni-pulse{0%{box-shadow:0 0 0 0 rgba(21,128,61,0.5)}70%{box-shadow:0 0 0 6px transparent}100%{box-shadow:0 0 0 0 transparent}}
.nav-toggle{display:inline-flex}

.sidenav{grid-area:nav;background:var(--panel);border-right:1px solid var(--border);padding:12px 10px;overflow-y:auto;z-index:25}
.nav-item{display:flex;align-items:center;gap:11px;width:100%;min-height:48px;padding:0 12px;border-radius:12px;border:none;background:transparent;color:var(--dim);font-size:14.5px;font-weight:600;text-align:left;margin-bottom:3px}
.nav-item .nav-ico{font-size:19px;width:24px;text-align:center}
.nav-item:hover{background:var(--panel-2);color:var(--text)}
.nav-item.active{background:var(--primary-soft);color:var(--primary)}
.nav-sep{height:1px;background:var(--border);margin:10px 6px}

.view{grid-area:view;overflow-y:auto;padding:18px;min-width:0;background:transparent}
.view-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.view-head h1{margin:0;font-size:21px;font-weight:800}
.view-head .sub{color:var(--dim);font-size:13px;margin-top:2px}
.head-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* ---------- Карточки/панели ---------- */
.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px;box-shadow:var(--shadow)}
.card h3{margin:0 0 12px;font-size:15px;font-weight:700}
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:16px}
.stat{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-lg);padding:14px 16px;box-shadow:var(--shadow)}
.stat .s-label{color:var(--dim);font-size:12.5px;font-weight:600}
.stat .s-value{font-size:20px;font-weight:800;margin-top:2px;font-variant-numeric:tabular-nums}
.stat .s-sub{color:var(--dim-2);font-size:12px;margin-top:2px}

/* ---------- Таблицы ---------- */
.tbl-wrap{overflow-x:auto;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow)}
table.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{text-align:left;color:var(--dim);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;padding:12px 14px;border-bottom:1px solid var(--border);white-space:nowrap;background:var(--panel-2)}
.tbl td{padding:11px 14px;border-bottom:1px solid var(--chip-dim);vertical-align:middle}
.tbl tr:last-child td{border-bottom:none}
.tbl tbody tr{cursor:default}
.tbl tbody tr.rowbtn{cursor:pointer}
.tbl tbody tr.rowbtn:hover{background:var(--panel-3)}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl .dim{color:var(--dim);font-size:12.5px}
/* Колонка названия: в широкой таблице длинное имя раздвигало остальные
   колонки за край экрана. Ограничиваем ширину — текст переносится. */
.tbl td.nm{max-width:320px;white-space:normal;overflow-wrap:anywhere}
.chip{display:inline-block;padding:3px 10px;border-radius:99px;font-size:12px;font-weight:700;white-space:nowrap}
.chip-ok{background:var(--ok-soft);color:var(--ok)}
.chip-warn{background:var(--warn-soft);color:var(--warn)}
.chip-bad{background:var(--danger-soft);color:var(--danger)}
.chip-dim{background:var(--chip-dim);color:var(--dim)}
.chip-blue{background:var(--primary-soft);color:var(--primary)}
.empty-note{padding:40px 16px;text-align:center;color:var(--dim-2);font-size:14px}

/* ---------- Экран продажи ---------- */
.sale-layout{display:grid;grid-template-columns:1fr 390px;gap:16px;height:calc(100dvh - 60px - 36px);min-height:420px}
.sale-left{display:flex;flex-direction:column;min-width:0;min-height:0;position:relative}
.sale-toolbar{flex:0 0 auto;display:flex;gap:10px;margin-bottom:10px;flex-wrap:wrap;align-items:center;width:100%}
.cat-chips{flex:0 0 auto;display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:2px 2px 8px 2px;margin-bottom:8px;scrollbar-width:thin;width:100%;position:relative;z-index:5}
.cat-chip{flex:0 0 auto;min-height:40px;padding:0 16px;border-radius:99px;border:1px solid var(--border);background:var(--panel);font-size:14px;font-weight:600;color:var(--dim);display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.cat-chip .dot{width:10px;height:10px;border-radius:50%}
.cat-chip.active{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.product-grid{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));grid-auto-rows:max-content;gap:12px;align-content:start;padding:4px 2px 24px}
.p-card{background:var(--panel);border:1px solid var(--border);border-radius:14px;overflow:hidden;text-align:left;padding:0;display:flex;flex-direction:column;box-shadow:var(--shadow);transition:transform .06s,border-color .12s}
.p-card:hover{border-color:var(--primary)}
.p-card:active{transform:scale(.97)}
/* Квадратная плитка, фото вписано целиком: у товаров фотографии разного
   формата, и обрезка по краям съедала как раз этикетку с названием. */
.p-card .p-img{aspect-ratio:1/1;flex:0 0 auto;background:var(--panel-2);display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.p-card .p-img img{width:100%;height:100%;object-fit:contain;padding:6px}
.p-card .p-img .noimg{font-size:30px;opacity:.35}
.p-card .p-stock{position:absolute;top:6px;right:6px;font-size:11px;font-weight:700;padding:2px 8px;border-radius:99px;background:rgba(255,255,255,.92);color:#5B6B7E}
.p-card .p-stock.low{color:#DC2626}
.p-card .p-discount{position:absolute;top:44px;left:6px;font-size:10.5px;font-weight:800;background:#EF4444;color:#fff;padding:2px 6px;border-radius:6px;box-shadow:0 2px 6px rgba(239,68,68,0.4);z-index:2;pointer-events:none}
/* Звезда лежит ВНУТРИ кнопки товара: промах мимо неё добавляет товар в чек.
   36px вместо 26px и контрастнее — попасть проще, ошибиться труднее. */
.p-card .p-fav{position:absolute;top:4px;left:4px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;font-size:18px;line-height:1;border-radius:99px;background:rgba(255,255,255,.94);color:var(--dim-3);cursor:pointer;user-select:none;transition:transform .08s,color .12s}
.p-card .p-fav:hover{transform:scale(1.15)}
.p-card .p-fav.on{color:#D97706}
.p-card .p-body{padding:9px 11px 11px}
.p-card .p-name{font-size:13.5px;font-weight:600;line-height:1.25;max-height:2.5em;overflow:hidden}
.p-card .p-price{font-size:14.5px;font-weight:800;margin-top:5px;color:var(--primary);font-variant-numeric:tabular-nums}
/* Штрихкод (в комиссионке — IMEI) в карточке товара и в корзине.
   Моноширинный: цифры одинаковой ширины, столбик кодов читается сверху вниз
   и глаз сам находит различие между двумя похожими телефонами. Приглушённый
   и мелкий — это справка, а не второе название. Строка одна, длинный код
   обрезается многоточием, чтобы карточка не выросла и сетка не поехала. */
.p-card .p-code,.c-item .c-code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:10.5px;line-height:1.3;letter-spacing:.02em;
  color:var(--dim);opacity:.85;margin-top:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c-item .c-code{font-size:11px;margin-top:2px}

.cart{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow);min-height:0}
.cart-head{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;border-bottom:1px solid var(--border)}
.cart-head b{font-size:15.5px}
.cart-items{flex:1 1 auto;overflow-y:auto;min-height:0;overscroll-behavior:contain}
.cart-head,.cart-foot{flex:0 0 auto}
.cart-empty{padding:44px 20px;text-align:center;color:var(--dim-2)}
.c-item{display:grid;grid-template-columns:1fr auto;gap:4px 10px;padding:10px 14px;border-bottom:1px solid var(--chip-dim)}
.c-item .c-name{font-weight:600;font-size:14px}
.c-item .c-price{color:var(--dim);font-size:12.5px}
.c-item .c-total{font-weight:800;font-size:14.5px;text-align:right;font-variant-numeric:tabular-nums;align-self:center}
.c-qty{display:flex;align-items:center;gap:8px;grid-column:1/-1}
/* 46px, а не 40×38: это самое частое действие кассы, и по нему промахиваются
   чаще всего — рядом стоит «удалить». Ориентир Apple HIG 44pt / Material 48dp. */
.c-qty button{width:46px;height:46px;border-radius:12px;border:1px solid var(--border);background:var(--panel-2);font-size:20px;font-weight:700;color:var(--text)}
.c-qty .q-val{min-width:74px;height:46px;border:1px solid var(--border);border-radius:12px;display:inline-flex;align-items:center;justify-content:center;font-weight:700;background:var(--panel);font-variant-numeric:tabular-nums}
.c-qty .q-unit{color:var(--dim-2);font-size:12px}
.c-qty .c-del{margin-left:auto;color:var(--danger);background:var(--danger-soft);border-color:var(--danger-edge)}
.cart-foot{border-top:1px solid var(--border);padding:12px 16px;display:flex;flex-direction:column;gap:10px}
.cart-line{display:flex;justify-content:space-between;font-size:14px;color:var(--dim)}
.cart-line b{color:var(--text);font-variant-numeric:tabular-nums}
.cart-total{display:flex;justify-content:space-between;align-items:center;font-size:18px;font-weight:800}
.cart-total .t-sum{font-size:24px;font-variant-numeric:tabular-nums;transition:color .16s,transform .16s}
/* Короткая вспышка итога: на телефоне чек внизу, и без неё непонятно,
   попал товар в чек или нет. */
.cart-total.bump .t-sum{color:var(--ok);transform:scale(1.06)}
.cart-actions{display:grid;grid-template-columns:1fr 2fr;gap:10px}

/* ---------- Модальные окна ---------- */
.modal-backdrop{position:fixed;inset:0;background:rgba(15,27,42,.45);display:flex;align-items:center;justify-content:center;padding:16px;z-index:500;animation:fade .12s}
.modal{background:var(--panel);border-radius:18px;box-shadow:var(--shadow-lg);width:100%;max-width:520px;max-height:92dvh;display:flex;flex-direction:column;animation:pop .14s}
.modal.modal-wide{max-width:760px}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border)}
.modal-head b{font-size:17px}
.modal-x{width:44px;height:44px;border:none;background:var(--panel-2);border-radius:11px;font-size:17px;color:var(--dim)}
.modal-body{padding:18px 20px;overflow-y:auto}
.modal-foot{padding:14px 20px;border-top:1px solid var(--border);display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
@keyframes fade{from{opacity:0}}
@keyframes pop{from{opacity:0;transform:scale(.96)}}

/* ---------- Оплата ---------- */
.pay-types{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:16px}
.pay-type{min-height:56px;border-radius:12px;border:2px solid var(--border);background:var(--panel);font-size:14px;font-weight:700;color:var(--dim);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.pay-type .ico{font-size:19px}
.pay-type.active{border-color:var(--primary);color:var(--primary);background:var(--primary-soft)}
.pay-big{font-size:26px;font-weight:800;text-align:center;padding:8px 0 2px;font-variant-numeric:tabular-nums}
.pay-change{text-align:center;font-size:15px;color:var(--dim);margin-bottom:10px}
.pay-change b{color:var(--ok);font-size:18px}
.pay-change b.neg{color:var(--danger)}
.quick-cash{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:10px 0}
.quick-cash button{min-height:48px;border-radius:10px;border:1px solid var(--border);background:var(--panel-2);font-weight:700;font-variant-numeric:tabular-nums}
/* Выбранная сумма: следующий тап по ней проводит продажу — говорим об этом видом. */
.quick-cash button.chosen{border-color:var(--primary);background:var(--primary-soft);color:var(--primary)}

/* ---------- Numpad ---------- */
.numpad-backdrop{position:fixed;inset:0;background:rgba(15,27,42,.45);display:flex;align-items:flex-end;justify-content:center;z-index:600}
@media(min-width:700px){.numpad-backdrop{align-items:center}}
.numpad{background:var(--panel);border-radius:20px 20px 0 0;width:100%;max-width:420px;padding:18px;box-shadow:var(--shadow-lg)}
@media(min-width:700px){.numpad{border-radius:20px}}
.numpad-title{text-align:center;color:var(--dim);font-size:14px;font-weight:600}
.numpad-value{text-align:center;font-size:32px;font-weight:800;padding:10px 0 14px;font-variant-numeric:tabular-nums;min-height:60px}
.numpad-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.numpad-grid button{min-height:58px;border-radius:14px;border:1px solid var(--border);background:var(--panel-2);font-size:22px;font-weight:700;color:var(--text)}
.numpad-grid button:active{background:var(--primary-soft)}
.numpad-actions{display:grid;grid-template-columns:1fr 2fr;gap:9px;margin-top:12px}

/* ---------- Тосты ---------- */
.toast-root{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:9999;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{background:var(--toast-ink);color:var(--panel);padding:12px 20px;border-radius:12px;font-size:14.5px;font-weight:600;box-shadow:var(--shadow-lg);animation:pop .15s;max-width:90vw}
.toast.err{background:var(--danger)}
.toast.ok{background:var(--ok)}

/* ---------- Фото товара ---------- */
.photo-row{display:flex;gap:10px;flex-wrap:wrap}
.photo-slot{width:84px;height:84px;border-radius:12px;border:1.5px dashed var(--border-2);background:var(--panel-2);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.photo-slot img{width:100%;height:100%;object-fit:cover}
.photo-slot .ph-del{position:absolute;top:2px;right:2px;width:32px;height:32px;border-radius:9px;border:none;background:rgba(15,27,42,.7);color:#fff;font-size:14px;line-height:1}
.photo-add{width:84px;height:84px;border-radius:12px;border:1.5px dashed var(--border-2);background:var(--panel);color:var(--dim-2);font-size:26px}

/* ---------- Списки-строки документов ---------- */
.doc-lines{display:flex;flex-direction:column;gap:8px;margin:10px 0}
.doc-line{display:grid;grid-template-columns:1fr auto auto auto;gap:10px;align-items:center;background:var(--panel-2);border:1px solid var(--border);border-radius:12px;padding:9px 12px}
.doc-line .dl-name{font-weight:600;font-size:14px;min-width:0}
.doc-line .dl-name small{display:block;color:var(--dim-2);font-weight:400}
.doc-line .dl-qty,.doc-line .dl-price{min-width:74px;min-height:40px;border:1px solid var(--border);border-radius:10px;background:var(--panel);font-weight:700;display:inline-flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums;padding:0 8px}
.doc-line .dl-del{width:44px;height:44px;border-radius:11px;border:none;background:var(--danger-soft);color:var(--danger);font-size:16px}
/* Инвентаризация: отметка «проверено» на строке */
.doc-line .dl-check{width:44px;height:44px;border-radius:11px;border:1px solid var(--border);background:var(--panel);color:var(--dim-2);font-size:17px;font-weight:800;cursor:pointer}
.doc-line .dl-check.on{background:var(--ok);border-color:var(--ok);color:var(--on-primary)}
/* Приход: две цены на строке — закупка и продажа, с подписями */
.doc-line-wide{grid-template-columns:1fr auto auto auto auto}
.doc-line-wide .dl-price{display:inline-flex;flex-direction:column;gap:1px;min-height:44px;padding:4px 10px}
.doc-line-wide .dl-price small{font-size:9.5px;color:var(--dim-2);font-weight:700;text-transform:uppercase;letter-spacing:.4px;line-height:1}
.doc-line-wide .dl-price.dl-changed{border-color:var(--primary);background:var(--primary-soft)}
.doc-line-wide .dl-price.dl-changed span,.doc-line-wide .dl-price.dl-changed small{color:var(--primary)}
@media(max-width:640px){.doc-line-wide{grid-template-columns:1fr auto auto}}

/* ---------- Сотрудники: права и ключ ---------- */
.perm-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:8px 0 4px}
.perm-item{display:flex;align-items:center;gap:9px;min-height:44px;padding:6px 11px;border:1px solid var(--border);border-radius:11px;background:var(--panel);cursor:pointer;user-select:none}
.perm-item input{width:19px;height:19px;accent-color:var(--primary);flex:0 0 19px}
.perm-item span{font-size:13.5px;font-weight:500;line-height:1.25}
.perm-item.checked{border-color:var(--primary);background:var(--primary-soft)}
.perm-section{color:var(--dim);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin:14px 0 6px;grid-column:1/-1}
.key-display{background:var(--primary-soft);border:1.5px dashed var(--primary);border-radius:14px;padding:18px;text-align:center;margin:12px 0}
.key-display .key-code{font-family:"SF Mono",ui-monospace,Menlo,monospace;font-size:21px;font-weight:800;letter-spacing:1.5px;color:var(--primary);word-break:break-all}
.key-display .key-note{color:var(--dim);font-size:12.5px;margin-top:8px;line-height:1.5}
@media(max-width:560px){.perm-grid{grid-template-columns:1fr}}

/* ---------- Степпер (− значение +) для инвентаризации ---------- */
.stepper{display:inline-flex;align-items:center;gap:6px}
.stepper button{border:1px solid var(--border);color:var(--text);cursor:pointer}
.stepper .st-minus,.stepper .st-plus{width:42px;height:42px;border-radius:10px;background:var(--panel-2);font-size:19px;font-weight:700}
.stepper .st-minus:active,.stepper .st-plus:active{background:var(--primary-soft);border-color:var(--primary)}
.stepper .st-val{min-width:66px;height:42px;border-radius:10px;background:var(--panel);font-weight:700;font-size:15px;display:inline-flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums;padding:0 10px}

/* ---------- Статистика ---------- */
.s-value.pos{color:var(--ok)}
.s-value.neg{color:var(--danger)}
.stats-two{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
@media(max-width:880px){.stats-two{grid-template-columns:1fr}}
.chart-legend{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:10px;font-size:12.5px;color:var(--dim);font-weight:600}
.chart-legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px}
.chart-bars{display:flex;align-items:flex-end;gap:4px;height:190px;padding-top:6px;overflow-x:auto}
.chart-col{flex:1 1 0;min-width:14px;display:flex;flex-direction:column;align-items:center;gap:4px;height:100%}
.chart-stack{flex:1;width:100%;display:flex;align-items:flex-end;justify-content:center;gap:2px}
.chart-stack .cb{width:30%;max-width:14px;min-width:4px;border-radius:4px 4px 0 0;display:inline-block}
.chart-label{font-size:10.5px;color:var(--dim-2);height:14px;white-space:nowrap}
.hbar{margin-bottom:12px}
.hbar-top{display:flex;justify-content:space-between;gap:10px;font-size:13.5px;margin-bottom:5px}
.hbar-top span{color:var(--dim);font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hbar-top b{font-variant-numeric:tabular-nums;white-space:nowrap}
.hbar-track{height:10px;border-radius:99px;background:var(--panel-2);overflow:hidden}
.hbar-fill{height:100%;border-radius:99px;background:var(--primary)}

/* Полоса «состав оплат» в блоке «Сотрудники»: длина всей полосы — выручка
   сотрудника относительно лучшего, сегменты внутри — наличные / карта / долг.
   Зазор 2px между сегментами, чтобы соседние цвета не сливались. */
.pay-split{height:10px;border-radius:99px;background:var(--panel-2);overflow:hidden;min-width:110px}
.pay-split-in{display:flex;gap:2px;height:100%;min-width:6px}
.pay-split-in i{display:block;height:100%;border-radius:99px;min-width:3px}

/* ---------- Сегменты периодов ---------- */
.seg{display:inline-flex;background:var(--panel-2);border:1px solid var(--border);border-radius:12px;padding:3px;gap:2px;flex-wrap:wrap}
.seg button{min-height:38px;padding:0 14px;border-radius:9px;border:none;background:transparent;color:var(--dim);font-size:13.5px;font-weight:600}
.seg button.active{background:var(--primary);color:var(--on-primary)}

/* ---------- Печать чека ---------- */
#print-area{display:none}
@media print{
  body>*{display:none!important}
  /* Чек рисует printReceipt (core.js): своя ширина ленты и классы .rc-*.
     Правила старой разметки .r-center / .r-line / .r-total удалены — не генерируются. */
  /* width:auto — ширину ленты задаёт printReceipt (58/72/80 мм из настроек).
     Жёсткие 72mm здесь перебивали выбор пользователя. */
  #print-area{display:block!important;font:12px/1.4 "Courier New",monospace;color:#000;width:auto}
  #print-area hr{border:none;border-top:1px dashed #000;margin:6px 0}
  /* Режим «документ» (накладная прихода, акт инвентаризации): обычный лист, таблица. */
  #print-area.doc{width:auto;font:12px/1.5 Arial,Helvetica,sans-serif}
  #print-area.doc h1{font-size:16px;margin:0;text-align:center}
  #print-area.doc .d-meta{font-size:11px;margin:2px 0;text-align:center}
  #print-area.doc table{width:100%;border-collapse:collapse;margin-top:10px}
  #print-area.doc th,#print-area.doc td{border:1px solid #000;padding:4px 6px;font-size:11px;text-align:left}
  #print-area.doc th{background:#eee}
  #print-area.doc td.num,#print-area.doc th.num{text-align:right}
  #print-area.doc .d-totals{margin-top:8px;text-align:right;font-size:12px}
  #print-area.doc .d-sign{margin-top:22px;display:flex;justify-content:space-between;font-size:11px}
}

/* ---------- Адаптив ---------- */
@media(max-width:1060px){
  .sale-layout{grid-template-columns:1fr 340px}
}
@media(max-width:880px){
  .app{grid-template-columns:1fr;grid-template-areas:"top" "view"}
  .sidenav{position:fixed;top:60px;left:0;bottom:0;width:240px;transform:translateX(-105%);transition:transform .18s;box-shadow:var(--shadow-lg)}
  .sidenav.open{transform:none}
  .nav-toggle{display:inline-flex}
  /* Экран продажи занимает ровно высоту окна: товары скроллятся сами,
     чек снизу — позиции скроллятся внутри, клиент и кнопки оплаты всегда видны. */
  .sale-layout{display:flex;flex-direction:column;gap:10px;height:calc(100dvh - 60px - 24px);min-height:0}
  .sale-left{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;overflow:hidden;position:relative}
  .sale-toolbar{flex:0 0 auto;margin-bottom:6px}
  .cat-chips{flex:0 0 auto;display:flex;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:2px 2px 6px;margin-bottom:6px;position:relative;z-index:5}
  .product-grid{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));padding-bottom:20px}
  .cart{flex:0 0 auto;max-height:38dvh}
  /* Тап по шапке чека разворачивает его на почти весь экран и обратно. */
  .cart.expanded{max-height:80dvh}
  .cart-head{cursor:pointer;user-select:none}
  .cart-head::after{content:"⌃";margin-left:6px;color:var(--dim-2);font-size:13px;display:inline-block;transform:rotate(180deg) translateY(2px);transition:transform .15s}
  .cart.expanded .cart-head::after{transform:rotate(0deg) translateY(2px)}
  .cart-items{min-height:64px}
  .view{padding:12px}
  .pay-types{grid-template-columns:repeat(2,1fr)}
}
/* ---------- Телефон: таблицы становятся карточками ----------
   8 колонок на узком экране означают горизонтальную прокрутку: чтобы увидеть
   сумму, надо промотать вправо и потерять из виду номер чека. Разметка та же,
   подписи берутся из data-l у ячеек. На компьютере остаётся обычная таблица. */
@media(max-width:640px){
  table.tbl.cards,
  table.tbl.cards tbody,
  table.tbl.cards tr,
  table.tbl.cards td{display:block;width:auto}
  table.tbl.cards thead{display:none}
  .tbl-wrap:has(table.tbl.cards){border:none;box-shadow:none;background:transparent;overflow:visible}
  table.tbl.cards tr{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-lg);
    box-shadow:var(--shadow);margin-bottom:10px;padding:10px 14px}
  table.tbl.cards tr.rowbtn:hover{background:var(--panel)}
  table.tbl.cards td{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
    border:none;padding:5px 0;text-align:left}
  table.tbl.cards td::before{content:attr(data-l);color:var(--dim);font-size:12px;font-weight:600;
    flex:0 0 auto;white-space:nowrap}
  table.tbl.cards td:empty,
  table.tbl.cards td[data-l=""]:empty{display:none}
  table.tbl.cards td.num{text-align:right}
  /* Первая ячейка карточки — заголовок: без подписи и покрупнее. */
  table.tbl.cards td.card-head{display:block;font-size:15px;padding-bottom:8px;
    border-bottom:1px solid var(--border);margin-bottom:6px}
  table.tbl.cards td.card-head::before{content:none}
  /* Действие внизу карточки — во всю ширину, чтобы попадать пальцем. */
  table.tbl.cards td.card-act{display:block;padding-top:10px}
  table.tbl.cards td.card-act::before{content:none}
  table.tbl.cards td.card-act .btn{width:100%}
}

@media(max-width:480px){
  .field-row{grid-template-columns:1fr}
  .doc-line{grid-template-columns:1fr auto auto;grid-auto-rows:auto}
  /* На телефоне часы не прячем целиком, а сжимаем до времени: дату видно
     в системной строке, а вот время смены нужно прямо здесь. */
  .clock{min-width:0;padding:4px 8px}
  .clock .clock-date{display:none}
  .clock .clock-time{font-size:15px}
  .clock .clock-time small{display:none}
}

/* ---------- Телефон: нижняя навигация + PWA (вырез iPhone) ---------- */
.topbar{padding-top:env(safe-area-inset-top)}
.app{grid-template-rows:calc(60px + env(safe-area-inset-top)) 1fr}
.sidenav{top:calc(60px + env(safe-area-inset-top))}
.bottom-nav{display:none}
@media(max-width:640px){
  .bottom-nav{position:fixed;left:0;right:0;bottom:0;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;background:var(--panel);border-top:1px solid var(--border);z-index:45;padding-bottom:env(safe-area-inset-bottom)}
  .bottom-nav button{border:none;background:none;display:flex;flex-direction:column;align-items:center;gap:2px;padding:7px 2px 6px;font-size:10.5px;font-weight:700;color:var(--dim);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .bottom-nav button .bn-ico{font-size:20px;line-height:1.1}
  .bottom-nav button.active{color:var(--primary)}
  .view{padding-bottom:calc(70px + env(safe-area-inset-bottom))}
  .sale-layout{height:calc(100dvh - 60px - env(safe-area-inset-top) - 24px - 56px - env(safe-area-inset-bottom))}
  .sidenav{bottom:calc(56px + env(safe-area-inset-bottom))}
  /* iOS Safari приближает страницу при фокусе в поле со шрифтом <16px */
  input,select,textarea,.search-box input,.field input,.field select{font-size:16px!important}
}

/* --- Регистрация и восстановление пароля --- */
.login-success{background:var(--ok-soft);color:var(--ok-deep);border-radius:10px;padding:11px 14px;font-size:14px;margin-bottom:14px}
.auth-links{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:14px;flex-wrap:wrap}
.auth-links:has(> :only-child){justify-content:center}
.link-btn{background:none;border:none;color:var(--primary);font-size:13.5px;font-weight:700;padding:4px 2px;cursor:pointer}
.link-btn:disabled{color:var(--dim-2);cursor:default}
.code-input{text-align:center;font-size:24px!important;letter-spacing:10px;font-weight:700;font-family:"SF Mono",ui-monospace,Menlo,monospace}

/* --- Новый товар: цены и остаток (создают приход) --- */
.pf-money-card{background:var(--panel-2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:14px 14px 2px;margin-bottom:14px}
.pf-money-head{font-size:14.5px;font-weight:800;margin-bottom:3px}
.pf-money-note{font-size:12.5px;color:var(--dim);margin-bottom:12px}
.pf-money{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.pf-money .field input{background:var(--panel);font-variant-numeric:tabular-nums}
.pf-margin:empty{display:none}
.pf-margin{border-top:1px dashed var(--border-2);padding:9px 0 11px;margin-top:-2px}
.pf-mrow{display:flex;justify-content:space-between;align-items:center;font-size:13.5px;color:var(--dim);padding:2px 0}
.pf-mrow b{color:var(--text);font-variant-numeric:tabular-nums}
.pf-mrow.bad b{color:var(--danger)}
.pf-mwarn{margin-top:6px;background:var(--warn-soft);color:var(--warn);border-radius:10px;padding:8px 11px;font-size:12.5px;font-weight:600}
@media (max-width:760px){.pf-money{grid-template-columns:1fr}}

/* Карточка, которую касса продать не даст: нет остатка или нет цены */
.p-card.p-off{opacity:.6}
.p-card.p-off:hover{border-color:var(--border-2)}
.p-card .p-price.p-noprice{color:var(--danger);font-size:12.5px;font-weight:700}
/* Без права «Цена прихода» поле себестоимости не рисуется — колонки две */
.pf-money-2{grid-template-columns:1fr 1fr}

/* Счётчик товаров на чипсе категории */
.cat-chip .cc-n{font-size:12px;font-weight:800;opacity:.55;font-variant-numeric:tabular-nums}
.cat-chip.active .cc-n{opacity:.85}
#pp-cats .cat-chips{margin-bottom:10px;padding-bottom:6px}

/* На активном чипсе точка категории тонет в заливке — делаем её белой */
.cat-chip.active .dot{background:var(--on-primary)!important}

/* Причины списания: чипсы переносятся строками, а не уезжают вбок. Их всего
   семь, и искать нужную горизонтальной прокруткой в модальном окне неудобно. */
.wo-reasons{display:flex;flex-wrap:wrap;gap:8px}
.wo-reasons .cat-chip{min-height:38px;padding:0 14px}

/* ---------- Свёрнутое меню (полоска с иконками) ---------- */
/* Кассир жмёт ☰ — меню сжимается до иконок, витрина получает ещё один ряд
   карточек. Состояние помнится в браузере кассы (App.NAV_MINI_KEY). */
.app.nav-mini{grid-template-columns:62px 1fr}
.app.nav-mini .sidenav{padding:12px 7px}
.app.nav-mini .nav-item{justify-content:center;gap:0;padding:0}
.app.nav-mini .nav-txt{display:none}
.app.nav-mini .nav-item .nav-ico{width:auto;font-size:21px}
.app.nav-mini .nav-sep{margin:10px 2px}

/* ---------- Плитки склада на «Товарах» ---------- */
.pr-kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
.pr-kpi .k{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-lg);padding:11px 13px;box-shadow:var(--shadow);min-width:0}
.pr-kpi .k-l{font-size:12px;color:var(--dim);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pr-kpi .k-v{font-size:19px;font-weight:800;margin-top:3px;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pr-kpi .k.buy .k-v{color:var(--warn)}
.pr-kpi .k.sale .k-v{color:var(--primary)}
.pr-kpi .k-sub{font-size:11.5px;color:var(--dim-2);margin-top:2px}
@media(max-width:880px){.pr-kpi{grid-template-columns:1fr 1fr}}

/* ---------- Карточка сущности (товар, клиент) ---------- */
/* Одна раскладка на обе карточки: шапка с аватаром, плитки, факты, списки.
   Плитки берут ту же сетку .pr-kpi, что и склад — иначе внутри модалки и на
   экране «Товары» одни и те же цифры выглядели бы по-разному. */
.ent-card{display:flex;flex-direction:column;gap:14px}
.ent-head{display:flex;gap:14px;align-items:flex-start}
.ent-ava{width:76px;height:76px;border-radius:16px;object-fit:cover;flex:none;background:var(--panel-2)}
.ent-ava-empty{display:flex;align-items:center;justify-content:center;font-size:30px;border:1px solid var(--border)}
.ent-title{font-size:18px;font-weight:800;line-height:1.25;word-break:break-word}
.ent-sub{color:var(--dim);font-size:13px;margin-top:3px;word-break:break-word}
.ent-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
/* Плиток в карточке бывает 3 или 4 — сколько разрешают права. Жёсткие
   четыре колонки .pr-kpi оставляли бы в этом случае пустое место. */
.ent-kpi{margin-bottom:0;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.ent-facts{display:grid;grid-template-columns:1fr 1fr;gap:0 22px}
.ent-fact{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  font-size:13.5px;padding:8px 0;border-bottom:1px dashed var(--border)}
.ent-fact span{color:var(--dim);flex:none}
.ent-fact b{font-variant-numeric:tabular-nums;text-align:right;word-break:break-word}
.ent-sec h4{margin:0 0 9px;font-size:14.5px;font-weight:800}
/* Список внутри карточки прокручивается сам: иначе длинная история покупок
   уводила бы кнопки модалки за нижний край экрана. */
.ent-list{display:flex;flex-direction:column;gap:6px;max-height:40dvh;overflow-y:auto}
.ent-row{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:9px 12px;border:1px solid var(--border);border-radius:12px;background:var(--panel-2)}
.ent-row b{font-variant-numeric:tabular-nums}
.ent-row small{display:block;color:var(--dim-2);font-size:11.5px;margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:640px){
  .ent-facts{grid-template-columns:1fr}
  .ent-ava{width:60px;height:60px}
}

/* ---------- Выбор месяца ---------- */
.mpick{display:flex;flex-direction:column;gap:6px;max-height:60dvh;overflow-y:auto}
.mpick-item{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:50px;padding:0 15px;border:1px solid var(--border);background:var(--panel-2);border-radius:12px;font-size:15.5px;font-weight:700;color:var(--text);text-align:left}
.mpick-item:hover{background:var(--panel)}
.mpick-item.on{background:var(--primary-soft);border-color:var(--primary);color:var(--primary-dark)}
.mpick-item b{color:var(--primary);font-size:16px}
/* Строка периодов над экраном: та же полоса чипов, что у категорий */
.period-row .cat-chips{margin-bottom:6px}

/* ---------- Печать штрихкодов ---------- */
/* Две колонки: слева настройки печати, справа товары. На узком экране
   настройки уезжают наверх — иначе таблица с количеством не помещается. */
.lb-grid{display:grid;grid-template-columns:340px 1fr;gap:14px;align-items:start}
@media (max-width:1100px){.lb-grid{grid-template-columns:1fr}}
.lb-card{padding:14px 16px}
.lb-card h3{margin:0 0 6px;font-size:15px}

.lb-sheets{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.lb-sheet{text-align:left;padding:8px 10px;border:1px solid var(--border);border-radius:11px;background:var(--panel);line-height:1.25}
.lb-sheet b{display:block;font-size:13px}
.lb-sheet span{display:block;font-size:11px;color:var(--dim)}
.lb-sheet.on{border-color:var(--primary);background:rgba(37,99,235,.08)}
.lb-sheet.on b{color:var(--primary)}

.lb-checks{display:flex;flex-direction:column;gap:6px}
.lb-check{display:flex;align-items:center;gap:9px;min-height:38px;padding:0 10px;border:1px solid var(--border);
  border-radius:10px;background:var(--panel);font-size:13.5px;font-weight:600;color:var(--dim);text-align:left}
.lb-check .lb-box{width:20px;height:20px;flex:0 0 auto;border:1.5px solid var(--border-2);border-radius:6px;
  display:flex;align-items:center;justify-content:center;font-size:12px;color:transparent}
.lb-check.on{border-color:var(--primary);color:var(--text)}
.lb-check.on .lb-box{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}

.lb-sum{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0 10px}
.lb-sum>div{background:var(--panel-2);border-radius:10px;padding:8px 10px;text-align:center}
.lb-sum span{display:block;font-size:11px;color:var(--dim)}
.lb-sum b{font-size:17px;font-variant-numeric:tabular-nums}

.lb-tools{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:10px}
.lb-bulk{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:8px}
.lb-bulk .dim{font-size:12.5px}
.lb-issue{display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:rgba(245,158,11,.12);
  border:1px solid rgba(245,158,11,.35);border-radius:11px;padding:9px 12px;margin-bottom:10px;font-size:13.5px}

.lb-tbl td{vertical-align:middle}
.lb-qty{display:inline-flex;align-items:center;gap:4px}
.lb-qty input{width:64px;text-align:center;min-height:34px;border:1px solid var(--border);border-radius:9px;
  font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;background:var(--panel)}
.lb-qty input:disabled{opacity:.45}
.lb-step{width:32px;height:34px;border:1px solid var(--border);border-radius:9px;background:var(--panel-2);
  font-size:16px;font-weight:700;color:var(--dim)}
.lb-step:active{background:var(--primary);color:var(--on-primary)}

/* Предпросмотр: те же миллиметры, что уйдут в принтер, — на экране сразу
   видно, влезает ли название на выбранную наклейку. */
.lb-prev{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.lb-prev-item{border:1px dashed var(--border-2);border-radius:4px;overflow:hidden;background:var(--paper);flex:0 0 auto}
.lb-prev-item .lbl{width:100%;height:100%;box-sizing:border-box;padding:1.2mm;display:flex;flex-direction:column;
  align-items:center;justify-content:center;font-family:Helvetica,Arial,sans-serif;color:#000;overflow:hidden;
  text-align:center;line-height:1.1}
.lb-prev-item .lbl-store{font-size:6pt;opacity:.8;white-space:nowrap;overflow:hidden;max-width:100%}
.lb-prev-item .lbl-name{font-size:7.5pt;font-weight:700;overflow:hidden;max-width:100%;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
/* Полоски пришпилены абсолютом — иначе браузер берёт натуральный размер SVG
   и код вылезает поверх названия. Та же геометрия, что и в печати. */
.lb-prev-item .lbl-code{width:100%;flex:1 1 auto;min-height:0;position:relative;overflow:hidden}
.lb-prev-item .lbl-code svg{position:absolute;inset:0;width:100%;height:100%}
.lb-prev-item .lbl-digits{font-size:6pt;letter-spacing:1px;font-weight:600}
.lb-prev-item .lbl-price{font-size:10pt;font-weight:800;white-space:nowrap}

/* ---------- Уведомления ---------- */
/* Колокольчик в шапке и цифра на пункте меню. Цифру рисуем и там, и там:
   в свёрнутом меню подписи скрыты, и без бейджа новый заказ виден только
   тому, кто и так открыл раздел. */
.notif-btn{position:relative;overflow:visible}
.notif-badge{position:absolute;top:-5px;right:-5px;min-width:19px;height:19px;padding:0 5px;border-radius:99px;
  background:var(--danger);color:var(--on-primary);font-size:11px;font-weight:800;line-height:19px;text-align:center;
  border:2px solid var(--panel);box-sizing:content-box;font-variant-numeric:tabular-nums}
/* Точка вместо числа: заказов нет, но есть на что посмотреть. */
.notif-badge.dot{min-width:9px;width:9px;height:9px;padding:0;background:var(--warn,#f59e0b)}

.nav-item{position:relative}
.nav-badge{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:99px;background:var(--danger);
  color:var(--on-primary);font-size:11.5px;font-weight:800;line-height:20px;text-align:center;font-variant-numeric:tabular-nums}
/* В свёрнутом меню подписи нет — цифра прижимается к иконке углом. */
.app.nav-mini .nav-badge{position:absolute;top:5px;right:5px;margin:0}

.notif-panel{position:fixed;z-index:60;top:58px;right:12px;width:min(370px,calc(100vw - 20px));
  max-height:min(70vh,540px);overflow-y:auto;background:var(--panel);border:1px solid var(--border);
  border-radius:16px;box-shadow:0 18px 44px rgba(15,23,42,.18);padding:8px}
.notif-panel h4{margin:6px 8px 8px;font-size:14px;font-weight:800;display:flex;align-items:center;gap:8px}
.notif-panel h4 .dim{font-weight:600;font-size:12px}
.notif-row{display:flex;align-items:center;gap:11px;width:100%;min-height:56px;padding:8px 10px;border:none;
  background:transparent;border-radius:12px;text-align:left;color:var(--text)}
.notif-row:hover{background:var(--panel-2)}
.notif-row .n-ico{width:34px;height:34px;flex:0 0 34px;border-radius:11px;display:inline-flex;align-items:center;
  justify-content:center;font-size:17px;background:var(--panel-2)}
/* Заголовок и пояснение — колонкой: span'ы инлайновые, и без display:block
   они слипались в одну строку («Новые заказыАзиз Каримов»). */
.notif-row .n-body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px}
.notif-row .n-title{display:block;font-size:14px;font-weight:700;line-height:1.25}
.notif-row .n-sub{display:block;font-size:12.5px;color:var(--dim);line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.notif-row .n-num{flex:0 0 auto;font-size:15px;font-weight:800;font-variant-numeric:tabular-nums;padding-left:2px}
.notif-row.warn .n-ico{background:var(--warn-soft,#fef3c7)}
.notif-row.bad .n-ico{background:var(--danger-soft)}
.notif-row.bad .n-num{color:var(--danger)}
.notif-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px 4px;
  border-top:1px solid var(--border);margin-top:6px}
.notif-foot label{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--dim);font-weight:600}
.notif-foot input{width:17px;height:17px;accent-color:var(--primary)}
@media(max-width:640px){.notif-panel{top:auto;bottom:calc(64px + env(safe-area-inset-bottom));right:8px;left:8px;width:auto}}

/* ---------- «Из каталога» — выбор товаров из глобального каталога платформы ---------- */
/* ---------- Карта магазина (настройки витрины) ----------
   Leaflet приезжает с CDN, поэтому его класс стилизуем сами: скругление под
   остальные карточки и скрытая подпись-копирайт, которая на узкой модалке
   налезает на кнопки зума. Высота фиксированная: карте нужен размер ДО того,
   как она отрисуется, от процентов внутри модалки она схлопывается в ноль. */
.ab-map{height:260px;border-radius:12px;overflow:hidden;border:1px solid var(--border);background:var(--chip-dim)}
.ab-map .empty-note{padding:24px 12px}
.leaflet-container{border-radius:12px;font:inherit}
.leaflet-control-attribution{display:none}

/* Категории выпадающим списком — только «Каталог Cabix»: там их бывает три
   десятка, и активный чипс уезжал за край ленты. Ленты чипсов (.cat-chips) на
   «Товарах», приходе, инвентаризации и возврате остались как были. */
.cat-select-row{display:flex;margin:0 0 10px}
select.cat-select{width:100%;max-width:340px;min-height:40px;padding:8px 12px;border:1px solid var(--border);
  border-radius:var(--radius);background:var(--panel);color:var(--text);font-size:14px;font-weight:600}
select.cat-select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
/* Язык каталога — отдельный от языка кассы (см. getCatalogLang в i18n.js):
   карточки наполняет админ платформы, и на коробке товар может быть подписан
   не на том языке, на котором работает продавец. */
.cs-lang-row{display:flex;align-items:center;gap:8px;margin:0 0 10px;flex-wrap:wrap}
.cs-lang-lbl{color:var(--dim);font-size:12.5px;font-weight:600;white-space:nowrap}
select.cs-lang{min-width:132px;padding:7px 10px;border:1px solid var(--border);border-radius:10px;
  background:var(--panel);color:var(--text);font-size:13.5px;font-weight:600}
select.cs-lang:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
.cs-row{display:flex;align-items:center;gap:12px;padding:9px 10px;border:1px solid var(--border);border-radius:12px;margin-bottom:8px;cursor:pointer;user-select:none;background:var(--panel)}
.cs-row:hover{border-color:var(--border-2)}
.cs-row.cs-on{border-color:var(--primary);background:var(--primary-soft)}
.cs-row.cs-taken{opacity:.55;cursor:default}
.cs-img{width:44px;height:44px;border-radius:10px;object-fit:cover;flex:0 0 44px;border:1px solid var(--border);background:var(--panel-2)}
.cs-noimg{display:inline-flex;align-items:center;justify-content:center;font-size:20px}
.cs-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
/* Название показываем ЦЕЛИКОМ: обрезка многоточием прятала как раз ту часть,
   по которой товар и отличают (объём, вкус, вес). Длинное — переносится
   на вторую строку, шрифт чуть мельче, чтобы строк не стало три. */
.cs-name{font-weight:600;font-size:13px;line-height:1.3;white-space:normal;overflow-wrap:anywhere}
.cs-sub{color:var(--dim);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cs-check{width:26px;height:26px;border-radius:8px;border:2px solid var(--border-2);display:inline-flex;align-items:center;justify-content:center;color:#fff;font-weight:800;flex:0 0 26px;font-size:14px}
.cs-row.cs-on .cs-check{background:var(--primary);border-color:var(--primary)}
.cs-check-off{visibility:hidden}
.cs-mark{color:var(--dim);font-size:12px;font-weight:600;white-space:nowrap}

/* =====================================================
   ТЁМНЫЕ ТЕМЫ — те же две, что в iPhone-приложении и в мобильной кассе:
   «Blue» (тёмно-синяя) и «Тёмная» (чёрная). Меняются только переменные,
   ни одно правило вёрстки выше не дублируется.

   Печать чеков и предпросмотр этикеток НЕ трогаем: там цвета физические,
   бумага всегда белая.
   ===================================================== */

html[data-theme="blue"]{
  color-scheme:dark;
  --bg:#0A1429;
  --panel:#122038;
  --panel-2:#0E1B31;
  --panel-3:#0E1B31;
  --border:#23374F;
  --border-2:#33496B;
  --text:#F2F6FC;
  --dim:#A9B8CD;
  --dim-2:#8FA0B7;
  --dim-3:#7C8DA5;
  --primary:#4F8DF7;
  --primary-dark:#6BA2FF;
  --primary-soft:#16294A;
  --danger:#FF7070;
  --danger-soft:#3A1A21;
  --danger-edge:#5C2B34;
  --warn:#F3B863;
  --warn-soft:#3A2C16;
  --ok:#54DE8A;
  --ok-soft:#11311F;
  --ok-edge:#2A5A3C;
  --ok-deep:#7CE8A6;
  --chip-dim:#1A2A45;
  --scroll:#33496B;
  --toast-ink:#050D1B;
  --on-primary:#0A1220;
  --shadow:0 1px 3px rgba(0,0,0,.5),0 4px 16px rgba(0,0,0,.4);
  --shadow-lg:0 8px 40px rgba(0,0,0,.6);
  --login-bg:linear-gradient(160deg,#0A1429 0%,#0E1B31 100%);
}

/* 1. SLATE / CORAL (OmniRoute Dark) */
html[data-theme="dark"],
html[data-theme="slate"]{
  color-scheme:dark;
  --bg:#0b0e14;
  --bg-alt:#111520;
  --panel:#161b22;
  --panel-2:#1c2230;
  --panel-3:#22293a;
  --border:rgba(255,255,255,0.08);
  --border-2:rgba(255,255,255,0.14);
  --text:#e6e6ef;
  --dim:#8b8b9e;
  --dim-2:#5a5a6e;
  --dim-3:#444455;
  --primary:#e54d5e;
  --primary-dark:#c93d4e;
  --primary-soft:rgba(229,77,94,0.14);
  --danger:#ef4444;
  --danger-soft:rgba(239,68,68,0.15);
  --danger-edge:rgba(239,68,68,0.3);
  --warn:#f59e0b;
  --warn-soft:rgba(245,158,11,0.15);
  --ok:#22c55e;
  --ok-soft:rgba(34,197,94,0.15);
  --ok-edge:rgba(34,197,94,0.3);
  --ok-deep:#27c93f;
  --grid-line:rgba(255,255,255,0.07);
  --grid-size:32px;
  --chip-dim:#1c2230;
  --scroll:#232d3f;
  --toast-ink:#0b0e14;
  --on-primary:#ffffff;
  --shadow:0 1px 3px rgba(0,0,0,.4),0 4px 16px rgba(0,0,0,.3);
  --shadow-lg:0 12px 36px rgba(0,0,0,.5);
  --login-bg:linear-gradient(160deg,#0b0e14 0%,#161b22 100%);
}

/* 2. APPLE / SAPPHIRE (Clean Light) */
html[data-theme="light"]{
  color-scheme:light;
  --bg:#ffffff;
  --bg-alt:#f7f7fa;
  --panel:#f4f4f7;
  --panel-2:#eaeaf0;
  --panel-3:#e0e0e8;
  --border:rgba(0,0,0,0.09);
  --border-2:rgba(0,0,0,0.16);
  --text:#0e0e14;
  --dim:#5e5e70;
  --dim-2:#9292a4;
  --dim-3:#b0b0be;
  --primary:#2563eb;
  --primary-dark:#1d4ed8;
  --primary-soft:rgba(37,99,235,0.09);
  --danger:#dc2626;
  --danger-soft:#fdecec;
  --danger-edge:#f5c4c4;
  --warn:#b45309;
  --warn-soft:#fcf3e3;
  --ok:#15803D;
  --ok-soft:#e9f7ee;
  --ok-edge:#bfe5cc;
  --ok-deep:#177a45;
  --grid-line:rgba(0,0,0,0.06);
  --grid-size:32px;
  --chip-dim:#eaeaf0;
  --scroll:#cbd5e1;
  --toast-ink:#0e0e14;
  --on-primary:#ffffff;
  --shadow:0 1px 3px rgba(15,27,42,.08),0 4px 16px rgba(15,27,42,.06);
  --shadow-lg:0 8px 40px rgba(15,27,42,.18);
  --login-bg:linear-gradient(160deg,#f8faff 0%,#eef3fa 100%);
}

/* 3. EMERALD / FOREST (Zumrad Dark) */
html[data-theme="emerald"]{
  color-scheme:dark;
  --bg:#061510;
  --bg-alt:#0b1f18;
  --panel:#0f2820;
  --panel-2:#14352b;
  --panel-3:#1a4236;
  --border:rgba(16,185,129,0.14);
  --border-2:rgba(16,185,129,0.24);
  --text:#e6f7f0;
  --dim:#84bfa9;
  --dim-2:#548f7a;
  --dim-3:#3a6e5c;
  --primary:#10b981;
  --primary-dark:#059669;
  --primary-soft:rgba(16,185,129,0.16);
  --danger:#ef4444;
  --danger-soft:rgba(239,68,68,0.18);
  --danger-edge:rgba(239,68,68,0.3);
  --warn:#f59e0b;
  --warn-soft:rgba(245,158,11,0.18);
  --ok:#10b981;
  --ok-soft:rgba(16,185,129,0.18);
  --ok-edge:rgba(16,185,129,0.3);
  --ok-deep:#34d399;
  --grid-line:rgba(16,185,129,0.10);
  --grid-size:32px;
  --chip-dim:#14352b;
  --scroll:#1a4236;
  --toast-ink:#061510;
  --on-primary:#ffffff;
  --shadow:0 1px 3px rgba(0,0,0,.45),0 4px 16px rgba(0,0,0,.35);
  --shadow-lg:0 12px 36px rgba(0,0,0,.6);
  --login-bg:linear-gradient(160deg,#061510 0%,#0f2820 100%);
}

/* 4. AMBER / ESPRESSO (Oltin Luxury Dark) */
html[data-theme="amber"]{
  color-scheme:dark;
  --bg:#120e0a;
  --bg-alt:#1a140e;
  --panel:#221a13;
  --panel-2:#2d2319;
  --panel-3:#392d21;
  --border:rgba(245,158,11,0.14);
  --border-2:rgba(245,158,11,0.24);
  --text:#faeedb;
  --dim:#c5a882;
  --dim-2:#927552;
  --dim-3:#6e5539;
  --primary:#f59e0b;
  --primary-dark:#d97706;
  --primary-soft:rgba(245,158,11,0.16);
  --danger:#ef4444;
  --danger-soft:rgba(239,68,68,0.18);
  --danger-edge:rgba(239,68,68,0.3);
  --warn:#f59e0b;
  --warn-soft:rgba(245,158,11,0.18);
  --ok:#22c55e;
  --ok-soft:rgba(34,197,94,0.18);
  --ok-edge:rgba(34,197,94,0.3);
  --ok-deep:#4ade80;
  --grid-line:rgba(245,158,11,0.10);
  --grid-size:32px;
  --chip-dim:#2d2319;
  --scroll:#392d21;
  --toast-ink:#120e0a;
  --on-primary:#120e0a;
  --shadow:0 1px 3px rgba(0,0,0,.45),0 4px 16px rgba(0,0,0,.35);
  --shadow-lg:0 12px 36px rgba(0,0,0,.6);
  --login-bg:linear-gradient(160deg,#120e0a 0%,#221a13 100%);
}

/* Фотографии товаров на тёмном фоне слегка гасим: белые подложки снимков
   ночью бьют по глазам. */
html[data-theme="blue"] .p-card img,
html[data-theme="dark"] .p-card img{filter:brightness(.94)}

/* Печать. Тема ставит на <html> тёмный фон инлайном (см. index.html): с
   включённой «печатью фона» лист уходил чёрным. Чек и документы печатаются
   своими блоками — там цвета физические. */
@media print{
  html,body{background:#fff!important}
}

/* ---------- Выбор языка на экране входа ---------- */
/* Язык меняли только в «Настройках» — то есть уже ПОСЛЕ входа, и человек,
   который не читает по-русски, до этой настройки не доходил вовсе. */
.login-wrap{position:relative}
.login-lang{position:absolute;top:16px;right:16px;z-index:2;display:flex;align-items:center;gap:6px;background:var(--panel);border:1px solid var(--border);border-radius:99px;padding:6px 12px;box-shadow:var(--shadow)}
.login-lang-ico{font-size:15px;line-height:1}
.login-lang select{border:0;background:transparent;color:var(--primary);font-weight:800;font-size:13.5px;min-height:30px;padding:0 2px;appearance:none;-webkit-appearance:none}
.login-lang select:focus{outline:none}


/* Код партнёра в регистрации (2026-08-08). См. mobile.omborx.uz — там то же. */
.ref-row{margin:-4px 0 12px}
.ref-row .link-btn{padding:0;min-height:36px}
.field-hint{color:var(--dim-2);font-size:12px;line-height:1.45}
.field-hint.ok{color:var(--ok);font-weight:700}
/* Код приехал по ссылке партнёра — поле только для чтения. Красим как
   подтверждение, а не как отключённое поле: бледно-серое поле читается как
   ошибка, а зелёное — как «всё уже заполнено, трогать не надо». */
.field input.ref-locked{
  background:var(--ok-soft);border-color:var(--ok);color:var(--ok-deep);
  font-weight:800;letter-spacing:.6px;cursor:default;
}
.field input.ref-locked:focus{outline:none;border-color:var(--ok)}

/* Счётчик заказов в фильтрах онлайн-магазина: жёлтый кружок.
   Просьба владельца 2026-08-14: зайдя на экран, и владелец, и сотрудник
   должны СРАЗУ видеть, сколько заказов всего, сколько новых и сколько
   готовится. Раньше это была обычная цифра через точку — её не замечали.
   Ноль не рисуем вовсе: пустой кружок только мешает. */
.ord-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px; margin-left: 7px;
  border-radius: 999px; background: #F5C518; color: #1B1300;
  font-size: 11.5px; font-weight: 800; line-height: 1; vertical-align: middle;
}

/* Quick Theme Switcher Button */
.theme-toggle-btn {
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.2s ease;
}
.theme-toggle-btn:hover {
  transform: scale(1.18) rotate(14deg);
}
.theme-toggle-btn:active {
  transform: scale(0.92) rotate(-14deg);
}

/* Quick View Mode Switcher Button (M1) */
.view-toggle-btn {
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  position: relative;
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.view-toggle-btn:hover {
  transform: translateY(-1px);
  border-color: var(--border-2);
  color: var(--primary);
  background: var(--chip-dim);
}
.view-toggle-btn:active {
  transform: scale(0.95);
}
.view-toggle-btn:focus-visible {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

/* =====================================================
   CABIX POS — MOBILE VIEW MODE (M1 Dual View Mode)
   html[data-view-mode="mobile"] and #app.view-mobile
   ===================================================== */

html[data-view-mode="mobile"] .app {
  grid-template-columns: 1fr !important;
  grid-template-rows: calc(56px + env(safe-area-inset-top, 0px)) 1fr !important;
  grid-template-areas: "top" "view" !important;
  height: 100vh;
  height: 100dvh;
  max-width: 100vw !important;
  overflow-x: hidden !important;
}

/* 1. Header Adaptations in Mobile Mode (Zero Horizontal Overflow) */
html[data-view-mode="mobile"] .topbar {
  padding: 0 10px;
  padding-top: env(safe-area-inset-top, 0px);
  gap: 8px;
  max-width: 100vw !important;
  overflow: hidden !important;
}
html[data-view-mode="mobile"] .nav-toggle {
  display: inline-flex !important;
}
html[data-view-mode="mobile"] .topbar-store {
  flex: 1;
  min-width: 0;
}
html[data-view-mode="mobile"] .topbar-store .store-name {
  font-size: 14px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
html[data-view-mode="mobile"] .topbar-store .store-user {
  display: none !important;
}
html[data-view-mode="mobile"] .topbar-right {
  gap: 4px;
  flex-shrink: 0;
}
html[data-view-mode="mobile"] .topbar-right #reload-btn,
html[data-view-mode="mobile"] .topbar-right #logout-btn,
html[data-view-mode="mobile"] .net-badge {
  display: none !important; /* Hide extra buttons from topbar on mobile — they are inside Drawer ☰ */
}
html[data-view-mode="mobile"] .clock {
  min-width: 0 !important;
  padding: 3px 6px !important;
}
html[data-view-mode="mobile"] .clock .clock-date {
  display: none !important;
}
html[data-view-mode="mobile"] .clock .clock-time {
  font-size: 13px !important;
}
html[data-view-mode="mobile"] .clock .clock-time small {
  display: none !important;
}

/* Body scroll lock when drawer is active */
html.drawer-open-lock,
body.drawer-open-lock {
  overflow: hidden !important;
  touch-action: none !important;
}

/* 2. Slide-out Drawer Sidebar & Backdrop in Mobile Mode */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  z-index: 110;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.26s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.26s;
}

.drawer-backdrop.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

html[data-view-mode="mobile"] .sidenav {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  width: min(320px, 86vw) !important;
  height: 100vh !important;
  height: 100dvh !important;
  transform: translate3d(-105%, 0, 0) !important;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
  will-change: transform;
  z-index: 120 !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45) !important;
  background: var(--panel) !important;
  border-right: 1px solid var(--border) !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  overflow: hidden !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
}

html[data-view-mode="mobile"] .sidenav.open {
  transform: translate3d(0, 0, 0) !important;
}

/* Drawer Header Card */
.drawer-header {
  padding: calc(16px + env(safe-area-inset-top, 0px)) 16px 14px 16px;
  background: var(--panel-2);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.drawer-profile {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.drawer-avatar {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--primary), #6366F1);
  color: #FFF;
  font-size: 19px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
  flex-shrink: 0;
}

.drawer-user-info {
  flex: 1;
  min-width: 0;
}

.drawer-user-name {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.drawer-user-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
}

.drawer-role-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 6px;
  background: var(--primary-soft);
  color: var(--primary);
  text-transform: capitalize;
}

.drawer-net-status {
  font-size: 11px;
  font-weight: 600;
  color: var(--ok);
}

.drawer-net-status.offline {
  color: var(--danger);
}

.drawer-close-btn {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--dim);
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .12s, color .12s;
}

.drawer-close-btn:hover {
  background: var(--panel-2);
  color: var(--text);
}

.drawer-store-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 12px;
}

.drawer-quick-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
}

.drawer-action-btn {
  height: 36px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--dim);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  cursor: pointer;
  transition: all 0.15s ease;
  padding: 0 4px;
}

.drawer-action-btn:active {
  transform: scale(0.95);
}

.drawer-action-btn.btn-danger-soft {
  color: var(--danger);
  border-color: var(--danger-edge);
  background: var(--danger-soft);
}

/* Drawer Scrollable Body & Section Groups */
.drawer-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px 10px 20px 10px;
}

.drawer-section {
  margin-bottom: 16px;
}

.drawer-section-title {
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--dim);
  padding: 6px 10px 4px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.drawer-section-items {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.drawer-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.drawer-nav-item .d-ico {
  font-size: 19px;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.drawer-nav-item .d-txt {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.drawer-nav-item:active {
  background: var(--panel-2);
  transform: scale(0.98);
}

.drawer-nav-item.active {
  background: var(--primary-soft);
  border-color: rgba(37, 99, 235, 0.2);
  color: var(--primary);
  font-weight: 700;
}

/* Drawer Footer */
.drawer-footer {
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)) 16px;
  background: var(--panel-2);
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--dim);
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.drawer-build .build-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ok);
  margin-right: 4px;
}

/* In mobile mode, disable desktop nav-mini layout effects */
html[data-view-mode="mobile"] .app.nav-mini {
  grid-template-columns: 1fr !important;
}
html[data-view-mode="mobile"] .app.nav-mini .nav-txt {
  display: inline !important;
}
html[data-view-mode="mobile"] .app.nav-mini .nav-item {
  justify-content: flex-start !important;
  padding: 0 12px !important;
  gap: 11px !important;
}

/* 3. Bottom Navigation Bar in Mobile Mode */
html[data-view-mode="mobile"] .bottom-nav,
.bottom-nav {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: calc(60px + env(safe-area-inset-bottom, 0px)) !important;
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  align-items: center;
  z-index: 85 !important;
  padding: 0 4px env(safe-area-inset-bottom, 0px) 4px !important;
  background: var(--panel) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-top: 1px solid var(--border) !important;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4) !important;
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

/* Light / Apple Theme */
html[data-theme="light"][data-view-mode="mobile"] .bottom-nav,
html[data-theme="light"] .bottom-nav {
  background: rgba(255, 255, 255, 0.92) !important;
  border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 -4px 16px rgba(15, 27, 42, 0.06) !important;
}

/* Slate Theme */
html[data-theme="slate"][data-view-mode="mobile"] .bottom-nav,
html[data-theme="slate"] .bottom-nav,
html[data-theme="dark"][data-view-mode="mobile"] .bottom-nav,
html[data-theme="dark"] .bottom-nav {
  background: rgba(22, 27, 34, 0.94) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5) !important;
}

/* Emerald / Forest Theme */
html[data-theme="emerald"][data-view-mode="mobile"] .bottom-nav,
html[data-theme="emerald"] .bottom-nav {
  background: rgba(15, 40, 32, 0.94) !important;
  border-top: 1px solid rgba(16, 185, 129, 0.2) !important;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.55) !important;
}

/* Amber / Espresso Theme */
html[data-theme="amber"][data-view-mode="mobile"] .bottom-nav,
html[data-theme="amber"] .bottom-nav {
  background: rgba(34, 26, 19, 0.94) !important;
  border-top: 1px solid rgba(245, 158, 11, 0.2) !important;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.55) !important;
}

/* Bottom Navigation Item */
.bottom-nav .bn-item,
html[data-view-mode="mobile"] .bottom-nav button {
  position: relative;
  border: none;
  background: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6px 2px calc(6px + env(safe-area-inset-bottom, 0px));
  font-size: 11px;
  font-weight: 600;
  color: var(--dim);
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.16s ease, transform 0.1s ease;
}

.bottom-nav .bn-item:active,
html[data-view-mode="mobile"] .bottom-nav button:active {
  transform: scale(0.92);
}

.bottom-nav .bn-ico-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 24px;
}

.bottom-nav .bn-ico {
  font-size: 20px;
  line-height: 1.1;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.bottom-nav .bn-item.active,
html[data-view-mode="mobile"] .bottom-nav button.active {
  color: var(--primary) !important;
  font-weight: 800;
}

.bottom-nav .bn-item.active .bn-ico,
html[data-view-mode="mobile"] .bottom-nav button.active .bn-ico {
  transform: translateY(-2.5px) scale(1.08);
}

/* Active Dot Indicator */
.bottom-nav .bn-item.active::after,
html[data-view-mode="mobile"] .bottom-nav button.active::after {
  content: "";
  position: absolute;
  bottom: calc(3px + env(safe-area-inset-bottom, 0px));
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 6px var(--primary);
  animation: dotFadeIn 0.2s ease forwards;
}

@keyframes dotFadeIn {
  from { opacity: 0; transform: scale(0); }
  to { opacity: 1; transform: scale(1); }
}

/* Badges for Bottom Navigation */
.bn-badge {
  position: absolute;
  top: -4px;
  right: -8px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 99px;
  background: var(--primary);
  color: #FFF;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  font-family: var(--font-mono, monospace);
  pointer-events: none;
  z-index: 2;
  transition: transform 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.bn-badge.bn-badge-warn {
  background: var(--warn, #F59E0B);
}

.bn-badge.bn-badge-danger {
  background: var(--danger, #EF4444);
}

.bn-badge.bump {
  animation: badgeBump 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes badgeBump {
  0% { transform: scale(1); }
  50% { transform: scale(1.4); }
  100% { transform: scale(1); }
}

/* 4. Main Viewport Padding in Mobile Mode */
html[data-view-mode="mobile"] .view {
  padding: 12px !important;
  padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
}

/* 5. Responsive Card Tables in Mobile Mode */
html[data-view-mode="mobile"] table.tbl.cards,
html[data-view-mode="mobile"] table.tbl.cards tbody,
html[data-view-mode="mobile"] table.tbl.cards tr,
html[data-view-mode="mobile"] table.tbl.cards td {
  display: block !important;
  width: auto !important;
}
html[data-view-mode="mobile"] table.tbl.cards thead {
  display: none !important;
}
html[data-view-mode="mobile"] .tbl-wrap:has(table.tbl.cards) {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  overflow: visible !important;
}
html[data-view-mode="mobile"] table.tbl.cards tr {
  background: var(--panel) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow) !important;
  margin-bottom: 10px !important;
  padding: 10px 14px !important;
}
html[data-view-mode="mobile"] table.tbl.cards tr.rowbtn:hover {
  background: var(--panel) !important;
}
html[data-view-mode="mobile"] table.tbl.cards td {
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  gap: 12px !important;
  border: none !important;
  padding: 5px 0 !important;
  text-align: left !important;
}
html[data-view-mode="mobile"] table.tbl.cards td::before {
  content: attr(data-l) !important;
  color: var(--dim) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}
html[data-view-mode="mobile"] table.tbl.cards td:empty,
html[data-view-mode="mobile"] table.tbl.cards td[data-l=""]:empty {
  display: none !important;
}
html[data-view-mode="mobile"] table.tbl.cards td.num {
  text-align: right !important;
}
html[data-view-mode="mobile"] table.tbl.cards td.card-head {
  display: block !important;
  font-size: 15px !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid var(--border) !important;
  margin-bottom: 6px !important;
}
html[data-view-mode="mobile"] table.tbl.cards td.card-head::before {
  content: none !important;
}
html[data-view-mode="mobile"] table.tbl.cards td.card-act {
  display: block !important;
  padding-top: 10px !important;
}
html[data-view-mode="mobile"] table.tbl.cards td.card-act::before {
  content: none !important;
}
html[data-view-mode="mobile"] table.tbl.cards td.card-act .btn {
  width: 100% !important;
}

/* =====================================================
   CABIX POS — MOBILE FLOATING CART PILL & BOTTOM SHEET
   ===================================================== */

/* Mobile Mode: sale layout single column (catalog full width) */
html[data-view-mode="mobile"] .sale-layout {
  grid-template-columns: 1fr !important;
  display: flex !important;
  flex-direction: column !important;
  height: calc(100dvh - 60px - env(safe-area-inset-top, 0px) - 64px - env(safe-area-inset-bottom, 0px)) !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

html[data-view-mode="mobile"] .sale-layout #cart {
  display: none !important;
}

html[data-view-mode="mobile"] .sale-layout .sale-left {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  position: relative !important;
}

html[data-view-mode="mobile"] .sale-toolbar {
  flex: 0 0 auto !important;
  margin-bottom: 6px !important;
  width: 100% !important;
}

html[data-view-mode="mobile"] .cat-chips {
  flex: 0 0 auto !important;
  display: flex !important;
  gap: 6px !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  margin: 0 0 8px 0 !important;
  padding: 2px 2px 8px 2px !important;
  width: 100% !important;
  position: relative !important;
  z-index: 5 !important;
}

html[data-view-mode="mobile"] .cat-chip {
  flex: 0 0 auto !important;
  min-height: 36px !important;
  padding: 0 14px !important;
  font-size: 13px !important;
  white-space: nowrap !important;
}

html[data-view-mode="mobile"] .sale-layout .product-grid {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 10px !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 4px 2px 96px 2px !important;
}

/* Compact, crisp mobile product cards */
html[data-view-mode="mobile"] .p-card {
  border-radius: 14px !important;
  padding: 0 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
  overflow: hidden !important;
  background: var(--panel) !important;
}

html[data-view-mode="mobile"] .p-card .p-img {
  aspect-ratio: auto !important;
  height: 96px !important;
  width: 100% !important;
  background: var(--panel-2) !important;
}

html[data-view-mode="mobile"] .p-card .p-body {
  padding: 8px 10px 10px 10px !important;
}

html[data-view-mode="mobile"] .p-card .p-name {
  font-size: 12.5px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  max-height: 2.5em !important;
}

html[data-view-mode="mobile"] .p-card .p-price {
  font-size: 13.5px !important;
  font-weight: 800 !important;
  margin-top: 4px !important;
}

html[data-view-mode="mobile"] .search-box input {
  height: 44px !important;
  font-size: 16px !important;
}

html[data-view-mode="mobile"] .view {
  padding: 10px 12px calc(76px + env(safe-area-inset-bottom, 0px)) 12px !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  max-width: 100vw !important;
  overflow-x: hidden !important;
}

/* Floating Cart Pill (Fixed above Bottom Navigation) */
.mobile-cart-pill {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(60px + env(safe-area-inset-bottom, 0px) + 8px);
  height: 52px;
  background: linear-gradient(135deg, #0284C7 0%, #4F46E5 100%);
  border-radius: 18px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #FFF;
  font-weight: 700;
  box-shadow: 0 8px 28px rgba(37, 99, 235, 0.45);
  z-index: 44;
  cursor: pointer;
  transform: translateY(140%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease, visibility 0.25s;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.mobile-cart-pill.visible {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.mobile-cart-pill:active {
  transform: scale(0.98);
}

.mcp-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mcp-badge {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #FFF;
  color: #4F46E5;
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mcp-total {
  font-size: 15.5px;
  font-weight: 800;
  letter-spacing: -0.3px;
  font-family: var(--font-mono, monospace);
}

.mcp-right {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
}

/* Mobile Bottom Sheet Cart Overlay */
.mobile-cart-sheet-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 15, 30, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 130;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.28s ease, visibility 0.28s;
}

.mobile-cart-sheet-overlay.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Mobile Bottom Sheet Cart Panel */
.mobile-cart-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 90dvh;
  background: var(--panel, #FFFFFF);
  border-radius: 24px 24px 0 0;
  border-top: 1px solid var(--border);
  z-index: 140;
  display: flex;
  flex-direction: column;
  transform: translateY(105%);
  visibility: hidden;
  pointer-events: none;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s;
  overscroll-behavior: contain;
  padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
}

.mobile-cart-sheet.open {
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
}

.mcs-handle-wrap {
  padding: 10px 0 6px;
  display: flex;
  justify-content: center;
  flex-shrink: 0;
  cursor: grab;
}

.mcs-handle {
  width: 42px;
  height: 5px;
  border-radius: 9999px;
  background: var(--border, #E2E8F0);
}

.mcs-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.mcs-head h3 {
  font-size: 17px;
  font-weight: 800;
}

.mcs-close {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--dim);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mcs-close:active { transform: scale(0.92); }

.mcs-items {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mcs-items::-webkit-scrollbar { display: none; }

.mcs-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 12px;
  background: var(--panel-2);
  border-radius: 14px;
  border: 1px solid var(--border);
}

.mcs-item-info {
  flex: 1;
  min-width: 0;
}

.mcs-item-name {
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mcs-item-variant {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--primary);
  margin-top: 2px;
}

.mcs-item-price {
  font-size: 12px;
  color: var(--dim);
  margin-top: 2px;
}

.mcs-item-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  flex-shrink: 0;
}

.mcs-item-total {
  font-size: 14.5px;
  font-weight: 800;
}

.mcs-stepper {
  display: flex;
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

.mcs-step-btn {
  width: 36px;
  height: 36px;
  border: none;
  background: none;
  color: var(--text);
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mcs-step-btn:active { background: var(--panel-2); }

.mcs-step-del {
  width: 36px;
  height: 36px;
  border: none;
  background: none;
  color: var(--danger, #EF4444);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 1px solid var(--border);
}

.mcs-qty-val {
  min-width: 30px;
  text-align: center;
  font-size: 14px;
  font-weight: 800;
  padding: 0 4px;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
}

.mcs-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--dim);
  font-size: 14px;
}

.mcs-foot {
  flex-shrink: 0;
  padding: 12px 16px 4px;
  border-top: 1px solid var(--border);
}

.mcs-totals {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 12px;
}

.mcs-total-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--dim);
}

.mcs-total-row.main {
  font-size: 17px;
  font-weight: 800;
  color: var(--text);
  padding-top: 8px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}

.mcs-total-row.main span:last-child {
  color: var(--primary);
}

.mcs-btns {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* =====================================================
   CABIX POS — DESKTOP VIEW MODE (M1 Dual View Mode)
   html[data-view-mode="desktop"] and #app.view-desktop
   ===================================================== */

html[data-view-mode="desktop"] .bottom-nav {
  display: none !important;
}

html[data-view-mode="desktop"] .app {
  grid-template-columns: 210px 1fr !important;
  grid-template-rows: 60px 1fr !important;
  grid-template-areas: "top top" "nav view" !important;
}

html[data-view-mode="desktop"] .app.nav-mini {
  grid-template-columns: 62px 1fr !important;
}

html[data-view-mode="desktop"] .sidenav {
  position: static !important;
  transform: none !important;
  box-shadow: none !important;
  border-right: 1px solid var(--border) !important;
  top: auto !important;
  bottom: auto !important;
  width: auto !important;
  padding: 12px 10px !important;
}

html[data-view-mode="desktop"] .sidenav::before {
  display: none !important;
}

html[data-view-mode="desktop"] .view {
  padding: 18px !important;
  padding-bottom: 18px !important;
}

/* KPI & Shares Theme Card Styles */
.kpi-worker-card {
  background: var(--panel) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  color: var(--text);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.kpi-worker-card:hover {
  border-color: var(--primary) !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.waterfall-strip {
  background: var(--panel) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 14px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
}
.share-box {
  background: var(--panel) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px;
  padding: 12px;
  cursor: pointer;
  color: var(--text);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.share-box:hover {
  border-color: var(--primary) !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}