/* Panel avanzado completamente conectado al tema activo. */

#ccAdminV2Backdrop.cc-admin-v2-backdrop {
    background: var(--cc-overlay) !important;
}

#ccAdminV2Backdrop .cc-admin-v2,
.cc-admin-v2 {
    color: var(--cc-text) !important;
    background: var(--cc-surface-0) !important;
    border-color: var(--cc-border) !important;
    box-shadow: var(--cc-shadow-2) !important;
}

.cc-admin-header {
    color: var(--cc-text) !important;
    background: var(--cc-toolbar) !important;
    border-color: var(--cc-border) !important;
}

.cc-admin-kicker {
    color: var(--cc-accent) !important;
}

.cc-admin-layout {
    background: var(--cc-surface-0) !important;
}

.cc-admin-sidebar {
    color: var(--cc-text) !important;
    background: var(--cc-surface-1) !important;
    border-color: var(--cc-border) !important;
}

.cc-admin-sidebar-foot {
    color: var(--cc-text-muted) !important;
}

.cc-admin-nav-button {
    color: var(--cc-text-secondary) !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
}

.cc-admin-nav-button:hover {
    color: var(--cc-text) !important;
    background: var(--cc-surface-2) !important;
    border-color: var(--cc-border-subtle) !important;
}

.cc-admin-nav-button.active {
    color: var(--cc-on-accent) !important;
    background: var(--cc-accent) !important;
    border-color: var(--cc-accent) !important;
    box-shadow: none !important;
}

.cc-admin-content {
    color: var(--cc-text) !important;
    background: var(--cc-surface-0) !important;
}

.cc-admin-section-heading h3,
.cc-admin-card h3,
.cc-admin-card strong,
.cc-admin-table th,
.cc-admin-metric strong {
    color: var(--cc-text) !important;
}

.cc-admin-section-heading p,
.cc-admin-muted,
.cc-admin-card-subtitle,
.cc-admin-note,
.cc-admin-table td,
.cc-admin-stat-list span {
    color: var(--cc-text-secondary) !important;
}

.cc-admin-card,
.cc-admin-metric,
.cc-admin-service-card,
.cc-admin-log-card,
.cc-admin-security-card,
.cc-admin-mount-editor,
.cc-admin-table-wrap,
.cc-admin-empty,
.cc-admin-filterbar {
    color: var(--cc-text) !important;
    background: var(--cc-surface-1) !important;
    border-color: var(--cc-border) !important;
    box-shadow: none !important;
}

.cc-admin-card:hover,
.cc-admin-service-card:hover,
.cc-admin-metric:hover {
    border-color: var(--cc-border-strong) !important;
}

.cc-admin-table {
    color: var(--cc-text) !important;
    background: var(--cc-surface-0) !important;
}

.cc-admin-table th {
    background: var(--cc-surface-2) !important;
    border-color: var(--cc-border) !important;
}

.cc-admin-table td {
    background: var(--cc-surface-0) !important;
    border-color: var(--cc-border-subtle) !important;
}

.cc-admin-table tr:hover td {
    background: var(--cc-surface-1) !important;
}

.cc-admin-field label,
.cc-admin-switch-row,
.cc-admin-value-line {
    color: var(--cc-text-secondary) !important;
}

.cc-admin-field input,
.cc-admin-field select,
.cc-admin-field textarea,
.cc-admin-title-input,
.cc-admin-number-input {
    color: var(--cc-text) !important;
    background: var(--cc-surface-0) !important;
    border-color: var(--cc-border) !important;
}

.cc-admin-switch {
    background: var(--cc-surface-3) !important;
    border-color: var(--cc-border) !important;
}

.cc-admin-switch.checked,
.cc-admin-switch:has(input:checked) {
    background: var(--cc-accent) !important;
    border-color: var(--cc-accent) !important;
}

.cc-admin-badge {
    color: var(--cc-info) !important;
    background: var(--cc-info-soft) !important;
    border-color: color-mix(in srgb, var(--cc-info) 30%, transparent) !important;
}

.cc-admin-badge.good {
    color: var(--cc-success) !important;
    background: var(--cc-success-soft) !important;
}

.cc-admin-badge.warn {
    color: var(--cc-warning) !important;
    background: var(--cc-warning-soft) !important;
}

.cc-admin-badge.bad,
.cc-admin-error-card,
.cc-admin-inline-error {
    color: var(--cc-danger) !important;
    background: var(--cc-danger-soft) !important;
    border-color: color-mix(in srgb, var(--cc-danger) 30%, transparent) !important;
}

.cc-admin-progress {
    background: var(--cc-surface-3) !important;
}

.cc-admin-progress > span {
    background: var(--cc-accent) !important;
}

@media screen and (max-width: 760px) {
    .cc-admin-sidebar {
        border-color: var(--cc-border) !important;
    }

    .cc-admin-nav-button.active {
        color: var(--cc-accent) !important;
        background: var(--cc-accent-soft) !important;
        border-color: var(--cc-accent) !important;
    }
}