/* ==========================================================================
   League Alerts — MMA Fantasy Web Admin
   File: /style.css
   ========================================================================== */

/* -------- CSS Reset (condensed) ----------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
html{text-size-adjust:100%}
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}
ul[role='list'],ol[role='list']{list-style:none}
img{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;padding:0}
table{border-collapse:collapse;border-spacing:0}
:focus{outline:none}
:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
[hidden]{display:none!important}

/* -------- Theme tokens -------------------------------------------------- */
:root{
  --bg:#0a0f1a;
  --bg-2:#0f1726;
  --card:rgba(255,255,255,.06);
  --glass:rgba(255,255,255,.08);
  --border:rgba(255,255,255,.12);
  --muted:#9db0c7;          /* slightly brighter for contrast */
  --text:#eaf1ff;
  --title:#ffffff;
  --ring:#22d3ee;

  --primary:#06b6d4;
  --primary-2:#0891b2;
  --danger:#ef4444;
  --warning:#f59e0b;
  --success:#22c55e;

  --shadow:0 10px 30px rgba(0,0,0,.35);
  --radius:16px;
}

/* -------- Base ---------------------------------------------------------- */
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(56,189,248,.15), transparent 60%),
    radial-gradient(900px 600px at 90% 10%, rgba(20,184,166,.12), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg-2));
  min-height:100%;
  line-height:1.45;
}

/* Subtle starfield dots */
body::before{
  content:"";
  position:fixed;inset:0;pointer-events:none;z-index:-1;
  background-image:radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:3px 3px;
  mask-image:radial-gradient(60% 40% at 50% 0%, black, transparent 80%);
}

/* -------- App Layout ---------------------------------------------------- */
.app{display:grid;grid-template-rows:auto 1fr;min-height:100vh}

.app__header{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:14px 22px;
  backdrop-filter:saturate(150%) blur(10px);
  background:linear-gradient(180deg, rgba(15,23,42,.78), rgba(15,23,42,.38));
  border-bottom:1px solid var(--border);
}

.brand{display:flex;align-items:center;gap:12px}
.brand__logo{
  width:44px;height:44px;border-radius:12px;
  background:radial-gradient(60% 60% at 40% 30%, rgba(255,255,255,.2), rgba(255,255,255,0));
  box-shadow:0 8px 20px rgba(34,211,238,.25);
}
.brand__copy{display:flex;flex-direction:column}
.brand__title{font-weight:800;letter-spacing:.2px;color:var(--title);line-height:1}
.brand__subtitle{font-size:12px;color:var(--muted)}

.userbar{display:flex;align-items:center;gap:10px}
.userbar__me{font-size:14px;color:var(--muted)}

.app__body{
  display:grid;grid-template-columns:280px 1fr;gap:18px;padding:18px;
}
@media (max-width:980px){
  .app__body{grid-template-columns:1fr}
  .nav{position:relative;order:2}
}

/* -------- Sidebar ------------------------------------------------------- */
.nav{
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:14px;
  height:fit-content;
}
.nav__group+.nav__group{margin-top:12px;padding-top:12px;border-top:1px dashed var(--border)}
.nav__label{font-size:12px;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);margin:0 8px 8px}
.nav__item{
  width:100%;text-align:left;padding:10px 12px;border-radius:12px;
  color:var(--text);cursor:pointer;transition:.15s transform,.15s background;
}
.nav__item:hover{background:rgba(255,255,255,.07);transform:translateY(-1px)}
.nav__item:active{transform:translateY(0) scale(.99)}

/* -------- Content ------------------------------------------------------- */
.content{display:block}
.panel{animation:fadeIn .25s ease-out both}
.panel--center{display:grid;place-items:center;min-height:calc(100vh - 92px)}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* -------- Cards --------------------------------------------------------- */
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.card--glass{backdrop-filter:blur(10px) saturate(140%)}
.card__header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--border)}

.grid{display:grid;gap:16px}
.grid--cards{grid-template-columns:1fr 1fr}
@media (max-width:1200px){.grid--cards{grid-template-columns:1fr}}
.grid--form{grid-template-columns:1fr 1fr;gap:12px}
.grid--form .field.field--full{grid-column:1/-1}

/* -------- Login --------------------------------------------------------- */
.login{width:min(480px, 92vw);padding:22px}
.login__head{display:grid;place-items:center;gap:8px;margin-bottom:8px}
.login__logo{
  width:64px;height:64px;border-radius:16px;
  background:radial-gradient(50% 50% at 50% 40%, rgba(255,255,255,.25), rgba(255,255,255,0));
  box-shadow:0 10px 30px rgba(34,211,238,.35);
}

/* -------- Forms --------------------------------------------------------- */
.form{display:grid;gap:12px}
.field{display:flex;flex-direction:column;gap:6px}
.field>span,.field>label{font-size:13px;color:var(--muted)}
.input,.field input,.field select,.toolbar input{
  background:rgba(255,255,255,.06);
  border:1px solid var(--border);
  color:var(--text);
  border-radius:12px;
  padding:10px 12px;
  transition:.15s border,.15s box-shadow,.15s background;
}
.input--sm{padding:8px 10px;font-size:14px;border-radius:10px}
.field input::placeholder{color:#9ab0c8}
.field select{
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%, var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 18px) 55%, calc(100% - 13px) 55%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat
}
.field input:focus-visible,.field select:focus-visible{border-color:var(--ring);box-shadow:0 0 0 3px rgba(34,211,238,.25)}
.muted{color:var(--muted);font-size:13px}
.error{color:#ffe1e1;background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.4);padding:8px 10px;border-radius:10px}

/* Inline helpers */
.badge{display:inline-flex;align-items:center;gap:6px;padding:3px 8px;border-radius:999px;border:1px solid var(--border);font-size:12px;background:rgba(255,255,255,.06)}
.badge--ok{border-color:rgba(34,197,94,.35);background:rgba(34,197,94,.14);color:#d2ffd8}
.badge--warn{border-color:rgba(245,158,11,.35);background:rgba(245,158,11,.14);color:#ffe9bf}
.badge--err{border-color:rgba(239,68,68,.4);background:rgba(239,68,68,.14);color:#ffd6d6}
.kbd{background:#0c1425;border:1px solid var(--border);border-bottom-color:#000;padding:2px 6px;border-radius:6px;font-family:ui-monospace,monospace;font-size:12px}

/* Submit buttons inside forms */
[data-submit]{min-width:120px}

/* -------- Buttons -------------------------------------------------------- */
.btn{
  --btn-bg:rgba(255,255,255,.08);
  --btn-bd:var(--border);
  --btn-fg:var(--text);
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 14px;border-radius:12px;border:1px solid var(--btn-bd);
  background:var(--btn-bg);color:var(--btn-fg);cursor:pointer;
  transition:.15s transform,.15s background,.15s border-color,.15s box-shadow;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.99)}
.btn:focus-visible{box-shadow:0 0 0 3px rgba(34,211,238,.25)}
.btn--full{width:100%}
.btn--primary{
  --btn-bg:linear-gradient(180deg,#06b6d4,#0891b2);
  --btn-bd:#0ea5b6;
  --btn-fg:#001016;         /* deeper for better contrast on cyan */
  color:var(--btn-fg);
  box-shadow:0 8px 20px rgba(6,182,212,.35)
}
.btn--ghost{--btn-bg:rgba(255,255,255,.05)}
.btn--danger{
  --btn-bg:linear-gradient(180deg,#ef4444,#b91c1c);
  --btn-bd:#b91c1c;
  --btn-fg:#ffffff;
  color:var(--btn-fg);
  box-shadow:0 8px 20px rgba(239,68,68,.35)
}
.btn--tiny{padding:6px 8px;border-radius:10px;font-size:12px}
.btn--sm{padding:8px 10px;border-radius:10px;font-size:13px}
.btnrow{display:flex;flex-wrap:wrap;gap:8px}

/* -------- Tables --------------------------------------------------------- */
.tablewrap{overflow:auto;max-height:62vh}
.table{width:100%;font-size:14px;border-top:1px solid var(--border)}
.table thead th{
  text-align:left;font-weight:600;color:#d7ebff;
  background:rgba(255,255,255,.05);
  position:sticky;top:0;z-index:1;
  padding:10px 12px;border-bottom:1px solid var(--border)
}
.table tbody td{padding:10px 12px;border-bottom:1px dashed rgba(255,255,255,.1);vertical-align:top}
.table tbody tr{transition:.12s background}
.table tbody tr:hover{background:rgba(255,255,255,.05)}
.table .cell--mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:12px;letter-spacing:.2px}
.table td small{display:block;color:var(--muted);margin-top:2px}

/* Compact pills inside cells */
.pill{display:inline-flex;align-items:center;padding:3px 8px;border-radius:999px;border:1px solid var(--border);background:rgba(255,255,255,.06);font-size:12px;margin:2px 4px 0 0}
.pill--fighter{border-color:rgba(34,211,238,.35);background:rgba(34,211,238,.14);color:#e9fcff}

/* -------- Toolbar -------------------------------------------------------- */
.toolbar{
  display:flex;align-items:center;gap:8px;
  padding:10px 12px;border-bottom:1px solid var(--border);
  background:rgba(255,255,255,.035)
}

/* -------- Modals (<dialog>) --------------------------------------------- */
.modal{padding:0;border:0;background:transparent}
.modal[open]{animation:fadeIn .18s ease-out both}
.modal::backdrop{background:rgba(7,12,20,.6);backdrop-filter:blur(4px)}

.modal__card{
  width:min(820px, 94vw);
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  display:grid;grid-template-rows:auto 1fr auto;
  max-height:85vh;
}
.modal__header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--border)}
.modal__close{
  width:34px;height:34px;border-radius:10px;
  background:rgba(255,255,255,.06);border:1px solid var(--border);cursor:pointer;color:var(--text)
}
.modal__body{padding:14px 16px;overflow:auto}
.modal__footer{display:flex;justify-content:flex-end;gap:10px;padding:12px 16px;border-top:1px solid var(--border)}

/* Wider modals for tables (Users / Event users' picks / Replace) */
#modalUsers .modal__card,
#modalEventUsersPicks .modal__card,
#modalReplacePicks .modal__card{width:min(1080px,96vw)}

/* -------- Toasts --------------------------------------------------------- */
.toasts{position:fixed;right:16px;bottom:16px;display:grid;gap:8px;z-index:100}
.toast{
  background:rgba(15,23,42,.92);color:var(--text);
  border:1px solid var(--border);border-left:4px solid var(--primary);
  padding:10px 12px;border-radius:12px;box-shadow:var(--shadow);min-width:240px;
  animation:slideUp .2s ease-out both;
}
.toast--ok{border-left-color:var(--success)}
.toast--warn{border-left-color:var(--warning)}
.toast--err{border-left-color:var(--danger)}
@keyframes slideUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none)}

/* -------- Utility -------------------------------------------------------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
hr{border:0;border-top:1px dashed var(--border);margin:10px 0;opacity:.7}
code,kbd,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}

/* --- Dark selects for dark theme --------------------------------------- */
.field select,.input.select,.toolbar select{
  background:rgba(255,255,255,.035);
  border-color:rgba(255,255,255,.18);
}
.field select option,.field select optgroup{background-color:#0b1322;color:var(--text)}
.field select:focus-visible{background:rgba(255,255,255,.04);border-color:var(--ring);box-shadow:0 0 0 3px rgba(34,211,238,.22)}

/* -------- NEW: Users & Picks UX ----------------------------------------- */
/* Users table action buttons */
#usersRows .btn--tiny{margin-right:6px}

/* Event → users’ picks list */
#evUsers_rows td[data-col="picks"]{min-width:320px}
#evUsers_rows .pill{margin:2px 6px 0 0}

/* Set exact picks builder */
#set_builder{grid-template-columns:2fr 2fr auto}
#set_list_tbody td[data-col="idx"]{width:36px;text-align:right;color:var(--muted)}
#set_list_tbody td[data-col="fight"] .cell--mono{opacity:.9}
#set_list_tbody td:last-child{width:80px;text-align:right}

/* Compact labels inside tables */
.table td .muted{font-size:12px}

/* Status color helpers */
.status{padding:3px 8px;border-radius:999px;font-size:12px;border:1px solid var(--border)}
.status--upcoming{background:rgba(34,197,94,.14);border-color:rgba(34,197,94,.38);color:#e1ffe6}
.status--locked{background:rgba(245,158,11,.14);border-color:rgba(245,158,11,.4);color:#ffeac3}
.status--closed{background:rgba(148,163,184,.14);border-color:rgba(148,163,184,.4);color:#eef2f7}
.status--cancelled{background:rgba(239,68,68,.14);border-color:rgba(239,68,68,.4);color:#ffdbdb}

/* -------- NEW: Replace picks UI ---------------------------------------- */
/* Mode toolbar hint text color already uses .muted; ensure spacing */
#modalReplacePicks .toolbar{border-top:1px solid rgba(255,255,255,.04);border-bottom-color:rgba(255,255,255,.08)}

/* By fight card */
#rep_by_fight_card{margin-top:12px}
#rep_byfight_tbody td[data-col="idx"]{width:36px;text-align:right;color:var(--muted)}
#rep_byfight_tbody .rep_fight_select{min-width:280px}
#rep_byfight_tbody .rep_newfighter_select{min-width:220px}
#rep_byfight_tbody td:last-child{width:80px;text-align:right}

/* By names card */
#rep_by_name_card{margin-top:12px}
#rep_byname_tbody td[data-col="idx"]{width:36px;text-align:right;color:var(--muted)}
#rep_byname_tbody .rep_from_name,
#rep_byname_tbody .rep_to_name{min-width:200px}
#rep_byname_tbody .rep_opt_fight_select{min-width:220px}
#rep_byname_tbody td:last-child{width:80px;text-align:right}

/* Make the two replace sections visually distinct */
#rep_by_fight_card .card__header h4,
#rep_by_name_card .card__header h4{font-weight:600;color:#eaf7ff}
#rep_by_fight_card{background:linear-gradient(180deg, rgba(34,211,238,.06), rgba(255,255,255,.02))}
#rep_by_name_card{background:linear-gradient(180deg, rgba(56,189,248,.06), rgba(255,255,255,.02))}

/* Responsive tweaks for narrow screens */
@media (max-width:720px){
  .grid--form{grid-template-columns:1fr}
  .toolbar{flex-wrap:wrap}
  .tablewrap{max-height:56vh}
  #set_builder{grid-template-columns:1fr}
  #rep_byfight_tbody .rep_fight_select,
  #rep_byfight_tbody .rep_newfighter_select,
  #rep_byname_tbody .rep_opt_fight_select{min-width:0;width:100%}
}

/* Small helper for mono IDs */
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;letter-spacing:.2px}