:root { --bg-main: #f7f8fb; --bg-card: #ffffff; --bg-inset: #f8fafc; --bg-subtle: #f1f3f9; --border-color: #e8eaf1; --border-strong: #d6d9e4; --text-main: #161a26; --text-muted: #5b6275; --text-faint: #98a0b3; --accent: #161a26; --accent-hover: #000000; --danger: #dc2626; --warning: #d97706; --success: #16a34a; --focus: rgba(99, 102, 241, 0.16); --brand: #4f46e5; --brand-deep: #4338ca; --brand-soft: #eef2ff; --brand-ring: rgba(79, 70, 229, 0.18); /* Sport accent — defaults to brand indigo; overridden per body.sport-* */ --sport: #4f46e5; --sport-deep: #4338ca; --sport-ring: rgba(79, 70, 229, 0.20); --sport-grad: linear-gradient(135deg, #6366f1 0%, #4338ca 100%); /* Surfaces that must invert in dark mode */ --topbar-bg: rgba(255, 255, 255, 0.82); --toast-bg: #1f2433; --shadow-sm: 0 1px 2px rgba(20, 26, 38, 0.04), 0 1px 3px rgba(20, 26, 38, 0.06); --shadow-md: 0 4px 12px rgba(20, 26, 38, 0.07), 0 2px 4px rgba(20, 26, 38, 0.04); --shadow-lg: 0 18px 44px rgba(20, 26, 38, 0.14); --radius: 14px; } /* ===== Dark theme ===== */ :root[data-theme="dark"] { --bg-main: #0d1018; --bg-card: #161b27; --bg-inset: #1b2230; --bg-subtle: #1e2533; --border-color: #28303f; --border-strong: #3a4456; --text-main: #eef1f7; --text-muted: #9aa3b6; --text-faint: #6b748a; --accent: #eef1f7; --accent-hover: #ffffff; --focus: rgba(129, 140, 248, 0.30); --brand-soft: #1e2440; --topbar-bg: rgba(13, 16, 24, 0.82); --toast-bg: #2a3144; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.4); --shadow-lg: 0 18px 44px rgba(0, 0, 0, 0.55); } /* ===== Per-sport color identity (theme-agnostic; soft/text derived above) ===== */ body.sport-football { --sport:#16a34a; --sport-deep:#15803d; --sport-ring:rgba(22,163,74,.22); --sport-grad:linear-gradient(135deg,#22c55e 0%,#15803d 100%); } body.sport-cricket { --sport:#2563eb; --sport-deep:#1d4ed8; --sport-ring:rgba(37,99,235,.22); --sport-grad:linear-gradient(135deg,#3b82f6 0%,#1d4ed8 100%); } body.sport-basketball { --sport:#ea580c; --sport-deep:#c2410c; --sport-ring:rgba(234,88,12,.22); --sport-grad:linear-gradient(135deg,#fb923c 0%,#c2410c 100%); } body.sport-badminton { --sport:#7c3aed; --sport-deep:#6d28d9; --sport-ring:rgba(124,58,237,.22); --sport-grad:linear-gradient(135deg,#a78bfa 0%,#6d28d9 100%); } body.sport-tennis { --sport:#65a30d; --sport-deep:#4d7c0f; --sport-ring:rgba(101,163,13,.22); --sport-grad:linear-gradient(135deg,#84cc16 0%,#4d7c0f 100%); } body.sport-swimming { --sport:#0891b2; --sport-deep:#0e7490; --sport-ring:rgba(8,145,178,.22); --sport-grad:linear-gradient(135deg,#22d3ee 0%,#0e7490 100%); } body.sport-volleyball { --sport:#d97706; --sport-deep:#b45309; --sport-ring:rgba(217,119,6,.22); --sport-grad:linear-gradient(135deg,#fbbf24 0%,#b45309 100%); } /* Soft surface + readable accent text, derived from the active sport. Declared on so color-mix resolves with body's --sport (not the :root default). color-mix lets both adapt automatically per theme. */ body { --sport-soft: color-mix(in srgb, var(--sport) 10%, var(--bg-card)); --sport-on-soft: var(--sport-deep); } :root[data-theme="dark"] body { --sport-soft: color-mix(in srgb, var(--sport) 24%, var(--bg-card)); --sport-on-soft: color-mix(in srgb, var(--sport) 60%, white); } * { box-sizing: border-box; margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } html { -webkit-font-smoothing: antialiased; } body { background-color: var(--bg-main); color: var(--text-main); line-height: 1.55; font-size: 15px; } [hidden] { display: none !important; } body.single-sport .sport-scoped { display: none !important; } /* ===== Login ===== */ .login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem; position: relative; overflow: hidden; background: radial-gradient(1200px 600px at 80% -10%, var(--sport-soft) 0%, transparent 55%), radial-gradient(900px 500px at -10% 110%, var(--brand-soft) 0%, transparent 50%), linear-gradient(160deg, #fbfcfe 0%, #f3f5fb 100%); } .login-wrap::before { content: ""; position: absolute; inset: -10% -10% auto auto; width: 460px; height: 460px; background: var(--sport-grad); filter: blur(60px); opacity: 0.16; border-radius: 50%; pointer-events: none; } .login-card { position: relative; width: 100%; max-width: 400px; background: rgba(255,255,255,0.94); border: 1px solid rgba(255,255,255,0.7); border-radius: 20px; padding: 2.5rem; box-shadow: var(--shadow-lg); } .login-mark { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--sport-grad); color: #fff; margin-bottom: 1.3rem; box-shadow: 0 10px 26px var(--sport-ring); } .login-mark svg { width: 32px; height: 32px; } .login-title { font-size: 1.7rem; font-weight: 800; letter-spacing: -0.03em; background: var(--sport-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .login-sub { color: var(--text-muted); font-size: 0.86rem; margin-bottom: 1.85rem; } .login-form { display: flex; flex-direction: column; gap: 1rem; } .login-error { color: var(--danger); font-size: 0.82rem; min-height: 1rem; } .dev-panel { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px dashed var(--border-strong); } .dev-panel-head { font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 0.6rem; } .dev-buttons { display: flex; flex-direction: column; gap: 0.4rem; } .dev-buttons button { text-align: left; font-size: 0.8rem; } /* ===== Shell ===== */ .shell { display: grid; grid-template-columns: 244px 1fr; min-height: 100vh; } .sidebar { background: var(--bg-card); border-right: 1px solid var(--border-color); padding: 1.5rem 1rem; display: flex; flex-direction: column; gap: 0.4rem; position: sticky; top: 0; height: 100vh; } .brand { display: flex; align-items: center; gap: 0.7rem; padding: 0.15rem 0.5rem 1.4rem; } .brand-mark { width: 38px; height: 38px; flex: none; border-radius: 11px; display: grid; place-items: center; background: var(--sport-grad); color: #fff; box-shadow: 0 4px 12px var(--sport-ring); transition: background 0.3s; } .brand-mark svg { width: 22px; height: 22px; } .brand-text { display: flex; flex-direction: column; line-height: 1.15; } .brand-name { font-size: 1.08rem; font-weight: 800; letter-spacing: -0.02em; } .brand-tag { font-size: 0.64rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.14em; font-weight: 600; } .nav { display: flex; flex-direction: column; gap: 0.15rem; flex: 1; } .nav button { display: flex; align-items: center; gap: 0.7rem; width: 100%; text-align: left; background: none; border: none; cursor: pointer; padding: 0.6rem 0.75rem; border-radius: 10px; font-size: 0.9rem; color: var(--text-muted); font-weight: 500; position: relative; transition: background 0.14s, color 0.14s; } .nav button svg { width: 18px; height: 18px; flex: none; opacity: 0.85; transition: opacity 0.14s; } .nav button:hover { background: var(--bg-subtle); color: var(--text-main); } .nav button:hover svg { opacity: 1; } .nav button.active { background: var(--sport-soft); color: var(--sport-on-soft); font-weight: 600; } .nav button.active svg { opacity: 1; color: var(--sport); } .nav button.active::before { content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: 3px; border-radius: 0 3px 3px 0; background: var(--sport); } .sidebar-foot { padding: 0.5rem 0.6rem; } .dev-tag { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.12em; color: var(--warning); background: color-mix(in srgb, var(--warning) 14%, var(--bg-card)); border: 1px solid color-mix(in srgb, var(--warning) 35%, var(--bg-card)); border-radius: 6px; padding: 0.2rem 0.5rem; } .main { display: flex; flex-direction: column; min-width: 0; } .topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.85rem 2rem; border-bottom: 1px solid var(--border-color); position: sticky; top: 0; background: var(--topbar-bg); backdrop-filter: saturate(180%) blur(10px); z-index: 10; } .topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--sport-grad); opacity: 0.9; } .topbar-lead { display: flex; align-items: center; gap: 0.8rem; min-width: 0; } .topbar-sport { width: 34px; height: 34px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--sport-soft); color: var(--sport); } .topbar-sport svg { width: 20px; height: 20px; } .topbar-titles { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; } .page-title { font-size: 1.14rem; font-weight: 700; letter-spacing: -0.01em; } .page-context { font-size: 0.74rem; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .topbar-right { display: flex; align-items: center; gap: 0.75rem; white-space: nowrap; } .tenant-select { width: auto; padding: 0.4rem 0.6rem; font-size: 0.85rem; } .user-chip { display: flex; align-items: center; gap: 0.55rem; padding: 0.25rem 0.25rem 0.25rem 0.3rem; border: 1px solid var(--border-color); border-radius: 9999px; background: var(--bg-card); box-shadow: var(--shadow-sm); } .avatar { width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--sport-grad); color: #fff; font-size: 0.72rem; font-weight: 700; } .user-meta { display: flex; flex-direction: column; line-height: 1.15; padding-right: 0.35rem; } .user-name { font-size: 0.82rem; font-weight: 600; } .role-pill { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); } .role-pill.role-super { color: var(--brand); } .role-pill.role-admin { color: #1d4ed8; } .role-pill.role-coach { color: var(--success); } .icon-btn { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--bg-card); border: 1px solid var(--border-color); color: var(--text-muted); cursor: pointer; transition: background 0.12s, color 0.12s, border-color 0.12s; } .icon-btn:hover { background: var(--sport-soft); color: var(--sport-on-soft); border-color: var(--sport-ring); } .icon-btn svg { width: 17px; height: 17px; } .content { padding: 2rem; max-width: 1180px; width: 100%; display: flex; flex-direction: column; gap: 1.5rem; } .view { display: flex; flex-direction: column; gap: 1.5rem; } /* ===== Sport hero banner (dashboard) ===== */ .sport-hero { position: relative; overflow: hidden; border-radius: 18px; padding: 1.6rem 1.8rem; background: var(--sport-grad); color: #fff; display: flex; align-items: center; gap: 1.2rem; box-shadow: 0 14px 38px var(--sport-ring); } .sport-hero .field-deco { position: absolute; inset: 0; width: 100%; height: 100%; color: #fff; opacity: 0.16; pointer-events: none; } .hero-icon { width: 64px; height: 64px; flex: none; border-radius: 16px; display: grid; place-items: center; background: rgba(255,255,255,0.18); backdrop-filter: blur(4px); color: #fff; position: relative; z-index: 1; } .hero-icon svg { width: 38px; height: 38px; } .hero-text { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; } .hero-eyebrow { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.14em; font-weight: 700; opacity: 0.85; } .hero-title { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; } .hero-sub { font-size: 0.86rem; opacity: 0.9; } .hero-stat { position: relative; z-index: 1; margin-left: auto; text-align: right; display: flex; gap: 1.6rem; } .hero-stat .hs { display: flex; flex-direction: column; } .hero-stat .hs-v { font-size: 1.55rem; font-weight: 800; letter-spacing: -0.02em; } .hero-stat .hs-l { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.85; font-weight: 600; } @media (max-width: 720px) { .sport-hero { flex-wrap: wrap; } .hero-stat { margin-left: 0; width: 100%; } } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; } .mini-h { font-size: 0.78rem; font-weight: 700; color: var(--text-muted); margin-bottom: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; } .sport-checks { display: flex; flex-wrap: wrap; gap: 0.5rem; } .sport-checks label { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.8rem; border: 1px solid var(--border-strong); border-radius: 9999px; cursor: pointer; font-size: 0.85rem; color: var(--text-main); transition: all 0.14s; } .sport-checks label:has(input:checked) { border-color: var(--sport); background: var(--sport-soft); color: var(--sport-on-soft); font-weight: 600; } .sport-checks input { width: auto; } h1 { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.01em; } h3 { font-weight: 700; } header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 2.5rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--border-color); flex-wrap: wrap; gap: 1rem; } .tenant-badge { color: var(--text-muted); font-size: 0.8rem; font-weight: 500; } /* dashboard strip */ .kpi-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: 0.9rem; } .kpi { position: relative; overflow: hidden; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius); padding: 1.15rem 1.3rem; cursor: pointer; box-shadow: var(--shadow-sm); transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; } .kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--sport-grad); opacity: 0; transition: opacity 0.18s; } .kpi:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--sport-ring); } .kpi:hover::before { opacity: 1; } .kpi .v { font-size: 1.7rem; font-weight: 800; letter-spacing: -0.025em; color: var(--sport-on-soft); } .kpi .l { font-size: 0.68rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.07em; margin-top: 0.25rem; font-weight: 600; } .kpi.warn .v { color: var(--warning); } .kpi.bad .v { color: var(--danger); } .kpi.good .v { color: var(--success); } /* Modal */ .modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; z-index: 1000; } .modal-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(15, 19, 30, 0.5); backdrop-filter: blur(2px); } .modal-content { position: relative; background: var(--bg-card); border-radius: 16px; max-width: 520px; width: 90%; max-height: 82vh; overflow-y: auto; box-shadow: var(--shadow-lg); } .modal-header { display: flex; justify-content: space-between; align-items: center; padding: 1.4rem 1.5rem; border-bottom: 1px solid var(--border-color); background: var(--sport-soft); border-radius: 16px 16px 0 0; } .modal-header h3 { font-size: 1.12rem; font-weight: 700; color: var(--sport-on-soft); } .modal-close { background: none; border: none; font-size: 1.4rem; cursor: pointer; line-height: 1; color: var(--text-muted); transition: color 0.2s; } .modal-close:hover { color: var(--accent); } .modal-body { padding: 1.5rem; } .modal-body .calc-item { margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border-color); } .modal-body .calc-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .calc-label { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 0.3rem; } .calc-value { font-size: 1.2rem; font-weight: 700; color: var(--sport-on-soft); } .calc-detail { font-size: 0.82rem; color: var(--text-faint); margin-top: 0.4rem; line-height: 1.4; } .toggle-container { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 2.5rem; } .sams-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; } @media (max-width: 900px) { .sams-grid { grid-template-columns: 1fr; } } .span-2 { grid-column: span 2; } @media (max-width: 900px) { .span-2 { grid-column: span 1; } } .sams-card { position: relative; background-color: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius); padding: 1.75rem; display: flex; flex-direction: column; gap: 1.5rem; box-shadow: var(--shadow-sm); } .card-header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 1rem; border-bottom: 1px solid var(--border-color); gap: 0.5rem; flex-wrap: wrap; } .card-title { font-size: 1.04rem; font-weight: 700; letter-spacing: -0.01em; display: flex; align-items: center; gap: 0.55rem; } .card-title::before { content: ""; width: 4px; height: 18px; border-radius: 3px; background: var(--sport-grad); flex: none; } .card-sub { font-size: 0.78rem; color: var(--text-faint); font-weight: 500; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; } .form-group { display: flex; flex-direction: column; gap: 0.4rem; } .form-group.full { grid-column: span 2; } .mt { margin-top: 1.1rem; } label { font-size: 0.78rem; color: var(--text-muted); font-weight: 600; } input, select, textarea { background-color: var(--bg-main); border: 1px solid var(--border-strong); color: var(--text-main); padding: 0.58rem 0.72rem; border-radius: 9px; font-size: 0.9rem; width: 100%; transition: border-color 0.15s, box-shadow 0.15s, background 0.15s; } input::placeholder, textarea::placeholder { color: var(--text-faint); } input:focus, select:focus, textarea:focus { border-color: var(--sport); outline: none; background: var(--bg-card); box-shadow: 0 0 0 3px var(--sport-ring); } .btn { background: var(--sport-grad); color: #fff; padding: 0.58rem 1.15rem; border: none; border-radius: 9px; font-weight: 600; font-size: 0.88rem; cursor: pointer; box-shadow: 0 4px 12px var(--sport-ring); transition: transform 0.14s, box-shadow 0.14s, filter 0.14s; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; } .btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px var(--sport-ring); filter: brightness(1.04); } .btn:active { transform: translateY(0); } .btn-secondary { background: var(--bg-card); border: 1px solid var(--border-strong); color: var(--text-main); box-shadow: var(--shadow-sm); } .btn-secondary:hover { background: var(--sport-soft); border-color: var(--sport-ring); color: var(--sport-on-soft); filter: none; } .btn-danger { background: var(--bg-card); border: 1px solid var(--border-strong); color: var(--text-muted); box-shadow: none; } .btn-danger:hover { background: color-mix(in srgb, var(--danger) 12%, var(--bg-card)); border-color: var(--danger); color: var(--danger); filter: none; } .btn-sm { padding: 0.38rem 0.75rem; font-size: 0.8rem; } .full-w { width: 100%; } .sams-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 0.88rem; } .sams-table th { color: var(--text-faint); font-weight: 700; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--border-color); } .sams-table td { padding: 0.85rem 0.8rem; border-bottom: 1px solid var(--border-color); vertical-align: middle; } .sams-table tr:last-child td { border-bottom: none; } .sams-table tbody tr { transition: background 0.12s; } .sams-table tbody tr:hover { background: var(--sport-soft); } .tag { display: inline-flex; padding: 0.12rem 0.6rem; border-radius: 9999px; font-size: 0.72rem; font-weight: 600; border: 1px solid var(--border-strong); color: var(--text-muted); background: var(--bg-main); } .tag-active, .tag-paid { color: color-mix(in srgb, var(--success) 72%, var(--text-main)); border-color: color-mix(in srgb, var(--success) 35%, var(--bg-card)); background: color-mix(in srgb, var(--success) 13%, var(--bg-card)); } .tag-paused, .tag-due { color: color-mix(in srgb, var(--warning) 72%, var(--text-main)); border-color: color-mix(in srgb, var(--warning) 35%, var(--bg-card)); background: color-mix(in srgb, var(--warning) 13%, var(--bg-card)); } .tag-exited, .tag-overdue { color: color-mix(in srgb, var(--danger) 72%, var(--text-main)); border-color: color-mix(in srgb, var(--danger) 35%, var(--bg-card)); background: color-mix(in srgb, var(--danger) 13%, var(--bg-card)); } .file-dropzone { border: 1.5px dashed var(--border-strong); border-radius: 10px; padding: 1.1rem; text-align: center; color: var(--text-faint); font-size: 0.82rem; cursor: pointer; transition: border-color 0.15s, color 0.15s, background 0.15s; } .file-dropzone:hover { border-color: var(--sport); color: var(--sport-on-soft); background: var(--sport-soft); } .file-dropzone.has-file { border-color: var(--success); color: var(--success); } /* attendance roster */ .att-list { display: flex; flex-direction: column; gap: 0.45rem; } .att-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; background: var(--bg-main); border: 1px solid var(--border-color); border-radius: 10px; padding: 0.68rem 0.95rem; cursor: pointer; user-select: none; transition: border-color 0.15s, background 0.15s, transform 0.1s; } .att-row:hover { border-color: var(--sport-ring); transform: translateX(2px); } .att-row .who { font-weight: 600; } .att-row .meta { font-size: 0.74rem; color: var(--text-faint); } .att-row.present { border-color: color-mix(in srgb, var(--success) 40%, var(--bg-card)); background: color-mix(in srgb, var(--success) 12%, var(--bg-card)); } .att-pill { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.18rem 0.6rem; border-radius: 9999px; border: 1px solid var(--border-strong); color: var(--text-faint); } .att-row.present .att-pill { border-color: color-mix(in srgb, var(--success) 40%, var(--bg-card)); color: color-mix(in srgb, var(--success) 72%, var(--text-main)); background: var(--bg-card); } .bars { display: flex; flex-direction: column; gap: 0.65rem; } .bar-row { display: grid; grid-template-columns: 140px 1fr 36px; align-items: center; gap: 0.6rem; font-size: 0.82rem; } .bar-track { display: block; background: var(--bg-subtle); border-radius: 9999px; height: 9px; overflow: hidden; } .bar-fill { display: block; height: 100%; background: var(--sport-grad); border-radius: 9999px; transition: width 0.4s ease; } .bar-fill.inverse { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); } /* ===== Performance: stat summary + squad matrix ===== */ .metric-cat, .stat-cat { margin-bottom: 1.1rem; } .metric-cat:last-child, .stat-cat:last-child { margin-bottom: 0; } .metric-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } @media (max-width: 560px) { .metric-grid { grid-template-columns: 1fr; } } .input-unit { display: flex; align-items: center; gap: 0.5rem; } .input-unit .unit { color: var(--text-faint); font-size: 0.8rem; white-space: nowrap; } .stat-row { display: grid; grid-template-columns: 150px 1fr auto; align-items: center; gap: 0.7rem; padding: 0.32rem 0; } .stat-label { font-size: 0.84rem; color: var(--text-muted); } .stat-val { font-size: 0.84rem; font-weight: 600; text-align: right; white-space: nowrap; } .trend { font-size: 0.72rem; font-weight: 700; margin-left: 0.3rem; } .trend.up { color: var(--success); } .trend.down { color: var(--danger); } @media (max-width: 560px) { .stat-row { grid-template-columns: 110px 1fr auto; gap: 0.5rem; } } .matrix-table th.matrix-sort { cursor: pointer; user-select: none; white-space: nowrap; } .matrix-table th.matrix-sort:hover { color: var(--sport-on-soft); } .matrix-table tbody tr { cursor: pointer; } .metric-cell { display: flex; flex-direction: column; gap: 0.25rem; min-width: 84px; } .metric-cell .metric-val { font-size: 0.82rem; font-weight: 600; } .bar-track.mini { height: 5px; } .toast { position: fixed; bottom: 1.5rem; right: 1.5rem; background: var(--toast-bg); color: #fff; padding: 0.75rem 1.15rem; border-radius: 10px; font-size: 0.85rem; box-shadow: var(--shadow-lg); opacity: 0; transform: translateY(10px); transition: opacity 0.2s, transform 0.2s; z-index: 50; } .toast.show { opacity: 1; transform: translateY(0); } .toast.err { background: var(--danger); } .muted { color: var(--text-muted); font-size: 0.88rem; } .hint { font-size: 0.8rem; color: var(--text-faint); } .legal-footer { margin-top: auto; padding: 1.1rem 2rem; border-top: 1px solid var(--border-color); color: var(--text-faint); font-size: 0.72rem; line-height: 1.5; } .legal-footer strong { color: var(--text-muted); font-weight: 600; } /* Smooth theme switch */ body, .sidebar, .topbar, .sams-card, .kpi, input, select, textarea, .btn, .att-row, .tag { transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease; } /* ================================================================= RESPONSIVE — reflow panels/forms across screen sizes & browser zoom ================================================================= */ /* Large tablets / zoomed desktop */ @media (max-width: 1080px) { .content { padding: 1.5rem; } .topbar { padding: 0.8rem 1.5rem; } .grid-2 { gap: 1.5rem; } } /* Collapse 2-column forms & dashboard grids before they get cramped (also covers ~200% browser zoom on a 1280px screen). */ @media (max-width: 820px) { .grid-2 { grid-template-columns: 1fr; } .form-row { grid-template-columns: 1fr; } .form-group.full { grid-column: span 1; } .sams-grid { grid-template-columns: 1fr; } .span-2 { grid-column: span 1; } } /* Phone / heavily-zoomed: sidebar becomes a top nav bar */ @media (max-width: 768px) { .shell { grid-template-columns: 1fr; } .sidebar { position: static; height: auto; width: 100%; flex-direction: column; gap: 0.6rem; padding: 0.9rem 1rem; border-right: none; border-bottom: 1px solid var(--border-color); } .brand { padding: 0 0.25rem; } .nav { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; gap: 0.25rem; -webkit-overflow-scrolling: touch; padding-bottom: 0.25rem; } .nav button { width: auto; white-space: nowrap; padding: 0.5rem 0.8rem; } .nav button.active::before { display: none; } .sidebar-foot { display: none; } .topbar { padding: 0.7rem 1rem; gap: 0.6rem; } .content { padding: 1.1rem; gap: 1.1rem; } .view { gap: 1.1rem; } .sams-card { padding: 1.25rem; gap: 1.1rem; } .sport-hero { padding: 1.25rem; } .hero-title { font-size: 1.25rem; } .user-meta { display: none; } /* keep just the avatar to save room */ .legal-footer { padding: 1rem 1.1rem; } } /* Small phones */ @media (max-width: 480px) { .topbar { flex-wrap: wrap; } .page-title { font-size: 1.02rem; } .kpi-strip { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 0.6rem; } .kpi .v { font-size: 1.4rem; } .bar-row { grid-template-columns: 92px 1fr 28px; gap: 0.45rem; font-size: 0.78rem; } .card-header { gap: 0.4rem; } .login-card { padding: 1.75rem; } } /* ================================================================= FMSS additions — fee management specifics ================================================================= */ /* Balance colouring */ .bal { font-weight: 700; font-variant-numeric: tabular-nums; } .bal.pos { color: var(--success); } .bal.neg { color: var(--danger); } .bal.zero { color: var(--text-muted); } .num { font-variant-numeric: tabular-nums; white-space: nowrap; } /* Contract pills / segmented control */ .seg { display: inline-flex; gap: 0.3rem; background: var(--bg-subtle); padding: 0.25rem; border-radius: 11px; border: 1px solid var(--border-color); } .seg button { background: none; border: none; cursor: pointer; padding: 0.4rem 0.9rem; border-radius: 8px; font-size: 0.85rem; font-weight: 600; color: var(--text-muted); } .seg button.active { background: var(--bg-card); color: var(--sport-on-soft); box-shadow: var(--shadow-sm); } /* Team colour dots */ .team-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 0.4rem; vertical-align: middle; border: 1px solid rgba(0,0,0,0.12); } .team-Red { background: #ef4444; } .team-Blue { background: #3b82f6; } .team-Black { background: #1f2937; } .team-White { background: #f3f4f6; } .team-Green { background: #22c55e; } .team-Yellow { background: #eab308; } .team-Team\ 1, .team-Team\ 2, .team-Team\ 3 { background: var(--text-faint); } /* Captain + match badges */ .capt-badge { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.04em; color: #fff; background: var(--warning); padding: 0.05rem 0.35rem; border-radius: 5px; margin-left: 0.35rem; } .miss-badge { font-size: 0.66rem; color: var(--danger); font-weight: 600; } /* Editable amount cell in the preview table */ .amt-input { width: 78px; text-align: right; padding: 0.32rem 0.45rem; font-variant-numeric: tabular-nums; } /* Preview total banner */ .preview-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.9rem 1.1rem; background: var(--sport-soft); border-radius: 11px; margin-top: 1rem; flex-wrap: wrap; } .preview-foot .tot { font-size: 1.25rem; font-weight: 800; color: var(--sport-on-soft); } /* Watchlist chips on dashboard */ .watch-chip { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.3rem 0.7rem; border-radius: 9999px; font-size: 0.8rem; font-weight: 600; margin: 0 0.4rem 0.4rem 0; border: 1px solid color-mix(in srgb, var(--danger) 30%, var(--bg-card)); background: color-mix(in srgb, var(--danger) 10%, var(--bg-card)); color: var(--danger); } .watch-wrap { display: flex; flex-wrap: wrap; } /* Mini stat rows inside cards */ .kv { display: flex; justify-content: space-between; padding: 0.5rem 0; border-bottom: 1px solid var(--border-color); font-size: 0.9rem; } .kv:last-child { border-bottom: none; } .kv .k { color: var(--text-muted); } .kv .v { font-weight: 700; font-variant-numeric: tabular-nums; } /* Teams raw text block */ .teams-raw { white-space: pre-wrap; background: var(--bg-inset); border: 1px solid var(--border-color); border-radius: 9px; padding: 0.8rem 1rem; font-size: 0.86rem; line-height: 1.5; } textarea.wa-input { min-height: 150px; font-size: 0.92rem; line-height: 1.55; resize: vertical; } .row-actions { display: flex; gap: 0.4rem; } .link-btn { background: none; border: none; color: var(--text-faint); cursor: pointer; font-size: 0.95rem; padding: 0.2rem 0.4rem; border-radius: 6px; } .link-btn:hover { color: var(--danger); background: var(--bg-subtle); }