/* ARES Platform - Modern Design System */
/* Neutral Peace Color Palette with RobotoFlex & Google Sans Code */

/* ============================================
   FONT IMPORTS & DEFINITIONS
   ============================================ */
@import url("https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,300;8..144,400;8..144,500;8..144,600;8..144,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wght@400;500;600;700&display=swap");

/* RobotoFlex Variable Font */
.roboto-flex {
    font-family: "Roboto Flex", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-variation-settings:
        "slnt" 0,
        "wdth" 100,
        "GRAD" 0,
        "XOPQ" 96,
        "XTRA" 468,
        "YOPQ" 79,
        "YTAS" 750,
        "YTDE" -203,
        "YTFI" 738,
        "YTLC" 514,
        "YTUC" 712;
}

/* Google Sans Code (Monospace) */
.google-sans-code {
    font-family: "Noto Sans Mono", monospace;
    font-optical-sizing: auto;
    font-style: normal;
}

/* ============================================
   BASE VARIABLES (Shared across all themes)
   ============================================ */
:root {
    /* Status Colors - Shared across all themes */
    --color-success: #2ecc71;
    --color-error: #e74c3c;
    --color-warning: #f39c12;
    --color-info: #5dade2;

    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;
}

/* ============================================
   NEUTRAL PEACE PALETTE - DARK MODE (Default)
   ============================================ */
:root {
    /* Neutral Peace Colors - Primary Palette */
    --color-accent: #a8d5f7; /* Light Teal/Cyan for better contrast on dark backgrounds */
    --color-accent-light: #c5e3fd; /* Lighter Teal */
    --color-accent-dark: #5dade2; /* Medium Teal */
    --color-accent-muted: #85c1e9; /* Muted Teal */
    --color-accent-warm: #877c73; /* Warm Brown */
    --color-accent-highlight: #d5d0c4; /* Warm Beige */

    /* Base Colors */
    --color-black: #000000;
    --color-dark: #1a1a1a;
    --color-darker: #44474d;
    --color-gray-dark: #3d4449;
    --color-gray: #5a5d63;
    --color-gray-light: #9ca5b1;
    --color-white: #ffffff;
    --color-off-white: #d5d0c4;
    --color-light-gray: #9ca5b1;

    /* Semantic Variables */
    --bg-primary: #2b2e33; /* Dark Background */
    --bg-secondary: #36393f; /* Secondary Background */
    --bg-tertiary: #47525c; /* Accent Background - Medium Gray for better contrast with light accent text */
    --text-primary: #f0efec; /* Light Text */
    --text-secondary: #d5d0c4; /* Secondary Text */
    --text-muted: #9ca5b1; /* Muted Text */
    --text-on-tertiary: #f0efec; /* Text on Accent Background */
    --border-color: #3d4449; /* Border Color */
    --input-bg: #2b2e33; /* Input Background */
    --card-bg: #36393f; /* Card Background */
    --navbar-bg: #36393f; /* Navbar Background */
    --sidebar-bg: #36393f; /* Sidebar Background */

    /* Shadows */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.5);
    --shadow-accent: 0 4px 12px rgba(61, 94, 107, 0.3);

    /* Legacy aliases for compatibility */
    --color-garnet: var(--color-accent);
    --color-garnet-light: var(--color-accent-light);
    --color-garnet-dark: var(--color-accent-dark);
    --color-garnet-muted: var(--color-accent-muted);
    --shadow-garnet: var(--shadow-accent);

    /* Asset Type Colors - Source of truth for badges and graph */
    --asset-color-domain: #0dcaf0;
    --asset-color-ip: #ffc107;
    --asset-color-host: #6f42c1;
    --asset-color-service: #198754;
    --asset-color-network: #fd7e14;
    --asset-color-location: #dc3545;
    --asset-color-software: #20c997;
    --asset-color-webservice: #6610f2;
    --asset-color-webendpoint: #e83e8c;

    /* Severity Colors - Dark Mode (applied as default dark theme) */
    --severity-critical-bg: #dc3545;
    --severity-critical-text: #ffffff;
    --severity-high-bg: #fd7e14;
    --severity-high-text: #000000;
    --severity-medium-bg: #ffc107;
    --severity-medium-text: #000000;
    --severity-low-bg: #198754;
    --severity-low-text: #ffffff;
    --severity-info-bg: #0d6efd;
    --severity-info-text: #ffffff;
    --severity-unknown-bg: #6c757d;
    --severity-unknown-text: #ffffff;
}

/* ============================================
   NEUTRAL PEACE PALETTE - LIGHT MODE
   ============================================ */
[data-theme="light"] {
    /* Neutral Peace Colors - Light Palette */
    --color-accent: #3d5e6b; /* Deep Teal */
    --color-accent-light: #56687a; /* Medium Teal */
    --color-accent-dark: #2d3e4b; /* Darker Teal */
    --color-accent-muted: #3d5e6b; /* Teal */
    --color-accent-warm: #877c73; /* Warm Brown */
    --color-accent-highlight: #877c73; /* Brown Highlight */

    /* Base Colors */
    --color-black: #44474d;
    --color-dark: #f0efec;
    --color-darker: #ffffff;
    --color-gray-dark: #d5d0c4;
    --color-gray: #877c73;
    --color-gray-light: #877c73;
    --color-white: #ffffff;
    --color-off-white: #f0efec;
    --color-light-gray: #d5d0c4;

    /* Semantic Variables */
    --bg-primary: #f5f3f0;
    --bg-secondary: #ffffff;
    --bg-tertiary: #e8e4da;
    --text-primary: #44474d;
    --text-secondary: #56687a;
    --text-muted: #877c73;
    --text-on-tertiary: #44474d;
    --border-color: #d5d0c4;
    --input-bg: #ffffff;
    --card-bg: #ffffff;
    --navbar-bg: #3d5e6b;
    --sidebar-bg: #ffffff;

    /* Shadows - Lighter */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.15);
    --shadow-accent: 0 4px 12px rgba(61, 94, 107, 0.15);

    /* Legacy aliases for compatibility */
    --color-garnet: var(--color-accent);
    --color-garnet-light: var(--color-accent-light);
    --color-garnet-dark: var(--color-accent-dark);
    --color-garnet-muted: var(--color-accent-muted);
    --shadow-garnet: var(--shadow-accent);

    /* Severity Colors - Light Mode (same as dark mode for consistency) */
    --severity-critical-bg: #dc3545;
    --severity-critical-text: #ffffff;
    --severity-high-bg: #fd7e14;
    --severity-high-text: #000000;
    --severity-medium-bg: #ffc107;
    --severity-medium-text: #000000;
    --severity-low-bg: #198754;
    --severity-low-text: #ffffff;
    --severity-info-bg: #0d6efd;
    --severity-info-text: #ffffff;
    --severity-unknown-bg: #6c757d;
    --severity-unknown-text: #ffffff;
}

/* ============================================
   RESET & BASE STYLES
   ============================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Roboto Flex", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-optical-sizing: auto;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.5;
    font-size: 16px;
    min-height: 100vh;
    transition:
        background-color var(--transition-base),
        color var(--transition-base);
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Roboto Flex", sans-serif;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.5px;
    margin-bottom: 0.5rem;
}

h1 {
    font-size: 2.5rem;
}
h2 {
    font-size: 2rem;
}
h3 {
    font-size: 1.75rem;
}
h4 {
    font-size: 1.5rem;
}
h5 {
    font-size: 1.25rem;
}
h6 {
    font-size: 1rem;
}

a {
    color: var(--color-accent-light);
    text-decoration: none;
    transition: color var(--transition-base);
}

a:hover {
    color: var(--color-accent);
}

/* Code elements - use monospace font */
code {
    background-color: transparent;
    padding: 0;
    border-radius: 0;
    color: var(--text-primary);
    font-family: "Noto Sans Mono", monospace;
    font-size: 0.9em;
}

pre {
    font-family: "Noto Sans Mono", monospace;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* ============================================
   BUTTONS
   ============================================ */
.btn {
    display: inline-block;
    padding: 0.5rem 1rem;
    font-size: 0.95rem;
    font-weight: 500;
    font-family: "Roboto Flex", sans-serif;
    text-align: center;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-base);
    text-decoration: none;
    line-height: 1.4;
}

.btn-accent,
.btn-garnet,
a.btn-accent,
a.btn-garnet {
    background-color: var(--color-accent);
    color: var(--color-white) !important;
    border: 2px solid var(--color-accent);
}

.btn-accent:hover,
.btn-garnet:hover,
a.btn-accent:hover,
a.btn-garnet:hover {
    background-color: var(--color-accent-light);
    border-color: var(--color-accent-light);
    color: var(--color-white) !important;
    transform: translateY(-2px);
    box-shadow: var(--shadow-accent);
}

.btn-outline-accent,
.btn-outline-garnet,
a.btn-outline-accent,
a.btn-outline-garnet {
    background-color: transparent;
    color: var(--color-accent) !important;
    border: 2px solid var(--color-accent);
}

.btn-outline-accent:hover,
.btn-outline-garnet:hover,
a.btn-outline-accent:hover,
a.btn-outline-garnet:hover {
    background-color: var(--color-accent);
    color: var(--color-white) !important;
    transform: translateY(-2px);
}

.btn-outline-primary {
    background-color: transparent;
    color: #0d6efd !important;
    border: 2px solid #0d6efd;
}

.btn-outline-primary i {
    color: #0d6efd !important;
}

.btn-outline-primary:hover {
    background-color: #0d6efd;
    color: var(--color-white) !important;
}

.btn-outline-primary:hover i {
    color: var(--color-white) !important;
}

.btn-outline-info {
    background-color: transparent;
    color: #0dcaf0 !important;
    border: 2px solid #0dcaf0;
}

.btn-outline-info i {
    color: #0dcaf0 !important;
}

.btn-outline-info:hover {
    background-color: #0dcaf0;
    color: var(--color-white) !important;
}

.btn-outline-info:hover i {
    color: var(--color-white) !important;
}

.btn-outline-warning {
    background-color: transparent;
    color: #ffc107 !important;
    border: 2px solid #ffc107;
}

.btn-outline-warning i {
    color: #ffc107 !important;
}

.btn-outline-warning:hover {
    background-color: #ffc107;
    color: #000 !important;
}

.btn-outline-warning:hover i {
    color: #000 !important;
}

.btn-outline-danger {
    background-color: transparent;
    color: var(--color-error) !important;
    border: 2px solid var(--color-error);
}

.btn-outline-danger i {
    color: var(--color-error) !important;
}

.btn-outline-danger:hover {
    background-color: var(--color-error);
    color: var(--color-white) !important;
}

.btn-outline-danger:hover i {
    color: var(--color-white) !important;
}

.btn-sm {
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
}

/* ============================================
   CARDS
   ============================================ */
.card {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--spacing-lg);
    overflow: visible;
    transition:
        background-color var(--transition-base),
        border-color var(--transition-base);
}

.card-dark {
    background-color: var(--card-bg);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.card-header {
    padding: 0.75rem 1rem;
    background-color: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
    color: var(--text-on-tertiary);
    transition:
        background-color var(--transition-base),
        border-color var(--transition-base),
        color var(--transition-base);
    overflow: visible;
    position: relative;
    z-index: 2;
}

/* Allow dropdowns in card-header to overflow the card */
.card-header .dropdown-menu {
    z-index: 1050;
}

.card-body {
    padding: 1rem;
    color: var(--text-primary);
    background-color: var(--card-bg) !important;
}

/* Card content text elements */
.card-body dt,
.card-body dd,
.card-body label,
.card-body div,
.card-body
    span:not(.badge):not(.score-segment):not(.score-type):not(
        .score-severity
    ):not(.score-value) {
    color: var(--text-primary);
}

.card-body .text-muted,
.card-body dt.text-muted,
.card-body label.text-muted {
    color: var(--text-muted) !important;
}

.card-body code {
    color: var(--color-accent);
    font-family: "Noto Sans Mono", monospace;
}

.card-body a {
    color: var(--color-accent);
}

.card-body a:hover {
    color: var(--color-accent-light);
}

.login-card {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
    transition:
        background-color var(--transition-base),
        border-color var(--transition-base);
}

/* Stats Grid Layout */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    padding: 0 0.5rem;
}

@media (max-width: 992px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }
}

.stat-card {
    background: linear-gradient(
        135deg,
        var(--bg-secondary) 0%,
        var(--bg-secondary) 100%
    );
    border: 1px solid var(--border-color);
    transition: all var(--transition-base);
    margin-bottom: 0;
}

.stat-card:hover {
    transform: translateY(-4px);
    border-color: var(--color-accent);
    box-shadow: var(--shadow-accent);
}

.stat-label {
    color: var(--text-muted);
    font-size: 0.875rem;
    font-weight: 500;
    font-family: "Roboto Flex", sans-serif;
}

.stat-value {
    color: var(--text-primary);
    font-weight: 600;
    font-family: "Roboto Flex", sans-serif;
}

[data-theme="light"] .stat-label {
    color: var(--text-secondary);
}

[data-theme="light"] .stat-value {
    color: var(--text-primary);
}

.error-card {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
    transition:
        background-color var(--transition-base),
        border-color var(--transition-base);
}

/* ============================================
   FORMS
   ============================================ */
.form-label {
    display: block;
    margin-bottom: 0.4rem;
    color: var(--text-secondary);
    font-weight: 500;
    font-family: "Roboto Flex", sans-serif;
    font-size: 0.95rem;
}

.form-control,
.form-select,
textarea.form-control {
    width: 100%;
    padding: 0.5rem 0.75rem;
    background-color: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.95rem;
    font-family: "Roboto Flex", sans-serif;
    transition: all var(--transition-base);
    line-height: 1.4;
}

textarea.form-control {
    resize: vertical;
    min-height: 100px;
}

.form-control:focus,
.form-select:focus,
textarea.form-control:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(61, 94, 107, 0.2);
    background-color: var(--input-bg);
    color: var(--text-primary);
}

.form-control::placeholder,
textarea.form-control::placeholder {
    color: var(--color-gray-light);
}

/* Disabled form controls */
.form-control:disabled,
.form-select:disabled,
textarea.form-control:disabled {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-muted);
    opacity: 0.6;
    cursor: not-allowed;
}

/* Date inputs - calendar icon visibility */
input[type="date"].form-control,
input[type="datetime-local"].form-control,
input[type="time"].form-control {
    color-scheme: dark;
}

[data-theme="light"] input[type="date"].form-control,
[data-theme="light"] input[type="datetime-local"].form-control,
[data-theme="light"] input[type="time"].form-control {
    color-scheme: light;
}

/* Webkit calendar picker icon */
input[type="date"].form-control::-webkit-calendar-picker-indicator,
input[type="datetime-local"].form-control::-webkit-calendar-picker-indicator,
input[type="time"].form-control::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.9;
    transition: opacity var(--transition-fast);
}

input[type="date"].form-control::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"].form-control::-webkit-calendar-picker-indicator:hover,
input[type="time"].form-control::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

/* Disabled date inputs */
input[type="date"].form-control:disabled::-webkit-calendar-picker-indicator,
input[type="datetime-local"].form-control:disabled::-webkit-calendar-picker-indicator,
input[type="time"].form-control:disabled::-webkit-calendar-picker-indicator {
    opacity: 0.3;
    cursor: not-allowed;
}

/* Select elements */
.form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%239CA5B1' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    padding-right: 2.5rem;
    appearance: none;
}

.form-select option {
    background-color: var(--input-bg);
    color: var(--text-primary);
    padding: 0.5rem;
}

.form-select optgroup {
    background-color: var(--bg-secondary);
    color: var(--color-accent);
    font-weight: 600;
    padding: 0.5rem;
}

/* Checkbox and Radio */
.form-check {
    display: block;
    min-height: 1.5rem;
    padding-left: 1.5em;
    margin-bottom: 0.125rem;
}

.form-check-input {
    width: 1em;
    height: 1em;
    margin-top: 0.25em;
    margin-left: -1.5em;
    vertical-align: top;
    background-color: var(--input-bg);
    border: 1px solid var(--border-color);
    appearance: none;
    cursor: pointer;
    transition: all var(--transition-base);
}

.form-check-input[type="checkbox"] {
    border-radius: var(--radius-sm);
}

.form-check-input:checked {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
}

.form-check-input:checked[type="checkbox"] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
}

.form-check-input:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(61, 94, 107, 0.2);
}

.form-check-label {
    color: var(--text-secondary);
    cursor: pointer;
    font-family: "Roboto Flex", sans-serif;
}

/* ============================================
   ALERTS
   ============================================ */
.alert {
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm);
    margin-bottom: 1rem;
    border: 1px solid transparent;
    display: flex;
    align-items: center;
    font-family: "Roboto Flex", sans-serif;
    font-size: 0.95rem;
}

.alert-success {
    background-color: rgba(46, 204, 113, 0.1);
    border-color: var(--color-success);
    color: var(--color-success);
}

.alert-danger {
    background-color: rgba(231, 76, 60, 0.1);
    border-color: var(--color-error);
    color: var(--color-error);
}

.alert-warning {
    background-color: rgba(243, 156, 18, 0.1);
    border-color: var(--color-warning);
    color: var(--color-warning);
}

.alert-info {
    background-color: rgba(52, 152, 219, 0.1);
    border-color: var(--color-info);
    color: var(--color-info);
}

.alert-dismissible {
    padding-right: 3rem;
    position: relative;
}

.btn-close {
    position: absolute;
    right: var(--spacing-md);
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: inherit;
    opacity: 0.7;
    cursor: pointer;
    font-size: 1.25rem;
    padding: 0;
    width: 1.5rem;
    height: 1.5rem;
}

.btn-close:hover {
    opacity: 1;
}

/* ============================================
   LAYOUT CONTAINERS
   ============================================ */
.login-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(
        135deg,
        var(--bg-secondary) 0%,
        var(--bg-primary) 100%
    );
    padding: var(--spacing-lg);
    transition: background var(--transition-base);
}

.error-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(
        135deg,
        var(--bg-secondary) 0%,
        var(--bg-primary) 100%
    );
    padding: var(--spacing-lg);
    transition: background var(--transition-base);
}

/* ============================================
   USER AVATAR IN NAVBAR
   ============================================ */
.user-avatar-navbar {
    width: 32px !important;
    height: 32px !important;
    object-fit: cover;
    border: 2px solid var(--color-accent-light);
}

/* Large avatar for profile and organization create/edit pages */
.profile-avatar-large {
    width: 150px !important;
    height: 150px !important;
    object-fit: cover;
}

/* ============================================
   THEME TOGGLE
   ============================================ */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

.theme-toggle-input {
    display: none;
}

.theme-toggle-wrapper {
    position: relative;
    width: 48px;
    height: 28px;
    background-color: var(--border-color);
    border-radius: 14px;
    transition: background-color var(--transition-base);
    display: flex;
    align-items: center;
}

.theme-toggle-slider {
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background-color: var(--text-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-base);
    font-size: 0.75rem;
}

.theme-toggle-icon {
    color: var(--border-color);
}

.theme-toggle-input:checked + .theme-toggle-wrapper {
    background-color: var(--color-accent);
}

.theme-toggle-input:checked + .theme-toggle-wrapper .theme-toggle-slider {
    left: calc(100% - 24px);
}

.theme-toggle-input:checked + .theme-toggle-wrapper .theme-toggle-icon::before {
    content: "\f185";
}

/* Light mode theme toggle styling */
[data-theme="light"] .theme-toggle-wrapper {
    background-color: var(--card-bg);
    border: 2px solid var(--border-color);
}

[data-theme="light"] .theme-toggle-slider {
    background-color: var(--navbar-bg);
    color: var(--color-white);
}

[data-theme="light"] .theme-toggle-icon {
    color: var(--color-white);
}

[data-theme="light"] .theme-toggle-input:checked + .theme-toggle-wrapper {
    background-color: var(--card-bg);
    border-color: var(--navbar-bg);
}

[data-theme="light"]
    .theme-toggle-input:checked
    + .theme-toggle-wrapper
    .theme-toggle-slider {
    background-color: var(--navbar-bg);
}

/* ============================================
   NAVBAR
   ============================================ */
.navbar {
    background-color: var(--navbar-bg);
    border-bottom: 1px solid var(--border-color);
    padding: 0.5rem var(--spacing-lg);
    transition:
        background-color var(--transition-base),
        border-color var(--transition-base);
    font-family: "Roboto Flex", sans-serif;
    min-height: 56px;
}

.navbar-dark {
    background-color: var(--navbar-bg);
}

.navbar-brand {
    font-weight: 700;
    font-size: 1.3rem;
    color: var(--color-white) !important;
    font-family: "Roboto Flex", sans-serif;
    line-height: 1.4;
}

/* Navbar links in light mode - keep white text on colored background */
[data-theme="light"] .navbar .nav-link,
[data-theme="light"] .navbar .navbar-brand,
[data-theme="light"] .navbar .navbar-text,
[data-theme="light"] .navbar .dropdown-toggle {
    color: var(--color-white) !important;
}

[data-theme="light"] .navbar .nav-link:hover,
[data-theme="light"] .navbar .nav-link.active {
    background-color: var(--color-off-white);
    color: var(--color-accent) !important;
    border-radius: var(--radius-sm);
    transform: none;
}

[data-theme="light"] .navbar {
    border-bottom-color: var(--color-accent);
}

/* ============================================
   DROPDOWNS
   ============================================ */
.dropdown-menu {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-md);
    font-family: "Roboto Flex", sans-serif;
}

.dropdown-menu-dark {
    background-color: var(--card-bg);
    border-color: var(--border-color);
}

.dropdown-item {
    color: var(--text-primary);
    transition: all var(--transition-base);
    padding: 0.5rem 1rem;
    font-size: 0.95rem;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

.dropdown-item.active {
    background-color: var(--color-accent);
    color: var(--color-white);
}

.dropdown-divider {
    border-top: 1px solid var(--border-color);
}

.dropdown-header {
    color: var(--text-muted);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.4rem 1rem;
    font-family: "Roboto Flex", sans-serif;
}

/* Light mode specific dropdown styles */
[data-theme="light"] .dropdown-menu-dark {
    background-color: var(--card-bg);
}

[data-theme="light"] .dropdown-item {
    color: var(--text-primary);
}

[data-theme="light"] .dropdown-item:hover {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

.navbar-text {
    color: var(--text-secondary);
}

[data-theme="light"] .navbar-text {
    color: var(--color-white) !important;
}

.bg-primary-black {
    background-color: var(--navbar-bg) !important;
}

/* Navbar spacing */
.navbar-nav-spaced .nav-item {
    margin-right: var(--spacing-lg);
}

.navbar-nav-spaced .nav-item:last-child {
    margin-right: 0;
}

/* ============================================
   SIDEBAR
   ============================================ */
.sidebar {
    min-height: calc(100vh - 56px);
    background-color: var(--sidebar-bg);
    border-right: 1px solid var(--border-color);
    padding: var(--spacing-md);
    transition:
        background-color var(--transition-base),
        border-color var(--transition-base),
        width 0.3s ease;
    width: 240px;
    flex-shrink: 0;
    position: relative;
    font-family: "Roboto Flex", sans-serif;
}

/* Sidebar Toggle Button */
.sidebar-toggle {
    position: absolute;
    top: 16px;
    right: -12px;
    width: 24px;
    height: 24px;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all var(--transition-base);
    color: var(--text-muted);
    font-size: 0.7rem;
}

.sidebar-toggle:hover {
    background-color: var(--color-accent);
    color: var(--color-white);
    border-color: var(--color-accent);
}

.sidebar-toggle i {
    transition: transform 0.3s ease;
}

/* Collapsed Sidebar */
.sidebar.collapsed {
    width: 56px;
    overflow: visible;
}

.sidebar.collapsed > .p-3 {
    padding: var(--spacing-md) var(--spacing-xs) !important;
}

.sidebar.collapsed .sidebar-toggle i {
    transform: rotate(180deg);
}

.sidebar .nav-link {
    display: flex;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
    transition:
        width 0.1s ease 0.2s,
        padding 0.1s ease 0.2s,
        background-color var(--transition-base),
        color var(--transition-base);
}

.sidebar .nav-link-text {
    opacity: 1;
    transition: opacity 0.1s ease 0.2s;
}

.sidebar .submenu-arrow {
    opacity: 1;
    transition: opacity 0.1s ease 0.2s;
    margin-left: auto;
}

.sidebar.collapsed .nav-link-text,
.sidebar.collapsed .submenu-arrow {
    opacity: 0;
    transition: opacity 0.05s ease;
    position: absolute;
    pointer-events: none;
}

.sidebar.collapsed .nav-item {
    width: 100%;
    display: flex;
    justify-content: center;
}

.sidebar.collapsed .nav-link {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-sm) var(--spacing-md) !important;
    width: auto;
    min-width: 40px;
    height: 40px;
    transition:
        width 0.1s ease,
        padding 0.1s ease,
        background-color var(--transition-base),
        color var(--transition-base);
}

.sidebar.collapsed .nav-link i {
    margin: 0 !important;
    font-size: 1.1rem;
}

.sidebar.collapsed .nav-link:hover,
.sidebar.collapsed .nav-link.active {
    transform: none !important;
}

.sidebar.collapsed .submenu {
    display: none !important;
}

/* Tooltip for collapsed sidebar */
.sidebar.collapsed .nav-link {
    position: relative;
}

.sidebar.collapsed .nav-link::after {
    content: attr(data-title);
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    margin-left: 10px;
    border: 1px solid var(--border-color);
    z-index: 100;
    font-family: "Roboto Flex", sans-serif;
}

.sidebar.collapsed .nav-link:hover::after {
    opacity: 1;
    visibility: visible;
}

.nav {
    display: flex;
    flex-direction: column;
}

.nav-item {
    list-style: none;
}

.nav-link {
    display: block;
    padding: 0.4rem 0.75rem;
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    transition: all var(--transition-base);
    margin-bottom: 0.2rem;
    font-family: "Roboto Flex", sans-serif;
    font-size: 0.95rem;
}

.nav-link:hover,
.nav-link.active {
    background-color: var(--bg-tertiary);
    color: var(--text-secondary);
}

/* Sidebar section headers (no hover effect) */
.sidebar .nav-link.text-muted {
    cursor: default;
    padding: 0.4rem 0.75rem;
}

.sidebar .nav-link.text-muted:hover {
    background-color: transparent;
    color: var(--text-muted);
}

/* Sidebar nav-link in light mode */
[data-theme="light"] .sidebar .nav-link:hover,
[data-theme="light"] .sidebar .nav-link.active {
    background-color: var(--color-off-white);
    color: var(--color-accent);
}

[data-theme="light"] .sidebar .nav-link.text-muted:hover {
    background-color: transparent;
    color: var(--text-muted);
}

.nav-link i {
    width: 1.25rem;
    text-align: center;
}

/* Sidebar Submenu */
.nav-item-submenu {
    position: relative;
}

.nav-link-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

.nav-link-toggle:hover {
    transform: none;
}

.submenu-arrow {
    font-size: 0.75rem;
    transition: transform var(--transition-base);
    margin-left: auto;
}

.nav-item-submenu.open .submenu-arrow {
    transform: rotate(180deg);
}

.submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-base);
    margin-left: var(--spacing-md);
    padding-left: var(--spacing-md);
    border-left: 2px solid var(--border-color);
}

.submenu.show {
    max-height: 500px;
}

.nav-link-sub {
    padding: 0.3rem 0.75rem;
    font-size: 0.9rem;
}

.nav-link-sub:hover,
.nav-link-sub.active {
    background-color: var(--bg-tertiary);
    color: var(--color-accent);
    transform: translateX(4px);
}

/* ============================================
   LOGO & BRANDING
   ============================================ */
.logo-text {
    font-weight: 700;
    font-size: 2rem;
    color: var(--text-primary);
    letter-spacing: 2px;
    transition: color var(--transition-base);
    font-family: "Roboto Flex", sans-serif;
}

.logo-subtitle {
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--color-accent);
    letter-spacing: 1px;
    text-transform: uppercase;
    font-family: "Roboto Flex", sans-serif;
}

.error-code {
    font-size: 6rem;
    font-weight: 700;
    color: var(--color-accent);
    line-height: 1;
    font-family: "Roboto Flex", sans-serif;
}

/* ============================================
   TABLES
   ============================================ */
.table {
    width: 100%;
    margin-bottom: var(--spacing-lg);
    color: var(--text-primary);
    border-collapse: collapse;
    font-family: "Roboto Flex", sans-serif;
    font-size: 0.95rem;
}

.table-dark {
    background-color: var(--bg-secondary);
}

.table tbody tr {
    background-color: var(--bg-secondary) !important;
    --bs-table-bg: var(--bg-secondary);
    --bs-table-accent-bg: var(--bg-secondary);
}

.table-hover tbody tr {
    transition: background-color var(--transition-fast);
}

.table-hover tbody tr:hover {
    background-color: var(--bg-tertiary);
}

.table-hover tbody tr:hover > * {
    --bs-table-accent-bg: var(--bg-tertiary);
    background-color: var(--bg-tertiary);
}

.table thead th {
    padding: 0.625rem 0.75rem;
    background-color: var(--bg-tertiary);
    border-bottom: 2px solid var(--color-accent);
    font-weight: 600;
    text-transform: capitalize;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    color: var(--text-on-tertiary);
}

.table tbody td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border-color);
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

/* Ensure badges inside table cells keep their defined text color, not the td's color */
.table tbody td .badge-asset-domain {
    color: #000 !important;
}
.table tbody td .badge-asset-ip,
.table tbody td .badge-asset-ip_address {
    color: #000 !important;
}
.table tbody td .badge-asset-host {
    color: #fff !important;
}
.table tbody td .badge-asset-service {
    color: #fff !important;
}
.table tbody td .badge-asset-network {
    color: #000 !important;
}
.table tbody td .badge-asset-location {
    color: #fff !important;
}
.table tbody td .badge-asset-software {
    color: #000 !important;
}
.table tbody td .badge-asset-webservice {
    color: #fff !important;
}
.table tbody td .badge-asset-webendpoint {
    color: #fff !important;
}
.table tbody td .badge.bg-success {
    color: #fff !important;
}
.table tbody td .badge.bg-secondary {
    color: #fff !important;
}
.table tbody td .badge.bg-warning {
    color: #000 !important;
}
.table tbody td .badge.bg-danger {
    color: #fff !important;
}
.table tbody td .badge.bg-info {
    color: #000 !important;
}
.table tbody td .badge.bg-orange {
    color: #fff !important;
}
.table tbody td .badge.bg-purple {
    color: #fff !important;
}
.table tbody td .badge.bg-primary {
    color: #000 !important;
}
.table tbody td .badge.bg-accent {
    color: #fff !important;
}
.table tbody td .badge.severity-critical,
.table tbody td .badge-severity-critical {
    color: var(--severity-critical-text) !important;
}
.table tbody td .badge.severity-high,
.table tbody td .badge-severity-high {
    color: var(--severity-high-text) !important;
}
.table tbody td .badge.severity-medium,
.table tbody td .badge-severity-medium {
    color: var(--severity-medium-text) !important;
}
.table tbody td .badge.severity-low,
.table tbody td .badge-severity-low {
    color: var(--severity-low-text) !important;
}
.table tbody td .badge.severity-info,
.table tbody td .badge-severity-info {
    color: var(--severity-info-text) !important;
}
.table tbody td .badge.severity-unknown,
.table tbody td .badge-severity-unknown {
    color: var(--severity-unknown-text) !important;
}

/* ===========================================
   GLOBAL BADGE TEXT COLOR OVERRIDES
   These ensure badge text colors are based on badge background,
   NOT on the theme (light/dark mode). The text color must provide
   proper contrast with the badge background regardless of theme.
   =========================================== */

/* Asset badges (used in findings, assets list, etc.) */
.asset-badge-domain,
.asset-badge-domain .asset-segment,
.asset-badge-domain .asset-code,
.asset-badge-domain .asset-name {
    color: #000 !important;
}

.asset-badge-ip,
.asset-badge-ip_address,
.asset-badge-ip .asset-segment,
.asset-badge-ip .asset-code,
.asset-badge-ip .asset-name,
.asset-badge-ip_address .asset-segment,
.asset-badge-ip_address .asset-code,
.asset-badge-ip_address .asset-name {
    color: #000 !important;
}

.asset-badge-host,
.asset-badge-host .asset-segment,
.asset-badge-host .asset-code,
.asset-badge-host .asset-name {
    color: #fff !important;
}

.asset-badge-service,
.asset-badge-service .asset-segment,
.asset-badge-service .asset-code,
.asset-badge-service .asset-name {
    color: #fff !important;
}

.asset-badge-network,
.asset-badge-network .asset-segment,
.asset-badge-network .asset-code,
.asset-badge-network .asset-name {
    color: #000 !important;
}

.asset-badge-location,
.asset-badge-location .asset-segment,
.asset-badge-location .asset-code,
.asset-badge-location .asset-name {
    color: #fff !important;
}

.asset-badge-software,
.asset-badge-software .asset-segment,
.asset-badge-software .asset-code,
.asset-badge-software .asset-name {
    color: #000 !important;
}

.asset-badge-webservice,
.asset-badge-webservice .asset-segment,
.asset-badge-webservice .asset-code,
.asset-badge-webservice .asset-name {
    color: #fff !important;
}

.asset-badge-webendpoint,
.asset-badge-webendpoint .asset-segment,
.asset-badge-webendpoint .asset-code,
.asset-badge-webendpoint .asset-name {
    color: #fff !important;
}

/* Bootstrap color badges - override text-dark/text-white which change with theme */
.badge.bg-info {
    color: #000 !important;
}

.badge.bg-warning {
    color: #000 !important;
}

.badge.bg-success {
    color: #fff !important;
}

.badge.bg-danger {
    color: #fff !important;
}

.badge.bg-primary {
    color: #fff !important;
}

.badge.bg-secondary {
    color: #fff !important;
}

.badge.bg-dark {
    color: #fff !important;
}

.badge.bg-light {
    color: #000 !important;
}

.badge.bg-purple {
    color: #fff !important;
}

.badge.bg-orange {
    color: #fff !important;
}

/* KB Reference badges (links styled as badges) - force specific text colors */
a.badge.bg-info,
a.badge.bg-info:hover,
a.badge.bg-info:visited {
    color: #000 !important;
}

a.badge.bg-warning,
a.badge.bg-warning:hover,
a.badge.bg-warning:visited {
    color: #000 !important;
}

a.badge.bg-success,
a.badge.bg-success:hover,
a.badge.bg-success:visited {
    color: #fff !important;
}

a.badge.bg-danger,
a.badge.bg-danger:hover,
a.badge.bg-danger:visited {
    color: #fff !important;
}

a.badge.bg-purple,
a.badge.bg-purple:hover,
a.badge.bg-purple:visited {
    color: #fff !important;
}

a.badge.bg-orange,
a.badge.bg-orange:hover,
a.badge.bg-orange:visited {
    color: #fff !important;
}

a.badge.bg-secondary,
a.badge.bg-secondary:hover,
a.badge.bg-secondary:visited {
    color: #fff !important;
}

a.badge.bg-light,
a.badge.bg-light:hover,
a.badge.bg-light:visited {
    color: #000 !important;
}

/* Ensure span elements inside badge links inherit the correct color */
a.badge.bg-info span,
a.badge.bg-warning span,
a.badge.bg-light span {
    color: #000 !important;
}

a.badge.bg-success span,
a.badge.bg-danger span,
a.badge.bg-purple span,
a.badge.bg-orange span,
a.badge.bg-secondary span {
    color: #fff !important;
}

.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Allow dropdowns in table headers to overflow */
.table-responsive {
    overflow: visible;
}

.card-body .table-responsive {
    overflow: visible;
}

/* Ensure dropdown menus in table headers are above everything */
.table thead .dropdown-menu,
.table thead .column-dropdown-menu {
    z-index: 1060;
    position: absolute;
}

/* ============================================
   UTILITIES
   ============================================ */
.text-garnet,
.text-accent {
    color: var(--color-accent) !important;
}

/* Override text-accent inside card-header to ensure contrast in dark mode */
.card-header .text-accent,
.card-header .text-garnet {
    color: var(--text-on-tertiary) !important;
}

[data-theme="light"] .card-header .text-accent,
[data-theme="light"] .card-header .text-garnet {
    color: var(--color-accent) !important;
}

/* Severity Badge Classes */
.badge-severity-critical,
.badge.severity-critical,
.bg-severity-critical,
.score-badge.severity-critical,
.score-badge.severity-critical span {
    background-color: var(--severity-critical-bg) !important;
    color: #ffffff !important;
}

.badge-severity-high,
.badge.severity-high,
.bg-severity-high,
.score-badge.severity-high,
.score-badge.severity-high span {
    background-color: var(--severity-high-bg) !important;
    color: #ffffff !important;
}

.badge-severity-medium,
.badge.severity-medium,
.bg-severity-medium,
.score-badge.severity-medium,
.score-badge.severity-medium span {
    background-color: var(--severity-medium-bg) !important;
    color: #000000 !important;
}

.badge-severity-low,
.badge.severity-low,
.bg-severity-low,
.score-badge.severity-low,
.score-badge.severity-low span {
    background-color: var(--severity-low-bg) !important;
    color: #ffffff !important;
}

.badge-severity-info,
.badge.severity-info,
.bg-severity-info,
.score-badge.severity-info,
.score-badge.severity-info span {
    background-color: var(--severity-info-bg) !important;
    color: #ffffff !important;
}

.badge-severity-unknown,
.badge.severity-unknown,
.bg-severity-unknown,
.score-badge.severity-unknown,
.score-badge.severity-unknown span {
    background-color: var(--severity-unknown-bg) !important;
    color: #ffffff !important;
}

/* Detection Badge Styles - for linked detections in findings */
.detection-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.35em 0.65em;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.375rem;
    text-decoration: none;
    transition: opacity 0.15s ease-in-out;
}

.detection-badge:hover {
    opacity: 0.85;
    text-decoration: none;
}

.detection-badge.severity-critical {
    background-color: var(--severity-critical-bg) !important;
    color: #ffffff !important;
}

.detection-badge.severity-high {
    background-color: var(--severity-high-bg) !important;
    color: #000000 !important;
}

.detection-badge.severity-medium {
    background-color: var(--severity-medium-bg) !important;
    color: #000000 !important;
}

.detection-badge.severity-low {
    background-color: var(--severity-low-bg) !important;
    color: #ffffff !important;
}

.detection-badge.severity-info {
    background-color: var(--severity-info-bg) !important;
    color: #ffffff !important;
}

.detection-badge.severity-unknown {
    background-color: var(--severity-unknown-bg) !important;
    color: #ffffff !important;
}

.detection-badge-code {
    font-family: monospace;
    color: inherit !important;
}

/* Ensure detection badges in table cells maintain their text color */
.table tbody td .detection-badge.severity-critical,
.table tbody td .detection-badge.severity-critical .detection-badge-code {
    color: #ffffff !important;
}

.table tbody td .detection-badge.severity-high,
.table tbody td .detection-badge.severity-high .detection-badge-code {
    color: #000000 !important;
}

.table tbody td .detection-badge.severity-medium,
.table tbody td .detection-badge.severity-medium .detection-badge-code {
    color: #000000 !important;
}

.table tbody td .detection-badge.severity-low,
.table tbody td .detection-badge.severity-low .detection-badge-code {
    color: #ffffff !important;
}

.table tbody td .detection-badge.severity-info,
.table tbody td .detection-badge.severity-info .detection-badge-code {
    color: #ffffff !important;
}

.table tbody td .detection-badge.severity-unknown,
.table tbody td .detection-badge.severity-unknown .detection-badge-code {
    color: #ffffff !important;
}

/* Card header buttons - dark gray style for visibility */
.card-header .btn-outline-secondary,
.card-header .btn-outline-accent {
    background-color: var(--color-gray-dark);
    border-color: var(--color-gray);
    color: var(--text-secondary);
}

.card-header .btn-outline-secondary:hover,
.card-header .btn-outline-accent:hover {
    background-color: var(--color-gray);
    border-color: var(--color-gray-light);
    color: var(--text-primary);
}

.text-muted {
    color: var(--text-muted) !important;
}

.text-light {
    color: var(--text-secondary) !important;
}

.text-danger {
    color: var(--color-error) !important;
}

.text-success {
    color: var(--color-success) !important;
}

.text-warning {
    color: var(--color-warning) !important;
}

/* Info and Primary text - improved contrast for dark mode */
.text-info {
    color: var(--color-info) !important;
}

.text-primary {
    color: var(--color-info) !important;
}

/* Accent text - uses accent color variable for better theme support */
.text-accent {
    color: var(--color-accent) !important;
}

/* Light mode: darker colors for better contrast */
[data-theme="light"] .text-info,
[data-theme="light"] .text-primary {
    color: #0a5fa8 !important;
}

[data-theme="light"] .text-accent {
    color: #3d5e6b !important;
}

.border-accent,
.border-garnet {
    border-color: var(--color-accent) !important;
}

.border-secondary-dark {
    border-color: var(--border-color) !important;
}

/* Background colors */
.bg-accent {
    background-color: var(--color-accent) !important;
}

.bg-primary {
    background-color: var(--color-info) !important;
}

[data-theme="light"] .bg-accent {
    background-color: #3d5e6b !important;
}

.fw-bold {
    font-weight: 700 !important;
}

.fw-medium {
    font-weight: 500 !important;
}

.text-center {
    text-align: center !important;
}

.mb-0 {
    margin-bottom: 0 !important;
}
.mb-1 {
    margin-bottom: 0.25rem !important;
}
.mb-2 {
    margin-bottom: 0.5rem !important;
}
.mb-3 {
    margin-bottom: 1rem !important;
}
.mb-4 {
    margin-bottom: 1.5rem !important;
}
.mb-5 {
    margin-bottom: 3rem !important;
}

.mt-1 {
    margin-top: 0.25rem !important;
}
.mt-2 {
    margin-top: 0.5rem !important;
}
.mt-3 {
    margin-top: 1rem !important;
}
.mt-4 {
    margin-top: 1.5rem !important;
}

.me-1 {
    margin-right: 0.25rem !important;
}
.me-2 {
    margin-right: 0.5rem !important;
}
.me-3 {
    margin-right: 1rem !important;
}

.p-3 {
    padding: 1rem !important;
}
.p-4 {
    padding: 1.5rem !important;
}
.p-5 {
    padding: 3rem !important;
}

.py-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}
.py-4 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
}

.px-4 {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
}

/* ============================================
   QUILL EDITOR - IMAGE RESTRICTIONS FOR MODALS
   ============================================ */

/* Restrict images in all Quill editors */
.ql-editor img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0.5rem 0 !important;
}

/* Specifically for modal editors */
#modalDescriptionEditor.ql-editor img,
#modalImpactEditor.ql-editor img,
#modalRecommendationsEditor.ql-editor img {
    max-width: 100% !important;
    width: 100% !important;
    max-height: 300px !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0.5rem auto !important;
}

/* Ensure images don't overflow their containers */
.ql-container {
    overflow: hidden !important;
}

.ql-editor {
    overflow-wrap: break-word !important;
    word-break: break-word !important;
}

/* Ensure modal content with Quill editors doesn't overflow */
#linkFindingModal .modal-body {
    overflow-y: auto !important;
    max-height: calc(100vh - 200px) !important;
}

/* Card bodies with Quill editors should handle overflow */
.card-body .ql-container,
.card-body .ql-editor {
    width: 100% !important;
    overflow-x: hidden !important;
}

/* Make sure paragraphs in Quill editors wrap properly */
.ql-editor p {
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
}

.px-3 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

.pb-3 {
    padding-bottom: 1rem !important;
}
.pt-3 {
    padding-top: 1rem !important;
}

.d-none {
    display: none !important;
}
.d-block {
    display: block !important;
}
.d-inline {
    display: inline !important;
}
.d-inline-block {
    display: inline-block !important;
}
.d-flex {
    display: flex !important;
}
.d-grid {
    display: grid !important;
}

.justify-content-center {
    justify-content: center !important;
}
.justify-content-between {
    justify-content: space-between !important;
}
.justify-content-end {
    justify-content: flex-end !important;
}

.align-items-center {
    align-items: center !important;
}
.align-self-center {
    align-self: center !important;
}

.w-100 {
    width: 100% !important;
}
.h-100 {
    height: 100% !important;
}

.border-bottom {
    border-bottom: 1px solid !important;
}
.border-top {
    border-top: 1px solid !important;
}

.small {
    font-size: 0.875rem !important;
}

/* ============================================
   GRID SYSTEM
   ============================================ */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

.container-fluid {
    width: 100%;
    padding: 0;
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 calc(-1 * var(--spacing-md));
}

.col-12 {
    flex: 0 0 100%;
    max-width: 100%;
    padding: 0 var(--spacing-md);
}
.col-md-6 {
    flex: 0 0 50%;
    max-width: 50%;
    padding: 0 var(--spacing-md);
}
.col-md-8 {
    flex: 0 0 66.666%;
    max-width: 66.666%;
    padding: 0 var(--spacing-md);
}
.col-md-9 {
    flex: 0 0 75%;
    max-width: 75%;
    padding: 0 var(--spacing-md);
}
.col-lg-4 {
    flex: 0 0 33.333%;
    max-width: 33.333%;
    padding: 0 var(--spacing-md);
}
.col-lg-6 {
    flex: 0 0 50%;
    max-width: 50%;
    padding: 0 var(--spacing-md);
}
.col-lg-10 {
    flex: 0 0 83.333%;
    max-width: 83.333%;
    padding: 0 var(--spacing-md);
}
.col-md-3 {
    flex: 0 0 25%;
    max-width: 25%;
    padding: 0;
}
.col-lg-2 {
    flex: 0 0 16.666%;
    max-width: 16.666%;
    padding: 0;
}

.ms-sm-auto {
    margin-left: auto !important;
}

.px-md-4 {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
}

/* ============================================
   CUSTOM SCROLLBAR
   ============================================ */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: var(--radius-sm);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-accent);
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */
@media (max-width: 768px) {
    .logo-text {
        font-size: 1.5rem;
    }

    .error-code {
        font-size: 4rem;
    }

    .col-md-3,
    .col-md-6,
    .col-md-8,
    .col-md-9,
    .col-lg-2,
    .col-lg-4,
    .col-lg-6,
    .col-lg-10 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .sidebar {
        min-height: auto;
        border-right: none;
        border-bottom: 1px solid var(--color-gray-dark);
    }
}

/* ============================================
   INPUT GROUPS
   ============================================ */
.input-group {
    display: flex;
    width: 100%;
}

.input-group-text {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    font-size: 0.95rem;
    font-weight: 400;
    line-height: 1.4;
    color: var(--text-secondary);
    text-align: center;
    white-space: nowrap;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    transition: all var(--transition-base);
    font-family: "Roboto Flex", sans-serif;
}

.input-group .form-control {
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    border-left: none;
}

.input-group .form-control:focus {
    border-left: 1px solid var(--color-accent);
}

/* Theme-aware input group text */
.theme-input-group-text {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-secondary) !important;
}

/* Small input group adjustments */
.input-group-sm .input-group-text {
    padding: 0.35rem 0.6rem;
    font-size: 0.85rem;
}

.input-group-sm .form-control {
    padding: 0.35rem 0.6rem;
    font-size: 0.85rem;
}

/* ============================================
   BUTTON GROUPS
   ============================================ */
.btn-group {
    display: inline-flex;
    vertical-align: middle;
}

.btn-group > .btn {
    position: relative;
    flex: 0 1 auto;
}

.btn-group > .btn:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: none;
}

.btn-group > .btn:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.btn-group > form {
    display: inline-flex;
}

.btn-group > form > .btn {
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* Gap Utility */
.gap-2 {
    gap: 0.5rem !important;
}

.gap-3 {
    gap: 1rem !important;
}

/* Flex Wrap */
.flex-wrap {
    flex-wrap: wrap !important;
}

.flex-column {
    flex-direction: column !important;
}

/* Font Utilities */
.font-monospace {
    font-family: "Noto Sans Mono", monospace;
}

/* Text End */
.text-end {
    text-align: right !important;
}

/* Cursor Utilities */
.cursor-pointer {
    cursor: pointer;
}

/* Rounded Utility */
.rounded {
    border-radius: var(--radius-sm) !important;
}

.rounded-circle {
    border-radius: 50% !important;
}

/* ============================================
   ACCORDION
   ============================================ */
.accordion-button {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.accordion-button:not(.collapsed) {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    box-shadow: none;
}

.accordion-button:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 0.25rem rgba(61, 94, 107, 0.25);
}

.accordion-body {
    background-color: var(--card-bg);
    color: var(--text-primary);
    border-top: 1px solid var(--border-color);
    padding: 1rem;
}

/* Accordion arrow icon visibility in dark mode */
.accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23f0efec' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

[data-theme="light"] .accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2344474d' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

/* ============================================
   THEMED BADGES
   ============================================ */
/* Phase badge for KB entries - respects dark/light theme */
.badge-phase {
    background-color: var(--color-accent);
    color: var(--text-primary);
    font-weight: 500;
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius-sm);
    display: inline-block;
    white-space: nowrap;
}

[data-theme="light"] .badge-phase {
    background-color: var(--color-accent);
    color: var(--text-primary);
}

/* Details Element */
details {
    cursor: pointer;
}

details summary {
    user-select: none;
    outline: none;
}

details summary::-webkit-details-marker {
    display: none;
}

/* Is Invalid State */
.is-invalid {
    border-color: var(--color-error) !important;
}

.is-invalid:focus {
    border-color: var(--color-error) !important;
    box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.2) !important;
}

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn var(--transition-base);
}

.fade {
    transition: opacity var(--transition-base);
}

.fade.show {
    opacity: 1;
}

@keyframes pulse {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.loading {
    animation: pulse 2s infinite;
}

/* Focus States */
*:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

button:focus-visible,
.btn:focus-visible {
    outline: 2px solid var(--color-accent);
}

/* Card Hover Effect */
.card-hover {
    transition: all var(--transition-base);
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
}

.card-hover:hover {
    border-color: var(--color-accent);
    box-shadow: var(--shadow-accent);
}

/* ============================================
   NAVIGATION TABS
   ============================================ */
.nav-tabs {
    border-bottom: 2px solid var(--border-color);
}

.nav-tabs-dark {
    border-bottom-color: var(--border-color);
}

.nav-tabs .nav-item {
    margin-bottom: -2px;
}

.nav-tabs .nav-link {
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--text-muted);
    padding: 0.5rem 1rem;
    transition: all var(--transition-base);
    font-family: "Roboto Flex", sans-serif;
    font-size: 0.95rem;
}

.nav-tabs .nav-link:hover {
    color: var(--color-accent-light);
    background-color: var(--bg-tertiary);
    border-bottom-color: var(--color-accent-light);
}

.nav-tabs .nav-link.active {
    color: var(--color-accent);
    background-color: transparent;
    border-bottom-color: var(--color-accent);
}

/* ============================================
   BADGES
   ============================================ */
.badge {
    display: inline-block;
    padding: 0.3rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: var(--radius-sm);
    font-family: "Roboto Flex", sans-serif;
}

.badge.bg-success {
    background-color: var(--color-success) !important;
    color: #ffffff !important;
}

.badge.bg-secondary {
    background-color: var(--color-gray) !important;
    color: #ffffff !important;
}

.badge.bg-warning {
    background-color: var(--color-warning) !important;
    color: #000000 !important;
}

.badge.bg-danger {
    background-color: var(--color-error) !important;
    color: #ffffff !important;
}

.badge.bg-orange {
    background-color: #fd7e14 !important;
    color: #ffffff !important;
}

.badge.bg-purple {
    background-color: #6f42c1 !important;
    color: #ffffff !important;
}

.badge.bg-info {
    background-color: var(--color-info) !important;
    color: #000000 !important;
}

.badge.bg-primary {
    background-color: var(--color-info) !important;
    color: #000000 !important;
}

.badge.bg-accent {
    background-color: var(--color-accent) !important;
    color: #ffffff !important;
}

/* Custom color badges - text color is set via JS based on background luminance */
.badge.badge-custom-color {
    /* Default to white text, JS will override if background is light */
    color: #ffffff;
}

.badge.bg-dark {
    background-color: var(--bg-tertiary) !important;
    color: #ffffff !important;
}

/* Asset Type Badges - Synced with asset-graph.js colors */
.badge-asset-domain {
    background-color: var(--asset-color-domain) !important;
    color: #000 !important;
}

.badge-asset-ip,
.badge-asset-ip_address {
    background-color: var(--asset-color-ip) !important;
    color: #000 !important;
}

.badge-asset-host {
    background-color: var(--asset-color-host) !important;
    color: #fff !important;
}

.badge-asset-service {
    background-color: var(--asset-color-service) !important;
    color: #fff !important;
}

.badge-asset-network {
    background-color: var(--asset-color-network) !important;
    color: #000 !important;
}

.badge-asset-location {
    background-color: var(--asset-color-location) !important;
    color: #fff !important;
}

.badge-asset-software {
    background-color: var(--asset-color-software) !important;
    color: #000 !important;
}

.badge-asset-webservice {
    background-color: var(--asset-color-webservice) !important;
    color: #fff !important;
}

.badge-asset-webendpoint {
    background-color: var(--asset-color-webendpoint) !important;
    color: #fff !important;
}

/* =====================================================
   Asset Badges - Segmented Style (Code | Identifier)
   ===================================================== */

.asset-badge {
    display: inline-flex;
    align-items: stretch;
    border-radius: 0.375rem;
    overflow: hidden;
    font-size: 0.75rem;
    line-height: 1;
    border: none;
}

.asset-badge .asset-segment {
    padding: 0.35rem 0.5rem;
    display: inline-flex;
    align-items: center;
}

.asset-badge .asset-code {
    font-weight: 600;
    font-family: monospace;
}

.asset-badge .asset-name {
    background-color: rgba(0, 0, 0, 0.2);
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Asset Badge Colors by Type */
.asset-badge-domain {
    background-color: var(--asset-color-domain);
    color: #000;
}

.asset-badge-ip,
.asset-badge-ip_address {
    background-color: var(--asset-color-ip);
    color: #000;
}

.asset-badge-host {
    background-color: var(--asset-color-host);
    color: #fff;
}

.asset-badge-service {
    background-color: var(--asset-color-service);
    color: #fff;
}

.asset-badge-network {
    background-color: var(--asset-color-network);
    color: #000;
}

.asset-badge-location {
    background-color: var(--asset-color-location);
    color: #fff;
}

.asset-badge-software {
    background-color: var(--asset-color-software);
    color: #000;
}

.asset-badge-webservice {
    background-color: var(--asset-color-webservice);
    color: #fff;
}

.asset-badge-webendpoint {
    background-color: var(--asset-color-webendpoint);
    color: #fff;
}

/* ============================================
   PROGRESS BAR
   ============================================ */
.progress {
    display: flex;
    height: 1rem;
    overflow: hidden;
    background-color: var(--bg-tertiary);
    border-radius: var(--radius-sm);
}

.progress-bar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    color: var(--color-white);
    text-align: center;
    white-space: nowrap;
    background-color: var(--color-accent);
    transition: width var(--transition-base);
    font-size: 0.8rem;
    font-family: "Roboto Flex", sans-serif;
}

.progress-bar.bg-success {
    background-color: var(--color-success);
}

.progress-bar.bg-warning {
    background-color: var(--color-warning);
}

.progress-bar.bg-danger {
    background-color: var(--color-error);
}

/* Background Utilities */
.bg-secondary-dark {
    background-color: var(--bg-tertiary) !important;
}

.border-secondary {
    border-color: var(--border-color) !important;
}

/* Text Decoration */
.text-decoration-none {
    text-decoration: none !important;
}

/* Flex Grow */
.flex-grow-1 {
    flex-grow: 1 !important;
}

/* Button Group Sizes */
.btn-group-sm > .btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    border-radius: var(--radius-sm);
}

/* Action Buttons in Tables - prevent vertical displacement on hover */
.table .btn-group .btn {
    border-width: 1px;
    line-height: 1.5;
    vertical-align: middle;
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.table .btn-group .btn:hover {
    transform: none;
}

.table .btn-group .btn-outline-info,
.table .btn-group .btn-outline-success,
.table .btn-group .btn-outline-warning,
.table .btn-group .btn-outline-danger {
    border-width: 1px;
}

.table .btn-group .btn-outline-info:hover,
.table .btn-group .btn-outline-success:hover,
.table .btn-group .btn-outline-warning:hover,
.table .btn-group .btn-outline-danger:hover {
    border-width: 1px;
}

/* Col Utilities */
.col-6 {
    flex: 0 0 50%;
    max-width: 50%;
    padding: 0 var(--spacing-md);
}

.col-md-4 {
    flex: 0 0 33.333%;
    max-width: 33.333%;
    padding: 0 var(--spacing-md);
}

.col-lg-3 {
    flex: 0 0 25%;
    max-width: 25%;
    padding: 0 var(--spacing-md);
}

.col-xl-2 {
    flex: 0 0 16.666%;
    max-width: 16.666%;
    padding: 0 var(--spacing-md);
}

.col-xl-3 {
    flex: 0 0 25%;
    max-width: 25%;
    padding: 0 var(--spacing-md);
}

@media (min-width: 768px) {
    .col-md-4 {
        flex: 0 0 33.333%;
        max-width: 33.333%;
    }
}

@media (min-width: 992px) {
    .col-lg-3 {
        flex: 0 0 25%;
        max-width: 25%;
    }
}

/* KB Code Badge - Neutral Peace Style */
.kb-code-badge {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    font-family: "Noto Sans Mono", monospace;
    font-weight: normal;
}

/* KB Version Selector Buttons */
.kb-version-selector .btn {
    min-width: 60px;
}

.kb-version-selector .btn-accent,
.kb-version-selector a.btn-accent {
    background-color: var(--color-accent);
    color: var(--color-white) !important;
    border-color: var(--color-accent);
}

.kb-version-selector .btn-accent:hover,
.kb-version-selector a.btn-accent:hover {
    background-color: var(--color-accent-dark);
    border-color: var(--color-accent-dark);
    color: var(--color-white) !important;
}

.kb-version-selector .btn-outline-secondary,
.kb-version-selector a.btn-outline-secondary {
    background-color: transparent;
    color: var(--text-secondary) !important;
    border-color: var(--border-color);
}

.kb-version-selector .btn-outline-secondary:hover,
.kb-version-selector a.btn-outline-secondary:hover {
    background-color: var(--bg-tertiary);
    color: var(--text-primary) !important;
    border-color: var(--color-accent);
}

/* KB Content Formatting - Description, How to Prevent and Attack Scenarios */
.description-content,
.prevent-content,
.attack-content {
    line-height: 1.8;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.description-content ul,
.prevent-content ul,
.attack-content ul {
    margin-left: 1.5rem;
    margin-bottom: 0;
}

.description-content li,
.prevent-content li,
.attack-content li {
    margin-bottom: 0.5rem;
}

/* ============================================
   ORGANIZATION CARDS (Dashboard)
   ============================================ */

/* Font size utility for small text */
.font-size-sm {
    font-size: 0.85rem !important;
    font-family: "Roboto Flex", sans-serif;
}

/* Organization Card Container */
.organization-card {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: all var(--transition-base);
    height: 100%;
    display: flex;
    flex-direction: column;
    min-width: 0; /* Allow flex items to shrink below content size */
}

.organization-card:hover {
    border-color: var(--color-accent);
    box-shadow: var(--shadow-accent);
}

.organization-card.create-card {
    background: linear-gradient(
        135deg,
        var(--bg-secondary) 0%,
        var(--bg-primary) 100%
    );
    border: 2px dashed var(--border-color);
}

.organization-card.create-card:hover {
    border-color: var(--color-accent);
    background: linear-gradient(
        135deg,
        var(--bg-secondary) 0%,
        var(--bg-primary) 100%
    );
}

/* Organization Avatar Container */
.organization-avatar-container {
    position: relative;
    width: 100%;
    padding-bottom: 100%; /* 1:1 aspect ratio */
    background-color: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    overflow: hidden;
}

.organization-avatar-container.create-avatar-container {
    background-color: var(--bg-tertiary);
    border-bottom: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Organization Avatar Image */
.organization-avatar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-base);
}

.organization-avatar-container.create-avatar-container .organization-avatar {
    display: none;
}

/* Overlay for hover effect */
.organization-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(61, 94, 107, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--transition-base);
    color: var(--color-white);
    font-size: 1.5rem;
}

.organization-avatar-container:hover .organization-overlay {
    opacity: 1;
}

.create-avatar-container .organization-overlay {
    background-color: transparent;
    opacity: 1;
}

/* Create Icon Wrapper */
.create-icon-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    font-size: 2rem;
}

/* Create Card Text */
.create-card-text {
    font-size: 0.9rem;
    letter-spacing: 0.5px;
}

/* ============================================
   CAROUSEL STYLES
   ============================================ */

/* Organization Carousel Container */
.org-carousel-container {
    overflow: hidden;
    flex-grow: 1;
    min-width: 0;
}

/* Carousel Content Wrapper */
#orgCarouselContent {
    display: flex;
    gap: 16px;
    transition: transform var(--transition-base);
    padding: 0.25rem 0; /* Small padding for focus outline visibility */
    align-items: center;
}

/* Card Wrapper in Carousel */
.org-card-wrapper {
    flex: 0 0 auto;
    min-width: 180px;
    width: 180px;
    height: 240px;
    transition: opacity var(--transition-base);
}

/* Hidden organization cards during search */
.org-card-wrapper.hidden {
    display: none;
}

/* Carousel Navigation Buttons */
.btn-outline-accent {
    color: var(--color-accent);
    border-color: var(--color-accent);
    transition: all var(--transition-base);
}

.btn-outline-accent:hover {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--bg-primary);
}

.btn-outline-accent:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-outline-accent:disabled:hover {
    background-color: transparent;
    color: var(--color-accent);
}

/* Light mode overrides */
[data-theme="light"] .btn-outline-accent {
    color: var(--navbar-bg);
    border-color: var(--navbar-bg);
}

[data-theme="light"] .btn-outline-accent:hover {
    background-color: var(--navbar-bg);
    color: var(--color-white);
}

/* Smooth scrolling behavior */
@supports (scroll-behavior: smooth) {
    html {
        scroll-behavior: smooth;
    }
}

/* Carousel no organizations state */
.org-carousel-container.empty {
    display: none;
}

/* Organization Card Text Container in Carousel */
.org-card-wrapper .organization-card .card-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    overflow: hidden;
}

.org-card-wrapper .organization-card .card-body > div:first-child {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 0;
    word-break: break-word;
}

/* ============================================
   MODAL & INPUT THEME-AWARE STYLES
   ============================================ */

/* Translucent blur backdrop for all modals */
.modal-backdrop,
.modal-backdrop.fade,
.modal-backdrop.show {
    background: rgba(30, 30, 40, 0.5) !important;
    backdrop-filter: blur(12px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(150%) !important;
    opacity: 1 !important;
}

/* Light mode backdrop - slightly lighter */
[data-theme="light"] .modal-backdrop,
[data-theme="light"] .modal-backdrop.fade,
[data-theme="light"] .modal-backdrop.show {
    background: rgba(100, 100, 120, 0.4) !important;
    backdrop-filter: blur(12px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(150%) !important;
    opacity: 1 !important;
}

/* Theme-aware modal content */
.theme-modal {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}

.theme-modal .modal-header {
    background-color: var(--bg-tertiary);
    border-bottom-color: var(--border-color);
    color: var(--text-on-tertiary);
}

.theme-modal .modal-body {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

.theme-modal .modal-body .text-muted {
    color: var(--text-muted) !important;
}

.theme-modal .modal-body .alert {
    background-color: transparent;
    border-color: var(--color-error);
    color: var(--color-error);
}

.theme-modal .modal-footer {
    background-color: var(--bg-secondary);
    border-top-color: var(--border-color);
}

/* Theme-aware input in modals */
.theme-input {
    background-color: var(--input-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

.theme-input::placeholder {
    color: var(--text-muted) !important;
}

.theme-input:focus {
    background-color: var(--input-bg) !important;
    border-color: var(--color-accent) !important;
    color: var(--text-primary) !important;
    box-shadow: 0 0 0 3px rgba(61, 94, 107, 0.2) !important;
}

.theme-input:disabled {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-muted) !important;
    opacity: 0.6;
}

/* Modal close button styling */
.theme-modal .btn-close {
    opacity: 0.7;
}

.theme-modal .btn-close:hover {
    opacity: 1;
}

/* Form labels in modals */
.theme-modal .modal-body .form-label {
    color: var(--text-secondary);
}

/* Light mode modal overrides */
[data-theme="light"] .theme-modal {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

[data-theme="light"] .theme-modal .modal-header {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

[data-theme="light"] .theme-input {
    background-color: var(--input-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* KB Search Results Dark Mode Styling */
.kb-search-results-dark {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

.kb-search-results-dark .list-group-item {
    background-color: transparent !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

.kb-search-results-dark .list-group-item code {
    color: var(--text-accent);
}

.kb-search-results-dark .list-group-item .text-muted {
    color: var(--text-muted) !important;
}

.kb-search-results-dark .text-center {
    color: var(--text-muted) !important;
}

/* Score Badge Styling */
.score-badge-cvss,
.score-badge-dread {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.65rem;
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
    border-radius: 0.375rem;
    color: white !important;
}

/* Score badge severity classes */
.badge.score-badge-cvss.severity-critical,
.badge.score-badge-dread.severity-critical {
    background-color: var(--severity-critical-bg) !important;
    color: #ffffff !important;
}

.badge.score-badge-cvss.severity-high,
.badge.score-badge-dread.severity-high {
    background-color: var(--severity-high-bg) !important;
    color: #000000 !important;
}

.badge.score-badge-cvss.severity-medium,
.badge.score-badge-dread.severity-medium {
    background-color: var(--severity-medium-bg) !important;
    color: #000000 !important;
}

.badge.score-badge-cvss.severity-low,
.badge.score-badge-dread.severity-low {
    background-color: var(--severity-low-bg) !important;
    color: #ffffff !important;
}

.badge.score-badge-cvss.severity-info,
.badge.score-badge-dread.severity-info {
    background-color: var(--severity-info-bg) !important;
    color: #ffffff !important;
}

.badge.score-badge-cvss.severity-unknown,
.badge.score-badge-dread.severity-unknown {
    background-color: var(--severity-unknown-bg) !important;
    color: #ffffff !important;
}

.score-item {
    margin-bottom: 0.5rem;
}

.score-item .btn-group-sm .btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
}

.make-default-score-btn {
    color: #ffc107 !important;
    border-color: #ffc107 !important;
}

.make-default-score-btn:hover {
    background-color: #ffc107 !important;
    color: white !important;
}

/* Score Badge Segments - Three-part badge styling with improved visual design */
.score-badge {
    display: inline-flex;
    align-items: stretch;
    cursor: pointer;
    border: none;
    border-radius: 0.375rem;
    overflow: hidden;
    transition: all 0.2s ease-in-out;
    gap: 0;
    padding: 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    font-weight: 500;
}

.score-badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.score-badge:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.score-segment {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 0.6rem;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    flex: 0 0 auto;
    color: inherit !important;
    border-right: 1px solid rgba(0, 0, 0, 0.15);
    text-align: center;
}

.score-segment:last-child {
    border-right: none;
}

/* Adjust border color for light text backgrounds */
.score-badge.severity-critical .score-segment,
.score-badge.severity-low .score-segment,
.score-badge.severity-info .score-segment,
.score-badge.severity-unknown .score-segment {
    border-right-color: rgba(255, 255, 255, 0.3);
}

/* Adjust border color for dark text backgrounds */
.score-badge.severity-high .score-segment,
.score-badge.severity-medium .score-segment {
    border-right-color: rgba(0, 0, 0, 0.2);
}

.score-type {
    min-width: 70px;
    font-weight: 700;
    font-size: 0.75rem;
    opacity: 0.95;
    letter-spacing: 0.3px;
    color: inherit !important;
}

.score-severity {
    min-width: 90px;
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 1;
    color: inherit !important;
}

.score-value {
    min-width: 60px;
    font-size: 0.85rem;
    font-weight: 700;
    opacity: 1;
    color: inherit !important;
}

/* DREAD Score Badge styling */
.dread-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.8rem;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    border-radius: 0.375rem;
    color: white !important;
    background-color: var(--severity-unknown-bg);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    transition: all 0.2s ease-in-out;
}

.dread-badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

/* ============================================
   MITRE ATT&CK MATRIX STYLES
   ============================================ */
.attack-matrix-container {
    width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
}

.attack-matrix {
    display: flex;
    gap: 1rem;
    min-width: max-content;
    padding: 0.5rem 0;
}

.attack-tactic-column {
    flex: 0 0 auto;
    min-width: 220px;
    width: 220px;
    display: flex;
    flex-direction: column;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.attack-tactic-header {
    padding: 0.75rem;
    background-color: var(--bg-tertiary);
    border-bottom: 2px solid var(--color-accent);
    color: var(--text-primary);
    font-weight: 600;
    text-align: center;
    flex-shrink: 0;
    min-height: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.tactic-name {
    font-size: 0.9rem;
    line-height: 1.3;
    word-break: break-word;
}

.attack-technique-cell {
    padding: 0.5rem;
    border-bottom: 1px solid var(--border-color);
    transition: all var(--transition-base);
    flex-shrink: 0;
}

.attack-technique-cell:last-child {
    border-bottom: none;
}

.attack-technique-cell:hover {
    background-color: var(--bg-tertiary);
}

.attack-technique-cell a {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--color-accent);
    text-decoration: none;
    font-size: 0.85rem;
    line-height: 1.2;
}

.attack-technique-cell a:hover {
    color: var(--color-accent-light);
}

.technique-name {
    flex: 1;
    min-width: 0;
    word-break: break-word;
    overflow-wrap: break-word;
}

.attack-subtechnique {
    background-color: var(--bg-primary);
}

.attack-subtechnique:hover {
    background-color: var(--bg-tertiary);
}

.attack-subtechnique .technique-name {
    font-size: 0.8rem;
    margin-left: 0.5rem;
}

.attack-empty-message {
    padding: 1rem 0.5rem;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.85rem;
    font-style: italic;
}

.attack-tactic-column.tactic-empty {
    opacity: 0.5;
}

.attack-tactic-column.tactic-empty .attack-technique-cell {
    display: none;
}

.search-hidden {
    display: none !important;
}

/* MITRE ATT&CK Navigation Styles */

/* Submenu container */
#submenuContainer {
    display: flex;
    gap: 0.5rem;
}

#submenuContainer .btn-group {
    display: flex;
    gap: 0.5rem;
}

/* Primary view buttons styling */
.btn-group[aria-label="View selector"] .btn {
    flex: 1;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    transition: all 0.2s ease;
}

.btn-group[aria-label="View selector"] .btn:hover {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--color-accent);
}

.btn-group[aria-label="View selector"] .btn.active {
    background-color: var(--color-accent);
    color: var(--text-primary);
    border-color: var(--color-accent);
    font-weight: 500;
}

/* Secondary submenu buttons styling */
.btn-outline-accent {
    border: 1px solid var(--color-accent);
    color: var(--color-accent);
    transition: all 0.2s ease;
}

.btn-outline-accent:hover {
    background-color: var(--color-accent);
    color: var(--text-primary);
    border-color: var(--color-accent);
}

.btn-outline-accent.active {
    background-color: var(--color-accent);
    color: var(--text-primary);
    border-color: var(--color-accent);
    font-weight: 500;
}

.btn-outline-accent:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    color: var(--text-muted);
    border-color: var(--border-color);
}

/* Smooth transitions for submenu changes */
#submenuContainer .btn-group {
    animation: fadeIn 0.2s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Quill content display - for read-only rendered HTML */
.quill-content {
    overflow: hidden;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.quill-content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0.5rem 0;
}

.quill-content pre {
    max-width: 100%;
    overflow-x: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.quill-content table {
    max-width: 100%;
    overflow-x: auto;
    display: block;
}

.quill-content iframe,
.quill-content video,
.quill-content embed {
    max-width: 100%;
}

/* =====================================================
   Comment Avatars
   ===================================================== */

.comment-avatar {
    width: 36px;
    height: 36px;
    object-fit: cover;
    flex-shrink: 0;
}

.comment-avatar-placeholder {
    width: 36px;
    height: 36px;
    background-color: var(--bg-tertiary);
    flex-shrink: 0;
}

.comment-avatar-small {
    width: 24px;
    height: 24px;
    object-fit: cover;
    flex-shrink: 0;
}

.comment-avatar-placeholder-small {
    width: 24px;
    height: 24px;
    background-color: var(--bg-tertiary);
    flex-shrink: 0;
}

/* =====================================================
   Evidence Gallery - Uniform Image Boxes
   ===================================================== */

.evidence-gallery .evidence-item {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    overflow: hidden;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.evidence-gallery .evidence-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.evidence-gallery .evidence-thumbnail-link {
    display: block;
    position: relative;
    width: 100%;
    padding-top: 100%; /* 1:1 aspect ratio - square boxes */
    background-color: var(--bg-primary);
    overflow: hidden;
}

.evidence-gallery .evidence-thumbnail {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.3s ease;
}

.evidence-gallery .evidence-item:hover .evidence-thumbnail {
    transform: scale(1.05);
}

.evidence-gallery .evidence-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.evidence-gallery .evidence-item:hover .evidence-overlay {
    opacity: 1;
}

.evidence-gallery .evidence-overlay i {
    color: #fff;
    font-size: 1.5rem;
}

.evidence-gallery .evidence-info {
    background-color: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
}

.evidence-gallery .evidence-info small {
    color: var(--text-secondary);
}

.evidence-gallery .evidence-delete-btn {
    top: 0.5rem;
    right: 0.5rem;
    opacity: 0;
    transition: opacity 0.2s ease;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
}

.evidence-gallery .evidence-item:hover .evidence-delete-btn {
    opacity: 1;
}

/* ============================================
   Asset Selector (Occurrences)
   ============================================ */
.asset-selector-container {
    display: flex;
    gap: 1rem;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    padding: 0.75rem;
}

.asset-selector-search {
    flex-shrink: 0;
    width: 180px;
    display: flex;
    flex-direction: column;
}

.asset-selector-stats {
    padding: 0.5rem 0;
    border-top: 1px solid var(--border-color);
    margin-top: 0.5rem;
}

.asset-selector-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    max-height: 220px;
    overflow-y: auto;
    padding-right: 0.5rem;
}

.asset-selector-item {
    display: flex;
    align-items: center;
    position: relative;
    cursor: pointer;
    border-radius: var(--radius-sm);
    border: 2px solid transparent;
    transition: all 0.15s ease;
    background-color: #374151;
    padding: 0.4rem 0.5rem;
    width: 100%;
}

.asset-selector-item:hover {
    background-color: #4b5563;
}

.asset-selector-item.selected {
    border-color: #0dcaf0;
    background-color: rgba(13, 202, 240, 0.15);
}

.asset-selector-item.filtered-out {
    display: none;
}

.asset-checkbox-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.asset-selector-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
}

.asset-selector-code {
    flex-shrink: 0;
    padding: 0.2rem 0.5rem;
    background-color: rgba(0, 0, 0, 0.3);
    font-weight: 600;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: #e2e8f0;
    border-radius: var(--radius-sm);
}

.asset-selector-name {
    flex: 1;
    font-weight: 500;
    font-size: 0.8rem;
    color: #cbd5e1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.asset-selector-check {
    flex-shrink: 0;
    margin-left: auto;
    color: #0dcaf0;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.15s ease;
}

.asset-selector-item.selected .asset-selector-check {
    opacity: 1;
    transform: scale(1);
}

.asset-selector-empty {
    font-size: 0.85rem;
}

/* Light theme adjustments for asset selector */
[data-theme="light"] .asset-selector-container {
    background-color: rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .asset-selector-item {
    background-color: #e5e7eb;
}

[data-theme="light"] .asset-selector-item:hover {
    background-color: #d1d5db;
}

[data-theme="light"] .asset-selector-item.selected {
    background-color: rgba(13, 202, 240, 0.2);
}

[data-theme="light"] .asset-selector-code {
    background-color: rgba(0, 0, 0, 0.1);
    color: #1f2937;
}

[data-theme="light"] .asset-selector-name {
    color: #374151;
}

/* Responsive: stack on small screens */
@media (max-width: 576px) {
    .asset-selector-container {
        flex-direction: column;
    }
    .asset-selector-search {
        width: 100%;
    }
}

/* ============================================
   User Selector (Engagement Managers/Assessors)
   ============================================ */
.user-selector-container {
    display: flex;
    gap: 1rem;
    background-color: var(--bg-secondary);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    padding: 1rem;
    transition: border-color var(--transition-base);
}

.user-selector-container:focus-within {
    border-color: var(--color-accent);
}

.user-selector-container.border-danger {
    border-color: var(--color-error) !important;
}

.user-selector-search {
    flex-shrink: 0;
    width: 200px;
    display: flex;
    flex-direction: column;
}

.user-selector-stats {
    padding: 0.5rem 0;
    border-top: 1px solid var(--border-color);
    margin-top: 0.5rem;
}

.user-selector-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 280px;
    overflow-y: auto;
    padding-right: 0.5rem;
}

.user-selector-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    position: relative;
    cursor: pointer;
    border-radius: var(--radius-sm);
    border: 2px solid transparent;
    transition: all 0.15s ease;
    background-color: var(--bg-primary);
    padding: 0.65rem 0.75rem;
    width: 100%;
}

.user-selector-item:hover {
    background-color: var(--bg-tertiary);
}

.user-selector-item.selected {
    border-color: var(--color-accent);
    background-color: rgba(124, 68, 79, 0.15);
}

.user-selector-item.filtered-out {
    display: none !important;
}

.user-checkbox-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.user-selector-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid var(--border-color);
}

.user-selector-avatar-placeholder {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--text-muted);
    font-size: 0.9rem;
    border: 2px solid var(--border-color);
}

.user-selector-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.user-selector-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-selector-username {
    font-size: 0.8rem;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-selector-badges {
    display: flex;
    gap: 0.35rem;
    flex-shrink: 0;
}

.user-selector-badge {
    font-size: 0.65rem;
    font-weight: 600;
    padding: 0.2rem 0.45rem;
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.user-selector-badge.member {
    background-color: var(--color-success);
    color: #fff;
}

.user-selector-badge.inherited {
    background-color: var(--color-info);
    color: #000;
}

.user-selector-check {
    flex-shrink: 0;
    margin-left: auto;
    color: var(--color-accent);
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.15s ease;
    font-size: 1rem;
}

.user-selector-item.selected .user-selector-check {
    opacity: 1;
    transform: scale(1);
}

.user-selector-empty {
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* Light theme adjustments for user selector */
[data-theme="light"] .user-selector-container {
    background-color: var(--bg-secondary);
}

[data-theme="light"] .user-selector-item {
    background-color: var(--bg-primary);
}

[data-theme="light"] .user-selector-item:hover {
    background-color: var(--bg-tertiary);
}

[data-theme="light"] .user-selector-item.selected {
    background-color: rgba(124, 68, 79, 0.1);
}

[data-theme="light"] .user-selector-avatar-placeholder {
    background-color: var(--bg-tertiary);
}

/* Responsive: stack on small screens */
@media (max-width: 768px) {
    .user-selector-container {
        flex-direction: column;
    }
    .user-selector-search {
        width: 100%;
    }
    .user-selector-list {
        max-height: 200px;
    }
}

/* ============================================
   ASSET GRAPH - CYTOSCAPE CONTAINER
   ============================================ */

/* Graph view container - hidden by default (Table view is default) */
.graph-view-container {
    display: none;
}

/* Cytoscape graph container */
.cytoscape-graph {
    width: 100%;
    min-height: 600px;
    height: calc(100vh - 350px);
    background-color: #1a1d2e;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
}

/* Light theme adjustments for graph */
[data-theme="light"] .cytoscape-graph {
    background-color: #f5f5f5;
    border-color: var(--border-color);
}