:root{
  --bg:#0a0a0a; --fg:#ffffff; --muted:#bdbdbd; --accent:#30C9F6; --border:#2a2a2a;
  --card:#111; --radius:16px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:Arial,system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',sans-serif}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1100px;margin:24px auto;padding:16px}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:20px;box-shadow:0 0 0 1px #000}
h1,h2{margin:0 0 16px 0}
.actions{display:flex;gap:8px;flex-wrap:wrap}

/* Buttons */
.btn{display:inline-block;padding:10px 14px;border-radius:12px;border:1px solid var(--fg);color:var(--fg);background:transparent;font-weight:bold}
.btn:hover{background:var(--fg);color:var(--bg)}
.btn-danger{border-color:#ff5a5a;color:#ff5a5a}
.btn-danger:hover{background:#ff5a5a;color:#000}

/* Inputs (password matches username) */
input[type="text"], input[type="email"], input[type="password"], textarea, select{
  width:100%;padding:10px;border-radius:10px;border:1px solid var(--border);background:#0f0f0f;color:var(--fg)
}

.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:12px}
.col-6{grid-column: span 6}
.col-4{grid-column: span 4}
.col-3{grid-column: span 3}
.col-12{grid-column: span 12}
label{display:block;margin-bottom:6px;color:var(--muted);font-size:12px;letter-spacing:.02em}

.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:10px;border-bottom:1px solid var(--border);text-align:left}
.table th:last-child,.table td:last-child{text-align:right}
.searchbar{margin-bottom:12px}

@media (max-width:760px){
  .grid{grid-template-columns:repeat(6,1fr)}
  .col-6,.col-4,.col-3{grid-column: span 6}
}

/* Print */
@media print{
  .no-print{display:none !important}
  body{background:#fff;color:#000}
  .card{border:none;box-shadow:none}
}

/* Keep white logo visible on dark just in case */
.logo-white-outline img{ filter: drop-shadow(0 0 1px #000) drop-shadow(0 0 2px #000); }

/* Light fields for create/edit forms (white inputs on dark page) */
.light-fields input[type="text"],
.light-fields input[type="email"],
.light-fields input[type="password"],
.light-fields input[type="tel"],
.light-fields input[type="search"],
.light-fields textarea,
.light-fields select {
  background: #ffffff !important;
  color: #000000 !important;
  border: 1px solid #d0d0d0 !important;
  border-radius: 10px;
  caret-color: #000;
}

.light-fields input::placeholder,
.light-fields textarea::placeholder {
  color: #666;
}

.light-fields input:focus,
.light-fields textarea:focus,
.light-fields select:focus {
  outline: 2px solid #30C9F6;            /* or your accent color */
  box-shadow: 0 0 0 3px rgba(48,201,246,.25);
}

/* Light read-only panel for the view page */
.light-view .card,
.light-view .panel,
.light-view .box {
  background:#fff !important;
  color:#000 !important;
  border:1px solid #d0d0d0;
  border-radius:10px;
}

/* Tables inside view */
.light-view .table th,
.light-view .table td {
  background:#fff !important;
  color:#000 !important;
}

/* Account Notes box (read-only) */
.light-view .note-box {
  background:#fff !important;
  color:#000 !important;
  border:1px solid #d0d0d0;
  border-radius:10px;
  padding:10px;
  white-space:pre-wrap;  /* keeps line breaks */
}
/* --- Invoice "document" look --- */
.doc-wrap{
  display:flex;
  justify-content:center;
  padding:8px;
}
.doc{
  background:#fff !important;
  color:#000 !important;
  width:816px;              /* ~ Letter width */
  max-width:100%;
  padding:24px 28px;
  border:1px solid #e5e5e5;
  border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.doc h1,.doc h2,.doc h3{ color:#000; margin:0 0 8px }
.doc .muted{ color:#555 }
.doc .split{ display:flex; justify-content:space-between; gap:12px; align-items:flex-start }
.doc .block{ margin:10px 0 }
.doc .kvs{ font-size:14px; line-height:1.5 }
.doc .kvs div{ margin:2px 0 }

.doc table.table{
  margin-top:10px;
  border:1px solid #d9d9d9;
}
.doc table.table th, .doc table.table td{
  color:#000;
  background:#fff;
  border-color:#d9d9d9;
}
.doc .totals{
  max-width:340px;
  margin-left:auto;
}

@media print{
  .no-print{ display:none !important }
  body{ background:#fff; color:#000 }
  .doc{ width:auto; max-width:none; box-shadow:none; border:none; border-radius:0; padding:0 }
}