@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@400;500;600;700&family=Frank+Ruhl+Libre:wght@700&display=swap');

:root { --ink:#181815; --muted:#74736d; --paper:#f5f3ed; --surface:#fff; --line:#dedbd1; --gold:#b78a2f; --gold-soft:#eee4ca; --green:#2f7457; --red:#a94d41; }
* { box-sizing:border-box; }
[hidden] { display:none!important; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:'Heebo',sans-serif; }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; }
.sidebar { position:fixed; inset:0 0 0 auto; width:252px; background:#171816; color:#fff; padding:34px 22px; display:flex; flex-direction:column; z-index:5; }
.auth-overlay { position:fixed; inset:0; background:var(--paper); display:flex; align-items:center; justify-content:center; z-index:50; }
.auth-card { background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:34px 30px; width:320px; text-align:center; display:flex; flex-direction:column; gap:14px; }
.auth-card .brand-mark { width:52px; height:52px; margin:0 auto; }
.auth-card label { display:flex; flex-direction:column; gap:6px; text-align:right; font-size:13px; color:var(--muted); }
.auth-card input { border:1px solid var(--line); border-radius:5px; padding:10px 12px; font-size:14px; }
.auth-error { color:var(--red); font-size:12px; min-height:16px; margin:0; }
.brand { display:flex; align-items:center; gap:13px; padding:0 8px 40px; }
.brand-mark { width:43px; height:43px; border-radius:50%; object-fit:cover; }
.brand strong { display:block; font-family:'Frank Ruhl Libre',serif; font-size:24px; letter-spacing:0; }
.brand span { color:#9e9f98; font-size:12px; }
nav { display:grid; gap:7px; }
.nav-item { display:block; border:0; background:transparent; color:#b8b9b3; text-align:right; text-decoration:none; padding:13px 15px; border-radius:6px; font-weight:500; }
.nav-item span { display:inline-block; width:25px; color:#8e8f88; font-size:18px; }
.nav-item:hover,.nav-item.active { background:#292a27; color:#fff; }
.nav-item.active span { color:#d5b264; }
.sidebar-footer { margin-top:auto; font-size:11px; color:#8f908a; border-top:1px solid #30312e; padding:20px 8px 0; }
.status-dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:#65a782; margin-left:7px; }
main { margin-right:252px; padding:0 48px 48px; }
.topbar { min-height:136px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); margin-bottom:34px; }
h1,h2,h3,p { margin-top:0; }
h1 { font-family:'Frank Ruhl Libre',serif; font-size:36px; margin-bottom:0; }
h2 { font-size:20px; margin-bottom:5px; }
h3 { font-size:16px; }
.title-row { display:flex; align-items:center; gap:13px; }
.trial-badge { display:none; background:#f1e1b9; color:#694d13; border:1px solid #c7a65e; border-radius:4px; padding:4px 9px; font-size:11px; font-weight:700; }
.trial-mode .trial-badge { display:inline-block; }
.trial-mode .sidebar-footer { color:#e3c77e; }
.trial-mode .status-dot { background:#d4a94d; }
.eyebrow { color:var(--gold); font-size:11px; font-weight:700; letter-spacing:0; text-transform:uppercase; margin-bottom:7px; }
.primary,.secondary,.light-button,.ghost,.whatsapp-button { border:0; border-radius:5px; padding:11px 19px; font-weight:600; }
.primary { background:var(--ink); color:#fff; }
.primary:hover { background:#34342f; }
.secondary { background:var(--gold-soft); color:#5d461b; }
.whatsapp-button { background:#25d366; color:#fff; }
.whatsapp-button:hover { background:#1fb355; }
.ghost { background:#eceae4; color:#444; }
.view { display:none; }
.view.active { display:block; animation:reveal .25s ease-out; }
@keyframes reveal { from { opacity:0; transform:translateY(5px); } }
.metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-bottom:22px; }
.metric,.panel { background:var(--surface); border:1px solid var(--line); border-radius:7px; }
.metric { padding:23px 25px; min-height:137px; position:relative; overflow:hidden; }
.metric::before { content:''; position:absolute; right:0; top:0; bottom:0; width:3px; background:var(--gold); }
.metric span { display:block; color:var(--muted); font-size:13px; }
.metric strong { display:block; font-family:'Frank Ruhl Libre',serif; font-size:31px; margin:8px 0 1px; }
.metric small { color:#9a9993; }
.content-grid { display:grid; grid-template-columns:minmax(0,2fr) minmax(280px,1fr); gap:22px; }
.panel { padding:25px; }
.panel-heading,.section-actions,.dialog-heading,.items-heading { display:flex; justify-content:space-between; align-items:center; }
.panel-heading { margin-bottom:20px; }
.panel-heading p,.section-actions p { color:var(--muted); font-size:13px; margin:0; }
.text-button { border:0; background:transparent; color:#8b681f; font-weight:600; padding:6px; }
.accent-panel { background:#262722; color:#fff; border:0; padding:34px; position:relative; overflow:hidden; min-height:280px; }
.accent-panel h2 { font-family:'Frank Ruhl Libre',serif; font-size:30px; max-width:260px; }
.accent-panel > p:not(.eyebrow) { color:#bfc0b9; font-size:14px; line-height:1.8; }
.gold-line { display:block; width:44px; height:3px; background:#d0aa58; margin-bottom:25px; }
.light-button { background:#fff; margin-top:10px; }
.invoice-table { width:100%; border-collapse:collapse; }
.invoice-table th { text-align:right; color:#91908a; font-size:11px; font-weight:500; padding:10px; border-bottom:1px solid var(--line); }
.invoice-table td { padding:15px 10px; border-bottom:1px solid #eeeae2; font-size:13px; }
.invoice-table tr:last-child td { border:0; }
.invoice-table button { border:0; background:#eeeae1; border-radius:4px; padding:5px 9px; }
.table-actions { display:flex; align-items:center; gap:6px; white-space:nowrap; flex-wrap:wrap; }
.send-hint { color:var(--muted); font-size:13px; line-height:1.6; margin:0 0 18px; }
.send-actions { justify-content:flex-start; flex-wrap:wrap; }
.badge { display:inline-block; padding:4px 9px; border-radius:99px; font-size:10px; font-weight:700; background:#f1e6c8; color:#745718; }
.badge.paid { background:#dcece4; color:#286048; }
.badge.partial { background:#e3e8ef; color:#435a75; }
.empty { text-align:center; color:var(--muted); padding:50px 15px; border:1px dashed var(--line); border-radius:5px; }
.search { width:270px; }
.report-filters { display:flex; flex-wrap:wrap; gap:16px; margin-bottom:22px; }
.report-filters label { min-width:150px; }
.panel-heading-actions { display:flex; align-items:center; gap:10px; }
.section-actions { margin-bottom:24px; }
.debt-total { font-family:'Frank Ruhl Libre',serif; font-size:28px; }
.expense-header-actions { display:flex; align-items:center; gap:14px; }
.receipt-link { color:#8b681f; font-weight:600; text-decoration:none; }
.receipt-link:hover { text-decoration:underline; }
.muted-text { color:var(--muted); font-size:12px; }
.expense-receipt-status { display:flex; align-items:center; justify-content:space-between; gap:10px; background:#f2efe7; border:1px solid var(--line); border-radius:5px; padding:10px 14px; margin:-6px 0 20px; font-size:12px; color:#585851; }
.payment-summary { display:flex; justify-content:space-between; align-items:center; background:#f2efe7; border:1px solid var(--line); border-radius:5px; padding:14px 16px; margin-bottom:20px; }
.payment-summary strong { font-size:22px; }
.customer-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.customer-card { background:#fff; border:1px solid var(--line); border-radius:7px; padding:22px; }
.customer-card-header { display:flex; justify-content:space-between; align-items:flex-start; }
.customer-card .avatar { width:40px; height:40px; background:#252622; color:#d8b76f; display:grid; place-items:center; border-radius:50%; font-weight:700; margin-bottom:17px; }
.edit-customer { border:1px solid var(--line); background:#f7f5ef; color:#62542f; border-radius:4px; padding:6px 10px; font-size:12px; font-weight:600; }
.edit-customer:hover { border-color:#b78a2f; background:#f1e7cc; }
.customer-card h3 { margin-bottom:5px; }
.customer-card p { color:var(--muted); font-size:12px; margin:3px 0; }
.form-panel { max-width:900px; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:19px; }
label { display:grid; gap:6px; font-size:12px; font-weight:600; color:#585851; }
input,select,textarea { width:100%; border:1px solid #cfccc2; border-radius:5px; background:#fff; padding:10px 12px; color:var(--ink); outline:none; }
input:focus,select:focus,textarea:focus { border-color:#98752f; box-shadow:0 0 0 3px #b78a2f1c; }
.wide { grid-column:1/-1; }
.form-actions { display:flex; justify-content:flex-start; gap:12px; }
.field-hint { color:var(--muted); font-size:12px; line-height:1.6; margin:-8px 0 6px; }
dialog { width:min(650px,90vw); border:0; border-radius:8px; padding:0; box-shadow:0 24px 90px #0005; }
dialog::backdrop { background:#181815aa; }
dialog form { padding:28px; }
#sendDialog { padding:28px; }
.dialog-heading { border-bottom:1px solid var(--line); padding-bottom:18px; margin-bottom:22px; }
.dialog-heading h2 { font-family:'Frank Ruhl Libre',serif; font-size:28px; margin:0; }
.icon-button { border:0; background:#eeeae4; border-radius:50%; width:34px; height:34px; font-size:21px; }
.dialog-actions { display:flex; justify-content:flex-start; gap:8px; border-top:1px solid var(--line); margin-top:25px; padding-top:20px; }
.invoice-dialog { width:min(1000px,94vw); }
.calculator-dialog { width:420px; height:min(720px,92vh); padding:0; overflow:hidden; background:#f4f1ea; }
.calculator-dialog-header { height:48px; padding:7px 12px 7px 18px; display:flex; align-items:center; justify-content:space-between; background:#181815; color:#fff; }
.calculator-dialog-header .icon-button { width:32px; height:32px; background:#343530; color:#fff; }
.calculator-dialog iframe { display:block; width:100%; height:calc(100% - 48px); border:0; }
.invoice-meta { display:grid; grid-template-columns:2fr 1fr 1fr; gap:15px; }
.items-heading { margin-top:25px; }
.item-table { border:1px solid var(--line); border-radius:5px; overflow:hidden; }
.item-row { display:grid; grid-template-columns:3fr .7fr 1.2fr 1.1fr 36px; gap:10px; align-items:center; padding:9px 12px; border-bottom:1px solid #ece9e1; }
.item-row:last-child { border:0; }
.item-labels { background:#f1efe9; font-size:11px; color:#77766f; font-weight:600; }
.item-row input { padding:8px; }
.item-total { font-weight:700; }
.remove-item { border:0; background:transparent; color:var(--red); font-size:18px; }
.invoice-bottom { display:grid; grid-template-columns:1.5fr 1fr; gap:35px; margin-top:22px; }
.totals { display:grid; gap:8px; }
.totals div { display:flex; justify-content:space-between; padding:4px 0; }
.totals .discount-row { align-items:center; }
.discount-row label { display:block; }
.discount-row input { width:115px; padding:6px 9px; text-align:left; }
.grand-total { border-top:2px solid var(--ink); margin-top:4px; padding-top:12px!important; font-size:18px; }
.toast { position:fixed; left:30px; bottom:30px; background:#252622; color:#fff; padding:12px 18px; border-radius:5px; opacity:0; transform:translateY(10px); pointer-events:none; transition:.2s; z-index:20; }
.toast.show { opacity:1; transform:none; }

@media (max-width: 1100px) {
  .sidebar { width:210px; padding-inline:16px; }
  .brand { padding-inline:4px; }
  main { margin-right:210px; padding-inline:24px; }
  .topbar { min-height:115px; }
  .content-grid { grid-template-columns:1fr; }
  .accent-panel { min-height:230px; }
  .customer-grid { grid-template-columns:repeat(2,1fr); }
}

@media (max-width: 760px) {
  body { overflow-x:hidden; }
  .sidebar { position:static; inset:auto; width:100%; height:auto; padding:14px 12px; flex-direction:row; align-items:center; flex-wrap:wrap; gap:10px; }
  .brand { padding:0; flex:1 0 auto; }
  .brand span { display:none; }
  nav { flex:1 1 100%; grid-auto-flow:column; grid-auto-columns:max-content; overflow-x:auto; gap:4px; -webkit-overflow-scrolling:touch; }
  .nav-item { padding:10px 12px; white-space:nowrap; }
  .sidebar-footer { display:none; }
  #logoutButton { flex:none; }
  main { margin-right:0; padding:0 14px 32px; }
  .topbar { min-height:auto; flex-wrap:wrap; gap:12px; padding:18px 0; }
  h1 { font-size:26px; }
  .metrics { grid-template-columns:1fr; }
  .customer-grid { grid-template-columns:1fr; }
  .form-grid,.invoice-meta,.invoice-bottom { grid-template-columns:1fr; }
  .search { width:100%; }
  .panel-heading,.section-actions,.panel-heading-actions,.expense-header-actions { flex-wrap:wrap; gap:10px; }
  .report-filters { flex-direction:column; }
  .report-filters label { min-width:0; }
  .panel { padding:18px; }
  /* Without this, a grid item's automatic min-width is its content's max-content size, so the
     820px-wide table below would stretch the whole panel (and its heading) off-screen instead of
     just scrolling inside #recentInvoices. */
  .content-grid > * { min-width:0; }
  .item-row { grid-template-columns:1fr 1fr; grid-auto-rows:auto; }
  .item-row .remove-item { justify-self:end; }
  #invoiceList,#quoteList,#debtList,#expenseList,#recentInvoices,#reportMonthlyTable,#reportSupplierTable { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .invoice-table { min-width:820px; }
  .table-actions { flex-wrap:nowrap; }
  dialog,.invoice-dialog { width:94vw; max-height:90vh; overflow-y:auto; }
  dialog form,#sendDialog { padding:18px; }
  .calculator-dialog { width:94vw; }
}

@media print {
  @page { size:A4; margin:0; }
  #appShell,#authOverlay,.toast,dialog { display:none!important; }
  html,body { display:block!important; direction:ltr; width:210mm; height:297mm; min-width:0; margin:0; padding:0; overflow:hidden; background:#fff; }
  #printSheet { position:fixed; inset:0; display:block!important; box-sizing:border-box; direction:rtl; width:210mm; height:297mm; margin:0; padding:13mm 15mm; overflow:hidden; color:#171713; font-family:Arial,sans-serif; font-size:10pt; }
  #printSheet, #printSheet * { -webkit-print-color-adjust:exact; print-color-adjust:exact; color-adjust:exact; }
  #printSheet table,#printSheet section,#printSheet h1,#printSheet h2,#printSheet h3 { break-inside:avoid; page-break-inside:avoid; }
  .print-header { display:flex; justify-content:space-between; align-items:flex-start; gap:12mm; padding-bottom:8mm; border-bottom:1.2mm solid #b9912f; }
  .print-brand { display:flex; align-items:flex-start; gap:4mm; max-width:120mm; }
  .print-mark { flex:0 0 16mm; width:16mm; height:16mm; border-radius:50%; object-fit:cover; }
  .print-brand h1 { margin:0 0 3mm; font-size:24pt; line-height:1; letter-spacing:0; }
  .print-business-details { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.5mm 7mm; color:#55554e; }
  .print-detail { display:flex; gap:2mm; min-width:0; }
  .print-detail span { flex:none; color:#77776f; font-size:8.5pt; }
  .print-detail strong { overflow-wrap:anywhere; font-weight:600; }
  .print-document-title { flex:none; min-width:42mm; text-align:left; }
  .print-document-title span { display:block; margin-bottom:1.5mm; color:#77776f; font-size:8.5pt; }
  .print-document-title h2 { margin:0; font-size:20pt; line-height:1.15; }
  .print-document-title > strong { display:block; margin-top:2mm; color:#b18420; font-size:15pt; }
  .print-dates { display:flex; gap:14mm; padding:5mm 0; border-bottom:.3mm solid #d9d7d0; }
  .print-dates div { display:flex; flex-direction:column; gap:1mm; }
  .print-dates span { color:#77776f; font-size:8.5pt; }
  .print-dates strong { font-size:11pt; }
  .print-customer { margin:7mm 0 6mm; padding:5mm; background:#f4f2ec; border-right:1.2mm solid #b9912f; }
  .print-customer h3,.print-notes h3 { margin:0 0 3mm; font-size:11pt; }
  .print-customer-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2mm 10mm; }
  .print-items { width:100%; margin:0 0 7mm; border-collapse:collapse; table-layout:fixed; }
  .print-items th { padding:3mm; border-bottom:.6mm solid #171713; background:#171713; color:#fff; font-size:8.5pt; font-weight:600; text-align:center; }
  .print-items th:first-child { width:43%; text-align:right; }
  .print-items td { padding:3.5mm 3mm; border-bottom:.3mm solid #dedcd5; text-align:center; vertical-align:top; }
  .print-items td:first-child { text-align:right; overflow-wrap:anywhere; }
  .print-summary-wrap { display:flex; justify-content:flex-end; }
  .print-summary { width:76mm; }
  .print-total-row { display:flex; justify-content:space-between; gap:8mm; padding:2mm 0; color:#55554e; }
  .print-total-row strong { color:#171713; }
  .print-grand-total { display:flex; justify-content:space-between; align-items:baseline; gap:8mm; margin-top:2mm; padding:4mm 0; border-top:.8mm solid #b9912f; font-size:13pt; font-weight:800; }
  .print-grand-total strong { font-size:17pt; white-space:nowrap; }
  .print-notes { margin-top:8mm; padding-top:4mm; border-top:.3mm solid #d9d7d0; }
  .print-notes p { margin:0; color:#55554e; line-height:1.5; white-space:pre-wrap; overflow-wrap:anywhere; }
}
#printSheet { display:none; }