/* ── Variables ───────────────────────────────────────────── */
:root {
  --bg:           #0c0e17;
  --bg-card:      #151929;
  --bg-elevated:  #1b1f33;
  --bg-hover:     #1f2438;
  --border:       #252d47;
  --border-subtle:#1a1f34;
  --text:         #dde1f0;
  --text-muted:   #7a82a0;
  --text-dim:     #4a5270;
  --accent:       #c9a84c;
  --accent-hover: #daba62;
  --accent-dim:   rgba(201,168,76,0.12);
  --success:      #3dba7e;
  --success-dim:  rgba(61,186,126,0.12);
  --danger:       #e05c5c;
  --danger-dim:   rgba(224,92,92,0.12);
  --warning:      #e8a838;
  --warning-dim:  rgba(232,168,56,0.12);
  --radius:       6px;
  --radius-lg:    10px;
}

/* ── Base ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 13.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }
h4, h5 { font-weight: 600; letter-spacing: -0.01em; }

/* ── Navigation ──────────────────────────────────────────── */
#main-nav {
  background: #080a11;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-inner {
  display: flex;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
  height: 52px;
}

.nav-brand {
  font-weight: 700;
  font-size: 13px;
  color: var(--accent) !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-right: 2.5rem;
  text-decoration: none;
}

.nav-links { display: flex; gap: 0.25rem; }

.nav-links .nav-link {
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius);
  transition: color 0.15s, background 0.15s;
  text-decoration: none;
}

.nav-links .nav-link:hover { color: var(--text); background: var(--bg-hover); }
.nav-links .nav-link.active { color: var(--accent); background: var(--accent-dim); }

/* ── Page layout ─────────────────────────────────────────── */
.page-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

/* ── Alerts ──────────────────────────────────────────────── */
.tt-alert {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 1rem;
  border-radius: var(--radius);
  margin-bottom: 1rem;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid;
}

.tt-alert-success {
  background: var(--success-dim);
  border-color: rgba(61,186,126,0.25);
  color: var(--success);
}

.tt-alert-error {
  background: var(--danger-dim);
  border-color: rgba(224,92,92,0.25);
  color: var(--danger);
}

/* ── Cards ───────────────────────────────────────────────── */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.card-header {
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
  padding: 0.75rem 1.1rem;
  font-size: 13px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
}

.card-body { padding: 1.1rem; }

/* ── Tables ──────────────────────────────────────────────── */
.table {
  color: var(--text);
  font-size: 13px;
  border-color: var(--border-subtle);
  margin-bottom: 0;
}

.table th {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-dim);
  padding: 0.6rem 0.85rem;
  border-color: var(--border);
  background: var(--bg-elevated);
  white-space: nowrap;
}

.table td {
  padding: 0.65rem 0.85rem;
  border-color: var(--border-subtle);
  vertical-align: middle;
}

.table-hover tbody tr:hover td { background: var(--bg-hover); }
.table-light, .table-light th { background: var(--bg-elevated) !important; color: var(--text-dim) !important; }
.table-bordered, .table-bordered td, .table-bordered th { border-color: var(--border) !important; }

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
  font-size: 12.5px;
  font-weight: 500;
  border-radius: var(--radius);
  padding: 0.35rem 0.85rem;
  transition: all 0.15s;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
}

.btn-primary { background: var(--accent); border-color: var(--accent); color: #0c0e17; }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #0c0e17; }

.btn-secondary { background: var(--bg-elevated); border-color: var(--border); color: var(--text-muted); }
.btn-secondary:hover { background: var(--bg-hover); border-color: var(--border); color: var(--text); }

.btn-success { background: var(--success); border-color: var(--success); color: #0c0e17; }
.btn-warning { background: var(--warning); border-color: var(--warning); color: #0c0e17; }

.btn-outline-secondary { border-color: var(--border); color: var(--text-muted); background: transparent; }
.btn-outline-secondary:hover { background: var(--bg-elevated); border-color: var(--border); color: var(--text); }

.btn-outline-success { border-color: rgba(61,186,126,0.35); color: var(--success); background: transparent; }
.btn-outline-success:hover { background: var(--success-dim); border-color: var(--success); color: var(--success); }

.btn-outline-danger { border-color: rgba(224,92,92,0.3); color: var(--danger); background: transparent; }
.btn-outline-danger:hover { background: var(--danger-dim); border-color: var(--danger); color: var(--danger); }

.btn-outline-warning { border-color: rgba(232,168,56,0.35); color: var(--warning); background: transparent; }
.btn-outline-warning:hover { background: var(--warning-dim); border-color: var(--warning); color: var(--warning); }

/* ── Badges ──────────────────────────────────────────────── */
.badge {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 0.28em 0.6em;
  border-radius: 4px;
}

.bg-primary   { background: var(--accent-dim) !important; color: var(--accent) !important; border: 1px solid rgba(201,168,76,0.25); }
.bg-success   { background: var(--success-dim) !important; color: var(--success) !important; border: 1px solid rgba(61,186,126,0.25); }
.bg-secondary { background: var(--bg-elevated) !important; color: var(--text-muted) !important; border: 1px solid var(--border); }
.bg-warning   { background: var(--warning-dim) !important; color: var(--warning) !important; border: 1px solid rgba(232,168,56,0.25); }
.bg-danger    { background: var(--danger-dim) !important; color: var(--danger) !important; border: 1px solid rgba(224,92,92,0.25); }

/* ── Nav tabs ────────────────────────────────────────────── */
.nav-tabs {
  border-bottom: 1px solid var(--border);
  gap: 0.15rem;
}

.nav-tabs .nav-link {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-muted);
  border: none;
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 0.45rem 1rem;
  background: transparent;
}

.nav-tabs .nav-link:hover { color: var(--text); background: var(--bg-hover); }
.nav-tabs .nav-link.active { color: var(--accent); background: var(--accent-dim); border-bottom: 2px solid var(--accent); }

/* ── Forms ───────────────────────────────────────────────── */
.form-control, .form-select {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 13px;
  border-radius: var(--radius);
  padding: 0.4rem 0.75rem;
}

.form-control:focus, .form-select:focus {
  background: var(--bg-elevated);
  border-color: var(--accent);
  color: var(--text);
  box-shadow: 0 0 0 3px var(--accent-dim);
  outline: none;
}

.form-control::placeholder { color: var(--text-dim); }

.form-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.35rem;
}

.form-text { color: var(--text-dim); font-size: 11.5px; }
.form-text a { color: var(--accent); }

.form-check-input { background-color: var(--bg-elevated); border-color: var(--border); }
.form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }

/* ── Modals ──────────────────────────────────────────────── */
.modal-content {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.modal-header {
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
  padding: 1rem 1.25rem;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.modal-title { font-size: 14px; font-weight: 600; }
.modal-footer { border-top: 1px solid var(--border); padding: 0.85rem 1.25rem; }
.modal-body { padding: 1.25rem; }
.modal-backdrop.show { opacity: 0.7; }

/* ── Misc utilities ──────────────────────────────────────── */
.text-muted   { color: var(--text-muted) !important; }
.text-danger  { color: var(--danger) !important; }
.text-success { color: var(--success) !important; }
.text-warning { color: var(--warning) !important; }
.fw-semibold  { font-weight: 600; }

.bg-light { background: var(--bg-elevated) !important; color: var(--text) !important; }
.bg-warning.bg-opacity-10 { background: var(--warning-dim) !important; }
.border-warning { border-color: rgba(232,168,56,0.3) !important; }

hr { border-color: var(--border); opacity: 1; }

/* ── Invoice (light, print-ready) ───────────────────────── */
.invoice-page {
  background: #fff;
  color: #1a1a2e;
  border-radius: var(--radius-lg);
  padding: 3rem;
  max-width: 800px;
  margin: 0 auto;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.05), 0 8px 48px rgba(0,0,0,0.5);
}

.invoice-page .text-muted  { color: #6c757d !important; }
.invoice-page .table        { color: #1a1a2e; border-color: #dee2e6; }
.invoice-page .table th     { background: #f8f9fa !important; color: #6c757d !important; border-color: #dee2e6 !important; }
.invoice-page .table td     { border-color: #dee2e6 !important; }
.invoice-page .bg-light     { background: #f8f9fa !important; color: #1a1a2e !important; }

.letter-spacing { letter-spacing: 0.06em; }

/* ── Print ───────────────────────────────────────────────── */
@media print {
  .no-print, #main-nav, .tt-alert { display: none !important; }
  body { background: white; color: #1a1a2e; }
  .page-content { padding: 0; max-width: 100%; }
  .invoice-page { box-shadow: none; padding: 0; border-radius: 0; }
  @page { margin: 2cm; }
}