* { margin: 0; padding: 0; box-sizing: border-box; } :root { color-scheme: only dark; --primary: #7e4cbc; --primary-dim: #6a3fa3; --primary-soft: rgba(126, 76, 188, 0.12); --bg-dark: #0d0d0d; --bg-card: #161618; --bg-card-hover: #1D1D20; --bg-input: #242428; --border: #2E2E33; --text-primary: #F1F3F5; --text-secondary: #ADB5BD; --text-muted: #495057; --text-dim: #7a7a82; --red: #FF6B6B; --teal: #20C997; --gold: #FFD43B; --positive: #69DB7C; --radius: 8px; --radius-sm: 6px; --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 + settings picker). data-theme is set on pre-paint. */ html[data-theme="purple"] { --primary:#7e4cbc; --primary-dim:#6a3fa3; --primary-soft:rgba(126,76,188,0.12); } html[data-theme="blue"] { --primary:#2e60cf; --primary-dim:#2752b0; --primary-soft:rgba(46,96,207,0.12); } html[data-theme="red"] { --primary:#bc4f48; --primary-dim:#a3433d; --primary-soft:rgba(188,79,72,0.12); } html[data-theme="green"] { --primary:#31a032; --primary-dim:#298a2a; --primary-soft:rgba(49,160,50,0.12); } body { font-family: var(--font-sans); background: var(--bg-dark); color: var(--text-primary); min-height: 100vh; } /* Navy theme variant — shared key with attacks dashboard */ body.theme-navy { --bg-dark: #08111f; --bg-card: #0c1828; --bg-card-hover: #122036; --bg-input: #182846; --border: #1e2e4e; } /* ===== 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; object-fit: contain; cursor: pointer; } /* 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; } /* ===== 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-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; } .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 ===== */ .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-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; user-select: none; text-decoration: none; } .nav-tab:hover { color: var(--text-primary); } .nav-tab.active { color: var(--primary); border-bottom-color: var(--primary); } .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); } /* ===== CONTROLS ===== */ .controls { padding: 14px 24px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; border-bottom: 1px solid var(--border); background: var(--bg-dark); } /* Controls bar hidden — Beyond doesn't currently surface anything here. !important overrides the login flow's `appControls.style.display = 'flex'` JS. */ #appControls { display: none !important; } /* Eyebrow label inside the controls bar. Same visual as attacks' .active-war-eyebrow (font 10px, ls 0.18em, weight 600) but neutrally named so it reads cleanly in a crimes context. If we later standardise across dashboards, this name (or a generic alias) is a candidate. */ .controls-eyebrow { font-size: 10px; letter-spacing: 0.18em; color: var(--text-secondary); text-transform: uppercase; font-weight: 600; } .control-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.16em; font-weight: 500; } select, input[type="text"], input[type="number"], input[type="date"] { 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); } /* ===== CONTENT ===== */ .content { padding: 20px 24px; } .panel { display: none; } .panel.active { display: block; } /* ===== KPI SCORECARDS — mirrors attacks/competitions ===== */ /* Crimes uses 5 cards (one more than the 4-card pattern in attacks). */ .kpi-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 12px; } .kpi { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; display: flex; flex-direction: column; } .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; color: var(--text-primary); margin-top: 4px; } .kpi-sub { font-size: 11px; color: var(--text-dim); margin-top: auto; padding-top: 4px; } @media (max-width: 768px) { .nav-tab { padding: 13px 14px; font-size: 12.5px; } .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%; /* ~2.5 cards visible — hints at more to scroll */ scroll-snap-align: start; padding: 10px 12px; } .kpi-label { font-size: 9px; letter-spacing: 0.12em; } .kpi-value { font-size: 18px; margin-top: 4px; } } @media (max-width: 480px) { .nav-tab { padding: 11px 11px; font-size: 11.5px; } } /* ===== TABLE ===== */ .table-wrap { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } table { width: 100%; border-collapse: collapse; font-size: 13px; } thead { background: var(--bg-card-hover); position: sticky; top: 0; z-index: 1; } th { padding: 10px 14px; text-align: left; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); border-bottom: 1px solid var(--border); white-space: nowrap; } th.num { text-align: right; } td { padding: 10px 14px; border-bottom: 1px solid var(--border); color: var(--text-primary); } td.num { text-align: right; font-family: var(--font-mono); } tr:last-child td { border-bottom: none; } tr:hover td { background: var(--bg-card-hover); } .empty-state { padding: 60px 20px; text-align: center; color: var(--text-muted); font-size: 14px; } /* ===== PAYOUT HISTORY TABLE — column sizing & mobile responsiveness ===== */ /* Fixed layout with proportional widths so columns spread evenly across the available width on wide desktops, instead of dumping all leftover space into one column. Wrapper allows horizontal scroll on very narrow viewports. */ #panel-payouts .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } #panel-payouts table { min-width: 640px; table-layout: fixed; } #panel-payouts th, #panel-payouts td { width: 20%; } /* equal columns */ #panel-payouts td:nth-child(1), #panel-payouts td:nth-child(2), #panel-payouts td:nth-child(4), #panel-payouts td:nth-child(5) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #panel-payouts td:nth-child(3) { line-height: 1.35; } /* crime: only multi-word col */ #panel-payouts td:nth-child(5) { color: var(--text-secondary); } /* % — secondary to $ amount */ #panel-payouts tbody td { padding: 12px 16px; } /* a touch more breathing room */ #panel-payouts .paid-short { display: none; } /* desktop: full date + time */ /* Filter row spacing (desktop). Moved off inline so mobile @media can override. */ #payoutMemberRow { gap: 12px; flex-wrap: wrap; } #payoutMemberRow #memberSelect { width: 240px; } #payoutMemberRow #payoutPeriodSelect { width: 160px; } @media (max-width: 768px) { /* Table sizes to the width its content actually needs (each column = its natural max-content width). No column is forced to absorb slack, and if the total exceeds viewport, the wrapper scrolls horizontally. */ #panel-payouts table { font-size: 12px; table-layout: auto; width: max-content; min-width: 0; } #panel-payouts th, #panel-payouts tbody td { padding: 8px 10px; width: auto; } #panel-payouts .paid-full { display: none; } #panel-payouts .paid-short { display: inline; } /* mobile: "21 May 26" */ /* Personal view: Member column is redundant (it's always you), so hide it on mobile to save space. */ #panel-payouts.member-view th:nth-child(2), #panel-payouts.member-view td:nth-child(2) { display: none; } /* Filter row: Member + Period selects share the row at half-width each. If one is hidden (non-admin), the other takes the full row. Use ID+ID specificity to override the equally-specific desktop widths above. */ #payoutMemberRow { flex-wrap: nowrap; gap: 12px; } #payoutMemberRow > div { flex: 1 1 0; min-width: 0; } #payoutMemberRow #memberSelect, #payoutMemberRow #payoutPeriodSelect { width: 100%; min-width: 0; } } /* ============================================================ LOGISTICS — Refined direction (rfn-* prefix) Visual refresh per claude design handoff. Reuses existing tokens (--primary, --bg-card, --border, etc.) — no new tokens. ============================================================ */ /* Density modifiers (set on a parent wrapper, default compact) */ .rfn-root { --pad-card: 8px; --gap-card: 6px; --row-gap: 8px; } .rfn-root.density-comfortable { --pad-card: 12px; --gap-card: 10px; --row-gap: 12px; } .rfn-root.density-spacious { --pad-card: 18px; --gap-card: 14px; --row-gap: 16px; } /* KPI strip */ .rfn-kpi-wrap { margin-bottom: 12px; } .rfn-kpi-row.main { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; } .rfn-kpi-row.scopes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 8px; } .rfn-kpi { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 14px; display: flex; flex-direction: column; cursor: pointer; user-select: none; transition: opacity .18s, border-color .18s, background .18s; } .rfn-kpi:hover { background: var(--bg-card-hover); } .rfn-kpi-label { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-secondary); font-weight: 500; } .kpi-label-short { display: none; } /* mobile-only label swap (e.g. "Members not in OC" → "Not in OC") */ .rfn-kpi-value { font-size: 24px; font-weight: 600; line-height: 1.1; color: var(--text-primary); margin-top: 4px; font-family: var(--font-sans); } .rfn-kpi-sub { font-size: 11px; color: var(--text-dim); margin-top: 2px; } .rfn-kpi.mut { opacity: 0.32; } .rfn-kpi.mut:hover { opacity: 0.6; } .rfn-kpi.items.alert { border-color: #d93535; } .rfn-kpi.items.alert .rfn-kpi-label, .rfn-kpi.items.alert .rfn-kpi-value { color: #ff6b6b; } .rfn-kpi.items.sel { border-color: #ff6b6b; } .rfn-kpi.belowcpr.alert { border-color: #e8a04b; } .rfn-kpi.belowcpr.alert .rfn-kpi-label, .rfn-kpi.belowcpr.alert .rfn-kpi-value { color: #e8a04b; } .rfn-kpi.belowcpr.sel { border-color: #e8a04b; } .rfn-kpi.planning.sel { border-color: #4faaff; } .rfn-kpi.recruiting.sel { border-color: #A78BFA; } .rfn-kpi.pending.sel { border-color: #50c850; } .rfn-kpi.members.sel { border-color: var(--text-primary); } .rfn-kpi.scope.sel { border-color: var(--primary); } .rfn-scopes-toggle { display: flex; margin-top: 8px; } .rfn-scopes-toggle button { background: none; border: none; color: var(--text-secondary); font-size: 12px; font-weight: 600; cursor: pointer; padding: 4px 0; display: inline-flex; align-items: center; gap: 6px; font-family: inherit; } .rfn-scopes-toggle button:hover { color: var(--text-primary); } .rfn-scopes-toggle button.open svg { transform: rotate(180deg); } .rfn-scopes-toggle button svg { transition: transform .2s; } /* Section headers */ .rfn-section-title { display: flex; align-items: center; gap: 10px; margin: 22px 0 10px; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-secondary); } .rfn-section-title::after { content:''; flex:1; height:1px; background: var(--border); } .rfn-section-count { font-family: var(--font-mono); font-size: 10px; background: var(--bg-card); border: 1px solid var(--border); padding: 2px 6px; border-radius: 4px; color: var(--text-primary); } /* Crime card */ .rfn-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 8px; overflow: hidden; display: flex; } .rfn-card:hover { border-color: #38383f; } /* Countdown rail — fixed width so every card aligns regardless of whether the countdown contains a day prefix. */ .rfn-rail { flex: 0 0 130px; width: 130px; padding: 12px 10px; background: rgba(255,255,255,0.015); border-right: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .rfn-rail-time { font-family: var(--font-mono); font-size: 18px; font-weight: 700; letter-spacing: 0.02em; color: var(--primary); line-height: 1.15; } .rfn-rail-time.recruiting { color: #A78BFA; } .rfn-rail-time.planning { color: #4faaff; } .rfn-rail-time.overdue { color: #ff6b6b; } .rfn-rail-time.static { color: var(--text-secondary); font-size: 13px; } .rfn-rail-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-dim); margin-top: 4px; } /* Card body (right of rail) */ .rfn-body { flex: 1; min-width: 0; display: flex; flex-direction: column; } .rfn-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px 8px; border-bottom: 1px dashed #232327; flex-wrap: wrap; } .rfn-head-left { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; } .rfn-head-right { display: flex; align-items: center; gap: 12px; margin-left: auto; } /* New 3-group head layout (title / meta / stats) — on desktop they sit inline like before; on mobile, title takes full row 1 and meta+stats share row 2 (meta left, stats right). */ .rfn-head-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; } .rfn-head-meta { display: flex; align-items: center; gap: 10px; } .rfn-head-stats { display: flex; align-items: center; gap: 12px; margin-left: auto; } .rfn-name { font-size: 16px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.005em; margin: 0; } .rfn-badge { font-size: 9.5px; padding: 3px 7px; border-radius: 3px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; font-family: var(--font-mono); } .rfn-badge.recruiting { background: rgba(167,139,250,0.13); color: #A78BFA; } .rfn-badge.planning { background: rgba(79,170,255,0.13); color: #4faaff; } .rfn-badge.successful { background: rgba(105,219,124,0.13); color: #69DB7C; } .rfn-scope-pill { font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary); padding: 1px 7px; border: 1px solid var(--border); border-radius: 3px; letter-spacing: 0.04em; } .rfn-id { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); letter-spacing: 0.04em; } .rfn-items-flag { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: #ff6b6b; font-weight: 500; font-family: var(--font-mono); } .rfn-fill { display: flex; align-items: center; gap: 8px; } .rfn-fill-bar { display: flex; gap: 2px; } .rfn-fill-seg { width: 14px; height: 6px; border-radius: 2px; background: var(--bg-input); border: 1px solid #232327; } .rfn-fill-seg.on { background: var(--primary); border-color: var(--primary); } .rfn-fill-text { font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary); min-width: 28px; text-align: right; } .rfn-link { color: var(--text-dim); padding: 4px; border-radius: 4px; display: inline-flex; align-items: center; text-decoration: none; } .rfn-link:hover { color: var(--text-primary); background: rgba(255,255,255,0.04); } /* Slot tiles */ .rfn-slots { display: flex; gap: var(--gap-card); padding: 10px 14px 12px; flex-wrap: wrap; } .rfn-slot { flex: 1 1 0; min-width: 130px; background: rgba(255,255,255,0.02); border: 1px solid #232327; border-radius: 5px; padding: var(--pad-card) 10px; display: flex; flex-direction: column; gap: 3px; } .rfn-slot.open { border-color: rgba(105,219,124,0.4); background: rgba(105,219,124,0.05); } .rfn-slot.missing-item { border-color: rgba(217,53,53,0.4); } .rfn-slot-head { display: flex; align-items: baseline; justify-content: space-between; gap: 4px; } .rfn-slot-role { font-size: 11px; font-weight: 600; color: var(--text-primary); letter-spacing: 0.04em; text-transform: uppercase; } .rfn-slot-cpr { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: #69DB7C; } .rfn-slot-cpr.low { color: #ff6b6b; } .rfn-slot-member { font-size: 12.5px; } .rfn-slot-member a { color: var(--text-primary); text-decoration: none; font-weight: 500; } .rfn-slot-member a:hover { text-decoration: underline; } .rfn-slot-member.open { color: #69DB7C; font-weight: 700; letter-spacing: 0.04em; font-size: 12px; } .rfn-slot-item { font-family: var(--font-mono); font-size: 10.5px; display: flex; align-items: center; gap: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rfn-slot-item.has { color: #69DB7C; } .rfn-slot-item.missing { color: #ff6b6b; font-weight: 600; } .rfn-slot-item.muted { color: var(--text-dim); } .rfn-slot-item.placeholder { color: var(--text-muted); font-style: italic; } .rfn-slot-weight { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); letter-spacing: 0.04em; margin-top: 2px; padding-top: 4px; border-top: 1px dashed #232327; } /* Crime card blocker line (shown when an OC is ready but stuck) */ .rfn-blockers { display: flex; align-items: center; gap: 8px; padding: 8px 14px; background: rgba(255,107,107,0.06); border-top: 1px dashed rgba(255,107,107,0.25); font-size: 12px; color: #ff6b6b; flex-wrap: wrap; } .rfn-blockers-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; } .rfn-blocker-chip { background: rgba(255,107,107,0.10); border: 1px solid rgba(255,107,107,0.35); padding: 2px 7px; border-radius: 3px; color: var(--text-primary); text-decoration: none; font-size: 12px; display: inline-flex; align-items: center; gap: 6px; } .rfn-blocker-chip:hover { border-color: rgba(255,107,107,0.7); } .rfn-blocker-chip-state { font-family: var(--font-mono); font-size: 10px; color: #ff6b6b; letter-spacing: 0.04em; } .rfn-blocker-chip-dur { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); } /* Blockers sub-tab — combined delays + idle stretches log */ .blockers-controls { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; align-items: flex-end; } .blockers-filter { display: flex; flex-direction: column; gap: 6px; } /* label & select intentionally inherit .control-label + global select styling so this tab matches Payout History / History */ .blockers-table-wrap { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .blockers-table { width: 100%; border-collapse: collapse; font-size: 13px; } .blockers-table th { background: var(--bg-card-hover); padding: 10px 14px; text-align: left; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); border-bottom: 1px solid var(--border); white-space: nowrap; } .blockers-table th.num { text-align: center; } .blockers-table td { padding: 10px 14px; border-bottom: 1px solid var(--border); color: var(--text-primary); } .blockers-table td.num { text-align: center; font-family: var(--font-mono); } .blockers-table td.date { font-family: var(--font-mono); font-size: 12px; color: var(--text-secondary); } .blockers-table tr:last-child td { border-bottom: none; } .blockers-table tr:hover td { background: var(--bg-card-hover); } .blockers-table a { color: var(--text-primary); text-decoration: none; font-weight: 500; } .blockers-table a:hover { text-decoration: underline; } .blockers-type-pill { display: inline-block; font-size: 10px; padding: 2px 7px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; border-radius: 3px; font-family: var(--font-mono); } .blockers-type-pill.delay { background: rgba(255,107,107,0.13); color: #ff6b6b; } .blockers-type-pill.idle { background: rgba(232,160,75,0.13); color: #e8a04b; } .blockers-type-pill.missing-item { background: rgba(173,181,189,0.13); color: var(--text-secondary); } .blockers-current-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #ff6b6b; /* default red */ margin-right: 4px; vertical-align: middle; } .blockers-current-dot.delay { background: #ff6b6b; } /* delayed crime — red */ .blockers-current-dot.idle { background: #e8a04b; } /* delayed join — orange */ .blockers-current-dot.missing-item { background: var(--text-secondary); } /* missing item — grey dot ONLY when ongoing */ /* Meta row that sits directly above the table — admin "Showing X of Y" on the left, legend pills on the right. Wraps to stack on narrow viewports. */ .blockers-table-meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; } .blockers-legend { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; } @media (max-width: 768px) { .blockers-legend { flex-direction: column; align-items: flex-end; } } .blockers-legend-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; font-family: var(--font-mono); } .blockers-legend-pill.delay { background: rgba(255,107,107,0.13); color: #ff6b6b; } .blockers-legend-pill.idle { background: rgba(232,160,75,0.13); color: #e8a04b; } .blockers-legend-pill.missing-item { background: rgba(173,181,189,0.13); color: var(--text-secondary); } .blockers-legend-pill .blockers-current-dot { margin-right: 0; } /* Right-click context menu for exclusion */ .blockers-ctxmenu { position: fixed; z-index: 9999; background: var(--bg-card); border: 1px solid var(--border); border-radius: 4px; box-shadow: 0 6px 18px rgba(0,0,0,0.5); padding: 4px 0; min-width: 180px; display: none; } .blockers-ctxmenu.open { display: block; } .blockers-ctxmenu-item { padding: 8px 14px; cursor: pointer; font-size: 13px; color: var(--text-primary); user-select: none; } .blockers-ctxmenu-item:hover { background: var(--primary-soft); } /* Repeat-offender list (delay history) */ .rfn-offenders-table-wrap { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .rfn-offenders-table { width: 100%; border-collapse: collapse; font-size: 13px; } .rfn-offenders-table th { background: var(--bg-card-hover); padding: 9px 14px; text-align: left; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); border-bottom: 1px solid var(--border); white-space: nowrap; } .rfn-offenders-table th.num { text-align: center; } .rfn-offenders-table td { padding: 9px 14px; border-bottom: 1px solid var(--border); color: var(--text-primary); } .rfn-offenders-table td.num { text-align: center; font-family: var(--font-mono); } .rfn-offenders-table tr:last-child td { border-bottom: none; } .rfn-offenders-table tr:hover td { background: var(--bg-card-hover); } .rfn-offenders-table a { color: var(--text-primary); text-decoration: none; font-weight: 500; } .rfn-offenders-table a:hover { text-decoration: underline; } /* Available Members — grouped by bucket */ .rfn-members-groups { display: flex; flex-direction: column; gap: 10px; } .rfn-bucket { display: grid; grid-template-columns: 140px 1fr; gap: 14px; padding: 10px 14px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); align-items: flex-start; } .rfn-bucket-head { display: flex; flex-direction: column; gap: 2px; padding-right: 14px; border-right: 1px solid var(--border); } .rfn-bucket-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; } .rfn-bucket-count { font-family: var(--font-mono); font-size: 16px; font-weight: 600; color: var(--text-primary); } .rfn-bucket.tone-red .rfn-bucket-label { color: #ff6b6b; } .rfn-bucket.tone-amber .rfn-bucket-label { color: var(--primary); } .rfn-bucket.tone-green .rfn-bucket-label { color: #50c850; } .rfn-bucket-list { display: flex; flex-wrap: wrap; gap: 4px 6px; } .rfn-member-chip { font-size: 12px; padding: 4px 9px; background: var(--bg-input); border: 1px solid #232327; border-radius: 4px; color: var(--text-primary); text-decoration: none; font-weight: 500; } .rfn-member-chip:hover { border-color: var(--text-dim); } @media (max-width: 640px) { /* Side-scroll showing ~2.5 cards (mirrors payout KPI pattern). */ .rfn-kpi-row.main, .rfn-kpi-row.scopes { 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; } .rfn-kpi-row.main::-webkit-scrollbar, .rfn-kpi-row.scopes::-webkit-scrollbar { display: none; } .rfn-kpi-row.main > .rfn-kpi, .rfn-kpi-row.scopes > .rfn-kpi { flex: 0 0 40%; scroll-snap-align: start; } .kpi-label-full { display: none; } .kpi-label-short { display: inline; } .rfn-card { flex-direction: column; } .rfn-rail { flex: 0 0 auto; width: auto; /* override desktop's 130px so rail spans full card width */ flex-direction: row; gap: 10px; border-right: none; border-bottom: 1px solid var(--border); padding: 8px 12px; justify-content: center; } .rfn-rail-time { font-size: 16px; } .rfn-rail-label { margin-top: 0; white-space: nowrap; } /* keep "TO READY" on one line */ .rfn-head { padding: 8px 12px 6px; } .rfn-head-right { width: 100%; justify-content: flex-end; } /* New head layout — title takes row 1 (status pushed right within it), meta + stats share row 2 (meta left, stats right via margin-left:auto). */ .rfn-head-title { width: 100%; min-width: 0; } .rfn-head-title .rfn-badge { margin-left: auto; } .rfn-slots { padding: 8px 10px 10px; gap: 6px; } .rfn-slot { flex: 1 1 calc(50% - 6px); min-width: 0; } .rfn-bucket { grid-template-columns: 1fr; } .rfn-bucket-head { border-right: none; padding-right: 0; flex-direction: row; gap: 10px; align-items: baseline; } /* Blockers filters: share one row instead of stacking. Each filter takes half the width; selects shrink to fit and drop their desktop min-width. */ .blockers-controls { flex-wrap: nowrap; gap: 8px; } .blockers-filter { flex: 1 1 0; min-width: 0; } .blockers-filter select { min-width: 0; width: 100%; } /* Blockers table: shrink all text for denser mobile read. */ .blockers-table { font-size: 11px; } .blockers-table th, .blockers-table td { padding: 7px 8px; } .blockers-table td.date { font-size: 10px; } .blockers-type-pill { font-size: 9px; padding: 1px 5px; letter-spacing: 0.05em; } } /* ===== LOOT PANEL ===== */ /* Per-crime list of items dropped. Each item rendered as a chip in the Items cell; chip carries the item name + a small quantity badge. */ #panel-loot .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } #panel-loot table { width: 100%; } #panel-loot th:nth-child(1), #panel-loot td:nth-child(1), #panel-loot th:nth-child(4), #panel-loot td:nth-child(4) { white-space: nowrap; } #panel-loot td:nth-child(3) { line-height: 1.6; } .loot-chip { display: inline-flex; align-items: baseline; gap: 5px; padding: 3px 8px; margin: 2px 4px 2px 0; background: var(--bg-input); border: 1px solid var(--border); border-radius: 4px; font-size: 12px; color: var(--text-primary); } .loot-chip-qty { font-family: var(--font-mono); font-size: 10px; font-weight: 700; color: var(--primary); letter-spacing: 0.04em; } /* Xanax — the headline OC drop. Green left-stroke on the row for instant scan (matches the armory low-stock pattern). */ #panel-loot tbody tr.has-xanax td:first-child { box-shadow: inset 3px 0 0 #69DB7C; } /* Xanax scorecard click-state — green border when filter is active. */ #panel-loot .kpi.xanax { transition: border-color 0.15s; } #panel-loot .kpi.xanax:hover { border-color: #38383f; } #panel-loot .kpi.xanax.sel { border-color: #69DB7C; } #panel-loot .kpi.xanax.sel .kpi-value { color: #69DB7C; } .loot-value { font-family: var(--font-mono); font-weight: 600; color: #69DB7C; } .loot-freshness-old { color: #e8a04b; } .loot-refresh-link { color: var(--primary); text-decoration: none; font-weight: 600; margin-left: 4px; } .loot-refresh-link:hover { text-decoration: underline; } .loot-refresh-link[aria-busy="true"] { color: var(--text-dim); pointer-events: none; } @media (max-width: 768px) { #panel-loot table { font-size: 12px; } #panel-loot th, #panel-loot tbody td { padding: 8px 10px; } /* Stack chips vertically (one per line) but keep each chip's text on a single line. Width sized to content so the chip is only as wide as the item name + qty needs. */ .loot-chip { display: flex; width: max-content; margin: 3px 0; padding: 2px 6px; font-size: 11px; white-space: nowrap; } } /* ===== HISTORY PANEL ===== */ /* Filter row (Member + Crime) — desktop sits inline with fixed widths; mobile (≤768px) shares the row 50/50, selects shrink to fit. */ #historyMemberRow { gap: 12px; flex-wrap: wrap; } #historyMemberRow #historyMemberSelect, #historyMemberRow #historyCrimeSelect { width: 240px; } /* Crime-by-crime card list. Header carries name/difficulty/status/date/payout; slot grid shows role · weight · member · CPR. Visual cousin of operations cards but no countdown rail (historical) and no item-required surface. */ .hist-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 10px; overflow: hidden; box-shadow: inset 3px 0 0 var(--border); /* fallback stripe */ } .hist-card:hover { border-color: #38383f; } /* Left stripe matches the status pill colour for quick scan. */ .hist-card[data-status="successful"] { box-shadow: inset 3px 0 0 #69DB7C; } .hist-card[data-status="failure"], .hist-card[data-status="failed"], .hist-card[data-status="expired"] { box-shadow: inset 3px 0 0 #ff6b6b; } .hist-card[data-status="planning"] { box-shadow: inset 3px 0 0 #4faaff; } .hist-card[data-status="recruiting"] { box-shadow: inset 3px 0 0 #A78BFA; } .hist-card[data-status="completed"], .hist-card[data-status="awaiting-payout"] { box-shadow: inset 3px 0 0 #e8a04b; } .hist-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px dashed #232327; } .hist-head-left { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; } .hist-head-right { display: flex; align-items: center; gap: 12px; margin-left: auto; flex-wrap: wrap; } .hist-name { font-size: 15px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.005em; margin: 0; } .hist-difficulty { font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary); padding: 1px 7px; border: 1px solid var(--border); border-radius: 3px; } .hist-status { font-size: 10px; padding: 3px 8px; border-radius: 3px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; font-family: var(--font-mono); } .hist-status.successful { background: rgba(105,219,124,0.13); color: #69DB7C; } .hist-status.failure, .hist-status.failed, .hist-status.expired { background: rgba(255,107,107,0.13); color: #ff6b6b; } .hist-status.planning { background: rgba(79,170,255,0.13); color: #4faaff; } .hist-status.recruiting { background: rgba(167,139,250,0.13); color: #A78BFA; } .hist-status.completed, .hist-status.awaiting-payout { background: rgba(232,160,75,0.13); color: #e8a04b; } .hist-date { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); } .hist-payout { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: #69DB7C; } .hist-payout.zero { color: var(--text-dim); } .hist-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; padding: 10px 14px 12px; } .hist-slot { background: rgba(255,255,255,0.02); border: 1px solid #232327; border-radius: 5px; padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; } .hist-slot.own { border-color: rgba(214,231,15,0.4); background: rgba(214,231,15,0.04); } .hist-slot-head { display: flex; align-items: baseline; justify-content: center; gap: 6px; } .hist-slot-role { font-size: 10px; font-weight: 600; color: var(--text-primary); letter-spacing: 0.06em; text-transform: uppercase; text-align: center; } /* Weight strip pinned to the bottom of each slot tile, edge-to-edge via negative side margins that cancel the slot's padding. */ .hist-slot-weight { margin: auto -10px -8px; padding: 5px 10px; border-top: 1px solid #232327; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); background: rgba(255,255,255,0.02); text-align: center; } .hist-slot-weight .val { color: var(--text-primary); font-weight: 700; margin-left: 6px; } .hist-slot-member { font-size: 12px; text-align: center; } .hist-slot-member a { color: var(--text-primary); text-decoration: none; font-weight: 500; } .hist-slot-member a:hover { text-decoration: underline; } .hist-slot-member.empty { color: var(--text-dim); font-style: italic; } .hist-slot-cpr { display: block; text-align: center; font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--text-dim); } .hist-slot-cpr.high { color: #69DB7C; } .hist-slot-cpr.mid { color: #e8a04b; } .hist-slot-cpr.low { color: #ff6b6b; } /* History KPI scorecards — three status filters (Successful/Failed/In Progress) */ #panel-history .kpi-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; } #panel-history .kpi { cursor: pointer; transition: border-color 0.15s; } #panel-history .kpi:hover { border-color: #38383f; } #panel-history .kpi.sel.successful { border-color: #69DB7C; } #panel-history .kpi.sel.failed { border-color: #ff6b6b; } #panel-history .kpi.sel.inprogress { border-color: #4faaff; } #panel-history .kpi.mut { opacity: 0.4; } #panel-history .kpi.mut:hover { opacity: 0.7; } @media (max-width: 640px) { .hist-slots { grid-template-columns: repeat(2, 1fr); } .hist-head { padding: 10px 12px; gap: 8px; } .hist-head-right { width: 100%; justify-content: flex-start; margin-left: 0; } .hist-name { font-size: 14px; } /* KPI scorecards: side-scroll showing ~2.5 cards (matches other dashboards). */ #panel-history .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; } #panel-history .kpi-row::-webkit-scrollbar { display: none; } #panel-history .kpi-row > .kpi { flex: 0 0 40%; scroll-snap-align: start; } /* Filter row: Member + Crime share one row at half-width each. If Member is hidden (non-admin), Crime takes the full row. */ #historyMemberRow { flex-wrap: nowrap; gap: 12px; } #historyMemberRow > div { flex: 1 1 0; min-width: 0; } #historyMemberRow #historyMemberSelect, #historyMemberRow #historyCrimeSelect { width: 100%; min-width: 0; } } /* ===== ADMIN SUB-NAV (matches attacks pattern) ===== */ .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; } @media (max-width: 768px) { .admin-subnav-tab { font-size: 11px; padding: 7px 10px; } } /* ===== OFFENCES MATRIX (admin sub-tab) ===== */ /* Namespaced so it doesn't collide with the .table-wrap / table base styles used elsewhere in this dashboard. Sticky Name column on the left; horizontal scroll for day columns. Two-row thead with month-grouped cells over the day numbers. */ /* Offences intro paragraph — clamped to two lines on mobile with a clickable "more..."/"less..." in the theme colour. */ .offences-intro { color: var(--text-secondary); font-size: 12px; margin-bottom: 14px; line-height: 1.5; } .offences-intro-more { display: none; } .offences-intro-more::before { content: 'more...'; } .offences-intro.expanded .offences-intro-more::before { content: 'less...'; } @media (max-width: 768px) { .offences-intro { position: relative; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .offences-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; } .offences-intro.expanded { display: block; overflow: visible; -webkit-line-clamp: unset; } .offences-intro.expanded .offences-intro-more { position: static; background: transparent; padding-left: 0; margin-left: 6px; } } .offences-matrix-wrap { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); overflow: auto; max-height: 75vh; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; } .offences-matrix-wrap::-webkit-scrollbar { width: 8px; height: 8px; } .offences-matrix-wrap::-webkit-scrollbar-track { background: transparent; } .offences-matrix-wrap::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; } .offences-matrix-table { width: auto; border-collapse: separate; border-spacing: 0; font-size: 12px; font-variant-numeric: tabular-nums; } .offences-matrix-table th, .offences-matrix-table td { padding: 7px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; text-align: center; } /* Cancel the global `thead { position: sticky }` so it doesn't fight with the per-cell sticky below (the matrix has two header rows with different top offsets, which only works when sticky is on the cells). */ .offences-matrix-table thead { position: static; } .offences-matrix-table thead th { background: var(--bg-card); color: var(--text-secondary); font-weight: 600; position: sticky; z-index: 2; cursor: default; padding: 6px 10px; } .offences-matrix-table thead tr.month-row th { top: 0; /* Bottom inset shadow doubles as a 2px mask covering the seam between month-row (top:0) and day-row (top:24px) — without it body cells flash through the gap as you scroll. */ box-shadow: inset 0 -2px 0 var(--bg-card); } .offences-matrix-table thead tr.day-row th { top: 24px; } /* sits below month row */ /* Month label cells span multiple days */ .offences-matrix-table .offences-month-hdr { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); border-bottom: 1px solid var(--border-strong); font-weight: 600; } .offences-matrix-table .offences-day-hdr { font-size: 11px; font-weight: 600; color: var(--primary); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } /* Sticky Name + Total columns — the Total column sits flush against Member and gets the right-edge shadow (signalling end of the sticky zone). */ .offences-matrix-table .offences-name { position: sticky; left: 0; background: var(--bg-card); z-index: 1; width: 180px; min-width: 180px; max-width: 180px; text-align: left; } .offences-matrix-table .offences-total { position: sticky; left: 180px; background: var(--bg-card); z-index: 1; min-width: 64px; text-align: center; box-shadow: 4px 0 6px -4px rgba(0,0,0,0.4); color: var(--text-primary); font-weight: 600; } .offences-matrix-table thead .offences-name, .offences-matrix-table thead .offences-total { z-index: 3; } /* Sortable header cells (Member, Total) */ .offences-matrix-table thead th.offences-sortable { cursor: pointer; user-select: none; } .offences-matrix-table thead th.offences-sortable:hover { color: var(--text-primary); } .offences-sort-arrow { font-size: 9px; opacity: 0.85; } /* On mobile: let the Member column shrink to its content width. Sticky-offset on the Total column would need to track Member's runtime width, which CSS can't do — so Total drops the sticky lock here and just scrolls with the data columns. Member stays sticky on the left with the right-edge shadow. */ @media (max-width: 768px) { .offences-matrix-table .offences-name { width: auto; min-width: 0; max-width: none; box-shadow: 4px 0 6px -4px rgba(0,0,0,0.4); } .offences-matrix-table .offences-total { position: static; box-shadow: none; } } .offences-matrix-table tbody tr:hover .offences-name { background: #161618; } .offences-matrix-table tbody tr:hover td { background: rgba(255,255,255,0.02); } /* Cell values */ .offences-cell-zero { color: var(--text-muted); } .offences-cell-value { color: var(--text-primary); font-weight: 500; } .offences-name-text { color: var(--text-primary); font-weight: 500; } .offences-empty { padding: 40px 20px; text-align: center; color: var(--text-muted); font-size: 13px; } /* ===== CPR config (Set CPR sub-tab) ===== */ .cpr-config-grid { display: grid; grid-template-columns: 1fr; gap: 14px; } .cpr-level-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 12px; } .cpr-level-row { display: flex; flex-direction: column; gap: 4px; background: var(--bg-card-hover); border: 1px solid var(--border); border-radius: 4px; padding: 8px 10px; } .cpr-level-row label { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--primary); font-weight: 600; } .cpr-level-row input { background: var(--bg-input); border: 1px solid var(--border); border-radius: 4px; padding: 6px 8px; color: var(--text-primary); font-family: var(--font-mono); font-size: 13px; text-align: center; } .cpr-exception-form { display: grid; grid-template-columns: 1fr 1fr 90px auto; gap: 8px; margin-bottom: 14px; } .cpr-exception-form select, .cpr-exception-form input { background: var(--bg-input); border: 1px solid var(--border); border-radius: 4px; padding: 8px 10px; color: var(--text-primary); font-size: 13px; font-family: inherit; } .cpr-exception-form input { font-family: var(--font-mono); text-align: center; } #cprExceptionsList { display: flex; flex-direction: column; gap: 4px; } .cpr-exception-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--bg-card-hover); border: 1px solid var(--border); border-radius: 4px; font-size: 13px; } .cpr-exception-row .ex-crime { font-weight: 500; } .cpr-exception-row .ex-sep { color: var(--text-dim); } .cpr-exception-row .ex-min { font-family: var(--font-mono); font-weight: 600; color: var(--primary); } .cpr-exception-row .ex-remove { margin-left: auto; background: none; border: 1px solid var(--border); color: var(--text-secondary); padding: 3px 8px; border-radius: 3px; cursor: pointer; font-size: 11px; font-family: inherit; } .cpr-exception-row .ex-remove:hover { color: #ff6b6b; border-color: #ff6b6b; } @media (max-width: 640px) { .cpr-level-grid { grid-template-columns: repeat(3, 1fr); } .cpr-exception-form { grid-template-columns: 1fr 1fr; } .cpr-exception-form input, .cpr-exception-form button { grid-column: span 1; } } /* ===== ITEM COMBOBOX (ported from competitions) ===== */ .combobox-wrapper { position: relative; flex: 1; min-width: 0; } .combobox-dropdown { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: var(--bg-card); border: 1px solid var(--border); border-radius: 4px; box-shadow: 0 6px 18px rgba(0,0,0,0.35); max-height: 260px; overflow-y: auto; z-index: 100; display: none; } .combobox-dropdown.open { display: block; } .combobox-option { padding: 8px 12px; font-size: 13px; cursor: pointer; color: var(--text-primary); user-select: none; border-bottom: 1px solid rgba(255,255,255,0.04); } .combobox-option:last-child { border-bottom: none; } .combobox-option:hover, .combobox-option.highlighted { background: var(--primary-soft); color: var(--text-primary); } .combobox-option-id { color: var(--text-muted); font-size: 11px; margin-left: 6px; } .combobox-option-empty { padding: 14px 12px; font-size: 12px; color: var(--text-muted); text-align: center; font-style: italic; } /* ===== SET MIN LEVELS sub-tab ===== */ .minlevels-form { display: grid; grid-template-columns: 1fr 100px auto; gap: 8px; margin-bottom: 14px; align-items: stretch; } .minlevels-form .combobox-wrapper input, .minlevels-form input.minlevels-qty { background: var(--bg-input); border: 1px solid var(--border); border-radius: 4px; padding: 8px 10px; color: var(--text-primary); font-size: 13px; font-family: inherit; width: 100%; } .minlevels-form input.minlevels-qty { font-family: var(--font-mono); text-align: center; } #minLevelsList { display: flex; flex-direction: column; gap: 4px; } .minlevels-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--bg-card-hover); border: 1px solid var(--border); border-radius: 4px; font-size: 13px; } .minlevels-row .ml-name { font-weight: 500; } .minlevels-row .ml-sep { color: var(--text-dim); } .minlevels-row .ml-qty { font-family: var(--font-mono); font-weight: 600; color: var(--primary); } .minlevels-row .ml-remove { margin-left: auto; background: none; border: 1px solid #ff6b6b; color: #ff6b6b; padding: 3px 8px; border-radius: 3px; cursor: pointer; font-size: 11px; font-family: inherit; transition: background 0.1s; } .minlevels-row .ml-remove:hover { background: rgba(255,107,107,0.1); } @media (max-width: 640px) { .minlevels-form { grid-template-columns: 1fr 1fr; } .minlevels-form button { grid-column: 1 / -1; } } /* ===== ARMORY TAB ===== */ .armory-section-title { display: flex; align-items: center; gap: 10px; margin: 22px 0 10px; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-secondary); } .armory-section-title::after { content:''; flex:1; height:1px; background: var(--border); } .armory-section-count { font-family: var(--font-mono); font-size: 10px; background: var(--bg-card); border: 1px solid var(--border); padding: 2px 6px; border-radius: 4px; color: var(--text-primary); } .armory-alert-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; margin-bottom: 8px; } .armory-alert { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; } .armory-alert.low-stock { border-left: 3px solid #e8a04b; } .armory-alert.stale-loan { border-left: 3px solid #ff6b6b; } .armory-alert-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .armory-alert-name { font-weight: 600; font-size: 13px; color: var(--text-primary); } .armory-alert-kind { font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; font-family: var(--font-mono); color: var(--text-secondary); } .armory-alert.low-stock .armory-alert-kind { color: #e8a04b; } .armory-alert.stale-loan .armory-alert-kind { color: #ff6b6b; } .armory-alert-detail { font-size: 12px; color: var(--text-secondary); } .armory-alert-detail b { color: var(--text-primary); font-family: var(--font-mono); } .armory-table-wrap { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); overflow-x: auto; -webkit-overflow-scrolling: touch; } .armory-table { width: 100%; border-collapse: collapse; font-size: 13px; } .armory-table th { background: var(--bg-card-hover); padding: 10px 14px; text-align: left; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); border-bottom: 1px solid var(--border); white-space: nowrap; } .armory-table th.num { text-align: center; } .armory-table td { padding: 10px 14px; border-bottom: 1px solid var(--border); color: var(--text-primary); } .armory-table td.num { text-align: center; font-family: var(--font-mono); } .armory-table tr:last-child td { border-bottom: none; } .armory-table tr:hover td { background: var(--bg-card-hover); } .armory-table tr.low-stock td:first-child { box-shadow: inset 2px 0 0 #e8a04b; } .armory-type-pill { font-size: 10px; padding: 2px 7px; border-radius: 3px; letter-spacing: 0.06em; text-transform: uppercase; font-family: var(--font-mono); background: var(--bg-input); color: var(--text-secondary); } .armory-loanee-chip { display: inline-block; font-size: 11px; padding: 2px 7px; margin: 1px 3px 1px 0; background: var(--bg-input); border: 1px solid var(--bg-input); border-radius: 3px; color: var(--text-primary); text-decoration: none; } .armory-loanee-chip:hover { border-color: var(--text-dim); } .armory-loanee-chip.stale { border-color: rgba(255,107,107,0.5); background: rgba(255,107,107,0.06); color: #ff6b6b; } .armory-item-name a { color: var(--text-primary); text-decoration: none; font-weight: 500; } .armory-item-name a:hover { text-decoration: underline; } .armory-min-cell { font-family: var(--font-mono); color: var(--text-dim); } .armory-min-cell.set { color: var(--text-primary); } .armory-item-type-mobile { display: none; } /* desktop: type lives in its own column */ .armory-table .avail-short { display: none; } /* desktop: "Available"; mobile: "Avail" */ @media (max-width: 768px) { .armory-table th, .armory-table td { padding: 8px 10px; font-size: 12px; } .armory-table .avail-full { display: none; } .armory-table .avail-short { display: inline; } /* Hide the Type column, surface the type as a small pill below the item name. */ .armory-table th:nth-child(2), .armory-table td:nth-child(2) { display: none; } .armory-item-type-mobile { display: block; width: max-content; margin-top: 4px; font-size: 9px; padding: 1px 5px; border-radius: 3px; letter-spacing: 0.05em; text-transform: uppercase; font-family: var(--font-mono); background: var(--bg-input); color: var(--text-secondary); } } /* ===== ADMIN TAB ===== */ .admin-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } @media (max-width: 1024px) { .admin-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .admin-grid { grid-template-columns: 1fr; } } .admin-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; } .admin-card-title { font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 6px; } .admin-card-desc { font-size: 12px; color: var(--text-secondary); line-height: 1.5; margin-bottom: 12px; } .btn { padding: 8px 14px; background: var(--primary); color: #0b0b0c; border: none; border-radius: var(--radius-sm); font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit; letter-spacing: 0.02em; transition: opacity 0.15s; } .btn:hover { opacity: 0.85; } .btn:disabled { opacity: 0.4; cursor: not-allowed; } .btn-outline { background: transparent; color: var(--primary); border: 1px solid var(--primary); } .btn-outline:hover { background: var(--primary); color: #0b0b0c; opacity: 1; } .form-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .status-line { font-size: 11px; color: var(--text-dim); margin-top: 10px; font-family: var(--font-mono); min-height: 14px; } .status-grid { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; font-size: 12px; color: var(--text-secondary); } .status-grid b { color: var(--text-primary); font-family: var(--font-mono); } /* ===== AUTH OVERLAY (mirrors competitions/admin pattern) ===== */ .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: 6px; color: var(--text-primary); font-size: 15px; margin-bottom: 16px; outline: none; font-family: inherit; } .auth-input:focus { border-color: var(--primary); } .auth-btn { width: 100%; padding: 12px; background: var(--primary); color: #0b0b0c; font-weight: 700; font-size: 15px; border: none; border-radius: 6px; 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; } /* ===== SETTINGS PANEL (cog) — mirrors training/attacks ===== */ .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); } .section-toggle { cursor: pointer; user-select: none; transition: color 0.15s; } .section-toggle:hover { color: var(--text-primary); } .section-toggle-chev { font-size: 16px; color: var(--text-dim); line-height: 1; transition: transform 0.2s; } .section-toggle.open .section-toggle-chev { transform: rotate(180deg); } .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; font-family: inherit; } .theme-btn:hover { color: var(--text-primary); } .theme-btn.active { background: var(--bg-card-hover); color: var(--primary); } /* Colour-theme picker: one swatch per brand colour, click to set the accent. Same effect as cycling the header eyebrow / logo. */ .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; } /* ===== TOAST NOTIFICATIONS — mirrors attacks pattern ===== */ .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); } @media (max-width: 768px) { .header { padding: 12px 14px; } .header-eyebrow { display: none; } /* save horizontal space — burger + logo + title are the priorities */ .controls { padding: 12px 14px; } .content { padding: 14px; } } /* ===== APP MODAL (shared confirm/alert/prompt) ===== */ .app-modal { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); display: flex; align-items: center; justify-content: center; z-index: 9999; } .app-modal-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 22px 24px; max-width: 460px; width: 90%; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45); } .app-modal-title { font-size: 15px; font-weight: 700; color: var(--text-primary); margin-bottom: 10px; } .app-modal-msg { font-size: 13px; color: var(--text-secondary); margin-bottom: 12px; line-height: 1.5; } .app-modal-input { width: 100%; padding: 8px 12px; margin-bottom: 18px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 6px; color: var(--text-primary); font-family: inherit; font-size: 13px; } .app-modal-input:focus { outline: none; border-color: var(--primary); } .app-modal-actions { display: flex; gap: 8px; justify-content: flex-end; } .app-modal-actions button { padding: 8px 14px; font-family: inherit; font-size: 12px; font-weight: 600; background: var(--bg-input); color: var(--text-primary); border: 1px solid var(--border); border-radius: 6px; cursor: pointer; } .app-modal-actions button:hover { filter: brightness(1.1); } .app-modal-actions .app-modal-primary { background: var(--primary); color: var(--bg-card); border-color: var(--primary); }