/* ─────────────────────────────────────────────────────────────
   Phase 4 — Surface alignment pass
   Tweaks existing surfaces to consume the new --le-* tokens so
   the whole app starts feeling like the V2 topbar. No HTML changes,
   only re-skinning existing class selectors.
   ───────────────────────────────────────────────────────────── */

/* ===== Login / Auth screen =================================== */
#auth-screen {
  background: var(--le-bg) !important;
}
.auth-card {
  background: var(--le-surface) !important;
  border: 1px solid var(--le-border) !important;
  box-shadow: 0 18px 50px rgba(0,0,0,0.5), 0 2px 0 rgba(255,255,255,0.02) inset !important;
}
.auth-card h2 { color: var(--le-text) !important; }
.auth-sub     { color: var(--le-text-dim) !important; }
.auth-error   { color: var(--le-danger) !important; }

/* OAuth buttons — soft surface with cyan hover halo */
.oauth-btn {
  background: var(--le-surface-2) !important;
  border: 1px solid var(--le-border) !important;
  color: var(--le-text) !important;
  transition: background .12s, border-color .12s !important;
}
.oauth-btn:hover {
  background: var(--le-surface-3) !important;
  border-color: var(--le-border-hover) !important;
}

/* Auth-screen ambient halo — keep but retint cyan */
#auth-screen::after {
  background: radial-gradient(circle, var(--le-cyan-glow), transparent 70%) !important;
}

/* ===== Overview tab — stat cards ============================= */
.stat-card {
  background: var(--le-surface) !important;
  border: 1px solid var(--le-border-soft) !important;
  border-radius: 12px !important;
}
.stat-card .stat-label { color: var(--le-text-dim) !important; }
.stat-card .stat-value { color: var(--le-text) !important; }

/* ===== Generic badges / status pills ========================= */
.badge {
  background: var(--le-surface-3) !important;
  color: var(--le-text-muted) !important;
  border: 1px solid var(--le-border) !important;
  border-radius: 9px !important;
  font-family: var(--le-font-mono) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding: 0 6px !important;
}
.badge-success, .badge-active, .badge-paid, .badge-approved {
  background: rgba(52,211,153,0.12) !important;
  color: var(--le-success) !important;
  border-color: rgba(52,211,153,0.3) !important;
}
.badge-warn, .badge-proceed, .badge-pending {
  background: var(--le-cyan-tint) !important;
  color: var(--le-cyan) !important;
  border-color: rgba(63,182,232,0.3) !important;
}
.badge-danger, .badge-overdue {
  background: rgba(248,113,113,0.12) !important;
  color: var(--le-danger) !important;
  border-color: rgba(248,113,113,0.3) !important;
}
.badge-draft, .badge-complete {
  background: var(--le-surface-2) !important;
  color: var(--le-text-muted) !important;
}

/* ===== Cards generally ======================================= */
.card, .data-card, .info-card {
  background: var(--le-surface) !important;
  border: 1px solid var(--le-border-soft) !important;
  border-radius: 12px !important;
}

/* ===== Action buttons ======================================== */
.action-btn {
  background: linear-gradient(180deg, var(--le-cyan-hi), var(--le-cyan)) !important;
  color: #061224 !important;
  border: 1px solid var(--le-cyan-low) !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 1px 8px var(--le-cyan-glow) !important;
  transition: filter .12s, transform .06s !important;
}
.action-btn:hover { filter: brightness(1.08) !important; }
.action-btn:active { transform: translateY(1px) !important; }

.small-btn {
  background: var(--le-surface-2) !important;
  color: var(--le-text) !important;
  border: 1px solid var(--le-border) !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  font-family: var(--le-font-sans) !important;
  transition: background .12s, border-color .12s !important;
}
.small-btn:hover {
  background: var(--le-surface-3) !important;
  border-color: var(--le-border-hover) !important;
}

/* ===== Job detail overlay ==================================== */
.overlay {
  background: rgba(5,8,17,0.65) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.overlay-content,
.job-detail-body,
.edit-form-card {
  background: var(--le-surface) !important;
  border: 1px solid var(--le-border) !important;
  border-radius: 12px !important;
  color: var(--le-text) !important;
}
.edit-close-btn {
  color: var(--le-text-muted) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  transition: background .12s, color .12s !important;
}
.edit-close-btn:hover {
  background: var(--le-surface-2) !important;
  color: var(--le-text) !important;
}

/* ===== Inputs / form fields ================================== */
input[type="text"], input[type="number"], input[type="email"], input[type="date"], input[type="tel"], input[type="password"],
select, textarea {
  background: var(--le-surface) !important;
  border: 1px solid var(--le-border) !important;
  color: var(--le-text) !important;
  border-radius: 8px !important;
  font-family: var(--le-font-sans) !important;
  transition: border-color .12s, background .12s !important;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--le-cyan) !important;
  outline: none !important;
}
input::placeholder, textarea::placeholder {
  color: var(--le-text-dim) !important;
}
label {
  color: var(--le-text-muted) !important;
}

/* ===== Tables ================================================= */
table {
  color: var(--le-text);
}
table th {
  background: var(--le-surface-2) !important;
  color: var(--le-text-muted) !important;
  font-family: var(--le-font-sans) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  border-bottom: 1px solid var(--le-border) !important;
}
table td {
  border-bottom: 1px solid var(--le-border-soft) !important;
  color: var(--le-text) !important;
}
table tr:hover td {
  background: var(--le-surface-2) !important;
}

/* ===== Job IDs in mono ====================================== */
.job-id, .quote-id, .po-id, .invoice-id {
  font-family: var(--le-font-mono) !important;
  color: var(--le-text-dim) !important;
  font-size: 11px !important;
}

/* ===== Money columns mono =================================== */
.amount, .money, .cost, .total {
  font-family: var(--le-font-mono) !important;
  font-weight: 600 !important;
  color: var(--le-text) !important;
}

/* ===== Empty states ========================================== */
.empty-state, .no-results {
  color: var(--le-text-dim) !important;
  font-size: 13px !important;
  text-align: center !important;
  padding: 40px 16px !important;
}