/* ==========================================================
   PentAGI Custom Styles — Bootswatch Cyborg theme
   ========================================================== */

/* ── Severity Colors ── */
:root {
    --sev-critical: #CC0000;
    --sev-high:     #FF8800;
    --sev-medium:   #FFB700;
    --sev-low:      #2A9FD6;
    --sev-info:     #888;
}

.bg-critical { background-color: var(--sev-critical) !important; }
.bg-high     { background-color: var(--sev-high) !important; }
.bg-medium   { background-color: var(--sev-medium) !important; }
.bg-low      { background-color: var(--sev-low) !important; }
.bg-info-sev { background-color: var(--sev-info) !important; }

.text-critical { color: var(--sev-critical) !important; }
.text-high     { color: var(--sev-high) !important; }
.text-medium   { color: var(--sev-medium) !important; }
.text-low      { color: var(--sev-low) !important; }

.badge-outline-critical { border:1px solid var(--sev-critical); color:var(--sev-critical); }
.badge-outline-high     { border:1px solid var(--sev-high); color:var(--sev-high); }

/* ── General ── */
body { background: #060606; }
.animated-spin { animation: spin 1s linear infinite; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ── Sidebar ── */
.navbar-vertical { background: #0a0a0a !important; border-right: 1px solid #1a1a1a; }
.navbar-vertical .nav-link { color: #aaa; }
.navbar-vertical .nav-link:hover,
.navbar-vertical .nav-link.active { color: #fff; background: rgba(42,159,214,0.15); border-left: 3px solid var(--bs-primary); }

/* ── Cards ── */
.card { background: #111; border: 1px solid #1a1a1a; }
.card-header { background: #0d0d0d; border-bottom: 1px solid #1a1a1a; }
.card-footer { background: #0d0d0d; border-top: 1px solid #1a1a1a; }
.card-sm { background: #111; }

/* ── Table ── */
.table { color: #ccc; }
.table thead th { background: #0d0d0d; border-color: #1a1a1a; color: #999; }
.table td { border-color: #1a1a1a; }

/* ── Finding cards ── */
.finding-card { border-left: 4px solid transparent; transition: border-color 0.2s; background: #0f0f0f; }
.finding-card[data-severity="critical"] { border-left-color: var(--sev-critical); }
.finding-card[data-severity="high"]     { border-left-color: var(--sev-high); }
.finding-card[data-severity="medium"]   { border-left-color: var(--sev-medium); }
.finding-card[data-severity="low"]      { border-left-color: var(--sev-low); }
.finding-card[data-severity="info"]     { border-left-color: var(--sev-info); }

/* ── Agent panels ── */
.agent-panel { border-left: 4px solid #2A9FD6; margin-bottom: 1rem; background: #0f0f0f; }
.agent-panel .agent-header { cursor: pointer; user-select: none; }
.agent-panel .agent-log {
    max-height: 280px; overflow-y: auto;
    font-family: 'JetBrains Mono','Fira Code','Cascadia Code',monospace;
    font-size: 0.8125rem; background: #060606; padding: 0.75rem; border-radius: 4px;
}
.agent-panel .agent-log .log-line { padding: 2px 0; border-bottom: 1px solid #1a1a1a; }
.agent-panel .agent-log .log-tool  { color: #2A9FD6; }
.agent-panel .agent-log .log-find  { color: var(--sev-critical); font-weight: bold; }
.agent-panel .agent-log .log-signal{ color: #9954bb; }
.agent-panel .agent-log .log-error { color: #CC0000; }

/* ── Status dots ── */
.status-pending   { background: #666; }
.status-running   { background: #77B300; animation: pulse 2s infinite; }
.status-completed { background: #2A9FD6; }
.status-failed    { background: #CC0000; }
.status-waiting   { background: #FF8800; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }

/* ── Live feed ── */
.live-feed { max-height: 400px; overflow-y: auto; scroll-behavior: smooth; }
.live-feed .list-group-item { background: #0f0f0f; color: #ccc; border-color: #1a1a1a; }
.live-feed .list-group-item:hover { background: #1a1a1a; }

/* ── Toasts ── */
.toast { background: #111; border: 1px solid #1a1a1a; }
.toast-finding-critical { border-left: 4px solid var(--sev-critical); }
.toast-finding-high     { border-left: 4px solid var(--sev-high); }

/* ── VNC iframe ── */
.vnc-frame { width:100%; height:480px; border:1px solid #1a1a1a; border-radius:4px; background:#000; }

/* ── Evidence blocks ── */
.evidence-block { margin-bottom: 1rem; }
.evidence-block .evidence-label {
    font-size:0.75rem; text-transform:uppercase; letter-spacing:0.05em; color:#888; margin-bottom:0.25rem;
}
.evidence-block pre {
    background: #0a0a0a; color: #ccc; padding: 0.75rem; border-radius: 4px;
    font-size: 0.8125rem; max-height: 360px; overflow: auto; border: 1px solid #1a1a1a;
}

/* ── Breadcrumb ── */
.breadcrumb { background: transparent; }
.breadcrumb-item a { color: #888; }
.breadcrumb-item.active { color: #ccc; }

/* ── Page wrapper ── */
.page-wrapper { background: #060606; }
.page-body { background: #060606; }

/* ── Form elements ── */
.form-control, .form-select { background: #0a0a0a; color: #ccc; border-color: #1a1a1a; }
.form-control:focus, .form-select:focus { background: #111; color: #fff; border-color: #2A9FD6; }

/* ── Dropdown ── */
.dropdown-menu { background: #111; border-color: #1a1a1a; }
.dropdown-item { color: #ccc; }
.dropdown-item:hover { background: #1a1a1a; color: #fff; }
.dropdown-divider { border-color: #1a1a1a; }
.dropdown-header { color: #888; }

/* ── Accordion ── */
.accordion-item { background: #0f0f0f; border-color: #1a1a1a; }
.accordion-button { background: #0f0f0f; color: #ccc; }
.accordion-button:not(.collapsed) { background: #1a1a1a; color: #fff; }
.accordion-button::after { filter: invert(0.6); }

/* ── Modal ── */
.modal-content { background: #111; border-color: #1a1a1a; }
.modal-header { border-color: #1a1a1a; }
.modal-footer { border-color: #1a1a1a; }

/* ── List group ── */
.list-group-item { background: #0f0f0f; border-color: #1a1a1a; color: #ccc; }
.list-group-item-action:hover { background: #1a1a1a; }

/* ── Badge ── */
.badge.bg-red { background: var(--sev-critical) !important; }
.badge.bg-purple { background: #9954bb !important; }

/* ── Responsive ── */
@media (max-width: 768px) {
    .agent-panel .agent-log { max-height: 200px; }
    .live-feed { max-height: 250px; }
}