@charset "UTF-8";
@import url("zerocode_ext.css");

:root {
    --zv2-primary-rgb: 150, 118, 240;
    --zv2-secondary-rgb: 0, 212, 255;
    --zv2-warning-rgb: 255, 214, 0;
    --zv2-logo-violet-rgb: 176, 112, 239;
    --zv2-logo-blue-rgb: 141, 165, 241;
    --zv2-logo-cyan-rgb: 86, 218, 223;
    --zv2-structure-line: 1px solid rgba(var(--zv2-secondary-rgb), 0.18);

    --rz-menu-item-hover-color: #e0d4ff;
    --rz-menu-item-icon-hover-color: #e0d4ff;
    --rz-menu-item-hover-background-color: rgba(var(--zv2-logo-violet-rgb), 0.22);
    --rz-menu-item-selected-color: #eae2ff;
    --rz-menu-item-selected-background-color: rgba(var(--zv2-logo-violet-rgb), 0.30);
    --rz-menu-top-item-hover-color: #c8f8ff;
    --rz-menu-top-item-icon-hover-color: #c8f8ff;
    --rz-menu-top-item-hover-background-color: rgba(var(--zv2-logo-cyan-rgb), 0.14);
    --rz-menu-top-item-selected-color: #d4faff;
    --rz-menu-top-item-selected-background-color: rgba(var(--zv2-logo-cyan-rgb), 0.20);
}

/* Stronger gradient links, based on Zerocode colors */
.rz-link,
a.rz-link,
.goto-link,
.grid-goto-link {
    color: var(--rz-primary-light) !important;
    background-image: linear-gradient(135deg, var(--rz-primary-light) 0%, var(--rz-secondary-light) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-decoration-color: rgba(var(--zv2-primary-rgb), 0.45);
    transition: filter 0.25s ease, text-decoration-color 0.25s ease;
}

.rz-link:hover,
a.rz-link:hover,
.goto-link:hover,
.grid-goto-link:hover {
    filter: brightness(1.08);
    text-decoration-color: rgba(var(--zv2-secondary-rgb), 0.8);
}

/* Dark-Graf-like menu hover language, but in Zerocode palette */
.rz-menu:not(.rz-profile-menu):not(.grid-main-menu):not(.grid-side-menu) .rz-navigation-item-wrapper:hover,
.rz-menu:not(.rz-profile-menu):not(.grid-main-menu):not(.grid-side-menu) .rz-navigation-item-wrapper:has(> .active):hover,
.rz-menu:not(.rz-profile-menu):not(.grid-main-menu):not(.grid-side-menu) .rz-navigation-item-wrapper-active,
.rz-panel-menu .rz-navigation-item-wrapper:hover,
.rz-panel-menu .rz-navigation-item-wrapper-active,
.rz-panel-menu .rz-navigation-item-active {
    background-image: linear-gradient(
        135deg,
        rgba(var(--zv2-logo-violet-rgb), 0.35) 0%,
        rgba(var(--zv2-logo-blue-rgb), 0.26) 56%,
        rgba(var(--zv2-logo-cyan-rgb), 0.24) 100%
    ) !important;
}

.rz-panel-menu .rz-navigation-item-wrapper:hover,
.rz-panel-menu .rz-navigation-item-wrapper-active,
.rz-panel-menu .rz-navigation-item-active {
    box-shadow: inset 3px 0 0 rgb(var(--zv2-logo-violet-rgb)), 0 0 0 1px rgba(var(--zv2-logo-cyan-rgb), 0.24);
}

/* Grid menus stay clean and transparent */
.rz-menu.grid-main-menu .rz-navigation-item-wrapper:hover,
.rz-menu.grid-main-menu .rz-navigation-item-wrapper:has(> .active):hover,
.rz-menu.grid-side-menu .rz-navigation-item-wrapper:hover,
.rz-menu.grid-side-menu .rz-navigation-item-wrapper:has(> .active):hover {
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

.rz-row:has(.rz-menu.grid-main-menu):has(.rz-menu.grid-side-menu),
.rz-menu.grid-main-menu,
.rz-menu.grid-side-menu {
    background-color: transparent !important;
    background-image: none !important;
}

/* Active tab highlight for Zerocode V2 theme */
.rz-tabview-nav .rz-tabview-selected,
.rz-tabview-top > .rz-tabview-nav .rz-tabview-selected {
    background-color: #48a5b3bd !important;
}

.rz-sidebar-toggle {
    color: #f3f8ff !important;
}

.rz-sidebar-toggle .rzi {
    color: #f3f8ff !important;
}

.rz-sidebar-toggle:hover,
.rz-sidebar-toggle:focus-visible,
.rz-sidebar-toggle:hover .rzi,
.rz-sidebar-toggle:focus-visible .rzi {
    color: var(--rz-primary-light) !important;
}

.rz-selectable tbody tr.rz-data-row:hover:not(.rz-state-highlight) .rz-cell-data,
.rz-selectable tbody tr.rz-data-row:hover:not(.rz-state-highlight) .rz-cell-data a,
.rz-selectable tbody tr.rz-data-row:hover:not(.rz-state-highlight) .rz-cell-data .rz-link {
    color: var(--rz-primary-light) !important;
    -webkit-text-fill-color: currentColor;
    background-image: none;
}

.rz-button.rz-primary:not(.rz-variant-text):not(.rz-variant-outlined) {
    background-color: #7c63de !important;
    background-image: linear-gradient(
        135deg,
        #7c63de 0%,
        #9a79ee 56%,
        #8da5f1 100%
    ) !important;
    border-color: transparent !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(var(--zv2-primary-rgb), 0.24) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease !important;
}

.rz-button.rz-primary:not(.rz-variant-text):not(.rz-variant-outlined):not(.rz-state-disabled):not(:active):hover {
    transform: translateY(-1px);
    background-image: linear-gradient(
        135deg,
        #866de4 0%,
        #a182f0 60%,
        #95acf4 100%
    ) !important;
    box-shadow: 0 7px 16px rgba(var(--zv2-primary-rgb), 0.3) !important;
}

.rz-button.rz-primary:not(.rz-variant-text):not(.rz-variant-outlined):not(.rz-state-disabled):active {
    transform: translateY(0);
    background-image: linear-gradient(
        135deg,
        #7058d0 0%,
        #8a70e2 58%,
        #8fa6ef 100%
    ) !important;
    box-shadow: 0 3px 8px rgba(var(--zv2-primary-rgb), 0.24) !important;
}

.rz-button.rz-secondary:not(.rz-variant-text):not(.rz-variant-outlined) {
    background-color: #35cfe0 !important;
    background-image: linear-gradient(
        135deg,
        #35cfe0 0%,
        #56dadf 52%,
        #8da5f1 100%
    ) !important;
    border-color: rgba(var(--zv2-logo-cyan-rgb), 0.4) !important;
    color: #07101f !important;
    box-shadow: 0 8px 20px rgba(var(--zv2-logo-cyan-rgb), 0.3) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease !important;
}

.rz-button.rz-secondary:not(.rz-variant-text):not(.rz-variant-outlined):not(.rz-state-disabled):not(:active):hover {
    transform: translateY(-1px);
    background-image: linear-gradient(
        135deg,
        #45d8e8 0%,
        #67e1e7 52%,
        #9cb3f5 100%
    ) !important;
    box-shadow: 0 12px 26px rgba(var(--zv2-logo-cyan-rgb), 0.4) !important;
}

.rz-button.rz-secondary:not(.rz-variant-text):not(.rz-variant-outlined):not(.rz-state-disabled):active {
    transform: translateY(0);
    background-image: linear-gradient(
        135deg,
        #2bbfd0 0%,
        #4dced4 54%,
        #859ced 100%
    ) !important;
    box-shadow: 0 5px 12px rgba(var(--zv2-logo-cyan-rgb), 0.28) !important;
}

span.rz-cell-data:focus-within:not(:has(.rz-chkbox)) {
    box-shadow: 0 0 0 2px rgba(var(--zv2-primary-rgb), 0.32), 0 0 18px rgba(var(--zv2-secondary-rgb), 0.2);
    box-sizing: border-box;
}

.rz-header {
    background: var(--rz-footer-background-color) !important;
    border-bottom: var(--zv2-structure-line);
    box-shadow: none;
}

/* Main menu (left sidebar): add a right divider like the header line */
.rz-sidebar.rz-sidebar-start,
.rz-sidebar.rz-sidebar-left,
.rz-layout > .rz-sidebar:first-of-type,
.rz-sidebar:not(.rz-sidebar-end):not(.rz-sidebar-right) {
    border-inline-end: var(--zv2-structure-line) !important;
}

/* Right sidebar: add the same divider on the left side */
.rz-sidebar.rz-sidebar-end,
.rz-sidebar.rz-sidebar-right {
    border-inline-start: var(--zv2-structure-line) !important;
}

/* Footer: same divider style, but on top */
.rz-footer {
    border-top: var(--zv2-structure-line) !important;
}

/* Site logo: subtle, slow pulse + shimmer sweep */
.headerLogo {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    animation: zerocodev2LogoPulse 8s ease-in-out infinite;
}

.headerLogo::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        108deg,
        transparent 0%,
        transparent 42%,
        rgba(255, 255, 255, 0.16) 50%,
        rgba(var(--zv2-logo-blue-rgb), 0.12) 57%,
        transparent 70%,
        transparent 100%
    );
    mix-blend-mode: screen;
    opacity: 0.24;
    transform: translateX(-145%);
    animation: zerocodev2LogoShimmer 16s ease-in-out infinite;
}

.rz-body {
    position: relative;
    background:
        radial-gradient(circle at 12% 78%, rgba(var(--zv2-logo-violet-rgb), 0.28) 0%, rgba(var(--zv2-logo-violet-rgb), 0) 44%),
        radial-gradient(circle at 82% 24%, rgba(var(--zv2-logo-blue-rgb), 0.24) 0%, rgba(var(--zv2-logo-blue-rgb), 0) 40%),
        radial-gradient(circle at 54% 96%, rgba(var(--zv2-logo-cyan-rgb), 0.2) 0%, rgba(var(--zv2-logo-cyan-rgb), 0) 32%),
        linear-gradient(128deg, #0a1222 0%, #0f1830 34%, #132347 63%, #0c152a 100%);
    background-size: 135% 135%, 125% 125%, 145% 145%, 100% 100%;
    background-position: 0% 72%, 100% 18%, 52% 100%, 0 0;
    background-attachment: fixed;
    background-repeat: no-repeat;
    animation: zerocodev2Shimmer 60s ease-in-out infinite alternate;
}

@keyframes zerocodev2Shimmer {
    0% {
        background-position: 0% 72%, 100% 18%, 52% 100%, 0 0;
        filter: saturate(1);
    }

    50% {
        background-position: 48% 45%, 52% 45%, 50% 96%, 0 0;
        filter: saturate(1.05);
    }

    100% {
        background-position: 100% 18%, 0% 72%, 48% 92%, 0 0;
        filter: saturate(1.02);
    }
}

@keyframes zerocodev2LogoPulse {
    0% {
        filter:
            brightness(1.03)
            saturate(1.06)
            drop-shadow(0 0 6px rgba(var(--zv2-logo-cyan-rgb), 0.26))
            drop-shadow(0 0 4px rgba(var(--zv2-logo-violet-rgb), 0.2));
    }

    50% {
        filter:
            brightness(1.11)
            saturate(1.14)
            drop-shadow(0 0 14px rgba(var(--zv2-logo-cyan-rgb), 0.42))
            drop-shadow(0 0 10px rgba(var(--zv2-logo-violet-rgb), 0.28));
    }

    100% {
        filter:
            brightness(1.03)
            saturate(1.06)
            drop-shadow(0 0 6px rgba(var(--zv2-logo-cyan-rgb), 0.26))
            drop-shadow(0 0 4px rgba(var(--zv2-logo-violet-rgb), 0.2));
    }
}

@keyframes zerocodev2LogoShimmer {
    0% {
        transform: translateX(-145%);
    }

    80% {
        transform: translateX(-145%);
    }

    94% {
        transform: translateX(145%);
    }

    100% {
        transform: translateX(145%);
    }
}

.rz-dialog {
    border: 1px solid rgba(var(--zv2-secondary-rgb), 0.24);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.64), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}

.rz-dialog-wrapper {
    background-color: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(3px) saturate(1.04);
}

.rz-dropdown-panel {
    border: 1px solid rgba(var(--zv2-secondary-rgb), 0.28);
    box-shadow:
        0 26px 64px rgba(0, 0, 0, 0.65),
        0 8px 22px rgba(0, 0, 0, 0.42),
        0 1px 0 rgba(255, 255, 255, 0.05) inset;
    transform: translateY(2px);
}

.rz-form-field.rz-state-focused {
    box-shadow: 0 0 0 1px rgba(var(--zv2-primary-rgb), 0.34), 0 0 14px rgba(var(--zv2-primary-rgb), 0.22);
}

/* ===== GenericTreeDropDown: light text for dark theme ===== */
.ggt-panel {
    color: #e8ecf2;
    border: 1px solid rgba(var(--zv2-secondary-rgb), 0.28);
    box-shadow:
        0 26px 64px rgba(0, 0, 0, 0.65),
        0 8px 22px rgba(0, 0, 0, 0.42),
        0 1px 0 rgba(255, 255, 255, 0.05) inset;
}

.ggt-panel .generic-group-tree .rz-treenode-label {
    color: #dce1ea;
}

.ggt-panel .generic-group-tree .rz-treenode-label:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #f0f3f8;
}

.ggt-panel .generic-group-tree .node-row.editing {
    background: rgba(255, 255, 255, 0.08);
    outline: 1px solid rgba(255, 255, 255, 0.12);
}

.ggt-panel .generic-group-tree .search-highlight {
    background-color: rgba(var(--zv2-logo-cyan-rgb), 0.35);
    color: #ffffff;
}

.ggt-panel .generic-group-tree .node-row.selected {
    background: rgba(var(--zv2-logo-cyan-rgb), 0.14);
    outline: 2px solid rgba(var(--zv2-logo-cyan-rgb), 0.4);
}

.ggt-panel .generic-group-tree.tree-select .rz-form-field {
    background: var(--rz-panel-background-color, #1a2236);
}
.plan-card-markdown code,
.plan-card-markdown code *,
.plan-card-markdown pre code,
.plan-card-markdown pre code *,
.plan-card-markdown a > code,
.plan-card-markdown a > code * {
    color: black !important;
    -webkit-text-fill-color: black !important;
}