/* =========================================================
   YustonXIII — Design System (dark/light)
   Remplace intégralement assets/css/style.css
   ========================================================= */

:root{
  --bg:#0f1115; --panel:#151a24; --text:#e8ecf4; --muted:#a3acc2;
  --primary:#7c4cff; --border:#23283a; --card:#111521; --shadow:0 10px 30px rgba(0,0,0,.25);
  --success:#39d98a; --danger:#ff5c7a; --warn:#ffb01f; --info:#41a0ff;
  --sidebar-w:260px; --sidebar-w-collapsed:78px;
  --ring:0 0 0 3px rgba(124,76,255,.25);

  /* Rôles (palette unifiée) */
  --role-admin:#ff4d4f;      /* rouge  */
  --role-modo:#2ecc71;       /* vert   */
  --role-animateur:#ff8a00;  /* orange */
  --role-support:#ffd43b;    /* jaune  */
}
html[data-theme="light"]{
  --bg:#f6f7fb; --panel:#ffffff; --text:#12131a; --muted:#5b6475;
  --primary:#6b46ff; --border:#e6e9f2; --card:#f0f2fb; --shadow:0 12px 24px rgba(20,20,40,.08);
  --ring:0 0 0 3px rgba(107,70,255,.25);
}

/* Reset */
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0; font-family:ui-sans-serif,system-ui,Segoe UI,Roboto,Arial;
  background:var(--bg); color:var(--text);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

/* ===================== Topbar ===================== */
.topbar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:.6rem;
  padding:.6rem .9rem;
  background:rgba(15,17,21,.7); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
html[data-theme="light"] .topbar{ background:rgba(255,255,255,.7) }
.brand{ display:flex; align-items:center; gap:.6rem; text-decoration:none; color:inherit; margin-right:auto }
.logo{
  width:30px; height:30px; display:grid; place-items:center; border-radius:8px;
  background:radial-gradient(circle at 30% 30%, var(--primary), #5a37c8); color:#fff; font-weight:700
}
.brand-title{ font-weight:700; letter-spacing:.2px }
.top-actions{ display:flex; align-items:center; gap:.4rem }

/* Icon buttons */
.icon-btn{
  display:inline-grid; place-items:center;
  width:38px; height:38px; padding:0; border-radius:12px;
  border:1px solid var(--border); background:var(--panel); color:var(--text);
  transition:filter .15s ease, transform .06s ease, box-shadow .2s ease;
}
.icon-btn:hover{ filter:brightness(1.06) }
.icon-btn:active{ transform:translateY(1px) }
.icon-btn:focus-visible{ outline:none; box-shadow:var(--ring) }

/* Recherche topbar */
.search{
  display:flex; align-items:center; gap:.45rem;
  border:1px solid var(--border); border-radius:10px; background:var(--panel); padding:.35rem .6rem;
  box-shadow:0 4px 16px rgba(0,0,0,.18);
}
.search input{ background:transparent; border:none; color:var(--text); outline:none; min-width:160px }
.search input::placeholder{ color:var(--muted); opacity:.9 }

/* ===================== Layout ===================== */
.layout{ display:grid; grid-template-columns:var(--sidebar-w) 1fr; min-height:calc(100vh - 58px - 48px) }
.sidebar{
  position:relative; background:linear-gradient(180deg, var(--panel), #0f1423 120%);
  border-right:1px solid var(--border); padding:.75rem .5rem; overflow-y:auto
}
.menu{ display:flex; flex-direction:column; gap:.2rem }
.menu .sep{ height:1px; background:var(--border); margin:.4rem .25rem }
.item{
  display:flex; align-items:center; gap:.6rem; padding:.6rem .7rem; border-radius:10px; text-decoration:none; color:inherit
}
.item:hover{ background:rgba(255,255,255,.05) }
.item.active{
  background:linear-gradient(90deg, rgba(124,76,255,.14), transparent 80%);
  border:1px solid var(--border); position:relative;
}


.content{
  padding:1rem 1.2rem; background:
  radial-gradient(700px 400px at 10% -10%, rgba(124,76,255,.12), transparent 60%),
  radial-gradient(700px 400px at 100% 0%, rgba(124,76,255,.05), transparent 60%);
}
.muted{ color:var(--muted) }
.quick{ display:flex; gap:.6rem; flex-wrap:wrap }

/* ===================== Buttons ===================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.56rem .95rem; border-radius:12px; border:1px solid transparent;
  font-weight:600; text-decoration:none; cursor:pointer; user-select:none;
  background:var(--primary); color:#fff;
  transition:transform .06s ease, filter .15s ease, box-shadow .2s ease, border-color .2s ease;
  box-shadow:0 6px 20px rgba(124,76,255,.18);
}
.btn:hover{ filter:brightness(1.06) }
.btn:active{ transform:translateY(1px) }
.btn:focus-visible{ outline:none; box-shadow:var(--ring) }
.btn[disabled], .btn:disabled{ opacity:.6; cursor:not-allowed; box-shadow:none }

.btn.outline{ background:transparent; color:var(--text); border-color:var(--border); box-shadow:none }
.btn.outline:hover{ background:rgba(255,255,255,.05) }
html[data-theme="light"] .btn.outline:hover{ background:rgba(0,0,0,.04) }

.btn.ghost{ background:transparent; border-color:transparent; color:var(--text); box-shadow:none }
.btn.ghost:hover{ background:rgba(255,255,255,.06) }
html[data-theme="light"] .btn.ghost:hover{ background:rgba(0,0,0,.04) }

.btn.success{ background:var(--success); box-shadow:0 6px 18px rgba(46,204,113,.25) }
.btn.warning{ background:var(--warn); color:#1a1a1a; box-shadow:0 6px 18px rgba(255,176,31,.25) }
.btn.danger{ background:var(--danger); border-color:var(--danger); box-shadow:0 6px 18px rgba(255,92,122,.25) }

.btn.small{ padding:.36rem .6rem; font-size:.9rem; border-radius:10px }
.btn.lg{ padding:.8rem 1.1rem; font-size:1.02rem }
.btn.icon{ width:40px; height:40px; padding:0; border-radius:12px; font-size:1rem }
.btn.loading{ position:relative; color:transparent!important; pointer-events:none }
.btn.loading::after{
  content:""; position:absolute; width:16px; height:16px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%;
  animation:spin .8s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg) } }

/* ===================== Sections & Cards ===================== */
.page-head{ display:flex; align-items:flex-end; justify-content:space-between; margin:.2rem 0 1rem }
.grid{ display:grid; gap:1rem }
.stats{ grid-template-columns:repeat(4, minmax(0,1fr)) }
.two-cols{ grid-template-columns:1.1fr .9fr }
@media (max-width:1000px){ .two-cols{ grid-template-columns:1fr } }
@media (max-width:900px){ .stats{ grid-template-columns:repeat(2, minmax(0,1fr)) } }
@media (max-width:520px){ .stats{ grid-template-columns:1fr } }

.card{
  background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:1rem; box-shadow:var(--shadow);
  transform:translateY(0); transition:transform .2s ease, box-shadow .2s ease;
}
.card:hover{ transform:translateY(-2px) }
.card-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.5rem }
.card-sub{ margin-top:1rem }
.subhead{ margin:.2rem 0 .6rem; font-size:.95rem; color:var(--muted) }

/* Badges génériques */
.badge{
  padding:.2rem .5rem; border-radius:999px; font-size:.78rem;
  background:#162035; color:#b1c6ff; border:1px solid var(--border);
}
.badge.soft{ background:rgba(255,255,255,.06); border-color:var(--border); color:#cfd6ec }
.badge.danger{ background:rgba(255,92,122,.15); border-color:var(--danger); color:#ffe3e8 }
.badge.success{ background:rgba(46,204,113,.14); border-color:rgba(46,204,113,.35); color:#d6ffe7 }

/* Badges de rôle — palette unifiée */
.badge.role-admin{     background:rgba(255,77,79,.16);  border-color:rgba(255,77,79,.40);  color:#ffe6e7 }
.badge.role-modo{      background:rgba(46,204,113,.14); border-color:rgba(46,204,113,.40); color:#d6ffe7 }
.badge.role-animateur{ background:rgba(255,138,0,.16);  border-color:rgba(255,138,0,.40);  color:#ffe2c0 }
.badge.role-support{   background:rgba(255,212,59,.18); border-color:rgba(255,212,59,.45); color:#1a1a1a }
.badge.role-membre{    background:rgba(255,255,255,.07);border-color:var(--border);        color:#cfd6ec }
html[data-theme="light"] .badge.role-admin{ color:#7a0007 }
html[data-theme="light"] .badge.role-modo{ color:#0d5e39 }
html[data-theme="light"] .badge.role-animateur{ color:#8a4a00 }
html[data-theme="light"] .badge.role-support{ color:#5a4a00 }

/* Badges statut/prio/catégorie (tickets) */
.badge.status-open{ background:rgba(65,160,255,.14); border-color:rgba(65,160,255,.35); color:#d8ecff }
.badge.status-claimed{ background:rgba(255,176,31,.14); border-color:rgba(255,176,31,.35); color:#ffe8bf }
.badge.status-waiting_user{ background:rgba(255,176,31,.12); border-color:rgba(255,176,31,.35); color:#ffe8bf }
.badge.status-closed{ background:rgba(124,76,255,.16); border-color:rgba(124,76,255,.35); color:#d7ccff }
.badge.priority-low{ background:rgba(255,255,255,.07); border-color:var(--border); color:#cfd6ec }
.badge.priority-normal{ background:rgba(46,204,113,.14); border-color:rgba(46,204,113,.35); color:#d6ffe7 }
.badge.priority-high{ background:rgba(255,176,31,.14); border-color:rgba(255,176,31,.35); color:#ffe8bf }
.badge.priority-urgent{ background:rgba(255,92,122,.15); border-color:var(--danger); color:#ffe3e8 }
.badge.cat-technique{ background:rgba(124,76,255,.16); border-color:rgba(124,76,255,.35); color:#d7ccff }
.badge.cat-compte{ background:rgba(65,160,255,.14); border-color:rgba(65,160,255,.35); color:#d8ecff }
.badge.cat-autre{ background:rgba(255,255,255,.07); border-color:var(--border); color:#cfd6ec }

/* Stat cards */
.stat{ display:flex; align-items:center; gap:1rem; position:relative; overflow:hidden }
.stat-icon{
  font-size:1.4rem; width:42px; height:42px; display:grid; place-items:center;
  background:linear-gradient(135deg,#1a1e31,#0f1426); border:1px solid var(--border); border-radius:12px;
}
.stat-text .label{ color:var(--muted) }
.stat-text .value{ font-size:1.5rem; font-weight:800 }
.trend{ position:absolute; right:12px; bottom:10px; font-size:.8rem; color:var(--muted) }
.trend.up{ color:var(--success) } .trend.down{ color:var(--danger) }

/* ===================== Forms ===================== */
.form{ display:grid; gap:.7rem }
.input, select.input, textarea.input{
  width:100%; padding:.6rem .75rem; border-radius:12px;
  border:1px solid var(--border); background:#0e1220; color:var(--text);
  transition:border-color .15s ease, box-shadow .2s ease, background .2s ease;
}
html[data-theme="light"] .input,
html[data-theme="light"] select.input,
html[data-theme="light"] textarea.input{ background:#fff }
.input:focus, select.input:focus, textarea.input:focus{ outline:none; border-color:var(--primary); box-shadow:var(--ring) }
.input-group{ display:flex; gap:.4rem; align-items:center }
.label{ font-weight:600; margin-bottom:.2rem }
.help{ font-size:.86rem; color:var(--muted) }
.row{ display:grid; gap:.5rem; grid-template-columns:1fr auto }

/* ===================== Tables ===================== */
.card.table-card{ padding:0; overflow:auto; border-radius:14px; box-shadow:var(--shadow) }
.table{
  width:100%; border-collapse:separate; border-spacing:0; min-width:860px;
}
.table thead th{
  position:sticky; top:0; z-index:1;
  background:linear-gradient(180deg, var(--card), transparent);
  backdrop-filter:blur(6px);
  text-align:left; color:var(--muted); font-weight:600; letter-spacing:.2px;
  border-bottom:1px solid var(--border);
}
.table th, .table td{ padding:.8rem .9rem; border-bottom:1px solid var(--border); vertical-align:middle }
.table tbody tr:nth-child(odd) td{ background:rgba(255,255,255,.02) }
html[data-theme="light"] .table tbody tr:nth-child(odd) td{ background:rgba(0,0,0,.02) }
.table tbody tr:hover td{ background:rgba(124,76,255,.08) }
.table td:last-child{ white-space:nowrap; text-align:right }

/* Sélection (tickets bulk) */
th.sel, td.sel{ width:36px; text-align:center }
.checkbox{
  appearance:none; -webkit-appearance:none; width:18px; height:18px; border-radius:6px;
  border:1px solid var(--border); background:var(--panel); display:inline-grid; place-items:center; cursor:pointer;
  transition:border-color .15s ease, background .15s ease;
}
.checkbox:checked{ background:var(--primary); border-color:transparent }
.checkbox:checked::after{ content:""; width:10px; height:10px; border-radius:3px; background:#fff }

/* ===================== Alerts / Breadcrumbs / KPI ===================== */
.alert{
  border:1px solid var(--border); border-radius:12px; padding:.6rem .8rem; margin:.6rem 0; background:var(--card)
}
.alert.success{ background:rgba(46,204,113,.12); border-color:rgba(46,204,113,.35); color:#d6ffe7 }
.alert.error{ background:rgba(255,92,122,.15); border-color:var(--danger); color:#ffe3e8 }

.breadcrumbs{ display:flex; align-items:center; gap:.45rem; color:var(--muted); font-size:.92rem }
.breadcrumbs a{ color:inherit; text-decoration:none }
.breadcrumbs a:hover{ text-decoration:underline }
.breadcrumbs .sep::before{ content:"›"; opacity:.6 }

/* KPI cards */
.kpi{
  display:flex; flex-direction:column; gap:.2rem;
  padding:.7rem .9rem; margin:.6rem 0;
  border:1px solid var(--border); border-radius:12px; background:var(--panel);
}
.kpi .label{ color:var(--muted); font-size:.9rem }
.kpi .value{ font-weight:700 }

/* ===================== Threads (tickets & discussion) ===================== */
.thread{
  display:flex; flex-direction:column; gap:.6rem;
  max-height:min(62vh, 720px);
  overflow-y:auto; padding:.6rem;
  border:1px solid var(--border); border-radius:12px; background:var(--card);
  scroll-behavior:smooth;
}
.thread .msg{
  background:transparent; border:1px solid var(--border);
  padding:.6rem .75rem; border-radius:12px;
}
.thread .msg.private{ background:rgba(255,176,31,.08) }
.thread::-webkit-scrollbar{ width:10px }
.thread::-webkit-scrollbar-thumb{ background:#2a2f45; border-radius:8px }
#jump-bottom{ position:sticky; bottom:.2rem; align-self:flex-end }

/* Meta-line */
.meta-line{ display:flex; align-items:center; gap:.5rem; margin-bottom:.25rem }
.meta-line .time{ font-size:.78rem; color:var(--muted); margin-left:.1rem }

/* Role badge (ligne meta) — aligné avec .badge.role-* */
.role-badge{
  padding:.15rem .45rem; border-radius:999px; font-size:.72rem;
  border:1px solid var(--border); background:rgba(255,255,255,.06);
}
.role-badge.role-admin{     background:rgba(255,77,79,.16);  border-color:rgba(255,77,79,.40);  color:#ffe6e7 }
.role-badge.role-modo{      background:rgba(46,204,113,.14); border-color:rgba(46,204,113,.40); color:#d6ffe7 }
.role-badge.role-animateur{ background:rgba(255,138,0,.16);  border-color:rgba(255,138,0,.40);  color:#ffe2c0 }
.role-badge.role-support{   background:rgba(255,212,59,.18); border-color:rgba(255,212,59,.45); color:#1a1a1a }
.role-badge.role-membre{    background:rgba(255,255,255,.08);border-color:var(--border);        color:#cfd6ec }
html[data-theme="light"] .role-badge.role-admin{ color:#7a0007 }
html[data-theme="light"] .role-badge.role-modo{ color:#0d5e39 }
html[data-theme="light"] .role-badge.role-animateur{ color:#8a4a00 }
html[data-theme="light"] .role-badge.role-support{ color:#5a4a00 }

/* Fichiers & tags */
.files{ display:flex; gap:.5rem; flex-wrap:wrap }
.tag{ display:inline-flex; gap:.4rem; align-items:center; padding:.2rem .55rem; border:1px solid var(--border); border-radius:999px; background:var(--card) }
.overdue{ color:#ffb4c1 }

/* ===================== Todo / Divers ===================== */
.todo-list{ list-style:none; margin:.6rem 0 0; padding:0; display:grid; gap:.5rem }
.todo-item{
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  padding:.55rem .7rem; border:1px solid var(--border); border-radius:10px; background:var(--card)
}
.todo-item.done{ opacity:.6; text-decoration:line-through }

/* ===================== Sidebar collapsed ===================== */
body.sidebar-collapsed .layout{ grid-template-columns:var(--sidebar-w-collapsed) 1fr }
body.sidebar-collapsed .item{ justify-content:center }

/* ===================== Mobile ===================== */
@media (max-width:920px){
  .layout{ grid-template-columns:1fr }
  .sidebar{
    position:fixed; top:52px; bottom:48px; left:0; width:var(--sidebar-w);
    transform:translateX(-100%); transition:transform .25s ease; z-index:25;
  }
  body.sidebar-open .sidebar{ transform:translateX(0) }
  .backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.35); backdrop-filter:blur(2px); z-index:24 }
}

/* ===================== Footer ===================== */
.footer{ height:48px; display:grid; place-items:center; border-top:1px solid var(--border); color:var(--muted) }

/* ===================== Animations ===================== */
.reveal{ opacity:0; transform:translateY(8px); transition:opacity .5s ease, transform .5s ease }
.reveal.show{ opacity:1; transform:none }

/* ===================== Scrollbars ===================== */
.sidebar::-webkit-scrollbar{ width:8px }
.sidebar::-webkit-scrollbar-thumb{ background:#2a2f45; border-radius:8px }

/* ===================== Bulk actions (tickets) ===================== */
.bulkbar{ display:flex; gap:.6rem; align-items:center; margin:.6rem 0 }
.bulkbar .spacer{ flex:1 }

.chat-wrap{display:grid;grid-template-rows:auto 1fr auto;gap:.6rem}
.thread{min-height:0;overflow-y:auto;border:1px solid var(--border);border-radius:12px;background:var(--card);padding:.6rem;display:flex;flex-direction:column;gap:.6rem}
.chat-msg{border:1px solid var(--border);border-radius:12px;padding:.55rem .7rem;background:var(--panel)}
.chat-msg.me{background:linear-gradient(180deg,rgba(124,76,255,.12),transparent 120%);border-color:rgba(124,76,255,.35)}
.chat-msg.deleted .body{color:var(--muted);font-style:italic}
.reply-preview{font-size:.9rem;color:var(--muted);border-left:3px solid var(--border);padding-left:.5rem;margin-bottom:.35rem}
.msg-actions{margin-left:auto;display:flex;gap:.3rem}
.reacts{display:flex;gap:.3rem;flex-wrap:wrap;margin-top:.35rem}
.react{display:inline-flex;gap:.3rem;align-items:center;border:1px solid var(--border);border-radius:999px;padding:.1rem .4rem;background:var(--card);font-size:.9rem;cursor:pointer}
.react.on{border-color:var(--primary)}
.pinned-bar{display:flex;gap:.5rem;flex-wrap:wrap}
.pin-pill{display:inline-flex;gap:.4rem;align-items:center;padding:.25rem .55rem;border:1px solid var(--border);border-radius:999px;background:var(--card)}
.typing{font-size:.9rem;color:var(--muted)}

/* Désactive le point bleu dans la sidebar */
.item.active::before { display: none !important; content: none !important; }

/* === Indicateur (point bleu) pour l'item actif de la sidebar === */
.sidebar .item{
  position: relative;            /* ancre pour ::before */
  padding-left: 1.75rem;         /* espace pour le point */
  align-items: center;           /* centrage vertical stable */
}

.sidebar .item.active::before{
  content: "";
  position: absolute;
  left: .8rem;                   /* position horizontale du point */
  top: 50%;
  transform: translateY(-50%);   /* centrage vertical précis */
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 3px rgba(124,76,255,.25); /* halo doux */
}

/* Masquer le point quand la sidebar est repliée */
body.sidebar-collapsed .sidebar .item.active::before{
  display: none;
}

/* Ajustements mobiles */
@media (max-width: 920px){
  .sidebar .item{ padding-left: 1.2rem; }
  .sidebar .item.active::before{ left: .5rem; }
}

/* Indicateur (point bleu) */
.sidebar .item{
  position: relative;
  padding-left: 1.75rem;
  align-items: center;
}
.sidebar .item.active::before{
  content: "";
  position: absolute;
  left: .8rem;
  top: 50%;
  transform: translateY(-50%);
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 3px rgba(124,76,255,.25);
  z-index: 1; /* au cas où */
}
/* Masquer seulement si sidebar repliée */
body.sidebar-collapsed .sidebar .item.active::before{ display:none; }

/* ===== User menu (topbar) ===== */
.top-actions { position: relative; gap: .5rem; }

.user-menu { position: relative; }
.user-pill{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.45rem .65rem; border-radius:10px;
  border:1px solid var(--border); background:var(--panel); color:var(--text);
  font-weight:600; cursor:pointer;
}
.user-pill .role{ color:var(--muted); font-weight:500 }
.user-pill .caret{ opacity:.8 }

.user-pill:focus-visible{ outline:none; box-shadow:var(--ring) }
.user-pill:hover{ filter:brightness(1.06) }

.dropdown{
  position:absolute; right:0; top:calc(100% + 8px);
  min-width:220px; padding:.4rem;
  background:var(--panel); border:1px solid var(--border); border-radius:12px;
  box-shadow:var(--shadow); z-index:50;
}
.dropdown .sep{ height:1px; background:var(--border); margin:.35rem .2rem }
.dropdown a{
  display:flex; align-items:center; gap:.5rem;
  padding:.45rem .55rem; border-radius:8px; color:inherit; text-decoration:none;
}
.dropdown a:hover{ background:rgba(255,255,255,.06) }
html[data-theme="light"] .dropdown a:hover{ background:rgba(0,0,0,.04) }

@media (max-width: 520px){
  .dropdown{ min-width: 190px }
}

/* Wrapper dédié pour éviter les décals */
.input-with-toggle{
  position: relative;
}

/* On réserve de la place à droite dans l'input pour le bouton */
.input-with-toggle > .input{
  padding-right: 2.6rem;   /* espace pour le bouton */
  line-height: 1.2;        /* évite les hauteurs “biscornues” */
}

/* Bouton œil, **à l’intérieur** du champ */
.toggle-pass{
  position: absolute;
  right: .55rem;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  padding: 0;
  line-height: 1;
  -webkit-appearance: none;
          appearance: none;
}
.toggle-pass:hover{
  background: rgba(255,255,255,.06);
  color: var(--text);
}
html[data-theme="light"] .toggle-pass:hover{
  background: rgba(0,0,0,.05);
}
.toggle-pass svg{ display:block } /* pas de “extra” espace inline */

/* === Ajustements page actions membre === */
.card + .card {
  margin-top: 1.5rem;   /* espace vertical entre 2 cartes */
}

.page-head + .card {
  margin-top: 1.2rem;   /* espace après le titre de page */
}