/* CT Sentinel — Terminal blanc (même design system que le client React) Variables et styles alignés sur client/src/index.css */ @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/IBMPlexMono-Regular.woff2') format('woff2'); } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/IBMPlexMono-Medium.woff2') format('woff2'); } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/IBMPlexMono-SemiBold.woff2') format('woff2'); } :root { --white: #FFFFFF; --off-white: #FAFAFA; --gray-100: #F4F4F5; --gray-200: #E4E4E7; --gray-400: #A1A1AA; --gray-600: #52525B; --gray-800: #27272A; --black: #09090B; --danger: #B91C1C; --warning: #B45309; --safe: #166534; --font-mono: 'IBM Plex Mono', ui-monospace, monospace; --font-weight-base: 500; --font-weight-emphasis: 600; --font-weight-strong: 700; } /* Dark theme (set via `data-theme="dark"` on `` from user preferences) */ [data-theme="dark"] { --white: #18181B; --off-white: #0c0c0e; --gray-100: #27272A; --gray-200: #3f3f46; --gray-400: #A1A1AA; --gray-600: #D4D4D8; --gray-800: #F4F4F5; --black: #FAFAFA; --danger: #F87171; --warning: #FBBF24; --safe: #4ADE80; } * { box-sizing: border-box; } body { font-family: var(--font-mono); font-size: 14px; line-height: 1.55; font-weight: var(--font-weight-base); -webkit-font-smoothing: antialiased; background: var(--off-white); color: var(--black); margin: 0; } /* Keep form controls aligned with the stronger global typography. */ button, input, select, textarea { font-weight: inherit; } /* Logo : préfixe > */ .logo::before { content: '> '; color: var(--gray-400); } /* Tagline : commentaire */ .tagline::before { content: '/* '; color: var(--gray-400); } .tagline::after { content: ' */'; color: var(--gray-400); } /* Section type terminal : en-tête --- titre --- */ .section-terminal::before { content: attr(data-section); display: block; font-size: 0.7rem; font-weight: 500; color: var(--gray-400); letter-spacing: 0.03em; margin-bottom: 0.6rem; } .section-terminal.no-title::before { /* Hide the redundant `data-section` header while keeping the real title element (e.g.

). */ content: none; display: none; margin-bottom: 0; } .section-terminal-title { display: none; } /* Layout app */ .app { font-family: var(--font-mono); } .layout-app { display: flex; min-height: 100vh; } .nav-mobile-bar, .nav-mobile-toggle, .nav-backdrop { display: none; } .nav-sidebar { width: 14rem; border-right: 1px solid var(--gray-200); padding: 0; background: var(--off-white); display: flex; flex-direction: column; } .nav-header { padding: 1rem; border-bottom: 1px solid var(--gray-200); flex-shrink: 0; } .nav-logo { display: flex; align-items: center; gap: 0.625rem; padding: 0; color: var(--black); text-decoration: none; } .nav-logo:hover { color: var(--black); } .nav-logo-icon { width: 28px; height: 28px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--gray-600); } .nav-logo-icon svg { width: 100%; height: 100%; } .nav-logo-text { display: flex; flex-direction: column; min-width: 0; } .nav-logo-text .logo { font-size: 1.35rem; font-weight: var(--font-weight-strong); letter-spacing: -0.025em; } .nav-logo-tagline { font-size: 0.7rem; color: var(--gray-400); margin-top: 0.125rem; } .nav-group { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: auto; } .nav-group-label { font-size: 0.7rem; font-weight: 500; color: var(--gray-400); letter-spacing: 0.03em; padding: 0 1rem 0.375rem; } .nav-list { list-style: none; margin: 0; padding: 0.25rem 0.5rem; } .nav-link { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; color: var(--gray-600); text-decoration: none; font-size: 0.85rem; border-radius: 0.375rem; } .nav-link:hover { background: var(--gray-100); color: var(--black); } .nav-link.active { background: var(--gray-100); font-weight: 500; color: var(--black); } .nav-icon { width: 1rem; height: 1rem; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: inherit; } .nav-icon svg { width: 100%; height: 100%; } .nav-footer { padding: 1rem; border-top: 1px solid var(--gray-200); flex-shrink: 0; display: flex; flex-direction: column; gap: 0.75rem; } .nav-account-email { font-size: 0.7rem; word-break: break-all; } .nav-footer-row { display: flex; align-items: center; gap: 0.5rem; } .nav-footer-label { font-size: 0.7rem; color: var(--gray-400); flex-shrink: 0; } .nav-footer .nav-theme-dropdown-wrap { flex: 1; min-width: 0; } .settings-dropdown-wrap { width: 100%; max-width: 22rem; position: relative; } .nav-logout { width: 100%; } .auth-form { display: flex; flex-direction: column; gap: 0.5rem; max-width: 22rem; } .auth-label { font-size: 0.75rem; color: var(--gray-600); } .auth-error { color: var(--danger); font-size: 0.85rem; margin: 0; } .link-inline { color: var(--gray-600); text-decoration: underline; cursor: pointer; } .link-inline:hover { color: var(--black); } .settings-subheading { font-size: 0.95rem; font-weight: var(--font-weight-emphasis); margin: 0 0 0.5rem; } .auth-loading { padding: 2rem; text-align: center; } .main-content { flex: 1; overflow-y: auto; background: var(--off-white); color: var(--black); /* Helps scrollIntoView respect space under layout chrome when this pane scrolls */ scroll-padding-top: 1.5rem; scroll-padding-bottom: 1rem; } /* Page container (dashboard, etc.) */ .page-wrap { padding: 1.5rem 1.5rem 2rem; max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.5rem; } .page-header { border-bottom: 1px solid var(--gray-200); padding-bottom: 0.75rem; } .page-header h1 { font-size: 1.35rem; font-weight: var(--font-weight-strong); letter-spacing: -0.025em; margin: 0; } .page-header .tagline { font-size: 0.8rem; color: var(--gray-600); margin: 0.125rem 0 0 0; } /* Cards (aligné client ui/card) */ .card { border: 1px solid var(--gray-200); background: var(--white); color: var(--black); } .card-header { display: flex; flex-direction: column; gap: 0.375rem; padding: 1rem 1rem 0.5rem; } .card-header.row { flex-direction: row; align-items: center; justify-content: space-between; } .card-title { font-size: 0.85rem; font-weight: var(--font-weight-strong); letter-spacing: -0.01em; } .card-content { padding: 1rem; padding-top: 0; } /* Stat cards (KPI grid) */ .stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } @media (min-width: 1024px) { .stats-grid { grid-template-columns: repeat(4, 1fr); } } .stat-card { border: 1px solid var(--gray-200); background: var(--white); cursor: pointer; transition: background 0.15s; } .stat-card:hover { background: var(--gray-100); } .stat-card .card-header { flex-direction: row; align-items: center; justify-content: space-between; padding-bottom: 0.5rem; } .stat-card .stat-icon { width: 1rem; height: 1rem; flex-shrink: 0; color: var(--gray-600); } .stat-card.variant-warning .stat-icon { color: var(--warning); } .stat-card.variant-danger .stat-icon { color: var(--danger); } .stat-card .card-title { font-size: 0.7rem; font-weight: 500; color: var(--gray-600); } .stat-card .card-content .value { font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; } .stat-card .card-content .desc { font-size: 0.75rem; color: var(--gray-600); margin-top: 0.25rem; } .stat-card.variant-warning .card-title, .stat-card.variant-warning .value { color: var(--warning); } .stat-card.variant-danger .card-title, .stat-card.variant-danger .value { color: var(--danger); } .stat-card.variant-warning { background: rgba(180, 83, 9, 0.08); border-color: rgba(180, 83, 9, 0.35); } .stat-card.variant-warning:hover { background: rgba(180, 83, 9, 0.12); } .stat-card.variant-danger { background: rgba(185, 28, 28, 0.08); border-color: rgba(185, 28, 28, 0.35); } .stat-card.variant-danger:hover { background: rgba(185, 28, 28, 0.12); } .stat-card.variant-warning .desc, .stat-card.variant-danger .desc { color: var(--gray-700); } /* Two columns: Recent alerts + Active monitors */ .dashboard-cols { display: grid; gap: 1.5rem; } @media (min-width: 1024px) { .dashboard-cols { grid-template-columns: 1fr 1fr; grid-template-rows: auto; } .dashboard-cols .col-alerts { grid-column: 1; } .dashboard-cols .col-monitors { grid-column: 2; } } @media (min-width: 1200px) { .dashboard-cols { grid-template-columns: 3fr 2fr; } } .link-view-all { font-size: 0.75rem; color: var(--gray-800); cursor: pointer; background: none; border: none; font-family: inherit; padding: 0; } .link-view-all:hover { color: var(--black); } /* List rows (alerts / monitors) */ .dashboard-list { display: flex; flex-direction: column; gap: 0.75rem; } .dashboard-row { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem; background: var(--gray-100); border: 1px solid var(--gray-200); cursor: pointer; transition: background 0.15s; } .dashboard-row:hover { background: rgba(228, 228, 231, 0.6); } .dashboard-row .main { flex: 1; min-width: 0; } .dashboard-row .meta { font-size: 0.75rem; color: var(--gray-600); margin-top: 0.25rem; } .dashboard-row .title-row { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.25rem; } .dashboard-row .title-row .domain { font-size: 0.875rem; font-weight: 500; font-family: var(--font-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; flex-shrink: 0; margin-left: 0.75rem; } .dot.unread { background: #d97706; } .dot.active { background: var(--safe); } /* Badges */ .badge { font-size: 11px; font-weight: 500; padding: 0.15rem 0.4rem; border-radius: 0; border: 1px solid transparent; } .badge-default { background: var(--gray-200); color: var(--black); } .badge-secondary { background: var(--gray-100); color: var(--gray-800); } .badge-danger { background: rgba(185, 28, 28, 0.15); color: var(--danger); } .badge-warning { background: rgba(180, 83, 9, 0.15); color: var(--warning); } .badge-safe { background: rgba(22, 101, 52, 0.15); color: var(--safe); } .badge-outline { background: transparent; border-color: var(--gray-200); color: var(--gray-800); font-family: var(--font-mono); } .badge-pill { padding: 0.2rem 0.5rem; font-size: 0.75rem; } .badge-clickable { cursor: pointer; user-select: none; } .badge-clickable:hover { filter: brightness(0.97); } .missing-headers-detail { margin-top: 0.35rem; display: flex; flex-wrap: wrap; gap: 0.25rem; } .not-exposed-detail { margin-top: 0.35rem; font-size: 0.85em; line-height: 1.4; word-break: break-word; white-space: pre-wrap; } /* Full-width HTTP scan detail (colspan row below target) */ .http-scan-detail-heading { font-size: 0.68rem; font-weight: 500; letter-spacing: 0.03em; text-transform: uppercase; color: var(--gray-600); margin-bottom: 0.35rem; } .http-scan-detail-panel { max-height: 14rem; overflow-y: auto; padding-right: 0.15rem; } .http-scan-detail-missing .missing-headers-detail { margin-top: 0; } .http-scan-detail-not-exposed .not-exposed-detail { margin-top: 0; } .cert-table tbody tr.http-scan-detail-row td.http-scan-detail-td { border-top: 1px solid var(--gray-200); border-bottom: 1px solid var(--gray-200); padding: 0.55rem 0.75rem; vertical-align: top; } .cert-table tbody tr.http-scan-detail-row.http-scan-detail-row--stripe-light td.http-scan-detail-td { background: var(--white); } .cert-table tbody tr.http-scan-detail-row.http-scan-detail-row--stripe-shade td.http-scan-detail-td { background: var(--gray-100); } .cert-table tbody tr.http-scan-detail-row td.http-scan-detail-td .http-scan-detail-panel { border-left: 3px solid var(--gray-400); padding-left: 0.6rem; margin-left: -0.15rem; } .http-scan-history-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin-top: 0.25rem; } .http-scan-delete-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.15rem 0.35rem; min-width: 1.75rem; line-height: 1; border: 1px solid var(--border-muted, #ccc); background: transparent; color: var(--fg-muted, #666); border-radius: 4px; cursor: pointer; } .http-scan-delete-btn:hover:not(:disabled) { color: var(--fg-danger, #b91c1c); border-color: var(--fg-danger, #b91c1c); } .http-scan-delete-btn .stat-icon svg { width: 14px; height: 14px; display: block; } .missing-headers-detail .badge { display: inline-block; margin: 0; } /* Empty state */ .empty-state { text-align: center; padding: 2rem 1rem; color: var(--gray-600); } .empty-state-icon { display: block; width: 2rem; height: 2rem; margin: 0 auto 0.5rem; opacity: 0.4; color: var(--gray-600); } .empty-state-icon .stat-icon, .empty-state-icon svg { width: 100%; height: 100%; } .empty-state .lead { font-size: 0.85rem; margin: 0; } .empty-state .sub { font-size: 0.75rem; margin: 0.25rem 0 0 0; } /* Forms & other pages */ .form-row { display: flex; gap: 0.5rem; margin-bottom: 1rem; align-items: center; } .form-row input { flex: 1; max-width: 20rem; padding: 0.4rem 0.6rem; border: 1px solid var(--gray-200); background: var(--white); font-family: inherit; } .form-row button { padding: 0.4rem 0.75rem; border: 1px solid var(--gray-200); background: var(--white); font-family: inherit; cursor: pointer; } .form-row button:hover { background: var(--gray-100); } /* Monitors page (React-style) */ .monitors-page-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; } .monitors-page-title { font-size: 1.25rem; font-weight: var(--font-weight-strong); letter-spacing: -0.025em; margin: 0; } .monitors-page-tagline { font-size: 0.875rem; color: var(--gray-600); margin: 0.25rem 0 0 0; } .btn-add-monitor { display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; min-height: 2rem; padding: 0 0.75rem; font-size: 0.75rem; font-weight: 500; font-family: var(--font-mono); background: var(--black); color: var(--white); border: 1px solid var(--black); cursor: pointer; white-space: nowrap; } .btn-add-monitor:hover { background: var(--gray-800); border-color: var(--gray-800); } .monitors-list { display: flex; flex-direction: column; gap: 0.75rem; list-style: none; padding: 0; margin: 0; } .monitor-card { border: 1px solid var(--gray-200); background: var(--white); color: var(--black); } .monitor-card-clickable { cursor: pointer; } .monitor-card-clickable:hover { border-color: var(--gray-400); } .monitor-card-clickable:focus-visible { outline: 2px solid var(--gray-800); outline-offset: 2px; } .monitor-card-inner { display: flex; align-items: center; justify-content: space-between; padding: 1rem; gap: 1rem; } .monitor-card-left { display: flex; align-items: center; gap: 0.75rem; flex: 1; min-width: 0; } .monitor-card-body { min-width: 0; } .monitor-card-body .domain { font-size: 0.875rem; font-weight: 500; font-family: var(--font-mono); } .monitor-card-meta { font-size: 0.75rem; color: var(--gray-600); margin-top: 0.25rem; line-height: 1.4; } .badge-active { white-space: nowrap; display: inline-flex; align-items: center; border: 1px solid transparent; padding: 0.125rem 0.5rem; font-size: 11px; font-weight: 600; font-family: var(--font-mono); background: var(--gray-800); color: var(--white); } .badge-paused { white-space: nowrap; display: inline-flex; align-items: center; border: 1px solid var(--gray-200); padding: 0.125rem 0.5rem; font-size: 11px; font-weight: 600; font-family: var(--font-mono); background: var(--gray-100); color: var(--gray-800); } .monitor-card-actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; } .switch-toggle { position: relative; width: 2.5rem; height: 1.25rem; flex-shrink: 0; border-radius: 9999px; background: var(--gray-200); cursor: pointer; transition: background 0.15s; } .switch-toggle[data-active="true"] { background: var(--gray-800); } .switch-toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: calc(1.25rem - 4px); height: calc(1.25rem - 4px); border-radius: 9999px; background: var(--white); box-shadow: 0 1px 2px rgba(0,0,0,0.1); transition: transform 0.15s; } .switch-toggle[data-active="true"]::after { transform: translateX(1.25rem); } .btn-icon { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0; border: none; background: transparent; color: var(--gray-600); cursor: pointer; font-size: 1rem; } .btn-icon:hover { color: var(--black); background: var(--gray-100); } .btn-icon.danger:hover { color: var(--danger); background: #fef2f2; } /* Dialog / Modal */ .dialog-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 1rem; } .dialog-overlay-hidden { display: none !important; } .dialog-content { background: var(--white); border: 1px solid var(--gray-200); border-radius: 0.375rem; max-width: 28rem; width: 100%; padding: 1.5rem; box-shadow: 0 4px 12px rgba(0,0,0,0.1); } .dialog-title { font-size: 1rem; font-weight: var(--font-weight-strong); margin: 0 0 1rem 0; } .dialog-body { margin-bottom: 1rem; } .dialog-body .input-search { width: 100%; max-width: none; } .dialog-hint { font-size: 0.75rem; color: var(--gray-600); margin: 0.5rem 0 0 0; } .dialog-footer { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1rem; } .dialog-footer .btn { min-height: 2rem; padding: 0 0.75rem; font-size: 0.75rem; } .dialog-footer .btn-outline { background: var(--white); color: var(--black); border: 1px solid var(--gray-200); } .dialog-footer .btn-outline:hover { background: var(--gray-100); } /* Recon page: card selector + tabs */ .recon-card { border: 1px solid var(--gray-200); background: var(--white); color: var(--black); } .recon-card-content { padding: 1rem 1.5rem; padding-top: 1.5rem; } .recon-select-row { display: flex; align-items: flex-end; gap: 0.75rem; flex-wrap: wrap; } .recon-select-wrap { flex: 1; min-width: 12rem; position: relative; } .recon-select-wrap label { display: block; font-size: 0.75rem; font-weight: 500; color: var(--gray-600); margin-bottom: 0.375rem; } .recon-select { width: 100%; height: 2.25rem; border: 1px solid var(--gray-200); background: var(--white); padding: 0 0.75rem; font-family: var(--font-mono); font-size: 0.875rem; color: var(--black); cursor: pointer; border-radius: 0; display: flex; align-items: center; justify-content: space-between; } .recon-select:hover { border-color: var(--gray-400); } .recon-select:focus { outline: none; border-color: var(--gray-600); box-shadow: 0 0 0 2px rgba(0,0,0,0.05); } [data-theme="dark"] .recon-select:focus { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.06); } .recon-select.recon-select-disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; } .recon-select-chevron { font-size: 0.75rem; color: var(--gray-600); margin-left: 0.5rem; } .recon-select-menu { position: absolute; top: calc(100% + 2px); left: 0; right: 0; border: 1px solid var(--gray-200); background: var(--white); z-index: 10; } /* Sidebar footer: theme control sits at the bottom — open the menu above the trigger */ .nav-theme-dropdown-wrap .recon-select-menu { top: auto; bottom: calc(100% + 2px); } .recon-select-option { width: 100%; padding: 0.45rem 0.75rem; font-family: var(--font-mono); font-size: 0.85rem; text-align: left; border: none; border-bottom: 1px solid var(--gray-200); background: var(--white); color: var(--black); cursor: pointer; } .recon-select-option:last-child { border-bottom: none; } .recon-select-option:hover, .recon-select-option:focus { background: var(--gray-100); outline: none; } .btn-run-recon { display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; height: 2.25rem; margin-top: 0.125rem; padding: 0 1rem; font-size: 0.8rem; font-weight: 500; font-family: var(--font-mono); background: var(--black); color: var(--white); border: 1px solid var(--black); cursor: pointer; white-space: nowrap; } .btn-run-recon:hover:not(:disabled) { background: var(--gray-800); border-color: var(--gray-800); } .btn-run-recon:disabled { opacity: 0.5; cursor: not-allowed; } .recon-last-scan { font-size: 0.75rem; color: var(--gray-600); margin-top: 0.75rem; } /* Tabs (Recon) */ .tabs-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; width: 100%; border-bottom: 1px solid var(--gray-200); margin-bottom: 0; background: var(--white); } .tabs-trigger { display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; padding: 0.5rem 0.75rem; font-size: 0.75rem; font-weight: 500; font-family: var(--font-mono); background: transparent; border: none; border-bottom: 2px solid transparent; color: var(--gray-600); cursor: pointer; margin-bottom: -1px; } .tabs-trigger:hover { color: var(--black); } .tabs-trigger.active { color: var(--black); border-bottom-color: var(--black); } .tabs-trigger .tab-icon { width: 0.875rem; height: 0.875rem; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; } .tabs-trigger .tab-icon svg { width: 100%; height: 100%; } .tabs-trigger .tab-badge-cluster { display: inline-flex; align-items: center; gap: 0.25rem; margin-inline-start: 0.125rem; } .tabs-trigger .tab-badge { font-size: 0.625rem; font-weight: 600; line-height: 1; box-sizing: border-box; width: 1.35rem; min-width: 1.35rem; height: 1.35rem; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 2px; background: var(--danger); color: var(--white); flex-shrink: 0; } .tabs-trigger .tab-badge--medium { background: var(--warning); color: var(--white); } .tabs-trigger .tab-badge--unexposed { background: var(--safe); color: var(--white); } .tabs-content { padding: 1rem 0 0 0; } .tabs-panel { display: none; } .tabs-panel.active { display: block; } .recon-tab-card { border: 1px solid var(--gray-200); background: var(--white); margin-bottom: 0.75rem; } .recon-tab-card .card-header { padding: 1rem 1rem 0.5rem; border-bottom: none; } .recon-tab-card .card-content { padding: 1rem; } .monitor-list, .alert-list { list-style: none; padding: 0; margin: 0; } .monitor-row, .alert-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.5rem 0; border-bottom: 1px solid var(--gray-200); font-size: 0.9rem; } .btn-sm { padding: 0.2rem 0.5rem; font-size: 0.75rem; border: 1px solid var(--gray-200); background: var(--white); font-family: inherit; cursor: pointer; } .btn-sm.danger { background: #fef2f2; color: var(--danger); border-color: #fecaca; } .mono { font-family: var(--font-mono); } .muted { color: var(--gray-600); font-size: 0.85rem; } .page-stub { padding: 2rem 0; } .page-stub h1 { font-size: 1.2rem; margin: 0 0 0.5rem 0; } .page-stub p { color: var(--gray-600); margin: 0; } /* Search page */ .main-content .section-terminal { margin-bottom: 1rem; } .scan-area { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; } .input-search { flex: 1; min-width: 12rem; padding: 0.5rem 0.75rem; border: 1px solid var(--gray-200); background: var(--white); font-family: var(--font-mono); font-size: 0.875rem; } .search-hint { font-size: 0.75rem; color: var(--gray-600); margin: 0.5rem 0 0 0; } .section-header { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.75rem; } .section-terminal-title { display: inline; font-size: 0.85rem; font-weight: 500; } .table-wrap { overflow-x: auto; } /* Certificates page — tiles grid + filter (align with React) */ .certificates-content { display: flex; flex-direction: column; gap: 1.5rem; } .cert-tiles-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } @media (min-width: 1024px) { .cert-tiles-grid { grid-template-columns: repeat(4, 1fr); } } .cert-tile { border: 1px solid var(--gray-200); background: var(--white); color: var(--black); padding: 1rem; } button.cert-tile.cert-tile-filter { width: 100%; display: block; text-align: left; cursor: pointer; font: inherit; margin: 0; appearance: none; -webkit-appearance: none; } button.cert-tile.cert-tile-filter:focus { outline: none; } button.cert-tile.cert-tile-filter:focus-visible { outline: 2px solid var(--gray-800); outline-offset: 2px; } .cert-tile.cert-tile--active { border-color: var(--gray-800); background: var(--gray-100); box-shadow: inset 0 0 0 1px var(--gray-800); } .cert-tile.cert-tile--active:hover { background: var(--gray-100); } button.cert-tile.cert-tile-filter:hover { background: var(--off-white); } button.cert-tile.cert-tile-filter.cert-tile--active:hover { background: var(--gray-100); } .cert-tile-header { display: flex; flex-direction: row; align-items: center; justify-content: space-between; padding-bottom: 0.5rem; } .cert-tile-title { font-size: 0.875rem; font-weight: 500; color: var(--gray-600); } .cert-tile .stat-icon { width: 1rem; height: 1rem; color: var(--gray-600); } .cert-tile-value { font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; } .cert-tile-sub { font-size: 0.75rem; color: var(--gray-600); margin-top: 0.25rem; } .cert-tile-value-expiring { color: var(--warning); } .cert-tile .cert-tile-value-expiring + .cert-tile-sub { color: var(--gray-600); } .cert-tile-value-expired { color: var(--danger); } .cert-tile-expiring .cert-tile-header .stat-icon { color: var(--warning); } .cert-tile-expired .cert-tile-header .stat-icon { color: var(--danger); } .cert-tile-value-valid { color: var(--safe); } .cert-tile-valid .stat-icon { color: var(--safe); } .cert-filter-card { border: 1px solid var(--gray-200); background: var(--white); color: var(--black); /* Vertical spacing is handled by .certificates-content gap */ margin-top: 0; } .cert-filter-card .cert-filter-content { padding: 1rem 1rem 1rem 1rem; padding-top: 1.5rem; } .cert-filter-row { display: flex; align-items: flex-end; gap: 0.75rem; flex-wrap: wrap; } .cert-filter-select-wrap { flex: 1; max-width: 20rem; position: relative; } .cert-filter-search-wrap { flex: 1; max-width: 24rem; } .cert-filter-shown-wrap { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; min-width: 0; } /* Same vertical rhythm as .cert-filter-row label + control (2.25rem) */ .cert-filter-shown-wrap::before { content: "\00a0"; display: block; font-size: 0.75rem; font-weight: 500; line-height: 1.25; margin-bottom: 0.375rem; color: transparent; pointer-events: none; user-select: none; } .cert-filter-row label { display: block; font-size: 0.75rem; font-weight: 500; color: var(--gray-600); margin-bottom: 0.375rem; } .cert-filter-row .cert-select { width: 100%; height: 2.25rem; padding: 0 2rem 0 0.75rem; border: 1px solid var(--gray-200); background: var(--white); font-family: var(--font-mono); font-size: 0.875rem; color: var(--black); border-radius: 0; cursor: pointer; } .cert-filter-row .cert-select:hover { border-color: var(--gray-400); } .cert-filter-row .cert-select:focus { outline: none; border-color: var(--gray-600); box-shadow: 0 0 0 2px rgba(0,0,0,0.05); } .cert-filter-row .cert-search-wrap { position: relative; display: flex; align-items: center; } .cert-filter-row .cert-search-wrap .stat-icon { position: absolute; left: 0.75rem; width: 1rem; height: 1rem; color: var(--gray-600); pointer-events: none; } .cert-filter-row .cert-search-input { width: 100%; min-height: 2.25rem; padding: 0.5rem 0.75rem 0.5rem 2.25rem; border: 1px solid var(--gray-200); background: var(--white); font-family: var(--font-mono); font-size: 0.875rem; border-radius: 0.375rem; } .cert-filter-shown { font-size: 0.75rem; color: var(--gray-600); line-height: 1.25; white-space: nowrap; min-height: 2.25rem; display: inline-flex; align-items: center; box-sizing: border-box; } .cert-domain-card { border: 1px solid var(--gray-200); background: var(--white); color: var(--black); margin-top: 1rem; } .cert-domain-card:first-of-type { margin-top: 1.5rem; } .cert-domain-card-header { display: flex; flex-direction: row; align-items: center; justify-content: space-between; padding: 1rem 1rem 0.75rem; } .cert-domain-card-title { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; font-weight: 500; } .cert-domain-card-title .domain-name { font-family: var(--font-mono); } /* As-of date for cert status (YYYY-MM-DD); blocky terminal-style badge next to count. */ .cert-domain-card-title .cert-data-as-of-badge { margin-left: 0.15rem; padding: 0.25rem 0.4rem; font-size: 10px; line-height: 1.2; min-height: 1.65rem; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .cert-domain-card .cert-table { font-size: 0.8rem; } .cert-domain-card .card-content-inner { padding: 0 1rem 1rem; } .cert-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; } .cert-table th, .cert-table td { padding: 0.5rem 0.75rem; text-align: left; border-bottom: 1px solid var(--gray-200); } .cert-table th { font-weight: 500; color: var(--gray-600); } /* Increase row-to-row contrast across listing tables. */ .cert-table tbody tr:nth-child(odd) { background: var(--white); } .cert-table tbody tr:nth-child(even) { background: var(--gray-100); } /* HTTP scan targets: pair main row + detail row(s) share one stripe; overrides nth-child above. */ .cert-table tbody tr.http-scan-target-row.http-scan-target-row--stripe-light, .cert-table tbody tr.http-scan-target-row.http-scan-target-row--stripe-light > td { background: var(--white); } .cert-table tbody tr.http-scan-target-row.http-scan-target-row--stripe-shade, .cert-table tbody tr.http-scan-target-row.http-scan-target-row--stripe-shade > td { background: var(--gray-100); } .cert-table tbody tr.http-scan-target-row { scroll-margin-top: 1.75rem; scroll-margin-bottom: 1rem; } .cert-table tbody tr + tr td { border-top: 1px solid var(--gray-200); } .cert-cn { font-family: var(--font-mono); font-weight: 500; } .scan-cell { max-width: 16rem; word-break: break-word; vertical-align: middle; } .scan-cell .badge { display: inline-block; margin: 0.15rem 0.25rem 0.15rem 0; } .scan-cell code.leaky-header-name, .scan-cell code.leaky-header-value { font-family: var(--font-mono); font-weight: 500; font-size: inherit; } .cert-name-value { font-size: 0.75rem; color: var(--gray-600); margin-top: 0.125rem; } .truncate { max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tabular { font-variant-numeric: tabular-nums; } .empty-cell { text-align: center; color: var(--gray-600); padding: 1.5rem !important; } .link-external { font-size: 0.75rem; color: var(--gray-800); text-decoration: none; } .link-external:hover { color: var(--black); text-decoration: underline; } .error-text { color: var(--danger); margin: 0; } .error-banner { font-family: var(--font-mono); font-size: 0.85rem; color: var(--danger); border: 1px solid var(--gray-200); background: var(--gray-100); padding: 0.5rem 0.75rem; margin-bottom: 0.75rem; } .error-banner::before { content: "[ERR] "; color: var(--gray-600); } .btn { padding: 0.4rem 0.75rem; border: 1px solid var(--gray-200); font-family: inherit; cursor: pointer; } .btn-primary { background: var(--black); color: var(--white); border-color: var(--black); } .btn-primary:hover:not(:disabled) { background: var(--gray-800); } .btn:disabled { opacity: 0.6; cursor: not-allowed; } .scan-target-url-cell { display: flex; flex-direction: column; gap: 0.35rem; } /* Clickable risky-subdomain rows: same hover cue as .monitor-card-clickable (border gray-200 → gray-400). */ .subdomain-row-jump-scan { cursor: pointer; } /* Table layout only: full-row outline via cell borders. Narrow `.responsive-table` cards use tr border only (see @media max-width). */ @media (min-width: 961px) { .cert-table tbody tr.subdomain-row-jump-scan td { transition: border-color 0.12s ease; } .cert-table tbody tr.subdomain-row-jump-scan td:first-child { border-left: 1px solid transparent; } .cert-table tbody tr.subdomain-row-jump-scan td:last-child { border-right: 1px solid transparent; } .cert-table tbody tr.subdomain-row-jump-scan:hover td { border-bottom-color: var(--gray-400); border-top-color: var(--gray-400); } .cert-table tbody tr.subdomain-row-jump-scan:first-child:hover td { border-top: 1px solid var(--gray-400); } .cert-table tbody tr.subdomain-row-jump-scan:hover td:first-child { border-left-color: var(--gray-400); } .cert-table tbody tr.subdomain-row-jump-scan:hover td:last-child { border-right-color: var(--gray-400); } } .subdomain-row-jump-scan:focus-visible { outline: 2px solid var(--gray-800); outline-offset: 2px; } .http-scan-history-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin-top: 0.15rem; font-size: 0.75rem; color: var(--gray-600); } .http-scan-history-meta { color: var(--gray-600); } .http-scan-hist-btn { min-width: 1.75rem; padding: 0.15rem 0.35rem; font-size: 0.7rem; line-height: 1.2; background: var(--white); color: var(--black); } .http-scan-hist-btn:hover:not(:disabled) { background: var(--gray-100); } /* Alerts page — table card (align with React card-alerts-table) */ .card-alerts-table { border: 1px solid var(--gray-200); background: var(--white); color: var(--black); } .card-alerts-table .card-alerts-content { padding: 0; } .alerts-table-wrap { overflow-x: auto; } .alerts-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; } .alerts-table th, .alerts-table td { padding: 0.75rem 1rem; text-align: left; border-bottom: 1px solid var(--gray-200); vertical-align: middle; } .alerts-table th { font-weight: 500; color: var(--gray-600); white-space: nowrap; } .alerts-table tbody tr:not(.alerts-table-row-unreviewed):nth-child(odd) { background: var(--white); } .alerts-table tbody tr:not(.alerts-table-row-unreviewed):nth-child(even) { background: var(--gray-100); } .alerts-table tbody tr + tr td { border-top: 1px solid var(--gray-200); } .alerts-table th.alerts-th-actions { text-align: right; padding-right: 1.5rem; } .alerts-table td.alerts-td-dot { width: 2rem; padding-left: 1.5rem; } .alerts-table td.alerts-td-actions { text-align: right; padding-right: 1.5rem; white-space: nowrap; } .alerts-table-row-unreviewed { background: rgba(244, 244, 245, 0.5); } .alerts-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #d97706; display: inline-block; } .alerts-detected-domain { font-family: var(--font-mono); font-size: 0.875rem; font-weight: 500; } .alerts-watching { font-size: 0.75rem; color: var(--gray-600); font-family: var(--font-mono); } .alerts-issuer { font-size: 0.75rem; color: var(--gray-600); max-width: 10rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .alerts-detected-time { font-size: 0.75rem; color: var(--gray-600); display: inline-flex; align-items: center; gap: 0.25rem; } .alerts-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: 0.25rem; } .btn-icon { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; padding: 0; border: none; background: transparent; border-radius: 0.375rem; cursor: pointer; color: var(--gray-600); font-family: inherit; } .btn-icon:hover { background: var(--gray-100); color: var(--black); } .btn-icon.btn-icon-success:hover { color: var(--safe); } .btn-icon.btn-icon-danger:hover { color: var(--danger); } .btn-action { width: auto; height: auto; min-height: 1.75rem; align-items: center; justify-content: center; gap: 0.35rem; padding: 0.2rem 0.4rem; border: 1px solid var(--gray-200); border-radius: 0; font-size: 0.7rem; font-weight: 500; color: var(--gray-800); } .btn-action .stat-icon { width: 0.85rem; height: 0.85rem; display: inline-flex; align-items: center; justify-content: center; line-height: 0; flex-shrink: 0; } .btn-action .stat-icon svg { width: 100%; height: 100%; display: block; } .btn-action > span:last-child { display: inline-flex; align-items: center; line-height: 1.2; transform: translateY(-0.5px); } .btn-action.btn-icon-success:hover { border-color: var(--safe); } .btn-action.btn-icon-danger:hover { border-color: var(--danger); } .alerts-empty { text-align: center; padding: 4rem 1.5rem; color: var(--gray-600); } .alerts-empty .stat-icon { width: 2.5rem; height: 2.5rem; margin: 0 auto 0.75rem; opacity: 0.3; display: block; } .alerts-empty p { margin: 0; font-size: 0.875rem; font-weight: 500; } .alerts-empty .sub { font-size: 0.75rem; margin-top: 0.25rem; } .alerts-loading { padding: 1.5rem; } .alerts-loading-skeleton { height: 3rem; background: var(--gray-100); border-radius: 0.25rem; margin-bottom: 0.5rem; } /* Mobile navigation + table cards for narrow screens */ @media (max-width: 960px) { /* Narrow: page scrolls with the viewport; keep jump targets below sticky mobile top bar */ html { scroll-padding-top: 5.75rem; scroll-padding-bottom: 1rem; } .layout-app { display: block; position: relative; min-height: 100vh; } .nav-mobile-bar { display: flex; align-items: center; gap: 0.75rem; width: 100%; min-height: 2.5rem; padding: 0.5rem 1rem; border-bottom: 1px solid var(--gray-200); background: var(--white); position: sticky; top: 0; z-index: 40; } .nav-mobile-toggle { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2rem; padding: 0.35rem 0.5rem; border: none; background: transparent; color: var(--black); font-family: var(--font-mono); font-size: 0.8rem; line-height: 1; cursor: pointer; flex-shrink: 0; } .mobile-breadcrumb { display: inline-flex; align-items: center; min-height: 2rem; min-width: 0; font-size: 0.75rem; color: var(--gray-600); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mobile-breadcrumb-link { display: inline-flex; align-items: center; color: var(--gray-800); text-decoration: none; line-height: 1; } .mobile-breadcrumb-link:hover { color: var(--black); text-decoration: underline; } .mobile-breadcrumb-sep { color: var(--gray-400); padding: 0 0.25rem; } .mobile-breadcrumb-current { color: var(--black); line-height: 1; overflow: hidden; text-overflow: ellipsis; } .nav-backdrop { display: block; position: fixed; inset: 0; background: rgba(9, 9, 11, 0.32); opacity: 0; pointer-events: none; transition: opacity 0.15s ease-in-out; z-index: 45; } .nav-backdrop.nav-backdrop-visible { opacity: 1; pointer-events: auto; } .nav-sidebar { position: fixed; inset: 0 auto 0 0; width: min(18rem, 84vw); border-right: 1px solid var(--gray-200); border-bottom: none; transform: translateX(-100%); transition: transform 0.18s ease-in-out; z-index: 50; } .nav-sidebar.nav-sidebar-open { transform: translateX(0); } .main-content { min-height: 100vh; overflow: visible; scroll-padding-top: 0; scroll-padding-bottom: 0; } .cert-table tbody tr.http-scan-target-row { scroll-margin-top: 5.75rem; scroll-margin-bottom: 1.25rem; } .page-wrap { padding: 1rem; gap: 1rem; } .tabs-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tabs-trigger { min-height: 2.25rem; padding: 0.45rem 0.5rem; } .cert-filter-row { align-items: stretch; } .cert-filter-select-wrap, .cert-filter-search-wrap, .cert-filter-shown-wrap { min-width: 100%; max-width: none; } .cert-filter-shown-wrap { align-items: flex-start; justify-content: flex-start; } .cert-filter-shown-wrap::before { display: none; } .cert-filter-shown { width: 100%; min-height: 0; display: block; white-space: normal; } .responsive-table thead { display: none; } .responsive-table, .responsive-table tbody, .responsive-table tr, .responsive-table td { display: block; width: 100%; } .responsive-table tr { border: 1px solid var(--gray-200); background: var(--white); margin-bottom: 0.75rem; } .responsive-table tbody tr.http-scan-target-row.http-scan-target-row--stripe-light { background: var(--white); } .responsive-table tbody tr.http-scan-target-row.http-scan-target-row--stripe-shade { background: var(--gray-100); } .responsive-table tbody tr.subdomain-row-jump-scan { transition: border-color 0.12s ease; } .responsive-table tbody tr.subdomain-row-jump-scan:hover { border-color: var(--gray-400); } .responsive-table tbody tr:last-child { margin-bottom: 0; } .responsive-table td { border: none; border-bottom: 1px solid var(--gray-200); padding: 0.6rem 0.75rem; display: grid; grid-template-columns: minmax(7.25rem, 40%) minmax(0, 1fr); gap: 0.5rem; align-items: start; } .responsive-table td::before { content: attr(data-label); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.03em; color: var(--gray-600); text-transform: uppercase; } /* URL column: skip the label column — thead is hidden but repeating "URL" wastes ~40% width. */ .responsive-table tbody tr.http-scan-target-row > td:first-child { display: block; } .responsive-table tbody tr.http-scan-target-row > td:first-child::before { content: none; } .responsive-table td:last-child { border-bottom: none; } .responsive-table td[data-label=""] { display: flex; align-items: center; padding-bottom: 0.3rem; } .responsive-table td[data-label=""]::before { content: none; } .responsive-table .alerts-td-actions { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; padding-right: 0.75rem; } .responsive-table .alerts-actions { justify-content: flex-start; } .responsive-table .alerts-issuer, .responsive-table .truncate { max-width: none; white-space: normal; overflow: visible; text-overflow: clip; } /* Same label | value row as other cells (Status, etc.) — avoids stacking label above badges. */ .responsive-table td.scan-cell { max-width: none; } .responsive-table .scan-cell .badge { margin-right: 0.2rem; vertical-align: middle; } /* Detail row below scan target (missing headers / not exposed) */ .responsive-table tr.http-scan-detail-row { margin-top: -0.65rem; margin-bottom: 0.75rem; border-top: none; } .responsive-table tr.http-scan-detail-row.http-scan-detail-row--stripe-light td.http-scan-detail-td { background: var(--white); } .responsive-table tr.http-scan-detail-row.http-scan-detail-row--stripe-shade td.http-scan-detail-td { background: var(--gray-100); } .responsive-table tr.http-scan-detail-row td.http-scan-detail-td { display: block; width: 100%; padding: 0.55rem 0.75rem; border-bottom: 1px solid var(--gray-200); } .responsive-table tr.http-scan-detail-row td.http-scan-detail-td::before { content: none; } } @media (max-width: 640px) { .stats-grid, .cert-tiles-grid { grid-template-columns: 1fr; } } /* Acknowledge row actions (recon + certificates) */ .http-scan-actions-cell { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; } /* Per-row Scan: same outlined treatment as `.btn-action` / `.ack-row-btn` (header `.btn-run-recon` stays solid black) */ .http-scan-actions-cell .btn-run-recon { margin-top: 0; height: auto; min-height: 1.75rem; padding: 0.2rem 0.4rem; gap: 0.35rem; font-size: 0.7rem; font-weight: 500; font-family: inherit; background: transparent; color: var(--gray-800); border: 1px solid var(--gray-200); border-radius: 0; box-sizing: border-box; } .http-scan-actions-cell .btn-run-recon:hover:not(:disabled) { background: var(--gray-100); color: var(--black); border-color: var(--gray-200); } .http-scan-actions-cell .btn-run-recon .nav-icon { width: 0.85rem; height: 0.85rem; } .ack-row-btn-group { display: inline-flex; align-items: center; gap: 0.25rem; } .ack-row-btn { padding: 0.15rem 0.35rem; font-size: 0.7rem; } .ack-row-btn .ack-row-btn-label { margin-left: 0.15rem; } .recon-th-actions, .cert-th-actions { width: 4rem; text-align: right; } .recon-ack-cell, .cert-td-actions { vertical-align: middle; text-align: right; }