:root {
  --bg:#f4f7fb;
  --panel:#ffffff;
  --panel-2:#f7f9fd;
  --text:#162033;
  --muted:#68758a;
  --line:#dfe7f3;
  --brand:#2563eb;
  --brand-2:#3b82f6;
  --brand-soft:#eaf2ff;
  --danger:#c63f47;
  --danger-soft:#fdeced;
  --warning:#b86f08;
  --warning-soft:#fff4df;
  --info:#2563eb;
  --info-soft:#eaf2ff;
  --shadow:0 10px 32px rgba(37, 99, 235, .08);
}

body.dark {
  --bg:#0b1220;
  --panel:#111c30;
  --panel-2:#17243a;
  --text:#eef4ff;
  --muted:#9eabc1;
  --line:#263752;
  --brand:#60a5fa;
  --brand-2:#93c5fd;
  --brand-soft:#172e56;
  --danger:#ff7e86;
  --danger-soft:#392126;
  --warning:#f5b34e;
  --warning-soft:#3c3020;
  --info:#7db4ff;
  --info-soft:#1b3154;
  --shadow:none;
}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--text)}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
.app-shell{display:grid;grid-template-columns:260px 1fr;min-height:100vh}
.sidebar{position:sticky;top:0;height:100vh;background:#0b1f46;color:white;padding:18px 14px;display:flex;flex-direction:column;z-index:30}
.brand-wrap{display:flex;align-items:center;gap:12px;padding:6px 8px 20px;border-bottom:1px solid rgba(255,255,255,.09)}
.brand-mark{width:40px;height:40px;border-radius:12px;background:linear-gradient(145deg,#60a5fa,#2563eb);display:grid;place-items:center;font-weight:800;letter-spacing:-1px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.15)}
.brand-copy{display:flex;flex-direction:column;min-width:0}.brand-copy strong{font-size:15px}.brand-copy span{font-size:11px;color:#b7c8e8;margin-top:3px}
.nav{padding:14px 0;overflow:auto;flex:1}.nav-section{font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:#7e9bc7;margin:16px 10px 6px}.nav-item{display:flex;align-items:center;gap:11px;padding:10px 11px;margin:2px 0;border-radius:10px;color:#d4def0;text-decoration:none;font-size:13px;font-weight:600}.nav-item:hover{background:rgba(255,255,255,.06);color:white}.nav-item.active{background:#173c78;color:white;box-shadow:inset 3px 0 0 #60a5fa}.nav-icon{width:20px;text-align:center;font-size:15px}.nav-badge{margin-left:auto;background:#244a82;color:#e6efff;padding:2px 7px;border-radius:999px;font-size:10px}.sidebar-footer{padding-top:12px;border-top:1px solid rgba(255,255,255,.09)}
.user-mini{display:flex;align-items:center;gap:10px;padding:8px}.avatar{width:34px;height:34px;border-radius:10px;background:#244a82;display:grid;place-items:center;font-size:11px;font-weight:800}.user-mini-copy{display:flex;flex-direction:column;min-width:0}.user-mini-copy strong{font-size:12px}.user-mini-copy span{font-size:10px;color:#9db3d7;overflow:hidden;text-overflow:ellipsis}
.main{min-width:0}.topbar{height:78px;padding:0 26px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--panel) 91%, transparent);backdrop-filter:blur(12px);position:sticky;top:0;z-index:20}.topbar-left{display:flex;align-items:center;gap:13px}.topbar-left h1{font-size:21px;line-height:1.15;margin:0}.topbar-left p{font-size:11px;margin:5px 0 0;color:var(--muted)}.topbar-right{display:flex;gap:8px;align-items:center}.icon-btn{width:38px;height:38px;border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:10px}.profile-btn{height:38px;border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:10px;padding:0 12px;display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700}.status-dot{width:7px;height:7px;border-radius:50%;background:#29b879}.content{padding:24px 26px 40px;max-width:1680px;margin:auto}
.grid{display:grid;gap:16px}.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.card{background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}.card-pad{padding:18px}.metric-card{padding:16px 17px;display:flex;justify-content:space-between;gap:12px;min-height:118px}.metric-label{font-size:11px;color:var(--muted);font-weight:600}.metric-value{font-size:22px;font-weight:800;margin-top:10px;letter-spacing:-.04em}.metric-note{font-size:10px;color:var(--muted);margin-top:6px}.metric-icon{width:38px;height:38px;border-radius:11px;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;font-size:17px}.metric-card.warning .metric-icon{background:var(--warning-soft);color:var(--warning)}.metric-card.danger .metric-icon{background:var(--danger-soft);color:var(--danger)}.metric-card.info .metric-icon{background:var(--info-soft);color:var(--info)}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.section-head h2{font-size:14px;margin:0}.section-head p{font-size:10px;color:var(--muted);margin:4px 0 0}.actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.btn{border:none;border-radius:10px;padding:9px 12px;font-size:11px;font-weight:700}.btn-primary{background:var(--brand);color:white}.btn-secondary{background:var(--panel-2);color:var(--text);border:1px solid var(--line)}.btn-danger{background:var(--danger-soft);color:var(--danger)}.btn-sm{padding:7px 9px;font-size:10px}.pill{font-size:10px;font-weight:700;padding:5px 8px;border-radius:999px;display:inline-flex;align-items:center;gap:5px}.pill.ok{background:var(--brand-soft);color:var(--brand)}.pill.warn{background:var(--warning-soft);color:var(--warning)}.pill.bad{background:var(--danger-soft);color:var(--danger)}.pill.info{background:var(--info-soft);color:var(--info)}
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:12px}.table{width:100%;border-collapse:collapse;min-width:760px}.table th,.table td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--line);font-size:11px;white-space:nowrap}.table th{font-size:10px;color:var(--muted);background:var(--panel-2);text-transform:uppercase;letter-spacing:.04em}.table tbody tr:hover{background:var(--panel-2)}.table tbody tr:last-child td{border-bottom:0}.right{text-align:right!important}.center{text-align:center!important}
.toolbar{display:flex;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap}.search{position:relative;min-width:250px;max-width:420px;flex:1}.search input{width:100%;height:38px;border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:10px;padding:0 12px 0 34px;font-size:11px;outline:none}.search::before{content:'⌕';position:absolute;left:11px;top:8px;color:var(--muted)}.field{display:flex;flex-direction:column;gap:6px}.field label{font-size:10px;color:var(--muted);font-weight:700}.field input,.field select,.field textarea{border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:10px;padding:9px 10px;font-size:11px;outline:none}.field textarea{min-height:80px;resize:vertical}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.form-grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.form-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}
.dashboard-row{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(300px,.75fr);gap:16px;margin-top:16px}.chart{height:250px;display:flex;align-items:end;gap:12px;padding:18px 8px 4px;border-bottom:1px solid var(--line)}.bar-group{flex:1;height:100%;display:flex;align-items:end;gap:5px;position:relative}.bar{flex:1;min-width:10px;border-radius:6px 6px 2px 2px;background:var(--brand);opacity:.92}.bar.alt{background:#93c5fd}.bar-label{position:absolute;bottom:-22px;left:50%;transform:translateX(-50%);font-size:9px;color:var(--muted)}.legend{display:flex;gap:14px;font-size:10px;color:var(--muted);margin-top:26px}.legend span{display:flex;align-items:center;gap:6px}.legend i{width:8px;height:8px;border-radius:2px;background:var(--brand)}.legend i.alt{background:#93c5fd}
.alert-list{display:flex;flex-direction:column;gap:9px}.alert-item{padding:11px;border:1px solid var(--line);border-radius:11px;display:flex;gap:10px;align-items:flex-start}.alert-icon{width:28px;height:28px;border-radius:9px;background:var(--warning-soft);color:var(--warning);display:grid;place-items:center;font-size:12px;flex:none}.alert-item.danger .alert-icon{background:var(--danger-soft);color:var(--danger)}.alert-copy{min-width:0}.alert-copy strong{font-size:11px;display:block}.alert-copy span{font-size:9.5px;color:var(--muted);display:block;margin-top:3px;line-height:1.45}
.pos-layout{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(340px,.65fr);gap:16px}.product-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.product-card{padding:13px;border:1px solid var(--line);border-radius:12px;background:var(--panel);cursor:pointer;transition:.15s}.product-card:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--brand) 55%,var(--line))}.product-name{font-size:11px;font-weight:800;line-height:1.35}.product-meta{font-size:9px;color:var(--muted);margin-top:5px}.product-price{font-size:12px;font-weight:800;margin-top:9px;color:var(--brand)}.cart{position:sticky;top:102px}.cart-items{display:flex;flex-direction:column;gap:8px;max-height:330px;overflow:auto}.cart-item{display:grid;grid-template-columns:1fr auto;gap:8px;padding:9px;background:var(--panel-2);border-radius:10px}.cart-item strong{font-size:10.5px}.cart-item span{font-size:9px;color:var(--muted)}.qty-controls{display:flex;align-items:center;gap:5px}.qty-controls button{width:23px;height:23px;border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:7px}.totals{border-top:1px dashed var(--line);margin-top:14px;padding-top:12px}.total-row{display:flex;justify-content:space-between;font-size:10.5px;margin:7px 0}.total-row.grand{font-size:15px;font-weight:800;margin-top:12px}
.empty{padding:40px 20px;text-align:center;color:var(--muted)}.empty strong{display:block;color:var(--text);font-size:13px;margin-bottom:5px}.empty span{font-size:10px}.kpi-inline{display:flex;gap:12px;flex-wrap:wrap}.kpi-inline .pill{padding:7px 10px}
.modal-backdrop{position:fixed;inset:0;background:rgba(2,10,7,.55);display:grid;place-items:center;padding:20px;z-index:100}.modal-backdrop.hidden{display:none}.modal{width:min(720px,100%);max-height:90vh;overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:18px;box-shadow:0 24px 70px rgba(0,0,0,.2)}.modal-head{padding:16px 18px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}.modal-head h3{margin:0;font-size:14px}.modal-body{padding:18px}.modal-close{border:0;background:transparent;color:var(--muted);font-size:20px}.toast{position:fixed;right:22px;bottom:22px;background:#10251e;color:white;padding:11px 14px;border-radius:11px;font-size:11px;opacity:0;transform:translateY(10px);pointer-events:none;transition:.2s;z-index:150}.toast.show{opacity:1;transform:translateY(0)}
.progress{height:7px;background:var(--panel-2);border-radius:99px;overflow:hidden}.progress>span{display:block;height:100%;background:var(--brand);border-radius:99px}.split-stat{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.split-stat>div{padding:12px;background:var(--panel-2);border-radius:11px}.split-stat strong{display:block;font-size:14px}.split-stat span{font-size:9px;color:var(--muted)}
.receipt{max-width:360px;margin:auto;padding:18px;background:white;color:#161616}.receipt h2{text-align:center;margin:0 0 4px;font-size:17px}.receipt p{text-align:center;margin:2px 0;font-size:10px}.receipt hr{border:0;border-top:1px dashed #aaa;margin:12px 0}.receipt-row{display:flex;justify-content:space-between;gap:12px;font-size:10px;margin:6px 0}.receipt-total{font-size:13px;font-weight:800}
@media (max-width:1180px){.grid-4{grid-template-columns:repeat(2,1fr)}.dashboard-row,.pos-layout{grid-template-columns:1fr}.cart{position:static}.product-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:860px){.app-shell{grid-template-columns:1fr}.sidebar{position:fixed;left:-280px;width:260px;transition:.2s;box-shadow:10px 0 40px rgba(0,0,0,.25)}.sidebar.open{left:0}.topbar{padding:0 16px}.content{padding:18px 14px 32px}.grid-3,.grid-2{grid-template-columns:1fr}.form-grid,.form-grid-3{grid-template-columns:1fr}}
@media (max-width:540px){.grid-4{grid-template-columns:1fr}.product-grid{grid-template-columns:1fr}.topbar-left p{display:none}.topbar-left h1{font-size:18px}.content{padding-top:14px}.metric-card{min-height:100px}.dashboard-row{margin-top:12px}.search{min-width:100%}}
@media print{.sidebar,.topbar,.no-print{display:none!important}.app-shell{display:block}.content{padding:0}.card{border:0;box-shadow:none}.receipt{max-width:80mm;padding:0}.modal-backdrop{position:static;background:none;padding:0}.modal{width:100%;max-height:none;overflow:visible;border:0;box-shadow:none}.modal-head{display:none}.modal-body{padding:0}body.printing-modal #app,body.printing-modal #toast,body.printing-modal #loadingCover{display:none!important}body.printing-modal #modal{display:block!important}body.printing-modal .report-preview{padding:0}.report-table{font-size:9px}.report-head{margin-bottom:14px}}


/* RadbooX Farmasi V2 - Cloudflare + Supabase */
body{font-family:Inter,"Segoe UI",Roboto,Arial,sans-serif}
.hidden{display:none!important}
.auth-screen{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(420px,.7fr);background:linear-gradient(135deg,#eff6ff 0%,#f8fbff 48%,#dbeafe 100%)}
.auth-hero{padding:64px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;background:linear-gradient(145deg,#0b1f46,#123d7a 58%,#2563eb);color:#fff}
.auth-hero:after{content:"";position:absolute;width:420px;height:420px;border-radius:50%;right:-120px;bottom:-130px;background:rgba(96,165,250,.20);box-shadow:0 0 0 60px rgba(96,165,250,.08)}
.auth-brand{display:flex;gap:14px;align-items:center;position:relative;z-index:2}.auth-brand .brand-mark{width:48px;height:48px}.auth-brand strong{font-size:18px}.auth-brand span{font-size:12px;color:#bfd5f8;display:block;margin-top:4px}
.auth-copy{max-width:660px;position:relative;z-index:2}.auth-copy h1{font-size:44px;line-height:1.08;margin:0 0 18px;letter-spacing:-.04em}.auth-copy p{font-size:14px;line-height:1.8;color:#d7e7ff;max-width:590px}.auth-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}.auth-chip{padding:8px 11px;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:rgba(255,255,255,.07);font-size:11px;font-weight:700}
.auth-foot{font-size:11px;color:#aac4ea;position:relative;z-index:2}
.auth-panel{display:grid;place-items:center;padding:36px}.login-card{width:min(420px,100%);background:#fff;border:1px solid #dbe7f7;border-radius:22px;padding:30px;box-shadow:0 24px 70px rgba(30,64,175,.14)}.login-card h2{margin:0;font-size:24px;color:#162033}.login-card>p{font-size:12px;line-height:1.6;color:#6d7c92;margin:8px 0 22px}.login-card .field{margin-bottom:12px}.login-card .field input{height:44px}.login-card .btn{height:44px;width:100%;font-size:12px}.login-note{margin-top:16px;font-size:10px;color:#8290a4;line-height:1.6}.login-error{margin:0 0 12px;padding:10px 11px;border-radius:10px;background:#fff0f1;color:#bb2634;font-size:10px;border:1px solid #ffd8dc}
.config-card{width:min(520px,100%)}.config-steps{margin:14px 0;padding-left:18px;font-size:11px;line-height:1.8;color:#59687e}.code-chip{font-family:Consolas,monospace;background:#f1f5fb;border:1px solid #dfe7f2;padding:2px 5px;border-radius:5px}
.sync-badge{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px;border:1px solid var(--line);border-radius:9px;background:var(--panel);font-size:10px;font-weight:700;color:var(--muted)}.sync-badge i{width:7px;height:7px;border-radius:50%;background:#22c55e}.sync-badge.busy i{background:#f59e0b;animation:pulse 1s infinite}.sync-badge.error i{background:#ef4444}@keyframes pulse{50%{opacity:.35}}
.loading-cover{position:fixed;inset:0;z-index:100;background:rgba(244,247,251,.86);backdrop-filter:blur(7px);display:grid;place-items:center}.loading-box{background:#fff;border:1px solid #dbe7f7;border-radius:16px;padding:20px 26px;box-shadow:var(--shadow);display:flex;align-items:center;gap:12px;font-size:12px;font-weight:700;color:#315079}.spinner{width:18px;height:18px;border:2px solid #dbeafe;border-top-color:#2563eb;border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.role-note{font-size:10px;color:var(--muted);padding:10px 12px;background:var(--brand-soft);border:1px solid color-mix(in srgb,var(--brand) 18%,var(--line));border-radius:10px;line-height:1.6}
.connection-card{display:flex;gap:12px;align-items:flex-start;padding:12px;border-radius:12px;background:var(--panel-2);border:1px solid var(--line)}.connection-dot{width:10px;height:10px;border-radius:50%;background:#22c55e;margin-top:3px;box-shadow:0 0 0 4px rgba(34,197,94,.12)}
.bar.alt{background:#93c5fd}.progress span{background:linear-gradient(90deg,#2563eb,#60a5fa)}
@media(max-width:900px){.auth-screen{grid-template-columns:1fr}.auth-hero{display:none}.auth-panel{min-height:100vh;padding:22px}}

/* Branding RadbooX Farmasi */
.brand-logo-mark{width:40px;height:40px;display:block;object-fit:contain;flex:none;filter:drop-shadow(0 5px 12px rgba(15,65,140,.18))}
.auth-brand .brand-logo-mark{width:50px;height:50px;filter:drop-shadow(0 8px 16px rgba(0,0,0,.16))}
.topbar-logo{display:none;width:32px;height:32px;object-fit:contain;flex:none}
.receipt-logo{display:block;width:48px;height:48px;object-fit:contain;margin:0 auto 6px}
@media(max-width:860px){.topbar-logo{display:block}.topbar-left{gap:9px}}
@media(max-width:540px){.topbar-logo{width:29px;height:29px}}

/* V2.2 POS, receipt and report fixes */
.receipt-items{display:flex;flex-direction:column;gap:7px}.receipt-item{display:grid;grid-template-columns:1fr auto;gap:10px;font-size:9.5px}.receipt-item>div:first-child{display:flex;flex-direction:column;gap:2px}.receipt-item span{color:#555}.receipt-item-right{text-align:right;display:flex;flex-direction:column;gap:2px}.receipt-empty{text-align:center;font-size:9px;color:#777;padding:8px}.test-print-badge{text-align:center;font-size:9px;font-weight:800;letter-spacing:.08em;border:1px dashed #777;padding:5px;margin-bottom:10px}.report-preview{background:var(--panel);color:var(--text)}.report-head{display:flex;align-items:center;gap:12px;margin-bottom:16px}.report-head img{width:42px;height:42px}.report-head h2{margin:0;font-size:16px}.report-head p{margin:3px 0 0;font-size:10px;color:var(--muted)}.report-table td,.report-table th{white-space:nowrap}

/* V2.3 POS receipt style closer to RadbooX Electric */
.receipt.receipt-pos{max-width:360px;padding:16px 14px;font-family:"Courier New",Courier,monospace;border:1px dashed #cfd8e3}
.receipt-store{text-align:center}.receipt-store h2{margin:0 0 3px;font-size:16px;letter-spacing:.02em}.receipt-store p{margin:2px 0;font-size:10px;color:#333}.receipt-pos-title{margin-top:8px;font-size:12px;font-weight:800;letter-spacing:.14em}.receipt-pos-subtitle{font-size:9px;letter-spacing:.1em;color:#4b5563;margin-top:3px}.receipt-separator{border-top:1px dashed #9ca3af;margin:10px 0}.receipt-meta .receipt-row,.receipt-summary .receipt-row{font-size:10px;margin:4px 0}.receipt-colhead{display:flex;justify-content:space-between;gap:10px;font-size:9px;font-weight:800;text-transform:uppercase;color:#4b5563;letter-spacing:.08em;margin-bottom:8px}.receipt-line-item{padding:5px 0;border-bottom:1px dotted #d8dee8}.receipt-line-item:last-child{border-bottom:0}.receipt-item-head,.receipt-item-sub{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}.receipt-item-head strong{font-size:10px;line-height:1.35}.receipt-item-head span,.receipt-item-sub span{font-size:9px;color:#4b5563}.receipt-item-sub strong{font-size:10px}.receipt-summary{display:flex;flex-direction:column;gap:2px}.receipt-grand-total{margin-top:4px;padding-top:7px;border-top:1px dashed #9ca3af;font-size:12px;font-weight:800}.receipt-grand-total strong{font-size:13px}.receipt-footer p{margin:5px 0;text-align:center;font-size:9px;color:#374151;line-height:1.45}
@media print{.receipt.receipt-pos{border:0;padding:0}}

/* V2.6 — account menu, POS payment and RadbooX Electric-style thermal receipt */
.user-menu-wrap{position:relative}.user-icon-btn{height:38px;min-width:44px;border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:10px;padding:0 9px;display:flex;align-items:center;justify-content:center;gap:4px}.user-icon-btn svg{width:20px;height:20px;fill:currentColor}.user-caret{font-size:12px;color:var(--muted);line-height:1}.user-icon-btn:hover{border-color:color-mix(in srgb,var(--brand) 45%,var(--line));color:var(--brand)}
.user-dropdown{position:absolute;right:0;top:46px;width:250px;background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:0 20px 50px rgba(12,35,72,.18);padding:8px;z-index:80}.user-dropdown-head{display:grid;grid-template-columns:38px minmax(0,1fr);gap:10px;align-items:center;padding:9px 8px 11px;border-bottom:1px solid var(--line);margin-bottom:5px}.user-dropdown-avatar{width:38px;height:38px;border-radius:11px;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;font-size:11px;font-weight:900}.user-dropdown-head>div:last-child{min-width:0;display:flex;flex-direction:column}.user-dropdown-head strong{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-dropdown-head span{font-size:9px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}.user-dropdown-head small{font-size:8px;color:var(--brand);font-weight:800;margin-top:4px}.user-dropdown>button{width:100%;border:0;background:transparent;color:var(--text);padding:10px 9px;border-radius:9px;display:flex;align-items:center;gap:9px;text-align:left;font-size:10.5px;font-weight:700}.user-dropdown>button:hover{background:var(--panel-2)}.user-dropdown>button.danger{color:var(--danger)}.menu-action-icon{width:20px;height:20px;border-radius:6px;background:var(--panel-2);display:grid;place-items:center;font-size:11px}
.password-hint{font-size:9px;color:var(--muted);line-height:1.5;margin-top:4px}.password-status{font-size:10px;padding:9px 10px;border-radius:9px;background:var(--panel-2);color:var(--muted);margin-bottom:12px}

.pos-payment-panel{margin-top:12px;padding:12px;border:1px solid var(--line);background:var(--panel-2);border-radius:12px}.pos-payment-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.pos-change-preview{margin-top:10px;display:flex;justify-content:space-between;align-items:center;padding-top:10px;border-top:1px dashed var(--line);font-size:11px}.pos-change-preview strong{font-size:15px;color:var(--brand)}.pos-payment-note{font-size:9px;color:var(--muted);margin-top:6px;line-height:1.5}.field input[disabled]{opacity:.75;cursor:not-allowed;background:var(--panel-2)}

.receipt.receipt-pos{width:72mm;max-width:72mm;padding:0 2mm 2mm;font-family:Inter,"Segoe UI",Arial,sans-serif;border:0;color:#172033;background:#fff;font-size:9.5px}.receipt-pos .thermal-header{text-align:center}.receipt-pos .thermal-logo{width:40px;height:40px;display:block;object-fit:contain;margin:0 auto 7px}.receipt-pos .thermal-header h1{font-size:15px;margin:0;color:#12325b;line-height:1.2}.receipt-pos .thermal-header .company-address{margin:4px auto 2px;line-height:1.35;font-size:8.5px;max-width:65mm;color:#475569}.receipt-pos .thermal-header .company-contact{display:block;color:#68758a;font-size:8px;line-height:1.35}.receipt-pos .thermal-divider{height:3px;background:#12325b;margin:9px 0}.receipt-pos .thermal-header h2{font-size:10px;text-transform:uppercase;letter-spacing:1px;margin:8px 0 3px}.receipt-pos .thermal-docno{font-size:10px}.receipt-pos .thermal-dash{border-top:1px dashed #8691a0;margin:9px 0}.receipt-pos .thermal-meta{display:grid;gap:5px;margin-top:9px}.receipt-pos .thermal-meta>div{display:flex;justify-content:space-between;gap:9px}.receipt-pos .thermal-meta span{color:#697588}.receipt-pos .thermal-meta b{text-align:right;max-width:66%;font-weight:700;overflow-wrap:anywhere}.receipt-pos .thermal-items{display:grid;gap:8px}.receipt-pos .thermal-item{display:grid;gap:3px}.receipt-pos .thermal-item>b{line-height:1.35}.receipt-pos .thermal-item>small{font-size:7.5px;color:#7b8797;margin-top:-1px}.receipt-pos .thermal-item>div{display:flex;justify-content:space-between;gap:8px}.receipt-pos .thermal-item>div span{color:#5e6b7c}.receipt-pos .thermal-totals{display:grid}.receipt-pos .thermal-total-row{display:flex;justify-content:space-between;gap:20px;padding:4px 0}.receipt-pos .thermal-total-row span{color:#637188}.receipt-pos .thermal-total-row.grand{margin-top:5px;border-top:2px solid #12325b;border-bottom:2px solid #12325b;padding:7px 0;color:#12325b}.receipt-pos .thermal-total-row.grand span{color:#12325b;font-weight:800}.receipt-pos .thermal-total-row.grand strong{font-size:12px}.receipt-pos .thermal-note{margin-top:10px;line-height:1.45}.receipt-pos .thermal-note b{font-size:8.5px}.receipt-pos .thermal-note p{margin:3px 0;text-align:left;font-size:8.5px;color:#475569}.receipt-pos .thermal-footer{text-align:center;margin-top:14px;display:grid;gap:5px}.receipt-pos .thermal-footer b{font-size:8.5px}.receipt-pos .thermal-footer small{color:#7c8797;font-size:7.5px}.receipt-pos .test-print-badge{font-size:8px;margin:0 0 8px}.receipt-print-actions{justify-content:center;margin-top:15px}

@media(max-width:860px){.user-icon-btn{display:flex}.user-dropdown{right:-2px}.pos-payment-grid{grid-template-columns:1fr}}
@media print{
  @page{size:80mm auto;margin:4mm}
  .receipt.receipt-pos{width:72mm;max-width:72mm;padding:0;border:0;break-inside:avoid}
}
.btn:disabled,.icon-btn:disabled,.user-icon-btn:disabled{opacity:.5;cursor:not-allowed;filter:saturate(.55)}
@media(max-width:540px){.sync-badge{display:none}.topbar-right{gap:5px}.icon-btn,.user-icon-btn{width:36px;min-width:36px;height:36px}.user-dropdown{width:min(250px,calc(100vw - 28px))}}

/* V2.5 deployment verification + POS payment emphasis */
.build-version{margin-left:auto;font-size:9px;font-weight:800;letter-spacing:.06em;color:var(--muted);border:1px solid var(--line);padding:3px 6px;border-radius:999px}
.pos-payment-panel{box-shadow:0 0 0 1px rgba(37,99,235,.04);background:linear-gradient(180deg,var(--panel-2),var(--panel))}
.pos-payment-panel .field label{font-weight:800}.pos-change-preview{font-weight:700}.pos-change-preview strong{font-size:17px}
@media(max-width:700px){.pos-payment-grid{grid-template-columns:1fr}.build-version{display:none}}

/* V2.6 — receipt template aligned closer to RadbooX Electric */
.receipt.receipt-pos.receipt-electric-like{width:72mm;max-width:72mm;padding:0;border:0;color:#253247;background:#fff;font-family:Arial,Helvetica,sans-serif;font-size:9.3px}
.receipt-electric-like .thermal-header{text-align:left}.receipt-electric-like .thermal-brand-row{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}.receipt-electric-like .thermal-brand-left{display:flex;gap:7px;align-items:flex-start;min-width:0}.receipt-electric-like .thermal-logo{width:34px;height:34px;margin:0;flex:0 0 auto}.receipt-electric-like .thermal-company h1{font-size:10px;line-height:1.1;margin:2px 0 0;color:#163763;font-weight:800}.receipt-electric-like .thermal-brand-right{font-size:8px;line-height:1.25;text-align:right;color:#5f6c7d;display:grid;gap:1px}.receipt-electric-like .thermal-subrow{display:flex;justify-content:space-between;gap:8px;align-items:flex-end;margin-top:4px;font-size:8px;color:#5f6c7d}.receipt-electric-like .thermal-subrow-left{max-width:48%;line-height:1.25}.receipt-electric-like .thermal-subrow-right{text-align:right;max-width:48%;line-height:1.25}.receipt-electric-like .thermal-divider{height:2px;background:#163763;margin:7px 0 9px}.receipt-electric-like .thermal-meta{display:grid;gap:4px;margin:0}.receipt-electric-like .thermal-meta>div{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}.receipt-electric-like .thermal-meta span{color:#667386}.receipt-electric-like .thermal-meta b{text-align:right;max-width:63%;font-size:10px;line-height:1.2;font-weight:700}.receipt-electric-like .thermal-dash{border-top:1px dashed #98a3b3;margin:8px 0}.receipt-electric-like .thermal-items{display:grid;gap:10px}.receipt-electric-like .thermal-item{display:grid;gap:2px}.receipt-electric-like .thermal-item>b{font-size:10px;line-height:1.3;color:#253247}.receipt-electric-like .thermal-item>small{font-size:8px;color:#7b8797;margin:0}.receipt-electric-like .thermal-item>div{display:flex;justify-content:space-between;gap:8px}.receipt-electric-like .thermal-item>div span{color:#6b7686;font-size:8px}.receipt-electric-like .thermal-item>div strong{font-size:10px}.receipt-electric-like .thermal-totals{display:grid;gap:0}.receipt-electric-like .thermal-total-row{display:flex;justify-content:space-between;gap:12px;padding:3px 0}.receipt-electric-like .thermal-total-row span{color:#667386}.receipt-electric-like .thermal-total-row b,.receipt-electric-like .thermal-total-row strong{font-size:10px}.receipt-electric-like .thermal-total-row.grand{margin:4px 0 3px;border-top:2px solid #163763;border-bottom:2px solid #163763;padding:6px 0;color:#163763}.receipt-electric-like .thermal-total-row.grand span,.receipt-electric-like .thermal-total-row.grand strong{color:#163763;font-weight:800}.receipt-electric-like .thermal-total-row.grand strong{font-size:11px}.receipt-electric-like .thermal-footer{text-align:center;margin-top:14px;display:grid;gap:4px}.receipt-electric-like .thermal-footer b{font-size:10px;color:#253247}.receipt-electric-like .thermal-footer small{font-size:8px;color:#7b8797}.receipt-electric-like .test-print-badge{font-size:8px;margin:0 0 6px}.receipt-electric-like .receipt-print-actions{justify-content:center;margin-top:12px}

/* V2.7 — compact DD-MM-YYYY receipt dates */
.receipt-electric-like .thermal-subrow-right{white-space:nowrap;font-size:7.6px}.receipt-electric-like .thermal-meta b{white-space:nowrap}