/* site.css — version fusionnée / corrigée
   - albums : styles originaux restaurés
   - admin table : colonnes basées sur variables (--c1..--c7)
   - select role: largeur contrôlée
*/

/* -------- Variables -------- */
:root{
  --bg1:#0b0a12;
  --bg2:#12101c;
  --bg3:#171427;
  --panel:#120f1c;
  --border:#2b2740;
  --violet:#7c4dff;
  --violet-2:#8b5cf6;
  --accent:#10b981;
  --ink:#e8e6f2;
  --muted:#b3add1;

  /* Colonnes admin (modifiable via JS). Defaults chosen to match previous layout */
  --c1: 340px;   /* Actions */
  --c2: 80px;    /* ID */
  --c3: minmax(160px,1fr); /* Username (flexible) */
  --c4: minmax(260px,2fr); /* Email (large flexible) */
  --c5: 320px;   /* Role */
  --c6: 150px;   /* Verified */
  --c7: 220px;   /* Ban dates */
}

/* Global reset / basics */
*{box-sizing:border-box}
html,body{height:100%}
body.lp-body{
  margin:0;
  color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,'Helvetica Neue',Arial,'Noto Sans',sans-serif;
  background:radial-gradient(1200px 800px at 20% -10%, #2a2344 0%, #12101c 60%, #0b0a12 100%);
}

/* Header */
.lp-header{position:sticky;top:0;background:#0e0c16cc;backdrop-filter:blur(8px);border-bottom:1px solid var(--border);z-index:50}
.lp-header-inner{max-width:1200px;margin:0 auto;padding:12px 16px;display:flex;align-items:center;gap:14px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff}
.brand-logo{height:28px}
.brand-name{font-weight:700}
.spacer{flex:1}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;border:1px solid #3a335f;background:#1a1725;color:#c9b8ff;border-radius:12px;padding:8px 14px;text-decoration:none;cursor:pointer}
.btn-primary{background:var(--violet);color:#fff;border-color:var(--violet)}
.btn-secondary{background:#2a2540;color:#c9b8ff}
.btn-danger{background:#7f2a4a;border-color:#7f2a4a;color:#ffd1d8}
.btn-xs{padding:4px 8px;border-radius:10px;font-size:12px}
.btn-ghost{background:#1a1725;border-color:#3a335f;color:#c9b8ff}
.btn.link{background:transparent;border-color:#3a335f}
.btn-disabled{opacity:.45;pointer-events:none;filter:grayscale(.15)}

/* Dropdown */
.dropdown{position:relative}
.dropdown-menu{position:absolute;right:0;top:calc(100% + 8px);background:var(--panel);border:1px solid #3a335f;border-radius:12px;padding:8px;display:none;min-width:220px}
.dropdown-menu.open{display:block}
.dropdown-item{display:block;padding:8px 10px;border-radius:8px;color:var(--ink);text-decoration:none}
.dropdown-item:hover{background:#1a1725}
.dropdown-item.danger{background:#3a1b2a;border-color:#7f2a4a;color:#ffd1d8}
.dropdown-item.toggle{font-weight:700;text-align:center;border:1px solid transparent;border-radius:8px;padding:8px 10px;cursor:pointer}
.dropdown-item.toggle.on{background:#16a34a;color:#fff;border-color:#15803d}
.dropdown-item.toggle.off{background:#dc2626;color:#fff;border-color:#991b1b}
.dropdown-sep{border:none;border-top:1px solid var(--border);margin:6px 0}

/* Layout */
.lp-main{max-width:1200px;margin:24px auto;padding:0 16px}
.lp-footer{text-align:center;color:var(--muted);margin:36px 0}
.page-title{margin:8px 0 18px 0}

/* Flash */
.flash-stack{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.flash{padding:10px 12px;border-radius:12px;border:1px solid var(--border);background:#1a1725}
.flash-success{border-color:#2f7a57;background:#143024;color:#b3ffd7}
.flash-error{border-color:#7f2a4a;background:#3a1b2a;color:#ffd1d8}
.flash-warning{border-color:#7f6b2a;background:#3a3118;color:#ffe9b3}

/* Cards / forms */
.card{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:14px;box-sizing:border-box}
.card.compact{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.form-auth{max-width:420px}
input,select,textarea{width:100%;padding:10px;border-radius:10px;border:1px solid #3a335f;background:#0e0b16;color:var(--ink)}
textarea{min-height:120px}

/* Albums list (home) — RESTORED EXACT */
.album-list{display:grid;gap:18px}
.album-card{display:grid;grid-template-columns:120px 1fr auto;align-items:center;gap:16px;padding:16px;border-radius:16px;background:linear-gradient(180deg,#211a38 0%, #171427 100%);border:1px solid rgba(139,92,246,.25)}
.album-card .thumb{width:120px;height:90px;border-radius:10px;overflow:hidden;background:#0e0b16;display:grid;place-items:center}
.album-card .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.album-card .info{padding-right:8px;min-width:0}
.album-card .info .name{font-size:20px;font-weight:700;margin-bottom:4px}
.album-card .info .desc{color:#bfb8d9;margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.album-card .info .meta{color:#9e96c7}
.album-card .actions{display:flex;gap:10px;justify-self:end}
@media (max-width:640px){
  .album-card{grid-template-columns:100px 1fr}
  .album-card .actions{grid-column:1/-1;justify-self:start}
}

/* Album view */
.album-layout{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:20px}
.album-left{background:#0f0c19;border:1px solid var(--border);border-radius:16px;padding:10px;display:grid;place-items:center}
.album-image{max-width:100%;max-height:80vh;border-radius:12px;cursor:zoom-in}
.album-right{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:14px;position:sticky;top:88px;height:fit-content}
.card-title{margin:0 0 8px}
.stars{display:flex;gap:8px;margin-bottom:6px}
.star{font-size:20px;background:#1a1725;border:1px solid #3a335f;color:#c9b8ff;border-radius:8px;padding:4px 6px;cursor:pointer}
.star.active{background:var(--violet-2);color:#fff}
.small{font-size:12px}
.muted{color:#8b88a3}
.comments{display:flex;flex-direction:column;gap:12px;max-height:45vh;overflow:auto;padding-right:4px}
.comment{display:flex;gap:10px}
.comment .avatar{width:24px;height:24px;border-radius:999px;object-fit:cover;border:1px solid #3a335f;flex:none}
.comment .comment-body{background:#0e0b16;border:1px solid var(--border);border-radius:12px;padding:8px 10px;width:100%}
.comment .meta{font-size:12px;color:#b6b0cb;margin-bottom:4px;display:flex;gap:10px;align-items:center}
.comment .user{text-decoration:none;color:#c9b8ff}

/* Navigation multi-images album */
.image-wrap{position:relative;}
.nav-btn{
  position:absolute;top:50%;transform:translateY(-50%);
  width:40px;height:40px;border-radius:999px;display:grid;place-items:center;
  background:#1a1725;border:1px solid #3a335f;color:#c9b8ff;cursor:pointer;
  font-size:18px;line-height:1;z-index:10;box-shadow:0 2px 10px rgba(0,0,0,.35)
}
.nav-btn.prev{left:12px}
.nav-btn.next{right:12px}
.nav-btn:hover{background:#8b5cf6;color:#fff}
.thumb-strip{margin-top:10px;display:flex;gap:8px;overflow:auto;padding-bottom:4px;}
.thumb-strip .thumb{width:90px;height:60px;object-fit:cover;border-radius:8px;border:1px solid #3a335f;cursor:pointer;flex:none;filter:saturate(0.85);}
.thumb-strip .thumb.selected{outline:2px solid #8b5cf6;filter:none;}

/* Admin upload */
.grid-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.img-card{background:#0f0c19;border:1px solid var(--border);border-radius:12px;padding:8px}
.img-wrap{height:150px;border-radius:8px;overflow:hidden;display:grid;place-items:center;background:#0e0b16;margin-bottom:8px}
.img-wrap img{width:100%;height:100%;object-fit:cover;display:block}
.row{display:flex;gap:8px;flex-wrap:wrap}

/* Admin users table (with variables for easy JS resizing) */
.table{width:100%;display:grid;gap:6px}
.thead,.trow{
  display:grid;
  /* use CSS variables so widths are adjustable */
  grid-template-columns: var(--c1) var(--c2) var(--c3) var(--c4) var(--c5) var(--c6) var(--c7);
  gap:10px;
  align-items:center;
}
.thead{color:#bfb8d9}
.thead > div,.trow .cell{min-width:0}
.ellipsis{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ensure email column ellipsis works and shows more content when available */
.trow .cell:nth-child(4) .ellipsis { max-width:100%; display:inline-block; }

/* Provide some padding & background for rows */
.trow{background:#0f0c19;border:1px solid var(--border);border-radius:12px;padding:8px 10px}
.trow .cell.compact{white-space:nowrap}

/* User actions layout */
.user-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.user-actions .btn{padding:6px 10px}

/* Role edit: keep select contained but wide enough to read current role */
.user-edit{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.user-edit .role-edit{display:flex;gap:6px;align-items:center}
.user-edit .role-edit select{
  min-width:96px; /* prevents being too narrow */
  max-width:220px;
  width:140px;
  padding:8px 10px;
  border-radius:12px;
  background:#0e0b16;
  border:1px solid rgba(58,51,95,0.6);
  color:var(--ink);
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  text-align:left;
}

/* place the "Changer" button next to select without overlapping the verified column */
.user-edit .role-edit button{padding:6px 10px}

/* Verified edit */
.user-edit .verify-edit{display:flex;gap:6px;align-items:center}

/* row style when banned */
.trow.banned{background:rgba(127,42,74,.18);border-color:#7f2a4a}

/* ban dates */
.ban-dates{font-size:12px;color:#b6b0cb;white-space:nowrap}

/* small screens */
@media (max-width:1100px){.thead,.trow{gap:8px}}

/* --- Admin ALBUMS table (avec colonne Couverture) --- */
.table.admin-albums .thead,
.table.admin-albums .trow{
  grid-template-columns: 80px 60px 1fr 2fr 120px 260px; /* ID | Cover | Nom | Desc | Images | Actions */
}
.album-cover{
  width:48px;height:48px;border-radius:8px;border:1px solid var(--border);
  background:#0e0b16;object-fit:cover;display:block
}
.album-cover.placeholder{
  display:block;width:48px;height:48px;border-radius:8px;border:1px dashed #3a335f;
  background:repeating-linear-gradient(45deg,#141124 0 6px,#16122a 6px 12px)
}

/* Plein écran: ratio respecté par défaut */
.album-image.is-fullscreen { width: 100vw; height: 100vh; object-fit: contain; background: #000; border-radius: 0; cursor: zoom-out; }

/* Toggle "cover" with R */
.album-image.is-fullscreen.cover-mode { object-fit: cover; }

/* Prevent fullscreen scroll */
:fullscreen { overflow: hidden; }

/* Progress & favorites */
.progress{width:100%;height:14px;background:linear-gradient(90deg,#141124 0,#16122a);border-radius:8px;border:1px solid rgba(58,51,95,.6);overflow:hidden}
.progress-bar{height:100%;width:0;border-radius:8px;background:linear-gradient(90deg,var(--violet-2),var(--violet));transition:width .4s ease}
.btn-xs.btn-danger { background:#7f2a4a; border-color:#7f2a4a; color:#ffd1d8; }
.btn-xs.btn-primary { background:var(--violet); border-color:var(--violet); color:#fff; }

/* Stats modern */
.stats-hero { display:block; }
.stats-hero.card { padding:14px; margin-bottom:18px; display:block; }
.stats-hero-inner { display:flex; justify-content:space-between; gap:18px; align-items:center; flex-wrap:wrap; }
.hero-left { min-width:220px; }
.hero-title { font-size:18px; font-weight:700; margin-bottom:4px; }
.hero-sub { color:var(--muted); margin-bottom:10px; }
.hero-actions { display:flex; gap:8px; }
.hero-metrics { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.metric { display:flex; gap:10px; align-items:center; background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent); padding:8px 12px; border-radius:12px; border:1px solid rgba(58,51,95,0.22); min-width:140px; }
.metric-icon { width:34px; height:34px; display:grid; place-items:center; border-radius:10px; background:rgba(139,92,246,0.12); font-size:18px; }
.metric-label { font-size:12px; color:var(--muted); }
.metric-value { font-size:18px; font-weight:800; color:var(--ink); }

/* Grid */
.stats-grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap:14px; padding:14px; align-items:start; }
.stat-block { padding:16px; border-radius:12px; background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent); border:1px solid rgba(58,51,95,0.18); }
.stat-head { font-size:13px; color:var(--muted); margin-bottom:8px; }
.stat-big { font-size:26px; font-weight:800; margin-bottom:6px; }
.stat-sub { font-size:12px; color:var(--muted); }

/* Disk ui */
.disk-wrap { display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.donut { width:90px; height:90px; display:flex; align-items:center; justify-content:center; background:transparent; border-radius:50%; }
.circular-chart { width:90px; height:90px; transform:rotate(-90deg); display:block; }
.circular-chart circle { fill:none; }
.circular-chart .circle-bg { stroke: rgba(26,23,37,0.9); stroke-width:6; }
.circular-chart .circle { stroke-width:6; stroke-linecap:round; transition:stroke-dasharray .9s ease; }

/* gradient id used in svg */
.stats-hero .circular-chart .chart-text { font-size:12px; fill:var(--ink); transform:rotate(90deg); text-anchor:middle; font-weight:700; }

/* disk-info */
.disk-info { min-width:180px; max-width:420px; display:flex;flex-direction:column; gap:6px; }
.disk-line { font-size:13px; margin-bottom:4px; }
.disk-line strong { font-weight:700; }

/* helpers */
.mt-s { margin-top:10px; }
.muted.small { font-size:12px; color:var(--muted); }

/* stat detail text area boxed with scroll if needed */
.stat-details { box-sizing:border-box; }
.stat-details .stats-grid { gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.stat-details .text-wrap { max-height:360px; overflow:auto; padding-top:10px; margin-top:10px; border-top:1px solid rgba(58,51,95,0.06); }

/* stars display */
#starsDisplay .star { font-size:14px; display:inline-block; padding:2px 6px; border-radius:6px; border:1px solid rgba(58,51,95,0.25); background:#1a1725; color:#8b88a3; margin-right:6px; }
#starsDisplay .star.active { background:linear-gradient(90deg,var(--violet-2),var(--violet)); color:#fff; border-color:transparent; }

/* force SVG size and transparent background to avoid black circle */
.stats-hero .donut svg { width:90px; height:90px; background:transparent; display:block; }

/* responsive */
@media (max-width:760px){
  .stats-hero-inner { flex-direction:column; align-items:flex-start; }
  .hero-metrics { width:100%; justify-content:space-between; align-items:flex-start; }
  .hero-left, .hero-metrics { max-width:100%; }
}

/* --------------------------- Additions: small thumbs & creator-portfolio --------------------------- */

/* small thumbnail utility (useful for creator files previews) */
.thumb-xs {
  display:inline-block;
  width:160px;         /* adjust as needed */
  height:100px;        /* adjust as needed */
  object-fit:cover;
  border-radius:8px;
  overflow:hidden;
  vertical-align:middle;
  border:1px solid rgba(58,51,95,0.22);
  background:#0e0b16;
}

/* use alongside .thumb-link */
.thumb-link { display:inline-block; margin-right:8px; text-decoration:none; color:inherit; }
.creator-files { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; align-items:center; }

/* small label under thumb if needed */
.thumb-label { font-size:12px; color:var(--muted); margin-top:6px; display:block; max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* fallback inline style for templates that inline max-width */
.img-inline-limited { max-width:100%; height:auto; max-height:220px; object-fit:cover; border-radius:8px }

/* small hover icon overlay (optional) */
.thumb-overlay {
  position:relative;
  display:inline-block;
}
.thumb-overlay .overlay-icon {
  position:absolute; inset:0; display:grid; place-items:center; opacity:0; transition:opacity .15s ease; color:#fff;
}
.thumb-overlay:hover .overlay-icon { opacity:0.9; background:linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.35)); }

/* responsive creator files */
@media (max-width:640px){
  .thumb-xs { width:120px; height:80px; }
  .thumb-label { max-width:120px; }
  .creator-files { display:flex; flex-wrap:wrap; gap:8px; align-items:flex-start; }
  .creator-files img { border-radius:8px; border:1px solid rgba(58,51,95,0.18); }
}

/* ligne traitée plus discrète */
.trow.processed { opacity:0.85; filter:grayscale(.05); }
.trow.processed .btn { opacity:0.6; pointer-events:none; }

/* small helpers for admin table interaction */
.table .cell { min-width:0; } /* important to let ellipsis work */
.table { overflow:visible; } /* allow dropdowns to overflow */

/* ---------- Column resizer for admin users table ---------- */

/* make sure header cells are position:relative so resizer can sit on the right edge */
.thead { position: relative; }
.thead > div { position: relative; }

/* the invisible drag handle */
.col-resizer {
  position: absolute;
  right: -4px; /* small overlap so it's easier to grab */
  top: 0;
  bottom: 0;
  width: 8px;
  cursor: col-resize;
  z-index: 30;
  background: transparent;
  transition: background .12s;
}

/* visible hint on hover */
.col-resizer:hover {
  background: linear-gradient(90deg, rgba(139,92,246,0.08), rgba(139,92,246,0.03));
}

/* small visual bar in the center of the handle to help see it */
.col-resizer::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 2px;
  height: 24px;
  background: rgba(139,92,246,0.12);
  border-radius: 2px;
}

/* disable resizers on small screens (optional) */
@media (max-width:860px) {
  .col-resizer { display: none; }
}

/* while dragging: prevent text select */
html.col-resizing { user-select: none; cursor: col-resize; }