/* =========================================================
   Thai Glass Solution — Design tokens
   Signature: cut-glass pane sheen + double hairline edges,
   inspired by tempered glass reflecting light at an angle.
   ========================================================= */
:root{
  --bg:#F3F8F8;
  --surface:#FFFFFF;
  --surface-2:#EAF3F3;
  --text:#132226;
  --muted:#5B7680;
  --accent:#1C8C86;
  --accent-dark:#136560;
  --accent-2:#3F6E8C;
  --warn:#C97A2E;
  --success:#2F9E63;
  --danger:#C0392B;
  --border:#DCE7E7;
  --radius:14px;
  --font-display: -apple-system, "Segoe UI", "SolaimanLipi", "Noto Sans Bengali", Roboto, sans-serif;
  --font-mono: "SF Mono", "Consolas", ui-monospace, monospace;
  --shadow: 0 2px 10px rgba(19,34,38,.06), 0 1px 2px rgba(19,34,38,.06);
}
body.dark{
  --bg:#0E1A20;
  --surface:#152329;
  --surface-2:#1B2B32;
  --text:#EAF2F2;
  --muted:#8FA6AC;
  --accent:#2DBDB2;
  --accent-dark:#1F8B83;
  --accent-2:#6C9AB8;
  --warn:#E0964A;
  --border:#22343B;
  --shadow: 0 2px 14px rgba(0,0,0,.35);
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  font-family:var(--font-display);
  background:var(--bg);
  color:var(--text);
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior-y:contain;
}
h1,h2,h3,h4{margin:0 0 .5em; letter-spacing:-.01em;}
.hidden{display:none !important;}
input,select,textarea{
  font-family:inherit;
  font-size:16px;
  background:var(--surface-2);
  border:1px solid var(--border);
  color:var(--text);
  border-radius:10px;
  padding:.65em .8em;
  width:100%;
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent); outline-offset:1px;}
label{display:block; font-size:.85rem; color:var(--muted); margin-bottom:.75em; font-weight:600;}
label input,label select,label textarea{margin-top:.3em; font-weight:400; color:var(--text);}
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:.8em;}
.row-inline{display:flex; align-items:center; gap:.5em;}
.row-inline input{width:auto;}

/* ---------- Buttons ---------- */
.btn{
  border:none; border-radius:10px; padding:.75em 1.2em;
  font-weight:700; font-size:.95rem; cursor:pointer;
  transition:transform .08s ease, opacity .15s ease;
}
.btn:active{transform:scale(.97);}
.btn-block{width:100%;}
.btn-sm{padding:.5em .9em; font-size:.85rem;}
.btn-primary{background:var(--accent); color:#fff;}
.btn-primary:hover{background:var(--accent-dark);}
.btn-secondary{background:var(--surface-2); color:var(--text); border:1px solid var(--border);}
.btn-danger{background:transparent; color:var(--danger); border:1px solid var(--danger);}
.btn-link{background:none; border:none; color:var(--accent); font-weight:600; padding:.4em 0; cursor:pointer;}
.icon-btn{background:none; border:none; font-size:1.3rem; color:var(--text); cursor:pointer; padding:.3em .5em; line-height:1;}
.file-btn{position:relative; text-align:center; cursor:pointer;}

/* ---------- Screens ---------- */
.screen{display:none; min-height:100%;}
.screen.active{display:block;}

/* ---------- Login ---------- */
.login-wrap{
  min-height:100vh; display:flex; flex-direction:column; justify-content:center;
  align-items:center; padding:2rem 1.2rem; gap:1.5rem;
  background:
    radial-gradient(circle at 15% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 55%),
    var(--bg);
}
.brand-mark{text-align:center;}
.pane-icon{width:56px; height:56px;}
.pane-outer{fill:none; stroke:var(--accent); stroke-width:2.5;}
.pane-shard{fill:var(--accent); opacity:.14;}
.pane-shard-a{opacity:.28;}
.brand-mark h1{font-size:1.6rem; margin-top:.4em;}
.brand-mark h1 span{color:var(--accent); font-weight:400;}
.tagline{color:var(--muted); font-size:.9rem; margin-top:.2em;}
.login-card{width:100%; max-width:360px;}
.setup-hint{font-size:.75rem; color:var(--muted); text-align:center;}
.setup-hint code{background:var(--surface-2); padding:.1em .4em; border-radius:4px;}
.form-error{background:color-mix(in srgb, var(--danger) 12%, transparent); color:var(--danger); padding:.6em .8em; border-radius:8px; font-size:.85rem; margin-bottom:1em;}

/* ---------- Cards / glass-pane signature ---------- */
.card{
  background:var(--surface);
  border-radius:var(--radius);
  border:1px solid var(--border);
  padding:1.2rem;
  box-shadow:var(--shadow);
  position:relative;
  overflow:hidden;
}
.glass::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(115deg, color-mix(in srgb, #fff 40%, transparent) 0%, transparent 28%);
  pointer-events:none;
}
body.dark .glass::before{
  background:linear-gradient(115deg, color-mix(in srgb, #fff 8%, transparent) 0%, transparent 30%);
}

/* ---------- Topbar / nav ---------- */
.topbar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  padding:.9rem 1rem; background:var(--surface);
  border-bottom:1px solid var(--border);
}
.topbar-left,.topbar-right{display:flex; align-items:center; gap:.6em;}
.topbar-title{font-weight:700; font-size:1.05rem;}
.user-badge{font-size:.8rem; color:var(--muted); background:var(--surface-2); padding:.3em .7em; border-radius:20px;}
main.page{display:none; padding:1rem; padding-bottom:5.5rem; max-width:820px; margin:0 auto;}
main.page.active{display:block;}

.bottom-nav{
  position:fixed; bottom:0; left:0; right:0; z-index:20;
  display:flex; background:var(--surface); border-top:1px solid var(--border);
  padding-bottom:env(safe-area-inset-bottom);
}
.nav-btn{
  flex:1; background:none; border:none; padding:.6em 0 .5em;
  display:flex; flex-direction:column; align-items:center; gap:.15em;
  color:var(--muted); font-size:.68rem; cursor:pointer;
}
.nav-icon{font-size:1.25rem;}
.nav-btn.active{color:var(--accent);}

/* ---------- Dashboard ---------- */
.stat-grid{display:grid; grid-template-columns:1fr 1fr; gap:.8rem; margin-bottom:1.2rem;}
.stat-card{padding:1rem; display:flex; flex-direction:column; gap:.35em;}
.stat-card.accent-warn{border-color:color-mix(in srgb, var(--warn) 40%, var(--border));}
.stat-label{font-size:.75rem; color:var(--muted); font-weight:600;}
.stat-value{font-family:var(--font-mono); font-size:1.5rem; font-weight:700;}
.accent-warn .stat-value{color:var(--warn);}
.section-card h3{font-size:1rem;}
.section-head{display:flex; justify-content:space-between; align-items:center;}

/* ---------- Lists ---------- */
.page-toolbar{display:flex; gap:.6em; margin-bottom:.9rem;}
.page-toolbar input{flex:1;}
.filter-row{display:flex; gap:.5em; overflow-x:auto; margin-bottom:.9rem; padding-bottom:.2em;}
.chip{
  border:1px solid var(--border); background:var(--surface); color:var(--muted);
  padding:.4em .9em; border-radius:20px; font-size:.8rem; white-space:nowrap; cursor:pointer;
}
.chip.active{background:var(--accent); border-color:var(--accent); color:#fff;}
.list{display:flex; flex-direction:column; gap:.6rem;}
.list-item{
  background:var(--surface); border:1px solid var(--border); border-radius:12px;
  padding:.9rem 1rem; display:flex; justify-content:space-between; align-items:center; gap:.6em; cursor:pointer;
}
.list-item:active{background:var(--surface-2);}
.li-main{display:flex; flex-direction:column; gap:.2em; min-width:0;}
.li-title{font-weight:700; font-size:.95rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.li-sub{font-size:.78rem; color:var(--muted);}
.li-right{text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap:.3em; flex-shrink:0;}
.li-amount{font-family:var(--font-mono); font-weight:700;}
.badge{font-size:.68rem; font-weight:700; padding:.2em .6em; border-radius:20px;}
.badge-Pending{background:color-mix(in srgb, var(--warn) 18%, transparent); color:var(--warn);}
.badge-Processing{background:color-mix(in srgb, var(--accent-2) 18%, transparent); color:var(--accent-2);}
.badge-Completed{background:color-mix(in srgb, var(--success) 18%, transparent); color:var(--success);}
.badge-Delivered{background:color-mix(in srgb, var(--accent) 18%, transparent); color:var(--accent);}
.empty-state{text-align:center; color:var(--muted); padding:2.5rem 1rem; font-size:.9rem;}

/* ---------- Modals ---------- */
.modal-backdrop{position:fixed; inset:0; background:rgba(10,18,20,.5); z-index:40; backdrop-filter:blur(2px);}
.modal{position:fixed; inset:0; z-index:41; display:flex; align-items:flex-end; justify-content:center;}
.modal-card{
  background:var(--surface); width:100%; max-width:520px; max-height:92vh; overflow-y:auto;
  border-radius:18px 18px 0 0; padding:1.2rem; animation:slideup .18s ease-out;
}
@media (min-width:640px){
  .modal{align-items:center;}
  .modal-card{border-radius:18px; max-height:88vh;}
}
@keyframes slideup{from{transform:translateY(24px); opacity:0;} to{transform:translateY(0); opacity:1;}}
.modal-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem;}
.modal-actions{display:flex; justify-content:space-between; gap:.8em; margin-top:1rem;}
.modal-full .modal-card-full{max-width:760px;}
.mt{margin-top:1rem;}

/* ---------- Order form ---------- */
.order-meta{display:grid; grid-template-columns:1fr 1fr 1fr; gap:.7em;}
.order-items{display:flex; flex-direction:column; gap:.7rem; margin:.7rem 0;}
.order-item-row{
  border:1px solid var(--border); border-radius:12px; padding:.8rem; background:var(--surface-2);
  display:grid; grid-template-columns:1fr 1fr; gap:.6em; position:relative;
}
.order-item-row .full{grid-column:1/-1;}
.item-remove{position:absolute; top:.4em; right:.5em; background:none; border:none; color:var(--danger); font-size:1rem; cursor:pointer;}
.item-total{grid-column:1/-1; text-align:right; font-family:var(--font-mono); font-weight:700; color:var(--accent);}
.charges-grid{display:grid; grid-template-columns:1fr 1fr; gap:.7em;}
.order-summary{background:var(--surface-2); border-radius:12px; padding:1rem; margin-top:1rem; font-size:.9rem;}
.order-summary div{display:flex; justify-content:space-between; padding:.25em 0;}
.order-summary .total-row{border-top:1px dashed var(--border); margin-top:.3em; padding-top:.5em; font-size:1.05rem; font-weight:700;}
.order-summary .due-row b{color:var(--warn);}

/* ---------- Invoice ---------- */
.invoice-actions{display:flex; gap:.5em; align-items:center;}
.invoice-page{background:#fff; color:#14232A; padding:1.4rem; font-size:.85rem;}
.inv-head{display:flex; justify-content:space-between; align-items:flex-start; border-bottom:2px solid #1C8C86; padding-bottom:.8rem; margin-bottom:1rem;}
.inv-logo{max-height:56px; max-width:140px; object-fit:contain;}
.inv-company h2{margin:0; font-size:1.15rem;}
.inv-company p{margin:.15em 0; font-size:.78rem; color:#5B7680;}
.inv-meta{text-align:right; font-size:.8rem;}
.inv-meta b{font-size:1rem; display:block; color:#1C8C86;}
.inv-parties{display:flex; justify-content:space-between; gap:1rem; margin-bottom:1rem; font-size:.8rem;}
.inv-parties .label{color:#5B7680; font-size:.7rem; text-transform:uppercase; letter-spacing:.04em;}
table.inv-table{width:100%; border-collapse:collapse; font-size:.78rem; margin-bottom:1rem;}
table.inv-table th{background:#EAF3F3; text-align:left; padding:.5em .5em; font-size:.7rem; text-transform:uppercase; color:#5B7680;}
table.inv-table td{padding:.5em; border-bottom:1px solid #EAF3F3;}
table.inv-table td.num,table.inv-table th.num{text-align:right;}
.inv-totals{margin-left:auto; width:220px; font-size:.82rem;}
.inv-totals div{display:flex; justify-content:space-between; padding:.25em 0;}
.inv-totals .grand{border-top:1.5px solid #14232A; font-weight:700; font-size:1rem; padding-top:.4em;}
.inv-totals .due{color:#C97A2E; font-weight:700;}
.inv-footer{display:flex; justify-content:space-between; align-items:flex-end; margin-top:2.5rem;}
.inv-sign img{max-height:44px;}
.inv-sign-line{border-top:1px solid #999; margin-top:2.2rem; padding-top:.3em; font-size:.72rem; color:#5B7680; width:140px; text-align:center;}
.inv-qr{width:70px; height:70px;}

/* ---------- Toast / loading ---------- */
.toast{
  position:fixed; bottom:5.5rem; left:50%; transform:translateX(-50%);
  background:#14232A; color:#fff; padding:.7em 1.2em; border-radius:20px; font-size:.85rem; z-index:60;
  box-shadow:0 4px 16px rgba(0,0,0,.25);
}
.loading-overlay{position:fixed; inset:0; background:rgba(15,27,34,.35); z-index:70; display:flex; align-items:center; justify-content:center;}
.spinner{width:34px; height:34px; border:3px solid rgba(255,255,255,.3); border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

.logo-preview{max-height:60px; margin:.4em 0; border-radius:6px;}

/* ---------- Print ---------- */
@media print{
  body *{visibility:hidden;}
  #invoice-render, #invoice-render *{visibility:visible;}
  #invoice-render{position:absolute; top:0; left:0; width:100%;}
  .no-print{display:none !important;}
}