/* Global layout */

.argus-body {
    margin: 0;
    padding: 0;
    background: #05070d;
    color: #f5f7ff;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.argus-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Header / brand / nav */

.argus-header {
    width: 100%;
    max-width: 960px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 16px 8px 16px;
    box-sizing: border-box;
}

.argus-brand {
    display: flex;
    align-items: center;
    gap: 16px;
}

.argus-logo {
    height: 80px;
    width: auto;
}

.argus-title-block {
    display: flex;
    flex-direction: column;
}

.argus-title {
    font-size: 1.05rem;
    font-weight: 600;
}

.argus-subtitle {
    font-size: 0.85rem;
    color: #a0aec0;
}

.argus-nav {
    display: flex;
    align-items: center;
    gap: 8px;
}

.argus-nav-item {
    font-size: 0.9rem;
    padding: 6px 12px;
    border-radius: 999px;
    text-decoration: none;
    color: #d0e2ff;
    border: 1px solid transparent;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.argus-nav-item:hover {
    background: #151b2c;
    border-color: #2b3a5c;
}

.argus-nav-item-active {
    background: #2563eb;
    border-color: #2563eb;
    color: #eaf2ff;
}

.argus-logout-form {
    margin: 0;
}

.argus-logout-button {
    padding: 6px 16px;
    border-radius: 999px;
    border: none;
    background: #0f172a;
    color: #e2e8f0;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 0 0 1px #1e293b;
    transition: background 0.15s ease, transform 0.05s ease;
}

.argus-logout-button:hover {
    background: #1e293b;
}

.argus-logout-button:active {
    transform: translateY(1px);
}

/* Main content */

.argus-main {
    width: 100%;
    max-width: 960px;
    box-sizing: border-box;
    padding: 12px 16px 32px 16px;
    display: flex;
    justify-content: center;
}

.argus-panel {
    width: 100%;
    max-width: 840px;
    background: #050814;
    border-radius: 14px;
    padding: 24px 28px 28px 28px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.55);
    border: 1px solid #1e293b;
}

.argus-panel-title {
    margin: 0 0 12px 0;
    font-size: 1.2rem;
    font-weight: 600;
}

/* Forms / controls (used on dashboard + login) */

.argus-form-group {
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.argus-label {
    font-size: 0.9rem;
    color: #cbd5f5;
}

.argus-textarea {
    resize: vertical;
    min-height: 80px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid #1e293b;
    background: #020617;
    color: #e2e8f0;
    font-size: 0.9rem;
    font-family: inherit;
}

.argus-textarea:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 1px #2563eb66;
}

.argus-button-row {
    display: flex;
    justify-content: flex-start;
    gap: 10px;
    margin-top: 8px;
}

.argus-primary-button {
    padding: 8px 18px;
    border-radius: 999px;
    border: none;
    background: #2563eb;
    color: #f9fafb;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 14px 30px rgba(37, 99, 235, 0.45);
    transition: background 0.15s ease, transform 0.05s ease, box-shadow 0.15s ease;
}

.argus-primary-button:hover {
    background: #1d4ed8;
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.55);
}

.argus-primary-button:active {
    transform: translateY(1px);
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.65);
}

/* Run preview (dashboard) */

.argus-run-preview-block {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #020617;
    border: 1px dashed #1f2937;
    font-size: 0.85rem;
    color: #cbd5f5;
}

.argus-run-preview-list {
    margin: 6px 0 0 22px;
    padding: 0;
}

/* Key/value grid (Account page) */

.argus-kv-grid {
    margin-top: 12px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 8px;
}

.argus-kv-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.92rem;
}

.argus-kv-key {
    min-width: 120px;
    max-width: 160px;
    font-weight: 500;
    color: #cbd5f5;
}

.argus-kv-value {
    flex: 1;
    color: #e5e7eb;
    word-break: break-all;
}

/* Footer */

.argus-footer {
    width: 100%;
    max-width: 960px;
    box-sizing: border-box;
    padding: 12px 16px 24px 16px;
    font-size: 0.8rem;
    color: #6b7280;
    display: flex;
    justify-content: center;
}

/* Wide layout for dashboard pages */

.argus-header-wide,
.argus-main-wide {
    max-width: 1200px;
}

/* Dashboard stat cards */

.argus-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin-bottom: 24px;
}

.argus-stat-card {
    background: #020617;
    border: 1px solid #1e293b;
    border-radius: 10px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.argus-stat-label {
    font-size: 0.78rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.argus-stat-value {
    font-size: 1.6rem;
    font-weight: 700;
    color: #f1f5f9;
}

.argus-stat-value-warn {
    color: #f59e0b;
}

.argus-stat-value-danger {
    color: #ef4444;
}

.argus-stat-value-ok {
    color: #22c55e;
}

/* Section headings */

.argus-section-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 24px 0 10px 0;
    padding-bottom: 6px;
    border-bottom: 1px solid #1e293b;
}

/* Data tables */

.argus-table-wrap {
    overflow: visible;
    border-radius: 8px;
    border: 1px solid #1e293b;
}

.argus-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.argus-table th {
    background: #0a101f;
    color: #64748b;
    font-weight: 500;
    text-align: left;
    padding: 10px 12px;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    border-bottom: 1px solid #1e293b;
}

.argus-table td {
    padding: 9px 12px;
    border-bottom: 1px solid #0f172a;
    color: #cbd5e1;
    vertical-align: middle;
}

.argus-table tr:last-child td {
    border-bottom: none;
}

.argus-table tr:hover td {
    background: #0a101f;
}

/* KEV highlight row — amber tint plus red left border */

.argus-table tr.kev-row td {
    background: rgba(120, 53, 15, 0.18);
    border-left: 3px solid #ef4444;
}

.argus-table tr.kev-row:first-child td:first-child {
    border-top-left-radius: 0;
}

/* Detail panel row — expands inline below a CVE findings row */

.argus-detail-cell {
    padding: 0;
    border-left: 3px solid #1e3a8a;
    background: #030b1a;
}

.argus-detail-cell:empty {
    padding: 0;
    border: none;
}

.argus-detail-panel {
    position: relative;
    padding: 16px 18px 14px 18px;
    font-size: 0.84rem;
    color: #cbd5e1;
}

.argus-detail-close {
    position: absolute;
    top: 10px;
    right: 12px;
    background: none;
    border: none;
    color: #475569;
    font-size: 1.1rem;
    cursor: pointer;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 4px;
    transition: color 0.1s ease, background 0.1s ease;
}

.argus-detail-close:hover {
    color: #94a3b8;
    background: #0f172a;
}

.argus-detail-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.argus-detail-cve {
    font-family: monospace;
    font-size: 0.9rem;
    font-weight: 600;
    color: #e2e8f0;
}

.argus-detail-meta {
    font-size: 0.8rem;
    color: #64748b;
}

.argus-detail-kev-badge {
    font-size: 0.75rem;
    font-weight: 600;
    background: #450a0a;
    color: #fca5a5;
    border: 1px solid #991b1b;
    padding: 3px 10px;
    border-radius: 999px;
}

.argus-detail-epss {
    margin-bottom: 12px;
    font-size: 0.82rem;
    color: #94a3b8;
}

.argus-detail-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
    margin-bottom: 10px;
}

.argus-detail-table th {
    background: #0a101f;
    color: #475569;
    font-weight: 500;
    text-align: left;
    padding: 6px 10px;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid #1e293b;
}

.argus-detail-table td {
    padding: 5px 10px;
    border-bottom: 1px solid #0d1526;
    color: #94a3b8;
    vertical-align: middle;
}

.argus-detail-table tr:last-child td {
    border-bottom: none;
}

.argus-detail-total-row td {
    border-top: 1px solid #1e293b;
    padding-top: 7px;
    color: #e2e8f0;
}

.argus-detail-action {
    font-size: 0.82rem;
    color: #60a5fa;
    padding: 6px 0 0 0;
}

.argus-detail-footer {
    display: flex;
    justify-content: flex-end;
    padding-top: 12px;
}

.argus-detail-close-btn {
    background: none;
    border: 1px solid #1e293b;
    color: #475569;
    font-size: 0.78rem;
    cursor: pointer;
    padding: 4px 14px;
    border-radius: 4px;
    transition: color 0.1s ease, border-color 0.1s ease;
}

.argus-detail-close-btn:hover {
    color: #94a3b8;
    border-color: #334155;
}

/* Risk radar chart wrapper */

.argus-radar-wrap {
    display: flex;
    justify-content: center;
    margin: 8px 0 20px 0;
    padding: 16px;
    background: #020617;
    border: 1px solid #1e293b;
    border-radius: 10px;
}

/* APS band badges */

.argus-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.argus-badge-immediate {
    background: #450a0a;
    color: #fca5a5;
    border: 1px solid #7f1d1d;
}

.argus-badge-emergency {
    background: #431407;
    color: #fdba74;
    border: 1px solid #7c2d12;
}

.argus-badge-accelerated {
    background: #422006;
    color: #fcd34d;
    border: 1px solid #78350f;
}

.argus-badge-planned {
    background: #052e16;
    color: #86efac;
    border: 1px solid #14532d;
}

.argus-badge-debt {
    background: #0f172a;
    color: #94a3b8;
    border: 1px solid #1e293b;
}

.argus-badge-kev {
    background: #450a0a;
    color: #fca5a5;
    border: 1px solid #991b1b;
}

.argus-badge-high {
    background: #431407;
    color: #fdba74;
    border: 1px solid #7c2d12;
}

.argus-badge-medium {
    background: #422006;
    color: #fcd34d;
    border: 1px solid #78350f;
}

.argus-badge-low {
    background: #0f172a;
    color: #94a3b8;
    border: 1px solid #1e293b;
}

/* Filter controls */

.argus-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-bottom: 14px;
}

.argus-filter-select {
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid #1e293b;
    background: #020617;
    color: #e2e8f0;
    font-size: 0.85rem;
    font-family: inherit;
    cursor: pointer;
}

.argus-filter-select:focus {
    outline: none;
    border-color: #2563eb;
}

.argus-filter-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: #94a3b8;
    cursor: pointer;
}

.argus-filter-check {
    width: 14px;
    height: 14px;
    accent-color: #2563eb;
}

/* Scan status block */

.argus-status-block {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 8px;
    background: #020617;
    border: 1px solid #1e293b;
    margin-bottom: 20px;
    font-size: 0.875rem;
}

.argus-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.argus-status-dot-idle {
    background: #22c55e;
}

.argus-status-dot-running {
    background: #f59e0b;
}

.argus-status-meta {
    color: #64748b;
    font-size: 0.8rem;
}

/* Config form sections */

.argus-config-section {
    margin-bottom: 28px;
    padding: 20px;
    background: #020617;
    border: 1px solid #1e293b;
    border-radius: 10px;
}

.argus-config-section-title {
    font-size: 0.88rem;
    font-weight: 600;
    color: #94a3b8;
    margin: 0 0 16px 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.argus-input {
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid #1e293b;
    background: #020617;
    color: #e2e8f0;
    font-size: 0.9rem;
    font-family: inherit;
    width: 100%;
    box-sizing: border-box;
}

.argus-input:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 1px #2563eb66;
}

.argus-input[readonly] {
    color: #64748b;
    cursor: not-allowed;
}

.argus-inline-group {
    display: flex;
    gap: 8px;
    align-items: flex-end;
}

.argus-inline-group .argus-input {
    flex: 1;
}

/* Flash messages */

.argus-flash {
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 0.875rem;
    margin-bottom: 16px;
}

.argus-flash-success {
    background: #052e16;
    border: 1px solid #16a34a;
    color: #86efac;
}

.argus-flash-error {
    background: #450a0a;
    border: 1px solid #b91c1c;
    color: #fca5a5;
}

/* Scan Now button variant */

.argus-secondary-button {
    padding: 8px 18px;
    border-radius: 999px;
    border: 1px solid #1e293b;
    background: #0f172a;
    color: #e2e8f0;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease;
}

.argus-secondary-button:hover {
    background: #1e293b;
}

/* CSS-only spinner (no animation libraries) */

.argus-spinner {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid #1e293b;
    border-top-color: #f59e0b;
    border-radius: 50%;
    animation: argus-spin 0.8s linear infinite;
}

@keyframes argus-spin {
    to { transform: rotate(360deg); }
}

/* Action link */

.argus-action-link {
    color: #60a5fa;
    text-decoration: none;
    font-size: 0.82rem;
}

.argus-action-link:hover {
    text-decoration: underline;
}

/* Scan trigger notification strip — shown between header and main content.
   Empty state is hidden via :empty so no layout space is consumed before a
   scan is triggered. Content is injected by HTMX on Scan Now response. */

.argus-scan-notify {
    width: 100%;
    max-width: 960px;
    padding: 0 16px;
    box-sizing: border-box;
}

.argus-scan-notify:empty {
    display: none;
}

/* Login page splash image — centred identity banner above the sign-in form. */

.argus-splash-img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto 20px auto;
    opacity: 0.85;
}

/* Responsive panel width for wider dashboard */

@media (max-width: 900px) {
    .argus-header-wide,
    .argus-main-wide {
        max-width: 100%;
    }
    .argus-stat-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* CSS-only hover tooltips — data-tooltip attribute drives content via ::after.
   Parent text-transform/letter-spacing is reset inside the bubble so prose
   reads normally even when the anchor lives in an uppercase heading or label. */

.tooltip {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: help;
}

.tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #1e293b;
    color: #f1f5f9;
    font-size: 11px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.5;
    max-width: 280px;
    width: max-content;
    padding: 6px 10px;
    border-radius: 4px;
    pointer-events: none;
    opacity: 0;
    white-space: normal;
    z-index: 9999;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
    border: 1px solid #334155;
    transition: opacity 0.15s ease;
}

.tooltip::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 3px);
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #1e293b;
    pointer-events: none;
    opacity: 0;
    z-index: 201;
    transition: opacity 0.15s ease;
}

.tooltip:hover::after,
.tooltip:hover::before {
    opacity: 1;
}

/* Aligns bubble to left edge of anchor — use when anchor is near the left
   viewport boundary to prevent the bubble from clipping off-screen. */
.tooltip-start::after {
    left: 0;
    transform: none;
}

.tooltip-start::before {
    left: 10px;
    transform: none;
}

/* Aligns bubble to right edge of anchor — use for rightmost column headers
   and far-right elements where a centered bubble would overflow the viewport. */
.tooltip-end::after {
    left: auto;
    right: 0;
    transform: none;
}

.tooltip-end::before {
    left: auto;
    right: 10px;
    transform: none;
}

/* ─── Utility classes replacing inline style= attributes in templates ─────────
   These classes exist solely to satisfy the Content-Security-Policy which
   disallows inline styles in contexts other than an internal appliance build.
   Keeping them here (rather than scattered in templates) makes future CSP
   hardening (e.g. switching to nonces) a single-file change. */

.argus-mono-sm {
    font-family: monospace;
    font-size: 0.82rem;
}

.argus-mono {
    font-family: monospace;
}

.argus-fw-semibold {
    font-weight: 600;
}

.argus-muted {
    color: #64748b;
}

.argus-muted-sm {
    font-size: 0.8rem;
    color: #64748b;
}

.argus-row-clickable {
    cursor: pointer;
}

/* Empty-state row in findings/hosts tables. */
.argus-empty-row td {
    text-align: center;
    color: #64748b;
    padding: 24px;
}

/* Numeric columns that are right-aligned (score tables, detail panel). */
.argus-right {
    text-align: right;
}

/* APS total row — right-aligned, heavier weight, slightly larger. */
.argus-score-total {
    text-align: right;
    font-weight: 700;
    font-size: 1.05em;
}

/* Detail panel APS label cell — semibold label in tfoot. */
.argus-detail-label-cell {
    font-weight: 600;
}