/* Too Fighters — admin back office */

:root{
  --c-black:#000; --c-white:#fff; --c-yellow:#FFF000; --c-cream:#f5efdf;
  --c-accent:#520101; --c-grey:#9a9a9a;
  --bg:#0a0a0a; --panel:#141414; --panel2:#1c1c1c;
  --line:rgba(255,255,255,.14);
  --f:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
body{
  margin:0;background:var(--bg);color:#eee;
  font-family:var(--f);font-size:15px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--c-yellow)}
:focus-visible{outline:2px solid var(--c-yellow);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ------------------------------------------------------------------ shell */

.shell{display:grid;grid-template-columns:232px 1fr;min-height:100vh}

.side{
  background:#000;border-right:1px solid var(--line);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;
}
.side-brand{
  display:flex;align-items:center;gap:10px;padding:18px 16px;
  color:#fff;text-decoration:none;border-bottom:1px solid var(--line);
}
.side-brand span{font-weight:800;font-size:14px;text-transform:uppercase;letter-spacing:.04em;line-height:1.15}
.side-brand small{display:block;font-size:10px;font-weight:600;color:var(--c-grey);letter-spacing:.16em}

.side-nav{display:flex;flex-direction:column;padding:10px 0;flex:1;overflow-y:auto}
.side-nav a{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:11px 18px;color:#cfcfcf;text-decoration:none;
  font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  border-left:3px solid transparent;
}
.side-nav a:hover{background:#111;color:#fff}
.side-nav a.is-active{background:#141414;color:var(--c-yellow);border-left-color:var(--c-yellow)}
.side-nav em{
  font-style:normal;background:var(--c-accent);color:#fff;
  font-size:11px;padding:1px 7px;border-radius:9px;
}

.side-foot{padding:14px 18px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.side-foot a{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;text-decoration:none;color:#bdbdbd}
.side-foot a:hover{color:var(--c-yellow)}

.content{padding:26px 30px 70px;max-width:1080px}
.admin-title{
  font-size:22px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;
  margin:0 0 20px;padding-bottom:14px;border-bottom:1px solid var(--line);
}

/* ------------------------------------------------------------------ cards */

.card{
  background:var(--panel);border:1px solid var(--line);
  padding:22px;margin-bottom:24px;
}
.card > h2{
  font-size:14px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;
  margin:0 0 18px;color:#fff;
}
.card > h2 .muted{font-weight:600;color:var(--c-grey);text-transform:none;letter-spacing:0}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:0 20px}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:26px}
.stat{background:var(--panel);border:1px solid var(--line);padding:16px 18px}
.stat b{display:block;font-size:30px;font-weight:800;line-height:1;color:var(--c-yellow)}
.stat span{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--c-grey);margin-top:7px;font-weight:700}

/* ------------------------------------------------------------------ forms */

.form-row{margin-bottom:16px}
.form-row label{
  display:block;font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;color:#bfbfbf;margin-bottom:6px;
}
.req{color:var(--c-yellow)}
.input,.textarea,.select{
  width:100%;background:#0b0b0b;border:1px solid var(--line);color:#fff;
  font-family:var(--f);font-size:15px;padding:10px 12px;
}
.input:focus,.textarea:focus,.select:focus{border-color:var(--c-yellow);outline:none}
.textarea{resize:vertical;min-height:110px;line-height:1.6}
.input[type=file]{padding:8px;font-size:13px}
.hint{font-size:12px;color:#8d8d8d;margin:5px 0 0;line-height:1.45}
.hint code{background:#000;padding:1px 5px;font-size:11px}

.check{display:flex;align-items:center;gap:9px;text-transform:none;letter-spacing:0;font-size:14px;color:#ddd;font-weight:600}
.check input{width:17px;height:17px;accent-color:var(--c-yellow);margin:0}

.thumb-row{display:flex;align-items:center;gap:14px;margin-bottom:10px;flex-wrap:wrap}
.thumb{width:104px;height:104px;object-fit:cover;border:1px solid var(--line);background:#000}

.actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}

.btn{
  display:inline-block;background:var(--c-cream);color:#000;border:1px solid #000;
  font-family:var(--f);font-size:13px;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;padding:11px 20px;cursor:pointer;text-decoration:none;
  transition:background .15s ease;
}
.btn:hover{background:var(--c-yellow)}
.btn-sm{padding:7px 12px;font-size:11px}
.btn-ghost{background:transparent;color:#ddd;border-color:var(--line)}
.btn-ghost:hover{background:#fff;color:#000}
.btn-danger{background:transparent;color:#ff8b9d;border-color:#7a2233}
.btn-danger:hover{background:#c8102e;color:#fff;border-color:#c8102e}

/* ----------------------------------------------------------------- tables */

.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{
  text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.11em;
  color:var(--c-grey);padding:0 12px 9px;border-bottom:1px solid var(--line);font-weight:700;
}
.tbl td{padding:13px 12px;border-bottom:1px solid rgba(255,255,255,.07);vertical-align:middle}
.tbl tr:hover td{background:#111}
.tbl .nowrap{white-space:nowrap}
.tbl .row-actions{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}
.tbl img.mini{width:58px;height:38px;object-fit:cover;background:#000;border:1px solid var(--line)}
.tbl strong{font-weight:800}
.tbl .sub{display:block;font-size:12px;color:#8f8f8f;margin-top:2px}

.pill{
  display:inline-block;font-size:10px;font-weight:800;text-transform:uppercase;
  letter-spacing:.08em;padding:3px 8px;border:1px solid;
}
.pill-live{color:#8ce99a;border-color:#2f7a3f;background:rgba(47,122,63,.16)}
.pill-draft{color:#ffd166;border-color:#8a6d1f;background:rgba(138,109,31,.16)}
.pill-past{color:#9a9a9a;border-color:#444;background:#151515}
.pill-new{color:#fff;border-color:var(--c-accent);background:var(--c-accent)}
.pill-sold{color:#fff;border-color:#c8102e;background:#c8102e}

.empty-row{padding:34px;text-align:center;color:#8a8a8a;border:1px dashed var(--line);font-size:14px}

/* --------------------------------------------------------------- notices */

.notice{padding:12px 16px;font-size:14px;font-weight:600;margin-bottom:20px;border:1px solid}
.notice-ok{background:rgba(46,125,50,.16);border-color:#2e7d32;color:#bff0c2}
.notice-err{background:rgba(200,16,46,.14);border-color:#c8102e;color:#ffc4cd}
.notice-info{background:rgba(255,240,0,.09);border-color:#8d8600;color:#f2ecaa}
.notice code{background:rgba(0,0,0,.45);padding:2px 7px;font-size:13px;word-break:break-all}

/* --------------------------------------------------------- login / setup */

body.gate{display:grid;place-items:center;min-height:100vh;padding:24px}
.gate-card{
  width:100%;max-width:430px;background:var(--panel);
  border:1px solid var(--line);padding:34px;
}
.gate-logo{margin:0 auto 18px;border-radius:50%}
.gate-card h1{
  font-size:19px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;
  text-align:center;margin:0 0 22px;
}
.gate-card .btn{width:100%;text-align:center}
.gate-back{display:block;text-align:center;margin-top:18px;font-size:12px;color:#8d8d8d;text-decoration:none;text-transform:uppercase;letter-spacing:.08em;font-weight:700}
.gate-back:hover{color:var(--c-yellow)}

/* ------------------------------------------------------------ responsive */

@media (max-width:860px){
  .shell{grid-template-columns:1fr}
  .side{position:static;height:auto;flex-direction:column}
  .side-nav{flex-direction:row;flex-wrap:wrap;padding:8px}
  .side-nav a{border-left:0;border-bottom:3px solid transparent;padding:9px 12px}
  .side-nav a.is-active{border-left:0;border-bottom-color:var(--c-yellow)}
  .side-foot{flex-direction:row;gap:18px}
  .content{padding:20px 16px 60px}
  .grid2,.grid3{grid-template-columns:1fr}
  .tbl,.tbl tbody,.tbl tr,.tbl td{display:block;width:100%}
  .tbl thead{display:none}
  .tbl tr{border:1px solid var(--line);margin-bottom:12px;padding:8px;background:var(--panel)}
  .tbl td{border:0;padding:6px 8px}
  .tbl .row-actions{justify-content:flex-start;margin-top:6px}
}