/* ===============================
   Back-Office — GuildHub (sobre)
   =============================== */
:root{
  --brand:#c4161c; --brand-dark:#8e0f13;
  --ink:#eaeaea; --muted:#9aa0ab;
  --bg:#0a0a0c; --card:#121217; --border:#2a2a2f;

  --sidebar-w: 260px;
  --topbar-h: 56px;
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:var(--ink);font:15px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Helvetica Neue,Arial}
a{color:var(--brand);text-decoration:none}
a:hover{color:#ff4d53}
img{max-width:100%;height:auto;display:block}

/* Layout principal (plein écran) */
.layout{
  min-height:100vh;
  display:grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: var(--topbar-h) 1fr;
  grid-template-areas:
    "sidebar topbar"
    "sidebar main";
}

/* Topbar */
.topbar{
  grid-area: topbar;
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 14px;
  background:rgba(18,18,23,.9);
  border-bottom:1px solid var(--border);
  backdrop-filter: blur(8px);
  position:sticky; top:0; z-index:20;
  height: var(--topbar-h);
}
.topbar .brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.2px}
.topbar .brand .dot{width:10px;height:10px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 6px rgba(196,22,28,.18)}
.topbar .actions{display:flex;align-items:center;gap:10px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;border:1px solid var(--border);color:var(--ink);background:transparent}
.btn:hover{border-color:#3a3a42}
.btn-brand{background:var(--brand);border-color:var(--brand);color:#fff}
.btn-brand:hover{background:var(--brand-dark);border-color:var(--brand-dark)}

/* Sidebar */
.sidebar{
  grid-area: sidebar;
  background:linear-gradient(180deg, rgba(196,22,28,.07), rgba(196,22,28,.0));
  border-right:1px solid var(--border);
  padding:14px 12px;
  position:sticky; top:0; height:100vh; overflow:auto;
}
.sidebar .logo{display:flex;align-items:center;gap:10px;font-weight:700;margin:2px 6px 14px}
.sidebar .muted{color:var(--muted);font-size:12px;margin:8px 10px}
.menu{list-style:none;margin:0;padding:6px}
.menu li{margin:4px 0}
.menu a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;border:1px solid transparent;color:#dfe3ea}
.menu a:hover{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.06)}
.menu a.active{background:rgba(196,22,28,.15);border-color:rgba(196,22,28,.35);color:#fff}
.menu .grp{margin:10px 0 4px 6px;font-size:12px;color:#a9b0bc;letter-spacing:.3px;text-transform:uppercase}

/* Main plein écran */
.main{
  grid-area: main;
  padding:18px 18px 36px;
}
.container{width:100%;max-width:none;margin:0}
.card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px}

/* Grilles */
.grid-2{
  display:grid;
  grid-template-columns: 340px 1fr; /* aside + contenu */
  gap:16px;
}
.grid-2--balanced{
  grid-template-columns: 1fr 1fr; /* 50/50 si besoin */
}

/* Table responsive full width */
.table-wrap{
  width:100%;
  overflow:auto;
  border:1px solid var(--border);
  border-radius:12px;
}
.table{
  width:100%;
  border-collapse:collapse;
  min-width:820px; /* garde une largeur mini pour les colonnes */
}
.table th, .table td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--border);vertical-align:middle}
.table thead th{
  position:sticky; top:0;
  background:linear-gradient(180deg, rgba(18,18,23,1), rgba(18,18,23,.96));
  z-index:1;
}

/* Petits éléments */
.muted{color:var(--muted)}
.kbd{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;background:#0d0d12;border:1px solid var(--border);padding:2px 6px;border-radius:6px}

/* Formulaires */
label{display:block;font-size:13px;color:#c5c9d2;margin-top:10px}
input, select, textarea{
  width:100%;padding:10px 12px;margin-top:6px;border-radius:10px;border:1px solid #3a3a42;background:#0d0d12;color:var(--ink)
}
button, .btn-submit{
  margin-top:12px;padding:10px 12px;border-radius:10px;border:1px solid #3a3a42;background:var(--brand);color:#fff;font-weight:600
}
.alert{background:#261215;border:1px solid #3a0f13;color:#ffc6c9;padding:10px;border-radius:10px;margin:12px 0}

/* Footer */
.footer{padding:18px 0;color:var(--muted);text-align:center}

/* Responsive */
@media (max-width: 1180px){
  .grid-2{grid-template-columns: 1fr}
}
@media (max-width: 980px){
  .layout{grid-template-columns: 0 1fr}
  .sidebar{position:fixed;left:-100%;top:0;bottom:0;width:var(--sidebar-w);transition:left .25s ease}
  .sidebar.open{left:0}
}

/* ===== Toolbar Colonnes (panneau flottant aligné) ===== */
.controls { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }

.controls details { position: relative; display: inline-block; }
.controls details summary { list-style: none; cursor: pointer; }
.controls details[open] > summary::after { content: "▲"; font-size: 10px; margin-left: 4px; opacity: .6; }
.controls details:not([open]) > summary::after { content: "▼"; font-size: 10px; margin-left: 4px; opacity: .6; }

/* Carte flottante du menu Colonnes : cases bien alignées */
.controls details > .card{
  position:absolute; top:calc(100% + 6px); right:0; z-index:50;
  background:var(--card); border:1px solid var(--border); border-radius:10px;
  padding:10px 14px 12px; box-shadow:0 4px 14px rgba(0,0,0,.4);
  display:flex; flex-wrap:wrap; gap:6px 14px; min-width:280px;
}
.controls details > .card label{
  display:flex; align-items:center; gap:6px; font-size:13px; color:var(--ink);
  line-height:1.4; min-width:130px; white-space:nowrap; margin-top:0;
}
.controls details > .card input[type="checkbox"]{ margin:0; transform:translateY(0); }
.controls details > .card button{ flex:1 1 100%; margin-top:10px; }

/* ===== Boutons : hauteur uniforme ===== */
.btn{ display:inline-flex; align-items:center; gap:8px; padding:8px 10px;
  height:36px; line-height:1; border-radius:10px; border:1px solid var(--border); color:var(--ink); background:transparent;
}
.btn:hover{ border-color:#3a3a42 }
.btn-brand{ background:var(--brand); border-color:var(--brand); color:#fff }
.btn-brand:hover{ background:var(--brand-dark); border-color:var(--brand-dark) }

/* ===== Cellule d’actions dans la table ===== */
.table td.actions-cell{
  display:flex; align-items:center; gap:6px; flex-wrap:nowrap;
}
.table td.actions-cell form,
.table td.actions-cell details{ display:inline-block; margin:0; }
.table td.actions-cell summary.btn{ margin:0; display:inline-flex; align-items:center; height:36px; }

/* Popover d’édition ancré au bouton Éditer */
.actions-cell details{ position:relative; }
.actions-cell details > .edit-popover{
  position:absolute; top:calc(100% + 6px); right:0; z-index:60;
  min-width:560px; max-width:min(90vw, 760px);
  background:var(--card); border:1px solid var(--border); border-radius:12px; padding:14px;
  box-shadow:0 8px 24px rgba(0,0,0,.45);
}

/* Table: masquer colonnes (persistées) */
.table [data-col].is-hidden { display:none; }
/* DataTables x thème */
.dataTables_wrapper .dataTables_filter input{
  background:#0d0d12; border:1px solid var(--border); color:var(--ink); border-radius:8px; padding:6px 10px;
}
.dataTables_wrapper .dt-buttons .dt-button{
  border:1px solid var(--border); background:#0d0d12; color:var(--ink); border-radius:8px; padding:6px 10px; margin-right:6px;
}
.dataTables_wrapper .dt-buttons .dt-button:hover{ border-color:#3a3a42 }

/* Colonne d’expansion */
#membersDT td.dt-control{ width:36px; font-weight:700; opacity:.8 }
#membersDT tr.shown td.dt-control{ color:var(--brand) }

/* Actions bien alignées */
.table td.actions-cell { display:flex; align-items:center; gap:8px; }
.table td.actions-cell .btn { height:36px; }

/* Badges doux */
.badge.bg-success-subtle { background:rgba(0,128,0,.12); color:#cfe8cf; }
.badge.bg-secondary-subtle { background:rgba(255,255,255,.06); color:#000000; }
/* ===== Modales custom (overlay + carte), dark et sobres ===== */
.modal-overlay{
  position:fixed; inset:0; display:none;
  background:rgba(0,0,0,.55);
  z-index:1000; /* au-dessus des cartes */
  align-items:center; justify-content:center; padding:20px;
}
.modal-overlay.is-open{ display:flex; }

.modal-card{
  width:min(880px, 96vw);
  max-height:90vh; overflow:auto;
  background:var(--card); border:1px solid var(--border);
  border-radius:14px; padding:0;
  box-shadow:0 10px 32px rgba(0,0,0,.55);
}
.modal-card .modal-header,
.modal-card .modal-footer{
  padding:12px 16px; border-bottom:1px solid var(--border);
}
.modal-card .modal-footer{ border-top:1px solid var(--border); border-bottom:none; }
.modal-card .modal-body{ padding:14px 16px; }

/* Grille simple responsive (si tu n’as pas de grid utilitaires) */
.row{ display:flex; flex-wrap:wrap; margin:-6px; }
.row > [class^="col-"]{ padding:6px; }
.col-12{ flex:0 0 100%; max-width:100%; }
.col-md-4{ flex:0 0 33.333%; max-width:33.333%; }
.col-md-6{ flex:0 0 50%; max-width:50%; }
@media (max-width: 980px){
  .col-md-4,.col-md-6{ flex:0 0 100%; max-width:100%; }
}

/* Petits badges déjà présents, on garde */
.badge{ display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:999px; font-size:12px; border:1px solid var(--border); }

/* Icônes inline si pas de Bootstrap icons (optionnel) */
.bi{ font-style:normal; } /* placeholder */

/* === Sidebar refonte (ergonomique + fluide) === */

/* Bloc brand (logo front cliquable) */
.front-brand{
  display:flex; align-items:center; gap:10px;
  padding:10px 10px 12px; margin:4px 2px 10px;
  border-radius:12px; text-decoration:none; color:#fff;
  background:linear-gradient(180deg, rgba(196,22,28,.10), rgba(196,22,28,.05));
  border:1px solid rgba(196,22,28,.25);
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.front-brand:hover{
  transform: translateY(-1px);
  border-color: rgba(196,22,28,.35);
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
.front-logo{
  display:block;
  width: clamp(170px, 70%, 250px);
  height: auto;
  max-height: 150px;      /* ≈150px */
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.35));
}
.front-brand-meta strong{ display:block; line-height:1.1 }
.front-brand-meta small{ display:block; margin-top:2px }

/* Raccourcis sous le brand */
.front-shortcuts{ display:flex; gap:8px; padding:6px 6px 10px }
.btn-ghost{
  display:inline-flex; align-items:center; gap:8px;
  height:36px; padding:8px 10px; border-radius:10px;
  border:1px solid rgba(255,255,255,.08); color:#dfe3ea; background:transparent;
  transition:border-color .2s ease, background .2s ease, color .2s ease;
}
.btn-ghost:hover{ border-color:#3a3a42; background:rgba(255,255,255,.04) }
.btn-ghost i{ opacity:.9 }

/* Group labels */
.sidebar .grp-title{ color:#a9b0bc; font-size:12px; letter-spacing:.3px; margin:8px 10px 6px }
.menu .grp{
  margin:10px 0 6px 6px; font-size:11.5px; color:#9aa0ab;
  letter-spacing:.35px; text-transform:uppercase; opacity:.9;
}

/* Items de navigation améliorés */
.menu{ list-style:none; margin:0; padding:6px }
.menu .nav-item{ position:relative; margin:4px 0 }
.menu .nav-link{
  position:relative;
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:12px;
  border:1px solid transparent; color:#dfe3ea;
  transition: border-color .2s ease, background .2s ease, color .2s ease, transform .12s ease;
  will-change: transform;
}
.menu .nav-link:hover{
  background:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.06);
  transform: translateX(2px);
}
.menu .nav-link.active{
  background:linear-gradient(180deg, rgba(196,22,28,.18), rgba(196,22,28,.10));
  border-color:rgba(196,22,28,.45); color:#fff;
}

/* Marqueur actif (barre à gauche) */
.menu .nav-link::before{
  content:""; position:absolute; left:6px; top:50%; transform:translateY(-50%);
  width:0; height:60%; border-radius:3px;
  background: var(--brand);
  box-shadow:0 0 0 6px rgba(196,22,28,.15);
  transition: width .18s ease, opacity .18s ease;
  opacity:0;
}
.menu .nav-link.active::before{
  width:4px; opacity:1;
}

/* Icônes (Bootstrap Icons) */
.menu .nav-link i{
  font-size:16px; opacity:.9; width:18px; text-align:center;
  transform: translateY(1px);
}

/* Pied de sidebar (liens discrets) */
.sidebar-footer{
  margin-top: 14px;
  padding: 10px 8px 4px;
  border-top:1px dashed rgba(255,255,255,.08);
}
.sidebar-footer .mini-link{
  display:flex; align-items:center; gap:8px;
  padding:6px 6px; color:#cfd4dd; border-radius:8px;
  transition: background .2s ease, color .2s ease;
}
.sidebar-footer .mini-link:hover{ background:rgba(255,255,255,.05); color:#fff }

/* Focus visible (accessibilité) */
.menu .nav-link:focus-visible,
.btn-ghost:focus-visible,
.sidebar-footer .mini-link:focus-visible,
.front-brand:focus-visible{
  outline:2px solid rgba(196,22,28,.65);
  outline-offset:2px;
}

/* Mobile : largeur inchangée, comportement offcanvas conservé */
@media (max-width:980px){
  .front-logo{ width: clamp(160px, 60vw, 240px); max-height: 140px; }
}
/* --- Fix layout du bloc brand dans la sidebar --- */
.front-brand{
  display: flex;               /* au lieu de inline */
  flex-direction: column;      /* meta sous le logo */
  align-items: center;
  text-align: center;
  gap: 6px;                    /* espace logo / meta */
  width: 100%;
  max-width: calc(var(--sidebar-w) - 20px);
  margin: 6px auto 12px;       /* centré dans la sidebar */
}

.front-logo{
  display: block;
  width: min(250px, 90%);      /* ≈250px max, sinon 90% de la sidebar */
  max-height: 150px;           /* ≈150px de haut */
  height: auto;
  object-fit: contain;
}

.front-brand-meta{
  margin-top: 4px;
  line-height: 1.15;
}
.front-brand-meta strong{
  font-weight: 700;
  letter-spacing: .2px;
  color: #fff;
  display: block;
}
.front-brand-meta .muted{
  display: block;
  font-size: 12px;
  opacity: .9;
}

/* petite respiration entre le brand et "Navigation" */
.sidebar .grp-title{ margin-top: 6px; }