/* 8Dweb noc — light enterprise theme. * * Design tokens (every color, spacing, size, shadow) live in * app/static/tokens.css — the L1 decoupling layer. This file owns * component shapes, layouts, and interaction states; it references * tokens via var() and should not contain raw hex/px values for * primitives. * * Migration note: hardcoded values inside the rule bodies below are * being progressively migrated to var() refs. Don't add NEW raw hex * or font-size:Npx — use the tokens. See tokens.css for the catalog. * * Default = light. Dark mode via [data-theme="dark"] on . * Brand orange #f7941e. Inter / system-ui. Generous whitespace. */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { background: var(--bg); } body { font-family: var(--sans); font-size: var(--body-fs); line-height: var(--lh-base); background: var(--bg); color: var(--text); min-height: 100vh; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; } a { color: var(--brand-deep); text-decoration: none; } a:hover { color: var(--brand); } /* ─── Global keyboard focus ring (UX-3) ────────────────────────────────────── * One :focus-visible rule so every keyboard-focusable control — buttons, * links, nav dropdowns (), checkboxes — shows a consistent, * visible ring. :focus-visible (not :focus) means mouse clicks don't * draw it. Inputs that define their own box-shadow focus glow are more * specific and keep that glow; this is the floor for everything else. */ :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } /* ─── Top header ───────────────────────────────────────────────────────────── */ .topbar { display: flex; align-items: center; justify-content: space-between; background: var(--bg-elev); border-bottom: 1px solid var(--border); padding: 0 28px; height: var(--hdr-h); box-shadow: var(--shadow-sm); position: sticky; top: 0; z-index: 50; } .topbar-left { display: flex; align-items: center; gap: 18px; } .topbar-right { display: flex; align-items: center; gap: 8px; } .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); } .brand img.logo { height: 28px; width: auto; display: block; } .brand-sub { color: var(--text-mute); font-size: 14px; font-weight: 500; border-left: 1px solid var(--border); padding-left: 14px; } .nav { display: flex; align-items: center; gap: 4px; margin-left: 8px; } .nav-link { color: var(--text-2); text-decoration: none; font-size: 14px; font-weight: 500; padding: 6px 12px; border-radius: 6px; transition: background 0.12s ease, color 0.12s ease; } .nav-link:hover { background: var(--bg-soft); color: var(--text); } .nav-link.active { background: var(--brand-soft); color: var(--brand-deep); } /* Mobile menu (hamburger) button — hidden on desktop, revealed at ≤760px where the nav bar collapses into a drawer (#95). CSS-drawn 3-bar icon. */ .nav-toggle { display: none; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; background: transparent; border: 1px solid var(--border); border-radius: 8px; color: var(--text); cursor: pointer; } .nav-toggle:hover { background: var(--bg-soft); } .nav-toggle[aria-expanded="true"] { background: var(--bg-soft); border-color: var(--brand); } .nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; } .nav-toggle-bars { position: relative; } .nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; position: absolute; left: 0; } .nav-toggle-bars::before { top: -6px; } .nav-toggle-bars::after { top: 6px; } /* Visually demote admin links — same row, but smaller and dimmer so the eye lands on operator items first. Divider is a 1px vertical rule. */ .nav-divider { width: 1px; align-self: stretch; background: var(--border); margin: 6px 6px; } .nav-link-admin { font-size: 14px; color: var(--text-mute); padding: 5px 9px; } .nav-link-admin:hover { color: var(--text); } .nav-link-admin.active { background: var(--brand-soft); color: var(--brand-deep); } .user-chip { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 6px; background: var(--bg-soft); font-size: 14px; color: var(--text-2); } .user-chip .avatar { width: 24px; height: 24px; border-radius: 50%; background: var(--brand); color: white; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; text-transform: uppercase; } .user-chip .role { font-size: 14px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--brand-deep); font-weight: 700; padding: 1px 6px; background: var(--brand-soft); border-radius: 3px; } .user-chip form { margin: 0; } .user-chip button { background: transparent; border: 0; color: var(--text-mute); cursor: pointer; font-size: 14px; padding: 0 4px; } .user-chip button:hover { color: var(--red); } .theme-toggle { background: transparent; border: 1px solid var(--border); width: 36px; height: 36px; border-radius: 8px; color: var(--text-2); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 16px; transition: background 0.12s ease; } .theme-toggle:hover { background: var(--bg-soft); } /* ─── Container ────────────────────────────────────────────────────────────── */ .container { max-width: 1280px; margin: 0 auto; padding: 32px 28px 64px; flex: 1; width: 100%; } /* ─── Hero status banner ───────────────────────────────────────────────────── */ .hero { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px 26px; display: flex; align-items: center; gap: 18px; margin-bottom: 28px; box-shadow: var(--shadow); } .hero-dot { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; } .hero-dot.dot-green { background: var(--green); } .hero-dot.dot-yellow { background: var(--yellow); } .hero-dot.dot-red { background: var(--red); } .hero-dot.dot-gray { background: var(--gray); } .hero-text { flex: 1; display: flex; flex-direction: column; gap: 2px; } .hero-headline { font-size: 22px; font-weight: 600; color: var(--text); letter-spacing: -0.01em; margin: 0; } .hero-sub { font-size: 14px; color: var(--text-mute); margin: 0; } /* ─── Section heading ──────────────────────────────────────────────────────── */ .section-h { margin: 28px 0 14px 0; font-size: 14px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-mute); font-weight: 700; } /* ─── Status grid ──────────────────────────────────────────────────────────── */ .status-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; } .card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow-sm); transition: box-shadow 0.15s ease, transform 0.15s ease; } .card:hover { box-shadow: var(--shadow); transform: translateY(-1px); } .card-head { display: flex; align-items: center; gap: 10px; } .card-label { margin: 0; font-size: 15px; font-weight: 600; color: var(--text); letter-spacing: -0.01em; } .card-tag { margin-left: auto; font-size: 14px; text-transform: uppercase; color: var(--text-mute); letter-spacing: 0.06em; background: var(--bg-soft); padding: 2px 8px; border-radius: 10px; font-weight: 600; } .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; } .dot-green { background: var(--green); } .dot-yellow { background: var(--yellow); } .dot-red { background: var(--red); } .dot-gray { background: var(--gray); } .card-headline { margin: 0; font-size: 18px; color: var(--text); font-weight: 500; letter-spacing: -0.01em; } .card-detail { margin: 0; font-size: 14px; color: var(--text-mute); line-height: 1.55; word-break: break-word; } .card-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: var(--text-faint); padding-top: 12px; border-top: 1px solid var(--border-soft); } .card-checked { font-family: var(--mono); } .card-drill { color: var(--brand-deep); text-decoration: none; font-weight: 500; } .card-drill:hover { color: var(--brand); } /* Status accents on the card edge */ .card-green { border-top: 3px solid var(--green); } .card-yellow { border-top: 3px solid var(--yellow); } .card-red { border-top: 3px solid var(--red); } .card-gray { border-top: 3px solid var(--gray); } /* ─── Recent activity panel ────────────────────────────────────────────────── */ .panel { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px 26px; box-shadow: var(--shadow-sm); margin-top: 28px; } .panel-h { font-size: 16px; font-weight: 600; margin: 0 0 8px 0; } .muted { color: var(--text-mute); font-size: 14px; } /* ─── Forms (login + admin) ────────────────────────────────────────────────── */ .auth-shell { min-height: calc(100vh - var(--hdr-h)); display: flex; align-items: center; justify-content: center; padding: 24px; } .auth-card { width: 100%; max-width: 420px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 36px 32px; box-shadow: var(--shadow-md); } .auth-card .brand-row { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 24px; } .auth-card .brand-row img { height: 36px; } .auth-card h1 { font-size: 18px; font-weight: 600; margin: 0; text-align: center; } .auth-card .auth-sub { text-align: center; color: var(--text-mute); margin: 6px 0 0; font-size: 14px; } .form-row { margin-bottom: 16px; } .form-row label { display: block; font-size: 14px; font-weight: 600; color: var(--text-2); margin-bottom: 6px; } .form-row input, .form-row select { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; font-family: var(--sans); background: var(--bg); color: var(--text); transition: border 0.12s ease, box-shadow 0.12s ease; } .form-row input:focus, .form-row select:focus { outline: 0; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(247, 148, 30, 0.18); } .form-row .hint { font-size: 14px; color: var(--text-mute); margin-top: 4px; } .form-section-h { font-size: 14px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-mute); font-weight: 700; margin: 28px 0 4px; padding-top: 16px; border-top: 1px solid var(--border); } .btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 18px; border-radius: 8px; border: 0; font-size: 14px; font-weight: 600; font-family: var(--sans); cursor: pointer; text-decoration: none; transition: background 0.12s ease, transform 0.05s ease, box-shadow 0.12s ease; } .btn-primary { background: var(--brand); color: white; width: 100%; box-shadow: 0 1px 2px rgba(247,148,30,0.25); } .btn-primary:hover { background: var(--brand-deep); } .btn-primary:active { transform: translateY(1px); } .btn-ghost { background: transparent; color: var(--text-2); border: 1px solid var(--border); padding: 8px 14px; } .btn-ghost:hover { background: var(--bg-soft); } .btn-danger { background: var(--red); color: white; } .btn-danger:hover { filter: brightness(0.92); } .btn-sm { padding: 6px 12px; font-size: 14px; } .alert { padding: 12px 14px; border-radius: 8px; font-size: 14px; margin-bottom: 18px; } .alert-error { background: var(--red-bg); color: var(--red); border: 1px solid #fecaca; } /* ─── Tables (admin/users) ─────────────────────────────────────────────────── */ .table-wrap { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); } .table { width: 100%; border-collapse: collapse; font-size: 14px; } .table thead th { background: var(--bg-soft); color: var(--text-mute); text-align: left; padding: 12px 16px; font-size: 14px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; border-bottom: 1px solid var(--border); } .table tbody td { padding: 14px 16px; border-bottom: 1px solid var(--border-soft); color: var(--text); } .table tbody tr:last-child td { border-bottom: 0; } .table tbody tr:hover { background: var(--bg-soft); } .table .username { font-weight: 600; } .table .pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; } .pill-admin { background: var(--brand-soft); color: var(--brand-deep); } .pill-operator { background: #dbeafe; color: #1d4ed8; } .pill-viewer { background: var(--bg-soft); color: var(--text-mute); } .pill-active { background: var(--green-bg); color: var(--green); } .pill-disabled { background: var(--red-bg); color: var(--red); } [data-theme="dark"] .pill-operator { background: #1e3a8a; color: #93c5fd; } .row-actions { display: flex; gap: 6px; justify-content: flex-end; } .row-actions form { margin: 0; } /* ─── Page header w/ action ────────────────────────────────────────────────── */ .page-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; } .page-title { font-size: 22px; font-weight: 600; margin: 0; letter-spacing: -0.01em; } /* ─── Footer ───────────────────────────────────────────────────────────────── */ .footer { border-top: 1px solid var(--border); background: var(--bg-elev); padding: 16px 28px; font-size: 14px; color: var(--text-faint); display: flex; justify-content: space-between; } /* ─── Responsive ───────────────────────────────────────────────────────────── */ @media (max-width: 760px) { .topbar { padding: 0 16px; } .container { padding: 20px 16px 48px; } .brand-sub { display: none; } .status-grid { grid-template-columns: 1fr; } .hero-headline { font-size: 18px; } /* #95 — the hamburger appears and the nav becomes a full-width drawer that drops below the header when toggled open (was: `.nav { display:none }` with no replacement, leaving phone users with no navigation at all). */ .nav-toggle { display: inline-flex; } .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 2px; margin: 0; padding: 8px; background: var(--bg-elev); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-md); max-height: calc(100vh - var(--hdr-h)); overflow-y: auto; } .nav.open { display: flex; } .nav .nav-link { font-size: 16px; padding: 12px 14px; border-radius: 8px; } /* Staff dropdowns: stack inline inside the drawer instead of floating. Tapping a trigger focuses it → the existing :focus-within rule reveals the submenu, now positioned static and full-width. Customers (viewer) have only plain links, so this only affects admin/operator on mobile. */ .nav-group { display: block; width: 100%; position: static; } .nav-group-end { margin-left: 0; } .nav-trigger { width: 100%; justify-content: space-between; font-size: 16px; padding: 12px 14px; } .nav-menu, .nav-menu-right, .nav-menu-wide { position: static; min-width: 0; width: 100%; margin: 2px 0 4px; padding: 2px 0 2px 10px; background: transparent; border: 0; border-left: 2px solid var(--border); border-radius: 0; box-shadow: none; } .nav-menu::before { display: none; } } /* ─── Phone (≤480px) — wide data tables must scroll, not clip/overflow ────── * Additive responsive safety net (readability sweep 2026-06-03). The desktop * type scale grew, so wide tables now overflow narrow viewports. At phone * width we let the table's wrapper scroll horizontally, and give bare tables * (no wrapper) display:block so they become independently scrollable instead * of pushing the page wider than the screen. Desktop layout is untouched — * .table-wrap keeps its rounded-corner overflow:hidden above 480px. */ @media (max-width: 480px) { .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .events-table, .audit-table, .data-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; } } /* ─── Recent activity events table ────────────────────────────────────────── */ .events-table { font-size: 14px; margin-top: 8px; } .events-table thead th { font-size: 14px; } .events-table tbody td { padding: 8px 12px; vertical-align: top; } .events-table .ev-when { font-family: var(--mono); color: var(--text-mute); white-space: nowrap; } .events-table .ev-host { font-weight: 600; white-space: nowrap; } .events-table .ev-site { font-family: var(--mono); color: var(--text-faint); font-size: 14px; font-weight: 400; margin-top: 2px; } .events-table .ev-source { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 14px; font-weight: 600; background: var(--bg-soft); color: var(--text-2); white-space: nowrap; } .events-table .ev-line code { font-family: var(--mono); font-size: 14px; color: var(--text-2); white-space: pre-wrap; word-break: break-word; } .events-table tr.ev-red { background: linear-gradient(90deg, var(--red-bg) 0, transparent 4px); } .events-table tr.ev-red .ev-source { background: var(--red-bg); color: var(--red); } .events-table tr.ev-yellow .ev-source { background: var(--yellow-bg); color: var(--yellow); } .events-table tr.ev-blue .ev-source { background: #dbeafe; color: #1d4ed8; } [data-theme="dark"] .events-table tr.ev-blue .ev-source { background: #1e3a8a; color: #93c5fd; } /* (UX-6 cut 2, 2026-05-27) The /logs page rules moved to * page-logs.css. Scattered /logs subsections (block menu, sev * checkboxes, UUID column, export menu, etc.) are still here * pending a follow-up cut. */ /* (UX-6 cut 6, 2026-05-27) /digest Phase C-2 styles moved to * page-digest.css. */ Phase 1 of the security/monitoring vision: server inventory at a glance. Per-host card shows listening ports for now; more probes land alongside. */ .posture-port-list { list-style: none; margin: 6px 0 0; padding: 0; font-size: 14px; display: flex; flex-direction: column; gap: 2px; } .posture-port-list li { display: flex; align-items: baseline; gap: 8px; } .posture-port-num { font-family: var(--mono); font-weight: 600; width: 70px; color: var(--text); background: transparent; font-size: 14px; } .posture-port-process { font-weight: 500; color: var(--text-2); flex: 1; } .posture-port-addr { font-family: var(--mono); font-size: 14px; } .posture-probe-form { display: flex; flex-wrap: wrap; align-items: end; gap: 14px; padding: 14px 18px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 8px; margin: 8px 0; font-size: 14px; } .posture-probe-form label { display: flex; flex-direction: column; gap: 4px; font-weight: 500; font-size: 14px; color: var(--text-2); } .posture-probe-form input[type="text"] { padding: 7px 10px; border: 1px solid var(--border); border-radius: 5px; font-family: var(--mono); font-size: 14px; background: var(--bg); color: var(--text); min-width: 180px; } .posture-probe-form input[type="text"]:focus { outline: 2px solid var(--brand); border-color: var(--brand); } /* (UX-6 cut 4 fold-in, 2026-05-27) The home auto-refresh + * recent-issues card rules moved to page-home.css. */ /* (UX-6 cut 8, 2026-05-27) /admin/* styles (ai-usage cap + * automation-log + ai-usage dashboard) moved to page-admin.css. * Also subsumes cut 7's /alerts page breadcrumb which lived * between the autolog and ai-usage blocks. */ /* (UX-6 cut 9, 2026-05-27) 7 scattered /logs subsections (Ask AI * diagnostic panel, active-filter breadcrumb chips, severity * checkboxes, UUID column, personal-defaults bar, info row, * severity dot column) moved to page-logs.css. */ .user-chip-link { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: inherit; border-radius: 4px; padding: 0 2px; } .user-chip-link:hover { color: var(--brand-deep); } /* ─── /admin/audit-log + /me/activity ─────────────────────────────────────── */ .audit-page { /* container is provided by main.container; nothing extra needed */ } .audit-filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px 16px; margin: 4px 0 16px 0; box-shadow: var(--shadow-sm); } .audit-filters label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-mute); font-weight: 600; } .audit-input { font-family: var(--sans); font-size: 14px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); min-width: 160px; } .audit-input-narrow { min-width: 80px; max-width: 90px; } .audit-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); } .audit-table { font-size: 14px; } .audit-table th { font-size: 14px; } .audit-row td { vertical-align: top; padding-top: 8px; padding-bottom: 8px; } .audit-row-fail td { background: linear-gradient(90deg, var(--red-bg) 0, transparent 4px); } .audit-row code { font-family: var(--mono); font-size: 14px; background: var(--bg-soft); padding: 1px 6px; border-radius: 3px; color: var(--text-2); } .audit-row details > summary { cursor: pointer; list-style: none; font-size: 14px; color: var(--text-mute); user-select: none; } .audit-row details > summary::-webkit-details-marker { display: none; } .audit-row details[open] > summary { color: var(--brand-deep); } .audit-detail { margin-top: 6px; padding: 12px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 6px; max-width: 720px; } .audit-detail h4 { margin: 0 0 4px; font-size: 14px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-mute); font-weight: 700; } .audit-detail h4 + h4 { margin-top: 12px; } .audit-detail pre { margin: 0 0 6px; padding: 10px 12px; background: var(--bg-elev); border: 1px solid var(--border-soft); border-radius: 4px; font-family: var(--mono); font-size: 14px; line-height: 1.5; color: var(--text-2); white-space: pre-wrap; word-break: break-word; max-height: 260px; overflow-y: auto; } .audit-empty { padding: 32px; text-align: center; color: var(--text-mute); background: var(--bg-elev); border: 1px dashed var(--border); border-radius: var(--radius-lg); } /* (UX-6 cut 9, 2026-05-27) /logs export menu moved to * page-logs.css. */ .system-page { /* container handled by main.container */ } .system-stub h2.health-section + ul { padding-left: 22px; color: var(--text-2); } /* (UX-6 cut 3, 2026-05-27) The /system/vms tree+tabs+dashboard+ * split-panel + VM action menu + inline tag editor + action * progress modal rules moved to page-vms.css. */ /* ─── /admin/health (platform-app self-observability) ────────────────────── */ .health-page { /* container provides padding */ } .health-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-bottom: 28px; } .health-card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px 18px; box-shadow: var(--shadow-sm); } .health-card-warn { border-color: var(--red); box-shadow: 0 0 0 3px var(--red-bg); } .health-card-label { font-size: 14px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-mute); font-weight: 700; margin-bottom: 8px; } .health-card-value { font-size: 26px; font-weight: 600; color: var(--text); line-height: 1.1; letter-spacing: -0.01em; } .health-card-value.health-card-bad { color: var(--red); font-size: 18px; } .health-card-sub { margin-top: 6px; font-size: 14px; color: var(--text-mute); } .health-section { margin: 28px 0 12px; font-size: 14px; font-weight: 600; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.06em; border-bottom: 1px solid var(--border-soft); padding-bottom: 6px; } /* (UX-6 cut 4, 2026-05-27) The home status-board card visuals * (.cv-*, .dom-*, home .recent-*) moved to page-home.css. */ /* ─── Page refresh bar — generic Mode-1 affordance ──────────────────── Per the cache-refresh standard (memory feedback_refresh_button_standard.md): every cached / time-sensitive page gets a refresh button + freshness indicator. Originally introduced as .home-refresh-bar in commit 2.10; generalized to .page-refresh-bar in commit 2.13 and applied to /admin/ai-usage and /digest as well. The .home-* aliases are kept for backwards compatibility but new pages should use .page-*. */ .page-refresh-bar, .home-refresh-bar { display: flex; justify-content: flex-end; align-items: baseline; gap: 14px; margin: -6px 0 16px; font-size: 14px; color: var(--text-mute); } .page-refresh-btn, .home-refresh-btn { border: 1px solid var(--border); background: var(--bg); color: var(--text-2); padding: 5px 11px; border-radius: 6px; font-size: 14px; cursor: pointer; text-decoration: none; font-family: inherit; } .page-refresh-btn:hover, .home-refresh-btn:hover { border-color: var(--brand); color: var(--brand-deep); } /* ─── Sortable tables (sortable-tables.js) ──────────────────────── Tables with class="sortable" get clickable elements. Hover hint + active-sort arrow indicator. Behavior is driven by the JS; these styles are purely visual feedback. */ table.sortable thead th[data-sort] { position: relative; } table.sortable thead th[data-sort]:hover { background: var(--bg-subtle, #f4f5f7); } table.sortable thead th .s-arrow { color: var(--text-muted, #888); font-size: 0.85em; margin-left: 4px; font-weight: normal; } table.sortable thead th.s-asc, table.sortable thead th.s-desc { background: var(--bg-subtle, #f4f5f7); } table.sortable thead th.s-asc .s-arrow, table.sortable thead th.s-desc .s-arrow { color: var(--brand, #2563eb); font-weight: bold; }