/* YEDA Admin — styles (issus de la maquette de conception) */
:root {
  --gold: #ffc727;
  --gold-2: #f5b81c;
  --ink: #0b0b0e;
  --line: #eceef3;
}
html, body { font-family: 'Inter', system-ui, sans-serif; }
.scroll-thin { scrollbar-width: thin; scrollbar-color: #2a2a31 transparent; }
.scroll-thin::-webkit-scrollbar { width: 6px; }
.scroll-thin::-webkit-scrollbar-thumb { background: #2a2a31; border-radius: 6px; }

/* ---------- Sidebar ---------- */
.side-link { display: flex; align-items: center; gap: 14px; padding: 11px 14px; border-radius: 12px; font-size: 14px; font-weight: 500; color: #e6e6ea; transition: background .15s; width: 100%; }
.side-link:hover { background: rgba(255,255,255,.05); }
.side-link.on { background: linear-gradient(180deg, #ffd54a, #f5b81c); color: #111; font-weight: 600; box-shadow: 0 8px 20px rgba(255,199,39,.2); }
.side-link .chev { margin-left: auto; transition: transform .2s; opacity: .7; }
.side-group.open > .side-link .chev { transform: rotate(180deg); }
.side-sub { display: none; margin: 2px 0 6px 26px; padding-left: 20px; border-left: 1px solid rgba(255,255,255,.1); }
.side-group.open > .side-sub { display: block; }
.side-sub a { display: block; padding: 7px 0; font-size: 13.5px; color: #b9b9c2; }
.side-sub a:hover { color: #fff; }
body.collapsed #sidebar { width: 84px; }
body.collapsed #sidebar .hide-collapsed { display: none; }
body.collapsed #sidebar .side-sub { display: none !important; }
body.collapsed #sidebar .side-link { justify-content: center; }

.promo {
  background: radial-gradient(90% 70% at 70% 100%, rgba(255,199,39,.35), transparent 60%), linear-gradient(160deg, #1a1a1f, #0b0b0e);
  border: 1px solid rgba(255,199,39,.25);
}

/* ---------- Cards ---------- */
.panel { background: #fff; border: 1px solid var(--line); border-radius: 16px; }
.panel-title { font-size: 16px; font-weight: 700; color: #111; }
.link-more { font-size: 12px; color: #2563eb; font-weight: 500; }
.kpi-icon { flex-shrink: 0; width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; }

.tab-period { padding: 8px 16px; border-radius: 10px; font-size: 13px; font-weight: 500; background: #fff; border: 1px solid var(--line); color: #333; }
.tab-period.on { background: linear-gradient(180deg, #ffd54a, #f5b81c); border-color: transparent; color: #111; font-weight: 600; }

.select { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 12.5px; font-weight: 500; background: #fff; }

.t-head th { font-size: 11.5px; font-weight: 500; color: #8a8f99; text-align: left; padding: 8px 7px; white-space: nowrap; background: #f7f8fa; }
.t-head th:first-child { border-radius: 8px 0 0 8px; }
.t-head th:last-child { border-radius: 0 8px 8px 0; }
.t-body td { padding: 8px 7px; font-size: 12.5px; border-bottom: 1px solid #f2f3f6; }
.t-body tr:last-child td { border-bottom: 0; }

.pill { display: inline-block; font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 8px; white-space: nowrap; }
.pill-ok { background: #e8f8ee; color: #16a34a; }
.pill-wait { background: #fff4d6; color: #b7791f; }
.pill-review { background: #e8f0ff; color: #2563eb; }

.qa { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; font-size: 12.5px; font-weight: 500; line-height: 1.3; transition: border-color .15s, box-shadow .15s; }
.qa:hover { border-color: var(--gold); box-shadow: 0 4px 14px rgba(255,199,39,.15); }
.qa-ico { width: 36px; height: 36px; border-radius: 99px; background: #fff4d0; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

.dotmap span { position: absolute; width: 3px; height: 3px; border-radius: 99px; background: #d9dce3; }
.dotmap span.hot { background: #ffc727; box-shadow: 0 0 6px 2px rgba(255,199,39,.7); width: 5px; height: 5px; }

/* ---------- Login ---------- */
.login-bg {
  background:
    radial-gradient(60% 50% at 30% 100%, rgba(255,170,20,.35), transparent 60%),
    radial-gradient(40% 40% at 55% 45%, rgba(255,199,39,.18), transparent 70%),
    #060607;
}
.streak { position: fixed; pointer-events: none; background: linear-gradient(115deg, transparent 40%, rgba(255,199,39,.45) 49%, rgba(255,235,160,.8) 50%, rgba(255,199,39,.3) 51%, transparent 60%); filter: blur(1px); }
.glass { background: linear-gradient(180deg, rgba(30,30,34,.92), rgba(16,16,19,.94)); border: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(12px); }
.coin3d { border-radius: 999px; display: flex; align-items: center; justify-content: center; box-shadow: inset -10px -12px 24px rgba(0,0,0,.35), inset 8px 10px 18px rgba(255,255,255,.35), 0 25px 50px rgba(0,0,0,.55); }
.float { animation: float 5s ease-in-out infinite; }
.float-2 { animation: float 5s ease-in-out -2.5s infinite; }
@keyframes float { 0%,100% { transform: translateY(0) rotate(var(--r,0deg)); } 50% { transform: translateY(-12px) rotate(var(--r,0deg)); } }
.bank-card { background: linear-gradient(135deg, #1d1d22, #0b0b0d 55%, #28282e); border: 1px solid rgba(255,199,39,.55); box-shadow: 0 25px 50px rgba(0,0,0,.6); }
.phone { background: #0b0b0e; border: 8px solid #1c1c21; box-shadow: 0 0 0 2px #333, 0 40px 80px rgba(0,0,0,.7); }
.globe {
  background: radial-gradient(circle at 35% 30%, #3a2d10 0%, #17130a 40%, #050505 70%);
  box-shadow: inset -30px -20px 80px rgba(0,0,0,.9), 0 -10px 80px rgba(255,170,20,.35);
}

.login-field { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px; border-radius: 12px; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.1); transition: border-color .15s, box-shadow .15s; }
.login-field:focus-within { border-color: #ffc727; box-shadow: 0 0 0 3px rgba(255,199,39,.15); }
.login-field input { flex: 1; min-width: 0; background: transparent; outline: none; font-size: 14px; color: #fff; }
.login-field input::placeholder { color: rgba(255,255,255,.3); }

/* ---------- Pages de liste (pages.js) ---------- */
.side-sub a.on { color: #ffc727; font-weight: 600; }
.btn-gold, .btn-light, .btn-danger { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 10px; font-size: 13px; font-weight: 600; white-space: nowrap; transition: filter .15s, background .15s; }
.btn-gold { background: linear-gradient(180deg, #ffd54a, #f5b81c); color: #111; box-shadow: 0 4px 12px rgba(255,199,39,.25); }
.btn-gold:hover { filter: brightness(1.04); }
.btn-light { background: #fff; border: 1px solid #e3e5ea; color: #222; }
.btn-light:hover { background: #f7f8fa; }
.btn-danger { background: #fdecec; border: 1px solid #f8c9c9; color: #dc2626; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 9px; font-size: 13px; font-weight: 500; color: #555; }
.chip:hover { background: #f5f6f8; }
.chip.on { background: #111; color: #fff; }
.chip-count { font-size: 11px; padding: 0 6px; border-radius: 99px; background: rgba(0,0,0,.07); }
.chip.on .chip-count { background: #ffc727; color: #111; }
.select-input { height: 38px; padding: 0 10px; border: 1px solid #e3e5ea; border-radius: 10px; font-size: 13px; background: #fff; outline: none; }
.search-input { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border: 1px solid #e3e5ea; border-radius: 10px; min-width: 200px; }
.search-input input { outline: none; font-size: 13px; flex: 1; min-width: 0; }
.select-input:focus, .search-input:focus-within, .text-input:focus, .text-area:focus { border-color: #ffc727; box-shadow: 0 0 0 3px rgba(255,199,39,.15); }
.list-table th { font-size: 11.5px; font-weight: 500; color: #8a8f99; text-align: left; padding: 10px 16px; background: #f9fafb; white-space: nowrap; border-bottom: 1px solid #eceef3; }
.list-table td { padding: 11px 16px; font-size: 13px; border-bottom: 1px solid #f2f3f6; vertical-align: middle; }
.list-table tbody tr:last-child td { border-bottom: 0; }
.list-table tbody tr.cursor-pointer:hover { background: #fffbeb; }
.pg { min-width: 32px; height: 32px; padding: 0 8px; border-radius: 8px; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; color: #333; }
.pg:hover:not(:disabled) { background: #f2f3f6; }
.pg.on { background: #111; color: #fff; font-weight: 600; }
.pg:disabled { opacity: .35; }
.tag { display: inline-block; font-size: 11px; padding: 3px 8px; border-radius: 6px; background: #f1f2f5; color: #444; white-space: nowrap; }
.pill-err { background: #fdecec; color: #dc2626; }
.pill-mute { background: #f1f2f5; color: #6b7280; }
.text-input, .text-area { width: 100%; border: 1px solid #e3e5ea; border-radius: 10px; padding: 9px 12px; font-size: 14px; outline: none; background: #fff; }
.text-input:disabled { background: #f7f8fa; color: #888; }
.switch { position: relative; display: inline-block; width: 40px; height: 22px; flex-shrink: 0; cursor: pointer; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch span { position: absolute; inset: 0; background: #d9dce3; border-radius: 99px; transition: background .2s; }
.switch span::before { content: ''; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px; background: #fff; border-radius: 99px; transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.switch input:checked + span { background: #f5b81c; }
.switch input:checked + span::before { transform: translateX(18px); }
.set-tab { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; font-size: 14px; color: #444; }
.set-tab:hover { background: #f5f6f8; }
.set-tab.on { background: #fff4d0; color: #8a5a00; font-weight: 600; }
.yeda-card-lg { border-radius: 16px; padding: 20px; color: #fff; background: linear-gradient(135deg, #1d1d22, #0b0b0d 55%, #28282e); border: 1px solid rgba(255,199,39,.5); box-shadow: 0 14px 30px rgba(0,0,0,.25); }

/* Tableaux compacts (liste des moyens de paiement, taux…) */
.list-table.compact th { padding: 7px 12px; font-size: 11px; }
.list-table.compact td { padding: 6px 12px; font-size: 12.5px; line-height: 1.25; }
.list-table.compact td .text-\[11px\] { font-size: 10.5px; }