:root{
  --bg:#f5f6fa;
  --panel:#ffffff;
  --ink:#161a2b;
  --muted:#6b7086;
  --line:#e7e9f2;
  --brand:#4f46e5;
  --brand-dark:#4338ca;
  --brand-light:#eef0ff;
  --success:#16a34a;
  --success-bg:#ecfdf3;
  --warn:#d97706;
  --warn-bg:#fffbeb;
  --danger:#dc2626;
  --danger-bg:#fef2f2;
  --radius:12px;
  --shadow:0 1px 2px rgba(20,20,50,.04),0 8px 24px -12px rgba(20,20,50,.10);
}
*{box-sizing:border-box;}
body{
  margin:0;
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:var(--bg);
  color:var(--ink);
}
a{ text-decoration:none; color:inherit; }
button{ font-family:inherit; }

/* ---------- Auth pages ---------- */
.auth-wrap{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:radial-gradient(circle at 20% 20%, #eef0ff 0%, #f5f6fa 45%), var(--bg);
  padding:20px;
}
.auth-card{
  width:100%;
  max-width:400px;
  background:var(--panel);
  border-radius:16px;
  box-shadow:var(--shadow);
  padding:36px 32px;
  border:1px solid var(--line);
}
.auth-logo{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:26px;
}
.auth-logo .mark{
  width:38px;height:38px;border-radius:10px;
  background:linear-gradient(135deg,var(--brand),#7c72f5);
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:15px;
}
.auth-logo .name{ font-weight:800; font-size:19px; }
.auth-card h1{ font-size:22px; margin:0 0 4px; }
.auth-card p.sub{ color:var(--muted); margin:0 0 24px; font-size:14px; }
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:13px; font-weight:600; margin-bottom:6px; color:#333; }
.field input, .field select, .field textarea{
  width:100%;
  padding:11px 13px;
  border:1px solid var(--line);
  border-radius:9px;
  font-size:14px;
  background:#fbfbfe;
  transition:border-color .15s, box-shadow .15s;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none;
  border-color:var(--brand);
  box-shadow:0 0 0 3px var(--brand-light);
  background:#fff;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:11px 18px;
  border-radius:9px;
  border:1px solid transparent;
  background:var(--brand);
  color:#fff;
  font-weight:600;
  font-size:14px;
  cursor:pointer;
  transition:background .15s, transform .05s;
}
.btn:hover{ background:var(--brand-dark); }
.btn:active{ transform:translateY(1px); }
.btn.block{ width:100%; }
.btn.outline{ background:#fff; color:var(--brand); border-color:var(--brand); }
.btn.outline:hover{ background:var(--brand-light); }
.btn.ghost{ background:transparent; color:var(--muted); border-color:var(--line); }
.btn.ghost:hover{ background:#f2f3f8; }
.btn.danger{ background:var(--danger); }
.btn.danger:hover{ background:#b91c1c; }
.btn.sm{ padding:7px 12px; font-size:13px; }
.auth-foot{ margin-top:18px; text-align:center; font-size:14px; color:var(--muted); }
.auth-foot a{ color:var(--brand); font-weight:600; }
.alert{
  padding:11px 14px;
  border-radius:9px;
  font-size:13.5px;
  margin-bottom:16px;
  border:1px solid transparent;
}
.alert.error{ background:var(--danger-bg); color:#991b1b; border-color:#fecaca; }
.alert.success{ background:var(--success-bg); color:#166534; border-color:#bbf7d0; }
.demo-hint{
  margin-top:16px; font-size:12.5px; color:var(--muted); text-align:center;
  background:#f8f8fc;border:1px dashed var(--line);padding:8px;border-radius:8px;
}

/* ---------- App shell ---------- */
.app-shell{ display:flex; min-height:100vh; }
.sidebar{
  width:240px;
  flex-shrink:0;
  background:#171827;
  color:#d6d7e6;
  display:flex;
  flex-direction:column;
  padding:20px 14px;
  position:sticky;
  top:0;
  height:100vh;
}
.brand{ display:flex; align-items:center; gap:10px; padding:6px 8px 22px; }
.brand-mark{
  width:32px;height:32px;border-radius:8px;
  background:linear-gradient(135deg,var(--brand),#8b7ff8);
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:13px;
}
.brand-name{ font-weight:800; font-size:16px; color:#fff; }
.side-nav{ display:flex; flex-direction:column; gap:2px; flex:1; }
.side-nav a{
  display:flex; align-items:center; gap:11px;
  padding:10px 12px; border-radius:9px;
  font-size:14px; font-weight:500; color:#aeb0c4;
  transition:background .15s, color .15s;
}
.side-nav a:hover{ background:#212236; color:#fff; }
.side-nav a.active{ background:var(--brand); color:#fff; }
.sidebar-footer{ border-top:1px solid #2a2b3f; padding-top:14px; margin-top:10px; }
.user-chip{ display:flex; align-items:center; gap:10px; padding:6px 6px 12px; }
.avatar{
  width:34px;height:34px;border-radius:50%;
  background:var(--brand-light); color:var(--brand);
  display:flex;align-items:center;justify-content:center;font-weight:700;
  flex-shrink:0;
}
.user-info{ overflow:hidden; }
.u-name{ font-size:13.5px; font-weight:600; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.u-biz{ font-size:12px; color:#8c8ea6; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.logout-link{
  display:block; text-align:center; font-size:13px; font-weight:600;
  color:#c7c8dc; padding:8px; border-radius:8px; background:#212236;
}
.logout-link:hover{ background:#2a2b45; color:#fff; }

.main-content{ flex:1; padding:28px 34px; max-width:1400px; }

.page-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:24px; flex-wrap:wrap; gap:12px;
}
.page-head h1{ font-size:23px; margin:0 0 3px; }
.page-head p{ margin:0; color:var(--muted); font-size:14px; }

/* ---------- Cards / stats ---------- */
.stat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; margin-bottom:26px; }
.stat-card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px 20px; box-shadow:var(--shadow);
}
.stat-card .label{ font-size:12.5px; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.03em; }
.stat-card .value{ font-size:26px; font-weight:800; margin-top:6px; }
.stat-card .value.green{ color:var(--success); }
.stat-card .value.amber{ color:var(--warn); }

.panel{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:22px;
}
.panel-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; flex-wrap:wrap; gap:10px; }
.panel-head h2{ font-size:16.5px; margin:0; }

/* ---------- Tables ---------- */
table.data-table{ width:100%; border-collapse:collapse; font-size:14px; }
table.data-table th{
  text-align:left; font-size:12px; text-transform:uppercase; letter-spacing:.03em;
  color:var(--muted); padding:10px 12px; border-bottom:1px solid var(--line);
  font-weight:700;
}
table.data-table td{ padding:13px 12px; border-bottom:1px solid var(--line); vertical-align:middle; }
table.data-table tr:last-child td{ border-bottom:none; }
table.data-table tr:hover td{ background:#fafafe; }
.empty-row td{ text-align:center; color:var(--muted); padding:34px 0; }

.badge{ display:inline-block; padding:4px 10px; border-radius:20px; font-size:12px; font-weight:700; }
.badge.draft{ background:#f1f2f6; color:#555; }
.badge.sent{ background:#e0edff; color:#1d4ed8; }
.badge.paid{ background:var(--success-bg); color:var(--success); }
.badge.overdue{ background:var(--danger-bg); color:var(--danger); }

.icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px;height:32px;border-radius:8px;border:1px solid var(--line);
  background:#fff; color:var(--muted); cursor:pointer; margin-right:4px;
}
.icon-btn:hover{ background:#f2f3f8; color:var(--ink); }
.icon-btn.danger:hover{ background:var(--danger-bg); color:var(--danger); border-color:#fecaca; }

/* ---------- Grid of cards (companies/products) ---------- */
.card-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; }
.item-card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px; box-shadow:var(--shadow); position:relative;
}
.item-card h3{ margin:0 0 4px; font-size:15.5px; }
.item-card .meta{ font-size:13px; color:var(--muted); margin:2px 0; }
.item-card .price{ font-size:19px; font-weight:800; color:var(--brand); margin-top:10px; }
.item-card .actions{ position:absolute; top:14px; right:14px; display:flex; gap:4px; }

/* ---------- Modal ---------- */
.modal-overlay{
  position:fixed; inset:0; background:rgba(20,20,35,.45);
  display:none; align-items:center; justify-content:center; z-index:100; padding:20px;
}
.modal-overlay.open{ display:flex; }
.modal{
  background:#fff; border-radius:14px; width:100%; max-width:460px;
  max-height:90vh; overflow-y:auto; box-shadow:0 30px 60px -20px rgba(0,0,0,.3);
}
.modal-head{ display:flex; align-items:center; justify-content:space-between; padding:18px 22px; border-bottom:1px solid var(--line); }
.modal-head h3{ margin:0; font-size:16px; }
.modal-close{ cursor:pointer; color:var(--muted); font-size:20px; line-height:1; background:none; border:none; }
.modal-body{ padding:20px 22px; }
.modal-foot{ padding:16px 22px; border-top:1px solid var(--line); display:flex; justify-content:flex-end; gap:10px; }
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }

/* ---------- Invoice create ---------- */
.invoice-layout{ display:grid; grid-template-columns:1.1fr .9fr; gap:22px; align-items:start; }
@media (max-width:1100px){ .invoice-layout{ grid-template-columns:1fr; } }
.template-strip{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:18px; }
.tpl-option{
  border:2px solid var(--line); border-radius:10px; padding:6px; cursor:pointer;
  background:#fff; width:110px; text-align:center; transition:border-color .15s;
}
.tpl-option.selected{ border-color:var(--brand); }
.tpl-option .swatch{ height:60px; border-radius:6px; margin-bottom:6px; }
.tpl-option .name{ font-size:12px; font-weight:600; }
.swatch.t1{ background:linear-gradient(180deg,#4f46e5 0 22%, #fff 22%); }
.swatch.t2{ background:linear-gradient(180deg,#fff 0 100%); border:1px solid #ddd; position:relative; }
.swatch.t2::after{ content:""; position:absolute; left:8px; right:8px; top:8px; height:6px; background:#111; }
.swatch.t3{ background:linear-gradient(120deg,#0f172a 0 30%, #fff 30%); }

.items-table{ width:100%; border-collapse:collapse; margin-top:10px; }
.items-table th{ font-size:11.5px; text-transform:uppercase; color:var(--muted); text-align:left; padding:6px 8px; }
.items-table td{ padding:6px 8px; }
.items-table input, .items-table select{
  width:100%; padding:8px 9px; border:1px solid var(--line); border-radius:7px; font-size:13.5px;
}
.items-table .col-qty, .items-table .col-price, .items-table .col-tax{ width:80px; }
.items-table .col-total{ width:100px; text-align:right; font-weight:600; }
.items-table .col-del{ width:36px; text-align:center; }

.totals-box{ margin-top:14px; margin-left:auto; width:280px; }
.totals-box .row{ display:flex; justify-content:space-between; padding:7px 0; font-size:14px; color:var(--muted); }
.totals-box .row.grand{ border-top:1px solid var(--line); margin-top:6px; padding-top:12px; font-size:18px; font-weight:800; color:var(--ink); }

.preview-panel{ position:sticky; top:20px; }
.preview-frame-wrap{
  background:#e9eaf1; border-radius:12px; padding:16px; max-height:80vh; overflow:auto;
}

/* ---------- Invoice templates (rendered) ---------- */
.inv-doc{ background:#fff; width:100%; max-width:760px; margin:0 auto; padding:40px; font-size:13.5px; color:#222; box-shadow:0 2px 10px rgba(0,0,0,.06); }
.inv-doc table{ width:100%; border-collapse:collapse; }
.inv-doc .items th{ text-align:left; padding:8px 6px; font-size:11.5px; text-transform:uppercase; color:#888; border-bottom:2px solid #eee; }
.inv-doc .items td{ padding:9px 6px; border-bottom:1px solid #f0f0f0; }
.inv-doc .totals td{ padding:5px 6px; }
.inv-doc .totals .grand td{ font-weight:800; font-size:16px; border-top:2px solid #333; padding-top:10px; }

/* Template 1: modern indigo header */
.tpl1-head{ background:var(--brand); color:#fff; padding:26px 34px; margin:-40px -40px 26px; border-radius:0; display:flex; justify-content:space-between; align-items:flex-start; }
.tpl1-head h1{ margin:0; font-size:26px; letter-spacing:.05em; }
.tpl1-head .biz{ font-weight:700; font-size:15px; }
.tpl1-head .to-block{ text-align:right; font-size:13px; }

/* Template 2: minimal clean */
.tpl2-head{ display:flex; justify-content:space-between; border-bottom:3px solid #111; padding-bottom:16px; margin-bottom:20px; }
.tpl2-head h1{ margin:0; font-size:24px; letter-spacing:.15em; }

/* Template 3: dark bold sidebar-style */
.tpl3-head{ background:#0f172a; color:#fff; padding:30px 34px; margin:-40px -40px 26px; display:flex; justify-content:space-between; }
.tpl3-head h1{ margin:0; font-size:24px; color:#93c5fd; letter-spacing:.05em; }

.pill-status{ display:inline-block; padding:3px 12px; border-radius:20px; font-size:11px; font-weight:700; text-transform:uppercase; }

@media print{
  body *{ visibility:hidden; }
  #printArea, #printArea *{ visibility:visible; }
  #printArea{ position:absolute; left:0; top:0; width:100%; }
}

.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:700px){ .form-grid{ grid-template-columns:1fr; } .two-col{ grid-template-columns:1fr; } .invoice-layout{ grid-template-columns:1fr; } }

.help-text{ font-size:12.5px; color:var(--muted); margin-top:4px; }
.toast{
  position:fixed; bottom:24px; right:24px; background:#171827; color:#fff;
  padding:12px 18px; border-radius:9px; font-size:13.5px; font-weight:500;
  box-shadow:0 10px 30px rgba(0,0,0,.25); z-index:200; opacity:0; transform:translateY(10px);
  transition:opacity .2s, transform .2s; pointer-events:none;
}
.toast.show{ opacity:1; transform:translateY(0); }