/* =============================================================================
 * Cloudeey – Futuristic AI Dashboard UI
 * Deep-navy + violet + pink/teal/cyan glass theme.
 * Affects sidebar / header / toolbar / dashboard / auth (login/signup/forgot/reset).
 * Pure CSS overlay — no HTML / JS changes, no functional changes.
 * ===========================================================================*/

:root {
    /* Brand */
    --ce-brand:          #1B84FF;
    --ce-brand-rgb:      27, 132, 255;

    /* Futuristic palette */
    --ce-violet:         #8B5CF6;
    --ce-violet-rgb:     139, 92, 246;
    --ce-pink:           #EC4899;
    --ce-pink-rgb:       236, 72, 153;
    --ce-cyan:           #22D3EE;
    --ce-cyan-rgb:       34, 211, 238;
    --ce-teal:           #2DD4BF;
    --ce-teal-rgb:       45, 212, 191;
    --ce-amber:          #F59E0B;
    --ce-green:          #22C55E;

    /* Surfaces */
    --ce-bg-0:           #07091A;
    --ce-bg-1:           #0B0F23;
    --ce-bg-2:           #11152E;
    --ce-surface:        rgba(20, 24, 48, 0.55);
    --ce-surface-hi:     rgba(28, 32, 60, 0.70);
    --ce-stroke:         rgba(255, 255, 255, 0.08);
    --ce-stroke-2:       rgba(255, 255, 255, 0.12);
    --ce-stroke-glow:    rgba(139, 92, 246, 0.25);

    /* Text on dark */
    --ce-text:           #F1F5F9;
    --ce-text-2:         #CBD5E1;
    --ce-text-mute:      #94A3B8;
    --ce-text-mute-2:    #64748B;

    /* Signature gradients */
    --ce-grad-violet:    linear-gradient(135deg, #8B5CF6 0%, #EC4899 100%);
    --ce-grad-teal:      linear-gradient(135deg, #06B6D4 0%, #2DD4BF 100%);
    --ce-grad-blue:      linear-gradient(135deg, #1B84FF 0%, #22D3EE 100%);
    --ce-grad-spark:     linear-gradient(135deg, #1B84FF 0%, #8B5CF6 50%, #EC4899 100%);
    --ce-grad-aurora:    linear-gradient(135deg, #06B6D4 0%, #1B84FF 35%, #8B5CF6 70%, #EC4899 100%);

    /* Shadows */
    --ce-shadow-sm:      0 2px 8px rgba(0, 0, 0, 0.18);
    --ce-shadow-md:      0 14px 30px -10px rgba(0, 0, 0, 0.40), 0 4px 12px rgba(0, 0, 0, 0.18);
    --ce-shadow-lg:      0 30px 60px -20px rgba(0, 0, 0, 0.55), 0 12px 24px -10px rgba(0, 0, 0, 0.25);
    --ce-shadow-glow-v:  0 18px 36px -8px rgba(139, 92, 246, 0.45);
    --ce-shadow-glow-p:  0 18px 36px -8px rgba(236, 72, 153, 0.45);
    --ce-shadow-glow-c:  0 18px 36px -8px rgba(34, 211, 238, 0.45);

    /* Radii */
    --ce-r-xs: 10px;
    --ce-r-sm: 12px;
    --ce-r-md: 16px;
    --ce-r-lg: 22px;
    --ce-r-xl: 28px;

    --ce-ease:        cubic-bezier(0.32, 0.72, 0, 1);
    --ce-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---------------------------------------------------------------------------
 * Global typography refinements
 * -------------------------------------------------------------------------*/
html body {
    font-feature-settings: "cv02", "cv03", "cv04", "cv11", "ss01";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* =============================================================================
 * 0. DASHBOARD APP — Futuristic dark base with ambient aurora orbs
 *    Active whenever the layout shell (#kt_app_body.app-default) is present.
 * =============================================================================*/

body.app-default {
    background-color: var(--ce-bg-0) !important;
    color: var(--ce-text) !important;
    position: relative;
    overflow-x: hidden;
}

/* Aurora ambient layer behind everything.
 * IMPORTANT: z-index: -1 keeps it BELOW the body's normal children
 * (so dashboard content sits naturally above without needing its own
 * stacking-context z-index, which would trap Bootstrap modals.) */
body.app-default::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(50% 40% at 15% 10%, rgba(139, 92, 246, 0.32) 0%, transparent 60%),
        radial-gradient(45% 40% at 90% 0%, rgba(236, 72, 153, 0.20) 0%, transparent 60%),
        radial-gradient(50% 50% at 100% 70%, rgba(34, 211, 238, 0.18) 0%, transparent 60%),
        radial-gradient(60% 50% at 0% 90%, rgba(27, 132, 255, 0.20) 0%, transparent 60%),
        linear-gradient(180deg, var(--ce-bg-0) 0%, var(--ce-bg-1) 100%);
    animation: ce-aurora-shift 28s ease-in-out infinite alternate;
}

/* Subtle dot-grid texture overlay */
body.app-default::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: radial-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: radial-gradient(ellipse at 50% 30%, #000 0%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 0%, transparent 70%);
    opacity: 0.7;
}

@keyframes ce-aurora-shift {
    0%   { filter: hue-rotate(0deg) saturate(1); }
    100% { filter: hue-rotate(28deg) saturate(1.15); }
}

/* Layout containers — position: relative only (no z-index).
 * Adding a z-index here creates a stacking context that traps Bootstrap
 * modals below the modal-backdrop. */
body.app-default #kt_app_root,
body.app-default #kt_app_page,
body.app-default #kt_app_main,
body.app-default #kt_app_content { position: relative; }

/* Make body text light by default inside the futuristic shell */
body.app-default {
    --bs-body-color: var(--ce-text);
}

/* Global text-color remaps INSIDE the dashboard shell so existing
 * Metronic .text-gray-X classes are readable on dark glass */
body.app-default .text-gray-900,
body.app-default .text-gray-800 { color: var(--ce-text) !important; }

body.app-default .text-gray-700,
body.app-default .text-dark      { color: var(--ce-text-2) !important; }

body.app-default .text-gray-600,
body.app-default .text-gray-500 { color: var(--ce-text-mute) !important; }

body.app-default .text-gray-400,
body.app-default .text-muted    { color: var(--ce-text-mute-2) !important; }

/* =============================================================================
 * 1. SIDEBAR — deep glass with violet/pink accents
 * =============================================================================*/

[data-kt-app-layout=dark-sidebar] .app-sidebar {
    background:
        radial-gradient(90% 50% at 50% 0%, rgba(139, 92, 246, 0.18) 0%, transparent 55%),
        radial-gradient(80% 50% at 50% 100%, rgba(236, 72, 153, 0.10) 0%, transparent 55%),
        linear-gradient(180deg, rgba(11, 15, 35, 0.96) 0%, rgba(7, 9, 26, 0.98) 100%) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-right: 1px solid var(--ce-stroke) !important;
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.02);
}

/* Logo area */
[data-kt-app-layout=dark-sidebar] .app-sidebar .app-sidebar-logo {
    border-bottom: 1px solid var(--ce-stroke) !important;
    padding-top: 16px !important;
    padding-bottom: 16px !important;
    position: relative;
}
[data-kt-app-layout=dark-sidebar] .app-sidebar .app-sidebar-logo::after {
    content: "";
    position: absolute;
    left: 24px; right: 24px; bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--ce-violet), var(--ce-pink), transparent);
    opacity: 0.55;
}

/* Toggle button */
.app-sidebar #kt_app_sidebar_toggle {
    background: linear-gradient(180deg, rgba(28, 32, 60, 0.95) 0%, rgba(18, 22, 45, 0.95) 100%) !important;
    border: 1px solid var(--ce-stroke-2) !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transition: transform 0.2s var(--ce-ease-spring), background 0.2s var(--ce-ease), border-color 0.2s var(--ce-ease) !important;
}
.app-sidebar #kt_app_sidebar_toggle:hover {
    border-color: rgba(var(--ce-violet-rgb), 0.55) !important;
    transform: scale(1.06);
    box-shadow: 0 10px 22px rgba(139, 92, 246, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.10);
}
.app-sidebar #kt_app_sidebar_toggle i { color: #E5E7EB !important; }

/* Section headings */
.app-sidebar .menu .menu-heading {
    color: rgba(203, 213, 225, 0.35) !important;
    letter-spacing: 0.18em !important;
    font-size: 10px !important;
    text-transform: uppercase;
    padding: 18px 14px 8px !important;
    font-weight: 700;
}

/* Menu items spacing */
.app-sidebar .menu > .menu-item,
.app-sidebar .menu-sub > .menu-item {
    margin: 1px 8px;
}

/* Menu links */
.app-sidebar .menu .menu-link {
    border-radius: 12px !important;
    padding: 10px 12px !important;
    color: var(--ce-text-mute) !important;
    font-weight: 500 !important;
    transition:
        background-color 0.2s var(--ce-ease),
        color 0.2s var(--ce-ease),
        transform 0.2s var(--ce-ease) !important;
    position: relative;
    overflow: hidden;
}

/* Icon container — futuristic chip */
.app-sidebar .menu .menu-link .menu-icon {
    width: 30px !important;
    height: 30px !important;
    border-radius: 9px;
    margin-right: 6px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: background 0.22s var(--ce-ease), border-color 0.22s var(--ce-ease), box-shadow 0.22s var(--ce-ease), transform 0.22s var(--ce-ease);
}
.app-sidebar .menu .menu-link .menu-icon i {
    font-size: 15px !important;
    color: #94A3B8 !important;
    transition: color 0.22s var(--ce-ease);
}
.app-sidebar .menu .menu-link:hover {
    background-color: rgba(255, 255, 255, 0.045) !important;
    color: #F1F5F9 !important;
}
.app-sidebar .menu .menu-link:hover .menu-icon {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.22), rgba(34, 211, 238, 0.14));
    border-color: rgba(139, 92, 246, 0.45);
    box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.18), 0 6px 14px rgba(139, 92, 246, 0.18);
}
.app-sidebar .menu .menu-link:hover .menu-icon i {
    color: #C4B5FD !important;
}

/* Active state — pink/violet accent (matches reference) */
.app-sidebar .menu .menu-item.here > .menu-link,
.app-sidebar .menu .menu-item.show > .menu-link,
.app-sidebar .menu .menu-item .menu-link.active {
    background: linear-gradient(90deg, rgba(139, 92, 246, 0.18) 0%, rgba(236, 72, 153, 0.06) 100%) !important;
    color: #ffffff !important;
    box-shadow:
        inset 0 0 0 1px rgba(139, 92, 246, 0.30);
}
/* Vibrant accent bar (left side, like reference) */
.app-sidebar .menu .menu-item.here > .menu-link::before,
.app-sidebar .menu .menu-item.show > .menu-link::before,
.app-sidebar .menu .menu-item .menu-link.active::before {
    content: "";
    position: absolute;
    left: -8px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 26px;
    border-radius: 4px;
    background: linear-gradient(180deg, #EC4899 0%, #8B5CF6 100%);
    box-shadow: 0 0 14px rgba(236, 72, 153, 0.65), 0 0 6px rgba(236, 72, 153, 0.55);
}
.app-sidebar .menu .menu-item.here > .menu-link .menu-icon,
.app-sidebar .menu .menu-item.show > .menu-link .menu-icon,
.app-sidebar .menu .menu-item .menu-link.active .menu-icon {
    background: var(--ce-grad-violet);
    border-color: transparent;
    box-shadow: 0 8px 18px rgba(236, 72, 153, 0.45), 0 0 18px rgba(139, 92, 246, 0.45);
}
.app-sidebar .menu .menu-item.here > .menu-link .menu-icon i,
.app-sidebar .menu .menu-item.show > .menu-link .menu-icon i,
.app-sidebar .menu .menu-item .menu-link.active .menu-icon i {
    color: #ffffff !important;
}

/* Glowing dot on active (right side) */
.app-sidebar .menu .menu-item.here > .menu-link::after,
.app-sidebar .menu .menu-item.show > .menu-link::after,
.app-sidebar .menu .menu-item .menu-link.active::after {
    content: "";
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: #F0ABFC;
    box-shadow: 0 0 12px #EC4899, 0 0 4px #F0ABFC;
    animation: ce-dot-pulse 2.4s ease-in-out infinite;
}
@keyframes ce-dot-pulse {
    0%, 100% { opacity: 1; transform: translateY(-50%) scale(1); }
    50%      { opacity: 0.55; transform: translateY(-50%) scale(0.85); }
}

/* Sub-menu bullets */
.app-sidebar .menu .menu-bullet .bullet-dot {
    background-color: rgba(203, 213, 225, 0.22);
    transition: background-color 0.2s var(--ce-ease), transform 0.2s var(--ce-ease), box-shadow 0.2s var(--ce-ease);
}
.app-sidebar .menu .menu-link:hover .menu-bullet .bullet-dot,
.app-sidebar .menu .menu-link.active .menu-bullet .bullet-dot {
    background: linear-gradient(135deg, #EC4899, #8B5CF6);
    transform: scale(1.5);
    box-shadow: 0 0 10px rgba(236, 72, 153, 0.65);
}

/* Sub menus */
.app-sidebar .menu-sub.menu-sub-lg-dropdown {
    border-radius: var(--ce-r-md);
    overflow: hidden;
    background: rgba(15, 18, 38, 0.95) !important;
    border: 1px solid var(--ce-stroke-2);
    box-shadow: var(--ce-shadow-lg);
    backdrop-filter: blur(18px);
}

/* Menu arrow */
.app-sidebar .menu .menu-arrow::after {
    color: rgba(203, 213, 225, 0.30) !important;
    font-size: 12px;
}

/* Badges (Locked, etc.) */
.app-sidebar .menu .badge {
    border-radius: 999px !important;
    font-size: 9.5px !important;
    padding: 3px 8px !important;
    font-weight: 700;
    letter-spacing: 0.04em;
}

/* Hide active glow dot when sidebar minimized */
[data-kt-app-sidebar-minimize=on] .app-sidebar:not(:hover) .menu .menu-link::after {
    display: none !important;
}

/* Sidebar scrollbar */
[data-kt-app-layout=dark-sidebar] .app-sidebar .scroll-y::-webkit-scrollbar-thumb {
    background-color: rgba(139, 92, 246, 0.18) !important;
    border-radius: 999px;
}

/* =============================================================================
 * 2. HEADER — translucent dark glass
 * =============================================================================*/

.app-header {
    background-color: rgba(11, 15, 35, 0.62) !important;
    backdrop-filter: saturate(180%) blur(22px);
    -webkit-backdrop-filter: saturate(180%) blur(22px);
    border-bottom: 1px solid var(--ce-stroke) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.02);
}

/* Header icon buttons */
.app-navbar .btn-icon {
    border-radius: 11px !important;
    background-color: rgba(255, 255, 255, 0.025) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    color: var(--ce-text-2) !important;
    transition:
        background-color 0.22s var(--ce-ease),
        border-color 0.22s var(--ce-ease),
        color 0.22s var(--ce-ease),
        transform 0.18s var(--ce-ease-spring) !important;
}
.app-navbar .btn-icon i,
.app-navbar .btn-icon i [class*="path"] { color: var(--ce-text-2) !important; }
.app-navbar .btn-icon:hover {
    background-color: rgba(139, 92, 246, 0.16) !important;
    border-color: rgba(139, 92, 246, 0.45) !important;
    color: #F0ABFC !important;
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(139, 92, 246, 0.25);
}
.app-navbar .btn-icon:hover i,
.app-navbar .btn-icon:hover i [class*="path"] { color: #F0ABFC !important; }

/* User avatar */
.app-navbar #kt_header_user_menu_toggle { margin-left: 14px !important; }
.app-navbar #kt_header_user_menu_toggle .symbol {
    position: relative;
    transition: transform 0.22s var(--ce-ease-spring);
}
.app-navbar #kt_header_user_menu_toggle .symbol img {
    border-radius: 10px !important;
    box-shadow:
        0 0 0 2px rgba(11, 15, 35, 1),
        0 0 0 3px rgba(139, 92, 246, 0),
        0 6px 14px rgba(0, 0, 0, 0.40);
    transition: box-shadow 0.28s var(--ce-ease);
}
.app-navbar #kt_header_user_menu_toggle:hover .symbol {
    transform: scale(1.06);
}
.app-navbar #kt_header_user_menu_toggle:hover .symbol img {
    box-shadow:
        0 0 0 2px rgba(11, 15, 35, 1),
        0 0 0 4px rgba(236, 72, 153, 0.75),
        0 12px 24px rgba(236, 72, 153, 0.40);
}
/* Online status dot */
.app-navbar #kt_header_user_menu_toggle .symbol::after {
    content: "";
    position: absolute;
    right: -2px; bottom: -2px;
    width: 11px; height: 11px;
    border-radius: 50%;
    background: linear-gradient(135deg, #22C55E, #34D399);
    border: 2px solid rgba(11, 15, 35, 1);
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.7);
}

/* Notification halo */
#kt_menu_item_wow.btn-icon::before {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 14px;
    background: radial-gradient(circle, rgba(236, 72, 153, 0.30), transparent 70%);
    opacity: 0;
    transition: opacity 0.3s var(--ce-ease);
    pointer-events: none;
}
#kt_menu_item_wow.btn-icon:hover::before { opacity: 1; }

/* Mobile sidebar toggle */
#kt_app_sidebar_mobile_toggle {
    border-radius: 11px !important;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.20), rgba(236, 72, 153, 0.16)) !important;
    border: 1px solid rgba(139, 92, 246, 0.35) !important;
    color: #F0ABFC !important;
    transition: all 0.2s var(--ce-ease) !important;
}
#kt_app_sidebar_mobile_toggle:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 18px rgba(236, 72, 153, 0.30);
}
#kt_app_sidebar_mobile_toggle i,
#kt_app_sidebar_mobile_toggle i [class*="path"] { color: #F0ABFC !important; }

/* =============================================================================
 * 3. DROPDOWN MENUS — dark glass
 * =============================================================================*/

.menu.menu-sub.menu-sub-dropdown {
    border-radius: var(--ce-r-md) !important;
    background: rgba(15, 18, 38, 0.92) !important;
    border: 1px solid var(--ce-stroke-2) !important;
    color: var(--ce-text);
    box-shadow: var(--ce-shadow-lg) !important;
    overflow: hidden;
    animation: ce-menu-pop 0.22s var(--ce-ease-spring);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}
@keyframes ce-menu-pop {
    from { opacity: 0; transform: translateY(-8px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.menu.menu-sub.menu-sub-dropdown .menu-link {
    border-radius: 9px !important;
    color: var(--ce-text-2) !important;
    transition: background 0.18s var(--ce-ease), color 0.18s var(--ce-ease), transform 0.18s var(--ce-ease) !important;
}
.menu.menu-sub.menu-sub-dropdown .menu-link .menu-icon i,
.menu.menu-sub.menu-sub-dropdown .menu-link .menu-icon i [class*="path"] {
    color: var(--ce-text-mute) !important;
}
.menu.menu-sub.menu-sub-dropdown .menu-item .menu-link:hover,
.menu.menu-sub.menu-sub-dropdown .menu-item .menu-link.active {
    background: linear-gradient(90deg, rgba(139, 92, 246, 0.20), rgba(34, 211, 238, 0.10)) !important;
    color: #ffffff !important;
    transform: translateX(2px);
}
.menu.menu-sub.menu-sub-dropdown .menu-item .menu-link:hover .menu-icon i,
.menu.menu-sub.menu-sub-dropdown .menu-item .menu-link:hover .menu-icon i [class*="path"] {
    color: #C4B5FD !important;
}
.menu.menu-sub.menu-sub-dropdown .separator {
    margin: 6px 12px !important;
    border-color: var(--ce-stroke) !important;
}

/* User menu — username readable */
.menu.menu-sub.menu-sub-dropdown .menu-content .fw-bold,
.menu.menu-sub.menu-sub-dropdown .menu-content .fs-5 { color: var(--ce-text) !important; }
.menu.menu-sub.menu-sub-dropdown .menu-content .text-muted,
.menu.menu-sub.menu-sub-dropdown .menu-content .fw-semibold.text-muted { color: var(--ce-text-mute) !important; }

/* Metronic menu-gray / menu-title-gray / menu-icon-gray — dark text on dark glass */
body.app-default .menu.menu-sub.menu-sub-dropdown[class*="menu-gray"] .menu-item .menu-link,
body.app-default .menu.menu-sub.menu-sub-dropdown[class*="menu-title-gray"] .menu-item .menu-link,
body.app-default .menu.menu-sub.menu-sub-dropdown[class*="menu-icon-gray"] .menu-item .menu-link,
body.app-default .menu.menu-sub.menu-sub-dropdown .menu-item .menu-link .menu-title,
body.app-default .menu.menu-sub.menu-sub-dropdown .menu-item .menu-link {
    color: var(--ce-text-2) !important;
}
body.app-default .menu.menu-sub.menu-sub-dropdown .menu-item .menu-link .menu-icon,
body.app-default .menu.menu-sub.menu-sub-dropdown .menu-item .menu-link .menu-icon i,
body.app-default .menu.menu-sub.menu-sub-dropdown .menu-item .menu-link .menu-icon .svg-icon,
body.app-default .menu.menu-sub.menu-sub-dropdown[class*="menu-icon-gray"] .menu-item .menu-link .menu-icon i {
    color: var(--ce-text-mute) !important;
}
body.app-default .menu.menu-sub.menu-sub-dropdown .menu-item .menu-link .menu-icon i [class*="path"] {
    color: inherit !important;
    fill: currentColor;
}
body.app-default .menu.menu-sub.menu-sub-dropdown .menu-item .menu-link .menu-arrow:after {
    background-color: var(--ce-text-mute) !important;
}
body.app-default .menu.menu-sub.menu-sub-dropdown .menu-content.text-muted,
body.app-default .menu.menu-sub.menu-sub-dropdown .menu-content .text-muted,
body.app-default .menu.menu-sub.menu-sub-dropdown .menu-item .menu-content {
    color: var(--ce-text-mute) !important;
}

/* Hover / active / show states inside dropdowns */
body.app-default .menu.menu-sub.menu-sub-dropdown[class*="menu-state-bg"] .menu-item .menu-link:hover,
body.app-default .menu.menu-sub.menu-sub-dropdown[class*="menu-state-bg"] .menu-item.show > .menu-link,
body.app-default .menu.menu-sub.menu-sub-dropdown[class*="menu-state-color"] .menu-item .menu-link:hover,
body.app-default .menu.menu-sub.menu-sub-dropdown[class*="menu-active-bg"] .menu-item .menu-link.active {
    background: linear-gradient(90deg, rgba(139, 92, 246, 0.20), rgba(34, 211, 238, 0.10)) !important;
}
body.app-default .menu.menu-sub.menu-sub-dropdown .menu-item .menu-link:hover .menu-title,
body.app-default .menu.menu-sub.menu-sub-dropdown .menu-item .menu-link:hover,
body.app-default .menu.menu-sub.menu-sub-dropdown .menu-item.show > .menu-link .menu-title,
body.app-default .menu.menu-sub.menu-sub-dropdown .menu-item.show > .menu-link,
body.app-default .menu.menu-sub.menu-sub-dropdown .menu-item .menu-link.active .menu-title,
body.app-default .menu.menu-sub.menu-sub-dropdown .menu-item .menu-link.active {
    color: #ffffff !important;
}
body.app-default .menu.menu-sub.menu-sub-dropdown .menu-item .menu-link:hover .menu-icon i,
body.app-default .menu.menu-sub.menu-sub-dropdown .menu-item.show > .menu-link .menu-icon i,
body.app-default .menu.menu-sub.menu-sub-dropdown .menu-item .menu-link.active .menu-icon i {
    color: #C4B5FD !important;
}

/* Nested sub-dropdowns inside header menus */
body.app-default .menu.menu-sub.menu-sub-dropdown .menu-sub.menu-sub-dropdown {
    background: rgba(11, 14, 32, 0.98) !important;
    border: 1px solid var(--ce-stroke-2) !important;
}

/* Bootstrap dropdown menus (e.g. user actions tables) */
body.app-default .dropdown-menu {
    background: rgba(15, 18, 38, 0.95) !important;
    border: 1px solid var(--ce-stroke-2) !important;
    color: var(--ce-text) !important;
    box-shadow: var(--ce-shadow-lg) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}
body.app-default .dropdown-menu .dropdown-item {
    color: var(--ce-text-2) !important;
}
body.app-default .dropdown-menu .dropdown-item:hover,
body.app-default .dropdown-menu .dropdown-item:focus,
body.app-default .dropdown-menu .dropdown-item.active {
    background: rgba(139, 92, 246, 0.18) !important;
    color: var(--ce-text) !important;
}
body.app-default .dropdown-menu .dropdown-header {
    color: var(--ce-text-mute) !important;
}
body.app-default .dropdown-menu .dropdown-divider {
    border-color: var(--ce-stroke) !important;
}

/* Menu footer buttons (notifications refresh, etc.) */
body.app-default .menu.menu-sub.menu-sub-dropdown .btn-color-gray-600,
body.app-default .menu.menu-sub.menu-sub-dropdown .btn-color-gray-500 {
    color: var(--ce-text-mute) !important;
}
body.app-default .menu.menu-sub.menu-sub-dropdown .btn-color-gray-600:hover,
body.app-default .menu.menu-sub.menu-sub-dropdown .btn-active-color-primary:hover {
    color: #C4B5FD !important;
}

/* Notifications header — vibrant mesh */
#kt_menu_notifications > div:first-child {
    background-image:
        radial-gradient(120% 100% at 0% 0%, rgba(139, 92, 246, 0.85) 0%, transparent 60%),
        radial-gradient(120% 100% at 100% 100%, rgba(34, 211, 238, 0.60) 0%, transparent 55%),
        linear-gradient(135deg, #1B84FF 0%, #EC4899 100%) !important;
    background-blend-mode: normal !important;
    background-color: #1B84FF !important;
    border-radius: var(--ce-r-md) var(--ce-r-md) 0 0;
    position: relative;
    overflow: hidden;
}
#kt_menu_notifications > div:first-child::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 70% 30%, rgba(255, 255, 255, 0.25) 0%, transparent 30%),
        radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.10) 0%, transparent 30%);
    pointer-events: none;
}
#kt_menu_notifications > div:first-child h3 {
    letter-spacing: -0.015em;
    font-weight: 700 !important;
    position: relative;
    z-index: 1;
}
#kt_menu_notifications .border-top { border-color: var(--ce-stroke) !important; }

/* Notification badge — pink-magenta glow */
#kt_menu_item_wow .badge {
    background: linear-gradient(135deg, #F43F5E, #EC4899) !important;
    box-shadow: 0 0 0 2px rgba(11, 15, 35, 1), 0 0 10px rgba(236, 72, 153, 0.7);
}

/* =============================================================================
 * 4. TOOLBAR — Page heading + breadcrumb + CTA
 * =============================================================================*/

.app-toolbar {
    padding-top: 22px !important;
    padding-bottom: 18px !important;
    border-bottom: 0 !important;
    background-color: transparent !important;
}

.app-toolbar .page-heading {
    letter-spacing: -0.028em !important;
    font-size: 1.7rem !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    background: linear-gradient(135deg, #ffffff 0%, #CBD5E1 50%, #94A3B8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 4px 24px rgba(139, 92, 246, 0.15);
}

.app-toolbar .breadcrumb { margin-top: 6px !important; }
.app-toolbar .breadcrumb-item { font-size: 0.8rem !important; }
.app-toolbar .breadcrumb-item a,
.app-toolbar .breadcrumb-item.text-muted { color: var(--ce-text-mute) !important; }
.app-toolbar .breadcrumb-item a:hover { color: #F0ABFC !important; }
.app-toolbar .breadcrumb-item .bullet { background-color: rgba(203, 213, 225, 0.25) !important; }

/* Buy Cloud Computer CTA — gradient with shimmer */
.app-toolbar .btn.btn-primary {
    border-radius: 12px !important;
    padding: 11px 18px !important;
    font-weight: 700 !important;
    letter-spacing: -0.003em;
    background: var(--ce-grad-violet) !important;
    border: 0 !important;
    color: #ffffff !important;
    box-shadow: var(--ce-shadow-glow-p);
    position: relative;
    overflow: hidden;
    transition: transform 0.22s var(--ce-ease-spring), box-shadow 0.22s var(--ce-ease), filter 0.22s var(--ce-ease) !important;
}
.app-toolbar .btn.btn-primary::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.28) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: transform 0.7s var(--ce-ease);
}
.app-toolbar .btn.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 26px 44px -12px rgba(236, 72, 153, 0.55), 0 12px 24px rgba(139, 92, 246, 0.30);
    filter: brightness(1.06);
}
.app-toolbar .btn.btn-primary:hover::before { transform: translateX(100%); }
.app-toolbar .btn.btn-primary:active { transform: translateY(0); }

/* =============================================================================
 * 5. CARDS — Glassmorphism on dark
 * =============================================================================*/

body.app-default .card {
    --bs-card-bg: transparent;
    --bs-card-border-color: var(--ce-stroke);
    --bs-card-border-radius: var(--ce-r-lg);
    --bs-card-inner-border-radius: calc(var(--ce-r-lg) - 1px);
    --bs-card-color: var(--ce-text);
    background: var(--ce-surface) !important;
    border: 1px solid var(--ce-stroke) !important;
    color: var(--ce-text) !important;
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    box-shadow: var(--ce-shadow-md);
    transition: box-shadow 0.28s var(--ce-ease), transform 0.28s var(--ce-ease), border-color 0.28s var(--ce-ease);
    position: relative;
}

/* Subtle gradient rim around cards */
body.app-default .card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.35), rgba(236, 72, 153, 0.15) 35%, transparent 60%, rgba(34, 211, 238, 0.20));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
    opacity: 0.35;
    transition: opacity 0.28s var(--ce-ease);
}

body.app-default .card:hover::before { opacity: 0.7; }

/* Hover lift */
body.app-default #kt_app_content .card:not(.card-bordered):not(.bg-light):not(.bg-primary):not(.bg-dark):not(.card-dashed):not(.cloudeey-aggregate-card):not(.cloudeey-individual-card):hover {
    transform: translateY(-2px);
    box-shadow: 0 26px 50px -18px rgba(0, 0, 0, 0.55), 0 12px 24px rgba(139, 92, 246, 0.18);
    border-color: rgba(139, 92, 246, 0.30) !important;
}

/* Card header / footer separators */
body.app-default .card .card-header,
body.app-default .card .card-footer {
    background: transparent !important;
    border-color: var(--ce-stroke) !important;
}
body.app-default .card .card-title { letter-spacing: -0.012em; font-weight: 700; color: var(--ce-text) !important; }

/* Card variants that already have solid colors — keep them but soften border */
body.app-default .card.bg-light { background: rgba(255, 255, 255, 0.04) !important; }
body.app-default .card.bg-light-primary { background: rgba(27, 132, 255, 0.10) !important; }
body.app-default .card.bg-light-success { background: rgba(34, 197, 94, 0.10) !important; }
body.app-default .card.bg-light-warning { background: rgba(245, 158, 11, 0.10) !important; }
body.app-default .card.bg-light-danger { background: rgba(244, 63, 94, 0.10) !important; }
body.app-default .card.bg-light-info { background: rgba(34, 211, 238, 0.10) !important; }

/* Don't double-frame Cloudeey custom widgets that have their own design */
body.app-default .cloudeey-aggregate-card,
body.app-default .cloudeey-individual-card { background: revert; backdrop-filter: none; }
body.app-default .cloudeey-aggregate-card::before,
body.app-default .cloudeey-individual-card::before { display: none; }

/* =============================================================================
 * 6. BADGES, PILLS, MISC
 * =============================================================================*/

.badge {
    border-radius: 999px !important;
    letter-spacing: 0.02em;
    font-weight: 600;
    padding: 4px 10px !important;
}

/* Soft / light badges on dark */
body.app-default .badge.badge-light-primary { background: rgba(27, 132, 255, 0.18) !important; color: #93C5FD !important; }
body.app-default .badge.badge-light-success { background: rgba(34, 197, 94, 0.18) !important; color: #86EFAC !important; }
body.app-default .badge.badge-light-warning { background: rgba(245, 158, 11, 0.18) !important; color: #FCD34D !important; }
body.app-default .badge.badge-light-danger  { background: rgba(244, 63, 94, 0.18) !important;  color: #FCA5A5 !important; }
body.app-default .badge.badge-light-info    { background: rgba(34, 211, 238, 0.18) !important; color: #67E8F9 !important; }
body.app-default .badge.badge-light         { background: rgba(255, 255, 255, 0.06) !important; color: var(--ce-text-2) !important; }

/* Bullets */
body.app-default .bullet.bg-gray-500,
body.app-default .bullet.bg-gray-400 { background-color: rgba(203, 213, 225, 0.30) !important; }

/* Separator / horizontal rules */
body.app-default .separator { border-color: var(--ce-stroke) !important; }
body.app-default hr { border-color: var(--ce-stroke) !important; opacity: 1; }

/* =============================================================================
 * 7. BUTTONS
 * =============================================================================*/

.btn {
    --bs-btn-border-radius: var(--ce-r-sm);
    transition:
        transform 0.18s var(--ce-ease-spring),
        box-shadow 0.18s var(--ce-ease),
        background-color 0.18s var(--ce-ease),
        border-color 0.18s var(--ce-ease),
        color 0.18s var(--ce-ease),
        filter 0.18s var(--ce-ease);
}
.btn-sm  { --bs-btn-border-radius: var(--ce-r-xs); }
.btn-lg  { --bs-btn-border-radius: var(--ce-r-md); }

/* Primary CTA gets pink-violet brand gradient on the futuristic shell */
body.app-default .btn.btn-primary:not(.btn-icon),
body.app-blank   .btn.btn-primary:not(.btn-icon) {
    background: var(--ce-grad-violet);
    border: 0;
    color: #ffffff;
    box-shadow: 0 10px 24px -8px rgba(236, 72, 153, 0.55), 0 4px 12px rgba(139, 92, 246, 0.22);
}
body.app-default .btn.btn-primary:not(.btn-icon):hover,
body.app-blank   .btn.btn-primary:not(.btn-icon):hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 32px -10px rgba(236, 72, 153, 0.65), 0 8px 18px rgba(139, 92, 246, 0.30);
    filter: brightness(1.06);
}
body.app-default .btn.btn-primary:not(.btn-icon):active,
body.app-blank   .btn.btn-primary:not(.btn-icon):active { transform: translateY(0); }

/* Secondary / light buttons on the dark shell */
body.app-default .btn.btn-light:not(.btn-icon),
body.app-default .btn.btn-secondary:not(.btn-icon) {
    background: rgba(255, 255, 255, 0.06) !important;
    color: var(--ce-text) !important;
    border: 1px solid var(--ce-stroke-2) !important;
}
body.app-default .btn.btn-light:not(.btn-icon):hover,
body.app-default .btn.btn-secondary:not(.btn-icon):hover {
    background: rgba(255, 255, 255, 0.10) !important;
    border-color: rgba(139, 92, 246, 0.45) !important;
    transform: translateY(-1px);
}

/* =============================================================================
 * 8. FORM CONTROLS (general — dashboard inputs)
 * =============================================================================*/

body.app-default .form-control:not(.form-control-flush),
body.app-default .form-select {
    border-radius: 11px;
    background-color: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid var(--ce-stroke-2) !important;
    color: var(--ce-text) !important;
    transition: border-color 0.2s var(--ce-ease), box-shadow 0.2s var(--ce-ease), background-color 0.2s var(--ce-ease);
}
body.app-default .form-control:not(.form-control-flush):focus,
body.app-default .form-select:focus {
    background-color: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(139, 92, 246, 0.55) !important;
    box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.16) !important;
}
body.app-default .form-control::placeholder { color: var(--ce-text-mute-2) !important; }
body.app-default .form-label { color: var(--ce-text-2) !important; }

/* Metronic "solid" controls default to light gray bg + dark gray text */
body.app-default .form-control.form-control-solid,
body.app-default .form-select.form-select-solid,
body.app-default textarea.form-control.form-control-solid {
    background-color: rgba(255, 255, 255, 0.04) !important;
    border-color: var(--ce-stroke-2) !important;
    color: var(--ce-text) !important;
}
body.app-default .form-control.form-control-solid::placeholder,
body.app-default .form-select.form-select-solid::placeholder {
    color: var(--ce-text-mute-2) !important;
}
body.app-default .form-control.form-control-solid:focus,
body.app-default .form-control.form-control-solid:active,
body.app-default .form-control.form-control-solid.active,
body.app-default .form-select.form-select-solid:focus,
body.app-default .form-select.form-select-solid:active,
body.app-default .form-select.form-select-solid.active {
    background-color: rgba(255, 255, 255, 0.07) !important;
    border-color: rgba(139, 92, 246, 0.55) !important;
    color: var(--ce-text) !important;
    box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.16) !important;
}

body.app-default .col-form-label { color: var(--ce-text-2) !important; }
body.app-default .form-text { color: var(--ce-text-mute) !important; }

body.app-default .form-check-input {
    background-color: rgba(255, 255, 255, 0.06) !important;
    border-color: var(--ce-stroke-2) !important;
}
body.app-default .form-check-input:checked {
    background-color: var(--ce-violet) !important;
    border-color: var(--ce-violet) !important;
}
body.app-default .form-check-input:focus {
    box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.16) !important;
}
body.app-default .form-check-label,
body.app-default .form-check-custom .form-check-label {
    color: var(--ce-text) !important;
}
body.app-default .form-check-label .text-muted,
body.app-default .form-check-label .fs-6.text-muted {
    color: var(--ce-text-mute) !important;
}

/* Select2 (timezone / currency pickers on settings) */
body.app-default .select2-container--bootstrap5 .select2-selection--single,
body.app-default .select2-container--bootstrap5 .select2-selection--multiple {
    background-color: rgba(255, 255, 255, 0.04) !important;
    border-color: var(--ce-stroke-2) !important;
}
body.app-default .select2-container--bootstrap5 .select2-selection__rendered,
body.app-default .select2-container--bootstrap5 .select2-selection__placeholder {
    color: var(--ce-text) !important;
}
body.app-default .select2-container--bootstrap5 .select2-selection__arrow b {
    border-color: var(--ce-text-mute) transparent transparent transparent !important;
}
body.app-default .select2-dropdown {
    background: rgba(15, 18, 38, 0.98) !important;
    border-color: var(--ce-stroke-2) !important;
    color: var(--ce-text) !important;
}
body.app-default .select2-container--bootstrap5 .select2-search--dropdown .select2-search__field {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: var(--ce-stroke-2) !important;
    color: var(--ce-text) !important;
}
body.app-default .select2-results__option {
    color: var(--ce-text-2) !important;
}
body.app-default .select2-results__option--highlighted,
body.app-default .select2-results__option--selected {
    background: rgba(139, 92, 246, 0.22) !important;
    color: var(--ce-text) !important;
}

/* Tables on dark */
body.app-default .table { color: var(--ce-text) !important; --bs-table-color: var(--ce-text); }
body.app-default .table th { color: var(--ce-text-mute) !important; border-color: var(--ce-stroke) !important; }
body.app-default .table td { border-color: var(--ce-stroke) !important; }
body.app-default .table.table-row-dashed tbody tr { transition: background-color 0.18s var(--ce-ease); }
body.app-default .table.table-row-dashed tbody tr:hover { background-color: rgba(139, 92, 246, 0.06) !important; }

/* =============================================================================
 * 9. DASHBOARD MISC POLISH
 * =============================================================================*/

.progress, .progress-bar { border-radius: 999px !important; }
body.app-default .progress { background-color: rgba(255, 255, 255, 0.06) !important; }

/* Modals: dark glass.
 * IMPORTANT: explicit z-index on .modal and .modal-backdrop ensures correct
 * stacking even if a templated modal lives inside #kt_app_content. We push
 * .modal well above .modal-backdrop. */
.modal-backdrop,
.modal-backdrop.fade,
.modal-backdrop.show { z-index: 1055 !important; }

.modal,
.modal.fade,
.modal.show { z-index: 1060 !important; }

/* Tooltips, popovers, offcanvas should still appear above modals if used */
.tooltip { z-index: 1080 !important; }
.popover { z-index: 1070 !important; }

body.app-default .modal-content {
    border-radius: var(--ce-r-xl) !important;
    background: rgba(15, 18, 38, 0.95) !important;
    border: 1px solid var(--ce-stroke-2) !important;
    color: var(--ce-text);
    box-shadow: var(--ce-shadow-lg);
    overflow: hidden;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}
body.app-default .modal-header,
body.app-default .modal-footer {
    border-color: var(--ce-stroke) !important;
    background: transparent !important;
}
body.app-default .modal-title  { color: var(--ce-text) !important; }
body.app-default .modal-body   { color: var(--ce-text) !important; }
body.app-default .modal-backdrop,
body.app-default .modal-backdrop.show {
    background: #050714 !important;
    opacity: 0.72 !important;
}
/* Close (X) button on dark modals — invert so it's visible on dark glass */
body.app-default .modal .btn-close {
    filter: invert(1) grayscale(100%) brightness(2);
    opacity: 0.8;
    transition: opacity 0.2s var(--ce-ease), transform 0.2s var(--ce-ease-spring);
}
body.app-default .modal .btn-close:hover {
    opacity: 1;
    transform: rotate(90deg);
}

/* Modal typography — headings/labels ship with dark --bs-heading-color */
body.app-default .modal h1,
body.app-default .modal h2,
body.app-default .modal h3,
body.app-default .modal h4,
body.app-default .modal h5,
body.app-default .modal h6,
body.app-default .modal .h1,
body.app-default .modal .h2,
body.app-default .modal .h3,
body.app-default .modal .h4,
body.app-default .modal .h5,
body.app-default .modal .h6 {
    color: var(--ce-text) !important;
}

body.app-default .modal .text-muted,
body.app-default .modal .text-gray-600,
body.app-default .modal .text-gray-500 {
    color: var(--ce-text-mute) !important;
}

body.app-default .modal label,
body.app-default .modal .fv-row > label,
body.app-default .modal label.fw-semibold,
body.app-default .modal .fw-semibold.fs-6 {
    color: var(--ce-text-2) !important;
}

body.app-default .modal .form-check-label .fw-bold.text-gray-800,
body.app-default .modal .form-check-label .text-gray-800 {
    color: var(--ce-text) !important;
}

body.app-default .modal .btn-active-color-primary,
body.app-default .modal .btn-active-light-primary {
    color: var(--ce-text-mute) !important;
}
body.app-default .modal .btn-active-color-primary:hover,
body.app-default .modal .btn-active-light-primary:hover {
    color: var(--ce-text) !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

body.app-default .modal .alert {
    border-width: 1px;
    border-style: dashed;
}
body.app-default .modal .alert-info {
    background: rgba(34, 211, 238, 0.12) !important;
    border-color: rgba(34, 211, 238, 0.35) !important;
    color: var(--ce-text) !important;
}

/* Invite Team modal */
body.app-default #kt_modal_invite_user .modal-body h1 {
    color: var(--ce-text) !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em;
}
body.app-default #kt_modal_invite_user .modal-body .text-muted {
    color: var(--ce-text-mute) !important;
}

/* Secure chat / call modals */
body.app-default #secure_call_modal .modal-header h2,
body.app-default #secure_call_incoming_modal [data-secure-call="incoming-title"],
body.app-default #secure_call_upgrade_modal h3 {
    color: var(--ce-text) !important;
}
body.app-default #secure_call_incoming_modal [data-secure-call="incoming-subtitle"],
body.app-default #secure_call_upgrade_modal p.text-muted,
body.app-default #secure_call_modal .text-muted {
    color: var(--ce-text-mute) !important;
}
body.app-default #secure_call_modal .modal-body {
    color: var(--ce-text) !important;
}

/* Create Ticket modal — form surfaces & select2 inside modal */
body.app-default #kt_modal_new_ticket .modal-body h1 {
    color: var(--ce-text) !important;
    font-weight: 700 !important;
}
body.app-default #kt_modal_new_ticket .form-label,
body.app-default #kt_modal_new_ticket label.fs-6 {
    color: var(--ce-text-2) !important;
}
body.app-default #kt_modal_new_ticket .text-gray-500,
body.app-default #kt_modal_new_ticket .fs-7.text-gray-500 {
    color: var(--ce-text-mute) !important;
}
body.app-default #kt_modal_new_ticket .link-primary {
    color: #C4B5FD !important;
}
body.app-default #kt_modal_new_ticket .link-primary:hover {
    color: #F0ABFC !important;
}
body.app-default #kt_modal_new_ticket .dropzone {
    background: rgba(139, 92, 246, 0.06) !important;
    border: 2px dashed rgba(139, 92, 246, 0.35) !important;
    border-radius: 14px !important;
}
body.app-default #kt_modal_new_ticket .dropzone .dz-message h3,
body.app-default #kt_modal_new_ticket .dropzone .dz-message span {
    color: var(--ce-text-2) !important;
}
body.app-default #kt_modal_new_ticket .dropzone .dz-preview {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid var(--ce-stroke) !important;
}
body.app-default #kt_modal_new_ticket .dropzone .dz-preview .dz-filename span,
body.app-default #kt_modal_new_ticket .dropzone .dz-preview .dz-size {
    color: var(--ce-text-2) !important;
}
body.app-default #kt_modal_new_ticket .symbol-label.bg-secondary {
    background: rgba(255, 255, 255, 0.08) !important;
}
body.app-default #kt_modal_new_ticket .symbol-label.bg-secondary i {
    color: var(--ce-text-mute) !important;
}

/* Select2 & flatpickr above modal content */
body.app-default .modal .select2-container {
    z-index: 1070 !important;
}
body.app-default .select2-container--open .select2-dropdown {
    z-index: 1075 !important;
}
body.app-default .flatpickr-calendar {
    z-index: 1075 !important;
}

/* Tabs */
.nav-line-tabs .nav-item .nav-link {
    transition: color 0.2s var(--ce-ease), border-color 0.2s var(--ce-ease) !important;
}
body.app-default .nav-line-tabs { border-bottom-color: var(--ce-stroke) !important; }
body.app-default .nav-line-tabs .nav-item .nav-link { color: var(--ce-text-mute) !important; }
body.app-default .nav-line-tabs .nav-item .nav-link.active {
    color: #F0ABFC !important;
    border-bottom-color: #EC4899 !important;
}

/* Symbol labels — gradient backgrounds for "AI" tile feel */
body.app-default .symbol .symbol-label.bg-light-primary { background: linear-gradient(135deg, rgba(27, 132, 255, 0.22), rgba(34, 211, 238, 0.15)) !important; color: #93C5FD !important; }
body.app-default .symbol .symbol-label.bg-light-success { background: linear-gradient(135deg, rgba(34, 197, 94, 0.22), rgba(45, 212, 191, 0.18)) !important; color: #86EFAC !important; }
body.app-default .symbol .symbol-label.bg-light-warning { background: linear-gradient(135deg, rgba(245, 158, 11, 0.22), rgba(244, 114, 182, 0.14)) !important; color: #FCD34D !important; }
body.app-default .symbol .symbol-label.bg-light-danger  { background: linear-gradient(135deg, rgba(244, 63, 94, 0.22), rgba(236, 72, 153, 0.18)) !important; color: #FCA5A5 !important; }
body.app-default .symbol .symbol-label.bg-light-info    { background: linear-gradient(135deg, rgba(34, 211, 238, 0.22), rgba(45, 212, 191, 0.18)) !important; color: #67E8F9 !important; }
body.app-default .symbol .symbol-label.bg-light         { background: rgba(255, 255, 255, 0.05) !important; color: var(--ce-text-2) !important; }

/* Custom Cloudeey scrollbar in the dark theme */
#kt_app_content ::-webkit-scrollbar,
.scroll-y::-webkit-scrollbar { width: 8px; height: 8px; }
#kt_app_content ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(139, 92, 246, 0.55), rgba(236, 72, 153, 0.55));
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
#kt_app_content ::-webkit-scrollbar-track { background: transparent; }

/* App footer — soften on the futuristic theme */
body.app-default .app-footer { background: transparent !important; border-top: 1px solid var(--ce-stroke); }
body.app-default .app-footer .text-muted,
body.app-default .app-footer .text-gray-800,
body.app-default .app-footer .menu .menu-link { color: var(--ce-text-mute) !important; }
body.app-default .app-footer .menu .menu-link:hover { color: #F0ABFC !important; }

/* =============================================================================
 * 10. AUTHENTICATION PAGES — Full futuristic AI hero
 * =============================================================================*/

body.app-blank {
    background-color: var(--ce-bg-0) !important;
    color: var(--ce-text) !important;
    position: relative;
    overflow-x: hidden;
}
body.app-blank::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(50% 40% at 12% 12%, rgba(139, 92, 246, 0.35) 0%, transparent 60%),
        radial-gradient(45% 40% at 88% 8%, rgba(236, 72, 153, 0.28) 0%, transparent 60%),
        radial-gradient(50% 50% at 100% 80%, rgba(34, 211, 238, 0.25) 0%, transparent 60%),
        radial-gradient(60% 50% at 0% 88%, rgba(27, 132, 255, 0.22) 0%, transparent 60%),
        linear-gradient(180deg, var(--ce-bg-0) 0%, var(--ce-bg-1) 100%);
    animation: ce-aurora-shift 24s ease-in-out infinite alternate;
}
body.app-blank::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: radial-gradient(ellipse at 50% 30%, #000 0%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 0%, transparent 70%);
    opacity: 0.7;
}

body.app-blank #kt_app_root,
body.app-blank #kt_body { position: relative; }

/* Hero side panel — neural mesh */
body.app-blank #kt_app_root .order-1.order-lg-2,
body.app-blank #kt_app_root .order-lg-2 {
    position: relative;
    overflow: hidden;
    background-image: none !important;
    background-color: transparent !important;
    isolation: isolate;
}

/* Multi-layer animated mesh on aside */
body.app-blank #kt_app_root .order-1.order-lg-2::before,
body.app-blank #kt_app_root .order-lg-2::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(55% 55% at 20% 28%, rgba(139, 92, 246, 0.95) 0%, transparent 55%),
        radial-gradient(55% 55% at 80% 18%, rgba(236, 72, 153, 0.85) 0%, transparent 55%),
        radial-gradient(60% 60% at 75% 85%, rgba(34, 211, 238, 0.70) 0%, transparent 55%),
        radial-gradient(50% 50% at 25% 92%, rgba(45, 212, 191, 0.50) 0%, transparent 55%),
        linear-gradient(160deg, #0A0B1F 0%, #131745 100%);
    z-index: 0;
    animation: ce-mesh-spin 18s ease-in-out infinite alternate;
}
@keyframes ce-mesh-spin {
    0%   { filter: hue-rotate(0deg) saturate(1.1); transform: scale(1); }
    100% { filter: hue-rotate(20deg) saturate(1.25); transform: scale(1.04); }
}

/* Subtle floating orb */
body.app-blank #kt_app_root .order-1.order-lg-2::after,
body.app-blank #kt_app_root .order-lg-2::after {
    content: "";
    position: absolute;
    width: 460px;
    height: 460px;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(255, 255, 255, 0.18) 0%, transparent 55%);
    filter: blur(34px);
    z-index: 0;
    pointer-events: none;
    animation: ce-orb-drift 18s ease-in-out infinite;
}
@keyframes ce-orb-drift {
    0%, 100% { transform: translate(-50%, -50%) scale(1);   opacity: 0.7; }
    50%      { transform: translate(-40%, -60%) scale(1.12); opacity: 1; }
}

body.app-blank #kt_app_root .order-1.order-lg-2 > *,
body.app-blank #kt_app_root .order-lg-2 > * { position: relative; z-index: 1; }

/* Aside logo */
body.app-blank #kt_app_root .order-1.order-lg-2 a img,
body.app-blank #kt_app_root .order-lg-2 a img {
    filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.4));
    transition: transform 0.4s var(--ce-ease-spring), filter 0.4s var(--ce-ease);
}
body.app-blank #kt_app_root .order-1.order-lg-2 a:hover img,
body.app-blank #kt_app_root .order-lg-2 a:hover img {
    transform: translateY(-3px) scale(1.03);
    filter: drop-shadow(0 18px 36px rgba(236, 72, 153, 0.55));
}

/* Aside hero image */
body.app-blank #kt_app_root .order-1.order-lg-2 img.d-none.d-lg-block,
body.app-blank #kt_app_root .order-lg-2 img.d-none.d-lg-block {
    filter: drop-shadow(0 36px 70px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 32px rgba(139, 92, 246, 0.30));
    animation: ce-float 6s ease-in-out infinite;
}
@keyframes ce-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}

/* Aside title — bigger, gradient text */
body.app-blank #kt_app_root .order-1.order-lg-2 h1.text-white,
body.app-blank #kt_app_root .order-lg-2 h1.text-white {
    letter-spacing: -0.035em !important;
    line-height: 1.10 !important;
    font-weight: 800 !important;
    background: linear-gradient(135deg, #ffffff 0%, #E0E7FF 50%, #FBCFE8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 6px 36px rgba(236, 72, 153, 0.20);
}
body.app-blank #kt_app_root .order-1.order-lg-2 .text-white.fs-base,
body.app-blank #kt_app_root .order-lg-2 .text-white.fs-base {
    opacity: 0.85;
    line-height: 1.6;
    font-size: 1rem !important;
    color: #E0E7FF !important;
}

/* ---- FORM CARD ---- */
body.app-blank .flex-center > .w-lg-500px {
    background: rgba(15, 18, 38, 0.65);
    backdrop-filter: saturate(180%) blur(28px);
    -webkit-backdrop-filter: saturate(180%) blur(28px);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--ce-r-xl);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.06) inset,
        0 30px 80px -20px rgba(0, 0, 0, 0.55),
        0 12px 30px -12px rgba(139, 92, 246, 0.20);
    padding: 40px !important;
    transition: transform 0.3s var(--ce-ease), box-shadow 0.3s var(--ce-ease);
    position: relative;
    overflow: hidden;
    color: var(--ce-text);
}

/* Animated gradient rim around the card */
body.app-blank .flex-center > .w-lg-500px::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.55), rgba(236, 72, 153, 0.25) 35%, transparent 60%, rgba(34, 211, 238, 0.45));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
    opacity: 0.9;
}
/* Soft corner gradient inside the card */
body.app-blank .flex-center > .w-lg-500px::after {
    content: "";
    position: absolute;
    top: -20%; right: -20%;
    width: 280px; height: 280px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(236, 72, 153, 0.18) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}
body.app-blank .flex-center > .w-lg-500px > * { position: relative; z-index: 1; }

/* Auth headings */
body.app-blank .form h1 {
    letter-spacing: -0.035em !important;
    font-size: 2.15rem !important;
    line-height: 1.1 !important;
    font-weight: 800 !important;
    background: linear-gradient(135deg, #ffffff 0%, #E0E7FF 60%, #FBCFE8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #ffffff;
}

body.app-blank .form .text-gray-500,
body.app-blank .form .text-gray-700 {
    color: var(--ce-text-mute) !important;
    font-size: 0.97rem;
    line-height: 1.55;
}
body.app-blank .form .text-muted { color: var(--ce-text-mute-2) !important; }

/* Auth inputs */
body.app-blank .form .form-control {
    padding: 14px 16px !important;
    font-size: 0.95rem;
    border-radius: 13px !important;
    background-color: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    color: var(--ce-text) !important;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.20);
    transition:
        border-color 0.22s var(--ce-ease),
        box-shadow 0.22s var(--ce-ease),
        background-color 0.22s var(--ce-ease) !important;
}
body.app-blank .form .form-control::placeholder { color: var(--ce-text-mute-2) !important; }
body.app-blank .form .form-control:hover {
    border-color: rgba(139, 92, 246, 0.35) !important;
}
body.app-blank .form .form-control:focus {
    background-color: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(139, 92, 246, 0.65) !important;
    box-shadow:
        0 0 0 4px rgba(139, 92, 246, 0.20),
        0 10px 24px -10px rgba(236, 72, 153, 0.40) !important;
}

/* Submit button — vibrant gradient + shimmer */
body.app-blank .form .btn.btn-primary {
    padding: 15px 18px !important;
    border-radius: 14px !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    letter-spacing: 0.005em;
    background: linear-gradient(135deg, #1B84FF 0%, #8B5CF6 50%, #EC4899 100%) !important;
    background-size: 200% 200% !important;
    background-position: 0% 0%;
    border: 0 !important;
    color: #ffffff !important;
    box-shadow:
        0 16px 30px -10px rgba(236, 72, 153, 0.55),
        0 8px 16px rgba(139, 92, 246, 0.30),
        inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
    position: relative;
    overflow: hidden;
    transition:
        transform 0.22s var(--ce-ease-spring),
        box-shadow 0.22s var(--ce-ease),
        background-position 0.6s var(--ce-ease),
        filter 0.22s var(--ce-ease) !important;
}
body.app-blank .form .btn.btn-primary::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.30) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: transform 0.7s var(--ce-ease);
}
body.app-blank .form .btn.btn-primary:hover {
    transform: translateY(-2px);
    background-position: 100% 100%;
    box-shadow:
        0 26px 42px -12px rgba(236, 72, 153, 0.65),
        0 14px 24px rgba(139, 92, 246, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
    filter: brightness(1.05);
}
body.app-blank .form .btn.btn-primary:hover::before { transform: translateX(100%); }
body.app-blank .form .btn.btn-primary:active { transform: translateY(0); }

/* Cancel / light button */
body.app-blank .form .btn.btn-light {
    padding: 15px 18px !important;
    border-radius: 14px !important;
    font-weight: 600 !important;
    background-color: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    color: var(--ce-text-2) !important;
    transition: all 0.22s var(--ce-ease) !important;
}
body.app-blank .form .btn.btn-light:hover {
    background-color: rgba(255, 255, 255, 0.10) !important;
    border-color: rgba(139, 92, 246, 0.45) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
}

/* Password meter bars */
body.app-blank [data-kt-password-meter-control="highlight"] > div {
    height: 6px !important;
    border-radius: 999px !important;
    background-color: rgba(255, 255, 255, 0.08) !important;
    transition: background-color 0.25s var(--ce-ease);
}
body.app-blank [data-kt-password-meter-control="highlight"] > div.bg-active-success.active,
body.app-blank [data-kt-password-meter-control="highlight"] > div.active {
    background: linear-gradient(90deg, #8B5CF6, #EC4899) !important;
    box-shadow: 0 0 12px rgba(236, 72, 153, 0.55);
}

/* Password visibility toggle */
body.app-blank [data-kt-password-meter-control="visibility"] {
    background-color: rgba(255, 255, 255, 0.04);
    border-radius: 9px;
    transition: background-color 0.18s var(--ce-ease), color 0.18s var(--ce-ease);
}
body.app-blank [data-kt-password-meter-control="visibility"]:hover {
    background-color: rgba(139, 92, 246, 0.18);
}
body.app-blank [data-kt-password-meter-control="visibility"] i,
body.app-blank [data-kt-password-meter-control="visibility"] i [class*="path"] {
    color: var(--ce-text-mute) !important;
}
body.app-blank [data-kt-password-meter-control="visibility"]:hover i,
body.app-blank [data-kt-password-meter-control="visibility"]:hover i [class*="path"] {
    color: #F0ABFC !important;
}

/* Links inside auth */
body.app-blank .form .link-primary {
    color: #F0ABFC !important;
    font-weight: 600;
    text-decoration: none;
    background-image: linear-gradient(90deg, #F0ABFC, #8B5CF6);
    background-size: 0 1.5px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size 0.28s var(--ce-ease), color 0.18s var(--ce-ease);
}
body.app-blank .form .link-primary:hover {
    background-size: 100% 1.5px;
    color: #FBCFE8 !important;
}

/* Checkbox */
body.app-blank .form .form-check-input {
    border-radius: 6px !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
    background-color: rgba(255, 255, 255, 0.04) !important;
    width: 18px;
    height: 18px;
    cursor: pointer;
    transition: background 0.18s var(--ce-ease), border-color 0.18s var(--ce-ease), box-shadow 0.18s var(--ce-ease);
}
body.app-blank .form .form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.30);
}
body.app-blank .form .form-check-input:checked {
    background: var(--ce-grad-violet) !important;
    border-color: transparent !important;
    box-shadow: 0 0 12px rgba(236, 72, 153, 0.45);
}
body.app-blank .form .form-check-label { color: var(--ce-text-2) !important; }
body.app-blank .form .form-check-label .link-primary { color: #F0ABFC !important; }

/* Alerts inside auth */
body.app-blank .form .alert {
    border-radius: 14px !important;
    border: 1px solid var(--ce-stroke-2) !important;
}
body.app-blank .form .alert.alert-info {
    background: rgba(34, 211, 238, 0.10) !important;
    border-color: rgba(34, 211, 238, 0.35) !important;
    color: #67E8F9 !important;
}
body.app-blank .form .alert.alert-danger {
    background: rgba(244, 63, 94, 0.12) !important;
    border-color: rgba(244, 63, 94, 0.40) !important;
    color: #FCA5A5 !important;
}
body.app-blank .form .alert.alert-success {
    background: rgba(34, 197, 94, 0.12) !important;
    border-color: rgba(34, 197, 94, 0.40) !important;
    color: #86EFAC !important;
}
body.app-blank .form .alert.alert-warning {
    background: rgba(245, 158, 11, 0.12) !important;
    border-color: rgba(245, 158, 11, 0.40) !important;
    color: #FCD34D !important;
}

/* Success card (mobile reset) */
body.app-blank .bg-light-success { background: rgba(34, 197, 94, 0.15) !important; }
body.app-blank .text-success { color: #86EFAC !important; }

/* =============================================================================
 *  Phone input (intl-tel-input v18) — dark theme + spacing fix
 *
 *  Problem fixed: the auth form rule `padding: 14px 16px !important` on
 *  .form-control was overriding the inline `padding-left` that intl-tel-input
 *  sets to reserve room for the flag + dial code, causing the typed phone
 *  number to overlap the country code badge.
 *  Fix: explicit padding-left on .form-control INSIDE the .iti wrappers,
 *  with specificity high enough to beat the generic auth form rule.
 * =============================================================================*/

/* Make sure the iti wrapper stretches to the input's full width */
body.app-blank .form .iti,
body.app-blank .iti { width: 100%; display: block; }

/* When the flag+dial-code is shown SEPARATELY (signup form uses this),
 * reserve ~96px on the left of the input for the flag chip */
body.app-blank .form .iti.iti--separate-dial-code .form-control,
body.app-blank .iti.iti--separate-dial-code input.form-control {
    padding-left: 96px !important;
}

/* When only the flag is shown (no dial code), 52px is enough */
body.app-blank .form .iti.iti--allow-dropdown:not(.iti--separate-dial-code) .form-control,
body.app-blank .iti.iti--allow-dropdown:not(.iti--separate-dial-code) input.form-control {
    padding-left: 52px !important;
}

/* The selected-flag button on the LEFT — match the input's height,
 * dark glass, rounded-left only so it docks into the input */
body.app-blank .iti--separate-dial-code .iti__selected-flag,
body.app-blank .iti__selected-flag {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-radius: 13px 0 0 13px !important;
    border-right: 1px solid rgba(255, 255, 255, 0.10) !important;
    padding: 0 8px 0 12px !important;
    height: 100% !important;
    transition: background-color 0.18s var(--ce-ease);
}
body.app-blank .iti__selected-flag:hover,
body.app-blank .iti__selected-flag:focus {
    background-color: rgba(139, 92, 246, 0.18) !important;
}

/* Dial code text (+1, +44 …) */
body.app-blank .iti--separate-dial-code .iti__selected-dial-code {
    color: var(--ce-text) !important;
    font-weight: 600;
    margin-left: 6px !important;
}

/* Dropdown arrow — light & subtle */
body.app-blank .iti__arrow {
    border-top-color: var(--ce-text-mute) !important;
    margin-left: 8px !important;
}
body.app-blank .iti__arrow--up { border-bottom-color: var(--ce-text-mute) !important; }

/* Country dropdown list — dark glass */
body.app-blank .iti__country-list {
    background-color: rgba(15, 18, 38, 0.98) !important;
    color: var(--ce-text) !important;
    border: 1px solid var(--ce-stroke-2);
    border-radius: 12px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 22px 40px -12px rgba(0, 0, 0, 0.6);
    padding: 6px;
    max-height: 280px;
}
body.app-blank .iti__country {
    padding: 8px 10px !important;
    border-radius: 8px;
    color: var(--ce-text) !important;
}
body.app-blank .iti__country.iti__highlight,
body.app-blank .iti__country:hover {
    background-color: rgba(139, 92, 246, 0.20) !important;
    color: #ffffff !important;
}
body.app-blank .iti__dial-code { color: var(--ce-text-mute) !important; }
body.app-blank .iti__country.iti__highlight .iti__dial-code,
body.app-blank .iti__country:hover .iti__dial-code { color: #E9D5FF !important; }
body.app-blank .iti__divider { border-bottom-color: var(--ce-stroke) !important; }

/* When the iti dropdown is attached to body (signup uses dropdownContainer: document.body)
 * style its outer container so the popover blends with the dark theme */
.iti--container { z-index: 1090 !important; }
.iti--container .iti__country-list {
    background-color: rgba(15, 18, 38, 0.98) !important;
    color: var(--ce-text-mute) !important;
    border: 1px solid var(--ce-stroke-2) !important;
    border-radius: 12px !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 22px 40px -12px rgba(0, 0, 0, 0.6) !important;
    padding: 6px !important;
}
.iti--container .iti__country {
    padding: 8px 10px !important;
    border-radius: 8px !important;
    color: var(--ce-text) !important;
}
.iti--container .iti__country.iti__highlight,
.iti--container .iti__country:hover {
    background-color: rgba(139, 92, 246, 0.20) !important;
    color: #ffffff !important;
}
.iti--container .iti__dial-code { color: var(--ce-text-mute) !important; }
.iti--container .iti__divider { border-bottom-color: var(--ce-stroke) !important; }

/* Also apply the same padding fix for any dashboard form that uses intl-tel-input */
body.app-default .iti,
body.app-default .form .iti { width: 100%; display: block; }
body.app-default .iti.iti--separate-dial-code .form-control,
body.app-default .iti.iti--separate-dial-code input.form-control {
    padding-left: 96px !important;
}
body.app-default .iti.iti--allow-dropdown:not(.iti--separate-dial-code) .form-control,
body.app-default .iti.iti--allow-dropdown:not(.iti--separate-dial-code) input.form-control {
    padding-left: 52px !important;
}
body.app-default .iti--separate-dial-code .iti__selected-flag,
body.app-default .iti__selected-flag {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-radius: 11px 0 0 11px !important;
    border-right: 1px solid rgba(255, 255, 255, 0.10) !important;
    height: 100% !important;
}
body.app-default .iti--separate-dial-code .iti__selected-dial-code { color: var(--ce-text) !important; font-weight: 600; }
body.app-default .iti__arrow { border-top-color: var(--ce-text-mute) !important; }

/* Auth footer — dark glass */
body.app-blank .app-footer,
body.app-blank footer {
    background: transparent !important;
}
body.app-blank .btn-color-gray-700 { color: var(--ce-text-mute) !important; }
body.app-blank .btn-active-color-primary:hover,
body.app-blank .btn-active-color-primary:focus { color: #F0ABFC !important; }
body.app-blank .text-primary { color: #93C5FD !important; }

/* =============================================================================
 * 11. ALERT BANNER (in auth)
 * =============================================================================*/

body.app-blank .alert-banner,
body.app-default .alert-banner {
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--ce-stroke-2);
    color: var(--ce-text) !important;
}

/* =============================================================================
 * 11b. ALERTS, NOTICES & INFO BANNERS — readable on dark shell
 * =============================================================================*/

body.app-default .alert {
    border-radius: 12px !important;
    border-width: 1px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
body.app-default #kt_alert,
body.app-default .alert.alert-danger {
    background: rgba(244, 63, 94, 0.12) !important;
    border-color: rgba(244, 63, 94, 0.35) !important;
    color: #FECACA !important;
}
body.app-default .alert.alert-success {
    background: rgba(34, 197, 94, 0.12) !important;
    border-color: rgba(34, 197, 94, 0.35) !important;
    color: #BBF7D0 !important;
}
body.app-default .alert.alert-warning {
    background: rgba(245, 158, 11, 0.12) !important;
    border-color: rgba(245, 158, 11, 0.35) !important;
    color: #FDE68A !important;
}
body.app-default .alert.alert-info {
    background: rgba(34, 211, 238, 0.12) !important;
    border-color: rgba(34, 211, 238, 0.35) !important;
    color: #A5F3FC !important;
}
body.app-default .alert.alert-primary {
    background: rgba(139, 92, 246, 0.12) !important;
    border-color: rgba(139, 92, 246, 0.35) !important;
    color: #DDD6FE !important;
}
body.app-default .alert .btn-close {
    filter: invert(1) grayscale(100%) brightness(2);
    opacity: 0.75;
}
body.app-default .alert .btn-close:hover { opacity: 1; }

/* Metronic notice panels (settings, dashboard, etc.) */
body.app-default .notice {
    border-radius: 12px !important;
    color: var(--ce-text-2) !important;
}
body.app-default .notice.bg-light,
body.app-default .notice.bg-light-primary,
body.app-default .notice.bg-light-success,
body.app-default .notice.bg-light-warning,
body.app-default .notice.bg-light-danger,
body.app-default .notice.bg-light-info {
    background: rgba(255, 255, 255, 0.05) !important;
}
body.app-default .notice.bg-light-warning {
    background: rgba(245, 158, 11, 0.12) !important;
    border-color: rgba(245, 158, 11, 0.35) !important;
}
body.app-default .notice.bg-light-primary {
    background: rgba(27, 132, 255, 0.12) !important;
    border-color: rgba(27, 132, 255, 0.35) !important;
}
body.app-default .notice.bg-light-success {
    background: rgba(34, 197, 94, 0.12) !important;
    border-color: rgba(34, 197, 94, 0.35) !important;
}
body.app-default .notice.bg-light-danger {
    background: rgba(244, 63, 94, 0.12) !important;
    border-color: rgba(244, 63, 94, 0.35) !important;
}
body.app-default .notice.bg-light-info {
    background: rgba(34, 211, 238, 0.12) !important;
    border-color: rgba(34, 211, 238, 0.35) !important;
}
body.app-default .notice .text-gray-900,
body.app-default .notice .text-gray-800,
body.app-default .notice .text-gray-700,
body.app-default .notice .text-gray-600,
body.app-default .notice h4,
body.app-default .notice .fw-bold {
    color: var(--ce-text) !important;
}
body.app-default .notice .text-gray-500,
body.app-default .notice .fs-6.text-gray-700 {
    color: var(--ce-text-2) !important;
}

/* Popovers & offcanvas menus */
body.app-default .popover {
    background: rgba(15, 18, 38, 0.96) !important;
    border-color: var(--ce-stroke-2) !important;
    color: var(--ce-text) !important;
    box-shadow: var(--ce-shadow-lg) !important;
}
body.app-default .popover-header {
    background: rgba(255, 255, 255, 0.04) !important;
    border-bottom-color: var(--ce-stroke) !important;
    color: var(--ce-text) !important;
}
body.app-default .popover-body {
    color: var(--ce-text-2) !important;
}

body.app-default .offcanvas {
    background: rgba(11, 15, 35, 0.98) !important;
    color: var(--ce-text) !important;
    border-color: var(--ce-stroke) !important;
}
body.app-default .offcanvas-header {
    border-bottom-color: var(--ce-stroke) !important;
}
body.app-default .offcanvas-title { color: var(--ce-text) !important; }

/* Notification list items inside dropdown */
body.app-default #kt_menu_notifications .notification-unread {
    background: rgba(139, 92, 246, 0.10) !important;
    border-left-color: #A78BFA !important;
}
body.app-default #kt_menu_notifications .text-gray-800,
body.app-default #kt_menu_notifications .text-gray-700,
body.app-default #kt_menu_notifications .text-gray-600,
body.app-default #kt_menu_notifications .fw-bold {
    color: var(--ce-text) !important;
}
body.app-default #kt_menu_notifications .text-muted,
body.app-default #kt_menu_notifications .text-gray-500 {
    color: var(--ce-text-mute) !important;
}

/* =============================================================================
 * 12. RESPONSIVE
 * =============================================================================*/

@media (max-width: 991.98px) {
    body.app-blank .flex-center > .w-lg-500px {
        padding: 28px !important;
        border-radius: var(--ce-r-lg);
        margin: 12px;
    }
    body.app-blank .form h1 { font-size: 1.7rem !important; }
    .app-toolbar .page-heading { font-size: 1.4rem !important; }
    .app-toolbar { padding-top: 16px !important; padding-bottom: 14px !important; }
}

@media (max-width: 576px) {
    body.app-blank .flex-center > .w-lg-500px {
        padding: 22px !important;
        border-radius: var(--ce-r-md);
        margin: 8px;
    }
    body.app-blank .form h1 { font-size: 1.5rem !important; }
    body.app-blank .form .btn.btn-primary,
    body.app-blank .form .btn.btn-light {
        padding: 13px 16px !important;
        border-radius: 12px !important;
    }
}

/* =============================================================================
 * 13. AI WORKFLOW STUDIO — dark glass override
 *     (overrides _tabs.html inline styles to match futuristic theme)
 * =============================================================================*/

body.app-default {
    /* Remap the AIWS palette to dark-friendly values when on the futuristic shell */
    --aiws-primary: #A78BFA;
    --aiws-ink: var(--ce-text);
    --aiws-muted: var(--ce-text-mute);
    --aiws-line: var(--ce-stroke);
    --aiws-primary-soft: rgba(139, 92, 246, 0.14);
}

/* --- AIWS Hero already dark — just refine glow --- */
body.app-default .aiws-hero {
    box-shadow:
        0 30px 60px -22px rgba(139, 92, 246, 0.45),
        0 16px 32px -10px rgba(236, 72, 153, 0.25),
        0 0 0 1px var(--ce-stroke);
}

/* --- AIWS Tabs --- */
body.app-default .aiws-tabs {
    background: var(--ce-surface) !important;
    border-color: var(--ce-stroke) !important;
    box-shadow: 0 6px 20px -8px rgba(0, 0, 0, 0.35), 0 0 0 1px var(--ce-stroke);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
}
body.app-default .aiws-tab {
    color: var(--ce-text-mute) !important;
}
body.app-default .aiws-tab:hover {
    background: rgba(139, 92, 246, 0.14) !important;
    color: #F0ABFC !important;
}
body.app-default .aiws-tab.is-active {
    color: #ffffff !important;
    background: var(--ce-grad-violet) !important;
    box-shadow: 0 8px 18px -6px rgba(236, 72, 153, 0.55) !important;
}
body.app-default .aiws-tab-badge {
    background: rgba(244, 63, 94, 0.20);
    color: #FCA5A5;
}

/* --- AIWS Section header --- */
body.app-default .aiws-section-header h2 { color: var(--ce-text) !important; }
body.app-default .aiws-section-sub { color: var(--ce-text-mute) !important; }
body.app-default .aiws-section-sub a {
    color: #C4B5FD !important;
    font-weight: 600;
    text-decoration: none;
}
body.app-default .aiws-section-sub a:hover { color: #F0ABFC !important; text-decoration: underline; }
body.app-default .aiws-card-body .aiws-section-sub,
body.app-default .aiws-card-body p.aiws-section-sub { color: var(--ce-text-2) !important; }
body.app-default .aiws-card-body code {
    background: rgba(139, 92, 246, 0.16) !important;
    color: #E9D5FF !important;
    border-radius: 6px;
    padding: 1px 6px;
}
body.app-default .aiws-mono { color: var(--ce-text-2) !important; }

/* --- AIWS Stat tiles (glass) --- */
body.app-default .aiws-stat {
    background: var(--ce-surface) !important;
    border: 1px solid var(--ce-stroke) !important;
    color: var(--ce-text) !important;
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    box-shadow: var(--ce-shadow-sm);
    position: relative;
    overflow: hidden;
}
body.app-default .aiws-stat::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.40), transparent 50%, rgba(34, 211, 238, 0.30));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
    opacity: 0.5;
    transition: opacity 0.28s var(--ce-ease);
}
body.app-default .aiws-stat:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 36px -16px rgba(139, 92, 246, 0.35), 0 8px 16px rgba(0, 0, 0, 0.25);
    border-color: rgba(139, 92, 246, 0.30) !important;
}
body.app-default .aiws-stat:hover::before { opacity: 0.9; }
body.app-default .aiws-stat-label { color: var(--ce-text-mute) !important; }
body.app-default .aiws-stat-value { color: var(--ce-text) !important; }
body.app-default .aiws-stat-help  { color: var(--ce-text-mute) !important; }
body.app-default .aiws-stat-help a { color: #F0ABFC !important; }

/* Icon tone tints — brighter on dark */
body.app-default .aiws-stat-icon {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.20), rgba(34, 211, 238, 0.12)) !important;
    color: #C4B5FD !important;
}
body.app-default .aiws-stat-icon.aiws-tone-cyan {
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.22), rgba(45, 212, 191, 0.14)) !important;
    color: #67E8F9 !important;
}
body.app-default .aiws-stat-icon.aiws-tone-green {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.22), rgba(45, 212, 191, 0.14)) !important;
    color: #86EFAC !important;
}
body.app-default .aiws-stat-icon.aiws-tone-amber {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.22), rgba(244, 114, 182, 0.14)) !important;
    color: #FCD34D !important;
}
body.app-default .aiws-stat-icon.aiws-tone-rose {
    background: linear-gradient(135deg, rgba(244, 63, 94, 0.22), rgba(236, 72, 153, 0.18)) !important;
    color: #FCA5A5 !important;
}

/* --- AIWS Cards (surface) --- */
body.app-default .aiws-card,
body.app-default .aiws-tile,
body.app-default .aiws-meter,
body.app-default .aiws-review {
    background: var(--ce-surface) !important;
    border: 1px solid var(--ce-stroke) !important;
    color: var(--ce-text) !important;
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    box-shadow: var(--ce-shadow-sm);
    position: relative;
}
body.app-default .aiws-tile::before,
body.app-default .aiws-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.35), transparent 55%, rgba(34, 211, 238, 0.25));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
    opacity: 0.35;
    transition: opacity 0.28s var(--ce-ease);
}
body.app-default .aiws-tile:hover,
body.app-default .aiws-card:hover { box-shadow: var(--ce-shadow-md); transform: translateY(-2px); border-color: rgba(139, 92, 246, 0.30) !important; }
body.app-default .aiws-tile:hover::before,
body.app-default .aiws-card:hover::before { opacity: 0.8; }

body.app-default .aiws-card-header { border-bottom-color: var(--ce-stroke) !important; }
body.app-default .aiws-card-header h3 { color: var(--ce-text) !important; }

body.app-default .aiws-tile-icon {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.22), rgba(236, 72, 153, 0.12)) !important;
    color: #C4B5FD !important;
}
body.app-default .aiws-tile-title { color: var(--ce-text) !important; }
body.app-default .aiws-tile-meta { color: var(--ce-text-mute-2) !important; }
body.app-default .aiws-tile-desc { color: var(--ce-text-2) !important; }

/* --- AIWS Meter / progress --- */
body.app-default .aiws-meter-label { color: var(--ce-text) !important; }
body.app-default .aiws-meter-value { color: var(--ce-text-mute) !important; }
body.app-default .aiws-meter-track { background: rgba(255, 255, 255, 0.06) !important; }
body.app-default .aiws-meter-fill { background: linear-gradient(90deg, #8B5CF6, #22D3EE) !important; }
body.app-default .aiws-meter-fill.aiws-fill-warning { background: linear-gradient(90deg, #F59E0B, #F97316) !important; }
body.app-default .aiws-meter-fill.aiws-fill-danger  { background: linear-gradient(90deg, #EF4444, #EC4899) !important; }
body.app-default .aiws-meter-note { color: var(--ce-text-mute) !important; }
body.app-default .aiws-meter-note.aiws-note-warning { color: #FCD34D !important; }
body.app-default .aiws-meter-note.aiws-note-danger  { color: #FCA5A5 !important; }

/* --- AIWS Chips (status pills) --- */
body.app-default .aiws-chip { background: rgba(255, 255, 255, 0.06) !important; color: var(--ce-text) !important; }
body.app-default .aiws-chip-success { background: rgba(34, 197, 94, 0.18) !important; color: #86EFAC !important; }
body.app-default .aiws-chip-warning { background: rgba(245, 158, 11, 0.18) !important; color: #FCD34D !important; }
body.app-default .aiws-chip-danger  { background: rgba(239, 68, 68, 0.18) !important; color: #FCA5A5 !important; }
body.app-default .aiws-chip-info    { background: rgba(34, 211, 238, 0.18) !important; color: #67E8F9 !important; }
body.app-default .aiws-chip-muted   { background: rgba(255, 255, 255, 0.06) !important; color: var(--ce-text-mute) !important; }

/* --- AIWS Donut gauge --- */
body.app-default .aiws-donut-track { stroke: rgba(255, 255, 255, 0.06) !important; }
body.app-default .aiws-donut-pct { color: var(--ce-text) !important; }
body.app-default .aiws-donut-label { color: var(--ce-text-mute) !important; }

/* --- AIWS Table --- */
body.app-default .aiws-table thead th { color: var(--ce-text-mute) !important; border-bottom-color: var(--ce-stroke) !important; }
body.app-default .aiws-table tbody td { color: var(--ce-text-2) !important; border-bottom-color: var(--ce-stroke) !important; }
body.app-default .aiws-table tbody tr:hover { background: rgba(139, 92, 246, 0.06) !important; }
body.app-default .aiws-table .aiws-strong { color: var(--ce-text) !important; }
body.app-default .aiws-table .aiws-muted  { color: var(--ce-text-mute) !important; }

/* --- AIWS Review queue --- */
body.app-default .aiws-review-title   { color: var(--ce-text) !important; }
body.app-default .aiws-review-summary { color: var(--ce-text-mute) !important; }
body.app-default .aiws-review-icon {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.22), rgba(244, 114, 182, 0.14)) !important;
    color: #FCD34D !important;
}

/* --- AIWS Empty state --- */
body.app-default .aiws-empty h4 { color: var(--ce-text) !important; }
body.app-default .aiws-empty p { color: var(--ce-text-mute) !important; }
body.app-default .aiws-empty-icon {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.22), rgba(34, 211, 238, 0.14)) !important;
    color: #C4B5FD !important;
}

/* --- AIWS Definition list --- */
body.app-default .aiws-dl dt { color: var(--ce-text-mute) !important; border-bottom-color: var(--ce-stroke) !important; }
body.app-default .aiws-dl dd { color: var(--ce-text) !important; border-bottom-color: var(--ce-stroke) !important; }
body.app-default .aiws-dl pre {
    background: rgba(255, 255, 255, 0.04) !important;
    color: #CBD5E1 !important;
    border: 1px solid var(--ce-stroke);
}

/* =============================================================================
 * 13c. AI WORKFLOW STUDIO — Per-workflow template overrides
 *
 *      Each workflow template (sage / payroll / search / configure / run detail
 *      / locked) ships its own page-local <style> block that hard-codes a
 *      LIGHT theme (white card backgrounds, dark text). On the futuristic dark
 *      shell that produces unreadable "light text on white card" contrast
 *      and washed-out chips. We override every named class so the templates
 *      pick up the dark glass system + the brand colour palette.
 *
 *      We DO NOT touch the HTML. Specificity is high enough to beat the
 *      page-local <style> rules (because all these workflow pages render
 *      inside body.app-default and #kt_app_content).
 *
 *      Brand palette used here:
 *        violet  #8B5CF6  --  primary
 *        pink    #EC4899  --  secondary
 *        cyan    #22D3EE  --  accent / info
 *        teal    #2DD4BF  --  accent
 *        green   #22C55E  --  success
 *        amber   #F59E0B  --  warning
 *        rose    #F43F5E  --  danger
 *      Text:  light  #F1F5F9  /  muted  #94A3B8
 * =============================================================================*/

/* ---------------------------------------------------------------------------
 * Common: kill any hard-coded white "background: #fff" on workflow template
 * scoped surfaces. Use dark glass instead.
 * --------------------------------------------------------------------------- */

/* AIWS Pill (used throughout workflow heros) */
body.app-default .aiws-pill {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid var(--ce-stroke) !important;
    color: var(--ce-text-2) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
body.app-default .aiws-pill i {
    color: #C4B5FD !important;
}

/* ---------- Workflows list / overview tiles in workflows.html ---------- */
body.app-default .aiws-chip-dot {
    background: linear-gradient(135deg, #8B5CF6, #EC4899) !important;
    box-shadow: 0 0 8px rgba(236, 72, 153, 0.55);
}

/* ===========================================================================
 *  PAYROLL workbench (.pay-*)
 *  Light amber theme → dark glass + amber gradient accents
 * =========================================================================== */
body.app-default .pay-hero {
    background:
        radial-gradient(120% 120% at 0% 0%, rgba(245, 158, 11, 0.22) 0%, transparent 55%),
        radial-gradient(120% 120% at 100% 100%, rgba(139, 92, 246, 0.20) 0%, transparent 55%),
        linear-gradient(180deg, rgba(20, 24, 48, 0.85) 0%, rgba(15, 18, 38, 0.85) 100%) !important;
    border: 1px solid rgba(245, 158, 11, 0.22) !important;
    box-shadow:
        0 22px 50px -22px rgba(245, 158, 11, 0.28),
        0 0 0 1px var(--ce-stroke) !important;
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
}
body.app-default .pay-hero-badge {
    background: linear-gradient(135deg, #F59E0B 0%, #EC4899 100%) !important;
    box-shadow: 0 12px 24px -8px rgba(245, 158, 11, 0.6) !important;
}
body.app-default .pay-hero-eyebrow {
    color: #FCD34D !important;
}
body.app-default .pay-hero-title { color: var(--ce-text) !important; }
body.app-default .pay-hero-sub  { color: var(--ce-text-mute) !important; }

body.app-default .pay-info-strip .aiws-pill {
    background: rgba(245, 158, 11, 0.10) !important;
    border-color: rgba(245, 158, 11, 0.22) !important;
    color: var(--ce-text-2) !important;
}
body.app-default .pay-info-strip .aiws-pill i { color: #FCD34D !important; }

body.app-default .pay-upload {
    border-color: rgba(245, 158, 11, 0.40) !important;
    background: linear-gradient(180deg, rgba(245, 158, 11, 0.06) 0%, rgba(20, 24, 48, 0.55) 90%) !important;
}
body.app-default .pay-upload:hover,
body.app-default .pay-upload.is-drag {
    border-color: #FCD34D !important;
    background: rgba(245, 158, 11, 0.10) !important;
}
body.app-default .pay-upload-icon {
    background: rgba(245, 158, 11, 0.18) !important;
    color: #FCD34D !important;
    box-shadow: 0 0 24px -6px rgba(245, 158, 11, 0.45);
}
body.app-default .pay-upload h4 { color: var(--ce-text) !important; }
body.app-default .pay-upload p  { color: var(--ce-text-mute) !important; }
body.app-default .pay-file-pill {
    background: rgba(245, 158, 11, 0.18) !important;
    color: #FCD34D !important;
}

body.app-default .pay-progress { background: rgba(255, 255, 255, 0.08) !important; }
body.app-default .pay-progress .bar {
    background: linear-gradient(90deg, #F59E0B, #EC4899) !important;
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.55);
}

body.app-default .pay-result {
    background: rgba(245, 158, 11, 0.10) !important;
    border-color: rgba(245, 158, 11, 0.28) !important;
    color: #FCD34D !important;
}
body.app-default .pay-result.error {
    background: rgba(244, 63, 94, 0.10) !important;
    border-color: rgba(244, 63, 94, 0.30) !important;
    color: #FCA5A5 !important;
}

/* Form rows */
body.app-default .pay-settings-row label,
body.app-default .pay-settings-row .hint { color: var(--ce-text-mute) !important; }
body.app-default .pay-settings-row input,
body.app-default .pay-settings-row select {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid var(--ce-stroke-2) !important;
    color: var(--ce-text) !important;
}
body.app-default .pay-settings-row input:focus,
body.app-default .pay-settings-row select:focus {
    border-color: #FCD34D !important;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.20) !important;
    background: rgba(255, 255, 255, 0.06) !important;
}
body.app-default .pay-settings-row.is-toggle {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: var(--ce-stroke-2) !important;
}
body.app-default .pay-settings-row.is-toggle label { color: var(--ce-text) !important; }

body.app-default .pay-run-card {
    background: rgba(255, 255, 255, 0.035) !important;
    border: 1px solid var(--ce-stroke) !important;
    color: var(--ce-text) !important;
    backdrop-filter: blur(10px);
}
body.app-default .pay-run-card:hover {
    border-color: rgba(245, 158, 11, 0.45) !important;
    box-shadow: 0 16px 36px -18px rgba(245, 158, 11, 0.35);
}
body.app-default .pay-run-icon {
    background: rgba(245, 158, 11, 0.18) !important;
    color: #FCD34D !important;
}
body.app-default .pay-run-icon.aiws-tone-green {
    background: rgba(34, 197, 94, 0.18) !important;
    color: #86EFAC !important;
}
body.app-default .pay-run-icon.aiws-tone-rose {
    background: rgba(244, 63, 94, 0.18) !important;
    color: #FCA5A5 !important;
}
body.app-default .pay-run-title { color: var(--ce-text) !important; }
body.app-default .pay-run-meta  { color: var(--ce-text-mute) !important; }

body.app-default .pay-summary-cells .cell {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02)) !important;
    border-color: var(--ce-stroke) !important;
}
body.app-default .pay-summary-cells .cell .label { color: var(--ce-text-mute) !important; }
body.app-default .pay-summary-cells .cell .value { color: var(--ce-text) !important; }
body.app-default .pay-summary-cells .cell.amber { border-color: rgba(245, 158, 11, 0.40) !important; box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.10); }
body.app-default .pay-summary-cells .cell.amber .value { color: #FCD34D !important; }
body.app-default .pay-summary-cells .cell.green { border-color: rgba(34, 197, 94, 0.40) !important; }
body.app-default .pay-summary-cells .cell.green .value { color: #86EFAC !important; }
body.app-default .pay-summary-cells .cell.rose  { border-color: rgba(244, 63, 94, 0.40) !important; }
body.app-default .pay-summary-cells .cell.rose  .value { color: #FCA5A5 !important; }

body.app-default .pay-cols-card {
    background: rgba(139, 92, 246, 0.06) !important;
    border-color: var(--ce-stroke) !important;
}
body.app-default .pay-cols-grid .col {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: var(--ce-stroke) !important;
    color: var(--ce-text-2) !important;
}

body.app-default .pay-info-empty       { color: var(--ce-text-mute) !important; }
body.app-default .pay-info-empty i     { color: rgba(255, 255, 255, 0.20) !important; }

/* Run-detail page payroll bits */
body.app-default .pay-batch-banner.ok   { background: rgba(34, 197, 94, 0.10) !important; color: #86EFAC !important; border-color: rgba(34, 197, 94, 0.30) !important; }
body.app-default .pay-batch-banner.warn { background: rgba(245, 158, 11, 0.10) !important; color: #FCD34D !important; border-color: rgba(245, 158, 11, 0.30) !important; }
body.app-default .pay-batch-banner.bad  { background: rgba(244, 63, 94, 0.10) !important; color: #FCA5A5 !important; border-color: rgba(244, 63, 94, 0.30) !important; }

/* ===========================================================================
 *  SAGE workbench (.sage-*)
 *  Light green theme → dark glass + emerald-cyan gradient accents
 * =========================================================================== */
body.app-default .sage-hero-card {
    background:
        radial-gradient(120% 120% at 0% 0%, rgba(34, 197, 94, 0.22) 0%, transparent 55%),
        radial-gradient(120% 120% at 100% 100%, rgba(139, 92, 246, 0.18) 0%, transparent 55%),
        linear-gradient(180deg, rgba(20, 24, 48, 0.85) 0%, rgba(15, 18, 38, 0.85) 100%) !important;
    border: 1px solid rgba(34, 197, 94, 0.22) !important;
    box-shadow:
        0 22px 50px -22px rgba(34, 197, 94, 0.28),
        0 0 0 1px var(--ce-stroke) !important;
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
}
body.app-default .sage-hero-badge {
    background: linear-gradient(135deg, #22C55E 0%, #2DD4BF 100%) !important;
    box-shadow: 0 12px 24px -8px rgba(34, 197, 94, 0.6) !important;
}
body.app-default .sage-hero-eyebrow { color: #86EFAC !important; }
body.app-default .sage-hero-title   { color: var(--ce-text) !important; }
body.app-default .sage-hero-sub     { color: var(--ce-text-mute) !important; }

body.app-default .sage-info-strip .aiws-pill {
    background: rgba(34, 197, 94, 0.10) !important;
    border-color: rgba(34, 197, 94, 0.22) !important;
    color: var(--ce-text-2) !important;
}
body.app-default .sage-info-strip .aiws-pill i { color: #86EFAC !important; }

body.app-default .sage-upload {
    border-color: rgba(34, 197, 94, 0.40) !important;
    background: linear-gradient(180deg, rgba(34, 197, 94, 0.06) 0%, rgba(20, 24, 48, 0.55) 90%) !important;
}
body.app-default .sage-upload:hover,
body.app-default .sage-upload.is-drag {
    border-color: #4ADE80 !important;
    background: rgba(34, 197, 94, 0.10) !important;
}
body.app-default .sage-upload-icon {
    background: rgba(34, 197, 94, 0.18) !important;
    color: #86EFAC !important;
    box-shadow: 0 0 24px -6px rgba(34, 197, 94, 0.45);
}
body.app-default .sage-upload h4 { color: var(--ce-text) !important; }
body.app-default .sage-upload p  { color: var(--ce-text-mute) !important; }
body.app-default .sage-file-pill {
    background: rgba(34, 197, 94, 0.18) !important;
    color: #86EFAC !important;
}

body.app-default .sage-progress { background: rgba(255, 255, 255, 0.08) !important; }
body.app-default .sage-progress .bar {
    background: linear-gradient(90deg, #22C55E, #22D3EE) !important;
    box-shadow: 0 0 12px rgba(34, 197, 94, 0.55);
}

body.app-default .sage-result {
    background: rgba(34, 197, 94, 0.10) !important;
    border-color: rgba(34, 197, 94, 0.28) !important;
    color: #86EFAC !important;
}
body.app-default .sage-result.error {
    background: rgba(244, 63, 94, 0.10) !important;
    border-color: rgba(244, 63, 94, 0.30) !important;
    color: #FCA5A5 !important;
}

/* Sage chart-of-accounts inputs */
body.app-default .sage-coa-row label { color: var(--ce-text-mute) !important; }
body.app-default .sage-coa-row input,
body.app-default .sage-coa-row select {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid var(--ce-stroke-2) !important;
    color: var(--ce-text) !important;
}
body.app-default .sage-coa-row input:focus,
body.app-default .sage-coa-row select:focus {
    border-color: #4ADE80 !important;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18) !important;
    background: rgba(255, 255, 255, 0.06) !important;
}
body.app-default .sage-coa-row .hint { color: var(--ce-text-mute) !important; }

body.app-default .sage-batch-card {
    background: rgba(255, 255, 255, 0.035) !important;
    border: 1px solid var(--ce-stroke) !important;
    color: var(--ce-text) !important;
    backdrop-filter: blur(10px);
}
body.app-default .sage-batch-card:hover {
    border-color: rgba(34, 197, 94, 0.45) !important;
    box-shadow: 0 16px 36px -18px rgba(34, 197, 94, 0.35);
}
body.app-default .sage-batch-icon {
    background: rgba(34, 197, 94, 0.18) !important;
    color: #86EFAC !important;
}
body.app-default .sage-batch-icon.aiws-tone-amber {
    background: rgba(245, 158, 11, 0.18) !important;
    color: #FCD34D !important;
}
body.app-default .sage-batch-icon.aiws-tone-rose {
    background: rgba(244, 63, 94, 0.18) !important;
    color: #FCA5A5 !important;
}
body.app-default .sage-batch-title { color: var(--ce-text) !important; }
body.app-default .sage-batch-meta  { color: var(--ce-text-mute) !important; }

body.app-default .sage-vat-code {
    background: rgba(139, 92, 246, 0.06) !important;
    border-color: var(--ce-stroke) !important;
}
body.app-default .sage-vat-code .code  { color: #C4B5FD !important; }
body.app-default .sage-vat-code .rate  { color: var(--ce-text-mute) !important; }
body.app-default .sage-vat-code .label { color: var(--ce-text-2) !important; }

body.app-default .sage-segmented {
    background: rgba(255, 255, 255, 0.035) !important;
    border-color: var(--ce-stroke-2) !important;
    box-shadow: var(--ce-shadow-sm) !important;
}
body.app-default .sage-segmented button {
    color: var(--ce-text-mute) !important;
    background: transparent !important;
}
body.app-default .sage-segmented button:hover {
    background: rgba(34, 197, 94, 0.12) !important;
    color: #86EFAC !important;
}
body.app-default .sage-segmented button.is-active {
    background: linear-gradient(135deg, #22C55E 0%, #2DD4BF 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 16px -6px rgba(34, 197, 94, 0.55) !important;
}
body.app-default .sage-segmented .count {
    background: rgba(255, 255, 255, 0.10) !important;
    color: inherit !important;
}
body.app-default .sage-segmented button.is-active .count {
    background: rgba(255, 255, 255, 0.28) !important;
}

body.app-default .sage-stmt-row {
    background: rgba(255, 255, 255, 0.035) !important;
    border-color: var(--ce-stroke) !important;
    color: var(--ce-text) !important;
    backdrop-filter: blur(10px);
}
body.app-default .sage-stmt-row:hover {
    border-color: rgba(34, 211, 238, 0.45) !important;
    box-shadow: 0 16px 36px -18px rgba(34, 211, 238, 0.35);
}
body.app-default .sage-stmt-icon {
    background: rgba(34, 211, 238, 0.18) !important;
    color: #67E8F9 !important;
}
body.app-default .sage-stmt-title { color: var(--ce-text) !important; }
body.app-default .sage-stmt-meta  { color: var(--ce-text-mute) !important; }

body.app-default .sage-recon-select {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: var(--ce-stroke-2) !important;
    color: var(--ce-text) !important;
}
body.app-default .sage-recon-select:focus {
    border-color: #4ADE80 !important;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18) !important;
}
body.app-default .sage-recon-summary .cell {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02)) !important;
    border-color: var(--ce-stroke) !important;
}
body.app-default .sage-recon-summary .cell .label { color: var(--ce-text-mute) !important; }
body.app-default .sage-recon-summary .cell .value { color: var(--ce-text) !important; }
body.app-default .sage-recon-summary .cell.green { border-color: rgba(34, 197, 94, 0.40) !important; }
body.app-default .sage-recon-summary .cell.green .value { color: #86EFAC !important; }
body.app-default .sage-recon-summary .cell.amber { border-color: rgba(245, 158, 11, 0.40) !important; }
body.app-default .sage-recon-summary .cell.amber .value { color: #FCD34D !important; }
body.app-default .sage-recon-summary .cell.rose  { border-color: rgba(244, 63, 94, 0.40) !important; }
body.app-default .sage-recon-summary .cell.rose  .value { color: #FCA5A5 !important; }

body.app-default .sage-info-empty   { color: var(--ce-text-mute) !important; }
body.app-default .sage-info-empty i { color: rgba(255, 255, 255, 0.20) !important; }

/* Run-detail page sage bits */
body.app-default .bank-amount-pos { color: #86EFAC !important; }
body.app-default .bank-amount-neg { color: #FCA5A5 !important; }
body.app-default .bank-amount-neutral { color: var(--ce-text-mute) !important; }
body.app-default .recon-conf.medium { background: rgba(245, 158, 11, 0.18) !important; color: #FCD34D !important; }
body.app-default .recon-link        { color: #C4B5FD !important; }
body.app-default .recon-link:hover  { color: #F0ABFC !important; }
body.app-default .sage-entry-num    { color: var(--ce-text) !important; }
body.app-default .sage-entry-party  { color: var(--ce-text) !important; }
body.app-default .sage-entry-meta   { color: var(--ce-text-mute) !important; }
body.app-default .sage-warn         { color: #FCD34D !important; }

/* ===========================================================================
 *  Run-detail inline template classes (.recon-*, .bank-*, .pay-summary,
 *  .sage-summary, .sage-journal) — page-local <style> uses white gradients
 * =========================================================================== */

/* Summary metric grids — full-width responsive layout */
body.app-default #kt_app_content .recon-summary,
body.app-default #kt_app_content .sage-summary,
body.app-default #kt_app_content .bank-summary,
body.app-default #kt_app_content .pay-summary {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
    width: 100% !important;
    margin-bottom: 18px !important;
}
@media (min-width: 768px) {
    body.app-default #kt_app_content .recon-summary,
    body.app-default #kt_app_content .sage-summary,
    body.app-default #kt_app_content .bank-summary,
    body.app-default #kt_app_content .pay-summary {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}
@media (min-width: 1200px) {
    body.app-default #kt_app_content .recon-summary {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    }
}

/* Shared dark-glass summary cells */
body.app-default #kt_app_content .recon-summary .cell,
body.app-default #kt_app_content .sage-summary .cell,
body.app-default #kt_app_content .bank-summary .cell,
body.app-default #kt_app_content .pay-summary .cell,
body.app-default .sage-recon-summary .cell {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)) !important;
    border: 1px solid var(--ce-stroke) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
body.app-default #kt_app_content .recon-summary .cell .label,
body.app-default #kt_app_content .sage-summary .cell .label,
body.app-default #kt_app_content .bank-summary .cell .label,
body.app-default #kt_app_content .pay-summary .cell .label,
body.app-default .sage-recon-summary .cell .label {
    color: var(--ce-text-mute) !important;
    font-weight: 700 !important;
}
body.app-default #kt_app_content .recon-summary .cell .value,
body.app-default #kt_app_content .sage-summary .cell .value,
body.app-default #kt_app_content .bank-summary .cell .value,
body.app-default #kt_app_content .pay-summary .cell .value,
body.app-default .sage-recon-summary .cell .value {
    color: var(--ce-text) !important;
}

/* Tone variants — bright accent values on dark glass */
body.app-default #kt_app_content .recon-summary .cell.green,
body.app-default #kt_app_content .sage-summary .cell.balanced,
body.app-default #kt_app_content .bank-summary .cell.green,
body.app-default #kt_app_content .pay-summary .cell.ready,
body.app-default .sage-recon-summary .cell.green {
    border-color: rgba(34, 197, 94, 0.40) !important;
    background: linear-gradient(180deg, rgba(34, 197, 94, 0.12), rgba(255, 255, 255, 0.02)) !important;
}
body.app-default #kt_app_content .recon-summary .cell.green .value,
body.app-default #kt_app_content .sage-summary .cell.balanced .value,
body.app-default #kt_app_content .bank-summary .cell.green .value,
body.app-default #kt_app_content .pay-summary .cell.ready .value,
body.app-default .sage-recon-summary .cell.green .value {
    color: #86EFAC !important;
}

body.app-default #kt_app_content .recon-summary .cell.amber,
body.app-default #kt_app_content .pay-summary .cell.warn,
body.app-default .sage-recon-summary .cell.amber {
    border-color: rgba(245, 158, 11, 0.40) !important;
    background: linear-gradient(180deg, rgba(245, 158, 11, 0.12), rgba(255, 255, 255, 0.02)) !important;
}
body.app-default #kt_app_content .recon-summary .cell.amber .value,
body.app-default #kt_app_content .pay-summary .cell.warn .value,
body.app-default .sage-recon-summary .cell.amber .value {
    color: #FCD34D !important;
}

body.app-default #kt_app_content .recon-summary .cell.rose,
body.app-default #kt_app_content .sage-summary .cell.unbalanced,
body.app-default #kt_app_content .bank-summary .cell.rose,
body.app-default #kt_app_content .pay-summary .cell.bad,
body.app-default .sage-recon-summary .cell.rose {
    border-color: rgba(244, 63, 94, 0.40) !important;
    background: linear-gradient(180deg, rgba(244, 63, 94, 0.12), rgba(255, 255, 255, 0.02)) !important;
}
body.app-default #kt_app_content .recon-summary .cell.rose .value,
body.app-default #kt_app_content .sage-summary .cell.unbalanced .value,
body.app-default #kt_app_content .bank-summary .cell.rose .value,
body.app-default #kt_app_content .pay-summary .cell.bad .value,
body.app-default .sage-recon-summary .cell.rose .value {
    color: #FCA5A5 !important;
}

body.app-default #kt_app_content .bank-summary .cell.blue .value { color: #67E8F9 !important; }
body.app-default #kt_app_content .bank-summary .cell.blue {
    border-color: rgba(34, 211, 238, 0.35) !important;
    background: linear-gradient(180deg, rgba(34, 211, 238, 0.10), rgba(255, 255, 255, 0.02)) !important;
}

/* Reconciliation groups & rows */
body.app-default #kt_app_content .recon-group {
    background: rgba(255, 255, 255, 0.02) !important;
    border-color: var(--ce-stroke) !important;
}
body.app-default #kt_app_content .recon-group-head {
    color: var(--ce-text) !important;
    border-bottom-color: var(--ce-stroke) !important;
}
body.app-default #kt_app_content .recon-group.matched .recon-group-head {
    background: rgba(34, 197, 94, 0.10) !important;
    color: #86EFAC !important;
}
body.app-default #kt_app_content .recon-group.suggested .recon-group-head {
    background: rgba(245, 158, 11, 0.10) !important;
    color: #FCD34D !important;
}
body.app-default #kt_app_content .recon-group.unmatched .recon-group-head {
    background: rgba(244, 63, 94, 0.10) !important;
    color: #FCA5A5 !important;
}
body.app-default #kt_app_content .recon-row {
    color: var(--ce-text-2) !important;
    border-bottom-color: var(--ce-stroke) !important;
}
body.app-default #kt_app_content .recon-row > div:first-child,
body.app-default #kt_app_content .recon-row > div:nth-child(2) > div:first-child {
    color: var(--ce-text) !important;
}
body.app-default #kt_app_content .recon-row .meta { color: var(--ce-text-mute) !important; }
body.app-default #kt_app_content .recon-row .amount.pos { color: #86EFAC !important; }
body.app-default #kt_app_content .recon-row .amount.neg { color: #FCA5A5 !important; }
body.app-default #kt_app_content .recon-conf {
    background: rgba(34, 197, 94, 0.18) !important;
    color: #86EFAC !important;
}

/* Sage journal entries (run detail) */
body.app-default #kt_app_content .sage-entry {
    background: rgba(255, 255, 255, 0.02) !important;
    border-color: var(--ce-stroke) !important;
}
body.app-default #kt_app_content .sage-entry-head {
    background: rgba(139, 92, 246, 0.10) !important;
    border-bottom-color: var(--ce-stroke) !important;
}
body.app-default #kt_app_content .sage-journal {
    border-bottom-color: var(--ce-stroke) !important;
    color: var(--ce-text-2) !important;
}
body.app-default #kt_app_content .sage-journal .side.DR {
    background: rgba(139, 92, 246, 0.18) !important;
    color: #C4B5FD !important;
}
body.app-default #kt_app_content .sage-journal .side.CR {
    background: rgba(34, 211, 238, 0.18) !important;
    color: #67E8F9 !important;
}
body.app-default #kt_app_content .sage-journal .narrative { color: var(--ce-text) !important; }
body.app-default #kt_app_content .sage-journal .nominal  { color: var(--ce-text-mute) !important; }
body.app-default #kt_app_content .sage-journal .amount   { color: var(--ce-text) !important; }
body.app-default #kt_app_content .sage-warn {
    background: rgba(245, 158, 11, 0.10) !important;
    border-color: rgba(245, 158, 11, 0.35) !important;
    color: #FCD34D !important;
}

/* Payroll / bank tables in run detail */
body.app-default #kt_app_content .pay-table thead th {
    background: rgba(255, 255, 255, 0.04) !important;
    color: var(--ce-text-mute) !important;
}
body.app-default #kt_app_content .pay-table tbody td { color: var(--ce-text-2) !important; }

/* JSON / debug pre blocks inside AIWS cards */
body.app-default #kt_app_content .aiws-card-body pre,
body.app-default #kt_app_content .aiws-card pre {
    background: rgba(255, 255, 255, 0.04) !important;
    color: #CBD5E1 !important;
    border: 1px solid var(--ce-stroke) !important;
}

/* Inline error banners in run detail */
body.app-default #kt_app_content .aiws-card-body [style*="991b1b"],
body.app-default #kt_app_content .aiws-card-body [style*="dc2626"] {
    color: #FCA5A5 !important;
    background: rgba(244, 63, 94, 0.10) !important;
    border-color: rgba(244, 63, 94, 0.30) !important;
}

/* Double-entry journal sub-header strip */
body.app-default #kt_app_content .sage-entry [style*="Double-entry"],
body.app-default #kt_app_content .sage-entry div[style*="rgba(15, 23, 42"] {
    background: rgba(255, 255, 255, 0.03) !important;
    border-top-color: var(--ce-stroke) !important;
    color: var(--ce-text-mute) !important;
}

/* Approval sidebar — glass polish */
body.app-default #kt_app_content .col-lg-4 > .aiws-card {
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
}

/* ===========================================================================
 *  FOLDER SEARCH (.aiws-search-*, .aiws-side-*, .aiws-msg-*, .aiws-composer-*)
 *  Light theme → dark glass + violet/cyan chat aesthetics
 * =========================================================================== */
body.app-default .aiws-side-card {
    background: var(--ce-surface) !important;
    border: 1px solid var(--ce-stroke) !important;
    color: var(--ce-text) !important;
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    box-shadow: var(--ce-shadow-sm);
}
body.app-default .aiws-side-card h4 { color: var(--ce-text-mute) !important; }

body.app-default .aiws-source-toggle {
    background: rgba(255, 255, 255, 0.035) !important;
    border: 1px solid transparent !important;
    color: var(--ce-text) !important;
}
body.app-default .aiws-source-toggle:hover {
    background: rgba(139, 92, 246, 0.10) !important;
}
body.app-default .aiws-source-toggle.is-active {
    background: rgba(139, 92, 246, 0.16) !important;
    border-color: rgba(139, 92, 246, 0.45) !important;
    color: #C4B5FD !important;
}
body.app-default .aiws-source-toggle .src-meta { color: var(--ce-text-mute) !important; }

body.app-default .aiws-account-row {
    background: rgba(255, 255, 255, 0.035) !important;
    border-color: var(--ce-stroke) !important;
    color: var(--ce-text) !important;
}
body.app-default .aiws-account-row.is-disabled { background: rgba(255, 255, 255, 0.02) !important; }
body.app-default .aiws-account-icon {
    background: rgba(139, 92, 246, 0.16) !important;
    color: #C4B5FD !important;
}
body.app-default .aiws-account-icon.gmail { background: rgba(244, 63, 94, 0.16) !important; color: #FCA5A5 !important; }
body.app-default .aiws-account-icon.m365  { background: rgba(27, 132, 255, 0.16) !important; color: #93C5FD !important; }
body.app-default .aiws-account-name   { color: var(--ce-text) !important; }
body.app-default .aiws-account-remove { color: var(--ce-text-mute) !important; }
body.app-default .aiws-account-remove:hover { color: #FCA5A5 !important; }

body.app-default .aiws-connect-btn {
    background: rgba(139, 92, 246, 0.10) !important;
    border-color: rgba(139, 92, 246, 0.40) !important;
    color: #C4B5FD !important;
}
body.app-default .aiws-connect-btn:hover {
    background: rgba(139, 92, 246, 0.18) !important;
    border-color: #C4B5FD !important;
    color: #F0ABFC !important;
}

body.app-default .aiws-session-item {
    color: var(--ce-text-2) !important;
    background: transparent !important;
}
body.app-default .aiws-session-item:hover { background: rgba(139, 92, 246, 0.10) !important; }
body.app-default .aiws-session-item.is-active {
    background: rgba(139, 92, 246, 0.18) !important;
    color: #F0ABFC !important;
}
body.app-default .aiws-session-item .ses-meta { color: var(--ce-text-mute) !important; }

body.app-default .aiws-thread {
    background: var(--ce-surface) !important;
    border: 1px solid var(--ce-stroke) !important;
    color: var(--ce-text) !important;
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
}
body.app-default .aiws-thread.is-empty {
    background:
        radial-gradient(60% 60% at 50% 0%, rgba(139, 92, 246, 0.10) 0%, transparent 60%),
        var(--ce-surface) !important;
}

body.app-default .aiws-empty-hero h3 { color: var(--ce-text) !important; }
body.app-default .aiws-empty-hero p  { color: var(--ce-text-mute) !important; }
body.app-default .aiws-empty-hero-icon {
    background: linear-gradient(135deg, #8B5CF6 0%, #22D3EE 100%) !important;
    box-shadow: 0 18px 36px -10px rgba(139, 92, 246, 0.55) !important;
}

body.app-default .aiws-suggestion-chip {
    background: rgba(139, 92, 246, 0.10) !important;
    border-color: rgba(139, 92, 246, 0.25) !important;
    color: #C4B5FD !important;
}
body.app-default .aiws-suggestion-chip:hover {
    background: rgba(139, 92, 246, 0.18) !important;
    color: #F0ABFC !important;
}
body.app-default .aiws-suggestion-chip i { color: #C4B5FD !important; }

/* Chat messages */
body.app-default .aiws-msg-user .bubble {
    background: linear-gradient(135deg, #8B5CF6 0%, #EC4899 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 22px -8px rgba(236, 72, 153, 0.55) !important;
}
body.app-default .aiws-msg-ai .avatar {
    background: linear-gradient(135deg, #22D3EE 0%, #8B5CF6 100%) !important;
    box-shadow: 0 10px 22px -8px rgba(34, 211, 238, 0.55) !important;
}
body.app-default .aiws-ai-bubble {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: var(--ce-stroke) !important;
    color: var(--ce-text) !important;
    backdrop-filter: blur(10px);
}
body.app-default .aiws-ai-bubble h1,
body.app-default .aiws-ai-bubble h2,
body.app-default .aiws-ai-bubble h3,
body.app-default .aiws-ai-bubble h4,
body.app-default .aiws-ai-bubble h5,
body.app-default .aiws-ai-bubble h6,
body.app-default .aiws-ai-bubble strong { color: var(--ce-text) !important; }
body.app-default .aiws-ai-bubble li::marker { color: #C4B5FD !important; }
body.app-default .aiws-ai-bubble a {
    color: #C4B5FD !important;
    border-bottom-color: rgba(196, 181, 253, 0.45) !important;
}
body.app-default .aiws-ai-bubble blockquote {
    background: rgba(139, 92, 246, 0.06) !important;
    border-left-color: #C4B5FD !important;
    color: var(--ce-text-2) !important;
}
body.app-default .aiws-ai-bubble code {
    background: rgba(139, 92, 246, 0.16) !important;
    color: #DDD6FE !important;
}
body.app-default .aiws-ai-bubble pre {
    background: #0B0F23 !important;
    color: #E2E8F0 !important;
    border: 1px solid var(--ce-stroke) !important;
}
body.app-default .aiws-ai-bubble hr { background: var(--ce-stroke) !important; }
body.app-default .aiws-ai-bubble .aiws-md-table-wrap {
    background: rgba(255, 255, 255, 0.02) !important;
    border-color: var(--ce-stroke) !important;
}
body.app-default .aiws-ai-bubble th {
    background: rgba(139, 92, 246, 0.10) !important;
    color: var(--ce-text) !important;
    border-bottom-color: var(--ce-stroke) !important;
}
body.app-default .aiws-ai-bubble td {
    color: var(--ce-text-2) !important;
    border-bottom-color: var(--ce-stroke) !important;
}
body.app-default .aiws-ai-bubble tbody tr:hover { background: rgba(139, 92, 246, 0.06) !important; }
body.app-default .aiws-ai-bubble img {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: var(--ce-stroke) !important;
}
body.app-default .aiws-ai-bubble .aiws-md-embed {
    background: #0B0F23 !important;
    border-color: var(--ce-stroke) !important;
}
body.app-default .aiws-ai-bubble kbd {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: var(--ce-stroke-2) !important;
    color: var(--ce-text) !important;
}
body.app-default .aiws-ai-cite {
    background: linear-gradient(135deg, #8B5CF6, #EC4899) !important;
    color: #ffffff !important;
    box-shadow: 0 0 8px rgba(139, 92, 246, 0.45);
}
body.app-default .aiws-ai-cite:hover {
    filter: brightness(1.1);
    color: #ffffff !important;
}

body.app-default .aiws-cite-pill {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: var(--ce-stroke) !important;
    color: var(--ce-text) !important;
}
body.app-default .aiws-cite-pill:hover {
    border-color: rgba(139, 92, 246, 0.45) !important;
    color: #C4B5FD !important;
    box-shadow: 0 10px 22px -10px rgba(139, 92, 246, 0.45);
}
body.app-default .aiws-cite-pill .num {
    background: linear-gradient(135deg, #8B5CF6, #EC4899) !important;
    color: #ffffff !important;
}

body.app-default .aiws-msg-meta { color: var(--ce-text-mute) !important; }

body.app-default .aiws-thinking { color: #C4B5FD !important; }
body.app-default .aiws-thinking .dot { background: #C4B5FD !important; box-shadow: 0 0 8px rgba(196, 181, 253, 0.55); }

/* Composer */
body.app-default .aiws-composer {
    background: var(--ce-surface) !important;
    border: 1px solid var(--ce-stroke) !important;
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    box-shadow: var(--ce-shadow-md) !important;
}
body.app-default .aiws-composer:focus-within {
    border-color: rgba(139, 92, 246, 0.55) !important;
    box-shadow:
        0 16px 36px -14px rgba(139, 92, 246, 0.45),
        0 0 0 3px rgba(139, 92, 246, 0.18) !important;
}
body.app-default .aiws-composer textarea {
    background: transparent !important;
    color: var(--ce-text) !important;
}
body.app-default .aiws-composer textarea::placeholder { color: var(--ce-text-mute-2) !important; }
body.app-default .aiws-composer-chip {
    background: rgba(255, 255, 255, 0.05) !important;
    color: var(--ce-text-mute) !important;
}
body.app-default .aiws-composer-chip:hover {
    background: rgba(139, 92, 246, 0.16) !important;
    color: #C4B5FD !important;
}
body.app-default .aiws-composer-chip.is-active {
    background: rgba(139, 92, 246, 0.22) !important;
    color: #F0ABFC !important;
}
body.app-default .aiws-composer-submit {
    background: linear-gradient(135deg, #8B5CF6 0%, #EC4899 100%) !important;
    box-shadow: 0 10px 22px -6px rgba(236, 72, 153, 0.55) !important;
}
body.app-default .aiws-composer-submit:hover {
    box-shadow: 0 14px 26px -6px rgba(236, 72, 153, 0.7) !important;
    filter: brightness(1.05);
}

body.app-default .aiws-drop-zone {
    background: rgba(139, 92, 246, 0.06) !important;
    border-color: rgba(139, 92, 246, 0.40) !important;
    color: var(--ce-text-mute) !important;
}
body.app-default .aiws-drop-zone:hover,
body.app-default .aiws-drop-zone.is-dragover {
    background: rgba(139, 92, 246, 0.14) !important;
    border-color: #C4B5FD !important;
    color: #C4B5FD !important;
}
body.app-default .aiws-drop-zone strong { color: #C4B5FD !important; }

body.app-default .aiws-toast {
    background: rgba(15, 18, 38, 0.95) !important;
    color: var(--ce-text) !important;
    border: 1px solid var(--ce-stroke-2) !important;
    backdrop-filter: blur(20px);
    box-shadow: 0 24px 48px -14px rgba(0, 0, 0, 0.55) !important;
}

/* ===========================================================================
 *  WORKFLOW CONFIGURE  (.aiws-cfg-*, .aiws-toggle-*, .aiws-switch-*,
 *                        .aiws-select, .aiws-upload-*, .aiws-json-pre,
 *                        .aiws-run-row)
 * =========================================================================== */
body.app-default .aiws-toggle-row { border-bottom-color: var(--ce-stroke) !important; }
body.app-default .aiws-toggle-row .toggle-meta strong { color: var(--ce-text) !important; }
body.app-default .aiws-toggle-row .toggle-meta .hint  { color: var(--ce-text-mute) !important; }
body.app-default .aiws-switch-slider {
    background: rgba(255, 255, 255, 0.10) !important;
    border: 1px solid var(--ce-stroke-2) !important;
}
body.app-default .aiws-switch-slider::before {
    background: #ffffff !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35) !important;
}
body.app-default .aiws-switch input:checked + .aiws-switch-slider {
    background: linear-gradient(135deg, #8B5CF6 0%, #EC4899 100%) !important;
    border-color: transparent !important;
    box-shadow: 0 0 16px rgba(236, 72, 153, 0.45);
}

body.app-default .aiws-select {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid var(--ce-stroke-2) !important;
    color: var(--ce-text) !important;
}
body.app-default .aiws-select:focus {
    border-color: rgba(139, 92, 246, 0.55) !important;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.18) !important;
    background: rgba(255, 255, 255, 0.06) !important;
}
body.app-default .aiws-select option {
    background: #0F1226 !important;
    color: var(--ce-text) !important;
}

body.app-default .aiws-upload-zone {
    background: linear-gradient(180deg, rgba(139, 92, 246, 0.05) 0%, rgba(20, 24, 48, 0.55) 90%) !important;
    border-color: rgba(139, 92, 246, 0.35) !important;
}
body.app-default .aiws-upload-zone:hover,
body.app-default .aiws-upload-zone.is-drag {
    background: rgba(139, 92, 246, 0.10) !important;
    border-color: #C4B5FD !important;
}
body.app-default .aiws-upload-icon {
    background: rgba(139, 92, 246, 0.18) !important;
    color: #C4B5FD !important;
    box-shadow: 0 0 24px -6px rgba(139, 92, 246, 0.45);
}
body.app-default .aiws-upload-zone h4 { color: var(--ce-text) !important; }
body.app-default .aiws-upload-zone p  { color: var(--ce-text-mute) !important; }
body.app-default .aiws-file-pill {
    background: rgba(139, 92, 246, 0.16) !important;
    color: #DDD6FE !important;
}
body.app-default .aiws-upload-progress { background: rgba(255, 255, 255, 0.08) !important; }
body.app-default .aiws-upload-progress .bar {
    background: linear-gradient(90deg, #8B5CF6, #22D3EE) !important;
}
body.app-default .aiws-upload-result {
    background: rgba(34, 197, 94, 0.10) !important;
    border-color: rgba(34, 197, 94, 0.30) !important;
    color: #86EFAC !important;
}
body.app-default .aiws-upload-result.error {
    background: rgba(244, 63, 94, 0.10) !important;
    border-color: rgba(244, 63, 94, 0.30) !important;
    color: #FCA5A5 !important;
}

body.app-default .aiws-json-pre {
    background: rgba(11, 15, 35, 0.65) !important;
    color: #CBD5E1 !important;
    border: 1px solid var(--ce-stroke) !important;
}

body.app-default .aiws-run-row { border-bottom-color: var(--ce-stroke) !important; }
body.app-default .aiws-run-row .run-icon {
    background: rgba(139, 92, 246, 0.16) !important;
    color: #C4B5FD !important;
}
body.app-default .aiws-run-row .run-title { color: var(--ce-text) !important; }
body.app-default .aiws-run-row .run-meta  { color: var(--ce-text-mute) !important; }

/* ===========================================================================
 *  LOCKED page (.aiws-locked-*)
 *  The hero is already dark — only fix the plan cards (currently white).
 * =========================================================================== */
body.app-default .aiws-locked-plan {
    background: var(--ce-surface) !important;
    border: 1px solid var(--ce-stroke) !important;
    color: var(--ce-text) !important;
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    box-shadow: var(--ce-shadow-sm);
}
body.app-default .aiws-locked-plan:hover {
    border-color: rgba(139, 92, 246, 0.45) !important;
    box-shadow: 0 22px 44px -22px rgba(139, 92, 246, 0.5) !important;
}
body.app-default .aiws-locked-plan.is-recommended {
    background:
        radial-gradient(60% 60% at 50% 0%, rgba(139, 92, 246, 0.18) 0%, transparent 70%),
        var(--ce-surface) !important;
    border-color: rgba(139, 92, 246, 0.55) !important;
    box-shadow: 0 26px 50px -24px rgba(139, 92, 246, 0.55) !important;
}
body.app-default .aiws-locked-plan-tag {
    background: rgba(139, 92, 246, 0.18) !important;
    color: #DDD6FE !important;
}
body.app-default .aiws-locked-plan-name { color: var(--ce-text) !important; }
body.app-default .aiws-locked-plan-price {
    background: linear-gradient(135deg, #C4B5FD 0%, #F0ABFC 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
body.app-default .aiws-locked-plan-price .aiws-per { color: var(--ce-text-mute) !important; -webkit-text-fill-color: var(--ce-text-mute); }
body.app-default .aiws-locked-plan-desc { color: var(--ce-text-mute) !important; }

/* ===========================================================================
 *  Common form-control + button-light tweaks for these pages
 * =========================================================================== */
/* The page-local inputs that don't have the aiws- prefix should still inherit
 * the dashboard form-control rule from section 8, so nothing else to do. */

/* btn-light (used inside AIWS heros) — make it visible on dark glass */
body.app-default #kt_app_content .btn-light,
body.app-default .aiws-card .btn-light,
body.app-default .aiws-tile .btn-light,
body.app-default .aiws-hero .btn-light,
body.app-default .sage-hero-card .btn-light,
body.app-default .pay-hero .btn-light {
    background-color: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid var(--ce-stroke-2) !important;
    color: var(--ce-text) !important;
    transition: all 0.18s var(--ce-ease) !important;
}
body.app-default #kt_app_content .btn-light:hover,
body.app-default .aiws-card .btn-light:hover,
body.app-default .aiws-tile .btn-light:hover,
body.app-default .aiws-hero .btn-light:hover,
body.app-default .sage-hero-card .btn-light:hover,
body.app-default .pay-hero .btn-light:hover {
    background-color: rgba(139, 92, 246, 0.18) !important;
    border-color: rgba(139, 92, 246, 0.45) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
}

/* btn-light-primary inside the AIWS surfaces */
body.app-default .btn-light-primary {
    background: rgba(139, 92, 246, 0.14) !important;
    color: #C4B5FD !important;
    border: 1px solid rgba(139, 92, 246, 0.35) !important;
}
body.app-default .btn-light-primary:hover {
    background: rgba(139, 92, 246, 0.24) !important;
    color: #F0ABFC !important;
    border-color: rgba(196, 181, 253, 0.55) !important;
}

/* btn-light-success / -warning / -danger / -info on workflow pages */
body.app-default .btn-light-success { background: rgba(34, 197, 94, 0.14) !important; color: #86EFAC !important; border: 1px solid rgba(34, 197, 94, 0.35) !important; }
body.app-default .btn-light-warning { background: rgba(245, 158, 11, 0.14) !important; color: #FCD34D !important; border: 1px solid rgba(245, 158, 11, 0.35) !important; }
body.app-default .btn-light-danger  { background: rgba(244, 63, 94, 0.14) !important; color: #FCA5A5 !important; border: 1px solid rgba(244, 63, 94, 0.35) !important; }
body.app-default .btn-light-info    { background: rgba(34, 211, 238, 0.14) !important; color: #67E8F9 !important; border: 1px solid rgba(34, 211, 238, 0.35) !important; }
body.app-default .btn-light-success:hover { background: rgba(34, 197, 94, 0.22) !important; color: #BBF7D0 !important; }
body.app-default .btn-light-warning:hover { background: rgba(245, 158, 11, 0.22) !important; color: #FDE68A !important; }
body.app-default .btn-light-danger:hover  { background: rgba(244, 63, 94, 0.22) !important; color: #FECACA !important; }
body.app-default .btn-light-info:hover    { background: rgba(34, 211, 238, 0.22) !important; color: #A5F3FC !important; }

/* Generic text-color helpers used inside workflow templates */
body.app-default .aiws-card .text-gray-900,
body.app-default .aiws-tile .text-gray-900,
body.app-default .aiws-tile .text-gray-800,
body.app-default .aiws-card .text-gray-800 { color: var(--ce-text) !important; }
body.app-default .aiws-card .text-gray-700,
body.app-default .aiws-tile .text-gray-700,
body.app-default .aiws-card .text-gray-600,
body.app-default .aiws-tile .text-gray-600 { color: var(--ce-text-2) !important; }
body.app-default .aiws-card .text-gray-500,
body.app-default .aiws-tile .text-gray-500,
body.app-default .aiws-card .text-muted,
body.app-default .aiws-tile .text-muted    { color: var(--ce-text-mute) !important; }

/* ===========================================================================
 *  GENERIC: kill remaining "background:#fff" or near-white surfaces inside
 *  any workflow template. The :not(.btn) escape keeps Bootstrap buttons safe.
 * =========================================================================== */
body.app-default #kt_app_content [style*="background: #fff"]:not(.btn):not(.iti__selected-flag),
body.app-default #kt_app_content [style*="background:#fff"]:not(.btn):not(.iti__selected-flag),
body.app-default #kt_app_content [style*="background-color: #fff"]:not(.btn):not(.iti__selected-flag),
body.app-default #kt_app_content [style*="background-color:#fff"]:not(.btn):not(.iti__selected-flag) {
    background: var(--ce-surface) !important;
    color: var(--ce-text) !important;
}

/* =============================================================================
 * 13b. DASHBOARD CARDS — Decorative design elements
 *      Fills the empty space inside cards with subtle gradient orbs,
 *      grid patterns, accent lines, and floating shapes — purely decorative.
 * =============================================================================*/

/* Layer decorative gradient orbs INTO the card background.
 * (Background-image is naturally clipped by border-radius — no overflow issue.) */
body.app-default #kt_app_content .card.card-flush,
body.app-default #kt_app_content .card:not(.cloudeey-aggregate-card):not(.cloudeey-individual-card):not(.bg-primary):not(.bg-success):not(.bg-warning):not(.bg-danger):not(.bg-dark) {
    background:
        radial-gradient(circle at 100% 0%,  rgba(139, 92, 246, 0.16) 0%, transparent 38%),
        radial-gradient(circle at 0% 100%,  rgba(34, 211, 238, 0.10) 0%, transparent 35%),
        var(--ce-surface) !important;
}

/* Variation by position — every 2nd card in a row gets pink, every 3rd gets cyan */
body.app-default #kt_app_content .row > div:nth-child(2n) .card.card-flush:not(.cloudeey-aggregate-card):not(.cloudeey-individual-card):not([style*="background-color"]) {
    background:
        radial-gradient(circle at 100% 0%, rgba(236, 72, 153, 0.16) 0%, transparent 38%),
        radial-gradient(circle at 0% 100%, rgba(139, 92, 246, 0.10) 0%, transparent 35%),
        var(--ce-surface) !important;
}
body.app-default #kt_app_content .row > div:nth-child(3n) .card.card-flush:not(.cloudeey-aggregate-card):not(.cloudeey-individual-card):not([style*="background-color"]) {
    background:
        radial-gradient(circle at 100% 0%, rgba(34, 211, 238, 0.16) 0%, transparent 38%),
        radial-gradient(circle at 0% 100%, rgba(45, 212, 191, 0.10) 0%, transparent 35%),
        var(--ce-surface) !important;
}
body.app-default #kt_app_content .row > div:nth-child(4n) .card.card-flush:not(.cloudeey-aggregate-card):not(.cloudeey-individual-card):not([style*="background-color"]) {
    background:
        radial-gradient(circle at 100% 0%, rgba(45, 212, 191, 0.16) 0%, transparent 38%),
        radial-gradient(circle at 0% 100%, rgba(27, 132, 255, 0.10) 0%, transparent 35%),
        var(--ce-surface) !important;
}

/* Top accent gradient line — appears on every card, animates softly */
body.app-default #kt_app_content .card.card-flush:not(.cloudeey-aggregate-card):not(.cloudeey-individual-card)::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        rgba(139, 92, 246, 0.65) 30%,
        rgba(236, 72, 153, 0.65) 50%,
        rgba(34, 211, 238, 0.55) 70%,
        transparent);
    opacity: 0.45;
    transition: opacity 0.3s var(--ce-ease);
    pointer-events: none;
    z-index: 2;
    border-radius: 1px;
}
body.app-default #kt_app_content .card.card-flush:not(.cloudeey-aggregate-card):not(.cloudeey-individual-card):hover::after {
    opacity: 0.85;
}

/* Subtle floating data dots in card backgrounds (decorative SVG-free pattern) */
body.app-default #kt_app_content .card.card-flush .card-body {
    position: relative;
}

/* Increase card body padding for more breathing room */
body.app-default #kt_app_content .card.card-flush .card-header { padding: 20px 22px 8px; }
body.app-default #kt_app_content .card.card-flush .card-body   { padding: 12px 22px 22px; }

/* Improve typography on big stat numbers — gradient text on the large display digits */
body.app-default #kt_app_content .fs-2hx.fw-bold:not(.text-white):not(.text-danger):not(.text-success):not(.text-warning):not(.text-primary):not(.text-info) {
    background: linear-gradient(135deg, #ffffff 0%, #DDD6FE 60%, #FBCFE8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 4px 24px rgba(139, 92, 246, 0.18);
    letter-spacing: -0.025em !important;
}

/* Card-label headings (e.g. "Cloudeey PC Cost Usage") */
body.app-default #kt_app_content .card-label.fw-bold {
    color: var(--ce-text) !important;
    letter-spacing: -0.01em;
}

/* Make the bullet shape indicators in cards prettier */
body.app-default #kt_app_content .bullet.bg-success { background: linear-gradient(135deg, #22C55E, #4ADE80) !important; box-shadow: 0 0 8px rgba(34, 197, 94, 0.5); }
body.app-default #kt_app_content .bullet.bg-danger  { background: linear-gradient(135deg, #F43F5E, #EC4899) !important; box-shadow: 0 0 8px rgba(244, 63, 94, 0.5); }
body.app-default #kt_app_content .bullet.bg-warning { background: linear-gradient(135deg, #F59E0B, #FBBF24) !important; box-shadow: 0 0 8px rgba(245, 158, 11, 0.5); }
body.app-default #kt_app_content .bullet.bg-primary { background: linear-gradient(135deg, #1B84FF, #4FA8FF) !important; box-shadow: 0 0 8px rgba(27, 132, 255, 0.5); }
body.app-default #kt_app_content .bullet.bg-info    { background: linear-gradient(135deg, #22D3EE, #67E8F9) !important; box-shadow: 0 0 8px rgba(34, 211, 238, 0.5); }

/* Animate the dashed separators */
body.app-default #kt_app_content .separator-dashed {
    border-color: transparent !important;
    background-image: linear-gradient(to right, transparent 0%, rgba(139, 92, 246, 0.20) 50%, transparent 100%);
    background-size: 8px 1px;
    background-repeat: repeat-x;
    background-position: 0 50%;
    height: 1px;
    border: 0 !important;
}

/* "Active Computers" card (red — Active Computers, has inline background-color: #F1416C)
 * Re-skin to use the violet-pink gradient instead of solid red for brand consistency.
 * The inline style already supplies the vector-1.png image — we keep it via lower stack. */
body.app-default #kt_app_content .card.card-flush[style*="#F1416C"],
body.app-default #kt_app_content .card.card-flush[style*="F1416C"] {
    background-color: transparent !important;
    background-image:
        radial-gradient(60% 60% at 100% 0%, rgba(236, 72, 153, 0.55) 0%, transparent 55%),
        radial-gradient(60% 60% at 0% 100%, rgba(139, 92, 246, 0.50) 0%, transparent 55%),
        linear-gradient(135deg, #6D28D9 0%, #BE185D 100%) !important;
    border: 1px solid rgba(236, 72, 153, 0.35) !important;
    box-shadow: 0 18px 36px -10px rgba(236, 72, 153, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.05) inset !important;
    position: relative;
}
/* Add a decorative geometric overlay (CSS-only, no external asset) */
body.app-default #kt_app_content .card.card-flush[style*="#F1416C"]::before,
body.app-default #kt_app_content .card.card-flush[style*="F1416C"]::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 85% 25%, rgba(255, 255, 255, 0.10) 0%, transparent 25%),
        radial-gradient(circle at 90% 70%, rgba(255, 255, 255, 0.08) 0%, transparent 22%),
        repeating-linear-gradient(45deg, transparent 0, transparent 16px, rgba(255, 255, 255, 0.04) 16px, rgba(255, 255, 255, 0.04) 17px);
    border-radius: inherit;
    pointer-events: none;
    -webkit-mask: none;
    mask: none;
    padding: 0;
    background-clip: border-box;
}

/* Invite Team card — make the call-to-action more attractive */
body.app-default #kt_app_content #invite-team-card .card {
    border: 1px solid rgba(139, 92, 246, 0.25) !important;
}
body.app-default #kt_app_content #invite-team-card .card .card-body {
    background-image:
        radial-gradient(60% 50% at 0% 0%, rgba(139, 92, 246, 0.35) 0%, transparent 55%),
        radial-gradient(60% 50% at 100% 100%, rgba(34, 211, 238, 0.30) 0%, transparent 55%) !important;
    background-blend-mode: normal;
}
body.app-default #kt_app_content #invite-team-card .fs-2hx { color: #ffffff !important; }
body.app-default #kt_app_content #invite-team-card .btn-dark {
    background: var(--ce-grad-violet) !important;
    border: 0 !important;
    color: #ffffff !important;
    border-radius: 10px !important;
    padding: 9px 20px !important;
    box-shadow: 0 10px 22px -6px rgba(236, 72, 153, 0.55);
}
body.app-default #kt_app_content #invite-team-card .btn-dark:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 28px -8px rgba(236, 72, 153, 0.65);
    filter: brightness(1.05);
}
/* Hide the upgrade.svg illustration on dark — it's not optimized for the futuristic theme */
body.app-default #kt_app_content #invite-team-card .theme-light-show { display: none !important; }
body.app-default #kt_app_content #invite-team-card .theme-dark-show { display: block !important; opacity: 0.95; filter: drop-shadow(0 12px 24px rgba(139, 92, 246, 0.35)); }

/* Datacenter card map polish */
body.app-default #kt_app_content .datacenter-map img {
    opacity: 0.5;
    filter: invert(0.92) hue-rotate(190deg) brightness(1.1);
    mix-blend-mode: lighten;
}

/* --- Decorative ambient patterns inside card bodies -------------------------
 * These give "empty" cards visual depth — subtle scan lines, dot grids,
 * and floating accents that suggest data activity. */
body.app-default #kt_app_content .card.card-flush .card-body {
    position: relative;
    z-index: 1;
}

/* Subtle dotted grid pattern overlay in card bodies (very low opacity) */
body.app-default #kt_app_content .card.card-flush .card-body::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px);
    background-size: 16px 16px;
    background-position: -8px -8px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s var(--ce-ease);
    z-index: -1;
    mask-image: radial-gradient(ellipse at 50% 50%, #000 0%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 0%, transparent 75%);
}
body.app-default #kt_app_content .card.card-flush:hover .card-body::before { opacity: 1; }

/* Mini "data flow" SVG-less wave on the bottom of stat card bodies */
body.app-default #kt_app_content .card.card-flush .card-body::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 60%;
    pointer-events: none;
    background-image:
        radial-gradient(ellipse 80% 50% at 20% 100%, rgba(139, 92, 246, 0.06) 0%, transparent 50%),
        radial-gradient(ellipse 70% 40% at 80% 100%, rgba(236, 72, 153, 0.05) 0%, transparent 50%);
    z-index: -1;
}

/* Pulsing "live" indicator pin in the top-right corner of cards that show
 * active/real-time data. We pin it to cards that contain elements with
 * id="active-computers-count", "active-agents-count", and #call-server-status-card. */
body.app-default #kt_app_content .card.card-flush:has(#active-computers-count)::before,
body.app-default #kt_app_content .card.card-flush:has(#active-agents-count)::before,
body.app-default #kt_app_content #call-server-status-card::before {
    content: "";
    position: absolute;
    top: 16px;
    right: 16px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22C55E;
    box-shadow:
        0 0 0 0 rgba(34, 197, 94, 0.7),
        0 0 12px rgba(34, 197, 94, 0.55);
    -webkit-mask: none;
            mask: none;
    padding: 0;
    z-index: 5;
    animation: ce-pulse-dot 2s ease-in-out infinite;
}
@keyframes ce-pulse-dot {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7), 0 0 12px rgba(34, 197, 94, 0.55); }
    50%      { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0), 0 0 18px rgba(34, 197, 94, 0.75); }
}

/* "Active Computers" card already has its own custom ::before (decorative pattern).
 * Override the live-dot for it with a slightly different positioning */
body.app-default #kt_app_content .card.card-flush[style*="F1416C"]:has(#active-computers-count)::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 85% 25%, rgba(255, 255, 255, 0.10) 0%, transparent 25%),
        radial-gradient(circle at 90% 70%, rgba(255, 255, 255, 0.08) 0%, transparent 22%),
        repeating-linear-gradient(45deg, transparent 0, transparent 16px, rgba(255, 255, 255, 0.04) 16px, rgba(255, 255, 255, 0.04) 17px);
    -webkit-mask: none;
    mask: none;
    padding: 0;
    animation: none;
    width: auto;
    height: auto;
    border-radius: inherit;
    background-color: transparent;
    box-shadow: none;
}
/* Add live-dot via card::after for the Active Computers card */
body.app-default #kt_app_content .card.card-flush[style*="F1416C"]::after {
    content: "";
    position: absolute;
    top: 16px;
    right: 16px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow:
        0 0 0 0 rgba(255, 255, 255, 0.7),
        0 0 12px rgba(255, 255, 255, 0.6);
    z-index: 5;
    animation: ce-pulse-dot-white 2s ease-in-out infinite;
    height: 8px;
    left: auto;
    background-image: none;
    opacity: 1;
}
@keyframes ce-pulse-dot-white {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7), 0 0 12px rgba(255, 255, 255, 0.6); }
    50%      { box-shadow: 0 0 0 8px rgba(255, 255, 255, 0), 0 0 18px rgba(255, 255, 255, 0.85); }
}

/* Add a subtle SVG-like trending sparkline silhouette to empty stat cards.
 * This is a CSS-only "sparkline" rendered via background-image gradients,
 * giving the impression of an analytics chart in the background. */
body.app-default #kt_app_content .card.card-flush:has(#total-purchases) .card-body,
body.app-default #kt_app_content .card.card-flush:has(#migration-total) .card-body {
    background-image:
        linear-gradient(to top, rgba(139, 92, 246, 0.10) 0%, transparent 60%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cpath d='M0,45 C20,38 35,28 55,30 C75,32 90,18 110,15 C130,12 150,22 175,8 L200,4 L200,60 L0,60 Z' fill='url(%23g1)' opacity='0.35'/%3E%3Cpath d='M0,45 C20,38 35,28 55,30 C75,32 90,18 110,15 C130,12 150,22 175,8 L200,4' fill='none' stroke='url(%23g2)' stroke-width='1.5'/%3E%3Cdefs%3E%3ClinearGradient id='g1' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0%25' stop-color='%238B5CF6'/%3E%3Cstop offset='100%25' stop-color='%238B5CF6' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='g2' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0%25' stop-color='%238B5CF6'/%3E%3Cstop offset='100%25' stop-color='%23EC4899'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: 100% 60%;
    min-height: 100px;
}

/* Decorative geometric chip in the corner of stat cards
 * — looks like a hexagonal mesh / data crystal */
body.app-default #kt_app_content .card.card-flush:has(#active-agents-count) .card-header,
body.app-default #kt_app_content .card.card-flush:has(#user-stats) .card-header,
body.app-default #kt_app_content #ticket-stats .card-header,
body.app-default #kt_app_content #migration-stats .card-header {
    position: relative;
}

/* Cool ribbon-style label that floats above the top-right of each card */
body.app-default #kt_app_content .card.card-flush:not(.cloudeey-aggregate-card):not(.cloudeey-individual-card):not([style*="F1416C"]) > .card-header::before {
    content: "";
    position: absolute;
    top: 18px;
    right: 20px;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background:
        radial-gradient(circle at 30% 30%, rgba(139, 92, 246, 0.30), transparent 60%),
        linear-gradient(135deg, rgba(139, 92, 246, 0.18), rgba(236, 72, 153, 0.18));
    border: 1px solid rgba(139, 92, 246, 0.25);
    pointer-events: none;
    opacity: 0.85;
}
/* Hide the deco chip for cards that already render content there (chart widgets,
 * toolbars, badges) — would visually clash */
body.app-default #kt_app_content .card.card-flush:has(.card-toolbar) > .card-header::before,
body.app-default #kt_app_content .card.card-flush:has(#kt_card_widget_17_chart) > .card-header::before,
body.app-default #kt_app_content .card.card-flush:has(#kt_card_widget_31_chart) > .card-header::before,
body.app-default #kt_app_content .card.card-flush:has(.card-title .badge) > .card-header::before { display: none; }

/* Inside the deco chip, draw a tiny "core" — gives it character */
body.app-default #kt_app_content .card.card-flush:not(.cloudeey-aggregate-card):not(.cloudeey-individual-card):not([style*="F1416C"]) > .card-header {
    position: relative;
}
body.app-default #kt_app_content .card.card-flush:not(.cloudeey-aggregate-card):not(.cloudeey-individual-card):not([style*="F1416C"]):not(:has(.card-toolbar)):not(:has(#kt_card_widget_17_chart)):not(:has(#kt_card_widget_31_chart)):not(:has(.card-title .badge)) > .card-header::after {
    content: "";
    position: absolute;
    top: 30px;
    right: 32px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.6) 0%, rgba(139, 92, 246, 0.8) 35%, transparent 70%);
    pointer-events: none;
    z-index: 1;
    box-shadow: 0 0 12px rgba(139, 92, 246, 0.55);
    animation: ce-orb-pulse 3.5s ease-in-out infinite;
}
@keyframes ce-orb-pulse {
    0%, 100% { transform: scale(1); opacity: 0.9; }
    50%      { transform: scale(1.15); opacity: 1; }
}

/* Cards inside dashboard get a slight inner highlight at the top */
body.app-default #kt_app_content .card.card-flush:not(.cloudeey-aggregate-card):not(.cloudeey-individual-card) {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        var(--ce-shadow-sm);
}
body.app-default #kt_app_content .card.card-flush:not(.cloudeey-aggregate-card):not(.cloudeey-individual-card):hover {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        0 26px 50px -18px rgba(0, 0, 0, 0.55),
        0 12px 24px rgba(139, 92, 246, 0.20);
}

/* Trial banner card (top of dashboard) — org branding header */
body.app-default #kt_app_content #ce-org-header-card.ce-org-header {
    background:
        radial-gradient(60% 80% at 0% 0%, rgba(139, 92, 246, 0.20) 0%, transparent 55%),
        radial-gradient(50% 70% at 100% 100%, rgba(34, 211, 238, 0.16) 0%, transparent 55%),
        linear-gradient(135deg, rgba(20, 24, 48, 0.90) 0%, rgba(15, 18, 38, 0.94) 100%) !important;
    border: 1px solid rgba(139, 92, 246, 0.22) !important;
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    box-shadow:
        0 20px 44px -22px rgba(139, 92, 246, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
    overflow: hidden;
    position: relative;
}
body.app-default #ce-org-header-card::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.65) 35%, rgba(34, 211, 238, 0.55) 65%, transparent);
    pointer-events: none;
}
body.app-default #ce-org-header-card .card-body {
    padding: 22px 26px !important;
}
body.app-default .ce-org-header-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px 28px;
}
body.app-default .ce-org-header-brand {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}
body.app-default .ce-org-header-logo {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid rgba(139, 92, 246, 0.35);
    box-shadow: 0 10px 24px -8px rgba(139, 92, 246, 0.45);
    background: rgba(255, 255, 255, 0.04);
}
body.app-default .ce-org-header-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
body.app-default .ce-org-header-logo-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.35) 0%, rgba(236, 72, 153, 0.28) 100%);
    color: #ffffff;
    font-size: 1.35rem;
    font-weight: 800;
}
body.app-default .ce-org-header-name {
    margin: 0 0 4px;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--ce-text) !important;
    letter-spacing: -0.01em;
    line-height: 1.25;
}
body.app-default .ce-org-header-time {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    color: var(--ce-text-mute) !important;
    font-weight: 500;
}
body.app-default .ce-org-header-time i {
    color: #67E8F9 !important;
    font-size: 14px !important;
}
body.app-default .ce-org-header-greeting {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    text-align: right;
}
body.app-default .ce-org-header-greeting-label {
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--ce-text-mute) !important;
}
body.app-default .ce-org-header-greeting-name {
    font-size: 1.05rem;
    font-weight: 700;
    background: linear-gradient(135deg, #C4B5FD 0%, #F0ABFC 55%, #67E8F9 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

@media (max-width: 640px) {
    body.app-default .ce-org-header-greeting {
        align-items: flex-start;
        text-align: left;
        width: 100%;
    }
}

/* Legacy org card inline-gradient override (if markup not yet migrated) */
body.app-default #kt_app_content .card.card-flush[style*="linear-gradient(135deg, #f8fafc 0%, #f1f5f9"] {
    background:
        radial-gradient(60% 60% at 100% 0%, rgba(139, 92, 246, 0.18) 0%, transparent 60%),
        radial-gradient(50% 60% at 0% 100%, rgba(34, 211, 238, 0.14) 0%, transparent 60%),
        linear-gradient(135deg, rgba(20, 24, 48, 0.85) 0%, rgba(15, 18, 38, 0.85) 100%) !important;
    border: 1px solid rgba(139, 92, 246, 0.20) !important;
    backdrop-filter: blur(14px);
}

/* No-subscription warning card — outer trial card shell */
body.app-default #kt_app_content #trial-period-card.card.card-flush.bg-light-warning {
    background:
        radial-gradient(60% 80% at 0% 0%, rgba(245, 158, 11, 0.22) 0%, transparent 55%),
        radial-gradient(50% 70% at 100% 100%, rgba(236, 72, 153, 0.14) 0%, transparent 55%),
        linear-gradient(135deg, rgba(20, 24, 48, 0.88) 0%, rgba(15, 18, 38, 0.92) 100%) !important;
    border: 1px solid rgba(245, 158, 11, 0.28) !important;
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    box-shadow:
        0 22px 48px -20px rgba(245, 158, 11, 0.30),
        inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
    overflow: hidden;
    position: relative;
}

/* Top accent line on trial card */
body.app-default #trial-period-card::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(245, 158, 11, 0.70) 30%, rgba(236, 72, 153, 0.55) 70%, transparent);
    pointer-events: none;
    z-index: 2;
}

body.app-default #trial-period-card .card-body {
    padding: 22px 26px !important;
}

/* When no-subscription panel is active: hide duplicate outer icon, use full width */
body.app-default #trial-period-card:has(#no-subscription-banner:not(.d-none)) #trial-period-leading-icon,
body.app-default #trial-period-card.is-no-subscription-state #trial-period-leading-icon {
    display: none !important;
}

body.app-default #trial-period-card:has(#no-subscription-banner:not(.d-none)) #trial-period-body,
body.app-default #trial-period-card.is-no-subscription-state #trial-period-body {
    padding: 24px 26px !important;
}

body.app-default #trial-period-leading-icon .symbol-label.bg-warning,
body.app-default #trial-period-leading-icon .ce-trial-status-icon {
    background: linear-gradient(135deg, #F59E0B 0%, #EC4899 100%) !important;
    box-shadow: 0 8px 18px -6px rgba(245, 158, 11, 0.55);
}

/* Active subscription state — green/teal accent (not amber warning) */
body.app-default #trial-period-card.is-active-subscription-state {
    background:
        radial-gradient(60% 80% at 0% 0%, rgba(34, 197, 94, 0.18) 0%, transparent 55%),
        radial-gradient(50% 70% at 100% 100%, rgba(34, 211, 238, 0.14) 0%, transparent 55%),
        linear-gradient(135deg, rgba(20, 24, 48, 0.88) 0%, rgba(15, 18, 38, 0.92) 100%) !important;
    border-color: rgba(34, 197, 94, 0.28) !important;
    box-shadow:
        0 22px 48px -20px rgba(34, 197, 94, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}
body.app-default #trial-period-card.is-active-subscription-state::after {
    background: linear-gradient(90deg, transparent, rgba(34, 197, 94, 0.65) 30%, rgba(34, 211, 238, 0.55) 70%, transparent);
}
body.app-default #trial-period-card.is-active-subscription-state #trial-period-leading-icon .ce-trial-status-icon {
    background: linear-gradient(135deg, #22C55E 0%, #2DD4BF 100%) !important;
    box-shadow: 0 8px 18px -6px rgba(34, 197, 94, 0.55);
}

/* ---- Active subscription panel ---- */
body.app-default .ce-subscription-active {
    width: 100%;
    min-width: 0;
}
body.app-default .ce-subscription-active-eyebrow {
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 700;
    color: #86EFAC;
    margin-bottom: 6px;
}
body.app-default .ce-subscription-active-title,
body.app-default #trial-text {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ce-text) !important;
    line-height: 1.4;
    margin-bottom: 6px;
}
body.app-default .ce-subscription-active-desc,
body.app-default #trial-description {
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--ce-text-mute) !important;
    margin-bottom: 14px;
}
body.app-default .ce-subscription-validity,
body.app-default .subscription-validity-pill {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    max-width: 100%;
    padding: 14px 16px;
    border-radius: 12px;
    background: rgba(34, 211, 238, 0.08) !important;
    border: 1px solid rgba(34, 211, 238, 0.22) !important;
    color: var(--ce-text-2) !important;
    font-size: 0.84rem;
    font-weight: 500;
    line-height: 1.55;
    margin: 0 0 14px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
body.app-default .ce-subscription-validity::before,
body.app-default .subscription-validity-pill:not(:empty)::before {
    content: "";
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    margin-top: 6px;
    border-radius: 50%;
    background: #22D3EE;
    box-shadow: 0 0 10px rgba(34, 211, 238, 0.65);
}
body.app-default .ce-subscription-computers,
body.app-default #trial-computers-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
body.app-default .ce-subscription-computers li,
body.app-default #trial-computers-list li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(139, 92, 246, 0.12) !important;
    border: 1px solid rgba(139, 92, 246, 0.28);
    color: #DDD6FE !important;
    font-size: 0.78rem;
    font-weight: 600;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    letter-spacing: 0.01em;
}
body.app-default .ce-subscription-computers li::before,
body.app-default #trial-computers-list li::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #86EFAC;
    box-shadow: 0 0 6px rgba(134, 239, 172, 0.55);
    flex-shrink: 0;
}
body.app-default .ce-subscription-computers li.text-muted,
body.app-default #trial-computers-list li.text-muted {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: var(--ce-stroke);
    color: var(--ce-text-mute) !important;
}
body.app-default .ce-subscription-computers li.text-muted::before,
body.app-default #trial-computers-list li.text-muted::before {
    background: var(--ce-text-mute);
    box-shadow: none;
}

/* ---- Unified no-subscription panel (single surface, no nested box) ---- */
body.app-default .ce-no-subscription {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 20px 24px;
    align-items: start;
    width: 100%;
}

body.app-default .ce-no-subscription-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.28) 0%, rgba(236, 72, 153, 0.22) 100%);
    border: 1px solid rgba(245, 158, 11, 0.35);
    box-shadow: 0 10px 24px -8px rgba(245, 158, 11, 0.45);
    color: #FCD34D;
}
body.app-default .ce-no-subscription-icon i { font-size: 26px; }

body.app-default .ce-no-subscription-body {
    min-width: 0;
}

body.app-default .ce-no-subscription-eyebrow {
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 700;
    color: #FCD34D;
    margin-bottom: 6px;
}

body.app-default .ce-no-subscription-title {
    margin: 0 0 8px;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--ce-text) !important;
    letter-spacing: -0.01em;
}

body.app-default .ce-no-subscription-desc {
    margin: 0 0 18px;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--ce-text-mute) !important;
    max-width: 720px;
}

body.app-default .ce-no-subscription-actions,
body.app-default .no-subscription-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

body.app-default .ce-no-subscription-actions .btn-primary {
    background: linear-gradient(135deg, #8B5CF6 0%, #EC4899 100%) !important;
    border: 0 !important;
    color: #ffffff !important;
    border-radius: 10px !important;
    padding: 10px 18px !important;
    font-weight: 600 !important;
    box-shadow: 0 12px 24px -8px rgba(236, 72, 153, 0.55);
    transition: transform 0.2s var(--ce-ease), box-shadow 0.2s var(--ce-ease), filter 0.2s var(--ce-ease);
}
body.app-default .ce-no-subscription-actions .btn-primary:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
    box-shadow: 0 16px 28px -8px rgba(236, 72, 153, 0.65);
}

body.app-default .ce-no-subscription-actions .btn-light {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid var(--ce-stroke-2) !important;
    color: var(--ce-text) !important;
    border-radius: 10px !important;
    padding: 10px 18px !important;
    font-weight: 600 !important;
}
body.app-default .ce-no-subscription-actions .btn-light:hover {
    background: rgba(139, 92, 246, 0.16) !important;
    border-color: rgba(139, 92, 246, 0.45) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
}

@media (max-width: 640px) {
    body.app-default .ce-no-subscription {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    body.app-default .ce-no-subscription-icon {
        width: 44px;
        height: 44px;
    }
    body.app-default .ce-no-subscription-actions .btn {
        width: 100%;
        justify-content: center;
    }
}

/* Legacy class kept for safety if referenced elsewhere */
body.app-default .no-subscription-elevated {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* =============================================================================
 * 14a. DASHBOARD STATS GRID — aligned 3×2 metrics + invite panel
 *      Fixes Bootstrap 15-column overflow (3+3+3+6) that caused gaps.
 * =============================================================================*/

body.app-default .ce-dashboard-stats-grid {
    display: grid;
    gap: 20px;
    align-items: stretch;
    grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(260px, 1.05fr);
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
    min-height: 360px;
}

/* Hide invite column when permission hides the slot */
body.app-default .ce-dashboard-stats-grid:not(:has(.ce-dashboard-stat--invite:not(.d-none))) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.app-default .ce-dashboard-stat {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

body.app-default .ce-dashboard-stat > .card {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    margin-bottom: 0 !important;
    min-height: 172px;
}

/* Grid cell placement */
body.app-default .ce-dashboard-stat--computers    { grid-column: 1; grid-row: 1; }
body.app-default .ce-dashboard-stat--subscription { grid-column: 1; grid-row: 2; }
body.app-default .ce-dashboard-stat--agents       { grid-column: 2; grid-row: 1 / 3; }
body.app-default .ce-dashboard-stat--users        { grid-column: 3; grid-row: 1; }
body.app-default .ce-dashboard-stat--tickets      { grid-column: 3; grid-row: 2; }
body.app-default .ce-dashboard-stat--invite       { grid-column: 4; grid-row: 1 / 3; }

/* When invite hidden, don't reserve column 4 */
body.app-default .ce-dashboard-stat--invite.d-none {
    display: none !important;
}

/* When tickets hidden, let users card fill both rows in column 3 */
body.app-default .ce-dashboard-stats-grid:not(:has(.ce-dashboard-stat--tickets:not(.d-none))) .ce-dashboard-stat--users,
body.app-default .ce-dashboard-stats-grid.tickets-hidden .ce-dashboard-stat--users {
    grid-row: 1 / 3;
}
body.app-default .ce-dashboard-stat--tickets.d-none {
    display: none !important;
}

/* Stat cards in grid — consistent internal spacing */
body.app-default .ce-dashboard-stats-grid .card .card-header {
    padding: 18px 20px 6px !important;
}
body.app-default .ce-dashboard-stats-grid .card .card-body {
    padding: 8px 20px 18px !important;
}

/* Invite panel inside grid */
body.app-default .ce-dashboard-stat--invite .card {
    border: 1px solid rgba(139, 92, 246, 0.25) !important;
}
body.app-default .ce-dashboard-stat--invite .card .card-body {
    background-image:
        radial-gradient(60% 50% at 0% 0%, rgba(139, 92, 246, 0.35) 0%, transparent 55%),
        radial-gradient(60% 50% at 100% 100%, rgba(34, 211, 238, 0.30) 0%, transparent 55%) !important;
    background-blend-mode: normal;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
body.app-default .ce-dashboard-stat--invite .fs-2hx {
    color: #ffffff !important;
    font-size: 1.35rem !important;
    line-height: 1.35;
    margin-bottom: 1rem !important;
}

/* Tablet: 2-column mosaic */
@media (max-width: 1399.98px) {
    body.app-default .ce-dashboard-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: auto;
    }
    body.app-default .ce-dashboard-stat--computers    { grid-column: 1; grid-row: 1; }
    body.app-default .ce-dashboard-stat--subscription { grid-column: 1; grid-row: 2; }
    body.app-default .ce-dashboard-stat--agents       { grid-column: 2; grid-row: 1 / 3; }
    body.app-default .ce-dashboard-stat--users        { grid-column: 1; grid-row: 3; }
    body.app-default .ce-dashboard-stat--tickets      { grid-column: 2; grid-row: 3; }
    body.app-default .ce-dashboard-stat--invite       { grid-column: 1 / 3; grid-row: 4; }
    body.app-default .ce-dashboard-stats-grid:not(:has(.ce-dashboard-stat--tickets:not(.d-none))) .ce-dashboard-stat--users,
    body.app-default .ce-dashboard-stats-grid.tickets-hidden .ce-dashboard-stat--users {
        grid-column: 1 / 3;
        grid-row: 3;
    }
}

/* Mobile: single column stack */
@media (max-width: 767.98px) {
    body.app-default .ce-dashboard-stats-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 16px;
    }
    body.app-default .ce-dashboard-stat--computers,
    body.app-default .ce-dashboard-stat--subscription,
    body.app-default .ce-dashboard-stat--agents,
    body.app-default .ce-dashboard-stat--users,
    body.app-default .ce-dashboard-stat--tickets,
    body.app-default .ce-dashboard-stat--invite {
        grid-column: 1 !important;
        grid-row: auto !important;
    }
    body.app-default .ce-dashboard-stat > .card {
        min-height: 150px;
    }
}

/* =============================================================================
 * 14. DASHBOARD CUSTOM WIDGETS — retint to futuristic dark
 * =============================================================================*/

/* Individual computer card (inside aggregate widget) */
body.app-default .cloudeey-individual-card {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.10), rgba(34, 211, 238, 0.05)) !important;
    border: 1px solid rgba(139, 92, 246, 0.20) !important;
    color: var(--ce-text);
    box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
body.app-default .cloudeey-individual-card .text-gray-900 { color: var(--ce-text) !important; }
body.app-default .cloudeey-individual-card .text-muted    { color: var(--ce-text-mute) !important; }

/* Datacenter map widget */
body.app-default .datacenter-map {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.10) 0%, rgba(34, 211, 238, 0.06) 100%) !important;
    border: 1px solid var(--ce-stroke) !important;
}
body.app-default .datacenter-marker {
    background: linear-gradient(135deg, #8B5CF6, #EC4899) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    box-shadow: 0 0 14px rgba(236, 72, 153, 0.6) !important;
}
body.app-default .datacenter-marker::after {
    background: rgba(236, 72, 153, 0.20) !important;
}

/* Call infrastructure cards */
body.app-default .call-status-card {
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.10) 0%, rgba(139, 92, 246, 0.06) 100%) !important;
    border: 1px solid rgba(34, 211, 238, 0.25) !important;
    box-shadow: 0 14px 30px -16px rgba(34, 211, 238, 0.20) !important;
}
body.app-default .call-status-icon {
    background: linear-gradient(135deg, #06B6D4 0%, #8B5CF6 100%) !important;
    box-shadow: 0 10px 22px rgba(34, 211, 238, 0.30);
}
body.app-default .call-status-badge {
    background: rgba(34, 211, 238, 0.14) !important;
    border-color: rgba(34, 211, 238, 0.35) !important;
    color: #67E8F9 !important;
}
body.app-default .call-metric-card {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid var(--ce-stroke) !important;
    color: var(--ce-text);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
body.app-default .call-metric-value { color: var(--ce-text) !important; }
body.app-default .call-metric-sub   { color: var(--ce-text-mute) !important; }

/* Risk colors stay vivid */
body.app-default .risk-low { color: #4ADE80 !important; }
body.app-default .risk-medium { color: #FCD34D !important; }
body.app-default .risk-high, body.app-default .risk-critical { color: #FCA5A5 !important; }

/* Soft "info" / "primary" symbol pills inside dashboard widgets */
body.app-default .bg-light-primary { background: rgba(27, 132, 255, 0.14) !important; }
body.app-default .bg-light-success { background: rgba(34, 197, 94, 0.14) !important; }
body.app-default .bg-light-warning { background: rgba(245, 158, 11, 0.16) !important; }
body.app-default .bg-light-danger  { background: rgba(244, 63, 94, 0.14) !important; }
body.app-default .bg-light-info    { background: rgba(34, 211, 238, 0.14) !important; }
body.app-default .bg-light         { background: rgba(255, 255, 255, 0.05) !important; }

/* Borders */
body.app-default .border, body.app-default .border-bottom, body.app-default .border-top,
body.app-default .border-start, body.app-default .border-end { border-color: var(--ce-stroke) !important; }

/* Dashed borders */
body.app-default .border-dashed { border-color: var(--ce-stroke-2) !important; }

/* =============================================================================
 * 15. AUTH HERO  (Cloudeey-branded futuristic AI hero — replaces sample image)
 * =============================================================================*/

.ce-auth-hero {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 480px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 32px;
    color: #ffffff;
    text-align: center;
    overflow: hidden;
    isolation: isolate;
}

/* Ambient orbs behind the hero content */
.ce-auth-hero-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    pointer-events: none;
    opacity: 0.85;
    z-index: 0;
    animation: ce-glow-float 18s ease-in-out infinite;
}
.ce-auth-hero-glow-1 {
    width: 340px; height: 340px;
    top: -80px; left: -60px;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.85), transparent 65%);
}
.ce-auth-hero-glow-2 {
    width: 320px; height: 320px;
    top: 20%; right: -80px;
    background: radial-gradient(circle, rgba(236, 72, 153, 0.75), transparent 65%);
    animation-delay: -6s;
}
.ce-auth-hero-glow-3 {
    width: 360px; height: 360px;
    bottom: -100px; left: 30%;
    background: radial-gradient(circle, rgba(34, 211, 238, 0.55), transparent 65%);
    animation-delay: -12s;
}
@keyframes ce-glow-float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%      { transform: translate(36px, -22px) scale(1.08); }
    66%      { transform: translate(-30px, 28px) scale(0.94); }
}

/* Logo */
.ce-auth-logo {
    display: inline-block;
    margin-bottom: 36px;
    position: relative;
    z-index: 2;
    transition: transform 0.4s var(--ce-ease-spring), filter 0.4s var(--ce-ease);
}
.ce-auth-logo img {
    height: 56px;
    width: auto;
    filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.45));
}
.ce-auth-logo:hover {
    transform: translateY(-3px) scale(1.02);
}
.ce-auth-logo:hover img {
    filter: drop-shadow(0 18px 36px rgba(236, 72, 153, 0.55));
}

/* --- Animated SVG illustration ---
   Central cloud-computer node + orbiting AI satellites + neural connections */
.ce-auth-illustration {
    position: relative;
    width: 320px;
    max-width: 92%;
    aspect-ratio: 1 / 1;
    margin: 0 auto 32px;
    z-index: 2;
}
.ce-auth-illustration svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* Core node */
.ce-il-core { transform-origin: center; animation: ce-il-core-pulse 4s ease-in-out infinite; }
@keyframes ce-il-core-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.04); }
}
.ce-il-core-glow {
    transform-origin: center;
    animation: ce-il-core-glow 3.5s ease-in-out infinite;
}
@keyframes ce-il-core-glow {
    0%, 100% { opacity: 0.55; transform: scale(1); }
    50%      { opacity: 0.85; transform: scale(1.12); }
}

/* Orbital rings rotate at different speeds */
.ce-il-orbit-1 { transform-origin: 160px 160px; animation: ce-il-spin 22s linear infinite; }
.ce-il-orbit-2 { transform-origin: 160px 160px; animation: ce-il-spin-rev 28s linear infinite; }
.ce-il-orbit-3 { transform-origin: 160px 160px; animation: ce-il-spin 36s linear infinite; }
@keyframes ce-il-spin     { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes ce-il-spin-rev { from { transform: rotate(360deg); } to { transform: rotate(0deg); } }

/* Pulsing satellite nodes */
.ce-il-sat {
    transform-origin: center;
    animation: ce-il-sat-pulse 2.6s ease-in-out infinite;
}
.ce-il-sat-2 { animation-delay: -0.5s; }
.ce-il-sat-3 { animation-delay: -1.1s; }
.ce-il-sat-4 { animation-delay: -1.7s; }
.ce-il-sat-5 { animation-delay: -2.3s; }
@keyframes ce-il-sat-pulse {
    0%, 100% { transform: scale(1);   filter: drop-shadow(0 0 6px currentColor); }
    50%      { transform: scale(1.4); filter: drop-shadow(0 0 14px currentColor); }
}

/* Energy rings (concentric pulse waves) */
.ce-il-wave {
    transform-origin: center;
    animation: ce-il-wave-out 4s ease-out infinite;
    opacity: 0;
}
.ce-il-wave-2 { animation-delay: 1.3s; }
.ce-il-wave-3 { animation-delay: 2.6s; }
@keyframes ce-il-wave-out {
    0%   { opacity: 0.55; transform: scale(0.7); }
    100% { opacity: 0; transform: scale(1.7); }
}

/* Neural connection dashes */
.ce-il-link {
    stroke-dasharray: 4 6;
    animation: ce-il-dash 14s linear infinite;
}
@keyframes ce-il-dash {
    to { stroke-dashoffset: -200; }
}

/* Floating data particles around */
.ce-il-particle {
    animation: ce-il-particle-float 6s ease-in-out infinite;
    transform-origin: center;
}
.ce-il-particle-2 { animation-delay: -1.5s; }
.ce-il-particle-3 { animation-delay: -3s; }
.ce-il-particle-4 { animation-delay: -4.5s; }
@keyframes ce-il-particle-float {
    0%, 100% { transform: translate(0, 0); opacity: 0.4; }
    50%      { transform: translate(6px, -10px); opacity: 1; }
}

/* --- Headline with rotating words --- */
.ce-auth-headline {
    margin: 0 0 14px;
    font-weight: 800;
    font-size: 2.4rem;
    line-height: 1.10;
    letter-spacing: -0.035em;
    color: #ffffff;
    position: relative;
    z-index: 2;
}
.ce-auth-headline-static {
    display: block;
    background: linear-gradient(135deg, #ffffff 0%, #E0E7FF 60%, #FBCFE8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.ce-auth-headline-rotator {
    display: inline-block;
    height: 1.2em;
    overflow: hidden;
    vertical-align: bottom;
    margin-top: 4px;
}
.ce-auth-headline-rotator ul {
    list-style: none;
    padding: 0;
    margin: 0;
    animation: ce-rotator 10s steps(4) infinite;
}
.ce-auth-headline-rotator li {
    height: 1.2em;
    line-height: 1.2em;
    background: linear-gradient(135deg, #8B5CF6 0%, #EC4899 50%, #22D3EE 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
    text-shadow: 0 6px 24px rgba(236, 72, 153, 0.15);
}
@keyframes ce-rotator {
    0%, 22%  { transform: translateY(0); }
    25%, 47% { transform: translateY(-1.2em); }
    50%, 72% { transform: translateY(-2.4em); }
    75%, 97% { transform: translateY(-3.6em); }
    100%     { transform: translateY(-4.8em); }
}

/* --- Description --- */
.ce-auth-description {
    max-width: 460px;
    margin: 0 auto 28px;
    color: rgba(226, 232, 240, 0.85);
    font-size: 1.02rem;
    line-height: 1.6;
    position: relative;
    z-index: 2;
}

/* --- Feature pills --- */
.ce-auth-features {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    max-width: 460px;
    margin: 0 auto 36px;
    position: relative;
    z-index: 2;
}
.ce-auth-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: #E2E8F0;
    font-size: 0.825rem;
    font-weight: 600;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: transform 0.22s var(--ce-ease-spring), border-color 0.22s var(--ce-ease), background 0.22s var(--ce-ease), color 0.22s var(--ce-ease);
}
.ce-auth-pill:hover {
    transform: translateY(-2px);
    background: rgba(139, 92, 246, 0.16);
    border-color: rgba(139, 92, 246, 0.45);
    color: #ffffff;
}
.ce-auth-pill .ce-auth-pill-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #4ADE80;
    box-shadow: 0 0 8px #4ADE80;
}
.ce-auth-pill-violet .ce-auth-pill-dot { background: #C4B5FD; box-shadow: 0 0 8px #8B5CF6; }
.ce-auth-pill-pink   .ce-auth-pill-dot { background: #F9A8D4; box-shadow: 0 0 8px #EC4899; }
.ce-auth-pill-cyan   .ce-auth-pill-dot { background: #67E8F9; box-shadow: 0 0 8px #22D3EE; }

/* --- Trust stats strip --- */
.ce-auth-stats {
    display: flex;
    gap: 32px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}
.ce-auth-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.ce-auth-stat-value {
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, #ffffff 0%, #C4B5FD 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.ce-auth-stat-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: rgba(203, 213, 225, 0.65);
    font-weight: 600;
}

/* Responsive */
@media (max-width: 1199.98px) {
    .ce-auth-illustration { width: 260px; margin-bottom: 24px; }
    .ce-auth-headline { font-size: 2rem; }
    .ce-auth-description { font-size: 0.95rem; }
}
@media (max-width: 991.98px) {
    .ce-auth-hero { min-height: auto; padding: 36px 24px 28px; }
    .ce-auth-illustration { width: 200px; margin-bottom: 18px; }
    .ce-auth-headline { font-size: 1.6rem; }
    .ce-auth-features { margin-bottom: 22px; }
    .ce-auth-stats { gap: 22px; padding-top: 18px; }
    .ce-auth-stat-value { font-size: 1.05rem; }
}

/* =============================================================================
 * 15. SETTINGS MODULE — readable typography & form surfaces
 * =============================================================================*/

body.app-default #kt_app_content_container .card h3,
body.app-default #kt_app_content_container .card h4,
body.app-default #kt_app_content_container .card .card-title h3,
body.app-default #kt_app_content_container .card .card-title h4 {
    color: var(--ce-text) !important;
}

body.app-default #kt_app_content_container .card-body .fs-6.fw-bold,
body.app-default #kt_app_content_container .card-body .fs-4.fw-bold {
    color: var(--ce-text) !important;
}

body.app-default #kt_app_content_container .border-gray-300 {
    border-color: var(--ce-stroke-2) !important;
}

body.app-default #kt_app_content_container .notice.bg-light-warning,
body.app-default #kt_app_content_container .notice.bg-light-primary,
body.app-default #kt_app_content_container .notice.bg-light-success,
body.app-default #kt_app_content_container .notice.bg-light-info {
    background: rgba(255, 255, 255, 0.05) !important;
}
body.app-default #kt_app_content_container .notice.bg-light-warning {
    background: rgba(245, 158, 11, 0.12) !important;
    border-color: rgba(245, 158, 11, 0.35) !important;
}
body.app-default #kt_app_content_container .notice.bg-light-primary {
    background: rgba(27, 132, 255, 0.12) !important;
    border-color: rgba(27, 132, 255, 0.35) !important;
}
body.app-default #kt_app_content_container .notice .text-gray-900,
body.app-default #kt_app_content_container .notice .text-gray-700,
body.app-default #kt_app_content_container .notice h4 {
    color: var(--ce-text) !important;
}

body.app-default #kt_app_content_container .btn-outline-default,
body.app-default #kt_app_content_container .btn-outline.btn-outline-dashed.btn-outline-default {
    color: var(--ce-text-2) !important;
    border-color: var(--ce-stroke-2) !important;
    background: rgba(255, 255, 255, 0.03) !important;
}
body.app-default #kt_app_content_container .btn-outline-default:hover,
body.app-default #kt_app_content_container .btn-outline.btn-outline-dashed.btn-outline-default:hover {
    color: var(--ce-text) !important;
    border-color: rgba(139, 92, 246, 0.45) !important;
    background: rgba(139, 92, 246, 0.10) !important;
}
body.app-default #kt_app_content_container .btn-outline-default.active,
body.app-default #kt_app_content_container .btn-outline.btn-outline-dashed.active {
    color: var(--ce-text) !important;
    border-color: rgba(139, 92, 246, 0.55) !important;
    background: rgba(139, 92, 246, 0.18) !important;
}

body.app-default #kt_app_content_container .bg-light-primary.rounded-3,
body.app-default #kt_app_content_container .bg-light-info.rounded-3 {
    color: var(--ce-text-2) !important;
}
body.app-default #kt_app_content_container .bg-light-primary.rounded-3 .fw-semibold,
body.app-default #kt_app_content_container .bg-light-info.rounded-3 .fw-semibold {
    color: var(--ce-text) !important;
}

body.app-default #kt_app_content_container .symbol-label.text-primary.bg-light-primary {
    color: #C4B5FD !important;
    background: rgba(139, 92, 246, 0.22) !important;
}

body.app-default #kt_app_content_container .table.table-row-dashed td {
    color: var(--ce-text-2) !important;
}
body.app-default #kt_app_content_container .table.table-row-dashed td.fs-4.fw-bold {
    color: var(--ce-text) !important;
}

body.app-default #kt_app_content_container .btn-color-gray-500 {
    color: var(--ce-text-mute) !important;
}
body.app-default #kt_app_content_container .btn-color-gray-500:hover {
    color: var(--ce-text) !important;
}

/* =============================================================================
 * 16. COMPUTERS MODULE — list, details, MDM
 * =============================================================================*/

/* Shared page header */
body.app-default .ce-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}
body.app-default .ce-page-title {
    margin: 0 0 0.35rem;
    font-size: clamp(1.65rem, 2.5vw, 2rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--ce-text);
    background: linear-gradient(135deg, #F5F3FF 0%, #E9D5FF 45%, #67E8F9 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
body.app-default .ce-page-subtitle {
    margin: 0;
    font-size: 0.95rem;
    color: var(--ce-text-mute);
}

/* Stat pills — dashed glass chips */
body.app-default .ce-stat-pill {
    border: 1px dashed var(--ce-stroke-2);
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: border-color 0.2s var(--ce-ease), background 0.2s var(--ce-ease);
}
body.app-default .ce-stat-pill:hover {
    border-color: rgba(139, 92, 246, 0.35);
    background: rgba(139, 92, 246, 0.06);
}

/* --- Computers list page --- */
body.app-default .ce-computers-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
}
@media (max-width: 1199.98px) {
    body.app-default .ce-computers-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 767.98px) {
    body.app-default .ce-computers-stats-grid {
        grid-template-columns: 1fr;
    }
}
body.app-default .ce-computers-stat > .card {
    background: linear-gradient(145deg, rgba(139, 92, 246, 0.08), rgba(34, 211, 238, 0.04)) !important;
    border: 1px solid var(--ce-stroke) !important;
    box-shadow: 0 12px 32px -18px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
body.app-default .ce-computers-toolbar {
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--ce-stroke);
}

/* Computer grid cards */
body.app-default .ce-computer-card {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid var(--ce-stroke) !important;
    box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: transform 0.22s var(--ce-ease), border-color 0.22s var(--ce-ease), box-shadow 0.22s var(--ce-ease);
}
body.app-default .ce-computer-card:hover {
    transform: translateY(-3px);
    border-color: rgba(139, 92, 246, 0.45) !important;
    box-shadow: 0 16px 40px -14px rgba(139, 92, 246, 0.25);
}
body.app-default .ce-computer-card .text-gray-900 { color: var(--ce-text) !important; }
body.app-default .ce-computer-card .text-gray-800 { color: var(--ce-text-2) !important; }
body.app-default .ce-computer-card .text-gray-500 { color: var(--ce-text-mute) !important; }
body.app-default .ce-computer-card .bg-light {
    background: rgba(255, 255, 255, 0.06) !important;
}

/* Empty state */
body.app-default .ce-empty-state {
    background: linear-gradient(160deg, rgba(139, 92, 246, 0.06), rgba(34, 211, 238, 0.03)) !important;
    border: 1px dashed var(--ce-stroke-2) !important;
}
body.app-default .ce-empty-illustration {
    opacity: 0.85;
    filter: drop-shadow(0 12px 24px rgba(139, 92, 246, 0.15));
}

/* --- Computer details / MDM profile hero --- */
body.app-default .ce-computer-profile {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.10) 0%, rgba(34, 211, 238, 0.05) 100%) !important;
    border: 1px solid var(--ce-stroke) !important;
    box-shadow: 0 14px 36px -16px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    overflow: hidden;
}
body.app-default .ce-computer-profile .separator {
    border-color: var(--ce-stroke) !important;
}
body.app-default .ce-computer-icon-wrap {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(139, 92, 246, 0.12)) !important;
    border: 1px solid var(--ce-stroke);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
body.app-default .ce-computer-profile .text-gray-800 { color: var(--ce-text) !important; }

/* Instance control buttons */
body.app-default .ce-instance-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
body.app-default .ce-instance-controls .btn {
    margin: 0 !important;
}

/* Resource usage tiles */
body.app-default .ce-resource-tile {
    border: 1px solid var(--ce-stroke);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
body.app-default .ce-resource-tile--cpu {
    background: linear-gradient(135deg, rgba(27, 132, 255, 0.14), rgba(34, 211, 238, 0.08)) !important;
    border-color: rgba(27, 132, 255, 0.25);
}
body.app-default .ce-resource-tile--ram {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.14), rgba(45, 212, 191, 0.08)) !important;
    border-color: rgba(34, 197, 94, 0.25);
}
body.app-default .ce-resource-tile--disk {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.16), rgba(244, 114, 182, 0.08)) !important;
    border-color: rgba(245, 158, 11, 0.28);
}
body.app-default .ce-resource-tile--net {
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.14), rgba(139, 92, 246, 0.08)) !important;
    border-color: rgba(34, 211, 238, 0.28);
}
body.app-default .ce-resource-tile .text-gray-600 { color: var(--ce-text-2) !important; }
body.app-default .ce-resource-tile .text-gray-900 { color: var(--ce-text) !important; }
body.app-default .ce-resource-tile .text-gray-500 { color: var(--ce-text-mute) !important; }
body.app-default .ce-resource-tile .progress {
    background: rgba(0, 0, 0, 0.25) !important;
}

/* Spec grid (instance details) */
body.app-default .ce-spec-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem 1.25rem;
}
@media (max-width: 575.98px) {
    body.app-default .ce-spec-grid { grid-template-columns: 1fr; }
}
body.app-default .ce-spec-item {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.75rem 1rem;
    border-radius: 0.65rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--ce-stroke);
}
body.app-default .ce-spec-label {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ce-text-mute);
}
body.app-default .ce-spec-value {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ce-text);
    word-break: break-word;
}

/* Full-width monitoring sections */
body.app-default .ce-computer-section {
    background: rgba(255, 255, 255, 0.025) !important;
    border: 1px solid var(--ce-stroke) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
body.app-default .ce-computer-section .card-header {
    border-bottom: 1px solid var(--ce-stroke);
}
body.app-default .ce-computer-section .table thead tr {
    border-bottom: 1px solid var(--ce-stroke);
}
body.app-default .ce-computer-section .table-row-dashed tbody tr {
    border-bottom-color: var(--ce-stroke) !important;
}

/* Activity KPI tiles */
body.app-default .ce-kpi-tile {
    border: 1px solid var(--ce-stroke);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
body.app-default .ce-kpi-tile--success { background: rgba(34, 197, 94, 0.12) !important; border-color: rgba(34, 197, 94, 0.28); }
body.app-default .ce-kpi-tile--primary { background: rgba(27, 132, 255, 0.12) !important; border-color: rgba(27, 132, 255, 0.28); }
body.app-default .ce-kpi-tile--warning { background: rgba(245, 158, 11, 0.14) !important; border-color: rgba(245, 158, 11, 0.30); }
body.app-default .ce-kpi-tile--danger  { background: rgba(244, 63, 94, 0.12) !important; border-color: rgba(244, 63, 94, 0.28); }
body.app-default .ce-kpi-tile--info      { background: rgba(114, 57, 234, 0.12) !important; border-color: rgba(114, 57, 234, 0.28); }
body.app-default .ce-kpi-tile--secondary { background: rgba(120, 130, 140, 0.12) !important; border-color: rgba(120, 130, 140, 0.28); }
body.app-default .ce-kpi-tile .text-gray-600 { color: var(--ce-text-mute) !important; }

/* Screenshot preview */
body.app-default .ce-screenshot-preview {
    border: 1px solid var(--ce-stroke) !important;
    box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.5);
}

/* Details page — chart container */
body.app-default .ce-computer-details-page #kt_vm_usage_chart {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 0.75rem;
    border: 1px solid var(--ce-stroke);
    padding: 0.5rem;
}

/* Windows user modals */
body.app-default #modal-win-user-add .modal-content,
body.app-default #modal-win-user-edit .modal-content {
    background: var(--ce-surface) !important;
    border: 1px solid var(--ce-stroke) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
body.app-default #modal-win-user-add .modal-header,
body.app-default #modal-win-user-edit .modal-header {
    border-bottom-color: var(--ce-stroke) !important;
}
body.app-default #modal-win-user-add .modal-footer,
body.app-default #modal-win-user-edit .modal-footer {
    border-top-color: var(--ce-stroke) !important;
}
body.app-default #modal-win-user-add .modal-title,
body.app-default #modal-win-user-edit .modal-title {
    color: var(--ce-text) !important;
}

body.app-default .ce-computer-details-page .card.card-flush {
    background: rgba(255, 255, 255, 0.025) !important;
    border: 1px solid var(--ce-stroke) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
body.app-default .ce-computer-details-page .card.card-flush .card-header {
    border-bottom-color: var(--ce-stroke) !important;
}

/* Scoped text readability within computers pages */
body.app-default .ce-computers-page .text-gray-900,
body.app-default .ce-computer-details-page .text-gray-900 { color: var(--ce-text) !important; }
body.app-default .ce-computers-page .text-gray-800,
body.app-default .ce-computer-details-page .text-gray-800 { color: var(--ce-text-2) !important; }
body.app-default .ce-computers-page .text-gray-700,
body.app-default .ce-computer-details-page .text-gray-700 { color: var(--ce-text-2) !important; }
body.app-default .ce-computers-page .text-gray-600,
body.app-default .ce-computer-details-page .text-gray-600 { color: var(--ce-text-mute) !important; }
body.app-default .ce-computers-page .text-gray-500,
body.app-default .ce-computer-details-page .text-gray-500 { color: var(--ce-text-mute) !important; }
body.app-default .ce-computers-page .text-gray-400,
body.app-default .ce-computer-details-page .text-gray-400 { color: rgba(148, 163, 184, 0.85) !important; }
body.app-default .ce-computer-details-page .form-text { color: var(--ce-text-mute) !important; }

/* =============================================================================
 * SECURE CHAT — sleek contact & conversation lists
 * =============================================================================*/
.secure-chat-contact,
.secure-chat-list-item {
    transition: background-color 0.18s var(--ce-ease), transform 0.18s var(--ce-ease);
    cursor: pointer;
    margin-bottom: 2px;
}
.secure-chat-contact:hover,
.secure-chat-list-item:hover {
    background-color: var(--bs-gray-100);
}
body.app-default .secure-chat-contact:hover,
body.app-default .secure-chat-list-item:hover {
    background-color: rgba(255, 255, 255, 0.05);
}
.secure-chat-list-item.active {
    background-color: rgba(var(--ce-brand-rgb), 0.10);
    box-shadow: inset 3px 0 0 var(--ce-brand);
}
body.app-default .secure-chat-list-item.active {
    background-color: rgba(var(--ce-violet-rgb), 0.16);
    box-shadow: inset 3px 0 0 var(--ce-violet);
}
.secure-chat-contact .secure-chat-contact-action {
    opacity: 0.85;
    border-radius: 8px;
    transition: opacity 0.18s var(--ce-ease), transform 0.18s var(--ce-ease);
}
.secure-chat-contact:hover .secure-chat-contact-action {
    opacity: 1;
    transform: translateY(-1px);
}
/* =============================================================================
 * BILLING — clubbed subscriptions summary + expandable grid
 * =============================================================================*/
.ce-subs-summary-toggle {
    transition: background-color 0.18s var(--ce-ease);
    border-radius: var(--ce-r-sm);
}
.ce-subs-summary-toggle:hover {
    background-color: rgba(0, 0, 0, 0.03);
}
body.app-default .ce-subs-summary-toggle:hover {
    background-color: rgba(255, 255, 255, 0.04);
}
.ce-subs-toggle-chevron {
    transition: transform 0.25s var(--ce-ease);
}
.ce-subs-summary-toggle[aria-expanded="true"] .ce-subs-toggle-chevron {
    transform: rotate(180deg);
}
.ce-sub-grid-card {
    height: 100%;
    background: var(--bs-card-bg, #ffffff);
    border: 1px solid var(--bs-border-color, #eff2f5);
    border-radius: var(--ce-r-sm);
    transition: transform 0.18s var(--ce-ease), box-shadow 0.18s var(--ce-ease);
}
.ce-sub-grid-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--ce-shadow-sm);
}
body.app-default .ce-sub-grid-card {
    background: rgba(255, 255, 255, 0.03);
    border-color: var(--ce-stroke);
}
body.app-default .ce-sub-grid-card:hover {
    border-color: var(--ce-stroke-2);
    box-shadow: var(--ce-shadow-md);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .ce-auth-headline-rotator { height: auto; }
    .ce-auth-headline-rotator ul { animation: none; }
    .ce-auth-headline-rotator li:not(:first-child) { display: none; }
}