/* ============================================================
   TeslaShop ERP — Design System v3 "Graphite & Cobalt"
   Mobile-first · Professional · Minimal
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root{
  /* Surfaces */
  --bg:#F5F6F8;
  --surface:#FFFFFF;
  --surface-2:#FAFBFC;
  --surface-3:#F2F4F7;

  /* Ink */
  --ink:#0C1420;
  --ink-2:#475467;
  --ink-3:#8A93A4;

  /* Lines */
  --line:#E4E7EC;
  --line-2:#EFF1F4;

  /* Brand — royal indigo */
  --brand:#2A4BD8;
  --brand-hover:#1E3BB8;
  --brand-soft:#EEF2FF;
  --brand-ink:#1E3A8A;

  /* Semantic */
  --ok:#067647;      --ok-soft:#ECFDF3;   --ok-line:#ABEFC6;
  --warn:#B54708;    --warn-soft:#FFFAEB; --warn-line:#FEDF89;
  --danger:#B42318;  --danger-soft:#FEF3F2; --danger-line:#FECDCA;
  --info:#175CD3;    --info-soft:#EFF8FF;

  /* Sidebar (dark graphite) */
  --nav-bg:#0c3025;
  --nav-ink:#adcbba;
  --nav-ink-active:#FFFFFF;
  --nav-active:rgba(8,117,69,.9);
  --nav-hover:rgba(255,255,255,.06);
  --nav-section:#91b39e;

  /* Geometry */
  --r-sm:8px; --r:12px; --r-lg:16px; --r-xl:20px;
  --sh-1:0 1px 2px rgba(16,24,40,.05);
  --sh-2:0 1px 3px rgba(16,24,40,.06), 0 4px 12px rgba(16,24,40,.04);
  --sh-3:0 4px 16px rgba(16,24,40,.08), 0 12px 36px rgba(16,24,40,.06);
  --sh-pop:0 20px 60px rgba(12,20,32,.22);

  /* Layout */
  --nav-w:264px;
  --hdr-h:60px;
  --tab-h:64px;

  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI','Noto Sans Georgian','BPG Nino Mtavruli',system-ui,sans-serif;
  --mono:'SF Mono',ui-monospace,'JetBrains Mono',Menlo,monospace;
}

[data-theme="dark"]{
  --bg:#0A0F17;
  --surface:#121A26;
  --surface-2:#0F1620;
  --surface-3:#1A2432;
  --ink:#E8EDF5;
  --ink-2:#98A2B3;
  --ink-3:#667085;
  --line:#1F2937;
  --line-2:#182231;
  --brand:#5B7CFF;
  --brand-hover:#7290FF;
  --brand-soft:#16203A;
  --ok:#3DD68C;  --ok-soft:#0E2A1E;  --ok-line:#175E3E;
  --warn:#F5B544; --warn-soft:#2C1F0A; --warn-line:#5C4113;
  --danger:#F97066; --danger-soft:#2E1512; --danger-line:#5E2019;
  --info:#5B9DFF; --info-soft:#0F2036;
  --nav-bg:#05281c;
  --sh-1:none;
  --sh-2:0 1px 3px rgba(0,0,0,.4);
  --sh-3:0 8px 32px rgba(0,0,0,.5);
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font);
  font-size:15px;
  line-height:1.55;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
a{color:var(--brand);text-decoration:none}
svg{width:20px;height:20px;flex-shrink:0}
img{max-width:100%;display:block}
.hidden{display:none !important}

/* ---------- 3. TYPOGRAPHY ---------- */
h1{font-size:1.4rem;font-weight:700;letter-spacing:-.02em;line-height:1.25}
h2{font-size:1.15rem;font-weight:700;letter-spacing:-.015em}
h3{font-size:1rem;font-weight:650;letter-spacing:-.01em}
h4{font-size:.9rem;font-weight:650}
.muted{color:var(--ink-2);font-size:.83rem}
.subtitle{color:var(--ink-2);font-size:.88rem;margin-top:2px}
.section-title{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);margin:22px 0 10px}
.num,.value,.grand{font-variant-numeric:tabular-nums}

.page-head{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:12px;flex-wrap:wrap;margin-bottom:18px;
}
.page-head h1{flex:1;min-width:0}

/* ---------- 4. APP SHELL (mobile-first) ---------- */
.app-wrapper{min-height:100vh;display:flex;flex-direction:column}

.top-header{
  position:sticky;top:0;z-index:60;
  height:var(--hdr-h);
  display:flex;align-items:center;gap:10px;
  padding:0 14px;
  background:var(--surface);
  background:color-mix(in srgb,var(--surface) 88%, transparent);
  backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid var(--line);
}
.menu-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border:none;border-radius:var(--r-sm);
  background:var(--surface-3);color:var(--ink);
  font-size:1.05rem;cursor:pointer;
}
.menu-toggle:active{transform:scale(.94)}
.header-right{margin-left:auto;display:flex;align-items:center;gap:8px}
.user-info{display:flex;align-items:center;gap:8px;font-size:.85rem;font-weight:600;color:var(--ink-2)}

.main-content{flex:1;min-width:0}
.content-area{
  padding:18px 14px;
  padding-bottom:calc(var(--tab-h) + 26px);
  max-width:1400px;margin:0 auto;
}

/* Sidebar — off-canvas on mobile */
.sidebar{
  position:fixed;top:0;left:0;bottom:0;z-index:90;
  width:var(--nav-w);max-width:84vw;
  background:var(--nav-bg);
  display:flex;flex-direction:column;
  transform:translateX(-102%);
  transition:transform .26s cubic-bezier(.32,.72,0,1);
  overflow-y:auto;overscroll-behavior:contain;
}
.sidebar.open{transform:translateX(0)}
.sidebar-brand{
  display:flex;align-items:center;gap:10px;
  padding:20px 18px 16px;
  font-size:1rem;font-weight:750;letter-spacing:-.01em;color:#fff;
}
.sidebar-brand span{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:9px;
  background:linear-gradient(135deg,var(--brand),#159057);
  font-size:.95rem;font-weight:800;color:#fff;
  box-shadow:0 4px 12px rgba(8,117,69,.4);
}
.sidebar-nav{padding:6px 10px 10px;display:flex;flex-direction:column;gap:1px}
.nav-section{
  font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;
  color:var(--nav-section);padding:16px 10px 6px;
}
.nav-link{
  display:flex;align-items:center;gap:11px;
  padding:10px 11px;border-radius:9px;
  font-size:.87rem;font-weight:550;color:var(--nav-ink);
  transition:background .14s,color .14s;
}
.nav-link svg{width:18px;height:18px;opacity:.85}
.nav-link:hover{background:var(--nav-hover);color:#ebf5ef}
.nav-link.active{background:var(--nav-active);color:var(--nav-ink-active);font-weight:650;box-shadow:0 2px 10px rgba(8,117,69,.35)}
.nav-link.active svg{opacity:1}
.sidebar-overlay{
  position:fixed;inset:0;z-index:80;
  background:rgba(12,48,37,.5);backdrop-filter:blur(2px);
  opacity:0;visibility:hidden;transition:opacity .22s,visibility .22s;
}
.sidebar-overlay.show{opacity:1;visibility:visible}

/* Bottom nav (mobile) */
.bottom-nav{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  height:calc(var(--tab-h) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  display:flex;align-items:stretch;
  background:var(--surface);
  background:color-mix(in srgb,var(--surface) 92%, transparent);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-top:1px solid var(--line);
}
.bottom-nav-item{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  font-size:.63rem;font-weight:600;color:var(--ink-3);
  min-width:0;padding:8px 2px;position:relative;
}
.bottom-nav-item svg{width:21px;height:21px}
.bottom-nav-item.active{color:var(--brand)}
.bottom-nav-item.active::before{
  content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:26px;height:3px;border-radius:0 0 3px 3px;background:var(--brand);
}
.bottom-nav-item:active{opacity:.6}

.desktop-only{display:none}
.mobile-only{display:inline-flex}

/* ---------- 5. CARDS ---------- */
.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
  padding:16px;
  margin-bottom:14px;
}
.card-body{padding:0}
.card-header{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid var(--line-2);
  font-weight:650;
}
.form-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
  padding:18px;margin-bottom:14px;
}

/* KPI cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:16px}
.cards .card{margin:0;padding:15px 16px;position:relative;overflow:hidden;transition:box-shadow .18s,transform .18s}
.cards .card:hover{box-shadow:var(--sh-2)}
.card-label{
  font-size:.74rem;font-weight:600;color:var(--ink-2);
  display:flex;align-items:center;gap:6px;margin-bottom:8px;
  letter-spacing:.01em;
}
.card-value{
  font-size:1.5rem;font-weight:750;letter-spacing:-.025em;
  font-variant-numeric:tabular-nums;line-height:1.15;color:var(--ink);
}
.card-value.large{font-size:1.9rem}

.grid{display:grid;grid-template-columns:1fr;gap:14px}
.dash-grid{display:grid;grid-template-columns:1fr !important;gap:14px}

/* ---------- 6. BUTTONS ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-height:42px;padding:0 16px;
  border:1px solid transparent;border-radius:10px;
  font-family:var(--font);font-size:.87rem;font-weight:620;
  line-height:1;cursor:pointer;white-space:nowrap;
  background:var(--brand);color:#fff;
  box-shadow:0 1px 2px rgba(16,24,40,.08);
  transition:background .15s,box-shadow .15s,transform .08s,opacity .15s;
  -webkit-tap-highlight-color:transparent;
}
.btn:hover{background:var(--brand-hover)}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn svg{width:17px;height:17px}

.btn-primary{background:var(--brand);color:#fff}
.btn-secondary{background:var(--surface-3);color:var(--ink);border-color:var(--line)}
.btn-secondary:hover{background:var(--line-2)}
.btn-outline{background:var(--surface);color:var(--ink);border-color:var(--line)}
.btn-outline:hover{background:var(--surface-3);border-color:var(--ink-3)}
.btn-success{background:var(--ok);color:#fff}
.btn-success:hover{filter:brightness(1.08)}
.btn-danger{background:var(--danger);color:#fff}
.btn-danger:hover{filter:brightness(1.08)}
.btn-warning{background:var(--warn);color:#fff}
.btn-warning:hover{filter:brightness(1.08)}

.btn-sm{min-height:34px;padding:0 11px;font-size:.79rem;border-radius:8px;gap:5px}
.btn-sm svg{width:15px;height:15px}
.btn-lg{min-height:52px;padding:0 22px;font-size:.95rem;border-radius:12px}
.btn-block{width:100%}

/* ---------- 7. FORMS ---------- */
label,.label{
  display:block;font-size:.79rem;font-weight:620;color:var(--ink-2);
  margin:0 0 6px;letter-spacing:.005em;
}
input,select,textarea{
  width:100%;
  min-height:44px;padding:11px 13px;
  font-family:var(--font);font-size:.92rem;color:var(--ink);
  background:var(--surface);
  border:1px solid var(--line);border-radius:10px;
  outline:none;
  transition:border-color .15s,box-shadow .15s,background .15s;
  -webkit-appearance:none;appearance:none;
}
textarea{min-height:84px;resize:vertical;line-height:1.5}
select{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A93A4' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;background-size:17px;
  padding-right:36px;cursor:pointer;
}
input:hover,select:hover,textarea:hover{border-color:var(--ink-3)}
input:focus,select:focus,textarea:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 3.5px rgba(42,75,216,.14);
  box-shadow:0 0 0 3.5px color-mix(in srgb,var(--brand) 14%, transparent);
  background:var(--surface);
}
input::placeholder,textarea::placeholder{color:var(--ink-3)}
input:disabled,select:disabled,textarea:disabled{background:var(--surface-3);color:var(--ink-3);cursor:not-allowed}
input[readonly]{background:var(--surface-3);color:var(--ink-2)}

input[type=checkbox],input[type=radio]{
  width:20px;height:20px;min-height:20px;padding:0;margin:0;
  -webkit-appearance:auto;appearance:auto;
  accent-color:var(--brand);cursor:pointer;flex:0 0 auto;
}
.chk{display:inline-flex;align-items:center;gap:9px;cursor:pointer;font-size:.9rem;font-weight:550;color:var(--ink);padding:7px 0;margin:0}
.chk input{width:20px;height:20px}
input[type=file]{padding:9px 12px;background:var(--surface-3);cursor:pointer;font-size:.83rem}

/* Validation */
.form-msg{
  display:none;padding:11px 13px;border-radius:10px;
  font-size:.84rem;font-weight:550;margin:10px 0;
  border:1px solid transparent;
}
.form-msg.ok{display:block;background:var(--ok-soft);color:var(--ok);border-color:var(--ok-line)}
.form-msg.err{display:block;background:var(--danger-soft);color:var(--danger);border-color:var(--danger-line)}
.form-msg:not(:empty){display:block}
.form-msg:not(:empty):not(.ok):not(.err){background:var(--surface-2);color:var(--ink-2);border-color:var(--line)}
.err-inline{color:var(--danger);font-size:.76rem;margin-top:5px;font-weight:550}
input.err,select.err,textarea.err{border-color:var(--danger)}
input.err:focus{box-shadow:0 0 0 3.5px rgba(180,35,24,.14);box-shadow:0 0 0 3.5px color-mix(in srgb,var(--danger) 14%, transparent)}

/* Alerts */
.alert{
  padding:13px 15px;border-radius:var(--r);
  border:1px solid var(--info-soft);background:var(--info-soft);color:var(--info);
  font-size:.86rem;margin-bottom:14px;
}

/* ---------- 8. TABLES ---------- */
.table-wrap,.stmt-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border-radius:var(--r-lg);
  border:1px solid var(--line);
  background:var(--surface);
  box-shadow:var(--sh-1);
  margin-bottom:14px;
}
.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:.86rem}
.card .tbl,.card-body .tbl{border:none}
.tbl thead th{
  position:sticky;top:0;z-index:2;
  background:var(--surface-2);
  padding:11px 13px;
  text-align:left;
  font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--ink-2);
  border-bottom:1px solid var(--line);
  white-space:nowrap;
}
.tbl tbody td{
  padding:13px;
  border-bottom:1px solid var(--line-2);
  color:var(--ink);
  vertical-align:middle;
}
.tbl tbody tr:last-child td{border-bottom:none}
.tbl tbody tr{transition:background .12s}
.tbl tbody tr:hover{background:var(--surface-2)}
.tbl tfoot td{
  padding:13px;font-weight:700;
  background:var(--surface-2);
  border-top:2px solid var(--line);
  font-variant-numeric:tabular-nums;
}
.tbl td .muted{font-size:.76rem}
.tbl .num,.tbl [style*="text-align:right"]{font-variant-numeric:tabular-nums}

/* Report table variant */
.rpt{width:100%;border-collapse:separate;border-spacing:0;font-size:.85rem}
.rpt th{
  background:var(--surface-2);padding:10px 12px;text-align:left;
  font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-2);
  border-bottom:1px solid var(--line);
}
.rpt td{padding:11px 12px;border-bottom:1px solid var(--line-2)}
.rpt tbody tr:hover{background:var(--surface-2)}

/* ---------- 9. BADGES / STATUS ---------- */
.badge{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 9px;border-radius:999px;
  font-size:.7rem;font-weight:650;letter-spacing:.01em;
  border:1px solid transparent;white-space:nowrap;
}
.bg-blue{background:var(--brand-soft);color:var(--brand-ink);border-color:#C7D2FE;border-color:color-mix(in srgb,var(--brand) 22%, transparent)}
.bg-green,.badge.ok{background:var(--ok-soft);color:var(--ok);border-color:var(--ok-line)}
.bg-orange{background:var(--warn-soft);color:var(--warn);border-color:var(--warn-line)}
.bg-red{background:var(--danger-soft);color:var(--danger);border-color:var(--danger-line)}
.bg-gray{background:var(--surface-3);color:var(--ink-2);border-color:var(--line)}

/* ---------- 10. QUICK ACTIONS ---------- */
.qa-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px;margin-bottom:18px}
.qa-tile{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  padding:16px 8px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh-1);
  text-align:center;
  transition:transform .12s,box-shadow .15s,border-color .15s;
}
.qa-tile:hover{transform:translateY(-2px);box-shadow:var(--sh-2);border-color:#A5B4FC;border-color:color-mix(in srgb,var(--brand) 35%, var(--line))}
.qa-tile:active{transform:scale(.97)}
.qa-ic{font-size:1.4rem;line-height:1}
.qa-lb{font-size:.74rem;font-weight:620;color:var(--ink-2);line-height:1.25}

/* ---------- 11. PRODUCT PICKER (POS) ---------- */
.product-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));
  gap:10px;padding:2px;
}
.product-tile{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:9px;cursor:pointer;text-align:center;
  display:flex;flex-direction:column;gap:4px;position:relative;
  transition:transform .1s,box-shadow .15s,border-color .15s;
  box-shadow:var(--sh-1);
}
.product-tile:hover{border-color:var(--brand);box-shadow:var(--sh-2)}
.product-tile:active{transform:scale(.96)}
.product-tile.added{border-color:var(--brand);background:var(--brand-soft);box-shadow:inset 0 0 0 1px var(--brand)}
.product-tile.added::after{content:'✓';position:absolute;top:7px;right:7px;width:23px;height:23px;display:grid;place-items:center;border-radius:50%;background:var(--brand);color:#fff;font-size:.72rem;font-weight:800;box-shadow:var(--sh-1)}
.product-grid-hint{grid-column:1/-1;padding:11px 13px;border:1px dashed var(--line);border-radius:10px;background:var(--surface-2);color:var(--ink-2);font-size:.76rem;text-align:center}
.photo-action{width:44px;height:44px;display:inline-grid;place-items:center;padding:2px;border:1px solid transparent;border-radius:10px;background:transparent;cursor:pointer}
.photo-action:hover{border-color:var(--brand);background:var(--brand-soft)}
.pt-photo{
  width:100%;aspect-ratio:1;border-radius:9px;object-fit:cover;
  background:var(--surface-3);margin-bottom:2px;
}
.pt-nophoto{
  width:100%;aspect-ratio:1;border-radius:9px;
  background:var(--surface-3);
  display:flex;align-items:center;justify-content:center;
  font-size:1.5rem;opacity:.4;margin-bottom:2px;
}
.product-image-loading{opacity:.58;animation:product-image-pulse 1.1s ease-in-out infinite alternate}
@keyframes product-image-pulse{to{opacity:.9}}
.product-image-fallback{color:var(--danger);opacity:.72;cursor:inherit;user-select:none}
.product-image-thumb-placeholder{
  width:40px;height:40px;border-radius:8px;border:1px solid var(--line);
  background:var(--surface-3);display:inline-flex;align-items:center;justify-content:center;
  font-size:1rem;line-height:1;
}
.pt-code{font-size:.63rem;font-weight:700;color:var(--ink-3);letter-spacing:.03em;text-transform:uppercase}
.pt-name{font-size:.78rem;font-weight:620;line-height:1.25;color:var(--ink);min-height:2em}
.pt-price{font-size:.85rem;font-weight:750;color:var(--brand);font-variant-numeric:tabular-nums}
.pt-comm{font-size:.7rem;font-weight:700;color:var(--ok)}
.pt-stock{font-size:.68rem;color:var(--ink-3);font-weight:550}

/* Selected items */
.selected-item-card{
  display:flex;align-items:center;gap:10px;
  padding:11px 12px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  margin-bottom:8px;box-shadow:var(--sh-1);
}
.si-name{font-weight:620;font-size:.87rem;flex:1;min-width:0}
.si-detail{font-size:.75rem;color:var(--ink-2);font-variant-numeric:tabular-nums}
.si-total{font-weight:750;font-variant-numeric:tabular-nums;white-space:nowrap}
.si-remove{
  width:32px;height:32px;flex:0 0 auto;
  border:none;border-radius:8px;
  background:var(--danger-soft);color:var(--danger);
  font-size:1rem;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
}
.si-remove:active{transform:scale(.9)}

/* ---------- 12. MODAL (product modal + dialogs) ---------- */
.pm-overlay{
  position:fixed;inset:0;z-index:200;
  background:rgba(12,20,32,.55);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  display:none;align-items:flex-end;justify-content:center;
  padding:0;
}
.pm-overlay.show{display:flex}
.pm-box{
  width:100%;max-width:460px;
  background:var(--surface);
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  box-shadow:var(--sh-pop);
  max-height:92vh;display:flex;flex-direction:column;
  animation:sheetUp .28s cubic-bezier(.32,.72,0,1);
  padding-bottom:env(safe-area-inset-bottom);
}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.pm-header{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:16px 18px 12px;border-bottom:1px solid var(--line-2);
  position:relative;
}
.pm-header::before{
  content:'';position:absolute;top:7px;left:50%;transform:translateX(-50%);
  width:38px;height:4px;border-radius:99px;background:var(--line);
}
.pm-header h3,.pm-header strong{font-size:1rem;font-weight:700}
.pm-close{
  width:32px;height:32px;border:none;border-radius:50%;
  background:var(--surface-3);color:var(--ink-2);
  font-size:1.1rem;line-height:1;cursor:pointer;flex:0 0 auto;
}
.pm-close:active{transform:scale(.9)}
.pm-body{padding:16px 18px;overflow-y:auto;flex:1}
.pm-footer{
  padding:14px 18px 18px;border-top:1px solid var(--line-2);
  display:flex;gap:10px;
}
.pm-footer .btn{flex:1}
.pm-field{margin-bottom:13px}
.pm-code{font-size:.72rem;font-weight:700;color:var(--ink-3);text-transform:uppercase;letter-spacing:.04em}
.pm-info{font-size:.83rem;color:var(--ink-2)}
.pm-stock{font-size:.8rem;color:var(--ink-2);font-weight:600}
.pm-qty-row{display:flex;align-items:center;gap:10px;justify-content:center;margin:6px 0}
.pm-qty-btn{
  width:50px;height:50px;flex:0 0 auto;
  border:1px solid var(--line);border-radius:12px;
  background:var(--surface-3);color:var(--ink);
  font-size:1.4rem;font-weight:600;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
}
.pm-qty-btn:active{transform:scale(.92);background:var(--line-2)}
.pm-qty-input{
  text-align:center;font-size:1.25rem;font-weight:750;
  max-width:110px;height:50px;font-variant-numeric:tabular-nums;
}
.pm-price-input{font-weight:650;font-variant-numeric:tabular-nums}
.pm-total{
  display:flex;align-items:center;justify-content:space-between;
  padding:13px 15px;margin-top:6px;
  background:var(--brand-soft);border-radius:var(--r);
  font-weight:650;font-size:.88rem;color:var(--brand-ink);
}
.pm-total-val{font-size:1.15rem;font-weight:800;font-variant-numeric:tabular-nums}

/* ---------- 13. EMPTY / LOADING ---------- */
.empty-state{
  text-align:center;padding:44px 20px;color:var(--ink-2);
}
.empty-state svg{width:44px;height:44px;opacity:.25;margin:0 auto 12px}
.empty-state h3{color:var(--ink);margin-bottom:6px}
.empty-state p{font-size:.86rem}

.skeleton{
  background:linear-gradient(90deg,var(--surface-3) 25%,var(--line-2) 37%,var(--surface-3) 63%);
  background-size:400% 100%;
  animation:shimmer 1.3s ease infinite;border-radius:var(--r-sm);
}
@keyframes shimmer{0%{background-position:100% 50%}100%{background-position:0 50%}}
.spinner{
  width:22px;height:22px;border:2.5px solid var(--line);
  border-top-color:var(--brand);border-radius:50%;
  animation:spin .7s linear infinite;display:inline-block;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- 14. MISC COMPONENTS ---------- */
.info-grid{display:grid;grid-template-columns:1fr;gap:10px}
.info-item{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:11px 0;border-bottom:1px solid var(--line-2);
}
.info-item:last-child{border-bottom:none}
.info-item .label,.info-item label{margin:0;font-size:.8rem;color:var(--ink-2);font-weight:550}
.info-item .value{font-weight:650;font-variant-numeric:tabular-nums;text-align:right}

.photo-section{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.photo-thumb{width:64px;height:64px;border-radius:var(--r);object-fit:cover;background:var(--surface-3);border:1px solid var(--line)}
.serial-box,.notes-box{
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);
  padding:12px;font-size:.85rem;
}
.serial-box{font-family:var(--mono);letter-spacing:.02em}

.f-single,.f-partner,.f-customer,.f-supplier,.f-transfer{margin-bottom:13px}

/* Print / documents */
.sheet{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;box-shadow:var(--sh-1)}
.doc-title{font-size:1.25rem;font-weight:750;letter-spacing:-.02em}
.parties{display:grid;grid-template-columns:1fr;gap:14px;margin:18px 0}
.party{padding:13px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);font-size:.85rem}
.totals{margin-top:16px;display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.grand{font-size:1.15rem;font-weight:800}
.sig-box,.signature-section{margin-top:26px;padding-top:16px;border-top:1px dashed var(--line)}
.terms{font-size:.78rem;color:var(--ink-2);margin-top:18px;line-height:1.6}
.print-controls{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.title-block{margin-bottom:16px}

/* Login */
.login-body{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:20px;
  background:
    radial-gradient(1000px 500px at 50% -10%, rgba(42,75,216,.10), transparent 70%),
    var(--bg);
}
.login-card{
  width:100%;max-width:400px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  box-shadow:var(--sh-3);
  padding:30px 24px;
}
.login-card .brand{
  display:flex;align-items:center;justify-content:center;gap:10px;
  font-size:1.15rem;font-weight:750;margin-bottom:6px;
}
.brand-line{text-align:center;color:var(--ink-2);font-size:.85rem;margin-bottom:22px}

/* Row helpers used inline */
.r{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.controls{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.controls input,.controls select{max-width:220px}

/* Small action buttons in tables */
.os-edit,.os-del,.od-del,.rm,.si-remove,.delTx,.revTx,.pbtn{
  border:none;border-radius:8px;cursor:pointer;
  min-height:32px;padding:0 10px;font-size:.78rem;font-weight:620;
  display:inline-flex;align-items:center;justify-content:center;gap:4px;
  background:var(--surface-3);color:var(--ink-2);
}
.os-edit:hover,.pbtn:hover{background:var(--brand-soft);color:var(--brand)}
.os-del:hover,.od-del:hover,.rm:hover,.delTx:hover,.revTx:hover{background:var(--danger-soft);color:var(--danger)}

/* ---------- 15. TABLET ---------- */
@media (min-width:640px){
  .content-area{padding:22px 20px;padding-bottom:calc(var(--tab-h) + 26px)}
  h1{font-size:1.6rem}
  .cards{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
  .card-value{font-size:1.65rem}
  .grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
  .parties{grid-template-columns:1fr 1fr}
  .qa-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}
  .product-grid{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:12px}
  .pm-overlay{align-items:center;padding:20px}
  .pm-box{border-radius:var(--r-xl);animation:popIn .2s cubic-bezier(.22,1,.36,1)}
  .pm-header::before{display:none}
  @keyframes popIn{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
  .info-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
}

/* ---------- 16. DESKTOP ---------- */
@media (min-width:1024px){
  .sidebar{transform:none;box-shadow:none;border-right:1px solid rgba(255,255,255,.06)}
  .sidebar-overlay{display:none !important}
  .menu-toggle{display:none}
  .bottom-nav{display:none}
  .mobile-only{display:none !important}
  .desktop-only{display:flex}

  .top-header{
    margin-left:var(--nav-w);
    padding:0 26px;
    height:64px;
  }
  .main-content{margin-left:var(--nav-w)}
  .content-area{
    padding:26px 26px 40px;
    padding-bottom:40px;
  }
  h1{font-size:1.75rem}
  .cards{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
  .card{padding:18px}
  .dash-grid{grid-template-columns:1fr 1fr !important;gap:18px}
  .tbl{font-size:.87rem}
  .tbl thead th{padding:12px 16px}
  .tbl tbody td{padding:14px 16px}
  .product-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
  .qa-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
}

@media (min-width:1400px){
  .cards{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
}

/* ---------- 17. PRINT ---------- */
@media print{
  .sidebar,.top-header,.bottom-nav,.print-controls,.btn,.menu-toggle,.sidebar-overlay{display:none !important}
  .main-content,.top-header{margin-left:0 !important}
  .content-area{padding:0 !important;max-width:100% !important}
  body{background:#fff;font-size:12px}
  .card,.sheet,.table-wrap{box-shadow:none;border:1px solid #ddd}
  .tbl thead th{position:static}
}

/* ---------- 18. A11Y / MOTION ---------- */
.data-health{
  display:grid;gap:14px;margin:18px 0 22px;padding:16px 18px;
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--surface);box-shadow:var(--sh-1)
}
.data-health.is-review{border-color:var(--warn-line);background:color-mix(in srgb,var(--surface) 88%,var(--warn-soft))}
.data-health.is-info{border-color:color-mix(in srgb,var(--info) 24%,var(--line));background:color-mix(in srgb,var(--surface) 90%,var(--info-soft))}
.data-health.is-ok{border-color:var(--ok-line)}
.data-health-main{display:flex;align-items:flex-start;gap:12px}
.data-health-main p{margin-top:4px;color:var(--ink-2);font-size:.82rem;max-width:940px}
.data-health-icon{display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;border-radius:10px;background:var(--warn-soft);color:var(--warn);font-size:1rem;font-weight:850}
.data-health.is-info .data-health-icon{background:var(--info-soft);color:var(--info)}
.data-health.is-ok .data-health-icon{background:var(--ok-soft);color:var(--ok)}
.data-health-title{font-size:.93rem;font-weight:780;color:var(--ink)}
.data-health-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.data-health-item{min-width:0;padding:11px 12px;border:1px solid var(--line);border-radius:var(--r);background:color-mix(in srgb,var(--surface) 96%,transparent)}
.data-health-item.is-informational{border-color:color-mix(in srgb,var(--info) 20%,var(--line));background:color-mix(in srgb,var(--surface) 94%,var(--info-soft))}
.data-health-item>span{display:block;color:var(--ink-3);font-size:.68rem;font-weight:750;text-transform:uppercase;letter-spacing:.045em}
.data-health-item>strong{display:block;margin-top:3px;font-size:.84rem;color:var(--ink)}
.data-health-item>small{display:block;margin-top:5px;color:var(--ink-2);font-size:.72rem}
.data-health-docs{display:flex;gap:5px;flex-wrap:wrap;margin-top:7px}
.data-health-docs a{padding:3px 7px;border:1px solid var(--warn-line);border-radius:999px;background:var(--warn-soft);color:var(--warn);font-size:.69rem;font-weight:720}
.data-health-item.is-informational .data-health-docs a{border-color:color-mix(in srgb,var(--info) 24%,var(--line));background:var(--info-soft);color:var(--info)}
.data-health-actions{display:flex;gap:8px;flex-wrap:wrap}

.filter-panel{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr)) auto auto;align-items:end;gap:12px;margin-bottom:16px}
.filter-panel label{display:flex;flex-direction:column;gap:6px;min-width:0;margin:0}
.filter-panel label>span{color:var(--ink-2);font-size:.7rem;font-weight:700}
.filter-panel input,.filter-panel select{width:100%;min-width:0}
.reconciliation-summary{margin-bottom:14px}
.reconciliation-note{margin:0 0 14px}
.reconciliation-note.is-info{border-color:color-mix(in srgb,var(--info) 24%,var(--line));background:var(--info-soft);color:var(--info)}
.reconciliation-note.is-error{border-color:var(--danger-line);background:var(--danger-soft);color:var(--danger)}
.reconciliation-table .num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.reconciliation-reason{margin-top:4px;color:var(--warn);font-size:.7rem;font-weight:650}
.reconciliation-reason.is-error{color:var(--danger)}
.reconciliation-diagnostics{margin-top:5px;color:var(--ink-2);font-size:.7rem}
.reconciliation-diagnostics summary{cursor:pointer;color:var(--info);font-weight:650}
.reconciliation-diagnostics .reconciliation-reason{color:var(--ink-2);font-weight:550}

@media (max-width:1023px){
  .filter-panel{grid-template-columns:repeat(2,minmax(0,1fr))}
  .reconciliation-table{min-width:980px}
}
@media (max-width:767px){
  .data-health{padding:14px;margin-top:14px}
  .data-health-grid{grid-template-columns:1fr}
  .data-health-actions .btn{flex:1}
  .filter-panel{grid-template-columns:1fr 1fr}
  .filter-panel .btn{width:100%}
  .reconciliation-table{min-width:0}
}
@media (max-width:479px){
  .filter-panel{grid-template-columns:1fr}
  .data-health-main{gap:9px}
  .data-health-icon{width:30px;height:30px;flex-basis:30px;border-radius:9px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}
::selection{background:rgba(42,75,216,.20)}

/* Scrollbar */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px;border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:var(--ink-3)}
.sidebar::-webkit-scrollbar{width:6px}
.sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border:none}

/* ---------- 19. PAGE-SPECIFIC POLISH ---------- */
/* Expandable partner rows (debts report) */
.prow{cursor:pointer}
.prow:hover{background:var(--brand-soft) !important}
.caret{display:inline-block;transition:transform .18s;color:var(--ink-3);font-size:.7rem}
.prow.open .caret{transform:rotate(90deg);color:var(--brand)}

/* Inline row inputs (landed costs, transfers, opening stock) */
.c-type,.c-amount,.c-method,.rc-type,.rc-amount,
.t-product,.t-qty,.s-prod,.s-qty,.s-cost{
  min-height:38px;padding:8px 11px;font-size:.85rem;border-radius:8px;
}
.t-stock{font-size:.78rem;color:var(--ink-2);font-weight:600;white-space:nowrap}
.rc-rm,.s-rm{
  min-height:32px;width:32px;padding:0;border:none;border-radius:8px;
  background:var(--danger-soft);color:var(--danger);cursor:pointer;font-weight:700;
}
.rc-rm:active,.s-rm:active{transform:scale(.9)}

/* Users settings: default marker */
.udef{font-size:.72rem;color:var(--ink-3);font-weight:600}

/* Approve button (dashboard agent requests) */
.approveBtn{background:var(--ok);color:#fff;border-color:transparent}
.approveBtn:hover{filter:brightness(1.08)}

/* ---------- 20. LEGACY VAR ALIASES (view-ების inline style-ები) ---------- */
:root{
  --success:var(--ok);
  --pri:var(--brand);
  --text-3:var(--ink-3);
  --text-2:var(--ink-2);
  --border:var(--line);
  --error:var(--danger);
  --warning:var(--warn);
}

/* ---------- 21. POS FIX: SCROLL + COMPACT ---------- */
/* პროდუქტის ბადე — ისქროლება (max-height inline-ით მოდის) */
.product-grid{
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  gap:8px;
  padding:2px 2px 4px;
}
.product-grid::-webkit-scrollbar{width:6px}
.product-grid::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px;border:none}

/* პროდუქტის ბარათი — უფრო კომპაქტური */
.product-tile{padding:7px;gap:2px;border-radius:10px}
.pt-photo,.pt-nophoto{border-radius:7px;margin-bottom:1px}
.pt-nophoto{font-size:1.2rem}
.pt-code{font-size:.6rem}
.pt-name{font-size:.74rem;min-height:0;line-height:1.2;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pt-price{font-size:.8rem}
.pt-stock,.pt-comm{font-size:.65rem}

/* ძებნის ველი — კომპაქტური */
#posSearch{min-height:40px;padding:9px 12px;font-size:.88rem}

/* კალათა — მჭიდრო რიგები */
.selected-item-card{padding:8px 10px;gap:8px;margin-bottom:6px;border-radius:10px}
.si-name{font-size:.83rem}
.si-detail{font-size:.72rem}
.si-remove{width:28px;height:28px;min-height:28px}

/* ---------- 22. COMPACT DENSITY (ვერტიკალის დაზოგვა) ---------- */
.content-area{padding-top:14px}
.card{padding:13px;margin-bottom:10px;border-radius:14px}
.form-card{padding:14px;margin-bottom:10px}
.cards{gap:10px;margin-bottom:12px}
.cards .card{padding:12px 13px}
.card-label{margin-bottom:5px;font-size:.72rem}
.card-value{font-size:1.35rem}
.card-header{padding-bottom:9px;margin-bottom:9px}
.page-head{margin-bottom:13px}
h1{font-size:1.25rem}
label,.label{margin-bottom:4px;font-size:.76rem}
input,select,textarea{min-height:42px;padding:10px 12px;font-size:.9rem}
textarea{min-height:70px}
.btn{min-height:40px;padding:0 14px}
.btn-lg{min-height:46px}
.tbl{font-size:.83rem}
.tbl thead th{padding:9px 11px}
.tbl tbody td{padding:10px 11px}
.qa-grid{gap:8px;margin-bottom:14px}
.qa-tile{padding:12px 6px;gap:6px}
.section-title{margin:16px 0 8px}
.grid{gap:10px}

/* ---------- 23. MODAL FIT (ერთ ეკრანზე, არ გადადის მიღმა) ---------- */
.pm-box{
  max-height:88vh;
  max-height:88dvh;
  overflow:hidden;
}
.pm-header{padding:13px 16px 10px}
.pm-body{padding:13px 16px;overscroll-behavior:contain}
.pm-footer{padding:11px 16px 14px;gap:8px}
.pm-field{margin-bottom:10px}
.pm-qty-btn{width:44px;height:44px;font-size:1.25rem;border-radius:10px}
.pm-qty-input{height:44px;font-size:1.1rem;max-width:90px}
.pm-qty-row{margin:2px 0}
.pm-total{padding:10px 13px;font-size:.84rem}
.pm-total-val{font-size:1.05rem}

@media (min-width:640px){
  .card{padding:16px}
  .card-value{font-size:1.5rem}
  h1{font-size:1.5rem}
  .pm-box{max-height:86vh;max-height:86dvh}
}
@media (min-width:1024px){
  .card{padding:17px}
  h1{font-size:1.6rem}
  .content-area{padding-top:20px}
}

/* დაბალი ეკრანები (landscape / პატარა ტელეფონი) */
@media (max-height:700px){
  .pm-box{max-height:94vh;max-height:94dvh}
  .pm-qty-btn{width:40px;height:40px}
  .pm-qty-input{height:40px}
  .pm-body{padding:10px 16px}
}

/* posGrid — რესპონსიული სიმაღლე (inline max-height-ს გადაფარავს) */
#posGrid{max-height:min(44vh,320px) !important}
@media (min-width:1024px){ #posGrid{max-height:min(48vh,420px) !important} }
@media (max-height:700px){ #posGrid{max-height:38vh !important} }

/* ============================================================
   24. RESPONSIVE TABLES — მობილურზე ბარათული ხედი
   ჰორიზონტალური სქროლი აღარ არის: მხოლოდ ზემოთ/ქვემოთ
   ============================================================ */
@media (max-width:767px){
  /* კონტეინერი აღარ სქროლავს გვერდულად */
  .table-wrap,.stmt-wrap{
    overflow-x:visible;
    border:none;background:transparent;box-shadow:none;
    border-radius:0;margin-bottom:0;
  }

  .tbl{display:block;width:100%;font-size:.85rem}
  .tbl thead{display:none}                 /* სათაურები → თითო უჯრაზე გადადის */
  .tbl tbody{display:block;width:100%}

  /* თითო სტრიქონი = ბარათი */
  .tbl tbody tr{
    display:block;width:100%;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:13px;
    box-shadow:var(--sh-1);
    margin-bottom:9px;
    padding:3px 12px;
    overflow:hidden;
  }
  .tbl tbody tr:hover{background:var(--surface)}

  /* თითო უჯრა = label ↔ value ხაზი */
  .tbl tbody td{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    width:100%;padding:8px 0;
    border-bottom:1px solid var(--line-2);
    text-align:right;
    min-height:0;
    word-break:break-word;
  }
  .tbl tbody tr td:last-child{border-bottom:none}
  .tbl tbody td::before{
    content:attr(data-label);
    flex:0 0 auto;max-width:45%;
    font-size:.72rem;font-weight:650;color:var(--ink-2);
    text-align:left;letter-spacing:.01em;
  }
  /* ცარიელი სათაურის სვეტი (მოქმედებები) — label არ ჩანს, ღილაკები სრულ სიგანეზე */
  .tbl tbody td:not([data-label])::before,
  .tbl tbody td[data-label=""]::before{display:none}
  .tbl tbody td:not([data-label]),
  .tbl tbody td[data-label=""]{justify-content:flex-end;gap:8px;flex-wrap:wrap}

  /* ცარიელი მდგომარეობა / colspan */
  .tbl tbody td[colspan]{
    justify-content:center;text-align:center;
    border-bottom:none;padding:14px 0;color:var(--ink-2);
  }
  .tbl tbody td[colspan]::before{display:none}

  /* ჯამების ხაზი */
  .tbl tfoot{display:block}
  .tbl tfoot tr{
    display:block;background:var(--brand-soft);
    border:1px solid var(--line);border-radius:13px;padding:3px 12px;
  }
  .tbl tfoot td{
    display:flex;justify-content:space-between;gap:12px;
    padding:8px 0;border:none;text-align:right;
  }
  .tbl tfoot td::before{
    content:attr(data-label);
    font-size:.72rem;font-weight:650;color:var(--ink-2);text-align:left;
  }

  /* რეპორტების ცხრილი — იგივე ლოგიკა */
  .rpt{display:block;width:100%}
  .rpt thead{display:none}
  .rpt tbody{display:block}
  .rpt tbody tr{
    display:block;background:var(--surface);
    border:1px solid var(--line);border-radius:13px;
    margin-bottom:9px;padding:3px 12px;box-shadow:var(--sh-1);
  }
  .rpt tbody td{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:8px 0;border-bottom:1px solid var(--line-2);text-align:right;
  }
  .rpt tbody tr td:last-child{border-bottom:none}
  .rpt tbody td::before{
    content:attr(data-label);
    flex:0 0 auto;max-width:45%;
    font-size:.72rem;font-weight:650;color:var(--ink-2);text-align:left;
  }

  /* ბარათში მოთავსებული ცხრილი — ორმაგი ჩარჩო არ გამოვიდეს */
  .card > .tbl tbody tr,
  .card-body > .tbl tbody tr{
    border-left:none;border-right:none;border-radius:0;
    box-shadow:none;margin-bottom:0;padding:3px 0;
    border-top:none;border-bottom:1px solid var(--line);
  }
  .card > .tbl tbody tr:last-child,
  .card-body > .tbl tbody tr:last-child{border-bottom:none}

  /* გვერდის სათაური და ღილაკები — არ გადაფარონ */
  .page-head{gap:8px}
  .page-head .btn{flex:0 0 auto}

  /* ფილტრები/კონტროლები — ვერტიკალურად */
  .controls{flex-direction:column;align-items:stretch}
  .controls input,.controls select,.controls .btn{max-width:100%;width:100%}
}

/* გლობალურად: ჰორიზონტალური სქროლი აკრძალულია */
html,body{max-width:100%;overflow-x:hidden}
.content-area{overflow-x:hidden}

/* ============================================================
   25. IPHONE / INSTALLABLE PWA SHELL
   ============================================================ */
:root{
  --safe-top:env(safe-area-inset-top);
  --safe-right:env(safe-area-inset-right);
  --safe-bottom:env(safe-area-inset-bottom);
  --safe-left:env(safe-area-inset-left);
}
html,body{min-height:100%;min-height:100dvh}
body,.app-wrapper{min-height:100vh;min-height:100dvh}
.top-header{
  height:calc(var(--hdr-h) + var(--safe-top));
  padding:var(--safe-top) calc(14px + var(--safe-right)) 0 calc(14px + var(--safe-left));
}
.content-area{
  padding-right:calc(14px + var(--safe-right));
  padding-left:calc(14px + var(--safe-left));
  padding-bottom:calc(var(--tab-h) + 26px + var(--safe-bottom));
}
.sidebar{padding-left:var(--safe-left);padding-bottom:var(--safe-bottom)}
.sidebar-brand{padding-top:calc(20px + var(--safe-top))}
.bottom-nav{padding-right:var(--safe-right);padding-left:var(--safe-left)}
.login-body{
  min-height:100vh;min-height:100dvh;
  padding:calc(20px + var(--safe-top)) calc(20px + var(--safe-right)) calc(20px + var(--safe-bottom)) calc(20px + var(--safe-left));
}
.login-card .btn-block{margin-top:12px}
.login-install-action{margin-top:10px !important}
.login-install-action{min-height:44px}
.login-app-note{margin:14px 2px 0;color:var(--ink-2);font-size:.75rem;text-align:center;line-height:1.45}
.pwa-install-menu{width:100%;border:0;background:transparent;text-align:left;cursor:pointer}
.pwa-install-section[hidden],.pwa-install-menu[hidden]{display:none !important}

.pwa-notice-host{
  position:fixed;z-index:500;top:calc(8px + var(--safe-top));left:calc(10px + var(--safe-left));right:calc(10px + var(--safe-right));
  display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;
}
.pwa-notice{
  width:min(100%,620px);min-height:44px;padding:9px 10px 9px 13px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);
  box-shadow:var(--sh-3);font-size:.82rem;font-weight:600;pointer-events:auto;
}
.pwa-notice-warning{background:var(--warn-soft);color:var(--warn);border-color:var(--warn-line)}
.pwa-notice-error{background:var(--danger-soft);color:var(--danger);border-color:var(--danger-line)}
.pwa-notice-success{background:var(--ok-soft);color:var(--ok);border-color:var(--ok-line)}
.pwa-notice-info{background:var(--info-soft);color:var(--info)}
.pwa-notice-actions{display:flex;gap:6px;flex:0 0 auto}
.pwa-notice-button{
  min-height:36px;border:1px solid currentColor;border-radius:9px;padding:0 10px;
  color:inherit;background:transparent;font:inherit;cursor:pointer;white-space:nowrap;
}

.pwa-install-card{
  position:fixed;z-index:75;left:calc(12px + var(--safe-left));right:calc(12px + var(--safe-right));
  bottom:calc(var(--tab-h) + 12px + var(--safe-bottom));
  display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:10px;
  padding:11px 42px 11px 11px;border:1px solid var(--line);border-radius:16px;
  color:var(--ink);background:var(--surface);box-shadow:var(--sh-pop);
}
.login-body .pwa-install-card{bottom:calc(12px + var(--safe-bottom))}
.pwa-install-card-icon{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,#4a66ef,#273aa7);color:#fff;font-weight:800}
.pwa-install-card-copy{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.pwa-install-card-copy strong{font-size:.84rem}
.pwa-install-card-copy span{font-size:.7rem;color:var(--ink-2);margin-top:3px}
.pwa-install-card-action{min-height:40px;border:0;border-radius:10px;padding:0 11px;background:var(--brand);color:#fff;font-size:.76rem;font-weight:700;cursor:pointer}
.pwa-install-card-close{position:absolute;right:5px;top:5px;width:32px;height:32px;border:0;background:transparent;color:var(--ink-3);font-size:1.2rem;cursor:pointer}

.pwa-sheet-backdrop{
  position:fixed;z-index:600;inset:0;display:flex;align-items:flex-end;justify-content:center;
  padding:var(--safe-top) var(--safe-right) 0 var(--safe-left);
  background:rgba(12,20,32,.58);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
}
.pwa-sheet-backdrop[hidden]{display:none}
.pwa-sheet{
  width:min(100%,520px);max-height:calc(100dvh - var(--safe-top));overflow:auto;overscroll-behavior:contain;
  padding:10px 18px calc(18px + var(--safe-bottom));border-radius:22px 22px 0 0;
  background:var(--surface);color:var(--ink);box-shadow:var(--sh-pop);
}
.pwa-sheet-handle{width:38px;height:4px;margin:0 auto 11px;border-radius:99px;background:var(--line)}
.pwa-sheet-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.pwa-sheet-head strong{display:block;font-size:1.04rem}
.pwa-sheet-head small{display:block;margin-top:3px;color:var(--ink-2);font-size:.72rem;line-height:1.35}
.pwa-sheet-close{width:44px;height:44px;flex:0 0 auto;border:0;border-radius:50%;background:var(--surface-3);color:var(--ink);font-size:1.35rem;cursor:pointer}
.pwa-install-steps{list-style:none;display:flex;flex-direction:column;gap:9px;margin:0 0 14px;padding:0}
.pwa-install-steps li{display:flex;align-items:center;gap:11px;padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2);font-size:.84rem}
.pwa-install-steps li>span{width:30px;height:30px;display:grid;place-items:center;flex:0 0 auto;border-radius:9px;background:var(--brand-soft);color:var(--brand);font-weight:800}
.pwa-sheet-note{margin:0 0 14px;color:var(--ink-2);font-size:.78rem;line-height:1.5}
html.pwa-sheet-open,html.pwa-sheet-open body,html.pwa-modal-open body{overflow:hidden}
.mobile-file-error{display:block;margin-top:5px;color:var(--danger);font-size:.75rem;font-weight:600;line-height:1.4}

html.pwa-keyboard-open .bottom-nav{display:none}
html.pwa-keyboard-open .content-area{padding-bottom:18px}
html.pwa-keyboard-open .pwa-install-card,
html.pwa-modal-open .pwa-install-card{display:none}
html.pwa-keyboard-open .pm-box{max-height:calc(var(--visual-viewport-height,100dvh) - 10px)}

/* The off-canvas/mobile shell stays active through 1023px, including iPhone
   landscape. Keep Safari's focus zoom and touch-target rules aligned with it. */
@media (max-width:1023px){
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),select,textarea,input[type=file]{min-height:44px;font-size:16px}
  input#posSearch,.t-product,.t-qty,.s-prod,.s-qty,.s-cost{min-height:44px;font-size:16px}
  .menu-toggle,.pm-close,.si-remove,.os-edit,.os-del,.od-del,.rm,.delTx,.revTx,.pbtn,.rc-rm,.s-rm{
    min-width:44px !important;min-height:44px !important;
  }
  .btn{min-height:44px}
  .btn-sm{min-width:44px;min-height:44px}
  .nav-link{min-height:44px}
  .pm-qty-btn{width:44px;height:44px;min-width:44px;min-height:44px}
  .pm-qty-input{height:44px;min-height:44px}
  .pwa-install-card-close{right:0;top:0;width:44px;height:44px}
}

@media (max-width:767px){
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),select,textarea,input[type=file]{min-height:44px;font-size:16px}
  input#posSearch{min-height:44px;font-size:16px}
  .t-product,.t-qty,.s-prod,.s-qty,.s-cost{min-height:44px;font-size:16px}
  .menu-toggle,.pm-close,.si-remove,.os-edit,.os-del,.od-del,.rm,.delTx,.revTx,.pbtn,.rc-rm,.s-rm{
    min-width:44px !important;min-height:44px !important;
  }
  .btn-sm{min-width:44px;min-height:44px}
  .btn{min-height:44px}
  .pm-qty-btn{width:44px;height:44px;min-width:44px;min-height:44px}
  .pm-qty-input{height:44px;min-height:44px}
  .pwa-install-card-close{right:0;top:0;width:44px;height:44px}
  .nav-link{min-height:44px}
  .selected-item-card{
    display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name remove" "detail total";
    align-items:center;column-gap:10px;row-gap:4px;
  }
  .si-name{grid-area:name}
  .si-detail{grid-area:detail;min-width:0;overflow-wrap:anywhere}
  .si-total{grid-area:total;text-align:right}
  .si-remove{grid-area:remove;width:44px !important;height:44px !important}
  .form-card[style*="display:flex"]{flex-wrap:wrap}
  .tbl input,.tbl select{max-width:62%;min-width:0}
  .tbl-kv tbody tr{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;padding:9px 12px}
  .tbl-kv tbody td{display:block;width:auto;padding:0;border:0;text-align:left}
  .tbl-kv tbody td:last-child{text-align:right;font-variant-numeric:tabular-nums}
  .tbl-kv tbody td::before{display:none}
  .pm-overlay{padding-right:var(--safe-right);padding-left:var(--safe-left)}
  .pwa-notice{align-items:flex-start;flex-direction:column}
  .pwa-notice-actions,.pwa-notice-button{width:100%}
  .pwa-notice-button{min-height:44px}
  .pwa-install-card{grid-template-columns:40px minmax(0,1fr);padding-right:42px}
  .pwa-install-card-icon{width:40px;height:40px}
  .pwa-install-card-action{grid-column:1/-1;width:100%;min-height:44px}
}

@media (min-width:640px){
  .content-area{padding-right:calc(20px + var(--safe-right));padding-left:calc(20px + var(--safe-left));padding-bottom:calc(var(--tab-h) + 26px + var(--safe-bottom))}
  .pwa-sheet-backdrop{align-items:center;padding:calc(20px + var(--safe-top)) calc(20px + var(--safe-right)) calc(20px + var(--safe-bottom)) calc(20px + var(--safe-left))}
  .pwa-sheet{border-radius:22px;padding-bottom:20px}
  .pwa-sheet-handle{display:none}
}

@media (min-width:1024px){
  .top-header{height:calc(64px + var(--safe-top));padding:var(--safe-top) calc(26px + var(--safe-right)) 0 26px}
  .content-area{padding-right:calc(26px + var(--safe-right));padding-left:26px;padding-bottom:40px}
  .pwa-install-card{left:auto;width:430px;bottom:calc(18px + var(--safe-bottom))}
}

/* ============================================================
   26. PROFESSIONAL ADAPTIVE POLISH — desktop / tablet / phone
   ============================================================ */
:root{
  --bg:#F4F6FA;
  --surface:#FFFFFF;
  --surface-2:#F8FAFC;
  --surface-3:#EEF2F7;
  --ink:#101828;
  --ink-2:#344054;
  --ink-3:#667085;
  --line:#DDE3EC;
  --line-2:#EDF1F6;
  --brand:#3157E5;
  --brand-hover:#2448C7;
  --brand-soft:#EEF2FF;
  --brand-ink:#2442A8;
  --nav-bg:#0b3b2e;
  --nav-ink:#d2e5d9;
  --nav-section:#a3bfaf;
  --nav-active:linear-gradient(135deg,#087545,#065e38);
  --nav-w:272px;
  --hdr-h:62px;
  --content-max:1520px;
  --focus-ring:0 0 0 4px rgba(49,87,229,.15);
  --sh-1:0 1px 2px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.04);
  --sh-2:0 2px 5px rgba(16,24,40,.06),0 8px 24px rgba(16,24,40,.055);
  --sh-3:0 12px 38px rgba(16,24,40,.13);
}

[data-theme="dark"]{
  --bg:#090E16;
  --surface:#111925;
  --surface-2:#0D1520;
  --surface-3:#1B2635;
  --ink:#F2F4F7;
  --ink-2:#CDD5DF;
  --ink-3:#98A2B3;
  --line:#293548;
  --line-2:#1F2A3A;
  --brand:#7391FF;
  --brand-hover:#89A2FF;
  --brand-soft:#1B294D;
  --brand-ink:#C8D3FF;
  --nav-bg:#05261c;
  --nav-ink:#d0e4d7;
  --nav-section:#9cbaa8;
  --focus-ring:0 0 0 4px rgba(115,145,255,.2);
}

html{color-scheme:light;scroll-behavior:smooth}
html[data-theme="dark"]{color-scheme:dark}
body{
  background:
    radial-gradient(900px 520px at 92% -16%,rgba(49,87,229,.07),transparent 62%),
    var(--bg);
}
button,input,select,textarea{font:inherit}
button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button{color:inherit}
.skip-link{
  position:fixed;z-index:1000;top:8px;left:10px;
  transform:translateY(-150%);padding:10px 14px;border-radius:10px;
  background:var(--brand);color:#fff;font-weight:700;box-shadow:var(--sh-3);
}
.skip-link:focus{transform:none}

.app-wrapper{isolation:isolate}
.top-header{
  border-bottom-color:color-mix(in srgb,var(--line) 82%,transparent);
  box-shadow:0 1px 0 rgba(16,24,40,.02);
}
.header-context{display:flex;flex-direction:column;justify-content:center;min-width:0;line-height:1.15}
.header-eyebrow{font-size:.64rem;font-weight:750;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);margin-bottom:3px}
.header-title{font-size:.93rem;font-weight:730;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:44vw}
.header-right{min-width:0}
.header-logout-form{margin:0}
.icon-button{
  width:40px;height:40px;min-width:40px;display:inline-grid;place-items:center;
  border:1px solid var(--line);border-radius:11px;background:var(--surface);color:var(--ink-2);
  box-shadow:var(--sh-1);cursor:pointer;transition:background .15s,border-color .15s,transform .08s;
}
.icon-button:hover{background:var(--surface-3);border-color:var(--ink-3)}
.icon-button:active{transform:scale(.95)}
.icon-button svg{width:18px;height:18px}
.theme-icon-sun{display:none}
.theme-icon-moon{display:block}
[data-theme="dark"] .theme-icon-sun{display:block}
[data-theme="dark"] .theme-icon-moon{display:none}
.connectivity-state{align-items:center;gap:7px;padding:6px 9px;border:1px solid var(--line);border-radius:999px;background:var(--surface-2);color:var(--ink-2)}
.connectivity-state>span{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px var(--ok-soft)}
.connectivity-state b{font-size:.68rem;font-weight:700}
.connectivity-state.offline>span{background:var(--warn);box-shadow:0 0 0 3px var(--warn-soft)}
.connectivity-state.offline{color:var(--warn);border-color:var(--warn-line)}

.menu-toggle{width:42px;height:42px;border:1px solid var(--line);background:var(--surface);box-shadow:var(--sh-1)}
.menu-toggle svg{width:21px;height:21px}
.sidebar{
  background:
    radial-gradient(480px 300px at 10% -8%,rgba(21,144,87,.2),transparent 62%),
    var(--nav-bg);
  border-right:1px solid rgba(255,255,255,.06);
}
.sidebar-brand{
  padding:calc(18px + var(--safe-top)) 18px 14px;
  color:#fff;text-decoration:none;gap:11px;min-height:74px;
}
.sidebar-brand:hover{color:#fff}
.sidebar-brand-mark{
  width:38px !important;height:38px !important;border-radius:12px !important;
  background:linear-gradient(145deg,#17844e,#087545 56%,#054d2e) !important;
  box-shadow:0 8px 22px rgba(8,117,69,.42) !important;
}
.sidebar-brand-copy{display:flex !important;flex-direction:column;align-items:flex-start !important;justify-content:center !important;width:auto !important;height:auto !important;background:none !important;border-radius:0 !important;box-shadow:none !important;color:#fff !important;min-width:0}
.sidebar-brand-copy strong{font-size:.98rem;line-height:1.2;letter-spacing:-.01em}
.sidebar-brand-copy small{font-size:.66rem;font-weight:550;color:#adcbba;margin-top:3px;letter-spacing:.025em}
.sidebar-nav{flex:1;overflow-y:auto;padding:4px 11px 12px}
.nav-section{color:var(--nav-section);padding:15px 11px 6px}
.nav-link{width:100%;border:0;background:transparent;text-align:left;font-family:var(--font);cursor:pointer;position:relative}
.nav-link.active{background:var(--nav-active);box-shadow:0 7px 20px rgba(5,77,46,.28)}
.nav-link.active::after{content:'';position:absolute;right:9px;width:5px;height:5px;border-radius:50%;background:#fff;opacity:.78}
.sidebar-footer{padding:12px calc(11px + var(--safe-right)) calc(12px + var(--safe-bottom)) 11px;border-top:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.08)}
.sidebar-user{display:flex;align-items:center;gap:10px;padding:3px 8px 10px;min-width:0}
.user-avatar{width:34px;height:34px;display:grid;place-items:center;flex:0 0 auto;border-radius:10px;background:rgba(255,255,255,.1);color:#fff;font-size:.82rem;font-weight:800}
.sidebar-user-copy{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.sidebar-user-copy strong{font-size:.77rem;color:#f0f5f1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-user-copy small{font-size:.65rem;color:#adcbba;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-logout-form{margin:0}
.sidebar-logout{min-height:42px;color:#d2e5d9}
.sidebar-overlay{padding:0;border:0;cursor:pointer}
body.sidebar-open{overflow:hidden}

.main-content{width:auto}
.content-area{width:100%;max-width:var(--content-max)}
.page-head{align-items:center}
.page-head h1{min-width:min(100%,240px)}
h1{color:var(--ink);letter-spacing:-.025em}
h2,h3,h4{color:var(--ink)}
.section-title{color:var(--ink-3)}
.section-heading{margin:24px 0 12px;font-size:1rem;font-weight:760;letter-spacing:-.015em;color:var(--ink)}
.list-toolbar{display:grid;grid-template-columns:minmax(220px,1fr) auto auto;align-items:center;gap:8px;max-width:820px;margin:0 0 14px}
.list-toolbar input{min-width:0}
.document-filters{
  grid-template-columns:repeat(auto-fit,minmax(168px,1fr));align-items:end;max-width:none;
  padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--surface);box-shadow:var(--sh-1)
}
.filter-field{display:flex;flex-direction:column;gap:6px;min-width:0;margin:0}
.filter-field>span{font-size:.7rem;line-height:1.25;font-weight:700;color:var(--ink-2)}
.filter-field input,.filter-field select{width:100%;min-width:0;background:var(--surface)}
.filter-search{grid-column:span 2}
.filter-actions{display:flex;align-items:center;gap:8px;min-height:44px}
.filter-actions .btn{flex:1;white-space:nowrap}
.pagination-shell{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:12px 0 4px}
.pagination-summary{font-size:.76rem;font-weight:620;color:var(--ink-2)}
.pagination{display:flex;align-items:center;justify-content:flex-end;gap:5px;flex-wrap:wrap}
.pagination-link{min-width:40px;min-height:40px;display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:0 10px;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--ink-2);font-size:.78rem;font-weight:680;box-shadow:var(--sh-1)}
.pagination-link:hover{border-color:var(--brand);background:var(--brand-soft);color:var(--brand)}
.pagination-link.active{border-color:var(--brand);background:var(--brand);color:#fff;pointer-events:none}
.pagination-edge{padding-right:12px;padding-left:12px}
.pagination-gap{padding:0 2px;color:var(--ink-3)}

.card,.form-card,.table-wrap,.stmt-wrap,.sheet{
  border-color:var(--line);box-shadow:var(--sh-1);
}
.card,.form-card{background:color-mix(in srgb,var(--surface) 97%,var(--brand) 3%)}
.cards .card{border-top:2px solid color-mix(in srgb,var(--brand) 40%,var(--line));isolation:isolate}
.cards .card::after{content:'';position:absolute;width:80px;height:80px;right:-34px;top:-44px;border-radius:50%;background:var(--brand-soft);opacity:.75;z-index:-1}
.card-value{overflow-wrap:anywhere}
.qa-tile{min-height:102px}
.qa-ic{filter:saturate(.88)}

.btn{border-radius:10px;font-weight:680;letter-spacing:-.005em}
.btn-primary,.btn:not(.btn-secondary):not(.btn-outline):not(.btn-success):not(.btn-danger):not(.btn-warning){background:linear-gradient(180deg,color-mix(in srgb,var(--brand) 92%,#fff),var(--brand));color:#fff}
.btn:focus-visible,.icon-button:focus-visible,.menu-toggle:focus-visible{box-shadow:var(--focus-ring);outline:none}
input:focus,select:focus,textarea:focus{box-shadow:var(--focus-ring)}
.alert-danger{background:var(--danger-soft);color:var(--danger);border-color:var(--danger-line)}
.text-success{color:var(--ok) !important}
.text-danger{color:var(--danger) !important}
.text-warning{color:var(--warn) !important}
.text-info{color:var(--info) !important}

.tbl thead th,.rpt th{color:var(--ink-2);background:var(--surface-2)}
.tbl tbody tr:focus-within{background:var(--brand-soft)}
.table-wrap:focus-within{border-color:color-mix(in srgb,var(--brand) 55%,var(--line));box-shadow:var(--focus-ring)}

.login-body{
  background:
    radial-gradient(820px 460px at 12% 0,rgba(49,87,229,.16),transparent 68%),
    radial-gradient(720px 480px at 100% 100%,rgba(49,87,229,.09),transparent 70%),
    var(--bg);
}
.login-card{max-width:430px;padding:30px;border-color:color-mix(in srgb,var(--line) 88%,var(--brand));box-shadow:0 24px 70px rgba(16,24,40,.14)}
.login-brand{display:flex;align-items:center;justify-content:center;gap:11px;margin-bottom:26px}
.login-brand-mark{width:44px;height:44px;display:grid;place-items:center;border-radius:14px;background:linear-gradient(145deg,#6682FF,#3157E5 58%,#233CA7);color:#fff;font-size:1.08rem;font-weight:850;box-shadow:0 10px 24px rgba(49,87,229,.32)}
.login-brand>span:last-child{display:flex;flex-direction:column;line-height:1.2}
.login-brand strong{font-size:1.05rem;letter-spacing:-.015em}
.login-brand small{margin-top:3px;color:var(--ink-3);font-size:.68rem;font-weight:600}
.login-heading{text-align:center;margin-bottom:22px}
.login-heading h1{font-size:1.38rem;margin-bottom:6px}
.login-heading p{font-size:.82rem;color:var(--ink-2)}
.login-card label{margin-bottom:13px}
.login-app-note{display:flex;align-items:flex-start;justify-content:center;gap:7px}
.status-dot{width:7px;height:7px;margin-top:4px;flex:0 0 auto;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px var(--ok-soft)}

.bottom-nav{box-shadow:0 -8px 28px rgba(16,40,29,.07)}
.bottom-nav-item{border:0;background:transparent;font-family:var(--font);cursor:pointer;overflow:hidden}
.bottom-nav-item>span{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bottom-nav-item.active{font-weight:720}

[data-theme="dark"] .tbl tbody tr[style*="background:#f0fdf4"],
[data-theme="dark"] .tbl tbody tr[style*="background: #f0fdf4"]{background:var(--ok-soft) !important}
[data-theme="dark"] .tbl tbody tr[style*="background:#eff6ff"],
[data-theme="dark"] .tbl tbody tr[style*="background: #eff6ff"]{background:var(--brand-soft) !important}
[data-theme="dark"] .tbl tfoot tr[style*="background:#f9fafb"]{background:var(--surface-2) !important}

@media (hover:hover) and (pointer:fine){
  .cards .card:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
}

@media (max-width:1023px){
  .sidebar{box-shadow:18px 0 54px rgba(5,24,15,.34)}
  .sidebar[aria-hidden="true"]{visibility:hidden;transition:transform .26s cubic-bezier(.32,.72,0,1),visibility 0s linear .26s}
  .sidebar[aria-hidden="false"]{visibility:visible;transition:transform .26s cubic-bezier(.32,.72,0,1)}
  .top-header{gap:9px}
  .header-title{font-size:.9rem;max-width:52vw}
  .icon-button{width:42px;height:42px;min-width:42px}
  #posForm>.btn-block,#trForm>.btn-block{
    position:sticky;z-index:34;bottom:calc(var(--tab-h) + 8px + var(--safe-bottom));
    box-shadow:0 12px 34px rgba(16,24,40,.2),0 0 0 5px color-mix(in srgb,var(--bg) 82%,transparent);
  }
}

@media (max-width:767px){
  .list-toolbar{grid-template-columns:1fr 1fr;max-width:none}
  .list-toolbar input{grid-column:1/-1}
  .list-toolbar .btn{width:100%}
  .document-filters{grid-template-columns:repeat(2,minmax(0,1fr));padding:12px}
  .document-filters .filter-search,.document-filters .filter-actions{grid-column:1/-1}
  .document-filters input{grid-column:auto}
  .pagination-shell{align-items:stretch;flex-direction:column}
  .pagination{justify-content:flex-start}
  .pagination-link{min-width:44px;min-height:44px}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cards .card{min-height:104px;padding:13px}
  .card-value{font-size:clamp(1.08rem,5vw,1.42rem)}
  .page-head{align-items:stretch}
  .page-head h1{flex-basis:100%}
  .page-head>.btn{flex:1;min-width:min(100%,130px)}
  .qa-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .qa-tile{min-height:92px;padding:11px 6px}
  .qa-ic{font-size:1.35rem}
  .qa-lb{font-size:.7rem}
  .form-card[style*="display:flex"]>label{flex:1 1 100% !important;min-width:0 !important}
  .table-wrap{width:100%}
  .tbl tbody td[data-label=""]>.btn,.tbl tbody td:not([data-label])>.btn{flex:1}
  .login-card{padding:26px 20px}
}

@media (max-width:479px){
  .document-filters{grid-template-columns:1fr}
  .document-filters .filter-field,.document-filters .filter-search,.document-filters .filter-actions{grid-column:1}
  .content-area{
    padding-right:calc(11px + var(--safe-right));
    padding-left:calc(11px + var(--safe-left));
  }
  .header-title{max-width:47vw}
  .cards{gap:8px}
  .cards .card{min-height:98px;padding:12px}
  .card-label{font-size:.68rem;line-height:1.35}
  .card-value{font-size:clamp(1rem,5.3vw,1.28rem)}
  .form-card{padding:13px}
  .pm-footer{display:grid;grid-template-columns:1fr 1.35fr}
  .pm-footer .btn{width:100%}
  .pwa-install-card{left:calc(8px + var(--safe-left));right:calc(8px + var(--safe-right))}
  .pagination-edge span{display:none}
}

@media (max-width:359px){
  .cards{grid-template-columns:1fr}
  .qa-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .header-title{max-width:42vw;font-size:.82rem}
}

@media (min-width:768px) and (max-width:1023px){
  .content-area{padding-top:22px}
  .table-wrap>.tbl,.table-wrap>.rpt{width:max-content;min-width:100%}
  .cards{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
  .qa-grid{grid-template-columns:repeat(auto-fill,minmax(118px,1fr))}
}

@media (min-width:1024px){
  .top-header{box-shadow:0 1px 0 rgba(16,24,40,.03)}
  .header-title{font-size:.96rem;max-width:28vw}
  .content-area{padding-top:24px}
  .sidebar-footer{padding-bottom:14px}
}

/* ---------- 31. DESKTOP QUICK NAVIGATION ---------- */
.quick-nav{display:none}
.quick-nav [hidden]{display:none !important}
.quick-nav-editor .pm-box{max-width:620px}
.quick-nav-help{margin:0 0 12px;color:var(--ink-2);font-size:.79rem;line-height:1.5}
.quick-nav-options{display:flex;flex-direction:column;gap:7px}
.quick-nav-option{
  display:flex;align-items:center;gap:10px;min-height:48px;padding:7px 8px 7px 12px;
  border:1px solid var(--line);border-radius:11px;background:var(--surface-2)
}
.quick-nav-option label{display:flex;align-items:center;gap:10px;min-width:0;flex:1;margin:0;cursor:pointer;font-size:.84rem;font-weight:650}
.quick-nav-option input{width:18px;height:18px;min-height:0;flex:0 0 auto;accent-color:var(--brand)}
.quick-nav-option-icon{width:24px;text-align:center;font-size:1rem;line-height:1}
.quick-nav-order-controls{display:flex;gap:5px;flex:0 0 auto}
.quick-nav-order-controls button{
  width:36px;height:34px;border:1px solid var(--line);border-radius:8px;background:var(--surface);
  color:var(--ink-2);font:700 1rem/1 var(--font);cursor:pointer
}
.quick-nav-order-controls button:hover:not(:disabled){border-color:var(--brand);color:var(--brand);background:var(--brand-soft)}
.quick-nav-order-controls button:disabled{opacity:.3;cursor:not-allowed}
.quick-nav-status{min-height:20px;margin:9px 0 0;color:var(--warn);font-size:.76rem;font-weight:650}
.quick-nav-footer{flex-wrap:wrap}

@media (min-width:1024px){
  .quick-nav{
    position:sticky;top:calc(64px + var(--safe-top));z-index:59;
    display:flex;align-items:stretch;gap:10px;min-width:0;min-height:58px;
    margin-left:var(--nav-w);padding:8px 26px;
    background:color-mix(in srgb,var(--surface) 94%,transparent);
    border-bottom:1px solid var(--line);box-shadow:0 5px 18px rgba(16,24,40,.04);
    backdrop-filter:saturate(170%) blur(16px);-webkit-backdrop-filter:saturate(170%) blur(16px)
  }
  .quick-nav-list{
    display:flex;align-items:center;gap:7px;min-width:0;flex:1;overflow-x:auto;overflow-y:hidden;
    scrollbar-width:thin;overscroll-behavior-inline:contain;padding-bottom:1px
  }
  .quick-nav-list::-webkit-scrollbar{height:5px}
  .quick-nav-list::-webkit-scrollbar-thumb{background:var(--line);border-radius:999px}
  .quick-nav-link{
    display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;min-height:40px;padding:0 12px;
    border:1px solid var(--line);border-radius:10px;background:var(--surface);box-shadow:var(--sh-1);
    color:var(--ink-2);font-size:.76rem;font-weight:690;white-space:nowrap;transition:border-color .14s,background .14s,color .14s,transform .14s
  }
  .quick-nav-link:hover{border-color:color-mix(in srgb,var(--brand) 48%,var(--line));background:var(--brand-soft);color:var(--brand);transform:translateY(-1px)}
  .quick-nav-link.active{border-color:var(--brand);background:var(--brand);color:#fff;box-shadow:0 4px 12px rgba(8,117,69,.22)}
  .quick-nav-icon{font-size:.95rem;line-height:1}
  .quick-nav-empty{align-self:center;color:var(--ink-3);font-size:.76rem;font-weight:620;white-space:nowrap}
  .quick-nav-edit{
    display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:0 0 auto;min-height:40px;padding:0 12px;
    border:1px solid var(--line);border-radius:10px;background:var(--surface-2);color:var(--ink-2);
    font:680 .74rem/1 var(--font);cursor:pointer;white-space:nowrap
  }
  .quick-nav-edit:hover{border-color:var(--brand);background:var(--brand-soft);color:var(--brand)}
}

@media (min-width:1440px){
  .content-area{padding-right:34px;padding-left:34px}
  .cards{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
}

@media (max-height:620px) and (max-width:1023px){
  .sidebar-brand{min-height:60px;padding-top:calc(10px + var(--safe-top));padding-bottom:8px}
  .sidebar-brand-mark{width:34px !important;height:34px !important}
  .nav-section{padding-top:10px}
  .nav-link{padding-top:8px;padding-bottom:8px}
  .sidebar-user{display:none}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}

@media print{
  .quick-nav,.quick-nav-editor{display:none !important}
}

/* ---------- Customer orders module ---------- */
html.order-dialog-open,html.order-dialog-open body{overflow:hidden}
.sr-only{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0
}
.order-isolation-note,.order-completed-note,.order-posting-warning{
  display:flex;align-items:flex-start;gap:8px;margin:0 0 14px;padding:12px 14px;
  border:1px solid var(--warn-line);border-radius:12px;background:var(--warn-soft);color:var(--warn);
  font-size:.84rem;line-height:1.5
}
.order-isolation-note strong,.order-completed-note strong,.order-posting-warning strong{flex:0 0 auto;color:inherit}
.order-completed-note{border-color:var(--ok-line);background:var(--ok-soft);color:var(--ok)}
.order-title-line,.order-head-actions,.order-section-head{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap
}
.order-head-actions{justify-content:flex-end}
.order-section-head{width:100%;justify-content:space-between}
.order-section-head p{margin-top:2px;color:var(--ink-2);font-size:.76rem;font-weight:450}
.order-form-section .card-header,.order-product-section .card-header,.order-lines-section .card-header{margin-bottom:12px}
.order-fields-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px
}
.order-fields-grid label,.order-dialog-grid label,.order-advance-form label,.order-final-grid label{
  display:flex;flex-direction:column;gap:5px;margin:0;min-width:0
}
.order-fields-grid label>span,.order-dialog-grid label>span,.order-advance-form label>span,.order-final-grid label>span{
  color:var(--ink-2);font-size:.72rem;font-weight:700
}
.order-notes-field{grid-column:1/-1}
.order-product-search{display:block;margin:0 0 10px}
.order-product-grid{max-height:330px}
.order-product-tile{min-width:0;align-items:stretch;text-align:left}
.order-product-tile img,.order-product-placeholder{
  width:100%;aspect-ratio:1.22/1;display:block;object-fit:cover;border-radius:8px;background:var(--surface-3)
}
.order-product-placeholder{
  background:var(--surface-3);box-shadow:inset 0 0 0 1px var(--line)
}
.product-tile-info{display:flex;flex-direction:column;gap:2px;padding:5px 2px 1px;min-width:0}
.product-tile-info strong{
  display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  color:var(--ink);font-size:.77rem;line-height:1.3
}
.product-tile-info small{overflow:hidden;color:var(--ink-3);font-size:.64rem;text-overflow:ellipsis;white-space:nowrap}
.product-tile-info .product-name-en{color:var(--ink-2)}
.product-stock{color:var(--ink-2);font-size:.66rem;font-variant-numeric:tabular-nums}
.order-product-tile.is-selected{border-color:var(--brand);background:var(--brand-soft)}
.order-product-tile:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.order-line{
  display:grid;grid-template-columns:minmax(220px,1.4fr) minmax(300px,1fr) auto;align-items:center;gap:14px;
  padding:11px 0;border-bottom:1px solid var(--line-2)
}
.order-line:last-child{border-bottom:0}
.order-line-product,.order-product-cell{display:flex;align-items:center;gap:10px;min-width:0}
.order-line-product img,.order-line-product .order-product-placeholder,.order-product-cell img,.order-product-cell .order-product-placeholder{
  width:46px;height:46px;flex:0 0 auto;border-radius:9px;object-fit:cover;background:var(--surface-3)
}
.order-product-tile img[hidden],.order-line-product img[hidden],.order-product-cell img[hidden]{display:none}
.order-line-product>span,.order-product-cell>span{display:flex;flex-direction:column;min-width:0}
.order-line-product strong,.order-product-cell strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.83rem}
.order-line-product small,.order-product-cell small{color:var(--ink-3);font-size:.66rem}
.order-line-comment{
  display:block;margin-top:4px;color:var(--ink-2);font-size:.7rem;line-height:1.45;
  white-space:pre-wrap;overflow-wrap:anywhere
}
.order-line dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.order-line dl div{min-width:0}
.order-line dt{color:var(--ink-3);font-size:.64rem}
.order-line dd{overflow-wrap:anywhere;color:var(--ink);font-size:.78rem;font-weight:700;font-variant-numeric:tabular-nums}
.order-line-actions{display:flex;align-items:center;gap:6px}
.order-totals{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin:0 0 12px;
  overflow:hidden;border:1px solid var(--line);border-radius:14px;background:var(--line)
}
.order-totals>div{display:flex;flex-direction:column;gap:3px;padding:14px;background:var(--surface)}
.order-totals span{color:var(--ink-2);font-size:.7rem;font-weight:700}
.order-totals strong{color:var(--ink);font-size:1.16rem;line-height:1.25;font-variant-numeric:tabular-nums}
.order-totals small{color:var(--ink-3);font-size:.66rem;line-height:1.35}
.order-save-button{margin-bottom:12px}
.order-item-dialog{max-width:680px}
.order-dialog-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.order-line-comment-field{grid-column:1/-1}
.order-dialog-total{
  display:flex;align-items:center;justify-content:space-between;gap:14px;grid-column:1/-1;
  padding-top:10px;border-top:1px solid var(--line)
}
.order-dialog-total span{color:var(--ink-2);font-size:.76rem;font-weight:700}
.order-dialog-total strong{font-size:1.15rem;font-variant-numeric:tabular-nums}
.order-dialog-message{margin:0 16px 10px}
.order-overview{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin:0 0 12px;
  overflow:hidden;border:1px solid var(--line);border-radius:14px;background:var(--line)
}
.order-overview>div{display:flex;flex-direction:column;gap:3px;padding:13px;background:var(--surface)}
.order-overview span{color:var(--ink-3);font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.order-overview strong{overflow-wrap:anywhere;font-size:.86rem}
.order-overview small{overflow-wrap:anywhere;color:var(--ink-2);font-size:.7rem}
.order-inner-table{margin:0;border:0;border-radius:0;box-shadow:none}
.order-view-totals{grid-template-columns:repeat(4,minmax(0,1fr))}
.order-note-copy{max-width:75ch;color:var(--ink-2);white-space:normal}
.order-document-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.order-document-groups h3{margin-bottom:8px}
.order-document-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.order-row-voided{opacity:.58;text-decoration:line-through}
.order-advance-form{
  display:grid;grid-template-columns:minmax(120px,.8fr) minmax(150px,1fr) minmax(180px,1.2fr) minmax(130px,.8fr) minmax(180px,1fr) auto;
  align-items:end;gap:10px;padding-top:14px;border-top:1px solid var(--line-2)
}
.order-advance-note{min-width:0}
.order-posting-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;overflow:hidden;border:1px solid var(--line);border-radius:12px;background:var(--line)}
.order-posting-links>a,.order-posting-links>div{display:flex;flex-direction:column;gap:3px;padding:14px;background:var(--surface);color:var(--ink)}
.order-posting-links span{color:var(--ink-3);font-size:.67rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.order-posting-links strong{font-size:.92rem}
.order-posting-links small{color:var(--ink-2);font-size:.68rem}
.order-posting-links>a:hover{background:var(--brand-soft);color:var(--brand)}
.order-posting-status{align-self:flex-start;padding:3px 7px;border:1px solid;border-radius:999px;font-weight:750}
.order-posting-status.is-posted{border-color:var(--ok-line);background:var(--ok-soft);color:var(--ok)}
.order-posting-status.is-warning{border-color:var(--warn-line);background:var(--warn-soft);color:var(--warn)}
.order-posting-status.is-invalid{border-color:var(--danger-line);background:var(--danger-soft);color:var(--danger)}
.order-posting-unavailable strong{color:var(--warn)}
.order-final-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.order-final-grid form{display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:0}
.order-final-grid form+form{padding-left:24px;border-left:1px solid var(--line)}
.order-final-grid p{max-width:62ch;color:var(--ink-2);font-size:.78rem}
.order-final-grid label{width:100%}
.order-final-grid .btn{white-space:normal;text-align:center}
.order-list-table td{vertical-align:middle}
.order-list-table .num{white-space:nowrap}

@media(max-width:1100px){
  .order-fields-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .order-advance-form{grid-template-columns:repeat(3,minmax(0,1fr))}
  .order-advance-form .btn{width:100%}
}
@media(max-width:767px){
  .order-isolation-note,.order-completed-note,.order-posting-warning{display:block}
  .order-isolation-note strong,.order-completed-note strong,.order-posting-warning strong{display:block;margin-bottom:3px}
  .order-fields-grid,.order-dialog-grid,.order-document-groups,.order-final-grid{grid-template-columns:1fr}
  .order-line{grid-template-columns:1fr;gap:9px}
  .order-line dl{grid-template-columns:repeat(3,minmax(0,1fr))}
  .order-line-actions{justify-content:flex-end}
  .order-totals,.order-overview,.order-view-totals{grid-template-columns:repeat(2,minmax(0,1fr))}
  .order-advance-form{grid-template-columns:repeat(2,minmax(0,1fr))}
  .order-posting-links{grid-template-columns:1fr}
  .order-final-grid form+form{padding:20px 0 0;border-left:0;border-top:1px solid var(--line)}
  #orderForm>.order-save-button{
    position:sticky;z-index:34;bottom:calc(var(--tab-h) + 8px + var(--safe-bottom));margin-top:56px;
    box-shadow:0 12px 34px rgba(16,24,40,.2),0 0 0 5px color-mix(in srgb,var(--bg) 82%,transparent)
  }
}
@media(max-width:479px){
  .order-fields-grid,.order-advance-form{grid-template-columns:1fr}
  .order-totals,.order-overview,.order-view-totals{grid-template-columns:1fr}
  .order-line dl{grid-template-columns:1fr 1fr}
  .order-head-actions{width:100%}
  .order-head-actions .btn{flex:1}
}

/* These rules intentionally come after the shared font shorthand so mobile
   controls keep iOS-safe text sizing and a full finger-sized hit area. */
@media(max-width:1023px){
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),select,textarea,input[type=file]{min-height:44px;font-size:16px}
  .icon-button,.menu-toggle{width:44px;height:44px;min-width:44px;min-height:44px}
}

/* Inventory planning follows the existing operational table vocabulary. */
.planning-intro,.planning-method,.planning-help p{max-width:75ch;line-height:1.6}
.planning-filters{display:flex;align-items:flex-end;flex-wrap:wrap;gap:12px;margin:18px 0}
.planning-filters label{display:flex;flex:1 1 180px;flex-direction:column;gap:6px;font-size:.85rem}
.planning-filters input,.planning-filters select{width:100%;min-width:0}
.planning-results{margin:16px 0 10px;font-size:.85rem;color:var(--ink-2)}
.planning-table{font-variant-numeric:tabular-nums}
.planning-detail{display:block;margin-top:4px;font-size:.76rem}
.planning-help{margin-top:24px;padding:14px 0;border-top:1px solid var(--line)}
.planning-help summary{cursor:pointer;font-weight:600}
.pm-product-photo{display:block;width:100%;max-height:160px;object-fit:contain;margin-bottom:12px}
.pm-product-photo[hidden]{display:none}
@media(max-width:767px){
  .planning-filters label{flex-basis:calc(50% - 12px)}
  .planning-filters .btn{flex:1 1 auto;min-height:44px}
  .planning-table td>div{min-width:0;overflow-wrap:anywhere}
}
@media(max-width:479px){.planning-filters label{flex-basis:100%}}

.tax-workspace section{margin-block:20px}
.tax-intro,.tax-form-help{max-width:75ch;line-height:1.6}
.tax-review-notice{padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2);margin-block:16px}
.tax-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tax-profile-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 24px}
.tax-profile-summary dt{font-size:.82rem;color:var(--ink-2)}
.tax-profile-summary dd{margin:4px 0 0;font-weight:600;overflow-wrap:anywhere}
.tax-form-help{font-size:.83rem;color:var(--ink-2)}
.tax-quality-list{padding-inline-start:22px;line-height:1.6}
.tax-quality-list li+li{margin-top:8px}
.tax-form-status{margin-block:12px}
.tax-workspace .tbl td{overflow-wrap:anywhere}
.tax-review-form fieldset{border:0;padding:0;margin:0 0 20px;min-width:0}
.tax-review-form legend{font-weight:700;margin-bottom:12px;padding:0}
.tax-cell{min-width:0}
.tax-date{word-break:normal;overflow-wrap:normal}
@media(max-width:767px){
  .tax-profile-summary{grid-template-columns:1fr}.tax-actions .btn{min-height:44px}
  .tax-workspace .tbl tbody td::before{flex:0 0 42%;max-width:42%}
  .tax-workspace .tbl td>.tax-cell{flex:1;min-width:0}
  .tax-workspace .tbl .num{word-break:normal;overflow-wrap:normal}
}

/* Keep official green accents within the navigation panels. */
.bottom-nav,.quick-nav{
  --brand:#087545;
  --brand-soft:#eaf5ed;
}
[data-theme="dark"] :is(.bottom-nav,.quick-nav){
  --brand:#66c991;
  --brand-soft:#153b2a;
}
[data-theme="dark"] .quick-nav-link.active{color:#082516}