/* ==========================================================================
   Planifix — styles partagés entre les 6 pages de l'app.
   Source unique pour les jetons de couleur, le reset, et l'en-tête/nav —
   avant ce fichier, chaque page dupliquait ces règles dans son propre
   <style>, avec un vrai risque de dérive (constaté : hauteurs de boutons,
   padding, contenu d'en-tête différents d'une page à l'autre).
   Le CSS spécifique à chaque page reste dans son propre <style>.
   ========================================================================== */

:root {
  --bg: #eaf2fa;
  --surface: #ffffff;
  --surface-2: #ffffff;
  --surface-3: #f3f7fb;
  --border: #cddfec;
  --border-strong: #a3c1d8;
  --text: #0f2436;
  --text-2: #3d5b73;
  --text-3: #6d8ba0;
  --primary: #1560bd;
  --primary-dark: #0d4589;
  --primary-soft: #dde9f9;
  --primary-soft-text: #0d4589;
  --accent: #e8590c;
  --accent-soft: #fde1cb;
  --accent-ink: #8a3305;
  --success: #0ca678;
  --success-soft: #d3f3e6;
  --warning: #d9930f;
  --warning-soft: #faecd0;
  --danger: #dc3b2c;
  --danger-soft: #fbe1dd;
  --header-a: #0a1826;
  --header-b: #132a3d;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-pill: 999px;
  --sh-sm: 0 1px 2px rgba(15,36,54,.06);
  --sh-md: 0 8px 20px -6px rgba(15,36,54,.16);
  --sh-lg: 0 24px 48px -16px rgba(15,36,54,.3);
  --ctrl-h: 38px;
  --ctrl-h-sm: 30px;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Consolas, monospace;
  --sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: var(--sans);
  background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 99px; }
::-webkit-scrollbar-track { background: transparent; }

/* ---- Coquille d'app : sidebar + contenu (identique sur les 6 pages) ----
   Pattern SaaS standard (Linear/Notion/Vercel...) plutôt que le bandeau
   horizontal chargé qui existait avant — la sidebar reste fixe, le
   contenu de page défile seul. */
.app-shell { display: flex; min-height: 100vh; align-items: stretch; }

.sidebar-nav {
  width: 226px; flex-shrink: 0; position: sticky; top: 0; height: 100vh; overflow-y: auto;
  background: linear-gradient(180deg, var(--header-a), var(--header-b));
  color: #b7c6d6; display: flex; flex-direction: column; padding: 16px 10px;
}
.sidebar-brand {
  display: flex; align-items: center; gap: 9px; text-decoration: none; color: #fff;
  padding: 8px 8px 16px; margin-bottom: 4px; border-bottom: 1px solid rgba(255,255,255,.09);
}
.sidebar-brand .mark { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--accent); position: relative; flex-shrink: 0; }
.sidebar-brand .mark::after { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: var(--accent); }
.sidebar-brand .wordmark { font-family: var(--mono); font-weight: 700; font-size: 1rem; letter-spacing: -0.01em; }

.sidebar-section-label {
  font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: #6f89a3; padding: 16px 10px 6px;
}
.sidebar-links { display: flex; flex-direction: column; gap: 1px; }
.nav-item {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-sm);
  font-size: 0.82rem; font-weight: 600; color: #b7c6d6; text-decoration: none; transition: background .12s, color .12s;
}
.nav-item .nav-icon { font-size: 0.95rem; flex-shrink: 0; width: 18px; text-align: center; line-height: 1; }
.nav-item:hover { background: rgba(255,255,255,.07); color: #fff; }
.nav-item.active { background: var(--primary); color: #fff; box-shadow: var(--sh-sm); }
.nav-item.external { color: #8fa4b8; font-weight: 500; }
.nav-item.external:hover { color: #dce6f0; }
.nav-item.external .ext-arrow { margin-left: auto; font-size: 0.68rem; opacity: .6; }

.sidebar-footer { margin-top: auto; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.09); }

.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.page-head {
  display: flex; align-items: center; gap: 12px; padding: 16px 28px;
  background: var(--surface); border-bottom: 1px solid var(--border); flex-wrap: wrap; row-gap: 4px;
}
.page-head-icon {
  width: 34px; height: 34px; border-radius: var(--r-md); background: var(--primary-soft); color: var(--primary);
  display: flex; align-items: center; justify-content: center; font-size: 1.05rem; flex-shrink: 0;
}
.page-head h1 { font-size: 1.02rem; font-weight: 700; color: var(--text); line-height: 1.3; }
.page-head .subtitle { font-size: 0.76rem; color: var(--text-3); margin-top: 1px; }

/* ---- Boutons (identiques sur les 6 pages) ---- */
.btn {
  height: var(--ctrl-h); box-sizing: border-box;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-2);
  border-radius: var(--r-sm); padding: 0 16px; font-size: 0.8rem; font-weight: 600;
  cursor: pointer; transition: all .13s; display: inline-flex; align-items: center; gap: 6px;
  text-decoration: none;
}
.btn:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .4; cursor: default; }
.btn.primary { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: var(--sh-sm); }
.btn.primary:hover:not(:disabled) { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; }
.btn.accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.accent:hover:not(:disabled) { background: var(--accent-ink); border-color: var(--accent-ink); color: #fff; }
.btn.danger { border-color: #f3c6c6; background: var(--danger-soft); color: var(--danger); }
.btn.danger:hover:not(:disabled) { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn.ghost { background: transparent; }
.btn.small { height: var(--ctrl-h-sm); padding: 0 11px; font-size: 0.72rem; border-radius: 7px; }

/* ---- Phase 4 multi-tenant : sélecteur d'équipe, bandeau config, user ---- */
.sidebar-team {
  padding: 8px 14px 16px;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,.09);
}
.sidebar-links-primary { margin-top: 2px; }
.sidebar-team select {
  width: 100%; height: var(--ctrl-h-sm); padding: 0 8px; font-family: var(--sans);
  font-size: 0.8rem; color: #fff; background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16); border-radius: var(--r-sm); cursor: pointer;
}
.sidebar-team select option { color: var(--text); }
.sidebar-team-name { color: rgba(255,255,255,.85); font-size: 0.82rem; font-weight: 600; }
.sidebar-user {
  font-size: 0.68rem; color: rgba(255,255,255,.5); padding: 0 6px 8px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.config-banner {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  margin: 0 0 16px; padding: 10px 16px; border-radius: var(--r-sm);
  background: var(--warning-soft); color: var(--warning);
  font-size: 0.85rem; font-weight: 500;
}
.config-banner a { color: var(--warning); font-weight: 700; text-decoration: none; white-space: nowrap; }

/* État "configuration requise" (page qui ne peut rien afficher sans config équipe) */
.cfg-needed {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 10px; max-width: 420px; margin: 64px auto; padding: 40px 32px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--sh-sm);
}
.cfg-needed .cfg-icon { font-size: 2rem; }
.cfg-needed h2 { font-size: 1.05rem; color: var(--text); }
.cfg-needed p { font-size: 0.88rem; color: var(--text-2); line-height: 1.5; }
.cfg-needed .btn { margin-top: 6px; }