:root{
  --matcha:#2f6f45;
  --matcha-dark:#173826;
  --honey:#c9892b;
  --cream:#f6f7f9;
  --ink:#111827;
  --muted:#667085;
  --line:#d9e0e8;
  --panel:#fff;
  --soft:#f9fafb;
  --success-soft:#ecfdf3;
  --warning-soft:#fff7e6;
  --danger:#b42318;
  --shadow-sm:0 1px 2px rgba(16,24,40,.06);
  --shadow-md:0 8px 22px rgba(16,24,40,.08);
  --font-heading:"Plus Jakarta Sans";
  --font-body:"Inter";
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;font-family:var(--font-body),Arial,sans-serif;background:var(--cream);color:var(--ink);display:flex;min-height:100vh;font-size:14px}
h1,h2,h3,.logo,.nav,.btn,.stat strong,.product-name,.product-tile strong{font-family:var(--font-heading),var(--font-body),Arial,sans-serif}
.sidebar{display:flex;flex-direction:column;width:248px;background:#143821;color:#fff;padding:18px 16px;position:fixed;height:100vh;border-right:1px solid rgba(255,255,255,.08)}
.brand{display:grid;gap:14px;justify-items:center;margin-bottom:24px;padding:14px 12px 16px;border:1px solid rgba(255,255,255,.14);border-radius:8px;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03))}
.brand-logo-frame{display:grid;place-items:center;width:170px;max-width:100%;aspect-ratio:1;padding:7px;border:1px solid rgba(217,164,65,.34);border-radius:8px;background:#fffaf2;box-shadow:0 10px 22px rgba(0,0,0,.14),inset 0 0 0 1px rgba(255,255,255,.72);overflow:hidden}
.logo{display:block;width:100%;height:100%;border-radius:6px;object-fit:cover;background:#fffaf2}
.brand-copy{display:grid;gap:5px;width:100%;min-width:0;text-align:center;justify-items:center}
.brand h1{max-width:100%;margin:0;color:#fff;font-size:18px;line-height:1.18;text-wrap:balance;overflow-wrap:break-word}.brand p{margin:0;color:#fff1dc;font-size:14px;font-weight:700;line-height:1.25}
.nav{display:flex;align-items:center;gap:11px;width:100%;min-height:42px;padding:0 12px;border:0;border-radius:8px;background:transparent;color:#d8e3dc;text-align:left;font-size:14px;font-weight:600;margin-bottom:4px;cursor:pointer}
.nav svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.nav.active,.nav:hover{background:rgba(255,255,255,.1);color:#fff;box-shadow:inset 3px 0 0 #8dc265}
.main{min-width:0;margin-left:248px;width:calc(100% - 248px);padding:28px 32px}
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.topbar h2{margin:0;font-size:28px;letter-spacing:0}.topbar p{margin:4px 0 0;color:var(--muted)}
.topbar-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.reset-dialog{width:min(860px,calc(100vw - 32px));max-height:calc(100vh - 32px);border:0;border-radius:18px;padding:0;background:var(--panel);box-shadow:0 18px 48px rgba(31,58,36,.24);overflow:auto}
.reset-dialog::backdrop{background:rgba(20,31,22,.56);backdrop-filter:blur(3px)}
.reset-dialog h3{margin:0}.reset-dialog p{margin:5px 0 0}
.dialog-close{width:32px;height:32px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--muted);font-weight:900;cursor:pointer}
.reset-options{display:grid;gap:10px;margin-top:18px}
.reset-option{display:grid;gap:3px;width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:11px;background:#fff;color:var(--ink);text-align:left;cursor:pointer}
.reset-option:hover{border-color:var(--honey);background:#fffaf2}
.reset-option strong{font-family:var(--font-heading),var(--font-body),Arial,sans-serif;color:var(--matcha-dark)}
.reset-option span{color:var(--muted);font-size:13px;line-height:1.4}
.danger-option strong{color:#b42318}
.reset-header{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:start;padding:24px 26px 18px}
.reset-header-icon{display:grid;place-items:center;width:54px;height:54px;border-radius:999px;background:#eef5e7;color:var(--matcha-dark)}
.reset-header-icon svg,.reset-tab-icon svg,.reset-search-wrap svg,.reset-period-filter svg,.reset-select-all svg,.reset-pin-wrap svg,.reset-footer-summary svg,.reset-delete-button svg,.reset-item-symbol svg,.reset-payment-badge svg,.reset-transaction-date svg,.reset-transaction-more svg,.utility-header-icon svg,.utility-option-icon svg,.utility-input-wrap svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.reset-header-copy h3{font-size:24px}.reset-header-copy p{color:var(--muted);font-size:15px;font-weight:700}
#resetDialog .dialog-form{gap:14px;margin-top:0;padding:0 26px 0}
.utility-dialog{width:min(620px,calc(100vw - 32px))}
.utility-header{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:start;padding:24px 26px 18px}
.utility-header-icon{display:grid;place-items:center;width:52px;height:52px;border-radius:999px;background:#eef5e7;color:var(--matcha-dark)}
.utility-header-copy h3{font-size:23px}.utility-header-copy p{margin-top:4px;color:var(--muted);font-size:15px;font-weight:700;line-height:1.45}
.utility-options{display:grid;gap:10px;padding:0 26px 26px}
.utility-option{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:14px;width:100%;padding:14px;border:1px solid var(--line);border-radius:11px;background:#fff;color:var(--ink);text-align:left;cursor:pointer}
.utility-option:hover{border-color:#9db87a;background:#f7fbef}
.utility-option-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:10px;background:#eef5e7;color:var(--matcha-dark)}
.utility-option span:last-child{display:grid;gap:4px;min-width:0}.utility-option strong{font-family:var(--font-heading),var(--font-body),Arial,sans-serif;color:var(--matcha-dark);font-size:16px}.utility-option small{color:var(--muted);font-size:14px;line-height:1.4}
.utility-form{gap:16px!important;padding:0 26px 26px!important;margin-top:0!important}
.utility-field{font-family:var(--font-heading),var(--font-body),Arial,sans-serif;font-size:14px;color:var(--ink)}
.utility-input-wrap{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px;min-height:52px;border:1px solid var(--line);border-radius:11px;background:#fff;color:var(--muted);padding:0 14px}
.utility-input-wrap input{height:50px;padding:0;border:0;background:transparent}.utility-input-wrap input:focus{box-shadow:none}
.utility-actions{justify-content:flex-end;padding-top:8px}.utility-actions .btn{min-width:120px;min-height:52px;border-radius:11px}
.about-app-dialog{overflow:hidden}
.about-app-mark{font-family:var(--font-heading),var(--font-body),Arial,sans-serif;font-size:24px;font-weight:900}
.about-app-body{display:grid;gap:14px;margin:0 26px 26px;color:var(--ink)}
.about-hero{position:relative;display:grid;grid-template-columns:118px minmax(0,1fr);gap:18px;align-items:center;padding:20px;border:1px solid rgba(217,164,65,.28);border-radius:16px;background:linear-gradient(135deg,#1f3a24 0%,#2f5b2b 100%);box-shadow:0 14px 30px rgba(31,58,36,.14);overflow:hidden}
.about-hero::after{content:"";position:absolute;right:-42px;top:-42px;width:190px;height:190px;border-radius:999px;background:rgba(255,250,242,.18);box-shadow:0 0 0 34px rgba(217,164,65,.08);pointer-events:none}
.about-logo-badge{display:grid;place-items:center;width:112px;aspect-ratio:1;padding:7px;border:1px solid rgba(255,255,255,.34);border-radius:16px;background:#fffaf2;box-shadow:0 10px 24px rgba(0,0,0,.18)}
.about-logo-badge img{display:block;width:100%;height:100%;border-radius:12px;object-fit:cover}
.about-copy,.about-logo-badge{position:relative;z-index:1}
.about-copy{display:grid;gap:7px;min-width:0}
.about-kicker,.about-version{justify-self:start;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:900}
.about-kicker{background:rgba(255,255,255,.18);color:#fff}
.about-copy strong{color:#fff;font-family:var(--font-heading),var(--font-body),Arial,sans-serif;font-size:30px;line-height:1.05}
.about-copy p{max-width:380px;margin:0;color:#f8f1df;font-size:14px;font-weight:800;line-height:1.45}
.about-version{margin-top:4px;background:#fff;color:var(--matcha-dark);box-shadow:0 5px 14px rgba(31,58,36,.12)}
.about-credit-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:15px 16px;border:1px solid var(--line);border-radius:14px;background:#fff}
.about-credit-card small{color:var(--muted);font-size:13px;font-weight:900}
.about-credit-card b{color:var(--matcha-dark);font-family:var(--font-heading),var(--font-body),Arial,sans-serif;font-size:18px;white-space:nowrap}
.about-app-body em{justify-self:center;color:var(--muted);font-size:12px;font-style:normal;font-weight:800}
.reset-picker{display:grid;gap:14px}
.reset-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.reset-tab{display:flex;align-items:center;justify-content:center;gap:12px;min-height:62px;padding:12px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);font-family:var(--font-heading),var(--font-body),Arial,sans-serif;font-weight:900;cursor:pointer}
.reset-tab.active,.reset-tab:hover{border-color:#9db87a;background:#f7fbef;box-shadow:inset 0 0 0 1px rgba(79,125,40,.14)}
.reset-tab[data-reset-tab="transactions"].active{border-color:var(--honey);background:#fffaf2;color:var(--matcha-dark)}
.reset-tab-icon{display:grid;place-items:center;color:var(--matcha-dark)}
.reset-tab-count{display:grid;place-items:center;min-width:26px;height:24px;padding:0 8px;border-radius:999px;background:#dbeccd!important;color:var(--matcha-dark);font-size:13px}
.reset-search-row{display:grid;grid-template-columns:minmax(0,1fr) 190px 150px;gap:12px}
.reset-search-wrap,.reset-period-filter,.reset-pin-wrap{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--muted);padding:0 14px}
.reset-period-filter[hidden]{display:none}
.reset-search{height:46px;padding:0;border:0;border-radius:0;background:transparent}
.reset-period-filter select{height:46px;padding:0;border:0;background:transparent;color:var(--ink);font-weight:800}.reset-search:focus,.reset-period-filter select:focus{box-shadow:none}
.reset-select-all{display:flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--matcha-dark);font-family:var(--font-heading),var(--font-body),Arial,sans-serif;font-weight:900;cursor:pointer}
.reset-select-all:hover{border-color:#9db87a;background:#f7fbef}
.reset-select-all:disabled{cursor:not-allowed;opacity:.55}
.reset-select-all svg{width:19px;height:19px}
.reset-toolbar{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:11px;background:#fffaf2}
.reset-toolbar div{display:grid;gap:2px;min-width:0}
.reset-toolbar strong{font-family:var(--font-heading),var(--font-body),Arial,sans-serif;color:var(--matcha-dark)}
.reset-toolbar small{color:var(--muted);font-size:13px;line-height:1.4}
.reset-toolbar .link-button{flex:0 0 auto;color:var(--matcha-dark);white-space:nowrap}
.reset-panels{border:1px solid var(--line);border-radius:11px;background:#fff;overflow:hidden}
.reset-item-list{display:none;gap:8px;max-height:410px;padding:10px 12px;overflow-y:auto}
.reset-item-list.active{display:grid}
.reset-item{display:grid;grid-template-columns:auto minmax(0,82px) minmax(0,1fr) auto;gap:16px;align-items:center;padding:14px 16px;border:1px solid #eee4d0;border-radius:9px;background:#fff;cursor:pointer}
.reset-data-item{grid-template-columns:auto auto minmax(0,1fr)}
.reset-transaction-item{grid-template-columns:auto auto minmax(210px,1fr) 126px 130px 130px auto;gap:18px}
.reset-item:hover{border-color:#cfdcbc;background:#fffefb}
.reset-item input{width:20px;height:20px;margin:0;accent-color:var(--matcha)}
.reset-item-image{width:74px;height:74px;border:1px solid var(--line);border-radius:8px;background:#f4ead9;object-fit:cover}
.reset-item-symbol{display:grid;place-items:center;width:42px;height:42px;border:1px solid var(--line);border-radius:10px;background:#f7fbef;color:var(--matcha-dark)}
.reset-transaction-item .reset-item-symbol{width:58px;height:58px;border-radius:9px;background:#eef5e7;color:var(--matcha-dark)}
.reset-transaction-item.payment-cash .reset-item-symbol{background:#fff4d9;color:#8a5a00}
.reset-transaction-item.payment-transfer .reset-item-symbol{background:#eaf4ff;color:#1368b4}
.reset-transaction-item.payment-wallet .reset-item-symbol{background:#f0e6ff;color:#7c3ab8}
.reset-item-main{display:grid;gap:4px;min-width:0}
.reset-item-main strong{overflow:hidden;color:var(--ink);font-size:17px;text-overflow:ellipsis;white-space:nowrap}
.reset-item-main small{color:var(--muted);font-size:14px;line-height:1.25}.reset-item-main b{display:inline-block;width:10px;color:var(--muted)}
.reset-transaction-date{display:flex;align-items:center;gap:5px}.reset-transaction-date svg{width:14px;height:14px}
.reset-payment-badge{display:flex;align-items:center;justify-content:center;gap:7px;min-height:36px;padding:8px 12px;border-radius:8px;background:#dbeccd;color:var(--matcha-dark);font-weight:900;white-space:nowrap}
.reset-payment-badge svg{width:17px;height:17px}
.payment-cash .reset-payment-badge{background:#fff0d2;color:#7a4a00}.payment-transfer .reset-payment-badge{background:#e2f0ff;color:#0b64bd}.payment-wallet .reset-payment-badge{background:#efdfff;color:#7130b0}
.reset-transaction-metric{display:grid;gap:4px;padding-left:20px;border-left:1px solid var(--line)}
.reset-transaction-metric small{color:var(--muted);font-size:14px}.reset-transaction-metric strong{color:var(--matcha-dark);font-size:17px;font-family:var(--font-heading),var(--font-body),Arial,sans-serif;white-space:nowrap}
.reset-transaction-more{display:grid;place-items:center;color:var(--muted)}.reset-transaction-more svg{width:18px;height:18px}
.reset-item-side{display:grid;gap:12px;justify-items:end;min-width:130px}
.reset-item-side strong{color:var(--matcha);font-size:16px;white-space:nowrap}
.reset-item-side small{padding:6px 11px;border-radius:8px;background:#dbeccd;color:var(--matcha-dark);font-size:12px;font-weight:900;white-space:nowrap}
.reset-empty{padding:12px;border:1px dashed #d8cdb8;border-radius:9px;color:var(--muted);font-size:13px;font-weight:800;text-align:center}
.reset-pin-label{font-size:16px;font-family:var(--font-heading),var(--font-body),Arial,sans-serif;color:var(--ink)}
.reset-pin-wrap input{height:46px;padding:0;border:0;background:transparent}.reset-pin-wrap input:focus{box-shadow:none}
.reset-footer{position:sticky;bottom:0;display:grid;grid-template-columns:minmax(0,1fr) auto auto auto auto;gap:16px;align-items:center;margin:14px -26px 0;padding:24px 26px;border-top:1px solid var(--line);background:#fff8ef}
.reset-footer-summary{display:flex;align-items:center;gap:14px;min-width:0}.reset-footer-summary>span{display:grid;place-items:center;flex:0 0 auto;width:48px;height:48px;border:1px solid #d8cdb8;border-radius:10px;background:#f7fbef;color:var(--matcha-dark)}
.reset-footer-summary div{display:grid;gap:3px;min-width:0}.reset-footer-summary strong{font-family:var(--font-heading),var(--font-body),Arial,sans-serif;color:var(--ink)}.reset-footer-summary small{color:var(--muted);font-size:14px}
.reset-footer-metric{display:grid;gap:4px;padding:0 20px;border-left:1px solid var(--line)}.reset-footer-metric small{color:var(--muted);font-size:13px}.reset-footer-metric strong{font-family:var(--font-heading),var(--font-body),Arial,sans-serif;color:var(--matcha-dark);white-space:nowrap}
.reset-footer .btn{min-height:52px;border-radius:9px}.reset-footer .btn.secondary{min-width:120px}.reset-delete-button{display:flex;align-items:center;justify-content:center;gap:9px;min-width:240px}.reset-delete-button svg{width:20px;height:20px}
.dialog-form{display:grid;gap:12px;margin-top:18px}
.dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:4px}
.pin-message{min-height:18px;font-size:13px;font-weight:800}
.page{display:none}.page.active{display:block}
.card{background:var(--panel);border:1px solid rgba(231,222,201,.72);border-radius:18px;padding:20px;margin-bottom:18px;box-shadow:0 8px 24px rgba(31,58,36,.08)}
.card h3{margin-top:0}.card-title{display:flex;justify-content:space-between;gap:12px;align-items:center}
.muted{font-size:13px;color:var(--muted);font-weight:700}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:18px}
.stat{background:var(--panel);border:1px solid rgba(231,222,201,.72);border-radius:18px;padding:18px;box-shadow:0 8px 24px rgba(31,58,36,.08)}
.stat span{font-size:13px;color:var(--muted)}.stat strong{display:block;margin-top:8px;font-size:24px;color:var(--matcha-dark)}
.small{margin-top:16px}
.settings-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.setting-card{display:grid;grid-template-rows:auto 1fr auto;gap:14px;min-height:230px}
.setting-card h3{margin:0}.setting-card p{margin:6px 0 0;color:var(--muted);line-height:1.55}
.setting-icon{display:grid;place-items:center;width:54px;height:54px;border-radius:15px;background:#eef5e7;font-size:25px}
.danger-setting{border-color:#f4c7c3}.danger-setting .setting-icon{background:#fff0ee}
.dashboard-page.active{display:grid;gap:18px}
.dashboard-toolbar{display:flex;justify-content:flex-end;gap:10px;margin-top:-72px;margin-bottom:14px}
.dashboard-filter-button,.dashboard-toolbar-select,.dashboard-icon-button{height:48px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);box-shadow:0 5px 18px rgba(31,58,36,.04)}
.dashboard-filter-button{display:flex;align-items:center;gap:9px;min-width:0;padding:0 16px;font-family:var(--font-heading),var(--font-body),Arial,sans-serif}
.dashboard-filter-button:disabled{opacity:1}.dashboard-filter-button strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dashboard-date-picker{position:relative;cursor:pointer}
.dashboard-date-picker input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.dashboard-filter-button svg,.dashboard-icon-button svg,.dashboard-toolbar-select svg,.dashboard-metric-icon svg,.dashboard-card-title svg,.inventory-action svg,.dashboard-good-news svg,.today-summary-row svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dashboard-toolbar-select{display:grid;place-items:center;min-width:158px;padding:0 10px}
.dashboard-toolbar-select select{height:46px;padding:0 30px 0 2px;border:0;background:transparent;font-weight:800}.dashboard-toolbar-select select:focus{box-shadow:none}
.dashboard-icon-button{display:grid;place-items:center;width:52px;cursor:pointer}.dashboard-icon-button:hover{border-color:#9db87a;background:#f7fbef;color:var(--matcha-dark)}
.dashboard-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.dashboard-metric-card{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:18px;min-height:148px;padding:22px;border:1px solid var(--line);border-radius:14px;background:#fff;overflow:hidden;box-shadow:0 8px 24px rgba(31,58,36,.06)}
.dashboard-metric-card::after{content:"";position:absolute;right:18px;bottom:20px;width:92px;height:42px;background:linear-gradient(135deg,transparent 12%,rgba(79,125,40,.14) 12% 24%,transparent 24% 38%,rgba(79,125,40,.2) 38% 52%,transparent 52% 68%,rgba(79,125,40,.16) 68%);clip-path:polygon(0 70%,18% 50%,34% 72%,50% 28%,68% 54%,84% 18%,100% 36%,100% 100%,0 100%)}
.dashboard-metric-icon{display:grid;place-items:center;width:62px;height:62px;border-radius:999px;background:#eaf3df;color:var(--matcha)}
.dashboard-metric-copy{display:grid;gap:8px;min-width:0}.dashboard-metric-copy>span{color:var(--ink);font-size:14px;font-weight:500}.dashboard-metric-copy strong{font-family:var(--font-heading),var(--font-body),Arial,sans-serif;color:#07150c;font-size:24px;line-height:1.05}.dashboard-metric-copy small{margin-top:12px;color:#15803d;font-size:13px;font-weight:900}
.metric-qty .dashboard-metric-icon{background:#fff0e6;color:#fb8c2f}.metric-product .dashboard-metric-icon{background:#fff5d8;color:#c99a12}.metric-product::after{display:none}
.dashboard-main-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(360px,.9fr);gap:18px}
.dashboard-bottom-grid{display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:18px}
.dashboard-chart-card,.dashboard-payment-card,.dashboard-list-card{border-radius:14px;background:#fffdf8}
.dashboard-card-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.dashboard-card-title h3{margin:0;font-size:18px}.dashboard-card-title select{height:42px;min-width:110px;padding:0 14px;border-radius:8px;font-weight:800}
.dashboard-mini-filter{min-height:32px;padding:8px 12px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--muted);font-size:12px;font-weight:800}
.dashboard-link-button{border:0;background:transparent;color:var(--muted);font-size:12px;font-weight:800;cursor:pointer}.dashboard-link-button:hover{color:var(--matcha-dark)}
.sales-chart{min-height:280px;overflow-x:auto}.dashboard-line-chart{display:block;width:100%;min-width:620px;height:280px}.chart-grid-line{stroke:#eadfca;stroke-width:1}.chart-axis-label{fill:var(--muted);font-size:12px}.chart-date-label{fill:var(--muted);font-size:12px;text-anchor:middle}.chart-date-label.active{fill:var(--matcha-dark);font-weight:900}.chart-line{stroke:var(--matcha-dark);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.chart-point{fill:#fff;stroke:var(--matcha-dark);stroke-width:2}.chart-tooltip rect{fill:var(--matcha-dark);filter:drop-shadow(0 6px 12px rgba(31,58,36,.22))}.chart-tooltip text{fill:#fff;font-size:12px;font-weight:800}.chart-tooltip text:first-of-type{font-size:11px;font-weight:600}
.payment-summary{display:grid;grid-template-columns:190px minmax(0,1fr);gap:18px;align-items:center;min-width:0;min-height:270px;overflow:hidden}.payment-donut{display:grid;place-items:center;width:184px;height:184px;margin:auto;border-radius:999px;background:conic-gradient(var(--payment-chart));box-shadow:inset 0 0 0 1px rgba(0,0,0,.03)}.payment-donut>div{display:grid;place-items:center;width:88px;height:88px;border-radius:999px;background:#fff;text-align:center;box-shadow:0 6px 16px rgba(31,58,36,.07)}.payment-donut span{color:var(--muted);font-size:13px}.payment-donut strong{font-family:var(--font-heading),var(--font-body),Arial,sans-serif;color:var(--ink);font-size:15px}
.payment-method-list{display:grid;gap:2px;min-width:0}
.payment-method-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;min-width:0;padding:12px 0;border-bottom:1px solid var(--line)}
.payment-dot{width:13px;height:13px;border-radius:999px}
.payment-method-name{display:flex;align-items:center;gap:12px;min-width:0}
.payment-method-name strong{min-width:0;overflow:hidden;font-family:var(--font-heading),var(--font-body),Arial,sans-serif;font-size:14px;font-weight:800;text-overflow:ellipsis;white-space:nowrap}
.payment-method-value{display:grid;gap:3px;justify-items:end;min-width:104px;text-align:right}
.payment-method-value strong{color:var(--ink);font-family:var(--font-heading),var(--font-body),Arial,sans-serif;font-size:14px;font-weight:800;white-space:nowrap}
.payment-method-value small{color:var(--muted);font-size:12px;white-space:nowrap}
.top-products{display:grid;gap:0;margin:0;padding:0;list-style:none}.top-product-row{display:grid;grid-template-columns:24px 40px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}.top-product-rank{display:grid;place-items:center;width:22px;height:22px;border-radius:999px;background:var(--matcha-dark);color:#fff;font-size:12px;font-weight:900}.top-product-row img{width:40px;height:40px;border-radius:9px;background:#fffaf2;object-fit:contain;border:1px solid #f0e4d2}.top-product-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:800}.top-product-row strong{color:var(--ink);font-size:13px;white-space:nowrap}
.stock-alerts{display:grid;gap:0}.stock-alert{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}.stock-alert img{width:52px;height:52px;border-radius:10px;background:#fffaf2;object-fit:contain;border:1px solid #f0e4d2}.stock-alert-copy{display:grid;gap:4px;min-width:0}.stock-alert-copy strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.stock-alert-copy small{color:var(--muted)}.stock-alert b{display:grid;place-items:center;width:24px;height:24px;border-radius:999px;background:#fb8c2f;color:#fff;font-size:12px}
.inventory-action{display:flex;align-items:center;gap:10px;width:100%;min-height:48px;margin-top:14px;padding:0 14px;border:0;border-radius:10px;background:#eef5e7;color:var(--matcha-dark);font-family:var(--font-heading),var(--font-body),Arial,sans-serif;font-weight:900;cursor:pointer}.inventory-action span:last-child{margin-left:auto}.inventory-action:hover{background:#e1efd5}
.today-summary{display:grid}.today-summary-row{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:10px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}.today-summary-row span{display:grid;place-items:center;color:var(--muted)}.today-summary-row strong{font-size:14px}.today-summary-row b{color:var(--matcha-dark);font-size:14px;white-space:nowrap}
.dashboard-good-news{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center;margin-top:16px;padding:14px;border-radius:10px;background:#eef5e7}.dashboard-good-news>span{display:grid;place-items:center;width:42px;height:42px;border-radius:10px;background:#dbeccd;color:var(--matcha)}.dashboard-good-news strong{font-family:var(--font-heading),var(--font-body),Arial,sans-serif}.dashboard-good-news small{display:block;margin-top:3px;color:var(--muted)}
.dashboard-empty{list-style:none;padding:16px;border:1px dashed #d8cdb8;border-radius:10px;color:var(--muted);font-weight:700;text-align:center}
.product-page.active{display:grid;gap:18px}
.product-page-header{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}.product-page-header h3{margin:0;font-size:28px}.product-page-header p{margin:6px 0 0;color:var(--muted);font-weight:700}
.product-header-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}.product-add-button,.product-export-button{display:flex;align-items:center;justify-content:center;gap:9px;min-height:52px;border-radius:9px}.product-add-button svg,.product-export-button svg,.product-summary-icon svg,.product-search svg,.product-filter svg,.product-view-toggle svg,.product-card-actions svg,.product-pagination-controls svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.product-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.product-summary-card{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:center;min-height:124px;padding:20px;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:0 8px 24px rgba(31,58,36,.06);overflow:hidden}.product-summary-card>div{min-width:0}.product-summary-icon{display:grid;place-items:center;width:62px;height:62px;border-radius:999px;background:#eaf3df;color:var(--matcha)}.product-summary-card span:not(.product-summary-icon){display:block;color:var(--muted);font-size:14px}.product-summary-card strong{display:block;max-width:100%;margin-top:8px;color:#07150c;font-family:var(--font-heading),var(--font-body),Arial,sans-serif;font-size:clamp(18px,1.7vw,23px);line-height:1.12;overflow-wrap:anywhere}.product-summary-card small{display:block;margin-top:8px;color:var(--matcha);font-size:13px;font-weight:900}.product-summary-warning .product-summary-icon{background:#fff2d9;color:#e28a00}.product-summary-warning small{color:#d97706}.product-summary-value .product-summary-icon{background:#eee9ff;color:#6d5bd0}
.product-form-card{padding:22px}.product-form-header{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;margin-bottom:18px}.product-form-header h3{margin:0}.product-form-header p{margin:5px 0 0;color:var(--muted);font-weight:700}
.product-toolbar{display:grid;grid-template-columns:minmax(260px,1fr) 220px 150px 240px auto;gap:12px;align-items:center}.product-search,.product-filter{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px;height:52px;padding:0 14px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--muted)}.product-search input,.product-filter select{height:50px;padding:0;border:0;background:transparent;font-weight:800}.product-search input:focus,.product-filter select:focus{box-shadow:none}.product-view-toggle{display:flex;min-height:52px;border:1px solid var(--line);border-radius:10px;background:#fff;padding:4px}.product-view-toggle button{display:grid;place-items:center;width:44px;border:0;border-radius:8px;background:transparent;color:var(--muted);cursor:pointer}.product-view-toggle button.active,.product-view-toggle button:hover{background:var(--matcha-dark);color:#fff}
.product-card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:18px}.product-manage-card{display:grid;gap:14px;padding:16px;border:1px solid var(--line);border-radius:12px;background:#fff;box-shadow:0 8px 24px rgba(31,58,36,.05)}.product-manage-card:hover{border-color:#c9d9b8;box-shadow:0 12px 26px rgba(31,58,36,.09)}.product-card-main{display:grid;grid-template-columns:108px minmax(0,1fr);gap:16px;align-items:start}.product-card-image{width:108px;height:108px;border-radius:10px;background:#fffaf2;object-fit:contain;border:1px solid #f0e4d2}.product-card-copy{display:grid;gap:7px;min-width:0}.product-card-copy strong{overflow:hidden;color:var(--ink);font-family:var(--font-heading),var(--font-body),Arial,sans-serif;font-size:17px;text-overflow:ellipsis;white-space:nowrap}.product-card-copy span{color:var(--muted);font-size:14px}.product-card-copy b{color:var(--matcha-dark);font-family:var(--font-heading),var(--font-body),Arial,sans-serif;font-size:18px}
.product-stock-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:10px;border-top:1px solid var(--line)}.product-stock-row span{display:grid;gap:4px;color:var(--muted);font-size:13px}.product-stock-row span strong{color:var(--matcha);font-size:14px}.product-stock-row em{padding:8px 13px;border-radius:9px;background:#eaf3df;color:var(--matcha-dark);font-style:normal;font-size:12px;font-weight:900}.status-low .product-stock-row em{background:#fff2d9;color:#c45c00}.status-critical .product-stock-row em,.status-empty .product-stock-row em{background:#ffe7e4;color:#b42318}
.product-card-meta{display:flex;justify-content:space-between;gap:10px;color:var(--muted);font-size:12px;font-weight:800}.product-card-actions{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;padding-top:10px;border-top:1px solid var(--line)}.product-card-actions button{display:flex;align-items:center;justify-content:center;gap:7px;min-height:38px;border:0;border-radius:8px;background:#fff;color:var(--ink);font-weight:800;cursor:pointer}.product-card-actions button:hover{background:#f7fbef;color:var(--matcha-dark)}.product-card-actions button:last-child{width:38px;color:var(--muted)}.product-card-actions button:last-child:hover{background:#fff0ee;color:#b42318}
.product-card-grid.list-view{grid-template-columns:1fr}.product-card-grid.list-view .product-manage-card{grid-template-columns:minmax(0,1.4fr) minmax(190px,.7fr) minmax(180px,.7fr) 220px;align-items:center}.product-card-grid.list-view .product-stock-row,.product-card-grid.list-view .product-card-actions{padding-top:0;border-top:0}.product-card-grid.list-view .product-card-meta{display:grid}
.product-empty-state{grid-column:1/-1;padding:34px 18px;border:1px dashed #d8cdb8;border-radius:12px;background:#fff;color:var(--muted);font-weight:800;text-align:center}.product-pagination{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:18px;border-top:1px solid var(--line);color:var(--muted);font-weight:700}.product-pagination-controls{display:flex;gap:8px}.product-pagination-controls button{display:grid;place-items:center;min-width:38px;height:38px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);font-weight:900;cursor:pointer}.product-pagination-controls button.active{background:var(--matcha-dark);color:#fff}.product-pagination-controls button:disabled{opacity:.45;cursor:not-allowed}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;align-items:end}
.product-form{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:18px;align-items:end}
.product-form label{grid-column:span 2;min-width:0}
.product-form .field-name{grid-column:span 4}
.product-form .field-category,.product-form .field-cost,.product-form .field-price,.product-form .field-stock-start{grid-column:span 2}
.product-form .field-media{grid-column:span 5}
.product-form .field-stock-add{grid-column:span 3;padding:13px 14px;border:1px solid #dbe8cf;border-radius:12px;background:#f7fbef}
.product-form input[readonly]{background:#f4f4ec;color:var(--muted);cursor:not-allowed}
.stock-add-preview{display:block;margin-top:7px;color:var(--matcha-dark);font-size:12px;font-weight:900;line-height:1.35}
.form-actions{grid-column:9 / 13;grid-row:2;display:grid;grid-template-columns:1fr 1fr;gap:10px;align-self:end}
.form-actions .btn{width:100%;min-height:54px}
.product-form-card[data-mode="stock"] .product-form{align-items:start}
.product-form-card[data-mode="stock"] .field-name{grid-column:1 / 5;grid-row:1}
.product-form-card[data-mode="stock"] .field-category{grid-column:5 / 7;grid-row:1}
.product-form-card[data-mode="stock"] .field-cost{grid-column:7 / 9;grid-row:1}
.product-form-card[data-mode="stock"] .field-price{grid-column:9 / 11;grid-row:1}
.product-form-card[data-mode="stock"] .field-stock-start{grid-column:11 / 13;grid-row:1}
.product-form-card[data-mode="stock"] .field-stock-add{grid-column:1 / 4;grid-row:2}
.product-form-card[data-mode="stock"] .field-image-url{grid-column:4 / 9;grid-row:2;align-self:end}
.product-form-card[data-mode="stock"] .field-image-upload{grid-column:1 / 6;grid-row:3}
.product-form-card[data-mode="stock"] .form-actions{grid-column:9 / 13;grid-row:2;align-self:end}
.stack-form{display:grid;gap:12px}
label{font-size:13px;font-weight:700;display:grid;gap:7px}
input,select{width:100%;min-width:0;padding:12px 14px;border:1px solid var(--line);border-radius:11px;font-size:14px;background:#fff}
input[type="file"]{height:48px;padding:9px 12px;color:var(--muted)}
input[type="file"]::file-selector-button{margin-right:12px;border:0;border-radius:8px;background:#eef5e7;color:var(--matcha-dark);font-family:var(--font-heading),var(--font-body),Arial,sans-serif;font-weight:800;padding:7px 12px;cursor:pointer}
input:focus,select:focus{outline:0;border-color:var(--matcha);box-shadow:0 0 0 3px rgba(79,125,40,.18)}
.btn{padding:12px 16px;border:0;border-radius:11px;background:var(--matcha);color:#fff;font-weight:800;cursor:pointer}
.btn:hover{background:#426b22}
.btn:disabled{cursor:not-allowed;opacity:.55}
.btn.secondary{background:var(--matcha-dark)}.btn.secondary:hover{background:#172d1c}.btn.danger{background:#b42318}.btn.danger:hover{background:#991b1b}
.cashier-layout{display:grid;grid-template-columns:minmax(0,1fr) 520px;gap:22px;align-items:start;min-height:calc(100vh - 130px)}
.cashier-products-area{display:grid;gap:14px;min-width:0}
.cashier-section-title h3,.cashier-panel-title h3{margin:0;font-size:20px}
.cashier-search{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px;height:48px;padding:0 14px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--muted)}
.cashier-search svg,.payment-option svg,.receipt-reprint-btn svg,.clear-cart-btn svg,.remove-cart svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cashier-search input{height:46px;padding:0;border:0;background:transparent}.cashier-search input:focus{box-shadow:none}
.cashier-categories{display:flex;gap:10px;overflow-x:auto;padding-bottom:2px}
.cashier-category{flex:0 0 auto;min-height:42px;padding:0 18px;border:1px solid var(--line);border-radius:13px;background:#fff;color:var(--ink);font-weight:800;cursor:pointer}
.cashier-category.active,.cashier-category:hover{border-color:#9db87a;background:var(--matcha);color:#fff}
.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;align-content:start}
.product-tile{min-height:226px;border:1px solid var(--line);border-radius:8px;background:#fff;padding:12px;text-align:left;display:grid;grid-template-rows:128px auto auto auto;gap:7px;cursor:pointer;box-shadow:0 5px 14px rgba(31,58,36,.04)}
.product-tile:hover,.product-tile.active{border-color:#9db87a;box-shadow:0 8px 20px rgba(79,125,40,.14);transform:translateY(-1px)}
.product-tile:disabled{cursor:not-allowed;opacity:.58;box-shadow:none;transform:none}
.product-tile-image{display:grid;place-items:center;border-radius:8px;background:#fffaf2;overflow:hidden}
.product-tile img{width:100%;height:128px;object-fit:contain}
.product-name{font-size:15px;font-weight:900;line-height:1.2;min-height:18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.product-tile strong{font-size:14px;color:var(--matcha)}
.product-tile small{font-size:13px;color:var(--muted)}
.cashier-panel{display:grid;gap:14px;padding:16px;border-radius:14px;background:#fffdf8;box-shadow:0 8px 24px rgba(31,58,36,.08)}
.cashier-panel .stack-form{gap:10px}
.selected-product{border:1px dashed #d8cdb8;background:#fffaf2;border-radius:11px;padding:12px;color:var(--muted);font-weight:800;line-height:1.35}
.selected-product.filled{border-color:var(--honey);background:#fff4da;color:var(--ink)}
.divider{height:1px;background:var(--line);margin:18px 0}
.manual-toggle{border:1px solid var(--line);border-radius:11px;background:#fff}
.manual-toggle summary{display:flex;justify-content:space-between;padding:14px 16px;color:var(--ink);font-weight:900;cursor:pointer}
.manual-toggle[open] summary{border-bottom:1px solid var(--line)}
.manual-toggle .stack-form{padding:12px}
.link-button{border:0;background:transparent;color:#b42318;font-size:12px;font-weight:800;cursor:pointer;padding:0}
.cart-items{display:grid;align-content:start;min-height:112px;max-height:305px;gap:8px;overflow-y:auto}
.cart-item{display:grid;grid-template-columns:64px minmax(0,1fr) auto auto auto;gap:12px;align-items:center;border:1px solid var(--line);border-radius:10px;background:#fff;padding:10px}
.cart-item-image{width:64px;height:64px;border-radius:8px;background:#fffaf2;object-fit:contain;border:1px solid #f0e4d2}
.cart-item-info{min-width:0}.cart-item-info strong,.cart-item-info small{display:block}.cart-item-info small{margin-top:3px;color:var(--muted)}
.cart-item-actions{display:flex;align-items:center;gap:6px}
.cart-item-actions button{width:34px;height:34px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--matcha-dark);font-weight:900;cursor:pointer}
.cart-item-total{color:var(--ink);white-space:nowrap}
.remove-cart{display:grid;place-items:center;width:32px;height:32px;border:0;background:transparent;color:var(--muted);cursor:pointer}
.remove-cart:hover{color:#b42318}
.cashier-note-button{display:flex;align-items:center;justify-content:center;gap:9px;min-height:42px;border:1px dashed #d8cdb8;border-radius:10px;background:#fffdf8;color:var(--muted);font-weight:800;cursor:pointer}
.cashier-note-button span{font-size:20px;color:var(--matcha-dark)}
.cart-summary{display:grid;gap:8px;padding:14px 16px;border:1px solid var(--line);border-radius:10px;background:#fff;font-weight:700}
.cart-summary div{display:flex;justify-content:space-between;gap:12px}.cart-summary span{color:var(--ink);font-weight:500}.cart-summary strong{font-weight:800}
.cart-summary-total{margin-top:8px;padding-top:12px;border-top:1px solid var(--line);font-size:22px;font-family:var(--font-heading),var(--font-body),Arial,sans-serif}
.cart-summary strong{color:var(--matcha-dark);font-family:var(--font-heading),var(--font-body),Arial,sans-serif}
.cashier-payment-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.payment-option{display:flex;align-items:center;justify-content:center;gap:8px;min-height:52px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--ink);font-weight:800;cursor:pointer}
.payment-option.active,.payment-option:hover{border-color:var(--matcha);background:#f7fbef;color:var(--matcha-dark)}
.discount-panel{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:end;margin-top:2px;padding:12px;border:1px solid var(--line);border-radius:11px;background:#fff}
.discount-panel[hidden]{display:none}
.discount-panel .link-button{align-self:center;min-height:44px;padding:0 4px;color:#b42318}
.discount-mode{display:grid;grid-template-columns:1fr 1fr;gap:4px;min-height:44px;padding:4px;border:1px solid var(--line);border-radius:9px;background:#f8fafc}
.discount-mode button{min-width:82px;border:0;border-radius:7px;background:transparent;color:var(--muted);font-weight:800;cursor:pointer}
.discount-mode button.active,.discount-mode button:hover{background:var(--matcha-dark);color:#fff}
@media screen and (max-width:560px){
  .discount-panel{grid-template-columns:1fr}
  .discount-panel .link-button{justify-self:start}
  .discount-mode button{min-width:0}
}
.qris-payment{display:grid;gap:12px;margin-top:12px;padding:14px;border:1px solid #d8cdb8;border-radius:12px;background:#fffaf2;text-align:center}
.qris-payment[hidden]{display:none}
.qris-payment-title{display:grid;gap:3px}
.qris-payment-title strong{font-family:var(--font-heading),var(--font-body),Arial,sans-serif;color:var(--matcha-dark)}
.qris-preview{display:grid;place-items:center}
.qris-preview img{display:block;width:min(100%,280px);max-height:340px;border:8px solid #fff;border-radius:10px;object-fit:contain;box-shadow:0 5px 16px rgba(31,58,36,.12)}
.qris-upload{text-align:left}
.qris-payment .link-button{justify-self:center}
.cash-payment{display:grid;gap:10px;margin-top:12px;padding:12px;border:1px solid var(--line);border-radius:11px;background:#fff}
.cash-change{display:flex;justify-content:space-between;gap:12px;color:var(--muted);font-weight:800}
.cash-change strong{color:var(--matcha-dark)}
.checkout-btn{display:flex;justify-content:space-between;align-items:center;width:100%;min-height:58px;margin-top:2px;padding:0 20px;border-radius:10px;font-size:17px;background:linear-gradient(135deg,var(--matcha),#3d771c)}
.checkout-btn strong{font-family:var(--font-heading),var(--font-body),Arial,sans-serif;font-size:18px}
.cashier-secondary-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.receipt-reprint-btn,.clear-cart-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;background:#fff!important;color:var(--ink)!important;border:1px solid var(--line)}
@media(min-width:901px){body:has(#kasir.active){overflow:hidden}}
.page#kasir.active{height:calc(100vh - 130px);overflow:hidden}
.page#kasir.active .cashier-layout{height:100%;min-height:0;overflow:hidden}
.cashier-products-area{grid-template-rows:auto auto auto minmax(0,1fr);height:100%;overflow:hidden}
.cashier-products-area .product-grid{min-height:0;padding-right:6px;overflow-y:auto;overscroll-behavior:contain}
.cashier-products-area .product-grid::-webkit-scrollbar,.cashier-panel::-webkit-scrollbar,.cart-items::-webkit-scrollbar{width:8px}
.cashier-products-area .product-grid::-webkit-scrollbar-thumb,.cashier-panel::-webkit-scrollbar-thumb,.cart-items::-webkit-scrollbar-thumb{border-radius:999px;background:#c8d8b5}
.cashier-products-area .product-grid::-webkit-scrollbar-track,.cashier-panel::-webkit-scrollbar-track,.cart-items::-webkit-scrollbar-track{background:#fff8ef}
.cashier-panel{position:sticky;top:24px;max-height:100%;overflow-y:auto;overscroll-behavior:contain}
.receipt-button{padding:7px 10px;font-size:12px}
.receipt-dialog{width:min(420px,calc(100vw - 24px));border:0;border-radius:16px;padding:18px;background:#f5f3ee;box-shadow:0 18px 48px rgba(31,58,36,.24)}
.receipt-dialog::backdrop{background:rgba(20,31,22,.56);backdrop-filter:blur(3px)}
.receipt-dialog-header{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:14px}
.receipt-dialog-header h3{margin:0}.receipt-dialog-header p{margin:4px 0 0}
.receipt-paper{width:58mm;max-width:100%;margin:0 auto;padding:3mm 2.5mm;background:#fff;color:#000;font-family:"Courier New",monospace;font-size:10px;line-height:1.35;box-shadow:0 4px 14px rgba(0,0,0,.1)}
.receipt-store,.receipt-footer{display:grid;gap:2px;text-align:center}
.receipt-store strong{font-size:14px}.receipt-footer strong{font-size:11px}
.receipt-rule{margin:7px 0;border-top:1px dashed #000}
.receipt-meta{display:grid;grid-template-columns:auto minmax(0,1fr);gap:3px 7px}
.receipt-meta strong{text-align:right;overflow-wrap:anywhere}
.receipt-section-title{display:block;margin-bottom:7px;text-align:center}
.receipt-items{display:grid;gap:7px}
.receipt-item{display:grid;gap:2px}.receipt-item small{font-style:italic}
.receipt-row{display:flex;justify-content:space-between;gap:8px}
.receipt-total{font-size:12px}
.receipt-whatsapp{display:grid;gap:4px;margin-top:14px;padding-top:12px;border-top:1px solid #ddd4c7}
.receipt-actions{justify-content:center}
.report-page.active{display:grid;gap:12px}
.report-toolbar{display:flex;justify-content:flex-end;gap:10px;margin-top:-72px;margin-bottom:28px}
.report-toolbar-select,.report-icon-button{height:48px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);box-shadow:0 5px 18px rgba(31,58,36,.04)}
.report-date-range{display:flex;align-items:end;gap:10px;padding:8px;border:1px solid var(--line);border-radius:10px;background:#fff;box-shadow:0 5px 18px rgba(31,58,36,.04)}
.report-date-range label{display:grid;gap:4px;min-width:160px}
.report-date-range label span{color:var(--muted);font-size:11px;font-weight:800;text-transform:uppercase}
.report-date-range input{height:40px;padding:0 10px;border:1px solid var(--line);background:#fff;font-weight:800}
.report-date-separator{align-self:center;padding:18px 2px 0;color:var(--muted);font-weight:900}
.report-apply-button{min-height:40px;padding:0 16px;white-space:nowrap}
.report-icon-button svg,.report-period-display svg,.report-stat-icon svg,.report-export-btn svg,.report-hint svg,.report-empty-icon svg,.report-empty-action svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.report-toolbar-select{display:grid;place-items:center;width:150px;padding:0 10px}
.report-toolbar-select select{height:46px;padding:0 30px 0 2px;border:0;background:transparent;font-weight:800}.report-toolbar-select select:focus{box-shadow:none}
.report-icon-button{display:grid;place-items:center;width:52px;cursor:pointer}
.report-icon-button:hover{border-color:#9db87a;background:#f7fbef;color:var(--matcha-dark)}
.report-summary-card,.report-product-card,.report-table-card{border-radius:14px;padding:22px;background:#fffdf8}
.report-card-title{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:center}
.report-card-title h3{margin:0;font-size:20px}.report-card-title p{margin:4px 0 0;color:var(--muted);font-weight:600}
.report-period-display{display:flex;align-items:center;justify-content:flex-start;gap:10px;justify-self:end;width:auto;min-width:230px;min-height:48px;padding:0 14px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--matcha-dark)}
.report-period-display strong{font-family:var(--font-heading),var(--font-body),Arial,sans-serif}
.report-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:26px}
.report-stat-card{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:18px;min-height:116px;padding:20px 22px;border:1px solid var(--line);border-radius:14px;background:#fff;overflow:hidden;box-shadow:0 8px 24px rgba(31,58,36,.05)}
.report-stat-card::after{content:"";position:absolute;right:-18px;bottom:-18px;width:120px;height:60px;border:1px dashed currentColor;border-color:rgba(79,125,40,.18);border-radius:999px;transform:rotate(-18deg)}
.report-stat-icon{display:grid;place-items:center;width:56px;height:56px;border-radius:999px;background:#eaf3df;color:var(--matcha)}
.report-stat-card span:not(.report-stat-icon){display:block;color:var(--muted);font-size:14px}
.report-stat-card strong{display:block;margin-top:8px;color:var(--matcha-dark);font-family:var(--font-heading),var(--font-body),Arial,sans-serif;font-size:25px;line-height:1}
.report-stat-card small{display:block;margin-top:8px;color:var(--muted);font-size:13px;font-weight:600}
.report-stat-qty .report-stat-icon{background:#fff2d9;color:#d8951c}.report-stat-qty::after{border-color:rgba(217,164,65,.24)}
.report-stat-profit .report-stat-icon{background:#eee9ff;color:#6d5bd0}.report-stat-profit::after{border-color:rgba(109,91,208,.2)}
.report-summary-actions{display:grid;grid-template-columns:260px minmax(0,1fr);gap:16px;align-items:center;margin-top:28px}
.report-export-btn{display:flex;align-items:center;justify-content:center;gap:10px;min-height:58px;border-radius:8px;background:var(--matcha-dark)}
.report-export-btn:hover{background:#172d1c}
.report-hint{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center;min-height:74px;padding:16px 18px;border:1px solid #ead9b8;border-radius:12px;background:#fff8e9;color:var(--ink)}
.report-hint>span{display:grid;place-items:center;width:38px;height:38px;border-radius:999px;color:#d8951c}
.report-hint strong{font-family:var(--font-heading),var(--font-body),Arial,sans-serif}.report-hint small{display:block;margin-top:3px;color:var(--muted);font-weight:600}
.report-product-total{display:flex;align-items:center;justify-content:center;gap:10px;justify-self:end;min-height:44px;padding:0 14px;border:1px solid var(--line);border-radius:9px;background:#f7fbef;color:var(--matcha-dark)}
.report-product-total svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.report-product-total strong{font-family:var(--font-heading),var(--font-body),Arial,sans-serif;white-space:nowrap}
.report-product-summary{display:grid;gap:10px;margin-top:18px}
.report-product-row{display:grid;grid-template-columns:34px minmax(0,1fr) 110px 130px 140px 140px;gap:14px;align-items:center;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:#fff}
.report-product-rank{display:grid;place-items:center;width:28px;height:28px;border-radius:999px;background:var(--matcha-dark);color:#fff;font-weight:900}
.report-product-name{display:grid;gap:3px;min-width:0}.report-product-name strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.report-product-name small{color:var(--muted);font-weight:700}
.report-product-metric{display:grid;gap:3px;text-align:right}.report-product-metric b{color:var(--matcha-dark);font-family:var(--font-heading),var(--font-body),Arial,sans-serif;white-space:nowrap}.report-product-metric small{color:var(--muted);font-size:12px;font-weight:800}
.report-product-discount b,.report-discount-value{color:#b42318}
.report-table-card{padding-top:18px}.report-table-wrap{min-height:360px}
.report-table{min-width:1320px;margin-top:0}.report-table th{height:52px;background:#f4f4ec;color:var(--matcha-dark)}.report-table td{background:#fff}
.report-empty-row td{padding:0!important;border-bottom:0;background:#fff!important}
.report-empty-state{display:grid;place-items:center;gap:10px;min-height:300px;padding:34px 18px;text-align:center}
.report-empty-icon{display:grid;place-items:center;width:96px;height:96px;border-radius:999px;background:#eaf3df;color:var(--matcha-dark)}
.report-empty-icon svg{width:54px;height:54px}
.report-empty-state strong{font-family:var(--font-heading),var(--font-body),Arial,sans-serif;font-size:18px}
.report-empty-state p{max-width:520px;margin:0;color:var(--muted);line-height:1.5}
.report-empty-action{display:flex;align-items:center;justify-content:center;gap:9px;min-height:46px;margin-top:10px;padding:0 22px;border:1px solid #9db87a;border-radius:8px;background:#fff;color:var(--matcha-dark);font-family:var(--font-heading),var(--font-body),Arial,sans-serif;font-weight:900;cursor:pointer}
.report-empty-action:hover{background:#f7fbef}
.empty-state{grid-column:1/-1;border:1px dashed #d8cdb8;border-radius:12px;padding:18px;color:var(--muted);font-weight:700;text-align:center}
.table-image{width:52px;height:42px;object-fit:cover;border-radius:8px;background:#f4ead9;border:1px solid var(--line)}
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;margin-top:14px}
th,td{padding:12px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
th{background:#f8f1e6;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--matcha-dark)}
.action{display:flex;gap:8px}.edit{background:var(--matcha)}.delete{background:#ef4444}
.message{margin-top:12px;font-weight:700}
.app-watermark{display:grid;gap:3px;margin-top:auto;padding-top:18px;border-top:1px solid rgba(255,255,255,.16);color:#fff;font-size:11px;font-weight:800;line-height:1.35;text-align:left}
.app-watermark strong{color:#fff;font-family:var(--font-heading),var(--font-body),Arial,sans-serif;font-size:12px}

/* Professional POS refresh */
.card,.stat,.dashboard-metric-card,.product-summary-card,.product-manage-card,.report-stat-card,.setting-card,.cashier-panel,.report-summary-card,.report-product-card,.report-table-card{border:1px solid var(--line);border-radius:10px;background:#fff;box-shadow:var(--shadow-sm)}
.card{padding:18px;margin-bottom:16px}
.dashboard-chart-card,.dashboard-payment-card,.dashboard-list-card{border-radius:10px;background:#fff}
.dashboard-metric-card::after,.report-stat-card::after{display:none}
.dashboard-metric-card,.product-summary-card,.report-stat-card{min-height:112px;padding:18px;gap:14px}
.dashboard-metric-icon,.product-summary-icon,.report-stat-icon{width:48px;height:48px;border-radius:10px;background:#eef6ef;color:var(--matcha)}
.metric-qty .dashboard-metric-icon,.report-stat-qty .report-stat-icon{background:var(--warning-soft);color:#b76a00}
.metric-product .dashboard-metric-icon,.product-summary-value .product-summary-icon,.report-stat-profit .report-stat-icon{background:#eef2ff;color:#475ac7}
.dashboard-metric-copy{gap:6px}.dashboard-metric-copy>span,.product-summary-card span:not(.product-summary-icon),.report-stat-card span:not(.report-stat-icon){color:var(--muted);font-size:13px;font-weight:500}
.dashboard-metric-copy strong,.product-summary-card strong,.report-stat-card strong{color:var(--ink);font-size:24px;font-weight:800}
.product-summary-card strong{max-width:100%;line-height:1.12;overflow-wrap:anywhere;white-space:normal}
.product-summary-value strong{font-size:clamp(19px,1.45vw,24px)}
.dashboard-metric-copy small,.product-summary-card small,.report-stat-card small{color:#16803d;font-weight:700}
.dashboard-page.active,.product-page.active,.report-page.active{gap:16px}
.dashboard-toolbar,.report-toolbar{margin-top:0;margin-bottom:0}
.dashboard-filter-button,.dashboard-toolbar-select,.dashboard-icon-button,.report-toolbar-select,.report-icon-button,.product-search,.product-filter,.product-view-toggle,.cashier-search{border-radius:8px;background:#fff;box-shadow:var(--shadow-sm)}
.dashboard-icon-button:hover,.report-icon-button:hover,.dashboard-filter-button:hover,.product-view-toggle button.active,.product-view-toggle button:hover{border-color:#b7c6b9;background:#f3f7f4;color:var(--matcha-dark)}
input,select{border-radius:8px;color:var(--ink);font-weight:500}
label{color:#344054;font-weight:600}
.btn{border-radius:8px;background:var(--matcha-dark);font-weight:700;box-shadow:var(--shadow-sm)}
.btn:hover,.btn.secondary:hover,.checkout-btn:hover{background:#0f2c1d;color:#fff}
.btn.secondary{background:#fff;color:var(--matcha-dark);border:1px solid var(--line)}
.btn.danger{background:var(--danger)}
.dialog-close{border-radius:8px}
.setting-card{min-height:200px}
.setting-icon{width:46px;height:46px;border-radius:10px;background:#eef6ef;color:var(--matcha-dark);font-size:20px}
.setting-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.danger-setting{border-color:#f0c8c4}.danger-setting .setting-icon{background:#fff1f0;color:var(--danger)}
.setting-info-icon{font-family:var(--font-heading),var(--font-body),Arial,sans-serif;font-weight:900}
.audit-page.active{display:grid;gap:16px}.audit-hero{display:flex;align-items:center;justify-content:space-between;gap:22px;padding:24px;border:1px solid #28533a;border-radius:12px;background:linear-gradient(135deg,#143821,#28533a);color:#fff;box-shadow:var(--shadow-md)}.audit-kicker{display:inline-block;margin-bottom:8px;padding:5px 9px;border:1px solid rgba(255,255,255,.22);border-radius:999px;background:rgba(255,255,255,.1);font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.audit-hero h3{margin:0;font-size:24px}.audit-hero p{max-width:620px;margin:7px 0 0;color:#d9e9de;line-height:1.5}.audit-hero-actions{display:flex;gap:10px;flex-wrap:wrap}.audit-action-button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:46px;white-space:nowrap}.audit-action-button.secondary{border-color:rgba(255,255,255,.35);background:rgba(255,255,255,.1);color:#fff}.audit-action-button svg,.audit-stat-icon svg,.audit-search svg,.audit-filter svg,.audit-log-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.audit-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.audit-stat-card{display:grid;grid-template-columns:auto minmax(0,1fr);gap:13px;align-items:center;padding:17px;border:1px solid var(--line);border-radius:10px;background:#fff;box-shadow:var(--shadow-sm)}.audit-stat-icon{display:grid;place-items:center;width:46px;height:46px;border-radius:10px;background:#eef6ef;color:var(--matcha)}.audit-stat-today{background:#eef2ff;color:#475ac7}.audit-stat-security{background:#f3eefe;color:#7553b7}.audit-stat-warning{background:#fff7e6;color:#b76a00}.audit-stat-card div{display:grid;gap:3px}.audit-stat-card small,.audit-stat-card span{color:var(--muted);font-size:11px}.audit-stat-card strong{font-family:var(--font-heading),var(--font-body),Arial,sans-serif;font-size:23px}.audit-panel{padding:0;overflow:hidden}.audit-toolbar{display:grid;grid-template-columns:minmax(280px,1fr) 210px 210px;gap:10px;padding:16px;border-bottom:1px solid var(--line);background:#f8fafc}.audit-search,.audit-filter{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:9px;height:46px;padding:0 13px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--muted)}.audit-search input,.audit-filter select{height:44px;padding:0;border:0;background:transparent}.audit-search input:focus,.audit-filter select:focus{box-shadow:none}.audit-list-header{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 18px;border-bottom:1px solid var(--line)}.audit-list-header div{display:grid;gap:3px}.audit-list-header strong{font-family:var(--font-heading),var(--font-body),Arial,sans-serif}.audit-list-header small{color:var(--muted)}.audit-live-badge{display:flex;align-items:center;gap:7px;padding:6px 9px;border-radius:999px;background:#ecfdf3;color:#166534;font-size:11px;font-weight:800}.audit-live-badge i{width:7px;height:7px;border-radius:999px;background:#22c55e}.audit-log-list{display:grid;max-height:620px;overflow-y:auto}.audit-log-item{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:start;padding:16px 18px;border-bottom:1px solid var(--line);background:#fff}.audit-log-item:last-child{border-bottom:0}.audit-log-item:hover{background:#fafcfb}.audit-log-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:10px;background:#eef6ef;color:var(--matcha)}.audit-log-item.category-product .audit-log-icon{background:#fff7e6;color:#b76a00}.audit-log-item.category-security .audit-log-icon{background:#f3eefe;color:#7553b7}.audit-log-item.category-data .audit-log-icon{background:#eef2ff;color:#475ac7}.audit-log-item.level-warning .audit-log-icon,.audit-log-item.level-error .audit-log-icon{background:#fff1f0;color:var(--danger)}.audit-log-main{display:grid;gap:5px;min-width:0}.audit-log-title{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.audit-log-title strong{font-family:var(--font-heading),var(--font-body),Arial,sans-serif}.audit-log-badge{padding:4px 7px;border-radius:999px;background:#f2f4f7;color:#475467;font-size:10px;font-weight:800;text-transform:uppercase}.audit-log-main p{margin:0;color:var(--muted);line-height:1.45}.audit-log-reference{color:var(--matcha);font-size:11px;font-weight:800}.audit-log-time{display:grid;gap:4px;text-align:right;white-space:nowrap}.audit-log-time strong{font-size:12px}.audit-log-time small{color:var(--muted);font-size:11px}.audit-empty{display:grid;place-items:center;gap:9px;min-height:250px;padding:28px;text-align:center;color:var(--muted)}.audit-empty span{display:grid;place-items:center;width:58px;height:58px;border-radius:12px;background:#eef6ef;color:var(--matcha)}.audit-empty span svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:2}
.product-toolbar{gap:10px}
.product-card-grid{gap:14px}.product-manage-card{padding:14px}.product-card-image,.product-tile-image,.cart-item-image,.top-product-row img,.stock-alert img{background:#fff;border-color:#edf0f2}
.product-card-copy strong,.product-name,.top-product-name{font-weight:700}
.product-card-actions button{border:1px solid var(--line);font-weight:700}
.product-card-actions button:hover{background:#f3f7f4}
.product-stock-row em,.reset-item-side small{border-radius:999px;background:#ecfdf3;color:#166534}
.status-low .product-stock-row em{background:#fff7e6;color:#b76a00}.status-critical .product-stock-row em,.status-empty .product-stock-row em{background:#fff1f0;color:var(--danger)}
.cashier-layout{grid-template-columns:minmax(0,1fr) 480px;gap:18px}
.cashier-category{min-height:38px;border-radius:999px;font-weight:700}
.cashier-category.active,.cashier-category:hover{border-color:var(--matcha);background:var(--matcha-dark);color:#fff}
.product-grid{gap:10px}.product-tile{min-height:208px;border-radius:8px;padding:10px;grid-template-rows:116px auto auto auto;box-shadow:none}.product-tile img{height:116px}.product-tile:hover,.product-tile.active{border-color:var(--matcha);box-shadow:0 6px 14px rgba(16,24,40,.08);transform:none}
.product-tile strong{color:var(--matcha-dark);font-weight:700}.product-tile small{font-size:12px}
.cashier-panel{gap:12px;padding:16px}
.selected-product{border-radius:8px;background:#f9fafb;border-color:var(--line);font-weight:600}
.selected-product.filled{background:#f3f7f4;border-color:#b7c6b9}
.cart-summary,.manual-toggle,.cart-item,.cash-payment,.qris-payment{border-radius:8px;background:#fff}
.cart-summary-total{font-size:20px}.payment-option{min-height:48px;border-radius:8px;font-weight:700}.payment-option.active,.payment-option:hover{background:#f3f7f4}
.checkout-btn{min-height:54px;border-radius:8px;background:var(--matcha-dark)}
.receipt-reprint-btn,.clear-cart-btn{border-radius:8px}
.report-summary-actions{grid-template-columns:230px minmax(0,1fr);gap:14px}
.report-hint{border-radius:8px;background:#fffbeb;border-color:#f0d9a6}
.report-product-row{border-radius:8px}.report-product-rank,.top-product-rank{background:#e8f2ea;color:var(--matcha-dark)}
.report-product-metric b{color:var(--ink)}
table{border-collapse:separate;border-spacing:0;margin-top:0}
th,td{padding:11px 14px;border-bottom:1px solid var(--line)}
th{background:#f8fafc;color:#344054;font-size:11px;font-weight:800;letter-spacing:.04em}
td{background:#fff;color:#1f2937}
.empty-state,.dashboard-empty,.product-empty-state{border-color:#cfd6df;background:#fff;color:var(--muted)}
.reset-dialog,.receipt-dialog{border-radius:12px;background:#fff;box-shadow:0 24px 70px rgba(16,24,40,.24)}
.reset-dialog::backdrop,.receipt-dialog::backdrop{background:rgba(15,23,42,.48);backdrop-filter:blur(2px)}
.utility-header-icon,.reset-header-icon{border-radius:10px;background:#eef6ef}
.app-watermark{color:#cddbd2;font-weight:600}.app-watermark strong{color:#fff;font-size:12px}
.main,.page,.card,.dashboard-metric-card,.product-summary-card,.product-manage-card,.cashier-panel,.report-stat-card,.audit-panel{min-width:0}
img,svg,canvas{max-width:100%}
button,input,select{font:inherit}
@media screen and (max-width:1400px){
  .product-page-header{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
  }

  .product-summary-grid{
    grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  }

  .product-toolbar{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .product-search,
  .product-filter,
  .product-view-toggle{
    min-width:0;
  }

  .product-view-toggle{
    width:max-content;
  }
}

@media screen and (max-width:1100px){
  .product-page-header{
    grid-template-columns:1fr;
  }

  .product-header-actions{
    justify-content:stretch;
  }

  .product-header-actions .btn{
    flex:1 1 180px;
  }

  .product-summary-grid,
  .product-toolbar{
    grid-template-columns:1fr;
  }

  .product-view-toggle{
    width:100%;
  }

  .product-view-toggle button{
    flex:1 1 0;
  }
}
@media screen and (max-width:1180px){
  body{
    display:block;
    min-height:100svh;
    overflow-x:hidden;
  }

  .sidebar{
    position:sticky;
    top:0;
    z-index:50;
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
    width:100%;
    height:auto;
    padding:10px 12px;
    border-right:0;
    border-bottom:1px solid rgba(255,255,255,.12);
    box-shadow:0 8px 22px rgba(16,24,40,.12);
  }

  .brand{
    flex:0 1 300px;
    display:grid;
    grid-template-columns:56px minmax(0,1fr);
    align-items:center;
    justify-items:start;
    gap:10px;
    margin:0;
    padding:8px 10px;
    text-align:left;
  }

  .brand-logo-frame{
    width:56px;
    padding:3px;
    border-radius:8px;
  }

  .brand-copy{
    text-align:left;
    justify-items:start;
  }

  .brand h1{
    font-size:14px;
    line-height:1.2;
  }

  .brand p{
    font-size:12px;
  }

  .nav{
    flex:1 1 118px;
    justify-content:center;
    min-width:0;
    min-height:42px;
    margin:0;
    padding:0 10px;
    gap:7px;
    text-align:center;
  }

  .nav.active,.nav:hover{
    box-shadow:inset 0 -2px 0 #8dc265;
  }

  .app-watermark{
    display:none;
  }

  .main{
    width:100%;
    margin-left:0;
    padding:20px;
  }

  .topbar{
    margin-bottom:18px;
  }

  .dashboard-toolbar,
  .report-toolbar{
    margin-top:0;
    margin-bottom:0;
  }

  .dashboard-metrics,
  .product-summary-grid,
  .report-stats,
  .audit-stats,
  .settings-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .dashboard-main-grid,
  .dashboard-bottom-grid,
  .cashier-layout,
  .report-summary-actions,
  .report-card-title,
  .audit-toolbar,
  .product-form{
    grid-template-columns:1fr;
  }

  .dashboard-metric-card,
  .product-summary-card,
  .report-stat-card,
  .audit-stat-card{
    min-height:0;
  }

  .payment-summary{
    grid-template-columns:minmax(170px,.45fr) minmax(0,1fr);
  }

  .page#kasir.active{
    height:auto;
    overflow:visible;
  }

  .page#kasir.active .cashier-layout{
    height:auto;
    overflow:visible;
  }

  .cashier-products-area,
  .cashier-products-area .product-grid,
  .cashier-panel{
    height:auto;
    max-height:none;
    overflow:visible;
  }

  .cashier-panel{
    position:static;
    top:auto;
  }

  .product-grid{
    grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  }

  .product-toolbar{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .product-view-toggle{
    width:100%;
  }

  .product-view-toggle button{
    flex:1 1 0;
  }

  .product-form label,
  .product-form .field-name,
  .product-form .field-media,
  .form-actions,
  .product-form-card[data-mode="stock"] .field-name,
  .product-form-card[data-mode="stock"] .field-category,
  .product-form-card[data-mode="stock"] .field-cost,
  .product-form-card[data-mode="stock"] .field-price,
  .product-form-card[data-mode="stock"] .field-stock-start,
  .product-form-card[data-mode="stock"] .field-stock-add,
  .product-form-card[data-mode="stock"] .field-image-url,
  .product-form-card[data-mode="stock"] .field-image-upload,
  .product-form-card[data-mode="stock"] .form-actions{
    grid-column:1;
    grid-row:auto;
  }

  .form-actions{
    grid-template-columns:1fr 1fr;
  }

  .report-period-display,
  .report-product-total{
    justify-self:start;
  }

  .report-product-row{
    grid-template-columns:30px minmax(0,1fr);
  }

  .report-product-metric{
    grid-column:2;
    text-align:left;
  }

  .audit-hero{
    display:grid;
  }

  .audit-hero-actions,
  .audit-action-button{
    width:100%;
  }

  input,select,.btn,.nav,.payment-option,.cashier-category{
    min-height:44px;
  }
}
@media(max-width:1200px){
  .dashboard-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dashboard-main-grid,.dashboard-bottom-grid{grid-template-columns:1fr}
  .payment-summary{grid-template-columns:190px minmax(0,1fr)}
  .payment-donut{width:184px;height:184px}
}
@media(max-width:900px){
  body{display:block}.sidebar{position:relative;width:100%;height:auto}.main{margin-left:0;width:100%;padding:16px}
  .stats,.dashboard-grid,.settings-grid,.form-grid,.cashier-layout,.product-form{grid-template-columns:1fr}.topbar{align-items:flex-start;gap:12px}
  .dashboard-page.active{gap:14px}.dashboard-toolbar{display:grid;grid-template-columns:1fr 1fr auto;margin-top:0;margin-bottom:0}
  .dashboard-metrics,.dashboard-main-grid,.dashboard-bottom-grid,.payment-summary{grid-template-columns:1fr}
  .dashboard-chart-card,.dashboard-payment-card,.dashboard-list-card{padding:16px}.dashboard-metric-card{min-height:118px}.payment-donut{width:190px;height:190px}
  .payment-method-row{grid-template-columns:minmax(0,1fr) auto;gap:10px}
  .product-page-header,.product-pagination{display:grid;gap:12px}.product-header-actions{justify-content:stretch}.product-header-actions .btn{width:100%}
  .product-summary-grid,.product-toolbar,.product-card-grid,.product-card-grid.list-view,.product-card-grid.list-view .product-manage-card{grid-template-columns:1fr}
  .product-card-main{grid-template-columns:88px minmax(0,1fr)}.product-card-image{width:88px;height:88px}.product-view-toggle{justify-content:flex-start}.product-pagination-controls{flex-wrap:wrap}
  .report-page.active{gap:14px}.report-toolbar{display:flex;margin-top:0;margin-bottom:0;align-items:stretch}
  .report-date-range{flex:1;flex-wrap:wrap}
  .report-date-range label{min-width:min(180px,100%);flex:1}
  .report-card-title,.report-stats,.report-summary-actions{grid-template-columns:1fr}
  .report-period-display,.report-product-total{justify-self:start}
  .report-summary-card,.report-product-card,.report-table-card{padding:16px}.report-stat-card{min-height:98px}.report-table-wrap{min-height:300px}
  .report-product-row{grid-template-columns:30px minmax(0,1fr);gap:10px}.report-product-metric{grid-column:2;text-align:left}
  .audit-hero{display:grid}.audit-hero-actions,.audit-action-button{width:100%}.audit-stats,.audit-toolbar{grid-template-columns:1fr}.audit-log-item{grid-template-columns:auto minmax(0,1fr)}.audit-log-time{grid-column:2;text-align:left}
  .reset-dialog{width:min(100vw - 18px,680px)}
  .reset-header{grid-template-columns:auto minmax(0,1fr) auto;padding:18px 16px 14px}.reset-header-icon{width:46px;height:46px}.reset-header-copy h3{font-size:20px}
  #resetDialog .dialog-form{padding:0 16px}.reset-tabs,.reset-search-row,.reset-footer{grid-template-columns:1fr}
  .utility-header{grid-template-columns:auto minmax(0,1fr) auto;padding:18px 16px 14px}.utility-header-icon{width:46px;height:46px}.utility-header-copy h3{font-size:20px}
  .utility-options,.utility-form{padding-left:16px!important;padding-right:16px!important;padding-bottom:16px!important}.utility-option{align-items:flex-start}
  .about-app-body{margin:0 16px 16px}.about-hero{grid-template-columns:1fr;padding:16px}.about-logo-badge{width:96px}.about-copy strong{font-size:24px}.about-credit-card{grid-template-columns:1fr}.about-credit-card b{white-space:normal}
  .reset-tab{min-height:52px}.reset-item-list{max-height:320px}.reset-item,.reset-product-item{grid-template-columns:auto minmax(0,1fr);gap:10px}
  .reset-transaction-item{grid-template-columns:auto minmax(0,1fr)}
  .reset-item-image,.reset-item-symbol{grid-column:2}.reset-item-main,.reset-item-side{grid-column:2}.reset-item-side{justify-items:start;min-width:0;gap:6px}
  .reset-transaction-item .reset-payment-badge,.reset-transaction-item .reset-transaction-metric,.reset-transaction-item .reset-transaction-more{grid-column:2;justify-self:start}.reset-transaction-metric{padding-left:0;border-left:0}
  .reset-footer{margin:14px -16px 0;padding:16px}.reset-footer .btn{width:100%}
  .sales-chart-card{grid-column:1}
  .product-form label,.product-form .field-name,.product-form .field-media,.form-actions{grid-column:1;grid-row:auto}.form-actions{grid-template-columns:1fr}
  .product-form-card[data-mode="stock"] .field-name,.product-form-card[data-mode="stock"] .field-category,.product-form-card[data-mode="stock"] .field-cost,.product-form-card[data-mode="stock"] .field-price,.product-form-card[data-mode="stock"] .field-stock-start,.product-form-card[data-mode="stock"] .field-stock-add,.product-form-card[data-mode="stock"] .field-image-url,.product-form-card[data-mode="stock"] .field-image-upload,.product-form-card[data-mode="stock"] .form-actions{grid-column:1;grid-row:auto}
  .page#kasir.active{height:auto;overflow:visible}
  .cashier-layout{height:auto;min-height:0}.cashier-products-area{height:auto;overflow:visible}.product-picker-card,.cashier-panel{position:static;top:auto;height:auto;max-height:none;overflow:visible}
  .product-picker-card{min-height:auto}
  .product-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-height:none;overflow-y:visible}
  .cart-items{max-height:none}
  .app-watermark{margin-top:18px;font-size:10px}
}

@media screen and (max-width:900px){
  html,body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }

  body{
    display:block;
    min-height:100svh;
    background:var(--cream);
  }

  .sidebar{
    position:sticky;
    top:0;
    z-index:50;
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
    width:100%;
    height:auto;
    padding:10px 12px;
    border-right:0;
    border-bottom:1px solid rgba(255,255,255,.12);
    box-shadow:0 8px 22px rgba(16,24,40,.12);
  }

  .brand{
    flex:1 0 100%;
    display:grid;
    grid-template-columns:46px minmax(0,1fr);
    align-items:center;
    justify-items:start;
    gap:10px;
    margin:0;
    padding:8px;
    text-align:left;
  }

  .brand-logo-frame{
    width:46px;
    padding:3px;
    border-radius:8px;
  }

  .logo{
    border-radius:6px;
  }

  .brand-copy{
    text-align:left;
  }

  .brand h1{
    font-size:13px;
    line-height:1.2;
    white-space:normal;
  }

  .brand p{
    font-size:11px;
  }

  .nav{
    flex:1 1 calc(33.333% - 8px);
    justify-content:center;
    min-width:0;
    min-height:38px;
    margin:0;
    padding:0 8px;
    gap:6px;
    font-size:11px;
    text-align:center;
  }

  .nav svg{
    width:16px;
    height:16px;
  }

  .nav.active,.nav:hover{
    box-shadow:inset 0 -2px 0 #8dc265;
  }

  .app-watermark{
    display:none;
  }

  .main{
    width:100%;
    min-width:0;
    margin-left:0;
    padding:14px 12px 22px;
  }

  .topbar{
    display:grid;
    gap:10px;
    margin-bottom:14px;
    padding-bottom:12px;
  }

  .topbar h2{
    font-size:22px;
  }

  .topbar-actions{
    justify-content:stretch;
  }

  .topbar-actions .btn{
    flex:1 1 150px;
  }

  .card{
    padding:14px;
    margin-bottom:12px;
  }

  .dashboard-page.active,
  .product-page.active,
  .report-page.active,
  .audit-page.active{
    gap:12px;
  }

  .dashboard-toolbar{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) 44px;
    gap:8px;
  }

  .dashboard-filter-button,
  .dashboard-toolbar-select,
  .dashboard-icon-button,
  .report-toolbar-select,
  .report-icon-button{
    height:44px;
  }

  .dashboard-icon-button,
  .report-icon-button{
    width:44px;
  }

  .dashboard-metrics,
  .dashboard-main-grid,
  .dashboard-bottom-grid,
  .payment-summary,
  .product-summary-grid,
  .settings-grid,
  .audit-stats{
    grid-template-columns:1fr;
  }

  .dashboard-metric-card,
  .product-summary-card,
  .report-stat-card,
  .audit-stat-card{
    grid-template-columns:44px minmax(0,1fr);
    min-height:0;
    padding:14px;
    gap:12px;
  }

  .dashboard-metric-icon,
  .product-summary-icon,
  .report-stat-icon,
  .audit-stat-icon{
    width:44px;
    height:44px;
  }

  .dashboard-metric-copy strong,
  .product-summary-card strong,
  .report-stat-card strong{
    font-size:21px;
  }

  .dashboard-card-title,
  .product-page-header,
  .product-form-header,
  .report-card-title,
  .audit-list-header{
    display:grid;
    grid-template-columns:1fr;
    align-items:start;
  }

  .dashboard-card-title h3,
  .report-card-title h3,
  .cashier-section-title h3,
  .cashier-panel-title h3{
    font-size:17px;
  }

  .sales-chart{
    min-height:230px;
  }

  .dashboard-line-chart{
    min-width:520px;
    height:240px;
  }

  .payment-summary{
    justify-items:stretch;
    min-height:0;
  }

  .payment-donut{
    width:170px;
    height:170px;
  }

  .product-page-header h3{
    font-size:22px;
  }

  .product-toolbar,
  .cashier-layout,
  .product-form,
  .report-summary-actions,
  .audit-toolbar{
    grid-template-columns:1fr;
  }

  .product-header-actions,
  .cashier-secondary-actions,
  .cashier-payment-options{
    grid-template-columns:1fr 1fr;
  }

  .product-header-actions{
    display:grid;
  }

  .product-card-main{
    grid-template-columns:82px minmax(0,1fr);
  }

  .product-card-image{
    width:82px;
    height:82px;
  }

  .product-card-actions{
    grid-template-columns:1fr 1fr 42px;
  }

  .product-pagination{
    align-items:stretch;
  }

  .cashier-layout{
    gap:14px;
  }

  .product-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .product-tile{
    min-height:188px;
    grid-template-rows:102px auto auto auto;
  }

  .product-tile img{
    height:102px;
  }

  .cart-item{
    grid-template-columns:54px minmax(0,1fr) auto;
    gap:8px;
  }

  .cart-item-image{
    width:54px;
    height:54px;
  }

  .cart-item-actions,
  .cart-item-total{
    grid-column:2;
  }

  .remove-cart{
    grid-column:3;
    grid-row:1;
  }

  .checkout-btn{
    min-height:52px;
    padding:0 14px;
  }

  .report-toolbar{
    justify-content:stretch;
  }

  .report-toolbar-select{
    width:auto;
    flex:1 1 auto;
  }

  .report-period-display,
  .report-product-total{
    justify-self:stretch;
    width:100%;
  }

  .report-date-range{
    display:grid;
    grid-template-columns:1fr;
    width:100%;
  }

  .report-date-separator{
    padding:0;
    text-align:center;
  }

  .report-apply-button{
    width:100%;
  }

  .report-product-row{
    grid-template-columns:28px minmax(0,1fr);
  }

  .table-wrap,
  .report-table-wrap{
    overflow-x:auto;
  }

  .audit-hero{
    padding:16px;
  }
}

@media screen and (max-width:560px){
  .sidebar{
    gap:6px;
    padding:8px;
  }

  .nav{
    flex-basis:calc(50% - 6px);
  }

  .main{
    padding:12px 10px 20px;
  }

  .dashboard-toolbar{
    grid-template-columns:minmax(0,1fr) 44px;
  }

  .dashboard-date-picker{
    grid-column:1/-1;
  }

  .dashboard-toolbar-select{
    grid-column:1;
    grid-row:2;
  }

  .dashboard-icon-button{
    grid-column:2;
    grid-row:2;
    justify-self:end;
  }

  .dashboard-metric-card,
  .product-summary-card,
  .report-stat-card,
  .audit-stat-card{
    padding:12px;
  }

  .dashboard-filter-button{
    padding:0 12px;
  }

  .payment-method-row,
  .today-summary-row,
  .top-product-row,
  .stock-alert{
    gap:8px;
  }

  .payment-method-value{
    min-width:82px;
  }

  .product-grid{
    gap:8px;
  }

  .product-tile{
    min-height:176px;
    padding:8px;
    grid-template-rows:94px auto auto auto;
  }

  .product-tile img{
    height:94px;
  }

  .product-name{
    font-size:13px;
  }

  .product-tile strong,
  .product-tile small{
    font-size:12px;
  }

  .cashier-payment-options,
  .cashier-secondary-actions,
  .product-header-actions{
    grid-template-columns:1fr;
  }

  .product-card-actions{
    grid-template-columns:1fr;
  }

  .product-card-actions button:last-child{
    width:100%;
  }
}
@media screen and (max-width:420px){
  body{
    font-size:13px;
  }

  .sidebar{
    position:static;
    padding:7px;
  }

  .brand{
    grid-template-columns:42px minmax(0,1fr);
    gap:8px;
    padding:7px;
  }

  .brand-logo-frame{
    width:42px;
  }

  .brand h1{
    font-size:12px;
  }

  .brand p{
    font-size:10px;
  }

  .nav{
    min-height:36px;
    padding:0 7px;
    gap:5px;
    font-size:10px;
  }

  .nav svg{
    width:15px;
    height:15px;
  }

  .main{
    padding:10px 8px 16px;
  }

  .topbar{
    margin-bottom:10px;
    padding-bottom:10px;
  }

  .topbar h2{
    font-size:20px;
  }

  .card,
  .dashboard-chart-card,
  .dashboard-payment-card,
  .dashboard-list-card,
  .product-form-card,
  .report-summary-card,
  .report-product-card,
  .report-table-card{
    padding:12px;
  }

  .dashboard-toolbar,
  .report-toolbar,
  .product-toolbar{
    gap:7px;
  }

  .dashboard-metric-card,
  .product-summary-card,
  .report-stat-card,
  .audit-stat-card{
    grid-template-columns:38px minmax(0,1fr);
    gap:10px;
  }

  .dashboard-metric-icon,
  .product-summary-icon,
  .report-stat-icon,
  .audit-stat-icon{
    width:38px;
    height:38px;
  }

  .dashboard-metric-copy strong,
  .product-summary-card strong,
  .report-stat-card strong,
  .audit-stat-card strong{
    font-size:19px;
  }

  .product-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .product-tile{
    min-height:164px;
    grid-template-rows:84px auto auto auto;
  }

  .product-tile img{
    height:84px;
  }

  .cart-summary-total,
  .checkout-btn strong{
    font-size:17px;
  }

  input,select,.btn,.payment-option{
    min-height:42px;
  }

  .reset-dialog,
  .receipt-dialog{
    width:calc(100vw - 12px);
  }
}

/* Final responsive safety layer for tablet and Android POS devices. */
@media screen and (max-width:1180px){
  html,
  body{
    width:100%;
    max-width:100%;
    min-height:100%;
    overflow-x:hidden;
  }

  body:has(#kasir.active){
    overflow-x:hidden;
    overflow-y:auto;
  }

  .sidebar{
    flex-wrap:nowrap;
    align-items:center;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
  }

  .brand{
    flex:0 0 min(310px,76vw);
  }

  .nav{
    flex:0 0 auto;
    min-width:120px;
    white-space:nowrap;
  }

  .main{
    width:100%;
    min-height:auto;
    overflow:visible;
  }

  .page#kasir.active,
  .page#kasir.active .cashier-layout,
  .cashier-products-area,
  .cashier-products-area .product-grid,
  .cashier-panel{
    height:auto;
    max-height:none;
    overflow:visible;
  }

  .page#kasir.active{
    min-height:0;
  }

  .cashier-layout{
    min-height:0;
    align-items:stretch;
  }

  .cashier-categories{
    flex-wrap:nowrap;
    overflow-x:auto;
    overflow-y:hidden;
    padding-bottom:8px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
  }

  .cashier-category{
    flex:0 0 auto;
  }

  .cashier-products-area .product-grid{
    padding-right:0;
    overscroll-behavior:auto;
  }

  .cashier-panel{
    position:static;
    top:auto;
    overscroll-behavior:auto;
  }

  .cart-items{
    max-height:none;
  }
}

@media screen and (max-width:900px){
  body:has(#kasir.active){
    overflow-y:auto;
  }

  .sidebar{
    position:sticky;
    top:0;
    flex-wrap:nowrap;
    max-height:82px;
  }

  .brand{
    flex-basis:min(250px,70vw);
  }

  .brand h1{
    font-size:12px;
  }

  .brand p{
    font-size:10px;
  }

  .nav{
    min-width:104px;
    min-height:40px;
    font-size:11px;
  }

  .product-grid{
    grid-template-columns:repeat(auto-fit,minmax(136px,1fr));
  }
}

@media screen and (max-width:560px){
  .sidebar{
    max-height:72px;
  }

  .brand{
    flex-basis:min(214px,68vw);
    grid-template-columns:38px minmax(0,1fr);
  }

  .brand-logo-frame{
    width:38px;
  }

  .nav{
    min-width:92px;
    min-height:36px;
    padding:0 8px;
  }

  .product-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

/* Desktop/POS cashier: only the product picker scrolls, the transaction panel stays put. */
@media screen and (min-width:901px){
  body:has(#kasir.active){
    overflow:hidden!important;
  }

  .page#kasir.active{
    height:calc(100vh - 130px)!important;
    min-height:0!important;
    overflow:hidden!important;
  }

  .page#kasir.active .cashier-layout{
    height:100%!important;
    min-height:0!important;
    align-items:start!important;
    overflow:hidden!important;
  }

  #kasir.active .cashier-products-area{
    grid-template-rows:auto auto auto minmax(0,1fr)!important;
    height:100%!important;
    min-height:0!important;
    overflow:hidden!important;
  }

  #kasir.active .cashier-products-area .product-grid{
    height:auto!important;
    max-height:none!important;
    min-height:0!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    padding-right:6px!important;
    overscroll-behavior:contain!important;
  }

  #kasir.active .cashier-panel{
    position:sticky!important;
    top:24px!important;
    height:auto!important;
    max-height:100%!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    align-self:start!important;
  }
}

@media screen and (max-width:900px){
  body:has(#kasir.active){
    overflow-x:hidden!important;
    overflow-y:auto!important;
  }

  .page#kasir.active,
  .page#kasir.active .cashier-layout,
  #kasir.active .cashier-products-area,
  #kasir.active .cashier-products-area .product-grid,
  #kasir.active .cashier-panel{
    height:auto!important;
    max-height:none!important;
    min-height:0!important;
    overflow:visible!important;
  }

  #kasir.active .cashier-panel{
    position:static!important;
    top:auto!important;
  }
}

#kasir.active .cashier-categories{
  overflow-x:auto!important;
  overflow-y:hidden!important;
  -webkit-overflow-scrolling:touch;
}

@media screen and (min-width:901px){
  #kasir.active .cart-items{
    max-height:305px!important;
    overflow-y:auto!important;
  }
}

@media screen and (max-width:900px){
  #kasir.active .cart-items{
    max-height:none!important;
  }
}

/* Keep the top navigation wrapped, not horizontally scrolled. */
@media screen and (max-width:900px){
  .sidebar{
    flex-wrap:wrap!important;
    overflow-x:visible!important;
    overflow-y:visible!important;
    max-height:none!important;
  }

  .brand{
    flex:1 1 280px!important;
  }

  .nav{
    flex:1 1 132px!important;
    min-width:120px!important;
    white-space:normal!important;
  }
}

@media screen and (max-width:560px){
  .brand{
    flex:1 0 100%!important;
  }

  .nav{
    flex:1 1 calc(50% - 8px)!important;
    min-width:0!important;
  }
}

/* Narrow phone / small tablet mode: avoid right-side clipping. */
@media screen and (max-width:900px){
  html,
  body{
    width:100%;
    max-width:100%;
    overflow-x:hidden!important;
  }

  body{
    display:block!important;
  }

  .sidebar{
    position:sticky!important;
    top:0!important;
    z-index:50!important;
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:wrap!important;
    align-items:center!important;
    gap:8px!important;
    width:100%!important;
    height:auto!important;
    padding:10px 12px!important;
    overflow:visible!important;
    border-right:0!important;
    border-bottom:1px solid rgba(255,255,255,.12)!important;
  }

  .brand{
    flex:1 1 300px!important;
    display:grid!important;
    grid-template-columns:56px minmax(0,1fr)!important;
    align-items:center!important;
    justify-items:start!important;
    gap:10px!important;
    margin:0!important;
    padding:8px 10px!important;
    text-align:left!important;
  }

  .brand-logo-frame{
    width:56px!important;
    padding:3px!important;
  }

  .brand-copy{
    text-align:left!important;
    justify-items:start!important;
  }

  .brand h1{
    font-size:14px!important;
    line-height:1.2!important;
  }

  .brand p{
    font-size:12px!important;
  }

  .nav{
    flex:1 1 132px!important;
    justify-content:center!important;
    min-width:120px!important;
    min-height:42px!important;
    margin:0!important;
    white-space:normal!important;
  }

  .app-watermark{
    display:none!important;
  }

  .main{
    width:100%!important;
    max-width:100%!important;
    margin-left:0!important;
    padding:20px!important;
    overflow:hidden!important;
  }

  .product-page.active{
    width:100%!important;
    max-width:100%!important;
    overflow:hidden!important;
  }

  .product-page-header{
    display:grid!important;
    grid-template-columns:1fr!important;
  }

  .product-header-actions{
    display:grid!important;
    grid-template-columns:repeat(auto-fit,minmax(170px,1fr))!important;
    justify-content:stretch!important;
  }

  .product-header-actions .btn{
    width:100%!important;
  }

  .product-summary-grid{
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr))!important;
  }

  .product-toolbar{
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr))!important;
  }

  .product-view-toggle{
    width:100%!important;
  }

  .product-view-toggle button{
    flex:1 1 0!important;
  }

  .product-card-grid{
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr))!important;
  }

  .product-card-grid.list-view .product-manage-card{
    grid-template-columns:1fr!important;
  }

  .product-card-main{
    grid-template-columns:96px minmax(0,1fr)!important;
  }

  .product-card-image{
    width:96px!important;
    height:96px!important;
  }
}

/* Tablet besar dan desktop tetap memakai sidebar kiri. */
@media screen and (min-width:901px){
  body{
    display:flex!important;
    min-height:100vh!important;
  }

  .sidebar{
    position:fixed!important;
    top:0!important;
    left:0!important;
    z-index:auto!important;
    display:flex!important;
    flex-direction:column!important;
    flex-wrap:nowrap!important;
    align-items:stretch!important;
    gap:0!important;
    width:248px!important;
    height:100vh!important;
    padding:18px 16px!important;
    overflow:hidden!important;
    border-right:1px solid rgba(255,255,255,.08)!important;
    border-bottom:0!important;
    box-shadow:none!important;
  }

  .brand{
    flex:0 0 auto!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    justify-items:center!important;
    gap:14px!important;
    margin:0 0 24px!important;
    padding:14px 12px 16px!important;
    text-align:center!important;
  }

  .brand-logo-frame{
    width:170px!important;
    padding:7px!important;
  }

  .brand-copy{
    text-align:center!important;
    justify-items:center!important;
  }

  .brand h1{
    font-size:18px!important;
    line-height:1.18!important;
  }

  .brand p{
    font-size:14px!important;
  }

  .nav{
    flex:0 0 auto!important;
    justify-content:flex-start!important;
    width:100%!important;
    min-width:0!important;
    min-height:42px!important;
    margin:0 0 4px!important;
    padding:0 12px!important;
    gap:11px!important;
    white-space:normal!important;
    text-align:left!important;
    font-size:14px!important;
  }

  .nav.active,
  .nav:hover{
    box-shadow:inset 3px 0 0 #8dc265!important;
  }

  .app-watermark{
    display:grid!important;
  }

  .main{
    width:calc(100% - 248px)!important;
    max-width:none!important;
    min-height:100vh!important;
    margin-left:248px!important;
    padding:28px 32px!important;
    overflow:visible!important;
  }
}
@page{size:58mm auto;margin:0}
@media print{
  html,body{width:58mm!important;min-height:0!important;margin:0!important;padding:0!important;background:#fff!important}
  body>*:not(#receiptDialog){display:none!important}
  #receiptDialog{display:block!important;position:static!important;width:58mm!important;max-width:none!important;height:auto!important;max-height:none!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:#fff!important;box-shadow:none!important;overflow:visible!important}
  #receiptDialog::backdrop{display:none!important}
  #receiptDialog>*:not(#receiptPrintArea){display:none!important}
  #receiptPrintArea{display:block!important;position:static!important;width:58mm!important;max-width:none!important;height:auto!important;margin:0!important;padding:2mm!important;box-shadow:none!important;overflow:visible!important}
}