/* Dark Material-inspired theme with light blue accents. */ :root { --bg: #121417; --bg-elev: #1c1f24; --bg-elev-2: #242830; --border: #2c3138; --text: #e6eaf0; --text-muted: #8a93a1; --accent: #4fc3f7; /* light blue */ --accent-strong: #29b6f6; --accent-dim: rgba(79, 195, 247, 0.18); --error: #ef5350; --success: #66bb6a; --warn: #ffb74d; --shadow: 0 2px 6px rgba(0,0,0,0.35); font-family: 'Inter', 'Segoe UI', Roboto, system-ui, -apple-system, sans-serif; } /* Light / high-contrast theme (FR #65). Activated by adding the theme-light class to ; app.js sets / clears it based on the per-user `theme` setting from /api/me. Only the palette variables are overridden, so every rule that already references var(--…) automatically picks up the inverted scheme. A handful of inline gradients in this file use literal hex colours — those are tuned for the dark theme and are damped out below by neutralising the tinted radial backgrounds. */ body.theme-light { --bg: #f7f8fa; --bg-elev: #ffffff; --bg-elev-2: #eef0f3; --border: #c8cdd5; --text: #1a1d22; --text-muted: #5a6470; --accent: #1565c0; /* stronger blue, AA against #ffffff */ --accent-strong: #0d47a1; --accent-dim: rgba(21, 101, 192, 0.16); --error: #c62828; --success: #2e7d32; --warn: #c66900; --shadow: 0 2px 6px rgba(0,0,0,0.10); } /* Cancel the dark-theme blue radial wash on the login / contest chooser backgrounds — on a white base it reads as a smudge. */ body.theme-light .login-screen, body.theme-light .contest-screen-outer, body.theme-light #contest-picker-screen { background: var(--bg) !important; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); height: 100%; font-size: 14px; line-height: 1.4; } button, input, select, textarea { font: inherit; color: inherit; } a { color: var(--accent); text-decoration: none; } .hidden { display: none !important; } .muted { color: var(--text-muted); } .small { font-size: 12px; } .error { color: var(--error); min-height: 1em; } /* ==== Contest screen outer shell ==== */ .contest-screen-outer { display: flex; flex-direction: column; height: 100vh; background: radial-gradient(circle at 30% 20%, rgba(79,195,247,0.08), transparent 60%), var(--bg); } .contest-topbar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--bg-elev); border-bottom: 1px solid var(--border); min-height: 62px; flex-shrink: 0; } .contest-screen-body { flex: 1; overflow-y: auto; display: flex; flex-direction: column; align-items: center; padding: 20px 20px 12px; gap: 16px; } .app-credits { width: 100%; max-width: 1800px; text-align: center; font-size: 12px; line-height: 1.5; color: var(--text-muted); padding: 6px 20px 8px; flex-shrink: 0; } .app-credits a { color: var(--accent); text-decoration: none; } .app-credits a:hover { text-decoration: underline; } /* ==== Login screen ==== */ .login-screen { display: flex; align-items: center; justify-content: center; height: 100vh; background: radial-gradient(circle at 30% 20%, rgba(79,195,247,0.08), transparent 60%), var(--bg); } .login-card { background: var(--bg-elev); padding: 32px 40px; border-radius: 12px; box-shadow: var(--shadow); width: 360px; border: 1px solid var(--border); } .app-logo { width: 56px; height: 56px; display: block; margin: 0 auto 16px; border-radius: 12px; } .login-card h1 { margin: 0 0 4px; color: var(--accent); } .login-card p { margin: 0 0 24px; } .login-card label { display: block; margin: 16px 0 4px; font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; } .login-card input { width: 100%; padding: 10px 12px; background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: 6px; font-size: 18px; } #setup-callsign { text-transform: uppercase; } .login-card input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 2px var(--accent-dim); } .login-card button { margin-top: 20px; width: 100%; padding: 10px 12px; background: var(--accent); color: #06222b; border: 0; border-radius: 6px; font-weight: 600; cursor: pointer; } .login-card button:hover { background: var(--accent-strong); } /* Top toolbar inside the Global Settings card — keeps Back/Save reachable without scrolling the long settings form. */ .global-settings-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--border); } .global-settings-topbar h1 { margin: 0; } .global-settings-topbar-actions { display: flex; gap: 8px; flex-shrink: 0; } .global-settings-topbar-actions button { width: auto; margin-top: 0; padding: 6px 14px; font-size: 13px; } /* ==== App shell ==== */ .app-screen { display: flex; flex-direction: column; height: 100vh; } .topbar { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--bg-elev); border-bottom: 1px solid var(--border); min-height: 62px; flex-wrap: nowrap; } .topbar-left { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .station-area { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; pointer-events: auto; flex: 1 1 auto; min-width: 0; overflow: hidden; } .topbar-right { display: flex; align-items: center; gap: 6px; flex-shrink: 1; min-width: 0; margin-left: auto; } .topbar-logo { width: 28px; height: 28px; border-radius: 6px; flex-shrink: 0; } .brand-stack { display: flex; flex-direction: column; gap: 3px; flex-shrink: 0; } .brand-row { display: flex; align-items: center; gap: 8px; } .back-overview-pill { font-size: 11px; padding: 1px 8px; border-radius: 10px; background: transparent; border: 1px solid var(--border); color: var(--text-muted); cursor: pointer; white-space: nowrap; line-height: 1.6; width: fit-content; transition: background .15s, border-color .15s, color .15s; } .back-overview-pill:hover { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); } .topbar .brand, .contest-topbar .brand { font-weight: 700; color: var(--accent); font-size: 18px; letter-spacing: 0.04em; white-space: nowrap; } .app-version { font-size: 11px; font-weight: 400; color: #ffb74d; letter-spacing: 0; margin-left: 5px; vertical-align: middle; opacity: 0.85; } /* (Station-area declared above; this block intentionally left empty.) */ .fr-btn { font-size: 12px; padding: 4px 10px; white-space: nowrap; } /* Station pill — centered in the topbar */ .station-pill { display: flex; flex-direction: column; align-items: center; gap: 2px; background: var(--bg-elev-2); border: 1px solid var(--accent); border-radius: 14px; padding: 6px 22px; cursor: pointer; user-select: none; transition: background .15s, border-color .15s; min-width: 0; flex: 0 1 auto; overflow: hidden; } .station-pill .station-call, .station-pill .station-contest-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .station-pill:hover { background: var(--accent-dim); border-color: var(--accent-strong); } .station-call { color: var(--accent); font-size: 19px; font-weight: 700; letter-spacing: 0.1em; line-height: 1.1; } .station-contest-name { color: var(--text-muted); font-size: 11px; letter-spacing: 0.04em; white-space: nowrap; } .station-contest-name:empty { display: none; } .op-badge { background: var(--bg-elev-2); padding: 4px 10px; border-radius: 999px; font-size: 12px; border: 1px solid var(--border); white-space: nowrap; } .tabs { display: flex; gap: 2px; flex-wrap: wrap; } .tab { padding: 6px 10px; background: transparent; color: var(--text-muted); border: 0; border-radius: 6px; cursor: pointer; font-size: 13px; white-space: nowrap; } .tab:hover { background: var(--bg-elev-2); color: var(--text); } .tab.active { background: var(--accent-dim); color: var(--accent); } .rig-status { display: flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 6px; background: var(--bg-elev-2); border: 1px solid var(--border); font-size: 12px; } .rig-status .rig-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); } .rig-status.ok .rig-dot { background: var(--success); box-shadow: 0 0 8px var(--success); } .rig-status.err .rig-dot { background: var(--error); box-shadow: 0 0 8px var(--error); } .rig-status .rig-detail { color: var(--text-muted); } #logout-btn { padding: 6px 10px; } .layout { flex: 1; overflow: hidden; } .tab-pane { display: none; height: 100%; padding: 16px; overflow: auto; } .tab-pane.active { display: block; } /* Logging tab overrides — must not scroll at the tab level */ #tab-log { padding: 14px; overflow: hidden; } #tab-log.active { display: flex; flex-direction: column; } /* Map tab — fills the available space; legend left, map right */ #tab-map { padding: 0; overflow: hidden; } #tab-map.active { display: flex; } .contest-map-legend { width: 180px; flex-shrink: 0; padding: 16px 14px; overflow-y: auto; border-right: 1px solid var(--border); display: flex; flex-direction: column; gap: 0; } .contest-map-legend h3 { margin: 0 0 10px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); } .cmap-legend-item { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 13px; } .cmap-dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; display: inline-block; border: 1.5px solid rgba(0,0,0,0.35); } .cmap-legend-sep { height: 10px; } .cmap-toggle { display: flex; align-items: center; gap: 7px; padding: 2px 0; font-size: 13px; cursor: pointer; user-select: none; } .cmap-toggle input[type="checkbox"] { margin: 0; cursor: pointer; accent-color: var(--primary); } .contest-map-area { flex: 1; min-width: 0; display: flex; flex-direction: column; } .cmap-subtabs { display: flex; border-bottom: 1px solid var(--border); padding: 0 10px; flex-shrink: 0; } .cmap-subtab { background: none; border: none; border-bottom: 2px solid transparent; padding: 6px 14px; font-size: 13px; color: var(--muted); cursor: pointer; margin-bottom: -1px; line-height: 1.4; } .cmap-subtab:hover { color: var(--fg); } .cmap-subtab.active { color: var(--fg); border-bottom-color: var(--primary); } .contest-map-canvas { flex: 1; min-width: 0; } .contest-globe-canvas { flex: 1; min-width: 0; width: 100%; display: none; cursor: grab; } .contest-globe-canvas.active { display: block; } .contest-globe-canvas:active { cursor: grabbing; } /* QSO detail tooltip (map 2D popup & 3D floating tip) */ .cmap-qso-tip { position: fixed; background: var(--card, #1a1f2b); border: 1px solid var(--border, #2e3240); border-radius: 6px; padding: 8px 12px; font-size: 13px; z-index: 9999; pointer-events: none; min-width: 140px; max-width: 240px; box-shadow: 0 4px 14px rgba(0,0,0,0.5); line-height: 1.5; } .cmap-qso-tip.hidden { display: none; } .cmap-qso-tip strong { display: block; font-size: 14px; margin-bottom: 2px; } .cmap-tip-row { display: block; color: var(--muted); } .cmap-qso-popup strong { display: block; font-size: 14px; margin-bottom: 2px; } .cmap-qso-popup .cmap-tip-row { display: block; color: #888; margin-top: 1px; } .layout-outer { flex: 1; min-height: 0; display: flex; overflow: hidden; gap: 0; } /* Panel resizer handles */ .panel-resizer { flex-shrink: 0; position: relative; z-index: 10; background: transparent; } .panel-resizer::after { content: ''; position: absolute; background: var(--border); transition: background .15s; border-radius: 2px; } .panel-resizer:hover::after, .panel-resizer.dragging::after { background: var(--accent); } .panel-resizer-v { width: 14px; cursor: col-resize; } .panel-resizer-v::after { top: 40%; bottom: 40%; left: 6px; width: 2px; } .panel-resizer-h { height: 14px; cursor: row-resize; } .panel-resizer-h::after { left: 40%; right: 40%; top: 6px; height: 2px; } /* Collapse/expand toggle on vertical resizers */ .panel-collapse-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 20; background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: 8px; width: 18px; height: 40px; padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 13px; line-height: 1; transition: border-color .15s, color .15s, background .15s; } .panel-collapse-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--bg-elev-2); } .panel-resizer.dragging .panel-collapse-btn { opacity: 0; pointer-events: none; } /* Collapsed panel state */ .left-panel.panel-collapsed, .ops-panel.panel-collapsed { width: 0 !important; min-width: 0 !important; overflow: hidden; padding: 0; border-width: 0; } .left-panel { width: var(--left-w, 210px); min-width: 80px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; overflow-y: auto; } .center-col { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; } .entry-panel { height: var(--entry-h, auto); min-height: fit-content; flex-shrink: 0; overflow-y: auto; } .history-panel { flex: 1; min-height: 0; display: flex; flex-direction: column; } .ops-panel { width: var(--right-w, 280px); min-width: 120px; flex-shrink: 0; overflow-y: auto; display: flex; flex-direction: column; } /* ==== Cards ==== */ .card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; box-shadow: var(--shadow); } .card h2 { margin: 0 0 12px; font-size: 16px; color: var(--accent); font-weight: 600; } .card h3 { margin: 0 0 10px; font-size: 13px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; } /* ==== Entry form ==== */ #qso-form .row { display: flex; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; } #qso-form label { display: flex; flex-direction: column; flex: 1; min-width: 90px; font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; } #qso-form label.grow { flex: 3; } #qso-form label.inline { flex-direction: row; align-items: center; gap: 6px; font-size: 12px; text-transform: none; letter-spacing: 0; color: var(--text-muted); flex: 0 0 auto; } #qso-form input, #qso-form select { background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; margin-top: 4px; font-size: 14px; text-transform: uppercase; } #qso-form input[type="checkbox"] { width: auto; margin-top: 0; } #qso-form input[type="datetime-local"] { text-transform: none; } input#q-notes { text-transform: none; } select#q-band { text-transform: none; } #qso-form input::placeholder { color: var(--text-muted); } #qso-form input:focus, #qso-form select:focus, .settings-card input:focus, .settings-card select:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 2px var(--accent-dim); } .entry-actions { display: flex; align-items: center; gap: 14px; margin-top: 4px; } .entry-actions .error { flex: 1; } button.primary, .as-button { background: var(--accent); color: #06222b; border: 0; border-radius: 6px; padding: 9px 18px; cursor: pointer; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; } button.primary:hover, .as-button:hover { background: var(--accent-strong); } button.ghost { background: transparent; color: var(--text-muted); border: 1px solid var(--border); border-radius: 6px; padding: 6px 12px; cursor: pointer; } button.ghost:hover { color: var(--text); border-color: var(--accent); } .kbd { background: rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.1); padding: 1px 6px; border-radius: 4px; font-size: 11px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } /* ==== History ==== */ .history-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; gap: 10px; } .history-header input { background: var(--bg-elev-2); border: 1px solid var(--border); color: var(--text); padding: 6px 10px; border-radius: 6px; width: 280px; } .history-header input:focus { outline: none; border-color: var(--accent); } .history-filter-group { display: flex; align-items: center; gap: 8px; } .filter-clear-pill { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; border: 1px solid #c53030; background: #e53e3e; color: #fff; font: inherit; font-size: 0.85em; line-height: 1.2; cursor: pointer; white-space: nowrap; } .filter-clear-pill:hover { background: #c53030; border-color: #9b2c2c; } .filter-clear-pill span[aria-hidden] { font-weight: 700; } .table-scroll { flex: 1; overflow: auto; min-height: 0; border-radius: 6px; border: 1px solid var(--border); } table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; } thead th { position: sticky; top: 0; background: var(--bg-elev-2); text-align: left; padding: 8px 10px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); border-bottom: 1px solid var(--border); } tbody td { padding: 7px 10px; border-bottom: 1px solid rgba(255,255,255,0.04); } tbody tr:hover { background: rgba(79,195,247,0.04); } tbody tr.fresh { animation: flash 1.5s ease-out; } tbody tr.editing-row { background: rgba(79,195,247,0.12); outline: 1px solid var(--accent); } tbody tr[style*="pointer"]:hover { background: var(--bg-elev-2); } @keyframes flash { from { background: rgba(79,195,247,0.25); } } .history-footer { padding-top: 8px; } .del-btn { background: none; color: var(--text-muted); border: 0; cursor: pointer; padding: 2px 6px; } .del-btn:hover { color: var(--error); } /* ==== Operators panel ==== */ .ops-header { margin-bottom: 8px; } .ops-tabs { display: flex; flex-wrap: wrap; gap: 2px; margin-bottom: 10px; border-bottom: 1px solid var(--border); padding-bottom: 4px; } .ops-tab { padding: 4px 10px; background: transparent; color: var(--text-muted); border: 0; border-radius: 6px; cursor: pointer; font-size: 12px; font-weight: 500; flex: 0 0 auto; white-space: nowrap; } .ops-tab:hover { background: var(--bg-elev-2); color: var(--text); } .ops-tab.active { background: var(--accent-dim); color: var(--accent); } @keyframes chat-tab-blink { 0%, 100% { background: transparent; color: var(--text-muted); } 50% { background: #add8e6; color: #000; } } .ops-tab.chat-notify { animation: chat-tab-blink 2s ease-in-out infinite; } .ops-tab-pane { display: none; } .ops-tab-pane.active { display: block; } /* ==== DX Cluster ==== */ .cluster-filters { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; } .cluster-filters-row { display: flex; gap: 5px; align-items: center; } .cluster-filters select { flex: 1; padding: 3px 5px; background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: 4px; font-size: 11px; color: var(--text); } .cluster-filters button { font-size: 14px; padding: 2px 7px; } .cluster-scroll { overflow-y: auto; max-height: 340px; } #cluster-table { width: 100%; border-collapse: collapse; font-size: 11px; } #cluster-table th { position: sticky; top: 0; text-align: left; padding: 3px 5px; background: var(--bg-elev); color: var(--text-muted); font-size: 10px; font-weight: 600; text-transform: uppercase; border-bottom: 1px solid var(--border); white-space: nowrap; } #cluster-table td { padding: 3px 5px; border-bottom: 1px solid rgba(255,255,255,0.04); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 90px; } #cluster-table td:last-child { color: var(--text-muted); font-size: 10px; max-width: 70px; } #cluster-table tbody tr { cursor: pointer; } #cluster-table tbody tr:hover { background: var(--bg-elev-2); } .cluster-dx { font-weight: 700; color: var(--accent); } .cluster-freq { font-family: monospace; } .call-country { font-size: 11px; color: var(--text-muted); letter-spacing: 0; text-transform: none; min-height: 14px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ==== Objective markdown output ==== */ .objective-content { font-size: 13px; line-height: 1.6; color: var(--text); padding: 4px 0; overflow-y: auto; } .objective-content p { margin: 0 0 10px; } .objective-content h1,.objective-content h2,.objective-content h3,.objective-content h4 { color: var(--accent); margin: 14px 0 6px; font-size: 14px; font-weight: 700; } .objective-content h1 { font-size: 16px; } .objective-content h2 { font-size: 15px; } .objective-content ul,.objective-content ol { margin: 0 0 10px; padding-left: 20px; } .objective-content li { margin-bottom: 3px; } .objective-content pre { background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: 4px; padding: 8px; overflow-x: auto; font-size: 12px; margin: 0 0 10px; } .objective-content code { background: var(--bg-elev-2); border-radius: 3px; padding: 1px 5px; font-size: 12px; font-family: monospace; } .objective-content pre code { background: none; padding: 0; } .objective-content blockquote { border-left: 3px solid var(--accent); margin: 0 0 10px; padding: 4px 12px; color: var(--text-muted); } .objective-content a { color: var(--accent); } .objective-content strong { color: var(--text); font-weight: 700; } .objective-content em { font-style: italic; } .objective-empty { color: var(--text-muted); font-size: 12px; margin-top: 12px; } /* ==== Markdown editor (in modal) ==== */ .md-editor-wrap { display: flex; gap: 8px; margin-top: 6px; } .md-editor-wrap textarea { flex: 1; min-height: 160px; resize: vertical; background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; color: inherit; font: inherit; font-size: 13px; font-family: monospace; } .md-editor-wrap textarea:focus { border-color: var(--accent); outline: none; } .md-preview-pane { flex: 1; min-height: 160px; max-height: 300px; overflow-y: auto; background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; font-size: 13px; } .ops-station { font-size: 22px; font-weight: 700; color: var(--accent); letter-spacing: 0.06em; } .ops-list { list-style: none; margin: 0; padding: 0; } .ops-list li { padding: 6px 8px; border-radius: 4px; display: flex; align-items: center; gap: 8px; } .ops-list li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--success); box-shadow: 0 0 4px var(--success); } .ops-list li.me { color: var(--accent); font-weight: 600; } /* ==== Settings ==== */ .settings-card { max-width: 720px; margin: 0 auto; } .settings-card fieldset { border: 1px solid var(--border); border-radius: 8px; padding: 12px 16px; margin-bottom: 14px; } .settings-card legend { padding: 0 6px; color: var(--accent); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; } .settings-card label { display: block; margin: 10px 0; font-size: 12px; color: var(--text-muted); } .settings-card input, .settings-card select { width: 100%; background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; margin-top: 4px; font-size: 14px; } .settings-card .row { display: flex; gap: 10px; align-items: center; margin-top: 10px; } .login-card.wide { width: 680px; } #contest-screen .login-card { flex: 1; width: auto; min-width: 400px; } /* Contest-action buttons: uniform size regardless of primary/ghost class */ #contest-create-section, #contest-list-create-section, #contest-list-create-private-section { display: flex; gap: 8px; } #contest-create-section button, #private-contest-create-section button, #contest-list-create-section button, #contest-list-create-private-section button { padding: 5px 12px; font-size: 12px; flex: 1; justify-content: center; } #global-settings-screen { align-items: flex-start; overflow-y: auto; padding: 32px 40px; } #global-settings-screen .login-card { width: 100%; max-width: none; } .login-card label { display: block; margin: 14px 0 4px; font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; } .login-card input + label { margin-top: 14px; } .rig-bar { display: flex; align-items: center; gap: 12px; padding-bottom: 10px; margin-bottom: 6px; border-bottom: 1px solid var(--border); } .rig-bar label { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); } .rig-bar select { background: var(--bg-elev-2); border: 1px solid var(--border); color: var(--text); border-radius: 6px; padding: 6px 10px; } .rig-list { list-style: none; margin: 0; padding: 0; } .rig-list li { padding: 8px 10px; border-radius: 6px; background: var(--bg-elev-2); border: 1px solid var(--border); margin-bottom: 6px; font-size: 12px; cursor: pointer; } .rig-list li:hover { border-color: var(--accent); } .rig-list li.selected { border-color: var(--accent); background: var(--accent-dim); } .rig-list .rig-name { font-weight: 600; color: var(--text); } .rig-list .rig-data { color: var(--text-muted); font-size: 11px; margin-top: 2px; } .rig-list .in-use { color: var(--warn); font-size: 11px; margin-top: 2px; } .rig-list .in-use-other { color: var(--text-muted); font-size: 11px; margin-top: 2px; font-style: italic; } .rig-list .rig-err { color: var(--error); font-size: 11px; margin-top: 2px; } .rig-list .dummy-badge { color: var(--text-muted); font-size: 11px; font-weight: 400; } .dummy-rig-row { align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--border); } .dummy-rig-row:last-child { border-bottom: none; } .dummy-rig-name { font-weight: 600; } /* Stash tab */ .stash-list { list-style: none; margin: 0; padding: 0; } .stash-item { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; border-radius: 6px; background: var(--bg-elev-2); border: 1px solid var(--border); margin-bottom: 6px; cursor: pointer; } .stash-item:hover { border-color: var(--accent); background: var(--accent-dim); } .stash-main { flex: 1; min-width: 0; } .stash-line1 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; font-size: 13px; color: var(--text); } .stash-line1 strong { color: var(--accent); } .stash-line1 .stash-freq { color: var(--text); font-variant-numeric: tabular-nums; } .stash-line1 .stash-band, .stash-line1 .stash-mode { color: var(--text-muted); font-size: 11px; } .stash-line2 { margin-top: 2px; } .stash-delete-btn { flex: 0 0 auto; color: var(--error); border-color: var(--error); padding: 2px 8px; line-height: 1.2; font-size: 14px; } .stash-delete-btn:hover { background: var(--error); color: #fff; } .stash-count-badge { display: inline-block; margin-left: 6px; padding: 0 6px; min-width: 16px; height: 16px; line-height: 16px; text-align: center; font-size: 10px; font-weight: 700; border-radius: 8px; background: var(--accent); color: #fff; } .stash-count-badge.hidden { display: none; } .tab-perm { display: none; } .tab-perm.visible { display: inline-flex; } .perm-required[data-perm-denied="1"] { display: none !important; } #users-table { width: 100%; border-collapse: collapse; } #users-table th, #users-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); font-size: 13px; } #users-table th { color: var(--text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; } #users-table td.actions { text-align: right; white-space: nowrap; } #users-table button { margin-left: 4px; } .badge { display: inline-block; background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: 999px; padding: 2px 8px; font-size: 11px; margin-right: 4px; } .badge.admin { color: var(--accent); border-color: var(--accent); } .badge.locked { color: var(--error); border-color: var(--error); } .badge.disabled { color: var(--text-muted); } .role-card { background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; } .role-card .role-head { display: flex; justify-content: space-between; align-items: center; } .role-card .role-name { font-weight: 600; color: var(--accent); } .role-card .perms { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .role-card .perm-chip { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--bg-elev); border: 1px solid var(--border); } .modal-root { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.6); z-index: 100; } .modal-card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 10px; padding: 20px 24px; min-width: 360px; max-width: 520px; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow); } .modal-card.modal-wide { max-width: min(860px, 92vw); width: min(860px, 92vw); } .modal-card h3 { margin: 0 0 12px; color: var(--accent); } .modal-card label { display: block; margin: 10px 0 4px; font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; } .modal-card input, .modal-card select { width: 100%; background: var(--bg-elev-2); border: 1px solid var(--border); color: var(--text); border-radius: 6px; padding: 8px 10px; } /* Log column editor */ .log-cols-editor { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; } .log-col-item { display: flex; align-items: center; gap: 10px; padding: 5px 8px; background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: 6px; } .log-col-item.dragging { opacity: 0.35; } .log-col-drag { cursor: grab; color: var(--text-muted); user-select: none; font-size: 13px; } .log-col-label { flex: 1; font-size: 13px; } .modal-card .modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; position: sticky; bottom: -20px; background: var(--bg-elev); padding: 12px 0 4px; border-top: 1px solid var(--border); z-index: 1; } .modal-card .perm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; } .modal-card .perm-grid label { display: flex; align-items: center; gap: 6px; font-size: 12px; text-transform: none; letter-spacing: 0; color: var(--text); margin: 0; } /* Read-only contest settings modal — disable all interactive widgets */ form.contest-modal-readonly .band-select-pill, form.contest-modal-readonly .cf-editor, form.contest-modal-readonly .log-col-drag, form.contest-modal-readonly .log-col-header, form.contest-modal-readonly .qso-layout-editor { pointer-events: none; opacity: 0.55; } form.contest-modal-readonly .band-select-pill { cursor: default; } .confirm-card { min-width: 300px; max-width: 420px; } .confirm-msg { margin: 0 0 4px; line-height: 1.5; } button.danger { background: var(--error); color: #fff; border: 0; border-radius: 6px; padding: 6px 14px; cursor: pointer; font-weight: 600; } button.danger:hover { background: #c62828; } .snippet { background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: 6px; padding: 10px 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--text); white-space: pre; overflow-x: auto; } code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--bg-elev-2); padding: 1px 5px; border-radius: 4px; } /* ==== Contest picker ==== */ .contest-picker-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; max-height: 360px; overflow-y: auto; } .contest-picker-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; transition: border-color .15s, background .15s; } .contest-picker-item:hover { border-color: var(--accent); background: var(--accent-dim); } .contest-picker-item.finished { opacity: 0.7; } .contest-picker-name { color: var(--accent); font-size: 18px; font-weight: 700; letter-spacing: 0.04em; } .contest-picker-call { font-size: 13px; color: var(--text-muted); margin-top: 2px; letter-spacing: 0.06em; } .contest-picker-status { font-size: 11px; padding: 2px 8px; border-radius: 999px; border: 1px solid; white-space: nowrap; } .contest-picker-status.open { color: var(--success); border-color: var(--success); } .contest-picker-status.finished { color: var(--text-muted); border-color: var(--border); } .status-toggle-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; border-radius: 999px; border: 1px solid; cursor: pointer; font-size: 12px; font-weight: 600; background: transparent; transition: opacity 0.15s; } .status-toggle-pill:hover { opacity: 0.7; } .status-toggle-pill.open { color: var(--success); border-color: var(--success); } .status-toggle-pill.finished { color: var(--text-muted); border-color: var(--border); } .status-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; } .status-toggle-arrow { opacity: 0.6; font-size: 14px; } button.contest-edit-pill { display: inline-flex; align-items: center; padding: 2px 8px; font-size: 13px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-elev); color: var(--text-muted); cursor: pointer; opacity: 0; transition: opacity .15s, border-color .15s, color .15s; margin: 0; width: auto; font-weight: normal; } .contest-picker-item:hover .contest-edit-pill { opacity: 1; } button.contest-edit-pill:hover { border-color: var(--accent) !important; color: var(--accent) !important; background: var(--accent-dim) !important; } .contest-access-indicator { font-size: 13px; opacity: 0.7; line-height: 1; } .access-user-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--border); } .access-user-row:last-child { border-bottom: none; } .access-user-row button { flex-shrink: 0; width: auto; margin: 0; padding: 2px 10px; font-size: 12px; } /* ==== Share-link list (inside Share configuration modal) ==== */ .share-list-rows { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; } .share-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: 4px; } .share-row-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; } .share-row-url { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .share-row-actions { display: flex; gap: 6px; flex-shrink: 0; } .share-row-actions button { margin: 0; } /* ==== Contest picker toolbar ==== */ .contest-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; } .contest-filter-bar { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .cpill-sep { width: 1px; height: 14px; background: var(--border); margin: 0 4px; flex-shrink: 0; } /* Override .login-card button for toolbar controls */ .contest-toolbar button, .cpill, .cvbtn { width: auto !important; margin-top: 0 !important; padding: 4px 11px; border-radius: 999px; font-size: 12px; background: var(--bg-elev-2); border: 1px solid var(--border); color: var(--text-muted); cursor: pointer; transition: border-color .15s, color .15s, background .15s; } .cpill:hover, .cvbtn:hover { border-color: var(--accent); color: var(--text); } .cpill.active, .cvbtn.active { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); } .contest-view-toggle { display: flex; gap: 4px; } /* ==== Contest list view ==== */ .contest-list-table { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; } .clt-head { display: grid; grid-template-columns: 1fr 110px 76px 92px 100px 36px; align-items: center; padding: 7px 12px; background: var(--bg-elev-2); border-bottom: 1px solid var(--border); font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; user-select: none; } .clt-head [data-sort] { cursor: pointer; display: flex; align-items: center; gap: 3px; } .clt-head [data-sort]:hover { color: var(--text); } .clt-head [data-sort]::after { content: '↕'; opacity: 0.35; font-size: 10px; } .clt-head [data-sort].sort-asc::after { content: '↑'; opacity: 1; color: var(--accent); } .clt-head [data-sort].sort-desc::after { content: '↓'; opacity: 1; color: var(--accent); } #contest-list-body { max-height: 380px; overflow-y: auto; } .cl-row { display: grid; grid-template-columns: 1fr 110px 76px 92px 100px 36px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background .12s; font-size: 13px; } .cl-row:last-child { border-bottom: none; } .cl-row:hover { background: var(--accent-dim); } .cl-row.finished { opacity: 0.65; } .cl-row:hover .contest-edit-pill { opacity: 1; } .cl-row:hover .contest-access-pill { opacity: 1; } .cl-col { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .cl-name { color: var(--accent); font-weight: 600; font-size: 14px; } .cl-call { color: var(--text-muted); font-size: 13px; letter-spacing: 0.06em; } .cl-date, .cl-activity { color: var(--text-muted); font-size: 12px; } .cl-actions { display: flex; justify-content: flex-end; align-items: center; } .cl-priv-badge { display: inline-block; font-size: 10px; padding: 1px 5px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-muted); margin-left: 6px; vertical-align: middle; } .cl-empty { padding: 20px; text-align: center; color: var(--text-muted); font-size: 13px; } .contest-list-actions { display: flex; gap: 8px; margin-top: 10px; } .contest-list-actions button { width: auto !important; margin-top: 0 !important; } /* ==== Contest columns (public / private) ==== */ .contest-columns { display: flex; gap: 20px; align-items: flex-start; } .contest-col { flex: 1; min-width: 0; } .contest-col-private { border-left: 1px solid var(--border); padding-left: 20px; } .contest-col-heading { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px; } /* ==== Contest screen two-column layout ==== */ .contest-screen-layout { display: flex; gap: 20px; align-items: flex-start; /* Stretch across the available width; the middle card (flex: 1) absorbs the extra space while the side panels keep their natural width. */ width: 100%; max-width: 1800px; } .contest-screen-side { display: flex; flex-direction: column; gap: 20px; width: 240px; flex-shrink: 0; } .online-panel { background: var(--bg-elev); padding: 24px 28px; border-radius: 12px; box-shadow: var(--shadow); border: 1px solid var(--border); } .online-panel-title { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 14px; } .online-operators-list { display: flex; flex-direction: column; } .online-op { display: flex; flex-direction: column; padding: 5px 0; border-bottom: 1px solid var(--border); } .online-op:last-child { border-bottom: none; } .online-op-call { font-size: 13px; font-weight: 600; color: var(--accent); } .online-op.me .online-op-call { color: var(--fg); } .online-op-location { font-size: 11px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ==== Download Helper nav button ==== */ .nav-pill-btn-download { background: linear-gradient(135deg, rgba(79,195,247,0.15), rgba(79,195,247,0.08)); border: 1px solid rgba(79,195,247,0.35) !important; color: #4fc3f7 !important; margin-top: 6px; padding: 10px 14px !important; font-weight: 600; } .nav-pill-btn-download:hover { background: linear-gradient(135deg, rgba(79,195,247,0.25), rgba(79,195,247,0.15)) !important; } /* ==== Download Helper modal ==== */ .dl-os-grid { display: flex; gap: 14px; justify-content: center; margin-bottom: 8px; } .dl-os-btn { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 20px 28px; background: var(--bg-elev-2); border: 2px solid var(--border); border-radius: 12px; color: var(--text); cursor: pointer; transition: border-color 0.15s, background 0.15s; min-width: 110px; position: relative; } .dl-os-btn:hover { border-color: var(--accent); background: rgba(79,195,247,0.08); } .dl-os-btn.dl-os-detected { border-color: var(--accent); } .dl-os-icon { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; } .dl-os-icon svg { width: 44px; height: 44px; } .dl-os-pill svg { width: 16px; height: 16px; vertical-align: text-bottom; margin-right: 2px; } .dl-os-label { font-size: 14px; font-weight: 600; } .dl-os-badge { position: absolute; top: -8px; right: -8px; background: var(--accent); color: #000; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 2px 6px; border-radius: 999px; } .dl-step2-header { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; } .dl-step2-header h3 { flex: 1; } .dl-os-pill { font-size: 13px; font-weight: 600; color: var(--accent); background: rgba(79,195,247,0.1); border: 1px solid rgba(79,195,247,0.3); border-radius: 999px; padding: 3px 12px; } .dl-apps-list { display: flex; flex-direction: column; gap: 12px; } .dl-btn-group { display: flex; flex-direction: column; align-items: stretch; gap: 4px; width: 100%; } .dl-recommended-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--accent); text-align: center; } .dl-btn-row { display: flex; flex-direction: column; align-items: stretch; gap: 6px; } .dl-recommended-box { border: 2px solid rgba(79,195,247,0.55); background: rgba(79,195,247,0.07); border-radius: 8px; padding: 6px 8px; } .dl-appimage-pill { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #000; background: var(--accent); border-radius: 999px; padding: 3px 9px; white-space: nowrap; align-self: center; } .dl-app-card { display: flex; align-items: flex-start; gap: 16px; background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: 10px; padding: 16px 18px; } .dl-app-card-dim { opacity: 0.45; } .dl-app-icon { font-size: 32px; line-height: 1; flex-shrink: 0; margin-top: 2px; } .dl-app-body { flex: 1; min-width: 0; } .dl-app-name { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 4px; } .dl-app-variant { font-weight: 400; color: var(--text-muted); font-size: 13px; } .dl-app-desc { font-size: 13px; color: var(--text-muted); line-height: 1.5; } .dl-app-actions { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; width: 220px; } .dl-app-download-btn { display: block; width: 100%; box-sizing: border-box; text-align: center; padding: 7px 14px; background: var(--accent); color: #000; font-weight: 700; font-size: 12px; border-radius: 6px; text-decoration: none; white-space: nowrap; } .dl-app-download-btn:hover { background: #81d4fa; } .dl-app-unavail { font-size: 12px; color: var(--text-muted); white-space: nowrap; } /* ==== Contest screen nav pill bar (left sidebar) ==== */ .contest-nav-pill { display: flex; flex-direction: column; gap: 1px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 14px; padding: 7px 6px; align-self: flex-start; flex-shrink: 0; width: fit-content; min-width: 148px; box-shadow: var(--shadow); } .contest-nav-pill .nav-pill-btn { display: flex; align-items: center; gap: 7px; padding: 6px 8px; border-radius: 8px; background: transparent; border: none; color: var(--text); cursor: pointer; font-size: 12px; text-align: left; width: 100%; transition: background 0.12s; } .contest-nav-pill .nav-pill-btn:hover { background: var(--accent-dim); color: var(--accent); } .contest-nav-pill .nav-pill-icon { font-size: 12px; width: 14px; text-align: center; flex-shrink: 0; opacity: 0.7; } .contest-nav-pill .nav-pill-btn:hover .nav-pill-icon { opacity: 1; } .contest-nav-pill .nav-divider { height: 1px; background: var(--border); margin: 5px 4px; } /* ==== Admin screens (Contests, Users, Audit, Feature Requests) ==== */ .admin-screen { display: flex; flex-direction: column; height: 100vh; background: var(--bg); overflow: hidden; } .admin-screen-header { display: flex; align-items: center; gap: 16px; padding: 14px 24px; background: var(--bg-elev); border-bottom: 1px solid var(--border); flex-shrink: 0; } .admin-screen-header h1 { margin: 0; font-size: 20px; color: var(--accent); font-weight: 600; } .admin-screen-header .admin-back-btn { font-size: 13px; } .admin-screen-body { flex: 1; overflow-y: auto; padding: 18px 24px; } /* ==== DOK Cache screen ==== */ .dok-cache-header-actions { display: flex; gap: 8px; margin-left: auto; } .dok-cache-body { display: flex; flex-direction: column; gap: 0; max-width: 1100px; } .dok-cache-add-row { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; } .dok-add-input { padding: 6px 10px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 6px; color: var(--text); font-size: 13px; width: 160px; } .dok-add-input-short { width: 90px; } .dok-search-input { padding: 6px 10px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 6px; color: var(--text); font-size: 13px; width: 200px; margin-left: auto; } .dok-status { min-width: 80px; } .dok-cache-table-wrap { overflow-x: auto; border-radius: 8px; border: 1px solid var(--border); } .dok-cache-table { width: 100%; border-collapse: collapse; font-size: 13px; } .dok-cache-table thead th { background: var(--bg-elev); padding: 10px 14px; text-align: left; font-weight: 600; color: var(--text-muted); border-bottom: 1px solid var(--border); white-space: nowrap; } .dok-cache-table tbody tr:hover { background: rgba(255,255,255,0.03); } .dok-cache-table tbody tr + tr td { border-top: 1px solid var(--border); } .dok-cache-table td { padding: 8px 14px; } .dok-col-call { font-weight: 600; font-family: monospace; font-size: 14px; } .dok-col-dok { color: var(--accent); font-weight: 600; } .dok-col-updated { font-size: 11px; white-space: nowrap; } .dok-col-action { text-align: right; } /* ==== Changelog ==== */ .changelog-entry { padding: 14px 0; border-bottom: 1px solid var(--border); } .changelog-entry:last-child { border-bottom: none; } .changelog-version-row { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; } .changelog-version { font-size: 13px; font-weight: 600; color: var(--accent); } .changelog-date { font-size: 11px; color: var(--text-muted); } .changelog-text { font-size: 14px; } /* ==== Contest readonly banner ==== */ .contest-readonly-banner { background: rgba(255, 183, 77, 0.12); border: 1px solid var(--warn); color: var(--warn); border-radius: 8px; padding: 8px 14px; margin-bottom: 10px; font-size: 13px; text-align: center; } /* ==== Contests admin table ==== */ #contests-table { width: 100%; border-collapse: collapse; } #contests-table th, #contests-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); font-size: 13px; } #contests-table th { color: var(--text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; } #contests-table td.actions { text-align: right; white-space: nowrap; } #contests-table button { margin-left: 4px; } .badge.open { color: var(--success); border-color: var(--success); } .badge.finished { color: var(--text-muted); } /* ==== Export ==== */ .export-actions { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; } .export-cols { margin-top: 8px; } .export-cols-hint { margin-bottom: 8px; } .export-cols-sortable { display: flex; flex-direction: column; gap: 3px; margin-bottom: 10px; max-width: 380px; } .export-col-item { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 4px; border: 1px solid transparent; background: rgba(255,255,255,0.03); cursor: grab; user-select: none; transition: background 0.1s, border-color 0.1s; } .export-col-item:hover { background: rgba(255,255,255,0.06); } .export-col-item.dragging { opacity: 0.4; cursor: grabbing; } .export-col-item.drag-over { border-color: var(--primary); background: rgba(255,255,255,0.07); } .export-col-handle { color: var(--muted); font-size: 15px; flex-shrink: 0; line-height: 1; } .export-col-label { display: flex; align-items: center; gap: 7px; cursor: pointer; flex: 1; min-width: 0; font-size: 13px; } .export-col-label input[type="checkbox"] { margin: 0; cursor: pointer; accent-color: var(--primary); flex-shrink: 0; } .export-cols-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; } .export-cols-actions .ghost { padding: 4px 10px; font-size: 0.85em; } .export-map-toggle { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13px; cursor: pointer; } .export-map-toggle input[type="checkbox"] { accent-color: var(--primary); cursor: pointer; } #export-pdf-btn.loading { opacity: 0.6; pointer-events: none; } /* ==== Passkey ==== */ .passkey-divider { display: flex; align-items: center; gap: 10px; margin: 14px 0 10px; color: var(--text-muted); font-size: 13px; } .passkey-divider::before,.passkey-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); } .passkey-btn { width: 100%; background: var(--bg-elev-1); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 10px 16px; font-size: 14px; cursor: pointer; transition: background .15s; } .passkey-btn:hover { background: var(--bg-elev-2); } .passkey-list { display: flex; flex-direction: column; gap: 6px; } .passkey-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--bg-elev-1); border-radius: 6px; border: 1px solid var(--border); } .passkey-name { flex: 1; font-size: 14px; } button.small { padding: 4px 8px; font-size: 12px; } @media (max-width: 1180px) { .left-panel, #resizer-left { display: none; } } @media (max-width: 880px) { .layout-outer { flex-direction: column; overflow-y: auto; } .left-panel { display: none; } #resizer-left, #resizer-right, #resizer-mid { display: none; } .ops-panel { width: 100% !important; height: auto; } .entry-panel { height: auto !important; } .topbar { flex-wrap: wrap; } .topbar-left { flex-shrink: 1; min-width: 0; flex-wrap: wrap; gap: 6px; } .station-area { order: -1; width: 100%; justify-content: center; margin: 0; flex: 0 0 auto; } .topbar-right { flex-wrap: wrap; margin-left: 0; } /* Prevent flex rows from overflowing card bounds */ .rig-bar { flex-wrap: wrap; gap: 8px; } .rig-bar select { max-width: 100%; min-width: 0; box-sizing: border-box; } .entry-actions { flex-wrap: wrap; gap: 8px; } .history-header { flex-wrap: wrap; gap: 8px; } .history-header input { width: 100%; max-width: 100%; box-sizing: border-box; } .ops-tabs { flex-wrap: wrap; } /* Chat pane needs explicit flex layout + min-height so list and input are visible */ #ops-tab-chat { display: none; flex-direction: column; min-height: 280px; } #ops-tab-chat.active { display: flex; } #ops-tab-chat .chat-list { flex: 1 1 auto; min-height: 180px; } #ops-tab-chat .chat-input-row { flex: 0 0 auto; } } @media (max-width: 480px) { .op-badge { display: none; } .topbar .brand, .contest-topbar .brand { font-size: 15px; } .tabs { gap: 1px; } .tab { padding: 5px 7px; font-size: 12px; } /* Narrow the grid to prevent tiny unusable inputs */ .qso-grid { grid-template-columns: repeat(6, 1fr); } .qso-grid > label:not([style*="grid-column"]) { grid-column: span 3; } } /* ===== Mobile mode (auto-engaged on phones; manual toggle in Settings) ===== */ /* The "More fields" toggle is hidden unless mobile mode is on. */ .more-fields-btn { display: none; } body.mobile-mode .more-fields-btn { display: block; width: 100%; margin-top: 4px; margin-bottom: 8px; min-height: 40px; } body.mobile-mode .topbar { padding: 6px 8px; min-height: 48px; gap: 6px; flex-wrap: wrap; } body.mobile-mode .topbar-logo { width: 22px; height: 22px; } body.mobile-mode .topbar .brand, body.mobile-mode .contest-topbar .brand { font-size: 14px; letter-spacing: 0.02em; } body.mobile-mode .app-version { font-size: 10px; margin-left: 3px; } body.mobile-mode .back-overview-pill, body.mobile-mode .op-badge, body.mobile-mode .fr-btn, body.mobile-mode .station-id-pill { display: none; } body.mobile-mode .station-area { order: -1; width: 100%; justify-content: center; } body.mobile-mode .station-pill { padding: 3px 12px; font-size: 12px; } body.mobile-mode .station-pill .station-call { font-size: 13px; } body.mobile-mode .station-pill .station-contest-name { font-size: 10px; } body.mobile-mode .topbar-left .lang-switcher-host { display: none; } body.mobile-mode .topbar-right { gap: 4px; } body.mobile-mode .rig-status .rig-detail, body.mobile-mode .rig-status .rig-label { display: none; } body.mobile-mode .tabs { gap: 1px; flex: 1 1 auto; } body.mobile-mode .tab { padding: 8px 6px; font-size: 12px; min-height: 36px; flex: 1; } body.mobile-mode #logout-btn { padding: 4px 8px; font-size: 12px; } /* Layout: vertical stack, no map, no resizers */ body.mobile-mode .layout-outer { flex-direction: column; overflow-y: auto; } body.mobile-mode .left-panel, body.mobile-mode #resizer-left, body.mobile-mode #resizer-right, body.mobile-mode #resizer-mid { display: none; } /* Hide desktop ops-panel — its panes are reparented into the mobile sheet by JS. */ body.mobile-mode .ops-panel { display: none; } body.mobile-mode .entry-panel { height: auto !important; } body.mobile-mode .center-col { overflow: visible; } /* Reserve bottom space for the fixed nav bar so the last row isn't hidden. */ body.mobile-mode main.layout { padding-bottom: 64px; } body.mobile-mode .tab-pane { padding: 0; } /* Entry form: single column, big tap targets */ body.mobile-mode .entry-panel.card { padding: 10px; } body.mobile-mode .entry-panel h2 { font-size: 16px; margin: 6px 0; } body.mobile-mode .rig-bar { flex-wrap: wrap; gap: 6px; font-size: 12px; } body.mobile-mode .rig-bar select { max-width: 100%; min-width: 0; box-sizing: border-box; min-height: 40px; } body.mobile-mode .qso-grid { grid-template-columns: 1fr; gap: 8px; } body.mobile-mode .qso-grid > label { grid-column: span 1 !important; font-size: 11px; } body.mobile-mode .qso-grid > label > input, body.mobile-mode .qso-grid > label > select { min-height: 44px; font-size: 16px; /* prevents iOS auto-zoom on focus */ padding: 6px 10px; } /* By default, hide non-pinned fields. Mode + band stay visible (treated as essential alongside pinned RST/callsign). */ body.mobile-mode .qso-grid > label:not([data-qso-pinned="1"]):not([data-qso-field="mode"]):not([data-qso-field="band"]) { display: none; } body.mobile-mode.show-all-fields .qso-grid > label { display: flex !important; } body.mobile-mode .entry-actions { flex-direction: column; gap: 8px; } body.mobile-mode .entry-actions button { width: 100%; min-height: 48px; font-size: 14px; } body.mobile-mode .entry-actions .kbd { display: none; } /* History panel: compact rows + sticky first column */ body.mobile-mode .history-panel.card { padding: 10px; margin-top: 8px; } body.mobile-mode .history-header { flex-wrap: wrap; gap: 8px; } body.mobile-mode .history-header input { width: 100%; max-width: 100%; box-sizing: border-box; } body.mobile-mode #qso-table { font-size: 12px; } body.mobile-mode #qso-table th, body.mobile-mode #qso-table td { padding: 6px 6px; white-space: nowrap; } body.mobile-mode #qso-table th:first-child, body.mobile-mode #qso-table td:first-child { position: sticky; left: 0; background: var(--bg-elev); z-index: 1; } body.mobile-mode #qso-table thead th:first-child { background: var(--bg-elev-2); z-index: 2; } /* Settings card on mobile: full bleed */ body.mobile-mode .settings-card { padding: 12px; } body.mobile-mode #settings-form label > input, body.mobile-mode #settings-form label > select { min-height: 40px; font-size: 16px; } /* ===== Bottom-sheet nav and overlay sheet ===== */ .mobile-bottom-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; height: 56px; background: var(--bg-elev); border-top: 1px solid var(--border); z-index: 100; justify-content: space-around; align-items: stretch; padding: 0 2px; /* Respect iOS safe-area at the bottom (home indicator). */ padding-bottom: env(safe-area-inset-bottom, 0); height: calc(56px + env(safe-area-inset-bottom, 0px)); } body.mobile-mode .mobile-bottom-nav { display: flex; } .mobile-bottom-nav button { flex: 1 1 0; min-width: 0; background: none; border: 0; color: var(--text-muted); font-size: 10px; letter-spacing: 0; text-transform: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer; position: relative; padding: 4px 2px; } .mobile-bottom-nav button.active { color: var(--accent); background: rgba(79, 195, 247, 0.08); } .mobile-bottom-nav .mb-icon { font-size: 18px; line-height: 1; } .mobile-bottom-nav .mb-badge { position: absolute; top: 4px; right: calc(50% - 22px); background: var(--accent); color: #000; font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 8px; min-width: 14px; text-align: center; } .mobile-sheet { display: none; position: fixed; left: 0; right: 0; top: 48px; bottom: calc(56px + env(safe-area-inset-bottom, 0px)); background: var(--bg); z-index: 99; overflow-y: auto; padding: 12px; } .mobile-sheet.open { display: block; } .mobile-sheet > .ops-tab-pane { display: none; } .mobile-sheet > .ops-tab-pane.active { display: block; } .mobile-sheet > #ops-tab-chat.active { display: flex; flex-direction: column; min-height: 100%; } .mobile-sheet > #ops-tab-chat .chat-list { flex: 1 1 auto; min-height: 0; } .mobile-sheet > #ops-tab-chat .chat-input-row { flex: 0 0 auto; } /* ==== Audit Log ==== */ .audit-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; padding: 10px 0 14px; border-bottom: 1px solid var(--border); margin-bottom: 10px; } .audit-filters label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-muted); } .audit-filters input, .audit-filters select { background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: 4px; padding: 5px 8px; font-size: 13px; color: var(--text); min-width: 130px; } #audit-tz { min-width: 200px; max-width: 260px; } .audit-status { padding: 4px 0 8px; } .audit-level { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; text-transform: uppercase; } .audit-level-info { background: rgba(79,195,247,0.15); color: var(--accent); } .audit-level-warn { background: rgba(255,183,77,0.15); color: var(--warn); } .audit-level-error { background: rgba(239,83,80,0.15); color: var(--error); } #audit-table th.sortable { cursor: pointer; user-select: none; white-space: nowrap; } #audit-table th.sortable:hover { color: var(--accent); } #audit-table th.sort-active { color: var(--accent); } #qso-table th.sortable { cursor: pointer; user-select: none; white-space: nowrap; } #qso-table th.sortable:hover { color: var(--accent); } #qso-table th.sort-active { color: var(--accent); } #fr-table th.sortable, #my-fr-table th.sortable { cursor: pointer; user-select: none; white-space: nowrap; } #fr-table th.sortable:hover, #my-fr-table th.sortable:hover { color: var(--accent); } #fr-table th.sort-active, #my-fr-table th.sort-active { color: var(--accent); } .sort-arrow { font-size: 10px; } .mono { font-family: 'JetBrains Mono', 'Fira Mono', 'Cascadia Code', monospace; } /* ==== Duplicate / worked badge ==== */ .dup-badge { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; padding: 3px 9px; border-radius: 6px; vertical-align: middle; margin-left: 8px; } .dup-duplicate { background: var(--error); color: #fff; } .dup-worked { background: var(--warn); color: #111; } .oob-band { background: var(--warn); color: #111; } /* ==== QRZ profile pill (next to Callsign label) ==== */ .qrz-pill { display: inline-block; font-size: 8px; font-weight: 700; letter-spacing: 0.07em; padding: 1px 5px; border-radius: 999px; vertical-align: middle; margin-left: 5px; background: rgba(79, 195, 247, 0.15); color: var(--accent); border: 1px solid rgba(79, 195, 247, 0.35); text-decoration: none; transition: opacity .12s; line-height: 1.5; } .qrz-pill:hover { opacity: 0.7; } .qrz-pill.hidden { display: none; } /* ==== QRZ info bar (band pills) ==== */ .qrz-info-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 6px 10px; background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: 6px; margin-bottom: 8px; min-height: 36px; } .band-pill { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; cursor: pointer; border: 1.5px solid transparent; user-select: none; transition: opacity .12s, transform .1s; letter-spacing: 0.03em; } .band-pill:hover { opacity: 0.85; transform: scale(1.06); } .band-pill.bp-current { border-color: #4fc3f7 !important; box-shadow: 0 0 0 1.5px #4fc3f7; } .band-pill.bp-new { background: rgba(102,187,106,0.18); border-color: #66bb6a; color: #a5d6a7; } .band-pill.bp-other { background: rgba(255,183,77,0.18); border-color: #ffb74d; color: #ffe082; } .band-pill.bp-dup { background: rgba(239,83,80,0.22); border-color: #ef5350; color: #ef9a9a; } .band-pill.bp-inactive { background: transparent; border-color: var(--border); color: var(--text-muted); } /* ==== Band-conflict stripe ==== */ @keyframes band-conflict-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } } .band-conflict-banner { margin: 8px 0 4px; border-radius: 4px; overflow: hidden; animation: band-conflict-pulse 2.4s ease-in-out infinite; } .band-conflict-banner div { background: rgba(239, 83, 80, 0.18); border: 1px solid rgba(239, 83, 80, 0.55); border-radius: 4px; color: #ef9a9a; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-align: center; padding: 5px 8px; margin-bottom: 4px; } .band-conflict-banner div:last-child { margin-bottom: 0; } /* ==== Band selector in contest modal ==== */ .band-select-grid { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .band-select-pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; cursor: pointer; border: 1.5px solid var(--border); color: var(--text-muted); background: transparent; user-select: none; transition: background .12s, border-color .12s, color .12s; } .band-select-pill.selected { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); } /* ==== Contest start/end date pickers ==== */ .contest-dates-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; } .contest-dates-cell { display: flex; flex-direction: column; gap: 3px; flex: 1 1 160px; margin: 0; } .contest-date-input-wrap { display: inline-flex; align-items: center; gap: 6px; } .contest-date-input-wrap input[type="date"] { flex: 1 1 auto; } .contest-date-clear { padding: 2px 8px; line-height: 1; } /* ==== Left sidebar panel ==== */ .left-pic-area { width: 100%; display: flex; justify-content: center; padding-top: 2px; } .left-pic { width: 100%; height: auto; max-height: 200px; border-radius: 6px; object-fit: contain; border: 1px solid var(--border); background: var(--bg); display: block; } .left-pic-placeholder { width: 100%; height: 130px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg-elev-2); display: flex; align-items: center; justify-content: center; color: var(--border); } .left-pic-placeholder svg { width: 56px; height: 56px; } .map-canvas { width: 100%; height: 160px; border-radius: 4px; border: 1px solid var(--border); overflow: hidden; flex-shrink: 0; } /* Dark Leaflet overrides */ .map-canvas .leaflet-tile-pane { filter: brightness(0.85) saturate(0.9); } .map-canvas .leaflet-control-attribution { font-size: 8px; background: rgba(0,0,0,0.5) !important; color: #888 !important; } .map-canvas .leaflet-control-attribution a { color: #aaa !important; } .map-canvas .leaflet-control-zoom a { background: var(--bg-elev) !important; color: var(--text) !important; border-color: var(--border) !important; } .map-canvas .leaflet-control-zoom a:hover { background: var(--bg-elev-2) !important; } .bearing-display { text-align: center; width: 100%; padding: 4px 0; } .bearing-value { font-size: 26px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; } /* ===== Feature additions ===== */ /* Contest station identifier — separate, smaller pill to the LEFT of the station pill. */ .station-id-pill { display: flex; align-items: center; background: var(--bg-elev-2); border: 1px solid var(--accent-dim); border-radius: 10px; padding: 4px 10px; font-size: 12px; font-weight: 700; color: var(--accent); letter-spacing: 0.04em; white-space: nowrap; flex: 0 0 auto; } .station-id-pill.hidden { display: none; } /* Operator list — release-rig button */ .op-release-btn { background: transparent; border: 1px solid var(--border); color: var(--text-muted); border-radius: 4px; font-size: 11px; padding: 1px 6px; margin-left: 6px; cursor: pointer; } .op-release-btn:hover { background: var(--error); color: white; border-color: var(--error); } /* QSO form — required custom field gets a light-red rim */ .qso-cf { display: flex; flex-direction: column; flex: 1 1 100px; min-width: 100px; font-size: 12px; } .qso-cf input, .qso-cf select { margin-top: 2px; } .qso-cf-required input, .qso-cf-required select { border: 1px solid #ef9a9a !important; box-shadow: 0 0 0 1px rgba(239, 154, 154, 0.3); } /* Custom-fields editor inside contest modal */ .cf-editor { border: 1px solid var(--border); border-radius: 4px; padding: 6px; background: var(--bg-elev-2); margin-bottom: 6px; } .cf-editor-rows { display: flex; flex-direction: column; gap: 4px; } .cf-row { display: flex; flex-direction: column; gap: 6px; padding: 8px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 4px; } .cf-row-fields { display: grid; grid-template-columns: 1fr 1fr 90px 1fr auto; gap: 4px; align-items: center; min-width: 0; } .cf-row-opts { display: flex; gap: 6px; flex-wrap: wrap; } .cf-row input, .cf-row select { background: var(--bg-elev-2); border: 1px solid var(--border); color: var(--text); padding: 3px 6px; border-radius: 3px; font-size: 12px; min-width: 0; } .cf-row input:focus, .cf-row select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-dim); } .cf-row .cf-del { font-size: 12px; padding: 2px 8px; } .cf-req { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; background: var(--bg); border: 1px solid var(--border); border-radius: 4px; font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; cursor: pointer; user-select: none; transition: border-color 0.12s, color 0.12s, background 0.12s; } .cf-req:hover { border-color: var(--accent); color: var(--text); } .cf-req .cf-required { accent-color: var(--accent); margin: 0; cursor: pointer; } .cf-req:has(.cf-required:checked) { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); } .cf-add-btn { margin-top: 6px; font-size: 12px; } .cf-adif-hint { margin-top: 8px; line-height: 1.4; } /* Chat panel — pin top + bottom, scroll only the message list */ #ops-tab-chat.active { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow: hidden; } .chat-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 6px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 4px; } .chat-msg { font-size: 12px; line-height: 1.35; display: flex; flex-direction: column; gap: 1px; } .chat-msg .chat-meta { font-size: 10px; color: var(--text-muted); } .chat-msg .chat-meta strong { color: var(--accent); font-weight: 600; } .chat-msg .chat-body { white-space: pre-wrap; word-break: break-word; } /* Inline "config offer" card rendered when a chat message carries the [noctalum-cfg:TOKEN:Name] sentinel prefix (FR #23). */ .chat-msg .chat-config-offer { white-space: normal; } .chat-cfg-card { margin-top: 4px; padding: 8px 10px; background: var(--accent-dim); border: 1px solid var(--accent); border-radius: 6px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; } .chat-cfg-card .chat-cfg-label { font-size: 13px; } .chat-input-row { display: flex; gap: 6px; padding: 6px; box-sizing: border-box; width: 100%; align-items: stretch; flex: 0 0 auto; } .chat-input-row input { flex: 1 1 auto; min-width: 0; background: var(--bg-elev-2); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; font-size: 12px; box-sizing: border-box; } .chat-input-row input::placeholder { color: var(--text-muted); } .chat-input-row button { flex: 0 0 auto; font-size: 12px; padding: 4px 10px; white-space: nowrap; } /* Statistics tab */ .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; padding: 12px; } .stats-card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 6px; padding: 10px; color: var(--text); } .stats-card h3 { margin: 0 0 8px 0; font-size: 13px; color: var(--accent); } .stats-num { font-size: 22px; font-weight: 700; color: var(--accent); } .stats-svg { width: 100%; height: auto; display: block; } /* ===== New QSO mask grid ===== */ .qso-grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: auto; gap: 8px 10px; align-items: start; } .qso-grid > label { display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; min-width: 0; /* Fallback: items without explicit grid placement span 3 columns */ grid-column: span 3; } .qso-grid > label > input, .qso-grid > label > select { width: 100%; min-width: 0; /* let datetime-local etc. shrink to the grid cell width */ box-sizing: border-box; } /* ===== Layout editor (in contest modal) ===== */ .layout-editor { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 44px; gap: 6px; background: repeating-linear-gradient(0deg, transparent 0, transparent 43px, var(--border) 43px, var(--border) 44px), repeating-linear-gradient(90deg, transparent 0, transparent calc((100% - 66px) / 12 - 1px), var(--border) calc((100% - 66px) / 12 - 1px), var(--border) calc((100% - 66px) / 12)); background-size: 100% 50px, 100% 100%; border: 1px solid var(--border); border-radius: 6px; padding: 6px; user-select: none; touch-action: none; } .layout-tile { position: relative; background: var(--bg-elev-2); border: 1px solid var(--accent-dim); border-radius: 4px; padding: 4px 14px; font-size: 11px; color: var(--text); display: flex; align-items: center; justify-content: center; gap: 6px; cursor: grab; white-space: nowrap; overflow: hidden; } .layout-tile.mandatory { border-color: var(--accent); } .layout-tile.dragging { cursor: grabbing; z-index: 5; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35); } .layout-tile-label { overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto; text-align: center; pointer-events: none; } .layout-tile-resize-handle { position: absolute; top: 0; bottom: 0; width: 8px; cursor: ew-resize; z-index: 1; } .layout-tile-resize-handle[data-resize="left"] { left: 0; } .layout-tile-resize-handle[data-resize="right"] { right: 0; } .layout-tile-resize-handle::after { content: ''; position: absolute; top: 25%; bottom: 25%; left: 50%; width: 2px; margin-left: -1px; background: transparent; border-radius: 1px; transition: background 0.12s; } .layout-tile-resize-handle:hover::after, .layout-tile.dragging .layout-tile-resize-handle::after { background: var(--accent); } .layout-editor-help { font-size: 11px; color: var(--text-muted); margin-top: 4px; } .layout-suggested-wrap { margin-top: 8px; border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; background: var(--bg-elev-2); } .layout-suggested-title { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; } .layout-suggested { display: flex; flex-wrap: wrap; gap: 6px; min-height: 24px; } .layout-suggested-tile { background: var(--bg-elev); border: 1px dashed var(--accent); border-radius: 4px; padding: 4px 10px; font-size: 11px; color: var(--text); cursor: grab; user-select: none; white-space: nowrap; } .layout-suggested-tile:hover { background: var(--accent-dim); color: var(--accent); } .layout-suggested-tile:active { cursor: grabbing; } .layout-context-menu { position: fixed; z-index: 1000; background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: 4px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35); padding: 4px 0; min-width: 120px; } .layout-context-item { display: block; width: 100%; background: transparent; border: none; text-align: left; padding: 6px 12px; font: inherit; font-size: 12px; color: var(--text); cursor: pointer; } .layout-context-item:hover { background: var(--accent-dim); color: var(--accent); } /* ==== Language switcher ==== */ .lang-switcher { position: relative; display: inline-flex; align-items: center; } .lang-switcher .lang-switcher-btn { background: transparent; border: 1px solid var(--border); border-radius: 6px; padding: 4px 8px; cursor: pointer; color: var(--text); font-size: 18px; line-height: 1; display: inline-flex; align-items: center; gap: 4px; min-height: 30px; margin-top: 0; width: auto; font-weight: normal; } .lang-switcher .lang-switcher-btn:hover { background: var(--bg-elev-2); border-color: var(--accent); } .lang-switcher .lang-switcher-btn .lang-flag { font-size: 20px; line-height: 1; } .lang-switcher-menu { position: absolute; top: calc(100% + 4px); right: 0; z-index: 500; background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 4px 14px rgba(0,0,0,0.45); padding: 4px; min-width: 160px; display: flex; flex-direction: column; gap: 2px; } .lang-switcher .lang-switcher-opt { display: flex; align-items: center; gap: 8px; background: transparent; border: 0; padding: 6px 10px; text-align: left; cursor: pointer; border-radius: 4px; color: var(--text); font-size: 13px; margin-top: 0; width: 100%; font-weight: normal; } .lang-switcher .lang-switcher-opt:hover { background: var(--accent-dim); color: var(--accent); } .lang-switcher .lang-switcher-opt.active { background: var(--accent-dim); color: var(--accent); font-weight: 600; } .lang-switcher .lang-switcher-opt .lang-flag { font-size: 18px; line-height: 1; } .lang-switcher .lang-switcher-opt .lang-name { flex: 1; } .lang-switcher .lang-switcher-opt .lang-check { font-size: 12px; opacity: 0; } .lang-switcher .lang-switcher-opt.active .lang-check { opacity: 1; color: var(--accent); } .lang-switcher .lang-switcher-btn .lang-abbr { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; color: var(--accent); } /* Position language switcher on login/setup/contest cards (top-right) */ .login-card .lang-switcher-host { position: absolute; top: 12px; right: 12px; } .login-card { position: relative; } .contest-header-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 8px; } .contest-header-row h1 { margin: 0; flex: 1; } /* Inline language switcher in topbar */ .topbar-left .lang-switcher-host { margin-left: 8px; } /* ----- contest participants ----- */ .participants-section { margin-bottom: 16px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; } .participants-section-header { background: var(--bg-elev-2); padding: 8px 12px; font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; } .participants-list { padding: 8px 12px; display: flex; flex-direction: column; gap: 6px; } .participant-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; } .participant-name { flex: 1; font-size: 13px; } .participant-pills { display: flex; gap: 4px; } .participant-actions { display: flex; gap: 4px; align-items: center; } .participant-actions button { font-size: 11px; padding: 2px 7px; margin: 0; min-height: unset; height: auto; width: auto; } .participant-role-pill, .participant-status-pill { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; border: 1px solid; } .participant-role-pill.owner { color: var(--warn); border-color: var(--warn); } .participant-role-pill.user { color: var(--text-muted); border-color: var(--border); } .participant-status-pill.active { color: var(--success); border-color: var(--success); } .participant-status-pill.pending { color: var(--text-muted); border-color: var(--border); } .contest-join-req-btn { font-size: 11px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--accent); background: transparent; color: var(--accent); cursor: pointer; white-space: nowrap; width: auto; min-height: unset; height: auto; margin: 0; font-weight: 600; } .contest-join-req-btn:hover { background: var(--accent-dim); } .contest-join-req-btn:disabled { opacity: 0.5; cursor: default; } /* Contest settings button in topbar */ .contest-settings-btn { font-size: 16px; padding: 5px 8px; min-height: unset; height: 32px; width: auto; margin: 0; border-radius: 8px; color: var(--text-muted); border: 1px solid var(--border); flex-shrink: 0; } .contest-settings-btn:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-dim); } /* ==== Deploy warning ==== */ @keyframes deploy-flash { 0%, 100% { opacity: 1; } 50% { opacity: 0.72; } } .deploy-modal-card { background: #180000; border: 3px solid #ef5350; border-radius: 12px; padding: 32px 36px; max-width: 480px; width: 90vw; text-align: center; box-shadow: 0 0 40px rgba(239,83,80,0.45); animation: deploy-flash 2.5s ease-in-out infinite; } .deploy-modal-title { font-size: 17px; font-weight: 700; letter-spacing: 0.07em; color: #ef5350; text-transform: uppercase; margin-bottom: 14px; } .deploy-modal-body { font-size: 14px; color: #ffcdd2; line-height: 1.55; margin-bottom: 18px; } .deploy-modal-timer { font-size: 36px; font-weight: 700; color: #ef5350; margin-bottom: 26px; font-variant-numeric: tabular-nums; letter-spacing: 0.03em; } .deploy-modal-ok { background: #ef5350; color: #fff; border: none; border-radius: 6px; padding: 10px 36px; font-size: 14px; font-weight: 700; letter-spacing: 0.05em; cursor: pointer; text-transform: uppercase; } .deploy-modal-ok:hover { background: #c62828; } .deploy-ribbon { position: fixed; top: 0; left: 0; right: 0; z-index: 9999; height: 48px; display: flex; align-items: center; justify-content: center; padding: 0 12px; background: repeating-linear-gradient( -45deg, #f9c400 0px, #f9c400 14px, #1a1600 14px, #1a1600 28px ); animation: deploy-flash 2.5s ease-in-out infinite; } .deploy-ribbon.hidden { display: none; } body.deploy-ribbon-active { padding-top: 48px; } .deploy-ribbon-inner { background: rgba(176,0,0,0.92); color: #fff; padding: 7px 22px; border-radius: 4px; font-size: 13px; font-weight: 700; letter-spacing: 0.05em; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 95vw; } /* --- Environment ribbon (non-prod indicator) -------------------- Full-width horizontal bar pinned to the top of the viewport with black/yellow caution-tape stripes and the environment name repeated across its width. app.js reveals it and fills in the text when /api/ping reports a NOCTALUM_ENV other than "prod". Body gets .env-ribbon-active to reserve vertical space so the bar never covers real UI. Sits under .deploy-ribbon (z-index 9999): during a deploy that ribbon temporarily covers this one, which is fine — deploys are seconds long. ------------------------------------------------------------------ */ .env-ribbon { position: fixed; top: 0; left: 0; right: 0; height: 24px; z-index: 9998; pointer-events: none; user-select: none; display: flex; align-items: center; justify-content: center; overflow: hidden; white-space: nowrap; font-family: 'Inter', 'Segoe UI', Roboto, system-ui, sans-serif; font-weight: 900; font-size: 12px; letter-spacing: 0.32em; color: #111; background: repeating-linear-gradient( 45deg, #ffd400 0 14px, #111 14px 28px ); /* Thick white outline around each glyph so the label stays readable over both the yellow and the black stripes. paint-order forces the stroke to render *behind* the fill so it frames the letters instead of eating into their shapes. -webkit-text-stroke is supported across all evergreen browsers despite the prefix. */ -webkit-text-stroke: 2px #fff; paint-order: stroke fill; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.45); } .env-ribbon[hidden] { display: none; } /* Push page content down so the bar never overlays the login card, the app header, or any full-height screen. Declared *before* .deploy-ribbon-active below so its larger 48px padding wins the cascade when both classes happen to be on at once. */ body.env-ribbon-active { padding-top: 24px; }