/* Arishma POS — Page-Specific Styles */

/* ============================================================
   DASHBOARD
   ============================================================ */
.glance-card {
  background: linear-gradient(135deg, var(--surface) 0%, var(--teal-soft) 100%);
  border: 1px solid rgba(15,118,110,.08);
  margin-bottom: var(--sp-4);
}
.glance-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; }
.glance-head h3 { margin: 0; font-size: var(--text-sm); font-weight: var(--fw-bold); color: var(--teal); text-transform: uppercase; letter-spacing: 0.05em; }
.glance-slide { padding: var(--sp-3) 0 var(--sp-1); }
.glance-slide span { display: block; font-size: var(--text-sm); color: var(--muted); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.glance-slide b { display: block; font-size: var(--text-3xl); line-height: var(--lh-tight); font-weight: var(--fw-extrabold); letter-spacing: var(--tracking-tight); color: var(--navy); margin: var(--sp-1) 0; font-variant-numeric: tabular-nums; }
.glance-slide small { color: var(--muted); font-size: var(--text-sm); }
.glance-rotating .glance-slide { display: none; }
.glance-rotating .glance-slide.is-active { display: block; animation: glance-fade 0.4s ease; }
@keyframes glance-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .glance-rotating .glance-slide.is-active { animation: none; } }

.glance-controls { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-2); }
.glance-nav { width: 32px; height: 32px; min-height: 32px; padding: 0; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); font-size: 18px; line-height: 1; cursor: pointer; color: var(--ink); transition: background var(--ease-fast), border-color var(--ease-fast); }
.glance-nav:hover { background: var(--teal-soft); border-color: var(--teal); color: var(--teal); }
.glance-dots { display: flex; gap: var(--sp-2); }
.glance-dot { width: 10px; height: 10px; min-height: 10px; border-radius: 50%; border: 1px solid var(--teal); background: var(--surface); padding: 0; cursor: pointer; transition: background var(--ease-fast), transform var(--ease-fast); }
.glance-dot.is-active { background: var(--teal); transform: scale(1.2); }

:root[data-theme="dark"] .glance-card { background: linear-gradient(135deg, var(--surface) 0%, rgba(20,184,166,.06) 100%); border-color: rgba(20,184,166,.1); }
:root[data-theme="dark"] .glance-slide b { color: var(--ink); }
:root[data-theme="dark"] .glance-head h3 { color: var(--teal); }

/* Dashboard chart */
.dash-chart { display: flex; align-items: flex-end; gap: 2px; height: 140px; padding: var(--sp-2) 0; }
.dash-chart-col { display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); min-width: 0; }
.dash-chart-bar { width: 70%; min-height: 2px; background: linear-gradient(180deg, var(--teal), rgba(15,118,110,.5)); border-radius: var(--r-sm) var(--r-sm) 0 0; transition: height var(--ease-base); }
.dash-chart-bar:hover { opacity: 0.8; }
.dash-chart-label { font-size: 10px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* Dashboard split layout */
.dash-split { display: flex; gap: var(--sp-5); }
.dash-split-main { flex: 1; min-width: 0; }
.dash-split-side { width: 280px; flex-shrink: 0; border-left: 1px solid var(--border-light); padding-left: var(--sp-5); }
.dash-split-side h3, .dash-split-main h3 { font-size: var(--text-base); font-weight: var(--fw-bold); color: var(--navy); padding-bottom: var(--sp-2); margin-bottom: var(--sp-3); border-bottom: 1px solid var(--border-light); }
:root[data-theme="dark"] .dash-split-side h3, :root[data-theme="dark"] .dash-split-main h3 { color: var(--ink); }
@media (max-width: 768px) { .dash-split { flex-direction: column; } .dash-split-side { width: auto; border-left: none; padding-left: 0; border-top: 1px solid var(--border-light); padding-top: var(--sp-4); } }

/* Dashboard donut + method */
.dash-method-row { display: flex; align-items: flex-start; gap: var(--sp-4); }
.dash-method-chart { display: flex; align-items: center; gap: var(--sp-3); flex-shrink: 0; }
.dash-method-table { flex: 1; min-width: 0; overflow-x: auto; }
.dash-donut-legend { display: flex; flex-direction: column; gap: 3px; }
.dash-legend-item { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--text-xs); color: var(--ink); white-space: nowrap; }
.dash-legend-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dash-legend-item b { margin-left: auto; font-weight: var(--fw-semibold); color: var(--muted); }
:root[data-theme="dark"] .dash-method-chart text { fill: var(--ink) !important; }
@media (max-width: 640px) { .dash-method-row { flex-direction: column; } }

/* Chart tokens */
.chart-label { fill: var(--muted); }
.chart-val { fill: var(--teal); }
.chart-scale { fill: var(--faint); }
.chart-text { fill: var(--ink); }
.chart-axis { stroke: var(--border); fill: none; }
:root[data-theme="dark"] .chart-label { fill: var(--faint); }
:root[data-theme="dark"] .chart-val { fill: var(--teal); }
:root[data-theme="dark"] .chart-scale { fill: var(--muted); }
:root[data-theme="dark"] .chart-text { fill: var(--ink); }
:root[data-theme="dark"] .chart-axis { stroke: var(--border); }

/* ============================================================
   POS TERMINAL
   ============================================================ */
.pos-page { max-width: 100%; overflow-x: hidden; }
.pos-products-col { flex: 1; min-width: 0; overflow: hidden; }
.pos-subtitle { color: var(--muted); margin: 0 0 var(--sp-4); font-size: var(--text-base); }
.pos-alert { background: #fef3c7; border: 1px solid var(--amber); border-radius: var(--r-lg); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4); font-weight: var(--fw-semibold); }
.pos-receipt { margin-bottom: var(--sp-4); background: var(--surface); }
.pos-banner { background: var(--navy); color: #fff; border-radius: var(--r-lg); padding: var(--sp-3) var(--sp-5); display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-4); font-size: var(--text-base); }
.pos-banner form { margin: 0; }
.pos-banner-btn { background: var(--surface); color: var(--ink); border: 0; border-radius: var(--r-pill); padding: var(--sp-2) var(--sp-5); font-weight: var(--fw-bold); cursor: pointer; min-height: 36px; white-space: nowrap; }

.pos-layout { display: flex; gap: var(--sp-4); align-items: flex-start; }

.pos-filter { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-4); display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--sp-3); align-items: end; margin-bottom: var(--sp-3); }
.pos-field-search { grid-column: span 2; }
.pos-field label { display: block; font-size: var(--text-xs); color: var(--muted); font-weight: var(--fw-bold); margin-bottom: var(--sp-1); }
.pos-field select, .pos-field input[type="text"], .pos-field input[type="number"], .pos-field input[type="date"] { width: 100%; border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-2) var(--sp-3); min-height: 40px; font-size: var(--text-base); background: var(--surface); }
.pos-search-btn { border: 1px solid var(--border); background: var(--surface); color: var(--ink); border-radius: var(--r-pill); padding: var(--sp-2) var(--sp-5); font-weight: var(--fw-bold); cursor: pointer; min-height: 40px; white-space: nowrap; }

.pos-chips { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: var(--sp-2); margin-bottom: var(--sp-4); padding-bottom: var(--sp-1); }
.pos-chip { border: 1px solid var(--border); background: var(--surface); color: var(--ink); border-radius: var(--r-pill); padding: var(--sp-2) var(--sp-4); min-height: 36px; text-decoration: none; font-weight: var(--fw-semibold); font-size: var(--text-sm); flex-shrink: 0; white-space: nowrap; display: inline-flex; align-items: center; transition: all var(--ease-fast); }
.pos-chip:hover { border-color: var(--teal); color: var(--teal); text-decoration: none; }
.pos-chip.active { background: var(--navy); color: #fff; border-color: var(--navy); }

.pos-grid-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
.pos-card-form { margin: 0; }
.pos-card { display: block; width: 100%; min-width: 0; background: var(--surface); color: var(--ink); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-4); text-align: left; cursor: pointer; font-family: inherit; box-sizing: border-box; transition: border-color var(--ease-fast), box-shadow var(--ease-fast), transform var(--ease-fast); }
.pos-card:hover:not(:disabled) { border-color: var(--teal); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.pos-card:disabled { opacity: 0.6; cursor: default; }
.pos-card-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--sp-3); }
.pos-avatar { width: 36px; height: 36px; min-width: 36px; border-radius: var(--r-md); background: var(--teal-soft); color: var(--teal); display: inline-flex; align-items: center; justify-content: center; font-weight: var(--fw-extrabold); font-size: var(--text-md); }
.pos-card-img { width: 36px; height: 36px; min-width: 36px; border-radius: var(--r-md); object-fit: cover; }
.pos-card-name { display: block; font-size: var(--text-base); font-weight: var(--fw-bold); line-height: 1.35; margin-bottom: var(--sp-1); overflow-wrap: break-word; word-break: break-word; }
.pos-card-sku { display: block; font-size: var(--text-xs); color: var(--muted); margin-bottom: var(--sp-2); }
.pos-card-price { display: block; font-size: var(--text-base); font-weight: var(--fw-extrabold); color: var(--teal); font-variant-numeric: tabular-nums; }

.pos-empty { background: var(--surface-2); border: 2px dashed var(--border); border-radius: var(--r-lg); padding: var(--sp-8) var(--sp-6); text-align: center; color: var(--muted); line-height: var(--lh-relaxed); }
.pos-empty b { color: var(--ink); }

/* POS Cart */
.pos-cart { width: 365px; flex-shrink: 0; position: sticky; top: calc(var(--topbar-h) + var(--sp-4)); padding: var(--sp-4); min-width: 0; box-sizing: border-box; }
.pos-cart > form { display: flex; flex-direction: column; min-height: 0; }
.pos-customer-row { display: flex; gap: var(--sp-2); }
.pos-customer-row select { flex: 1; }
.pos-add-customer { white-space: nowrap; border-radius: var(--r-pill) !important; }
.pos-new-customer { margin-top: var(--sp-2); }
.pos-online { background: var(--surface-2); border-radius: var(--r-md); padding: var(--sp-2) var(--sp-3); font-size: var(--text-sm); margin: var(--sp-3) 0; }
.pos-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--success); margin-right: var(--sp-2); }
.pos-cart-empty { background: var(--surface-2); border-radius: var(--r-lg); padding: var(--sp-8) var(--sp-4); text-align: center; margin-bottom: var(--sp-4); }
.pos-cart-empty b { display: block; margin-bottom: var(--sp-1); }
.pos-cart-empty span { font-size: var(--text-sm); color: var(--muted); }
.pos-cart-lines { margin-bottom: var(--sp-3); overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.pos-cart-line { display: grid; grid-template-columns: 1fr auto auto auto; gap: var(--sp-2); align-items: center; padding: var(--sp-3) 0; border-bottom: 1px solid var(--border-light); font-size: var(--text-base); }
.pos-cart-line span { display: block; font-size: var(--text-xs); color: var(--muted); }
.pos-qty { display: flex; align-items: center; gap: var(--sp-2); }
.pos-qty button { width: 32px; height: 32px; min-height: 32px; padding: 0; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); cursor: pointer; font-weight: var(--fw-bold); font-size: var(--text-base); }
.pos-line-total { font-weight: var(--fw-bold); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pos-remove { border: 0; background: none; color: var(--danger); cursor: pointer; font-size: var(--text-sm); min-height: 28px; padding: var(--sp-1); }
.pos-totals > div { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--sp-2); padding: var(--sp-2) 0; font-size: var(--text-sm); border-bottom: 1px solid var(--border-light); }
.pos-totals > div:last-child { border-bottom: 0; }
.pos-totals > div > label { flex: 1; min-width: 0; }
.pos-totals > div > small { flex-basis: 100%; font-size: var(--text-xs); color: var(--muted); line-height: 1.4; }
.pos-totals input[type="number"] { width: 80px; min-width: 0; border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-1) var(--sp-2); min-height: 34px; text-align: right; font-variant-numeric: tabular-nums; font-size: var(--text-sm); }
.pos-totals input[type="text"] { min-width: 0; max-width: 120px; border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-1) var(--sp-2); min-height: 34px; font-size: var(--text-sm); }
.pos-tax-row { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; flex: 1; justify-content: flex-end; }
.pos-tax-row > span:last-child { white-space: nowrap; font-size: var(--text-sm); }
.pos-tax-row select { border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-1) var(--sp-2); min-height: 34px; min-width: 0; max-width: 100px; font-size: var(--text-sm); }
.pos-totals .btn-small, .pos-totals .btn-secondary { font-size: var(--text-xs); padding: var(--sp-1) var(--sp-2); min-height: 34px; white-space: nowrap; }
.pos-payable { background: var(--navy); color: #fff; border-radius: var(--r-lg); padding: var(--sp-3) var(--sp-4); display: flex; justify-content: space-between; font-weight: var(--fw-extrabold); margin: var(--sp-2) 0; font-size: var(--text-md); font-variant-numeric: tabular-nums; letter-spacing: var(--tracking-tight); }
.pos-discount-total { font-size: var(--text-sm); color: var(--muted); margin-bottom: var(--sp-3); }
.pos-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.pos-btn-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); margin-bottom: var(--sp-2); }
.pos-pill { border-radius: var(--r-pill) !important; padding: var(--sp-2) var(--sp-2) !important; font-size: var(--text-sm); white-space: nowrap; background: var(--surface) !important; border: 1px solid var(--border) !important; color: var(--ink) !important; }
.pos-cash { background: var(--teal) !important; color: #fff !important; border-color: var(--teal) !important; border-radius: var(--r-lg) !important; padding: var(--sp-3) !important; font-size: var(--text-md); font-weight: var(--fw-extrabold); letter-spacing: 0.02em; text-transform: uppercase; }
.pos-orange-note { color: #c2410c; font-size: var(--text-sm); margin-top: var(--sp-3); }

/* POS multi-payment */
.pos-mp-box { border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-3); margin: var(--sp-3) 0; background: var(--surface-2); }
.pos-mp-box summary { cursor: pointer; font-weight: var(--fw-extrabold); margin-bottom: 2px; }
.pos-mp-box b { display: block; margin-bottom: 2px; }
.pos-mp-box > span { display: block; font-size: var(--text-xs); color: var(--muted); margin-bottom: var(--sp-2); }
.pos-mp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); }
.pos-mp-grid label { font-size: var(--text-xs); color: var(--muted); font-weight: var(--fw-bold); }
.pos-mp-grid input { width: 100%; border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-1) var(--sp-2); min-height: 36px; margin-top: var(--sp-1); }

/* POS keyboard shortcuts */
.pos-shortcuts-bar { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); font-size: var(--text-xs); color: var(--muted); margin-bottom: var(--sp-3); }
.pos-shortcuts-bar kbd { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-xs); padding: 1px 6px; font-family: inherit; font-size: var(--text-xs); font-weight: var(--fw-semibold); }

:root[data-theme="dark"] .pos-payable { background: var(--navy); }
:root[data-theme="dark"] .pos-banner { background: var(--navy); }
:root[data-theme="dark"] .pos-card { border-color: var(--border); }

/* POS responsive */
@media (min-width: 1600px) { .pos-grid-cards { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1200px) { .pos-cart { width: 300px; } .pos-grid-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 1024px) { .pos-layout { flex-direction: column; } .pos-cart { width: 100%; position: static; } .pos-cart > form { max-height: none; } .pos-cart-lines { overflow: visible; flex: none; } .pos-grid-cards { grid-template-columns: repeat(2, 1fr); } .pos-field-search { grid-column: span 1; } }
@media (max-width: 640px) {
  .pos-grid-cards { grid-template-columns: 1fr; }
  .pos-filter { grid-template-columns: 1fr; }
  .pos-row-2, .pos-mp-grid { grid-template-columns: 1fr; }
  .pos-btn-row { grid-template-columns: repeat(2, 1fr); }
  .pos-banner { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
  .pos-banner form { width: 100%; display: flex; gap: var(--sp-2); flex-wrap: wrap; }
  .pos-banner-btn { flex: 1; text-align: center; }
  .pos-cart { padding: var(--sp-3); }
  .pos-cart-line { grid-template-columns: 1fr; gap: var(--sp-1); padding: var(--sp-3) 0; }
  .pos-qty { justify-content: flex-start; }
  .pos-line-total { text-align: left; }
  .pos-totals > div { flex-wrap: wrap; }
  .pos-totals input[type="number"] { width: 100%; max-width: none; }
  .pos-payable { flex-direction: column; gap: var(--sp-1); text-align: center; }
  .pos-customer-row { flex-direction: column; }
  .pos-add-customer { width: 100%; text-align: center; }
  .pos-chips { gap: var(--sp-1); }
  .pos-chip { padding: var(--sp-1) var(--sp-3); font-size: var(--text-xs); min-height: 32px; }
  .pos-btn-row button, .pos-btn-row .btn { font-size: var(--text-xs); padding: var(--sp-2) var(--sp-1); min-height: 36px; }
  .pos-cash { font-size: var(--text-sm) !important; padding: var(--sp-3) !important; }
  .pos-shortcuts-bar { display: none; }
  .pos-tax-row { flex-wrap: wrap; }
  .pos-tax-row select { width: 100%; }
}

/* POS modals */
.pos-modal-overlay { position: fixed; inset: 0; background: rgba(10,35,66,.55); display: none; align-items: flex-start; justify-content: center; padding: 12vh 16px 16px; z-index: 1000; overflow-y: auto; }
.pos-modal-overlay.pos-modal-show { display: flex; animation: modal-fade var(--ease-slow); }
.pos-modal-card { background: var(--surface); border-radius: var(--r-xl); width: min(520px,100%); box-shadow: 0 16px 48px rgba(10,35,66,.35); padding: 0; overflow: hidden; display: flex; flex-direction: column; max-height: calc(100vh - 12vh - 32px); max-height: calc(88dvh - 32px); }
.pos-modal-card-wide { width: min(680px,100%); }
.pos-modal-show .pos-modal-card { animation: modal-slide var(--ease-slow); }
.pos-modal-head { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border); background: var(--surface-2); flex-shrink: 0; }
.pos-modal-head h3 { margin: 0; font-size: var(--text-lg); font-weight: var(--fw-bold); }
.pos-modal-x { background: var(--surface-2) !important; color: var(--ink) !important; border-radius: 50% !important; width: 36px; min-width: 36px; min-height: 36px !important; padding: 0 !important; font-size: var(--text-xl); line-height: 1; }
.pos-modal-body { padding: var(--sp-2) var(--sp-5) var(--sp-4); overflow-y: auto; overflow-x: auto; }
.pos-modal-body label { display: block; font-size: var(--text-base); font-weight: var(--fw-semibold); margin: var(--sp-2) 0 var(--sp-1); }
.pos-modal-body input, .pos-modal-body select, .pos-modal-body textarea { width: 100%; }
.pos-modal-foot { display: flex; justify-content: flex-end; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); background: var(--surface-2); border-top: 1px solid var(--border); flex-shrink: 0; }
:root[data-theme="dark"] .pos-modal-head { background: rgba(255,255,255,.04); }
:root[data-theme="dark"] .pos-modal-foot { background: rgba(255,255,255,.04); }
@media (max-width: 640px) { .pos-modal-overlay { padding-top: 8vh; } .pos-modal-head, .pos-modal-foot { padding: var(--sp-3) var(--sp-4); } }

/* POS focus & reduced motion */
.sidebar :focus-visible, .pos-payable :focus-visible, .pos-cash :focus-visible { outline-color: #fff; }
@media (prefers-reduced-motion: reduce) { .pos-modal-overlay.pos-modal-show, .pos-modal-show .pos-modal-card { animation: none; } .pos-card:hover:not(:disabled) { transform: none; } }

/* ============================================================
   PRODUCTS
   ============================================================ */
.prod-image-preview { width: 80px; height: 80px; object-fit: cover; border-radius: var(--r-md); border: 1px solid var(--border); }
.prod-list-thumb { width: 32px; height: 32px; object-fit: cover; border-radius: var(--r-sm); vertical-align: middle; margin-right: var(--sp-2); }
.prod-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-1) var(--sp-4); }
.prod-size-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-2); margin-top: var(--sp-2); }
.prod-size-cell { border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-3); background: var(--surface-2); }
.prod-size-cell label { margin: 0 0 var(--sp-1); }
.prod-size-cell input[type="number"] { margin: 0; }
.prod-matrix-scroll { overflow-x: auto; padding-bottom: var(--sp-1); }
.prod-matrix-inner { min-width: 1100px; }
.prod-matrix-head, .prod-matrix-row { display: grid; grid-template-columns: 1.6fr 1fr 1.2fr 1.4fr .8fr .8fr .6fr 1fr .9fr .9fr; gap: var(--sp-2); align-items: center; }
.prod-matrix-head { font-size: var(--text-xs); color: var(--muted); font-weight: var(--fw-bold); margin-bottom: var(--sp-2); }
.prod-matrix-row { margin-bottom: var(--sp-2); }
.prod-matrix-row input { margin: 0; min-height: 40px; min-width: 0; width: 100%; }
.prod-matrix-actions { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.prod-matrix-actions .btn-small { margin-left: 0; width: 100%; }
.btn-small { padding: var(--sp-1) var(--sp-3) !important; min-height: 36px !important; font-size: var(--text-sm) !important; }

.prod-add-hidden { display: none; }
.prod-count { margin: var(--sp-3) 0 0; color: var(--muted); font-size: var(--text-sm); }
.prod-list-table { width: 100%; border-collapse: collapse; }
.prod-list-table th, .prod-list-table td { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--border-light); text-align: left; vertical-align: top; }
.prod-list-table thead th { background: var(--surface-2); font-size: var(--text-xs); color: var(--muted); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.prod-list-table tbody tr:hover td { background: rgba(15,118,110,.03); }
.prod-group-row td { background: var(--surface-3); border-top: 2px solid var(--navy); padding: var(--sp-2) var(--sp-3); font-weight: var(--fw-bold); }
.prod-group-row form { display: inline; }
.prod-variant-row:hover td { background: var(--surface-2); }
.prod-action-btn { min-height: 36px; padding: var(--sp-1) var(--sp-2); font-size: var(--text-sm); white-space: nowrap; }

:root[data-theme="dark"] .prod-list-table thead th { background: var(--surface-2); color: var(--muted); }
:root[data-theme="dark"] .prod-group-row td { background: var(--surface-3); }

.prod-qty-table { width: 100%; border-collapse: collapse; margin-top: var(--sp-3); }
.prod-qty-table th, .prod-qty-table td { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--border-light); text-align: left; vertical-align: middle; }
.prod-qty-table th { font-size: var(--text-xs); color: var(--muted); }
.prod-qty-table input[type="number"] { margin: 0; min-height: 40px; }

@media (max-width: 1024px) { .prod-form-grid { grid-template-columns: 1fr; } .prod-size-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .prod-size-grid { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================
   SALES
   ============================================================ */
.sales-totals-row td { background: var(--surface-3); border-top: 2px solid var(--navy); padding: var(--sp-3); white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: var(--fw-bold); }
.sales-detail-table { width: 100%; border-collapse: collapse; margin: var(--sp-2) 0; }
.sales-detail-table th, .sales-detail-table td { padding: var(--sp-2) var(--sp-2); border-bottom: 1px solid var(--border-light); text-align: left; font-size: var(--text-base); }
.sales-detail-table th { font-size: var(--text-xs); color: var(--muted); }
:root[data-theme="dark"] .sales-totals-row td { background: rgba(20,184,166,.06); }

/* ============================================================
   STOCK
   ============================================================ */
.stock-tabs { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0 0 var(--sp-3); }
.stock-tab { display: inline-flex; align-items: center; min-height: 36px; padding: var(--sp-2) var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); color: var(--ink); font-size: var(--text-sm); font-weight: var(--fw-semibold); text-decoration: none; transition: all var(--ease-fast); }
.stock-tab:hover { background: var(--surface-2); text-decoration: none; }
.stock-tab-active { background: var(--teal); border-color: var(--teal); color: #fff; }
.stock-head h2 { font-size: var(--text-2xl); font-weight: var(--fw-extrabold); margin: 0 0 var(--sp-1); }
.stock-head p { font-size: var(--text-base); color: var(--muted); margin: 0; }
.stock-tabrow { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: flex-start; margin: var(--sp-5) 0 var(--sp-4); }
.stock-note { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-2) var(--sp-3); font-size: var(--text-sm); color: var(--muted); margin: 0; flex: 1 1 280px; }
.stock-note a { color: var(--teal); }
.stock-filter-rows { display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.stock-filter-rows input[type="text"], .stock-filter-rows select { width: 100%; min-height: 40px; border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-2) var(--sp-3); font-size: var(--text-base); color: var(--ink); background: var(--surface); }
.stock-filter-rows input[type="text"]::placeholder { color: var(--faint); }
.stock-csv-row { display: flex; justify-content: flex-end; margin: 0 0 var(--sp-3); }
.stock-csv-btn { display: inline-flex; align-items: center; min-height: 36px; padding: var(--sp-1) var(--sp-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); color: var(--ink); font-size: var(--text-sm); font-weight: var(--fw-semibold); text-decoration: none; }
.stock-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow-x: auto; }
.stock-table { width: 100%; border-collapse: collapse; font-size: var(--text-base); color: var(--ink); }
.stock-table th { font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--muted); font-weight: var(--fw-semibold); text-align: left; padding: var(--sp-3); border-bottom: 1px solid var(--border); white-space: nowrap; background: var(--surface); vertical-align: bottom; }
.stock-table td { padding: var(--sp-3); border-bottom: 1px solid var(--border-light); vertical-align: top; }
.stock-table tbody tr:last-child td { border-bottom: 0; }
.stock-num { text-align: right !important; font-variant-numeric: tabular-nums; }
.stock-cnt { text-align: center !important; }
.stock-report-table { min-width: 1200px; }
.stock-report-scroll { overflow-x: auto; padding-bottom: var(--sp-1); }
.stock-footnote { font-size: var(--text-sm); color: var(--muted); margin: var(--sp-3) 0 0; }
.stock-xlink { margin: 0 0 var(--sp-4); font-size: var(--text-sm); color: var(--muted); }
.stock-xlink a { color: var(--teal); font-weight: var(--fw-semibold); }
.stock-xlink span { font-weight: var(--fw-semibold); color: var(--ink); }
.stock-actions { display: inline-flex; gap: var(--sp-2); flex-wrap: nowrap; align-items: center; }
.stock-actions .btn { white-space: nowrap; }
.stock-filterbar { display: flex; gap: var(--sp-3); align-items: center; margin-bottom: var(--sp-4); }
.stock-filterbar-form { flex: 1 1 auto; min-width: 0; }
.stock-filterbar-form select { width: 100%; min-height: 40px; border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-2) var(--sp-3); font-size: var(--text-base); color: var(--ink); background: var(--surface); }
.stock-filter { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: flex-end; margin-bottom: var(--sp-3); }
.stock-filter .stock-search { flex: 1 1 320px; }
.stock-filter .stock-search input { width: 100%; min-height: 40px; border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-2) var(--sp-3); font-size: var(--text-base); background: var(--surface); }
.stock-filter .stock-search label { display: block; font-size: var(--text-base); font-weight: var(--fw-semibold); margin: 0 0 var(--sp-1); }
.stock-summary-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; justify-content: space-between; margin-bottom: var(--sp-3); }
.stock-summary-row .prod-count { margin: 0; }

/* Stock movement history */
.movement-in td:last-child b { color: var(--success); }
.movement-out td:last-child b { color: var(--danger); }

/* ============================================================
   REGISTERS
   ============================================================ */
.reg-topcard { border-left: 3px solid var(--teal); }
.reg-topcard-form { display: flex; gap: var(--sp-4); align-items: flex-end; flex-wrap: wrap; }
.reg-topcard-field { flex: 1 1 280px; }
.reg-topcard-field label { display: block; font-size: var(--text-base); font-weight: var(--fw-semibold); margin-bottom: var(--sp-1); }
.reg-topcard-field select { width: 100%; }
.reg-open-btn { min-width: 160px; }
.reg-banner { background: #f0fdfa; border: 1px solid #99f6e4; border-left: 3px solid var(--teal); }
.reg-report-head { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.reg-report-head h3 { margin: 0; }
.reg-status-form { display: flex; gap: var(--sp-3); align-items: center; }
.reg-status-form label { font-size: var(--text-base); font-weight: var(--fw-semibold); }
.reg-report-table th { text-transform: uppercase; letter-spacing: var(--tracking-wide); font-size: var(--text-xs); color: var(--muted); white-space: nowrap; border-bottom: 2px solid var(--border); }
@media (max-width: 640px) { .reg-topcard-form { flex-direction: column; align-items: stretch; } .reg-open-btn { width: 100%; } }

/* ============================================================
   REPORTS
   ============================================================ */
.report-hub { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.report-hub-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); padding: var(--sp-5); text-decoration: none; color: var(--ink); transition: all var(--ease-base); display: block; position: relative; overflow: hidden; }
.report-hub-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--teal), var(--teal-bright)); opacity: 0; transition: opacity var(--ease-base); }
.report-hub-card:hover { border-color: var(--teal); box-shadow: var(--shadow-md); transform: translateY(-2px); text-decoration: none; }
.report-hub-card:hover::before { opacity: 1; }
.report-hub-card h3 { margin: var(--sp-2) 0 var(--sp-2); font-size: var(--text-md); font-weight: var(--fw-bold); }
.report-hub-card p { color: var(--muted); font-size: var(--text-sm); margin: 0; line-height: var(--lh-normal); }
.report-hub-icon { color: var(--teal); font-size: var(--text-2xl); }
.report-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); margin-bottom: var(--sp-4); }
.report-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--sp-3); }
.report-header h3 { margin: 0; }
.pnl-table td { padding: var(--sp-3) var(--sp-4); }
.pnl-section td { background: var(--surface-2); }
.pnl-subtotal td { border-top: 2px solid var(--border); }
.pnl-total td { border-top: 3px double var(--teal); background: var(--teal-soft); font-size: var(--text-md); }
@media (max-width: 900px) { .report-hub { grid-template-columns: repeat(2, 1fr); } .report-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .report-hub { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .report-hub-card:hover { transform: none; } }

/* ============================================================
   LEDGER
   ============================================================ */
.ledger-table th, .ledger-table td { white-space: nowrap; }
.ledger-opening td { background: var(--surface-2); font-weight: var(--fw-semibold); }
.ledger-debit td:nth-child(4) { color: var(--amber); }
.ledger-credit td:nth-child(5) { color: var(--teal); }
.ledger-return td:nth-child(5) { color: var(--purple); }
.ledger-total td { background: var(--teal-soft); font-weight: var(--fw-bold); border-top: 2px solid var(--teal); }
.text-due { color: var(--amber); }

/* ============================================================
   VARIATIONS
   ============================================================ */
.var-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.var-card-head h3 { margin: 0; }
.var-add-btn { background: var(--teal); color: #fff; border: 0; padding: var(--sp-2) var(--sp-5); border-radius: var(--r-pill); cursor: pointer; font: inherit; font-weight: var(--fw-bold); font-size: var(--text-md); min-height: 40px; }
.var-add-btn:hover { background: var(--teal-hover); }
.var-toolbar { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; justify-content: space-between; margin-bottom: var(--sp-4); }
.var-toolbar-left, .var-toolbar-right { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.var-show label { font-size: var(--text-sm); color: var(--muted); }
.var-show select { min-height: 36px; width: auto; display: inline-block; border: 1px solid var(--border); border-radius: var(--r-sm); padding: var(--sp-1) var(--sp-2); background: var(--surface); font-size: var(--text-sm); }
.var-tool-btn { display: inline-flex; align-items: center; min-height: 36px; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); font-size: var(--text-sm); font-weight: var(--fw-semibold); text-decoration: none; cursor: pointer; }
.var-tool-btn:hover { background: var(--surface-2); }
.var-search input[type="search"] { min-height: 36px; border: 1px solid var(--border); border-radius: var(--r-sm); padding: var(--sp-2) var(--sp-3); font-size: var(--text-sm); background: var(--surface); width: 200px; }
.var-colvis { position: relative; }
.var-colvis-panel { position: absolute; top: calc(100% + 4px); left: 0; z-index: 20; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-lg); padding: var(--sp-3); display: none; flex-direction: column; gap: var(--sp-2); white-space: normal; max-width: calc(100vw - 32px); }
.var-colvis-panel.var-colvis-open { display: flex; }
.var-colvis-panel label { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--text-sm); }
.var-colvis-panel input[type="checkbox"] { width: 16px; height: 16px; margin: 0; flex: none; accent-color: var(--teal); }
.var-sort { color: var(--faint); font-size: var(--text-xs); }
.var-action-edit { display: inline-block; padding: var(--sp-1) var(--sp-3); border: 1px solid var(--teal); border-radius: var(--r-sm); color: var(--teal); background: var(--surface); font-size: var(--text-sm); font-weight: var(--fw-semibold); text-decoration: none; white-space: nowrap; }
.var-action-delete { display: inline-block; padding: var(--sp-1) var(--sp-3); border: 1px solid var(--danger); border-radius: var(--r-sm); color: var(--danger); background: var(--surface); font-size: var(--text-sm); font-weight: var(--fw-semibold); cursor: pointer; white-space: nowrap; font-family: inherit; }
.var-value-row { display: flex; gap: var(--sp-2); align-items: center; margin: var(--sp-1) 0; }
.var-value-row input { flex: 1; margin: 0; }
.var-row-remove { background: var(--surface-2) !important; color: var(--ink) !important; border-radius: 50% !important; width: 36px; min-width: 36px; min-height: 36px !important; padding: 0 !important; font-size: 18px; line-height: 1; flex: none; }
.var-modal-close { background: var(--navy); color: #fff; border: 0; padding: var(--sp-2) var(--sp-4); border-radius: var(--r-md); cursor: pointer; min-height: 36px; font: inherit; font-weight: var(--fw-semibold); font-size: var(--text-md); }

/* ============================================================
   CONTACTS / TRANSFERS / PURCHASES
   ============================================================ */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--sp-4); }
.contact-grid .full { grid-column: 1 / -1; }
.contact-help { color: var(--muted); font-size: var(--text-xs); margin: var(--sp-1) 0 0; }
@media (max-width: 640px) { .contact-grid { grid-template-columns: 1fr; } }

.transfer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--sp-4); }
.transfer-grid .full { grid-column: 1 / -1; }
.transfer-btnrow { display: flex; gap: var(--sp-3); justify-content: flex-end; align-items: center; margin: var(--sp-3) 0 var(--sp-4); flex-wrap: wrap; }
.transfer-btnrow .btn { font-weight: var(--fw-bold); }
.transfer-line { display: flex; gap: var(--sp-3); align-items: center; margin-top: var(--sp-3); }
.transfer-line .tl-label { flex: 1 1 auto; min-width: 0; font-size: var(--text-base); }
.transfer-line .tl-qty { width: 84px; flex-shrink: 0; }
.transfer-line .tl-price { width: 120px; flex-shrink: 0; }
.transfer-line .tl-sub { width: 110px; flex-shrink: 0; text-align: right; font-size: var(--text-base); }
.tl-avail { display: block; font-size: var(--text-xs); color: var(--muted); margin-top: 2px; }
.tl-avail-over { color: var(--danger); font-weight: var(--fw-semibold); }
@media (max-width: 640px) { .transfer-grid { grid-template-columns: 1fr; } .transfer-line { flex-wrap: wrap; } .transfer-btnrow .btn, .transfer-btnrow .pos-search-btn { width: 100%; text-align: center; } }

/* Purchase lines */
.purchase-line { display: flex; gap: var(--sp-3); align-items: flex-end; flex-wrap: wrap; margin-top: var(--sp-3); padding: var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-md); }
.purchase-line .pl-label { flex: 1 1 100%; font-size: var(--text-base); font-weight: var(--fw-semibold); }
.purchase-line label { font-size: var(--text-xs); color: var(--muted); }
.purchase-line .pl-qty { width: 76px; }
.purchase-line .pl-cost { width: 110px; }
.purchase-line .pl-batch { width: 130px; }
.purchase-line .pl-mfg, .purchase-line .pl-expiry { width: 140px; }
.purchase-line .pl-sub { width: 110px; flex-shrink: 0; text-align: right; font-size: var(--text-base); font-weight: var(--fw-semibold); }
.purchase-totals { margin-top: var(--sp-4); padding: var(--sp-3) var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); border-left: 3px solid var(--teal); }
.purchase-totals div { display: flex; justify-content: space-between; padding: 2px 0; font-size: var(--text-base); }
.purchase-bulk-row { display: flex; gap: var(--sp-2); align-items: flex-end; flex-wrap: wrap; margin-top: var(--sp-2); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-md); }
.purchase-bulk-row .bulk-label { flex: 1 1 100%; font-size: var(--text-sm); font-weight: var(--fw-semibold); }
.purchase-bulk-row label { font-size: var(--text-xs); color: var(--muted); }
.purchase-bulk-row .bulk-qty { width: 76px; }
.purchase-bulk-row .bulk-cost { width: 110px; }
.purchase-bulk-row .bulk-batch { width: 130px; }
.purchase-bulk-row .bulk-mfg, .purchase-bulk-row .bulk-exp { width: 140px; }
.purchase-add-layout { display: grid; grid-template-columns: 1fr 320px; gap: var(--sp-6); align-items: start; }
.purchase-add-side { position: sticky; top: calc(var(--topbar-h) + var(--sp-4)); }
:root[data-theme="dark"] .purchase-totals { border-left-color: var(--teal); }
@media (max-width: 1024px) { .purchase-add-layout { grid-template-columns: 1fr; } .purchase-add-side { position: static; } }
@media (max-width: 640px) { .purchase-line { padding: var(--sp-2); } }

/* ============================================================
   LABELS
   ============================================================ */
.label-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--sp-3); }
.label-card { border: 1px dashed var(--border); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-2); text-align: center; }
.label-logo { max-height: 12mm; max-width: 30mm; filter: grayscale(1); margin-bottom: var(--sp-1); }
.label-store { font-weight: var(--fw-bold); font-size: var(--text-sm); margin-bottom: var(--sp-1); }
.label-sku { font-size: var(--text-xs); color: var(--muted); margin-bottom: var(--sp-1); }
.label-code { font-size: 10px; color: var(--muted); margin: 2px 0; }
.label-price { font-weight: var(--fw-bold); font-size: var(--text-md); color: var(--teal); margin: var(--sp-1) 0; }
.label-attr { font-size: var(--text-xs); color: var(--muted); }
.label-card svg { max-width: 100%; height: auto; }

/* ============================================================
   SETTINGS FORMS
   ============================================================ */
.card > form > label:first-of-type { margin-top: 0; }
.card > form button[type="submit"] { margin-top: var(--sp-4); }

/* Offline badge */
.offline-badge { display: inline-block; margin-left: var(--sp-3); background: var(--teal-soft); color: var(--teal); border: 1px solid #99f6e4; padding: var(--sp-1) var(--sp-3); border-radius: var(--r-pill); font-size: var(--text-xs); font-weight: var(--fw-bold); }
:root[data-theme="dark"] .offline-badge { background: var(--teal-soft); color: var(--teal); border-color: #115e59; }