/* ============================================================
   FixturePro — main.css
   ============================================================ */

:root {
  --bg: #0a0c10;
  --surface: #111318;
  --surface2: #181c24;
  --border: #232836;
  --accent: #f5a623;
  --accent2: #e8365d;
  --accent3: #00d4aa;
  --purple: #7c6af5;
  --text: #e8ecf4;
  --muted: #6b7385;
  --win: #00d4aa;
  --draw: #f5a623;
  --loss: #e8365d;
  --sidebar-w: 220px;
  --header-h: 60px;
}

*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: 'DM Sans', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  font-size: 15px;
  line-height: 1.6;
}

/* ---- NOISE OVERLAY ---- */
body::after {
  content:'';
  position:fixed;inset:0;pointer-events:none;z-index:9999;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
}

/* ---- HEADER ---- */
.site-header {
  position: fixed; top:0; left:0; right:0; z-index:200;
  height: var(--header-h);
  background: rgba(10,12,16,0.95);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 1.5rem;
}

.logo {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.55rem; letter-spacing: .08em;
  color: var(--text); text-decoration: none;
  display: flex; align-items: center; gap: .4rem;
}
.logo span { color: var(--accent); }

.header-nav { display:flex; align-items:center; gap:.7rem; }

.nav-user {
  font-size:.82rem; color:var(--muted);
  display:flex; align-items:center; gap:.4rem;
}
.user-dot {
  width:8px;height:8px;border-radius:50%;
  background:var(--accent3);
  box-shadow:0 0 6px var(--accent3);
}
.user-dot.admin { background:var(--accent); box-shadow:0 0 6px var(--accent); }

/* ---- SIDEBAR ---- */
.side-nav {
  position: fixed;
  top: var(--header-h); left:0; bottom:0;
  width: var(--sidebar-w);
  background: var(--surface);
  border-right: 1px solid var(--border);
  z-index: 100; overflow-y: auto;
}
.side-nav-inner { padding: 1.2rem 0.7rem; display:flex; flex-direction:column; gap:.2rem; }

.side-link {
  display: flex; align-items: center; gap:.7rem;
  padding: .6rem .85rem;
  border-radius: 8px;
  color: var(--muted); font-size:.84rem; font-weight:500;
  text-decoration: none; transition: all .18s;
}
.side-link:hover { background:var(--surface2); color:var(--text); }
.side-link.active { background:rgba(245,166,35,.12); color:var(--accent); }
.side-icon { font-size:1rem; width:20px; text-align:center; }

/* ---- LAYOUT ---- */
.page-wrap { margin-top: var(--header-h); }
.page-wrap.with-sidebar { margin-left: var(--sidebar-w); }

.main-content { padding: 2rem 2rem 3rem; max-width: 1100px; }

/* ---- PAGE HEADER ---- */
.page-header {
  display:flex; align-items:flex-start; justify-content:space-between;
  margin-bottom: 1.8rem; flex-wrap:wrap; gap:1rem;
}
.page-title {
  font-family:'Bebas Neue',sans-serif;
  font-size:2rem; letter-spacing:.06em; line-height:1;
}
.page-subtitle {
  font-size:.78rem; color:var(--muted); margin-top:.3rem;
  letter-spacing:.04em;
}

/* ---- CARDS ---- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px; padding:1.5rem;
  margin-bottom: 1.5rem;
}
.card-title {
  font-family:'Bebas Neue',sans-serif;
  font-size:1rem; letter-spacing:.08em;
  color:var(--accent); margin-bottom:1.1rem;
}
.card-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:1rem; margin-bottom:1.5rem;
}

/* ---- STAT CARDS ---- */
.stat-card {
  background:var(--surface);border:1px solid var(--border);
  border-radius:12px;padding:1.2rem 1.4rem;
  position:relative;overflow:hidden;
}
.stat-card::before {
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
}
.stat-card.c1::before{background:var(--accent);}
.stat-card.c2::before{background:var(--accent2);}
.stat-card.c3::before{background:var(--accent3);}
.stat-card.c4::before{background:var(--purple);}
.stat-num {
  font-family:'Bebas Neue',sans-serif;font-size:2.4rem;line-height:1;
}
.stat-label {
  font-size:.72rem;color:var(--muted);margin-top:.3rem;
  text-transform:uppercase;letter-spacing:.06em;
}

/* ---- TABLE ---- */
.table-wrap { overflow-x:auto; }
table { width:100%;border-collapse:collapse;font-size:.87rem; }
th {
  font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--muted);padding:.6rem .8rem;text-align:left;
  border-bottom:1px solid var(--border);font-weight:600;
  white-space:nowrap;
}
td {
  padding:.72rem .8rem;
  border-bottom:1px solid rgba(35,40,54,.5);
  vertical-align:middle;
}
tr:last-child td{border-bottom:none;}
tbody tr:hover td{background:rgba(255,255,255,.02);}
.mono{font-family:'JetBrains Mono',monospace;font-size:.82rem;}
.pts{font-family:'JetBrains Mono',monospace;font-size:.9rem;font-weight:700;color:var(--accent);}

.team-cell{display:flex;align-items:center;gap:.65rem;}
.team-badge{
  width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:.62rem;font-weight:700;flex-shrink:0;
}
.team-name-text{font-weight:500;}

/* rank col */
.rank{font-family:'JetBrains Mono',monospace;font-size:.76rem;color:var(--muted);width:28px;}

/* ---- FORM RESULT DOTS ---- */
.form-dots{display:inline-flex;gap:2px;}
.fdot{
  width:18px;height:18px;border-radius:3px;
  font-size:.58rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.fd-w{background:rgba(0,212,170,.12);color:var(--win);}
.fd-d{background:rgba(245,166,35,.12);color:var(--draw);}
.fd-l{background:rgba(232,54,93,.12);color:var(--loss);}

/* ---- FIXTURES ---- */
.fixture-item {
  display:flex;align-items:center;gap:1rem;
  padding:1rem 1.2rem;
  border:1px solid var(--border);border-radius:10px;
  margin-bottom:.65rem;background:var(--surface);
  transition:border-color .2s,transform .15s;
  cursor:pointer;text-decoration:none;color:inherit;
}
.fixture-item:hover{border-color:var(--accent);transform:translateY(-1px);}
.fixture-date{font-family:'JetBrains Mono',monospace;font-size:.73rem;color:var(--muted);min-width:90px;}
.fixture-teams{flex:1;display:flex;align-items:center;justify-content:center;gap:1rem;}
.fixture-team{display:flex;align-items:center;gap:.5rem;font-weight:500;font-size:.9rem;}
.fixture-team.right{flex-direction:row-reverse;}
.fixture-score{
  font-family:'Bebas Neue',sans-serif;font-size:1.45rem;letter-spacing:.04em;
  min-width:68px;text-align:center;
}
.fixture-score.pending{color:var(--muted);font-size:1rem;font-family:'DM Sans',sans-serif;}
.fixture-stage{font-size:.68rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;min-width:80px;text-align:right;}

/* ---- BADGES ---- */
.badge{
  display:inline-block;padding:2px 9px;border-radius:4px;
  font-size:.68rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
}
.badge-live{background:rgba(232,54,93,.14);color:var(--accent2);border:1px solid rgba(232,54,93,.3);}
.badge-scheduled{background:rgba(107,115,133,.14);color:var(--muted);border:1px solid var(--border);}
.badge-done{background:rgba(0,212,170,.1);color:var(--accent3);border:1px solid rgba(0,212,170,.2);}
.badge-admin{background:rgba(245,166,35,.14);color:var(--accent);border:1px solid rgba(245,166,35,.3);}
.badge-user{background:rgba(107,115,133,.14);color:var(--muted);border:1px solid var(--border);}

/* ---- BUTTONS ---- */
.btn{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.65rem 1.3rem;border-radius:8px;border:none;
  font-family:'DM Sans',sans-serif;font-size:.84rem;font-weight:600;
  cursor:pointer;transition:all .2s;text-decoration:none;
  letter-spacing:.02em;line-height:1;
}
.btn-primary{background:var(--accent);color:#000;}
.btn-primary:hover{background:#fbb84a;transform:translateY(-1px);}
.btn-danger{background:rgba(232,54,93,.14);color:var(--accent2);border:1px solid rgba(232,54,93,.3);}
.btn-danger:hover{background:rgba(232,54,93,.25);}
.btn-ghost{background:transparent;color:var(--muted);border:1px solid var(--border);}
.btn-ghost:hover{color:var(--text);border-color:var(--text);}
.btn-success{background:rgba(0,212,170,.14);color:var(--accent3);border:1px solid rgba(0,212,170,.3);}
.btn-success:hover{background:rgba(0,212,170,.25);}
.btn-sm{padding:.4rem .9rem;font-size:.78rem;}
.btn-icon{padding:.5rem;width:34px;height:34px;justify-content:center;}

/* ---- FORMS ---- */
.form-group{margin-bottom:1rem;}
label,.form-label{
  display:block;font-size:.72rem;text-transform:uppercase;
  letter-spacing:.07em;color:var(--muted);margin-bottom:.35rem;font-weight:600;
}
input,select,textarea{
  width:100%;background:var(--surface2);
  border:1px solid var(--border);border-radius:8px;
  padding:.65rem .9rem;color:var(--text);
  font-family:'DM Sans',sans-serif;font-size:.9rem;
  transition:border-color .2s;outline:none;
  -webkit-appearance:none;
}
input:focus,select:focus,textarea:focus{border-color:var(--accent);}
input::placeholder,textarea::placeholder{color:var(--muted);}
select option{background:var(--surface2);}
textarea{resize:vertical;min-height:90px;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
.form-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem;}
.form-error{font-size:.78rem;color:var(--accent2);margin-top:.3rem;}
.form-success{font-size:.78rem;color:var(--accent3);margin-top:.3rem;}

/* ---- SCORE INPUT ---- */
.score-pair{display:flex;align-items:center;gap:1rem;margin:1rem 0;}
.score-pair input{text-align:center;font-family:'Bebas Neue',sans-serif;font-size:2rem;padding:.4rem;}
.score-vs{color:var(--muted);font-weight:700;font-size:1.1rem;flex-shrink:0;}
.score-team-label{font-size:.78rem;color:var(--muted);text-align:center;margin-bottom:.3rem;}

/* ---- AUTH PAGES ---- */
.auth-wrap{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:2rem;
  background: radial-gradient(ellipse at 30% 40%, rgba(245,166,35,.06) 0%, transparent 60%),
              radial-gradient(ellipse at 70% 70%, rgba(0,212,170,.05) 0%, transparent 60%);
}
.auth-box{
  background:var(--surface);border:1px solid var(--border);
  border-radius:16px;padding:2.5rem;width:100%;max-width:440px;
}
.auth-logo{
  font-family:'Bebas Neue',sans-serif;font-size:2rem;letter-spacing:.08em;
  text-align:center;margin-bottom:1.8rem;
}
.auth-logo span{color:var(--accent);}
.auth-title{font-size:1.1rem;font-weight:600;margin-bottom:.3rem;}
.auth-sub{font-size:.82rem;color:var(--muted);margin-bottom:1.5rem;}
.auth-footer{text-align:center;font-size:.82rem;color:var(--muted);margin-top:1.2rem;}
.auth-footer a{color:var(--accent);text-decoration:none;}
.auth-footer a:hover{text-decoration:underline;}

/* ---- ALERT ---- */
.alert{
  padding:.8rem 1rem;border-radius:8px;font-size:.84rem;
  margin-bottom:1rem;border:1px solid transparent;
}
.alert-error{background:rgba(232,54,93,.1);border-color:rgba(232,54,93,.3);color:var(--accent2);}
.alert-success{background:rgba(0,212,170,.1);border-color:rgba(0,212,170,.3);color:var(--accent3);}
.alert-info{background:rgba(245,166,35,.08);border-color:rgba(245,166,35,.25);color:var(--accent);}

/* ---- TOAST ---- */
.toast{
  position:fixed;bottom:1.5rem;right:1.5rem;
  background:var(--surface2);border:1px solid var(--border);
  border-left:3px solid var(--accent3);border-radius:10px;
  padding:.8rem 1.2rem;font-size:.84rem;z-index:9999;
  transform:translateX(130%);transition:transform .3s ease;
  max-width:300px;pointer-events:none;
}
.toast.show{transform:translateX(0);}
.toast-title{font-weight:600;margin-bottom:.15rem;}
.toast-msg{color:var(--muted);font-size:.76rem;}

/* ---- BRACKET ---- */
.bracket-wrap{display:flex;gap:2rem;overflow-x:auto;padding-bottom:1rem;align-items:flex-start;}
.bracket-round{flex:0 0 200px;}
.bracket-label{
  font-family:'Bebas Neue',sans-serif;font-size:.82rem;
  letter-spacing:.1em;color:var(--muted);margin-bottom:.8rem;text-align:center;
}
.bracket-match{
  border:1px solid var(--border);border-radius:8px;
  overflow:hidden;margin-bottom:1.6rem;background:var(--surface);
}
.bracket-team{
  padding:.5rem .7rem;display:flex;justify-content:space-between;
  align-items:center;font-size:.82rem;transition:background .2s;
}
.bracket-team:first-child{border-bottom:1px solid var(--border);}
.bracket-team.winner{background:rgba(0,212,170,.08);color:var(--accent3);font-weight:600;}
.bracket-score{font-family:'JetBrains Mono',monospace;font-size:.76rem;}

/* ---- TEAM GRID ---- */
.team-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(195px,1fr));gap:1rem;}
.team-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:12px;padding:1.3rem;text-align:center;
  cursor:pointer;transition:all .2s;text-decoration:none;color:inherit;
}
.team-card:hover{border-color:var(--accent);transform:translateY(-2px);}
.team-icon{
  width:52px;height:52px;border-radius:50%;
  margin:0 auto .8rem;
  display:flex;align-items:center;justify-content:center;
  font-size:1.15rem;font-weight:800;
}
.team-card-name{font-weight:600;font-size:.9rem;margin-bottom:.4rem;}
.team-card-meta{font-size:.72rem;color:var(--muted);margin-bottom:.65rem;}
.team-card-stats{display:flex;gap:.5rem;justify-content:center;}
.tcs{font-size:.73rem;color:var(--muted);}
.tcs strong{color:var(--text);font-weight:600;}

/* ---- STAT BARS ---- */
.stat-bar-row{margin-bottom:.9rem;}
.stat-bar-label{display:flex;justify-content:space-between;font-size:.78rem;margin-bottom:.28rem;}
.stat-bar-track{height:5px;background:var(--border);border-radius:3px;overflow:hidden;}
.stat-bar-fill{height:100%;border-radius:3px;background:var(--accent3);transition:width .6s ease;}

/* ---- FILTERS ---- */
.filters{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.2rem;}
.filter-chip{
  padding:4px 13px;border-radius:20px;font-size:.76rem;font-weight:500;
  border:1px solid var(--border);background:transparent;
  color:var(--muted);cursor:pointer;transition:all .2s;
  font-family:'DM Sans',sans-serif;
}
.filter-chip.active,.filter-chip:hover{
  background:rgba(245,166,35,.1);border-color:var(--accent);color:var(--accent);
}

/* ---- TABS ---- */
.tabs{display:flex;gap:.4rem;margin-bottom:1.3rem;flex-wrap:wrap;}
.tab-btn{
  padding:.45rem 1.1rem;border-radius:6px;font-size:.8rem;font-weight:600;
  border:1px solid var(--border);color:var(--muted);background:transparent;
  cursor:pointer;font-family:'DM Sans',sans-serif;transition:all .2s;
}
.tab-btn.active{background:var(--surface2);border-color:var(--accent);color:var(--accent);}
.tab-panel{display:none;}
.tab-panel.active{display:block;}

/* ---- EMPTY STATE ---- */
.empty{text-align:center;padding:3rem 1rem;color:var(--muted);}
.empty-icon{font-size:2.5rem;margin-bottom:.7rem;}
.empty-text{font-size:.88rem;}

/* ---- FILE INPUT ---- */
.file-label{
  display:flex;align-items:center;gap:.7rem;
  padding:.65rem .9rem;background:var(--surface2);
  border:1px dashed var(--border);border-radius:8px;
  cursor:pointer;color:var(--muted);font-size:.85rem;
  transition:border-color .2s;
}
.file-label:hover{border-color:var(--accent);color:var(--text);}
input[type="file"]{display:none;}

/* ---- DIVIDER ---- */
hr.divider{border:none;border-top:1px solid var(--border);margin:1.2rem 0;}

/* ---- SCORE RESULT DISPLAY ---- */
.match-result-display{
  display:flex;justify-content:center;align-items:center;
  gap:2rem;padding:1.5rem 0;
}
.match-result-side{text-align:center;}
.match-result-score{
  font-family:'Bebas Neue',sans-serif;font-size:3rem;line-height:1;
}
.match-result-label{font-size:.78rem;color:var(--muted);margin-top:.3rem;}
.match-result-sep{font-family:'Bebas Neue',sans-serif;font-size:1.1rem;color:var(--muted);}

/* ---- TOP SCORER ROW ---- */
.scorer-row{display:flex;align-items:center;gap:.7rem;margin-bottom:.85rem;}
.scorer-rank{font-family:'Bebas Neue',sans-serif;font-size:1.1rem;color:var(--muted);width:20px;}
.scorer-info{flex:1;}
.scorer-name{font-weight:500;font-size:.87rem;}
.scorer-team{font-size:.72rem;color:var(--muted);}
.scorer-goals{font-family:'Bebas Neue',sans-serif;font-size:1.5rem;color:var(--accent);}

/* ---- ADMIN IMPORT ---- */
.import-zone{
  border:2px dashed var(--border);border-radius:12px;
  padding:2.5rem;text-align:center;cursor:pointer;
  transition:border-color .2s,background .2s;
}
.import-zone:hover,.import-zone.dragover{
  border-color:var(--accent);background:rgba(245,166,35,.04);
}
.import-icon{font-size:2.5rem;margin-bottom:.8rem;}
.import-text{font-size:.88rem;color:var(--muted);}
.import-text strong{color:var(--accent);}

/* ---- RESPONSIVE ---- */
@media(max-width:900px){
  .side-nav{transform:translateX(-100%);transition:transform .3s;}
  .side-nav.open{transform:translateX(0);}
  .page-wrap.with-sidebar{margin-left:0;}
  .site-header{padding:0 1rem;}
  .main-content{padding:1.2rem 1rem;}
  .form-row,.form-row-3{grid-template-columns:1fr;}
  .fixture-stage{display:none;}
}

@media(max-width:600px){
  .card-grid{grid-template-columns:1fr 1fr;}
  .bracket-round{flex:0 0 160px;}
  .fixture-date{min-width:70px;font-size:.68rem;}
  .match-result-score{font-size:2.2rem;}
}