/* Theme-owned compatibility glue for cloud modules (migrated from HostBill custom CSS) */

/* HTMX layout stability */
div[hx-trigger], div[hx-get], div[hx-post],
span[hx-trigger], span[hx-get], span[hx-post],
button[hx-trigger], button[hx-get], button[hx-post],
a[hx-trigger], a[hx-get], a[hx-post],
tr[hx-trigger], tr[hx-get], tr[hx-post],
td[hx-trigger], td[hx-get], td[hx-post] {
    min-height: inherit;
}

/* HTMX loading indicators */
.htmx-indicator {
    display: none;
}

.htmx-request .htmx-indicator,
.htmx-indicator.htmx-request {
    display: inline-block;
    animation: spin 1s linear infinite;
}

/* HTMX transition effects */
.htmx-swapping {
    opacity: 0.5;
    transition: opacity 200ms ease-out;
}

.htmx-settling {
    opacity: 1;
    transition: opacity 200ms ease-in;
}

/* Hidden HTMX polling anchors */
.vm-power-poll {
    display: none !important;
    position: absolute;
    left: -9999px;
    visibility: hidden;
}

/* Spinner animation */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* VM menu clean-up */
#lockable-vm-menu:empty {
    display: none;
}

#lockable-vm-menu {
    min-height: 0;
    margin: 0;
    padding: 0;
}

#lockable-vm-menu ul#vm-menu:empty {
    display: none;
}

/* Cloud content tweaks */
#content-cloud {
    padding-top: 0;
}

/* Override runtime margin-top that double-compensates with JS fixed-nav padding */
.cloud #content-cloud {
    margin-top: 16px;
}

/* Widen service-layout pages only (avoid impacting invoices/KB/etc.) */
.body-content .section-main[class*="service-layout-"] {
    max-width: 1600px !important;
    width: 100% !important;
}

/* Prevent layout jump when sidebar toggles */
@media (min-width: 994px) {
  .template_2019.sidenav-toggled .body-content,
  .template_2019.sidenav-toggled .footer-content {
    transition: none !important;
    margin-left: 0 !important;
  }
}

/* Prevent minor width jumps when scrollbar appears */
html { scrollbar-gutter: stable; }

/* VM status slider transitional colors */
.vm-status-slider.transitioning input + .vm-status-slider-track {
    background-color: var(--brand-warning, #ffc107) !important;
}

.vm-status-slider.pending input + .vm-status-slider-track {
    background-color: var(--color-warning-700, #fd7e14) !important;
}

.vm-status-slider.failed input + .vm-status-slider-track {
    background-color: var(--brand-accent, #6f42c1) !important;
}

.vm-status-slider.disabled {
    pointer-events: none;
    opacity: 0.7;
}

/* OpenNebula module dark/light compatibility (theme-owned overrides) */
body.template_togglebox #content-cloud .sortable-ghost {
    background: var(--brand-warning-bg, rgba(245, 158, 11, 0.2)) !important;
}

body.template_togglebox #content-cloud .firewall-rule .sort-handle::before {
    border-bottom-color: var(--color-fg-muted, #6c757d) !important;
}

body.template_togglebox #content-cloud .firewall-rule .sort-handle::after {
    border-top-color: var(--color-fg-muted, #6c757d) !important;
}

/* OpenNebula table striping and hover states injected by module inline CSS */
body.template_togglebox #content-cloud .tonapp tbody tr:nth-child(even),
body.template_togglebox #content-cloud .data-table tbody tr:nth-child(even),
body.template_togglebox #content-cloud [id$="-table"] tbody tr:nth-child(even),
body.template_togglebox #content-cloud .metered-usage-table tbody tr:nth-child(even),
body.template_togglebox #content-cloud .interface-table tbody tr:nth-child(even),
body.template_togglebox #content-cloud .ip-table tbody tr:nth-child(even),
body.template_togglebox #content-cloud .backup-schedule-table tbody tr:nth-child(even),
body.template_togglebox #content-cloud .snapshot-schedule-table tbody tr:nth-child(even),
body.template_togglebox #content-cloud .task-history-table tbody tr:nth-child(even),
body.template_togglebox #content-cloud .autoscaling-rules-table tbody tr:nth-child(even),
body.template_togglebox #content-cloud .firewall-rules-table tbody tr:nth-child(even),
body.template_togglebox #content-cloud .ssh-keys-table tbody tr:nth-child(even),
body.template_togglebox #content-cloud .scheduled-actions-table tbody tr:nth-child(even),
body.template_togglebox #content-cloud .billing-table tbody tr:nth-child(even),
body.template_togglebox #content-cloud .resources-table tbody tr:nth-child(even),
body.template_togglebox #content-cloud .overview-table tbody tr:nth-child(even) {
    background-color: var(--oneb-table-row-even, #f8f9fa) !important;
}

body.template_togglebox #content-cloud .tonapp tbody tr:nth-child(odd),
body.template_togglebox #content-cloud .data-table tbody tr:nth-child(odd),
body.template_togglebox #content-cloud [id$="-table"] tbody tr:nth-child(odd),
body.template_togglebox #content-cloud .metered-usage-table tbody tr:nth-child(odd),
body.template_togglebox #content-cloud .interface-table tbody tr:nth-child(odd),
body.template_togglebox #content-cloud .ip-table tbody tr:nth-child(odd),
body.template_togglebox #content-cloud .backup-schedule-table tbody tr:nth-child(odd),
body.template_togglebox #content-cloud .snapshot-schedule-table tbody tr:nth-child(odd),
body.template_togglebox #content-cloud .task-history-table tbody tr:nth-child(odd),
body.template_togglebox #content-cloud .autoscaling-rules-table tbody tr:nth-child(odd),
body.template_togglebox #content-cloud .firewall-rules-table tbody tr:nth-child(odd),
body.template_togglebox #content-cloud .ssh-keys-table tbody tr:nth-child(odd),
body.template_togglebox #content-cloud .scheduled-actions-table tbody tr:nth-child(odd),
body.template_togglebox #content-cloud .billing-table tbody tr:nth-child(odd),
body.template_togglebox #content-cloud .resources-table tbody tr:nth-child(odd),
body.template_togglebox #content-cloud .overview-table tbody tr:nth-child(odd) {
    background-color: var(--oneb-table-row-odd, #fff) !important;
}

body.template_togglebox #content-cloud .tonapp tbody tr:hover,
body.template_togglebox #content-cloud .data-table tbody tr:hover,
body.template_togglebox #content-cloud [id$="-table"] tbody tr:hover,
body.template_togglebox #content-cloud .metered-usage-table tbody tr:hover,
body.template_togglebox #content-cloud .interface-table tbody tr:hover,
body.template_togglebox #content-cloud .ip-table tbody tr:hover,
body.template_togglebox #content-cloud .backup-schedule-table tbody tr:hover,
body.template_togglebox #content-cloud .snapshot-schedule-table tbody tr:hover,
body.template_togglebox #content-cloud .task-history-table tbody tr:hover,
body.template_togglebox #content-cloud .autoscaling-rules-table tbody tr:hover,
body.template_togglebox #content-cloud .firewall-rules-table tbody tr:hover,
body.template_togglebox #content-cloud .ssh-keys-table tbody tr:hover,
body.template_togglebox #content-cloud .scheduled-actions-table tbody tr:hover,
body.template_togglebox #content-cloud .billing-table tbody tr:hover,
body.template_togglebox #content-cloud .resources-table tbody tr:hover,
body.template_togglebox #content-cloud .overview-table tbody tr:hover {
    background-color: var(--oneb-table-row-hover, #e9ecef) !important;
}

body.template_togglebox #content-cloud #volumes-table tbody tr:nth-child(4n+1):not(.volume-snaps-row) {
    background-color: var(--oneb-table-row-even, #f8f9fa) !important;
}

body.template_togglebox #content-cloud #volumes-table tbody tr:nth-child(4n+3):not(.volume-snaps-row) {
    background-color: var(--oneb-table-row-odd, #fff) !important;
}

body.template_togglebox #content-cloud #volumes-table tbody tr.volume-snaps-row {
    background-color: var(--oneb-table-row-muted, #fafafa) !important;
}

body.template_togglebox #content-cloud #volumes-table tbody tr:hover:not(.volume-snaps-row),
body.template_togglebox #content-cloud #metered-table tbody tr:hover,
body.template_togglebox #content-cloud #metered-table tbody tr:hover td {
    background-color: var(--oneb-table-row-hover, #e9ecef) !important;
}

body.template_togglebox #content-cloud #metered-table tbody tr:nth-child(even),
body.template_togglebox #content-cloud #metered-table tbody tr:nth-child(even) td,
body.template_togglebox #content-cloud #active-tokens-table tbody tr:nth-child(even),
body.template_togglebox #content-cloud #active-tokens-table tbody tr:nth-child(even) td,
body.template_togglebox #content-cloud #templates-table tbody tr:nth-child(even),
body.template_togglebox #content-cloud #templates-table tbody tr:nth-child(even) td,
body.template_togglebox #content-cloud #ssh-keys-table tbody tr:nth-child(even),
body.template_togglebox #content-cloud #ssh-keys-table tbody tr:nth-child(even) td {
    background-color: var(--oneb-table-row-even, #f8f9fa) !important;
}

body.template_togglebox #content-cloud #metered-table tbody tr:nth-child(odd),
body.template_togglebox #content-cloud #metered-table tbody tr:nth-child(odd) td,
body.template_togglebox #content-cloud #active-tokens-table tbody tr:nth-child(odd),
body.template_togglebox #content-cloud #active-tokens-table tbody tr:nth-child(odd) td,
body.template_togglebox #content-cloud #templates-table tbody tr:nth-child(odd),
body.template_togglebox #content-cloud #templates-table tbody tr:nth-child(odd) td,
body.template_togglebox #content-cloud #ssh-keys-table tbody tr:nth-child(odd),
body.template_togglebox #content-cloud #ssh-keys-table tbody tr:nth-child(odd) td {
    background-color: var(--oneb-table-row-odd, #fff) !important;
}

body.template_togglebox #content-cloud .tonapp thead tr,
body.template_togglebox #content-cloud .data-table thead tr,
body.template_togglebox #content-cloud [id$="-table"] thead tr,
body.template_togglebox #content-cloud .metered-usage-table thead tr,
body.template_togglebox #content-cloud .interface-table thead tr,
body.template_togglebox #content-cloud .ip-table thead tr,
body.template_togglebox #content-cloud .backup-schedule-table thead tr,
body.template_togglebox #content-cloud .snapshot-schedule-table thead tr,
body.template_togglebox #content-cloud .task-history-table thead tr,
body.template_togglebox #content-cloud .autoscaling-rules-table thead tr,
body.template_togglebox #content-cloud .firewall-rules-table thead tr,
body.template_togglebox #content-cloud .ssh-keys-table thead tr,
body.template_togglebox #content-cloud .scheduled-actions-table thead tr,
body.template_togglebox #content-cloud .billing-table thead tr,
body.template_togglebox #content-cloud .resources-table thead tr,
body.template_togglebox #content-cloud .overview-table thead tr {
    background-color: var(--oneb-table-head-bg, #f1f3f5) !important;
}

body.template_togglebox #content-cloud table.checker,
body.template_togglebox #content-cloud table.tonapp,
body.template_togglebox #content-cloud table.ttable,
body.template_togglebox #content-cloud table.data-table,
body.template_togglebox #content-cloud table.data-table.backup-list,
body.template_togglebox #content-cloud table.whitetable {
    border-color: var(--oneb-table-cell-border, var(--color-border, #dee2e6)) !important;
}

body.template_togglebox #content-cloud .tonapp tbody tr td,
body.template_togglebox #content-cloud .data-table tbody tr td,
body.template_togglebox #content-cloud [id$="-table"] tbody tr td {
    color: var(--oneb-table-cell-fg, #495057) !important;
    border-bottom-color: var(--oneb-table-cell-border, #dee2e6) !important;
}

/* Tooltips and dropdowns emitted by module files */
body.template_togglebox #content-cloud .schedule-tooltip-content {
    background-color: var(--tooltip-bg, #333) !important;
    color: var(--tooltip-fg, #fff) !important;
    box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,0.15)) !important;
}

body.template_togglebox #content-cloud .schedule-tooltip-content::after {
    border-color: var(--tooltip-bg, #333) transparent transparent transparent !important;
}

/* VM status block and inline placeholder inserted by module JS */
body.template_togglebox #content-cloud #vm-status-container .slick-text-sm {
    background: var(--oneb-status-placeholder-bg, #e9ecef) !important;
    color: var(--oneb-status-placeholder-fg, #495057) !important;
}

body.template_togglebox #content-cloud .vm-status-container .status-text,
body.template_togglebox #content-cloud .vm-status-container > span,
body.template_togglebox #content-cloud .vm-status-container > div {
    color: var(--color-fg-strong, #212529) !important;
    text-shadow: none !important;
}

body.template_togglebox #content-cloud .vm-status-container .btn {
    background: var(--oneb-status-action-bg, #fff) !important;
    color: var(--oneb-status-action-fg, #29A7E6) !important;
    border: 1px solid var(--oneb-status-action-border, #dee2e6) !important;
    box-shadow: none !important;
}

body.template_togglebox #content-cloud .vm-status-container .btn:hover {
    background: var(--color-surface, #f8f9fa) !important;
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.1)) !important;
}

body.template_togglebox #content-cloud .vm-status-container a {
    color: var(--oneb-status-link, #29A7E6) !important;
}

body.template_togglebox #content-cloud .vm-status-container a:hover {
    color: var(--oneb-status-link-hover, #0056b3) !important;
}

/* OpenNebula UI blocks */
body.template_togglebox #content-cloud .opennebula-progress {
    background: var(--oneb-progress-bg, rgba(41, 167, 230, 0.08)) !important;
    border-left-color: var(--oneb-progress-border, #29A7E6) !important;
}

body.template_togglebox #content-cloud .opennebula-message.error {
    background: var(--brand-danger-bg, rgba(217, 37, 46, 0.08)) !important;
    color: var(--brand-danger, #D9252E) !important;
    border-left-color: var(--brand-danger, #D9252E) !important;
}

body.template_togglebox #content-cloud .opennebula-message.success {
    background: var(--brand-success-bg, rgba(45, 199, 107, 0.08)) !important;
    color: var(--brand-success, #2DC76B) !important;
    border-left-color: var(--brand-success, #2DC76B) !important;
}

body.template_togglebox #content-cloud .opennebula-message.info {
    background: var(--brand-primary-bg, rgba(41, 167, 230, 0.08)) !important;
    color: var(--brand-primary, #29A7E6) !important;
    border-left-color: var(--brand-primary, #29A7E6) !important;
}

body.template_togglebox #content-cloud .opennebula-message.warning {
    background: var(--brand-warning-bg, rgba(245, 158, 11, 0.08)) !important;
    color: var(--brand-warning, #F59E0B) !important;
    border-left-color: var(--brand-warning, #F59E0B) !important;
}

body.template_togglebox #content-cloud table tbody tr[hx-get]:hover,
body.template_togglebox #content-cloud table tbody tr[hx-post]:hover {
    background-color: var(--brand-primary-bg, rgba(41, 167, 230, 0.08)) !important;
}

body.template_togglebox #content-cloud .htmx-loading-overlay {
    background: var(--oneb-modal-backdrop, rgba(15, 23, 42, 0.56)) !important;
}

body.template_togglebox #content-cloud .overview-toolbar-card {
    border-color: var(--color-border, #dee2e6) !important;
    background: var(--color-bg-elevated, #fff) !important;
    box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,0.08)) !important;
}

/* Tags modal and editor (loaded on details/templates/volumes pages) */
body.template_togglebox .tag-placeholder {
    color: var(--color-fg-muted, #6c757d) !important;
}

body.template_togglebox .tag-edit-input {
    border-color: var(--color-border, #dee2e6) !important;
    background: var(--color-bg-elevated, #fff) !important;
    color: var(--color-fg, #212529) !important;
}

body.template_togglebox .tag-edit-input:focus {
    border-color: var(--brand-primary, #29A7E6) !important;
    box-shadow: 0 0 0 2px var(--shadow-focus-ring, rgba(41, 167, 230, 0.1)) !important;
}

body.template_togglebox .tag-edit-help {
    color: var(--color-fg-muted, #6c757d) !important;
}

body.template_togglebox .tag-modal {
    background: var(--oneb-modal-backdrop, rgba(15, 23, 42, 0.56)) !important;
}

body.template_togglebox .tag-modal-content {
    background: var(--color-bg-modal, #fff) !important;
    border: 1px solid var(--oneb-modal-border, #dee2e6) !important;
    color: var(--oneb-modal-fg, #212529) !important;
    box-shadow: var(--shadow-lg, 0 8px 24px rgba(0,0,0,0.12)) !important;
}

body.template_togglebox .tag-modal-header,
body.template_togglebox .tag-modal-footer {
    border-color: var(--oneb-modal-border, #dee2e6) !important;
}

body.template_togglebox .tag-modal-close {
    color: var(--oneb-modal-fg-muted, #6c757d) !important;
}

body.template_togglebox .tag-modal-close:hover {
    color: var(--oneb-modal-fg, #212529) !important;
}

body.template_togglebox .current-tags-display {
    border-color: var(--color-border, #dee2e6) !important;
    background: var(--color-surface, #f8f9fa) !important;
}

/* Slider bridge overrides REMOVED — theme is now the single owner
   of all slider styles via slick-components.css. */

/* Mobile menu and card-mode overrides from module responsive.css */
@media (max-width: 1199px) {
    body.template_togglebox #content-cloud #mobile-menu-toggle.mobile-menu-toggle {
        background: var(--oneb-mobile-toggle-bg, rgba(41, 167, 230, 0.92)) !important;
        border-color: var(--oneb-mobile-toggle-border, rgba(255,255,255,0.52)) !important;
        color: var(--oneb-mobile-toggle-fg, #fff) !important;
        box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,0.15)) !important;
    }

    body.template_togglebox #content-cloud #mobile-menu-toggle.mobile-menu-toggle span {
        background: var(--oneb-mobile-toggle-fg, #fff) !important;
    }

    body.template_togglebox #content-cloud .cloud-nav ul.level-1.mobile-menu-open,
    body.template_togglebox #content-cloud ul.level-1.mobile-menu-open {
        background: var(--oneb-mobile-menu-bg, #fff) !important;
        border-color: var(--oneb-mobile-menu-border, #dee2e6) !important;
        box-shadow: var(--shadow-lg, 0 8px 24px rgba(0,0,0,0.12)) !important;
    }

    body.template_togglebox #content-cloud ul.level-1.mobile-menu-open li {
        border-bottom-color: var(--oneb-mobile-menu-border, #dee2e6) !important;
    }

    body.template_togglebox #content-cloud ul.level-1.mobile-menu-open li a {
        color: var(--oneb-mobile-menu-link, #212529) !important;
    }

    body.template_togglebox #content-cloud ul.level-1.mobile-menu-open li a:hover {
        background: var(--oneb-mobile-menu-link-hover-bg, #f8f9fa) !important;
        color: var(--oneb-mobile-menu-link-hover-fg, #111827) !important;
    }

    body.template_togglebox #content-cloud ul.level-1.mobile-menu-open li.current-menu-item a,
    body.template_togglebox #content-cloud ul.level-1.mobile-menu-open li.menu-item.current-menu-item a {
        background: var(--oneb-mobile-menu-current-bg, #29A7E6) !important;
        color: var(--oneb-mobile-menu-current-fg, #fff) !important;
    }
}

@media (max-width: 768px) {
    body.template_togglebox #content-cloud .cloud-nav ul.level-1 li a {
        background: var(--oneb-mobile-menu-link-hover-bg, #f8f9fa) !important;
        color: var(--oneb-mobile-menu-link, #212529) !important;
    }

    body.template_togglebox #content-cloud .cloud-nav ul.level-1 li.current-menu-item a {
        background: var(--oneb-mobile-menu-current-bg, #29A7E6) !important;
        color: var(--oneb-mobile-menu-current-fg, #fff) !important;
    }

    body.template_togglebox #content-cloud .cloud-nav ul.level-1 li a:hover {
        background: var(--oneb-mobile-menu-link-hover-bg, #f8f9fa) !important;
        color: var(--oneb-mobile-menu-link-hover-fg, #111827) !important;
    }
}

@media (max-width: 480px) {
    body.template_togglebox #content-cloud #instances-table tr.vm-row {
        border-color: var(--color-border, #dee2e6) !important;
        background: var(--color-bg-elevated, #fff) !important;
    }

    body.template_togglebox #content-cloud #instances-table tr.vm-row td.oneb-col-ip::before,
    body.template_togglebox #content-cloud #instances-table tr.vm-row td.oneb-col-status::before {
        color: var(--color-fg-muted, #6c757d) !important;
    }
}