/* ---------- GLOBAL ---------- */
/* #region */
:root{
  --bg:#050b18;
  --sidebar:#071226;
  --card:#0c1a2e;
  --border:#ffffff10;
  --text:#e6edf6;
  --muted:#8fa3bf;
  --accent:#2dd4bf;

  /* ===== Spacing Scale ===== */
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-7:28px;

  /* ===== Layout ===== */
  --page-padding: 48px;
  --section-padding: 16px;
  --card-padding: 24px;
  --section-gap: 24px;
  --player-title-gap: 18px;
  --player-row-gap: 10px;
  --table-cell-padding: 14px;

  /* ===== Card System ===== */
  --card-radius:16px;
  --card-gap:16px;

  /* ===== Typography Scale ===== */
  --font-base: 15px;
  --font-sm: 13px;
  --font-md: 15px;
  --font-lg: 18px;
  --font-xl: 22px;
  --font-2xl: 28px;
  --font-3xl: 40px;
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family: Inter, system-ui, sans-serif;
}

body{
  background:var(--bg);
  color:var(--text);
  font-size: var(--font-base);
  font-weight: 400;
}

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

.main{
  max-width:1280px;
  margin:0 auto;
  width:100%;
}
/* #endregion */

/* ---------- LAYOUT ---------- */
/* #region */
.sidebar{
  width:256px;
  background:var(--sidebar);
  border-right:1px solid var(--border);
  padding:24px 18px;
  display:flex;
  flex-direction:column;
}

.logo{
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:600;
  font-size:18px;
  margin-bottom:28px;
}

.logo-icon{
  width:36px;
  height:36px;
  border-radius:12px;
  background:linear-gradient(135deg,#22c55e,#14b8a6);
}

.nav{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.nav-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  border-radius:10px;
  border:none;
  background:none;
  color:var(--muted);
  cursor:pointer;
  transition:0.2s;
  border:1px solid transparent;
}

.nav-item:hover{
  background:#ffffff08;
  color:white;
}

.nav-item.active{
  background:rgba(45, 212, 191, 0.08);
  color:var(--accent);
  border:1px solid rgba(45, 212, 191, 0.35);
}

.sidebar-footer{
  margin-top:auto;
  font-size:12px;
  color:#ffffff40;
}

.main{
  flex:1;
  padding:40px;
}

.header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:32px;
}

.header h1{
  font-size: var(--font-3xl);
  margin-bottom: 12px;
}

.header p{
  font-size: var(--font-lg);
  color: var(--muted);
}
/* #endregion */

/* ---------- BUTTON SYSTEM ---------- */
/* #region button */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  padding:12px 18px;
  border-radius:12px;
  border:1px solid transparent;

  font-size:14px;
  font-weight:500;

  cursor:pointer;
  transition:0.15s;
}
.btn:disabled,
.btn[disabled]{
  opacity: 0.45;
  cursor: not-allowed;
  filter: none;
  box-shadow: none;
}

/* PRIMARY */
.btn-primary{
  background:linear-gradient(135deg,#34d399,#10b981);
  color:#022c22;
  position: relative;
  transition:box-shadow 0.2s ease, filter 0.2s ease;
}
.btn-primary:not(:disabled):not([disabled]):hover{
  box-shadow:
    0 0 0 1px #34d39940,
    0 6px 18px #10b98133,
    0 0 18px #34d39955;
  filter:brightness(1.05);
}

/* SECONDARY */
.btn-secondary{
  background:#111a2b;
  border-color:#ffffff20;
  color:var(--text);
}
.btn-secondary:hover{
  background:#16233a;
}

/* DANGER */
.btn-danger{
  background:#3b0d0d;
  border-color:#ef444440;
  color:#f87171;
}
.btn-danger:hover{
  background:#4c1111;
}

/* TEXT */
.btn-text{
  background:none;
  border:none;
  padding:0;
  color:var(--muted);
  font-size:14px;
  cursor:pointer;
}
.btn-text:hover{
  color:white;
}

/* SIZES */
.btn-sm{ padding:8px 12px; font-size:13px; }
.btn-lg{ padding:14px 20px; font-size:15px; }

/* ICONS */
.icon-btn{
  cursor:pointer;
  font-size:14px;
  color:#9fb3cc;
}
.icon-btn:hover{
  color:white;
}

/* #endregion */

/* ---------- INPUTS ---------- */
/* #region */
.input{
  width:100%;
  background:#0c1a2e;
  border:1px solid #ffffff10;
  border-radius:12px;
  padding:12px;
  color:white;
  outline:none;
}

.input:focus{
  border-color:#2dd4bf;
  box-shadow:0 0 0 1px #2dd4bf40;
}

.input-row{
  display:flex;
  gap:10px;
}

.modal input,
.modal textarea{
  background:#0e1c33;
  border:1px solid #ffffff10;
  border-radius:10px;
  padding:12px;
  color:white;
}
/* #endregion */

/* ---------- GENERIC CARDS & TABLE BASE ---------- */
/* #region */
.card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  padding: var(--card-padding);
  position: relative;
}

.table{
  width:100%;
  border-collapse:collapse;
}

.table th,
.table td{
  font-size:16px;
  padding: var(--table-cell-padding);
  border-bottom:1px solid var(--border);
  text-align:left;
  font-size: var(--font-md);
  color:var(--muted);
}
.table th{
  color: var(--muted);
  font-weight:500;
  font-size: var(--font-sm);
  letter-spacing:0.5px;
}

.actions-cell{
  width: 108px;
}

.row-actions{
  display:flex;
  justify-content:flex-end;
  gap:16px;
}

.table th.th-actions{
  text-align: right;
}

.editable-cell{
  position:relative;
}

.editable-cell .display{
  display: block;
}
.editable-cell .display.hidden{
  display: none;
}

.edit-input{
  position:absolute;
  inset:0;

  width:100%;
  height:100%;

  font:inherit;
  color:var(--text);
  caret-color: var(--accent);

  background:transparent;
  border:none;
  padding: var(--table-cell-padding);
}

.edit-input:focus{
  outline:none;
}

/* overwrite colors */
.table td.player-cell{
  color: var(--text);
  font-weight: 400;
}
table td.profit-pos, .profit-pos{
  color:#34d399;
  font-weight:600;
}
table td.profit-neg, .profit-neg{
  color:#f87171;
  font-weight:600;
}
/* #endregion */

/* ---------- PAGE STYLES ---------- */
/* #region */
/* GAMES PAGE */
.games-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:20px;
}

.game-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:20px;
  cursor:pointer;
  transition:0.2s;
}

.game-card:hover{
  border-color:#ffffff30;
}

.game-title{
  font-size:18px;
  font-weight:600;
  color:white;
  margin-bottom:10px;
}

.game-meta{
  display:flex;
  flex-direction:column;
  gap:6px;
  color:var(--muted);
  font-size:14px;
}

/* PLAYERS PAGE */
.players-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:20px;
}

.player-card{
  position:relative;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:20px;
  transition:0.2s;
}

.player-card:hover{
  border-color:#ffffff30;
}

.player-name{
  font-size: var(--font-lg);
  font-weight:500;
  margin-bottom: var(--player-title-gap);

  display:flex;
  align-items:center;
}

.editable-input{
  width:100%;
  font:inherit;
  color:var(--text);
  background:transparent;
  border:none;
  padding:0;
  caret-color:var(--accent);
}
.editable-input:focus{ outline:none; }

.player-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size: var(--font-md);
  margin-top:10px;
}

.row-left{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--muted);
}

.row-left svg{
  width:16px;
  height:16px;
  opacity:0.9;
}

.row-value{
  font-size: var(--font-md);
  font-weight: 400;
}

.player-actions{
  position:absolute;
  top:20px;
  right:20px;
  display:flex;
  gap:12px;
  opacity:0;
  transition:0.2s;
}

.player-card:hover .player-actions{ opacity:1; }

.add-player-card{
  display:flex;
  flex-direction:column;
  gap: 10px;
}

.form-group{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.form-group label{
  font-size:13px;
  color:var(--muted);
  padding-left: 10.5px;
}

.two-col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.add-player-card button{ margin-top:3px; }

/* SECTION CARD SYSTEM */
.section-card{ padding:0; }

.section-card .card-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: var(--section-padding);
  background:#0f213a;
  border-bottom:1px solid var(--border);
  border-radius:20px 20px 0 0;
  min-height: 62px;
}

.section-card .card-header h3{
  margin:0;
  font-size:16px;
  font-weight:600;
  line-height: 1;
}

#statsPage .section-card .card-header h3,
#gameDetailPage .section-card .card-header h3{
  padding-left: var(--table-cell-padding);
  font-size:22px;
  font-weight:600;
  letter-spacing:0.6px;
  line-height:1;
  color:var(--text);
}

.section-card .card-body{
  padding-top: var(--space-2);
  padding-left: var(--section-padding);
  padding-right: var(--section-padding);
  padding-bottom: var(--section-padding);
}

.section-card .card-body > .form-group:first-child{
  padding-top: var(--table-cell-padding);
}

/* SECONDARY SECTION HEADER */
.section-card.section-secondary .card-header{
  background: transparent;
  border-bottom: none;
  position: relative;
}

.section-card.section-secondary .card-header::after{
  content:"";
  position:absolute;
  left: var(--section-padding);
  right: var(--section-padding);
  bottom:0;
  height:1px;
  background: var(--border);
}

/* GAME DETAIL PAGE */
.detail-top{
  display:flex;
  justify-content:space-between;
  margin-bottom:16px;
}

.detail-actions{
  display:flex;
  gap:16px;
}

.detail-grid{
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:20px;
  align-items: start;
}

.game-hero{
  background:linear-gradient(180deg,#0b1b33,#081428);
  border:1px solid #ffffff10;
  border-radius:22px;
  padding:28px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:24px;
}

.hero-left h1{
  font-size:32px;
  margin-bottom:10px;
}

.hero-right{
  display:flex;
  gap:12px;
  align-items:center;
}

.hero-meta{
  display:flex;
  gap:10px;
}

.meta-pill{
  display: flex;
  align-items: center;
  gap: 6px;
  background:#0f213a;
  border:1px solid #ffffff10;
  padding:8px 12px;
  border-radius:10px;
  color:#9fb3cc;
  font-size:13px;
}

.hero-pot{
  background:#0e1f37;
  border:1px solid #ffffff15;
  border-radius:18px;
  padding:18px 22px;
  text-align:center;
  min-width:120px;
}

.pot-label{
  font-size:12px;
  color:#8fa3bf;
}

.pot-value{
  font-size:28px;
  font-weight:700;
}

.discrepancy{
  color:#f87171;
  font-weight:500;
}

#discrepancyCard{
  background:#3b0d0d;
  border:1px solid #ef444440;
}

#discrepancyCard .pot-label{
  color:#fca5a5;
}

.seat-badge{
  background:#0f213a;
  border:1px solid #ffffff10;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  color:#9fb3cc;
}
#gameDetailPage .seat-badge{
  background:#052e2b;
  border:1px solid #34d39940;
  color:#34d399;
  font-weight:500;
}

/* GAME CARD ICON */
.game-icon{
  width:42px;
  height:42px;
  border-radius:12px;
  background:#052e2b;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:14px;
}

.game-icon svg{
  width:22px;
  height:22px;
  color:#34d399;
}

.meta-row{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--muted);
  font-size:14px;
}

.meta-row svg{
  width:16px;
  height:16px;
  opacity:0.9;
}

/* STATS PAGE */
.stats-grid{
  display:grid;
  gap:16px;
  margin-bottom:20px;
}
.stats-grid-3{
  grid-template-columns:repeat(3, 1fr);
}
.stats-grid-4{
  grid-template-columns:repeat(4, 1fr);
}

.stat-card{
  padding:18px;
}

.stat-title{
  color:var(--muted);
  font-size:13px;
  margin-bottom:6px;
}

.stat-value{
  font-size:16px;
  font-weight:500;
}

.leaderboard th.right,
.leaderboard td.right{
  text-align:right;
}

/* =========================
   STATS PAGE
========================= */

#statsPage .stats-grid{
  display:grid;
  gap:16px;
  margin-bottom:20px;
}

#statsPage .stat-card{
  display:flex;
  align-items:center;
  gap:16px;
  padding:18px;
}

#statsPage .stat-icon{
  width:48px;
  height:48px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

#statsPage .stat-icon svg{
  width:24px;
  height:24px;
  stroke-width:2.4;
}

/* Color Variants */
#statsPage .stat-yellow{ background:#facc1520; }
#statsPage .stat-yellow svg{ stroke:#facc15; color:#facc15; }

#statsPage .stat-red{ background:#ef444420; }
#statsPage .stat-red svg{ stroke:#ef4444; color:#ef4444; }

#statsPage .stat-blue{ background:#3b82f620; }
#statsPage .stat-blue svg{ stroke:#3b82f6; color:#3b82f6; }

#statsPage .stat-purple{ background:#a855f720; }
#statsPage .stat-purple svg{ stroke:#a855f7; color:#a855f7; }

/* Text Styling */
#statsPage .stat-value{
  font-size:20px;
  font-weight:600;
}

/* DASHBOARD PAGE */
.dash-card{
  position:relative;
  overflow:hidden;
  padding:24px;
}

.dash-value{
  font-size:28px;
  font-weight:600;
  margin-top:6px;
}

.dash-sub{
  font-size:16px;
  margin-top:4px;
}

.dash-icon{
  position:absolute;
  right:18px;
  top:50%;
  transform:translateY(-50%);
  width:64px;
  height:64px;
  opacity:0.16;
  stroke-width:1.8;
}

.dash-subtitle{
  margin-top:10px;
  font-size:13px;
  font-weight:500;
  color:var(--muted);
}

.dash-green{ color:#34d399; }
.dash-blue{ color:#60a5fa; }
.dash-purple{ color:#a78bfa; }

.icon-green{ color:#34d399; }

.recent-card{
  margin-top:20px;
  padding:24px;
}

.recent-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:16px;
}

.recent-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}

.recent-game{
  background:#0b1b33;
  border:1px solid var(--border);
  border-radius:16px;
  padding:16px;
  cursor:pointer;
  transition:0.2s;
}

.recent-game:hover{
  border-color:#ffffff30;
}

.recent-top{
  display:flex;
  justify-content:space-between;
  align-items: center;
  margin-bottom:10px;
}

.date-pill{
  background:#052e2b;
  color:#34d399;
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
}

.players-count{
  font-size:12px;
  color:var(--muted);
}

.recent-title{
  font-size:16px;
  font-weight:600;
  color:white;
  margin-bottom:4px;
}

.recent-notes{
  font-size:13px;
  color:var(--muted);
}

/* SETTINGS */
.settings-card{
  background:#0f213a;
  border:1px solid #ffffff15;
  border-radius:18px;
  padding:24px;
  /* max-width:480px; */
  display: inline-block;
}

.settings-actions{
  display:flex;
  gap:12px;
  margin-top:16px;
}

.settings-content{
  display:inline-flex;
  flex-direction:column;
}

.settings-content .form-group{
  width:100%;
}

.settings-content .input{
  width:100%;
}

/* #endregion */

/* ---------- ICONS ---------- */
/* #region */
.lucide{
  width:16px;
  height:16px;
  stroke-width:2;
}

.icon-sm.lucide{ width:16px; height:16px; }
.icon-md.lucide{ width:20px; height:20px; }
.icon-lg.lucide{ width:32px; height:32px; }
.icon-xl.lucide{ width:64px; height:64px; }

.nav-item svg{
  width:18px;
  height:18px;
  opacity:0.9;
}
/* #endregion */

/* ---------- MODAL ---------- */
/* #region */
.modal-overlay{
  position:fixed;
  inset:0;
  background:#00000080;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:100;
}

.modal{
  width:420px;
  background:#081428;
  border:1px solid #ffffff20;
  border-radius:18px;
  padding:26px;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.modal label{
  font-size:13px;
  color:#8fa3bf;
}

.modal textarea{ min-height:80px; resize:none }

.modal-actions{
  display:flex;
  justify-content:space-between;
  margin-top:10px;
}

.session-actions{
  display:flex;
  gap:8px;
}
/* #endregion */

/* ---------- UTILITIES (has to be last) ---------- */
/* #region */
.hidden{display:none}
.page{display:none}
.page.active{display:block}
.divider{
  height:1px;
  background:#ffffff10;
  margin:12px 0;
}
.table-muted{
  color: inherit;
}
/* #endregion */