* { margin: 0; padding: 0; box-sizing: border-box; } :root { color-scheme: only dark; /* opt out of Chrome's "Force Dark Mode" — this site is already dark */ /* Primary — theme-cycled at runtime via */ --primary: #7e4cbc; --primary-dim: #6a3fa3; --primary-soft: rgba(126, 76, 188, 0.12); --primary-faint: rgba(126, 76, 188, 0.05); --primary-glow: rgba(126, 76, 188, 0.15); /* Surfaces */ --bg-dark: #0b0b0c; --bg-card: #101012; --bg-card-hover: #161618; --bg-input: #1c1c1f; --border: #1f1f23; --border-strong: #2a2a30; /* Text */ --text-primary: #F1F3F5; --text-secondary: #a0a0a8; --text-muted: #5a5a60; --text-dim: #7a7a82; /* Accents */ --red: #FF6B6B; --orange: #FFA94D; --blue: #4DABF7; --teal: #20C997; --positive: #69DB7C; --gold: #FFD43B; --silver: #CED4DA; --bronze: #E8590C; --cf-green: #c8dd8a; --cf-red: #f4cccc; /* Radii */ --radius: 8px; --radius-sm: 6px; /* Fonts */ --font-sans: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; } /* Brand-colour cycle (logo click). data-theme is set on pre-paint. */ html[data-theme="purple"] { --primary:#7e4cbc; --primary-dim:#6a3fa3; --primary-soft:rgba(126,76,188,0.12); --primary-faint:rgba(126,76,188,0.05); --primary-glow:rgba(126,76,188,0.15); } html[data-theme="blue"] { --primary:#2e60cf; --primary-dim:#2752b0; --primary-soft:rgba(46,96,207,0.12); --primary-faint:rgba(46,96,207,0.05); --primary-glow:rgba(46,96,207,0.15); } html[data-theme="red"] { --primary:#bc4f48; --primary-dim:#a3433d; --primary-soft:rgba(188,79,72,0.12); --primary-faint:rgba(188,79,72,0.05); --primary-glow:rgba(188,79,72,0.15); } html[data-theme="green"] { --primary:#31a032; --primary-dim:#298a2a; --primary-soft:rgba(49,160,50,0.12); --primary-faint:rgba(49,160,50,0.05); --primary-glow:rgba(49,160,50,0.15); } html { overflow-x: clip; } body { font-family: var(--font-sans); background: var(--bg-dark); color: var(--text-primary); min-height: 100vh; overflow-x: clip; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* ===== Navy theme variant — toggled via Settings ===== */ /* Selected via body.theme-navy; default dark mode is unclassed. */ /* Persisted under localStorage["dashboard_theme"] ("dark" | "navy"). */ /* All other vars (text, brand cycle, fixed accents bar --blue) stay */ /* identical to dark mode; only surfaces shift and --blue opens its */ /* hue gap so it doesn't muddy with the navy hue family. */ body.theme-navy { --bg-dark: #08111f; --bg-card: #0c1828; --bg-card-hover: #122036; --bg-input: #182846; --border: #1e2e4e; --border-strong: #2a3b60; --blue: #5dc4fb; } /* Spies table rows use --bg-input as a row background — which in navy is the brightest surface (intended for form fields) and makes rows pop too hard. Override to --bg-card (panel surface) so rows blend with the panel and the hover-lift still reads. Targets and Full Spies tables share the same generic #panel-spies td rule. */ body.theme-navy #panel-spies td { background: var(--bg-card); } /* ===== HEADER ===== */ .header { display: flex; align-items: center; gap: 10px; padding: 14px 24px; border-bottom: 1px solid var(--border); background: var(--bg-dark); position: sticky; top: 0; z-index: 50; } .header-logo { width: 26px; height: 26px; border: none; background: transparent; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; } .header-logo img { width: 26px; height: 26px; object-fit: contain; } /* Burger menu trigger — sits to the LEFT of the BYND logo. Opens the full side drawer; existing logo-click theme cycle stays untouched. */ .burger { background: transparent; border: none; color: var(--text-secondary); cursor: pointer; padding: 4px 6px; margin-right: -2px; display: inline-flex; align-items: center; border-radius: 4px; transition: color 0.15s, background 0.15s; } .burger:hover { color: var(--primary); background: var(--bg-input); } .burger svg { display: block; } .header-eyebrow { font-size: 11px; letter-spacing: 0.18em; color: var(--text-secondary); text-transform: uppercase; font-weight: 500; line-height: 21.75px; } .header-title { font-size: 15px; font-weight: 600; letter-spacing: -0.005em; color: var(--text-primary); text-decoration: none; line-height: 21.75px; transition: opacity 0.15s; } .header-title:hover { opacity: 0.8; } /* ===== SIDE MENU (drawer) ===== */ .side-menu-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.55); opacity: 0; pointer-events: none; transition: opacity 0.2s; z-index: 199; } .side-menu-backdrop.open { opacity: 1; pointer-events: auto; } .side-menu { position: fixed; top: 0; left: 0; bottom: 0; width: 320px; max-width: 88vw; background: var(--bg-card); border-right: 1px solid var(--border); transform: translateX(-100%); transition: transform 0.25s ease; z-index: 200; display: flex; flex-direction: column; box-shadow: 4px 0 24px rgba(0,0,0,0.45); } .side-menu.open { transform: translateX(0); } .side-menu-header { display: flex; align-items: center; gap: 12px; padding: 18px 16px; border-bottom: 1px solid var(--border); background: var(--bg-dark); } .side-menu-brand { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; } .side-menu-logo { width: 36px; height: 36px; object-fit: contain; } .side-menu-eyebrow { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-secondary); font-weight: 500; } .side-menu-user { font-size: 14px; font-weight: 600; color: var(--text-primary); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .side-menu-close { background: transparent; border: none; color: var(--text-dim); cursor: pointer; font-size: 24px; line-height: 1; padding: 4px 8px; border-radius: 4px; transition: color 0.15s, background 0.15s; } .side-menu-close:hover { color: var(--text-primary); background: var(--bg-input); } .side-menu-section-label { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dim); font-weight: 600; padding: 14px 14px 6px; } .side-menu-items { flex: 1; overflow-y: auto; padding: 4px 8px 12px; } .side-menu-item { display: flex; align-items: center; gap: 12px; padding: 10px 10px; text-decoration: none; color: var(--text-secondary); border-radius: 8px; transition: background 0.1s, color 0.1s; } .side-menu-item + .side-menu-item { margin-top: 2px; } .side-menu-item:hover { background: var(--bg-input); color: var(--text-primary); } .side-menu-item.current { background: var(--primary-soft); color: var(--primary); cursor: default; } .side-menu-item.current:hover { background: var(--primary-soft); } .side-menu-item-icon { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--bg-input); flex-shrink: 0; color: var(--text-secondary); transition: background 0.1s, color 0.1s; } .side-menu-item:hover .side-menu-item-icon { background: rgba(255,255,255,0.05); color: var(--text-primary); } .side-menu-item.current .side-menu-item-icon { background: var(--primary); color: var(--bg-dark); } .side-menu-item-text { flex: 1; min-width: 0; } .side-menu-item-title { font-size: 14px; font-weight: 600; line-height: 1.2; } .side-menu-item-desc { font-size: 11px; color: var(--text-dim); margin-top: 2px; } .side-menu-item.current .side-menu-item-desc { color: var(--primary-dim); } .side-menu-footer { padding: 12px 14px; border-top: 1px solid var(--border); display: flex; gap: 8px; } .side-menu-footer .side-menu-foot-btn { flex: 1; background: transparent; border: 1px solid var(--border); color: var(--text-secondary); padding: 8px 10px; border-radius: 6px; font-size: 12px; font-family: inherit; cursor: pointer; transition: color 0.15s, border-color 0.15s, background 0.15s; } .side-menu-footer .side-menu-foot-btn:hover { color: var(--text-primary); border-color: var(--text-dim); background: var(--bg-input); } .side-menu-footer .side-menu-foot-btn.danger { color: var(--red); border-color: var(--red); } .side-menu-footer .side-menu-foot-btn.danger:hover { background: rgba(255,107,107,0.08); } @media (max-width: 640px) { .side-menu { width: 88vw; } } .header-right { margin-left: auto; display: flex; align-items: center; gap: 12px; } .user-name { font-size: 13px; color: var(--text-secondary); } .logout-btn { padding: 4px 10px; font-size: 11px; background: transparent; border: 1px solid var(--primary); color: var(--primary); border-radius: 4px; cursor: pointer; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 700; font-family: inherit; transition: all 0.2s; } .logout-btn:hover { background: var(--primary); color: #0b0b0c; } .auth-user-info { display: flex; align-items: center; gap: 12px; } /* ===== NAV TABS ===== */ .nav-wrap { display: flex; align-items: stretch; border-bottom: 1px solid var(--border); background: var(--bg-dark); } .nav { display: flex; gap: 0; padding: 0 16px; background: var(--bg-dark); overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; } .nav::-webkit-scrollbar { display: none; } .nav-cog { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 44px; padding: 0; background: transparent; border: none; cursor: pointer; color: var(--text-dim); font-size: 16px; line-height: 1; border-bottom: 2px solid transparent; transition: color 0.15s; } .nav-cog:hover { color: var(--text-primary); } .nav-cog.active { color: var(--primary); border-bottom-color: var(--primary); } .theme-switch { display: inline-flex; background: var(--bg-input); border: 1px solid var(--border); border-radius: 6px; overflow: hidden; } .denied-block { padding: 32px 16px; max-width: 480px; margin: 32px auto; text-align: center; color: var(--text-secondary); } .denied-block h2 { color: var(--text-primary); font-size: 18px; margin: 0 0 10px; font-weight: 600; } .denied-block p { font-size: 13px; line-height: 1.5; margin: 0; } .theme-btn { background: transparent; border: none; padding: 8px 14px; font-size: 12px; color: var(--text-dim); cursor: pointer; transition: background 0.1s, color 0.1s; white-space: nowrap; } .theme-btn:hover { color: var(--text-primary); } .theme-btn.active { background: var(--bg-card-hover); color: var(--primary); } /* Dashboard Theme switch: lock the active label to the default lime so it doesn't re-tint when the user switches BYND brand colour via the picker. Scoped via #dashboardThemeSwitch so Summary Table Theme stays unaffected. */ #dashboardThemeSwitch .theme-btn.active { color: var(--primary); } /* Colour-theme picker: one swatch per brand colour, click to set the brand accent colour. Mirrors the header-logo click-cycle. */ .icon-theme-picker { display: flex; gap: 8px; flex-wrap: wrap; } .icon-theme-btn { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--border); border-radius: 8px; padding: 0; cursor: pointer; font-family: inherit; transition: border-color 0.15s, transform 0.1s; } .icon-theme-btn:hover { border-color: var(--text-dim); transform: translateY(-1px); } .icon-theme-btn.active { border-color: var(--text-primary); box-shadow: 0 0 0 2px var(--primary-soft); } .icon-theme-btn.active:hover { transform: none; } .nav-tab { padding: 10px 16px; cursor: pointer; color: var(--text-dim); font-size: 13px; border-bottom: 2px solid transparent; transition: all 0.15s; white-space: nowrap; font-family: inherit; background: transparent; border-top: none; border-left: none; border-right: none; text-decoration: none; } .nav-tab:hover { color: var(--text-primary); } .nav-tab.active { color: var(--primary); border-bottom-color: var(--primary); } /* ===== CONTROLS BAR ===== */ .controls { padding: 14px 24px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; border-bottom: 1px solid var(--border); background: var(--bg-dark); } /* On Attack Log, align the bar's left edge with the nav-tab text above (whether chain label or pill leads it). Default: .nav padding-left 16 + .nav-tab padding-left 16 = 32. */ .controls.nav-aligned { padding-left: 32px; } .control-group { display: flex; align-items: center; gap: 8px; } .control-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.16em; font-weight: 500; } .active-war-label { display: inline-flex; align-items: baseline; gap: 10px; } .active-war-eyebrow { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-secondary); font-weight: 600; } .active-war-name { font-size: 14px; font-weight: 600; color: var(--primary); letter-spacing: -0.005em; text-decoration: none; } .last-atk-pill { display: inline-flex; align-items: center; gap: 8px; } .last-atk-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 6px var(--primary); } .last-atk-info { display: inline-flex; align-items: center; gap: 6px; } .last-atk-label { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-secondary); font-weight: 500; } #lastAtkText { font-size: 10px; letter-spacing: 0.08em; color: var(--text-dim); } .sub-controls { display: flex; align-items: center; gap: 14px; margin: 18px 0 12px; flex-wrap: wrap; } .context-pill { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-secondary); } .context-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 8px var(--primary); } .context-pill .dot-inactive { background: var(--text-muted); box-shadow: none; } select, input[type="date"], input[type="datetime-local"], input[type="text"], input[type="number"] { background: var(--bg-input); border: 1px solid var(--border); color: var(--text-primary); padding: 8px 12px; border-radius: var(--radius-sm); font-size: 13px; outline: none; font-family: inherit; transition: border-color .12s, box-shadow .12s; color-scheme: only dark; } select:focus, input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); } .btn { background: var(--primary); color: #0b0b0c; border: 1px solid transparent; padding: 8px 14px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 600; cursor: pointer; letter-spacing: 0.04em; transition: all 0.12s; font-family: inherit; display: inline-flex; align-items: center; gap: 6px; } .btn:hover { background: var(--primary-dim); } .btn:active { transform: translateY(1px); } .btn-outline { background: transparent; border: 1px solid var(--primary); color: var(--primary); } .btn-outline:hover { background: var(--primary-soft); } .btn-small { padding: 5px 10px; font-size: 11px; } .btn-danger { background: var(--red); color: #fff; } .btn-danger:hover { filter: brightness(1.1); } .btn-secondary { background: var(--bg-card-hover); color: var(--text-primary); border: 1px solid var(--border); } .btn-secondary:hover { background: #1c1c1f; border-color: var(--border-strong); } .btn-sm { padding: 5px 10px; font-size: 11px; } .card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .card-body { padding: 14px 16px; } .field { display: flex; flex-direction: column; gap: 6px; } .field-label { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); font-weight: 500; } .search-input { position: relative; } .search-input input { padding-left: 32px; width: 100%; box-sizing: border-box; } .search-input::before { content: '⌕'; position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 14px; } .check { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-secondary); cursor: pointer; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--bg-input); border: 1px solid var(--border); transition: border-color .12s; height: min-content; align-self: flex-end; } .check:hover { border-color: var(--border-strong); } .chip { display: inline-flex; align-items: center; font-size: 10px; font-family: var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; padding: 3px 8px; border-radius: 999px; background: #1c1c1f; color: var(--text-dim); white-space: nowrap; } .chip-pos { background: rgba(105, 219, 124, 0.10); color: var(--positive); } .chip-neg { background: rgba(255, 107, 107, 0.10); color: var(--red); } .chip-warn { background: rgba(255, 169, 77, 0.10); color: var(--orange); } .chip-info { background: rgba(77, 171, 247, 0.10); color: var(--blue); } .chip-gold { background: rgba(255, 212, 59, 0.10); color: var(--gold); } .check input[type="checkbox"] { accent-color: var(--primary); width: 14px; height: 14px; cursor: pointer; appearance: auto; } /* ===== CHECKBOX ===== */ .checkbox-group { display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: 12px; color: var(--text-secondary); } .checkbox-group input[type="checkbox"] { accent-color: var(--primary); width: 14px; height: 14px; } /* ===== MAIN CONTENT ===== */ .content { padding: 22px 24px; max-width: 100%; margin: 0 auto; } .panel { display: none; } .panel.active { display: block; } /* ===== KPI SCORECARDS ===== */ .kpi-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 18px; } .kpi { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; position: relative; overflow: hidden; display: flex; flex-direction: column; } .kpi-accent::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--primary); } .kpi-label { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-secondary); font-weight: 500; } .kpi-value { font-family: var(--font-sans); font-size: 24px; font-weight: 600; letter-spacing: -0.02em; margin-top: 6px; color: var(--text-primary); font-variant-numeric: tabular-nums; } .kpi-dual { display: flex; gap: 16px; margin-top: 6px; } .kpi-dual-item { display: flex; flex-direction: column; } .kpi-dual-value { font-family: var(--font-sans); font-size: 24px; font-weight: 600; letter-spacing: -0.02em; color: var(--text-primary); font-variant-numeric: tabular-nums; } .kpi-dual-sep { width: 1px; background: var(--border); align-self: stretch; } .kpi-dual-sub { font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); font-weight: 500; margin-top: 2px; } .kpi-sub { font-size: 11px; color: var(--text-dim); margin-top: auto; padding-top: 4px; } /* ===== SUMMARY TABLE ===== */ /* Default: dot separator visible, bar hidden — flipped on mobile via media query */ #rosterTrackingMeta .meta-sep-bar { display: none; } .summary-table-wrap { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); overflow: auto; max-height: 85vh; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; } .summary-table-wrap::-webkit-scrollbar { width: 8px; height: 8px; } .summary-table-wrap::-webkit-scrollbar-track { background: transparent; } .summary-table-wrap::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; } #summaryTable { width: auto; min-width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12px; white-space: nowrap; } #summaryTable th { text-align: center; padding: 7px 10px; background: var(--bg-card); color: var(--text-secondary); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); position: sticky; top: 0; z-index: 2; cursor: pointer; user-select: none; } #summaryTable th:hover { color: var(--text-primary); } #summaryTable td { padding: 6px 10px; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); text-align: center; font-variant-numeric: tabular-nums; } #summaryTable tr:hover td { background: rgba(255,255,255,0.018); } /* Section header row */ .section-header-row th { background: var(--bg-input); color: var(--text-muted); font-size: 9px; font-weight: 600; letter-spacing: 0.16em; padding: 5px 10px; border-bottom: 1px solid var(--border-strong); top: 0; z-index: 3; } .section-header-row th:nth-child(1), .section-header-row th:nth-child(2), .section-header-row th:nth-child(3) { background: var(--bg-input); z-index: 7; } #summaryTable thead tr:nth-child(2) th { background: var(--bg-card); top: calc(var(--section-row-h, 0px) - 1px); } /* Sticky columns: 1=Rank, 2=Name, 3=Status */ #summaryTable td:nth-child(1), #summaryTable th:nth-child(1) { position: sticky; left: 0; z-index: 4; background: var(--bg-card); text-align: center; min-width: 30px; max-width: 30px; font-family: var(--font-mono); color: var(--text-dim); border-bottom-color: var(--border); } #summaryTable thead th:nth-child(1) { z-index: 5; color: var(--text-secondary); } #summaryTable td:nth-child(2), #summaryTable th:nth-child(2) { position: sticky; left: 0; z-index: 5; background: var(--bg-card); text-align: left; font-weight: 500; color: var(--text-primary); white-space: nowrap; box-shadow: 1px 0 0 var(--border-strong); border-bottom-color: var(--border); } #summaryTable thead th:nth-child(2) { z-index: 6; color: var(--text-secondary); font-weight: 600; } /* Status column (3rd, after name) — sticky when visible */ #summaryTable td:nth-child(3), #summaryTable th:nth-child(3) { position: sticky; left: 0; z-index: 4; background: var(--bg-card); text-align: center; min-width: 80px; box-shadow: 1px 0 0 var(--border-strong); border-bottom-color: var(--border); } #summaryTable thead th:nth-child(3) { z-index: 5; } #summaryTable tr:hover td:nth-child(1), #summaryTable tr:hover td:nth-child(2), #summaryTable tr:hover td:nth-child(3) { background: var(--bg-card-hover); } /* Self-highlight row */ #summaryTable .is-self td { background: var(--primary-faint); } /* Sticky columns (rank/name/status) need a solid base underneath the highlight tint so the rest of the table doesn't show through when the user side-scrolls past them. Stacks linear-gradient(tint) on bg-card. */ #summaryTable .is-self td:nth-child(1), #summaryTable .is-self td:nth-child(2), #summaryTable .is-self td:nth-child(3) { background: linear-gradient(var(--primary-soft), var(--primary-soft)), var(--bg-card); } #summaryTable .is-self td:nth-child(1) { box-shadow: inset 2px 0 0 var(--primary); } #summaryTable .is-self td:nth-child(n+3) { font-weight: 600; } #summaryTable .is-self td:nth-child(3).col-status { font-weight: inherit; } /* Rank column styling */ .rank-cell { color: var(--text-dim); font-size: 11px; font-family: var(--font-mono); } /* Status tag */ .status-tag { display: inline-block; font-family: var(--font-mono); font-size: 8px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 6px; border-radius: 3px; background: #3a3a42; border: 1px solid #4a4a52; color: #d6d6dc; white-space: nowrap; } /* Hide status column by default */ .hide-status .col-status { display: none; } /* Section divider columns */ .section-start { border-left: 1px solid var(--border-strong); } /* ===== TABLES (generic) ===== */ .table-wrap { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); overflow: auto; max-height: 100vh; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; } .table-wrap::-webkit-scrollbar { width: 8px; } .table-wrap::-webkit-scrollbar-track { background: transparent; } .table-wrap::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; } table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; } th { text-align: left; padding: 10px 14px; background: var(--bg-card); color: var(--text-secondary); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 1; cursor: pointer; white-space: nowrap; user-select: none; } th:hover { color: var(--text-primary); } td { padding: 11px 14px; border-bottom: 1px solid var(--border); font-variant-numeric: tabular-nums; } tr:hover td { background: rgba(255,255,255,0.018); } /* Spies table */ /* Spies sub-nav tabs — pill style, slightly tighter than admin-subnav since they sit inside the controls bar */ .spy-subnav-tab { padding: 5px 12px; cursor: pointer; color: var(--text-dim); font-size: 12px; font-weight: 500; background: transparent; border: none; border-radius: var(--radius-sm); white-space: nowrap; font-family: inherit; user-select: none; transition: all 0.15s; } .spy-subnav-tab:hover { color: var(--text-primary); background: var(--bg-input); } .spy-subnav-tab.active { color: var(--primary); background: var(--primary-soft); } /* Spies sub-sections (Targets vs Full Spies) inside #panel-spies */ .spy-section { display: none; } .spy-section.active { display: block; } /* Targets table */ .targets-meta { margin-bottom: 12px; } /* Structured info grid (replaces the long sentence summary) */ .targets-info-grid { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .info-cell { padding: 10px 14px; border-right: 1px solid var(--border); display: flex; flex-direction: column; gap: 2px; } .info-cell:last-child { border-right: none; } .info-label { font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); font-weight: 600; } .info-val { font-size: 18px; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; } .info-sub { color: var(--text-secondary); font-weight: 400; font-size: 11px; } .info-note { font-size: 9px; color: var(--text-muted); font-weight: 400; margin-top: 1px; } .info-note .note-short { display: none; } /* Click-to-edit cap value — subtle: pointer cursor + slight hover tint, no underline */ .info-cap-edit { cursor: pointer; transition: color 0.15s; } .info-cap-edit:hover { color: var(--primary); } .info-cap-input, .info-ff-select { font-size: 18px; font-weight: 700; font-family: var(--font-sans); background: var(--bg-input); border: 1px solid var(--primary); border-radius: 4px; padding: 1px 4px; color: var(--text-primary); width: 70px; text-align: center; font-variant-numeric: tabular-nums; outline: none; } .info-ff-select { width: 60px; cursor: pointer; } .info-ff-select option { font-size: 13px; font-weight: 500; } .targets-est-note { margin-top: 8px; font-size: 11px; color: var(--text-muted); } .targets-est-note .est-tag { background: var(--primary-soft); color: var(--primary); padding: 1px 5px; border-radius: 3px; font-size: 9px; font-weight: 700; letter-spacing: 0.06em; margin-right: 4px; vertical-align: 1px; } /* Mobile: keep all four cells on a single row, shrink padding + fonts to fit */ @media (max-width: 768px) { .info-cell { padding: 8px 6px; align-items: center; text-align: center; } .info-val { font-size: 14px; } .info-label { font-size: 8px; letter-spacing: 0.04em; } .info-note { font-size: clamp(5.5px, 1.75vw, 8px); white-space: nowrap; letter-spacing: -0.01em; } .info-note .note-full { display: none; } .info-note .note-short { display: inline; } } /* border-collapse: separate is required for position: sticky on to work reliably on table elements (collapsed-borders break sticky in many browsers) */ .targets-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; } /* Sticky header — selector includes #panel-spies to beat the generic #panel-spies th rule's specificity. top:-1px + box-shadow (instead of border-bottom) avoids the 1px subpixel bleed during scroll. Background + colour intentionally inherit the original #panel-spies th look. */ #panel-spies .targets-table th { padding: 8px 10px; text-align: center; background: var(--bg-dark); color: #fff; font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; border-bottom: none; box-shadow: inset 0 -1px 0 var(--border); position: sticky; top: -1px; z-index: 2; } /* Pin the wrap to fill the available viewport. Combined with overflow:auto, all scrolling happens INSIDE the wrap so the sticky header is always anchored to the visible top. */ #spy-section-targets .table-wrap { height: calc(100vh - 260px); max-height: none; min-height: 320px; } .targets-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); font-variant-numeric: tabular-nums; } .targets-table tr:hover td { background: var(--bg-card-hover); } .targets-col-icon { width: 32px; padding-right: 0 !important; } /* Three narrow numeric columns (Lvl, FF, Total) — fluid percentage width with a sensible floor for mobile, centred so the values line up vertically */ .targets-col-lvl, .targets-col-num { width: 9%; min-width: 52px; text-align: center !important; } .targets-col-lvl { color: var(--text-secondary); } .targets-table td.targets-col-lvl, .targets-table td.targets-col-num { text-align: center; font-variant-numeric: tabular-nums; } /* Per-stat % columns (one per stat, replacing the old single Distribution col) and per-stat value columns */ .targets-col-pct, .targets-col-stat { text-align: center !important; font-variant-numeric: tabular-nums; } .targets-table td.targets-col-pct, .targets-table td.targets-col-stat { text-align: center; color: var(--text-secondary); font-variant-numeric: tabular-nums; } .targets-table td.targets-col-stat.stat-max { color: var(--text-secondary); font-weight: 700; } /* Hide pct + value cols on mobile to keep the table compact */ @media (max-width: 768px) { .targets-col-stat { display: none; } } /* Desktop: equal-width columns for everything except Member/Icon */ @media (min-width: 769px) { .targets-table { table-layout: fixed; } .targets-col-lvl, .targets-col-num, .targets-col-pct, .targets-col-stat { width: 8%; } } .targets-col-dist { text-align: left; } .targets-table td.targets-col-num { text-align: right; } .targets-icon-link { display: inline-flex; align-items: center; justify-content: center; opacity: 0.7; transition: opacity 0.15s; color: var(--primary); } .targets-icon-link:hover { opacity: 1; } .targets-icon-link svg { width: 18px; height: 18px; fill: currentColor; } .targets-name { font-weight: 600; color: var(--text-primary); } .est-tag { background: var(--primary-soft); color: var(--primary); padding: 1px 5px; border-radius: 3px; font-size: 9px; font-weight: 700; letter-spacing: 0.06em; vertical-align: 1px; } .targets-name .est-tag { margin-left: 6px; } /* When every opponent is an estimate, hide the columns whose values would all be empty/identical */ #spy-section-targets.all-est .targets-col-pct, #spy-section-targets.all-est .targets-col-stat { display: none; } #spiesEnemyTable.all-est td:nth-child(n+5):nth-child(-n+8), #spiesEnemyTable.all-est th:nth-child(n+5):nth-child(-n+8) { display: none; } .targets-ff { font-weight: 600; } /* Pill base — applies to standalone pills inside each .targets-col-pct cell */ .dist-pct { display: inline-block; min-width: 38px; text-align: center; padding: 2px 6px; border-radius: 4px; background: var(--bg-input); font-family: var(--font-sans); font-size: 12px; color: var(--text-secondary); } .dist-pct.dominant { font-weight: 700; } /* Header row mirrors pill spacing so STR/DEF/SPD/DEX columns align perfectly with the pills below */ .targets-dist-head { display: inline-flex; gap: 4px; } .dist-head { min-width: 38px; text-align: center; padding: 2px 6px; font-weight: 700; font-family: var(--font-sans); font-size: 12px; } /* Per-stat colour coding — header labels always coloured; pills only colour when dominant, otherwise grey */ .dist-head.str { color: var(--red); } .dist-head.def { color: var(--blue); } .dist-head.spd { color: var(--positive); } .dist-head.dex { color: var(--gold); } .dist-pct.dominant.str { color: var(--red); background: rgba(255,107,107,0.15); } .dist-pct.dominant.def { color: var(--blue); background: rgba(77,171,247,0.15); } .dist-pct.dominant.spd { color: var(--positive); background: rgba(105,219,124,0.15); } .dist-pct.dominant.dex { color: var(--gold); background: rgba(255,212,59,0.15); } /* Coloured % column headers only. Scoped under #panel-spies to beat the existing #panel-spies th rule's ID specificity. */ #panel-spies th.targets-col-pct.str { color: var(--red); } #panel-spies th.targets-col-pct.def { color: var(--blue); } #panel-spies th.targets-col-pct.spd { color: var(--positive); } #panel-spies th.targets-col-pct.dex { color: var(--gold); } #panel-spies table { font-size: 12px; border-collapse: collapse; width: 100%; } #panel-spies th { padding: 6px 8px; text-align: center; background: var(--bg-dark); color: #fff; font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid var(--border); } #panel-spies th.spy-section-enemy { background: var(--bg-input); color: var(--red); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; border-bottom: 2px solid var(--red); } #panel-spies td { padding: 5px 8px; text-align: center; font-variant-numeric: tabular-nums; background: var(--bg-input); color: var(--text-muted); border-bottom: 1px solid var(--border); } .spy-tables { display: flex; gap: 10px; } .spy-tables .table-wrap { flex: 1; min-width: 0; } @media (max-width: 900px) { .spy-tables { flex-direction: column; } } #panel-spies td.spy-link { width: 20px; padding: 5px 4px; border-bottom: 1px solid var(--border); background: transparent; } #panel-spies td.spy-link a { text-decoration: none; font-size: 11px; opacity: 0.6; transition: opacity 0.15s; } #panel-spies td.spy-link a:hover { opacity: 1; } #panel-spies td.spy-name { text-align: left; font-weight: 600; } #panel-spies td.spy-total { font-weight: 700; } #panel-spies td.spy-t1 { color: #d53e4f !important; } #panel-spies td.spy-t2 { color: #fd6941 !important; } #panel-spies td.spy-t3 { color: #fdac6b !important; } #panel-spies td.spy-t4 { color: #f7db87 !important; } #panel-spies td.spy-t5 { color: #e2f896 !important; } #panel-spies td.spy-t6 { color: #abdea3 !important; } #panel-spies td.spy-t7 { color: #65c2a5 !important; } #panel-spies td.spy-t8 { color: #77b6e1 !important; } .spy-legend { display: flex; flex-wrap: wrap; gap: 2px; margin-bottom: 12px; align-items: center; } .spy-legend-label { font-size: 10px; color: var(--text-muted); white-space: nowrap; margin-right: 6px; font-weight: 600; letter-spacing: 0.02em; } .spy-legend-item { flex: 1; text-align: center; padding: 6px 2px; font-size: 11px; font-weight: 600; color: #111; border-radius: 4px; cursor: pointer; user-select: none; transition: opacity 0.15s; min-width: 0; } .spy-legend-item.off { opacity: 0.25; } @media (max-width: 900px) { .spy-legend { gap: 2px; } .spy-legend-label { flex: 0 0 100%; margin-right: 0; margin-bottom: 4px; } .spy-legend-item { font-size: 9px; padding: 2px 1px; line-height: 1.2; height: 32px; display: flex; align-items: center; justify-content: center; } } .section-header { font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 12px; display: flex; align-items: center; gap: 10px; } .section-header::after { content: ''; flex: 1; height: 1px; background: var(--border); } /* ===== LOADING ===== */ .loading { display: flex; align-items: center; justify-content: center; padding: 60px; color: var(--text-secondary); gap: 12px; } .spinner { width: 20px; height: 20px; border: 2px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ===== ADMIN ===== */ .admin-subnav { display: flex; gap: 4px; padding: 4px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 18px; overflow-x: auto; scrollbar-width: none; } .admin-subnav::-webkit-scrollbar { display: none; } .admin-subnav-tab { padding: 8px 14px; cursor: pointer; color: var(--text-dim); font-size: 12px; font-weight: 500; background: transparent; border: none; border-radius: var(--radius-sm); white-space: nowrap; font-family: inherit; transition: color .12s, background .12s; text-decoration: none; } .admin-subnav-tab:hover { color: var(--text-primary); background: var(--bg-input); } .admin-subnav-tab.active { color: var(--primary); background: var(--primary-soft); } .admin-section { display: none; } .admin-section.active { display: block; } /* Chain Visibility — parent grid defines columns once, each row is a subgrid so cells line up under the header labels without any fixed widths. */ .chain-vis-list { display: grid; grid-template-columns: auto 1fr auto auto auto; /* id · dates · peak · perf · dash */ gap: 6px 14px; align-items: center; width: fit-content; max-width: 100%; font-size: 12px; } .chain-vis-head, .chain-vis-row { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; align-items: center; padding: 0 12px; } .chain-vis-row { padding: 10px 12px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px; } .chain-vis-head { padding-bottom: 2px; } .chain-vis-head > .chain-vis-toggle-label { text-align: center; } .chain-vis-id { font-family: var(--font-mono); color: var(--text-primary); font-weight: 600; } .chain-vis-dates { color: var(--text-secondary); } .chain-vis-peak { color: var(--text-secondary); } .chain-vis-toggle-cell { display: flex; justify-content: center; } .chain-vis-toggle-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.14em; font-weight: 500; white-space: nowrap; } .chain-vis-toggle { position: relative; width: 36px; height: 20px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 999px; cursor: pointer; transition: background 0.15s ease; } .chain-vis-toggle::after { content: ''; position: absolute; top: 1px; left: 1px; width: 16px; height: 16px; border-radius: 50%; background: var(--text-muted); transition: left 0.15s ease, background 0.15s ease; } .chain-vis-toggle.on { background: var(--primary-soft); border-color: var(--primary); } .chain-vis-toggle.on::after { left: 17px; background: var(--primary); } @media (max-width: 768px) { .chain-vis-head > .chain-vis-toggle-label { white-space: normal; line-height: 1.2; } .chain-vis-id { font-size: 8px; } .chain-vis-list { grid-template-columns: auto minmax(80px, 1fr) auto auto auto; } #chainInclusionList { width: 100%; overflow-x: auto; overscroll-behavior-x: contain; } } /* Chain Inclusion intro paragraph — clamped to two lines on mobile with a clickable "more..." (becomes "less..." when expanded). */ .chain-incl-intro { color: var(--text-secondary); font-size: 12px; margin-bottom: 14px; line-height: 1.5; } .chain-incl-intro-more { display: none; } .chain-incl-intro-more::before { content: 'more...'; } .chain-incl-intro.expanded .chain-incl-intro-more::before { content: 'less...'; } @media (max-width: 768px) { .chain-incl-intro { position: relative; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .chain-incl-intro-more { display: inline-block; position: absolute; bottom: 0; right: 0; padding-left: 10px; background: var(--bg-dark); color: var(--primary); cursor: pointer; font-weight: 500; } .chain-incl-intro.expanded { display: block; overflow: visible; -webkit-line-clamp: unset; } .chain-incl-intro.expanded .chain-incl-intro-more { position: static; background: transparent; padding-left: 0; margin-left: 6px; } } .admin-row { display: flex; gap: 12px; align-items: flex-end; margin-bottom: 12px; flex-wrap: wrap; } .admin-field { display: flex; flex-direction: column; gap: 6px; } .admin-field label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.16em; font-weight: 500; } /* ===== CHAIN PERFORMANCE MATRIX ===== */ /* Sticky Name + Count columns; horizontal scroll for chain columns. Two-line chain headers (#id · peak / date range). */ .matrix-wrap { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); overflow: auto; max-height: 75vh; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; } .matrix-wrap::-webkit-scrollbar { width: 8px; height: 8px; } .matrix-wrap::-webkit-scrollbar-track { background: transparent; } .matrix-wrap::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; } .matrix-table { width: auto; border-collapse: separate; border-spacing: 0; font-size: 12px; font-variant-numeric: tabular-nums; } .matrix-table th, .matrix-table td { padding: 8px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; text-align: center; } .matrix-table thead th { background: var(--bg-card); color: var(--text-secondary); font-weight: 600; position: sticky; top: 0; z-index: 2; cursor: default; border-bottom: 1px solid var(--border-strong); padding: 8px 12px; } /* Sticky left columns — Name (col 1) + Chains-participated (col 2) + Total hits (col 3). */ .matrix-table .col-name, .matrix-table .col-count, .matrix-table .col-hits { position: sticky; background: var(--bg-card); z-index: 1; } .matrix-table .col-name { left: 0; min-width: 180px; max-width: 220px; text-align: left; } .matrix-table .col-count { left: 180px; min-width: 80px; text-align: center; } .matrix-table .col-hits { left: 260px; min-width: 80px; text-align: center; } .matrix-table thead .col-name, .matrix-table thead .col-count, .matrix-table thead .col-hits { z-index: 3; } /* Right-edge shadow on the last sticky col so chain cols scroll *behind* it */ .matrix-table .col-hits { box-shadow: 4px 0 6px -4px rgba(0,0,0,0.4); } .matrix-table tbody tr:hover .col-name, .matrix-table tbody tr:hover .col-count, .matrix-table tbody tr:hover .col-hits { background: #161618; } .matrix-table tbody tr:hover td { background: rgba(255,255,255,0.02); } /* Three-line chain column header (id / peak / date range) */ .matrix-chain-hdr { display: flex; flex-direction: column; gap: 2px; align-items: center; line-height: 1.25; } .matrix-chain-id { font-size: 10px; font-weight: 500; color: var(--text-muted); font-family: var(--font-mono); letter-spacing: 0.04em; text-transform: none; } .matrix-chain-peak { font-size: 11px; font-weight: 600; color: var(--text-primary); letter-spacing: 0; text-transform: none; } .matrix-chain-dt { font-size: 10px; color: var(--text-secondary); letter-spacing: 0.02em; text-transform: none; font-weight: 400; } .matrix-chain-live { color: var(--positive); font-weight: 600; } .matrix-cell-zero { color: var(--text-muted); } .matrix-cell-value { color: var(--text-primary); font-weight: 500; } .matrix-name { color: var(--text-primary); font-weight: 500; } /* Sortable column headers — click to sort, second click flips direction */ .matrix-table thead th.sortable { cursor: pointer; user-select: none; } .matrix-table thead th.sortable:hover { color: var(--text-primary); } .matrix-table thead th.sort-active { color: var(--primary); } .matrix-table thead th.sort-active .matrix-chain-id, .matrix-table thead th.sort-active .matrix-chain-peak { color: var(--primary); } .sort-arrow { margin-left: 4px; font-size: 9px; opacity: 0.85; } .matrix-count-chip { display: inline-block; padding: 2px 8px; border-radius: 999px; background: var(--primary-soft); color: var(--primary); font-size: 11px; font-weight: 600; min-width: 22px; } .matrix-count-chip-white { background: rgba(255, 255, 255, 0.10); color: var(--text-primary); } .matrix-count-zero { background: transparent; color: var(--text-muted); } .matrix-empty { padding: 40px 20px; text-align: center; color: var(--text-muted); font-size: 13px; } /* On mobile keep only the Name column sticky so the chain columns have room to scroll horizontally into view; let Name shrink to content. */ @media (max-width: 768px) { .matrix-table .col-name { min-width: 0; max-width: none; width: 1%; } .matrix-table .col-count, .matrix-table .col-hits { position: static; min-width: 0; box-shadow: none; } .matrix-table .col-name { box-shadow: 4px 0 6px -4px rgba(0,0,0,0.4); } } /* Chain Performance intro paragraph — clamped to one line on mobile with a clickable "more..." that toggles the full description. */ .chainperf-intro { color: var(--text-secondary); font-size: 12px; margin-bottom: 14px; line-height: 1.5; } .chainperf-intro-more { display: none; } .chainperf-intro-more::before { content: 'more...'; } .chainperf-intro.expanded .chainperf-intro-more::before { content: 'less...'; } @media (max-width: 768px) { .chainperf-intro { display: flex; align-items: baseline; gap: 6px; } .chainperf-intro-text { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: clip; } .chainperf-intro-more { display: inline; flex-shrink: 0; white-space: nowrap; color: var(--primary); cursor: pointer; font-weight: 500; } .chainperf-intro.expanded { display: block; } .chainperf-intro.expanded .chainperf-intro-text { overflow: visible; white-space: normal; } .chainperf-intro.expanded .chainperf-intro-more { margin-left: 6px; } } /* ===== CHAIN SUMMARY TABLE ===== */ /* Inherits .matrix-table — only one sticky col (Name); the count-col rule is neutralised. */ .summary-table .col-count { position: static; box-shadow: none; } .summary-table thead th { border-bottom: 1px solid var(--border); padding: 10px 12px; } .summary-table thead th.summary-group { font-size: 9px; letter-spacing: 0.14em; color: var(--text-muted); border-bottom: 1px solid var(--border-strong); padding-bottom: 6px; } .summary-table .col-name { min-width: 0; max-width: none; width: 1%; } /* shrink-to-content; matrix-table's 180-220px is wrong for the summary view */ /* Highlight the contributor-counts row */ .summary-cell-strong { color: var(--text-primary); font-weight: 600; } /* Chain header banner — chain id, dates, peak, status pill */ .chain-sum-header { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); flex-wrap: wrap; } .chain-sum-id { font-size: 12px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.01em; } .chain-sum-dates { font-size: 12px; color: var(--text-secondary); } .chain-sum-peak { font-size: 12px; color: var(--text-secondary); padding-left: 14px; border-left: 1px solid var(--border); } .chain-sum-peak b { color: var(--text-secondary); font-weight: 400; } .chain-sum-updated { font-size: 12px; color: var(--text-muted); padding-left: 14px; border-left: 1px solid var(--border); } .chain-sum-status { margin-left: auto; padding: 4px 10px; border-radius: 999px; font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; font-family: var(--font-mono); } .chain-sum-status.live { background: rgba(105, 219, 124, 0.12); color: var(--positive); } .chain-sum-status.ended { background: var(--bg-input); color: var(--text-muted); } /* ===== PAYOUT CARDS ===== */ .payout-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 0; flex: 1; min-width: 260px; overflow: hidden; display: flex; flex-direction: column; --card-accent: var(--primary); --card-accent-tint: rgba(214, 231, 15, 0.04); --card-accent-icon-bg: rgba(214, 231, 15, 0.12); } .payout-card[data-accent="green"] { --card-accent: #d6e70f; --card-accent-tint: rgba(214, 231, 15, 0.04); --card-accent-icon-bg: rgba(214, 231, 15, 0.12); } .payout-card[data-accent="blue"] { --card-accent: var(--blue); --card-accent-tint: rgba(77, 171, 247, 0.05); --card-accent-icon-bg: rgba(77, 171, 247, 0.12); } .payout-card[data-accent="red"] { --card-accent: var(--red); --card-accent-tint: rgba(255, 107, 107, 0.05); --card-accent-icon-bg: rgba(255, 107, 107, 0.12); } .payout-card-strip { height: 2px; background: var(--card-accent); } .payout-card-header { padding: 12px 14px 10px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--border); } .payout-card-icon { width: 28px; height: 28px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; flex-shrink: 0; background: var(--card-accent-icon-bg); color: var(--card-accent); font-family: var(--font-sans); } .payout-card-title-wrap { display: flex; flex-direction: column; min-width: 0; } .payout-card-title { font-size: 12px; font-weight: 600; letter-spacing: 0.02em; color: var(--text-primary); line-height: 1.2; } .payout-card-subtitle { font-size: 10px; color: var(--text-muted); margin-top: 1px; letter-spacing: 0.04em; } .payout-card-body { display: flex; flex-direction: column; padding: 4px 0; flex: 1; } .payout-card-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 14px; gap: 8px; font-size: 12px; } .payout-card-row + .payout-card-row { border-top: 1px solid var(--border); } .payout-card-row:hover { background: rgba(255,255,255,0.015); } .payout-card-row--lead { background: var(--card-accent-tint); } .payout-card-row--lead:hover { background: var(--card-accent-tint); } .payout-card-row-info { display: inline-flex; align-items: center; gap: 8px; min-width: 0; } .payout-card-rank { font-family: var(--font-sans); font-size: 10px; color: var(--text-muted); width: 18px; text-align: right; } .payout-card-row--lead .payout-card-rank { color: var(--primary); } .payout-card-row .name { color: var(--text-primary); font-weight: 500; } .payout-card-row .wars-chip { font-family: var(--font-sans); font-size: 10px; color: var(--text-muted); padding: 2px 6px; background: var(--bg-input); border-radius: 4px; } .payout-card-row .value { font-family: var(--font-sans); font-size: 12px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.01em; } .payout-card-row .value-sub { color: var(--text-muted); font-weight: 500; font-size: 11px; } .payout-card-footer { padding: 10px 14px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; background: rgba(0, 0, 0, 0.20); margin-top: auto; } .payout-card-footer-label { font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; } .payout-card-footer-value { font-family: var(--font-sans); font-size: 12px; font-weight: 600; color: var(--text-secondary); } /* ===== AUTH OVERLAY ===== */ .auth-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--bg-dark); z-index: 9999; display: flex; align-items: center; justify-content: center; } /* Loading-bar mode: triggered by sync head script when cached JWT is valid. */ .auth-loading-bar { display: none; width: 240px; height: 3px; background: rgba(255,255,255,0.06); border-radius: 2px; overflow: hidden; position: relative; } .auth-loading-bar::after { content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 35%; background: var(--primary, #7e4cbc); border-radius: 2px; animation: authLoadSlide 1.1s ease-in-out infinite; } html.auth-loading .auth-card { display: none; } html.auth-loading .auth-loading-bar { display: block; } @keyframes authLoadSlide { 0% { transform: translateX(-100%); } 100% { transform: translateX(370%); } } .auth-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 40px; max-width: 420px; width: 90%; text-align: center; font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; } .auth-title { font-size: 22px; font-weight: 700; color: var(--primary); margin-bottom: 8px; } .auth-subtitle { font-size: 14px; color: var(--text-secondary); margin-bottom: 24px; } .auth-input { width: 100%; padding: 12px 16px; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-primary); font-size: 15px; margin-bottom: 16px; outline: none; font-family: inherit; } .auth-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); } .auth-btn { width: 100%; padding: 12px; background: var(--primary); color: #0b0b0c; font-weight: 700; font-size: 15px; border: none; border-radius: var(--radius-sm); cursor: pointer; font-family: inherit; } .auth-btn:hover { opacity: 0.9; } .auth-btn:disabled { opacity: 0.5; cursor: not-allowed; } .auth-error { color: var(--red); font-size: 13px; margin-top: 12px; min-height: 20px; } .auth-privacy { margin-top: 20px; font-size: 12px; color: var(--text-secondary); line-height: 1.5; } .log-filter-row { display: contents; } #logCount { min-width: 160px; text-align: right; } #attackLogTable { table-layout: fixed; } #logFieldWar { min-width: 260px; } .field-mine input[type="checkbox"] { width: 18px; height: 18px; margin: 0 8px; } /* ===== RESPONSIVE ===== */ @media (max-width: 768px) { .desktop-only { display: none; } .header { padding: 12px 14px; gap: 10px; } .header-eyebrow { display: none; } .header-title { font-size: 14px; } .nav { padding: 0 8px; } .nav-tab { padding: 13px 14px; font-size: 12.5px; } .controls { padding: 12px 14px; } /* Nav-aligned bar at 768px: .nav padding-left 8 + .nav-tab padding-left 14 = 22 */ .controls.nav-aligned { padding-left: 22px; } .content { padding: 16px 14px; } .admin-subnav-tab { font-size: 11px; padding: 7px 10px; } /* Summary: hide leftmost rank column on mobile (saves space, name column becomes the sticky anchor) */ #summaryTable td:nth-child(1), #summaryTable th:nth-child(1) { display: none; } /* War-plans tracking buckets: squeeze all 5 onto one row on mobile, lists drop below as before */ #rosterTrackingBuckets { gap: 6px !important; } #rosterTrackingBuckets > div { min-width: 0 !important; flex: 1; } #rosterTrackingBuckets > div > div:first-child { font-size: 18px !important; } #rosterTrackingBuckets > div > div:last-child { font-size: 9px !important; letter-spacing: 0.04em !important; } /* Stack emoji on its own line, label below — keeps each line centred under the count */ #rosterTrackingBuckets .bucket-emoji, #rosterTrackingBuckets .bucket-label { display: block !important; text-align: center; } #rosterTrackingBuckets .bucket-emoji { font-size: 14px !important; line-height: 1 !important; } #rosterTrackingBuckets .bucket-label { margin-top: 4px !important; } /* Posted / Last poll meta row: keep on one line on mobile, swap dot for vertical bar */ #rosterTrackingMeta { flex-wrap: nowrap !important; gap: 6px !important; font-size: clamp(8px, 2.5vw, 11px) !important; white-space: nowrap; } #rosterTrackingMeta > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; } #rosterTrackingMeta .meta-sep-dot { display: none; } #rosterTrackingMeta .meta-sep-bar { display: inline; } /* Personal payout note: drop the 10px left margin on mobile so it aligns with the scorecards / table; smaller font; match scorecard's 18px bottom gap */ #payoutPersonalNote { margin-left: 0 !important; margin-bottom: 18px !important; font-size: 11px !important; } /* KPI: horizontal scroll showing 2.5 cards */ .kpi-row { display: flex; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; gap: 10px; margin-left: -14px; margin-right: -14px; padding: 0 14px 4px; scroll-padding-left: 14px; scrollbar-width: none; } .kpi-row::-webkit-scrollbar { display: none; } .kpi-row > .kpi { flex: 0 0 40%; scroll-snap-align: start; padding: 10px 12px; } .kpi-label { font-size: 9px; letter-spacing: 0.12em; } .kpi-value { font-size: 18px; margin-top: 4px; } .kpi-dual { gap: 10px; margin-top: 4px; } .kpi-dual-value { font-size: 18px; } .kpi-dual-sub { font-size: 8px; } .kpi-sub { font-size: 10px; margin-top: 3px; } #summaryTable td:nth-child(3), #summaryTable th:nth-child(3) { min-width: 110px; max-width: 110px; } #attackLogTable { table-layout: auto; } #attackLogTable th { width: auto !important; } .table-wrap table { font-size: 11px; } .table-wrap td { padding: 8px 10px; } .table-wrap th { padding: 8px 10px; } /* Attack log filters — 3-row mobile layout */ #logFieldWar { min-width: 0; width: 100%; } #logFieldWar select { width: 100%; } #logFilters { flex-direction: column !important; gap: 8px !important; } .log-filter-row { display: flex !important; gap: 8px; width: 100%; align-items: flex-end; } .log-filter-row > .field { min-width: 0 !important; } .log-filter-row > .field select { width: 100%; } #logFilters > div[style*="flex:1"] { display: none; } #logCount { min-width: 0; text-align: right; align-self: flex-end; } .field-mine input[type="checkbox"] { width: 18px; height: 18px; margin: 0 8px; } } @media (max-width: 480px) { .nav-tab { padding: 11px 11px; font-size: 11.5px; } /* Nav-aligned bar at 480px: .nav padding-left 8 + .nav-tab padding-left 11 = 19 */ .controls.nav-aligned { padding-left: 19px; } } /* ===== CONTEXT MENU ===== */ .ctx-menu { display: none; position: fixed; z-index: 9999; background: var(--bg-input); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 4px 0; min-width: 160px; box-shadow: 0 8px 24px rgba(0,0,0,0.5); } .ctx-menu.show { display: block; } .ctx-menu-item { padding: 7px 14px; cursor: pointer; font-size: 13px; color: var(--text-primary); white-space: nowrap; } .ctx-menu-item:hover { background: var(--bg-card-hover); } .ctx-menu-item.danger { color: var(--red); } .ctx-menu-item.danger:hover { background: rgba(255,107,107,0.08); } .ctx-menu-item.success { color: var(--positive); } .ctx-menu-item.success:hover { background: rgba(105,219,124,0.08); } /* ===== VOID WAR FILTER DROPDOWN ===== */ .void-war-dropdown { display: none; position: absolute; z-index: 100; background: var(--bg-input); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 4px 0; min-width: 180px; box-shadow: 0 8px 24px rgba(0,0,0,0.5); } .void-war-dropdown.show { display: block; } .void-war-dropdown-item { padding: 7px 14px; cursor: pointer; font-size: 12px; color: var(--text-primary); white-space: nowrap; } .void-war-dropdown-item:hover { background: var(--bg-card-hover); } .void-war-dropdown-item.active { color: var(--primary); font-weight: 600; } /* Toast notifications */ .toast-container { position:fixed;top:0;left:50%;transform:translateX(-50%);z-index:10000;display:flex;flex-direction:column;align-items:center;gap:8px;padding-top:16px;pointer-events:none; } .toast { pointer-events:auto;padding:12px 24px;border-radius:var(--radius);font-size:13px;font-family:inherit;font-weight:500;color:var(--text-primary);background:var(--bg-card);border:1px solid var(--border);box-shadow:0 8px 24px rgba(0,0,0,0.4);transform:translateY(-20px);opacity:0;transition:transform .3s ease,opacity .3s ease;max-width:420px;text-align:center; } .toast.show { transform:translateY(0);opacity:1; } .toast.toast-success { border-color:var(--primary);color:var(--primary); } .toast.toast-error { border-color:var(--red);color:var(--red); } /* Hover tooltip for gained column */ td[data-tooltip] { position:relative;cursor:default; } td[data-tooltip]::after { content:attr(data-tooltip);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);background:var(--bg-dark);color:var(--text-primary);font-size:11px;font-weight:600;padding:4px 8px;border-radius:var(--radius);white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s;border:1px solid var(--border);z-index:50; } td[data-tooltip]:hover::after { opacity:1; } /* ===== ACTIVITY HEATMAP ===== */ .act-controls { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; } /* Sort + Filter live in a single inner row so we can force them onto the same line on mobile (otherwise each wraps independently). Desktop: just a flex group with the same gap as the parent, so visually unchanged. */ .act-input-row { display: flex; gap: 12px; align-items: center; } @media (max-width: 768px) { .act-input-row { flex: 1 1 100%; } /* !important beats the inline min-width values on the sort select and the .search-input wrapper, which otherwise refuse to shrink and overflow the viewport on narrow screens. */ .act-input-row > #activityVizSort, .act-input-row > .search-input { flex: 1; min-width: 0 !important; } .act-input-row > #activityVizSort { font-size: 11px; } .act-input-row > .search-input input { font-size: 11px; } /* Meta line takes its own full-width row on mobile, naturally aligning to the start (left) of the controls container instead of getting pushed right by the spacer like on desktop. */ #activityVizMeta { flex: 1 1 100%; } /* Hide the empty desktop-spacer div on mobile — otherwise it counts as a flex item and the parent's row-gap applies twice (above and below it), doubling the visible top margin above the meta line. */ .act-controls > div:empty { display: none; } } /* Legend: two horizontal rows (Active above, Inactive below), each with a small section header and 7 inline swatch+label pairs. Horizontal scroll on narrow viewports — no wrapping, no border, no justify-space. Scrollbar hidden in all browsers — legend is short and the bar would just sit on top of swatches on mobile where it's most visible. */ .act-legend { display: flex; flex-direction: column; margin-bottom: 12px; overflow-x: auto; scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE/Edge legacy */ } .act-legend::-webkit-scrollbar { display: none; } /* WebKit */ .act-legend-row + .act-legend-row { margin-top: 16px; } .act-legend-header { font-size: 9px; text-transform: uppercase; letter-spacing: 0.8px; color: #888; margin-bottom: 6px; } .act-legend-pairs { display: flex; gap: 16px; flex-wrap: nowrap; } .act-legend-pair { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .act-legend-swatch { width: 12px; height: 12px; border-radius: 1px; flex-shrink: 0; } .act-legend-label { font-size: 10px; white-space: nowrap; } .act-legend-row.active .act-legend-label { color: #e6e6e6; } .act-legend-row.inactive .act-legend-label { color: #adb5bd; } .act-viewport { background: var(--bg-card); border: 2px solid var(--border); border-radius: 6px; overflow: auto; max-height: calc(100vh - 280px); } .act-viewport-wrap { position: relative; } .act-empty { padding: 40px; text-align: center; color: var(--text-muted); font-size: 13px; } .act-grid { display: inline-block; min-width: 100%; position: relative; /* anchor for absolute war divider */ } .act-row { display: flex; align-items: center; height: 26px; border-bottom: 1px solid rgba(46,46,51,0.4); } .act-row:last-child { border-bottom: none; } .act-name { position: sticky; left: 0; z-index: 2; width: 160px; min-width: 160px; max-width: 160px; padding: 0 10px; font-size: 12px; background: var(--bg-card); color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-right: 1px solid var(--border); /* Fill the full row height so the sticky background fully masks cells passing behind it during horizontal scroll. Without this, the row's align-items:center sizes act-name to text height (~16px) and the ~5px gap above/below leaks the cell colours through. */ align-self: stretch; display: flex; align-items: center; } .act-cells { display: flex; align-items: center; padding: 0 8px; flex-shrink: 0; } .act-cell { display: inline-block; position: relative; /* anchor for chain marker pseudo-elements */ width: 8px; height: 18px; margin: 0 1px 0 0; background: transparent; box-sizing: border-box; cursor: default; } /* Chain markers: when a member stays in Hospital across consecutive polls with the same hosp_until, the cells form a "chain" (one attack, ongoing recovery). Origin cell shows a small white dot; continuing cells get a horizontal line passing through their middle. This separates "got hit once, waited it out" from "got hit repeatedly". */ .act-cell.chain::before { content: ''; position: absolute; top: 50%; left: 0; width: calc(100% + 1px); /* bridges the 1px right margin to next cell */ height: 1px; background: rgba(255,255,255,0.55); transform: translateY(-50%); pointer-events: none; } /* Origin: line starts at center (under the dot) */ .act-cell.chain-origin::before { left: 50%; width: calc(50% + 1px); } /* Last cell of chain: line stops at right edge (no bridge to next) */ .act-cell.chain-end::before { width: 100%; } /* Single-cell chain (origin + end): no line at all, just the dot */ .act-cell.chain-origin.chain-end::before { display: none; } /* Origin dot (hospital chain default) */ .act-cell.chain-origin::after { content: ''; position: absolute; top: 50%; left: 50%; width: 4px; height: 4px; background: rgba(255,255,255,0.85); border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; } /* Travel chain — overrides the origin dot with direction-aware arrowheads. 'to' (coming home, ←) puts the arrowhead at the origin (start cell). 'from' (leaving Torn, →) puts the arrowhead at the chain end. */ /* Travel-to: left-pointing arrowhead at origin, replacing the dot */ .act-cell.chain-origin.chain-travel.chain-to::after { background: transparent; border-radius: 0; width: 0; height: 0; border-style: solid; border-width: 3px 5px 3px 0; border-color: transparent rgba(255,255,255,0.9) transparent transparent; } /* Travel-from: hide the origin dot (arrow lives at end instead) */ .act-cell.chain-origin.chain-travel.chain-from::after { display: none; } /* Travel-from: right-pointing arrowhead at end cell */ .act-cell.chain-end.chain-travel.chain-from::after { content: ''; position: absolute; top: 50%; right: 0; width: 0; height: 0; border-style: solid; border-width: 3px 0 3px 5px; border-color: transparent transparent transparent rgba(255,255,255,0.9); transform: translateY(-50%); pointer-events: none; } /* Travel with unknown direction (old data, no description): hide origin dot so we just show the line without an inappropriate dot. */ .act-cell.chain-origin.chain-travel:not(.chain-to):not(.chain-from)::after { display: none; } .act-cell.gap { background: transparent; border: 1px dashed var(--border); } /* 7-bucket palette: each bucket has an ACTIVE (full saturation) and INACTIVE (~50% lightness drop, hue preserved) variant. The Okay-inactive case is the exception — light grey rather than dark sage — because "AFK and fine" is the most visually neutral state and shouldn't compete with the meaningful colours. */ .act-cell.bucket-okay-active { background-color: #7aa843; } .act-cell.bucket-okay-inactive { background-color: #b0b0b0; } .act-cell.bucket-shortsafe-active { background-color: #d9a300; } .act-cell.bucket-shortsafe-inactive { background-color: #8a6a14; } .act-cell.bucket-sed-active { background-color: #c92a8a; } .act-cell.bucket-sed-inactive { background-color: #7a1c52; } .act-cell.bucket-od-active { background-color: #8a4ac9; } .act-cell.bucket-od-inactive { background-color: #4a2a7a; } .act-cell.bucket-merc-active { background-color: #2ab8a8; } .act-cell.bucket-merc-inactive { background-color: #1a6e64; } .act-cell.bucket-external-active { background-color: #4a5fd9; } .act-cell.bucket-external-inactive { background-color: #1f2a78; } .act-cell.bucket-travel-active { background-color: #4aafd9; } .act-cell.bucket-travel-inactive { background-color: #1f5e7c; } .act-cell.bucket-enemy-active { background-color: #c92a2a; } .act-cell.bucket-enemy-inactive { background-color: #7a2020; } /* Time-axis structure: BAND row (PRE-WAR / WAR labels), HOUR row (offset labels like −1h, 0h, 1h…). Both stick to the top of the viewport when scrolling vertically; both scroll horizontally with cells. */ .act-band-row { display: flex; align-items: center; height: 16px; position: sticky; top: 0; z-index: 4; background: var(--bg-card); } .act-band-row .act-name { background: var(--bg-card); border-right: 1px solid var(--border); } .act-band-cells { display: flex; padding: 0 8px; background: var(--bg-card); } .act-band { font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em; color: #888; line-height: 16px; text-align: center; box-sizing: border-box; background: var(--bg-card); } .act-hour-row { display: flex; align-items: center; height: 18px; position: sticky; top: 16px; z-index: 3; background: var(--bg-card); border-bottom: 1px solid rgba(46,46,51,0.4); } .act-hour-row .act-name { background: var(--bg-card); border-right: 1px solid var(--border); border-bottom: 1px solid rgba(46,46,51,0.4); } .act-hour-cells { display: flex; align-items: center; padding: 0 8px; background: var(--bg-card); } .act-hour-slot { width: 9px; flex-shrink: 0; position: relative; height: 18px; background: var(--bg-card); } .act-hour-slot > span { position: absolute; top: 3px; left: -2px; font-size: 9px; color: #adb5bd; font-family: var(--font-mono); white-space: nowrap; } /* Full-height vertical dashed divider at war_start. Position is set inline via JS (left = name-col + cells-padding + pre_war_count * 9px). Spans the full grid height. */ .act-war-divider { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px dashed #666; pointer-events: none; z-index: 5; /* draws over band/hour rows for continuous line */ } /* Custom tooltip for cells — replaces native title attribute. Single shared element on body, click-toggles for mobile + hover for desktop, multi-line content via white-space: pre-line. */ .act-tooltip { position: fixed; background: var(--bg-dark); color: var(--text-primary); font-size: 11px; padding: 8px 10px; border-radius: var(--radius); border: 1px solid var(--border); pointer-events: none; z-index: 1000; max-width: 320px; white-space: pre-line; line-height: 1.5; box-shadow: 0 4px 12px rgba(0,0,0,0.35); display: none; } .act-tooltip.visible { display: block; } .act-mobile-msg { display: none; padding: 30px 18px; text-align: center; color: var(--text-secondary); font-size: 13px; line-height: 1.6; background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px; } @media (max-width: 768px) { .act-viewport { max-height: calc(100vh - 320px); overscroll-behavior: none; } .act-name { width: 110px; min-width: 110px; max-width: 110px; font-size: 11px; } .act-band-row { top: 0; height: 19px; padding-top: 2px; border-top: 1px solid var(--border); } /* 1px overlap with band-row's bottom — masks the sticky-to-sticky seam. */ .act-hour-row { top: 18px; } /* Mask painted over the viewport's top edge from the wrapper (outside the scroll/clip context). */ .act-viewport-wrap::before { content: ''; position: absolute; top: 1px; left: 1px; right: 1px; height: 3px; background: var(--bg-card); z-index: 100; pointer-events: none; border-top-left-radius: 5px; border-top-right-radius: 5px; } }