/* ================================================
   ZENITH: THE HIGH-FIDELITY DESIGN SYSTEM
   ================================================

   A premium dark-mode design system featuring glassmorphism,
   subtle animations, and a cohesive visual language for the
   Forgetless task management application.

   Design Philosophy:
   - Glass-like transparency with backdrop blur effects
   - Subtle glow effects for priority and focus states
   - Smooth cubic-bezier transitions for premium feel
   - Consistent spacing and border-radius throughout

   ================================================ */

/* =================================
   1. HEADER & DESIGN TOKENS
   =================================

   CSS Custom Properties (variables) that define the core
   visual characteristics of the Zenith design system.
   These tokens ensure consistency across all components.
*/

:root {
    /* Semantic color tokens for status and priority indicators.
       Using Apple HIG-inspired colors for familiarity. */
    --zenith-success: #30d158;
    --zenith-danger: #ff453a;
    --zenith-warning: #ff9f0a;
    --zenith-info: #64d2ff;
    --zenith-muted: rgba(255, 255, 255, 0.3);
    --zenith-text: rgba(255, 255, 255, 0.9);

    /* Semi-transparent white background for glass panels.
       Uses 3% opacity to create subtle frosted glass effect
       while maintaining readability on dark backgrounds. */
    --zenith-glass: rgba(255, 255, 255, 0.03);

    /* Border color for glass panels.
       Slightly more visible than the background (8% opacity)
       to create subtle edge definition without harsh lines. */
    --zenith-glass-border: rgba(255, 255, 255, 0.08);

    /* Backdrop blur amount for glass effect.
       20px provides enough blur to create depth
       while keeping underlying content partially visible. */
    --zenith-blur: blur(20px);

    /* Standard shadow for elevated components.
       Large spread (32px) with moderate opacity creates
       floating effect without being too dramatic. */
    --zenith-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);

    /* Red glow for urgent priority items.
       Uses Apple's system red (#ff453a) with 40% opacity
       to create attention-grabbing but not harsh glow. */
    --zenith-urgent-glow: 0 0 15px rgba(255, 69, 58, 0.4);

    /* Orange glow for high priority items.
       Uses Apple's system orange (#ff9f0a) with 40% opacity
       to indicate importance without the urgency of red. */
    --zenith-high-glow: 0 0 15px rgba(255, 159, 10, 0.4);
}

/* =================================
   2. RADZEN COMPONENT RESETS
   =================================

   Aggressive style overrides for Radzen Blazor components.
   These resets remove default Radzen styling so our custom
   Zenith styles can be applied without conflicts.

   !important is necessary here because Radzen components
   have high-specificity inline styles that need overriding.
*/

/* Reset DataList components - used for task lists.
   Removes all default backgrounds, borders, and spacing
   so tasks appear seamlessly within glass containers. */
.rz-datalist,
.rz-datalist-content,
.rz-datalist-data,
.rz-datalist-item,
/* Only reset cards that don't explicitly use zenith-glass,
   allowing zenith-glass cards to keep their custom styling. */
.rz-card:not(.zenith-glass) {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* =================================
   3. CORE GLASS & CARD COMPONENTS
   =================================

   The foundational visual components of the Zenith system.
   Glass panels create the layered, depth-rich interface
   that defines the premium aesthetic.
*/

/* Primary glass panel style.
   Applied to major containers like calendar grid and detail pane.
   Creates the signature frosted glass appearance with:
   - Semi-transparent background
   - Backdrop blur for depth
   - Subtle border for edge definition
   - Large border-radius for soft, modern look */
.zenith-glass {
    background: var(--zenith-glass) !important;
    /* Standard backdrop-filter for most browsers */
    backdrop-filter: var(--zenith-blur) !important;
    /* Safari/WebKit prefix for iOS compatibility */
    -webkit-backdrop-filter: var(--zenith-blur) !important;
    border: 1px solid var(--zenith-glass-border) !important;
    box-shadow: var(--zenith-shadow) !important;
    /* 24px radius creates soft, rounded corners
       consistent with modern UI design trends */
    border-radius: 24px !important;
    /* Prevents content from bleeding outside rounded corners */
    overflow: hidden;
    /* Required for pseudo-elements (like priority indicators) */
    position: relative;
    /* Smooth transition for hover states.
       Cubic-bezier timing creates natural, organic motion */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Text glow effect for emphasis.
   Applied to headings or important text to make them
   pop against the dark background. */
.zenith-text-glow {
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

/* Hover state for interactive cards (like todo items).
   Provides visual feedback with:
   - Upward lift animation
   - Brighter border
   - Lighter background
   - Enhanced shadow */
.zenith-card:hover {
    /* Lift effect draws attention to hovered item */
    transform: translateY(-5px);
    /* More visible border indicates interactivity */
    border-color: rgba(255, 255, 255, 0.2) !important;
    /* Slightly lighter background on hover */
    background: rgba(255, 255, 255, 0.06) !important;
    /* Deeper shadow enhances floating effect */
    box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.4) !important;
}

/* Gradient background for full-page containers.
   Uses the app's primary and secondary colors at very low
   opacity to create subtle color variation without being
   distracting. Applied to page-level containers. */
.zenith-gradient-bg {
    /* Diagonal gradient using Radzen's color variables */
    background: linear-gradient(135deg, rgba(var(--rz-primary-rgb), 0.05) 0%, rgba(var(--rz-secondary-rgb), 0.05) 100%);
    /* Extra-large radius for page-level softness */
    border-radius: 40px;
    overflow: hidden;
}

/* =================================
   4. PRIORITY SYSTEM
   =================================

   Visual indicators for task priority levels.
   Uses color-coded pills and glow effects to communicate
   urgency at a glance. Colors follow Apple's HIG for
   semantic meaning (red=danger, orange=warning, green=success).
*/

/* Urgent priority indicator - red glowing pill.
   Creates a pseudo-element positioned at the left edge
   of the card as a visual priority marker.
   Used on full-card urgent styling. */
.zenith-urgent::before {
    content: "";
    position: absolute;
    left: 8px;
    /* Inset from top and bottom for balanced appearance */
    top: 12px;
    bottom: 12px;
    /* Pill width - thick enough to be visible */
    width: 6px;
    /* Apple system red for danger/urgency */
    background: #ff453a;
    /* Fully rounded ends for pill shape */
    border-radius: 10px;
    /* Glowing effect draws attention */
    box-shadow: var(--zenith-urgent-glow);
    /* Above card content */
    z-index: 10;
}

/* Container adjustments for urgent items.
   Adds padding to make room for the priority pill
   and applies pulsing animation for attention. */
.zenith-urgent {
    /* Space for the priority indicator pill */
    padding-left: 24px !important;
    /* Subtle pulsing shadow draws eye to urgent items */
    animation: urgent-pulse 3s infinite ease-in-out;
}

/* Shared base styles for priority pill indicators.
   These are thinner pills used in compact task cards
   rather than full urgent-mode cards. */
.zenith-priority-urgent::before,
.zenith-priority-high::before,
.zenith-priority-normal::before {
    content: "";
    position: absolute;
    left: 8px;
    /* Positioned to span 60% of card height (20% from each edge) */
    top: 20%;
    bottom: 20%;
    /* Thinner than the urgent pill for subtle indication */
    width: 4px;
    border-radius: 10px;
    z-index: 10;
}

/* Urgent priority pill - Apple system red.
   Highest priority, reserved for time-sensitive tasks. */
.zenith-priority-urgent::before {
    background: #ff453a;
    box-shadow: 0 0 10px rgba(255, 69, 58, 0.4);
}

/* High priority pill - Apple system orange.
   Important but not time-critical tasks. */
.zenith-priority-high::before {
    background: #ff9f0a;
    box-shadow: 0 0 10px rgba(255, 159, 10, 0.4);
}

/* Normal priority pill - Apple system green.
   Standard tasks, completed on schedule. */
.zenith-priority-normal::before {
    background: #30d158;
    box-shadow: 0 0 10px rgba(48, 209, 88, 0.4);
}

/* =================================
   5. TASK ITEM COMPONENTS
   =================================

   Styles for individual task items including checkboxes,
   completion states, and inline date pickers.
*/

/* Container for checkbox alignment.
   Creates a fixed-size box that centers the checkbox
   both horizontally and vertically within task cards. */
.zenith-checkbox-container {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Fixed dimensions for consistent layout */
    width: 24px;
    height: 24px;
}

/* Completed task text styling.
   Visual indication that a task is done with
   strikethrough and reduced opacity. */
.zenith-todo-done {
    text-decoration: line-through;
    /* Faded appearance for completed items */
    opacity: 0.4;
}

/* Compact date picker - used in task card inline editing.
   Strips Radzen's default styling for minimal appearance
   that fits within the task card layout. */
.zenith-datepicker-compact {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    /* Fixed width prevents layout shifts */
    width: 100px !important;
    font-size: 0.8rem !important;
}

/* Hide the calendar icon button on compact picker.
   Date is edited by clicking the text directly. */
.zenith-datepicker-compact .rz-helper-button {
    display: none !important;
}

/* Minimal date picker variant - even smaller footprint.
   Used in very tight spaces like card meta rows. */
.zenith-datepicker-minimal {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    /* Slightly narrower than compact version */
    width: 90px !important;
    font-size: 0.85rem !important;
}

/* Hide helper button on minimal picker as well */
.zenith-datepicker-minimal .rz-helper-button {
    display: none !important;
}

/* =================================
   6. CALENDAR - MONTH VIEW
   =================================

   Styles for the monthly calendar grid displaying days
   in a 7-column layout with task indicators.
*/

/* Main calendar grid layout.
   7 columns for days of the week, 6 rows for weeks.
   Uses CSS Grid for precise cell alignment. */
.zenith-calendar-grid {
    display: grid;
    /* Equal-width columns for each day of week */
    grid-template-columns: repeat(7, 1fr);
    /* 6 rows to accommodate all possible month layouts */
    grid-template-rows: auto auto auto auto auto auto;
    /* Spacing between day cells */
    gap: 8px;
    /* Fills available vertical space */
    flex: 1;
}

/* Day-of-week header labels (SUN, MON, etc).
   Muted appearance to not compete with day numbers. */
.zenith-calendar-header {
    text-align: center;
    /* Heavy weight for readability at small size */
    font-weight: 800;
    font-size: 0.75rem;
    /* Subdued so days are more prominent */
    opacity: 0.4;
    padding-bottom: 0.5rem;
    /* Wide letter-spacing for all-caps labels */
    letter-spacing: 2px;
}

/* Individual day cell in the calendar grid.
   Interactive container showing day number and task dots. */
.zenith-calendar-cell {
    /* Very subtle background for grid visibility */
    background: rgba(255, 255, 255, 0.02);
    /* Subtle border defines cell boundaries */
    border: 1px solid rgba(255, 255, 255, 0.05);
    /* Rounded corners match system aesthetic */
    border-radius: 12px;
    /* Fixed height creates uniform grid */
    height: 90px;
    /* Center day number and dots vertically */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* Indicates clickability */
    cursor: pointer;
    /* Smooth hover transition */
    transition: all 0.2s ease;
    /* For future absolute-positioned elements */
    position: relative;
}

/* Hover state for calendar day cells.
   Provides interactive feedback when mousing over days. */
.zenith-calendar-cell:hover {
    /* Brighter background on hover */
    background: rgba(255, 255, 255, 0.06);
    /* Subtle lift effect */
    transform: translateY(-2px);
    /* More visible border */
    border-color: rgba(255, 255, 255, 0.2);
}

/* Selected day cell styling.
   Indicates the currently selected/focused day
   with primary color accent. */
.zenith-calendar-cell.selected {
    /* Primary color tint for selection */
    background: rgba(var(--rz-primary-rgb), 0.15) !important;
    /* Prominent border in primary color */
    border: 2px solid var(--rz-primary) !important;
    /* Glow effect emphasizes selection */
    box-shadow: 0 0 20px rgba(var(--rz-primary-rgb), 0.25);
}

/* Days from adjacent months (previous/next month).
   Displayed in calendar but visually de-emphasized. */
.zenith-calendar-cell.other-month {
    /* Very faded to indicate not current month */
    opacity: 0.2;
}

/* Today's date indicator.
   Subtle highlight to help users locate current day. */
.zenith-calendar-cell.today {
    /* Slightly brighter background than normal cells */
    background: rgba(255, 255, 255, 0.08);
}

/* Day number display within calendar cells.
   The primary content showing which day of month. */
.zenith-calendar-number {
    /* Bold for prominence */
    font-weight: 800;
    font-size: 1.25rem;
    /* Space between number and task dots below */
    margin-bottom: 4px;
}

/* =================================
   7. CALENDAR - YEAR VIEW
   =================================

   Styles for the yearly overview showing all 12 months
   as clickable cards with task counts.
*/

/* Year view grid layout.
   4 columns x 3 rows to display all 12 months. */
.zenith-year-grid {
    display: grid;
    /* 4 months per row */
    grid-template-columns: repeat(4, 1fr);
    /* 3 rows for 12 months total */
    grid-template-rows: repeat(3, 1fr);
    /* Generous spacing between month cards */
    gap: 1.5rem;
    flex: 1;
}

/* Individual month card in year view.
   Clickable card showing month name and task count. */
.zenith-month-card {
    /* Same subtle background as calendar cells */
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    /* Slightly larger radius than day cells */
    border-radius: 16px;
    padding: 1.5rem;
    /* Center content vertically and horizontally */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    /* Premium easing for hover animation */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover state for month cards.
   More dramatic than day cells since cards are larger. */
.zenith-month-card:hover {
    background: rgba(255, 255, 255, 0.08);
    /* Primary color border on hover */
    border-color: var(--rz-primary);
    /* Pronounced lift effect */
    transform: translateY(-4px);
    /* Deep shadow for floating appearance */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* Current month indicator in year view.
   Helps users quickly identify the present month. */
.zenith-month-card.current-month {
    /* Primary color accent border */
    border: 1px solid rgba(var(--rz-primary-rgb), 0.3);
    /* Tinted background matching selection style */
    background: rgba(var(--rz-primary-rgb), 0.05);
}

/* Month name label in year view cards.
   Primary text showing which month (January, February, etc). */
.zenith-month-name {
    /* Extra bold for prominence */
    font-weight: 900;
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    color: #fff;
    /* Slight letter-spacing for elegance */
    letter-spacing: 1px;
}

/* Container for month statistics (task count).
   Vertically stacks the count number and label. */
.zenith-month-stats {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

/* Task count number in month cards.
   Large, prominent display of tasks due that month. */
.zenith-month-count {
    /* Large size for at-a-glance reading */
    font-size: 2rem;
    font-weight: 800;
    /* Primary color for visual interest */
    color: var(--rz-primary);
}

/* "TASKS" label under the count number.
   Provides context for what the number represents. */
.zenith-month-label {
    font-size: 0.65rem;
    font-weight: 700;
    /* Subdued to not compete with count */
    opacity: 0.4;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* =================================
   8. CALENDAR - TASK INDICATORS
   =================================

   Small colored dots in calendar day cells that indicate
   tasks are scheduled for that day. Color corresponds
   to the highest priority task.
*/

/* Container for task indicator dots.
   Horizontal row of dots below the day number. */
.zenith-dots-container {
    display: flex;
    /* Small gap between dots */
    gap: 3px;
    justify-content: center;
    /* Fixed height prevents layout shift */
    height: 6px;
}

/* Base style for individual task dots.
   Small circular indicators for tasks. */
.zenith-dot {
    width: 6px;
    height: 6px;
    /* Perfect circle */
    border-radius: 50%;
}

/* Urgent priority dot - red with glow.
   Indicates at least one urgent task on this day. */
.zenith-dot.urgent {
    background: #ff453a;
    /* Subtle glow for attention */
    box-shadow: 0 0 5px #ff453a;
}

/* High priority dot - orange with glow.
   Indicates important tasks scheduled. */
.zenith-dot.high {
    background: #ff9f0a;
    box-shadow: 0 0 5px #ff9f0a;
}

/* Normal priority dot - green with glow.
   Standard tasks on schedule. */
.zenith-dot.normal {
    background: #30d158;
    box-shadow: 0 0 5px #30d158;
}

/* Low priority dot - subtle white.
   Lowest priority tasks, no glow effect. */
.zenith-dot.low {
    background: rgba(255, 255, 255, 0.3);
}

/* =================================
   9. FORM & INPUT STYLING
   =================================

   Styles for form elements used in dialogs and edit views.
   Provides consistent input appearance across the app.
*/

/* Form field labels.
   Small, uppercase-style labels above input fields. */
.zenith-form-label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.2px;
    /* Subdued color to not compete with input content */
    opacity: 0.5;
    margin-bottom: 0.4rem;
    display: block;
}

/* Text inputs, textareas, and dropdowns.
   Consistent styling for all form input elements. */
.zenith-input {
    /* Subtle background matching glass panels */
    background: rgba(0, 0, 0, 0.25) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    /* Consistent rounded corners */
    border-radius: 8px !important;
    /* White text for dark theme */
    color: #fff !important;
    transition: all 0.2s ease !important;
}

/* Focus state for inputs.
   Highlights the currently active input field
   with primary color accent. */
.zenith-input:focus-within,
.zenith-input:focus {
    /* Slightly brighter background when focused */
    background: rgba(255, 255, 255, 0.05) !important;
    /* Primary color border indicates focus */
    border-color: var(--rz-primary) !important;
    /* Glow effect draws attention to active field */
    box-shadow: 0 0 15px rgba(var(--rz-primary-rgb), 0.2) !important;
}

/* Breadcrumb text in dropdown items (Folder > List).
   Shows the folder path before the list name. */
.zenith-breadcrumb {
    font-size: 0.7rem;
    font-weight: 700;
    /* Subdued to not compete with list name */
    opacity: 0.4;
    letter-spacing: 0.2px;
    /* Small gap before separator */
    margin-right: 2px;
}

/* List name in dropdown items.
   The primary selectable item name. */
.zenith-list-name {
    font-weight: 600;
}

/* =================================
   10. DROPDOWN & SELECT COMPONENTS
   =================================

   Styles for Radzen dropdown menus and select bars.
   Creates consistent, premium-looking selection UI.
*/

/* Dropdown menu panel (the floating list of options).
   Appears when clicking a dropdown trigger. */
.rz-dropdown-panel {
    /* Consistent radius */
    border-radius: 8px !important;
    /* Dark, semi-transparent background */
    background: rgba(15, 15, 15, 0.92) !important;
    /* Heavy blur for depth effect */
    backdrop-filter: blur(30px) !important;
    -webkit-backdrop-filter: blur(30px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    /* Deep shadow for floating appearance */
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7) !important;
    overflow: hidden !important;
    /* Space between trigger and panel */
    margin-top: 8px !important;
    /* Inner padding around items */
    padding: 8px !important;
}

/* Scrollable container for dropdown items.
   Limits height and enables scrolling for long lists. */
.rz-dropdown-items-wrapper {
    max-height: 300px !important;
}

/* Individual dropdown option items.
   Each selectable option in the dropdown list. */
.rz-dropdown-item {
    /* Comfortable touch targets */
    padding: 10px 14px !important;
    border-radius: 6px !important;
    /* Small gap between items */
    margin-bottom: 2px !important;
    transition: all 0.2s ease !important;
}

/* Hover state for dropdown items.
   Subtle highlight when mousing over options. */
.rz-dropdown-item:hover {
    background: rgba(255, 255, 255, 0.05) !important;
}

/* Selected/highlighted dropdown item.
   Currently selected option in the dropdown. */
.rz-dropdown-item.rz-state-highlight {
    /* Primary color tint for selection */
    background: rgba(var(--rz-primary-rgb), 0.2) !important;
    color: #fff !important;
}

/* Segmented select bar container (MONTH/YEAR toggle).
   Horizontal group of mutually exclusive options. */
.zenith-selectbar {
    /* Subtle background to define boundaries */
    background: rgba(255, 255, 255, 0.05) !important;
    border-radius: 12px !important;
    /* Minimal padding around items */
    padding: 2px !important;
}

/* Individual segments in select bar.
   Each option button within the bar. */
.zenith-selectbar .rz-selectbar-item {
    border: none !important;
    /* Slightly smaller radius than container */
    border-radius: 10px !important;
    background: transparent !important;
    /* Bold text for readability */
    font-weight: 800 !important;
    font-size: 0.7rem !important;
    /* Wide spacing for all-caps style */
    letter-spacing: 1px !important;
}

/* Active/selected segment in select bar.
   The currently selected option. */
.zenith-selectbar .rz-selectbar-item.rz-state-active {
    /* Solid primary color background */
    background: var(--rz-primary) !important;
    color: #fff !important;
    /* Subtle glow effect */
    box-shadow: 0 4px 15px rgba(var(--rz-primary-rgb), 0.3) !important;
}

/* Priority SelectBar - vibrant text colors (scoped to priority selectbar only) */
.zenith-priority-selectbar .rz-button:nth-child(1) {
    color: rgba(255, 255, 255, 0.7) !important;
}

.zenith-priority-selectbar .rz-button:nth-child(2) {
    color: #64d2ff !important;
}

.zenith-priority-selectbar .rz-button:nth-child(3) {
    color: #ff9f0a !important;
}

.zenith-priority-selectbar .rz-button:nth-child(4) {
    color: #ff453a !important;
}

/* Priority SelectBar - active states with colored border */
.zenith-priority-selectbar .rz-button:nth-child(1).rz-state-active {
    background: transparent !important;
    border: 2px solid rgba(255, 255, 255, 0.4) !important;
    color: #fff !important;
    box-shadow: none !important;
}

.zenith-priority-selectbar .rz-button:nth-child(2).rz-state-active {
    background: transparent !important;
    border: 2px solid #64d2ff !important;
    color: #64d2ff !important;
    box-shadow: none !important;
}

.zenith-priority-selectbar .rz-button:nth-child(3).rz-state-active {
    background: transparent !important;
    border: 2px solid #ff9f0a !important;
    color: #ff9f0a !important;
    box-shadow: none !important;
}

.zenith-priority-selectbar .rz-button:nth-child(4).rz-state-active {
    background: transparent !important;
    border: 2px solid #ff453a !important;
    color: #ff453a !important;
    box-shadow: none !important;
}

/* =================================
   11. PAGE LAYOUT
   =================================

   Styles for page-level containers and layout helpers.
   Controls overall page structure and spacing.
*/

/* Main page container.
   Wraps entire page content with consistent padding. */
.zenith-page-container {
    /* Horizontal padding with no bottom (for scrolling content) */
    padding: 1rem 2rem 0 2rem !important;
    /* Full viewport height */
    min-height: 100vh;
}

/* Medium breakpoint padding adjustment.
   More horizontal padding on larger screens. */
.zenith-page-container.rz-p-md-8 {
    padding: 1rem 4rem 0 4rem !important;
}

/* Page subtitle alignment helper.
   Ensures subtitle text aligns properly with title. */
.zenith-header-subtitle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Content card spacing adjustment.
   Reduces gap between header and content. */
.zenith-content-card {
    margin-top: 0.5rem !important;
}

/* Remove top margin from first items in today/inbox lists.
   Prevents double-spacing at top of task lists. */
.zenith-today-list>div:first-child,
.zenith-inbox-list>div:first-child {
    margin-top: 0 !important;
}

/* =================================
   12. ANALYTICS & CHARTS
   =================================

   Styles for data visualization components including
   charts, KPI cards, and analytics dashboards.
*/

/* Chart card container.
   Premium glass-style card for housing charts. */
.zenith-chart-card {
    /* Gradient background for subtle depth */
    background: linear-gradient(145deg,
            rgba(255, 255, 255, 0.04) 0%,
            rgba(255, 255, 255, 0.01) 100%) !important;
    /* Enhanced blur with saturation boost */
    backdrop-filter: blur(24px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    /* Multi-layer shadow with inset highlight */
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    /* Extra-large radius for premium feel */
    border-radius: 28px !important;
    position: relative;
    overflow: hidden;
    /* Smooth, bouncy transition */
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Top edge highlight line on chart cards.
   Creates subtle glass-like reflection effect. */
.zenith-chart-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    /* Gradient line fading at edges */
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(255, 255, 255, 0.15) 50%,
            transparent 100%);
    z-index: 1;
}

/* Hover state for chart cards.
   Subtle enhancement on interaction. */
.zenith-chart-card:hover {
    border-color: rgba(255, 255, 255, 0.12) !important;
    /* Enhanced shadow on hover */
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

/* Chart section title styling.
   Headers within chart cards. */
.zenith-chart-title {
    font-weight: 700 !important;
    font-size: 0.85rem !important;
    letter-spacing: 0.5px !important;
    /* Slightly dimmed white */
    color: rgba(255, 255, 255, 0.85) !important;
    /* Override any uppercase transforms */
    text-transform: none !important;
    position: relative;
    display: inline-block;
}

/* Inner container for chart elements.
   Provides background contrast for chart visibility. */
.zenith-chart-container {
    padding: 0.5rem;
    border-radius: 16px;
    /* Darker area behind chart */
    background: rgba(0, 0, 0, 0.15);
    margin-top: 0.5rem;
}

/* Chart series enhancements for vibrancy and depth */
.zenith-chart-card .rz-chart svg {
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
}

/* Donut specific polish */
.zenith-chart-card .rz-donut-content {
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.1));
}

/* Chart axis labels and titles.
   Styles Radzen chart text elements for dark theme. */
.zenith-chart-card .rz-chart .rz-tick text,
.zenith-chart-card .rz-chart .rz-axis-title {
    /* SVG fill for text color */
    fill: rgba(255, 255, 255, 0.45) !important;
    font-size: 0.65rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.05rem !important;
    text-transform: uppercase !important;
}

/* Remove default Radzen axis lines for a cleaner floating look */
.zenith-chart-card .rz-chart .rz-axis-line {
    stroke: rgba(255, 255, 255, 0.05) !important;
    stroke-width: 1px !important;
}

/* Chart legend text styling.
   Labels identifying chart data series. */
.zenith-chart-card .rz-legend-item-text {
    font-size: 0.75rem !important;
    opacity: 0.8;
}

/* KPI statistic card.
   Single metric display with large number and label. */
.zenith-kpi-stat {
    text-align: center;
    padding: 1.5rem;
    /* Subtle background for card definition */
    background: rgba(255, 255, 255, 0.02);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
}

/* Hover state for KPI cards.
   Subtle lift effect on interaction. */
.zenith-kpi-stat:hover {
    background: rgba(255, 255, 255, 0.04);
    transform: translateY(-2px);
}

/* Large KPI number display.
   The primary metric value (e.g., "42" tasks). */
.zenith-kpi-value {
    font-size: 2.5rem;
    font-weight: 800;
    /* Gradient text effect for premium look */
    background: linear-gradient(135deg, #fff 0%, rgba(255, 255, 255, 0.7) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    /* Tight line-height for large numbers */
    line-height: 1.1;
}

.premium-shimmer {
    background: linear-gradient(120deg,
            rgba(255, 255, 255, 1) 30%,
            rgba(100, 210, 255, 0.8) 50%,
            rgba(255, 255, 255, 1) 70%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: premium-shimmer 8s infinite linear;
    text-shadow: 0 0 30px rgba(100, 210, 255, 0.15);
}

#homeLogo {
    transition: filter 1.2s ease, opacity 1s ease;
    filter: drop-shadow(0 0 15px rgba(0, 212, 255, 0.25));
}

#homeLogo:hover {
    filter: drop-shadow(0 0 35px rgba(0, 212, 255, 0.4)) brightness(1.05) !important;
    animation: zenith-aura-pulse 4s infinite ease-in-out;
}

#home-animation-container {
    transition: all 0.5s ease;
}

#home-animation-container:hover {
    transform: scale(1.1);
    filter: drop-shadow(0 0 20px rgba(100, 210, 255, 0.4));
}

/* --- High-Fidelity Zenith Breathing & Aura --- */

.image-glow {
    animation: zenith-breathing 4s infinite ease-in-out;
}

@keyframes zenith-breathing {

    0%,
    100% {
        filter: drop-shadow(0 0 8px rgba(0, 212, 255, 0.3)) brightness(1);
        opacity: 0.92;
    }

    50% {
        filter: drop-shadow(0 0 20px rgba(0, 212, 255, 0.5)) brightness(1.05);
        opacity: 1;
    }
}

@keyframes zenith-aura-pulse {

    0%,
    100% {
        filter: drop-shadow(0 0 20px rgba(0, 212, 255, 0.4));
    }

    50% {
        filter: drop-shadow(0 0 40px rgba(0, 212, 255, 0.6)) brightness(1.05);
    }
}

/* KPI label text (e.g., "TASKS COMPLETED").
   Describes what the number represents. */
.zenith-kpi-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    /* Subdued to not compete with value */
    opacity: 0.5;
    margin-top: 0.5rem;
}

/* Analytics dashboard grid layout.
   Container for multiple chart cards. */
.zenith-analytics-grid {
    /* Generous spacing between cards */
    gap: 2rem !important;
}

/* Column height fix for analytics grid.
   Prevents unnecessary vertical stretching. */
.zenith-analytics-grid .rz-column {
    min-height: auto;
}

/* =================================
   13. ANIMATIONS
   =================================

   Keyframe animations for visual effects.
   Provides motion design for attention and feedback.
*/

/* Urgent item pulsing animation.
   Creates breathing glow effect on urgent tasks
   to draw attention without being annoying. */
@keyframes urgent-pulse {
    0% {
        /* Start with standard shadow */
        box-shadow: var(--zenith-shadow);
    }

    50% {
        /* Peak glow at midpoint */
        box-shadow: var(--zenith-urgent-glow);
    }

    100% {
        /* Return to standard shadow */
        box-shadow: var(--zenith-shadow);
    }
}

/* Shimmer loading animation.
   Horizontal gradient sweep for skeleton loading states. */
@keyframes zenith-shimmer {
    0% {
        /* Start off-screen left */
        background-position: -200% 0;
    }

    100% {
        /* End off-screen right */
        background-position: 200% 0;
    }
}

/* Shimmer loading state element.
   Applied to placeholder elements while content loads. */
.zenith-loading-shimmer {
    /* Moving gradient creates shimmer effect */
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0.03) 0%,
            rgba(255, 255, 255, 0.08) 50%,
            rgba(255, 255, 255, 0.03) 100%);
    /* Wide background allows smooth animation */
    background-size: 200% 100%;
    /* Continuous shimmer loop */
    animation: zenith-shimmer 2s ease-in-out infinite;
    border-radius: 12px;
}

/* =================================
   14. SCROLLBAR STYLING
   =================================

   Custom scrollbar appearance for webkit browsers.
   Creates minimal, unobtrusive scrollbars matching
   the dark theme aesthetic.
*/

/* Scrollbar dimensions.
   Thin scrollbars that don't take up much space. */
.zenith-scroll::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

/* Scrollbar track (background).
   Invisible track for cleaner appearance. */
.zenith-scroll::-webkit-scrollbar-track {
    background: transparent;
}

/* Scrollbar thumb (draggable part).
   Subtle indicator of scroll position. */
.zenith-scroll::-webkit-scrollbar-thumb {
    /* Semi-transparent for minimal visual weight */
    background: rgba(255, 255, 255, 0.08);
    /* Fully rounded for pill shape */
    border-radius: 10px;
}

/* Scrollbar thumb hover state.
   More visible when user is interacting. */
.zenith-scroll::-webkit-scrollbar-thumb:hover {
    /* Brighter on hover for feedback */
    background: rgba(255, 255, 255, 0.15);
}

/* =================================
   15. DIALOG STYLING
   =================================

   Styles for modal dialogs and popups.
   Ensures consistent typography in dialog headers.
*/

/* Dialog title text styling.
   Large, bold title for dialog headers. */
.zenith-dialog-title {
    /* Extra bold for prominence */
    font-weight: 900 !important;
    /* Tight letter-spacing for display type */
    letter-spacing: -0.5px !important;
    /* Large size for header hierarchy */
    font-size: 1.5rem !important;
}

/* Radzen Dialog overlay - simple dark scrim */
.rz-dialog-wrapper {
    background: rgba(0, 0, 0, 0.6) !important;
}

/* Radzen Dialog panel - glass styling with accent top */
.rz-dialog {
    background: rgba(28, 28, 32, 0.98) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-top: 4px solid var(--chat-accent, #00d4ff) !important;
    border-radius: 12px !important;
    box-shadow:
        0 16px 48px rgba(0, 0, 0, 0.5),
        0 0 20px rgba(0, 212, 255, 0.1) !important;
    overflow: hidden !important;
}

/* Dialog title bar styling */
.rz-dialog-titlebar {
    background: linear-gradient(180deg, rgba(0, 212, 255, 0.08) 0%, transparent 100%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    padding: 1rem 1.5rem !important;
}

/* Dialog title icon - default cyan */
.rz-dialog-title::before {
    color: var(--chat-accent, #00d4ff) !important;
    text-shadow: 0 0 10px rgba(0, 212, 255, 0.5) !important;
}


/* Cancel button in dialog - subtle outline */
.zenith-btn-cancel {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 8px !important;
    color: rgba(255, 255, 255, 0.6) !important;
    padding: 0 1.25rem !important;
    height: 36px !important;
    transition: all 0.2s ease !important;
}

.zenith-btn-cancel:hover {
    border-color: rgba(255, 255, 255, 0.4) !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Save button in dialog - green outline style */
.zenith-btn-save {
    background: transparent !important;
    border: 1px solid #30d158 !important;
    border-radius: 8px !important;
    color: #30d158 !important;
    padding: 0 1.25rem !important;
    height: 36px !important;
    transition: all 0.2s ease !important;
}

.zenith-btn-save:hover {
    background: rgba(48, 209, 88, 0.15) !important;
}

.rz-dialog-title {
    font-weight: 800 !important;
    font-size: 1.2rem !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.6rem !important;
}

/* Add edit icon before dialog title */
.rz-dialog-title::before {
    content: "edit_note";
    font-family: "Material Symbols Outlined", "Material Icons" !important;
    font-size: 1.4rem;
}

/* Dialog close button */
.rz-dialog-titlebar-close {
    color: rgba(255, 255, 255, 0.4) !important;
    transition: all 0.2s ease !important;
}

.rz-dialog-titlebar-close:hover {
    color: #fff !important;
}

/* Dialog content area */
.rz-dialog-content {
    background: transparent !important;
}


/* =================================
   16. CALENDAR PAGE LAYOUT
   =================================

   Layout classes specific to the calendar page structure.
   Controls the full-page calendar view arrangement.
*/

/* Full-height page wrapper for calendar.
   Creates the main flex container that fills viewport. */
.zenith-calendar-page {
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Main content area split layout.
   Horizontal flex container for calendar and detail pane. */
.zenith-calendar-main {
    flex: 1;
    display: flex;
    gap: 1rem;
    overflow: hidden;
    padding: 0.5rem;
}

/* Left panel containing the month grid.
   Takes 1.5x the space of other flex items. */
.zenith-calendar-panel {
    flex: 1.5;
    display: flex;
    flex-direction: column;
}

/* Right panel for day detail view.
   Fixed width sidebar showing selected day's tasks. */
.zenith-day-detail-panel {
    width: 450px;
    display: flex;
    flex-direction: column;
}

/* Year view container.
   Fills available space with scrollable content. */
.zenith-year-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

/* Scrollable task list within day detail panel.
   Fills remaining space with scroll capability. */
.zenith-task-list-scroll {
    flex: 1;
    overflow-y: auto;
    padding-right: 0.5rem;
}

/* Navigation title text (month/year display).
   Centered, bold text between nav arrows. */
.zenith-nav-title {
    margin: 0;
    font-weight: 800;
    min-width: 180px;
    text-align: center;
}

/* Vertical divider in header navigation.
   Subtle separator between nav groups. */
.zenith-nav-divider {
    height: 30px;
    margin: 0 1rem;
    opacity: 0.1;
}

/* Selected date heading in day detail panel.
   Large, bold display of selected date. */
.zenith-selected-date-title {
    font-weight: 800;
    margin: 0;
}

/* Subtitle text with muted appearance.
   Used for secondary information below headings. */
.zenith-subtitle-muted {
    opacity: 0.5;
}

/* Empty state container.
   Centered content with faded appearance. */
.zenith-empty-state {
    opacity: 0.3;
    height: 100%;
}

/* Large icon for empty states.
   Oversized icon for visual impact. */
.zenith-empty-icon {
    font-size: 64px;
}

/* Overflow indicator dot in calendar.
   Smaller dot indicating more tasks than shown. */
.zenith-dot-overflow {
    background: rgba(255, 255, 255, 0.2);
    width: 4px;
    height: 4px;
}

/* =================================
   17. TODO ITEM CARD COMPONENTS
   =================================

   Styles for the TodoItemCard component elements.
   Handles both compact (kanban) and wide (horizon) layouts.
*/

/* Card with dynamic priority border.
   Base card styling with left border accent.
   Note: border-left color is set dynamically via class. */
.zenith-todo-card {
    border-radius: 10px !important;
    margin-bottom: 0.35rem;
    cursor: pointer;
}

/* Priority border colors - applied dynamically */
.zenith-todo-card.priority-urgent {
    border-left: 4px solid var(--rz-danger) !important;
}

.zenith-todo-card.priority-high {
    border-left: 4px solid var(--rz-warning) !important;
}

.zenith-todo-card.priority-normal {
    border-left: 4px solid var(--rz-info) !important;
}

.zenith-todo-card.priority-low {
    border-left: 4px solid rgba(255, 255, 255, 0.1) !important;
}

/* Content container within todo card.
   Flexible container that fills available space. */
.zenith-todo-content {
    flex: 1;
    overflow: hidden;
}

/* Task description text - wide layout.
   Primary task text with word wrapping. */
.zenith-todo-description {
    font-weight: 700;
    line-height: 1.25;
    font-size: 1.15rem;
    margin: 0;
    color: #fff;
    white-space: normal;
    word-break: break-word;
}

/* Task description text - compact layout.
   Smaller text for kanban cards. */
.zenith-todo-description-compact {
    font-weight: 700;
    line-height: 1.25;
    font-size: 0.95rem;
    margin: 0;
    color: #fff;
    white-space: normal;
    word-break: break-word;
}

/* Breadcrumb row showing folder path.
   Muted row with folder icon and path text. */
.zenith-todo-breadcrumb-row {
    opacity: 0.7;
    color: var(--rz-primary-light);
}

/* Folder icon in breadcrumb.
   Small icon preceding folder name. */
.zenith-todo-folder-icon {
    font-size: 11px;
}

/* Breadcrumb text - wide layout.
   Uppercase folder/list path text. */
.zenith-todo-breadcrumb-text {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    color: inherit;
}

/* Breadcrumb text - compact layout.
   Smaller text for kanban cards. */
.zenith-todo-breadcrumb-text-compact {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    color: inherit;
}

/* Breadcrumb separator (> character).
   Faded separator between folder and list. */
.zenith-todo-breadcrumb-separator {
    margin: 0 4px;
    opacity: 0.5;
}

/* Calendar icon - wide layout.
   Icon next to date picker. */
.zenith-todo-calendar-icon {
    font-size: 18px;
    color: var(--rz-primary-light);
}

/* Calendar icon - compact layout.
   Smaller icon for kanban cards. */
.zenith-todo-calendar-icon-compact {
    font-size: 14px;
    color: var(--rz-primary-light);
}

/* Date picker - wide layout.
   Larger date picker for horizon view. */
.zenith-todo-datepicker-wide {
    width: 350px;
    font-size: 1rem;
    font-weight: 500;
}

/* Date picker - compact layout.
   Smaller date picker for kanban cards. */
.zenith-todo-datepicker-compact {
    width: 100%;
    font-size: 0.95rem;
    font-weight: 600;
}

/* Status badge - wide layout.
   Pill-shaped badge showing task status. */
.zenith-badge-wide {
    font-size: 12px;
    padding: 5px 15px;
    border-radius: 6px;
    font-weight: 700;
}

/* Status badge - compact layout.
   Smaller badge for kanban cards. */
.zenith-badge-compact {
    font-size: 10px;
    padding: 3px 10px;
    border-radius: 4px;
    font-weight: 700;
}

/* Priority badge - extra bold weight. */
.zenith-badge-priority {
    font-weight: 800;
}

/* More actions button (three dots).
   Subtle button for card actions menu. */
.zenith-todo-more-btn {
    opacity: 0.4;
    cursor: pointer;
}

/* =================================
   18. TODO EDIT DIALOG COMPONENTS
   =================================

   Styles for the TodoEditDialog modal form.
   Provides consistent form layout and styling.
*/

/* Dialog container with minimum width.
   Ensures dialog doesn't collapse too small. */
.zenith-dialog-container {
    min-width: 500px;
    background: transparent;
}

/* Textarea with no resize handle.
   Fixed-size text input area. */
.zenith-textarea-fixed {
    resize: none;
}

/* Dropdown item row layout.
   Flexbox row for folder > list display. */
.zenith-dropdown-item-row {
    display: flex;
    align-items: center;
    gap: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Breadcrumb separator in dropdowns.
   Small, faded separator character. */
.zenith-dropdown-separator {
    opacity: 0.3;
    font-size: 0.6rem;
    font-weight: 900;
}

/* Date picker with standard font size.
   Used in edit dialog for full date display. */
.zenith-datepicker-dialog {
    font-size: 1rem;
}

/* Checkbox styling - consistent with form elements */
.rz-chkbox-box {
    border-radius: 4px !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    background: rgba(0, 0, 0, 0.2) !important;
}

.rz-chkbox-box.rz-state-active {
    background: var(--rz-primary) !important;
    border-color: var(--rz-primary) !important;
}

/* Checkbox label styling.
   Clickable label next to checkboxes. */
.zenith-checkbox-label {
    font-weight: 700;
    opacity: 0.5;
    cursor: pointer;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
}

/* Metadata info text (created/modified dates).
   Small, faded timestamp information. */
.zenith-meta-info {
    opacity: 0.3;
    font-size: 0.65rem;
    font-weight: 600;
}

/* Cancel button styling.
   Subdued text button for dismissing dialog. */
.zenith-btn-cancel {
    font-weight: 800;
    opacity: 0.4;
    font-size: 0.8rem;
}

/* Save/submit button styling.
   Primary action button with rounded corners. */
.zenith-btn-save {
    font-weight: 800;
    border-radius: 8px;
    padding: 0 1.5rem;
    height: 40px;
    font-size: 0.8rem;
}

/* =================================
   19. AUTOGENERATED EDIT FORM STYLING
   =================================

   Zenith styling for the auto-generated CRUD edit forms
   used by RAppEditPage and RFeatureEditPage.
   Targets existing CSS classes from Shared.css to apply
   the Zenith visual language without code changes.
*/

/* --- Form Labels --- */
.edit-field-label {
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.2px !important;
    opacity: 0.5 !important;
    margin-bottom: 0.4rem !important;
}

/* --- Form Inputs ---
   Targets the actual Radzen DOM elements:
   - input.rz-textbox (text inputs)
   - textarea.rz-textarea (textareas)
   - .rz-dropdown (dropdown wrapper)
   - span.rz-numeric (numeric wrapper)
   - input.rz-inputtext (inner inputs like numeric)
   - .rz-datepicker (datepicker wrapper)
*/
.edit-form-grid input.rz-textbox,
.edit-form-grid textarea.rz-textarea,
.edit-form-grid .rz-dropdown,
.edit-form-grid span.rz-numeric,
.edit-form-grid .rz-datepicker {
    background: rgba(0, 0, 0, 0.25) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 8px !important;
    color: #fff !important;
    transition: all 0.2s ease !important;
    overflow: hidden;
}

/* Inner inputs inside numeric/datepicker wrappers inherit style */
.edit-form-grid span.rz-numeric input.rz-inputtext,
.edit-form-grid .rz-datepicker input.rz-inputtext {
    background: transparent !important;
    border: none !important;
    color: #fff !important;
}

/* Numeric spinner buttons blend in */
.edit-form-grid span.rz-numeric .rz-numeric-button {
    background: rgba(255, 255, 255, 0.05) !important;
    border: none !important;
    color: rgba(255, 255, 255, 0.4) !important;
}

.edit-form-grid span.rz-numeric .rz-numeric-button:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Focus states on wrapper elements */
.edit-form-grid input.rz-textbox:focus,
.edit-form-grid textarea.rz-textarea:focus,
.edit-form-grid .rz-dropdown:focus-within,
.edit-form-grid span.rz-numeric:focus-within,
.edit-form-grid .rz-datepicker:focus-within {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: var(--rz-primary) !important;
    box-shadow: 0 0 15px rgba(var(--rz-primary-rgb), 0.2) !important;
}

/* --- Dialog interior cleanup ---
   Remove backgrounds from cards and tab panels inside dialogs
   so everything matches the dialog's own background. */
.rz-dialog .rz-card,
.rz-dialog .rz-card.rz-variant-filled {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.rz-dialog .rz-tabview-panels,
.rz-dialog .rz-tabview-panel {
    background: transparent !important;
}

.rz-dialog .rz-tabview {
    background: transparent !important;
}

/* --- Action Buttons (Full Zenith Style) --- */
.edit-actions-stack .rz-button {
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
    font-weight: 800 !important;
    font-size: 0.8rem !important;
}

/* Delete button - red outline */
.edit-actions-stack .rz-danger {
    background: transparent !important;
    border: 1px solid #ff453a !important;
    color: #ff453a !important;
}

.edit-actions-stack .rz-danger:hover {
    background: rgba(255, 69, 58, 0.15) !important;
}

/* Cancel button - subtle outline */
.edit-actions-stack .rz-light {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: rgba(255, 255, 255, 0.6) !important;
}

.edit-actions-stack .rz-light:hover {
    border-color: rgba(255, 255, 255, 0.4) !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Save button - green outline with glow */
.edit-actions-stack button[type="submit"],
.edit-actions-stack .rz-primary {
    background: transparent !important;
    border: 1px solid #30d158 !important;
    color: #30d158 !important;
    box-shadow: 0 0 15px rgba(48, 209, 88, 0.2) !important;
}

.edit-actions-stack button[type="submit"]:hover,
.edit-actions-stack .rz-primary:hover {
    background: rgba(48, 209, 88, 0.15) !important;
    box-shadow: 0 0 25px rgba(48, 209, 88, 0.35) !important;
}

/* --- Extra View Card Headers --- */
.extra-view-card h3 {
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.2px !important;
    opacity: 0.5 !important;
    text-transform: uppercase !important;
}

/* =================================
   20. BUTTON UTILITIES
   =================================

   Reusable button style classes.
   Provides consistent button appearance.
*/

/* Bold text button.
   Heavy weight text for emphasis. */
.zenith-btn-bold {
    font-weight: 800;
}

/* Rounded button corners.
   Standard border radius for buttons. */
.zenith-btn-rounded {
    border-radius: 12px;
}

/* Full-width button.
   Button that spans its container. */
.zenith-btn-full {
    border-radius: 12px;
    width: 100%;
}

/* =================================
   21. DATA GRID STYLING
   =================================

   Zenith styling for RadzenDataGrid pages.
   Targets Radzen's rendered CSS classes to apply
   glass backgrounds, subtle borders, and the
   Zenith visual language to data tables.
*/

/* --- Grid Container --- */
.rz-data-grid {
    background: var(--zenith-glass) !important;
    border: 1px solid var(--zenith-glass-border) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
}

.rz-data-grid:focus {
    outline: none !important;
}

/* --- Table Header --- */
.rz-datatable-thead {
    background: rgba(0, 0, 0, 0.25) !important;
}

.rz-datatable-thead th {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-top: none !important;
    padding: 0.75rem 1rem !important;
}

.rz-column-title,
.rz-data-column-title {
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.5px !important;
    opacity: 0.5 !important;
}

/* Sortable column hover */
.rz-sortable-column:hover {
    background: rgba(255, 255, 255, 0.05) !important;
}

/* Sort icon */
.rz-sortable-column .rzi-sort,
.rz-sortable-column .rzi-sort-asc,
.rz-sortable-column .rzi-sort-desc {
    opacity: 0.4 !important;
}

/* --- Table Rows --- */
.rz-data-row {
    border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
    transition: background 0.15s ease !important;
}

.rz-data-row:hover {
    background: rgba(255, 255, 255, 0.04) !important;
}

.rz-data-row.rz-state-highlight {
    background: rgba(var(--rz-primary-rgb), 0.12) !important;
}

/* Alternating rows - subtle differentiation */
.rz-data-row:nth-child(even) {
    background: rgba(255, 255, 255, 0.015) !important;
}

.rz-data-row:nth-child(even):hover {
    background: rgba(255, 255, 255, 0.04) !important;
}

/* --- Table Cells --- */
.rz-grid-table td {
    border: none !important;
    padding: 0.6rem 1rem !important;
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Links in grid cells */
.rz-grid-table td a {
    color: var(--chat-accent, #00d4ff) !important;
    text-decoration: none !important;
    transition: opacity 0.2s ease !important;
}

.rz-grid-table td a:hover {
    opacity: 0.7 !important;
}

/* --- Edit/Delete Icon Buttons in Grid Rows --- */
.rz-grid-table .rz-button.rz-button-icon-only {
    background: transparent !important;
    border: none !important;
    opacity: 0.35 !important;
}

.rz-grid-table .rz-button.rz-button-icon-only:hover {
    opacity: 1 !important;
    background: rgba(var(--rz-primary-rgb), 0.1) !important;
}

/* --- Pagination --- */
.rz-paginator {
    background: transparent !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    padding: 0.75rem 1rem !important;
}

.rz-paginator .rz-paginator-element,
.rz-paginator .rz-pager-page {
    border-radius: 50px !important;
    /* Perfect Pill/Circle */
    transition: all 0.2s ease !important;
    color: rgba(255, 255, 255, 0.5) !important;
    margin: 0 2px !important;
}

.rz-paginator .rz-paginator-element:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #fff !important;
}

/* Active page number */
.rz-paginator .rz-state-active {
    background: var(--rz-primary) !important;
    color: #fff !important;
    box-shadow: 0 4px 15px rgba(var(--rz-primary-rgb), 0.3) !important;
}

.rz-pager-summary {
    opacity: 0.4 !important;
    font-size: 0.8rem !important;
}

/* --- Filter Row --- */
.rz-datatable-filter-row th {
    background: rgba(0, 0, 0, 0.15) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* --- Empty State --- */
.rz-datatable-emptymessage td {
    opacity: 0.3 !important;
    font-style: italic !important;
}

/* --- Progress Bar (Loading Spinner) --- */
.rz-progressbar {
    height: 3px !important;
    border-radius: 2px !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

.rz-progressbar-value {
    border-radius: 2px !important;
}

/* --- Header Toolbar: Search Bar --- */
input.rz-textbox[aria-label="Search by all string columns"] {
    background: rgba(0, 0, 0, 0.25) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 8px !important;
    color: #fff !important;
    transition: all 0.2s ease !important;
}

input.rz-textbox[aria-label="Search by all string columns"]:focus {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: var(--rz-primary) !important;
    box-shadow: 0 0 15px rgba(var(--rz-primary-rgb), 0.2) !important;
}

/* --- Header Toolbar: Preset Dropdown --- */
.rz-dropdown {
    background: rgba(0, 0, 0, 0.25) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 8px !important;
    color: #fff !important;
    transition: all 0.2s ease !important;
}

.rz-dropdown:hover,
.rz-dropdown:focus-within {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: var(--rz-primary) !important;
}

/* --- All Buttons: base rounding only --- */
.rz-button {
    border-radius: 8px !important;
}

/* --- Grid Toolbar Buttons (settings, Add, refresh) --- */
.grid-toolbar button.rz-button.rz-button-md,
.gridPageConfigPopup button.rz-button {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: rgba(255, 255, 255, 0.6) !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
}

.gridPageConfigPopup .rz-label {
    font-weight: 700 !important;
    font-size: 0.8rem !important;
    opacity: 0.7 !important;
    min-width: 140px;
}

.grid-toolbar button.rz-button.rz-button-md.rz-variant-filled.rz-primary.rz-shade-default:hover,
.grid-toolbar button.rz-button.rz-button-md.rz-variant-flat.rz-primary.rz-shade-default:hover {
    border-color: rgba(255, 255, 255, 0.4) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

/* --- Zenith Config Layout --- */
.zenith-config-grid {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    /* Balanced spacing to prevent scrollbars */
    padding: 0 1rem;
    width: 100%;
}

.config-toggle-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.4rem 0;
}

.config-toggle-item .rz-label {
    font-weight: 700 !important;
    font-size: 0.85rem !important;
    opacity: 0.7 !important;
    color: #fff !important;
}

/* --- Zenith Switch Fix (Clean & Stable) --- */
.rz-switch {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 20px !important;
    height: 22px !important;
    width: 44px !important;
    position: relative !important;
    cursor: pointer !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.3s ease !important;
}

/* AGGRESSIVE KILL of Radzen default elements and pseudo-elements */
.rz-switch::before,
.rz-switch::after,
.rz-switch-circle::before,
.rz-switch-circle::after {
    display: none !important;
    content: none !important;
}

.rz-switch:hover {
    border-color: rgba(255, 255, 255, 0.2) !important;
}

.rz-switch-checked {
    background: rgba(0, 245, 255, 0.15) !important;
    border-color: rgba(0, 245, 255, 0.5) !important;
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.2),
        0 0 10px rgba(0, 245, 255, 0.2) !important;
}

/* The Handle - Back to simple 'left' for max stability */
.rz-switch-circle {
    background: #fff !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5) !important;
    position: absolute !important;
    top: 2px !important;
    left: 2px !important;
    /* Start position */
    width: 16px !important;
    height: 16px !important;
    border-radius: 50% !important;
    transition: left 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    transform: none !important;
    /* Clear any previous transform */
}

.rz-switch-checked .rz-switch-circle {
    left: 24px !important;
    /* End position (44 - 16 - 2 - 2) */
    background: #fff !important;
    box-shadow: 0 2px 10px rgba(0, 245, 255, 0.4) !important;
}

/* =================================
   22. TOOLTIP STYLING
   =================================

   Zenith styling for Radzen tooltips.
   Applies glassmorphism, glows, and premium typography.
*/

.rz-tooltip {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.rz-tooltip .rz-tooltip-tail {
    display: none !important;
}

.rz-tooltip-content {
    background: rgba(20, 20, 25, 0.88) !important;
    /* Extra saturation for the glass effect vibrancy */
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    /* Subtle inner glow for depth */
    box-shadow:
        0 10px 40px rgba(0, 0, 0, 0.6),
        inset 0 1px 1px rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    color: #fff !important;
    padding: 0 !important;
    overflow: hidden;
}

.zenith-tooltip-container {
    padding: 12px 16px;
    min-width: 180px;
    /* Nudge slightly to the right */
    margin-left: 30px;
    animation: zenith-tooltip-appear 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes zenith-tooltip-appear {
    from {
        opacity: 0;
        transform: translateY(4px) translateX(-10px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) translateX(0) scale(1);
    }
}

.zenith-tooltip-header {
    font-size: 0.6rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--chat-accent, #00d4ff);
    opacity: 0.8;
    margin-bottom: 10px;
    display: block;
}

.zenith-tooltip-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    padding: 3px 0;
}

.zenith-tooltip-label {
    opacity: 0.5;
    font-size: 0.75rem;
    font-weight: 600;
}

.zenith-tooltip-value {
    font-weight: 700;
    font-size: 0.8rem;
    font-family: var(--rz-code-font-family);
    color: #fff;
}

.zenith-tooltip-cost {
    font-size: 0.95rem;
    font-weight: 900;
    font-family: var(--rz-code-font-family);
    color: #fff;
    background: linear-gradient(135deg, #fff, var(--chat-accent, #00d4ff));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 8px rgba(0, 212, 255, 0.4));
}

.zenith-tooltip-divider {
    height: 1px;
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0.2) 0%,
            rgba(255, 255, 255, 0.05) 50%,
            rgba(255, 255, 255, 0) 100%);
    margin: 8px 0;
}