/* /Custom/Form/TaskCheckbox.razor.rz.scp.css */
/* ============================================
   Task Checkbox Component
   ============================================ */
.task-checkbox-container[b-xp6ql3loyi] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: default;

    input {
        &:not(:disabled) + .task-check {
            &:hover {
                &:before {
                    opacity: 1;
                }

                svg[b-xp6ql3loyi] {
                    stroke: var(--accent-color, #a3e583);
                }
            }
        }

        &:checked + .task-check svg[b-xp6ql3loyi] {
            stroke: var(--accent-color, #a3e583);

            path {
                stroke-dashoffset: 60;
                transition: all 0.2s linear;
            }

            polyline[b-xp6ql3loyi] {
                stroke-dashoffset: 42;
                transition: all 0.2s linear;
                transition-delay: 0.15s;
            }
        }

        &:disabled + .task-check[b-xp6ql3loyi] {
            cursor: not-allowed;
            opacity: 0.6;

            svg {
                stroke: #e0e0e0;
            }
        }
    }
}

.task-check[b-xp6ql3loyi] {
    cursor: pointer;
    position: relative;
    margin: auto;
    width: var(--checkbox-size, 18px);
    height: var(--checkbox-size, 18px);
    -webkit-tap-highlight-color: transparent;
    transform: translate3d(0, 0, 0);
    display: inline-block;

    &:before {
        content: "";
        position: absolute;
        --ripple-size-multiplier: 2.6667;
        --ripple-actual-size: calc(var(--checkbox-size, 18px) * var(--ripple-size-multiplier));
        --ripple-offset: calc((var(--ripple-actual-size) - var(--checkbox-size, 18px)) / -2);
        width: var(--ripple-actual-size);
        height: var(--ripple-actual-size);
        top: var(--ripple-offset);
        left: var(--ripple-offset);
        border-radius: 50%;
        opacity: 0;
        transition: opacity 0.2s ease;
    }

    svg[b-xp6ql3loyi] {
        position: relative;
        z-index: 1;
        fill: none;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke: #c8ccd4;
        stroke-width: 1.5;
        transform: translate3d(0, 0, 0);
        transition: all 0.2s ease;
        width: 100%;
        height: 100%;
        display: block;

        path {
            stroke-dasharray: 60;
            stroke-dashoffset: 0;
        }

        polyline[b-xp6ql3loyi] {
            stroke-dasharray: 22;
            stroke-dashoffset: 66;
        }
    }
}
/* /Custom/Misc/DrpChip.razor.rz.scp.css */
/* ============================================
   DRP Chip Component - Modern Tag Design
   Inspired by shadcn/ui and Material 3
   ============================================ */

/* ============================================
   Chipset Container
   ============================================ */
.drp-chipset[b-vceyxx8x71] {
    display: flex;
    gap: var(--space-1, 0.25rem);
    align-items: center;

    &.drp-chipset--wrap {
        flex-wrap: wrap;
        gap: var(--space-1, 0.25rem) var(--space-1-5, 0.375rem);
    }
}

/* ============================================
   Individual Chip Component
   ============================================ */
.drp-chip[b-vceyxx8x71] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1, 0.25rem);
    border-radius: var(--radius-full, 9999px);
    font-weight: 500;
    text-transform: none;
    white-space: nowrap;
    position: relative;
    box-sizing: border-box;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid transparent;
    text-decoration: none;
    line-height: 1;
    user-select: none;
    
    /* Filled variant (default) */
    background: color-mix(in srgb, var(--muted, #f1f5f9) 100%, transparent);
    color: var(--muted-foreground, #64748b);
    border-color: color-mix(in srgb, var(--muted, #f1f5f9) 100%, transparent);

    /* Size variants */
    &.drp-chip-size--small {
        padding: var(--space-0-5, 0.125rem) var(--space-2, 0.5rem);
        font-size: 0.75rem;
        height: 20px;
        min-height: 20px;
    }

    &.drp-chip-size--medium[b-vceyxx8x71] {
        padding: var(--space-1, 0.25rem) var(--space-2-5, 0.625rem);
        font-size: 0.875rem;
        height: 24px;
        min-height: 24px;
    }

    &.drp-chip-size--large[b-vceyxx8x71] {
        padding: var(--space-1-5, 0.375rem) var(--space-3, 0.75rem);
        font-size: 0.875rem;
        height: 32px;
        min-height: 32px;
    }

    /* Outlined variant */
    &.drp-chip--outlined[b-vceyxx8x71] {
        background: transparent;
        border-color: var(--border, #e2e8f0);
        color: var(--foreground, #0f172a);
    }

    /* Interactive states */
    &.drp-clickable[b-vceyxx8x71] {
        cursor: pointer;

        &:hover {
            background: color-mix(in srgb, var(--muted, #f1f5f9) 80%, var(--accent, #f8fafc));
            border-color: color-mix(in srgb, var(--border, #e2e8f0) 80%, var(--accent, #f8fafc));
            transform: translateY(-0.5px);
            box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
        }

        &:active[b-vceyxx8x71] {
            transform: translateY(0);
            box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
        }

        &.drp-chip--outlined:hover[b-vceyxx8x71] {
            background: color-mix(in srgb, var(--accent, #f8fafc) 50%, transparent);
        }
    }

    /* Disabled state */
    &.drp-chip--disabled[b-vceyxx8x71] {
        opacity: 0.5;
        pointer-events: none;
        cursor: not-allowed;
    }

    /* Dismissible padding adjustment */
    &.drp-chip--dismissible[b-vceyxx8x71] {
        padding-right: var(--space-1, 0.25rem);
    }

    /* Focus state for accessibility */
    &:focus-visible[b-vceyxx8x71] {
        outline: 2px solid var(--ring, #3b82f6);
        outline-offset: 2px;
        box-shadow: 0 0 0 2px var(--ring, #3b82f6);
    }

    /* Keyboard navigation */
    &:focus[b-vceyxx8x71] {
        outline: none;
    }
}

/* ============================================
   Icon Elements
   ============================================ */
.drp-chip__icon[b-vceyxx8x71] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ============================================
   Text Content
   ============================================ */
.drp-chip__text[b-vceyxx8x71] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

/* ============================================
   Dismiss Button
   ============================================ */
.drp-chip__dismiss[b-vceyxx8x71] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    border-radius: var(--radius-full, 9999px);
    cursor: pointer;
    font-size: 10px;
    line-height: 1;
    color: inherit;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;

    &:hover {
        background: color-mix(in srgb, var(--destructive, #ef4444) 15%, transparent);
        color: var(--destructive, #ef4444);
        transform: scale(1.1);
    }

    &:active[b-vceyxx8x71] {
        transform: scale(0.95);
    }

    &:focus-visible[b-vceyxx8x71] {
        outline: 1px solid var(--ring, #3b82f6);
        outline-offset: 1px;
    }
}

/* ============================================
   Responsive Design
   ============================================ */
@media (max-width: 768px) {
    .drp-chipset[b-vceyxx8x71] {
        gap: var(--space-0-5, 0.125rem);
        
        &.drp-chipset--wrap {
            gap: var(--space-0-5, 0.125rem) var(--space-1, 0.25rem);
        }
    }

    .drp-chip[b-vceyxx8x71] {
        &.drp-chip-size--small {
            padding: var(--space-0-5, 0.125rem) var(--space-1-5, 0.375rem);
            font-size: 0.6875rem;
            height: 18px;
            min-height: 18px;
        }

        &.drp-chip-size--medium[b-vceyxx8x71] {
            padding: var(--space-0-5, 0.125rem) var(--space-2, 0.5rem);
            font-size: 0.75rem;
            height: 20px;
            min-height: 20px;
        }

        &.drp-chip-size--large[b-vceyxx8x71] {
            padding: var(--space-1, 0.25rem) var(--space-2-5, 0.625rem);
            font-size: 0.8125rem;
            height: 28px;
            min-height: 28px;
        }
    }

    .drp-chip__dismiss[b-vceyxx8x71] {
        width: 12px;
        height: 12px;
        font-size: 9px;
    }
}

/* ============================================
   Accessibility & Reduced Motion
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    .drp-chip[b-vceyxx8x71],
    .drp-chip__dismiss[b-vceyxx8x71] {
        transition: none;
    }

    .drp-chip.drp-clickable:hover[b-vceyxx8x71] {
        transform: none;
    }

    .drp-chip__dismiss:hover[b-vceyxx8x71] {
        transform: none;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .drp-chip[b-vceyxx8x71] {
        border-width: 2px;
        
        &.drp-chip--outlined {
            border-color: currentColor;
        }
    }
}
/* /Custom/Misc/DrpDivider.razor.rz.scp.css */
.drp-divider[b-5ua9l52au7] {
    margin: 0;
    flex-shrink: 0;
    border-color: var(--rz-base);
    border-width: 1px;
    border-style: solid none none none;

    &.drp-divider-absolute {
        left: 0;
        width: 100%;
        bottom: 0;
        position: absolute;
    }

    &.drp-divider-inset[b-5ua9l52au7] {
        margin-left: 72px;
        margin-inline-start: 72px;
        margin-inline-end: unset;
    }

    &.drp-divider-light[b-5ua9l52au7] {
        border-color: var(--rz-base-light);
    }

    &.drp-divider-middle[b-5ua9l52au7] {
        margin-left: 16px;
        margin-right: 16px;
    }

    &.drp-divider-vertical[b-5ua9l52au7] {
        border-style: none solid none none;
        height: 100%;
    }

    &.drp-divider-flexitem[b-5ua9l52au7] {
        height: auto;
        align-self: stretch;
    }

    &.drp-divider-fullwidth[b-5ua9l52au7] {
        flex-grow: 1;
        width: 100%;
    }
}
/* /Modules/Configurator/Configurator/Components/ConfigConsiderations.razor.rz.scp.css */
/* ================================================= */
/* Considerations Section - Modern Layout */
/* ================================================= */

.bottom-container[b-7yc5il7sek] {
    display: flex;
    width: 100%;
    gap: var(--space-10);
    margin-top: var(--space-6);
    page-break-before: always;
    background-color: var(--background);
}

.bottom-container__spacer[b-7yc5il7sek] {
    width: 19.5rem;
}

.considerations[b-7yc5il7sek] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: 0;
    font-family: var(--font-family-sans);
    letter-spacing: 0.025rem;
}

.considerations h2[b-7yc5il7sek] {
    font-weight: 500;
    color: var(--primary);
    font-family: var(--font-family-sans);
    font-size: 1.5rem;
    margin: 0 0 var(--space-4) 0;
    line-height: 1.2;
}

.considerations ul[b-7yc5il7sek] {
    position: relative;
    padding: 0;
    margin: 0;
    padding-left: var(--space-5); /* 20px controls space between bar and bullet */
    list-style-type: disc;
}

.considerations ul[b-7yc5il7sek]:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    background-color: var(--primary-light);
    border-radius: var(--radius-sm);
}

.considerations li[b-7yc5il7sek] {
    padding-bottom: var(--space-2-5); /* 10px */
    padding-left: var(--space-1-5); /* 5px */
    margin-left: var(--space-4); /* 16px */
    color: var(--foreground);
    line-height: 1.5;
    font-size: 0.9rem;
}

.considerations li:last-child[b-7yc5il7sek] {
    padding-bottom: 0;
}

/* ================================================= */
/* Responsive Design */
/* ================================================= */

@media (max-width: 1024px) {
    .bottom-container__spacer[b-7yc5il7sek] {
        display: none;
    }
    
    .bottom-container[b-7yc5il7sek] {
        gap: var(--space-6);
        margin-top: var(--space-4);
    }
}
/* /Modules/Configurator/Configurator/Components/ConfigCrackerjack.razor.rz.scp.css */
/* ================================================= */
/* Cracker Jack Component - Modern Card Design */
/* ================================================= */

.cracker-jack[b-8tmgs1tza3] {
    background-color: #2b313b; /* Original configurator primary color */
    display: flex;
    padding: var(--space-8);
    border-radius: var(--radius-lg);
    gap: var(--space-6);
    width: 100%;
    max-width: var(--max-screen); /* Respect same constraint as header */
    margin: 0 auto; /* Center align like header */
    justify-content: space-between;
    box-shadow: 0 4px 12px color-mix(in srgb, #2b313b 20%, transparent);
    align-items: stretch; /* Make both sides stretch to fill height */
    box-sizing: border-box; /* Include padding in width calculation */
}

.cracker-jack a[b-8tmgs1tza3] {
    text-decoration: none;
}

.cracker-jack__right[b-8tmgs1tza3] {
    page-break-before: always;
}

.cracker-jack__left[b-8tmgs1tza3] {
    display: flex;
    flex-direction: column;
    color: var(--primary-foreground);
    font-family: var(--font-family-sans);
    font-size: 1.125rem;
    align-items: center;
    gap: var(--space-4);
    letter-spacing: 0.025rem;
    flex: 1.5; /* Give left side more space by default */
    min-width: 320px; /* Minimum width to prevent it from getting too small */
    min-height: 500px; /* Ensure minimum height for the container */
}

.cracker-jack__left h2[b-8tmgs1tza3] {
    font-weight: 500;
    color: var(--primary-foreground);
    font-family: var(--font-family-sans);
    margin: 0;
    letter-spacing: 0.15rem;
    text-transform: uppercase;
    flex-shrink: 0; /* Don't let the title shrink */
    text-align: center;
}

.cracker-jack__image-container[b-8tmgs1tza3] {
    border-radius: var(--radius-md);
    overflow: hidden;
    position: relative;
    width: 100%;
    flex: 1; /* Fill all remaining vertical space after title */
    box-shadow: 0 2px 8px color-mix(in srgb, var(--foreground) 15%, transparent);
}

.cracker-jack__image-container img[b-8tmgs1tza3] {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.cracker-jack__right[b-8tmgs1tza3] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    background-color: var(--card);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    font-family: var(--font-family-sans);
    letter-spacing: 0.025rem;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--foreground) 10%, transparent);
    flex: 1; /* Take remaining space */
    min-width: 240px; /* Reduced from 280px to prevent overflow */
    max-width: 480px; /* Smaller max width to prevent it from getting too wide */
    height: fit-content;
}

/* ================================================= */
/* Spec Grid - Top section with summary and budget */
/* ================================================= */

.spec-grid[b-8tmgs1tza3] {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--space-3); /* Reduced gap between spec summary and budget */
    align-items: stretch;
}

.spec-section[b-8tmgs1tza3] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1); /* Reduced gap between title and content */
}

.spec-section h3[b-8tmgs1tza3] {
    color: var(--primary);
    font-size: 1rem;
    font-weight: 600;
    font-family: var(--font-family-sans);
    margin: 0;
    letter-spacing: 0.025rem;
}

.spec-section--summary[b-8tmgs1tza3] {
    height: 100%;
}

.spec-block[b-8tmgs1tza3] {
    background-color: color-mix(in srgb, var(--muted) 30%, transparent);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-3); /* Reduced from space-4 */
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.spec-block--copy[b-8tmgs1tza3] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    cursor: pointer;
}

.spec-block--copy:hover[b-8tmgs1tza3] {
    background-color: color-mix(in srgb, var(--primary) 8%, transparent);
    border-color: var(--primary);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 15%, transparent);
}

.spec-icon[b-8tmgs1tza3] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    background-color: var(--primary-light);
    color: white;
    flex-shrink: 0;
}

.spec-content[b-8tmgs1tza3] {
    flex-grow: 1;
}

.spec-text[b-8tmgs1tza3] {
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--foreground);
    display: block;
}

/* ================================================= */
/* Downloads Section */
/* ================================================= */

.spec-section--downloads[b-8tmgs1tza3] {
    margin: 0;
}

.downloads-container[b-8tmgs1tza3] {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-2);
}

.download-card[b-8tmgs1tza3] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    background-color: color-mix(in srgb, var(--muted) 30%, transparent);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    color: var(--foreground);
    cursor: pointer;
}

.download-card:hover[b-8tmgs1tza3] {
    background-color: color-mix(in srgb, var(--primary) 8%, transparent);
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 15%, transparent);
}

.download-card--featured[b-8tmgs1tza3] {
    background-color: color-mix(in srgb, #c2a264 10%, transparent);
    border-color: color-mix(in srgb, #c2a264 30%, transparent);
}

.download-card--featured:hover[b-8tmgs1tza3] {
    background-color: color-mix(in srgb, #c2a264 15%, transparent);
    border-color: #c2a264;
}

.download-icon[b-8tmgs1tza3] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    background-color: var(--muted);
    border: 1px solid var(--border);
    flex-shrink: 0;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.download-icon--revit[b-8tmgs1tza3] {
    background-color: color-mix(in srgb, var(--primary-light) 15%, transparent);
    border-color: color-mix(in srgb, var(--primary) 30%, transparent);
    color: var(--primary);
}

.download-icon--material[b-8tmgs1tza3] {
    background-color: color-mix(in srgb, #16a085 15%, transparent);
    border-color: color-mix(in srgb, #16a085 30%, transparent);
    color: #16a085;
}

.download-icon--pdf[b-8tmgs1tza3] {
    background-color: color-mix(in srgb, #dc3545 15%, transparent);
    border-color: color-mix(in srgb, #dc3545 30%, transparent);
    color: #dc3545;
}

.download-content[b-8tmgs1tza3] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    flex-grow: 1;
}

.download-title[b-8tmgs1tza3] {
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--foreground);
    line-height: 1.2;
}

.download-subtitle[b-8tmgs1tza3] {
    font-size: 0.8rem;
    color: var(--muted-foreground);
    line-height: 1.2;
}

.download-badge[b-8tmgs1tza3] {
    background-color: var(--primary);
    color: white;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05rem;
    flex-shrink: 0;
    align-self: center;
}

/* ================================================= */
/* Tech Data Section */
/* ================================================= */

.tech-grid[b-8tmgs1tza3] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: var(--space-2);
}

.tech-card[b-8tmgs1tza3] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background-color: color-mix(in srgb, var(--muted) 30%, transparent);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    color: var(--foreground);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    min-height: 40px;
}

.tech-card:hover[b-8tmgs1tza3] {
    background-color: color-mix(in srgb, var(--primary) 8%, transparent);
    border-color: var(--primary);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 15%, transparent);
}

.tech-pdf-icon[b-8tmgs1tza3] {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    opacity: 0.7;
}

.tech-card:hover .tech-pdf-icon[b-8tmgs1tza3] {
    opacity: 1;
}

.spec-block--budget[b-8tmgs1tza3] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.budget-rating[b-8tmgs1tza3] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    color: var(--foreground);
    font-size: 0.875rem;
    font-family: var(--font-family-sans);
    letter-spacing: 0.025rem;
    flex-direction: row;
    width: 100%;
}

.cracker-jack__block[b-8tmgs1tza3] {
    display: flex;
    align-items: center; /* Vertically center icon and text */
    justify-content: flex-start; /* Align content to the start */
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    color: var(--foreground);
    text-transform: uppercase;
    font-size: 0.875rem;
    font-family: var(--font-family-sans);
    width: fit-content;
    letter-spacing: 0.025rem;
    border-radius: var(--radius-md);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    /* No border - clean link appearance */
}

.cracker-jack__block:hover[b-8tmgs1tza3] {
    color: var(--primary);
    cursor: pointer;
    background-color: color-mix(in srgb, var(--background) 15%, transparent);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--foreground) 20%, transparent);
}

.pdf-icon[b-8tmgs1tza3] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    max-width: var(--icon-width);
}

.dollar-icon[b-8tmgs1tza3] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    max-width: var(--icon-width);
    color: var(--accent);
}


.contact-data__block[b-8tmgs1tza3] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
    padding: 0 var(--space-xs);
}

.cracker-jack__link[b-8tmgs1tza3] {
    color: var(--accent);
    font-weight: 500;
    text-decoration: none;
}

.cracker-jack__link:hover[b-8tmgs1tza3] {
    color: var(--primary);
    cursor: pointer;
}

.tooltip[b-8tmgs1tza3] {
    position: relative;
    display: inline-block;
    visibility: collapse;
}

.tooltip .tooltiptext[b-8tmgs1tza3] {
    visibility: hidden;
    width: 140px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    bottom: 150%;
    left: 50%;
    margin-left: -75px;
    opacity: 0;
    transition: opacity 0.3s;
}

.tooltip .tooltiptext[b-8tmgs1tza3]::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext[b-8tmgs1tza3] {
    visibility: visible;
    opacity: 1;
}


.bottom-container[b-8tmgs1tza3] {
    display: flex;
    width: 100%;
    gap: var(--space-xl);
    margin-top: var(--space-s);
}

.bottom-container__spacer[b-8tmgs1tza3] {
    width: 18rem;
}

.considerations[b-8tmgs1tza3] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
    padding: 0;
    letter-spacing: var(--letter-spacing-s);
}

.considerations h2[b-8tmgs1tza3] {
    font-weight: 400;
    color: var(--primary);
}

.considerations ul[b-8tmgs1tza3] {
    position: relative;
    padding: 0;
    margin: 0;
    padding-left: 20px; /* controls space between bar and bullet */
}


.considerations ul[b-8tmgs1tza3]:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    background-color: var(--primary-light);
}

.considerations li[b-8tmgs1tza3] {
    padding-bottom: 15px;
    padding-left: 5px;
    margin-left: 16px;
}

.considerations li:last-child[b-8tmgs1tza3] {
    padding-bottom: 0;
}

.config-btn[b-8tmgs1tza3] {
    padding-block: 0.75em;
    padding-inline: 1.5em;
    min-inline-size: 14rem;
    line-height: 1;
    font-weight: 400;
    font-style: normal;
    border-width: 2px;
    border-style: solid;
    border-radius: 5px;
    justify-content: center;
    text-align: center;
    transition: background 0.3s ease-in-out 0s, color 0.3s ease-in-out 0s, border 0.3s ease-in-out 0s;
}

.config-btn--primary[b-8tmgs1tza3] {
    background-color: #c2a264; /* Original configurator accent color */
    color: #f8f4ed;
    border-color: #c2a264;
}

.config-btn--primary:hover[b-8tmgs1tza3] {
    background-color: #d1b989;
    color: #f8f4ed;
    border-color: #d1b989;
}

.config-btn--white-outline[b-8tmgs1tza3] {
    color: var(--foreground);
    border-color: var(--foreground);
    border-width: 1px;
    background-color: transparent;
}

.config-btn--white-outline:hover[b-8tmgs1tza3] {
    background-color: var(--foreground);
    color: var(--background);
    border-color: var(--foreground);
}

.cta-combo[b-8tmgs1tza3] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-direction: row;
    flex-wrap: nowrap;
}

.cta-combo .config-btn[b-8tmgs1tza3] {
    flex: 1;
    min-width: 0;
}


/* Large desktop - maintain current layout */
@media (max-width: 1400px) {
    .cracker-jack__right[b-8tmgs1tza3] {
        max-width: 420px; /* Slightly smaller on large screens */
    }
}

/* Switch spec grid to rows much earlier */
@media (max-width: 1400px) {
    .spec-grid[b-8tmgs1tza3] {
        grid-template-columns: 1fr; /* Switch to single column earlier */
        gap: var(--space-2); /* Reduce gap */
    }

    .spec-section--summary .spec-block[b-8tmgs1tza3] {
        display: grid;
        grid-template-columns: auto 1fr; /* Icon and content side by side */
        align-items: center;
    }

    .cracker-jack__right[b-8tmgs1tza3] {
        max-width: 400px;
        padding: var(--space-3); /* Reduce padding */
        gap: var(--space-3); /* Reduce gap between sections */
    }

    .cracker-jack__left[b-8tmgs1tza3] {
        min-width: 300px;
    }
}

/* Tablet breakpoint - still side by side but more compact */
@media (max-width: 1024px) {
    .cracker-jack[b-8tmgs1tza3] {
        gap: var(--space-4);
        padding: var(--space-6);
    }

    .cracker-jack__left[b-8tmgs1tza3] {
        flex: 1.8; /* Even more space for image */
        min-width: 250px;
        min-height: 400px;
    }

    .cracker-jack__right[b-8tmgs1tza3] {
        flex: 1;
        max-width: 340px;
        padding: var(--space-3);
        gap: var(--space-3);
    }

    .spec-grid[b-8tmgs1tza3] {
        gap: var(--space-2);
    }

    .downloads-container[b-8tmgs1tza3] {
        gap: var(--space-1);
    }

    .download-card[b-8tmgs1tza3] {
        padding: var(--space-2);
        gap: var(--space-2);
    }
}

/* Large mobile - stack vertically */
@media (max-width: 768px) {
    .cracker-jack[b-8tmgs1tza3] {
        flex-direction: column;
        align-items: center;
        gap: var(--space-4);
        padding: var(--space-4);
    }

    .cracker-jack__left[b-8tmgs1tza3] {
        width: 100%;
        max-width: 600px;
        min-height: 300px;
        flex: none;
    }

    .cracker-jack__right[b-8tmgs1tza3] {
        width: 100%;
        max-width: 600px;
        flex: none;
    }

    .cracker-jack__image-container[b-8tmgs1tza3] {
        width: 100%;
    }

    .spec-grid[b-8tmgs1tza3] {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }

    .tech-grid[b-8tmgs1tza3] {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    }
}

/* Small mobile - further refinements */
@media (max-width: 640px) {
    .cracker-jack[b-8tmgs1tza3] {
        padding: var(--space-3);
        gap: var(--space-3);
    }

    .cracker-jack__left[b-8tmgs1tza3] {
        min-height: 250px;
    }

    .cracker-jack__right[b-8tmgs1tza3] {
        padding: var(--space-3);
        gap: var(--space-3);
    }

    .spec-block[b-8tmgs1tza3], .download-card[b-8tmgs1tza3] {
        padding: var(--space-2) var(--space-3);
    }

    .download-icon[b-8tmgs1tza3] {
        width: 32px;
        height: 32px;
    }

    .spec-icon[b-8tmgs1tza3] {
        width: 28px;
        height: 28px;
    }

    .tech-grid[b-8tmgs1tza3] {
        grid-template-columns: 1fr;
    }

    .tech-card[b-8tmgs1tza3] {
        justify-content: flex-start;
        padding: var(--space-2);
    }

    .cta-combo[b-8tmgs1tza3] {
        flex-direction: column;
        gap: var(--space-2);
    }

    .cta-combo .config-btn[b-8tmgs1tza3] {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .cracker-jack[b-8tmgs1tza3] {
        padding: var(--space-3);
        gap: var(--space-3);
    }

    .cracker-jack__right[b-8tmgs1tza3] {
        padding: var(--space-3);
        gap: var(--space-3);
    }

    .spec-grid[b-8tmgs1tza3] {
        gap: var(--space-2);
    }

    .downloads-container[b-8tmgs1tza3] {
        gap: var(--space-2);
    }

    .download-card[b-8tmgs1tza3], .spec-block[b-8tmgs1tza3] {
        padding: var(--space-2);
        gap: var(--space-2);
    }

    .download-icon[b-8tmgs1tza3] {
        width: 28px;
        height: 28px;
    }

    .spec-icon[b-8tmgs1tza3] {
        width: 24px;
        height: 24px;
    }

    .download-title[b-8tmgs1tza3] {
        font-size: 0.8rem;
    }

    .download-subtitle[b-8tmgs1tza3] {
        font-size: 0.7rem;
    }

    .spec-text[b-8tmgs1tza3] {
        font-size: 0.75rem;
    }

    .tech-card[b-8tmgs1tza3] {
        padding: var(--space-1) var(--space-2);
        font-size: 0.75rem;
        min-height: 36px;
    }

    .tech-pdf-icon[b-8tmgs1tza3] {
        width: 12px;
        height: 12px;
    }
}
/* /Modules/Configurator/Configurator/Components/ConfiguratorHeader.razor.rz.scp.css */
/* ================================================= */
/* Header Component - Modern DRP Style */
/* ================================================= */

.header-container[b-be4g7ngcem] {
    margin-left: auto;
    margin-right: auto;
    display: flex;
    justify-content: center;
    padding: 0 var(--space-4);
    background-color: var(--background);
    border-bottom: 1px solid var(--border);
}

.header__inner[b-be4g7ngcem] {
    max-width: var(--max-screen);
    padding: var(--space-4) 0;
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: space-between;
    align-items: flex-end;
}

.header__logo-wrapper[b-be4g7ngcem] {
    width: auto;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);

    &:hover {
        transform: translateY(-1px);
    }
}

.header__logo[b-be4g7ngcem] {
    height: 100%;
    width: 200px;
    filter: brightness(1);
}

.header__title-wrapper[b-be4g7ngcem] {
    display: flex;
    align-items: flex-end;
}

.header__title[b-be4g7ngcem] {
    text-align: center;
    font-size: 1.125rem; /* Modern sizing */
    font-weight: 500; /* Modern weight */
    line-height: 1.2;
    color: var(--foreground); /* Use foreground for proper contrast */
    max-width: 17ch;
    letter-spacing: 0.075rem; /* Slightly reduced for modern look */
    margin: 0;
    text-transform: uppercase;
    font-family: var(--font-family-sans);
}

.header__home-link[b-be4g7ngcem] {
    font-size: 0.9rem;
    text-decoration: none;
    color: var(--muted-foreground);
    cursor: pointer;
    letter-spacing: 0.025rem;
    font-family: var(--font-family-sans);
    transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1);

    &:hover {
        color: var(--primary);
    }
}

/* ================================================= */
/* Responsive Design */
/* ================================================= */

@media only screen and (max-width: 600px) {
    .header__inner[b-be4g7ngcem] {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: var(--space-6) 0;
    }

    .header__media-wrapper[b-be4g7ngcem] {
        margin-bottom: var(--space-4);
    }

    .header__title[b-be4g7ngcem] {
        margin-bottom: var(--space-2);
        font-size: 1rem;
    }

    .header__link-wrapper[b-be4g7ngcem] {
        margin-top: var(--space-4);
    }

    .header__logo[b-be4g7ngcem] {
        width: 160px;
    }
}
/* /Modules/Configurator/Configurator/Components/ConfiguratorOptionSelector.razor.rz.scp.css */
/* ================================================= */
/* Option Selector - Modern Card Design */
/* ================================================= */

.option-selector[b-vyjjaz4mii] {
    width: 22rem; /* Fixed width for consistency across all option types */
    min-width: 22rem; /* Ensure minimum width is maintained */
    min-height: 420px; /* Match approximate height of configurator-selector */
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-6) var(--space-8);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--foreground) 10%, transparent);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-6);
    background-color: var(--card);
    height: fit-content;
    flex-grow: 1;
}

.option-selector a[b-vyjjaz4mii] {
    text-decoration: none;
    color: var(--foreground);
    transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1);

    &:hover {
        color: var(--primary);
    }
}

/* ================================================= */
/* Header Section */
/* ================================================= */

.option-selector-header[b-vyjjaz4mii] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.option-selector-header h3[b-vyjjaz4mii] {
    margin: 0;
    color: var(--primary);
    font-size: 1.5rem;
    letter-spacing: 0.025rem;
    font-weight: 500;
    font-family: var(--font-family-sans);
    line-height: 1.3;
}

.option-selector-header p[b-vyjjaz4mii] {
    margin: 0;
    color: var(--muted-foreground);
    font-size: 0.9rem;
    letter-spacing: 0.025rem;
    font-family: var(--font-family-sans);
    line-height: 1.5;
    margin-top: var(--space-2);
}

.option-selector-content[b-vyjjaz4mii] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    width: 100%;
}

/* ================================================= */
/* Responsive Design */
/* ================================================= */

/* Large tablets and small desktops */
@media (max-width: 1280px) {
    .option-selector[b-vyjjaz4mii] {
        width: 20rem;
        min-width: 20rem;
        min-height: 400px;
    }
}

/* Tablets */
@media (max-width: 1024px) {
    .option-selector[b-vyjjaz4mii] {
        width: 90%;
        min-width: 300px;
        max-width: 450px;
        min-height: 350px;
        margin: 0 auto;
    }
}

/* Mobile devices */
@media (max-width: 768px) {
    .option-selector[b-vyjjaz4mii] {
        width: 90%;
        min-width: 280px;
        max-width: 400px;
        min-height: 300px;
        padding: var(--space-4) var(--space-6);
        margin: 0 auto;
    }
}

/* Small mobile devices */
@media (max-width: 480px) {
    .option-selector[b-vyjjaz4mii] {
        width: 85%;
        min-width: 260px;
        max-width: 340px;
        min-height: 280px;
        padding: var(--space-3) var(--space-4);
        margin: 0 auto;
    }

    .option-selector-header h3[b-vyjjaz4mii] {
        font-size: 1.3rem;
    }

    .option-selector-header p[b-vyjjaz4mii] {
        font-size: 0.85rem;
    }
}
/* /Modules/Configurator/Configurator/Components/ConfiguratorOptionSelectorItem.razor.rz.scp.css */
/* ================================================= */
/* Option Selector Item - Modern Card Design */
/* ================================================= */

.option-selector-item[b-4z7mw7syp6] {
    display: grid;
    grid-template-columns: 0.2fr 2.6fr 0.2fr;
    border-radius: var(--radius-xl);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--foreground) 15%, transparent);
    padding: var(--space-5) var(--space-4);
    align-items: center;
    gap: var(--space-4);
    cursor: default;
    /* Background color set via inline style from Option.BackgroundColor */
    position: relative;
    color: white; /* White text for good contrast on all background colors */
    width: 100%;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    border: none; /* Remove button border */
    
    &:disabled {
        opacity: 0.6;
        cursor: not-allowed;
        filter: grayscale(0.3);
    }
    
    &:disabled:hover[b-4z7mw7syp6] {
        transform: none;
        box-shadow: 0 4px 12px color-mix(in srgb, var(--foreground) 15%, transparent);
        filter: grayscale(0.3);
    }
    
    &:hover[b-4z7mw7syp6] {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px color-mix(in srgb, var(--foreground) 20%, transparent);
        filter: brightness(1.1); /* Slightly brighten on hover for better feedback */
    }
    
    &:focus[b-4z7mw7syp6] {
        outline: 2px solid var(--primary);
        outline-offset: 2px;
    }
}

.option-selector-item a[b-4z7mw7syp6] {
    text-decoration: none;
    color: inherit;
}

.option-selector-item__label[b-4z7mw7syp6] {
    font-size: 0.9rem;
    text-transform: uppercase;
    font-weight: 400;
    letter-spacing: 0.075rem;
    text-align: center;
    font-family: var(--font-family-sans);
    color: white; /* White text for good contrast */
}

/* ================================================= */
/* Popup Component */
/* ================================================= */

.option-selector-item__popup[b-4z7mw7syp6] {
    position: absolute;
    left: calc(100% + var(--space-8));
    top: 0;
    padding: var(--space-8) var(--space-6);
    border: 1px solid color-mix(in srgb, white 20%, transparent);
    background-color: inherit; /* Inherit from parent to avoid flash */
    z-index: 1;
    border-radius: var(--radius-lg);
    border-top-left-radius: 0;
    display: flex;
    flex-direction: column;
    width: 22em;
    min-height: 200px;
    cursor: default;
    justify-content: space-between;
    align-items: stretch;
    visibility: collapse;
    opacity: 0;
    transition: visibility 0s 0.3s, opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateX(-8px) scale(0.95);
    gap: var(--space-6);
    box-shadow: 0 12px 32px color-mix(in srgb, var(--foreground) 30%, transparent);
    color: white; /* White text for good contrast */
    backdrop-filter: blur(8px);
}

.option-selector-popup__body[b-4z7mw7syp6] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    align-items: center;
}

.option-selector-popup__body a[b-4z7mw7syp6] {
    color: white;
    font-weight: 500;
    text-decoration: underline;
    transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.option-selector-popup__body a:hover[b-4z7mw7syp6] {
    opacity: 0.8;
    cursor: pointer;
}

.option-selector-item__popup h4[b-4z7mw7syp6] {
    text-align: center;
    margin: 0;
    font-weight: 600;
    text-transform: uppercase;
    color: white;
    font-family: var(--font-family-sans);
    letter-spacing: 0.05rem;
    font-size: 0.95rem;
}

.option-selector-item__popup p[b-4z7mw7syp6] {
    font-size: 0.85rem;
    color: color-mix(in srgb, white 90%, transparent);
    text-align: center;
    line-height: 1.6;
    margin: 0;
    max-width: 100%;
}

.option-selector-item__popup[b-4z7mw7syp6]::before {
    content: "";
    position: absolute;
    top: -1px; /* Adjust this value to align the leg with the button */
    left: calc(-4.8% - var(--space-8));
    height: var(--before-height, 3.9em); /* Adjust this value to match the height of the button */
    width: 4rem;
    background-color: inherit; /* Inherit color to match popup */
}


.option-selector-item:hover .option-selector-item__popup[b-4z7mw7syp6] {
    visibility: visible;
    opacity: 1;
    transform: translateX(0) scale(1);
    transition-delay: 0.5s;
}

/* Hide popup on mobile */
@media (max-width: 1280px) {
    .option-selector-item__popup[b-4z7mw7syp6] {
        display: none;
    }

    .option-selector-item__icon[b-4z7mw7syp6] {
        display: none;
    }
}


/* ================================================= */
/* Tech Data Button */
/* ================================================= */

.option-selector-popup__footer[b-4z7mw7syp6] {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: auto;
}

.option-selector__tech-btn[b-4z7mw7syp6] {
    border-radius: var(--radius-lg);
    border: 1px solid color-mix(in srgb, white 60%, transparent);
    display: inline-flex;
    padding: var(--space-4) var(--space-5);
    justify-content: center;
    align-items: center;
    width: auto;
    min-width: 140px;
    gap: var(--space-2);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    background-color: color-mix(in srgb, white 8%, transparent);
    backdrop-filter: blur(4px);
    
    font-size: 0.8rem;
    color: white;
    font-weight: 500;
    letter-spacing: 0.075rem;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    font-family: var(--font-family-sans);
}

.option-selector__tech-btn span[b-4z7mw7syp6] {
    font-size: 0.8rem;
    color: white;
    letter-spacing: 0.075rem;
    text-align: center;
    text-transform: uppercase;
}

.download-icon[b-4z7mw7syp6] {
    width: 16px;
    height: 16px;
    color: white;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.pdf-icon[b-4z7mw7syp6] {
    width: 16px;
    height: 16px;
    object-fit: contain;
    filter: brightness(0) invert(1); /* Make icon white */
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.option-selector__tech-btn:hover .download-icon[b-4z7mw7syp6],
.option-selector__tech-btn:hover .pdf-icon[b-4z7mw7syp6] {
    transform: scale(1.1);
}

.option-selector__tech-btn:hover[b-4z7mw7syp6] {
    background-color: color-mix(in srgb, white 20%, transparent);
    border-color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--foreground) 25%, transparent);
}
/* /Modules/Configurator/Configurator/Components/ConfiguratorSelector.razor.rz.scp.css */
/* ================================================= */
/* Configurator Selector - Modern Card Design */
/* ================================================= */

.configurator-selector[b-rl1x9hjgqx] {
    width: 25rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    height: fit-content;
    background-color: var(--card);
    box-shadow: 0 1px 3px color-mix(in srgb, var(--foreground) 8%, transparent);
    transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);

    &:hover {
        box-shadow: 0 4px 12px color-mix(in srgb, var(--foreground) 12%, transparent);
    }
}

.configurator-selector a[b-rl1x9hjgqx] {
    text-decoration: none;
    color: var(--foreground);
    transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1);

    &:hover {
        color: var(--primary);
    }
}

/* ================================================= */
/* Responsive Design */
/* ================================================= */

@media (max-width: 1024px) {
    .configurator-selector[b-rl1x9hjgqx] {
        display: none;
    }
}
    
/* /Modules/Configurator/Configurator/Components/ConfiguratorSelectorItem.razor.rz.scp.css */
/* ================================================= */
/* Configurator Selector Item - Modern Interactive */
/* ================================================= */

.configurator-selector-item[b-ko0mtzmzga] {
    padding: var(--space-3) var(--space-4);
    color: var(--muted-foreground);
    display: flex;
    flex-direction: column;
    font-family: var(--font-family-sans);
    letter-spacing: 0.025rem;
    cursor: pointer;
    border-radius: var(--radius-md);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid transparent;
}

.configurator-selector-item a[b-ko0mtzmzga] {
    text-decoration: none;
    color: inherit;
}

.configurator-selector-item__header[b-ko0mtzmzga] {
    font-size: 0.9rem;
    margin: 0;
    margin-bottom: var(--space-1);
    font-weight: 500;
    color: var(--foreground);
}

.configurator-selector-item__btn[b-ko0mtzmzga] {
    display: grid;
    grid-template-columns: 1.9fr 0.3fr;
    grid-template-rows: 1fr;
    align-items: center;
    text-transform: uppercase;
}

.configurator-selector-item__label[b-ko0mtzmzga] {
    font-size: 0.8rem;
    color: var(--muted-foreground);
}

.configurator-selector-item__divider[b-ko0mtzmzga]::after {
    content: '';
    width: 100%;
    height: 1px;
    background-color: var(--border);
    margin-top: var(--space-4);
    display: block;
}

/* ================================================= */
/* Interactive States */
/* ================================================= */

/* HOVER STATE */
.configurator-selector-item:hover[b-ko0mtzmzga] {
    background-color: color-mix(in srgb, var(--primary) 5%, transparent);
    border-color: var(--border);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--foreground) 8%, transparent);
}

.configurator-selector-item:hover .configurator-selector-item__header[b-ko0mtzmzga] {
    color: var(--primary);
}

.configurator-selector-item:hover .configurator-selector-item__label[b-ko0mtzmzga] {
    color: var(--foreground);
}

/* ACTIVE STATE */
.configurator-selector-item__active[b-ko0mtzmzga] {
    background-color: color-mix(in srgb, var(--primary) 10%, transparent);
    border-color: var(--primary);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 15%, transparent);
}

.configurator-selector-item__active .configurator-selector-item__header[b-ko0mtzmzga] {
    color: var(--primary);
    font-weight: 600;
}

.configurator-selector-item__active .configurator-selector-item__label[b-ko0mtzmzga] {
    color: var(--foreground);
}

.configurator-selector-item__active .edit-icon[b-ko0mtzmzga] {
    display: none;
}

/* SELECTED STATE */
.configurator-selector-item__selected .configurator-selector-item__label[b-ko0mtzmzga] {
    color: var(--foreground);
    font-weight: 500;
}
/* /Modules/Configurator/Configurator/Components/StandardConfigurator.razor.rz.scp.css */
/* ================================================= */
/* Standard Configurator - Modern Design System     */
/* ================================================= */

.standard-configurator[b-saijwp23p7] {
    /* Use DRP design system variables - no custom overrides */
    font-family: var(--font-family-sans);
    color: var(--foreground);
    background-color: var(--background);
    
    /* Legacy compatibility - map to modern system */
    --max-screen: 1760px;
    --icon-width: 1.313rem;
    
    /* Shadow system aligned with DRP */
    --shadow-inset: 0px 4px 4px 0px color-mix(in srgb, var(--foreground) 15%, transparent) inset;
    --shadow-active: 0px 4px 4px 0px color-mix(in srgb, var(--foreground) 25%, transparent) inset;
    --shadow-black: 0px 4px 4px 0px color-mix(in srgb, var(--foreground) 25%, transparent);
}

/* ================================================= */
/* Typography Reset */
/* ================================================= */

.standard-configurator p[b-saijwp23p7] {
    margin: 0;
    color: var(--foreground);
    font-family: var(--font-family-sans);
    line-height: 1.5;
}

.standard-configurator a[b-saijwp23p7] {
    text-decoration: none;
    color: var(--primary);
    transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    
    &:hover {
        color: var(--primary-dark);
    }
}

.standard-configurator h2[b-saijwp23p7] {
    margin: 0;
    font-family: var(--font-family-sans);
    font-weight: 600;
    color: var(--foreground);
    line-height: 1.2;
}

.standard-configurator h3[b-saijwp23p7] {
    margin: 0;
    font-family: var(--font-family-sans);
    font-weight: 500;
    color: var(--foreground);
    line-height: 1.3;
}

/* ================================================= */
/* Layout Container */
/* ================================================= */

.main-container[b-saijwp23p7] {
    max-width: var(--max-screen);
    display: flex;
    flex-direction: row;
    margin-left: auto;
    margin-right: auto;
    padding: var(--space-8) var(--space-4);
    font-weight: 400; /* Modern font weight */
    flex-wrap: wrap;
    background-color: var(--background);
}

.main-container__inner[b-saijwp23p7] {
    display: flex;
    width: 100%;
    gap: var(--space-8); /* Slightly smaller gap for better balance */
    max-width: var(--max-screen);
    align-items: stretch; /* Make both sides stretch to same height */
}

/* ================================================= */
/* Responsive Design */
/* ================================================= */

/* Large desktop - optimize spacing */
@media (max-width: 1400px) {
    .main-container__inner[b-saijwp23p7] {
        gap: var(--space-6); /* Smaller gap for tighter layouts */
    }
}

/* Medium desktop - further spacing adjustments */
@media (max-width: 1200px) {
    .main-container__inner[b-saijwp23p7] {
        gap: var(--space-5); /* Even tighter spacing */
    }
    
    .main-container[b-saijwp23p7] {
        padding: var(--space-6) var(--space-4); /* Keep consistent with header */
    }
}

/* Tablet - maintain side-by-side layout but compact */
@media (max-width: 1024px) {
    .main-container__inner[b-saijwp23p7] {
        justify-content: center;
        gap: var(--space-4); /* Compact gap for tablet */
    }
    
    .main-container[b-saijwp23p7] {
        padding: var(--space-5) var(--space-4); /* Keep consistent with header */
    }
}

/* Large mobile - stack configurator elements */
@media (max-width: 768px) {
    .main-container__inner[b-saijwp23p7] {
        flex-direction: column;
        gap: var(--space-4);
        align-items: center;
    }
    
    .main-container[b-saijwp23p7] {
        padding: var(--space-4) var(--space-4); /* Keep consistent with header */
    }
}

/* Small mobile - ultra compact */
@media (max-width: 640px) {
    .main-container[b-saijwp23p7] {
        padding: var(--space-3) var(--space-4); /* Keep consistent horizontal padding */
    }
    
    .main-container__inner[b-saijwp23p7] {
        gap: var(--space-3);
    }
}

/* ================================================= */
/* Simple Fade Transitions */
/* ================================================= */

.configurator-content[b-saijwp23p7] {
    position: relative;
    width: 100%;
    height: 100%; /* Stretch to fill parent height */
    display: flex; /* Enable flex for child elements */
    flex-direction: column; /* Stack children vertically */
}

.configurator-options[b-saijwp23p7] {
    transition: opacity 0.3s ease-in-out;
    position: relative;
    width: 100%;
    height: 100%; /* Stretch to fill parent height */
    display: flex; /* Enable flex for child elements */
    flex-direction: column; /* Stack children vertically */
}

.configurator-options.fade-in[b-saijwp23p7] {
    opacity: 1;
}

.configurator-options.fade-out[b-saijwp23p7] {
    opacity: 0; /* Complete disappearance */
    pointer-events: none; /* Prevent interaction during fade */
}

.content-fade-in[b-saijwp23p7] {
    animation: fadeInFromBottom-b-saijwp23p7 0.5s ease-out;
    position: relative;
    width: 100%;
}

@keyframes fadeInFromBottom-b-saijwp23p7 {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ================================================= */
/* Toast Notification Styling */
/* ================================================= */

/* Override all notification containers and elements */
:global(.rz-notifications-container)[b-saijwp23p7],
:global(.rz-notification-container)[b-saijwp23p7],
:global(.rz-notification)[b-saijwp23p7] {
    background-color: var(--card) !important;
    color: var(--foreground) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--foreground) 15%, transparent) !important;
}

/* Remove any default backgrounds */
:global(.rz-notification::before)[b-saijwp23p7],
:global(.rz-notification::after)[b-saijwp23p7],
:global(.rz-notification-container::before)[b-saijwp23p7],
:global(.rz-notification-container::after)[b-saijwp23p7] {
    background: none !important;
    background-color: transparent !important;
}

:global(.rz-notification .rz-notification-summary)[b-saijwp23p7] {
    color: var(--foreground) !important;
    font-weight: 600 !important;
    font-family: var(--font-family-sans) !important;
    background: none !important;
}

:global(.rz-notification .rz-notification-detail)[b-saijwp23p7] {
    color: var(--muted-foreground) !important;
    font-family: var(--font-family-sans) !important;
    background: none !important;
}

:global(.rz-notification.rz-notification-info)[b-saijwp23p7] {
    border-left: 4px solid #c2a264 !important; /* Golden accent like cracker jack */
    background-color: var(--card) !important;
}

:global(.rz-notification.rz-notification-warning)[b-saijwp23p7] {
    border-left: 4px solid var(--destructive) !important;
    background-color: var(--card) !important;
}

/* Target the notification message content specifically */
:global(.rz-notification-message)[b-saijwp23p7] {
    background-color: var(--card) !important;
    color: var(--foreground) !important;
}

/* Override any Radzen theme backgrounds */
:global(.rz-notification-info .rz-notification-message)[b-saijwp23p7],
:global(.rz-notification-warning .rz-notification-message)[b-saijwp23p7],
:global(.rz-notification-success .rz-notification-message)[b-saijwp23p7],
:global(.rz-notification-error .rz-notification-message)[b-saijwp23p7] {
    background-color: var(--card) !important;
    color: var(--foreground) !important;
}



/* /Modules/Core/GlobalSearch/Components/ModernCommandPalette.razor.rz.scp.css */
:root[b-uh26mts326] {
    --cmd-bg: var(--rz-white, #101113);
    --cmd-overlay: rgba(0, 0, 0, .5);
    --cmd-border: color-mix(in oklab, white 8%, transparent);
    --cmd-muted: color-mix(in oklab, var(--foreground, #e7e7ea) 60%, transparent);
    --cmd-fg: var(--foreground, #e7e7ea);
    --cmd-accent: var(--primary, #6ea8fe);
    --cmd-active: color-mix(in oklab, var(--primary, #6ea8fe) 14%, transparent);
}

.cmd-panel[b-uh26mts326] {
    display: block;
    max-height: 62vh;
}

.cmd-header[b-uh26mts326] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: .5rem;
    padding: .6rem .8rem;
    border-bottom: 1px solid var(--cmd-border, #e6e6ea);
}

.cmd-icon[b-uh26mts326] {
    font-family: 'Material Symbols Outlined', sans-serif;
    font-size: 20px;
    opacity: .7
}

.cmd-input[b-uh26mts326] {
    background: transparent;
    border: 0;
    outline: none;
    font: 500 16px/1.2 system-ui, sans-serif;
    color: var(--foreground, #222)
}

.cmd-kbd[b-uh26mts326] {
    border: 1px solid var(--cmd-border, #e6e6ea);
    background: transparent;
    color: #777;
    padding: .25rem .45rem;
    border-radius: 8px;
    font: 600 12px/1 system-ui, sans-serif
}

.cmd-help[b-uh26mts326] {
    display: flex;
    gap: 1rem;
    padding: .5rem .8rem;
    font-size: 12px;
    color: #777
}

.cmd-help kbd[b-uh26mts326] {
    border: 1px solid var(--cmd-border, #e6e6ea);
    padding: .2rem .35rem;
    border-radius: 6px;
    background: transparent
}

.cmd-body[b-uh26mts326] {
    max-height: calc(62vh - 2.2rem);
    overflow: auto;
    padding: .25rem;
}

.cmd-empty[b-uh26mts326] {
    padding: 1rem;
    color: #777;
    font-size: 14px
}

.cmd-row[b-uh26mts326] {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .5rem .6rem;
    border-radius: 10px;
    cursor: pointer
}

.cmd-row.is-active[b-uh26mts326] {
    background: color-mix(in oklab, var(--primary, #6ea8fe) 14%, transparent)
}

.cmd-row:hover[b-uh26mts326] {
    background: color-mix(in oklab, var(--primary, #6ea8fe) 24%, transparent)
}

.cmd-row-left[b-uh26mts326] {
    width: 28px;
    display: grid;
    place-items: center
}

.cmd-avatar[b-uh26mts326] {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    object-fit: cover;
    border: 1px solid var(--cmd-border, #e6e6ea)
}

.cmd-row-icon[b-uh26mts326] {
    font-family: 'Material Symbols Outlined', sans-serif;
    font-size: 20px;
    opacity: .85
}

.cmd-row-dot[b-uh26mts326] {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--cmd-border, #e6e6ea)
}

.cmd-row-main[b-uh26mts326] {
    display: flex;
    flex-direction: column;
    min-width: 0
}

.cmd-primary[b-uh26mts326] {
    font: 600 14px/1.15 system-ui, sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.cmd-primary mark[b-uh26mts326] {
    background: transparent;
    color: var(--primary, #0a66ff);
    font-weight: 700
}

.cmd-secondary[b-uh26mts326] {
    font: 12px/1.2 system-ui, sans-serif;
    color: #777;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.cmd-badge[b-uh26mts326] {
    margin-left: auto;
    font: 600 11px/1 system-ui, sans-serif;
    padding: .25rem .45rem;
    border-radius: 999px;
    border: 1px solid var(--cmd-border, #e6e6ea);
    color: #777
}

/* /Modules/Core/Notes/Components/NoteDialog.razor.rz.scp.css */
.markup-string-container[b-82561pgj0h] {
    container-type: inline-size;

    & > * {
        font-size: clamp(0.9rem, 0.7rem + 0.5cqi, 1.1rem);
        line-height: 1.6;
    }
}
/* /Shared/DrpBreadCrumb.razor.rz.scp.css */
/* ============================================
   DRP Breadcrumb Component Enhancement
   ============================================ */

/* Override Radzen breadcrumb styling */
[b-r6jcfq5f3a] .rz-breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-family: var(--font-family-sans);
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.25;
    margin: 0;
    padding: 0;
}

/* Enhanced breadcrumb items */
[b-r6jcfq5f3a] .rz-breadcrumb-item {
    display: inline-flex;
    align-items: center;
    position: relative;
    color: var(--muted-foreground);
    transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Modern separator styling */
[b-r6jcfq5f3a] .rz-breadcrumb-item + .rz-breadcrumb-item::before {
    content: "/";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--space-2);
    font-size: 0.875rem;
    color: var(--border);
    font-weight: 400;
    transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Enhanced link styling */
[b-r6jcfq5f3a] .rz-breadcrumb-item .rz-link {
    display: inline-flex;
    align-items: center;
    color: inherit;
    text-decoration: none;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    font-weight: 400;
}

/* Hover states for interactive breadcrumbs */
[b-r6jcfq5f3a] .rz-breadcrumb-item:not(:last-child) .rz-link:hover {
    color: var(--primary);
    background-color: color-mix(in srgb, var(--primary) 8%, transparent);
    text-decoration: none;
}

/* Current page (last breadcrumb) styling */
[b-r6jcfq5f3a] .rz-breadcrumb-item:last-child {
    color: var(--foreground);
    font-weight: 500;
}

[b-r6jcfq5f3a] .rz-breadcrumb-item:last-child .rz-link {
    color: var(--foreground);
    font-weight: 500;
    cursor: default;
    pointer-events: none;
}

/* Focus states for accessibility */
[b-r6jcfq5f3a] .rz-breadcrumb-item .rz-link:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Home icon enhancement (if we want to add one) */
.drp-breadcrumb-home[b-r6jcfq5f3a] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

.drp-breadcrumb-home[b-r6jcfq5f3a]::before {
    content: "🏠";
    font-size: 0.875rem;
    opacity: 0.7;
}

/* Responsive design for mobile */
@media (max-width: 640px) {
    [b-r6jcfq5f3a] .rz-breadcrumb {
        font-size: 0.8rem;
        gap: var(--space-0-5);
    }
    
    [b-r6jcfq5f3a] .rz-breadcrumb-item .rz-link {
        padding: var(--space-0-5) var(--space-1-5);
    }
    
    [b-r6jcfq5f3a] .rz-breadcrumb-item + .rz-breadcrumb-item::before {
        padding: 0 var(--space-1-5);
        font-size: 0.8rem;
    }
    
    /* Hide middle breadcrumbs on very small screens, keep first and last */
    [b-r6jcfq5f3a] .rz-breadcrumb-item:not(:first-child):not(:last-child):not(:nth-last-child(2)) {
        display: none;
    }
    
    /* Add ellipsis indicator when items are hidden */
    [b-r6jcfq5f3a] .rz-breadcrumb-item:first-child:not(:nth-last-child(2))::after {
        content: "...";
        padding: 0 var(--space-1-5);
        color: var(--muted-foreground);
        font-weight: 400;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    [b-r6jcfq5f3a] .rz-breadcrumb-item .rz-link:hover {
        background-color: var(--primary);
        color: var(--primary-foreground);
    }
    
    [b-r6jcfq5f3a] .rz-breadcrumb-item + .rz-breadcrumb-item::before {
        color: var(--foreground);
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    [b-r6jcfq5f3a] .rz-breadcrumb-item,
    [b-r6jcfq5f3a] .rz-breadcrumb-item .rz-link,
    [b-r6jcfq5f3a] .rz-breadcrumb-item + .rz-breadcrumb-item::before {
        transition: none;
    }
}
/* /Shared/MainLayout.razor.rz.scp.css */
/* ============================================
   DRP Header Component (MainLayout CSS Isolation)
   ============================================ */
.drp-header[b-6n49lk6uca] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    padding: 0 var(--space-4);
    gap: var(--space-4);
}

.drp-header__start[b-6n49lk6uca] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex: 0 0 auto;
}

.drp-header__center[b-6n49lk6uca] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    max-width: 600px;
}

.drp-header__end[b-6n49lk6uca] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 0 0 auto;
}

.drp-header__sidebar-toggle[b-6n49lk6uca] {
    border-radius: var(--radius-md);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.drp-header__sidebar-toggle:hover[b-6n49lk6uca] {
    background-color: var(--muted);
}

.drp-header__profile .rz-gravatar[b-6n49lk6uca] {
    border: 2px solid var(--border);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.drp-header__profile .rz-gravatar:hover[b-6n49lk6uca] {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 10%, transparent);
}

/* ============================================
   Global Search Button Component
   ============================================ */
.drp-global-search-button[b-6n49lk6uca] {
    display: flex;
    align-items: center;
    gap: var(--space-2-5);
    padding: var(--space-2-5) var(--space-4);
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    font-family: var(--font-family-sans);
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--muted-foreground);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 280px;
    height: 40px;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.drp-global-search-button:hover[b-6n49lk6uca] {
    background: var(--muted);
    border-color: var(--primary);
    color: var(--foreground);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
}

.drp-global-search-button:hover .drp-global-search-button__icon[b-6n49lk6uca] {
    color: var(--primary);
}

.drp-global-search-button:hover .drp-global-search-button__shortcut[b-6n49lk6uca] {
    background: var(--primary);
    color: var(--primary-foreground);
    border-color: var(--primary);
}

.drp-global-search-button:focus-visible[b-6n49lk6uca] {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
    border-color: var(--primary);
}

.drp-global-search-button__icon[b-6n49lk6uca] {
    font-size: 1rem;
    color: var(--muted-foreground);
    transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.drp-global-search-button__text[b-6n49lk6uca] {
    flex: 1;
    text-align: left;
}

.drp-global-search-button__shortcut[b-6n49lk6uca] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 20px;
    padding: 0 var(--space-1-5);
    background: var(--muted);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: var(--font-family-sans);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--muted-foreground);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Responsive design for smaller screens */
@media (max-width: 768px) {
    .drp-header[b-6n49lk6uca] {
        padding: 0 var(--space-3);
        gap: var(--space-2);
    }

    .drp-header__center[b-6n49lk6uca] {
        max-width: 200px;
    }

    .drp-global-search-button[b-6n49lk6uca] {
        min-width: 180px;
        padding: var(--space-2) var(--space-3);
    }

    .drp-global-search-button__text[b-6n49lk6uca] {
        display: none;
    }

    .drp-global-search-button__shortcut[b-6n49lk6uca] {
        display: none;
    }
}
/* /Shared/NavMenu.razor.rz.scp.css */
/* ============================================================================
   NavMenu Component - Main Navigation Layout and Containers
   ============================================================================ */

/* Main navigation container */
.drp-nav-container[b-nfxuusd5x1] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Top navigation area (Home & Tasks) */
.drp-nav-top[b-nfxuusd5x1] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-2);
    flex-shrink: 0; /* Don't shrink the top section */
    border-bottom: 1px solid var(--border);
}


/* Two-panel layout container */
.drp-nav-layout[b-nfxuusd5x1] {
    display: flex;
    flex: 1;
    height: 100%; /* Ensure this container takes full height */
    overflow: hidden; /* Prevent scrollbars at this level */

    @media (max-width: 768px) {
        flex-direction: column;[b-nfxuusd5x1]
    }
}

/* Left sidebar with section icons */
.drp-nav-sidebar[b-nfxuusd5x1] {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-2);
    border-right: 1px solid var(--border);
    flex-shrink: 0;
    align-self: stretch;

    @media (max-width: 768px) {
        width: 100%;
        flex-direction: row;
        height: auto;
        justify-content: center;[b-nfxuusd5x1]
    }
}

/* Section icons container (top) */
.drp-nav-sidebar__sections[b-nfxuusd5x1] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);

    @media (max-width: 768px) {

        flex-direction: row;
        justify-content: center;[b-nfxuusd5x1]
    }
}

.drp-nav-sidebar-section[b-nfxuusd5x1] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-md);
    background-color: transparent;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    position: relative;

    &.drp-nav-sidebar-section--active {
        background-color: var(--primary-light);
        box-shadow: var(--shadow-sm);
    }

    &:hover[b-nfxuusd5x1] {
        background-color: var(--accent);
        transform: scale(1.05);
        color: var(--accent-foreground);
    }
}

/* Bottom icons container (for settings/tools) */
.drp-nav-sidebar__bottom[b-nfxuusd5x1] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: auto; /* Push to bottom */
    align-items: center; /* Center the icons */
    justify-self: flex-end; /* Ensure it sticks to bottom */
    flex-shrink: 0; /* Don't allow bottom section to shrink */
}


/* Right content panel */
.drp-nav-content[b-nfxuusd5x1] {
    flex: 1;
    min-width: 0; /* Allow flex child to shrink properly */
    width: calc(280px - 3.5rem); /* Fixed width minus sidebar width */
    padding: var(--space-2);
    overflow-y: auto;
    background-color: var(--background);
}


.drp-nav-content-section[b-nfxuusd5x1] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

/* Section items container */
.drp-nav-content-list[b-nfxuusd5x1] {
    display: flex;
    flex-direction: column;
    gap: var(--space-0-5);
    list-style: none; /* Remove default list bullets */
    padding: 0;
    margin: 0;
}
/* /Shared/NavMenuItem.razor.rz.scp.css */
/* ============================================================================
   NavMenuItem Component - Individual Navigation Item Styles
   ============================================================================ */

/* Navigation item base styles */
.drp-nav-item[b-uhc3b3vtyx] {
    position: relative;
    transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1);
    color: var(--foreground);

    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-1) var(--space-3);
    min-height: 2.5rem;
    overflow-y: auto;
    overscroll-behavior: contain;

    &:hover {
        background-color: #f2f2f3;
        color: var(--accent-foreground);

        .drp-nav-item__action {
            opacity: 1;
            visibility: visible;
        }
    }

    &.drp-nav-item--active[b-uhc3b3vtyx] {
        background-color: var(--primary-lighter);
    }
}

.drp-nav-item__link[b-uhc3b3vtyx] {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex: 1;
    text-decoration: none;
    color: inherit;
    position: static;

    i {
        flex-shrink: 0;
        width: 1rem;
        height: 1rem;
        transition: color 0.2s ease;
    }

    span[b-uhc3b3vtyx] {
        flex: 1;
        font-size: 0.875rem;
        font-weight: 500;
        color: inherit;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    &[b-uhc3b3vtyx]::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1; /* Place this clickable overlay on a higher layer */
        cursor: pointer;
    }
}


/* Action button container */
.drp-nav-item__action[b-uhc3b3vtyx] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: var(--radius-sm);
    background-color: transparent;
    border: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    visibility: hidden;
    transform: scale(0.8);
    margin-left: auto;
    cursor: pointer;
    position: relative;
    z-index: 2;

    &:hover {
        background-color: white;
        transform: scale(1.1);
    }

    &.drp-nav-item__action--visible[b-uhc3b3vtyx] {
        opacity: 1;
        visibility: visible;
        transform: scale(1);
    }
}



/* /Shared/UpdateDetector.razor.rz.scp.css */
.update-detector[b-0gmmboeyk2] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: var(--rz-warning);
    color: var(--rz-text-contrast-color);
    z-index: 9999;
    width: 97%;
    animation: slideDown-b-0gmmboeyk2 0.3s ease-out;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 10px 30px;
}

.update-detector__content[b-0gmmboeyk2] {
    padding: 0.5rem 1rem;
    max-width: 1200px;
    margin: 0 auto;
}

@keyframes slideDown-b-0gmmboeyk2 {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0);
    }
}