/* ==========================================================
   Kanban — style repris de « Gestion de Projet Anonyme »
   Jour et nuit = même charte bleue · police Inter
   (traduit en CSS pur : plus besoin de Tailwind)
   ========================================================== */

:root{
  --accent-color:#3b82f6;
  --accent-hover:#2563eb;
  --accent-soft:#172554;
  --accent-border:#1d4ed8;
  --accent-text:#60a5fa;
  --accent-glow:rgba(59, 130, 246, 0.35);

  --bg:#f1f5f9;            /* slate-100 */
  --surface:#ffffff;
  --surface-2:#f8fafc;     /* slate-50 */
  --col-bg:rgba(255,255,255,.6);
  --border:#e2e8f0;        /* slate-200 */
  --border-soft:#f1f5f9;
  --text:#1e293b;          /* slate-800 */
  --title:#0f172a;         /* slate-900 */
  --muted:#64748b;         /* slate-500 */
  --faint:#94a3b8;         /* slate-400 */
  --chip:#e2e8f0;

  --danger:#dc2626;   --danger-hover:#b91c1c;
  --success:#10b981;
  --red-bg:#fee2e2;   --red-fg:#b91c1c;
  --amber-bg:#fef3c7; --amber-fg:#b45309;
  --green-bg:#d1fae5; --green-fg:#047857;
  --violet-bg:#ede9fe;--violet-fg:#6d28d9;

  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}

html.dark{
  --bg:#020617;            /* slate-950 */
  --surface:#0f172a;       /* slate-900 */
  --surface-2:#1e293b;     /* slate-800 */
  --col-bg:rgba(15,23,42,.6);
  --border:#1e293b;
  --border-soft:rgba(51,65,85,.6);
  --text:#f1f5f9;
  --title:#ffffff;
  --muted:#94a3b8;
  --faint:#64748b;
  --chip:#1e293b;

  --danger:#ef4444;   --danger-hover:#dc2626;
  --success:#34d399;
  --red-bg:rgba(127,29,29,.6);   --red-fg:#fca5a5;
  --amber-bg:rgba(120,53,15,.6); --amber-fg:#fcd34d;
  --green-bg:rgba(6,78,59,.6);   --green-fg:#6ee7b7;
  --violet-bg:rgba(76,29,149,.5);--violet-fg:#c4b5fd;
}

html{ scroll-padding-top:env(safe-area-inset-top,0px); }
*{ box-sizing:border-box; }

body{
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  transition:background-color .3s, color .3s;
}

[hidden]{ display:none !important; }
button{ cursor:pointer; font-family:inherit; }

/* ---------- En-tête ---------- */
header{
  position:sticky; top:0; z-index:30;
  background:var(--surface);
  border-bottom:1px solid var(--border);
  box-shadow:0 1px 2px rgba(0,0,0,.05);
  padding-top:env(safe-area-inset-top,0px);
}
.header-inner{
  max-width:120rem; margin:0 auto;
  min-height:64px; padding:8px clamp(16px,2.5vw,40px);
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.brand{ display:flex; align-items:center; gap:10px; }
.wlogo{ width:34px; height:34px; flex:none; border-radius:10px; display:block; box-shadow:0 4px 14px -1px var(--accent-glow); }
.wordmark{ display:flex; align-items:center; gap:3px; margin:0; font-size:22px; font-weight:800; letter-spacing:-.02em; color:var(--title); line-height:1; }
.side-brand .wtext{ font-size:20px; font-weight:800; margin-left:-9px; }
.brand-project{ font-size:24px; font-weight:800; letter-spacing:-.02em; color:var(--title); padding-left:14px; margin-left:4px; border-left:2px solid var(--border); line-height:1.1; }
.brand-project:empty{ display:none; }
.brand small{ display:block; font-size:12px; color:var(--muted); font-weight:400; }
.controls{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

/* ---------- Boutons ---------- */
.btn{
  background:var(--accent-color); color:#fff; border:none;
  border-radius:12px; padding:9px 14px;
  font-size:12px; font-weight:600;
  box-shadow:0 4px 14px -1px var(--accent-glow);
  transition:background-color .2s, transform .1s;
}
.btn:hover{ background:var(--accent-hover); }
.btn:active{ transform:translateY(1px); }
.btn.ghost{
  background:var(--surface-2); color:var(--text);
  border:1px solid var(--border); box-shadow:none; font-weight:500;
}
.btn.ghost:hover{ background:var(--chip); }
.btn.danger{ background:var(--danger); color:#fff; box-shadow:none; }
.btn.danger:hover{ background:var(--danger-hover); }
a{ color:var(--accent-text); text-decoration:underline; text-underline-offset:2px; }
a:hover{ color:var(--accent-hover); }
a.btn, a.side-link{ text-decoration:none; }
.btn:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--accent-color); outline-offset:2px;
}

/* ---------- Champs ---------- */
input, textarea, select{
  width:100%;
  padding:10px 14px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface);
  color:var(--text);
  font-family:inherit; font-size:14px;
  resize:none;
}
input:focus, textarea:focus, select:focus{ outline:none; border-color:var(--accent-color); }
header select{ width:auto; padding:8px 12px; font-size:12px; font-weight:600; border-radius:12px; background:var(--surface-2); }
label{ display:block; font-size:12px; font-weight:600; margin-bottom:4px; color:var(--text); }

/* ---------- Tableau ---------- */
main{ flex:1; width:100%; max-width:120rem; margin:0 auto; padding:24px clamp(16px,2.5vw,40px); }
.toolbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
.toolbar h2{ margin:0; font-size:20px; font-weight:700; color:var(--title); }
.toolbar p{ margin:2px 0 0; font-size:12px; color:var(--muted); }

/* ---------- Fenêtres modales ---------- */
.overlay{
  position:fixed; inset:0; z-index:50;
  background:rgba(15,23,42,.55); backdrop-filter:blur(2px);
  display:flex; align-items:center; justify-content:center; padding:16px;
}
.overlay[hidden]{ display:none; }
.modal{
  width:100%; max-width:440px; max-height:92vh; overflow:auto;
  background:var(--surface); border:1px solid var(--border); border-radius:16px;
  box-shadow:0 20px 40px rgba(0,0,0,.25); padding:24px;
  display:flex; flex-direction:column; gap:14px;
}
.modal h2{ margin:0; font-size:18px; color:var(--title); overflow-wrap:anywhere; }
.modal.small{ max-width:380px; }
.modal-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.modal-head .x{
  flex:none; width:32px; height:32px; margin:-4px -6px 0 0; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  border:none; border-radius:8px; background:none; color:var(--muted); font-size:16px; line-height:1;
}
.modal-head .x:hover{ background:var(--surface-2); color:var(--title); }
.cb-text{ margin:0; font-size:14px; color:var(--text); line-height:1.5; overflow-wrap:anywhere; }
.modal .row{ display:flex; gap:10px; }
.modal .row > *{ flex:1; }
.modal .actions{ display:flex; gap:8px; justify-content:flex-end; margin-top:4px; }
.modal .actions .btn.danger:first-child:not(:last-child){ margin-right:auto; }
.tabs{ display:flex; background:var(--surface-2); padding:4px; border-radius:12px; gap:4px; }
.tabs button{
  flex:1; padding:8px; border:none; border-radius:8px; background:transparent;
  font-size:12px; font-weight:600; color:var(--muted);
}
.tabs button.on{ background:var(--surface); color:var(--title); box-shadow:0 1px 2px rgba(0,0,0,.1); }
.hint{ font-size:12px; color:var(--muted); margin:0; }
.hint button{ background:none; border:none; padding:0; color:var(--accent-text); font-size:12px; text-decoration:underline; }
.error{ color:var(--red-fg); font-size:12px; margin:0; min-height:0; }
.code{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-weight:700; letter-spacing:.08em; }

/* ---------- Notification ---------- */
#toast{
  position:fixed; left:50%; bottom:calc(24px + env(safe-area-inset-bottom,0px));
  transform:translate(-50%,20px); opacity:0; pointer-events:none;
  background:var(--title); color:var(--bg);
  padding:10px 16px; border-radius:12px; font-size:13px; font-weight:500;
  transition:opacity .25s, transform .25s; z-index:60;
}
#toast.show{ opacity:1; transform:translate(-50%,0); }

@media (prefers-reduced-motion:reduce){ *{ transition:none !important; } }
@media (max-width:600px){ #board{ grid-template-columns:1fr; } }


/* ---------- Menu latéral (icônes seules, se déplie au survol) ---------- */
body{ padding-left:64px; }
.sidebar{
  position:fixed; left:0; top:0; bottom:0; z-index:45; width:64px; overflow:hidden;
  display:flex; flex-direction:column; gap:12px;
  padding:calc(8px + env(safe-area-inset-top,0px)) 8px 8px;
  background:var(--surface); border-right:1px solid var(--border);
  transition:width .2s ease, box-shadow .2s ease;
}
.sidebar:focus-within{ width:220px; box-shadow:8px 0 24px rgba(0,0,0,.14); }
@media (hover:hover){ .sidebar:hover{ width:220px; box-shadow:8px 0 24px rgba(0,0,0,.14); } }
.sidebar nav{ display:flex; flex-direction:column; gap:4px; }
.side-brand{ display:flex; align-items:center; gap:12px; height:48px; padding:0 6px; white-space:nowrap; font-size:16px; font-weight:700; letter-spacing:-.01em; color:var(--title); }
.side-link{
  display:flex; align-items:center; gap:12px; height:44px; padding:0 13px;
  border-radius:12px; color:var(--muted); text-decoration:none;
  font-size:14px; font-weight:600; white-space:nowrap;
  transition:background-color .15s, color .15s;
}
button.side-link{ width:100%; border:none; background:none; font-family:inherit; text-align:left; cursor:pointer; }
.side-link svg{ width:22px; height:22px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.side-link:hover{ background:var(--surface-2); color:var(--title); }
.side-link.on{ background:var(--accent-soft); color:var(--accent-text); }
.side-text{ opacity:0; transition:opacity .15s; }
.sidebar:focus-within .side-text{ opacity:1; }
@media (hover:hover){ .sidebar:hover .side-text{ opacity:1; } }
@media (hover:none){ .side-text{ display:none; } }
@media (max-width:600px){
  body{ padding-left:48px; }
  .sidebar{ width:48px; padding-left:4px; padding-right:4px; }
  .side-brand{ padding:0 2px; }
  .side-link{ padding:0 9px; }
}

/* Petit écran : les boutons de l'en-tête passent dans un menu « ⋯ » */
.more-btn{ display:none; }
.header-inner{ position:relative; }
@media (max-width:700px){
  .header-inner{ flex-wrap:nowrap; }
  .brand{ min-width:0; flex-direction:column; align-items:flex-start; gap:0; }
  .brand-project{ font-size:18px; border-left:none; padding-left:0; margin-left:0; }
  .more-btn{ display:inline-flex; margin-left:auto; padding:6px 12px; font-size:16px; line-height:1; }
  #headControls{
    display:none; position:absolute; right:clamp(16px,2.5vw,40px); top:calc(100% - 6px); z-index:45;
    flex-direction:column; align-items:stretch; gap:6px; min-width:180px; padding:10px;
    background:var(--surface); border:1px solid var(--border); border-radius:12px; box-shadow:0 12px 30px rgba(0,0,0,.18);
  }
  #headControls.open{ display:flex; }
  #headControls .btn{ justify-content:flex-start; }
}
a.btn{ text-decoration:none; display:inline-flex; align-items:center; }


/* ---------- Connexion ---------- */
body.login-page{
  padding-left:0;
  background:linear-gradient(rgba(15,23,42,.45),rgba(15,23,42,.45)), var(--bg) url('login-bg.jpg') center / cover no-repeat fixed;
}
html.dark body.login-page{ background-image:linear-gradient(rgba(2,6,23,.72),rgba(2,6,23,.72)), url('login-bg.jpg'); }
.login-wrap{ flex:1; display:flex; align-items:center; justify-content:center; padding:24px 16px; max-width:none; }
.login-card{
  width:100%; max-width:400px; display:flex; flex-direction:column; gap:14px;
  background:var(--surface); border:1px solid var(--border); border-radius:16px;
  box-shadow:0 20px 40px rgba(0,0,0,.12); padding:28px;
}
.login-brand{ display:flex; align-items:center; gap:10px; }
.login-brand .wordmark{ font-size:28px; } .login-brand .wlogo{ width:44px; height:44px; border-radius:13px; }
.login-card h2{ margin:4px 0 0; font-size:22px; color:var(--title); }
.login-card label small{ font-weight:400; color:var(--muted); }

/* ---------- Administration du projet ---------- */
.modal.wide{ max-width:520px; }
.admin-form{ display:flex; flex-direction:column; gap:12px; }
.admin-tabs{ display:flex; gap:4px; border-bottom:1px solid var(--border); margin-bottom:14px; }
.admin-tab-btn{ background:none; border:none; border-bottom:3px solid transparent; padding:8px 14px; font-size:14px; font-weight:600; color:var(--muted); margin-bottom:-1px; border-radius:8px 8px 0 0; }
.admin-tab-btn:hover{ color:var(--title); }
.admin-tab-btn.on{ color:var(--accent-text); border-bottom-color:var(--accent-color); }
.admin-tab{ display:flex; flex-direction:column; gap:14px; }
.admin-tab[hidden]{ display:none; }
.admin-block{ border-top:1px solid var(--border); padding-top:14px; display:flex; flex-direction:column; gap:8px; }
.admin-block:first-child{ border-top:none; padding-top:0; }
.join-row{ display:flex; gap:8px; align-items:center; }
.join-row input{ flex:1; min-width:0; }
.code-show{ flex:1; font-size:18px; }
.members{ display:flex; flex-direction:column; gap:6px; }
.member{ display:flex; align-items:center; gap:8px; }
.member .n{ flex:1; font-size:14px; color:var(--text); }
.btn.small{ padding:5px 10px; font-size:12px; }
.admin-block.danger{ align-items:flex-start; }


/* ---------- Entrée dans un projet (login / reset) ---------- */
.login-view{ display:flex; flex-direction:column; gap:14px; }
.login-view[hidden]{ display:none; }
.login-card .check{ display:flex; align-items:center; gap:8px; font-size:12px; font-weight:500; color:var(--muted); margin:0; cursor:pointer; }
.login-card .check input{ width:auto; margin:0; }
.login-card .ok{ color:var(--green-fg); font-size:13px; margin:0; }
.login-card .ok:empty{ display:none; }
.login-card a.btn{ text-align:center; text-decoration:none; display:inline-block; }
.login-links{ display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:0; }
.linkbtn{ background:none; border:none; padding:0; color:var(--accent-text); font-size:13px; font-weight:600; text-decoration:underline; cursor:pointer; }
a.btn.ghost{ text-decoration:none; display:inline-flex; align-items:center; }


/* ---------- Filtre « attribuées à » ---------- */
.afilter{ position:relative; }
.btn.afbtn.active{ background:var(--accent-color); color:#fff; border-color:var(--accent-hover); }
.afpanel{ position:absolute; left:0; top:calc(100% + 6px); z-index:40; min-width:230px; max-height:60vh; overflow:auto; background:var(--surface); border:1px solid var(--border); border-radius:12px; box-shadow:0 12px 30px rgba(0,0,0,.18); padding:6px; }
.afpanel[hidden]{ display:none; }
.afrow{ display:flex; align-items:center; gap:8px; margin:0; padding:7px 9px; border-radius:8px; font-size:13px; font-weight:500; color:var(--text); cursor:pointer; }
.afrow:hover{ background:var(--surface-2); }
.afrow input{ width:auto; margin:0; }
.afrow i{ width:12px; height:12px; border-radius:50%; flex:none; }
.afrow i.none{ background:transparent; border:2px dashed var(--faint); width:8px; height:8px; }
.afrow.all{ border-bottom:1px solid var(--border-soft); border-radius:8px 8px 0 0; margin-bottom:4px; }

.toolbar-left{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.toolbar-left p{ margin:0 !important; }
.chk{ display:flex; align-items:flex-start; gap:8px; font-weight:500; font-size:13px; }
.chk input{ width:auto; margin-top:2px; }

/* Filtre par personne : bien visible */
.btn.afbtn{
  padding:11px 18px; font-size:14px; font-weight:700; border:2px solid var(--accent-color);
  background:var(--surface); color:var(--accent-hover); box-shadow:0 2px 8px -2px var(--accent-glow);
}
html.dark .btn.afbtn{ color:var(--accent-text); }
.btn.afbtn:hover{ background:var(--accent-color); color:#fff; }
.btn.afbtn.active{ background:var(--accent-color); color:#fff; border-color:var(--accent-hover); }

.side-bottom{ margin-top:auto; }