/* CRM Ads — habillage 2026 aux couleurs du site (le menu reste en bas, comme demandé).
   Chargé après les styles intégrés de crm-ads.html : seules les couleurs, la typographie et les surfaces changent. */
@font-face { font-family: "Manrope"; src: url("/assets/public/manrope-latin.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }

:root {
  --bg: #05070d;
  --bg2: #0b1220;
  --bg3: #111a2c;
  --border: rgba(255,255,255,.08);
  --border2: rgba(255,255,255,.15);
  --text: #f1f5f9;
  --muted: #94a3b8;
  --muted2: #64748b;
  --orange: #ff6a2e;
  --orange-s: rgba(255,106,46,.14);
  --blue: #22d3ee;
  --blue-s: rgba(34,211,238,.12);
  --r: 18px;
  --r-sm: 11px;
  --display: "Manrope", system-ui, sans-serif;
}

body {
  font-family: var(--display);
  background:
    radial-gradient(900px 500px at 0% -10%, rgba(255,106,46,.12), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(34,211,238,.08), transparent 60%),
    var(--bg);
}
button, input, select, textarea { font-family: inherit; }

/* Écran de vérification */
#authGate { background: var(--bg); }
.gate-logo-wrap { width: 64px; height: 64px; border-radius: 18px; background: #0b1220 url("/assets/logo.png") center / 46px no-repeat; border: 1px solid var(--border2); font-size: 0; box-shadow: 0 0 60px -10px rgba(255,106,46,.6); }

/* Barre supérieure */
.topbar { height: 60px; background: rgba(11,18,32,.82); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); border-bottom: 1px solid var(--border); }
.topbar-brand { font-weight: 800; font-size: .95rem; letter-spacing: .01em; }
.brand-icon { width: 34px; height: 34px; border-radius: 10px; background: #0b1220 url("/assets/logo.png") center / 26px no-repeat; border: 1px solid var(--border2); font-size: 0; box-shadow: none; }
.topbar-chip { background: rgba(255,106,46,.14); color: #ff9a5e; border: 1px solid rgba(255,106,46,.35); border-radius: 99px; font-weight: 700; letter-spacing: .08em; }
.topbar-select, .t-select, .t-input { background: rgba(255,255,255,.05); border: 1px solid var(--border2); border-radius: var(--r-sm); color: var(--text); }
.topbar-select:focus, .t-select:focus, .t-input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(34,211,238,.15); outline: 0; }
.topbar-select option, .t-select option { background: #0b1220; }
.t-avatar { background: linear-gradient(135deg, var(--orange), #ff9a5e); color: #05070d; font-weight: 800; }
.t-role { color: #67e8f9; }
.btn-logout { border-radius: var(--r-sm); }
.btn-logout:hover { border-color: rgba(239,68,68,.45); color: #fecaca; }

/* Contenu */
.content { padding-top: 28px; }
.page-title { font-weight: 800; letter-spacing: -.02em; }
.page-sub { color: var(--muted); }

/* Menu du bas : verre sombre, onglet actif lumineux */
.bottom-nav { height: 70px; background: rgba(11,18,32,.88); border-top: 1px solid var(--border); box-shadow: 0 -20px 50px -20px rgba(0,0,0,.8); }
.nav-tab { border-radius: 14px; color: var(--muted); transition: color .2s, background .2s; }
.nav-tab:hover { color: var(--text); background: rgba(255,255,255,.04); }
.nav-tab-icon { display: grid; place-items: center; width: 34px; height: 30px; border-radius: 10px; font-size: 0; transition: background .25s, color .25s, box-shadow .25s; }
.nav-tab-icon svg { width: 20px; height: 20px; }
.nav-tab.active { color: #fff; }
.nav-tab.active .nav-tab-icon { background: linear-gradient(135deg, var(--orange), #ff9a5e); color: #05070d; box-shadow: 0 8px 22px -8px rgba(255,106,46,.85); transform: none; }
.nav-tab.active::before { background: var(--orange); box-shadow: 0 0 12px var(--orange); }
.nav-tab-label { font-weight: 700; letter-spacing: .01em; }
.nav-badge { background: var(--orange); color: #05070d; font-weight: 800; }

/* Boutons */
.btn { border-radius: var(--r-sm); font-weight: 700; }
.btn-primary { color: #05070d; background: linear-gradient(110deg, var(--orange), #ff9a5e 55%, var(--orange)); background-size: 200% 100%; border: 0; box-shadow: 0 10px 26px -10px rgba(255,106,46,.8); }
.btn-primary:hover { background-position: 100% 0; color: #05070d; }
.btn-ghost { background: rgba(255,255,255,.05); border: 1px solid var(--border2); color: var(--text); }
.btn-ghost:hover { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.3); }

/* Cartes et indicateurs */
.card, .kpi, .finance-kpi, .chart-shell, .upcoming-shell, .calendar-shell { background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018)); border: 1px solid var(--border); border-radius: var(--r); box-shadow: 0 30px 70px -45px rgba(0,0,0,.9); }
.card-head { border-bottom-color: var(--border); }
.card-title { font-weight: 800; letter-spacing: -.01em; }
.hero-card { background: linear-gradient(160deg, rgba(255,255,255,.075), rgba(255,255,255,.02)); border: 1px solid var(--border); border-radius: var(--r); }
.hero-card:hover { border-color: rgba(255,106,46,.45); box-shadow: 0 30px 70px -40px rgba(255,106,46,.6); }
.hero-val { font-weight: 800; }
.hero-label, .kpi-lab, .finance-kpi-label { letter-spacing: .06em; }

/* Tableaux */
th { color: var(--muted); letter-spacing: .08em; background: rgba(255,255,255,.03); }
tbody tr:hover td { background: rgba(255,255,255,.035); }

/* Pipeline (kanban) */
.k-col { background: rgba(255,255,255,.03); border: 1px solid var(--border); border-radius: var(--r); }
.k-col.drag-over { border-color: rgba(255,106,46,.6); background: rgba(255,106,46,.06); }
.k-card { background: #0b1220; border: 1px solid var(--border); border-radius: 14px; }
.k-card:hover { border-color: rgba(255,106,46,.45); box-shadow: 0 16px 40px -24px rgba(255,106,46,.7); }

/* Calendrier */
.calendar-day { background: rgba(255,255,255,.02); }
.calendar-day.is-today { box-shadow: inset 0 0 0 1px var(--blue); }
.calendar-day.is-selected { box-shadow: inset 0 0 0 2px var(--orange); background: rgba(255,106,46,.06); }

/* Fenêtres */
.overlay { background: rgba(5,7,13,.72); backdrop-filter: blur(6px); }
.modal { background: #0b1220; border: 1px solid var(--border2); border-radius: 22px; box-shadow: 0 40px 120px -30px rgba(0,0,0,.9); }

/* Icônes au trait (à la place des emoji) */
.hero-icon, .kpi-sec-ico { display: grid; place-items: center; font-size: 0; }
.hero-icon svg, .kpi-sec-ico svg { width: 18px; height: 18px; }
.hero-icon { color: var(--orange); }
.kpi-sec-ico { color: var(--blue); }