/* Outfit — Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600&display=swap');

/* =============================================================
   SUIVI SÉANCES — style.css
   Modifiez les variables :root pour personnaliser couleurs et typo
   ============================================================= */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Couleurs */
  --bg:         #eef0f5;
  --surface:    #ffffff;
  --surface2:   #f2f4f8;
  --border:     rgba(0,0,0,.10);
  --border2:    rgba(0,0,0,.18);
  --text:       #1a1a1a;
  --text2:      #555;
  --text3:      #999;
  --accent:     #2d5be3;
  --accent-bg:  #eef2fd;
  --accent-text:#1a3a9e;
  --green-bg:   #edf7ed;
  --green-text: #1a6b1a;
  --orange:     #d97706;
  --orange-bg:  #fef3c7;
  --orange-text:#92400e;
  --danger:     #c0392b;
  --danger-bg:  #fdf0ee;

  /* Typographie */
  --font: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Géométrie */
  --radius:    8px;
  --radius-lg: 12px;
  --sidebar-w: 220px;
}

html, body { height: 100%; }
body { font-family: var(--font); font-size: 14px; background: var(--bg); color: var(--text); overflow: hidden; }

/* ── LOGIN ─────────────────────────────────────────────────── */
#loginScreen { display:flex; align-items:center; justify-content:center; height:100vh; }
.login-card { background:var(--surface); border:0.5px solid var(--border2); border-radius:var(--radius-lg); padding:36px 32px; width:min(340px,90vw); }
.login-card h1 { font-size:18px; font-weight:500; margin-bottom:6px; }
.login-card p  { font-size:13px; color:var(--text2); margin-bottom:24px; }
.login-card label { font-size:12px; color:var(--text2); font-weight:500; text-transform:uppercase; letter-spacing:.04em; display:block; margin-bottom:6px; }
.login-card input[type=password] { width:100%; padding:9px 12px; border:0.5px solid var(--border2); border-radius:var(--radius); font-size:14px; background:var(--surface); color:var(--text); margin-bottom:14px; outline:none; }
.login-card input[type=password]:focus { border-color:var(--accent); }
.login-error { font-size:13px; color:var(--danger); margin-bottom:12px; display:none; }
.btn-login { width:100%; padding:10px; background:var(--text); color:var(--surface); border:none; border-radius:var(--radius); font-size:14px; cursor:pointer; font-weight:500; }

/* ── LAYOUT ────────────────────────────────────────────────── */
#app { display:none; height:100vh; }
.app-layout { display:flex; height:100%; }

/* ── SIDEBAR ───────────────────────────────────────────────── */
.sidebar { width:var(--sidebar-w); min-width:var(--sidebar-w); background:var(--surface2); border-right:0.5px solid var(--border); display:flex; flex-direction:column; transition:transform .25s ease; z-index:50; }
.sidebar-logo { padding:16px 14px 12px; border-bottom:0.5px solid var(--border); font-size:14px; font-weight:600; display:flex; align-items:center; gap:8px; }
.sidebar-logo svg { opacity:.7; }
.sidebar-close { display:none; margin-left:auto; background:none; border:none; cursor:pointer; color:var(--text2); padding:2px; }
.nav-section { padding:10px 8px 4px; font-size:10px; font-weight:600; color:var(--text3); text-transform:uppercase; letter-spacing:.08em; }
.nav-item { display:flex; align-items:center; gap:9px; padding:9px 10px; border-radius:var(--radius); cursor:pointer; font-size:13px; color:var(--text2); margin:1px 6px; border:none; background:none; width:calc(100% - 12px); text-align:left; }
.nav-item:hover { background:var(--surface); color:var(--text); }
.nav-item.active { background:var(--surface); color:var(--text); font-weight:500; }
.nav-item svg { flex-shrink:0; opacity:.7; }
.nav-item.active svg { opacity:1; }
.sidebar-bottom { margin-top:auto; padding:8px; border-top:0.5px solid var(--border); }
.sidebar-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:40; }

/* ── MAIN ──────────────────────────────────────────────────── */
.main-area { flex:1; display:flex; flex-direction:column; overflow:hidden; background:var(--surface); min-width:0; }

/* ── PAGE HEADER ───────────────────────────────────────────── */
.page-header { padding:14px 20px; border-bottom:0.5px solid var(--border); display:flex; align-items:center; gap:10px; flex-shrink:0; }
.page-header-back { background:none; border:0.5px solid var(--border2); border-radius:var(--radius); padding:6px 8px; cursor:pointer; color:var(--text2); display:none; align-items:center; }
.page-header h1 { font-size:16px; font-weight:500; flex:1; }
.page-header-actions { display:flex; gap:6px; }

/* ── MOBILE TOP BAR ────────────────────────────────────────── */
.mobile-bar { display:none; align-items:center; gap:10px; padding:11px 14px; border-bottom:0.5px solid var(--border); flex-shrink:0; }
.btn-hamburger { background:none; border:0.5px solid var(--border2); border-radius:var(--radius); padding:6px 8px; cursor:pointer; color:var(--text2); display:flex; align-items:center; }
.mobile-bar-title { font-size:14px; font-weight:500; flex:1; }

/* ── PAGE CONTENT ──────────────────────────────────────────── */
.page-body { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.page-section { padding:20px; max-width:860px; }

/* ── BUTTONS ───────────────────────────────────────────────── */
.btn { padding:7px 14px; border-radius:var(--radius); border:0.5px solid var(--border2); cursor:pointer; font-size:13px; font-family:var(--font); }
.btn-primary { background:var(--text); color:var(--surface); border-color:var(--text); }
.btn-primary:hover { opacity:.85; }
.btn-ghost { background:transparent; color:var(--text); }
.btn-ghost:hover { background:var(--surface2); }
.btn-danger { background:transparent; color:var(--danger); border-color:rgba(192,57,43,.3); }
.btn-danger:hover { background:var(--danger-bg); }
.btn-sm { padding:5px 10px; font-size:12px; }
.btn-icon { padding:6px 8px; border:0.5px solid var(--border); border-radius:var(--radius); background:transparent; cursor:pointer; color:var(--text2); line-height:1; }
.btn-icon:hover { background:var(--bg); }
.btn-icon.danger:hover { background:var(--danger-bg); color:var(--danger); }

/* ── PILLS & BADGES ────────────────────────────────────────── */
.pill { display:inline-flex; align-items:center; font-size:11px; padding:2px 8px; border-radius:20px; }
.pill-blue   { background:var(--accent-bg);  color:var(--accent-text); }
.pill-gray   { background:var(--surface2);   color:var(--text2); border:0.5px solid var(--border2); }
.pill-green  { background:var(--green-bg);   color:var(--green-text); }
.pill-orange { background:var(--orange-bg);  color:var(--orange-text); }
.badge { display:inline-flex; font-size:11px; padding:1px 6px; border-radius:20px; background:var(--accent-bg); color:var(--accent-text); margin-left:4px; }

/* ── CARDS ─────────────────────────────────────────────────── */
.card { background:var(--surface); border:0.5px solid var(--border); border-radius:var(--radius); }
.card-body { padding:14px 16px; }

/* ── KPIs ──────────────────────────────────────────────────── */
.kpis { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:20px; }
.kpi { background:var(--surface2); border-radius:var(--radius); padding:14px 12px; text-align:center; }
.kpi-val { font-size:24px; font-weight:500; }
.kpi-label { font-size:11px; color:var(--text2); margin-top:3px; text-transform:uppercase; letter-spacing:.04em; }
.kpi-orange { border:0.5px solid var(--orange); background:var(--orange-bg); }
.kpi-orange .kpi-val, .kpi-orange .kpi-label { color:var(--orange-text); }

/* ── FIELD GROUPS ──────────────────────────────────────────── */
.field-group { display:flex; flex-direction:column; gap:5px; }
.field-label { font-size:11px; color:var(--text2); font-weight:500; text-transform:uppercase; letter-spacing:.04em; }
.field-val { font-size:14px; padding:8px 10px; background:var(--surface2); border:0.5px solid var(--border); border-radius:var(--radius); min-height:36px; line-height:1.5; }
.field-val.empty { color:var(--text3); }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.grid-2 .full { grid-column:1/-1; }

/* ── FORM INPUTS ───────────────────────────────────────────── */
.input { padding:8px 10px; border:0.5px solid var(--border2); border-radius:var(--radius); font-size:14px; font-family:var(--font); color:var(--text); background:var(--surface); outline:none; width:100%; }
.input:focus { border-color:var(--accent); }
.input-sm { padding:6px 10px; border:0.5px solid var(--border2); border-radius:var(--radius); font-size:13px; font-family:var(--font); color:var(--text); background:var(--surface); outline:none; }
.input-sm:focus { border-color:var(--accent); }
textarea.input { resize:vertical; min-height:80px; line-height:1.6; }

/* ── FORM SECTIONS ─────────────────────────────────────────── */
.form-section { margin-bottom:20px; }
.form-section-title { font-size:11px; font-weight:600; color:var(--text2); text-transform:uppercase; letter-spacing:.06em; margin-bottom:10px; padding-bottom:6px; border-bottom:0.5px solid var(--border); }

/* ── CLIENT LIST (sidebar items style) ─────────────────────── */
.item-list { display:flex; flex-direction:column; gap:2px; }
.item-row { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:var(--radius); cursor:pointer; border:0.5px solid transparent; }
.item-row:hover { background:var(--surface2); border-color:var(--border); }
.item-row.item-future { border-left:3px solid var(--orange); background:#fffbf0; }
.item-row-main { flex:1; min-width:0; }
.item-row-name { font-weight:500; font-size:13px; }
.item-row-meta { font-size:12px; color:var(--text2); margin-top:2px; }
.item-row-right { display:flex; gap:6px; align-items:center; flex-shrink:0; }

/* ── SEANCE DETAIL ─────────────────────────────────────────── */
.seance-header-client { display:flex; align-items:center; gap:10px; padding:12px 16px; background:var(--surface2); border-radius:var(--radius); margin-bottom:16px; cursor:pointer; border:0.5px solid var(--border); }
.seance-header-client:hover { border-color:var(--border2); }
.avatar { width:36px; height:36px; border-radius:50%; background:var(--accent-bg); color:var(--accent-text); display:flex; align-items:center; justify-content:center; font-weight:500; font-size:12px; flex-shrink:0; }
.seance-meta-pills { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:16px; }

/* ── TABS ──────────────────────────────────────────────────── */
.tabs { display:flex; border-bottom:0.5px solid var(--border); padding:0 16px; flex-shrink:0; overflow-x:auto; scrollbar-width:none; }
.tabs::-webkit-scrollbar { display:none; }
.tab { padding:10px 12px; font-size:13px; cursor:pointer; border-bottom:2px solid transparent; color:var(--text2); white-space:nowrap; margin-bottom:-0.5px; }
.tab:hover { color:var(--text); }
.tab.active { color:var(--text); border-bottom-color:var(--text); font-weight:500; }

/* ── CONVERSATIONS ─────────────────────────────────────────── */
.conv-card { border:0.5px solid var(--border); border-radius:var(--radius); padding:11px 14px; margin-bottom:7px; background:var(--surface); }
.conv-card.conv-envoye { margin-left:15%; border-left:3px solid var(--accent); background:var(--accent-bg); }
.conv-card.conv-recu   { margin-right:15%; border-left:3px solid var(--border2); }
.conv-card-header { display:flex; align-items:center; gap:6px; margin-bottom:6px; font-size:12px; color:var(--text2); flex-wrap:wrap; }
.conv-text { font-size:14px; line-height:1.65; white-space:pre-wrap; }
.conv-actions { display:flex; gap:6px; margin-top:8px; padding-top:8px; border-top:0.5px solid var(--border); }

/* ── CALENDRIER ────────────────────────────────────────────── */
.cal-nav { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.cal-nav-selectors { display:flex; gap:6px; align-items:center; }
.cal-nav-btn { background:var(--surface2); border:0.5px solid var(--border2); border-radius:var(--radius); padding:6px 12px; cursor:pointer; font-size:15px; }
.cal-header-row { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; margin-bottom:2px; }
.cal-header-cell { text-align:center; font-size:11px; font-weight:500; color:var(--text2); text-transform:uppercase; letter-spacing:.04em; padding:4px 0; }
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; margin-bottom:20px; }
.cal-cell { min-height:50px; border-radius:var(--radius); background:var(--surface2); display:flex; flex-direction:column; align-items:center; padding:5px 3px 3px; border:0.5px solid transparent; }
.cal-cell.has-event { background:var(--surface); border-color:var(--border); cursor:pointer; }
.cal-cell.has-event:hover { border-color:var(--border2); background:var(--accent-bg); }
.cal-cell.is-today { border-color:var(--accent) !important; }
.cal-cell.is-today .cal-day-num { background:var(--accent); color:#fff; border-radius:50%; }
.cal-day-num { font-size:12px; font-weight:500; width:22px; height:22px; display:flex; align-items:center; justify-content:center; }
.cal-dots { display:flex; gap:3px; margin-top:3px; }
.cal-dot { width:5px; height:5px; border-radius:50%; }
.cal-dot-past { background:var(--accent); }
.cal-dot-future { background:var(--orange); }
.cal-section-label { font-size:11px; font-weight:600; color:var(--text2); text-transform:uppercase; letter-spacing:.05em; margin:16px 0 8px; padding-bottom:6px; border-bottom:0.5px solid var(--border); }
.cal-event { display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:var(--radius); border:0.5px solid var(--border); background:var(--surface2); margin-bottom:4px; cursor:pointer; }
.cal-event:hover { background:var(--accent-bg); border-color:var(--border2); }
.cal-event.future { border-left:3px solid var(--orange); background:#fffbf0; }
.cal-event-date { font-size:12px; color:var(--text2); min-width:88px; font-weight:500; flex-shrink:0; }
.cal-event-info { flex:1; font-size:13px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }

/* popup jour */
.day-overlay { position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:300; display:flex; align-items:flex-end; justify-content:center; padding:20px; }
.day-popup { background:var(--surface); border-radius:var(--radius-lg); padding:20px; width:min(420px,100%); max-height:60vh; overflow-y:auto; }
.day-popup-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; font-size:14px; font-weight:500; }

/* ── RESSOURCES ────────────────────────────────────────────── */
.ress-list { display:flex; flex-direction:column; gap:6px; }
.ress-item { background:var(--surface2); border:0.5px solid var(--border); border-radius:var(--radius); padding:12px 14px; cursor:pointer; }
.ress-item:hover { border-color:var(--border2); }
.ress-item-title { font-weight:500; font-size:13px; }
.ress-item-cat { font-size:11px; color:var(--text3); margin-top:2px; }
.ress-editor { display:flex; flex-direction:column; height:100%; }
.ress-editor textarea { flex:1; min-height:400px; font-size:14px; font-family:var(--font); color:var(--text); background:var(--surface); border:0.5px solid var(--border2); border-radius:var(--radius); padding:14px; resize:none; outline:none; line-height:1.8; }
.ress-editor textarea:focus { border-color:var(--accent); }

/* ── MODAL ─────────────────────────────────────────────────── */
.modal-bg { display:none; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:200; align-items:center; justify-content:center; padding:16px; }
.modal-bg.open { display:flex; }
.modal { background:var(--surface); border:0.5px solid var(--border2); border-radius:var(--radius-lg); padding:22px; width:min(480px,100%); max-height:90vh; overflow-y:auto; }
.modal h3 { font-size:15px; font-weight:500; margin-bottom:16px; }
.modal-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:18px; }
.error-hint { font-size:12px; color:var(--danger); margin-top:4px; display:none; }

/* ── CLIENT PICKER ─────────────────────────────────────────── */
.picker-search { width:100%; padding:9px 12px; border:0.5px solid var(--border2); border-radius:var(--radius); font-size:14px; font-family:var(--font); color:var(--text); background:var(--surface); outline:none; margin-bottom:10px; }
.picker-search:focus { border-color:var(--accent); }
.picker-list { max-height:280px; overflow-y:auto; border:0.5px solid var(--border); border-radius:var(--radius); }
.picker-item { padding:10px 14px; cursor:pointer; border-bottom:0.5px solid var(--border); }
.picker-item:last-child { border-bottom:none; }
.picker-item:hover { background:var(--surface2); }
.picker-item-name { font-weight:500; font-size:13px; }
.picker-item-meta { font-size:12px; color:var(--text2); margin-top:1px; }

/* ── SPINNER ───────────────────────────────────────────────── */
.spinner { width:20px; height:20px; border:2px solid var(--border2); border-top-color:var(--accent); border-radius:50%; animation:spin .7s linear infinite; margin:30px auto; }
@keyframes spin { to { transform:rotate(360deg); } }
.empty-state { text-align:center; padding:50px 20px; color:var(--text3); font-size:13px; }
.save-status { font-size:12px; color:var(--text3); }

/* ── RESPONSIVE MOBILE ─────────────────────────────────────── */
@media (max-width: 640px) {
  :root { --sidebar-w: 80vw; }
  .sidebar { position:fixed; top:0; left:0; height:100%; transform:translateX(-100%); }
  .sidebar.open { transform:translateX(0); box-shadow:4px 0 20px rgba(0,0,0,.15); }
  .sidebar-overlay.open { display:block; }
  .sidebar-close { display:flex; }
  .mobile-bar { display:flex; }
  .page-header-back { display:flex; }
  .grid-2 { grid-template-columns:1fr; }
  .grid-2 .full { grid-column:1; }
  .kpis { grid-template-columns:1fr 1fr; }
  .kpi:last-child { grid-column:1/-1; }
  .modal { padding:16px; }
  .conv-card.conv-envoye { margin-left:8%; }
  .conv-card.conv-recu   { margin-right:8%; }
  .page-section { padding:14px; }
  .cal-cell { min-height:38px; }
  .cal-day-num { font-size:11px; width:20px; height:20px; }
}

/* ── RESSOURCES — onglets catégories ── */
.ress-tabs-wrap { display:flex; gap:6px; padding:10px 20px; border-bottom:0.5px solid var(--border); flex-wrap:wrap; flex-shrink:0; }
.ress-tab-btn { padding:5px 12px; border:0.5px solid var(--border2); border-radius:20px; background:var(--surface); color:var(--text2); cursor:pointer; font-size:12px; font-family:var(--font); }
.ress-tab-btn:hover { background:var(--surface2); color:var(--text); }
.ress-tab-btn.active { background:var(--text); color:var(--surface); border-color:var(--text); }

/* ── KPI revenus ── */
.kpi-green { background:var(--green-bg); border:0.5px solid rgba(26,107,26,.2); }
.kpi-green .kpi-val, .kpi-green .kpi-label { color:var(--green-text); }

/* ── Problématique ── */
.pill-purple { background:#f0eeff; color:#5b21b6; }

/* ── COMPTABILITÉ ── */
.compta-mois-wrap { display:flex; gap:4px; flex-wrap:wrap; }
.compta-mois-btn { padding:4px 10px; border:0.5px solid var(--border2); border-radius:20px; background:var(--surface); color:var(--text2); cursor:pointer; font-size:11px; font-family:var(--font); white-space:nowrap; }
.compta-mois-btn:hover { background:var(--surface2); color:var(--text); }
.compta-mois-btn.active { background:var(--text); color:var(--surface); border-color:var(--text); }
@media (max-width:640px) {
  .compta-mois-wrap { gap:3px; }
  .compta-mois-btn { padding:4px 7px; font-size:10px; }
}