/* ============================================================================ LEGACY MANAGER — USDA brand styles Mobile-first. Dark/light theme via [data-theme] attribute on . ============================================================================ */ /* ---- CSS variables: DARK (default) ---- */ :root, :root[data-theme="dark"] { --bg: #0b1220; --bg-panel: #131c2e; --bg-elev: #1a2540; --border: #23304d; --border-bright: #2f3f64; --accent: #3d7dd1; --accent-bright: #5da4f0; --primary: #4caf6b; --primary-bright: #6dd489; --gold: #d4a857; --danger: #e85a5a; --warn: #d49a3c; --text: #e5ecf7; --text-dim: #8896b3; --text-mute: #5a6585; } /* ---- CSS variables: LIGHT ---- */ :root[data-theme="light"] { --bg: #f5f4ef; --bg-panel: #ffffff; --bg-elev: #faf9f4; --border: #d8d4c7; --border-bright: #b8b3a3; --accent: #1d3a68; --accent-bright: #2a5596; --primary: #2e6d42; --primary-bright: #3f8a57; --gold: #a67a2a; --danger: #c43939; --warn: #b57e20; --text: #1a1f2e; --text-dim: #4a5468; --text-mute: #78829a; } /* ---- reset ---- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--bg); color: var(--text); font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; overscroll-behavior: none; transition: background 0.3s, color 0.3s; } /* Containers that need their own horizontal scroll (wide tables, etc.) wrap in .table-wrap so the scroll is contained instead of bleeding to body. */ .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } a { color: inherit; text-decoration: none; } button { font-family: inherit; } /* ---- type ---- */ .mono { font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; } .display { font-family: 'Teko', 'Oswald', 'Arial Narrow', sans-serif; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; line-height: 0.95; } .display.lg { font-size: 24px; } .display.xl { font-size: clamp(32px, 6vw, 42px); } .display.stat-v { font-size: 28px; color: var(--text); } .xs { font-size: 10px; letter-spacing: 0.15em; } .sm { font-size: 13px; } .dim { color: var(--text-dim); } .mute { color: var(--text-mute); } .accent { color: var(--accent); } .primary { color: var(--primary); } .gold { color: var(--gold); } .danger { color: var(--danger); } .bold { font-weight: 700; } /* ---- responsive utility ---- */ .mobile-only { display: block; } .desktop-only { display: none; } @media (min-width: 768px) { .mobile-only { display: none !important; } .desktop-only { display: block; } nav.desktop-only { display: flex; } div.desktop-only, form.desktop-only { display: flex; } table.desktop-only { display: table; } th.desktop-only, td.desktop-only { display: table-cell; } } /* ---- fields and buttons ---- */ .field { background: var(--bg-elev); border: 1px solid var(--border); color: var(--text); padding: 12px 14px; border-radius: 6px; font-family: inherit; font-size: 16px; width: 100%; transition: border 0.15s; -webkit-appearance: none; } .field:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); } @media (min-width: 768px) { .field { font-size: 14px; padding: 10px 12px; } } .btn { padding: 12px 22px; border-radius: 6px; font-weight: 700; cursor: pointer; font-family: 'Teko', sans-serif; text-transform: uppercase; letter-spacing: 0.06em; font-size: 17px; border: 1px solid transparent; transition: all 0.15s; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; } .btn.lg { padding: 14px 26px; font-size: 18px; } .btn.full { width: 100%; } .btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); } .btn-primary:hover:not(:disabled) { background: var(--accent-bright); transform: translateY(-1px); } .btn-primary:disabled { opacity: 0.4; cursor: not-allowed; } .btn-ghost { background: transparent; color: var(--text); border-color: var(--border); } .btn-ghost:hover { border-color: var(--accent); color: var(--accent); } .btn-danger-ghost { background: transparent; border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent); color: var(--danger); padding: 8px 14px; border-radius: 5px; cursor: pointer; font-size: 13px; } .icon-btn { background: transparent; border: 1px solid var(--border); color: var(--text-dim); width: 40px; height: 40px; border-radius: 6px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; } .icon-btn:hover { border-color: var(--accent); color: var(--accent); } /* theme toggle icon visibility */ :root[data-theme="dark"] .theme-sun { display: inline; } :root[data-theme="dark"] .theme-moon { display: none; } :root[data-theme="light"] .theme-sun { display: none; } :root[data-theme="light"] .theme-moon { display: inline; } /* ---- cards ---- */ .card { background: var(--bg-panel); border: 1px solid var(--border); border-radius: 8px; padding: 20px; margin-bottom: 16px; } .card.no-pad { padding: 0; overflow: hidden; } .card-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; } /* ---- app header ---- */ .app-header { background: var(--bg-panel); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 10; } .header-inner { max-width: 1400px; margin: 0 auto; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; } .header-left, .header-right { display: flex; align-items: center; gap: 12px; } @media (min-width: 768px) { .header-left nav { display: flex; } } .brand { display: flex; align-items: center; gap: 10px; padding: 14px 0; } .brand .mark { width: 36px; height: 36px; border-radius: 6px; background: var(--accent); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 1px var(--border-bright), 0 2px 8px rgba(0,0,0,0.3); position: relative; } .brand .mark::after { content: "♛"; color: #fff; font-size: 18px; line-height: 1; } .brand-text { font-size: 15px; letter-spacing: 0.12em; } .tab { padding: 16px 14px; color: var(--text-dim); font-family: 'Teko', sans-serif; text-transform: uppercase; letter-spacing: 0.08em; font-size: 16px; font-weight: 600; border-bottom: 2px solid transparent; min-height: 44px; display: flex; align-items: center; } .tab.active { color: var(--accent); border-bottom-color: var(--accent); } .tab:hover:not(.active) { color: var(--text); } .user-info { text-align: right; } .mobile-nav { display: none; background: var(--bg-panel); border-bottom: 1px solid var(--border); padding: 12px 16px; } .mobile-nav.open { display: block; } .mobile-user { padding: 4px 0 14px; border-bottom: 1px solid var(--border); margin-bottom: 8px; } .mobile-link { display: block; padding: 14px 10px; color: var(--text); font-family: 'Teko', sans-serif; text-transform: uppercase; letter-spacing: 0.06em; font-size: 16px; font-weight: 600; border-radius: 6px; min-height: 48px; } .mobile-link:hover { background: var(--bg-elev); } /* ---- main ---- */ .main-content { max-width: 1400px; margin: 0 auto; padding: 20px 16px 60px; } .page-header { margin-bottom: 20px; } .lede { color: var(--text-dim); margin: 4px 0 0; } /* ---- flash messages ---- */ .flash { padding: 12px 14px; border-radius: 6px; margin-bottom: 12px; font-size: 14px; } .flash.error { background: color-mix(in srgb, var(--danger) 15%, transparent); color: var(--danger); border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent); } .flash.success { background: color-mix(in srgb, var(--primary) 15%, transparent); color: var(--primary); border: 1px solid color-mix(in srgb, var(--primary) 40%, transparent); } /* ---- landing ---- */ .landing { min-height: 100vh; } .landing-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--border); } .hero { max-width: 1200px; margin: 0 auto; padding: 40px 20px 60px; position: relative; } .hero .badge { display: inline-flex; align-items: center; padding: 5px 12px; background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); border-radius: 999px; font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--accent-bright); letter-spacing: 0.12em; margin-bottom: 20px; } .hero-title { font-size: clamp(44px, 9vw, 88px); margin: 0; letter-spacing: -0.005em; } .hero-sub { font-size: clamp(16px, 2.2vw, 20px); color: var(--text-dim); max-width: 620px; margin: 20px 0 28px; line-height: 1.55; } .stats { display: grid; grid-template-columns: repeat(2, 1fr); margin-top: 48px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .stats > div { padding: 22px 18px; border-left: 1px solid var(--border); } .stats > div:first-child { border-left: none; } .stats > div:nth-child(3) { border-top: 1px solid var(--border); } .stats > div:nth-child(4) { border-top: 1px solid var(--border); } .stats .stat-v { font-size: 36px; color: var(--accent); } @media (min-width: 768px) { .stats { grid-template-columns: repeat(4, 1fr); } .stats > div:nth-child(3), .stats > div:nth-child(4) { border-top: none; } .stats > div { border-left: 1px solid var(--border); } .stats > div:first-child { border-left: none; } } .features-section { max-width: 1200px; margin: 0 auto; padding: 40px 20px; } .section-label { font-size: 10px; letter-spacing: 0.2em; margin-bottom: 8px; } .section-label.live { color: var(--primary); } .section-label.coming { color: var(--gold); } .section-title { font-size: clamp(28px, 5vw, 42px); margin: 0 0 24px; } .features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin-bottom: 48px; } .feature-card { background: var(--bg-panel); border: 1px solid var(--border); border-radius: 8px; padding: 20px; position: relative; } .feature-card h3 { margin: 0 0 10px; font-size: 18px; color: var(--text-dim); } .feature-card.live h3 { color: var(--text); } .feature-card p { margin: 0; color: var(--text-dim); font-size: 14px; line-height: 1.55; } .feature-card .live-pill { position: absolute; top: 14px; right: 14px; font-family: 'JetBrains Mono', monospace; font-size: 9px; color: var(--primary); padding: 2px 6px; background: color-mix(in srgb, var(--primary) 14%, transparent); border-radius: 3px; letter-spacing: 0.12em; } .landing-footer { padding: 24px 20px; border-top: 1px solid var(--border); text-align: center; } /* ---- auth pages ---- */ .auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 40px 20px; } .auth-card { width: 100%; max-width: 420px; background: var(--bg-panel); border: 1px solid var(--border); border-radius: 10px; padding: 32px 24px; } .auth-brand { margin-bottom: 20px; padding: 0; } .auth-card h1 { margin: 0 0 20px; } .auth-card label { display: block; margin-bottom: 12px; } .auth-card label > div { margin-bottom: 4px; } .auth-card .btn { margin-top: 4px; } .auth-footer { margin-top: 16px; text-align: center; } .auth-footer a { color: var(--accent); margin-left: 6px; } /* ---- calculator ---- */ .page { padding-bottom: 40px; } .tier-form { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; } .tier-form label { flex-shrink: 0; } .tier-form .field { flex: 1 1 260px; max-width: 320px; } .stat-card { padding: 20px; } .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px; } .progress { margin-top: 16px; height: 6px; background: var(--bg-elev); border-radius: 3px; overflow: hidden; } .progress-bar { height: 100%; background: var(--primary); transition: width 0.4s, background 0.2s; } .add-form { display: grid; grid-template-columns: 1fr; gap: 8px; padding: 12px; background: var(--bg-elev); border-radius: 6px; margin-bottom: 16px; } @media (min-width: 768px) { .add-form { grid-template-columns: 2fr 1fr 2fr 1fr auto auto; align-items: center; } .add-form label { margin: 0; display: flex; align-items: center; gap: 6px; white-space: nowrap; } } .recruits-table { width: 100%; border-collapse: collapse; } .recruits-table th { text-align: left; padding: 10px 8px; font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--text-mute); letter-spacing: 0.15em; border-bottom: 1px solid var(--border); text-transform: uppercase; } .recruits-table td { padding: 10px 8px; border-bottom: 1px solid var(--border); font-size: 14px; } .status { padding: 3px 8px; border-radius: 3px; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; letter-spacing: 0.05em; } .status-target { background: color-mix(in srgb, var(--text-mute) 20%, transparent); color: var(--text-dim); } .status-committed { background: color-mix(in srgb, var(--warn) 20%, transparent); color: var(--warn); } .status-signed { background: color-mix(in srgb, var(--primary) 20%, transparent); color: var(--primary); } .recruits-cards { display: flex; flex-direction: column; gap: 10px; } .recruit-card { border: 1px solid var(--border); border-radius: 6px; padding: 12px; background: var(--bg-elev); user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; transition: border-color 0.15s, transform 0.1s; } .recruit-card:active { transform: scale(0.98); border-color: var(--accent); } .rc-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .rc-row .display { flex: 1; font-size: 15px; } .rc-meta { margin-top: 4px; } .rc-pills { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; align-items: center; } /* Tier pills — colored chips that encapsulate each recruit's tier value. */ .tier-pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; white-space: nowrap; border: 1px solid var(--border); } .tier-pill.tier-rank-5 { background: color-mix(in srgb, var(--gold) 22%, transparent); color: var(--gold); border-color: color-mix(in srgb, var(--gold) 50%, transparent); } .tier-pill.tier-rank-4 { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent-bright); border-color: color-mix(in srgb, var(--accent) 40%, transparent); } .tier-pill.tier-rank-3 { background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary); border-color: color-mix(in srgb, var(--primary) 35%, transparent); } .tier-pill.tier-rank-2 { background: color-mix(in srgb, var(--text-mute) 16%, transparent); color: var(--text-dim); } .tier-pill.tier-rank-1 { background: color-mix(in srgb, var(--text-mute) 10%, transparent); color: var(--text-mute); } .tier-pill.tier-rank-0 { background: var(--bg-elev); color: var(--text-mute); } /* Mobile long-press edit/delete modal */ .recruit-modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: flex-end; justify-content: center; } .recruit-modal[hidden] { display: none; } .recruit-modal-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(2px); } .recruit-modal-sheet { position: relative; width: 100%; max-width: 600px; max-height: 90vh; overflow-y: auto; background: var(--bg-panel); border-top-left-radius: 14px; border-top-right-radius: 14px; border: 1px solid var(--border); border-bottom: none; padding: 18px 18px 24px; animation: rm-slide-up 0.2s ease-out; } @keyframes rm-slide-up { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .recruit-modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--border); } .recruit-modal-form { display: flex; flex-direction: column; gap: 12px; } .rm-field { display: block; } .rm-field > div { margin-bottom: 4px; } .recruit-modal-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--border); } .recruit-modal-actions .btn { flex: 1 1 auto; } .recruit-modal-actions .btn-danger-ghost { flex: 1 1 auto; } @media (min-width: 768px) { .recruit-modal { align-items: center; } .recruit-modal-sheet { border-radius: 14px; border-bottom: 1px solid var(--border); margin: 20px; } } .empty { padding: 40px 16px; text-align: center; color: var(--text-dim); border: 1px dashed var(--border); border-radius: 8px; } /* ---- leaderboard ---- */ .filter-row { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 14px; -ms-overflow-style: none; scrollbar-width: none; } .filter-row::-webkit-scrollbar { display: none; } .filter-btn { padding: 10px 16px; border: 1px solid var(--border); border-radius: 6px; color: var(--text-dim); font-family: 'Teko', sans-serif; text-transform: uppercase; letter-spacing: 0.05em; font-size: 15px; font-weight: 600; white-space: nowrap; min-height: 40px; display: inline-flex; align-items: center; } .filter-btn.active { border-color: var(--accent); color: var(--accent); } .leaderboard-table, .lp-table { width: 100%; border-collapse: collapse; } .leaderboard-table th, .lp-table th { text-align: left; padding: 14px 12px; font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--text-mute); letter-spacing: 0.15em; border-bottom: 1px solid var(--border); text-transform: uppercase; background: var(--bg-panel); position: sticky; top: 0; white-space: nowrap; } .leaderboard-table th.center, .lp-table th.center { text-align: center; } .leaderboard-table td, .lp-table td { padding: 12px 12px; border-bottom: 1px solid var(--border); font-size: 13px; } .leaderboard-table td.center, .lp-table td.center { text-align: center; } .leaderboard-table tr.me, .lp-table tr.me { background: color-mix(in srgb, var(--accent) 8%, transparent); } .me-pill { font-family: 'JetBrains Mono', monospace; font-size: 9px; color: var(--accent); padding: 2px 6px; background: color-mix(in srgb, var(--accent) 18%, transparent); border-radius: 3px; letter-spacing: 0.1em; } .conf-pill { padding: 3px 8px; background: var(--bg-elev); border-radius: 3px; color: var(--text-dim); font-family: 'JetBrains Mono', monospace; font-size: 12px; } .pct-wrap { display: flex; align-items: center; gap: 10px; } .pct-bar { flex: 1; min-width: 60px; height: 4px; background: var(--bg-elev); border-radius: 2px; overflow: hidden; } .pct-fill { height: 100%; background: var(--primary); } .leaderboard-cards, .lp-cards { display: flex; flex-direction: column; gap: 8px; padding: 12px; } .lb-card, .lp-card { background: var(--bg-panel); border: 1px solid var(--border); border-radius: 6px; padding: 14px; } .lb-card.me, .lp-card.me { background: color-mix(in srgb, var(--accent) 8%, var(--bg-panel)); } .lp-card.medal { border-left: 3px solid var(--gold); } .lb-row, .lp-row { display: flex; align-items: center; gap: 10px; } .lb-row .display, .lp-row .display { flex: 1; font-size: 16px; } .lb-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 10px 0; } /* ---- LP board specific ---- */ .psn-link { color: inherit; transition: color 0.15s; } .psn-link:hover { color: var(--accent); } .lp-card-link { display: block; color: inherit; text-decoration: none; } .lp-card-link:hover .lp-card, .lp-card-link:hover .lb-card { border-color: var(--accent); } .my-lp-card { border-left: 3px solid var(--accent); } .my-lp-header { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 10px; } .season-strip { margin-top: 14px; overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none; } .season-strip::-webkit-scrollbar { display: none; } .season-strip { display: flex; gap: 6px; } .season-chip { padding: 8px 10px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 5px; min-width: 60px; text-align: center; } .season-chip.empty { background: transparent; border-color: transparent; opacity: 0.3; } .season-chip .display { font-size: 15px; margin-top: 2px; } /* ---- notices ---- */ .notice { padding: 14px; border-radius: 8px; font-size: 13px; line-height: 1.5; margin-top: 20px; } .notice-gold { background: color-mix(in srgb, var(--gold) 10%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent); color: var(--text-dim); } .notice-gold strong { color: var(--gold); } /* ---- sortable tables ---- */ table.sortable th[data-sortable] { cursor: pointer; user-select: none; -webkit-user-select: none; white-space: nowrap; } table.sortable th[data-sortable]:hover { color: var(--text); } table.sortable th[data-sortable]::after { content: '↕'; display: inline-block; margin-left: 6px; opacity: 0.3; font-size: 0.85em; } table.sortable th[data-sortable].sorted-asc::after { content: '▲'; opacity: 1; color: var(--accent); } table.sortable th[data-sortable].sorted-desc::after { content: '▼'; opacity: 1; color: var(--accent); } /* ---- inline status select (recruit table quick-edit) ---- */ .status-select { background: var(--bg-elev); border: 1px solid var(--border); color: var(--text); padding: 4px 8px; border-radius: 3px; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; letter-spacing: 0.05em; cursor: pointer; -webkit-appearance: none; appearance: none; } .status-select.status-target { color: var(--text-dim); } .status-select.status-committed { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, var(--border)); } .status-select.status-signed { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); } .status-select:focus { outline: 2px solid var(--accent); outline-offset: 1px; } /* ---- expanded edit row ---- */ .edit-row { background: var(--bg-elev); } .edit-row td { padding: 14px !important; } .edit-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .edit-form .field { flex: 1 1 140px; max-width: 200px; } .edit-form .btn { flex-shrink: 0; } /* ============================================================================ COACH HUB (team-colored profile) ============================================================================ */ .coach-hub { --team-primary: var(--accent); --team-secondary: var(--accent-bright); } .hub-header { position: relative; margin-bottom: 24px; border-radius: 12px; overflow: hidden; } .hub-header-bg { position: absolute; inset: 0; opacity: 0.95; } .hub-header-content { position: relative; padding: 28px 24px; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.3); } .hub-team-info { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .hub-logo, .hub-logo-placeholder { width: 80px; height: 80px; background: rgba(255,255,255,0.15); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-family: 'Teko', sans-serif; font-size: 28px; font-weight: 700; color: #fff; border: 2px solid rgba(255,255,255,0.3); flex-shrink: 0; } .hub-conference { color: rgba(255,255,255,0.8); } .hub-team-name { margin: 4px 0; font-size: clamp(28px, 5vw, 44px); } .hub-coach-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .badge { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.12em; padding: 3px 8px; border-radius: 3px; background: rgba(255,255,255,0.2); color: #fff; } .badge-admin { font-weight: 600; } .admin-banner { margin-top: 16px; padding: 10px 14px; background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.4); border-radius: 6px; font-size: 13px; } .hub-grid { display: grid; grid-template-columns: 1fr; gap: 20px; } /* Grid items default to min-width:auto (== min-content), which lets a wide descendant (like a recruits table) push the grid item past the viewport. min-width:0 makes 1fr actually mean 1fr. */ .hub-grid > .hub-side, .hub-grid > .hub-main { min-width: 0; } @media (min-width: 900px) { .hub-grid { grid-template-columns: 320px 1fr; } } .hub-side .card { margin-bottom: 16px; } .hub-side .card h3 { margin-top: 0; } .placeholder-card { opacity: 0.6; } .placeholder-card .dim { font-style: italic; } .info-list { margin: 12px 0 0; display: grid; grid-template-columns: max-content 1fr; gap: 8px 14px; font-size: 13px; } .info-list dt { color: var(--text-mute); font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.1em; } .info-list dd { margin: 0; color: var(--text); } .hub-bio { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); font-size: 13px; color: var(--text-dim); line-height: 1.6; } .season-pills { display: flex; gap: 4px; margin-top: 10px; flex-wrap: wrap; } .season-pills .pill { padding: 5px 8px; background: var(--bg-elev); border-radius: 4px; text-align: center; min-width: 50px; } .hub-cap { text-align: right; } .hub-stats-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 14px 0; margin-bottom: 16px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } @media (min-width: 600px) { .hub-stats-row { grid-template-columns: repeat(4, 1fr); } } .hub-budget-bar { margin-bottom: 18px; } .hub-budget-line { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; } .hub-progress { height: 10px; margin-top: 0; } .tier-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 10px; margin-top: 10px; } .tier-stat { text-align: center; padding: 10px; background: var(--bg-elev); border-radius: 6px; } .sm-btn { font-size: 14px; padding: 8px 14px; min-height: 36px; margin-top: 12px; } /* Header / user-info layout — desktop only. Scoped here because the !important rules previously bled onto mobile, forcing .user-info to display:flex even when .desktop-only said hide. */ @media (min-width: 768px) { .header-right .user-info { padding-right: 16px; } .header-right .user-info .display { font-size: 15px !important; letter-spacing: 0.05em; background: linear-gradient(135deg, var(--team-primary, #1d3a68) 0%, var(--team-secondary, #ffffff) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-weight: 800; } .header-right .user-info .mono { font-size: 11px !important; opacity: 0.7; } .header-right { gap: 14px; align-items: center; } header .header-right { gap: 24px !important; align-items: center; } header .user-info { display: flex !important; flex-direction: column !important; align-items: flex-end !important; padding-right: 8px; line-height: 1.3; gap: 2px; } header .user-info .display { font-size: 22px !important; letter-spacing: 0.06em; font-weight: 800; background: linear-gradient(135deg, var(--team-primary, #1d3a68) 0%, var(--team-secondary, #ffffff) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; white-space: nowrap; } header .user-info .mono { font-size: 13px !important; opacity: 0.85; white-space: nowrap; } } .notes-row .recruit-notes { padding: 12px 18px; background: rgba(255,255,255,0.03); border-bottom: 1px solid rgba(255,255,255,0.06); font-size: 14px; line-height: 1.5; } .notes-list { display: flex; flex-direction: column; gap: 14px; margin-top: 12px; } .note-item { padding: 12px 14px; border-left: 3px solid var(--accent, #4a90ff); background: rgba(255,255,255,0.03); border-radius: 4px; } .note-item p { margin: 6px 0 0; opacity: 0.9; } .tier-stars { color: #FFD700; font-size: 0.65em; letter-spacing: 3px; margin-left: 10px; vertical-align: middle; text-shadow: 0 0 8px rgba(255, 215, 0, 0.4); font-weight: normal; } /* ============================================================================ ADMIN TOOLS — tabbed admin GUI ============================================================================ */ .tab.tab-admin, .mobile-link.mobile-link-admin { color: var(--gold); } .tab.tab-admin.active { border-bottom-color: var(--gold); } .tools-tabs { display: flex; gap: 4px; overflow-x: auto; margin-bottom: 18px; padding-bottom: 2px; border-bottom: 1px solid var(--border); -ms-overflow-style: none; scrollbar-width: none; } .tools-tabs::-webkit-scrollbar { display: none; } .tools-tab { background: transparent; border: none; border-bottom: 2px solid transparent; padding: 10px 14px; color: var(--text-dim); font-family: 'Teko', sans-serif; text-transform: uppercase; letter-spacing: 0.06em; font-size: 16px; font-weight: 600; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; } .tools-tab:hover { color: var(--text); } .tools-tab.active { color: var(--gold); border-bottom-color: var(--gold); } .tools-tab-count { font-family: 'JetBrains Mono', monospace; font-size: 10px; padding: 2px 6px; background: var(--bg-elev); border-radius: 999px; letter-spacing: 0.05em; } .tools-tab-count--alert { background: color-mix(in srgb, var(--warn) 25%, transparent); color: var(--warn); } .tools-pane { display: none; } .tools-pane.active { display: block; } .tools-table { width: 100%; border-collapse: collapse; } .tools-table th { text-align: left; padding: 12px 14px; font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--text-mute); letter-spacing: 0.15em; border-bottom: 1px solid var(--border); text-transform: uppercase; background: var(--bg-panel); white-space: nowrap; } .tools-table td { padding: 12px 14px; border-bottom: 1px solid var(--border); font-size: 14px; white-space: nowrap; } .tools-table tr:last-child td { border-bottom: none; } .role-pill { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600; letter-spacing: 0.1em; padding: 3px 8px; border-radius: 3px; } .role-pill.role-comm { background: color-mix(in srgb, var(--gold) 22%, transparent); color: var(--gold); border: 1px solid color-mix(in srgb, var(--gold) 50%, transparent); } .role-pill.role-admin { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent-bright); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); } .assign-form { display: flex; gap: 6px; align-items: center; } .assign-form select { min-width: 200px; } .lp-add-grid { display: grid; grid-template-columns: 1fr; gap: 10px; } @media (min-width: 768px) { .lp-add-grid { grid-template-columns: repeat(2, 1fr); } .lp-reason { grid-column: 1 / -1; } } .lp-field { display: block; } .lp-field > div { margin-bottom: 4px; }