:root{
  --bg:#0b1220;
  --panel:#0f1a2e;
  --card:#ffffff;
  --muted:#6b7280;
  --text:#0f172a;
  --border:#e5e7eb;
  --brand:#2563eb;
  --brand2:#1d4ed8;
  --danger:#b00020;
  --shadow: 0 10px 30px rgba(2,6,23,.08);
  --radius:14px;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
*{ box-sizing:border-box; }
body{ margin:0; background:#f6f7fb; color:var(--text); }
a{ color:var(--brand); text-decoration:none; }
a:hover{ text-decoration:underline; }

.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px;
  background:linear-gradient(90deg, var(--bg), #111b33 55%, var(--bg));
  color:#fff;
  position:sticky; top:0; z-index:10;
  box-shadow: 0 6px 16px rgba(2,6,23,.20);
}
.brand{
  display:flex; align-items:center; gap:10px; font-weight:700;
}
.brand .dot{
  width:10px; height:10px; border-radius:999px; background:var(--brand);
  box-shadow:0 0 0 6px rgba(37,99,235,.18);
}
.nav a{
  color:#c7d2fe; margin-left:12px; font-weight:600; font-size:13px;
  padding:8px 10px; border-radius:999px;
}
.nav a:hover{ background:rgba(255,255,255,.08); text-decoration:none; }

.container{ max-width: 1200px; margin: 16px auto; padding: 0 16px 26px; }

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding:18px;
  box-shadow: var(--shadow);
}

.login-wrap{ max-width:420px; margin: 80px auto; }
h1{ margin:0 0 10px; font-size:26px; }
h2{ margin:0 0 12px; font-size:22px; }
h3{ margin:18px 0 10px; font-size:16px; }

label{ display:block; font-size:12px; color:#334155; margin:0 0 6px; font-weight:650; }
input, select, textarea{
  width:100%;
  padding:11px 12px;
  border:1px solid var(--border);
  border-radius: 12px;
  background:#fff;
  outline:none;
}
input:focus, select:focus, textarea:focus{
  border-color: rgba(37,99,235,.55);
  box-shadow: 0 0 0 4px rgba(37,99,235,.12);
}
textarea{ resize:vertical; }

button{
  padding:10px 14px;
  border:0;
  background:var(--brand);
  color:#fff;
  border-radius: 12px;
  cursor:pointer;
  font-weight:700;
}
button:hover{ background:var(--brand2); }
button.secondary{ background:#334155; }
button.secondary:hover{ background:#1f2937; }
button.danger{ background:var(--danger); }
button.danger:hover{ filter:brightness(.95); }

.muted{ color:var(--muted); font-size:12px; }
.error{ color:var(--danger); font-weight:650; }

table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius: var(--radius);
  background:#fff;
  box-shadow: var(--shadow);
}
th, td{ padding:11px 12px; border-bottom:1px solid #f1f5f9; text-align:left; vertical-align:top; }
th{ background:#f8fafc; font-size:12px; color:#475569; font-weight:800; }
tr:last-child td{ border-bottom:0; }
.actions a{ margin-right:10px; font-weight:650; }
.row{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.row3{ display:grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }

.badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px; border-radius:999px;
  font-size:12px; font-weight:800;
  background:#eef2ff; color:#3730a3;
}
.badge.paid{ background:#dcfce7; color:#166534; }
.badge.overdue{ background:#fee2e2; color:#991b1b; }
.badge.issued{ background:#e0f2fe; color:#075985; }
.badge.draft{ background:#fef3c7; color:#92400e; }

.toolbar{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin: 10px 0 14px; }

.split{
  display:grid;
  grid-template-columns: 320px 1fr;
  gap: 14px;
  align-items:start;
}
.sidebar{
  background: #fff;
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.sidebar .head{
  padding:14px 14px 10px;
  border-bottom:1px solid #f1f5f9;
}
.sidebar .head .title{ font-weight:900; }
.sidebar .head .sub{ color:var(--muted); font-size:12px; margin-top:3px; }
.sidebar .filters{
  display:flex; gap:8px; flex-wrap:wrap; margin-top:10px;
}
.pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border-radius:999px;
  background:#f1f5f9; color:#0f172a; font-weight:800; font-size:12px;
  border:1px solid #e2e8f0;
}
.pill.active{ background:#e0e7ff; border-color:#c7d2fe; }
.sidebar .list{ max-height: calc(100vh - 210px); overflow:auto; }
.inv-row{
  display:flex; justify-content:space-between; gap:10px;
  padding:12px 14px;
  border-bottom:1px solid #f1f5f9;
}
.inv-row:hover{ background:#f8fafc; }
.inv-row.active{ background:#eef2ff; }
.inv-row .left{ min-width:0; }
.inv-row .num{ font-weight:900; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.inv-row .client{ color:#475569; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.inv-row .amt{ font-weight:900; font-size:13px; }
.inv-row .meta{ display:flex; flex-direction:column; align-items:flex-end; gap:4px; }

.search{
  display:flex; gap:8px; margin-top:10px;
}
.search input{ margin:0; }


.subnav{background:#0b3a6b;color:#fff;padding:8px 16px;display:flex;gap:14px;align-items:center;}
.subnav a{color:#dbeafe;text-decoration:none;font-weight:600;font-size:14px;}
.subnav a:hover{color:#fff;text-decoration:underline;}