/* NETMAT Billing - design system */
:root{
  --brand:#4f46e5; --brand-600:#4338ca; --brand-50:#eef2ff;
  --ink:#0f172a; --ink-2:#334155; --muted:#64748b; --line:#e2e8f0;
  --bg:#f5f7fb; --surface:#ffffff; --sidebar:#0f172a; --sidebar-ink:#cbd5e1;
  --ok:#059669; --ok-50:#ecfdf5; --warn:#d97706; --warn-50:#fffbeb; --bad:#dc2626; --bad-50:#fef2f2;
  --radius:14px; --shadow:0 1px 2px rgba(15,23,42,.04),0 4px 16px rgba(15,23,42,.05);
  --bs-primary:#4f46e5; --bs-primary-rgb:79,70,229;
  --bs-body-font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
body{background:var(--bg);color:var(--ink);font-family:var(--bs-body-font-family);font-size:.925rem;}
a{color:var(--brand);}

/* Shell */
.app{display:flex;min-height:100vh;}
.sidebar{width:248px;background:var(--sidebar);color:var(--sidebar-ink);position:fixed;inset:0 auto 0 0;display:flex;flex-direction:column;z-index:1040;transition:transform .25s ease;}
.sidebar .brand{display:flex;align-items:center;gap:.65rem;padding:1.25rem 1.25rem 1rem;color:#fff;text-decoration:none;font-weight:700;letter-spacing:.2px;}
.sidebar .brand img{display:block;max-width:100%;height:44px;object-fit:contain;background:#fff;padding:6px 14px;border-radius:10px;box-shadow:0 2px 8px rgba(0,0,0,.25);}
.sidebar .brand .mark{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,#6366f1,#8b5cf6);display:grid;place-items:center;font-size:1rem;}
.sidebar .nav-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:#64748b;padding:1rem 1.25rem .4rem;}
.sidebar .nav-link{display:flex;align-items:center;gap:.75rem;color:var(--sidebar-ink);padding:.6rem .9rem;margin:.1rem .75rem;border-radius:10px;font-weight:500;}
.sidebar .nav-link i{font-size:1.1rem;opacity:.85;}
.sidebar .nav-link:hover{background:rgba(255,255,255,.06);color:#fff;}
.sidebar .nav-link.active{background:var(--brand);color:#fff;box-shadow:0 6px 16px rgba(79,70,229,.35);}
.sidebar .user{margin-top:auto;padding:1rem 1.25rem;border-top:1px solid rgba(255,255,255,.08);display:flex;align-items:center;gap:.7rem;}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--brand-50);color:var(--brand);display:grid;place-items:center;font-weight:700;flex:none;}
.sidebar .user .avatar{background:rgba(255,255,255,.1);color:#fff;}
.sidebar .user small{color:#94a3b8;}
.main{flex:1;margin-left:248px;min-width:0;display:flex;flex-direction:column;}
.topbar{height:64px;background:rgba(255,255,255,.85);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:1rem;padding:0 1.75rem;position:sticky;top:0;z-index:1020;}
.topbar .crumb{color:var(--muted);font-size:.85rem;}
.topbar .crumb b{color:var(--ink);font-weight:600;}
.content{padding:1.75rem;flex:1;}
.app-footer{padding:1rem 1.75rem;color:var(--muted);font-size:.8rem;}
.sidebar-toggle{display:none;border:0;background:none;font-size:1.4rem;color:var(--ink);padding:0;}
.backdrop{display:none;}
@media (max-width:991.98px){
  .sidebar{transform:translateX(-100%);}
  body.nav-open .sidebar{transform:none;}
  body.nav-open .backdrop{display:block;position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:1030;}
  .main{margin-left:0;}
  .sidebar-toggle{display:inline-block;}
  .content,.topbar,.app-footer{padding-left:1rem;padding-right:1rem;}
}

/* Page header */
.page-head{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:flex-end;margin-bottom:1.5rem;}
.page-head h1{font-size:1.5rem;font-weight:700;margin:0;letter-spacing:-.01em;}
.page-head p{color:var(--muted);margin:.25rem 0 0;}

/* Cards */
.card{border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);background:var(--surface);}
.card-header{background:transparent;border-bottom:1px solid var(--line);padding:1rem 1.25rem;font-weight:600;display:flex;justify-content:space-between;align-items:center;}
.stat{padding:1.25rem;display:flex;flex-direction:row;text-align:left;gap:1rem;align-items:center;}
.stat .ico{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;font-size:1.3rem;flex:none;}
.stat .label{color:var(--muted);font-size:.8rem;font-weight:500;}
.stat .value{font-size:1.35rem;font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums;}
.ico-brand{background:var(--brand-50);color:var(--brand);} .ico-ok{background:var(--ok-50);color:var(--ok);}
.ico-warn{background:var(--warn-50);color:var(--warn);} .ico-bad{background:var(--bad-50);color:var(--bad);}
.quick{display:flex;align-items:center;gap:.9rem;padding:1rem 1.25rem;color:var(--ink);text-decoration:none;border-radius:var(--radius);transition:transform .15s,box-shadow .15s;}
.quick:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(15,23,42,.08);color:var(--ink);}
.quick small{color:var(--muted);display:block;}

/* Tables */
.table-modern{margin:0;}
.table-modern thead th{background:#f8fafc;color:var(--muted);font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--line);padding:.8rem 1rem;white-space:nowrap;}
.table-modern td{padding:.85rem 1rem;border-color:var(--line);vertical-align:middle;}
.table-modern tbody tr:hover{background:#fafbff;}
.table-modern tbody tr:last-child td{border-bottom:0;}
.toolbar{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;justify-content:space-between;padding:1rem 1.25rem;border-bottom:1px solid var(--line);}
.search{position:relative;max-width:320px;flex:1;min-width:200px;}
.search i{position:absolute;left:.8rem;top:50%;transform:translateY(-50%);color:var(--muted);}
.search input{padding-left:2.2rem;}
.filters .btn{font-size:.8rem;padding:.35rem .75rem;}
.filters .btn.active{background:var(--brand-50);color:var(--brand);border-color:#c7d2fe;}
.num{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap;}
.muted{color:var(--muted);}

/* Badges */
.status{display:inline-flex;align-items:center;gap:.35rem;padding:.25rem .6rem;border-radius:999px;font-size:.75rem;font-weight:600;text-transform:capitalize;}
.status::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;}
.status-paid{background:var(--ok-50);color:var(--ok);} .status-partial{background:var(--warn-50);color:var(--warn);} .status-unpaid{background:var(--bad-50);color:var(--bad);} .status-active{background:#dcfce7;color:#15803d;border:1px solid #86efac !important;} .status-inactive{background:#fee2e2;color:#b91c1c;border:1px solid #fca5a5 !important;}
button.status{font-family:inherit;line-height:1.4;cursor:pointer;transition:filter .15s;} button.status:hover{filter:brightness(.95);}
.chip{display:inline-block;padding:.2rem .55rem;border-radius:6px;background:#f1f5f9;color:var(--ink-2);font-size:.75rem;font-weight:500;text-transform:capitalize;white-space:nowrap;}

/* Buttons & forms */
.btn{border-radius:10px;font-weight:500;}
.btn-primary{--bs-btn-bg:var(--brand);--bs-btn-border-color:var(--brand);--bs-btn-hover-bg:var(--brand-600);--bs-btn-hover-border-color:var(--brand-600);--bs-btn-active-bg:var(--brand-600);--bs-btn-active-border-color:var(--brand-600);}
.btn-light{--bs-btn-bg:#fff;--bs-btn-border-color:var(--line);}
.btn-icon{width:34px;height:34px;padding:0;display:inline-grid;place-items:center;border-radius:9px;border:1px solid transparent;background:var(--brand-50);color:var(--brand);transition:background .15s,color .15s;}
.btn-icon:hover{background:var(--brand);color:#fff;border-color:transparent;}
.btn-icon[title="View"],.btn-icon[data-bs-original-title="View"]{background:#f0f9ff;color:#0284c7;}
.btn-icon[title="View"]:hover,.btn-icon[data-bs-original-title="View"]:hover{background:#0284c7;color:#fff;}
.btn-icon[title="Record payment"],.btn-icon[data-bs-original-title="Record payment"]{background:var(--ok-50);color:var(--ok);}
.btn-icon[title="Record payment"]:hover,.btn-icon[data-bs-original-title="Record payment"]:hover{background:var(--ok);color:#fff;}
.btn-icon[title="Print"],.btn-icon[data-bs-original-title="Print"]{background:var(--warn-50);color:var(--warn);}
.btn-icon[title="Print"]:hover,.btn-icon[data-bs-original-title="Print"]:hover{background:var(--warn);color:#fff;}
.btn-icon.danger{background:var(--bad-50);color:var(--bad);}
.btn-icon.danger:hover{background:var(--bad);color:#fff;border-color:transparent;}
.actions{display:flex;gap:.35rem;justify-content:flex-end;flex-wrap:nowrap;}
.form-control,.form-select,.form-control-lg,.form-control-sm,.form-select-lg,.form-select-sm,.input-group-text,.input-group>.btn{font-size:.875rem;}
.form-control,.form-select,.form-control-lg,.form-select-lg{border-radius:10px;border-color:var(--line);padding:.5rem .75rem;min-height:auto;}
.form-control:focus,.form-select:focus{border-color:#a5b4fc;box-shadow:0 0 0 .2rem rgba(79,70,229,.15);}
.form-label{font-weight:500;font-size:.85rem;color:var(--ink-2);}
.form-control[readonly]{background:#f8fafc;}

/* Modals */
.modal-content{border:0;border-radius:18px;box-shadow:0 24px 64px rgba(15,23,42,.2);}
.modal-header{border-bottom:1px solid var(--line);padding:1.1rem 1.5rem;}
.modal-title{font-weight:600;}
.modal-body{padding:1.5rem;}
.modal-footer{border-top:1px solid var(--line);padding:1rem 1.5rem;}
.section-title{font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600;margin:0 0 .75rem;}
.kv{display:flex;justify-content:space-between;padding:.4rem 0;border-bottom:1px dashed var(--line);}
.kv:last-child{border-bottom:0;}
.kv span:first-child{color:var(--muted);}

/* Invoice line items */
.items-head{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:600;}
.invoice-item-row,.edit-invoice-item-row{align-items:center;}
.totals{background:#f8fafc;border:1px solid var(--line);border-radius:12px;padding:1rem 1.25rem;max-width:340px;margin-left:auto;}
.totals .row-t{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.3rem 0;}
.totals .grand{border-top:1px dashed #cbd5e1;margin-top:.4rem;padding-top:.7rem;font-weight:700;font-size:1.1rem;color:var(--brand);}
.danger-ico{width:56px;height:56px;border-radius:50%;background:var(--bad-50);color:var(--bad);display:grid;place-items:center;font-size:1.5rem;margin:0 auto 1rem;}

/* Alerts */
.alert{border:0;border-radius:12px;display:flex;align-items:center;gap:.6rem;}
.alert-success{background:var(--ok-50);color:#065f46;} .alert-danger{background:var(--bad-50);color:#991b1b;}

/* Empty state */
.empty{text-align:center;padding:3.5rem 1rem;color:var(--muted);}
.empty i{font-size:2.5rem;color:#cbd5e1;display:block;margin-bottom:.75rem;}

/* Login */
.auth{min-height:100vh;display:grid;grid-template-columns:1.1fr 1fr;}
.auth-art{background:radial-gradient(circle at 20% 20%,#6366f1 0,transparent 45%),radial-gradient(circle at 80% 70%,#8b5cf6 0,transparent 45%),#1e1b4b;color:#fff;padding:3rem;display:flex;flex-direction:column;justify-content:space-between;}
.auth-art h2{font-size:2.2rem;font-weight:700;letter-spacing:-.02em;max-width:440px;}
.auth-art p{color:#c7d2fe;max-width:420px;}
.auth-art li{color:#e0e7ff;margin-bottom:.5rem;}
.auth-form{display:grid;place-items:center;padding:2rem;background:#fff;}
.auth-form .inner{width:100%;max-width:380px;}
@media (max-width:991.98px){.auth{grid-template-columns:1fr;}.auth-art{display:none;}}

/* Mobile bottom navigation */
.bottom-nav{display:none;}
@media (max-width:767.98px){
  .bottom-nav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:1020;background:#fff;border-top:1px solid var(--line);box-shadow:0 -4px 16px rgba(15,23,42,.06);padding-bottom:env(safe-area-inset-bottom);}
  .bottom-nav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:.5rem 0 .45rem;color:var(--muted);text-decoration:none;font-size:.7rem;font-weight:500;}
  .bottom-nav a i{font-size:1.25rem;line-height:1;}
  .bottom-nav a.active{color:var(--brand);font-weight:600;}
  .main{padding-bottom:calc(64px + env(safe-area-inset-bottom));}
  .sidebar-toggle{display:none !important;}
}

/* Searchable select (Tom Select) */
.ts-wrapper.form-select{padding:0;border:0;background:none;}
.ts-wrapper .ts-control{border-radius:10px;border-color:var(--line);padding:.5rem .75rem;font-size:.875rem;min-height:auto;}
.ts-wrapper.focus .ts-control{border-color:#a5b4fc;box-shadow:0 0 0 .2rem rgba(79,70,229,.15);}
.ts-dropdown{border-radius:10px;border-color:var(--line);font-size:.875rem;box-shadow:var(--shadow);}
.ts-dropdown .active{background:var(--brand-50);color:var(--brand);}