/* =====================================================================
   Variables Globales y Paleta de Colores de FileCrew (Naranja/Oscuro)
   ===================================================================== */
:root, [data-bs-theme="dark"] {
    /* Color Principal (Cloudflare Orange) */
    --bs-primary: #F38020 !important;
    --bs-primary-rgb: 243, 128, 32 !important;
    --bs-primary-bg-subtle: rgba(243, 128, 32, 0.15) !important;
    --bs-primary-text-emphasis: #c4600e !important;

    /* Color Secundario */
    --bs-secondary: #49beff !important;
    --bs-secondary-rgb: 73, 190, 255 !important;
    --bs-secondary-bg-subtle: rgba(73, 190, 255, 0.15) !important;

    /* Color de Éxito (Emerald Green) */
    --bs-success: #34c759 !important;
    --bs-success-rgb: 52, 199, 89 !important;
    --bs-success-bg-subtle: rgba(52, 199, 89, 0.15) !important;

    /* Color de Peligro / Error (Vibrante) */
    --bs-danger: #e53935 !important;
    --bs-danger-rgb: 229, 57, 53 !important;
    --bs-danger-bg-subtle: rgba(229, 57, 53, 0.15) !important;
    --bs-danger-text-emphasis: #d82b4a !important;

    /* Color de Advertencia */
    --bs-warning: #FAAD14 !important;
    --bs-warning-rgb: 250, 173, 20 !important;
    --bs-warning-bg-subtle: rgba(250, 173, 20, 0.15) !important;

    /* Color de Información */
    --bs-info: #539bff !important;
    --bs-info-rgb: 83, 155, 255 !important;
    --bs-info-bg-subtle: rgba(83, 155, 255, 0.15) !important;
}

/* Forzar Primary en componentes específicos */
.btn-primary {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}
.btn-primary.border-transparent {
    border-color: transparent !important;
}
.btn-primary:hover {
    filter: brightness(0.9);
}

.btn-outline-primary {
    color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    background-color: transparent !important;
}
.btn-outline-primary:hover {
    background-color: var(--bs-primary) !important;
    color: #fff !important;
}

/* Forzar Warning en componentes específicos */
.btn-warning {
    background-color: var(--bs-warning) !important;
    border-color: var(--bs-warning) !important;
    color: #000;
}
.btn-warning:hover {
    filter: brightness(0.9);
}

.btn-outline-warning {
    color: var(--bs-warning) !important;
    border-color: var(--bs-warning) !important;
    background-color: transparent !important;
}
.btn-outline-warning:hover {
    background-color: var(--bs-warning) !important;
    color: #000 !important;
}

/* Forzar Danger en componentes específicos */
.btn-danger {
    background-color: var(--bs-danger) !important;
    border-color: var(--bs-danger) !important;
    color: #fff !important;
}
.btn-danger:hover {
    filter: brightness(0.9);
}

.btn-outline-danger {
    color: var(--bs-danger) !important;
    border-color: var(--bs-danger) !important;
    background-color: transparent !important;
}
.btn-outline-danger:hover {
    background-color: var(--bs-danger) !important;
    color: #fff !important;
}

/* Forzar Success en componentes específicos */
.btn-success {
    background-color: var(--bs-success) !important;
    border-color: var(--bs-success) !important;
    color: #fff !important;
}
.btn-success:hover {
    background-color: #2ba84b !important;
    border-color: #2ba84b !important;
    color: #fff !important;
}

.btn-outline-success {
    color: var(--bs-success) !important;
    border-color: var(--bs-success) !important;
    background-color: transparent !important;
}
.btn-outline-success:hover {
    background-color: var(--bs-success) !important;
    color: #fff !important;
}

/* Forzar Info en componentes específicos */
.btn-info {
    background-color: var(--bs-info) !important;
    border-color: var(--bs-info) !important;
    color: #fff !important;
}
.btn-info:hover {
    filter: brightness(0.9);
}

.btn-outline-info {
    color: var(--bs-info) !important;
    border-color: var(--bs-info) !important;
    background-color: transparent !important;
}
.btn-outline-info:hover {
    background-color: var(--bs-info) !important;
    color: #fff !important;
}

/* --- Botones de acción en tablas con micro-animación --- */
.btn-icon {
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}
.btn-icon:hover {
    transform: scale(1.1);
}

/* --- Paginación personalizada de FileCrew --- */
.pagination .page-link {
    width: 35px;
    height: 35px;
    padding: 0;
    margin: 0 4px;
    font-size: 0.85rem;
    border: none;
    border-radius: 8px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bs-heading-color, #2A3547);
    background-color: var(--bs-secondary-bg, #f8f9fa);
    transition: all 0.2s ease;
}

.pagination .page-item.active .page-link {
    background-color: var(--bs-primary) !important;
    color: #fff !important;
    box-shadow: 0 4px 9px rgba(var(--bs-primary-rgb), 0.2);
}

.pagination .page-item.disabled .page-link {
    background-color: transparent !important;
    opacity: 0.5;
}

.pagination .page-link:hover:not(.disabled) {
    background-color: var(--bs-primary-bg-subtle);
    color: var(--bs-primary);
}

/* =====================================================================
   Light Theme Overrides
   ===================================================================== */
[data-bs-theme="light"] body {
    background-color: #00000004 !important;
}

[data-bs-theme="light"] .dropdown-menu .dropdown-item {
    color: #2A3547 !important;
}

[data-bs-theme="light"] .dropdown-menu .dropdown-item:hover {
    background-color: rgba(0,0,0,0.05) !important;
    color: var(--bs-primary) !important;
}

[data-bs-theme="light"] .dropdown-menu .dropdown-item.text-danger,
[data-bs-theme="light"] .dropdown-menu .dropdown-item.text-danger i {
    color: var(--bs-danger) !important;
}

/* =====================================================================
   Premium Dark Theme Overrides (Apuestas Style de FileCrew)
   ===================================================================== */
[data-bs-theme="dark"] {
    /* Backgrounds Base */
    --bs-body-bg: #0b1114 !important;
    --bs-body-bg-rgb: 11, 17, 20 !important;
    --bs-dark: #0b1114 !important;
    --bs-dark-rgb: 11, 17, 20 !important;
    
    /* Superficies y Tarjetas */
    --bs-card-bg: #121a1f !important;
    --bs-secondary-bg: #121a1f !important;
    --bs-tertiary-bg: #1a262d !important;
    
    /* Bordes Generales */
    --bs-border-color: #1a262d !important;

    /* Subtle Dark */
    --bs-dark-bg-subtle: #121a1f !important;
    --bs-dark-border-subtle: #1a262d !important;
}

/* Cabecera y Menú Lateral Oscuros */
[data-bs-theme="dark"] .left-sidebar,
[data-bs-theme="dark"] .topbar {
    background-color: #0b1114 !important;
}

[data-bs-theme="dark"] .left-sidebar {
    border-right: 1px solid #1a262d !important;
}

/* Controles de Formulario y Buscador */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    background-color: #0b1114 !important;
    border: 1px solid #1a262d !important;
    color: #a8b6c2 !important;
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
    background-color: #0b1114 !important;
    border-color: rgba(var(--bs-primary-rgb), 0.5) !important;
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25) !important;
}

[data-bs-theme="dark"] .form-control::placeholder {
    color: #8c9ca6 !important;
}

/* Tablas Premium Dark */
[data-bs-theme="dark"] .table {
    --bs-table-bg: transparent !important;
    --bs-table-color: #f8f9fa !important;
    --bs-table-border-color: rgba(255, 255, 255, 0.05) !important;
    --bs-table-striped-bg: rgba(255, 255, 255, 0.02) !important;
    --bs-table-hover-bg: rgba(var(--bs-primary-rgb), 0.05) !important;
}

[data-bs-theme="dark"] .table thead th {
    background-color: #121a1f !important;
    color: #f6f9fc !important;
    border-bottom: 2px solid #1a262d !important;
}

[data-bs-theme="dark"] .table tbody td {
    background-color: #0b1114 !important;
    color: #f8f9fa !important;
}

.cursor-pointer {
    cursor: pointer !important;
}
.switch-custom-size {
    width: 2.5em !important;
    height: 1.25em !important;
    cursor: pointer !important;
}

/* =====================================================================
   Estilos Específicos de Proxmox Alert (Conservados)
   ===================================================================== */
.company-logo-view {
    object-fit: cover;
}

/* Telemetry LED Animations */
@keyframes telemetry-pulse {
    0% { transform: scale(0.9); opacity: 0.5; }
    50% { transform: scale(1.25); opacity: 1; }
    100% { transform: scale(0.9); opacity: 0.5; }
}

.telemetry-led {
    animation: telemetry-pulse 2s infinite ease-in-out;
    display: inline-block;
    width: 8px;
    height: 8px;
}

.led-wrapper {
    width: 24px;
    height: 24px;
}

/* Telemetry Card styles */
.telemetry-card {
    background: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(226, 232, 240, 0.8) !important;
    transition: all 0.3s ease;
}

[data-bs-theme="dark"] .telemetry-card {
    background: rgba(30, 41, 59, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.telemetry-spin {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.telemetry-spin:hover {
    transform: rotate(180deg);
}

.telemetry-host-title {
    font-size: 8px;
    letter-spacing: 0.5px;
}

.telemetry-host-name {
    font-size: 0.85rem;
}

/* Telemetry Chart Responsive Container */
.telemetry-chart-container {
    position: relative;
    height: 280px;
    width: 100%;
}

/* General Layout helpers & metrics */
.card-metric {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-metric:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08) !important;
}

.card-chart-container {
    transition: all 0.3s ease;
}

/* Severity & Alert items styling */
.severity-badge-ui {
    width: auto !important;
    min-width: 65px;
    font-size: 10px !important;
    padding: 4px 8px !important;
    white-space: nowrap;
    display: inline-block;
    text-align: center;
}

.alert-title-text {
    max-width: 250px;
}

.alert-status-badge {
    width: auto !important;
    min-width: 65px;
    font-size: 10px !important;
    padding: 4px 8px !important;
    white-space: nowrap;
    display: inline-block;
    text-align: center;
}

/* Modal formatting styling */
.ai-summary-container {
    font-size: 0.9rem;
    line-height: 1.5;
}

.modal-pre-message {
    white-space: pre-wrap;
    font-size: 0.85rem;
    overflow-x: auto;
}

/* Pulse animation for LED status blob */
.blob.bg-success { animation: pulse-success-view 2s infinite; }
.blob.bg-danger { animation: pulse-danger-view 2s infinite; }
.blob.bg-secondary { animation: pulse-secondary-view 2s infinite; }

@keyframes pulse-success-view {
    0% { box-shadow: 0 0 0 0 rgba(19, 222, 185, 0.7); }
    70% { box-shadow: 0 0 0 8px rgba(19, 222, 185, 0); }
    100% { box-shadow: 0 0 0 0 rgba(19, 222, 185, 0); }
}

@keyframes pulse-danger-view {
    0% { box-shadow: 0 0 0 0 rgba(229, 57, 53, 0.7); }
    70% { box-shadow: 0 0 0 8px rgba(229, 57, 53, 0); }
    100% { box-shadow: 0 0 0 0 rgba(229, 57, 53, 0); }
}

@keyframes pulse-secondary-view {
    0% { box-shadow: 0 0 0 0 rgba(108, 117, 125, 0.7); }
    70% { box-shadow: 0 0 0 8px rgba(108, 117, 125, 0); }
    100% { box-shadow: 0 0 0 0 rgba(108, 117, 125, 0); }
}

.col-checkbox {
    width: 40px;
}

.company-logo-preview {
    width: 120px;
    height: 120px;
    object-fit: cover;
}

.user-avatar-preview {
    object-fit: cover;
}

.company-logo-thumbnail {
    object-fit: contain;
}

.badge-width-fixed {
    width: 70px;
}

.user-avatar-thumbnail {
    object-fit: cover;
}

.dashboard-company-logo {
    object-fit: cover;
}

.pagination-icon {
    font-size: 0.85rem;
}

.topbar-avatar {
    object-fit: cover;
}

.topbar-icon-wrapper {
    width: 40px;
    height: 40px;
}

/* Dashboard specific premium styles */
.hover-img {
    transition: all 0.3s ease;
}

.hover-img:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08) !important;
}

.hover-img:hover .group-hover-arrow i {
    transform: translateX(4px);
}

.transition-all {
    transition: all 0.3s ease;
}

/* Pulse Animations for Status LED on Dashboard */
.blob.bg-success { animation: pulse-success 2s infinite; }
.blob.bg-danger { animation: pulse-danger 2s infinite; }
.blob.bg-warning { animation: pulse-warning 2s infinite; }
.blob.bg-info { animation: pulse-info 2s infinite; }

@keyframes pulse-success {
    0% { box-shadow: 0 0 0 0 rgba(19, 222, 185, 0.7); }
    70% { box-shadow: 0 0 0 6px rgba(19, 222, 185, 0); }
    100% { box-shadow: 0 0 0 0 rgba(19, 222, 185, 0); }
}

@keyframes pulse-danger {
    0% { box-shadow: 0 0 0 0 rgba(249, 0, 69, 0.7); }
    70% { box-shadow: 0 0 0 6px rgba(249, 0, 69, 0); }
    100% { box-shadow: 0 0 0 0 rgba(249, 0, 69, 0); }
}

@keyframes pulse-warning {
    0% { box-shadow: 0 0 0 0 rgba(255, 174, 31, 0.7); }
    70% { box-shadow: 0 0 0 6px rgba(255, 174, 31, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 174, 31, 0); }
}

@keyframes pulse-info {
    0% { box-shadow: 0 0 0 0 rgba(83, 155, 255, 0.7); }
    70% { box-shadow: 0 0 0 6px rgba(83, 155, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(83, 155, 255, 0); }
}

/* Color naranja para la pestaña activa (nav-pills) */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--bs-primary) !important;
    color: #fff !important;
}

/* Acordeones de ayuda: sin línea separadora entre header y body */
.accordion-help {
    --bs-accordion-border-color: var(--bs-border-color);
    --bs-accordion-btn-focus-box-shadow: none;
    --bs-accordion-btn-active-icon: none;
}
.accordion-help .accordion-button {
    box-shadow: none !important;
}
.accordion-help .accordion-button:not(.collapsed) {
    border-bottom: none !important;
    box-shadow: none !important;
}
.accordion-help .accordion-item {
    border-color: var(--bs-border-color) !important;
    border-bottom: var(--bs-border-width) solid var(--bs-border-color) !important;
}