:root{--green:#102a43;--green2:#087e8b;--mint:#e6f5f5;--bg:#f4f7fa;--text:#122636;--muted:#526a7d;--border:#d5e0e7;--red:#b42318}
html{color-scheme:light}
html[data-theme="dark"]{color-scheme:dark;--green:#071b2e;--green2:#43c7d1;--mint:#14343c;--bg:#07121f;--text:#f1f6fa;--muted:#b8c7d2;--border:#365064;--red:#ff958c}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:15.5px/1.58 "Segoe UI Variable","Segoe UI",Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--green2);text-decoration:none}
.sidebar{position:fixed;inset:0 auto 0 0;width:235px;background:linear-gradient(180deg,#102a43,#163d56);color:#fff;padding:26px 18px}
.brand{display:flex;gap:12px;align-items:center;margin:0 8px 32px;font-size:18px;font-weight:750;letter-spacing:.01em}
.brand span,.logo{display:grid;place-items:center;width:40px;height:40px;border-radius:11px;background:#f2b84b;color:#102a43;font-size:22px;font-weight:900}
.brand-logo{width:46px;height:46px;object-fit:cover;object-position:center;border-radius:10px;background:white}.login-logo{display:block;width:190px;max-height:128px;object-fit:contain;margin:0 auto 8px}.receipt-logo{width:120px;height:80px;object-fit:contain;background:white}
.brand small,.topbar small,td small{display:block;font-size:13px;font-weight:500;color:#8fa9b6}
.sidebar nav{display:grid;gap:5px}
.sidebar nav a{color:#e0ebe8;padding:11px 14px;border-radius:8px;font-size:15.5px;font-weight:550}
.sidebar nav a:hover{background:#087e8b;color:white}
.main{margin-left:235px}
.topbar{height:72px;background:#fff;border-bottom:1px solid var(--border);padding:0 34px;display:flex;align-items:center;justify-content:flex-end}
.topbar>div{text-align:right;margin-right:18px}
.content{padding:30px 34px;max-width:1500px;margin:auto}
.page-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}
.page-head h1{font-size:29px;line-height:1.25;margin:0;font-weight:750;letter-spacing:-.015em}
.page-head p{color:var(--muted);margin:4px 0}
.btn{display:inline-block;border:0;border-radius:7px;background:var(--green2);color:white;padding:11px 17px;font-size:15px;font-weight:700;cursor:pointer}
.btn-secondary{background:#5c6f7b}
.wide{width:100%}
.link-button{border:0;background:none;color:var(--green2);cursor:pointer}
.theme-toggle{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--border);border-radius:999px;background:#fff;color:var(--text);padding:8px 12px;margin-right:12px;font:inherit;font-weight:650;cursor:pointer}.theme-toggle:hover{border-color:var(--green2)}.theme-toggle-icon{font-size:16px;line-height:1}.floating-theme-toggle{position:fixed;right:18px;top:18px;z-index:5;box-shadow:0 3px 12px #001c1428}
.theme-panel{margin:-14px 4px 22px;padding:12px;border:1px solid #ffffff3b;border-radius:10px;background:#ffffff10}.theme-panel>small{display:block;margin:0 0 7px 3px;color:#bfd0d8;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}.sidebar-theme-toggle{width:100%;justify-content:flex-start;margin:0;border:1px solid #f2b84b;background:#fff;color:#102a43;border-radius:8px;font-size:14px;font-weight:750}.sidebar-theme-toggle:hover{background:#f2b84b;border-color:#f2b84b}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:22px}
.stats article,.panel{background:#fff;border:1px solid var(--border);border-radius:10px;box-shadow:0 1px 3px #102a2212}
.stats article{padding:20px;border-top:3px solid var(--green2)}
.stats small{color:var(--muted);font-size:14px;font-weight:600}
.stats strong{display:block;font-size:25px;margin-top:8px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.panel{overflow:hidden}
.panel-title{display:flex;justify-content:space-between;align-items:center;padding:18px 20px;border-bottom:1px solid var(--border)}
.panel-title h2{font-size:18px;margin:0;font-weight:750}
table{width:100%;border-collapse:collapse}
th,td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--border);vertical-align:top}
td{font-size:15px;font-weight:450}
th{font-size:12px;font-weight:750;text-transform:uppercase;letter-spacing:.055em;color:var(--muted);background:#fafcfb}
.badge{display:inline-block;background:#eef1f0;border-radius:20px;padding:4px 9px;font-size:12px}
.badge.danger{background:#fdecea;color:var(--red)}
.badge.success{background:#e4f5eb;color:#157244}
.positive{color:#157244;font-weight:700}
.negative{color:var(--red);font-weight:700}
.form-panel{padding:25px;max-width:900px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 22px}
.field.full{grid-column:1/-1}
.field label{display:block;font-weight:650;margin-bottom:6px}
.form-control,input,select,textarea{width:100%;border:1px solid #bdcbd3;border-radius:7px;padding:11px 12px;background:white;color:var(--text);font:500 16px/1.45 "Segoe UI Variable","Segoe UI",Roboto,Arial,sans-serif}
.actions{display:flex;gap:18px;align-items:center;margin-top:24px}
.sale-products{margin-top:20px}.product-help{margin-top:-7px;color:var(--muted)}.sale-line{padding:18px 0;border-bottom:1px solid var(--border);align-items:end}.sale-line:last-of-type{border-bottom:0}.product-search{margin-bottom:10px}.select-label{font-size:13px;color:var(--muted)}
.sale-quantity{display:grid;grid-template-columns:1fr 1fr;gap:6px 10px}.sale-quantity label{align-self:end}
.payment-preview{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:20px;padding:16px;border-radius:9px;background:#e6f5f5}.payment-preview small,.payment-preview strong{display:block}.payment-preview small{color:var(--muted);margin-bottom:5px}.payment-preview strong{font-size:20px}.payment-preview>div:last-child strong{color:#157244}html[data-theme="dark"] .payment-preview{background:#14343c}
.errorlist,.error{color:var(--red)}
.message{background:#e4f5eb;color:#155d40;padding:12px 15px;border-radius:7px;margin-bottom:18px}
.stock-alert{display:flex;justify-content:space-between;align-items:center;gap:20px;background:#fff4d6;color:#704c00;border:1px solid #f2cf70;border-left:5px solid #f2b84b;padding:13px 16px;border-radius:8px;margin-bottom:18px}.stock-alert span,.stock-alert small{display:block}.stock-alert small{margin-top:3px;color:#846622}.stock-alert a{white-space:nowrap;font-weight:700}
.receipt{margin:auto;max-width:820px}.receipt-brand{display:flex;align-items:center;justify-content:center;gap:14px;text-align:left}.receipt-mark{display:grid;place-items:center;width:54px;height:54px;border-radius:12px;background:#f2b84b;color:#102a43;font-size:30px;font-weight:900}.receipt-brand h1{margin:0;color:#102a43;font-size:25px;letter-spacing:.02em}.receipt-brand p{margin:2px 0;color:#087e8b;font-weight:700}.receipt-contact{display:flex;justify-content:center;gap:25px;margin:12px 0;color:var(--muted)}.receipt-rule{height:4px;background:linear-gradient(90deg,#102a43 70%,#087e8b 70%,#087e8b 88%,#f2b84b 88%);margin:16px 0 22px}.receipt-meta{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px}.receipt-meta div{background:#f4f7fa;border:1px solid var(--border);padding:10px;border-radius:7px}.receipt-meta small,.receipt-meta b,.receipt-thanks span{display:block}.receipt-total{background:#e6f5f5;font-size:16px}.receipt-thanks{text-align:center;margin:25px 0 12px;color:#102a43}.receipt-thanks b{font-size:16px}.receipt-thanks span{margin-top:4px;color:#087e8b}.receipt-footer{text-align:center;color:var(--muted);font-size:12px;border-top:1px dashed var(--border);padding-top:12px}
.compact-receipt{max-width:720px;padding:18px}.compact-receipt .page-head{margin-bottom:10px}.compact-receipt .receipt-rule{margin:8px 0 12px;height:3px}.compact-receipt .receipt-contact{margin:5px 0;font-size:13px}.compact-receipt .compact-meta{gap:6px;margin-bottom:10px}.compact-receipt .compact-meta div{padding:6px}.compact-receipt th,.compact-receipt td{padding:8px 10px}.compact-receipt .receipt-thanks{margin:12px 0 5px}
.thermal-receipt{max-width:360px}.thermal-receipt .receipt-brand{text-align:center}.thermal-receipt .receipt-brand>div{width:100%;min-width:0}.thermal-receipt .receipt-brand h1{font-size:18px;font-weight:800;letter-spacing:0;white-space:nowrap}.thermal-receipt .receipt-contact{flex-direction:column;gap:2px;text-align:center;font-size:14px;font-weight:700}.thermal-receipt .receipt-number{font-size:14px;font-weight:700}.thermal-receipt .compact-meta{grid-template-columns:1fr 1fr}.receipt-items{table-layout:fixed}.receipt-items .item-column{width:52%}.receipt-items .qty-column{width:18%}.receipt-items .amount-column{width:30%}.receipt-items td,.receipt-items th{overflow-wrap:anywhere}.receipt-items td:nth-child(2),.receipt-items th:nth-child(2){text-align:center}.receipt-items td:last-child,.receipt-items th:last-child{text-align:right;white-space:nowrap}.receipt-items small{font-size:11px;color:var(--muted)}
.search{display:flex;max-width:480px;margin-bottom:18px}
.search input{border-radius:7px 0 0 7px}
.search button{border:0;background:var(--green);color:white;padding:0 18px;border-radius:0 7px 7px 0}
.auth-main{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,#102a43,#087e8b)}
.login-card{width:min(420px,92vw);background:#fff;border-radius:14px;padding:36px;box-shadow:0 20px 50px #001c1460}
.login-card .logo{margin:auto}
.login-card h1{text-align:center;margin-bottom:0}
.login-card>p,.login-card>small{text-align:center;display:block;color:var(--muted)}
.login-card label{display:block;font-weight:600;margin-top:18px}
.login-card input{margin-top:6px}
.login-card .btn{margin-top:20px}
.table-scroll{overflow:auto}
html[data-theme="dark"] .topbar,html[data-theme="dark"] .stats article,html[data-theme="dark"] .panel,html[data-theme="dark"] .login-card{background:#0e2030;box-shadow:0 1px 3px #0007}
html[data-theme="dark"] th{background:#122738}
html[data-theme="dark"] .form-control,html[data-theme="dark"] input,html[data-theme="dark"] select,html[data-theme="dark"] textarea,html[data-theme="dark"] .theme-toggle{background:#122738;color:var(--text);border-color:var(--border)}
html[data-theme="dark"] .sidebar-theme-toggle{background:#f2b84b;color:#102a43;border-color:#f2b84b}
html[data-theme="dark"] .badge{background:#263746;color:#d7e4ec}
html[data-theme="dark"] .badge.danger{background:#472429;color:#ffb4ad}
html[data-theme="dark"] .badge.success{background:#153b30;color:#81deb0}
html[data-theme="dark"] .message{background:#153b30;color:#b3f0d1}
html[data-theme="dark"] .stock-alert{background:#3b321c;color:#ffe39a;border-color:#76612b}html[data-theme="dark"] .stock-alert small{color:#e5c76f}
html[data-theme="dark"] .receipt-meta div{background:#122738}
html[data-theme="dark"] .receipt-total{background:#14343c}
html[data-theme="dark"] .receipt-thanks{color:var(--text)}
@media(max-width:900px){.sidebar{position:static;width:auto}
.sidebar nav{grid-template-columns:repeat(3,1fr)}
.main{margin:0}
.stats{grid-template-columns:1fr 1fr}
.grid-2{grid-template-columns:1fr}
.content{padding:22px 16px}
}
@media(max-width:560px){.stats,.form-grid{grid-template-columns:1fr}
.payment-preview{grid-template-columns:1fr}
.sidebar nav{grid-template-columns:1fr 1fr}
.page-head{align-items:flex-start;gap:15px}
.page-head .btn{white-space:nowrap}
.topbar{padding:0 16px}.topbar>div{margin-right:10px}.floating-theme-toggle{padding:8px 10px;margin-right:7px}.floating-theme-toggle .theme-toggle-text{display:none}.theme-panel{margin:-16px 0 18px}.sidebar-theme-toggle .theme-toggle-text{display:inline}
}
.cashier-slip{margin-top:20px;break-inside:avoid;font-size:13px;line-height:1.3}
.receipt-tear-line{border-top:1px dashed currentColor;text-align:center;padding-top:5px;margin-bottom:10px;font-size:11px}
.cashier-slip h3{font-size:12px;text-align:center;margin:0 0 5px;font-weight:800}
.cashier-slip-number{margin:0 0 6px;text-align:center}
.cashier-slip dl{display:grid;grid-template-columns:45% minmax(0,55%);gap:3px 0;margin:0}
.cashier-slip dt,.cashier-slip dd{margin:0;min-width:0;overflow-wrap:anywhere}
.cashier-slip dd{text-align:right;padding-left:5px}
.cashier-slip .slip-total{font-weight:800;border-top:1px solid currentColor;padding-top:4px}
.slip-cancelled{margin:5px 0 0}
/* Receipt printing: use the selected roll paper; fit the Epson's 52.5mm print area. */
@page nsdg-receipt { size: auto; margin: 0; }
@media print {
  body.receipt-page { page: nsdg-receipt; }
  .receipt-page .sidebar, .receipt-page .topbar, .receipt-page .stock-alert,
  .receipt-page .theme-toggle, .receipt-page .message,
  .receipt-page .receipt .btn, .receipt-page .receipt .actions { display: none !important; }
  html:has(body.receipt-page), body.receipt-page {
    width: auto !important; min-width: 0 !important; max-width: none !important;
    margin: 0 !important; padding: 0 !important; background: #fff !important;
    color: #000 !important; color-scheme: light;
    font: 9pt/1.25 Arial, sans-serif !important;
  }
  .receipt-page .main, .receipt-page .content {
    display: block !important; position: static !important; box-sizing: border-box !important;
    width: 100% !important; min-width: 0 !important; max-width: none !important;
    margin: 0 !important; padding: 0 !important;
  }
  .receipt-page .receipt.thermal-receipt {
    box-sizing: border-box !important; width: 52.5mm !important;
    max-width: 100% !important; min-width: 0 !important;
    margin: 0 auto !important; padding: 2mm .5mm !important;
    background: #fff !important; color: #000 !important;
    border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
    overflow-wrap: anywhere;
  }
  .receipt-page .receipt-brand { display: block; text-align: center; width: 100%; }
  .receipt-page .receipt-brand h1 { font-size: 11pt !important; font-weight: 800 !important; letter-spacing: 0 !important; white-space: nowrap; line-height: 1.2; color: #000 !important; }
  .receipt-page .receipt-brand p, .receipt-page .receipt-contact { font-size: 9pt !important; font-weight: 700 !important; line-height: 1.3; color: #000 !important; }
  .receipt-page .receipt-contact { gap: 0 !important; margin: 1mm 0 !important; }
  .receipt-page .receipt-rule { height: 1px !important; margin: 1.5mm 0 !important; background: #000 !important; }
  .receipt-page .page-head { margin: 0 0 1.5mm !important; }
  .receipt-page .page-head h2 { font-size: 10pt !important; margin: 0 !important; }
  .receipt-page .page-head p { font-size: 9pt !important; margin: .5mm 0 0 !important; }
  .receipt-page .compact-meta { display: grid !important; grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important; gap: 1mm !important; margin-bottom: 1.5mm !important; }
  .receipt-page .compact-meta div { min-width: 0; padding: 1mm !important; background: #fff !important; border: 1px solid #bbb !important; }
  .receipt-page .compact-meta small { font-size: 7pt !important; }
  .receipt-page .compact-meta b { font-size: 8pt !important; }
  .receipt-page table { width: 100% !important; table-layout: fixed !important; }
  .receipt-page .item-column { width: 40%; }
  .receipt-page .qty-column { width: 20%; }
  .receipt-page .amount-column { width: 40%; }
  .receipt-page th, .receipt-page td { padding: 1mm .4mm !important; border-color: #999 !important; font-size: 9pt !important; color: #000 !important; background: #fff !important; letter-spacing: 0 !important; }
  .receipt-page .receipt-items td:last-child, .receipt-page .receipt-items th:last-child { white-space: normal; overflow-wrap: anywhere; }
  .receipt-page .receipt-items small { display: block; font-size: 7pt !important; color: #000 !important; }
  .receipt-page tr { break-inside: avoid; }
  .receipt-page .receipt-total { background: #fff !important; border-top: 1.5px solid #000 !important; border-bottom: 1.5px solid #000 !important; }
  .receipt-page .receipt-thanks { margin: 2mm 0 0 !important; font-size: 8pt !important; color: #000 !important; }
  .receipt-page .receipt-thanks b { font-size: 8pt !important; }
  .receipt-page .receipt-thanks span, .receipt-page .error { color: #000 !important; }
}
@media print {
  .receipt-page .cashier-slip{margin-top:0;padding-top:2mm;font:8pt/1.3 Arial,sans-serif;color:#000;break-before:page;page-break-before:always;break-inside:avoid;page-break-inside:avoid}
  .receipt-page .receipt-tear-line{display:none}
  .receipt-page .cashier-slip h3{font-size:8pt;margin-bottom:1mm}
  .receipt-page .cashier-slip-number{font-size:9pt;margin-bottom:1.5mm}
  .receipt-page .cashier-slip dl{gap:.5mm 0}
}

.list-filters{margin-bottom:20px}.filter-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px}.list-filters .actions{margin-top:16px;flex-wrap:wrap}.list-pagination{margin:20px 0}.sales-records td{vertical-align:top}.sales-records .money{white-space:nowrap;font-variant-numeric:tabular-nums;font-weight:650}.sales-records small{color:var(--muted)}.sales-item+.sales-item{margin-top:8px;padding-top:8px;border-top:1px solid var(--border)}

.product-thumbnail{display:block;width:64px;height:64px;object-fit:contain;border-radius:8px;background:white;border:1px solid var(--border);margin-bottom:8px}.product-photo-preview,.sale-product-photo{width:140px;height:140px;object-fit:contain;background:white;border:1px solid var(--border);border-radius:8px;margin:10px 0}.sale-product-photo[hidden]{display:none}

.daily-sales-summary{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:20px}.daily-sales-summary h2{margin:0}.daily-sales-summary p{margin:4px 0}.daily-sales-amount{display:block;font-size:32px;color:var(--green2);font-variant-numeric:tabular-nums}.daily-sales-summary small{display:block;max-width:650px;color:var(--muted)}.daily-sales-summary form{align-items:end;flex-wrap:wrap}
.stocktake-fieldset{border:0;padding:0;margin:0;min-width:0}.stocktake-table td{vertical-align:top}.stocktake-table input{min-width:100px}.stocktake-table small{color:var(--muted)}.stocktake-table label{display:block;font-size:13px}
@page nsdg-stocktake{size:A4 landscape;margin:10mm}
@media print{body.stocktake-page{page:nsdg-stocktake;background:white!important;color:black!important;font:9pt Arial}.stocktake-page .sidebar,.stocktake-page .topbar,.stocktake-page .stock-alert,.stocktake-page .message,.stocktake-page .stocktake-controls{display:none!important}.stocktake-page .main,.stocktake-page .content{margin:0!important;padding:0!important;width:100%!important}.stocktake-page .panel{border:0;padding:0;box-shadow:none}.stocktake-page .table-scroll{overflow:visible}.stocktake-page table{width:100%;table-layout:fixed}.stocktake-page td,.stocktake-page th{padding:5px;overflow-wrap:anywhere;color:black}.stocktake-page input{min-width:0;width:100%;color:black!important;background:white!important;padding:3px}.stocktake-page thead{display:table-header-group}.stocktake-page tr{break-inside:avoid}}

@media print{.stocktake-page .stocktake-product-row[hidden]{display:table-row!important}}