/* YouWorship Theme - Teal Glassmorphism */

/* ============================================
   THEME VARIABLES
   ============================================ */

:root {
    /* Typography */
    --yw-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --yw-font-mono: 'Courier New', Courier, monospace;

    /* Sizing - Touch Friendly */
    --yw-touch-target: 44px;
    --yw-input-height: 48px;
    --yw-button-padding: 12px 24px;
    --yw-border-radius: 12px;
    --yw-border-radius-lg: 16px;
    --yw-border-radius-xl: 24px;

    /* Shadows */
    --yw-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --yw-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1);
    --yw-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
    --yw-shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.1);

    /* Transitions */
    --yw-transition-fast: 0.15s ease;
    --yw-transition-normal: 0.3s ease;
    --yw-transition-slow: 0.5s ease;
}

/* ============================================
   LIGHT THEME (Default)
   ============================================ */

.theme-light,
:root:not(.theme-dark) {
    /* Primary Colors - Teal */
    --yw-primary: #00897B;
    --yw-primary-light: #4DB6AC;
    --yw-primary-dark: #00695C;
    --yw-primary-rgb: 0, 137, 123;

    /* Secondary - Purple Accent (matches logo) */
    --yw-secondary: #6B4C8A;
    --yw-secondary-light: #9575CD;
    --yw-secondary-dark: #4A2F66;

    /* Background & Surfaces */
    --yw-background: #D8DEDE;
    --yw-background-gradient: linear-gradient(135deg, #D8DEDE 0%, #CED5D4 50%, #D8DEDE 100%);
    --yw-surface: rgba(255, 255, 255, 0.75);
    --yw-surface-solid: #FFFFFF;
    --yw-surface-hover: rgba(255, 255, 255, 0.9);

    /* Text */
    --yw-text: #2D3436;
    --yw-text-secondary: #636E72;
    --yw-text-muted: #9CA3AF;
    --yw-text-inverse: #FFFFFF;

    /* Borders */
    --yw-border: rgba(0, 0, 0, 0.08);
    --yw-border-strong: rgba(0, 0, 0, 0.15);

    /* Status Colors */
    --yw-success: #27AE60;
    --yw-success-light: #D4EDDA;
    --yw-warning: #F39C12;
    --yw-warning-light: #FFF3CD;
    --yw-danger: #E74C3C;
    --yw-danger-light: #F8D7DA;
    --yw-info: #3498DB;
    --yw-info-light: #D1ECF1;

    /* Loading Screen - matches app background */
    --yw-loading-bg: linear-gradient(135deg, #D8DEDE 0%, #CED5D4 50%, #D8DEDE 100%);
    --yw-loading-spinner: #00897B;

    /* Sidebar */
    --yw-sidebar-bg: linear-gradient(180deg, #00897B 0%, #00695C 50%, #004D40 100%);
    --yw-sidebar-text: rgba(255, 255, 255, 0.9);
    --yw-sidebar-text-muted: rgba(255, 255, 255, 0.6);
    --yw-sidebar-hover: rgba(255, 255, 255, 0.15);
    --yw-sidebar-active: rgba(255, 255, 255, 0.25);

    /* Header */
    --yw-header-bg: rgba(255, 255, 255, 0.8);
    --yw-header-border: rgba(0, 0, 0, 0.05);

    /* Cards */
    --yw-card-bg: rgba(255, 255, 255, 0.7);
    --yw-card-border: rgba(255, 255, 255, 0.5);

    /* Radzen Overrides */
    --rz-primary: var(--yw-primary);
    --rz-primary-light: var(--yw-primary-light);
    --rz-primary-dark: var(--yw-primary-dark);
    --rz-secondary: var(--yw-secondary);
    --rz-success: var(--yw-success);
    --rz-warning: var(--yw-warning);
    --rz-danger: var(--yw-danger);
    --rz-info: var(--yw-info);
    --rz-base-100: var(--yw-surface-solid);
    --rz-base-200: #F5F5F5;
    --rz-base-400: var(--yw-text-muted);
    --rz-border: var(--yw-border);
    --rz-border-radius: var(--yw-border-radius);
}

/* ============================================
   DARK THEME
   ============================================ */

.theme-dark {
    /* Primary Colors - Brighter Teal for dark bg */
    --yw-primary: #4DB6AC;
    --yw-primary-light: #80CBC4;
    --yw-primary-dark: #26A69A;
    --yw-primary-rgb: 77, 182, 172;

    /* Secondary - Purple */
    --yw-secondary: #9575CD;
    --yw-secondary-light: #B39DDB;
    --yw-secondary-dark: #7E57C2;

    /* Background & Surfaces */
    --yw-background: #0F0F1A;
    --yw-background-gradient: linear-gradient(135deg, #0F0F1A 0%, #1A1A2E 50%, #16162A 100%);
    --yw-surface: rgba(30, 30, 50, 0.75);
    --yw-surface-solid: #1E1E32;
    --yw-surface-hover: rgba(40, 40, 65, 0.9);

    /* Text */
    --yw-text: #F5F5F5;
    --yw-text-secondary: #B0B0B0;
    --yw-text-muted: #6B7280;
    --yw-text-inverse: #1A1A2E;

    /* Borders */
    --yw-border: rgba(255, 255, 255, 0.08);
    --yw-border-strong: rgba(255, 255, 255, 0.15);

    /* Status Colors - Brighter for dark */
    --yw-success: #34D399;
    --yw-success-light: rgba(52, 211, 153, 0.2);
    --yw-warning: #FBBF24;
    --yw-warning-light: rgba(251, 191, 36, 0.2);
    --yw-danger: #F87171;
    --yw-danger-light: rgba(248, 113, 113, 0.2);
    --yw-info: #60A5FA;
    --yw-info-light: rgba(96, 165, 250, 0.2);

    /* Loading Screen - matches app background */
    --yw-loading-bg: linear-gradient(135deg, #D8DEDE 0%, #CED5D4 50%, #D8DEDE 100%);
    --yw-loading-spinner: #00897B;

    /* Sidebar */
    --yw-sidebar-bg: linear-gradient(180deg, #1E1E32 0%, #252542 50%, #1A1A2E 100%);
    --yw-sidebar-text: rgba(255, 255, 255, 0.9);
    --yw-sidebar-text-muted: rgba(255, 255, 255, 0.5);
    --yw-sidebar-hover: rgba(77, 182, 172, 0.15);
    --yw-sidebar-active: rgba(77, 182, 172, 0.25);

    /* Header */
    --yw-header-bg: rgba(30, 30, 50, 0.8);
    --yw-header-border: rgba(255, 255, 255, 0.05);

    /* Cards */
    --yw-card-bg: rgba(30, 30, 50, 0.6);
    --yw-card-border: rgba(255, 255, 255, 0.1);

    /* Radzen Overrides */
    --rz-primary: var(--yw-primary);
    --rz-primary-light: var(--yw-primary-light);
    --rz-primary-dark: var(--yw-primary-dark);
    --rz-secondary: var(--yw-secondary);
    --rz-success: var(--yw-success);
    --rz-warning: var(--yw-warning);
    --rz-danger: var(--yw-danger);
    --rz-info: var(--yw-info);
    --rz-base-100: var(--yw-surface-solid);
    --rz-base-200: #252542;
    --rz-base-400: var(--yw-text-muted);
    --rz-border: var(--yw-border);

    /* Dark shadows */
    --yw-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --yw-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
    --yw-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
    --yw-shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.4);
}

/* ============================================
   BASE STYLES
   ============================================ */

html {
    font-family: var(--yw-font-family);
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    background: var(--yw-background-gradient);
    background-attachment: fixed;
    color: var(--yw-text);
    transition: background-color var(--yw-transition-normal),
                color var(--yw-transition-normal);
}

/* Force Radzen body/layout background */
.rz-body,
.rz-layout .rz-body,
div.rz-body,
main.rz-body,
.rz-layout-body {
    background: var(--yw-background-gradient) !important;
    background-attachment: fixed !important;
    background-color: var(--yw-background) !important;
}

/* ============================================
   iOS PWA SAFE AREAS
   ============================================ */

/* PWA standalone mode - add safe area for iOS notch */
@media all and (display-mode: standalone) {
    /* Create status bar background at the very top */
    body::before {
        content: '' !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: env(safe-area-inset-top, 0) !important;
        background-color: var(--rz-primary, #00897B) !important;
        z-index: 9999 !important;
        pointer-events: none !important;
    }

    /* Push layout down by safe area amount */
    .rz-layout {
        padding-top: env(safe-area-inset-top, 0) !important;
    }

    /* Header stays at its normal height */
    .rz-header,
    .rz-layout .rz-header,
    header.rz-header {
        height: 48px !important;
        min-height: 48px !important;
        max-height: 48px !important;
    }

    /* Sidebar accounts for safe area */
    .rz-sidebar,
    .app-sidebar {
        top: env(safe-area-inset-top, 0) !important;
    }

    /* Bottom safe area for body */
    .rz-body,
    .app-body {
        padding-bottom: env(safe-area-inset-bottom, 0) !important;
    }
}

/* ============================================
   COMPACT HEADER
   ============================================ */

.rz-header,
.rz-layout .rz-header,
header.rz-header {
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
}

.rz-header > *,
.rz-layout .rz-header > * {
    height: 48px !important;
}

/* Header items alignment */
.rz-header .rz-stack {
    align-items: center !important;
}

.rz-header .header-actions {
    display: flex !important;
    align-items: center !important;
    height: 36px !important;
    gap: 0.5rem !important;
}

.rz-header .header-actions > * {
    display: flex !important;
    align-items: center !important;
    height: 36px !important;
}

/* Language selector in header */
.rz-header .language-selector,
.rz-header .language-selector.rz-dropdown {
    height: 36px !important;
    min-height: 36px !important;
    display: flex !important;
    align-items: center !important;
}

.rz-header .language-selector .rz-dropdown-value {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
}

/* Theme toggle in header */
.rz-header .theme-toggle {
    width: 36px !important;
    height: 36px !important;
}

/* Profile menu in header */
.rz-header .rz-profile-menu {
    display: flex !important;
    align-items: center !important;
    height: 36px !important;
}

.rz-header .rz-profile-menu-button {
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    padding: 2px 4px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}

.rz-header .profile-avatar {
    width: 32px !important;
    height: 32px !important;
    margin: 0 !important;
}

.rz-header .rz-gravatar {
    width: 32px !important;
    height: 32px !important;
    margin: 0 !important;
    line-height: 0 !important;
}

.rz-header .rz-gravatar img {
    width: 32px !important;
    height: 32px !important;
    margin: 0 !important;
    display: block !important;
}

/* Profile menu dropdown arrow */
.rz-header .rz-profile-menu-button .rz-icon {
    margin-left: 2px !important;
    font-size: 18px !important;
}

/* ============================================
   GLASSMORPHISM UTILITIES
   ============================================ */

.glass {
    background: var(--yw-surface);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--yw-border);
    border-radius: var(--yw-border-radius);
}

.glass-strong {
    background: var(--yw-surface);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--yw-border-strong);
    border-radius: var(--yw-border-radius);
}

.glass-card {
    background: var(--yw-card-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--yw-card-border);
    border-radius: var(--yw-border-radius-lg);
    box-shadow: var(--yw-shadow-glass);
    transition: transform var(--yw-transition-fast),
                box-shadow var(--yw-transition-fast);
}

.glass-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--yw-shadow-lg);
}

/* ============================================
   TOUCH-FRIENDLY COMPONENTS
   ============================================ */

/* Buttons */
.rz-button {
    min-height: var(--yw-touch-target);
    padding: var(--yw-button-padding);
    border-radius: var(--yw-border-radius);
    font-weight: 500;
    transition: all var(--yw-transition-fast);
}

.rz-button:hover {
    transform: translateY(-1px);
    box-shadow: var(--yw-shadow-md);
}

/* Fix datepicker button - no animation, proper positioning */
.rz-datepicker .rz-button {
    min-height: auto !important;
    padding: 0 !important;
    position: absolute !important;
    right: 0.5rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    transition: color 0.15s ease !important;
    box-shadow: none !important;
}

.rz-datepicker .rz-button:hover,
.rz-datepicker .rz-button:active,
.rz-datepicker .rz-button:focus {
    transform: translateY(-50%) !important;
    box-shadow: none !important;
}

.rz-button:active {
    transform: translateY(0);
}

/* Form Inputs */
.rz-textbox,
.rz-dropdown,
.rz-numeric,
.rz-datepicker,
.rz-textarea {
    min-height: var(--yw-input-height);
    border-radius: var(--yw-border-radius);
    border: 1px solid var(--yw-border);
    background: var(--yw-surface-solid);
    transition: border-color var(--yw-transition-fast),
                box-shadow var(--yw-transition-fast);
}

.rz-textbox:focus,
.rz-dropdown:focus,
.rz-numeric:focus,
.rz-datepicker:focus,
.rz-textarea:focus {
    border-color: var(--yw-primary);
    box-shadow: 0 0 0 3px rgba(var(--yw-primary-rgb), 0.15);
    outline: none;
}

/* Cards */
.rz-card {
    background: var(--yw-card-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--yw-card-border);
    border-radius: var(--yw-border-radius-lg);
    box-shadow: var(--yw-shadow-sm);
}

/* Data Grid */
.rz-datatable {
    border-radius: var(--yw-border-radius-lg);
    overflow: hidden;
    background: var(--yw-surface-solid);
}

.rz-datatable-thead {
    background: var(--yw-surface);
}

.rz-datatable-data tr:hover {
    background: var(--yw-surface-hover);
}

/* ============================================
   NAVIGATION ITEMS
   ============================================ */

.rz-navigation-item {
    min-height: var(--yw-touch-target);
    border-radius: var(--yw-border-radius);
    margin: 4px 8px;
    transition: background-color var(--yw-transition-fast);
}

.rz-navigation-item:hover {
    background: var(--yw-sidebar-hover);
}

.rz-navigation-item.rz-state-selected {
    background: var(--yw-sidebar-active);
}

/* ============================================
   BADGES
   ============================================ */

.rz-badge {
    border-radius: 20px;
    padding: 4px 12px;
    font-weight: 500;
    font-size: 0.75rem;
}

/* ============================================
   DIALOGS
   ============================================ */

.rz-dialog {
    border-radius: var(--yw-border-radius-xl);
    background: var(--yw-surface-solid);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: var(--yw-shadow-lg);
}

.rz-dialog-titlebar {
    background: transparent;
    border-bottom: 1px solid var(--yw-border);
}

/* ============================================
   THEME TRANSITION
   ============================================ */

.theme-transitioning * {
    transition: background-color 0.3s ease,
                color 0.3s ease,
                border-color 0.3s ease,
                box-shadow 0.3s ease !important;
}

/* ============================================
   SECTION TYPE COLORS (Teal Palette)
   ============================================ */

.section-type-intro { --section-color: #9B59B6; }
.section-type-verse { --section-color: #00897B; }
.section-type-prechorus { --section-color: #F39C12; }
.section-type-chorus { --section-color: #27AE60; }
.section-type-bridge { --section-color: #E74C3C; }
.section-type-interlude { --section-color: #8E44AD; }
.section-type-outro { --section-color: #34495E; }
.section-type-tag { --section-color: #D35400; }

/* ============================================
   SCROLLBAR STYLING
   ============================================ */

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--yw-border-strong);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--yw-text-muted);
}

.theme-dark ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
}

.theme-dark ::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
    :root {
        --yw-touch-target: 48px;
        --yw-input-height: 52px;
    }

    .rz-button {
        padding: 14px 20px;
    }
}

/* ============================================
   DARK THEME - RADZEN COMPONENT OVERRIDES
   ============================================ */

.theme-dark {
    /* Base text color */
    color: var(--yw-text);
}

/* Page titles and headings */
.theme-dark h1,
.theme-dark h2,
.theme-dark h3,
.theme-dark h4,
.theme-dark h5,
.theme-dark h6,
.theme-dark .rz-text-h1,
.theme-dark .rz-text-h2,
.theme-dark .rz-text-h3,
.theme-dark .rz-text-h4,
.theme-dark .rz-text-h5,
.theme-dark .rz-text-h6 {
    color: var(--yw-text) !important;
}

/* Labels and text */
.theme-dark .rz-text,
.theme-dark .rz-label,
.theme-dark label,
.theme-dark p,
.theme-dark span:not(.rz-badge):not(.chord-marker) {
    color: var(--yw-text);
}

/* Muted text */
.theme-dark .rz-color-base-400,
.theme-dark .rz-text-secondary-color {
    color: var(--yw-text-secondary) !important;
}

/* Data Tables */
.theme-dark .rz-datatable,
.theme-dark .rz-data-grid {
    background: var(--yw-surface-solid) !important;
    border-color: var(--yw-border) !important;
}

.theme-dark .rz-datatable-thead,
.theme-dark .rz-grid-header {
    background: var(--yw-surface) !important;
    color: var(--yw-text) !important;
}

.theme-dark .rz-datatable-thead th,
.theme-dark .rz-grid-header th,
.theme-dark .rz-column-title {
    color: var(--yw-text) !important;
    border-color: var(--yw-border) !important;
}

.theme-dark .rz-datatable-data td,
.theme-dark .rz-grid-table td {
    color: var(--yw-text) !important;
    border-color: var(--yw-border) !important;
    background: var(--yw-surface-solid) !important;
}

.theme-dark .rz-datatable-data tr:hover td,
.theme-dark .rz-grid-table tr:hover td {
    background: var(--yw-surface-hover) !important;
}

.theme-dark .rz-datatable-data tr:nth-child(even) td {
    background: rgba(255, 255, 255, 0.02) !important;
}

/* Cards */
.theme-dark .rz-card {
    background: var(--yw-surface-solid) !important;
    border-color: var(--yw-border) !important;
    color: var(--yw-text) !important;
}

.theme-dark .rz-card-title,
.theme-dark .rz-card-subtitle {
    color: var(--yw-text) !important;
}

/* Form Controls */
.theme-dark .rz-textbox,
.theme-dark .rz-dropdown,
.theme-dark .rz-numeric,
.theme-dark .rz-datepicker,
.theme-dark .rz-textarea,
.theme-dark .rz-autocomplete,
.theme-dark .rz-multiselect {
    background: var(--yw-surface-solid) !important;
    border-color: var(--yw-border) !important;
    color: var(--yw-text) !important;
}

.theme-dark .rz-textbox input,
.theme-dark .rz-dropdown input,
.theme-dark .rz-numeric input,
.theme-dark .rz-autocomplete input {
    color: var(--yw-text) !important;
    background: transparent !important;
}

.theme-dark .rz-textbox input::placeholder,
.theme-dark .rz-autocomplete input::placeholder {
    color: var(--yw-text-muted) !important;
}

/* Dropdown menus */
.theme-dark .rz-popup,
.theme-dark .rz-dropdown-panel,
.theme-dark .rz-autocomplete-panel,
.theme-dark .rz-multiselect-panel {
    background: var(--yw-surface-solid) !important;
    border-color: var(--yw-border) !important;
}

.theme-dark .rz-dropdown-item,
.theme-dark .rz-autocomplete-item,
.theme-dark .rz-multiselect-item {
    color: var(--yw-text) !important;
}

.theme-dark .rz-dropdown-item:hover,
.theme-dark .rz-autocomplete-item:hover,
.theme-dark .rz-multiselect-item:hover {
    background: var(--yw-surface-hover) !important;
}

.theme-dark .rz-state-highlight {
    background: rgba(var(--yw-primary-rgb), 0.2) !important;
    color: var(--yw-primary) !important;
}

/* Dialogs */
.theme-dark .rz-dialog {
    background: var(--yw-surface-solid) !important;
    color: var(--yw-text) !important;
}

.theme-dark .rz-dialog-titlebar {
    color: var(--yw-text) !important;
    border-color: var(--yw-border) !important;
}

.theme-dark .rz-dialog-title {
    color: var(--yw-text) !important;
}

.theme-dark .rz-dialog-content {
    color: var(--yw-text) !important;
}

/* Buttons - Light style in dark mode */
.theme-dark .rz-button.rz-variant-flat,
.theme-dark .rz-button.rz-light {
    background: var(--yw-surface) !important;
    color: var(--yw-text) !important;
    border-color: var(--yw-border) !important;
}

.theme-dark .rz-button.rz-variant-flat:hover,
.theme-dark .rz-button.rz-light:hover {
    background: var(--yw-surface-hover) !important;
}

/* Panel Menu (Sidebar) */
.theme-dark .rz-panel-menu {
    background: transparent !important;
}

.theme-dark .rz-panel-menu-item-text {
    color: var(--yw-sidebar-text) !important;
}

/* Profile Menu */
.theme-dark .rz-profile-menu-button {
    color: var(--yw-text) !important;
}

/* Notifications */
.theme-dark .rz-notification {
    background: var(--yw-surface-solid) !important;
    color: var(--yw-text) !important;
    border-color: var(--yw-border) !important;
}

/* Tooltips */
.theme-dark .rz-tooltip {
    background: var(--yw-surface-solid) !important;
    color: var(--yw-text) !important;
    border-color: var(--yw-border) !important;
}

/* Context Menu */
.theme-dark .rz-contextmenu {
    background: var(--yw-surface-solid) !important;
    border-color: var(--yw-border) !important;
}

.theme-dark .rz-contextmenu-item {
    color: var(--yw-text) !important;
}

.theme-dark .rz-contextmenu-item:hover {
    background: var(--yw-surface-hover) !important;
}

/* Progress bars */
.theme-dark .rz-progressbar {
    background: var(--yw-surface) !important;
}

/* Pager */
.theme-dark .rz-pager {
    background: var(--yw-surface-solid) !important;
    border-color: var(--yw-border) !important;
}

.theme-dark .rz-pager-page,
.theme-dark .rz-pager-element {
    color: var(--yw-text) !important;
}

.theme-dark .rz-pager-page:hover {
    background: var(--yw-surface-hover) !important;
}

/* Tabs */
.theme-dark .rz-tabview {
    background: transparent !important;
}

.theme-dark .rz-tabview-nav {
    border-color: var(--yw-border) !important;
}

.theme-dark .rz-tabview-nav-link {
    color: var(--yw-text-secondary) !important;
}

.theme-dark .rz-tabview-nav-link.rz-state-active {
    color: var(--yw-primary) !important;
    border-color: var(--yw-primary) !important;
}

.theme-dark .rz-tabview-panel {
    color: var(--yw-text) !important;
}

/* Fieldset */
.theme-dark .rz-fieldset {
    border-color: var(--yw-border) !important;
}

.theme-dark .rz-fieldset-legend {
    color: var(--yw-text) !important;
    background: var(--yw-surface-solid) !important;
}

/* Links */
.theme-dark a {
    color: var(--yw-primary) !important;
}

.theme-dark a:hover {
    color: var(--yw-primary-light) !important;
}

/* Icons in dark mode */
.theme-dark .rz-icon {
    color: inherit;
}

/* Stack and layout components */
.theme-dark .rz-stack {
    color: var(--yw-text);
}

/* List items */
.theme-dark .rz-listbox {
    background: var(--yw-surface-solid) !important;
    border-color: var(--yw-border) !important;
}

.theme-dark .rz-listbox-item {
    color: var(--yw-text) !important;
}

.theme-dark .rz-listbox-item:hover {
    background: var(--yw-surface-hover) !important;
}

/* Checkbox and Radio */
.theme-dark .rz-checkbox-label,
.theme-dark .rz-radio-label {
    color: var(--yw-text) !important;
}

/* Scheduler */
.theme-dark .rz-scheduler {
    background: var(--yw-surface-solid) !important;
    color: var(--yw-text) !important;
}

/* Tree */
.theme-dark .rz-tree {
    background: transparent !important;
}

.theme-dark .rz-treenode-content {
    color: var(--yw-text) !important;
}

.theme-dark .rz-treenode-content:hover {
    background: var(--yw-surface-hover) !important;
}

/* Color utility classes */
.theme-dark .rz-color-base-400,
.theme-dark .rz-color-base-500,
.theme-dark .rz-color-base-600,
.theme-dark .rz-color-base-700 {
    color: var(--yw-text-secondary) !important;
}

/* DataList */
.theme-dark .rz-datalist {
    background: transparent !important;
}

.theme-dark .rz-datalist-content {
    background: transparent !important;
}

.theme-dark .rz-datalist .rz-card {
    background: var(--yw-surface) !important;
    border-color: var(--yw-border) !important;
}

/* Nested cards inside lists */
.theme-dark .rz-card .rz-card {
    background: var(--yw-surface) !important;
    border: 1px solid var(--yw-border) !important;
}

/* Badge styles in dark mode */
.theme-dark .rz-badge.rz-light,
.theme-dark .rz-badge[style*="Light"] {
    background: var(--yw-surface) !important;
    color: var(--yw-text) !important;
}

.theme-dark .rz-badge.rz-info {
    background: var(--yw-info) !important;
    color: white !important;
}

.theme-dark .rz-badge.rz-secondary {
    background: var(--yw-secondary) !important;
    color: white !important;
}

/* Caption and subtitle text */
.theme-dark .rz-text-caption,
.theme-dark .rz-text-subtitle1,
.theme-dark .rz-text-subtitle2,
.theme-dark .rz-text-body2 {
    color: var(--yw-text-secondary) !important;
}

/* Strong text in cards */
.theme-dark strong,
.theme-dark b {
    color: var(--yw-text);
}

/* Fix header text in dark mode */
.theme-dark .rz-header {
    color: var(--yw-text) !important;
}

/* Profile menu dropdown */
.theme-dark .rz-profile-menu-dropdown {
    background: var(--yw-surface-solid) !important;
    border-color: var(--yw-border) !important;
}

.theme-dark .rz-profile-menu-item {
    color: var(--yw-text) !important;
}

.theme-dark .rz-profile-menu-item:hover {
    background: var(--yw-surface-hover) !important;
}

/* Ensure all icons inherit correct color */
.theme-dark .rz-icon:not([style*="color"]) {
    color: var(--yw-text-secondary);
}

/* Fix confirm dialog */
.theme-dark .rz-confirm-dialog {
    background: var(--yw-surface-solid) !important;
    color: var(--yw-text) !important;
}

.theme-dark .rz-confirm-dialog .rz-dialog-content {
    background: var(--yw-surface-solid) !important;
}

/* Search/filter areas */
.theme-dark .rz-g-filter,
.theme-dark .rz-filter-row {
    background: var(--yw-surface) !important;
}

/* Override for all base background classes */
.theme-dark [class*="rz-background-color-base"] {
    background-color: var(--yw-surface-solid) !important;
}

/* Body1 and regular text */
.theme-dark .rz-text-body1 {
    color: var(--yw-text) !important;
}

/* Fix RadzenRow and RadzenColumn backgrounds */
.theme-dark .rz-row,
.theme-dark .rz-column {
    color: var(--yw-text);
}

/* Fix alert boxes */
.theme-dark .rz-alert {
    border-color: var(--yw-border) !important;
}

.theme-dark .rz-alert-info {
    background: var(--yw-info-light) !important;
    color: var(--yw-info) !important;
}

.theme-dark .rz-alert-success {
    background: var(--yw-success-light) !important;
    color: var(--yw-success) !important;
}

.theme-dark .rz-alert-warning {
    background: var(--yw-warning-light) !important;
    color: var(--yw-warning) !important;
}

.theme-dark .rz-alert-danger {
    background: var(--yw-danger-light) !important;
    color: var(--yw-danger) !important;
}

/* DataGrid specific overrides */
.theme-dark .rz-data-grid,
.theme-dark .rz-grid {
    background: var(--yw-surface-solid) !important;
    color: var(--yw-text) !important;
}

.theme-dark .rz-data-grid table,
.theme-dark .rz-grid table {
    background: var(--yw-surface-solid) !important;
}

.theme-dark .rz-data-grid-data,
.theme-dark .rz-grid-table tbody {
    background: var(--yw-surface-solid) !important;
}

.theme-dark .rz-data-grid-data td,
.theme-dark .rz-grid-table tbody td {
    background: var(--yw-surface-solid) !important;
    color: var(--yw-text) !important;
    border-color: var(--yw-border) !important;
}

.theme-dark .rz-data-grid-data tr:hover td,
.theme-dark .rz-grid-table tbody tr:hover td {
    background: var(--yw-surface-hover) !important;
}

.theme-dark .rz-sortable-column,
.theme-dark .rz-data-grid-header {
    background: rgba(var(--yw-primary-rgb), 0.1) !important;
    color: var(--yw-text) !important;
}

.theme-dark .rz-cell-data {
    color: var(--yw-text) !important;
}

/* RadzenLink in dark mode */
.theme-dark .rz-link {
    color: var(--yw-primary) !important;
}

.theme-dark .rz-link:hover {
    color: var(--yw-primary-light) !important;
}

/* Empty grid message */
.theme-dark .rz-data-grid-empty,
.theme-dark .rz-grid-empty {
    color: var(--yw-text-secondary) !important;
}

/* Loading overlay */
.theme-dark .rz-data-grid-loading {
    background: rgba(15, 15, 26, 0.8) !important;
}

/* Column filter */
.theme-dark .rz-column-filter {
    background: var(--yw-surface-solid) !important;
    border-color: var(--yw-border) !important;
}

/* Grid footer */
.theme-dark .rz-data-grid-footer,
.theme-dark .rz-grid-footer {
    background: var(--yw-surface) !important;
    border-color: var(--yw-border) !important;
    color: var(--yw-text) !important;
}

/* ============================================
   SIDEBAR - DARK MODE SPECIFIC
   ============================================ */

.theme-dark .rz-sidebar,
.theme-dark .app-sidebar {
    background: var(--yw-sidebar-bg) !important;
}

.theme-dark .rz-panel-menu {
    background: transparent !important;
}

.theme-dark .rz-panel-menu-item,
.theme-dark .rz-panel-menu-item-wrapper {
    color: rgba(255, 255, 255, 0.9) !important;
}

.theme-dark .rz-panel-menu-item-text {
    color: rgba(255, 255, 255, 0.9) !important;
}

.theme-dark .rz-panel-menu-item-icon,
.theme-dark .rz-navigation-item-icon {
    color: rgba(255, 255, 255, 0.7) !important;
}

.theme-dark .rz-panel-menu-item:hover .rz-panel-menu-item-text,
.theme-dark .rz-panel-menu-item:hover .rz-panel-menu-item-icon {
    color: #FFFFFF !important;
}

.theme-dark .rz-panel-menu-item-content {
    background: transparent !important;
}

/* Panel menu expand icon */
.theme-dark .rz-panel-menu-item-icon-children {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* ============================================
   BADGES - DARK MODE FIX
   ============================================ */

/* Light badge - needs dark text on light background OR light text on dark background */
.theme-dark .rz-badge.rz-variant-outlined,
.theme-dark .rz-badge.rz-light,
.theme-dark .rz-badge-light {
    background: rgba(255, 255, 255, 0.15) !important;
    color: var(--yw-text) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* All badges in dark mode should have readable text */
.theme-dark .rz-badge {
    color: white !important;
}

/* Specific badge styles */
.theme-dark .rz-badge.rz-primary,
.theme-dark .rz-badge-primary {
    background: var(--yw-primary) !important;
    color: white !important;
}

.theme-dark .rz-badge.rz-secondary,
.theme-dark .rz-badge-secondary {
    background: var(--yw-secondary) !important;
    color: white !important;
}

.theme-dark .rz-badge.rz-success,
.theme-dark .rz-badge-success {
    background: var(--yw-success) !important;
    color: white !important;
}

.theme-dark .rz-badge.rz-warning,
.theme-dark .rz-badge-warning {
    background: var(--yw-warning) !important;
    color: #1A1A2E !important;
}

.theme-dark .rz-badge.rz-danger,
.theme-dark .rz-badge-danger {
    background: var(--yw-danger) !important;
    color: white !important;
}

.theme-dark .rz-badge.rz-info,
.theme-dark .rz-badge-info {
    background: var(--yw-info) !important;
    color: white !important;
}

/* Fix for badges with BadgeStyle.Light */
.theme-dark [class*="rz-badge"][class*="light"],
.theme-dark .rz-badge[style*="Light"] {
    background: rgba(255, 255, 255, 0.2) !important;
    color: var(--yw-text) !important;
}

/* ============================================
   DARK MODE - DYNAMIC FIXES (via JS in index.html)
   ============================================ */
/* Note: Submenu items, cards, and datalist backgrounds
   are handled dynamically via JavaScript style injection
   in index.html for maximum CSS priority */

/* ============================================
   TOUCH-FIRST RESPONSIVE SYSTEM
   ============================================ */

/* Safe area insets for notched phones (iPhone X+) */
:root {
    --safe-area-top: env(safe-area-inset-top, 0px);
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-left: env(safe-area-inset-left, 0px);
    --safe-area-right: env(safe-area-inset-right, 0px);
}

/* ============================================
   BREAKPOINT: XS - Extra Small Phones (<375px)
   ============================================ */
@media (max-width: 374px) {
    :root {
        --yw-touch-target: 52px;
        --yw-input-height: 56px;
        --yw-button-padding: 14px 16px;
        --yw-border-radius: 10px;
        --yw-border-radius-lg: 14px;
    }

    body {
        font-size: 14px;
    }

    .page-title {
        font-size: 1.25rem !important;
    }

    /* Reduce padding on very small screens */
    .body-content {
        padding: 0.75rem !important;
    }

    /* Stack all buttons vertically */
    .rz-stack[data-orientation="horizontal"] {
        flex-direction: column !important;
    }

    /* Full-width buttons */
    .rz-button {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================
   BREAKPOINT: SM - Small Phones (375px-480px)
   ============================================ */
@media (min-width: 375px) and (max-width: 479px) {
    :root {
        --yw-touch-target: 50px;
        --yw-input-height: 54px;
        --yw-button-padding: 14px 18px;
    }

    .page-title {
        font-size: 1.375rem !important;
    }

    .body-content {
        padding: 1rem !important;
    }
}

/* ============================================
   BREAKPOINT: MD - Large Phones (480px-767px)
   ============================================ */
@media (min-width: 480px) and (max-width: 767px) {
    :root {
        --yw-touch-target: 48px;
        --yw-input-height: 52px;
    }

    .page-title {
        font-size: 1.5rem !important;
    }
}

/* ============================================
   BREAKPOINT: LG - Tablets (768px-1023px)
   ============================================ */
@media (min-width: 768px) and (max-width: 1023px) {
    :root {
        --yw-touch-target: 46px;
        --yw-input-height: 50px;
    }
}

/* ============================================
   BREAKPOINT: XL - Large Tablets & Desktop (1024px+)
   ============================================ */
@media (min-width: 1024px) {
    :root {
        --yw-touch-target: 44px;
        --yw-input-height: 48px;
    }
}

/* ============================================
   TOUCH-FIRST UTILITIES
   ============================================ */

/* Touch target minimum sizes */
.touch-target {
    min-width: var(--yw-touch-target);
    min-height: var(--yw-touch-target);
}

/* Touch-friendly spacing between interactive elements */
.touch-spacing > * + * {
    margin-top: 12px;
}

.touch-spacing-horizontal > * + * {
    margin-left: 12px;
}

/* Prevent text selection on touch UI elements */
.no-select {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* Smooth scrolling for touch */
.touch-scroll {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    overscroll-behavior: contain;
}

/* Hide scrollbars on mobile but keep functionality */
@media (max-width: 767px) {
    .hide-scrollbar {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .hide-scrollbar::-webkit-scrollbar {
        display: none;
    }
}

/* ============================================
   MOBILE-SPECIFIC COMPONENT OVERRIDES
   ============================================ */

/* Larger touch targets for mobile */
@media (max-width: 767px) {
    /* Buttons */
    .rz-button {
        min-height: var(--yw-touch-target);
        padding: var(--yw-button-padding);
        font-size: 1rem;
    }

    .rz-button.rz-button-sm {
        min-height: 40px;
        padding: 10px 16px;
        font-size: 0.875rem;
    }

    /* Icon buttons need minimum size */
    .rz-button.rz-button-icon {
        min-width: var(--yw-touch-target);
        min-height: var(--yw-touch-target);
    }

    /* Form controls */
    .rz-textbox,
    .rz-dropdown,
    .rz-numeric,
    .rz-datepicker,
    .rz-textarea,
    .rz-autocomplete,
    .rz-multiselect {
        min-height: var(--yw-input-height);
        font-size: 16px !important; /* Prevents iOS zoom on focus */
    }

    .rz-textbox input,
    .rz-dropdown input,
    .rz-numeric input,
    .rz-autocomplete input {
        font-size: 16px !important; /* Prevents iOS zoom on focus */
    }

    /* Dropdown items */
    .rz-dropdown-item,
    .rz-autocomplete-item,
    .rz-multiselect-item {
        min-height: var(--yw-touch-target);
        padding: 12px 16px;
    }

    /* Navigation items */
    .rz-navigation-item {
        min-height: var(--yw-touch-target);
        margin: 6px 8px !important;
    }

    /* Panel menu items */
    .rz-panel-menu-item {
        min-height: var(--yw-touch-target);
    }

    /* Checkboxes and radios */
    .rz-checkbox,
    .rz-radio {
        min-height: var(--yw-touch-target);
        padding: 8px 0;
    }

    .rz-checkbox .rz-checkbox-box,
    .rz-radio .rz-radio-circle {
        width: 24px;
        height: 24px;
    }

    /* Switch toggle */
    .rz-switch {
        min-height: var(--yw-touch-target);
    }

    /* Tabs */
    .rz-tabview-nav-link {
        min-height: var(--yw-touch-target);
        padding: 12px 16px;
    }

    /* Pagination */
    .rz-pager-page,
    .rz-pager-element {
        min-width: var(--yw-touch-target);
        min-height: var(--yw-touch-target);
    }

    /* Card touch target */
    .rz-card.clickable {
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .rz-card.clickable:active {
        transform: scale(0.98);
        transition: transform 0.1s ease;
    }
}

/* ============================================
   MOBILE DATA GRID/TABLE IMPROVEMENTS
   ============================================ */

@media (max-width: 767px) {
    /* Make data grid scrollable */
    .rz-datatable-wrapper,
    .rz-data-grid-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Sticky first column */
    .rz-datatable-thead th:first-child,
    .rz-datatable-data td:first-child {
        position: sticky;
        left: 0;
        z-index: 1;
        background: inherit;
    }

    /* Reduce cell padding on mobile */
    .rz-datatable-data td,
    .rz-data-grid-data td {
        padding: 10px 8px;
    }

    /* Action buttons in grid */
    .rz-datatable-data .rz-button,
    .rz-data-grid-data .rz-button {
        min-width: 40px;
        min-height: 40px;
        padding: 8px;
    }
}

/* ============================================
   MOBILE DIALOG IMPROVEMENTS
   ============================================ */

@media (max-width: 767px) {
    /* Full-width dialogs on mobile */
    .rz-dialog {
        width: 95vw !important;
        max-width: 95vw !important;
        max-height: 90vh !important;
        margin: auto;
    }

    .rz-dialog-content {
        max-height: calc(90vh - 120px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Dialog title */
    .rz-dialog-titlebar {
        padding: 16px;
        min-height: var(--yw-touch-target);
    }

    /* Dialog close button */
    .rz-dialog-titlebar-close {
        min-width: var(--yw-touch-target);
        min-height: var(--yw-touch-target);
    }

    /* Stack dialog buttons on mobile */
    .rz-dialog-content .rz-stack[data-orientation="horizontal"]:has(.rz-button) {
        flex-direction: column;
        gap: 8px;
    }

    .rz-dialog-content .rz-stack[data-orientation="horizontal"]:has(.rz-button) .rz-button {
        width: 100%;
    }
}

/* ============================================
   MOBILE HEADER IMPROVEMENTS
   ============================================ */

@media (max-width: 767px) {
    /* Compact header on mobile */
    .app-header .header-content {
        height: 56px;
        padding: 0 8px !important;
    }

    /* Smaller logo on mobile */
    .header-logo {
        height: 28px !important;
    }

    /* Header actions spacing */
    .header-actions {
        gap: 4px !important;
    }

    .header-actions > * {
        min-width: 40px;
        min-height: 40px;
    }
}

/* ============================================
   MOBILE SIDEBAR IMPROVEMENTS
   ============================================ */

@media (max-width: 767px) {
    /* Sidebar overlay */
    .app-sidebar {
        position: fixed !important;
        top: 0;
        left: 0;
        width: 280px !important;
        max-width: 85vw;
        height: 100vh !important;
        z-index: 1000;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        box-shadow: var(--yw-shadow-lg);
    }

    .app-sidebar.rz-sidebar-expanded {
        transform: translateX(0);
    }

    /* Sidebar backdrop */
    .sidebar-backdrop {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 999;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    .sidebar-backdrop.visible {
        opacity: 1;
        visibility: visible;
    }

    /* Safe area padding for sidebar */
    .app-sidebar .rz-panel-menu {
        padding-bottom: calc(16px + var(--safe-area-bottom));
    }
}

/* ============================================
   MOBILE FORM IMPROVEMENTS
   ============================================ */

@media (max-width: 767px) {
    /* Form field labels */
    .rz-form-field label,
    .rz-form-field .rz-form-field-label {
        font-size: 0.9375rem;
        margin-bottom: 8px;
    }

    /* Form field spacing */
    .rz-form-field {
        margin-bottom: 16px;
    }

    /* Form field help text */
    .rz-form-field-helper {
        font-size: 0.8125rem;
        margin-top: 6px;
    }

    /* Stack form buttons */
    form .rz-stack:has(.rz-button) {
        flex-direction: column;
        gap: 12px;
    }

    form .rz-stack:has(.rz-button) .rz-button {
        width: 100%;
        order: 0;
    }

    /* Primary action first on mobile */
    form .rz-stack:has(.rz-button) .rz-button.rz-primary,
    form .rz-stack:has(.rz-button) .rz-button[type="submit"] {
        order: -1;
    }
}

/* ============================================
   TOUCH FEEDBACK & INTERACTIONS
   ============================================ */

/* Disable hover effects on touch devices */
@media (hover: none) and (pointer: coarse) {
    .rz-button:hover {
        transform: none;
        box-shadow: var(--yw-shadow-sm);
    }

    .glass-card:hover {
        transform: none;
    }

    .stat-card:hover {
        transform: none;
    }

    /* Active state for touch */
    .rz-button:active {
        transform: scale(0.97);
        opacity: 0.9;
    }

    .glass-card:active,
    .stat-card:active {
        transform: scale(0.98);
    }
}

/* Tap highlight color */
* {
    -webkit-tap-highlight-color: rgba(var(--yw-primary-rgb), 0.15);
}

/* Prevent pull-to-refresh on overscroll */
html, body {
    overscroll-behavior-y: contain;
}

/* ============================================
   MOBILE EMPTY STATE
   ============================================ */

@media (max-width: 767px) {
    .empty-state {
        padding: 2rem 1rem;
    }

    .empty-state-icon {
        font-size: 3rem;
    }

    .empty-state-text {
        font-size: 1rem;
    }
}

/* ============================================
   BOTTOM SAFE AREA (for floating elements)
   ============================================ */

.bottom-safe-area {
    padding-bottom: calc(16px + var(--safe-area-bottom));
}

.fab-container {
    position: fixed;
    bottom: calc(16px + var(--safe-area-bottom));
    right: 16px;
    z-index: 100;
}

/* Floating action button */
.fab {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--yw-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--yw-shadow-lg);
    cursor: pointer;
    border: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.fab:active {
    transform: scale(0.95);
}

.fab .rz-icon,
.fab .material-icons {
    font-size: 24px;
}

/* ============================================
   LANDSCAPE MODE ADJUSTMENTS
   ============================================ */

@media (max-height: 500px) and (orientation: landscape) {
    /* Reduce header height in landscape */
    .app-header .header-content {
        height: 48px !important;
    }

    .header-logo {
        height: 24px !important;
    }

    /* Reduce dialog height */
    .rz-dialog {
        max-height: 95vh !important;
    }

    .rz-dialog-content {
        max-height: calc(95vh - 100px);
    }

    /* Compact body padding */
    .body-content {
        padding: 8px !important;
    }
}

/* ============================================
   PRINT STYLES (hide mobile-only elements)
   ============================================ */

@media print {
    .fab-container,
    .sidebar-backdrop,
    .app-sidebar {
        display: none !important;
    }
}

/* ============================================
   DARK MODE - DATEPICKER FIXES
   ============================================ */

/* DatePicker wrapper - dark background */
.theme-dark .rz-datepicker {
    background: var(--yw-surface-solid) !important;
    border-color: var(--yw-border) !important;
}

/* DatePicker input wrapper */
.theme-dark .rz-datepicker .rz-inputtext,
.theme-dark .rz-datepicker .rz-helper-hidden-accessible + div {
    background: var(--yw-surface-solid) !important;
}

/* DatePicker input text */
.theme-dark .rz-datepicker input {
    color: var(--yw-text) !important;
    background: transparent !important;
}

/* DatePicker button - dark icon color */
.theme-dark .rz-datepicker .rz-button {
    color: var(--yw-text) !important;
}

/* Calendar popup */
.theme-dark .rz-calendar,
.theme-dark .rz-datepicker-calendar,
.theme-dark .rz-datepicker-popup {
    background: var(--yw-surface-solid) !important;
    border-color: var(--yw-border) !important;
    color: var(--yw-text) !important;
}

/* Calendar header */
.theme-dark .rz-calendar-header {
    background: var(--yw-surface-solid) !important;
    color: var(--yw-text) !important;
}

/* Calendar navigation buttons */
.theme-dark .rz-calendar-header .rz-button {
    color: var(--yw-text) !important;
    background: transparent !important;
}

.theme-dark .rz-calendar-header .rz-button:hover {
    color: var(--yw-primary) !important;
    background: var(--yw-surface-hover) !important;
    transform: none !important;
}

/* Calendar title */
.theme-dark .rz-calendar-title {
    color: var(--yw-text) !important;
}

/* Calendar weekday headers */
.theme-dark .rz-calendar th {
    color: var(--yw-text-secondary) !important;
}

/* Calendar day cells */
.theme-dark .rz-calendar td,
.theme-dark .rz-calendar-cell {
    color: var(--yw-text) !important;
}

.theme-dark .rz-calendar td:hover,
.theme-dark .rz-calendar-cell:hover {
    background: var(--yw-surface-hover) !important;
}

/* Selected date */
.theme-dark .rz-state-selected,
.theme-dark .rz-calendar .rz-state-active {
    background: var(--yw-primary) !important;
    color: white !important;
}

/* Today */
.theme-dark .rz-calendar-today {
    border-color: var(--yw-primary) !important;
}

/* Other month days */
.theme-dark .rz-calendar-other-month {
    color: var(--yw-text-muted) !important;
}

/* ============================================
   RESPONSIVE VIEW UTILITIES
   ============================================ */

/* Desktop view - visible on screens >= 768px */
.yw-desktop-view {
    display: block;
}

/* Mobile view - hidden on screens >= 768px */
.yw-mobile-view {
    display: none;
}

/* Mobile breakpoint: show mobile, hide desktop */
@media (max-width: 767px) {
    .yw-desktop-view {
        display: none !important;
    }

    .yw-mobile-view {
        display: block !important;
    }
}