@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Outfit:wght@300;400;500;600;700;800;900&display=swap');

/*
 * RI Scouts — Shared Stylesheet
 *
 * Design tokens (CSS custom properties) plus shared component styles
 * used across all pages. Page-specific styles stay in $extra_css.
 *
 * Usage: <link rel="stylesheet" href="/assets/css/tokens.css">
 */

/* ── Design tokens ──────────────────────────────────────── */
:root {
  /* Brand colours */
  --primary:       #7fd7c3;
  --primary-glow:  rgba(127, 215, 195, 0.3);
  --primary-dim:   rgba(127, 215, 195, 0.08);
  --accent:        #f0a500;
  --accent-dim:    rgba(240, 165, 0, 0.1);

  /* Backgrounds */
  --dark:   #060a12;
  --dark2:  #0c1220;
  --dark3:  #101928;
  --card:   rgba(12, 18, 32, 0.9);

  /* UI */
  --border:     rgba(127, 215, 195, 0.1);
  --text-muted: rgba(255, 255, 255, 0.5);
  --error:      #ef4444;
  --success:    #22c55e;

  /* Layout */
  --sidebar-w:       260px;
  --logo-sidebar:     94px;
  --logo-standalone:  94px;
  --logo-topnav:      94px;

  /* Typography */
  --font-body:    'Outfit', sans-serif;
  --font-display: 'Bebas Neue', sans-serif;

  /* Type scale */
  --text-xs:   0.68rem;
  --text-sm:   0.78rem;
  --text-base: 0.88rem;
  --text-md:   1rem;
  --text-lg:   1.2rem;
  --text-xl:   1.6rem;
  --text-2xl:  2rem;
  --text-3xl:  2.6rem;
}

/* ── Standalone page layout ─────────────────────────────── */
.page-centered {
  font-family: var(--font-body);
  background: var(--dark);
  background-image: radial-gradient(circle at 35% 45%, rgba(127,215,195,0.04), transparent 60%);
  color: #fff;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

/* ── Buttons ────────────────────────────────────────────── */
.btn-primary { background: linear-gradient(135deg, var(--primary), #4fc3a8); color: var(--dark); }
.btn-primary:hover { opacity: 0.9; transform: translateY(-1px); }

/* ── Alerts ─────────────────────────────────────────────── */
.alert-success { background:rgba(34,197,94,0.1);  border:1px solid var(--success); color:var(--success); }
.alert-error   { background:rgba(239,68,68,0.1);   border:1px solid var(--error);   color:var(--error);   }

/* ── Status badges ──────────────────────────────────────── */
.status-badge    { font-size:var(--text-xs);font-weight:700;text-transform:uppercase;letter-spacing:1.5px;padding:3px 10px;border-radius:20px;white-space:nowrap; }
.status-pending  { background:rgba(240,165,0,0.15);  color:var(--accent); border:1px solid rgba(240,165,0,0.3); }
.status-published{ background:rgba(127,215,195,0.12);color:var(--primary);border:1px solid rgba(127,215,195,0.25); }
.status-rejected { background:rgba(239,68,68,0.1);   color:var(--error);  border:1px solid rgba(239,68,68,0.2); }

/* ── Inline message states (JS-injected feedback) ───────── */
.msg-info  { color:var(--primary); font-size:var(--text-sm); }
.msg-ok    { color:var(--success); font-size:var(--text-sm); }
.msg-error { color:var(--error);   font-size:var(--text-sm); }
.msg-warn  { color:var(--accent);  font-size:var(--text-sm); }

/* ── Welcome banner ─────────────────────────────────────── */
.welcome-banner { background:linear-gradient(135deg,rgba(127,215,195,0.08),rgba(240,165,0,0.04));border:1px solid rgba(127,215,195,0.18);border-radius:16px;padding:22px 26px;margin-bottom:22px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px; }
.banner-h, .banner-title { font-family:var(--font-display);font-size:1.6rem;letter-spacing:2px;margin-bottom:4px; }
.banner-sub { font-size:0.82rem;color:var(--text-muted);line-height:1.5; }

/* ── Stat card ──────────────────────────────────────────── */
.stat-card { background:var(--card);border:1px solid var(--border);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:4px; }
.stat-ico, .stat-card-icon { font-size:1rem;color:var(--primary);margin-bottom:2px; }
.stat-val, .stat-card-val  { font-family:var(--font-display);font-size:1.8rem;line-height:1; }
.stat-lbl, .stat-card-label { font-size:0.68rem;color:var(--text-muted);font-weight:700;text-transform:uppercase;letter-spacing:1px; }

/* ── Form grid ──────────────────────────────────────────── */
.form-grid       { display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px; }
.form-grid .full { grid-column:1/-1; }
.form-group      { display:flex;flex-direction:column;min-width:0; }
.field-label     { display:block;font-size:0.62rem;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-muted);margin-bottom:10px; }
.save-row        { display:flex;justify-content:flex-end;margin-top:8px; }
.form-group input,
.form-group select,
.form-group textarea { width:100%;background:rgba(255,255,255,0.04);border:1px solid var(--border);border-radius:8px;color:#fff;font-family:var(--font-body);font-size:0.88rem;padding:10px 14px;outline:none;box-sizing:border-box; }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { border-color:var(--primary);background:rgba(127,215,195,0.04); }
.form-group input[readonly] { opacity:0.5;cursor:not-allowed; }
.form-group input[type="date"] { min-width:0; max-width:100%; }

/* ── Player comparison (lab) ────────────────────────────── */
.lab-grid  { display:grid;grid-template-columns:repeat(2,1fr);gap:14px; }
.lab-card  { background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px; }
.lab-title { font-size:0.65rem;font-weight:800;text-transform:uppercase;letter-spacing:2px;color:var(--text-muted);margin-bottom:10px; }
.lab-chk   { display:flex;align-items:center;gap:8px;font-size:0.82rem;color:var(--text-muted);margin-top:10px; }
.lab-selector { display:flex;flex-wrap:wrap;gap:10px; }
.lab-player-chip { display:flex;align-items:center;gap:8px;padding:8px 14px 8px 8px;border-radius:30px;border:1.5px solid var(--border);background:rgba(255,255,255,0.02);cursor:pointer;transition:all 0.2s;user-select:none; }
.lab-player-chip:hover { border-color:rgba(127,215,195,0.4);background:var(--primary-dim); }
.lab-player-chip.selected { border-color:var(--primary);background:var(--primary-dim); }
.lab-player-chip input[type=checkbox] { display:none; }
.lab-chip-photo { width:28px;height:28px;border-radius:50%;object-fit:cover;border:1.5px solid var(--border);flex-shrink:0; }
.lab-player-chip.selected .lab-chip-photo { border-color:var(--primary); }
.lab-chip-name { font-size:0.82rem;font-weight:700;color:#fff; }
.lab-chip-pos  { font-size:0.68rem;color:var(--text-muted);font-weight:600; }
@media(max-width:700px){ .lab-grid { grid-template-columns:1fr; } }

/* ── Public page topnav ─────────────────────────────────── */
.public-topnav { height:64px; background:rgba(6,10,18,0.9); backdrop-filter:blur(12px); border-bottom:1px solid var(--border); display:flex; align-items:center; padding:0 32px; gap:16px; position:sticky; top:0; z-index:50; }
.public-topnav img { height:var(--logo-topnav); width:auto; border-radius:8px; }
@media(max-width:600px) { .public-topnav { padding:0 16px; } }

/* ── Small button ───────────────────────────────────────── */
.btn-sm { display:inline-flex;align-items:center;gap:6px;padding:8px 18px;border-radius:8px;font-size:var(--text-sm);font-weight:700;cursor:pointer;text-decoration:none;border:none;font-family:var(--font-body);transition:all 0.2s; }

/* ── Danger / destructive ───────────────────────────────── */
.btn-danger       { background:rgba(239,68,68,0.1);border:1.5px solid rgba(239,68,68,0.3);color:var(--error);cursor:pointer; }
.btn-danger:hover { background:rgba(239,68,68,0.18); }
.tdrop-danger     { color:var(--error) !important; }
.tdrop-danger i   { color:var(--error) !important; }

/* ── Alerts (full set) ──────────────────────────────────── */
.alert-warn { background:rgba(240,165,0,0.1);border:1px solid rgba(240,165,0,0.3);color:var(--accent); }

/* ── Inline verification badges ─────────────────────────── */
.badge-verified { display:inline-flex;align-items:center;gap:4px;font-size:var(--text-xs);font-weight:700;color:var(--primary);background:rgba(127,215,195,0.1);border:1px solid rgba(127,215,195,0.25);padding:1px 7px;border-radius:20px;white-space:nowrap; }
.badge-stale    { display:inline-flex;align-items:center;gap:4px;font-size:var(--text-xs);font-weight:700;color:var(--accent);background:rgba(240,165,0,0.1);border:1px solid rgba(240,165,0,0.3);padding:1px 7px;border-radius:20px;white-space:nowrap; }
.pending-badge  { font-size:var(--text-xs);font-weight:700;color:var(--accent);background:rgba(240,165,0,0.1);border:1px solid rgba(240,165,0,0.25);padding:2px 7px;border-radius:6px;margin-left:6px; }

/* ── Utility Classes ────────────────────────────────────── */
.display-num      { font-family:var(--font-display);font-size:2rem;line-height:1;color:var(--primary); }
.display-num-lg   { font-family:var(--font-display);font-size:1.6rem;line-height:1; }
.micro-label      { font-size:0.6rem;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--text-muted); }
.avatar-sm        { width:28px;height:28px;border-radius:50%;object-fit:cover;border:1.5px solid var(--border);flex-shrink:0; }
.avatar-md        { width:40px;height:40px;border-radius:50%;object-fit:cover;border:1.5px solid var(--border);flex-shrink:0; }
.avatar-lg        { width:64px;height:64px;border-radius:50%;object-fit:cover;border:2px solid var(--border); }
.avatar-placeholder { background:rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:center; }
.modal-title      { font-family:var(--font-display);font-size:1.5rem;letter-spacing:2px;margin-bottom:8px; }