/* Knowledge Base Shared Styles */

/* KB-specific design tokens — kept separate from site.css as they only apply to knowledge base pages */
:root {
    --kb-surface: #ffffff;
    --kb-border: #dce6f3;
    --kb-border-strong: #dbe6f4;
    --kb-text: #42556d;
    --kb-text-muted: #607186;
    --kb-text-soft: #9aa8bb;
}

.kb-back-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--brand-orange);
    text-decoration: none;
    font-weight: var(--font-weight-semibold);
    font-size: var(--text-base);
    transition: color var(--duration-200) var(--ease-out);
}

.kb-back-link:hover {
    color: var(--brand-orange-hover);
}

.kb-tag-pill {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-full);
    padding: var(--space-1-5) var(--space-3-5);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    color: var(--gray-700);
    background: #f5f8fc;
    border: 1px solid #dce6f4;
    text-decoration: none;
    transition: all var(--duration-200) var(--ease-out);
}

.kb-tag-pill:hover {
    border-color: rgba(0, 86, 161, 0.45);
    color: var(--brand-blue);
    background: #edf4fd;
}

.kb-metadata-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.kb-owasp-badge,
.kb-effort-badge,
.kb-exploitable-badge {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-md);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.02em;
}

.kb-owasp-badge {
    background: rgba(0, 86, 161, 0.1);
    color: var(--brand-blue);
    border: 1px solid rgba(0, 86, 161, 0.2);
}

.kb-effort-badge {
    background: rgba(33, 44, 94, 0.08);
    color: var(--brand-dark-blue);
    border: 1px solid rgba(33, 44, 94, 0.15);
}

.kb-exploitable-badge.exploitable {
    background: rgba(220, 38, 38, 0.1);
    color: #dc2626;
    border: 1px solid rgba(220, 38, 38, 0.2);
}

.kb-exploitable-badge.not-exploitable {
    background: rgba(22, 163, 74, 0.1);
    color: #16a34a;
    border: 1px solid rgba(22, 163, 74, 0.2);
}

.kb-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.kb-card-top .kb-card-title {
    margin-bottom: 0;
    flex: 1;
}

.kb-card-urgency {
    display: inline-block;
    padding: var(--space-0-5) var(--space-2-5);
    border-radius: var(--radius-md);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: capitalize;
    white-space: nowrap;
    flex-shrink: 0;
}

.urgency-immediate,
.kb-urgency-badge.urgency-immediate {
    background: rgba(220, 38, 38, 0.12);
    color: #dc2626;
    border: 1px solid rgba(220, 38, 38, 0.25);
}

.urgency-high,
.kb-urgency-badge.urgency-high {
    background: rgba(234, 88, 12, 0.12);
    color: #ea580c;
    border: 1px solid rgba(234, 88, 12, 0.25);
}

.urgency-medium,
.kb-urgency-badge.urgency-medium {
    background: rgba(202, 138, 4, 0.12);
    color: #ca8a04;
    border: 1px solid rgba(202, 138, 4, 0.25);
}

.urgency-low,
.kb-urgency-badge.urgency-low {
    background: rgba(22, 163, 74, 0.12);
    color: #16a34a;
    border: 1px solid rgba(22, 163, 74, 0.25);
}

.kb-severity-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    text-transform: capitalize;
}

.kb-severity-badge .kb-cvss {
    font-weight: var(--font-weight-normal);
    font-size: var(--text-xs);
    opacity: 0.85;
}

.severity-critical {
    background: rgba(220, 38, 38, 0.12);
    color: #dc2626;
    border: 1px solid rgba(220, 38, 38, 0.25);
}

.severity-high {
    background: rgba(234, 88, 12, 0.12);
    color: #ea580c;
    border: 1px solid rgba(234, 88, 12, 0.25);
}

.severity-medium {
    background: rgba(202, 138, 4, 0.12);
    color: #ca8a04;
    border: 1px solid rgba(202, 138, 4, 0.25);
}

.severity-low {
    background: rgba(22, 163, 74, 0.12);
    color: #16a34a;
    border: 1px solid rgba(22, 163, 74, 0.25);
}

.severity-informational {
    background: rgba(0, 86, 161, 0.1);
    color: var(--brand-blue);
    border: 1px solid rgba(0, 86, 161, 0.2);
}

html[data-bs-theme="dark"] .kb-tag-pill {
    background: #1b2233;
    border-color: #2d3b52;
    color: var(--text-primary);
}

html[data-bs-theme="dark"] .kb-tag-pill:hover {
    border-color: var(--brand-blue-light);
    color: #93c5fd;
    background: #1b2b43;
}

html[data-bs-theme="dark"] .kb-owasp-badge {
    background: rgba(96, 165, 250, 0.1);
    color: var(--brand-blue-light);
    border-color: rgba(96, 165, 250, 0.2);
}

html[data-bs-theme="dark"] .kb-effort-badge {
    background: rgba(243, 244, 246, 0.08);
    color: var(--text-tertiary);
    border-color: rgba(243, 244, 246, 0.15);
}

html[data-bs-theme="dark"] .kb-tab-badge.urgency-immediate {
    background: rgba(248, 113, 113, 0.15);
    color: #f87171;
    border-color: rgba(248, 113, 113, 0.3);
}

html[data-bs-theme="dark"] .kb-tab-badge.urgency-high {
    background: rgba(251, 146, 60, 0.15);
    color: #fb923c;
    border-color: rgba(251, 146, 60, 0.3);
}

html[data-bs-theme="dark"] .kb-tab-badge.urgency-medium {
    background: rgba(250, 204, 21, 0.15);
    color: #facc15;
    border-color: rgba(250, 204, 21, 0.3);
}

html[data-bs-theme="dark"] .kb-tab-badge.urgency-low {
    background: rgba(74, 222, 128, 0.15);
    color: #4ade80;
    border-color: rgba(74, 222, 128, 0.3);
}

html[data-bs-theme="dark"] .kb-tab-badge.severity-critical {
    background: rgba(248, 113, 113, 0.15);
    color: #f87171;
    border-color: rgba(248, 113, 113, 0.3);
}

html[data-bs-theme="dark"] .kb-tab-badge.severity-high {
    background: rgba(251, 146, 60, 0.15);
    color: #fb923c;
    border-color: rgba(251, 146, 60, 0.3);
}

html[data-bs-theme="dark"] .kb-tab-badge.severity-medium {
    background: rgba(250, 204, 21, 0.15);
    color: #facc15;
    border-color: rgba(250, 204, 21, 0.3);
}

html[data-bs-theme="dark"] .kb-tab-badge.severity-low {
    background: rgba(74, 222, 128, 0.15);
    color: #4ade80;
    border-color: rgba(74, 222, 128, 0.3);
}

html[data-bs-theme="dark"] .kb-tab-badge.severity-informational {
    background: rgba(96, 165, 250, 0.15);
    color: var(--brand-blue-light);
    border-color: rgba(96, 165, 250, 0.3);
}