/*
 * SkoolTool - Shared Component Styles
 * Production-ready styles with Light/Dark theme support
 * All colors use CSS variables for theme compatibility
 */

/* ==========================================================================
   Dashboard Cards - Reusable across all dashboard pages
   ========================================================================== */

.dashboard-card {
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    padding: 2rem;
    animation: fadeInUp 0.6s ease-out;
    background: var(--rz-panel-background-color);
}

.dashboard-heading {
    font-weight: 700;
    margin-bottom: 1.5rem;
    font-size: 2.5rem;
    color: var(--rz-text-color);
}

/* ==========================================================================
   Modern Grid Styling - Shared data grid styles
   ========================================================================== */

.modern-grid {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.modern-grid .rz-grid-table {
    border-collapse: separate;
    border-spacing: 0;
}

.modern-grid .rz-grid-table thead {
    background: linear-gradient(135deg, var(--rz-primary) 0%, var(--rz-primary-dark) 100%);
}

.modern-grid .rz-grid-table thead th {
    color: white !important;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    padding: 1.25rem 1rem !important;
    border: none !important;
}

.modern-grid .rz-grid-table tbody tr {
    transition: all 0.3s ease;
    border-bottom: 1px solid var(--rz-base-300);
}

.modern-grid .rz-grid-table tbody tr:hover {
    background: var(--rz-base-200);
    box-shadow: inset 4px 0 0 var(--rz-primary), 0 4px 12px rgba(0, 0, 0, 0.08);
}

.modern-grid .rz-grid-table tbody tr:nth-child(even) {
    background-color: var(--rz-base-100);
}

.modern-grid .rz-grid-table tbody tr:nth-child(even):hover {
    background: var(--rz-base-200);
}

.modern-grid .rz-grid-table tbody td {
    padding: 1.25rem 1rem !important;
    border: none !important;
    vertical-align: middle;
}

.modern-grid .rz-paginator {
    background: transparent;
    border-top: 2px solid var(--rz-base-300);
    padding: 1.5rem 1rem;
    margin-top: 1rem;
}

/* ==========================================================================
   Button Styles - Theme-compatible button enhancements
   ========================================================================== */

.add-btn {
    transition: all 0.3s ease;
    background: linear-gradient(135deg, var(--rz-primary) 0%, var(--rz-primary-dark) 100%) !important;
    border: none !important;
    color: white !important;
}

.add-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(var(--rz-primary-rgb), 0.4) !important;
}

/* ==========================================================================
   Action Icons - Consistent icon styling
   ========================================================================== */

.delete-icon {
    color: var(--rz-danger);
    transition: all 0.3s ease;
    cursor: pointer;
}

.delete-icon:hover {
    color: var(--rz-danger-dark);
    transform: scale(1.2);
}

.edit-icon {
    color: var(--rz-primary);
    transition: all 0.3s ease;
    cursor: pointer;
}

.edit-icon:hover {
    color: var(--rz-primary-dark);
    transform: scale(1.2);
}

.action-icon {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.action-icon:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.action-icon-edit {
    background: var(--rz-primary-lighter);
    color: var(--rz-primary);
}

.action-icon-delete {
    background: var(--rz-danger-lighter);
    color: var(--rz-danger);
}

/* ==========================================================================
   Card Icon Wrappers - For dashboard cards
   ========================================================================== */

.card-icon-wrapper {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.card-icon-success {
    background: linear-gradient(135deg, var(--rz-success) 0%, var(--rz-success-dark) 100%);
}

.card-icon-warning {
    background: linear-gradient(135deg, var(--rz-warning) 0%, var(--rz-warning-dark) 100%);
}

.card-icon-primary {
    background: linear-gradient(135deg, var(--rz-primary) 0%, var(--rz-primary-dark) 100%);
}

.card-icon-danger {
    background: linear-gradient(135deg, var(--rz-danger) 0%, var(--rz-danger-dark) 100%);
}

.card-icon-info {
    background: linear-gradient(135deg, var(--rz-info) 0%, var(--rz-info-dark) 100%);
}

/* ==========================================================================
   Avatar Styles - Student/Staff avatars
   ========================================================================== */

.avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--rz-primary) 0%, var(--rz-primary-dark) 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.125rem;
}

.avatar-sm {
    width: 32px;
    height: 32px;
    font-size: 0.875rem;
}

.avatar-lg {
    width: 64px;
    height: 64px;
    font-size: 1.5rem;
}

/* ==========================================================================
   Notification Cards - Theme compatible
   ========================================================================== */

.notification-card {
    border-radius: 12px;
    padding: 1.5rem;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    background: var(--rz-panel-background-color);
}

.notification-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

.notification-card-success {
    border-color: var(--rz-success-lighter);
}

.notification-card-warning {
    border-color: var(--rz-warning-lighter);
}

.notification-card-primary {
    border-color: var(--rz-primary-lighter);
}

.notification-card-danger {
    border-color: var(--rz-danger-lighter);
}

.notification-card-info {
    border-color: var(--rz-info-lighter);
}

.notification-card-base {
    border-color: var(--rz-base-400);
}

.notification-card-secondary {
    border-color: var(--rz-secondary-lighter);
}

/* ==========================================================================
   Badges - Consistent badge styling
   ========================================================================== */

.badge-count {
    font-size: 1rem;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-weight: 600;
}

.pulse-badge {
    animation: pulse 2s infinite;
}

/* ==========================================================================
   Summary Cards - For statistics and summaries
   ========================================================================== */

.summary-card {
    background: var(--rz-panel-background-color);
    border: 1px solid var(--rz-panel-border-color);
    border-radius: 8px;
    padding: 1rem 1.5rem;
}

.summary-item {
    padding: 1rem;
    background: var(--rz-base-background-color);
    border: 1px solid var(--rz-base-300);
    border-radius: 8px;
    color: var(--rz-text-color);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.summary-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-color: var(--rz-primary);
}

/* ==========================================================================
   Meal & Food Program Styles
   ========================================================================== */

.meal-time-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    background: var(--rz-primary-lighter);
    color: var(--rz-primary-darker);
    font-weight: 500;
    transition: all 0.3s ease;
}

.meal-time-badge:hover {
    background: var(--rz-primary-light);
    transform: translateY(-2px);
}

.meal-content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 500;
    color: var(--rz-text-color);
}

/* ==========================================================================
   Tables - Theme compatible table styles (replaces TableStyle.css hardcoded colors)
   ========================================================================== */

.menu-table {
    border-collapse: collapse;
}

.menu-table,
.menu-table th,
.menu-table td {
    border: 1px solid var(--rz-base-400);
}

.food-program-table {
    border-collapse: collapse;
}

.food-program-table th {
    padding: 5px;
    border: 0.5px solid var(--rz-base-400);
    background: var(--rz-base-200);
    color: var(--rz-text-color);
}

.food-program-table td,
.food-program-table th {
    padding: 2px;
    border: 0.5px solid var(--rz-base-400);
}

/* ==========================================================================
   Sidebar Menu Item Styling
   ========================================================================== */

.sidebar-menu-item-indent {
    margin-left: 1.5rem;
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */

.hide-control {
    visibility: collapse !important;
    display: none !important;
}

.center-content {
    margin: auto;
    height: auto;
    width: 80%;
    border: none;
    padding: 0px;
}

.dashboard-container {
    margin: auto;
    height: auto;
    width: 98%;
    border: none;
    padding: 0px;
}

.divider {
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--rz-text-disabled-color) 50%, transparent 100%);
}

/* ==========================================================================
   Grid Layouts
   ========================================================================== */

.notification-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    padding: 1rem;
}

.main-content-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.action-buttons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 0.75rem;
}

.account-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

/* ==========================================================================
   Responsive Breakpoints
   ========================================================================== */

@media (max-width: 768px) {
    .notification-grid {
        grid-template-columns: 1fr;
    }

    .main-content-grid {
        grid-template-columns: 1fr;
    }

    .action-buttons-grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    }

    .account-summary-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Animations
   ========================================================================== */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.05);
    }
}

/* ==========================================================================
   Loading States
   ========================================================================== */

.spinner {
    border: 16px solid var(--rz-base-300);
    border-top: 16px solid var(--rz-primary);
    border-radius: 50%;
    width: 80px;
    height: 80px;
    animation: spin 700ms linear infinite;
    top: 40%;
    left: 55%;
    position: absolute;
}

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

/* ==========================================================================
   Alert Styles - For alerts grid
   ========================================================================== */

.alerts-grid {
    --grid-header-bg: linear-gradient(135deg, var(--rz-base-100) 0%, var(--rz-base-200) 100%);
    --row-hover-bg: var(--rz-base-50);
}

.alerts-grid .rz-datatable-data tr:hover {
    background: var(--row-hover-bg);
    transition: all 0.2s ease;
    box-shadow: inset 4px 0 0 var(--rz-primary), 0 2px 8px rgba(0, 0, 0, 0.08);
}

.alerts-grid .rz-datatable-data td {
    padding: 1rem 0.75rem !important;
    vertical-align: middle !important;
}

.alert-name-cell {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.alert-avatar {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--rz-primary-lighter) 0%, var(--rz-primary-light) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--rz-primary-dark);
    font-weight: 600;
    font-size: 0.875rem;
    flex-shrink: 0;
}

.alert-date-badge {
    padding: 0.375rem 0.75rem;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.875rem;
    display: inline-block;
}

.alert-date-overdue {
    background: linear-gradient(135deg, var(--rz-danger) 0%, var(--rz-danger-dark) 100%);
    color: white;
    box-shadow: 0 2px 4px rgba(220, 53, 69, 0.3);
    font-weight: 600;
}

.alert-date-upcoming {
    background: var(--rz-base-100);
    color: var(--rz-text-color);
}

/* ==========================================================================
   Light / Lighter Radzen badge readability (WCAG / Section 508 compliant)
   ----------------------------------------------------------------------------
   Radzen renders Shade.Lighter badges as `.rz-badge-{style}.rz-shade-lighter`,
   which paints `--rz-{style}-lighter` as the background. In dark Radzen themes
   that token resolves to a *dark* tinted color, producing unreadable badges
   like the "Reminder" pill on /teacher-portal-admin. The BadgeStyle.Light
   variant has the inverse problem in dark mode: a near-white surface with the
   theme text color flipped to light.

   Pin a stable, theme-agnostic, high-contrast palette on every "Light" or
   "Lighter" badge across the app. #1f2937 on #e5e7eb measures ~14:1 contrast
   (WCAG AAA, well above the 4.5:1 minimum required for Section 508), and is
   readable on every Radzen theme regardless of dark-mode detection timing.
   ========================================================================== */
.rz-badge.rz-badge-light,
.rz-badge.rz-shade-lighter,
.rz-badge-primary.rz-shade-lighter,
.rz-badge-secondary.rz-shade-lighter,
.rz-badge-info.rz-shade-lighter,
.rz-badge-success.rz-shade-lighter,
.rz-badge-warning.rz-shade-lighter,
.rz-badge-danger.rz-shade-lighter,
.rz-badge-error.rz-shade-lighter {
    background-color: #e5e7eb !important;
    background-image: none !important;
    border-color: #d1d5db !important;
}

.rz-badge.rz-badge-light,
.rz-badge.rz-shade-lighter,
.rz-badge-primary.rz-shade-lighter,
.rz-badge-secondary.rz-shade-lighter,
.rz-badge-info.rz-shade-lighter,
.rz-badge-success.rz-shade-lighter,
.rz-badge-warning.rz-shade-lighter,
.rz-badge-danger.rz-shade-lighter,
.rz-badge-error.rz-shade-lighter,
.rz-badge.rz-badge-light *,
.rz-badge.rz-shade-lighter *,
.rz-badge-primary.rz-shade-lighter *,
.rz-badge-secondary.rz-shade-lighter *,
.rz-badge-info.rz-shade-lighter *,
.rz-badge-success.rz-shade-lighter *,
.rz-badge-warning.rz-shade-lighter *,
.rz-badge-danger.rz-shade-lighter *,
.rz-badge-error.rz-shade-lighter * {
    color: #1f2937 !important;
    -webkit-text-fill-color: #1f2937 !important;
}

/* Same treatment for RadzenAlert with Shade.Lighter so banner text stays
   readable on the lighter alert backgrounds in dark mode. */
.rz-alert.rz-shade-lighter {
    background-color: #f3f4f6 !important;
    background-image: none !important;
    border-color: #d1d5db !important;
}

.rz-alert.rz-shade-lighter,
.rz-alert.rz-shade-lighter * {
    color: #1f2937 !important;
    -webkit-text-fill-color: #1f2937 !important;
}

/* ==========================================================================
   Outlined RadzenAlert readability in dark mode
   ----------------------------------------------------------------------------
   Variant.Outlined alerts paint their text and icon with the alert-style
   color token (e.g. var(--rz-info), var(--rz-success)). In Radzen dark
   themes those tokens resolve to dark hues intended for *light* backgrounds,
   so the message text and icon become nearly invisible against the dark
   panel surface.

   Force outlined alert text/icons to the theme text color in dark mode so
   they stay legible. Light mode is left untouched (the dark hue on a white
   background already meets contrast requirements).
   ========================================================================== */
body[data-theme="dark"] .rz-alert.rz-variant-outlined,
body[data-theme="dark"] .rz-alert.rz-variant-outlined *,
body[data-theme="dark"] .rz-alert.rz-variant-text,
body[data-theme="dark"] .rz-alert.rz-variant-text * {
    color: var(--rz-text-color) !important;
    -webkit-text-fill-color: var(--rz-text-color) !important;
}

body[data-theme="dark"] .rz-alert.rz-variant-outlined .rzi,
body[data-theme="dark"] .rz-alert.rz-variant-outlined .notranslate,
body[data-theme="dark"] .rz-alert.rz-variant-text .rzi,
body[data-theme="dark"] .rz-alert.rz-variant-text .notranslate {
    color: var(--rz-text-color) !important;
}

/* Date "upcoming" pill on the dashboard alerts grid.
   Pin a light background and dark text so it stays readable in both
   light and dark themes (the Radzen --rz-base-100 token flips to a
   dark color in dark mode, which would otherwise make text invisible). */
.alert-date-upcoming {
    background: #e5e7eb !important;
    background-image: none !important;
}

.alert-date-upcoming,
.alert-date-upcoming * {
    color: #1f2937 !important;
}

.alert-status-text {
    font-weight: 500;
    color: var(--rz-text-color);
    line-height: 1.5;
}

.reload-header {
    background: var(--rz-base-100);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    transition: all 0.2s ease;
}

.reload-header:hover {
    background: var(--rz-primary-lighter);
    transform: translateX(4px);
}

.modern-alert-badge {
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.875rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.alert-action-btn {
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
}

.alert-action-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* ==========================================================================
   Loading Indicator - Modern reusable loading component
   ========================================================================== */

.loading-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease-out;
}

.loading-indicator-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.loading-indicator-rings {
    position: relative;
    width: 80px;
    height: 80px;
}

.loading-ring {
    position: absolute;
    border-radius: 50%;
    border: 3px solid transparent;
}

.loading-ring-outer {
    inset: 0;
    border-top-color: var(--rz-primary);
    border-right-color: var(--rz-primary-lighter);
    animation: loadingSpinOuter 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

.loading-ring-inner {
    inset: 10px;
    border-bottom-color: var(--rz-secondary, var(--rz-primary-dark));
    border-left-color: var(--rz-secondary-lighter, var(--rz-primary-lighter));
    animation: loadingSpinInner 0.9s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

.loading-indicator-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: loadingPulse 2s ease-in-out infinite;
}

.loading-indicator-text {
    display: flex;
    align-items: baseline;
    gap: 0.2rem;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--rz-text-secondary-color);
    letter-spacing: 0.3px;
}

.loading-dots {
    display: inline-flex;
    gap: 0.15rem;
    margin-left: 0.1rem;
}

.loading-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--rz-text-secondary-color);
    animation: loadingBounce 1.4s ease-in-out infinite;
}

.loading-dot:nth-child(1) { animation-delay: 0s; }
.loading-dot:nth-child(2) { animation-delay: 0.2s; }
.loading-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes loadingSpinOuter {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

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

@keyframes loadingPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(0.85); opacity: 0.6; }
}

@keyframes loadingBounce {
    0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
    40% { transform: translateY(-5px); opacity: 1; }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Loading Overlay - For pages that use positioned overlays */

.loading-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Use the panel color but keep the overlay translucent so the page content
       remains visible underneath while a load is in progress. A fully opaque
       overlay can make a page look "stuck" if the underlying load is slow. */
    background: var(--rz-panel-background-color, rgba(255, 255, 255, 0.6));
    opacity: 0.7;
    z-index: 1000;
    border-radius: inherit;
    backdrop-filter: blur(2px);
    pointer-events: none;
}


/* ==========================================================================
   Dark Mode Safety Net
   ----------------------------------------------------------------------------
   Catches inline styles or stale rules that hardcode light backgrounds and
   would otherwise leave text unreadable in dark mode. Apply only when the
   user has selected a dark Radzen theme (body[data-theme*="dark"]).
   The selector covers Radzen's standard dark themes: dark, material-dark,
   software-dark, humanistic-dark, standard-dark.
   ========================================================================== */

/* QR code containers MUST stay white (QR readers need white background).
   Anything explicitly tagged .qr-keep-white is preserved. */
body[data-theme*="dark"] [style*="background: white"]:not(.qr-keep-white):not([id^="qr-"]):not([id*="qrcode"]):not([id*="qr-code"]),
body[data-theme*="dark"] [style*="background:#fff"]:not(.qr-keep-white):not([id^="qr-"]):not([id*="qrcode"]):not([id*="qr-code"]),
body[data-theme*="dark"] [style*="background: #fff"]:not(.qr-keep-white):not([id^="qr-"]):not([id*="qrcode"]):not([id*="qr-code"]),
body[data-theme*="dark"] [style*="background:#FFF"]:not(.qr-keep-white):not([id^="qr-"]):not([id*="qrcode"]):not([id*="qr-code"]),
body[data-theme*="dark"] [style*="background:#ffffff"]:not(.qr-keep-white):not([id^="qr-"]):not([id*="qrcode"]):not([id*="qr-code"]),
body[data-theme*="dark"] [style*="background-color: white"]:not(.qr-keep-white):not([id^="qr-"]):not([id*="qrcode"]):not([id*="qr-code"]),
body[data-theme*="dark"] [style*="background-color:#fff"]:not(.qr-keep-white):not([id^="qr-"]):not([id*="qrcode"]):not([id*="qr-code"]),
body[data-theme*="dark"] [style*="background-color: #fff"]:not(.qr-keep-white):not([id^="qr-"]):not([id*="qrcode"]):not([id*="qr-code"]),
body[data-theme*="dark"] [style*="background:#f8f9fa"],
body[data-theme*="dark"] [style*="background: #f8f9fa"],
body[data-theme*="dark"] [style*="background-color:#f8f9fa"],
body[data-theme*="dark"] [style*="background-color: #f8f9fa"],
body[data-theme*="dark"] [style*="background:#fafafa"],
body[data-theme*="dark"] [style*="background: #fafafa"],
body[data-theme*="dark"] [style*="background:#f5f5f5"],
body[data-theme*="dark"] [style*="background: #f5f5f5"] {
    background: var(--rz-panel-background-color) !important;
    color: var(--rz-text-color) !important;
    border-color: var(--rz-base-300) !important;
}

/* Ensure any text inside a region that hardcoded a light background stays readable. */
body[data-theme*="dark"] [style*="background: white"]:not(.qr-keep-white):not([id^="qr-"]) *:not(.rz-icon):not([style*="color:"]),
body[data-theme*="dark"] [style*="background:#fff"]:not(.qr-keep-white):not([id^="qr-"]) *:not(.rz-icon):not([style*="color:"]),
body[data-theme*="dark"] [style*="background: #fff"]:not(.qr-keep-white):not([id^="qr-"]) *:not(.rz-icon):not([style*="color:"]),
body[data-theme*="dark"] [style*="background-color: white"]:not(.qr-keep-white):not([id^="qr-"]) *:not(.rz-icon):not([style*="color:"]) {
    color: var(--rz-text-color) !important;
}

/* Hardcoded color: black / color: #000 inputs and inline labels become readable.
   Print/PDF generators use a different code path (server-side HTML strings) so
   this CSS doesn't affect those exports. */
body[data-theme*="dark"] [style*="color: black"]:not([id*="print"]),
body[data-theme*="dark"] [style*="color:#000"]:not([id*="print"]),
body[data-theme*="dark"] [style*="color: #000"]:not([id*="print"]) {
    color: var(--rz-text-color) !important;
}

/* ==========================================================================
   Light / Lighter badges and alerts: handled in the theme-agnostic block
   earlier in this file (search for "WCAG / Section 508 compliant"). Pinning
   the palette globally avoids depending on the dark-mode detector.
   ========================================================================== */

/* Inline light-background badges (e.g. style="background:#f...") still need
   their text flipped so they remain readable in dark mode. */
body[data-theme*="dark"] .rz-badge[style*="background:#f"],
body[data-theme*="dark"] .rz-badge[style*="background: #f"] {
    color: #1f2937 !important;
}

/* Cards/panels relying on var(--rz-base-100) stay legible: that var is already
   theme-aware in Radzen, so no override needed. This block exists to document
   that explicit decision. */


/* ==========================================================================
   Reusable info card — theme-aware in both light and dark mode.
   Replaces inline `background:#fff;border:1px solid #e9ecef` patterns.
   ========================================================================== */
.st-info-card {
    background: var(--rz-panel-background-color, #fff);
    color: var(--rz-text-color);
    border: 1px solid var(--rz-base-300, #e9ecef);
    border-radius: 12px;
    padding: 1.25rem;
    height: 100%;
}

.st-info-card-lg {
    padding: 1.5rem;
}

/* ==========================================================================
   Prevent Radzen DataGrid horizontal scrollbar caused by row hover transforms.
   Row hover effects (translateX/scale) can push a row past the grid's right
   edge, triggering the inner scrollbar. Clipping the data viewport keeps any
   such transforms from producing a hover-induced horizontal scrollbar.
   ========================================================================== */
.rz-data-grid .rz-data-grid-data,
.rz-datatable .rz-datatable-data {
    overflow-x: hidden;
}

/* ==========================================================================
   Dark Mode Safety Net ? Extended Palette
   ----------------------------------------------------------------------------
   Catches additional inline light backgrounds in use across the solution
   (Tailwind-style hex tokens, soft pastel surfaces, light gray panels) so
   text remains readable when a dark Radzen theme is active. Combined with
   the earlier safety-net block, this neutralizes virtually every hardcoded
   light surface without touching individual components.
   ========================================================================== */
body[data-theme*="dark"] [style*="background:#f0f0f0"],
body[data-theme*="dark"] [style*="background: #f0f0f0"],
body[data-theme*="dark"] [style*="background-color:#f0f0f0"],
body[data-theme*="dark"] [style*="background-color: #f0f0f0"],
body[data-theme*="dark"] [style*="background:#f3f4f6"],
body[data-theme*="dark"] [style*="background: #f3f4f6"],
body[data-theme*="dark"] [style*="background-color:#f3f4f6"],
body[data-theme*="dark"] [style*="background-color: #f3f4f6"],
body[data-theme*="dark"] [style*="background:#f9fafb"],
body[data-theme*="dark"] [style*="background: #f9fafb"],
body[data-theme*="dark"] [style*="background-color:#f9fafb"],
body[data-theme*="dark"] [style*="background-color: #f9fafb"],
body[data-theme*="dark"] [style*="background:#fffbeb"],
body[data-theme*="dark"] [style*="background: #fffbeb"],
body[data-theme*="dark"] [style*="background:#fef2f2"],
body[data-theme*="dark"] [style*="background: #fef2f2"],
body[data-theme*="dark"] [style*="background:#f0fdf4"],
body[data-theme*="dark"] [style*="background: #f0fdf4"],
body[data-theme*="dark"] [style*="background:#f5f3ff"],
body[data-theme*="dark"] [style*="background: #f5f3ff"],
body[data-theme*="dark"] [style*="background:#fefce8"],
body[data-theme*="dark"] [style*="background: #fefce8"],
body[data-theme*="dark"] [style*="background:#e9ecef"],
body[data-theme*="dark"] [style*="background: #e9ecef"],
body[data-theme*="dark"] [style*="background-color:#e9ecef"],
body[data-theme*="dark"] [style*="background-color: #e9ecef"] {
    background: var(--rz-panel-background-color) !important;
    color: var(--rz-text-color) !important;
    border-color: var(--rz-base-300) !important;
}

/* Ensure descendants of those soft-color panels also adopt readable text. */
body[data-theme*="dark"] [style*="background:#f0f0f0"] *:not(.rz-icon):not([style*="color:"]),
body[data-theme*="dark"] [style*="background: #f0f0f0"] *:not(.rz-icon):not([style*="color:"]),
body[data-theme*="dark"] [style*="background:#f3f4f6"] *:not(.rz-icon):not([style*="color:"]),
body[data-theme*="dark"] [style*="background: #f3f4f6"] *:not(.rz-icon):not([style*="color:"]),
body[data-theme*="dark"] [style*="background:#fffbeb"] *:not(.rz-icon):not([style*="color:"]),
body[data-theme*="dark"] [style*="background: #fffbeb"] *:not(.rz-icon):not([style*="color:"]),
body[data-theme*="dark"] [style*="background:#fef2f2"] *:not(.rz-icon):not([style*="color:"]),
body[data-theme*="dark"] [style*="background: #fef2f2"] *:not(.rz-icon):not([style*="color:"]),
body[data-theme*="dark"] [style*="background:#f0fdf4"] *:not(.rz-icon):not([style*="color:"]),
body[data-theme*="dark"] [style*="background: #f0fdf4"] *:not(.rz-icon):not([style*="color:"]),
body[data-theme*="dark"] [style*="background:#f5f3ff"] *:not(.rz-icon):not([style*="color:"]),
body[data-theme*="dark"] [style*="background: #f5f3ff"] *:not(.rz-icon):not([style*="color:"]),
body[data-theme*="dark"] [style*="background:#fefce8"] *:not(.rz-icon):not([style*="color:"]),
body[data-theme*="dark"] [style*="background: #fefce8"] *:not(.rz-icon):not([style*="color:"]) {
    color: var(--rz-text-color) !important;
}

/* ==========================================================================
   Brighter, higher-contrast badges in grids (both themes)
   ----------------------------------------------------------------------------
   Radzen's BadgeStyle.Light renders as a near-white pill that disappears
   against a light row hover and reads light-on-light in dark mode. Promote
   it to a high-contrast neutral chip in light mode and to a vivid, bright
   chip in dark mode so text inside the grid is always legible.
   ========================================================================== */
.rz-data-grid .rz-badge.rz-badge-light,
.rz-datatable .rz-badge.rz-badge-light {
    background: var(--rz-base-700, #4b5563) !important;
    color: #ffffff !important;
    /* The earlier theme-agnostic rule pins -webkit-text-fill-color: #1f2937
       !important on .rz-badge.rz-badge-light, which in WebKit/Blink wins over
       `color`. Override it here so grid badges show white text on the dark
       pill in light mode (Age column on /students-dashboard, Draft status on
       /manage-invoices, etc.). */
    -webkit-text-fill-color: #ffffff !important;
    border: 1px solid var(--rz-base-800, #374151) !important;
}

/* Radzen renders the badge text in an inner <span>; the broad theme-agnostic
   rule earlier in this file pins descendant text to #1f2937 with !important,
   which previously fought against the grid's dark-pill / white-text intent in
   light mode (dark text on dark gray = unreadable - e.g. the Age badge on
   /students-dashboard and the Draft status badge on /manage-invoices). Flip
   descendant text white inside grids so the pinned palette stays readable. */
.rz-data-grid .rz-badge.rz-badge-light *,
.rz-datatable .rz-badge.rz-badge-light * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

body[data-theme*="dark"] .rz-badge.rz-badge-light,
body[data-theme*="dark"] .rz-data-grid .rz-badge.rz-badge-light,
body[data-theme*="dark"] .rz-datatable .rz-badge.rz-badge-light {
    background: var(--rz-base-200, #e5e7eb) !important;
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    border: 1px solid var(--rz-base-300, #d1d5db) !important;
}

/* In dark mode the grid pill flips to a light surface, so descendant text
   needs the dark color (the broad theme-agnostic rule already pins #1f2937
   on descendants, but make the intent explicit for grid context). */
body[data-theme*="dark"] .rz-data-grid .rz-badge.rz-badge-light *,
body[data-theme*="dark"] .rz-datatable .rz-badge.rz-badge-light * {
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
}

/* Brighten the standard semantic badges inside grids so they pop against
   dark-themed rows. These rules use the saturated Radzen tokens (no -light
   variants) and force white text for readable contrast. */
body[data-theme*="dark"] .rz-data-grid .rz-badge.rz-badge-info,
body[data-theme*="dark"] .rz-datatable .rz-badge.rz-badge-info {
    background: var(--rz-info, #3b82f6) !important;
    color: #ffffff !important;
}

body[data-theme*="dark"] .rz-data-grid .rz-badge.rz-badge-success,
body[data-theme*="dark"] .rz-datatable .rz-badge.rz-badge-success {
    background: var(--rz-success, #22c55e) !important;
    color: #ffffff !important;
}

body[data-theme*="dark"] .rz-data-grid .rz-badge.rz-badge-warning,
body[data-theme*="dark"] .rz-datatable .rz-badge.rz-badge-warning {
    background: var(--rz-warning, #f59e0b) !important;
    color: #111827 !important;
}

body[data-theme*="dark"] .rz-data-grid .rz-badge.rz-badge-danger,
body[data-theme*="dark"] .rz-datatable .rz-badge.rz-badge-danger {
    background: var(--rz-danger, #ef4444) !important;
    color: #ffffff !important;
}

body[data-theme*="dark"] .rz-data-grid .rz-badge.rz-badge-secondary,
body[data-theme*="dark"] .rz-datatable .rz-badge.rz-badge-secondary {
    background: var(--rz-secondary, #6366f1) !important;
    color: #ffffff !important;
}

body[data-theme*="dark"] .rz-data-grid .rz-badge.rz-badge-primary,
body[data-theme*="dark"] .rz-datatable .rz-badge.rz-badge-primary {
    background: var(--rz-primary, #2563eb) !important;
    color: #ffffff !important;
}

/* When a badge sets its own inline background color (common for status pills),
   keep the text white in dark mode regardless of the underlying hue. */
body[data-theme*="dark"] .rz-data-grid .rz-badge[style*="background"],
body[data-theme*="dark"] .rz-datatable .rz-badge[style*="background"] {
    color: #ffffff !important;
}

/* Grid row hover surfaces should never become a light slab in dark mode. */
body[data-theme*="dark"] .rz-data-grid .rz-data-row:hover,
body[data-theme*="dark"] .rz-datatable .rz-datatable-row:hover {
    background: var(--rz-data-grid-row-hover-background-color, rgba(255, 255, 255, 0.06)) !important;
}

/* ==========================================================================
   System Message Banners (Site Settings & Messages)
   --------------------------------------------------------------------------
   Used by MainLayout (Dashboard) and the public Home Page (RegisterDaycare)
   to render announcements, maintenance notices, warnings, and promotions
   broadcast from the Site Settings & Messages admin tools.

   Goals:
     * Prominent, immediately noticeable banner styling.
     * Severity-coded color rail + tinted background that respects theme.
     * Clearly visible, accessible dismiss button (no Bootstrap dependency).
   ========================================================================== */
.system-message {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 0.95rem 1.1rem 0.95rem 1.25rem;
    border-radius: 12px;
    border: 1px solid var(--rz-base-300);
    background: var(--rz-panel-background-color);
    color: var(--rz-text-color);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    margin-bottom: 0.85rem;
    animation: fadeInDown 0.4s ease-out;
    overflow: hidden;
}

    /* Left color rail keyed off severity. */
    .system-message::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: 5px;
        background: var(--system-message-accent, #2563eb);
    }

    .system-message .system-message-icon {
        flex-shrink: 0;
        width: 38px;
        height: 38px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: var(--system-message-icon-bg, rgba(37, 99, 235, 0.15));
        color: var(--system-message-accent, #2563eb);
        font-size: 1.35rem;
    }

    .system-message .system-message-body {
        flex: 1;
        min-width: 0;
    }

    .system-message .system-message-title {
        margin: 0 0 0.15rem 0;
        font-size: 1rem;
        font-weight: 700;
        color: var(--rz-text-color);
        line-height: 1.3;
    }

    .system-message .system-message-text {
        font-size: 0.9rem;
        line-height: 1.4;
        color: var(--rz-text-color);
        opacity: 0.95;
        word-break: break-word;
    }

    .system-message .system-message-meta {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        margin-top: 0.4rem;
        font-size: 0.75rem;
        color: var(--rz-text-secondary-color);
    }

    /* Dismiss button — clearly visible, theme-aware, accessible. */
    .system-message .system-message-dismiss {
        flex-shrink: 0;
        appearance: none;
        border: 1px solid var(--rz-base-300);
        background: var(--rz-base-background-color);
        color: var(--rz-text-color);
        width: 32px;
        height: 32px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
        padding: 0;
        line-height: 1;
    }

        .system-message .system-message-dismiss:hover,
        .system-message .system-message-dismiss:focus-visible {
            background: var(--system-message-accent, #2563eb);
            color: #ffffff;
            border-color: var(--system-message-accent, #2563eb);
            transform: scale(1.05);
            outline: none;
        }

        .system-message .system-message-dismiss .rzi,
        .system-message .system-message-dismiss .material-icons,
        .system-message .system-message-dismiss .notranslate {
            font-size: 1.15rem;
        }

/* Severity variants — set CSS custom properties so the rail, icon bubble,
   and dismiss hover all stay in sync. */
.system-message.system-message-info {
    --system-message-accent: #2563eb;
    --system-message-icon-bg: rgba(37, 99, 235, 0.15);
    background: linear-gradient(90deg, rgba(37, 99, 235, 0.10), var(--rz-panel-background-color) 35%);
}

.system-message.system-message-success {
    --system-message-accent: #16a34a;
    --system-message-icon-bg: rgba(22, 163, 74, 0.15);
    background: linear-gradient(90deg, rgba(22, 163, 74, 0.10), var(--rz-panel-background-color) 35%);
}

.system-message.system-message-warning {
    --system-message-accent: #d97706;
    --system-message-icon-bg: rgba(217, 119, 6, 0.18);
    background: linear-gradient(90deg, rgba(217, 119, 6, 0.12), var(--rz-panel-background-color) 35%);
}

.system-message.system-message-error {
    --system-message-accent: #dc2626;
    --system-message-icon-bg: rgba(220, 38, 38, 0.18);
    background: linear-gradient(90deg, rgba(220, 38, 38, 0.12), var(--rz-panel-background-color) 35%);
}

/* Dark-mode tuning: keep contrast on tinted gradients. */
body[data-theme*="dark"] .system-message {
    border-color: var(--rz-base-400);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}

body[data-theme*="dark"] .system-message.system-message-info {
    background: linear-gradient(90deg, rgba(96, 165, 250, 0.18), var(--rz-panel-background-color) 40%);
}

body[data-theme*="dark"] .system-message.system-message-success {
    background: linear-gradient(90deg, rgba(74, 222, 128, 0.18), var(--rz-panel-background-color) 40%);
}

body[data-theme*="dark"] .system-message.system-message-warning {
    background: linear-gradient(90deg, rgba(251, 191, 36, 0.20), var(--rz-panel-background-color) 40%);
}

body[data-theme*="dark"] .system-message.system-message-error {
    background: linear-gradient(90deg, rgba(248, 113, 113, 0.20), var(--rz-panel-background-color) 40%);
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

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