/**
 * Initech Dark Theme - ModulesGarden Module Overrides
 * Supports: Vultr (#layers2), Proxmox (#layers), Hetzner, DigitalOcean, AWS, etc.
 */

/* =============================================================================
   CRITICAL CSS - Prevent FOUC (Flash of Unstyled Content)
   This must load first to prevent white flash
   ============================================================================= */

#layers,
#layers2,
#layers .lu-app,
#layers2 .lu-app,
.mg-wrapper.clientarea,
.full-screen-module-container {
    background: transparent !important;
    opacity: 1 !important;
}

/* Hide content until Vue loads, then fade in */
#layers .lu-app-main,
#layers2 .lu-app-main {
    background: transparent !important;
}

#layers .lu-app-main__body,
#layers2 .lu-app-main__body {
    background: transparent !important;
    padding: 0 !important;
}

/* =============================================================================
   SERVICE MANAGEMENT WIDGETS - Complete Overhaul
   ============================================================================= */

/* Widget Container */
#layers .lu-widget,
#layers2 .lu-widget,
#layers .lu-panel,
#layers2 .lu-panel,
#layers .lu-card,
#layers2 .lu-card {
    background: rgba(13, 13, 13, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
    margin-bottom: 20px !important;
    overflow: hidden !important;
}

/* Widget Header - Section Titles like "Service Management", "Actions", etc. */
#layers .lu-widget__header,
#layers2 .lu-widget__header,
#layers .lu-panel__header,
#layers2 .lu-panel__header,
#layers .lu-card__header,
#layers2 .lu-card__header {
    background: linear-gradient(180deg, rgba(20, 20, 20, 0.9) 0%, rgba(15, 15, 15, 0.9) 100%) !important;
    border-bottom: 1px solid rgba(255, 51, 51, 0.2) !important;
    padding: 14px 20px !important;
    position: relative !important;
}

/* Red accent bar on headers */
#layers .lu-widget__header::before,
#layers2 .lu-widget__header::before,
#layers .lu-panel__header::before,
#layers2 .lu-panel__header::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 3px !important;
    background: #ff3333 !important;
}

/* Header Titles */
#layers .lu-widget__header .lu-widget__header__title,
#layers2 .lu-widget__header .lu-widget__header__title,
#layers .lu-widget__title,
#layers2 .lu-widget__title,
#layers .lu-panel__header__title,
#layers2 .lu-panel__header__title,
#layers h2,
#layers2 h2 {
    color: #e5e5e5 !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    margin: 0 !important;
}

/* Widget Body */
#layers .lu-widget__body,
#layers2 .lu-widget__body,
#layers .lu-panel__body,
#layers2 .lu-panel__body,
#layers .lu-card__body,
#layers2 .lu-card__body {
    background: transparent !important;
    padding: 16px 20px !important;
}

/* =============================================================================
   ACTION BUTTONS - Start, Stop, Reboot, Console, etc.
   ============================================================================= */

/* Button Grid Container */
#layers .lu-widget__body .lu-row,
#layers2 .lu-widget__body .lu-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin: 0 !important;
}

/* All Buttons Base */
#layers .lu-btn,
#layers2 .lu-btn {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 10px 16px !important;
    border-radius: 4px !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    text-decoration: none !important;
    cursor: pointer !important;
    white-space: nowrap !important;
}

/* Primary Action Buttons (Power actions) */
#layers .lu-btn--primary,
#layers2 .lu-btn--primary {
    background: rgba(255, 51, 51, 0.1) !important;
    border: 1px solid rgba(255, 51, 51, 0.4) !important;
    color: #ff5555 !important;
}

#layers .lu-btn--primary:hover,
#layers2 .lu-btn--primary:hover {
    background: rgba(255, 51, 51, 0.2) !important;
    border-color: #ff5555 !important;
    color: #ff7777 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(255, 51, 51, 0.2) !important;
}

/* Success Buttons (Start, Power On) */
#layers .lu-btn--success,
#layers2 .lu-btn--success {
    background: rgba(34, 197, 94, 0.1) !important;
    border: 1px solid rgba(34, 197, 94, 0.4) !important;
    color: #22c55e !important;
}

#layers .lu-btn--success:hover,
#layers2 .lu-btn--success:hover {
    background: rgba(34, 197, 94, 0.2) !important;
    border-color: #22c55e !important;
    color: #4ade80 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.2) !important;
}

/* Danger Buttons (Stop, Shutdown) */
#layers .lu-btn--danger,
#layers2 .lu-btn--danger {
    background: rgba(239, 68, 68, 0.1) !important;
    border: 1px solid rgba(239, 68, 68, 0.4) !important;
    color: #ef4444 !important;
}

#layers .lu-btn--danger:hover,
#layers2 .lu-btn--danger:hover {
    background: rgba(239, 68, 68, 0.2) !important;
    border-color: #ef4444 !important;
    color: #f87171 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2) !important;
}

/* Warning Buttons (Reboot, Restart) */
#layers .lu-btn--warning,
#layers2 .lu-btn--warning {
    background: rgba(245, 158, 11, 0.1) !important;
    border: 1px solid rgba(245, 158, 11, 0.4) !important;
    color: #f59e0b !important;
}

#layers .lu-btn--warning:hover,
#layers2 .lu-btn--warning:hover {
    background: rgba(245, 158, 11, 0.2) !important;
    border-color: #f59e0b !important;
    color: #fbbf24 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.2) !important;
}

/* Info Buttons (Console, VNC) */
#layers .lu-btn--info,
#layers2 .lu-btn--info {
    background: rgba(59, 130, 246, 0.1) !important;
    border: 1px solid rgba(59, 130, 246, 0.4) !important;
    color: #3b82f6 !important;
}

#layers .lu-btn--info:hover,
#layers2 .lu-btn--info:hover {
    background: rgba(59, 130, 246, 0.2) !important;
    border-color: #3b82f6 !important;
    color: #60a5fa !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2) !important;
}

/* Default/Secondary Buttons */
#layers .lu-btn--default,
#layers2 .lu-btn--default,
#layers .lu-btn--secondary,
#layers2 .lu-btn--secondary {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #999 !important;
}

#layers .lu-btn--default:hover,
#layers2 .lu-btn--default:hover,
#layers .lu-btn--secondary:hover,
#layers2 .lu-btn--secondary:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #e5e5e5 !important;
    transform: translateY(-1px) !important;
}

/* Link Buttons */
#layers .lu-btn--link,
#layers2 .lu-btn--link {
    background: transparent !important;
    border: none !important;
    color: #ff3333 !important;
    padding: 8px 12px !important;
}

#layers .lu-btn--link:hover,
#layers2 .lu-btn--link:hover {
    color: #ff5555 !important;
    text-decoration: underline !important;
}

/* Button Icons */
#layers .lu-btn .lu-btn__icon,
#layers2 .lu-btn .lu-btn__icon,
#layers .lu-btn .lu-icon,
#layers2 .lu-btn .lu-icon,
#layers .lu-btn i,
#layers2 .lu-btn i {
    font-size: 14px !important;
    opacity: 0.9 !important;
}

/* =============================================================================
   INFORMATION LIST - Status, Hostname, CPU, Memory, etc.
   ============================================================================= */

#layers .lu-list--info,
#layers2 .lu-list--info {
    margin: 0 !important;
    padding: 0 !important;
}

#layers .lu-list--info .lu-list__item,
#layers2 .lu-list--info .lu-list__item {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
    gap: 16px !important;
}

#layers .lu-list--info .lu-list__item:last-child,
#layers2 .lu-list--info .lu-list__item:last-child {
    border-bottom: none !important;
}

/* Info Labels (left side) */
#layers .lu-list--info .lu-list__title,
#layers2 .lu-list--info .lu-list__title,
#layers .lu-list--info .lu-list__label,
#layers2 .lu-list--info .lu-list__label {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: #666 !important;
    flex-shrink: 0 !important;
    min-width: 120px !important;
}

/* Info Values (right side) */
#layers .lu-list--info .lu-list__value,
#layers2 .lu-list--info .lu-list__value {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #e5e5e5 !important;
    text-align: right !important;
    word-break: break-word !important;
}

/* Status Values - Running/Stopped coloring */
#layers .lu-list--info .lu-list__value .lu-badge--success,
#layers2 .lu-list--info .lu-list__value .lu-badge--success,
#layers .lu-list--info .lu-list__value .status-running,
#layers2 .lu-list--info .lu-list__value .status-running {
    color: #22c55e !important;
}

#layers .lu-list--info .lu-list__value .lu-badge--danger,
#layers2 .lu-list--info .lu-list__value .lu-badge--danger,
#layers .lu-list--info .lu-list__value .status-stopped,
#layers2 .lu-list--info .lu-list__value .status-stopped {
    color: #ef4444 !important;
}

/* =============================================================================
   TABLES - IP Addresses, Network Info, etc.
   ============================================================================= */

#layers .lu-table,
#layers2 .lu-table,
#layers table,
#layers2 table {
    width: 100% !important;
    border-collapse: collapse !important;
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 6px !important;
    overflow: hidden !important;
}

#layers .lu-table thead,
#layers2 .lu-table thead,
#layers table thead,
#layers2 table thead {
    background: rgba(5, 5, 5, 0.8) !important;
}

#layers .lu-table th,
#layers2 .lu-table th,
#layers table th,
#layers2 table th {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: #666 !important;
    padding: 12px 16px !important;
    text-align: left !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: rgba(5, 5, 5, 0.8) !important;
}

#layers .lu-table td,
#layers2 .lu-table td,
#layers table td,
#layers2 table td {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 13px !important;
    color: #e5e5e5 !important;
    padding: 12px 16px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
    background: transparent !important;
}

#layers .lu-table tbody tr:hover td,
#layers2 .lu-table tbody tr:hover td,
#layers table tbody tr:hover td,
#layers2 table tbody tr:hover td {
    background: rgba(255, 255, 255, 0.02) !important;
}

#layers .lu-table tbody tr:last-child td,
#layers2 .lu-table tbody tr:last-child td {
    border-bottom: none !important;
}

/* =============================================================================
   NAVIGATION - Sidebar Menu Items
   ============================================================================= */

#layers .lu-nav,
#layers2 .lu-nav,
#layers .lu-navbar,
#layers2 .lu-navbar {
    background: transparent !important;
}

#layers .lu-nav__item,
#layers2 .lu-nav__item {
    margin-bottom: 2px !important;
}

#layers .lu-nav__link,
#layers2 .lu-nav__link {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: #888 !important;
    padding: 10px 16px !important;
    border-radius: 4px !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    text-decoration: none !important;
}

#layers .lu-nav__link:hover,
#layers2 .lu-nav__link:hover {
    color: #e5e5e5 !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

#layers .lu-nav__item.is-active .lu-nav__link,
#layers2 .lu-nav__item.is-active .lu-nav__link,
#layers .lu-nav__link.is-active,
#layers2 .lu-nav__link.is-active {
    color: #ff3333 !important;
    background: rgba(255, 51, 51, 0.08) !important;
    border-left: 3px solid #ff3333 !important;
    padding-left: 13px !important;
}

/* =============================================================================
   TABS
   ============================================================================= */

#layers .lu-tabs,
#layers2 .lu-tabs {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    margin-bottom: 20px !important;
    display: flex !important;
    gap: 4px !important;
}

#layers .lu-tabs__item,
#layers2 .lu-tabs__item {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: #888 !important;
    padding: 12px 20px !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

#layers .lu-tabs__item:hover,
#layers2 .lu-tabs__item:hover {
    color: #e5e5e5 !important;
}

#layers .lu-tabs__item.is-active,
#layers2 .lu-tabs__item.is-active {
    color: #ff3333 !important;
    border-bottom-color: #ff3333 !important;
}

/* =============================================================================
   FORMS & INPUTS
   ============================================================================= */

#layers .lu-form-group label,
#layers2 .lu-form-group label,
#layers .lu-input__label,
#layers2 .lu-input__label {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: #888 !important;
    margin-bottom: 8px !important;
}

#layers .lu-input,
#layers2 .lu-input,
#layers .lu-input__element,
#layers2 .lu-input__element,
#layers input[type="text"],
#layers2 input[type="text"],
#layers input[type="password"],
#layers2 input[type="password"],
#layers input[type="number"],
#layers2 input[type="number"],
#layers select,
#layers2 select,
#layers textarea,
#layers2 textarea {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 13px !important;
    color: #e5e5e5 !important;
    background: rgba(0, 0, 0, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 4px !important;
    padding: 10px 14px !important;
    transition: all 0.2s ease !important;
}

#layers .lu-input:focus,
#layers2 .lu-input:focus,
#layers input:focus,
#layers2 input:focus,
#layers select:focus,
#layers2 select:focus,
#layers textarea:focus,
#layers2 textarea:focus {
    outline: none !important;
    border-color: #ff3333 !important;
    box-shadow: 0 0 0 3px rgba(255, 51, 51, 0.15) !important;
}

#layers input::placeholder,
#layers2 input::placeholder {
    color: #555 !important;
}

/* =============================================================================
   MODALS
   ============================================================================= */

#layers .lu-modal__overlay,
#layers2 .lu-modal__overlay {
    background: rgba(0, 0, 0, 0.85) !important;
    backdrop-filter: blur(4px) !important;
}

#layers .lu-modal__dialog,
#layers2 .lu-modal__dialog {
    background: #111 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6) !important;
}

#layers .lu-modal__header,
#layers2 .lu-modal__header {
    background: rgba(5, 5, 5, 0.9) !important;
    border-bottom: 1px solid rgba(255, 51, 51, 0.2) !important;
    padding: 16px 24px !important;
}

#layers .lu-modal__title,
#layers2 .lu-modal__title {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: #e5e5e5 !important;
}

#layers .lu-modal__body,
#layers2 .lu-modal__body {
    background: #111 !important;
    color: #e5e5e5 !important;
    padding: 24px !important;
}

#layers .lu-modal__footer,
#layers2 .lu-modal__footer,
#layers .lu-modal__actions,
#layers2 .lu-modal__actions {
    background: rgba(5, 5, 5, 0.6) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    padding: 16px 24px !important;
    display: flex !important;
    gap: 12px !important;
    justify-content: flex-end !important;
}

#layers .lu-modal__close,
#layers2 .lu-modal__close {
    color: #666 !important;
    transition: color 0.2s ease !important;
}

#layers .lu-modal__close:hover,
#layers2 .lu-modal__close:hover {
    color: #e5e5e5 !important;
}

/* =============================================================================
   ALERTS & NOTIFICATIONS
   ============================================================================= */

#layers .lu-alert,
#layers2 .lu-alert {
    border-radius: 6px !important;
    padding: 14px 18px !important;
    margin-bottom: 16px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

#layers .lu-alert--success,
#layers2 .lu-alert--success {
    background: rgba(34, 197, 94, 0.1) !important;
    border: 1px solid rgba(34, 197, 94, 0.3) !important;
    color: #22c55e !important;
}

#layers .lu-alert--danger,
#layers2 .lu-alert--danger,
#layers .lu-alert--error,
#layers2 .lu-alert--error {
    background: rgba(239, 68, 68, 0.1) !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
    color: #ef4444 !important;
}

#layers .lu-alert--warning,
#layers2 .lu-alert--warning {
    background: rgba(245, 158, 11, 0.1) !important;
    border: 1px solid rgba(245, 158, 11, 0.3) !important;
    color: #f59e0b !important;
}

#layers .lu-alert--info,
#layers2 .lu-alert--info {
    background: rgba(59, 130, 246, 0.1) !important;
    border: 1px solid rgba(59, 130, 246, 0.3) !important;
    color: #3b82f6 !important;
}

/* =============================================================================
   BADGES & STATUS INDICATORS
   ============================================================================= */

#layers .lu-badge,
#layers2 .lu-badge,
#layers .lu-tag,
#layers2 .lu-tag {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 9px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    padding: 4px 10px !important;
    border-radius: 4px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

#layers .lu-badge--success,
#layers2 .lu-badge--success {
    background: rgba(34, 197, 94, 0.15) !important;
    color: #22c55e !important;
}

#layers .lu-badge--danger,
#layers2 .lu-badge--danger {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #ef4444 !important;
}

#layers .lu-badge--warning,
#layers2 .lu-badge--warning {
    background: rgba(245, 158, 11, 0.15) !important;
    color: #f59e0b !important;
}

#layers .lu-badge--info,
#layers2 .lu-badge--info {
    background: rgba(59, 130, 246, 0.15) !important;
    color: #3b82f6 !important;
}

#layers .lu-badge--default,
#layers2 .lu-badge--default {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #888 !important;
}

/* Status text coloring */
#layers .status-running,
#layers2 .status-running,
#layers .instance-status-running,
#layers2 .instance-status-running {
    color: #22c55e !important;
}

#layers .status-stopped,
#layers2 .status-stopped,
#layers .instance-status-stopped,
#layers2 .instance-status-stopped {
    color: #ef4444 !important;
}

#layers .status-pending,
#layers2 .status-pending,
#layers .instance-status-installing,
#layers2 .instance-status-installing {
    color: #f59e0b !important;
}

/* =============================================================================
   PROGRESS BARS
   ============================================================================= */

#layers .lu-progress,
#layers2 .lu-progress {
    height: 6px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border-radius: 3px !important;
    overflow: hidden !important;
}

#layers .lu-progress__bar,
#layers2 .lu-progress__bar {
    height: 100% !important;
    background: #ff3333 !important;
    border-radius: 3px !important;
    transition: width 0.3s ease !important;
}

#layers .lu-progress__bar--success,
#layers2 .lu-progress__bar--success {
    background: #22c55e !important;
}

#layers .lu-progress__bar--warning,
#layers2 .lu-progress__bar--warning {
    background: #f59e0b !important;
}

#layers .lu-progress__bar--danger,
#layers2 .lu-progress__bar--danger {
    background: #ef4444 !important;
}

/* =============================================================================
   DROPDOWNS
   ============================================================================= */

#layers .lu-dropdown,
#layers2 .lu-dropdown,
#layers .lu-drop-element,
#layers2 .lu-drop-element {
    background: #151515 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 6px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
    padding: 6px !important;
}

#layers .lu-dropdown__item,
#layers2 .lu-dropdown__item {
    padding: 10px 14px !important;
    border-radius: 4px !important;
    color: #e5e5e5 !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 12px !important;
    transition: all 0.15s ease !important;
    cursor: pointer !important;
}

#layers .lu-dropdown__item:hover,
#layers2 .lu-dropdown__item:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #fff !important;
}

#layers .lu-dropdown__divider,
#layers2 .lu-dropdown__divider {
    border-color: rgba(255, 255, 255, 0.06) !important;
    margin: 6px 0 !important;
}

/* =============================================================================
   PRELOADERS & SPINNERS
   ============================================================================= */

#layers .lu-preloader:before,
#layers2 .lu-preloader:before,
#layers .page_processing,
#layers2 .page_processing {
    border-color: rgba(255, 51, 51, 0.2) !important;
    border-top-color: #ff3333 !important;
}

/* =============================================================================
   TYPOGRAPHY OVERRIDES
   ============================================================================= */

#layers,
#layers2 {
    color: #e5e5e5 !important;
}

#layers h1, #layers h2, #layers h3, #layers h4, #layers h5, #layers h6,
#layers2 h1, #layers2 h2, #layers2 h3, #layers2 h4, #layers2 h5, #layers2 h6 {
    color: #e5e5e5 !important;
    font-family: 'JetBrains Mono', monospace !important;
}

#layers p, #layers span, #layers label,
#layers2 p, #layers2 span, #layers2 label {
    color: #e5e5e5 !important;
}

#layers a:not(.lu-btn),
#layers2 a:not(.lu-btn) {
    color: #ff3333 !important;
    transition: color 0.2s ease !important;
}

#layers a:not(.lu-btn):hover,
#layers2 a:not(.lu-btn):hover {
    color: #ff5555 !important;
}

#layers .lu-text-muted,
#layers2 .lu-text-muted {
    color: #666 !important;
}

#layers .lu-text-secondary,
#layers2 .lu-text-secondary {
    color: #999 !important;
}

/* =============================================================================
   CONSOLE / VNC STYLING
   ============================================================================= */

#layers .novnc-container,
#layers2 .novnc-container,
.novnc-wrapper {
    background: #000 !important;
    border: 1px solid #333 !important;
    border-radius: 4px !important;
}

#layers .console-container,
#layers2 .console-container,
#layers .terminal-container,
#layers2 .terminal-container {
    background: #000 !important;
    border: 1px solid #333 !important;
}

/* =============================================================================
   GRID LAYOUT FIXES
   ============================================================================= */

#layers .lu-row,
#layers2 .lu-row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

#layers .lu-col,
#layers2 .lu-col,
#layers [class*="lu-col-"],
#layers2 [class*="lu-col-"] {
    padding-left: 10px !important;
    padding-right: 10px !important;
}

#layers .lu-container,
#layers2 .lu-container {
    background: transparent !important;
    padding: 0 !important;
}

/* =============================================================================
   SCROLLBARS
   ============================================================================= */

#layers ::-webkit-scrollbar,
#layers2 ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

#layers ::-webkit-scrollbar-track,
#layers2 ::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
}

#layers ::-webkit-scrollbar-thumb,
#layers2 ::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 4px;
}

#layers ::-webkit-scrollbar-thumb:hover,
#layers2 ::-webkit-scrollbar-thumb:hover {
    background: #444;
}

/* =============================================================================
   WHITE BACKGROUND OVERRIDES
   ============================================================================= */

#layers [style*="background: white"],
#layers2 [style*="background: white"],
#layers [style*="background-color: white"],
#layers2 [style*="background-color: white"],
#layers [style*="background:#fff"],
#layers2 [style*="background:#fff"],
#layers [style*="background-color:#fff"],
#layers2 [style*="background-color:#fff"],
#layers [style*="background: #fff"],
#layers2 [style*="background: #fff"],
#layers [style*="background-color: #fff"],
#layers2 [style*="background-color: #fff"] {
    background: #111 !important;
}

#layers .lu-bg-default,
#layers2 .lu-bg-default,
#layers .lu-bg-white,
#layers2 .lu-bg-white {
    background: rgba(13, 13, 13, 0.6) !important;
}

#layers .lu-bg-transparent,
#layers2 .lu-bg-transparent {
    background: transparent !important;
}

/* =============================================================================
   FIX: NESTED BOX ISSUE - Remove outer panel borders for module section
   ============================================================================= */

/* Remove borders from outer panel when it contains module output */
.initech-pd-panel-module {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Keep the panel header styled but attach it to content */
.initech-pd-panel-module .initech-pd-panel-header {
    background: linear-gradient(180deg, rgba(20, 20, 20, 0.95) 0%, rgba(15, 15, 15, 0.95) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-bottom: 1px solid rgba(255, 51, 51, 0.2) !important;
    border-radius: 12px 12px 0 0 !important;
    padding: 16px 24px !important;
    margin-bottom: 0 !important;
    position: relative !important;
}

/* Red accent bar on module header */
.initech-pd-panel-module .initech-pd-panel-header::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 3px !important;
    background: #ff3333 !important;
    border-radius: 12px 0 0 0 !important;
}

.initech-pd-panel-module .initech-pd-panel-header span {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    color: #e5e5e5 !important;
}

.initech-pd-panel-module .initech-pd-panel-header svg {
    color: #ff3333 !important;
    opacity: 0.8 !important;
}

/* Module body - seamless with header */
.initech-pd-panel-module .initech-pd-panel-body {
    background: rgba(13, 13, 13, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-top: none !important;
    border-radius: 0 0 12px 12px !important;
    padding: 20px !important;
}

/* Remove borders from inner widget containers - they're already in the styled body */
.initech-pd-panel-module #layers .lu-widget,
.initech-pd-panel-module #layers2 .lu-widget,
.initech-pd-panel-module #layers .lu-panel,
.initech-pd-panel-module #layers2 .lu-panel {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin-bottom: 0 !important;
}

/* Style widget headers as section dividers instead of card headers */
.initech-pd-panel-module #layers .lu-widget__header,
.initech-pd-panel-module #layers2 .lu-widget__header {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    padding: 0 0 12px 0 !important;
    margin-bottom: 16px !important;
}

.initech-pd-panel-module #layers .lu-widget__header::before,
.initech-pd-panel-module #layers2 .lu-widget__header::before {
    display: none !important;
}

.initech-pd-panel-module #layers .lu-widget__body,
.initech-pd-panel-module #layers2 .lu-widget__body {
    padding: 0 !important;
}

/* IP Addresses table - add subtle background since it's inside the module body */
.initech-pd-panel-module #layers .vueDatatableTable,
.initech-pd-panel-module #layers2 .vueDatatableTable {
    background: rgba(0, 0, 0, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.04) !important;
    border-radius: 8px !important;
    margin-top: 20px !important;
    overflow: hidden !important;
}

.initech-pd-panel-module #layers .vueDatatableTable .lu-widget__header,
.initech-pd-panel-module #layers2 .vueDatatableTable .lu-widget__header {
    background: rgba(5, 5, 5, 0.5) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    padding: 12px 16px !important;
    margin-bottom: 0 !important;
}

/* Information widget - add subtle background */
.initech-pd-panel-module #layers #serviceInformationDataTable .lu-widget,
.initech-pd-panel-module #layers2 #serviceInformationDataTable .lu-widget {
    background: rgba(0, 0, 0, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.04) !important;
    border-radius: 8px !important;
    padding: 16px !important;
    margin-top: 8px !important;
}

.initech-pd-panel-module #layers #serviceInformationDataTable .lu-widget__header,
.initech-pd-panel-module #layers2 #serviceInformationDataTable .lu-widget__header {
    padding: 0 0 12px 0 !important;
    margin-bottom: 12px !important;
}

.initech-pd-panel-module #layers #serviceInformationDataTable .lu-widget__body,
.initech-pd-panel-module #layers2 #serviceInformationDataTable .lu-widget__body {
    padding: 0 !important;
}

/* =============================================================================
   PROXMOX/MG MODULE - TILE ACTION BUTTONS (Start, Stop, Reboot, Console, etc.)
   ============================================================================= */

/* Section Headers - "Actions", "Additional Tools" */
#layers .h4.lu-m-b-3x,
#layers2 .h4.lu-m-b-3x,
#layers .vue-app-main-container > .h4,
#layers2 .vue-app-main-container > .h4 {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.15em !important;
    color: #ff3333 !important;
    margin: 24px 0 16px 0 !important;
    padding: 0 0 10px 0 !important;
    border-bottom: 1px solid rgba(255, 51, 51, 0.15) !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

#layers .h4.lu-m-b-3x::before,
#layers2 .h4.lu-m-b-3x::before {
    content: '>' !important;
    color: #ff5555 !important;
    font-weight: 700 !important;
}

/* Tile Grid Container */
#layers .lu-tiles,
#layers2 .lu-tiles {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
}

#layers .lu-tiles.lu-row,
#layers2 .lu-tiles.lu-row {
    display: grid !important;
}

/* Individual Column in Tiles */
#layers .lu-tiles [class*="lu-col-"],
#layers2 .lu-tiles [class*="lu-col-"] {
    width: 100% !important;
    max-width: none !important;
    flex: none !important;
    padding: 0 !important;
}

/* Tile Button - The action cards with icons */
#layers .lu-tile--btn,
#layers2 .lu-tile--btn {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(15, 15, 15, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 8px !important;
    padding: 18px 12px !important;
    text-decoration: none !important;
    transition: all 0.25s ease !important;
    cursor: pointer !important;
    min-height: 100px !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Subtle gradient overlay */
#layers .lu-tile--btn::before,
#layers2 .lu-tile--btn::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 2px !important;
    background: linear-gradient(90deg, transparent, rgba(255, 51, 51, 0.3), transparent) !important;
    opacity: 0 !important;
    transition: opacity 0.25s ease !important;
}

#layers .lu-tile--btn:hover,
#layers2 .lu-tile--btn:hover {
    background: rgba(20, 20, 20, 0.95) !important;
    border-color: rgba(255, 51, 51, 0.4) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4), 0 0 20px rgba(255, 51, 51, 0.1) !important;
}

#layers .lu-tile--btn:hover::before,
#layers2 .lu-tile--btn:hover::before {
    opacity: 1 !important;
}

/* Icon Container */
#layers .lu-tile--btn .lu-i-c-6x,
#layers2 .lu-tile--btn .lu-i-c-6x {
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 10px !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Icon Images - Apply grayscale and color on hover */
#layers .lu-tile--btn .lu-i-c-6x img,
#layers2 .lu-tile--btn .lu-i-c-6x img {
    width: 32px !important;
    height: 32px !important;
    object-fit: contain !important;
    filter: brightness(0) invert(0.6) !important;
    transition: filter 0.25s ease, transform 0.25s ease !important;
}

#layers .lu-tile--btn:hover .lu-i-c-6x img,
#layers2 .lu-tile--btn:hover .lu-i-c-6x img {
    filter: brightness(0) invert(0.4) sepia(1) saturate(10) hue-rotate(-10deg) !important;
    transform: scale(1.1) !important;
}

/* Tile Title Text */
#layers .lu-tile__title,
#layers2 .lu-tile__title {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: #888 !important;
    text-align: center !important;
    line-height: 1.3 !important;
    transition: color 0.25s ease !important;
    position: relative !important;
    z-index: 1 !important;
}

#layers .lu-tile--btn:hover .lu-tile__title,
#layers2 .lu-tile--btn:hover .lu-tile__title {
    color: #ff5555 !important;
}

/* Disabled Tile Buttons */
#layers .lu-tile--btn.disabled,
#layers2 .lu-tile--btn.disabled,
#layers .lu-tile--btn[disabled],
#layers2 .lu-tile--btn[disabled] {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

/* =============================================================================
   PROXMOX/MG MODULE - INFORMATION WIDGET
   ============================================================================= */

/* Widget Top Bar (contains title and edit button) */
#layers .lu-widget__top,
#layers2 .lu-widget__top,
#layers .lu-top,
#layers2 .lu-top {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
}

#layers .lu-top__title,
#layers2 .lu-top__title {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    color: #e5e5e5 !important;
}

#layers .lu-top__toolbar,
#layers2 .lu-top__toolbar {
    display: flex !important;
    gap: 8px !important;
}

/* Information Table inside Widget */
#layers .lu-widget__body table:not(.dataTable),
#layers2 .lu-widget__body table:not(.dataTable) {
    width: 100% !important;
    border-collapse: collapse !important;
    border: none !important;
}

#layers .lu-widget__body table:not(.dataTable) tr,
#layers2 .lu-widget__body table:not(.dataTable) tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
}

#layers .lu-widget__body table:not(.dataTable) tr:last-child,
#layers2 .lu-widget__body table:not(.dataTable) tr:last-child {
    border-bottom: none !important;
}

#layers .lu-widget__body table:not(.dataTable) td:first-child,
#layers2 .lu-widget__body table:not(.dataTable) td:first-child {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: #666 !important;
    padding: 12px 16px 12px 0 !important;
    white-space: nowrap !important;
    width: 140px !important;
    vertical-align: top !important;
}

#layers .lu-widget__body table:not(.dataTable) td:last-child,
#layers2 .lu-widget__body table:not(.dataTable) td:last-child {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #e5e5e5 !important;
    padding: 12px 0 !important;
    word-break: break-word !important;
}

/* Status Badge in Info Table */
#layers .lu-label--status,
#layers2 .lu-label--status {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 9px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    padding: 5px 12px !important;
    border-radius: 4px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

#layers .lu-label--success,
#layers2 .lu-label--success {
    background: rgba(34, 197, 94, 0.15) !important;
    color: #22c55e !important;
    border: 1px solid rgba(34, 197, 94, 0.3) !important;
}

#layers .lu-label--danger,
#layers2 .lu-label--danger {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #ef4444 !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
}

#layers .lu-label--warning,
#layers2 .lu-label--warning {
    background: rgba(245, 158, 11, 0.15) !important;
    color: #f59e0b !important;
    border: 1px solid rgba(245, 158, 11, 0.3) !important;
}

/* Pulsing dot animation for running status */
#layers .lu-label--success::before,
#layers2 .lu-label--success::before {
    content: '' !important;
    width: 6px !important;
    height: 6px !important;
    background: #22c55e !important;
    border-radius: 50% !important;
    animation: statusPulse 2s ease-in-out infinite !important;
}

@keyframes statusPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.8); }
}

/* =============================================================================
   PROXMOX/MG MODULE - IP ADDRESSES TABLE (DataTable)
   ============================================================================= */

#layers .vueDatatableTable,
#layers2 .vueDatatableTable {
    background: rgba(13, 13, 13, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    margin-top: 16px !important;
}

#layers .vueDatatableTable .lu-widget__header,
#layers2 .vueDatatableTable .lu-widget__header {
    background: linear-gradient(180deg, rgba(20, 20, 20, 0.9) 0%, rgba(15, 15, 15, 0.9) 100%) !important;
    border-bottom: 1px solid rgba(255, 51, 51, 0.2) !important;
    padding: 14px 20px !important;
}

#layers .dataTables_wrapper,
#layers2 .dataTables_wrapper {
    padding: 0 !important;
}

#layers .dataTable thead th,
#layers2 .dataTable thead th {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 9px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: #666 !important;
    padding: 14px 16px !important;
    background: rgba(5, 5, 5, 0.6) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    white-space: nowrap !important;
}

#layers .dataTable tbody td,
#layers2 .dataTable tbody td {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 12px !important;
    color: #e5e5e5 !important;
    padding: 12px 16px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
    background: transparent !important;
}

#layers .dataTable tbody tr:hover td,
#layers2 .dataTable tbody tr:hover td {
    background: rgba(255, 51, 51, 0.03) !important;
}

#layers .dataTable tbody tr:last-child td,
#layers2 .dataTable tbody tr:last-child td {
    border-bottom: none !important;
}

/* "No Data Available" message */
#layers .dataTables_wrapper > div[style*="text-align: center"],
#layers2 .dataTables_wrapper > div[style*="text-align: center"] {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 11px !important;
    color: #666 !important;
    padding: 24px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.04) !important;
}

/* =============================================================================
   PROXMOX/MG MODULE - TOOLTIP STYLING
   ============================================================================= */

#layers [data-toggle="lu-tooltip"],
#layers2 [data-toggle="lu-tooltip"] {
    position: relative !important;
}

.lu-tooltip,
.drop-element {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 10px !important;
    background: #1a1a1a !important;
    color: #e5e5e5 !important;
    border: 1px solid rgba(255, 51, 51, 0.3) !important;
    border-radius: 4px !important;
    padding: 6px 10px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5) !important;
}

/* =============================================================================
   PROXMOX/MG MODULE - CONTAINER WRAPPER FIXES
   ============================================================================= */

#layers .mg-wrapper,
#layers2 .mg-wrapper {
    background: transparent !important;
}

#layers .full-screen-module-container,
#layers2 .full-screen-module-container {
    background: transparent !important;
    padding: 0 !important;
}

#layers .vue-app-main-container,
#layers2 .vue-app-main-container {
    background: transparent !important;
}

/* Remove any default margins from module */
#layers > .lu-row:first-child,
#layers2 > .lu-row:first-child {
    margin-top: 0 !important;
}

/* =============================================================================
   PROXMOX/MG MODULE - PRELOADER OVERLAY
   ============================================================================= */

#layers .lu-preloader-container--overlay,
#layers2 .lu-preloader-container--overlay {
    background: rgba(0, 0, 0, 0.7) !important;
    backdrop-filter: blur(2px) !important;
}

/* =============================================================================
   PROXMOX/MG MODULE - EDIT VM BUTTON (in widget header)
   ============================================================================= */

#layers .lu-btn--plain,
#layers2 .lu-btn--plain {
    background: transparent !important;
    border: 1px solid transparent !important;
    color: #666 !important;
    padding: 6px 10px !important;
    border-radius: 4px !important;
    transition: all 0.2s ease !important;
}

#layers .lu-btn--plain:hover,
#layers2 .lu-btn--plain:hover {
    background: rgba(255, 51, 51, 0.1) !important;
    border-color: rgba(255, 51, 51, 0.3) !important;
    color: #ff3333 !important;
}

#layers .lu-btn--plain .lu-zmdi,
#layers2 .lu-btn--plain .lu-zmdi {
    font-size: 14px !important;
}

/* =============================================================================
   PROXMOX/MG MODULE - MOBILE RESPONSIVE
   ============================================================================= */

@media (max-width: 768px) {
    #layers .lu-tiles,
    #layers2 .lu-tiles {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    #layers .lu-tile--btn,
    #layers2 .lu-tile--btn {
        min-height: 85px !important;
        padding: 14px 10px !important;
    }

    #layers .lu-tile--btn .lu-i-c-6x img,
    #layers2 .lu-tile--btn .lu-i-c-6x img {
        width: 28px !important;
        height: 28px !important;
    }

    #layers .lu-widget__body table:not(.dataTable) td:first-child,
    #layers2 .lu-widget__body table:not(.dataTable) td:first-child {
        width: auto !important;
        padding-right: 10px !important;
    }
}

@media (max-width: 480px) {
    #layers .lu-tiles,
    #layers2 .lu-tiles {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    #layers .lu-tile__title,
    #layers2 .lu-tile__title {
        font-size: 9px !important;
    }
}