/* ── GST Invoice App — app.css ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --green:#16a34a;--green2:#15803d;--green-pale:#f0fdf4;--green-pale2:#dcfce7;
  --blue:#1a56db;--blue-pale:#eff6ff;
  --red:#dc2626;--red-pale:#fef2f2;
  --amber:#d97706;--amber-pale:#fffbeb;
  --slate:#111827;--slatemid:#374151;--slatesub:#6b7280;
  --border:#e5e7eb;--bg:#f9fafb;--card:#fff;
  --shadow:0 1px 3px rgba(0,0,0,.08),0 4px 16px rgba(0,0,0,.06);
  --r:10px;--r-lg:14px;
  --font:'Plus Jakarta Sans',sans-serif;--mono:'JetBrains Mono',monospace;
}
html{font-size:15px}
body{font-family:var(--font);background:var(--bg);color:var(--slate);min-height:100vh;padding-bottom:80px}

/* NAV */
.bottom-nav{position:fixed;bottom:0;left:0;right:0;background:var(--card);border-top:1px solid var(--border);display:flex;z-index:200;padding-bottom:env(safe-area-inset-bottom,0px)}
.bn{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 2px 8px;background:none;border:none;cursor:pointer;font-family:var(--font);font-size:.55rem;font-weight:700;color:var(--slatesub);text-transform:uppercase;letter-spacing:.03em;transition:color .15s}
.bn.active{color:var(--green)}
.bni{font-size:1.2rem;line-height:1}

/* HEADER */
.app-header{background:var(--green);color:#fff;padding:14px 16px 12px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100;box-shadow:0 2px 12px rgba(22,163,74,.3)}
.header-brand{font-size:1.1rem;font-weight:900;letter-spacing:-.3px}
.header-brand span{opacity:.75;font-weight:600}
.header-sub{font-size:.65rem;opacity:.75;margin-top:1px}
.hbtn{background:rgba(255,255,255,.2);border:none;color:#fff;padding:7px 14px;border-radius:8px;font-size:.78rem;font-weight:700;cursor:pointer;font-family:var(--font)}
.hbtn:active{background:rgba(255,255,255,.35)}

/* PAGES */
.page{display:none;padding:14px 14px 0;animation:fadeIn .2s ease}
.page.active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* CARDS */
.card{background:var(--card);border-radius:var(--r-lg);border:1px solid var(--border);box-shadow:var(--shadow);margin-bottom:12px;overflow:hidden}
.card-head{padding:12px 14px 10px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.card-title{font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--slatesub)}
.card-body{padding:14px}

/* FORM */
.field{margin-bottom:10px}
.field label{display:block;font-size:.72rem;font-weight:700;color:var(--slatemid);margin-bottom:4px;text-transform:uppercase;letter-spacing:.04em}
.field label .req{color:var(--red);margin-left:2px}
input[type=text],input[type=number],input[type=tel],input[type=email],input[type=date],select,textarea{
  width:100%;padding:9px 11px;border:1.5px solid var(--border);border-radius:var(--r);font-size:.84rem;font-family:var(--font);background:var(--card);color:var(--slate);outline:none;transition:border-color .15s}
input:focus,select:focus,textarea:focus{border-color:var(--green)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 16px;border-radius:var(--r);font-size:.82rem;font-weight:700;cursor:pointer;border:none;font-family:var(--font);transition:opacity .15s,transform .1s}
.btn:active{transform:scale(.97)}
.btn-green{background:var(--green);color:#fff}
.btn-blue{background:var(--blue);color:#fff}
.btn-wa{background:#25d366;color:#fff}
.btn-outline{background:none;border:1.5px solid var(--border);color:var(--slatemid)}
.btn-red{background:var(--red);color:#fff}
.btn-full{width:100%}
.btn-sm{padding:6px 10px;font-size:.75rem}
.action-bar{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px}
.action-bar.triple{grid-template-columns:1fr 1fr 1fr}

/* ITEMS TABLE */
.items-table{width:100%;border-collapse:collapse;font-size:.78rem}
.items-table th{background:var(--green-pale);color:var(--green2);font-weight:800;font-size:.65rem;text-transform:uppercase;letter-spacing:.05em;padding:8px 6px;border-bottom:2px solid var(--green-pale2);text-align:left}
.items-table th:last-child,.items-table td:last-child{text-align:right}
.items-table td{padding:8px 6px;border-bottom:1px solid var(--border);vertical-align:top}
.items-table tr:last-child td{border-bottom:none}
.item-name{font-weight:700;color:var(--slate)}
.item-hsn{font-size:.68rem;color:var(--slatesub);font-family:var(--mono)}

/* TOTALS */
.totals-box{background:var(--green-pale);border-radius:var(--r);padding:12px 14px}
.t-row{display:flex;justify-content:space-between;font-size:.82rem;padding:3px 0}
.t-row.total{font-weight:900;font-size:1rem;color:var(--green2);padding-top:8px;margin-top:6px;border-top:2px solid var(--green-pale2)}
.t-row.sub{color:var(--slatesub)}
.t-row .val{font-family:var(--mono);font-weight:700}
.amt-words{font-size:.72rem;color:var(--green2);font-style:italic;margin-top:6px;padding-top:6px;border-top:1px dashed var(--green-pale2)}

/* INVOICE ITEM ROW (builder) */
.inv-item{background:var(--card);border:1.5px solid var(--border);border-radius:var(--r);padding:10px 12px;margin-bottom:8px;position:relative}
.inv-item-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.inv-item-num{font-size:.68rem;font-weight:800;color:var(--slatesub);text-transform:uppercase;letter-spacing:.05em}
.remove-btn{background:none;border:none;cursor:pointer;color:var(--slatesub);font-size:1rem;padding:2px 6px;border-radius:6px}
.remove-btn:hover{background:var(--red-pale);color:var(--red)}

/* PRODUCT DROPDOWN */
.prod-dd{position:absolute;left:0;right:0;background:var(--card);border:1.5px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow);z-index:500;max-height:200px;overflow-y:auto;display:none;top:100%;margin-top:2px}
.pd-item{padding:9px 12px;cursor:pointer;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;font-size:.8rem;transition:background .1s}
.pd-item:last-child{border-bottom:none}
.pd-item:hover{background:var(--green-pale)}
.pd-name{font-weight:700}
.pd-hsn{font-size:.68rem;color:var(--slatesub);font-family:var(--mono)}
.pd-price{font-weight:700;color:var(--green2);font-family:var(--mono)}

/* BADGES */
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:20px;font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.b-paid{background:#dcfce7;color:#15803d}
.b-unpaid{background:#fef9c3;color:#854d0e}
.b-overdue{background:#fee2e2;color:#991b1b}
.b-proforma{background:#eff6ff;color:#1e40af}
.b-credit{background:#fdf4ff;color:#7e22ce}
.b-draft{background:#f1f5f9;color:#475569}

/* INVOICE CARDS */
.inv-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);padding:12px 14px;margin-bottom:8px;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.05)}
.inv-card:hover{border-color:var(--green)}
.inv-card-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:6px}
.inv-num{font-size:.72rem;font-weight:800;color:var(--green2);font-family:var(--mono)}
.inv-party{font-weight:700;font-size:.88rem}
.inv-sub{font-size:.72rem;color:var(--slatesub);margin-top:2px}
.inv-total{font-weight:900;font-size:.95rem;color:var(--slate);font-family:var(--mono)}

/* STATS */
.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.stat{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);padding:12px 14px;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.stat-val{font-size:1.5rem;font-weight:900;line-height:1;margin-bottom:3px;font-family:var(--mono)}
.stat-lbl{font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--slatesub)}

/* SECTION LABEL */
.sec-lbl{font-size:.65rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--slatesub);margin-bottom:8px;margin-top:4px}

/* TOGGLE */
.toggle-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0}
.toggle-sw{position:relative;width:42px;height:24px;flex-shrink:0}
.toggle-sw input{opacity:0;width:0;height:0}
.track{position:absolute;inset:0;background:var(--border);border-radius:12px;transition:background .2s;cursor:pointer}
.thumb{position:absolute;top:3px;left:3px;width:18px;height:18px;background:#fff;border-radius:50%;transition:transform .2s;pointer-events:none;box-shadow:0 1px 3px rgba(0,0,0,.2)}
input:checked~.track{background:var(--green)}
input:checked~.thumb{transform:translateX(18px)}

/* MODAL */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1000;align-items:flex-end;justify-content:center}
.modal-overlay.open{display:flex}
.modal-sheet{background:var(--card);border-radius:18px 18px 0 0;width:100%;max-width:560px;max-height:90vh;display:flex;flex-direction:column;animation:slideUp .25s ease}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:none}}
.modal-handle{width:36px;height:4px;background:var(--border);border-radius:2px;margin:10px auto 0}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:10px 16px 10px;border-bottom:1px solid var(--border);flex-shrink:0}
.modal-title{font-weight:800;font-size:.9rem}
.modal-close{background:none;border:none;cursor:pointer;font-size:1.2rem;color:var(--slatesub);padding:4px 8px}
.modal-body{padding:14px 16px;overflow-y:auto;flex:1}
.modal-foot{padding:12px 16px;border-top:1px solid var(--border);display:flex;gap:8px;flex-shrink:0}

/* TOAST */
.toast-wrap{position:fixed;top:70px;left:50%;transform:translateX(-50%);z-index:9999;display:flex;flex-direction:column;gap:6px;pointer-events:none}
.toast{background:#1e293b;color:#fff;padding:9px 16px;border-radius:20px;font-size:.78rem;font-weight:600;animation:toastIn .3s ease;white-space:nowrap;box-shadow:0 4px 16px rgba(0,0,0,.25)}
@keyframes toastIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.empty{text-align:center;padding:40px 20px;color:var(--slatesub)}
.empty .ei{font-size:2.5rem;margin-bottom:10px}
.empty h3{font-size:.9rem;font-weight:700;margin-bottom:4px}
.empty p{font-size:.78rem}

/* TAB BUTTONS */
.tab-btn{padding:7px 14px;border-radius:20px;border:1.5px solid var(--border);background:var(--card);font-size:.75rem;font-weight:700;cursor:pointer;font-family:var(--font);color:var(--slatesub);white-space:nowrap}
.tab-btn.active{background:var(--green);color:#fff;border-color:var(--green)}

@media print{.bottom-nav,.app-header,.no-print{display:none!important}.page{display:block!important;padding:0}}