/* ============================================ Chess Inform - Premium theme ============================================ */ /* ========================================================= Chess Inform Design System (Light + Dark) - Theme controlled via: - No hardcoded colors in component rules (use variables) ========================================================= */ :root { /* Brand */ --brand-primary: #1B3A6B; --brand-primary-hover: #142B52; --brand-accent: #C7922F; --brand-accent-hover: #A97822; /* Backgrounds */ --bg-main: #F8FAFC; --bg-card: #FFFFFF; --bg-soft: #F1F5F9; /* Text */ --text-main: #1E293B; --text-muted: #64748B; --text-inverse: #FFFFFF; /* Borders */ --border-light: #E2E8F0; /* Semantic */ --success: #15803D; --warning: #D97706; --danger: #B91C1C; --info: #0369A1; /* Charts */ --chart-1: #1B3A6B; --chart-2: #C7922F; --chart-3: #2563EB; --chart-4: #10B981; --chart-5: #EF4444; /* Chessboard visuals (used by chessboard.js squares + highlights) */ /* Classic brown/tan for clear piece visibility (black pieces on dark squares) */ --board-light: rgb(240, 217, 181); /* #F0D9B5 warm tan */ --board-dark: rgb(181, 136, 99); /* #B58863 brown */ --board-highlight: var(--brand-accent); --board-gold: #D4AF37; /* RGB helpers (for rgba() tints) */ --brand-primary-rgb: 27, 58, 107; --brand-accent-rgb: 199, 146, 47; --text-main-rgb: 30, 41, 59; --danger-rgb: 185, 28, 28; --success-rgb: 21, 128, 61; --warning-rgb: 217, 119, 6; --info-rgb: 3, 105, 161; /* Motion */ --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94); --transition-fast: 0.2s var(--ease-out); --transition-medium: 0.28s var(--ease-out); --transition-slow: 0.35s var(--ease-out); /* Spacing scale */ --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 2.5rem; --space-3xl: 3rem; /* Aliases (compat layer for existing CSS) */ --bg-color: var(--bg-main); --text-color: var(--text-main); --card-bg: var(--bg-card); --accent-color: var(--brand-accent); --bg-page: var(--bg-main); --bg-card-hover: var(--bg-soft); --bg-sidebar: var(--bg-card); --text-primary: var(--text-main); --text-secondary: var(--text-main); --border-subtle: var(--border-light); --accent-gold: var(--brand-accent); --accent-amber: var(--brand-accent-hover); --accent-gold-light: var(--brand-accent); --chess-green: var(--brand-primary); --chess-green-hover: var(--brand-primary-hover); --charcoal: var(--text-main); --charcoal-light: var(--text-muted); --on-accent: var(--text-inverse); --on-solid: var(--text-inverse); --table-head-text: var(--text-main); /* Sidebar tokens (mapped) */ --sidebar-link-text: rgba(var(--text-main-rgb), 0.82); --sidebar-link-hover-bg: rgba(var(--brand-accent-rgb), 0.12); --sidebar-link-hover-text: rgba(var(--text-main-rgb), 0.96); --sidebar-link-active-bg: var(--brand-accent); --sidebar-link-active-text: var(--text-main); --sidebar-divider: var(--border-light); --sidebar-group-text: rgba(var(--text-main-rgb), 0.52); } [data-theme="dark"] { --brand-primary: #2F5EA8; --brand-primary-hover: #1B3A6B; --brand-accent: #D4A93A; --brand-accent-hover: #E6BE5C; --bg-main: #111827; --bg-card: #0F172A; --bg-soft: #1F2937; --text-main: #F1F5F9; --text-muted: #94A3B8; --text-inverse: #0B1220; --border-light: #1F2937; --success: #22C55E; --warning: #F59E0B; --danger: #EF4444; --info: #38BDF8; --chart-1: #2F5EA8; --chart-2: #D4A93A; --chart-3: #60A5FA; --chart-4: #34D399; --chart-5: #F87171; /* Chessboard visuals – lighter brown/tan so black pieces remain visible */ --board-light: rgb(232, 220, 200); /* #E8DCC8 light tan */ --board-dark: rgb(139, 115, 85); /* #8B7355 medium brown */ --board-highlight: var(--brand-accent); --board-gold: #D4AF37; /* RGB helpers update */ --brand-primary-rgb: 47, 94, 168; --brand-accent-rgb: 212, 169, 58; --text-main-rgb: 241, 245, 249; --danger-rgb: 239, 68, 68; --success-rgb: 34, 197, 94; --warning-rgb: 245, 158, 11; --info-rgb: 56, 189, 248; /* Aliases */ --bg-color: var(--bg-main); --text-color: var(--text-main); --card-bg: var(--bg-card); --accent-color: var(--brand-accent); --bg-page: var(--bg-main); --bg-card-hover: var(--bg-soft); --bg-sidebar: var(--bg-card); --text-primary: var(--text-main); --text-secondary: var(--text-main); --border-subtle: var(--border-light); --accent-gold: var(--brand-accent); --accent-amber: var(--brand-accent-hover); --chess-green: var(--brand-primary); --chess-green-hover: var(--brand-primary-hover); --charcoal: var(--text-main); --charcoal-light: var(--text-muted); --on-accent: var(--text-inverse); --on-solid: var(--text-inverse); --table-head-text: var(--text-main); --sidebar-link-text: rgba(var(--text-main-rgb), 0.82); --sidebar-link-hover-bg: rgba(var(--brand-accent-rgb), 0.14); --sidebar-link-hover-text: rgba(var(--text-main-rgb), 0.96); --sidebar-link-active-bg: var(--brand-accent); --sidebar-link-active-text: var(--text-inverse); --sidebar-divider: var(--border-light); --sidebar-group-text: rgba(var(--text-main-rgb), 0.52); } /* Bootstrap variable mapping (both themes) */ [data-theme="dark"], [data-theme="light"] { --bs-body-bg: var(--bg-page); --bs-body-color: var(--text-primary); --bs-border-color: var(--border-subtle); --bs-link-color: var(--brand-accent); --bs-link-hover-color: var(--brand-accent-hover); --bs-primary: var(--brand-primary); --bs-primary-rgb: var(--brand-primary-rgb); --bs-secondary-color: var(--text-muted); --bs-tertiary-color: var(--text-muted); } /* Base */ body { font-family: "Segoe UI", "Helvetica Neue", system-ui, -apple-system, sans-serif; background-color: var(--bg-color); color: var(--text-color); transition: background-color 0.3s ease, color 0.3s ease; font-size: 1rem; line-height: 1.6; letter-spacing: 0.01em; min-height: 100vh; -webkit-font-smoothing: antialiased; } /* ===================================================== Utility mapping (Bootstrap helpers -> CSS variables) - helps eliminate "light-only" helper classes in dark mode ===================================================== */ .bg-soft { background-color: var(--bg-soft) !important; } .bg-card { background-color: var(--bg-card) !important; } /* Override bootstrap helper for theme correctness */ .bg-light { background-color: var(--bg-soft) !important; } .text-dark { color: var(--text-main) !important; } .text-muted { color: var(--text-muted) !important; } /* Size utilities (avoid inline styles) */ .avatar-80 { width: 80px; height: 80px; } .icon-2xl { font-size: 2.5rem; } .icon-lg { font-size: 1.5rem; } .progress-h10 { height: 10px; } .progress-h6 { height: 6px; } .avatar-72 { width: 72px; height: 72px; } .icon-28 { font-size: 28px; } .placeholder-box { height: 220px; display: flex; align-items: center; justify-content: center; } .chart-box-140 { height: 140px; max-height: 140px; } .max-w-100 { max-width: 100px; } .max-w-200 { max-width: 200px; } .max-w-280 { max-width: 280px; } .max-w-360 { max-width: 360px; } /* Smooth, subtle page fade-in across the app */ @keyframes appFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .main-content { animation: appFadeIn 260ms var(--ease-out) both; } /* Smooth theme transitions (only when JS sets data-theme-anim="1") */ [data-theme-anim="1"] body, [data-theme-anim="1"] .sidebar, [data-theme-anim="1"] .topbar, [data-theme-anim="1"] .card, [data-theme-anim="1"] .table, [data-theme-anim="1"] .form-control, [data-theme-anim="1"] .form-select, [data-theme-anim="1"] .dropdown-menu, [data-theme-anim="1"] .btn { transition: background-color 220ms var(--ease-out), color 220ms var(--ease-out), border-color 220ms var(--ease-out), box-shadow 220ms var(--ease-out); } /* ===================================================== Theme toggle switch (navbar) ===================================================== */ .theme-toggle { border: 1px solid var(--border-subtle); background: transparent; padding: 0; border-radius: 999px; width: 56px; height: 30px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color var(--transition-medium), box-shadow var(--transition-medium); } .theme-toggle:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(var(--brand-accent-rgb), 0.22); border-color: rgba(var(--brand-accent-rgb), 0.55); } .theme-toggle-track { position: relative; width: 100%; height: 100%; border-radius: 999px; background-color: rgba(var(--text-main-rgb), 0.12); overflow: hidden; } .theme-toggle-thumb { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 999px; background-color: var(--card-bg); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.20); transition: transform 240ms var(--ease-out); } [data-theme="dark"] .theme-toggle-thumb { transform: translateX(26px); } .theme-toggle-icon { position: absolute; top: 50%; transform: translateY(-50%); font-size: 0.9rem; transition: opacity 180ms var(--ease-out); color: var(--text-muted); pointer-events: none; } #themeIconSun { left: 8px; opacity: 0; } #themeIconMoon { right: 8px; opacity: 1; } /* When DARK is active show SUN (switch-to-light hint) */ [data-theme="dark"] #themeIconSun { opacity: 1; } [data-theme="dark"] #themeIconMoon { opacity: 0; } /* Typography hierarchy - clear, premium */ h1, .h1 { font-size: 1.75rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1.3; color: var(--text-primary); margin-bottom: var(--space-md); } h2, .h2 { font-size: 1.375rem; font-weight: 600; letter-spacing: -0.02em; color: var(--text-primary); margin-bottom: var(--space-md); } h3, .h3 { font-size: 1.125rem; font-weight: 600; color: var(--text-primary); margin-bottom: var(--space-sm); } h4, h5, h6 { font-size: 1rem; font-weight: 600; color: var(--text-primary); margin-bottom: var(--space-xs); } .page-title { font-size: 1.625rem; font-weight: 600; letter-spacing: -0.025em; line-height: 1.35; margin-bottom: var(--space-2xl); color: var(--text-primary); } /* Dashboard header */ .dashboard-header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; padding-bottom: var(--space-lg); margin-bottom: var(--space-lg); border-bottom: 1px solid var(--border-subtle); } .dashboard-greeting { font-size: 0.875rem; color: var(--text-muted); font-weight: 700; } .activity-item { padding: 14px 18px; } .activity-item:hover { background-color: rgba(var(--brand-accent-rgb), 0.08); } .activity-list { position: relative; } .activity-list::before { content: ""; position: absolute; left: 23px; top: 14px; bottom: 14px; width: 1px; background: rgba(var(--text-main-rgb), 0.10); pointer-events: none; } .activity-dot { width: 10px; height: 10px; border-radius: 999px; margin-top: 6px; flex-shrink: 0; background: rgba(var(--text-main-rgb), 0.25); } .activity-dot.success { background: rgba(var(--success-rgb), 0.85); } .activity-dot.primary { background: rgba(var(--brand-primary-rgb), 0.85); } .activity-dot.warning { background: rgba(var(--warning-rgb), 0.85); } .activity-dot.danger { background: rgba(var(--danger-rgb), 0.85); } .activity-when { display: block; font-size: 11px; color: var(--text-muted); font-weight: 700; margin-bottom: 2px; } .activity-title { font-weight: 800; color: var(--text-main); } .activity-link { color: var(--brand-primary); font-weight: 800; } .activity-link:hover { color: var(--brand-primary-hover); text-decoration: underline; } .quick-actions .bi { font-size: 18px; line-height: 1; } .quick-actions .btn-link { color: var(--text-muted); border-radius: 8px; padding-left: 0.5rem; padding-right: 0.5rem; } .quick-actions .btn-link:hover { color: var(--brand-primary); background-color: rgba(var(--brand-primary-rgb), 0.08); } /* Dashboard table upgrades */ .dashboard-table thead th { background-color: rgba(var(--text-main-rgb), 0.03); } .dashboard-table tbody td { padding-top: calc(var(--space-lg) + 2px); padding-bottom: calc(var(--space-lg) + 2px); } .dashboard-table tbody tr:hover { background-color: rgba(var(--brand-accent-rgb), 0.10); } /* Strategic widget: student growth bars */ .growth-row { display: grid; grid-template-columns: 42px 1fr 28px; gap: 10px; align-items: center; padding: 10px 0; } .growth-label { font-size: 12px; font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; } .growth-val { font-size: 12px; font-weight: 900; color: var(--text-main); text-align: right; font-variant-numeric: tabular-nums; } .growth-bar { height: 10px; border-radius: 999px; background: rgba(var(--text-main-rgb), 0.08); overflow: hidden; } .growth-bar > span { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--brand-primary); } .activity-list { position: relative; } .activity-list::before { content: ""; position: absolute; left: 22px; top: 12px; bottom: 12px; width: 1px; background: rgba(var(--text-main-rgb), 0.10); } .activity-link { font-weight: 800; color: var(--brand-primary); } .activity-link:hover { color: var(--brand-primary-hover); text-decoration: underline; } .section-title { font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: var(--space-lg); } .text-secondary, .small.text-secondary { color: var(--text-secondary) !important; } /* Buttons - smooth, professional hovers */ .btn { transition: background-color var(--transition-medium), border-color var(--transition-medium), color var(--transition-medium), box-shadow var(--transition-fast); } /* Button system (design system additions) */ .btn-soft { background-color: var(--bg-soft); border-color: var(--border-light); color: var(--text-main); } .btn-soft:hover { background-color: rgba(var(--brand-accent-rgb), 0.12); border-color: rgba(var(--brand-accent-rgb), 0.28); color: var(--text-main); } .btn-danger { background-color: var(--danger); border-color: var(--danger); color: var(--text-inverse); } .btn-danger:hover { background-color: rgba(var(--danger-rgb), 0.90); border-color: rgba(var(--danger-rgb), 0.90); } .btn-success { background-color: var(--success); border-color: var(--success); color: var(--text-inverse); } .btn-success:hover { background-color: rgba(var(--success-rgb), 0.90); border-color: rgba(var(--success-rgb), 0.90); } .btn-primary { background-color: var(--brand-primary); border-color: var(--brand-primary); color: var(--on-accent); } .btn-primary:hover { background-color: var(--brand-primary-hover); border-color: var(--brand-primary-hover); color: var(--on-accent); box-shadow: 0 2px 10px rgba(var(--brand-primary-rgb), 0.18); } .btn-outline-primary { border-color: var(--brand-primary); color: var(--brand-primary); } .btn-outline-primary:hover { background-color: rgba(var(--brand-primary-rgb), 0.10); border-color: var(--brand-primary); color: var(--brand-primary-hover); } .btn-accent { background-color: var(--brand-accent); border-color: var(--brand-accent); color: var(--on-accent); } .btn-accent:hover { background-color: var(--brand-accent-hover); border-color: var(--brand-accent-hover); color: var(--on-accent); box-shadow: 0 2px 10px rgba(var(--brand-accent-rgb), 0.22); } /* Cards - refined, subtle hover */ .card { border: 1px solid var(--border-subtle); border-radius: 10px; background-color: var(--card-bg); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.20); transition: border-color var(--transition-medium), box-shadow var(--transition-medium); } .card:hover { border-color: var(--border-light); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28); } .card-header { background-color: var(--bg-card); border-bottom: 1px solid var(--border-subtle); font-weight: 600; font-size: 0.9375rem; padding: var(--space-lg) var(--space-xl); border-radius: 10px 10px 0 0; } .card-body { padding: var(--space-xl); } /* Statistic cards - no bounce, subtle lift */ .stat-card { border-left: 0; position: relative; overflow: hidden; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color var(--transition-medium), background-color var(--transition-medium); } .stat-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--brand-accent); opacity: 0.55; border-radius: 10px 10px 0 0; } /* Use gold only where it matters */ .stat-card.stat-accent::before { opacity: 0.95; } .stat-card:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.14); background-color: var(--bg-card-hover); } .stat-card .stat-value { font-size: 2.375rem; /* ~38px, more dominant */ font-weight: 800; letter-spacing: -0.03em; color: var(--text-primary); line-height: 1.2; } /* Student dashboard micro-polish */ .student-dashboard .stat-title { font-size: 1.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .student-dashboard .stat-title-wrap { font-size: 1.35rem; font-weight: 700; white-space: normal; overflow: visible; text-overflow: clip; word-break: break-word; line-height: 1.3; } .student-dashboard .stat-delta { font-size: 12px; font-weight: 800; border-radius: 999px; padding: 6px 10px; border: 1px solid rgba(var(--brand-primary-rgb), 0.25); background: rgba(var(--brand-primary-rgb), 0.10); color: var(--text-primary); } .student-dashboard .stat-delta.up { border-color: rgba(var(--success-rgb), 0.35); background: rgba(var(--success-rgb), 0.14); color: var(--text-primary); } .student-dashboard .stat-delta.down { border-color: rgba(var(--danger-rgb), 0.35); background: rgba(var(--danger-rgb), 0.12); color: var(--text-primary); } .record-bar { height: 8px; border-radius: 999px; overflow: hidden; display: flex; background: rgba(var(--text-main-rgb), 0.12); border: 1px solid rgba(var(--text-main-rgb), 0.12); } .record-bar .seg { height: 100%; display: block; width: 0; } .record-bar .seg.win { background: rgba(var(--success-rgb), 0.85); } .record-bar .seg.draw { background: rgba(var(--warning-rgb), 0.75); } .record-bar .seg.loss { background: rgba(var(--danger-rgb), 0.75); } [data-theme="dark"] .student-dashboard .card { background: #0F1E3A; border: 1px solid rgba(255, 255, 255, 0.06); } [data-theme="dark"] .student-dashboard .card-header { background: #0F1E3A; border-bottom-color: rgba(255, 255, 255, 0.06); } .stat-card .stat-label { font-size: 0.75rem; color: var(--text-muted); font-weight: 700; letter-spacing: 0.01em; margin-top: var(--space-xs); } .stat-card .stat-subtext { margin-top: 6px; font-size: 0.75rem; color: var(--text-muted); font-weight: 700; } .stat-card .stat-icon { font-size: 1.35rem; color: var(--text-muted); opacity: 0.9; } /* Badges - restrained, professional */ .badge { font-weight: 500; letter-spacing: 0.02em; padding: 0.4em 0.7em; border-radius: 6px; transition: opacity var(--transition-fast); } .badge:hover { opacity: 0.92; } .badge-chess { background-color: var(--chess-green); color: var(--on-accent); } .badge-accent { background-color: var(--accent-gold); color: var(--text-inverse); } .badge-rating-beginner { background-color: var(--success); color: var(--text-inverse); } .badge-rating-intermediate { background-color: var(--warning); color: var(--text-inverse); } .badge-rating-advanced { background-color: var(--danger); color: var(--text-inverse); } .badge-win { background-color: var(--success); color: var(--text-inverse); } .badge-loss { background-color: var(--danger); color: var(--text-inverse); } .badge-draw { background-color: var(--text-muted); color: var(--text-inverse); } /* Sidebar - premium, smooth transitions */ .sidebar { background-color: var(--bg-sidebar); height: 100vh; /* fixed sidebar: constrain to viewport */ width: 280px; transition: width var(--transition-slow); flex-shrink: 0; position: fixed; left: 0; top: 0; z-index: 1030; overflow: hidden; /* let only the nav scroll */ display: flex; flex-direction: column; } .sidebar.collapsed { width: 72px; } .sidebar .nav-link { color: var(--sidebar-link-text); padding: var(--space-sm) var(--space-md); border-radius: 999px; margin: 0 var(--space-md) 2px var(--space-md); display: flex; align-items: center; gap: var(--space-md); font-size: 0.9375rem; transition: background-color var(--transition-medium), color var(--transition-medium); } .sidebar .nav-link:hover { background-color: var(--sidebar-link-hover-bg); color: var(--sidebar-link-hover-text); } .sidebar .nav-link.active { background-color: var(--sidebar-link-active-bg); color: var(--sidebar-link-active-text); font-weight: 700; } .sidebar .nav-link.active i { color: var(--sidebar-link-active-text); opacity: 1; } .sidebar .nav-link i { width: 1.25rem; text-align: center; flex-shrink: 0; opacity: 0.88; } .dashboard-kpis { display: grid; gap: 1.5rem; /* similar to g-4 */ grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .dashboard-kpi { min-width: 0; } .content-spacing { max-width: 1320px; margin: 0 auto; } .sidebar.collapsed .nav-link span { display: none; } .sidebar .sidebar-brand { padding: var(--space-xl) var(--space-lg); border-bottom: 1px solid var(--sidebar-divider); min-height: 72px; display: flex; align-items: center; gap: var(--space-md); } .sidebar .sidebar-brand .brand-icon { font-size: 1.5rem; flex-shrink: 0; opacity: 0.95; } .sidebar .sidebar-brand .brand-text { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.02em; } .sidebar-subtitle { font-size: 11px; font-weight: 500; opacity: 0.78; } .sidebar.collapsed .sidebar-brand .brand-text { display: none; } .sidebar.collapsed .sidebar-powered-by { display: none; } .sidebar .sidebar-footer { margin-top: auto; padding: var(--space-md); border-top: 1px solid var(--sidebar-divider); position: sticky; bottom: 0; background-color: var(--bg-sidebar); } .sidebar .sidebar-footer .btn { transition: background-color var(--transition-medium), color var(--transition-medium), border-color var(--transition-medium); } .sidebar.collapsed .sidebar-footer #sidebar-toggle-text { display: none; } .sidebar .sidebar-nav { flex: 1; min-height: 0; padding-top: var(--space-sm); overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } /* Mobile backdrop when sidebar is open */ .sidebar-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.35); z-index: 1025; /* below sidebar (1030) */ opacity: 0; pointer-events: none; transition: opacity var(--transition-medium); } .sidebar-backdrop.show { opacity: 1; pointer-events: auto; } body.sidebar-open { overflow: hidden; } .sidebar .sidebar-group { display: block; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--sidebar-group-text); padding: var(--space-md) var(--space-lg) var(--space-xs); margin: 0 var(--space-md); } .sidebar.collapsed .sidebar-group { display: none; } /* Top bar */ .topbar { background-color: var(--bg-card); border-bottom: 1px solid var(--border-subtle); min-height: 72px; padding: 0 var(--space-xl); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-sm); } .topbar .topbar-brand-avatar { width: 52px; height: 52px; } @media (max-width: 768px) { .topbar { min-height: 64px; } .topbar .topbar-brand-avatar { width: 44px; height: 44px; } } .topbar .academy-name { font-weight: 800; font-size: 1.18rem; letter-spacing: -0.02em; color: var(--text-primary); } .topbar-powered-by { font-size: 12px; opacity: 0.65; color: var(--text-muted); } .topbar-subtitle { font-size: 12px; font-weight: 600; color: var(--text-muted); } .app-avatar { width: 32px; height: 32px; } .app-avatar-sm { width: 28px; height: 28px; } .app-avatar-md { width: 32px; height: 32px; } .app-avatar-img { width: 100%; height: 100%; object-fit: cover; } /* App sidebar brand logo: show only the logo (no box) */ .sidebar-brand .app-avatar { background: transparent !important; border: 0 !important; border-radius: 0 !important; } .sidebar-brand .app-avatar-img { object-fit: contain; background: transparent; } /* Sidebar platform branding (small + muted) */ .sidebar-brand-stack { display: inline-flex; flex-direction: column; align-items: center; gap: 8px; } .sidebar-powered-by { font-size: 12px; opacity: 0.6; color: var(--text-muted); font-weight: 400; text-align: center; } .sidebar-platform-logo { width: 36px; height: 36px; } .sidebar-platform-logo .app-avatar-img { filter: grayscale(1) saturate(0); opacity: 0.8; } .topbar .user-role-badge { font-size: 0.6875rem; padding: 0.35em 0.65em; border-radius: 6px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; } .topbar .user-role-badge.role-admin { background-color: rgba(var(--text-main-rgb), 0.08); color: var(--text-main); border: 1px solid var(--border-light); } .topbar .user-role-badge.role-coach { background-color: rgba(var(--brand-accent-rgb), 0.14); color: var(--text-main); border: 1px solid rgba(var(--brand-accent-rgb), 0.32); } .topbar .user-role-badge.role-student { background-color: rgba(var(--brand-primary-rgb), 0.14); color: var(--text-main); border: 1px solid rgba(var(--brand-primary-rgb), 0.32); } .topbar .user-role-badge.identity-badge { background-color: rgba(var(--text-main-rgb), 0.08); color: var(--text-main); border: 1px solid var(--border-light); } /* Role badges (e.g. in tables) */ .badge.role-admin { background-color: var(--brand-primary); color: var(--text-inverse); } .badge.role-coach { background-color: var(--brand-accent); color: var(--text-inverse); } .badge.role-student { background-color: rgba(var(--brand-primary-rgb), 0.16); color: var(--text-main); border: 1px solid rgba(var(--brand-primary-rgb), 0.28); } .badge.role-parent { background-color: rgba(var(--text-main-rgb), 0.10); color: var(--text-main); border: 1px solid var(--border-light); } .badge.role-user { background-color: var(--border-light); color: var(--text-primary); border: 1px solid var(--border-subtle); } .topbar .dropdown-toggle { transition: opacity var(--transition-fast); } .topbar .dropdown-toggle:hover { opacity: 0.85; } /* Main content area - generous spacing */ .main-content { flex: 1; padding: var(--space-2xl) var(--space-3xl); margin-left: 280px; transition: margin-left var(--transition-slow); min-height: 100vh; } .sidebar.collapsed ~ .main-content { margin-left: 72px; } /* Tables (design system) */ .table-custom, .table-chess { --table-bg: var(--bg-card); --table-head-bg: var(--bg-soft); --table-row-hover-bg: rgba(var(--brand-accent-rgb), 0.08); --table-selected-border: var(--brand-accent); } .table-custom { background-color: var(--table-bg); border: 1px solid var(--border-light); border-radius: 12px; overflow: hidden; } .table-custom thead th, .table-custom thead td, .table-chess thead th { background-color: var(--table-head-bg); border-bottom: 1px solid var(--border-light); font-weight: 600; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--table-head-text); padding: var(--space-md) var(--space-lg); } /* Ensure all table headers are readable in both themes */ .table thead th, .table thead td { color: var(--table-head-text) !important; } .table-chess tbody td { padding: var(--space-lg) var(--space-lg); vertical-align: middle; font-size: 0.9375rem; } .table-chess tbody tr { transition: background-color var(--transition-medium); } .table-custom tbody tr:hover, .table-chess tbody tr:hover { background-color: var(--table-row-hover-bg); } .table-custom tbody tr.is-selected { border-left: 4px solid var(--table-selected-border); } /* Progress bars */ .progress { height: 8px; border-radius: 6px; background-color: rgba(var(--text-main-rgb), 0.12); overflow: hidden; transition: box-shadow var(--transition-fast); } .progress-bar { transition: width var(--transition-slow); } .progress-bar-chess { background-color: var(--brand-primary); } .progress-bar-accent { background-color: var(--brand-accent); } /* Chess board pattern (subtle, optional) */ .bg-chess-pattern { background-image: linear-gradient(45deg, var(--bg-page) 25%, transparent 25%), linear-gradient(-45deg, var(--bg-page) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--bg-page) 75%), linear-gradient(-45deg, transparent 75%, var(--bg-page) 75%); background-size: 20px 20px; background-position: 0 0, 0 10px, 10px -10px, -10px 0px; background-color: var(--bg-soft); opacity: 0.5; } /* Icons - action buttons, smooth hover */ .action-icon { width: 2.25rem; height: 2.25rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; transition: background-color var(--transition-medium), color var(--transition-medium); } .action-icon:hover { background-color: rgba(var(--brand-accent-rgb), 0.12); color: var(--brand-accent); } /* Chessboard.js square colors + highlights (moved from inline page styles) */ .white-1e1d7 { background-color: var(--board-light) !important; } .black-3c85d { background-color: var(--board-dark) !important; } .bg-purple { background-color: var(--board-highlight) !important; color: var(--text-inverse) !important; } /* Premium feedback overlays (brand-aligned) */ .square-55d63 { position: relative; } .square-55d63::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: transparent; transition: background-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast); } .square-55d63:hover::after { background: rgba(var(--brand-primary-rgb), 0.06); } .square-55d63.ci-sel::after { background: rgba(var(--brand-primary-rgb), 0.18); box-shadow: inset 0 0 0 2px rgba(var(--brand-primary-rgb), 0.35); } .square-55d63.ci-last::after { background: rgba(212, 175, 55, 0.14); box-shadow: inset 0 0 0 2px rgba(212, 175, 55, 0.62); } .square-55d63.ci-correct::after { background: rgba(var(--brand-accent-rgb), 0.24); box-shadow: inset 0 0 0 2px rgba(var(--brand-accent-rgb), 0.72), 0 0 18px rgba(var(--brand-accent-rgb), 0.32); animation: ciPulseGold 650ms var(--ease-out) both; } .square-55d63.ci-wrong::after { background: rgba(var(--danger-rgb), 0.18); box-shadow: inset 0 0 0 2px rgba(var(--danger-rgb), 0.60), 0 0 18px rgba(var(--danger-rgb), 0.24); animation: ciPulseRed 520ms var(--ease-out) both; } @keyframes ciPulseGold { 0% { transform: scale(1); } 45% { transform: scale(1.02); } 100% { transform: scale(1); } } @keyframes ciPulseRed { 0% { transform: scale(1); } 40% { transform: scale(1.015); } 100% { transform: scale(1); } } /* Reusable sizing helpers to avoid inline styles */ .game-board { width: 520px; max-width: 100%; min-height: 320px; display: block; } .puzzle-board { width: 420px; max-width: 100%; display: block; border-radius: 12px; overflow: hidden; box-shadow: 0 18px 46px rgba(var(--brand-primary-rgb), 0.18); } .game-board { border-radius: 12px; overflow: hidden; box-shadow: 0 18px 46px rgba(var(--brand-primary-rgb), 0.18); } .turn-badge { display: inline-flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 999px; border: 1px solid rgba(var(--text-main-rgb), 0.16); background: transparent; color: var(--text-primary); font-weight: 800; letter-spacing: -0.01em; } .turn-dot { width: 12px; height: 12px; border-radius: 999px; display: inline-block; box-shadow: 0 0 0 2px rgba(var(--text-main-rgb), 0.10) inset; } .turn-badge.turn-white { background: var(--board-light); border-color: rgba(var(--brand-primary-rgb), 0.18); color: var(--board-dark); } .turn-badge.turn-white .turn-dot { background: #FFFFFF; border: 1px solid rgba(var(--board-dark), 0.20); } .turn-badge.turn-black { background: var(--board-dark); border-color: rgba(212, 175, 55, 0.50); color: var(--text-inverse); } .turn-badge.turn-black .turn-dot { background: #1C1C1C; border: 1px solid rgba(var(--text-inverse-rgb), 0.22); } .puzzle-turn-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; } /* Reduce coordinate visual noise */ .notation-322f9 { opacity: 0.24; font-weight: 600; } [data-theme="dark"] .notation-322f9 { opacity: 0.34; } .chart-box-sm { height: 180px; } .chart-box-240 { height: 240px; } /* Student Ratings page */ .ratings-cards .rating-card { text-decoration: none; color: inherit; border: 1px solid rgba(var(--text-main-rgb), 0.10); transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast); } .ratings-cards .rating-card:hover { transform: translateY(-2px); box-shadow: 0 18px 46px rgba(var(--brand-primary-rgb), 0.18); border-color: rgba(var(--brand-primary-rgb), 0.22); } .ratings-cards .rating-card.active { border-color: rgba(var(--brand-accent-rgb), 0.55); box-shadow: 0 18px 46px rgba(var(--brand-primary-rgb), 0.20); } .rating-main { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 6px; } .rating-val { font-size: 2.1rem; font-weight: 900; letter-spacing: -0.03em; } .rating-delta { font-size: 12px; font-weight: 900; border-radius: 999px; padding: 6px 10px; border: 1px solid rgba(var(--text-main-rgb), 0.12); background: rgba(var(--text-main-rgb), 0.06); color: var(--text-muted); } .rating-delta.pos { border-color: rgba(var(--success-rgb), 0.35); background: rgba(var(--success-rgb), 0.14); color: var(--text-primary); } .rating-delta.neg { border-color: rgba(var(--danger-rgb), 0.35); background: rgba(var(--danger-rgb), 0.12); color: var(--text-primary); } .rating-delta.neu { opacity: 0.85; } .rating-meta { margin-top: 10px; display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; } .spark { margin-top: 10px; height: 28px; color: rgba(var(--brand-primary-rgb), 0.85); } .spark-svg { width: 100%; height: 28px; } .insight-kpi { border: 1px solid rgba(var(--text-main-rgb), 0.10); border-radius: 12px; padding: 12px; background: rgba(var(--text-main-rgb), 0.03); } .moves-list { max-height: 420px; overflow: auto; } .pgn-pre { white-space: pre-wrap; } /* Game viewer move list helpers (avoid inline styles) */ .badge-mini { font-size: 10px; } .eval-mini { font-size: 11px; } .move-cell { min-width: 48px; } .eval-cell { min-width: 44px; font-variant-numeric: tabular-nums; } /* Lichess-like advantage bar (Game Viewer) */ .eval-bar { --whitePct: 50; position: relative; width: 16px; min-width: 16px; border-radius: 10px; overflow: hidden; border: 1px solid rgba(var(--text-main-rgb), 0.18); background: rgba(var(--text-main-rgb), 0.92); } .eval-bar-black { position: absolute; inset: 0; background: rgba(var(--text-main-rgb), 0.86); } .eval-bar-white { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--whitePct) * 1%); background: var(--text-inverse); } .eval-bar-marker { position: absolute; left: -4px; right: -4px; height: 2px; top: calc((100 - var(--whitePct)) * 1%); background: var(--brand-primary); opacity: 0.9; } .eval-bar-label { position: absolute; left: 22px; top: 50%; transform: translateY(-50%); font-size: 11px; color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; } /* Timetable / sessions list */ .session-item { border-left: 3px solid var(--brand-primary); padding-left: var(--space-lg); margin-bottom: var(--space-lg); padding-top: var(--space-xs); padding-bottom: var(--space-xs); transition: border-color var(--transition-fast), opacity var(--transition-fast); } .session-item:last-child { margin-bottom: 0; } .session-item.time-past { border-left-color: var(--border-light); opacity: 0.75; } /* Spacing utilities */ .content-spacing > * + * { margin-top: var(--space-2xl); } /* Form controls - premium feel */ .form-control, .form-select { border-radius: 8px; border-color: var(--border-subtle); padding: 0.6rem 0.875rem; transition: border-color var(--transition-medium), box-shadow var(--transition-fast); } .form-control:focus, .form-select:focus { border-color: var(--brand-accent); box-shadow: 0 0 0 3px rgba(var(--brand-accent-rgb), 0.22); } /* Lesson plan forms: never inherit global disables (no pointer-events: none, no opacity overlay, no fieldset disabled) */ .lesson-plan-add-form, .lesson-plan-add-form input:not([type="hidden"]):not([type="submit"]), .lesson-plan-add-form textarea, .lesson-plan-edit-form, .lesson-plan-edit-form input:not([type="hidden"]):not([type="submit"]), .lesson-plan-edit-form textarea { pointer-events: auto; opacity: 1; } .lesson-plan-add-form fieldset, .lesson-plan-edit-form fieldset { border: none; margin: 0; padding: 0; min-width: 0; } .lesson-plan-add-form fieldset:not([disabled]), .lesson-plan-edit-form fieldset:not([disabled]) { pointer-events: auto; } /* Lesson Plan modal: ensure inputs are never blocked by overlays or inherited pointer-events */ .modal .modal-dialog, .modal .modal-content, .modal .modal-body, .modal .lesson-plan-edit-form, .modal .lesson-plan-edit-form input, .modal .lesson-plan-edit-form textarea, .modal .lesson-plan-edit-form select, .modal .lesson-plan-edit-form button { pointer-events: auto; } .modal .modal-content { position: relative; z-index: 1; } /* Hard z-index fix for admin-template modal stacking / focus trap conflicts */ .modal { z-index: 2000 !important; } .modal-backdrop { z-index: 1990 !important; } /* Alerts (design system) */ .alert { border-radius: 12px; border: 1px solid var(--border-light); padding: 0.85rem 1rem; } .alert-success { border-left: 4px solid var(--success); background-color: rgba(var(--success-rgb), 0.10); color: var(--text-main); } .alert-warning { border-left: 4px solid var(--warning); background-color: rgba(var(--warning-rgb), 0.12); color: var(--text-main); } .alert-danger { border-left: 4px solid var(--danger); background-color: rgba(var(--danger-rgb), 0.10); color: var(--text-main); } .alert-info { border-left: 4px solid var(--info); background-color: rgba(var(--info-rgb), 0.10); color: var(--text-main); } /* Badge system (design system) */ .badge { border-radius: 999px; padding: 0.4em 0.75em; font-weight: 600; } .badge-primary { background-color: rgba(var(--brand-primary-rgb), 0.12); color: var(--text-main); border: 1px solid rgba(var(--brand-primary-rgb), 0.22); } .badge-accent { background-color: rgba(var(--brand-accent-rgb), 0.14); color: var(--text-main); border: 1px solid rgba(var(--brand-accent-rgb), 0.28); } .badge-success { background-color: rgba(var(--success-rgb), 0.14); color: var(--text-main); border: 1px solid rgba(var(--success-rgb), 0.26); } .badge-warning { background-color: rgba(var(--warning-rgb), 0.14); color: var(--text-main); border: 1px solid rgba(var(--warning-rgb), 0.26); } .badge-danger { background-color: rgba(var(--danger-rgb), 0.14); color: var(--text-main); border: 1px solid rgba(var(--danger-rgb), 0.26); } .badge-info { background-color: rgba(var(--info-rgb), 0.14); color: var(--text-main); border: 1px solid rgba(var(--info-rgb), 0.26); } /* Status indicator */ .status-dot { width: 10px; height: 10px; border-radius: 999px; display: inline-block; background-color: var(--text-muted); } .status-dot.success { background-color: var(--success); } .status-dot.warning { background-color: var(--warning); } .status-dot.danger { background-color: var(--danger); } .status-dot.info { background-color: var(--info); } .form-label { font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); margin-bottom: var(--space-xs); } /* List groups - spacing */ .list-group-item { padding: var(--space-lg) var(--space-xl); border-color: var(--border-subtle); transition: background-color var(--transition-fast); } .dropdown-menu { border-radius: 10px; border: 1px solid var(--border-subtle); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); padding: var(--space-sm); } .dropdown-item { border-radius: 6px; padding: var(--space-md) var(--space-lg); transition: background-color var(--transition-fast); } /* Auth pages - premium spacing and typography */ .auth-page { background-color: var(--bg-page); } .auth-card { width: 100%; max-width: 420px; border-radius: 14px; border: 1px solid var(--border-subtle); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.04); } .auth-card-body { padding: 2rem 2.25rem; } @media (min-width: 576px) { .auth-card-body { padding: 2.5rem 2.75rem; } } .auth-header { margin-bottom: 2rem; } .auth-subtitle { font-size: 0.9375rem; line-height: 1.4; max-width: 320px; margin-left: auto; margin-right: auto; } .auth-role-hint { font-size: 0.8125rem; margin-top: 0.25rem; } .auth-logo { font-size: 2.5rem; line-height: 1; color: var(--brand-primary); } .auth-logo-img { width: 200px; height: 200px; object-fit: contain; background: transparent; } @media (max-width: 980px) { .auth-logo-img { width: 140px; height: 140px; } } @media (max-width: 560px) { .auth-logo-img { width: 112px; height: 112px; } } .auth-title { letter-spacing: -0.03em; } .auth-field { margin-bottom: 1.25rem; } .auth-form .form-control { padding: 0.75rem 1rem; font-size: 1rem; } .auth-forgot-wrap { margin-top: 0.375rem; text-align: right; } .auth-forgot-link { color: var(--brand-accent) !important; text-decoration: none; transition: opacity var(--transition-fast); } .auth-forgot-link:hover { opacity: 0.9; text-decoration: underline; } .auth-form .auth-btn-login { height: 52px; padding: 0.75rem 1.5rem; font-size: 1rem; font-weight: 600; border-radius: 10px; transition: transform var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast); } .auth-form .auth-btn-login:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(var(--brand-primary-rgb), 0.35); } .auth-form .auth-btn-login:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(var(--brand-primary-rgb), 0.25); } .auth-trust { font-size: 0.8125rem; line-height: 1.4; } .auth-link { color: var(--brand-accent) !important; transition: opacity var(--transition-fast); } .auth-link:hover { opacity: 0.85; } /* Register page - role cards and layout */ .register-card { width: 100%; max-width: 640px; border-radius: 12px; border: 1px solid var(--border-subtle); } .register-header { margin-bottom: 1.5rem; } .register-logo { width: 120px; height: 120px; object-fit: contain; } @media (min-width: 768px) { .register-logo { width: 140px; height: 140px; } } .register-title { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.03em; color: var(--text-main); } @media (min-width: 768px) { .register-title { font-size: 2rem; } } .role-cards .role-card { transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast); border-color: var(--border-light); } .role-cards .role-card:hover { border-color: var(--brand-primary); box-shadow: 0 4px 12px rgba(var(--brand-primary-rgb), 0.12); } .role-cards .role-card-selected { border-color: var(--brand-primary) !important; background-color: rgba(var(--brand-primary-rgb), 0.06); box-shadow: 0 4px 14px rgba(var(--brand-primary-rgb), 0.18); } .role-cards .role-icon { font-size: 2rem; color: var(--brand-primary); } .role-cards .role-card-selected .role-icon { color: var(--brand-primary); } .cursor-pointer { cursor: pointer; } .register-submit { font-weight: 600; transition: transform var(--transition-fast), box-shadow var(--transition-fast); } .register-submit:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(var(--brand-primary-rgb), 0.25); } .register-submit:disabled { opacity: 0.7; cursor: not-allowed; } .password-strength .progress { height: 6px; background-color: var(--bg-soft); border-radius: 4px; } .password-strength-bar .progress-bar { border-radius: 4px; transition: width 0.2s ease; } /* User profile page - photo size */ .user-profile-photo { width: 120px; height: 120px; } /* Responsive */ @media (max-width: 991.98px) { .sidebar { width: 72px; } .sidebar .nav-link span { display: none; } .sidebar .sidebar-brand .brand-text { display: none; } .main-content { margin-left: 72px; padding: var(--space-xl) var(--space-lg); } } @media (max-width: 575.98px) { .main-content { padding: var(--space-lg) var(--space-md); margin-left: 0; } .topbar { padding: 0 var(--space-lg); } .sidebar { width: 280px; transform: translateX(-100%); transition: transform var(--transition-slow); } .sidebar.show { transform: translateX(0); } } /* ============================================ Tournament Organizer Dashboard ============================================ */ .tournaments-manage-page .page-header { margin-bottom: var(--space-xs); } .tournaments-manage-page .btn-action-primary { padding: 0.5rem 1.25rem; font-weight: 600; } .tournaments-manage-page .btn-action-secondary { padding: 0.5rem 1rem; } /* Stat cards row */ .tournaments-manage-stats .stat-card { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-lg); border-radius: 10px; border: 1px solid var(--border-subtle); background-color: var(--bg-card); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); min-height: 88px; transition: box-shadow var(--transition-fast), border-color var(--transition-fast); } .tournaments-manage-stats .stat-card::before { display: none; } .tournaments-manage-stats .stat-card:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); border-color: var(--border-light); } .tournaments-manage-stats .stat-card-icon { width: 48px; height: 48px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.35rem; flex-shrink: 0; } .tournaments-manage-stats .stat-card-icon-primary { background: rgba(var(--brand-primary-rgb), 0.12); color: var(--brand-primary); } .tournaments-manage-stats .stat-card-icon-success { background: rgba(var(--success-rgb), 0.14); color: var(--success); } .tournaments-manage-stats .stat-card-icon-info { background: rgba(var(--info-rgb), 0.14); color: var(--info); } .tournaments-manage-stats .stat-card-icon-accent { background: rgba(var(--brand-accent-rgb), 0.18); color: var(--brand-accent-hover); } .tournaments-manage-stats .stat-card-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .tournaments-manage-stats .stat-card-value { font-size: 1.5rem; font-weight: 700; line-height: 1.2; color: var(--text-main); letter-spacing: -0.02em; } .tournaments-manage-stats .stat-card-label { font-size: 0.8125rem; color: var(--text-muted); font-weight: 500; } /* Empty state */ .tournaments-manage-empty .empty-state-card { max-width: 480px; margin-left: auto; margin-right: auto; border-radius: 12px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); border: 1px solid var(--border-subtle); } .tournaments-manage-empty .empty-state-icon { width: 72px; height: 72px; margin-left: auto; margin-right: auto; border-radius: 50%; background: rgba(var(--brand-accent-rgb), 0.15); color: var(--brand-accent); display: flex; align-items: center; justify-content: center; font-size: 2rem; } .tournaments-manage-empty .empty-state-headline { color: var(--text-main); font-weight: 700; } .tournaments-manage-empty .empty-state-text { max-width: 360px; line-height: 1.5; } /* Filters */ .tournaments-manage-filters .card-body { padding-top: var(--space-md); padding-bottom: var(--space-md); } .tournaments-manage-filters #tournament-search { max-width: 280px; } @media (max-width: 767.98px) { .tournaments-manage-filters #tournament-search { max-width: none; } } /* Table */ .tournaments-manage-table-card { overflow: hidden; border-radius: 10px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); } .tournaments-manage-table-card .card-body { padding: 0; } .table-organizer { margin-bottom: 0; } .table-organizer thead th { background: var(--bg-soft); font-weight: 600; font-size: 0.8125rem; color: var(--text-main); padding: var(--space-md) var(--space-lg); border-bottom: 1px solid var(--border-subtle); white-space: nowrap; } .table-organizer tbody td { padding: var(--space-md) var(--space-lg); border-bottom: 1px solid var(--border-subtle); vertical-align: middle; } .table-organizer tbody tr:nth-child(even) { background-color: rgba(var(--text-main-rgb), 0.02); } .table-organizer tbody tr:hover { background-color: var(--bg-soft); } .table-organizer tbody tr:last-child td { border-bottom: 0; } .table-organizer .btn-sm { padding: 0.35rem 0.65rem; font-size: 0.8125rem; } /* Status badges */ .badge-draft { background-color: rgba(var(--text-main-rgb), 0.12); color: var(--text-muted); font-weight: 500; padding: 0.35em 0.65em; border-radius: 6px; font-size: 0.75rem; } .badge-published { background-color: rgba(var(--success-rgb), 0.14); color: var(--success); font-weight: 500; padding: 0.35em 0.65em; border-radius: 6px; font-size: 0.75rem; } .badge-ongoing { background-color: rgba(var(--info-rgb), 0.14); color: var(--info); font-weight: 500; padding: 0.35em 0.65em; border-radius: 6px; font-size: 0.75rem; } .badge-finished { background-color: rgba(var(--text-main-rgb), 0.18); color: var(--text-main); font-weight: 500; padding: 0.35em 0.65em; border-radius: 6px; font-size: 0.75rem; } [data-theme="dark"] .badge-draft { background-color: rgba(255, 255, 255, 0.1); color: var(--text-muted); } [data-theme="dark"] .badge-finished { background-color: rgba(255, 255, 255, 0.12); color: var(--text-inverse); } /* ============================================ Tournament Player Dashboard (My Registrations) ============================================ */ .tournament-dashboard-page .page-header { margin-bottom: var(--space-xs); } .tournament-dashboard-page .btn-action-primary { padding: 0.5rem 1.25rem; font-weight: 600; } .tournament-dashboard-stats .stat-card { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-lg); border-radius: 10px; border: 1px solid var(--border-subtle); background-color: var(--bg-card); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); min-height: 88px; transition: box-shadow var(--transition-fast), border-color var(--transition-fast); } .tournament-dashboard-stats .stat-card::before { display: none; } .tournament-dashboard-stats .stat-card:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); border-color: var(--border-light); } .tournament-dashboard-stats .stat-card-icon { width: 48px; height: 48px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.35rem; flex-shrink: 0; } .tournament-dashboard-stats .stat-card-icon-primary { background: rgba(var(--brand-primary-rgb), 0.12); color: var(--brand-primary); } .tournament-dashboard-stats .stat-card-icon-success { background: rgba(var(--success-rgb), 0.14); color: var(--success); } .tournament-dashboard-stats .stat-card-icon-info { background: rgba(var(--info-rgb), 0.14); color: var(--info); } .tournament-dashboard-stats .stat-card-icon-accent { background: rgba(var(--brand-accent-rgb), 0.18); color: var(--brand-accent-hover); } .tournament-dashboard-stats .stat-card-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .tournament-dashboard-stats .stat-card-value { font-size: 1.5rem; font-weight: 700; line-height: 1.2; color: var(--text-main); letter-spacing: -0.02em; } .tournament-dashboard-stats .stat-card-label { font-size: 0.8125rem; color: var(--text-muted); font-weight: 500; } .tournament-dashboard-empty .empty-state-card { max-width: 480px; margin-left: auto; margin-right: auto; border-radius: 12px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); border: 1px solid var(--border-subtle); } .tournament-dashboard-empty .empty-state-icon { width: 72px; height: 72px; margin-left: auto; margin-right: auto; border-radius: 50%; background: rgba(var(--brand-accent-rgb), 0.15); color: var(--brand-accent); display: flex; align-items: center; justify-content: center; font-size: 2rem; } .tournament-dashboard-empty .empty-state-headline { color: var(--text-main); font-weight: 700; } .tournament-dashboard-empty .empty-state-text { max-width: 360px; line-height: 1.5; } .tournament-dashboard-filters .card-body { padding-top: var(--space-md); padding-bottom: var(--space-md); } .tournament-dashboard-filters #registration-search { max-width: 280px; } @media (max-width: 767.98px) { .tournament-dashboard-filters #registration-search { max-width: none; } } .tournament-dashboard-table-card { overflow: hidden; border-radius: 10px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); } .tournament-dashboard-table-card .card-body { padding: 0; } .table-player-registrations { margin-bottom: 0; } .table-player-registrations thead th { background: var(--bg-soft); font-weight: 600; font-size: 0.8125rem; color: var(--text-main); padding: var(--space-md) var(--space-lg); border-bottom: 1px solid var(--border-subtle); white-space: nowrap; } .table-player-registrations tbody td { padding: var(--space-md) var(--space-lg); border-bottom: 1px solid var(--border-subtle); vertical-align: middle; } .table-player-registrations tbody tr:nth-child(even) { background-color: rgba(var(--text-main-rgb), 0.02); } .table-player-registrations tbody tr:hover { background-color: var(--bg-soft); } .table-player-registrations tbody tr:last-child td { border-bottom: 0; } .table-player-registrations .btn-sm { padding: 0.35rem 0.65rem; font-size: 0.8125rem; } /* Player dashboard status badges */ .badge-status-pending { background-color: rgba(var(--warning-rgb), 0.18); color: var(--warning); font-weight: 500; padding: 0.35em 0.65em; border-radius: 6px; font-size: 0.75rem; } .badge-status-confirmed { background-color: rgba(var(--success-rgb), 0.14); color: var(--success); font-weight: 500; padding: 0.35em 0.65em; border-radius: 6px; font-size: 0.75rem; } .badge-status-completed { background-color: rgba(var(--info-rgb), 0.14); color: var(--info); font-weight: 500; padding: 0.35em 0.65em; border-radius: 6px; font-size: 0.75rem; } .badge-status-cancelled { background-color: rgba(var(--danger-rgb), 0.14); color: var(--danger); font-weight: 500; padding: 0.35em 0.65em; border-radius: 6px; font-size: 0.75rem; } /* ============================================ Sidebar UX polish (stronger active, hover, icon) ============================================ */ .sidebar .nav-link { transition: background-color var(--transition-medium), color var(--transition-medium), transform var(--transition-fast); } .sidebar .nav-link:hover { border-radius: 10px; } .sidebar .nav-link.active { border-radius: 10px; box-shadow: 0 2px 8px rgba(var(--brand-accent-rgb), 0.25); } .sidebar .nav-link.active i { opacity: 1; } .sidebar .nav-link i { transition: opacity var(--transition-fast); } .sidebar .nav-link:hover i { opacity: 1; }