:root{
  --bg:#f3f4f6;
  --card:#ffffff;
  --text:#111827;
  --muted:#4f5561;
  --line:#e5e7eb;
  --input-border:#cacbce;
  --primary:#0a66c2;
  --danger:#dc2626;
  --success:#16a34a;
  --shadow: 0 10px 25px rgba(0,0,0,.06);
  --radius: 6px;
}

*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;background:var(--bg);color:var(--text)}
a{text-decoration:none;color:inherit}

.topbar{position:sticky;top:0;z-index:10;background:var(--card);border-bottom:1px solid var(--line)}
.topbar-inner{display:flex;align-items:center;gap:18px;padding:12px 18px}
.brand a{font-weight:600;color:var(--text);letter-spacing:.2px}
.topnav{display:flex;gap:14px;flex:1;justify-content:center}
.topnav a{padding:8px 10px;border-radius:10px;color:var(--muted)}
.topnav a:hover{background:#f9fafb;color:var(--text)}
.userbox{display:flex;align-items:center;gap:10px}
.user-meta{text-align:right;line-height:1.1}
.user-name{font-weight:700;font-size:13px}
.user-role{font-size:12px;color:var(--muted)}

.container{max-width:1200px;margin:18px auto;padding:0 14px}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.card-header{padding:14px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px}
.card-title{font-weight:500}
.card-body{padding:16px}

.grid{display:grid;gap:14px}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}

@media (max-width: 640px) {
  .grid {
    display: block !important;
  }
}


@media(max-width:980px){.grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.grid-4,.grid-2{grid-template-columns:1fr}.topnav{display:none}}

.kpi{padding:14px;border-radius:6px;border:1px solid var(--line);background:#fbfdff}
.kpi .label{color:var(--muted);font-size:12px}
.kpi .value{font-size:24px;font-weight:900;margin-top:6px}

.btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:6px;padding:9px 12px;font-weight:600;font-size:13px;cursor:pointer}
.btn-primary{background:var(--primary);border-color:var(--primary);color:#fff}
.btn-danger{background:var(--danger);border-color:var(--danger);color:#fff}
.btn-light{background:#f9fafb}
.btn:disabled{opacity:.6;cursor:not-allowed}

.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:720px){.form-row{grid-template-columns:1fr}}
.field label{display:block;font-size:12px;color:var(--muted);margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;padding:10px 11px;border-radius:6px;border:1px solid var(--input-border);outline:none;background:#fff}
.field textarea{min-height:100px;resize:vertical}

.table-wrap{overflow:auto;border-radius:14px;border:1px solid var(--line)}
table{width:100%;border-collapse:separate;border-spacing:0;background:#fff}
th,td{padding:10px 10px;border-bottom:1px solid var(--line);font-size:13px;vertical-align:middle}
th{position:sticky;top:0;background:#f9fafb;z-index:1;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}

tbody tr:nth-child(odd){background:#ffffff}
tbody tr:nth-child(even){background:#fbfbfd}

.badge{display:inline-flex;align-items:center;gap:5px;padding:6px 10px;border-radius:999px;font-weight:500;font-size:12px;border:1px solid var(--line);background:#fff}
.badge .dot{width:8px;height:8px;border-radius:999px}

.filters{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
@media(max-width:1100px){.filters{grid-template-columns:repeat(3,1fr)}}
@media(max-width:680px){.filters{grid-template-columns:1fr}}

.pager{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px}
.pager .meta{color:var(--muted);font-size:12px}
.pager .actions{display:flex;gap:8px}

.alert{padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:#f9fafb;color:var(--text);margin-bottom:12px}
.alert-success{border-color:#bbf7d0;background:#f0fdf4}
.alert-danger{border-color:#fecaca;background:#fff1f2}


.sortable-ghost{opacity:.45;background:#eaf3ff!important}
.drag-handle{user-select:none}
@media print{.topbar,.mobile-drawer,.mobile-drawer-backdrop,.btn{display:none!important}.container{max-width:100%;margin:0}.card{box-shadow:none;border:0}.card-header{border-bottom:1px solid #ddd}}


.form-row1{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
@media(max-width:720px){.form-row1{grid-template-columns:1fr}}
th,td{text-align:left;vertical-align:middle}
th.num,td.num,.text-right{text-align:right!important}
th.center,td.center,.text-center{text-align:center!important}
.invoice-paper,.receipt-paper{background:#fff;border:1px solid var(--line);border-radius:8px;padding:24px;line-height:1.7}
.invoice-paper table,.receipt-paper table{border-collapse:collapse;width:100%}
.invoice-paper th,.invoice-paper td,.receipt-paper th,.receipt-paper td{border:1px solid #e5e7eb;padding:8px}
.note-editor.note-frame{border:1px solid var(--input-border)!important;border-radius:6px!important}
@media print{.no-print{display:none!important}.invoice-paper,.receipt-paper{border:0;padding:0}.note-editor{display:none!important}}

/* Editable invoice and receipt documents */
.doc-editor-toolbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px;align-items:center}
.doc-editor-help{font-size:12px;color:var(--muted)}
.doc-editable{outline:2px dashed #d1d5db;outline-offset:6px;background:#fff}
.doc-editable:focus{outline-color:var(--primary)}
.doc-paper{width:794px;min-height:1123px;margin:0 auto;background:#fff;position:relative;color:#374151;font-family:Arial, Helvetica, sans-serif;padding:48px 44px 92px;box-shadow:0 15px 40px rgba(15,23,42,.08);border:1px solid #e5e7eb;overflow:hidden}
.doc-paper *{box-sizing:border-box}
.doc-paper table{border-collapse:collapse;width:100%;background:#fff}
.doc-paper th,.doc-paper td{font-size:13px;color:#4b5563;border:1px solid #e5e7eb;padding:9px 10px;vertical-align:middle;text-transform:none;letter-spacing:0;background:#fff;position:static}
.doc-paper th{font-weight:700;background:#f3f4f6;color:#4b5563}
.doc-paper span{font-weight:inherit}
.doc-top{display:grid;grid-template-columns:1fr 345px;gap:24px;align-items:start;margin-bottom:26px}
.doc-main-logo{width:175px;height:auto;margin-top:28px}
.doc-title-block{text-align:right}
.doc-title-block h1{font-size:19px;letter-spacing:.4px;color:#1f2937;margin:0 0 12px;font-weight:800}.doc-title-block h1 span{font-size:18px;margin-left:6px}
.doc-meta-table th,.doc-meta-table td{font-size:12px;text-align:left;padding:7px 9px}.doc-meta-table td{font-weight:700;color:#111827}.doc-meta-table th span{float:right;margin-left:8px;color:#374151}
.doc-billing-row{display:grid;grid-template-columns:1fr 1fr;gap:35px;margin:10px 0 42px;font-size:13px;line-height:1.35}.doc-billing-right{text-align:right}.muted{color:#6b7280}.unpaid-badge{display:inline-block;margin-top:16px;color:#dc2626;border:1px solid #ef4444;border-radius:5px;padding:8px 11px;font-weight:700;background:#fff}.paid-badge{display:inline-block;min-width:160px;text-align:center;color:#fff;background:#07830b;border-radius:5px;padding:10px 16px;font-weight:700}.paid-badge span{margin-left:8px}
.doc-lines-table th{text-align:left}.doc-lines-table .amount-col{text-align:right;width:155px}.doc-lines-table .total-label{text-align:right}.doc-lines-table .strong{font-weight:800;color:#374151}.doc-lines-table .grand-total td{background:#f3f4f6!important;font-size:15px;color:#111827}.doc-stamp-area{height:360px;position:relative}.cit-stamp{width:230px;height:auto;opacity:.95}.doc-stamp-area .cit-stamp{position:absolute;right:8px;bottom:40px;transform:rotate(-8deg)}
.doc-footer{position:absolute;left:82px;right:82px;bottom:24px;color:#6b7280;font-size:12px;line-height:1.5}.footer-line{height:6px;margin-top:3px}.footer-line.green{background:#83bd3c}.footer-line.orange{background:#d66b2e}.footer-line.grey{background:#6b7476}
.receipt-header{display:grid;grid-template-columns:1fr 1.2fr 1fr;align-items:start;margin-bottom:34px}.receipt-header h1{text-align:center;font-size:19px;color:#111827;margin:16px 0 0;font-weight:800}.receipt-header h1 span{margin-left:10px}.receipt-logo{width:145px;justify-self:end}.receipt-company-block{font-size:13px;line-height:1.45;margin-bottom:28px}.receipt-bill-row{display:grid;grid-template-columns:1fr 210px;gap:35px;align-items:end;font-size:13px;line-height:1.45;margin-bottom:25px}.receipt-info-table th{width:49%;text-align:left;font-weight:500;background:#fff;color:#6b7280}.receipt-info-table td{font-weight:600;color:#111827}.receipt-info-table th span{margin-left:10px;color:#6b7280}.paid-stamp-wrap{height:175px;position:relative}.paid-stamp{width:210px;position:absolute;left:30px;top:70px;transform:rotate(-10deg)}.receipt-bottom-stamp{height:230px;position:relative}.receipt-bottom-stamp .cit-stamp{position:absolute;right:10px;bottom:30px;transform:rotate(-8deg)}
@media(max-width:850px){.doc-paper{width:100%;min-height:auto;padding:30px 18px 120px}.doc-top,.doc-billing-row,.receipt-header,.receipt-bill-row{grid-template-columns:1fr}.doc-title-block,.doc-billing-right{text-align:left}.receipt-logo{justify-self:start}.doc-footer{left:18px;right:18px}}
@media print{body{background:#fff!important}.no-print,.topbar,.mobile-drawer,.mobile-drawer-backdrop,.card-header.no-print,.doc-editor-toolbar{display:none!important}.container{max-width:none!important;margin:0!important;padding:0!important}.card,.card-body{border:0!important;box-shadow:none!important;padding:0!important;margin:0!important}.doc-paper{width:794px;min-height:1123px;box-shadow:none!important;border:0!important;margin:0 auto!important;page-break-after:always}.doc-editable{outline:0!important}}