/* jetsa web UI — one stylesheet for the login page and the app shell. The palette is lifted from the AISP-MONITOR prototype so the two products read alike; the layout is trimmed to jetsa's read + monitor scope. Dark is the default; the attribute (set early by theme.js) flips to light. */ :root, :root[data-theme="dark"] { color-scheme: dark; --bg: #0f1115; --panel: #171a20; --panel2: #1d2128; --head: #1b1f26; --sunken: #0c0f13; --hover: #222732; --line: #2a2f39; --line-strong: #3a414d; --scroll: #2f3540; --txt: #e3e6ea; --txt2: #cdd6e0; --muted: #8b929d; --faint: #5d646f; --accent: #74a3d6; --accent-hi: #8bb4e0; --accent-weak: #19222e; --on-accent: #0d1014; --green: #76b894; --red: #d98a8a; --amber: #d2b06a; --err-bg: #2a1e1f; --err-line: #7d3b3b; --err-txt: #e7b9b9; --ok-txt: #bfe3cc; } :root[data-theme="light"] { color-scheme: light; --bg: #eef1f6; --panel: #ffffff; --panel2: #f3f5f9; --head: #eceff4; --sunken: #f4f6f9; --hover: #e9edf3; --line: #dde3ec; --line-strong: #c4ccd8; --scroll: #c8d1dc; --txt: #1e293b; --txt2: #475569; --muted: #64748b; --faint: #64748b; --accent: #2563eb; --accent-hi: #1d4ed8; --accent-weak: #e8f0fe; --on-accent: #ffffff; --green: #15803d; --red: #dc2626; --amber: #b45309; --err-bg: #fef2f2; --err-line: #fecaca; --err-txt: #b91c1c; --ok-txt: #15803d; } :root { --sans: "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --mono: "Cascadia Code", Consolas, ui-monospace, monospace; } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--txt); font-family: var(--sans); font-size: 13.5px; line-height: 1.45; -webkit-font-smoothing: antialiased; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } code, .mono { font-family: var(--mono); } .ic { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; } ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-thumb { background: var(--scroll); border: 3px solid var(--bg); border-radius: 8px; } input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 40px var(--panel2) inset; -webkit-text-fill-color: var(--txt); caret-color: var(--txt); transition: background-color 9999s 0s, color 9999s 0s; } /* ---------------------------------------------------------------- login page */ .login-body { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; background-image: radial-gradient( 700px 380px at 50% -8%, rgba(116, 163, 214, 0.08), transparent 60% ); } .card { width: 100%; max-width: 400px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 28px 26px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35); } .brand { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; } .brand img { width: 22px; height: 22px; display: block; } .brand b { font-size: 17px; letter-spacing: 0.2px; } h1 { font-size: 15px; font-weight: 600; margin: 18px 0 4px; } p.sub { color: var(--muted); font-size: 13px; margin: 0 0 18px; line-height: 1.5; } label { display: block; font-size: 12px; color: var(--muted); margin: 12px 0 5px; } input, select { width: 100%; background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; color: var(--txt); font: inherit; font-size: 14px; padding: 10px 12px; } input:focus, select:focus { outline: none; border-color: var(--accent); } input.code { font-family: var(--mono); letter-spacing: 0.3em; text-align: center; font-size: 18px; } .pwfield { position: relative; } .pwfield input { padding-right: 44px; } .pwfield .eye { position: absolute; right: 3px; top: 1px; width: 38px; height: calc(100% - 2px); margin: 0; padding: 0; background: transparent; border: none; border-radius: 7px; color: var(--faint); cursor: pointer; display: flex; align-items: center; justify-content: center; } .pwfield .eye:hover { color: var(--accent); } .pwfield .eye svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; } button { width: 100%; margin-top: 18px; background: var(--accent); color: var(--on-accent); border: none; border-radius: 8px; font: inherit; font-weight: 600; font-size: 14px; padding: 11px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; } button:hover { filter: brightness(1.06); } button:disabled { opacity: 0.6; cursor: default; } .secret { margin-top: 12px; } .secret .lbl { font-size: 12px; color: var(--muted); margin-bottom: 6px; line-height: 1.5; } .secret .row { display: flex; gap: 8px; align-items: stretch; } .secret code { flex: 1; font-family: var(--mono); font-size: 13px; letter-spacing: 0.06em; background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; color: var(--txt); word-break: break-all; line-height: 1.55; } .secret .copy { width: auto; margin: 0; padding: 0 14px; font-size: 12.5px; white-space: nowrap; } .codes-copy { width: 100%; margin-top: 10px; padding: 9px 12px; font-size: 12.5px; background: var(--panel2); color: var(--txt); border: 1px solid var(--line); } .codes-copy:hover { filter: none; border-color: var(--accent); color: var(--accent); } .msg { margin-top: 14px; font-size: 13px; border-radius: 8px; padding: 9px 11px; display: none; } .msg.err { display: block; color: var(--err-txt); background: var(--err-bg); border: 1px solid var(--err-line); } .msg.ok { display: block; color: var(--ok-txt); background: rgba(118, 184, 148, 0.12); border: 1px solid rgba(118, 184, 148, 0.4); } .qr { display: flex; justify-content: center; margin: 14px 0; background: #fff; border-radius: 10px; padding: 14px; } .qr svg { width: 210px; height: 210px; max-width: 100%; } .codes { font-family: var(--mono); font-size: 12.5px; background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; padding: 12px; line-height: 1.9; color: var(--txt); column-count: 2; margin-top: 6px; } .hint { color: var(--faint); font-size: 11.5px; margin-top: 8px; line-height: 1.5; } .step { display: none; } .step.on { display: block; } .themetoggle { position: fixed; top: 14px; right: 14px; width: 32px; height: 32px; padding: 0; margin: 0; background: var(--panel); border: 1px solid var(--line); color: var(--muted); border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; } .themetoggle:hover { color: var(--txt); border-color: var(--accent); } .themetoggle svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; } /* ---------------------------------------------------------------- app shell */ header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 20px; background: var(--head); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10; } header h1 { margin: 0; font-size: 16px; } .hright { display: flex; align-items: center; gap: 10px; } .hbtn { width: auto; margin: 0; padding: 8px 12px; font-size: 12.5px; background: var(--panel); color: var(--txt2); border: 1px solid var(--line); border-radius: 8px; font-weight: 500; } .hbtn:hover { filter: none; border-color: var(--accent); color: var(--accent); } a.hbtn { display: inline-block; text-decoration: none; cursor: pointer; } .detailbtns { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; } .hbtn.icon { padding: 8px; } .userbar { color: var(--muted); font-size: 12.5px; display: flex; align-items: center; gap: 8px; } .wrap { max-width: 1200px; margin: 0 auto; padding: 20px; } .viewswitch { display: flex; gap: 8px; margin-bottom: 16px; } .vsw { width: auto; margin: 0; padding: 8px 16px; background: var(--panel); color: var(--muted); border: 1px solid var(--line); border-radius: 8px; font-weight: 500; font-size: 13px; } .vsw.active { background: var(--accent-weak); color: var(--accent); border-color: var(--accent); } .vswn { display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 17px; padding: 0 5px; border-radius: 999px; background: var(--accent-weak); color: var(--accent); font-size: 10.5px; font-weight: 700; margin-left: 4px; line-height: 1; vertical-align: middle; } .vswn:empty { display: none; } .toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; } .toolbar input, .toolbar select { width: auto; flex: 0 0 auto; font-size: 13px; padding: 8px 10px; } .toolbar input[type="text"] { flex: 1 1 240px; } .sources { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; } .srcpill { font-size: 12px; color: var(--muted); background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; } .srcpill b { color: var(--txt2); } .srcpill .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; } .dot.ok { background: var(--green); } .dot.bad { background: var(--red); } .dot.none { background: var(--faint); } .panel { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; } table { width: 100%; border-collapse: collapse; font-size: 13px; } th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: top; } th { color: var(--muted); font-weight: 600; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.04em; } tbody tr { cursor: pointer; } tbody tr:hover { background: var(--hover); } .tag { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--panel2); color: var(--txt2); border: 1px solid var(--line); } .tag.removed { color: var(--red); border-color: var(--err-line); } .tag.created { color: var(--green); } .tag.updated { color: var(--amber); } .tag.activated { color: var(--accent); } .empty { padding: 40px; text-align: center; color: var(--faint); } .mono-sm { font-family: var(--mono); font-size: 12px; color: var(--txt2); } /* modal */ .overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); display: none; align-items: center; justify-content: center; padding: 24px; z-index: 50; } .overlay.on { display: flex; } .modal { width: 100%; max-width: 720px; max-height: 85vh; overflow: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 20px 24px; } #detailOverlay .modal.sem-pending { border-color: var(--amber); } #detailOverlay .modal.sem-reviewed { border-color: var(--green); } #detailOverlay .modal.sem-ignored { border-color: var(--red); } .modal h2 { display: flex; justify-content: space-between; align-items: center; font-size: 16px; margin: 0 0 14px; } .modal .close { width: 28px; height: 28px; padding: 0; margin: 0; background: transparent; border: none; color: var(--muted); } .kv { display: grid; grid-template-columns: 140px 1fr; gap: 4px 12px; font-size: 13px; margin-bottom: 14px; } .kv dt { color: var(--muted); } .kv dd { margin: 0; color: var(--txt2); word-break: break-word; } pre.json { background: var(--sunken); border: 1px solid var(--line); border-radius: 8px; padding: 12px; font-family: var(--mono); font-size: 12px; color: var(--txt2); overflow: auto; max-height: 300px; } .hist { margin-top: 8px; } .hist-row { display: flex; gap: 10px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; } .hist-row .when { color: var(--faint); font-family: var(--mono); font-size: 11.5px; } /* stat summary cards (items view front page) */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 16px; } .stat { background: var(--panel); border: 1px solid var(--line); border-radius: 9px; padding: 13px 15px; cursor: pointer; font: inherit; color: inherit; text-align: left; width: 100%; display: block; transition: border-color 0.12s; } .stat:hover { border-color: var(--line-strong); } .stat .n { font-size: 23px; font-weight: 600; letter-spacing: 0.3px; } .stat .l { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; margin-top: 3px; } .stat.on { border-color: var(--accent); background: var(--accent-weak); } .stat.amber.on { border-color: var(--amber); } .stat.amber.on .n { color: var(--amber); } .stat.green.on { border-color: var(--green); } .stat.green.on .n { color: var(--green); } .stat.red.on { border-color: var(--red); } .stat.red.on .n { color: var(--red); } /* monitors */ .monadd { display: flex; gap: 8px; flex-wrap: wrap; } .monadd input, .monadd select { width: auto; font-size: 13px; padding: 8px 10px; } .monadd input { flex: 1 1 200px; } .monadd button { width: auto; margin: 0; padding: 8px 16px; } .monsearch { width: 100%; font-size: 13px; padding: 8px 10px; flex: none; } .rowbtn { width: auto; margin: 0; padding: 4px 10px; font-size: 12px; background: var(--panel2); color: var(--txt2); border: 1px solid var(--line); } .rowbtn:hover { filter: none; border-color: var(--red); color: var(--red); } #toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--panel); border: 1px solid var(--line); color: var(--txt); padding: 10px 16px; border-radius: 8px; font-size: 13px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); display: none; z-index: 100; } #toast.on { display: block; } /* ---------------------------------------------------------------- account UI */ /* userbar: avatar + name + role, in the header */ .ub-av, .u-av, .mp-av { border-radius: 50%; object-fit: cover; background: var(--accent-weak); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; font-weight: 600; flex: none; } .ub-av { width: 28px; height: 28px; font-size: 12px; } .u-av { width: 30px; height: 30px; font-size: 12px; } .mp-av { width: 72px; height: 72px; font-size: 26px; } .ub-meta { display: flex; flex-direction: column; line-height: 1.25; } .ub-name { color: var(--txt2); font-weight: 500; } .roletag { font-size: 10.5px; padding: 0 6px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); align-self: flex-start; } .roletag.r-admin { color: var(--accent); border-color: var(--accent); } .roletag.r-reviewer { color: var(--amber); border-color: var(--amber); } .roletag.r-viewer { color: var(--muted); } .viewhead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .viewtitle { font-size: 15px; margin: 0; } /* the admin/audit tables reuse .panel + table, but rows are not clickable */ .admtable tbody tr { cursor: default; } .admtable tbody tr:hover { background: transparent; } .nowrap { white-space: nowrap; } .mut { color: var(--muted); } .cell-sub { font-size: 11px; color: var(--muted); line-height: 1.3; } .ok-dot { color: var(--green); } .rolesel { width: auto; font-size: 12px; padding: 5px 8px; } .u-cell { display: flex; align-items: center; gap: 10px; } .u-name { color: var(--txt2); font-weight: 500; } .u-disp { color: var(--muted); font-size: 12px; } .tag-you { font-size: 10px; color: var(--accent); border: 1px solid var(--accent); border-radius: 999px; padding: 0 5px; margin-left: 4px; } .uacts { display: flex; flex-wrap: wrap; gap: 6px; } /* small action buttons in tables and cards */ .btn { width: auto; margin: 0; padding: 6px 10px; font-size: 12px; font-weight: 500; background: var(--panel2); color: var(--txt2); border: 1px solid var(--line); border-radius: 7px; display: inline-flex; align-items: center; gap: 5px; } .btn:hover { filter: none; border-color: var(--accent); color: var(--accent); } .btn.danger:hover { border-color: var(--red); color: var(--red); } .btn .ic { width: 13px; height: 13px; } /* coloured audit badges — colour carries meaning */ .badge { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); } .badge.b-green { color: var(--green); border-color: var(--green); } .badge.b-red { color: var(--red); border-color: var(--red); } .badge.b-amber { color: var(--amber); border-color: var(--amber); } .badge.b-blue { color: var(--accent); border-color: var(--accent); } .badge.b-teal { color: #6bbfb0; border-color: #6bbfb0; } .badge.b-gray { color: var(--muted); } /* my-profile card */ .myprofile { display: flex; gap: 16px; align-items: center; padding: 18px 20px; } .mp-name { font-size: 16px; font-weight: 600; } .mp-sub { color: var(--muted); font-size: 12.5px; margin: 2px 0 10px; } .mp-acts { display: flex; gap: 8px; flex-wrap: wrap; } /* form modals reuse .overlay/.modal; a narrow variant for the account forms */ .modal.sm { max-width: 440px; } .modal.sm button { margin-top: 20px; } .modal.sm .close { margin-top: 0; } .modal.sm .hbtn, .modal.sm .btn, .modal.sm .eye { margin-top: 0; } /* avatar picker in the edit-profile modal */ .avedit { display: flex; align-items: center; gap: 14px; margin: 6px 0 4px; } .avprev { width: 72px; height: 72px; border-radius: 50%; overflow: hidden; flex: none; background: var(--panel2); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--faint); font-size: 11px; text-align: center; } .avprev img { width: 100%; height: 100%; object-fit: cover; } .avbtns { display: flex; flex-direction: column; gap: 8px; } .avbtns .hbtn { width: auto; } #toast.err { border-color: var(--err-line); color: var(--err-txt); } /* ---------------------------------------------------------------- phase 3: filters + detail */ /* per-row life-cycle chip, next to the status tag */ .life { display: inline-block; margin-left: 6px; font-size: 10.5px; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); } .life-in_force { color: var(--green); border-color: var(--green); } .life-starting { color: var(--accent); border-color: var(--accent); } .life-expires_today { color: var(--amber); border-color: var(--amber); } .life-expired { color: var(--faint); } .life-permanent { color: var(--muted); } /* source-specific detail rendering */ .notam-body { background: var(--sunken); border: 1px solid var(--line); border-radius: 8px; padding: 12px; font-family: var(--mono); font-size: 12.5px; color: var(--txt); white-space: pre-wrap; word-break: break-word; line-height: 1.5; } .subtable { margin: 4px 0 14px; } .subtable table { font-size: 12.5px; } .plainlist { margin: 4px 0 14px; padding-left: 18px; color: var(--txt2); } .plainlist li { padding: 2px 0; } .badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 14px; } #dBody h2 { font-size: 13px; margin: 16px 0 8px; color: var(--txt2); } @media (max-width: 560px) { .kv { grid-template-columns: 1fr; } .login-body { align-items: flex-start; } } /* review / triage */ .chk { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--txt2); white-space: nowrap; } .chk input { width: auto; margin: 0; } .bulkbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; margin-bottom: 12px; } .bulkbar select { width: auto; flex: 0 0 auto; font-size: 13px; padding: 7px 9px; } .bulkspacer { flex: 1 1 auto; } .chkcol { width: 34px; text-align: center; } .chkcol input { width: auto; margin: 0; } .chgflag { margin-left: 6px; } .reviewbox { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 14px; } .reviewbox .revby { font-size: 12px; margin-bottom: 8px; } .sem-btns { display: flex; gap: 8px; margin: 8px 0 10px; } .sem-btn { flex: 1; padding: 9px 10px; border-radius: 8px; border: 1.5px solid var(--line); background: none; color: var(--muted); font-size: 13px; font-weight: 500; cursor: pointer; transition: border-color 0.15s, color 0.15s, background 0.15s; text-align: center; } .sem-btn.pending:hover, .sem-btn.pending.on { border-color: var(--amber); color: var(--amber); } .sem-btn.reviewed:hover, .sem-btn.reviewed.on { border-color: var(--green); color: var(--green); } .sem-btn.ignored:hover, .sem-btn.ignored.on { border-color: var(--red); color: var(--red); } .sem-btn.on { background: color-mix(in srgb, currentColor 8%, transparent); } .revedit-note { width: 100%; margin-top: 10px; min-height: 64px; resize: vertical; background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; color: var(--txt); font: inherit; font-size: 13px; } .revedit-note:focus { outline: none; border-color: var(--accent); } .reviewbox .hbtn { margin-top: 12px; } /* map — two-column monitors layout: left sidebar (add + table) + right full-height map. `#monitorsMap` gets its own stacking context (z-index 0) so Leaflet's internal pane/control z-indexes stay BELOW the overlays (z-index 50) and the toast. */ .moncols { display: flex; gap: 14px; align-items: stretch; } .moncol-side { flex: 0 0 420px; min-width: 300px; display: flex; flex-direction: column; gap: 10px; height: calc(100vh - 148px); min-height: 460px; } .moncol-side .panel { flex: 1; overflow-y: auto; overflow-x: hidden; } .moncol-map { flex: 1 1 0; min-width: 300px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; height: calc(100vh - 148px); min-height: 460px; } .monmap-head { display: flex; align-items: center; padding: 10px 14px; font-size: 13px; font-weight: 600; border-bottom: 1px solid var(--line); background: var(--head); flex: none; } #monitorsMap { flex: 1; min-height: 300px; position: relative; z-index: 0; } .montable { min-width: 0; } #monitorsView tbody tr { cursor: default; } #monitorsView td { vertical-align: middle; } @media (max-width: 960px) { .moncols { flex-direction: column; } .moncol-side, .moncol-map { height: auto; min-height: 0; } .moncol-side { flex: none; } .moncol-side .panel { overflow: visible; } .moncol-map { height: 420px; } } .maplegend { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 8px 14px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); flex: none; } .maplegend span { display: inline-flex; align-items: center; gap: 6px; } .maplegend i { width: 11px; height: 11px; border-radius: 50%; border: 1px solid var(--on-accent); } .modal.map { max-width: 900px; } #mapCanvas { height: 60vh; border: 1px solid var(--line); border-radius: 10px; } .mappop b { display: block; margin-bottom: 2px; } /* DECEA chart overlay control (phase 6) — a Leaflet control in the items map's top-right: a small toggle that opens a panel of chart families + opacity/fit. Themed to match the app (Leaflet's own control chrome is overridden here). */ .maplayers { margin: 8px 8px 0 0; } .maplayers .ml-toggle { width: 34px; height: 34px; display: grid; place-items: center; padding: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; color: var(--txt2); cursor: pointer; } .maplayers .ml-toggle:hover { border-color: var(--accent); color: var(--accent); } .maplayers .ml-toggle .ic { width: 17px; height: 17px; } .maplayers .ml-body { width: 210px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px; font-size: 12.5px; color: var(--txt2); box-shadow: 0 6px 20px rgb(0 0 0 / 35%); } .maplayers .ml-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .maplayers .ml-close { background: none; border: none; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 2px; } .maplayers .ml-close:hover { color: var(--accent); } .maplayers .ml-sec + .ml-sec { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); } .maplayers .ml-charts { display: flex; flex-direction: column; gap: 3px; } .maplayers .ml-opt { display: flex; align-items: center; gap: 7px; cursor: pointer; } .maplayers .ml-sub { margin: 2px 0 4px 22px; max-width: 176px; background: var(--panel2); border: 1px solid var(--line); border-radius: 6px; padding: 4px 6px; color: var(--txt); font: inherit; font-size: 12px; } .maplayers .ml-oprow { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .maplayers .ml-oprow input[type="range"] { flex: 1; accent-color: var(--accent); } .maplayers .ml-opval { min-width: 34px; text-align: right; color: var(--muted); } .maplayers .ml-hint { color: var(--muted); font-size: 11.5px; margin-bottom: 6px; } .maplayers .ml-fit { width: 100%; } /* Coleta (manual collection) view — the per-source run controls + run history. */ .coleta-ctl { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 16px; margin-bottom: 14px; } .coleta-sources { display: flex; flex-wrap: wrap; gap: 8px; } .coleta-src { display: inline-flex; align-items: center; gap: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 4px 6px 4px 12px; } .coleta-name { color: var(--txt2); } .coleta-stat { font-size: 11.5px; color: var(--muted); } .coleta-empty { font-size: 12.5px; color: var(--muted); } /* Right-align the numeric run-count columns in the history table. */ #coletaView td.num { text-align: right; font-variant-numeric: tabular-nums; } .runstatus { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; } .runstatus.s-ok { color: var(--green); } .runstatus.s-partial { color: var(--amber); } .runstatus.s-failed { color: var(--red); } .runstatus.s-running { color: var(--muted); } /* Freshness pill (phase 8) — raised by the items view's background poll when the source header moves; clicking it re-loads. */ .freshpill { display: block; width: auto; margin: 0 auto 12px; padding: 7px 16px; background: var(--accent); color: var(--on-accent); border: none; border-radius: 999px; font-size: 12.5px; font-weight: 600; cursor: pointer; } .freshpill[hidden] { display: none; } .freshpill:hover { filter: brightness(1.08); } /* Per-monitor change feed (phase 8) — the expandable row under a watch-list row. */ .monrow-actions { display: flex; gap: 6px; } tr.feedrow > td { background: var(--panel2); padding: 10px 14px; border-bottom: 1px solid var(--line); } .feed-count { font-size: 12px; color: var(--muted); margin-bottom: 8px; } .feed-loading, .feed-empty { font-size: 12.5px; color: var(--muted); } .feed-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .feed-list li { display: flex; align-items: center; gap: 10px; } .feed-list .when { color: var(--muted); font-size: 11.5px; margin-left: auto; } /* Confirm dialog (phase 8) — a small alertdialog for destructive actions. */ .modal.confirm p { margin: 0 0 18px; font-size: 14px; color: var(--txt); } .confirm-actions { display: flex; justify-content: flex-end; gap: 10px; } .hbtn.danger { border-color: var(--red); color: var(--red); } .hbtn.danger:hover { background: var(--red); color: var(--on-accent); border-color: var(--red); } /* Offline bar */ .offlinebar { margin: 0 0 8px; padding: 7px 12px; border-radius: 6px; background: color-mix(in srgb, var(--red) 15%, var(--surface2)); border: 1px solid var(--red); color: var(--fg); font-size: 13px; } .offlinebar[hidden] { display: none; } /* 14-day window note */ .windownote { margin: 0 0 8px; padding: 6px 12px; border-radius: 6px; background: var(--surface2); border: 1px solid var(--line); font-size: 12.5px; color: var(--muted); } .windownote.allmode { border-color: var(--accent-weak); } .windownote[hidden] { display: none; } /* Keyboard focus row */ #reviewBody tr.kfocus { outline: 2px solid var(--accent); outline-offset: -2px; } /* Monitored star on rows */ .starmark { color: var(--amber); margin-right: 3px; font-size: 12px; } /* Toast action button */ #toast { display: none; align-items: center; gap: 12px; } #toast.on { display: flex; } .toast-action { background: none; border: 1px solid var(--line); border-radius: 4px; color: var(--accent); cursor: pointer; font-size: 12px; padding: 2px 8px; white-space: nowrap; } .toast-action:hover { background: var(--surface2); } /* Inline row action buttons in the review table */ .rowactions { white-space: nowrap; } .sbtn { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: 1px solid var(--line); border-radius: 5px; background: none; color: var(--muted); font-size: 13px; cursor: pointer; transition: background 0.1s, color 0.1s, border-color 0.1s; } .sbtn:hover { background: var(--surface2); color: var(--fg); } .sbtn.rev.on { background: var(--green); border-color: var(--green); color: #fff; } .sbtn.ign.on { background: var(--faint); border-color: var(--faint); color: #fff; } .sbtn.rev:not(.on):hover { border-color: var(--green); color: var(--green); } .sbtn.ign:not(.on):hover { border-color: var(--red); color: var(--red); } /* Lifecycle urgency alert bar in the review view */ .lifealert { margin: 0 0 10px; padding: 8px 12px; border-radius: 6px; background: var(--surface2); border: 1px solid var(--amber); color: var(--fg); font-size: 13px; display: flex; align-items: center; gap: 10px; } .lifealert.crit { border-color: var(--red); background: color-mix(in srgb, var(--red) 12%, var(--surface2)); } .lifealert[hidden] { display: none; } .btn-link { background: none; border: none; color: var(--accent); cursor: pointer; font-size: inherit; padding: 0; text-decoration: underline; } /* Change diff in the history section */ .hist-row { flex-wrap: wrap; } .diffbtn { background: none; border: 1px solid var(--line); border-radius: 4px; color: var(--muted); cursor: pointer; font-size: 11px; padding: 2px 7px; } .diffbtn:hover { color: var(--fg); border-color: var(--muted); } .difftable { width: 100%; margin-top: 6px; display: flex; flex-direction: column; gap: 6px; } .diffrow { display: flex; flex-direction: column; gap: 2px; } .diffield { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; } .diffval { font-size: 12px; font-family: var(--mono); padding: 3px 6px; border-radius: 3px; white-space: pre-wrap; word-break: break-all; } .diffval.old { background: color-mix(in srgb, var(--red) 14%, transparent); color: var(--fg); } .diffval.new { background: color-mix(in srgb, var(--green) 14%, transparent); color: var(--fg); } .diffsnap { width: 100%; margin-top: 6px; max-height: 280px; overflow: auto; } /* Keyboard shortcut tooltip */ .sc-tip { position: fixed; z-index: 9999; background: var(--panel2); border: 1px solid var(--line); border-radius: 6px; padding: 3px 8px; font-size: 11px; white-space: nowrap; pointer-events: none; display: flex; align-items: center; gap: 3px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); } .sc-tip[hidden] { display: none; } kbd { display: inline-flex; align-items: center; justify-content: center; background: var(--bg); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; padding: 1px 5px; font-size: 10px; font-family: inherit; line-height: 1.4; min-width: 18px; } /* Shortcuts palette */ .sc-palette { width: 480px; max-width: 92vw; padding: 0; overflow: hidden; } .sc-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid var(--line); font-weight: 600; font-size: 14px; } .sc-body { padding: 16px 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px 28px; max-height: 70vh; overflow-y: auto; } .sc-ctx { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 8px; } .sc-row { display: flex; align-items: baseline; gap: 10px; padding: 3px 0; } .sc-keys { display: inline-flex; align-items: center; gap: 2px; min-width: 72px; flex-shrink: 0; } .sc-label { font-size: 12.5px; color: var(--txt); } .sc-sep { font-size: 10px; color: var(--muted); margin: 0 1px; }