* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--maroon); text-decoration: none; }
html[data-theme="dark"] a { color: var(--gold); }
a:hover { text-decoration: underline; }
.mono { font-family: var(--font-mono); }
.muted { color: var(--text-muted); }
.num { text-align: right; }

/* ---- app shell ---- */
.app { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; }
.sidebar {
  background: var(--sidebar-bg); color: var(--sidebar-text);
  display: flex; flex-direction: column; padding: 18px 14px; gap: 4px;
}
.brand { display: flex; align-items: center; gap: 10px; padding: 6px 8px 18px; }
.brand .diamond {
  width: 30px; height: 30px; flex: none; border-radius: 7px;
  background: conic-gradient(from 210deg, var(--gold), var(--bronze), var(--maroon), var(--gold));
}
.brand b { color: #fff; font-size: 15px; letter-spacing: .2px; }
.brand small { display: block; color: var(--sidebar-text); font-size: 11px; }
.nav a {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  color: var(--sidebar-text); border-radius: var(--radius); font-weight: 500;
}
.nav a:hover { background: rgba(255,255,255,.06); text-decoration: none; }
.nav a.active { background: rgba(252,186,43,.14); color: var(--gold); }
.nav .sep { margin: 12px 8px 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .8px; color: #6b625c; }
.sidebar .spacer { flex: 1; }

.main { display: flex; flex-direction: column; min-width: 0; }
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 26px; border-bottom: 1px solid var(--border); background: var(--surface);
}
.topbar .right { display: flex; align-items: center; gap: 14px; }
.branch-pill {
  font-size: 12.5px; color: var(--text-muted); border: 1px solid var(--border);
  padding: 5px 12px; border-radius: 999px; background: var(--surface-alt);
}
.icon-btn { background: none; border: 1px solid var(--border); border-radius: 8px; padding: 6px 9px; cursor: pointer; color: var(--text); }
.content { padding: 26px; max-width: 1180px; width: 100%; }

/* ---- headings / page head ---- */
h1 { font-size: 22px; margin: 0 0 2px; letter-spacing: -.2px; }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 20px; gap: 16px; }
.head-actions { display: flex; gap: 10px; flex: none; }

/* ---- buttons ---- */
.btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px; border-radius: var(--radius);
  font-weight: 500; font-size: 14px; cursor: pointer; border: 1px solid transparent; }
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--primary); color: var(--primary-text); }
.btn-primary:hover { background: var(--primary-hover); }
.btn-ghost { background: var(--surface); color: var(--text); border-color: var(--border); }
.btn-ghost:hover { background: var(--surface-alt); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-sm { padding: 5px 11px; font-size: 13px; }

/* ---- cards ---- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 20px 22px; box-shadow: var(--shadow); }

/* ---- stat cards ---- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px; box-shadow: var(--shadow); }
.stat .n { font-size: 30px; font-weight: 600; letter-spacing: -.5px; }
.stat .l { color: var(--text-muted); font-size: 13px; margin-top: 2px; }
.stat.accent { border-top: 3px solid var(--gold); }

/* ---- tables ---- */
.grid { width: 100%; border-collapse: collapse; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.grid th, .grid td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--border); }
.grid th { background: var(--surface-alt); font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); font-weight: 600; }
.grid tr:last-child td { border-bottom: none; }
.grid tbody tr:hover { background: var(--surface-alt); }
.row-actions a { margin-right: 12px; font-size: 13.5px; }
td.empty, .empty { text-align: center; color: var(--text-muted); padding: 34px; }
.pager td { background: var(--surface-alt); text-align: center; }
.pager a { margin: 0 12px; }

/* ---- chips / banners ---- */
.chip { display: inline-block; font-size: 12px; font-weight: 500; padding: 3px 10px; border-radius: 999px; }
.chip-success { background: var(--success-bg); color: var(--success); }
.chip-warning { background: var(--warning-bg); color: var(--warning); }
.banner { padding: 12px 16px; border-radius: var(--radius); margin-bottom: 16px; font-size: 14px; }
.banner-info { background: var(--info-bg); color: var(--info); }
.banner-danger { background: var(--danger-bg); color: var(--danger); }
.banner-success { background: var(--success-bg); color: var(--success); }

/* ---- forms ---- */
.toolbar { margin-bottom: 16px; }
input:not([type]), input[type=text], input[type=search], input[type=number],
input[type=password], input[type=email], input[type=date], input[type=tel],
input[type=url], input[type=time], input[type=datetime-local], input[type=file],
select, textarea {
  width: 100%; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); color: var(--text); font-size: 14px; font-family: inherit;
  box-sizing: border-box; min-height: 40px;
}
input[type=date]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .6; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-100); }

/* Consistent dropdown arrow across browsers */
select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  padding-right: 34px; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' stroke='%23806a5a' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat; background-position: right 12px center;
}
select:disabled { opacity: .6; cursor: not-allowed; }
input[type=file] { padding: 7px 10px; cursor: pointer; }
input::placeholder, textarea::placeholder { color: var(--text-muted); opacity: .7; }
input:disabled, textarea:disabled { background: var(--surface-alt); opacity: .7; }
/* Prevent Alpine flash-of-unstyled-content before it initialises */
[x-cloak] { display: none !important; }
html[data-theme="dark"] select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' stroke='%23c9b28f' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
html[data-theme="dark"] input[type=date]::-webkit-calendar-picker-indicator { filter: invert(1); opacity: .7; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
.form-grid .field.full { grid-column: 1 / -1; }
.field label { display: block; font-weight: 500; font-size: 13px; margin-bottom: 5px; }
.field small { display: block; margin-top: 4px; }
.field-inline { display: flex; align-items: center; gap: 8px; }
.field-inline label { margin: 0; }
.field-inline input[type=checkbox] { width: auto; }
.errorlist { color: var(--danger); font-size: 12.5px; list-style: none; padding: 0; margin: 4px 0 0; }
.sticky-actions { display: flex; gap: 10px; align-items: center; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); grid-column: 1 / -1; }

/* ---- messages ---- */
.messages { margin-bottom: 16px; }

/* ---- login ---- */
.login-wrap { min-height: 100vh; display: grid; place-items: center; background: var(--bg); }
.login-card { width: 360px; max-width: 92vw; }
.login-card .brand { justify-content: center; padding-bottom: 20px; }
.login-card .brand b { color: var(--text); }
.login-card .brand small { color: var(--text-muted); }

@media (max-width: 820px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .form-grid { grid-template-columns: 1fr; }
  .hotbar { left: 0; }
}

/* Biller-only POS chrome: no sidebar, full-width main + hotbar */
.app.no-sidebar { grid-template-columns: 1fr; }
.app.no-sidebar .hotbar { left: 0; }
.btn-signout { padding:6px 12px; }
.sidebar-foot { gap:8px; }
.sidebar-user { font-size:12px; padding:4px 2px 2px; }
.sidebar-foot .btn-signout { border-color:var(--border); }
.sidebar-foot .btn-signout:hover { border-color:var(--maroon); color:var(--maroon); }
html[data-theme="dark"] .sidebar-foot .btn-signout:hover { border-color:var(--gold); color:var(--gold); }

/* ---- POS ---- */
.linkbtn { background:none; border:none; color:var(--text-muted); cursor:pointer; font-size:14px; }
.linkbtn:hover { color:var(--danger); }
.kbd { font-size:11px; border:1px solid rgba(255,255,255,.35); border-radius:5px; padding:1px 5px; margin-left:6px; opacity:.8; }
.btn-ghost .kbd { border-color:var(--border); }
.small { font-size:12.5px; }
.btn-block { width:100%; justify-content:center; }

.pos-layout { display:grid; grid-template-columns: 1fr 320px; gap:20px; align-items:start; }
.cmd-bar { font-size:18px; padding:14px 16px; border:2px solid var(--gold); box-shadow:0 0 0 4px var(--gold-100); margin-bottom:14px; }
.pos-grid td, .pos-grid th { padding:9px 12px; }
.totals { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); margin-top:14px; padding:14px 18px; }
.totals > div { display:flex; justify-content:space-between; padding:3px 0; color:var(--text-muted); }
.totals .grand { border-top:1px solid var(--border); margin-top:8px; padding-top:10px; font-size:20px; color:var(--text); }
.totals .grand b { color:var(--maroon); } html[data-theme="dark"] .totals .grand b { color:var(--gold); }

.pos-side { display:flex; flex-direction:column; gap:14px; }
.side-card { padding:14px 16px; }
.side-label { font-size:12px; text-transform:uppercase; letter-spacing:.5px; color:var(--text-muted); margin-bottom:8px; }
.cust-results { margin-top:6px; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.cust-item { display:block; width:100%; text-align:left; padding:8px 10px; background:var(--surface); border:none; border-bottom:1px solid var(--border); cursor:pointer; color:var(--text); }
.cust-item:hover { background:var(--surface-alt); }
.cust-chip { display:flex; justify-content:space-between; align-items:center; }
.side-actions { display:flex; flex-direction:column; gap:8px; }
.held-item { display:flex; justify-content:space-between; padding:7px 0; border-bottom:1px solid var(--border); }

.overlay { position:fixed; inset:0; background:rgba(20,17,16,.5); display:flex; align-items:center; justify-content:center; z-index:50; }
.pay-panel { background:var(--surface); border-radius:var(--radius-lg); padding:24px; width:440px; max-width:94vw; box-shadow:var(--shadow); }
.pay-panel h2 { margin:0 0 6px; font-size:20px; }
.pay-total { font-size:15px; color:var(--text-muted); margin-bottom:14px; } .pay-total b { color:var(--text); font-size:22px; margin-left:6px; }
.pay-grid { display:grid; grid-template-columns:90px 1fr; gap:8px 12px; align-items:center; }
.pay-grid label { font-size:13px; color:var(--text-muted); }
.pay-summary { display:flex; justify-content:space-between; margin:16px 0; font-size:15px; }
.pay-actions { display:flex; flex-wrap:wrap; gap:8px; }

/* print */
@media print { .sidebar, .topbar, .no-print { display:none !important; } .app { grid-template-columns:1fr; } .content { padding:0; } }

/* ---- POS v2 guided flow ---- */
.pos2 { display:grid; grid-template-columns: 1fr 300px; gap:20px; align-items:start; padding-bottom:56px; }
.pos2-side { display:flex; flex-direction:column; gap:14px; }
.search-wrap { position:relative; margin-bottom:14px; }
.dropdown { position:absolute; z-index:30; left:0; right:0; margin-top:4px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
.dd-item { display:grid; grid-template-columns: 90px 1fr auto; gap:10px; align-items:center; padding:10px 14px; cursor:pointer; border-bottom:1px solid var(--border); }
.dd-item:last-child { border-bottom:none; }
.dd-item.active, .dd-item:hover { background:var(--gold-100); }
html[data-theme="dark"] .dd-item.active, html[data-theme="dark"] .dd-item:hover { background:#2a2620; }
.dd-code { color:var(--maroon); font-weight:600; } html[data-theme="dark"] .dd-code { color:var(--gold); }
.dd-price { color:var(--text-muted); }

.side-total { background:var(--maroon); color:#fff; border-radius:var(--radius-lg); padding:16px 18px; }
html[data-theme="dark"] .side-total { background:var(--surface); border:1px solid var(--gold); }
.side-total .muted { color:rgba(255,255,255,.75); } html[data-theme="dark"] .side-total .muted { color:var(--text-muted); }
.big-total { font-size:34px; font-weight:700; line-height:1.1; margin-top:4px; }
html[data-theme="dark"] .big-total { color:var(--gold); }

.mini-panel { background:var(--surface); border-radius:var(--radius-lg); padding:24px; width:400px; max-width:94vw; box-shadow:var(--shadow); }
.mp-title { font-size:17px; font-weight:600; margin-bottom:4px; }
.mp-label { display:block; font-size:12px; text-transform:uppercase; letter-spacing:.5px; color:var(--text-muted); margin:16px 0 6px; }
.mp-input { font-size:28px; padding:12px 14px; width:100%; text-align:right; border:2px solid var(--gold); box-shadow:0 0 0 4px var(--gold-100); }
.mp-actions { display:flex; gap:8px; margin-top:18px; }
.pay-due { font-size:15px; color:var(--text-muted); margin-top:6px; } .pay-due b { color:var(--text); font-size:22px; margin-left:6px; }
.pay-change { margin-top:14px; font-size:16px; } .pay-change b { color:var(--success); font-size:22px; margin-left:6px; }

.hotbar { position:fixed; left:248px; right:0; bottom:0; display:flex; flex-wrap:wrap; gap:16px; justify-content:center;
  background:var(--sidebar-bg); color:var(--sidebar-text); padding:11px 16px; font-size:12.5px; z-index:20;
  box-shadow:0 -2px 12px rgba(0,0,0,.14); }
.hotbar .k { display:inline-block; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.28); color:#fff;
  border-radius:5px; padding:1px 7px; margin-right:5px; font-family:var(--font-mono,monospace); }
.hotbar b { color:var(--gold); font-weight:600; }
.hotbar span { color:var(--sidebar-text); }

/* nav sign-out button styled as a link */
.navlink-btn { background:none; border:none; color:inherit; font:inherit; cursor:pointer; padding:0; text-align:left; opacity:.85; }
.navlink-btn:hover { opacity:1; text-decoration:underline; }
.report-card:hover { border-color:var(--gold); }

/* ============ POS v3 - professional ============ */
.pos2 { display:grid; grid-template-columns: 1fr 340px; gap:20px; align-items:start; padding-bottom:52px; }
.pos2-main { min-width:0; }
.pos2-side { display:flex; flex-direction:column; gap:14px; position:sticky; top:14px; }

.pos-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.ph-shop { font-size:16px; font-weight:600; } .ph-sub { margin-left:10px; font-size:12.5px; }
.ph-right #clock { font-size:13px; color:var(--text-muted); background:var(--surface); border:1px solid var(--border); padding:5px 10px; border-radius:8px; }

.search-wrap { position:relative; margin-bottom:14px; }
.search-ic { position:absolute; left:16px; top:50%; transform:translateY(-50%); opacity:.5; font-size:16px; }
.search-bar { width:100%; font-size:18px; padding:15px 16px 15px 44px; border:2px solid var(--gold);
  border-radius:12px; box-shadow:0 4px 18px rgba(151,43,47,.08); background:var(--surface); }
.search-bar:focus { outline:none; box-shadow:0 0 0 4px var(--gold-100), 0 4px 18px rgba(151,43,47,.10); }
.search-hint { position:absolute; right:14px; top:50%; transform:translateY(-50%); font-size:11.5px; pointer-events:none; }
.dropdown { position:absolute; z-index:40; left:0; right:0; margin-top:6px; background:var(--surface);
  border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow); overflow:hidden; }
.dd-item { display:grid; grid-template-columns: 84px 1fr auto 22px; gap:12px; align-items:center; padding:11px 16px; cursor:pointer; border-bottom:1px solid var(--border); }
.dd-item:last-child { border-bottom:none; }
.dd-item.active { background:var(--gold-100); } html[data-theme="dark"] .dd-item.active { background:#2b2620; }
.dd-item.unavail { opacity:.5; } .dd-na { color:var(--danger); font-size:12px; }
.dd-code { color:var(--maroon); font-weight:700; } html[data-theme="dark"] .dd-code { color:var(--gold); }
.dd-price { color:var(--text-muted); } .dd-go { color:var(--gold); font-weight:700; text-align:center; }

.bill-scroll { border:1px solid var(--border); border-radius:12px; overflow:hidden; background:var(--surface); }
.pos-grid { margin:0; } .pos-grid thead th { background:var(--surface-alt); font-size:11.5px; text-transform:uppercase; letter-spacing:.4px; }
.pos-grid td, .pos-grid th { padding:11px 14px; }
.line-row:hover { background:var(--surface-alt); }
.li-name { font-weight:500; } .li-code { font-size:11.5px; color:var(--text-muted); }
.li-amt { font-weight:600; }
.cart-empty { text-align:center; padding:46px 10px !important; color:var(--text-muted); }
.ce-icon { font-size:34px; opacity:.5; margin-bottom:8px; }

.summary { margin-top:12px; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:12px 18px; }
.sum-row { display:flex; justify-content:space-between; padding:3px 0; color:var(--text-muted); font-size:13.5px; }
.sum-row b { color:var(--text); }

/* payment summary card (right) */
.pay-summary-card { background:linear-gradient(155deg,var(--maroon),#7c2327); color:#fff; border-radius:16px; padding:20px; box-shadow:0 8px 26px rgba(151,43,47,.22); }
html[data-theme="dark"] .pay-summary-card { background:var(--surface); border:1px solid var(--gold); box-shadow:none; }
.psc-count { font-size:12.5px; opacity:.8; } html[data-theme="dark"] .psc-count { color:var(--text-muted); }
.psc-label { font-size:13px; opacity:.85; margin-top:8px; } html[data-theme="dark"] .psc-label { color:var(--text-muted); }
.psc-total { font-size:38px; font-weight:800; line-height:1.05; margin:2px 0 14px; } html[data-theme="dark"] .psc-total { color:var(--gold); }
.btn-pay { width:100%; display:flex; justify-content:space-between; align-items:center; background:var(--gold); color:#3a2a06;
  border:none; border-radius:12px; padding:15px 18px; font-size:17px; font-weight:700; cursor:pointer; transition:transform .05s; }
.btn-pay:hover { filter:brightness(1.04); } .btn-pay:active { transform:scale(.99); }
.kbd-inv { font-size:12px; font-weight:600; background:rgba(0,0,0,.14); padding:2px 8px; border-radius:6px; }
.psc-alt { display:flex; gap:8px; margin-top:10px; }
.psc-alt .btn-ghost { background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.3); color:#fff; flex:1; justify-content:center; }
html[data-theme="dark"] .psc-alt .btn-ghost { background:transparent; border-color:var(--border); color:var(--text); }
.daylink { font-size:12.5px; text-align:center; padding:4px; }

/* mini panels */
.mini-panel { background:var(--surface); border-radius:18px; padding:26px; width:430px; max-width:94vw; box-shadow:var(--shadow); }
.mp-head { font-size:18px; font-weight:700; display:flex; gap:10px; align-items:center; margin-bottom:4px; }
.mp-code { background:var(--gold-100); color:var(--maroon); padding:2px 9px; border-radius:7px; font-size:14px; }
html[data-theme="dark"] .mp-code { background:#2b2620; color:var(--gold); }
.mp-label { display:block; font-size:11.5px; text-transform:uppercase; letter-spacing:.5px; color:var(--text-muted); margin:18px 0 8px; }
.mp-input { font-size:30px; padding:12px 14px; width:100%; text-align:right; border:2px solid var(--gold); border-radius:10px; box-shadow:0 0 0 4px var(--gold-100); }
.mp-actions { display:flex; gap:8px; margin-top:16px; }
.qty-stepper { display:grid; grid-template-columns:52px 1fr 52px; gap:8px; }
.qty-stepper button { font-size:24px; border:1px solid var(--border); background:var(--surface-alt); border-radius:10px; cursor:pointer; color:var(--text); }
.qty-stepper button:hover { border-color:var(--gold); }
.quick-row { display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; }
.chip-btn { border:1px solid var(--border); background:var(--surface-alt); border-radius:8px; padding:7px 12px; cursor:pointer; font-family:var(--font-mono,monospace); font-size:13px; color:var(--text); }
.chip-btn:hover { border-color:var(--gold); background:var(--gold-100); }
.pay-due { font-size:14px; color:var(--text-muted); margin-top:8px; } .pay-due b { color:var(--text); font-size:22px; margin-left:6px; }
.pay-change { margin-top:14px; font-size:15px; color:var(--text-muted); } .pay-change b { font-size:22px; margin-left:6px; }
.pay-change.ok b { color:var(--success); }

@media (max-width:900px){ .pos2 { grid-template-columns:1fr; } .pos2-side { position:static; } }

.pay-change .short { color:var(--danger); }

/* branch switcher in topbar */
.branch-switch { margin:0; }
.branch-switch select { background:var(--gold-100); border:1px solid var(--gold); color:var(--maroon);
  font-weight:600; border-radius:8px; padding:6px 10px; cursor:pointer; font-size:13px; }
html[data-theme="dark"] .branch-switch select { background:transparent; color:var(--gold); }