/**
 * ReportSec CoreUI Custom Styles
 * Extends CoreUI 5.4.x with ReportSec-specific components
 */

/* ==========================================================================
   Small-box Widget (AdminLTE compatible)
   Used for main stat cards in dashboards
   ========================================================================== */

.small-box {
    border-radius: var(--cui-card-border-radius, 0.375rem);
    box-shadow: var(--cui-card-box-shadow);
    display: block;
    margin-bottom: 20px;
    position: relative;
}

.small-box > .inner {
    padding: 10px;
}

.small-box > .small-box-footer {
    background-color: rgba(0, 0, 0, 0.1);
    color: rgba(255, 255, 255, 0.8);
    display: block;
    padding: 3px 0;
    position: relative;
    text-align: center;
    text-decoration: none;
    z-index: 10;
}

.small-box > .small-box-footer:hover {
    background-color: rgba(0, 0, 0, 0.15);
    color: #fff;
}

.small-box h3 {
    font-size: 2.2rem;
    font-weight: 700;
    margin: 0 0 10px;
    padding: 0;
    white-space: nowrap;
}

.small-box p {
    font-size: 1rem;
    margin-bottom: 0;
}

.small-box .icon {
    color: rgba(0, 0, 0, 0.15);
    z-index: 0;
}

.small-box .icon > i {
    font-size: 70px;
    position: absolute;
    right: 15px;
    top: 15px;
    transition: transform 0.3s linear;
}

.small-box:hover .icon > i {
    transform: scale(1.1);
}

/* Small-box color variants */
.small-box.bg-primary,
.small-box.bg-success,
.small-box.bg-info,
.small-box.bg-warning,
.small-box.bg-danger,
.small-box.bg-dark,
.small-box.bg-purple {
    color: #fff;
}

.small-box.bg-warning {
    color: #1f2d3d;
}

.small-box.bg-warning .icon {
    color: rgba(0, 0, 0, 0.1);
}

/* ==========================================================================
   Info-box Widget (AdminLTE compatible)
   Used for horizontal stat cards
   ========================================================================== */

.info-box {
    border-radius: var(--cui-card-border-radius, 0.375rem);
    box-shadow: var(--cui-card-box-shadow);
    display: flex;
    min-height: 80px;
    padding: 0.5rem;
    position: relative;
    width: 100%;
}

.info-box .info-box-icon {
    align-items: center;
    border-radius: var(--cui-card-border-radius, 0.375rem);
    display: flex;
    font-size: 1.875rem;
    justify-content: center;
    text-align: center;
    width: 70px;
}

.info-box .info-box-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.8;
    flex: 1;
    padding: 0 10px;
    overflow: hidden;
}

.info-box .info-box-text {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-transform: uppercase;
    font-size: 0.75rem;
}

.info-box .info-box-number {
    display: block;
    margin-top: 0.25rem;
    font-size: 1.5rem;
    font-weight: 700;
}

/* Info-box colored variants (background covers entire box) */
.info-box.bg-primary,
.info-box.bg-success,
.info-box.bg-info,
.info-box.bg-warning,
.info-box.bg-danger,
.info-box.bg-dark,
.info-box.bg-secondary,
.info-box.bg-purple {
    color: #fff;
}

.info-box.bg-warning {
    color: #1f2d3d;
}

.info-box.bg-light {
    background-color: #f8f9fa !important;
}

.info-box.bg-light .info-box-icon {
    color: #495057;
}

/* ==========================================================================
   CoreUI Flag Icons Fix
   ========================================================================== */

[class^="cif-"], [class*=" cif-"] {
    height: 1em;
}

/* ==========================================================================
   Purple Color (not included in CoreUI by default)
   ========================================================================== */

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

.bg-purple.bg-opacity-25 {
    background-color: rgba(111, 66, 193, 0.25) !important;
}

.text-purple {
    color: #6f42c1 !important;
}

/* Progress bar purple */
.progress-bar.bg-purple {
    background-color: #6f42c1 !important;
}

/* Orange color (for exploit badges, etc.) */
.bg-orange {
    background-color: #fd7e14 !important;
    color: #fff !important;
}

.text-orange {
    color: #fd7e14 !important;
}

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

.btn-purple {
    background-color: #6f42c1;
    border-color: #6f42c1;
    color: #fff;
}

.btn-purple:hover {
    background-color: #5a32a3;
    border-color: #5a32a3;
    color: #fff;
}

.btn-outline-purple {
    border-color: #6f42c1;
    color: #6f42c1;
}

.btn-outline-purple:hover {
    background-color: #6f42c1;
    color: #fff;
}

/* ==========================================================================
   Sortable Table Headers
   ========================================================================== */

.sortable {
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease;
    position: relative;
}

.sortable:hover {
    background-color: #e3f2fd;
}

.sortable span {
    margin-left: 5px;
    display: inline-block;
    vertical-align: middle;
}

.sortable:hover span i {
    opacity: 0.7 !important;
}

/* ==========================================================================
   Severity Colors
   Used consistently across all modules
   ========================================================================== */

.severity-critical,
.bg-severity-critical {
    background-color: #dc3545 !important;
    color: #fff;
}

.text-severity-critical {
    color: #dc3545 !important;
}

.severity-high,
.bg-severity-high {
    background-color: #fd7e14 !important;
    color: #fff;
}

.text-severity-high {
    color: #fd7e14 !important;
}

.severity-medium,
.bg-severity-medium {
    background-color: #ffc107 !important;
    color: #212529;
}

.text-severity-medium {
    color: #ffc107 !important;
}

.severity-low,
.bg-severity-low {
    background-color: #6c757d !important;
    color: #fff;
}

.text-severity-low {
    color: #6c757d !important;
}

.severity-info,
.bg-severity-info {
    background-color: #17a2b8 !important;
    color: #fff;
}

.text-severity-info {
    color: #17a2b8 !important;
}

/* ==========================================================================
   Availability Colors (for connectivity percentages)
   ========================================================================== */

.availability-high {
    background-color: #28a745 !important;
    color: white !important;
    padding: 4px 10px;
    border-radius: 4px;
    font-weight: bold;
    display: inline-block;
}

.availability-medium {
    background-color: #ffc107 !important;
    color: #212529 !important;
    padding: 4px 10px;
    border-radius: 4px;
    font-weight: bold;
    display: inline-block;
}

.availability-low {
    background-color: #dc3545 !important;
    color: white !important;
    padding: 4px 10px;
    border-radius: 4px;
    font-weight: bold;
    display: inline-block;
}

/* ==========================================================================
   Content Header (CoreUI compatible)
   ========================================================================== */

.content-header {
    padding: 15px 0.5rem;
}

.content-header h1 {
    font-size: 1.8rem;
    margin: 0;
}

/* ==========================================================================
   Card Improvements
   ========================================================================== */

/* Ensure all cards have bottom margin for proper spacing */
.card {
    margin-bottom: 1rem;
}

/* Content area bottom padding to prevent touching footer */
.content,
.body > .container-fluid {
    padding-bottom: 1rem;
}

.card-header .card-title {
    float: left;
    font-size: 1rem;
    font-weight: 400;
    margin: 0;
}

.card-header .card-tools {
    float: right;
    margin-right: -0.625rem;
}

.card-tools .btn-tool {
    background-color: transparent;
    color: #adb5bd;
    font-size: 0.875rem;
    padding: 0.25rem 0.5rem;
}

.card-tools .btn-tool:hover {
    color: #495057;
}

/* Clear floats in card header */
.card-header::after {
    clear: both;
    content: "";
    display: block;
}

/* ==========================================================================
   Stat Card Animation (dashboard)
   ========================================================================== */

.stat-card {
    transition: transform 0.2s;
}

.stat-card:hover {
    transform: translateY(-2px);
}

/* ==========================================================================
   CoreUI Sidebar Adjustments
   ========================================================================== */

.sidebar {
    --cui-sidebar-width: 256px;
    border-right: 1px solid var(--cui-sidebar-border-color, rgba(0, 0, 0, 0.175));
}

/* Main wrapper margin for fixed sidebar */
.wrapper {
    margin-left: 256px;
    transition: margin-left 0.3s;
}

/* When sidebar is hidden/narrow */
.sidebar-narrow-unfoldable ~ .wrapper,
.sidebar-narrow ~ .wrapper {
    margin-left: 56px;
}

/* When sidebar is completely hidden */
.sidebar-hide ~ .wrapper,
.sidebar.hide ~ .wrapper {
    margin-left: 0;
}

/* Responsive: on mobile, no margin needed */
@media (max-width: 991.98px) {
    .wrapper {
        margin-left: 0;
    }
}

/* Sidebar brand - aligned with header height */
.sidebar-brand {
    padding: 8px 15px;
    text-align: center;
    height: 64px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid var(--cui-sidebar-border-color, rgba(0, 0, 0, 0.175));
}

[data-coreui-theme="dark"] .sidebar-brand {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

.sidebar-brand .brand-logo {
    background-color: #f5f5f5;
    border-radius: 6px;
    padding: 6px 10px;
    display: inline-block;
}

.sidebar-brand .brand-logo img {
    max-height: 28px;
    max-width: 100%;
    display: block;
}

/* User panel in sidebar */
.sidebar .user-panel {
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 0.5rem;
}

.sidebar .user-panel .image img {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    object-fit: cover;
}

.sidebar .user-panel .info {
    padding-left: 0.5rem;
}

.sidebar .user-panel .info a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
}

.sidebar .user-panel .info a:hover {
    color: #fff;
}

/* Sidebar active nav-link */
.sidebar .nav-link.active {
    border-right: 3px solid var(--cui-primary);
}

/* Avatar placeholder */
.avatar-placeholder {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background-color: #6c757d;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
}

/* ==========================================================================
   Header/Navbar Sub-navigation
   ========================================================================== */

/* Header should stretch full width within wrapper */
.header {
    width: 100%;
    height: 64px;
    min-height: 64px;
}

.header-nav .nav-link {
    padding: 0.5rem 1rem;
}

.header-nav .nav-link.active {
    font-weight: 600;
    border-bottom: 2px solid var(--cui-primary);
}

/* ==========================================================================
   Chart Containers
   ========================================================================== */

.chart-container {
    position: relative;
    height: 200px;
}

.chart-container-sm {
    position: relative;
    height: 160px;
}

/* ==========================================================================
   Table Enhancements
   ========================================================================== */

.table-striped > tbody > tr:nth-of-type(odd) > * {
    --cui-table-accent-bg: rgba(0, 0, 0, 0.02);
}

/* ==========================================================================
   Form Controls in Headers
   ========================================================================== */

.card-header .input-group-text {
    background-color: #f8f9fa;
    border-right: 0;
    min-width: 38px;
    justify-content: center;
}

.card-header .form-select,
.card-header .form-control {
    border-left: 0;
}

.card-header .input-group:focus-within .input-group-text {
    border-color: #86b7fe;
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */

.text-white-50 {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* Elevation shadows (AdminLTE compatibility) */
.elevation-1 { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); }
.elevation-2 { box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); }
.elevation-3 { box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); }
.elevation-4 { box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); }

/* Image utilities */
.img-circle {
    border-radius: 50%;
}

/* ==========================================================================
   Responsive Adjustments
   ========================================================================== */

@media (max-width: 767.98px) {
    .small-box h3 {
        font-size: 1.5rem;
    }

    .small-box .icon > i {
        font-size: 50px;
    }

    .info-box .info-box-icon {
        width: 50px;
        font-size: 1.5rem;
    }

    .info-box .info-box-number {
        font-size: 1.25rem;
    }
}

/* ==========================================================================
   Threat Badge Styles
   ========================================================================== */

.threat-badge {
    font-size: 0.75rem;
}

.actor-row:hover {
    background-color: #f8f9fa;
}

/* ==========================================================================
   Login Page Styles
   CoreUI-compatible authentication pages
   ========================================================================== */

.login-page {
    align-items: center;
    background-color: var(--cui-body-bg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
    padding: 1rem;
}

.login-box {
    width: 360px;
    max-width: 100%;
}

.login-logo {
    font-size: 1.75rem;
    font-weight: 300;
    margin-bottom: 0.5rem;
    text-align: center;
    color: var(--cui-body-color);
}

.login-logo b {
    font-weight: 700;
}

.login-card-body {
    padding: 1.25rem;
}

.login-box-msg {
    margin: 0;
    padding: 0 1.25rem 1.25rem;
    text-align: center;
}

/* Input group append fix for BS5 */
.login-card-body .input-group-text {
    border-left: 0;
}

.login-card-body .input-group .form-control {
    border-right: 0;
}

.login-card-body .input-group:focus-within .form-control,
.login-card-body .input-group:focus-within .input-group-text {
    border-color: #86b7fe;
}

/* Code input for 2FA/OTP */
.code-input {
    font-size: 1.5rem;
    text-align: center;
    letter-spacing: 0.5rem;
    font-weight: bold;
}

/* ==========================================================================
   Dark Mode Overrides
   ========================================================================== */

/* Main content area background in dark mode (CoreUI default) */
[data-coreui-theme="dark"] .wrapper {
    background-color: #1d222b;
}

/* Sidebar border in dark mode */
[data-coreui-theme="dark"] .sidebar {
    border-right-color: rgba(255, 255, 255, 0.1);
}

/* Actor row hover in dark mode */
[data-coreui-theme="dark"] .actor-row:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

/* Sortable header hover in dark mode */
[data-coreui-theme="dark"] .sortable:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

/* Content header in dark mode */
[data-coreui-theme="dark"] .content-header h1 {
    color: rgba(255, 255, 255, 0.87);
}

/* Card title in dark mode */
[data-coreui-theme="dark"] .card-header .card-title {
    color: rgba(255, 255, 255, 0.87);
}

/* Sidebar brand logo background */
[data-coreui-theme="dark"] .sidebar-brand .brand-logo {
    background-color: rgba(255, 255, 255, 0.9);
}

/* Table striped in dark mode */
[data-coreui-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
    --cui-table-accent-bg: rgba(255, 255, 255, 0.02);
}

/* Form controls in card headers - dark mode */
[data-coreui-theme="dark"] .card-header .input-group-text {
    background-color: var(--cui-tertiary-bg);
}

/* Info-box light variant in dark mode */
[data-coreui-theme="dark"] .info-box.bg-light {
    background-color: var(--cui-tertiary-bg) !important;
}

[data-coreui-theme="dark"] .info-box.bg-light .info-box-icon {
    color: rgba(255, 255, 255, 0.87);
}

/* Select2 dark mode */
[data-coreui-theme="dark"] .select2-container--bootstrap-5 .select2-selection {
    background-color: #2a303a !important;
    border-color: #464e5c !important;
    color: #e1e4e8 !important;
}

[data-coreui-theme="dark"] .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice {
    background-color: #3a4250 !important;
    border-color: #464e5c !important;
    color: #e1e4e8 !important;
}

[data-coreui-theme="dark"] .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove {
    color: #e1e4e8 !important;
}

[data-coreui-theme="dark"] .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: #fff !important;
    background-color: #dc3545 !important;
}

[data-coreui-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown {
    background-color: #2a303a !important;
    border-color: #464e5c !important;
}

[data-coreui-theme="dark"] .select2-container--bootstrap-5 .select2-results__option {
    color: #e1e4e8 !important;
}

[data-coreui-theme="dark"] .select2-container--bootstrap-5 .select2-results__option--highlighted {
    background-color: #0d6efd !important;
    color: #fff !important;
}

[data-coreui-theme="dark"] .select2-container--bootstrap-5 .select2-search__field {
    background-color: #2a303a !important;
    color: #e1e4e8 !important;
}

[data-coreui-theme="dark"] .select2-container--bootstrap-5 .select2-search__field::placeholder {
    color: #8a919b !important;
}

[data-coreui-theme="dark"] .select2-container--bootstrap-5 .select2-selection__rendered {
    color: #e1e4e8 !important;
}

[data-coreui-theme="dark"] .select2-container--bootstrap-5 .select2-selection__placeholder {
    color: #8a919b !important;
}

/* ==========================================================================
   Badge Gradient Styles
   Vertical gradient effect for Bootstrap badges
   Higher specificity to override CoreUI defaults
   ========================================================================== */

span.badge.bg-primary,
.badge.bg-primary {
    background-color: transparent !important;
    background-image: linear-gradient(to bottom, #0d6efd 0%, #05357d 100%) !important;
}

span.badge.bg-secondary,
.badge.bg-secondary {
    background-color: transparent !important;
    background-image: linear-gradient(to bottom, #6c757d 0%, #2e3235 100%) !important;
}

span.badge.bg-success,
.badge.bg-success {
    background-color: transparent !important;
    background-image: linear-gradient(to bottom, #198754 0%, #0a4529 100%) !important;
}

span.badge.bg-danger,
.badge.bg-danger {
    background-color: transparent !important;
    background-image: linear-gradient(to bottom, #dc3545 0%, #68141c 100%) !important;
}

span.badge.bg-warning,
.badge.bg-warning {
    background-color: transparent !important;
    background-image: linear-gradient(to bottom, #ffc107 0%, #866500 100%) !important;
    color: #212529 !important;
}

span.badge.bg-info,
.badge.bg-info {
    background-color: transparent !important;
    background-image: linear-gradient(to bottom, #0dcaf0 0%, #065b6c 100%) !important;
    color: #212529 !important;
}

span.badge.bg-light,
.badge.bg-light {
    background-color: transparent !important;
    background-image: linear-gradient(to bottom, #f8f9fa 0%, #939699 100%) !important;
    color: #212529 !important;
}

span.badge.bg-dark,
.badge.bg-dark {
    background-color: transparent !important;
    background-image: linear-gradient(to bottom, #495057 0%, #141618 100%) !important;
}

span.badge.bg-purple,
.badge.bg-purple {
    background-color: transparent !important;
    background-image: linear-gradient(to bottom, #6f42c1 0%, #2e1854 100%) !important;
    color: #fff !important;
}

span.badge.bg-orange,
.badge.bg-orange {
    background-color: transparent !important;
    background-image: linear-gradient(to bottom, #fd7e14 0%, #7a3b00 100%) !important;
    color: #fff !important;
}

/* Severity badges with gradient */
span.badge.bg-severity-critical,
span.badge.severity-critical,
.badge.bg-severity-critical,
.badge.severity-critical {
    background-color: transparent !important;
    background-image: linear-gradient(to bottom, #dc3545 0%, #5c1018 100%) !important;
    color: #fff !important;
}

span.badge.bg-severity-high,
span.badge.severity-high,
.badge.bg-severity-high,
.badge.severity-high {
    background-color: transparent !important;
    background-image: linear-gradient(to bottom, #fd7e14 0%, #7a3b00 100%) !important;
    color: #fff !important;
}

span.badge.bg-severity-medium,
span.badge.severity-medium,
.badge.bg-severity-medium,
.badge.severity-medium {
    background-color: transparent !important;
    background-image: linear-gradient(to bottom, #ffc107 0%, #866500 100%) !important;
    color: #212529 !important;
}

span.badge.bg-severity-low,
span.badge.severity-low,
.badge.bg-severity-low,
.badge.severity-low {
    background-color: transparent !important;
    background-image: linear-gradient(to bottom, #6c757d 0%, #2e3235 100%) !important;
    color: #fff !important;
}

span.badge.bg-severity-info,
span.badge.severity-info,
.badge.bg-severity-info,
.badge.severity-info {
    background-color: transparent !important;
    background-image: linear-gradient(to bottom, #17a2b8 0%, #09444d 100%) !important;
    color: #fff !important;
}

/* Availability badges with gradient */
span.badge.availability-high,
.badge.availability-high {
    background-color: transparent !important;
    background-image: linear-gradient(to bottom, #28a745 0%, #10411b 100%) !important;
    color: #fff !important;
}

span.badge.availability-medium,
.badge.availability-medium {
    background-color: transparent !important;
    background-image: linear-gradient(to bottom, #ffc107 0%, #866500 100%) !important;
    color: #212529 !important;
}

span.badge.availability-low,
.badge.availability-low {
    background-color: transparent !important;
    background-image: linear-gradient(to bottom, #dc3545 0%, #5c1018 100%) !important;
    color: #fff !important;
}

/* OS badges with gradient */
.badge.os-windows {
    background-image: linear-gradient(to bottom, #0078D4 0%, #003a6a 100%) !important;
    color: #fff !important;
}
.badge.os-macos,
.badge.os-apple,
.badge.os-ios {
    background-image: linear-gradient(to bottom, #555555 0%, #000000 100%) !important;
    color: #fff !important;
}
.badge.os-ubuntu {
    background-image: linear-gradient(to bottom, #E95420 0%, #772a10 100%) !important;
    color: #fff !important;
}
.badge.os-debian {
    background-image: linear-gradient(to bottom, #A81D33 0%, #540e19 100%) !important;
    color: #fff !important;
}
.badge.os-centos {
    background-image: linear-gradient(to bottom, #262577 0%, #13123b 100%) !important;
    color: #fff !important;
}
.badge.os-fedora {
    background-image: linear-gradient(to bottom, #51A2DA 0%, #28516d 100%) !important;
    color: #fff !important;
}
.badge.os-redhat {
    background-image: linear-gradient(to bottom, #EE0000 0%, #770000 100%) !important;
    color: #fff !important;
}
.badge.os-freebsd {
    background-image: linear-gradient(to bottom, #AB2B28 0%, #551514 100%) !important;
    color: #fff !important;
}
.badge.os-arch {
    background-image: linear-gradient(to bottom, #1793D1 0%, #0b4968 100%) !important;
    color: #fff !important;
}
.badge.os-alpine {
    background-image: linear-gradient(to bottom, #0D597F 0%, #062c3f 100%) !important;
    color: #fff !important;
}
.badge.os-kali {
    background-image: linear-gradient(to bottom, #557C94 0%, #2a3e4a 100%) !important;
    color: #fff !important;
}
.badge.os-mint {
    background-image: linear-gradient(to bottom, #87CF3E 0%, #43671f 100%) !important;
    color: #fff !important;
}
.badge.os-android {
    background-image: linear-gradient(to bottom, #34A853 0%, #1a5429 100%) !important;
    color: #fff !important;
}
.badge.os-linux {
    background-image: linear-gradient(to bottom, #FCC624 0%, #7e6312 100%) !important;
    color: #212529 !important;
}
.badge.os-routeros,
.badge.os-mikrotik {
    background-image: linear-gradient(to bottom, #293239 0%, #14191c 100%) !important;
    color: #fff !important;
}
.badge.os-sophos {
    background-image: linear-gradient(to bottom, #2D5BA9 0%, #162d54 100%) !important;
    color: #fff !important;
}
.badge.os-fortinet {
    background-image: linear-gradient(to bottom, #EE3124 0%, #771812 100%) !important;
    color: #fff !important;
}
.badge.os-paloalto {
    background-image: linear-gradient(to bottom, #F04E23 0%, #782711 100%) !important;
    color: #fff !important;
}
.badge.os-unknown {
    background-image: linear-gradient(to bottom, #6c757d 0%, #36393c 100%) !important;
    color: #fff !important;
}

/* ==========================================================================
   Health Indicator (Topbar semaphore)
   ========================================================================== */

.health-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    text-decoration: none;
}

.health-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #6c757d;
    transition: all 0.3s ease;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2);
}

.health-dot.health-green {
    background-color: #00e676;
    box-shadow: 0 0 10px rgba(0, 230, 118, 0.8);
}

.health-dot.health-yellow {
    background-color: #ffea00;
    box-shadow: 0 0 10px rgba(255, 234, 0, 0.8);
    animation: pulse-yellow 2s infinite;
}

.health-dot.health-red {
    background-color: #ff1744;
    box-shadow: 0 0 10px rgba(255, 23, 68, 0.8);
    animation: pulse-red 1.5s infinite;
}

@keyframes pulse-yellow {
    0%, 100% { box-shadow: 0 0 10px rgba(255, 234, 0, 0.8); }
    50% { box-shadow: 0 0 20px rgba(255, 234, 0, 1); }
}

@keyframes pulse-red {
    0%, 100% { box-shadow: 0 0 10px rgba(255, 23, 68, 0.8); }
    50% { box-shadow: 0 0 20px rgba(255, 23, 68, 1); }
}

/* Health Alerts Popover */
.health-alerts-popover {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 300px;
    max-width: 400px;
    background: var(--cui-body-bg);
    border: 1px solid var(--cui-border-color);
    border-radius: 0.5rem;
    box-shadow: var(--cui-box-shadow-lg);
    z-index: 1050;
    display: none;
}

.health-alerts-popover.show {
    display: block;
}

.health-alerts-popover .popover-header {
    padding: 0.75rem 1rem;
    background: var(--cui-tertiary-bg);
    border-bottom: 1px solid var(--cui-border-color);
    font-weight: 600;
    border-radius: 0.5rem 0.5rem 0 0;
}

.health-alerts-popover .popover-body {
    padding: 0.75rem 1rem;
    max-height: 300px;
    overflow-y: auto;
}

.health-alert-item {
    display: flex;
    align-items: flex-start;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--cui-border-color);
}

.health-alert-item:last-child {
    border-bottom: none;
}

.health-alert-icon {
    flex-shrink: 0;
    margin-right: 0.75rem;
    font-size: 1.1rem;
}

.health-alert-icon.warning { color: #ffc107; }
.health-alert-icon.danger { color: #dc3545; }

.health-alert-content {
    flex: 1;
}

.health-alert-title {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.health-alert-desc {
    font-size: 0.85rem;
    color: var(--cui-secondary-color);
}