/* Shared foundation loaded by BOTH shells (index.html + app.html) — design
   tokens, reset, buttons, inputs. Keep page-specific rules out of here:
   login.css holds the auth gate, app.css everything behind /app. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* The `hidden` attribute must always win. The browser's own `[hidden]
   { display: none }` lives in the user-agent stylesheet, which ANY author
   rule that sets `display` overrides — so `.btn { display: inline-flex }` and
   `.lead-filter-chip { display: inline-flex }` silently un-hid every button and
   chip the JS had hidden with `el.hidden = true` (the French batch bar showed
   "✨ Qualify Leads" and "🗑️ Delete" the moment a row was ticked). This rule
   restores the attribute's meaning for every element, in both shells. */
[hidden] { display: none !important; }
:root {
  --primary: #225C5C; --primary-dark: #1a4a4a; --primary-light: #6E99A3;
  --coral: #ED6D5B; --peri: #857FBB;
  --green: #148A03; --amber: #f59e0b; --red: #FF2406;
  --sidebar-bg: #225C5C; --sidebar-w: 240px;
  --bg: #F8F6F2; --card: #ffffff; --text: #3C3C3B; --muted: #666666;
  --border: #D8DEDB; --ivory: #EFE7DA; --vanilla: #D2C1A8;
  --radius: 10px;
}
body { font-family: 'tt-commons-pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; }

/* BUTTONS + INPUTS */
.btn { padding: 9px 18px; border-radius: 8px; border: none; font-size: 14px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: all .15s; }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); }
.btn-green { background: var(--coral); color: #fff; }
.btn-green:hover { background: #d95a49; }
.btn-red { background: var(--red); color: #fff; }
.btn-red:hover { background: #dc2626; }
.btn-outline { background: transparent; color: var(--primary); border: 1px solid var(--primary); }
.btn-outline:hover { background: var(--primary); color: #fff; }
.btn-sm { padding: 6px 12px; font-size: 13px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.input, select, textarea { padding: 11px 14px; border: 1.5px solid var(--border); border-radius: 8px; font-size: 14px; font-family: inherit; width: 100%; background: #fff; color: var(--text); transition: border-color .2s, box-shadow .2s; }
select { appearance: none; -webkit-appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 12px center; padding-right: 36px; cursor: pointer; }
select:hover { border-color: var(--primary-light); }
.input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(34,92,92,.12); }
textarea { resize: vertical; min-height: 80px; }

.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 5px; }