/* Build Kingdom design tokens + shared components (from the BK Financial mockups) */

:root {
  --black:#000000; --white:#FFFFFF;
  --ink-900:#0A0A0B; --ink-800:#141416; --ink-700:#1E1E21; --ink-600:#2A2A2E;
  --red:#E8181E; --red-hover:#FF2E34; --red-active:#C21016; --red-dark:#9E0B10;
  --red-glow:rgba(255,46,52,.55);
  --gray-500:#6E6E74; --gray-300:#B4B4B9; --gray-100:#E9E9EC;
  --green:#2ED573; --amber:#FFB020;
  --gold:#F2C14E; --gold-glow:rgba(255,209,102,.5); --glow-gold:0 0 12px var(--gold-glow);
  --silver:#C7CCD6; --silver-glow:rgba(199,204,214,.45); --glow-silver:0 0 10px var(--silver-glow);
  --bronze:#CD8A4F; --bronze-glow:rgba(205,138,79,.4); --glow-bronze:0 0 10px var(--bronze-glow);
  --border-default:rgba(255,255,255,.85);
  --border-subtle:rgba(255,255,255,.14);
  --border-faint:rgba(255,255,255,.07);
  --shadow-card:0 8px 32px rgba(0,0,0,.6);
  --glow-white:0 0 10px rgba(255,255,255,.35);
  --glow-red:0 0 12px var(--red-glow);
  --ease:cubic-bezier(.2,.8,.2,1);
}

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

body {
  background:var(--black); color:var(--white);
  font-family:'Archivo','Helvetica Neue',Arial,sans-serif;
  font-size:15px; line-height:1.45; -webkit-font-smoothing:antialiased;
  min-height:100vh;
}

.wordmark { font-family:'Michroma',monospace; letter-spacing:.14em; text-transform:uppercase; }
.wordmark .red { color:var(--red); }

.label {
  font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.22em; color:var(--gray-500);
}

.headline {
  font-weight:900; text-transform:uppercase; line-height:.95;
  text-shadow:var(--glow-white);
}

.stat-value { font-weight:900; font-size:36px; line-height:1; }
.red-text { color:var(--red); text-shadow:var(--glow-red); }
.muted { color:var(--gray-500); }
.secondary { color:var(--gray-300); }

/* ------- cards ------- */
.card {
  background:var(--ink-900); border:1px solid var(--border-subtle);
  box-shadow:var(--shadow-card); padding:24px; position:relative;
}
.card.accent { background:var(--red); border-color:var(--red); }
.card.accent .label { color:rgba(255,255,255,.75); }

/* red diagonal slash decoration */
.slash::after {
  content:''; position:absolute; top:0; right:0; width:44px; height:44px;
  background:linear-gradient(135deg, transparent 46%, var(--red) 46%, var(--red) 58%, transparent 58%);
  pointer-events:none;
}

/* ------- buttons ------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:44px; padding:0 20px; border:1px solid transparent; cursor:pointer;
  font-family:inherit; font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.18em; color:var(--white); background:var(--ink-700);
  transition:all 160ms var(--ease); text-decoration:none;
}
.btn:hover { transform:translateY(-1px); }
.btn:active { transform:translateY(0); }
.btn-primary { background:var(--red); }
.btn-primary:hover { background:var(--red-hover); box-shadow:0 0 18px var(--red-glow); }
.btn-secondary { background:transparent; border-color:var(--border-subtle); }
.btn-secondary:hover { border-color:var(--border-default); }
.btn-ghost { background:transparent; color:var(--gray-300); }
.btn-ghost:hover { color:var(--white); }
.btn-sm { height:32px; padding:0 14px; font-size:10px; }
.btn-approve { background:transparent; border-color:var(--green); color:var(--green); }
.btn-approve:hover { background:var(--green); color:var(--black); box-shadow:0 0 14px rgba(46,213,115,.4); }
.btn-block { width:100%; }
.btn:disabled { opacity:.4; cursor:not-allowed; transform:none; }

/* ------- inputs ------- */
.field { display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
.input, .select {
  height:44px; padding:0 14px; background:var(--ink-800);
  border:1px solid var(--border-subtle); color:var(--white);
  font-family:inherit; font-size:15px; width:100%;
  transition:border-color 160ms var(--ease);
}
.input:focus, .select:focus { outline:none; border-color:var(--red); box-shadow:0 0 0 1px var(--red); }
.select { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236E6E74' fill='none' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; }

/* ------- tabs ------- */
.tabs { display:inline-flex; border:1px solid var(--border-subtle); }
.tab {
  padding:10px 24px; cursor:pointer; background:transparent; border:none;
  color:var(--gray-500); font-family:inherit; font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:.2em; transition:all 160ms var(--ease);
}
.tab.active { background:var(--red); color:var(--white); box-shadow:0 0 16px var(--red-glow); }
.tab:not(.active):hover { color:var(--white); }

/* ------- tables ------- */
.table { width:100%; border-collapse:collapse; }
.table th {
  background:var(--red); color:var(--white); text-align:left;
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.18em;
  padding:12px 16px;
}
.table td { padding:14px 16px; border-bottom:1px solid var(--border-faint); }
.table tr:hover td { background:var(--ink-800); }
.table .num { text-align:right; font-variant-numeric:tabular-nums; }
.table th.num { text-align:right; }

/* ------- toggle switch ------- */
.switch { position:relative; width:40px; height:22px; cursor:pointer; flex:none; }
.switch input { opacity:0; width:0; height:0; }
.switch .track {
  position:absolute; inset:0; background:var(--ink-600); border:1px solid var(--border-subtle);
  transition:all 180ms var(--ease); border-radius:999px;
}
.switch .track::after {
  content:''; position:absolute; top:2px; left:2px; width:16px; height:16px;
  border-radius:50%; background:var(--gray-500); transition:all 180ms var(--ease);
}
.switch input:checked + .track { background:var(--red); border-color:var(--red); box-shadow:0 0 10px var(--red-glow); }
.switch input:checked + .track::after { left:20px; background:var(--white); }

/* ------- progress bars ------- */
.progress { height:6px; background:var(--ink-700); overflow:hidden; }
.progress .fill { height:100%; background:var(--red); box-shadow:0 0 10px var(--red-glow); transition:width 400ms var(--ease); }
.progress.mini { height:3px; }

/* ------- badges / status ------- */
.badge {
  display:inline-block; padding:4px 10px; font-size:10px; font-weight:700;
  text-transform:uppercase; letter-spacing:.16em; border:1px solid var(--border-subtle);
  color:var(--gray-300);
}
.badge.red { border-color:var(--red); color:var(--red); }
.status-pending { color:var(--red); font-weight:700; font-size:11px; text-transform:uppercase; letter-spacing:.14em; }
.status-approved { color:var(--gray-300); font-weight:700; font-size:11px; text-transform:uppercase; letter-spacing:.14em; }
.status-rejected { color:var(--gray-500); font-weight:700; font-size:11px; text-transform:uppercase; letter-spacing:.14em; text-decoration:line-through; }

/* ------- section divider with red lines ------- */
.divider-title { display:flex; align-items:center; gap:16px; }
.divider-title::before, .divider-title::after { content:''; flex:1; height:2px; background:var(--red); box-shadow:0 0 8px var(--red-glow); }

/* ------- modal ------- */
.modal-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.78); display:flex;
  align-items:center; justify-content:center; z-index:100; padding:24px;
  opacity:0; pointer-events:none; transition:opacity 220ms var(--ease);
}
.modal-overlay.open { opacity:1; pointer-events:auto; }
.modal {
  background:var(--ink-900); border:1px solid var(--border-subtle);
  box-shadow:0 24px 64px rgba(0,0,0,.8); padding:32px; width:100%; max-width:440px;
  transform:translateY(12px); transition:transform 220ms var(--ease);
}
.modal-overlay.open .modal { transform:translateY(0); }

/* ------- toast ------- */
.toast {
  position:fixed; top:24px; right:24px; transform:translateY(-80px);
  background:var(--ink-800); border:1px solid var(--red); color:var(--white);
  padding:14px 24px; font-size:13px; z-index:9999; box-shadow:0 0 20px var(--red-glow);
  transition:transform 260ms var(--ease); pointer-events:auto; cursor:pointer;
  border-radius:10px; max-width:400px; border-left:3px solid var(--red);
}
.toast.show { transform:translateY(0); }

/* ------- empty state ------- */
.empty {
  padding:48px 24px; text-align:center; color:var(--gray-500);
  border:1px dashed var(--border-subtle);
}
.empty .big { font-size:18px; font-weight:700; color:var(--gray-300); margin-bottom:6px; }

/* ------- medals: top-3 spot holders ------- */
.silver-text {
  background:linear-gradient(180deg,#FFFFFF 0%,#D9DEE7 40%,#9BA3B2 70%,#6E7684 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 5px rgba(199,204,214,.35));
}
.bronze-text {
  background:linear-gradient(180deg,#F4C79B 0%,#D99A5B 45%,#B06F35 75%,#7E4A1E 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 5px rgba(205,138,79,.3));
}
.card.medal-silver {
  border-color:rgba(199,204,214,.5);
  background:linear-gradient(160deg,#14161A 0%,var(--ink-900) 60%);
  box-shadow:var(--shadow-card), 0 0 20px rgba(199,204,214,.10);
}
.card.medal-silver.slash::after {
  background:linear-gradient(135deg, transparent 46%, var(--silver) 46%, var(--silver) 58%, transparent 58%);
}
.card.medal-bronze {
  border-color:rgba(205,138,79,.5);
  background:linear-gradient(160deg,#170F08 0%,var(--ink-900) 60%);
  box-shadow:var(--shadow-card), 0 0 20px rgba(205,138,79,.10);
}
.card.medal-bronze.slash::after {
  background:linear-gradient(135deg, transparent 46%, var(--bronze) 46%, var(--bronze) 58%, transparent 58%);
}

/* ------- gold: #1 spot holder ------- */
.gold-text {
  background:linear-gradient(180deg,#FFF3C4 0%,#FFD75E 40%,#E8B02E 65%,#B37E14 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 6px rgba(255,209,102,.45));
}
.card.champion {
  border-color:rgba(255,209,102,.65);
  background:linear-gradient(160deg,#191307 0%,var(--ink-900) 60%);
  box-shadow:var(--shadow-card), 0 0 28px rgba(255,209,102,.16);
  overflow:hidden;
}
.card.champion.slash::after {
  background:linear-gradient(135deg, transparent 46%, var(--gold) 46%, var(--gold) 58%, transparent 58%);
}
/* slow shine sweep across the champion card */
.card.champion::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg, transparent 35%, rgba(255,224,138,.14) 48%, transparent 62%);
  background-size:240% 100%; background-position:130% 0;
  animation:gold-sheen 4.5s ease-in-out infinite;
}
@keyframes gold-sheen { 0% { background-position:130% 0 } 55%,100% { background-position:-140% 0 } }
.table tr.champion-row td {
  background:linear-gradient(90deg, rgba(255,209,102,.10), rgba(255,209,102,.02) 55%, transparent);
  border-bottom-color:rgba(255,209,102,.3);
}
.table tr.champion-row:hover td {
  background:linear-gradient(90deg, rgba(255,209,102,.16), rgba(255,209,102,.04) 55%, var(--ink-800));
}

/* ------- mobile base (≤600px) ------- */
@media(max-width:600px){
  .tabs{display:flex;flex-wrap:wrap;gap:2px;border:none}
  .tab{padding:8px 14px;font-size:10px;letter-spacing:.14em;border:1px solid var(--border-subtle);flex:none}
  .tab.active{border-color:var(--red)}
  body{overflow-x:hidden}
}

/* ------- animations ------- */
@keyframes bk-fill { from { width:0 } to { width:100% } }
@keyframes fade-up { from { opacity:0; transform:translateY(10px) } to { opacity:1; transform:none } }
.fade-up { animation:fade-up 400ms var(--ease) both; }