/* Workflow — MyKollectOr (Admin)
   Tech: HTML/CSS/JS pur — aucune dépendance
*/

:root{
  --bg:#070f18;
  --panel:rgba(14,40,65,.55);
  --panel2:rgba(14,40,65,.35);
  --stroke:rgba(200,168,75,.22);
  --stroke2:rgba(200,168,75,.35);
  --gold:#c8a84b;
  --gold2:#e8c870;
  --text:#ffffff;
  --muted:rgba(255,255,255,.65);
  --muted2:rgba(255,255,255,.45);
  --danger:#ff4d4d;
  --ok:#39d98a;
  --warn:#ffb020;
  --shadow:0 24px 70px rgba(0,0,0,.55);
  --radius:16px;
  --radius2:12px;
  --gap:14px;
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font);
  background: radial-gradient(circle at 20% 20%, rgba(200,168,75,.10), transparent 30%),
              radial-gradient(circle at 80% 10%, rgba(232,200,112,.08), transparent 35%),
              linear-gradient(180deg, rgba(7,15,24,1) 0%, rgba(7,15,24,1) 100%);
  color:var(--text);
}

a{color:inherit}

.app{display:flex; min-height:100vh}

/* Sidebar */
.sidebar{
  width:280px;
  background:linear-gradient(180deg, rgba(7,15,24,.96) 0%, rgba(7,15,24,.88) 100%);
  border-right:1px solid rgba(200,168,75,.15);
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:16px;
  position:sticky;
  top:0;
  height:100vh;
}
.sidebarHead{display:flex; gap:12px; align-items:center; padding:6px 6px 10px}
.sidebarLogo{width:42px;height:42px;border-radius:12px; border:1px solid rgba(200,168,75,.25)}
.sidebarBrandTitle{font-weight:800; letter-spacing:.06em; text-transform:uppercase; font-size:.84rem}
.sidebarBrandSub{color:var(--muted2); font-size:.78rem; margin-top:3px}

.nav{display:flex; flex-direction:column; gap:8px}
.navItem{
  text-decoration:none;
  display:flex; align-items:center; gap:10px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid transparent;
  background:transparent;
  color:rgba(255,255,255,.78);
}
.navItem:hover{background:rgba(200,168,75,.08); border-color:rgba(200,168,75,.18)}
.navItem.active{background:rgba(200,168,75,.12); border-color:rgba(200,168,75,.32); color:#fff}
.navDot{width:8px;height:8px;border-radius:99px; background:rgba(200,168,75,.35)}
.navItem.active .navDot{background:var(--gold)}
.navSep{height:1px; background:linear-gradient(90deg, transparent, rgba(200,168,75,.18), transparent); margin:6px 0}

.sidebarFoot{margin-top:auto; display:flex; flex-direction:column; gap:10px; padding-top:6px}

/* Main */
.main{flex:1; display:flex; flex-direction:column; min-width:0}
.topbar{
  height:60px;
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px;
  border-bottom:1px solid rgba(200,168,75,.12);
  background:rgba(7,15,24,.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.topbarTitle{font-weight:800; letter-spacing:.04em}
.topbarRight{display:flex; gap:10px; align-items:center}

.view{padding:18px; display:flex; flex-direction:column; gap:16px; min-width:0}
.footer{padding:12px 18px 18px; color:var(--muted2)}

/* Buttons */
.btn{
  border:none; cursor:pointer;
  border-radius:999px;
  padding:10px 14px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:.72rem;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  transition:transform .12s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
  user-select:none;
}
.btn:active{transform:translateY(1px)}
.btn.full{width:100%}

.btn.gold{background:linear-gradient(135deg, var(--gold) 0%, var(--gold2) 50%, var(--gold) 100%); color:#07111c; box-shadow:0 6px 24px rgba(200,168,75,.25)}
.btn.gold:hover{box-shadow:0 10px 34px rgba(200,168,75,.38)}

.btn.ghost{background:rgba(200,168,75,.08); color:rgba(255,255,255,.85); border:1px solid rgba(200,168,75,.18)}
.btn.ghost:hover{background:rgba(200,168,75,.12); border-color:rgba(200,168,75,.26)}

.btn.outline{background:transparent; color:var(--gold); border:1px solid rgba(200,168,75,.48)}
.btn.outline:hover{background:rgba(200,168,75,.08)}

.iconBtn{background:transparent; border:1px solid rgba(200,168,75,.18); color:rgba(255,255,255,.85); border-radius:12px; padding:8px 10px; cursor:pointer}
.iconBtn:hover{background:rgba(200,168,75,.08)}

/* Cards / layout */
.card{
  border:1px solid rgba(200,168,75,.18);
  border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(14,40,65,.50), rgba(14,40,65,.30));
  box-shadow: 0 12px 40px rgba(0,0,0,.25);
}
.card.pad{padding:14px}

.grid{display:grid; gap:14px}
.grid.cols2{grid-template-columns: 1.2fr .8fr}
.grid.cols3{grid-template-columns: repeat(3, 1fr)}

.h1{margin:0; font-size:1.2rem; letter-spacing:.02em}
.h2{margin:0; font-size:1rem; letter-spacing:.02em}
.muted{color:var(--muted)}
.tiny{font-size:.75rem}

.row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.spread{display:flex; justify-content:space-between; align-items:center; gap:10px}

.kpi{
  display:flex; flex-direction:column; gap:8px;
  padding:14px;
}
.kpiLabel{color:var(--muted2); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; font-weight:800}
.kpiValue{font-size:1.35rem; font-weight:900}
.kpiSub{color:var(--muted2); font-size:.78rem}

.badge{display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:999px; font-weight:800; font-size:.70rem; letter-spacing:.12em; text-transform:uppercase; border:1px solid rgba(200,168,75,.2); background:rgba(200,168,75,.08); color:rgba(255,255,255,.85)}
.badge.ok{border-color:rgba(57,217,138,.35); background:rgba(57,217,138,.10)}
.badge.warn{border-color:rgba(255,176,32,.35); background:rgba(255,176,32,.10)}
.badge.danger{border-color:rgba(255,77,77,.35); background:rgba(255,77,77,.10)}

/* Forms */
.form{display:flex; flex-direction:column; gap:12px; margin-top:12px}
.field{display:flex; flex-direction:column; gap:7px}
.label{font-size:.72rem; color:var(--muted2); letter-spacing:.14em; text-transform:uppercase; font-weight:800}
.input, .select, textarea{
  width:100%;
  background:rgba(7,15,24,.65);
  border:1px solid rgba(200,168,75,.18);
  color:#fff;
  border-radius:12px;
  padding:10px 12px;
  outline:none;
}
.input:focus, .select:focus, textarea:focus{border-color:rgba(200,168,75,.42); box-shadow:0 0 0 3px rgba(200,168,75,.10)}
textarea{min-height:90px; resize:vertical}

.msg{min-height:18px; font-weight:700; letter-spacing:.02em; color:rgba(255,255,255,.85)}
.msg.error{color:var(--danger)}

/* Overlay / modals */
.overlay{
  position:fixed; inset:0;
  background:rgba(7,15,24,1);
  display:none;
  align-items:center; justify-content:center;
  padding:16px;
  z-index:9999;
}
.overlay.show{display:flex}

.modalHost{position:fixed; inset:0; display:none; z-index:9998}
.modalHost.show{display:block}
.modalBackdrop{position:absolute; inset:0; background:rgba(7,15,24,.85); backdrop-filter: blur(12px)}
.modal{
  position:relative;
  width:min(720px, 100%);
  margin:60px auto;
  background:linear-gradient(180deg, rgba(7,15,24,.94), rgba(7,15,24,.88));
  border:1px solid rgba(200,168,75,.22);
  border-radius:20px;
  padding:18px;
  box-shadow: var(--shadow);
}
.modal.small{width:min(520px,100%)}
.modalHeader{display:flex; justify-content:space-between; align-items:flex-start; gap:14px; margin-bottom:10px}
.modalTitle{font-weight:900; letter-spacing:.02em; margin:0}
.modalClose{background:rgba(200,168,75,.08); border:1px solid rgba(200,168,75,.18); color:#fff; border-radius:12px; padding:8px 10px; cursor:pointer}
.modalClose:hover{background:rgba(200,168,75,.12)}

.brandRow{display:flex; align-items:center; gap:12px; margin-bottom:10px}
.brandLogo{width:56px; height:56px; border-radius:16px; border:1px solid rgba(200,168,75,.25)}
.brandTitle{font-weight:900; letter-spacing:.06em; text-transform:uppercase}
.brandSub{color:var(--muted2); font-size:.78rem; margin-top:3px}

/* Tables / lists */
.tableWrap{overflow:auto; border-radius:16px; border:1px solid rgba(200,168,75,.12)}
.table{width:100%; border-collapse:collapse; min-width:900px}
.table th, .table td{padding:10px 10px; border-bottom:1px solid rgba(200,168,75,.10); vertical-align:top}
.table th{position:sticky; top:0; background:rgba(7,15,24,.92); font-size:.70rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.70)}
.table td{color:rgba(255,255,255,.85); font-size:.88rem}

/* Search bar */
.searchBar{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.searchBar .input{max-width:420px}

/* Scrum board */
.board{display:grid; grid-template-columns: repeat(5, minmax(240px, 1fr)); gap:12px; overflow:auto; padding-bottom:6px}
.col{
  border:1px solid rgba(200,168,75,.16);
  border-radius:16px;
  background:rgba(7,15,24,.35);
  min-height:420px;
  display:flex; flex-direction:column;
}
.colHead{padding:12px 12px 10px; border-bottom:1px solid rgba(200,168,75,.10); display:flex; justify-content:space-between; align-items:center; gap:10px}
.colTitle{font-weight:900; letter-spacing:.04em}
.colBody{padding:10px; display:flex; flex-direction:column; gap:10px; flex:1}

.taskCard{
  border:1px solid rgba(200,168,75,.16);
  border-radius:14px;
  background:linear-gradient(180deg, rgba(14,40,65,.52), rgba(14,40,65,.28));
  padding:10px 10px;
  cursor:grab;
}
.taskCard:active{cursor:grabbing}
.taskTitle{font-weight:900; margin-bottom:6px}
.taskMeta{display:flex; gap:8px; flex-wrap:wrap; color:var(--muted2); font-size:.78rem}
.taskDesc{color:var(--muted); font-size:.86rem; line-height:1.55; margin-top:6px}

.tree{margin-top:8px; display:flex; flex-direction:column; gap:6px}
.treeNode{display:flex; gap:8px; align-items:flex-start}
.treeNode .nodeCheck{margin-top:3px}
.treeNode .nodeText{flex:1; min-width:0}
.treeNode .nodeTitle{font-weight:800; color:rgba(255,255,255,.88)}
.treeNode .nodeChildren{margin-left:20px; margin-top:6px; display:flex; flex-direction:column; gap:6px}
.treeNode .nodeActions{display:flex; gap:6px; opacity:.75}
.treeNode .nodeActions button{background:transparent; border:1px solid rgba(200,168,75,.14); color:rgba(255,255,255,.78); border-radius:10px; padding:4px 7px; cursor:pointer}
.treeNode .nodeActions button:hover{background:rgba(200,168,75,.10)}

.dropHint{outline:2px dashed rgba(200,168,75,.35); outline-offset:2px}

/* Toasts */
.toasts{position:fixed; right:14px; bottom:14px; display:flex; flex-direction:column; gap:10px; z-index:99999}
.toast{min-width:240px; max-width:360px; padding:12px 12px; border-radius:14px; border:1px solid rgba(200,168,75,.18); background:rgba(7,15,24,.88); box-shadow:0 10px 34px rgba(0,0,0,.45)}
.toastTitle{font-weight:900}
.toastText{color:var(--muted); margin-top:4px; font-size:.86rem; line-height:1.5}

/* Responsive */
@media (max-width: 980px){
  .grid.cols2{grid-template-columns:1fr}
}

@media (max-width: 860px){
  .sidebar{position:fixed; left:0; top:0; bottom:0; height:auto; transform:translateX(-105%); transition:transform .18s ease; z-index:9997}
  .sidebar.open{transform:translateX(0)}
  .main{width:100%}
}

@media (max-width: 520px){
  .topbarTitle{max-width:52vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .board{grid-template-columns: repeat(5, minmax(220px, 1fr))}
  .table{min-width:980px}
}