/* ============================================
   Real Food Rating - Radzen Theme Overrides
   ============================================ */

/* Radzen Primary Color Overrides */
:root {
    --rz-primary: #34D399 !important;
    --rz-primary-rgb: 52, 211, 153 !important;
    --rz-primary-dark: #064F3B !important;
    --rz-primary-light: #34D399 !important;
    --rz-primary-contrast: #ffffff !important;
    
    /* Sidebar colors */
    --rz-sidebar-background-color: #064F3B !important;
    --rz-sidebar-color: #000000 !important;
    
    --rz-secondary: var(--rfr-primary-light) !important;
    --rz-secondary-dark: var(--rfr-primary-light-hover) !important;
    --rz-secondary-light: var(--rfr-primary-light-50) !important;
    --rz-secondary-contrast: var(--rfr-primary-dark) !important;
    
    --rz-success: var(--rfr-primary-light) !important;
    --rz-success-dark: var(--rfr-primary-light-hover) !important;
    --rz-success-light: var(--rfr-primary-light-50) !important;
    --rz-success-contrast: var(--rfr-primary-dark) !important;
}

/* Radzen Button Styles */
.rz-button-primary {
    background-color: var(--rfr-primary-dark) !important;
    border-color: var(--rfr-primary-dark) !important;
    color: #ffffff !important;
}

.rz-button-primary:hover {
    background-color: var(--rfr-primary-dark-hover) !important;
    border-color: var(--rfr-primary-dark-hover) !important;
}

.rz-button-primary:active,
.rz-button-primary:focus {
    background-color: var(--rfr-primary-dark-active) !important;
    border-color: var(--rfr-primary-dark-active) !important;
    box-shadow: 0 0 0 0.2rem rgba(6, 79, 59, 0.25) !important;
}

.rz-button-success {
    background-color: var(--rfr-primary-light) !important;
    border-color: var(--rfr-primary-light) !important;
    color: var(--rfr-primary-dark) !important;
}

.rz-button-success:hover {
    background-color: var(--rfr-primary-light-hover) !important;
    border-color: var(--rfr-primary-light-hover) !important;
}

/* ============================================
   Radzen DataGrid - Modern Theme Styles
   ============================================ */

/* DataGrid Header - Primary dark solid color */
.rz-datagrid-header,
.rz-datagrid .rz-datagrid-header {
    background: #064F3B !important;
    background-color: #064F3B !important;
    background-image: none !important;
    border-bottom: 2px solid var(--rfr-primary-dark) !important;
    border-top: 1px solid rgba(6, 79, 59, 0.1) !important;
    color: #ffffff !important;
}

.rz-datagrid-header th,
.rz-datagrid .rz-datagrid-header th {
    color: #ffffff !important;
    font-weight: 600 !important;
    padding: 0.875rem 1rem !important;
    border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.rz-datagrid-header th:last-child {
    border-right: none !important;
}

/* DataGrid Header Icons - Sort and Filter */
.rz-datagrid-header .rz-sort-icon,
.rz-datagrid-header .rz-filter-icon,
.rz-datagrid-header .rz-column-filter-icon,
.rz-datagrid-header .rz-column-sort-icon {
    color: #ffffff !important;
}

.rz-datagrid-header .rz-sort-icon:hover,
.rz-datagrid-header .rz-filter-icon:hover,
.rz-datagrid-header .rz-column-filter-icon:hover,
.rz-datagrid-header .rz-column-sort-icon:hover {
    color: var(--rfr-primary-light) !important;
}

/* Active Filter Icon */
.rz-datagrid-header .rz-column-filter-icon-active,
.rz-datagrid-header .rz-filter-icon-active {
    color: var(--rfr-primary-light) !important;
}

/* DataGrid Rows */
.rz-datagrid-row {
    transition: background-color 0.2s ease, border-left 0.2s ease !important;
    border-bottom: 1px solid rgba(6, 79, 59, 0.05) !important;
}

/* Row Hover State - Light green background */
.rz-datagrid-row:hover,
.rz-datagrid-row:not(.rz-datagrid-row-selected):hover {
    background-color: rgba(52, 211, 153, 0.08) !important;
    border-left: 3px solid var(--rfr-primary-light) !important;
}

/* Selected Row State - Green accent */
.rz-datagrid-row-selected,
.rz-datagrid-row.rz-datagrid-row-selected {
    background-color: rgba(52, 211, 153, 0.12) !important;
    border-left: 4px solid var(--rfr-primary-dark) !important;
    font-weight: 500 !important;
}

.rz-datagrid-row-selected:hover {
    background-color: rgba(52, 211, 153, 0.15) !important;
}

/* DataGrid Cells */
.rz-datagrid-cell {
    padding: 0.875rem 1rem !important;
    border-right: 1px solid rgba(6, 79, 59, 0.05) !important;
}

.rz-datagrid-cell:last-child {
    border-right: none !important;
}

/* Frozen Column Styling (for Actions column) */
.rz-datagrid-cell.rz-frozen,
.rz-datagrid-header th.rz-frozen {
    background-color: rgba(255, 255, 255, 0.95) !important;
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1) !important;
}

.rz-datagrid-row:hover .rz-datagrid-cell.rz-frozen {
    background-color: rgba(255, 255, 255, 0.98) !important;
}

.rz-datagrid-row-selected .rz-datagrid-cell.rz-frozen {
    background-color: rgba(52, 211, 153, 0.15) !important;
}

/* DataGrid Pagination */
.rz-datagrid-paginator {
    background-color: var(--rfr-gray-50) !important;
    border-top: 2px solid var(--rfr-primary-dark) !important;
    padding: 0.75rem 1rem !important;
}

.rz-datagrid-paginator .rz-paginator-pages .rz-paginator-page.rz-state-active,
.rz-datagrid-paginator .rz-paginator-pages .rz-paginator-page.rz-state-active:hover {
    background-color: var(--rfr-primary-dark) !important;
    color: #ffffff !important;
    border-color: var(--rfr-primary-dark) !important;
}

.rz-datagrid-paginator .rz-paginator-pages .rz-paginator-page:hover {
    background-color: rgba(52, 211, 153, 0.15) !important;
    color: var(--rfr-primary-dark) !important;
    border-color: var(--rfr-primary-light) !important;
}

.rz-datagrid-paginator .rz-paginator-first,
.rz-datagrid-paginator .rz-paginator-prev,
.rz-datagrid-paginator .rz-paginator-next,
.rz-datagrid-paginator .rz-paginator-last {
    color: var(--rfr-primary-dark) !important;
}

.rz-datagrid-paginator .rz-paginator-first:hover,
.rz-datagrid-paginator .rz-paginator-prev:hover,
.rz-datagrid-paginator .rz-paginator-next:hover,
.rz-datagrid-paginator .rz-paginator-last:hover {
    background-color: rgba(52, 211, 153, 0.15) !important;
    color: var(--rfr-primary-dark) !important;
}

/* ============================================
   Radzen Pager (rz-pager) - Modern Theme Styles
   ============================================ */

/* Pager Container */
.rz-pager {
    background-color: var(--rfr-gray-50) !important;
    border-top: 2px solid var(--rfr-primary-dark) !important;
    padding: 0.75rem 1rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.5rem !important;
}

/* Pager Summary Text */
.rz-pager-summary {
    color: var(--rfr-text-secondary-color) !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
}

/* Pager Navigation Buttons (First, Prev, Next, Last) - Circular */
.rz-pager-first,
.rz-pager-prev,
.rz-pager-next,
.rz-pager-last {
    color: var(--rfr-primary-dark) !important;
    background-color: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 50% !important;
    padding: 0 !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
}

.rz-pager-first:hover:not(.rz-state-disabled),
.rz-pager-prev:hover:not(.rz-state-disabled),
.rz-pager-next:hover:not(.rz-state-disabled),
.rz-pager-last:hover:not(.rz-state-disabled) {
    background-color: rgba(52, 211, 153, 0.15) !important;
    color: var(--rfr-primary-dark) !important;
    border-color: var(--rfr-primary-light) !important;
    transform: scale(1.1) !important;
}

.rz-pager-first:active:not(.rz-state-disabled),
.rz-pager-prev:active:not(.rz-state-disabled),
.rz-pager-next:active:not(.rz-state-disabled),
.rz-pager-last:active:not(.rz-state-disabled) {
    background-color: rgba(52, 211, 153, 0.25) !important;
    transform: scale(0.95) !important;
}

/* Disabled Navigation Buttons */
.rz-pager-first.rz-state-disabled,
.rz-pager-prev.rz-state-disabled,
.rz-pager-next.rz-state-disabled,
.rz-pager-last.rz-state-disabled {
    color: var(--rfr-text-tertiary-color) !important;
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

/* Pager Icons */
.rz-pager-icon {
    color: inherit !important;
    font-size: 1rem !important;
}

/* Pager Pages Container */
.rz-pager-pages {
    display: flex !important;
    align-items: center !important;
    gap: 0.25rem !important;
    margin: 0 0.5rem !important;
}

/* Individual Page Number Links - Circular on hover */
.rz-pager-page {
    color: var(--rfr-primary-dark) !important;
    background-color: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 50% !important;
    padding: 0 !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 500 !important;
    font-size: 0.875rem !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
    text-decoration: none !important;
}

.rz-pager-page:hover:not(.rz-state-active):not([aria-current="page"]) {
    background-color: rgba(52, 211, 153, 0.15) !important;
    color: var(--rfr-primary-dark) !important;
    border-color: var(--rfr-primary-light) !important;
    transform: scale(1.1) !important;
}

/* Active Page Number - Circular */
.rz-pager-page.rz-state-active,
.rz-pager-page[aria-current="page"] {
    background: #064F3B !important;
    background-color: #064F3B !important;
    background-image: none !important;
    color: #ffffff !important;
    border-color: var(--rfr-primary-dark) !important;
    font-weight: 600 !important;
    border-radius: 50% !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.rz-pager-page.rz-state-active:hover,
.rz-pager-page[aria-current="page"]:hover {
    background: #064F3B !important;
    background-color: var(--rfr-primary-dark-hover) !important;
    background-image: none !important;
    transform: scale(1.1) !important;
}

/* Pager Element Base Styles */
.rz-pager-element {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    outline: none !important;
}

.rz-pager-element:focus {
    outline: 2px solid var(--rfr-primary-light) !important;
    outline-offset: 2px !important;
}

/* Responsive Pager */
@media (max-width: 768px) {
    .rz-pager {
        flex-wrap: wrap !important;
        justify-content: center !important;
    }
    
    .rz-pager-summary {
        width: 100% !important;
        text-align: center !important;
        margin-bottom: 0.5rem !important;
    }
    
    .rz-pager-pages {
        margin: 0 !important;
    }
}

/* DataGrid Loading Overlay - Dark Theme */
.rz-datagrid-loading-overlay {
    background-color: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(4px) !important;
}

.rz-datagrid-loading-icon,
.rz-datagrid-loading-icon svg,
.rz-datagrid-loading-icon .rz-icon {
    color: #064F3B !important;
    fill: #064F3B !important;
    width: 32px !important;
    height: 32px !important;
}

/* Modern Loading Spinner Animation */
.rz-datagrid-loading-icon {
    animation: loading-spin 0.8s linear infinite !important;
}

@keyframes loading-spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Radzen Progress Bar Circular - Dark Theme */
.rz-progressbar-circular,
.rz-progressbar-circular svg {
    color: #064F3B !important;
}

.rz-progressbar-circular .rz-progressbar-value {
    stroke: #064F3B !important;
}

.rz-progressbar-circular .rz-progressbar-track {
    stroke: rgba(6, 79, 59, 0.2) !important;
}

/* Radzen Progress Bar Linear - Dark Theme */
.rz-progressbar-value {
    background-color: #064F3B !important;
    background-image: none !important;
}

.rz-progressbar-track {
    background-color: rgba(6, 79, 59, 0.1) !important;
}

/* Radzen Loading Spinner - Modern Dark Theme */
.rz-spinner,
.rz-spinner svg,
.rz-spinner .rz-icon {
    color: #064F3B !important;
    fill: #064F3B !important;
    animation: loading-spin 0.8s linear infinite !important;
}

/* Modern Loading Indicators - Dark Theme */
.rz-loading,
.rz-loading-overlay {
    background-color: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(4px) !important;
}

.rz-loading-icon,
.rz-loading-icon svg,
.rz-loading-icon .rz-icon {
    color: #064F3B !important;
    fill: #064F3B !important;
    width: 32px !important;
    height: 32px !important;
    animation: loading-spin 0.8s linear infinite !important;
}

/* DataGrid Filter Panel */
.rz-datagrid-filter-panel {
    background-color: #ffffff !important;
    border: 1px solid var(--rfr-primary-light) !important;
    box-shadow: 0 4px 12px rgba(6, 79, 59, 0.15) !important;
}

.rz-datagrid-filter-panel .rz-button-primary {
    background-color: var(--rfr-primary-dark) !important;
    border-color: var(--rfr-primary-dark) !important;
}

.rz-datagrid-filter-panel .rz-button-primary:hover {
    background-color: var(--rfr-primary-dark-hover) !important;
    border-color: var(--rfr-primary-dark-hover) !important;
}

/* DataGrid Empty State */
.rz-datagrid-empty-message {
    color: var(--rfr-text-secondary-color) !important;
}

/* DataGrid Summary Row */
.rz-datagrid-summary-row {
    background-color: rgba(52, 211, 153, 0.05) !important;
    border-top: 2px solid var(--rfr-primary-dark) !important;
    font-weight: 600 !important;
    color: var(--rfr-primary-dark) !important;
}

/* Radzen Badge Styles */
.rz-badge-primary {
    background-color: var(--rfr-primary-dark) !important;
    color: #ffffff !important;
}

.rz-badge-success {
    background-color: var(--rfr-primary-light) !important;
    color: var(--rfr-primary-dark) !important;
}

/* Radzen Input Focus Styles */
.rz-input:focus,
.rz-textbox:focus,
.rz-dropdown:focus,
.rz-calendar:focus {
    border-color: var(--rfr-primary-dark) !important;
    box-shadow: 0 0 0 0.2rem rgba(6, 79, 59, 0.15) !important;
}

/* Radzen Link Styles */
.rz-link {
    color: var(--rfr-primary-dark) !important;
}

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

/* Radzen Tab Styles */
.rz-tabview-nav li.rz-tabview-selected .rz-tabview-nav-link {
    border-bottom-color: var(--rfr-primary-dark) !important;
    color: var(--rfr-primary-dark) !important;
}

/* Radzen Progress Bar */
.rz-progressbar-value {
    background-color: var(--rfr-primary-light) !important;
}

/* Radzen Checkbox and Radio */
.rz-checkbox-checked .rz-checkbox-box,
.rz-radiobutton-checked .rz-radiobutton-icon {
    background-color: var(--rfr-primary-dark) !important;
    border-color: var(--rfr-primary-dark) !important;
}

/* Radzen Dialog */
.rz-dialog-header {
    background-color: var(--rfr-primary-dark) !important;
    color: #ffffff !important;
}

/* Radzen Notification - General width styling for all notifications */
.rz-notification,
.rz-notification-message {
    min-width: 400px !important;
    max-width: 600px !important;
    width: auto !important;
}

/* Radzen Notification - Success */
.rz-notification-success {
    background-color: var(--rfr-primary-light) !important;
    color: #ffffff !important;
    border-left: 4px solid var(--rfr-primary-dark) !important;
    box-shadow: 0 2px 8px rgba(6, 79, 59, 0.2) !important;
    font-weight: 500 !important;
    min-width: 400px !important;
    max-width: 600px !important;
    width: auto !important;
}

/* All text elements in success notification - bright white with proper font weights */
.rz-notification-success *,
.rz-notification-success .rz-notification-summary,
.rz-notification-success .rz-notification-message-summary,
.rz-notification-success .rz-notification-detail,
.rz-notification-success .rz-notification-message-detail,
.rz-notification-success span,
.rz-notification-success div {
    color: #ffffff !important;
    font-weight: 500 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) !important;
}

/* Summary text - bolder */
.rz-notification-success .rz-notification-summary,
.rz-notification-success .rz-notification-message-summary {
    font-weight: 600 !important;
    font-size: 1rem !important;
}

/* Detail text */
.rz-notification-success .rz-notification-detail,
.rz-notification-success .rz-notification-message-detail {
    font-weight: 500 !important;
    font-size: 0.9rem !important;
}

/* Icon - bright white */
.rz-notification-success .rz-notification-icon,
.rz-notification-success .rz-icon {
    color: #ffffff !important;
    filter: brightness(1.2) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2)) !important;
}


/* Radzen Card Header */
.rz-card-header {
    background-color: var(--rfr-primary-dark) !important;
    color: #ffffff !important;
}

/* ============================================
   Radzen Sidebar - Modern White Theme
   ============================================ */

/* Sidebar Background - White */
.rz-sidebar.modern-sidebar,
.modern-sidebar.rz-sidebar,
.rz-sidebar.rz-sidebar-expanded.rz-sidebar-responsive.rz-sidebar-start.modern-sidebar,
div.rz-sidebar.modern-sidebar {
    background: #ffffff !important;
    background-color: #ffffff !important;
}

/* Override Radzen sidebar CSS variables */
:root {
    --rz-sidebar-background-color: #ffffff !important;
}

.rz-sidebar.modern-sidebar,
.modern-sidebar.rz-sidebar,
.rz-sidebar {
    --rz-sidebar-background-color: #ffffff !important;
    --rz-sidebar-color: #000000 !important;
}

/* Panel Menu */
.rz-sidebar.modern-sidebar .rz-panel-menu,
.modern-sidebar .rz-panel-menu,
.rz-panel-menu.modern-menu {
    background: transparent !important;
    color: #000000 !important;
    --rz-panel-menu-item-active-background-color: transparent !important;
    --rz-panel-menu-item-active-color: white !important;
    --rz-panel-menu-item-color: #000000 !important;
}

/* Active State - Match Radzen's specificity (0,2,0) */
.rz-panel-menu .rz-navigation-item-active,
.rz-panel-menu .rz-navigation-item-wrapper-active,
.modern-sidebar .rz-panel-menu .rz-navigation-item-active,
.modern-sidebar .rz-panel-menu .rz-navigation-item-wrapper-active {
    --rz-panel-menu-item-active-background-color: transparent !important;
    --rz-panel-menu-item-active-color: white !important;
    background: rgba(255, 255, 255, 0.15) !important;
    background-color: rgba(255, 255, 255, 0.15) !important;
    background-image: none !important;
    color: white !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
    border-left: 3px solid #34D399 !important;
}

.rz-panel-menu .rz-navigation-item-active .rz-navigation-item-link,
.rz-panel-menu .rz-navigation-item-wrapper-active .rz-navigation-item-link,
.modern-sidebar .rz-panel-menu .rz-navigation-item-active .rz-navigation-item-link,
.modern-sidebar .rz-panel-menu .rz-navigation-item-wrapper-active .rz-navigation-item-link {
    color: white !important;
    font-weight: 600 !important;
    /* background: transparent !important; */
    background-image: none !important;
    background: #34D399 !important;
}

.rz-panel-menu .rz-navigation-item-active .rz-navigation-item-icon,
.rz-panel-menu .rz-navigation-item-wrapper-active .rz-navigation-item-icon,
.modern-sidebar .rz-panel-menu .rz-navigation-item-active .rz-navigation-item-icon,
.modern-sidebar .rz-panel-menu .rz-navigation-item-wrapper-active .rz-navigation-item-icon {
    color: white !important;
}

.rz-panel-menu .rz-navigation-item-active .rz-navigation-item-text,
.rz-panel-menu .rz-navigation-item-wrapper-active .rz-navigation-item-text,
.modern-sidebar .rz-panel-menu .rz-navigation-item-active .rz-navigation-item-text,
.modern-sidebar .rz-panel-menu .rz-navigation-item-wrapper-active .rz-navigation-item-text {
    color: white !important;
}

/* Hover State - Match Radzen's specificity */
.rz-panel-menu .rz-navigation-item-wrapper:not(.rz-navigation-item-wrapper-active):not(.rz-navigation-item-active):hover,
.modern-sidebar .rz-panel-menu .rz-navigation-item-wrapper:not(.rz-navigation-item-wrapper-active):not(.rz-navigation-item-active):hover {
    background: rgba(52, 211, 153, 0.15) !important;
    background-color: rgba(52, 211, 153, 0.15) !important;
    background-image: none !important;
    transform: translateX(4px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.rz-panel-menu .rz-navigation-item-wrapper:not(.rz-navigation-item-wrapper-active):not(.rz-navigation-item-active):hover .rz-navigation-item-link,
.modern-sidebar .rz-panel-menu .rz-navigation-item-wrapper:not(.rz-navigation-item-wrapper-active):not(.rz-navigation-item-active):hover .rz-navigation-item-link {
    color: #34D399 !important;
    background: transparent !important;
    background-image: none !important;
    transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.rz-panel-menu .rz-navigation-item-wrapper:not(.rz-navigation-item-wrapper-active):not(.rz-navigation-item-active):hover .rz-navigation-item-icon,
.modern-sidebar .rz-panel-menu .rz-navigation-item-wrapper:not(.rz-navigation-item-wrapper-active):not(.rz-navigation-item-active):hover .rz-navigation-item-icon {
    color: #34D399 !important;
    transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.rz-panel-menu .rz-navigation-item-wrapper:not(.rz-navigation-item-wrapper-active):not(.rz-navigation-item-active):hover .rz-navigation-item-text,
.modern-sidebar .rz-panel-menu .rz-navigation-item-wrapper:not(.rz-navigation-item-wrapper-active):not(.rz-navigation-item-active):hover .rz-navigation-item-text {
    color: #34D399 !important;
    transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Radzen Header - Primary dark solid color */
.rz-header.modern-header,
.modern-header.rz-header,
.rz-header {
    background: #064F3B !important;
    background-color: #064F3B !important;
    background-image: none !important;
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--rfr-gray-100);
}

::-webkit-scrollbar-thumb {
    background: var(--rfr-primary-dark);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--rfr-primary-dark-hover);
}