html[data-theme="light"]{
  --bg:#f8fafc;
  --panel:#ffffff;
  --surface:#ffffff;
  --surface-2:#f1f5f9;
  --surface-3:#e2e8f0;
  --text:#0f172a;
  --muted:#64748b;
  --accent:#0284c7;
  --accent-2:#db2777;
  --border:#cbd5e1;
  --border-strong:#94a3b8;
  --danger:#dc2626;
  --danger-soft:#fee2e2;
  --success:#16a34a;
  --success-soft:#dcfce7;
  --warning:#d97706;
  --warning-soft:#fef3c7;
  --shadow:0 4px 6px -1px rgba(0,0,0,.08),0 2px 4px -2px rgba(0,0,0,.06);
}
html[data-theme="dark"]{
  --bg:#0b1120;
  --panel:#111827;
  --surface:#151d2b;
  --surface-2:#1b2539;
  --surface-3:#27354f;
  --text:#f3f4f6;
  --muted:#9ca3af;
  --accent:#38bdf8;
  --accent-2:#f472b6;
  --border:#2a344a;
  --border-strong:#3d4b66;
  --danger:#ef4444;
  --danger-soft:#450a0a;
  --success:#22c55e;
  --success-soft:#064e3b;
  --warning:#f59e0b;
  --warning-soft:#451a03;
  --radius:.5rem;
  --radius-sm:.35rem;
  --shadow:0 4px 6px -1px rgba(0,0,0,.25),0 2px 4px -2px rgba(0,0,0,.2);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;line-height:1.5}
a{color:var(--accent);text-decoration:none;transition:color .15s ease}
a:hover{color:var(--accent-2, #7dd3fc)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Top bar */
.topbar{height:56px;background:var(--panel);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 1.25rem;position:sticky;top:0;z-index:50;gap:1rem}
.topbar .brand{display:flex;align-items:center;gap:.6rem;font-weight:800;font-size:1.1rem;color:var(--text);letter-spacing:-.01em}
.topbar .brand svg{height:28px;width:auto;display:block;border-radius:var(--radius-sm)}
.topbar .brand span{color:var(--muted);font-weight:600}
.topbar .search{flex:1;max-width:520px}
.topbar .search form{display:flex;gap:.4rem}
.topbar .search input[type="search"]{background:var(--surface);border:1px solid var(--border);color:var(--text);padding:.5rem .85rem;border-radius:var(--radius-sm);flex:1;font-size:.95rem}
.topbar .search input[type="search"]:hover{border-color:var(--border-strong)}
.topbar .search input[type="search"]:focus{border-color:var(--accent);background:var(--bg)}
.topbar .search button{background:var(--accent);color:#0f172a;border:none;padding:.5rem .9rem;border-radius:var(--radius-sm);font-weight:600;cursor:pointer;transition:background .15s ease}
.topbar .search button:hover{background:var(--accent-2, #7dd3fc)}
.topbar .user{display:flex;align-items:center;gap:1rem;font-size:.9rem;color:var(--muted)}
.topbar .user-name{font-weight:500;color:var(--text)}
.topbar .logout{color:var(--muted);font-size:.85rem;padding:.35rem .6rem;border:1px solid var(--border);border-radius:var(--radius-sm);transition:all .15s ease}
.topbar .logout:hover{background:var(--surface-2);color:var(--text);border-color:var(--border-strong)}
.topbar .nav-toggle{display:none;background:transparent;border:1px solid var(--border);color:var(--text);border-radius:var(--radius-sm);padding:.4rem .6rem;font-size:1.1rem;cursor:pointer}

/* Horizontal nav */
.hnav{background:var(--surface);border-bottom:1px solid var(--border);display:flex;gap:.1rem;padding:0 1.25rem;position:sticky;top:56px;z-index:40;overflow-x:auto}
.hnav a{color:var(--muted);padding:.6rem 1rem;border-bottom:2px solid transparent;font-size:.9rem;font-weight:500;white-space:nowrap;transition:all .15s ease}
.hnav a:hover{color:var(--text);background:var(--surface-2)}
.hnav a.active{color:var(--text);border-bottom-color:var(--accent);background:var(--surface-3)}

/* Main content */
main.content{padding:1.75rem 1.25rem;max-width:1400px;margin:0 auto}
main.content.full{max-width:none;padding:0}
h1{margin:0 0 .25rem;font-size:1.6rem;font-weight:700;letter-spacing:-.02em}
h2{font-size:1.2rem;margin:1.75rem 0 .75rem;font-weight:600}
h3{font-size:1rem;margin:0 0 .5rem;font-weight:600}
.text-muted{color:var(--muted)}

/* Stats grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:1rem;margin:1.25rem 0}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.1rem 1rem;text-decoration:none;color:var(--text);transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease;display:flex;flex-direction:column;gap:.2rem}
.card:hover{transform:translateY(-2px);border-color:var(--border-strong);box-shadow:var(--shadow)}
.card h3{margin:0;font-size:.9rem;color:var(--accent-2);font-weight:500}
.card .big{font-size:2rem;font-weight:700;margin:0;line-height:1.1;letter-spacing:-.02em}

/* Queues */
.queues{display:grid;grid-template-columns:repeat(auto-fit,minmax(420px,1fr));gap:1.25rem;margin:1.5rem 0}
.queue{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.queue header{display:flex;justify-content:space-between;align-items:center;padding:.85rem 1rem;border-bottom:1px solid var(--border);background:var(--surface-2)}
.queue header h3{margin:0;font-size:.95rem;font-weight:600}
.queue header .count{font-size:.85rem;color:var(--muted);background:var(--surface-3);padding:.15rem .5rem;border-radius:1rem}
.queue table{width:100%;border-collapse:collapse;font-size:.88rem}
.queue th,.queue td{padding:.6rem .85rem;text-align:left;border-bottom:1px solid var(--border);white-space:nowrap}
.queue th{background:var(--surface);color:var(--muted);font-weight:600;text-transform:uppercase;font-size:.75rem;letter-spacing:.03em}
.queue tbody tr:hover td{background:var(--surface-3)}
.queue tbody tr:last-child td{border-bottom:none}
.queue td a{color:var(--accent);font-weight:500}
.queue .empty{padding:1rem;color:var(--muted);font-size:.9rem}

/* Badges / status */
.badge{display:inline-block;padding:.2rem .5rem;border-radius:1rem;font-size:.75rem;font-weight:600;line-height:1}
.badge-due{background:var(--danger-soft);color:#fecaca}
.badge-past{background:var(--warning-soft);color:#fde68a}
.badge-paid{background:var(--success-soft);color:#a7f3d0}
.badge-pending{background:#1e3a8a;color:#bfdbfe}
.status{display:inline-block;padding:.2rem .5rem;border-radius:1rem;font-size:.75rem;background:var(--surface-3);color:var(--muted);font-weight:500}

/* Search panel */
.search-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.1rem;margin:1.25rem 0;box-shadow:var(--shadow)}
.search-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.9rem;align-items:end}
.search-grid label{display:block;font-size:.8rem;color:var(--muted);margin-bottom:.35rem;font-weight:500}
.search-grid input,.search-grid select{background:var(--bg);border:1px solid var(--border);color:var(--text);padding:.55rem .75rem;border-radius:var(--radius-sm);width:100%;font-size:.95rem}
.search-grid input:hover,.search-grid select:hover{border-color:var(--border-strong)}
.search-grid input:focus,.search-grid select:focus{border-color:var(--accent);background:var(--bg)}
.search-actions{display:flex;gap:.6rem;margin-top:1.1rem}

/* Data tables */
.data-table{width:100%;border-collapse:collapse;margin-top:1.25rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;font-size:.9rem;box-shadow:var(--shadow)}
.data-table th,.data-table td{padding:.7rem .95rem;text-align:left;border-bottom:1px solid var(--border)}
.data-table th{background:var(--surface-2);color:var(--muted);font-weight:600;text-transform:uppercase;font-size:.78rem;letter-spacing:.03em}
.data-table tbody tr:hover td{background:var(--surface-3)}
.data-table tbody tr:last-child td{border-bottom:none}
.data-table td a{color:var(--accent);font-weight:500}
.pager{margin-top:1.25rem;display:flex;gap:1rem;align-items:center;color:var(--muted)}

/* Detail layout */
.detail{display:grid;grid-template-columns:320px 1fr;gap:1.25rem;align-items:start}
.sidebar-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.1rem;box-shadow:var(--shadow)}
.sidebar-card h3{margin:0 0 .6rem;font-size:1rem;color:var(--accent-2)}
.sidebar-card p{margin:.35rem 0;font-size:.9rem;color:var(--text)}
.sidebar-card .muted{color:var(--muted);font-size:.85rem}
.main-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.1rem;box-shadow:var(--shadow)}
.chips{display:flex;flex-wrap:wrap;gap:.4rem;margin:.5rem 0}
.chip{background:var(--surface-3);border:1px solid var(--border);padding:.3rem .6rem;border-radius:1rem;font-size:.8rem;color:var(--muted)}
.chip-link{text-decoration:none;color:var(--text);background:var(--accent-soft,var(--surface-3));border-color:var(--accent,var(--border))}
.chip-link:hover{background:var(--accent);color:#0f172a}

/* Buttons */
.btn,.btn-sm,.btn-primary{display:inline-flex;align-items:center;gap:.3rem;background:var(--surface);color:var(--text);border:1px solid var(--border);padding:.5rem .9rem;border-radius:var(--radius-sm);text-decoration:none;cursor:pointer;font-size:.9rem;font-weight:500;transition:all .15s ease}
.btn:hover,.btn-sm:hover{background:var(--surface-3);border-color:var(--border-strong)}
.btn-primary{background:var(--accent);color:#0f172a;border:none;font-weight:600}
.btn-primary:hover{background:var(--accent-2, #7dd3fc)}
.btn-danger{background:var(--danger-soft);color:#fecaca;border-color:#7f1d1d}
.btn-sm{padding:.3rem .55rem;font-size:.8rem}

/* Forms */
form label{display:block;margin:.75rem 0 .25rem;font-size:.85rem;color:var(--muted);font-weight:500}
form input[type=text],form input[type=number],form input[type=date],form input[type=email],form input[type=password],form input[type=search],form select,form textarea{background:var(--bg);border:1px solid var(--border);color:var(--text);padding:.55rem .75rem;border-radius:var(--radius-sm);width:100%;max-width:420px;font-size:.95rem}
form input:hover,form select:hover,form textarea:hover{border-color:var(--border-strong)}
form input:focus,form select:focus,form textarea:focus{border-color:var(--accent);background:var(--bg)}
.readonly{padding:.55rem .75rem;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);max-width:420px;min-height:2rem;color:var(--muted)}
.alert{padding:.85rem 1rem;border-radius:var(--radius-sm);margin-bottom:1rem;border:1px solid transparent}
.alert-danger{background:var(--danger-soft);color:#fecaca;border-color:#7f1d1d}
.alert-success{background:var(--success-soft);color:#a7f3d0;border-color:#166534}
.empty{padding:1.1rem;color:var(--muted);font-size:.9rem}

/* Login */
.login-wrapper{display:flex;align-items:center;justify-content:center;min-height:100vh;background:var(--bg);padding:1rem}
.login-card{background:var(--surface);padding:2rem;border-radius:var(--radius);border:1px solid var(--border);width:100%;max-width:360px;box-shadow:var(--shadow)}
.login-card h1{margin:0 0 .25rem;font-size:1.6rem}
.login-card .subtitle{color:var(--muted);margin:0 0 1.5rem;font-size:.95rem}
.login-card input[type=text],.login-card input[type=password]{max-width:none;width:100%}
.login-card button{width:100%;margin-top:1.25rem}

/* Responsive */
@media (max-width:900px){
  .detail{grid-template-columns:1fr}
  .queues{grid-template-columns:1fr}
}

@media (max-width:768px){
  .topbar{padding:0 .9rem}
  .topbar .search{display:none}
  .topbar .user{display:none}
  .topbar .nav-toggle{display:block}
  .hnav{display:none;position:absolute;left:0;right:0;top:56px;background:var(--surface);border-bottom:1px solid var(--border);flex-direction:column;padding:.5rem .75rem;gap:.1rem}
  .hnav.open{display:flex}
  .hnav a{padding:.75rem .5rem;border-bottom:none;border-left:3px solid transparent}
  .hnav a.active{border-left-color:var(--accent);background:var(--surface-3)}
  main.content{padding:1.25rem .9rem}
  .grid{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:480px){
  .grid{grid-template-columns:1fr}
}

/* Inline edit icons next to section headings */
h3 a[aria-label^="Edit"]{font-size:.85em;font-weight:400;margin-left:.35rem;text-decoration:none;opacity:.7;vertical-align:middle}h3 a[aria-label^="Edit"]:hover{opacity:1;color:var(--accent)}


/* Invoice-style line-item tables */
.invoice-table th.num,
.invoice-table td.num { text-align: right; }
.invoice-table tfoot td,
.invoice-table tfoot th {
  background: var(--surface-2);
  font-weight: 500;
  text-align: right;
}
.invoice-table tfoot td.num,
.invoice-table tfoot th.num { text-align: right; }
.invoice-table tfoot tr:last-child td,
.invoice-table tfoot tr:last-child th {
  border-bottom: none;
}

.theme-toggle{background:transparent;border:1px solid var(--border);color:var(--text);border-radius:var(--radius-sm);padding:.35rem .55rem;font-size:1rem;cursor:pointer;line-height:1;transition:all .15s ease}
.theme-toggle:hover{background:var(--surface-2);border-color:var(--border-strong)}
/* Dashboard queue tables: allow horizontal scroll when content is wider than the card */
.queue {
  overflow-x: auto;
}
.queue table {
  min-width: 100%;
}
.queue th,
.queue td {
  white-space: normal;  /* allow text to wrap instead of forcing clipped columns */
}

/* Read-only masked input styling */
.readonly-input {
  background: var(--surface-3);
  color: var(--text);
  cursor: not-allowed;
  opacity: 0.85;
}