/* ============================================================
   ReadyToClub · Dev Interface – Professional Redesign
   ============================================================ */

/* ── Design Tokens ──────────────────────────────────────────── */
body.dev-portal,
body.dev-public {
  --bg:      #080f1c;
  --panel:   #0e1a2b;
  --panel2:  #132033;
  --line:    #1e2e42;
  --line2:   #2a3d55;
  --muted:   #7e9ab5;
  --text:    #e8f0fa;
  --yellow:  #f4d060;
  --yellow2: #ebb93a;
  --green:   #52d9a0;
  --red:     #ff8f8f;
  --blue:    #5ba3f5;
  --sidebar-bg: #070e1a;
  --topbar-bg:  #080f1c;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --shadow-sm: 0 1px 4px #00000040;
  --shadow-md: 0 4px 16px #00000050;
  --shadow-lg: 0 12px 40px #00000060;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 15px;
  line-height: 1.6;
}

/* ── Dev Label Bar ──────────────────────────────────────────── */
.dev-portal .development-label,
.dev-public  .development-label {
  background: #0a1526;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  font-size: 11px;
  font-weight: 400;
  padding: 9px 18px;
  letter-spacing: 0.3px;
}
.dev-portal .development-label {
  position: sticky;
  top: 0;
  height: 38px;
  white-space: nowrap;
  z-index: 40;
}
.dev-portal .development-label strong,
.dev-public  .development-label strong { color: var(--yellow); }

/* ── Focus Rings ────────────────────────────────────────────── */
.dev-portal :is(button, a, input, select, textarea, summary):focus-visible,
.dev-public  :is(button, a, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 3px;
}

/* ═══════════════════════════════════════════════════════════════
   SIDEBAR
   ═══════════════════════════════════════════════════════════════ */
.dev-portal .sidebar {
  top: 38px;
  width: 248px;
  padding: 22px 16px 20px;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--line);
  overflow-y: auto;
}

/* Brand */
.dev-portal .brand {
  padding: 4px 6px 22px;
  gap: 11px;
}
.dev-portal .brand img {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  object-fit: contain;
}
.dev-portal .brand strong {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.2px;
  display: block;
  color: var(--text);
}
.dev-portal .brand small {
  font-size: 9px;
  letter-spacing: 2px;
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
}

/* Team Selector */
.dev-portal .team-select {
  background: var(--panel2);
  border: 1px solid var(--line2);
  border-radius: var(--radius-md);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  padding: 9px 11px;
  margin: 0 0 20px;
  width: 100%;
  cursor: pointer;
  transition: border-color 140ms;
}
.dev-portal .team-select:hover { border-color: var(--line2); }
.dev-portal .team-select:focus { border-color: var(--yellow); }

/* Nav Labels */
.dev-portal .nav-label {
  font-size: 9px;
  letter-spacing: 2px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 10px;
  margin: 20px 0 8px;
  opacity: 0.75;
}

/* Nav Buttons */
.dev-portal .nav-button {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 500;
  min-height: 44px;
  width: 100%;
  background: transparent;
  margin-bottom: 2px;
  transition: background 140ms, color 140ms;
}
.dev-portal .nav-button svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  opacity: 0.8;
}
.dev-portal .nav-button:hover {
  background: var(--panel2);
  color: var(--text);
}
.dev-portal .nav-button:hover svg { opacity: 1; }
.dev-portal .nav-button.active {
  background: color-mix(in srgb, var(--yellow) 10%, transparent);
  color: var(--yellow);
  font-weight: 600;
  box-shadow: inset 2px 0 0 var(--yellow);
}
.dev-portal .nav-button.active svg { opacity: 1; }

/* Sidebar Bottom */
.dev-portal .sidebar-bottom { padding-top: 16px; }
.dev-portal .sidebar-utilities {
  border-top: 1px solid var(--line);
  padding-top: 8px;
  margin-top: 4px;
  display: grid;
  gap: 2px;
}
.dev-portal .sidebar-utility {
  font-size: 12.5px;
  line-height: 1.4;
  min-height: 40px;
  color: var(--muted);
  border-radius: var(--radius-sm);
  transition: background 140ms, color 140ms;
}
.dev-portal .sidebar-utility:hover,
.dev-portal .sidebar-utility:focus-visible {
  background: var(--panel2);
  color: var(--text);
}
.dev-portal .sidebar-connection {
  font-size: 11px;
  line-height: 1.5;
  color: var(--muted);
  padding: 10px 12px 0;
  opacity: 0.8;
}
.dev-portal .sidebar-connection .dot {
  width: 6px;
  height: 6px;
  background: var(--green);
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 6px color-mix(in srgb, var(--green) 60%, transparent);
}

/* Workspace offset */
.dev-portal .workspace { margin-left: 248px; }

/* ═══════════════════════════════════════════════════════════════
   TOPBAR
   ═══════════════════════════════════════════════════════════════ */
.dev-portal .topbar {
  min-height: 58px;
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--line);
  padding: 0 32px;
  position: sticky;
  top: 38px;
  z-index: 20;
}
.dev-portal .breadcrumb {
  font-size: 12.5px;
  color: var(--muted);
  letter-spacing: 0.1px;
}
.dev-portal .breadcrumb b {
  color: var(--text);
  font-weight: 600;
}
.dev-portal .top-actions { flex-wrap: nowrap; gap: 10px; }
.dev-portal .profile-trigger {
  font-size: 13px;
  gap: 9px;
  padding: 4px 8px 4px 4px;
  border-radius: var(--radius-lg);
  transition: background 140ms;
}
.dev-portal .profile-trigger:hover { background: var(--panel2); }
.dev-portal .profile-trigger .avatar {
  width: 32px;
  height: 32px;
  font-size: 12px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--yellow) 20%, var(--panel2));
  color: var(--yellow);
}
.dev-portal .icon-button {
  color: var(--muted);
  border-radius: var(--radius-md);
  transition: background 140ms, color 140ms;
}
.dev-portal .icon-button:hover { background: var(--panel2); color: var(--text); }

/* Notification Badge */
.dev-portal .notification-badge {
  background: var(--yellow);
  color: #0f1a28;
  font-size: 9px;
  font-weight: 800;
  min-width: 16px;
  height: 16px;
  line-height: 16px;
  border-radius: 8px;
}

/* ═══════════════════════════════════════════════════════════════
   MAIN CONTENT AREA
   ═══════════════════════════════════════════════════════════════ */
.dev-portal .main {
  max-width: 1360px;
  padding: 34px 40px 80px;
  min-height: calc(100vh - 96px);
  overflow-x: clip;
}
.dev-portal .main:has(.dev-lineup-page) { max-width: 1800px; }

/* Typography */
.dev-portal h1 {
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.15;
  letter-spacing: -0.9px;
  font-weight: 750;
  overflow-wrap: anywhere;
  hyphens: auto;
}
.dev-portal #main h1[tabindex="-1"]:focus { outline: none; }
.dev-portal h2 { font-size: 19px; line-height: 1.35; font-weight: 650; }
.dev-portal h3 { font-size: 15px; line-height: 1.4; }
.dev-portal .page-heading {
  margin-bottom: 28px;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 12px;
}
.dev-portal .page-heading h1 { margin-bottom: 0; }
.dev-portal .page-heading p {
  font-size: 14px;
  line-height: 1.6;
  margin-top: 6px;
  color: var(--muted);
}
.dev-portal .dev-today {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}
.dev-portal .eyebrow {
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--yellow);
  font-weight: 700;
}

/* ── Panels ─────────────────────────────────────────────────── */
.dev-portal .panel {
  border-radius: var(--radius-lg);
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  transition: border-color 180ms;
}
.dev-portal .panel:hover { border-color: var(--line2); }
.dev-portal .panel-head {
  padding: 20px 24px 16px;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
}
.dev-portal .panel-head h2 {
  font-size: 15px;
  font-weight: 650;
  line-height: 1.4;
  display: flex;
  align-items: center;
  gap: 9px;
}
.dev-portal .panel-head h2 svg { color: var(--muted); width: 16px; height: 16px; }
.dev-portal .panel-body { padding: 20px 24px 22px; }
.dev-portal .panel-body p { font-size: 14px; line-height: 1.65; }

/* ── Dashboard Grid ─────────────────────────────────────────── */
.dev-portal .dashboard-grid {
  grid-template-columns: minmax(0, 1.55fr) minmax(260px, 1fr);
  gap: 20px;
}
.dev-portal .stack { gap: 20px; min-width: 0; }

/* ── Buttons ────────────────────────────────────────────────── */
.dev-portal .button {
  border-radius: var(--radius-md);
  font-weight: 600;
  min-height: 40px;
  line-height: 1.35;
  font-size: 13px;
  padding: 9px 16px;
  gap: 8px;
}
.dev-portal .button.primary,
.dev-portal .button:not(.secondary):not(.danger):not(.small) {
  background: var(--yellow);
  color: #0f1a28;
  border: none;
}
.dev-portal .button.primary:hover { filter: brightness(1.08); }
.dev-portal .button.secondary {
  background: var(--panel2);
  border: 1px solid var(--line2);
  color: var(--text);
}
.dev-portal .button.secondary:hover {
  background: color-mix(in srgb, var(--line2) 60%, var(--panel2));
  border-color: var(--line2);
}
.dev-portal .button.danger {
  background: color-mix(in srgb, var(--red) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--red) 35%, transparent);
  color: var(--red);
}
.dev-portal .button.small {
  font-size: 11.5px;
  padding: 6px 11px;
  min-height: 32px;
}
.dev-portal .text-button {
  color: var(--muted);
  font-size: 13px;
  min-height: 36px;
  transition: color 140ms;
}
.dev-portal .text-button:hover { color: var(--yellow); }

/* ── Tags ───────────────────────────────────────────────────── */
.dev-portal .tag {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  letter-spacing: 0.2px;
}
.dev-portal .tag.yellow {
  background: color-mix(in srgb, var(--yellow) 14%, transparent);
  color: var(--yellow);
}
.dev-portal .tag.green {
  background: color-mix(in srgb, var(--green) 14%, transparent);
  color: var(--green);
}
.dev-portal .tag.red {
  background: color-mix(in srgb, var(--red) 14%, transparent);
  color: var(--red);
}

/* ── Empty States ───────────────────────────────────────────── */
.dev-portal .empty {
  font-size: 14px;
  line-height: 1.7;
  padding: 36px 24px;
  text-align: center;
  color: var(--muted);
}
.dev-portal .empty h3 { font-size: 17px; color: var(--text); margin-bottom: 8px; }
.dev-portal .empty svg { color: color-mix(in srgb, var(--muted) 50%, transparent); }

/* ── Notices ────────────────────────────────────────────────── */
.dev-portal .notice {
  font-size: 13px;
  line-height: 1.65;
  border-radius: var(--radius-md);
  padding: 14px 18px;
  background: color-mix(in srgb, var(--yellow) 6%, var(--panel2));
  border: 1px solid color-mix(in srgb, var(--yellow) 20%, transparent);
  color: color-mix(in srgb, var(--yellow) 80%, var(--text));
}

/* ═══════════════════════════════════════════════════════════════
   DASHBOARD – PRIORITY EVENT PANEL
   ═══════════════════════════════════════════════════════════════ */
.dev-portal .dev-priority {
  margin-bottom: 22px;
  background: linear-gradient(115deg, #112039, #0d1829 70%);
  border: 1px solid var(--line2);
  box-shadow: none;
}
.dev-portal .dev-priority:hover { border-color: color-mix(in srgb, var(--yellow) 25%, var(--line2)); }
.dev-portal .dev-priority .panel-head {
  border-bottom: 0;
  padding-bottom: 4px;
}
.dev-portal .dev-priority .panel-body { padding: 0 26px 24px; }

/* Event Cards */
.dev-portal .dev-event {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  padding: 20px 0;
  position: relative;
  align-items: start;
  border-top: 1px solid var(--line);
}
.dev-portal .dev-event:first-child { border-top: 0; padding-top: 8px; }
.dev-portal .dev-event:last-child { padding-bottom: 0; }

/* Date Box */
.dev-portal .dev-event .date-box {
  background: var(--panel2);
  border: 1px solid var(--line2);
  border-radius: var(--radius-md);
  min-width: 54px;
  padding: 10px 6px;
  text-align: center;
}
.dev-portal .date-box strong {
  font-size: 22px;
  font-weight: 750;
  line-height: 1;
  display: block;
  color: var(--text);
}
.dev-portal .date-box span {
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 4px;
  display: block;
}
.dev-portal .dev-event h3 {
  font-size: 17px;
  font-weight: 650;
  margin: 0 0 7px;
  overflow-wrap: anywhere;
  color: var(--text);
}
.dev-portal .dev-priority .dev-event h3 { font-size: 22px; }
.dev-portal .dev-event .event-info p {
  margin: 5px 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
}
.dev-portal .dev-event .event-info .dev-event-deadline {
  font-size: 12px;
  color: var(--muted);
  opacity: 0.8;
}

/* Attendance Answer */
.dev-portal .dev-answer {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}
.dev-portal .event-info .dev-answer {
  margin: 10px 0;
  color: var(--muted);
}
.dev-portal .dev-answer.accepted,
.dev-portal .event-info .dev-answer.accepted { color: var(--green); }
.dev-portal .dev-answer.declined,
.dev-portal .event-info .dev-answer.declined  { color: var(--red); }

/* Vote Buttons */
.dev-portal .vote-buttons { gap: 8px; margin-top: 14px; }
.dev-portal .vote-button {
  padding: 9px 16px;
  min-height: 40px;
  border-radius: var(--radius-md);
  background: var(--panel2);
  border: 1px solid var(--line2);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  transition: background 140ms, border-color 140ms, color 140ms;
}
.dev-portal .vote-button:hover { border-color: var(--line2); background: var(--panel2); filter: brightness(1.1); }
.dev-portal .vote-button[data-response="accepted"] {
  background: color-mix(in srgb, var(--green) 14%, transparent);
  border-color: color-mix(in srgb, var(--green) 35%, transparent);
  color: var(--green);
}
.dev-portal .vote-button[data-response="accepted"].selected,
.dev-portal .vote-button[data-response="accepted"][aria-pressed="true"] {
  background: var(--green);
  border-color: var(--green);
  color: #0a1f18;
  font-weight: 700;
  box-shadow: 0 0 12px color-mix(in srgb, var(--green) 40%, transparent);
}
.dev-portal .vote-button[data-response="declined"] {
  background: color-mix(in srgb, var(--red) 10%, transparent);
  border-color: color-mix(in srgb, var(--red) 25%, transparent);
  color: var(--red);
}
.dev-portal .vote-button[data-response="declined"].selected,
.dev-portal .vote-button[data-response="declined"][aria-pressed="true"] {
  background: var(--red);
  border-color: var(--red);
  color: #1f0a0a;
  font-weight: 700;
}
.dev-portal .vote-button[data-response="tentative"] {
  background: color-mix(in srgb, var(--yellow) 10%, transparent);
  border-color: color-mix(in srgb, var(--yellow) 25%, transparent);
  color: var(--yellow);
}
.dev-portal .vote-button[data-response="tentative"].selected,
.dev-portal .vote-button[data-response="tentative"][aria-pressed="true"] {
  background: var(--yellow);
  border-color: var(--yellow);
  color: #0f1a28;
  font-weight: 700;
}
.dev-portal .vote-button.selected { box-shadow: inset 0 0 0 2px color-mix(in srgb, currentColor 40%, transparent); }
.dev-portal .event-manager-actions { grid-column: 2; margin-top: 4px; }

/* Notices inside priority panel */
.dev-portal .dev-notices .notice { margin-top: 18px; margin-bottom: 0; }

/* Task List */
.dev-portal .dev-task {
  display: flex;
  gap: 13px;
  align-items: center;
  width: 100%;
  text-align: left;
  background: transparent;
  color: var(--text);
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  transition: color 140ms;
}
.dev-portal .dev-task:last-child { border-bottom: 0; }
.dev-portal .dev-task:hover { color: var(--yellow); }
.dev-portal .dev-task > svg:first-child { color: var(--yellow); flex-shrink: 0; }
.dev-portal .dev-task > svg:last-child  { margin-left: auto; color: var(--muted); flex-shrink: 0; }
.dev-portal .dev-task span { min-width: 0; }
.dev-portal .dev-task strong { display: block; font-size: 13px; font-weight: 600; line-height: 1.45; overflow-wrap: anywhere; }
.dev-portal .dev-task small  { display: block; color: var(--muted); font-size: 12px; line-height: 1.5; margin-top: 3px; }

/* League Summary */
.dev-portal .dev-league-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 14px 0 22px;
}
.dev-portal .dev-league-summary strong { font-size: 28px; font-weight: 750; line-height: 1.2; display: block; letter-spacing: -0.5px; }
.dev-portal .dev-league-summary span  { font-size: 12px; color: var(--muted); }

/* ═══════════════════════════════════════════════════════════════
   HORIZONTAL TAB BARS
   ═══════════════════════════════════════════════════════════════ */
.dev-portal .dev-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin: 0 0 28px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 0;
}
.dev-portal .dev-tabs button {
  color: var(--muted);
  background: transparent;
  min-height: 42px;
  padding: 8px 16px 12px;
  border-radius: 0;
  font-size: 13.5px;
  font-weight: 500;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 140ms, border-color 140ms;
}
.dev-portal .dev-tabs button:hover { color: var(--text); }
.dev-portal .dev-tabs button[aria-current="page"] {
  color: var(--yellow);
  font-weight: 650;
  border-bottom-color: var(--yellow);
  background: transparent;
}

/* ═══════════════════════════════════════════════════════════════
   PROFILE POPOVER
   ═══════════════════════════════════════════════════════════════ */
.dev-portal .dev-profile-links {
  display: grid;
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
  margin-bottom: 10px;
}
.dev-portal .dev-profile-links button {
  display: flex;
  gap: 10px;
  align-items: center;
  background: transparent;
  color: var(--text);
  text-align: left;
  padding: 10px 12px;
  font-size: 13px;
  min-height: 42px;
  border-radius: var(--radius-md);
  transition: background 140ms;
}
.dev-portal .dev-profile-links button:hover { background: var(--panel2); }
.dev-portal .profile-panel {
  min-width: 260px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line2);
  background: var(--panel);
  box-shadow: var(--shadow-lg);
}

/* ═══════════════════════════════════════════════════════════════
   FAQ
   ═══════════════════════════════════════════════════════════════ */
.dev-portal .dev-faq-topics {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.dev-portal .dev-faq-topics button {
  background: var(--panel);
  color: var(--muted);
  border: 1px solid var(--line2);
  border-radius: 99px;
  padding: 7px 15px;
  min-height: 36px;
  font-size: 12.5px;
  font-weight: 500;
  transition: background 140ms, border-color 140ms, color 140ms;
}
.dev-portal .dev-faq-topics button:hover { color: var(--text); border-color: var(--line2); background: var(--panel2); }
.dev-portal .dev-faq-topics button[aria-pressed="true"] {
  color: var(--yellow);
  border-color: color-mix(in srgb, var(--yellow) 40%, transparent);
  background: color-mix(in srgb, var(--yellow) 8%, transparent);
  font-weight: 650;
}
.dev-portal .faq-tools {
  border: 1px solid var(--line);
  background: var(--panel);
  padding: 20px 22px;
  border-radius: var(--radius-lg);
  margin-bottom: 20px;
}
.dev-portal .faq-tags { display: none; }
.dev-portal .faq-entry {
  border-radius: var(--radius-md);
  background: var(--panel);
  border: 1px solid var(--line);
  margin-bottom: 8px;
  transition: border-color 140ms;
}
.dev-portal .faq-entry:hover { border-color: var(--line2); }
.dev-portal .faq-entry[open] { border-color: var(--line2); }
.dev-portal .faq-entry summary {
  padding: 17px 20px;
  min-height: 58px;
  cursor: pointer;
  list-style: none;
}
.dev-portal .faq-entry summary .faq-title { font-size: 14px; font-weight: 600; line-height: 1.5; }
.dev-portal .faq-answer { font-size: 14px; line-height: 1.8; padding: 0 20px 18px; }

/* ═══════════════════════════════════════════════════════════════
   LINEUP / PITCH
   ═══════════════════════════════════════════════════════════════ */
.dev-portal .dev-own-position {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--yellow);
  background: color-mix(in srgb, var(--yellow) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--yellow) 22%, transparent);
  border-radius: var(--radius-md);
  padding: 10px 16px;
  margin: 4px 18px 18px;
  font-size: 13px;
}
.dev-portal .dev-own-player {
  border: 2px solid var(--yellow);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--yellow) 10%, transparent);
  padding: 4px;
  color: #fff;
}
.dev-portal .dev-own-player .jersey { background: var(--yellow); color: #0f1a28; }
.dev-portal .pitch {
  background: radial-gradient(circle at 50% 42%,#173e94,#0d2254 68%,#081330 100%);
  border: 1px solid #3b82f652;
  border-radius: var(--radius-lg);
}
.dev-portal .player-token { font-size: 12px; }
.dev-portal .player-token small { font-size: 11px; }

/* ═══════════════════════════════════════════════════════════════
   METRICS
   ═══════════════════════════════════════════════════════════════ */
.dev-portal .metric {
  border-radius: var(--radius-lg);
  background: var(--panel);
  border: 1px solid var(--line);
  transition: border-color 180ms;
}
.dev-portal .metric:hover { border-color: var(--line2); }
.dev-portal .metric-value { font-size: 28px; letter-spacing: -0.8px; }
.dev-portal .metric-top { font-size: 11px; color: var(--muted); }
.dev-portal .metric-top svg { color: var(--yellow); }
.dev-portal .metric-note { font-size: 11px; }

/* ═══════════════════════════════════════════════════════════════
   FORMS & FIELDS
   ═══════════════════════════════════════════════════════════════ */
.dev-portal .field { font-size: 13px; }
.dev-portal .field small { font-size: 12px; color: var(--muted); }
.dev-portal input,
.dev-portal select,
.dev-portal textarea {
  background: var(--panel2);
  border-color: var(--line2);
  border-radius: var(--radius-md);
  color: var(--text);
  font-size: 13px;
  transition: border-color 140ms;
}
.dev-portal input:focus,
.dev-portal select:focus,
.dev-portal textarea:focus { border-color: var(--yellow); }

/* ═══════════════════════════════════════════════════════════════
   MODALS / DIALOGS
   ═══════════════════════════════════════════════════════════════ */
.dev-portal dialog {
  border-radius: var(--radius-xl);
  background: var(--panel);
  border: 1px solid var(--line2);
  box-shadow: var(--shadow-lg);
  padding: 28px;
}
.dev-portal dialog::backdrop {
  background: rgba(3, 8, 18, 0.75);
  backdrop-filter: blur(6px);
}
.dev-portal .dialog-head h2 { font-size: 19px; }

/* ═══════════════════════════════════════════════════════════════
   TABLES
   ═══════════════════════════════════════════════════════════════ */
.dev-portal table { font-size: 13px; }
.dev-portal th { font-size: 10px; letter-spacing: 0.8px; color: var(--muted); background: transparent; }
.dev-portal td { border-bottom-color: var(--line); }
.dev-portal .table-wrap { border-radius: var(--radius-lg); border-color: var(--line); }

/* ═══════════════════════════════════════════════════════════════
   TOPBAR POPOVER / NOTIFICATIONS
   ═══════════════════════════════════════════════════════════════ */
.dev-portal .topbar-popover {
  background: var(--panel);
  border: 1px solid var(--line2);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.dev-portal .notification-item { border-bottom-color: var(--line); }
.dev-portal .notification-item.unread {
  background: color-mix(in srgb, var(--yellow) 5%, transparent);
  box-shadow: inset 2px 0 0 var(--yellow);
}
.dev-portal .notification-badge {
  background: var(--yellow);
  color: #0f1a28;
}

/* ═══════════════════════════════════════════════════════════════
   SCORE / MATCH CARD
   ═══════════════════════════════════════════════════════════════ */
.dev-portal .score { font-size: 30px; letter-spacing: 2px; }
.dev-portal .crest {
  border-radius: var(--radius-md);
  border-color: var(--line2);
  background: var(--panel2);
}

/* ═══════════════════════════════════════════════════════════════
   PLAYER CARDS / ROSTER
   ═══════════════════════════════════════════════════════════════ */
.dev-portal .player-card {
  border-radius: var(--radius-lg);
  border-color: var(--line);
  background: var(--panel);
  transition: border-color 180ms;
}
.dev-portal .player-card:hover { border-color: var(--line2); }
.dev-portal .roster-card {
  border-radius: var(--radius-lg);
  border-color: var(--line);
  transition: border-color 180ms;
}
.dev-portal .roster-card:hover { border-color: var(--line2); }
.dev-portal .application-card {
  border-radius: var(--radius-lg);
  border-color: var(--line);
  transition: border-color 180ms;
}
.dev-portal .application-card:hover { border-color: var(--line2); }

/* ═══════════════════════════════════════════════════════════════
   TOAST
   ═══════════════════════════════════════════════════════════════ */
#toast {
  border-radius: var(--radius-lg);
  font-size: 13px;
  padding: 14px 20px;
  box-shadow: var(--shadow-lg);
}

/* ═══════════════════════════════════════════════════════════════
   HERO (OVERVIEW PAGE)
   ═══════════════════════════════════════════════════════════════ */
.dev-portal .hero {
  border-radius: var(--radius-xl);
  border: 1px solid var(--line2);
  background: linear-gradient(115deg, #0f2144 0%, #091527 100%);
  margin-bottom: 22px;
}
.dev-portal .hero:before {
  background: linear-gradient(90deg, #081828f5, #0a1c3aaa 50%, #0b1e3a44 100%),
              url('/assets/stadium.png') center 48%/cover;
  opacity: 0.85;
}

/* ═══════════════════════════════════════════════════════════════
   CHAT – FLOATING BUBBLE
   ═══════════════════════════════════════════════════════════════ */
.dev-portal .team-chat {
  bottom: 24px;
  right: 24px;
  width: 52px;
  border-radius: 50%;
  overflow: visible;
  border: 1px solid var(--line2);
  background: var(--panel);
  box-shadow: var(--shadow-md);
  transition: border-radius 220ms ease, width 220ms ease, box-shadow 220ms ease;
}

/* Closed state – icon bubble */
.dev-portal .team-chat:not(.dev-chat-open) .chat-bar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  padding: 0;
  display: grid;
  place-items: center;
  background: transparent;
}
.dev-portal .team-chat:not(.dev-chat-open) .chat-bar:before {
  content: '';
  display: block;
  width: 22px;
  height: 22px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%237e9ab5' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.dev-portal .team-chat:not(.dev-chat-open) .chat-bar.unread:before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23f4d060' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
}
.dev-portal .team-chat:not(.dev-chat-open) .chat-bar span { display: none; }
.dev-portal .team-chat:not(.dev-chat-open) .chat-bar.unread:after {
  content: '';
  position: absolute;
  right: 2px;
  top: 2px;
  width: 10px;
  height: 10px;
  background: var(--yellow);
  border-radius: 50%;
  border: 2px solid var(--bg);
}

/* Open state */
.dev-portal .team-chat.dev-chat-open {
  width: 380px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  max-height: calc(100dvh - 90px);
  box-shadow: var(--shadow-lg);
}
.dev-portal .team-chat.dev-chat-open .chat-bar {
  background: var(--panel2);
  padding: 13px 16px;
}
.dev-portal .chat-messages {
  max-height: 32dvh;
  background: var(--panel);
}
.dev-portal #chat-body { background: var(--panel); }

/* ═══════════════════════════════════════════════════════════════
   MOBILE BOTTOM NAV
   ═══════════════════════════════════════════════════════════════ */
.dev-portal .dev-bottom-nav { display: none; }

/* ═══════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════ */
.dev-portal .footer {
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.6;
  margin-top: 48px;
  border-top: 1px solid var(--line);
  opacity: 0.75;
}

/* ── Menu open state ────────────────────────────────────────── */
.dev-portal.dev-menu-open { overflow: hidden; }


/* ═══════════════════════════════════════════════════════════════
   PUBLIC HOMEPAGE – DEV STYLES
   ═══════════════════════════════════════════════════════════════ */
.dev-public .site-header { background: var(--bg); border-bottom: 1px solid var(--line); }
.dev-public .club-bar   { background: var(--sidebar-bg); color: var(--muted); font-size: 11px; }

.dev-public .header { max-width: 1200px; margin: auto; padding: 18px 28px; }
.dev-public .brand  { font-size: 16px; font-weight: 700; }
.dev-public .header nav { font-size: 13px; gap: 20px; }
.dev-public .header nav a { color: var(--muted); transition: color 140ms; }
.dev-public .header nav a:hover { color: var(--text); }
.dev-public .header .portal-link {
  background: var(--panel2);
  border: 1px solid var(--line2);
  border-radius: var(--radius-md);
  padding: 9px 14px;
  color: var(--text);
  font-weight: 600;
  font-size: 12.5px;
  transition: border-color 140ms, background 140ms;
}
.dev-public .header .portal-link:hover { border-color: var(--yellow); }

/* Hero */
.dev-public .hero {
  background: radial-gradient(ellipse at 90% 15%, color-mix(in srgb, #1e3d6b 60%, transparent), transparent 65%), var(--bg);
  border-bottom: 1px solid var(--line);
}
.dev-public .hero-inner  { max-width: 1200px; padding: 68px 28px 56px; gap: 56px; }
.dev-public .hero-copy h1 {
  font-size: clamp(34px, 4.2vw, 60px);
  letter-spacing: -1.8px;
  line-height: 1.1;
}
.dev-public .hero-copy h1 em { color: var(--yellow); font-style: normal; }
.dev-public .lead    { font-size: 17px; line-height: 1.8; max-width: 580px; color: var(--muted); }
.dev-public .eyebrow { font-size: 11px; color: var(--muted); letter-spacing: 2px; }

/* Club card */
.dev-public .hero-club {
  background: var(--panel);
  border: 1px solid var(--line2);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}
.dev-public .hero-club-logo { height: 150px; background: radial-gradient(ellipse, color-mix(in srgb, #1e3d6b 40%, transparent), transparent); }
.dev-public .hero-club-logo img { max-height: 120px; }
.dev-public .hero-club-caption { padding: 20px 24px 12px; }
.dev-public .hero-club-caption h2 { font-size: 22px; }
.dev-public .hero-club-caption p  { font-size: 14px; }
.dev-public .hero-leagues { font-size: 13px; padding: 0 24px 20px; }

/* Sections */
.dev-public .section  { max-width: 1200px; padding: 56px 28px; }
.dev-public .team-intro { display: none; }

.dev-public .competition-grid { gap: 16px; }
.dev-public .competition,
.dev-public .card {
  background: var(--panel);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  padding: 24px;
  transition: border-color 180ms;
}
.dev-public .competition:hover,
.dev-public .card:hover { border-color: var(--line2); }
.dev-public .competition h3,
.dev-public .card h3 { font-size: 20px; }
.dev-public .competition p,
.dev-public .card p   { font-size: 15px; }
.dev-public .competition .tag { font-size: 11px; }

.dev-public .section-bottom   { margin-top: 22px; }
.dev-public .section-bottom p { font-size: 14px; }
.dev-public h2  { font-size: 30px; line-height: 1.2; letter-spacing: -0.8px; }
.dev-public .planned .cards { gap: 16px; }

/* Club overview */
.dev-public .club-overview      { gap: 44px; }
.dev-public .parent-logo-panel  { min-height: 200px; border-radius: var(--radius-lg); }
.dev-public .club-copy p        { font-size: 15px; line-height: 1.8; }
.dev-public .club-copy .large   { font-size: 17px; }

/* Join section */
.dev-public .join         { gap: 44px; }
.dev-public .join .large  { font-size: 16px; line-height: 1.8; }
.dev-public .dev-join-guide {
  background: var(--panel);
  border-radius: var(--radius-xl);
  border: 1px solid var(--line);
  padding: 28px 30px;
}
.dev-public .steps          { counter-reset: dev-step; }
.dev-public .steps li       { padding-left: 46px; position: relative; }
.dev-public .steps li:before {
  counter-increment: dev-step;
  content: counter(dev-step);
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  position: absolute;
  left: 0;
  top: 2px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--yellow) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--yellow) 35%, transparent);
  color: var(--yellow);
  font-size: 13px;
  font-weight: 700;
}
.dev-public .steps h4 { font-size: 16px; }
.dev-public .steps p  { font-size: 14px; line-height: 1.7; }

/* Buttons */
.dev-public .button {
  border-radius: var(--radius-md);
  min-height: 44px;
  line-height: 1.35;
  font-weight: 600;
  font-size: 13px;
}
.dev-public .button.secondary {
  background: var(--panel2);
  border: 1px solid var(--line2);
  color: var(--text);
}

/* Footer */
.dev-public footer {
  background: var(--sidebar-bg);
  border-top: 1px solid var(--line);
  padding-top: 28px;
  padding-bottom: 28px;
}


/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE – TABLET ≤1100px
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .dev-portal .main     { padding: 28px 26px 80px; }
  .dev-portal .topbar   { padding: 0 26px; }
  .dev-portal .dashboard-grid { grid-template-columns: minmax(0, 1.3fr) minmax(240px, 1fr); }
  .dev-portal .panel-head,
  .dev-portal .panel-body  { padding-left: 20px; padding-right: 20px; }
  .dev-public .header nav  { gap: 14px 18px; }
  .dev-public .hero-inner  { gap: 32px; }
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE – MOBILE ≤900px (sidebar hidden, bottom nav shown)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .dev-portal .workspace   { margin-left: 0; }
  .dev-portal .sidebar     { width: 280px; max-width: calc(100vw - 28px); }
  .dev-portal .sidebar-backdrop { top: 38px; }
  .dev-portal .sidebar-close    { display: grid; }
  .dev-portal .topbar      { min-height: 58px; position: sticky; top: 38px; }
  .dev-portal .main        { padding-bottom: 100px; }

  /* Bottom Nav */
  .dev-portal .dev-bottom-nav {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    position: fixed;
    z-index: 26;
    bottom: 0;
    left: 0;
    right: 0;
    background: color-mix(in srgb, var(--sidebar-bg) 92%, transparent);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid var(--line);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .dev-portal .dev-bottom-nav button {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: transparent;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.3;
    min-height: 52px;
    border-radius: var(--radius-md);
    padding: 5px 2px;
    transition: color 140ms;
  }
  .dev-portal .dev-bottom-nav button span {
    font-size: clamp(9px, 2.8vw, 11px);
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
  }
  .dev-portal .dev-bottom-nav button[aria-current="page"],
  .dev-portal .dev-bottom-nav button[aria-expanded="true"] {
    color: var(--yellow);
    background: color-mix(in srgb, var(--yellow) 8%, transparent);
  }
  .dev-portal .dev-chat-badge {
    position: absolute;
    top: 4px;
    left: calc(50% + 6px);
    width: 7px;
    height: 7px;
    background: var(--yellow);
    border-radius: 50%;
    border: 2px solid var(--bg);
  }

  /* Chat hidden when closed on mobile, shown above bottom nav when open */
  .dev-portal .team-chat:not(.dev-chat-open) { display: none; }
  .dev-portal .team-chat.dev-chat-open {
    right: 12px;
    bottom: calc(72px + env(safe-area-inset-bottom));
    max-width: calc(100vw - 24px);
    max-height: calc(100dvh - 140px);
    width: 360px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE – SMALL MOBILE ≤700px
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {
  .dev-portal .dashboard-grid   { grid-template-columns: minmax(0, 1fr); }
  .dev-portal h1                { font-size: clamp(22px, 6.5vw, 30px); }
  .dev-portal .page-heading     { align-items: flex-start; }
  .dev-portal .dev-today        { display: none; }
  .dev-portal .panel-body       { padding: 16px 18px 20px; }
  .dev-portal .dev-priority .panel-body { padding: 0 18px 22px; }
  .dev-portal .dev-priority .dev-event h3 { font-size: 18px; }
  .dev-portal .dev-event .date-box { min-width: 46px; }
  .dev-portal .dev-event        { gap: 12px; }
  .dev-portal .dev-event h3     { font-size: 15px; }
  .dev-portal .dev-tabs         { gap: 2px; margin-bottom: 22px; }
  .dev-portal .dev-tabs button  { padding: 7px 12px 10px; font-size: 13px; }
  .dev-portal .dev-faq-topics button { font-size: 12px; padding: 6px 12px; }
  .dev-portal .faq-tools        { padding: 16px; }
  .dev-portal .faq-entry summary { padding: 15px 17px; }
  .dev-public .hero-inner       { grid-template-columns: minmax(0, 1fr); padding: 44px 20px; }
  .dev-public .hero-club        { max-width: 480px; width: 100%; }
  .dev-public .section          { padding: 40px 20px; }
  .dev-public .competition-grid,
  .dev-public .cards            { grid-template-columns: minmax(0, 1fr); }
  .dev-public .join,
  .dev-public .club-overview    { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .dev-public .dev-join-guide   { padding: 20px 22px; }
  .dev-public .lead             { font-size: 16px; }
  .dev-public .hero-copy h1     { letter-spacing: -1px; }
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE – VERY SMALL ≤450px
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 450px) {
  .dev-portal h1      { font-size: clamp(20px, 7vw, 26px); }
  .dev-portal .main   { padding: 22px 14px 100px; }
  .dev-portal .topbar { padding: 8px 14px; gap: 8px; }
  .dev-portal .breadcrumb { font-size: 11.5px; }
  .dev-portal .top-actions { gap: 6px; }
  .dev-portal .dev-priority .panel-head  { padding: 18px 16px 4px; }
  .dev-portal .dev-priority .dev-event   { grid-template-columns: minmax(0, 1fr); }
  .dev-portal .dev-priority .date-box    { display: none; }
  .dev-portal .dev-priority .event-manager-actions { grid-column: 1; }
  .dev-portal .vote-button { padding: 9px 13px; font-size: 13px; }
  .dev-portal .dev-event .vote-buttons { margin-left: 0; }
  .dev-portal .dev-event:not(.dev-priority .dev-event) .vote-buttons { flex-direction: column; align-items: stretch; }
  .dev-portal .dev-own-position { margin: 4px 12px 16px; font-size: 12px; }
  .dev-portal .profile-panel { min-width: 0; width: calc(100vw - 24px); }
}