/* ==========================================================================
   Equant360 Application Styles
   Import design tokens first, then override as needed
   ========================================================================== */

@import url('design-tokens.css');

/* ============================================================================
   ╔═══════════════════════════════════════════════════════════════════════╗
   ║  EQUANT360 MODERN THEME LAYER  ──  added 2026-05-05                  ║
   ║  Brand palette is already locked in (logo-derived). This block adds   ║
   ║  the "soft modern SaaS" surface treatment: subtle gradients, gentle   ║
   ║  shadows, micro-animations, focus halos, and a wavy hero header.      ║
   ║                                                                       ║
   ║  Revert recipe: delete everything between BEGIN and END markers.      ║
   ║  No design-tokens.css changes were made — colors stay intact.         ║
   ╚═══════════════════════════════════════════════════════════════════════╝
   ============================================================================ */
/* ===== BEGIN MODERN THEME LAYER ===== */

:root {
    /* Hero gradient — same navy as the header. Hero and header become
       one continuous navy band visually, separated only by their own
       wave overlays. Most subdued option — lets data lead, no color
       shift between header and hero. */
    --eq-hero-gradient: linear-gradient(135deg, #263B63 0%, #1B2A4A 50%, #0E172A 100%);
    --eq-header-gradient: linear-gradient(135deg, #263B63 0%, #1B2A4A 50%, #0E172A 100%);
    --eq-soft-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.05);
    --eq-soft-shadow-hover: 0 2px 4px rgba(15, 23, 42, 0.06), 0 12px 24px rgba(15, 23, 42, 0.08);
    --eq-elevated-shadow: 0 4px 6px rgba(15, 23, 42, 0.05), 0 20px 40px rgba(15, 23, 42, 0.08);
    --eq-card-border: 1px solid rgba(15, 23, 42, 0.05);
    --eq-radius: 14px;
    --eq-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --eq-focus-ring: 0 0 0 3px rgba(41, 171, 226, 0.18);

    /* Neutralise Radzen's default input padding. We zero the variables AND
       override the longhand padding-block/padding-inline directly with
       !important — the variable override alone isn't enough because
       Radzen's CSS loads after app.css in the Blazor pipeline, so their
       `:root` re-declaration of these vars wins on source order
       (~0.4375rem / 7 px default). The !important rule below bypasses
       the variable lookup entirely. */
    --rz-input-padding-block: 0;
    --rz-input-padding-inline: 0;
}

/* ─────────────────────────────────────────────────────────────────────────
   eq-section-header / eq-section-actions — utility for the very common
   "card section title on the left, action group on the right" pattern.
   On narrow viewports, the title takes the top row and the action group
   drops to a full-width row underneath, instead of the title getting
   squeezed left while controls stack into a tall vertical column on the
   right.

   Usage on the Razor side (apply to the outer + inner RadzenStack):
       <RadzenStack Orientation="Horizontal"
                    JustifyContent="SpaceBetween" AlignItems="Center"
                    Wrap="FlexWrap.Wrap" Gap="8px"
                    class="eq-section-header">
           <RadzenText TextStyle="H6">My Section</RadzenText>
           <RadzenStack Orientation="Horizontal"
                        Wrap="FlexWrap.Wrap" Gap="6px"
                        class="eq-section-actions">
               <RadzenDropDown ... />
               <RadzenTextBox ... />
           </RadzenStack>
       </RadzenStack>
   ───────────────────────────────────────────────────────────────────── */
.eq-section-header {
    flex-wrap: wrap !important;
    row-gap: 8px;
}

/* grid-row-actions — utility for the actions column inside RadzenDataGrid.
   Compact, neutral icon buttons with subtle hover state. Replaces the
   pattern of giving each row action its own bright ButtonStyle (Info /
   Secondary / Warning / Success) which looked chaotic — one column of
   data with 4-5 different colored squares per row competing for attention.

   Buttons MUST include both Icon and Text. The CSS hides the text label
   on small grids (3+ buttons) to keep the column compact, and shows it
   when there's room. Touch devices have no hover, so relying on a `title`
   tooltip alone is a bad UX — keep the text where space allows so users
   know what each icon means. Confirmation dialogs cover the rest.

   Usage:
       <RadzenStack Orientation="Horizontal" Gap="2px" class="grid-row-actions">
           <RadzenButton Icon="edit"   Text="Edit"   Size="Small" ButtonStyle="Light" Variant="Text" title="Edit" Click="..." />
           <RadzenButton Icon="delete" Text="Delete" Size="Small" ButtonStyle="Light" Variant="Text" title="Delete" Click="..." />
       </RadzenStack>

   Add `class="grid-row-actions grid-row-actions--icon-only"` to force
   icon-only mode for very tight columns (use sparingly).
*/
.grid-row-actions {
    flex-wrap: nowrap !important;
}

    .grid-row-actions .rz-button {
        min-height: 28px !important;
        height: 28px !important;
        padding: 4px 8px !important;
        color: var(--color-gray-600, #4B5563) !important;
        background: transparent !important;
        box-shadow: none !important;
        font-size: 12px !important;
        gap: 4px !important;
    }

        .grid-row-actions .rz-button:hover {
            background: rgba(15, 23, 42, 0.06) !important;
            color: var(--rz-primary) !important;
        }

        .grid-row-actions .rz-button .rz-icon,
        .grid-row-actions .rz-button .rzi,
        .grid-row-actions .rz-button i {
            font-size: 16px !important;
        }

/* Icon-only variant — opt-in via the modifier class. Forces a 28x28 square
   button regardless of whether Text is present (text just becomes
   visually hidden but stays in the DOM for accessibility). */
.grid-row-actions--icon-only .rz-button {
    min-width: 28px !important;
    width: 28px !important;
    padding: 0 !important;
}

    .grid-row-actions--icon-only .rz-button .rz-button-text,
    .grid-row-actions--icon-only .rz-button > span:not(.rz-icon):not(.rzi):not(.rz-button-icon) {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

@media (pointer: coarse), (max-width: 768px) {
    /* Touch tier — slightly taller for finger ergonomics. Text is still
       shown by default (better than relying on a non-existent hover
       tooltip), but very narrow phone columns can fall back to icon-only
       via `.grid-row-actions--icon-only` for a 32x32 square. */
    .grid-row-actions .rz-button {
        min-height: 32px !important;
        height: 32px !important;
        font-size: 11.5px !important;
    }

    .grid-row-actions--icon-only .rz-button {
        min-width: 32px !important;
        width: 32px !important;
    }

    /* Auto-collapse to icon-only on phones (≤480 px) regardless of opt-in,
       since columns can't fit text on a 375 px viewport. Text remains in
       DOM for accessibility. */
    @media (max-width: 480px) {
        .grid-row-actions .rz-button {
            min-width: 32px !important;
            width: 32px !important;
            padding: 0 !important;
        }

            .grid-row-actions .rz-button .rz-button-text,
            .grid-row-actions .rz-button > span:not(.rz-icon):not(.rzi):not(.rz-button-icon) {
                position: absolute;
                width: 1px;
                height: 1px;
                padding: 0;
                margin: -1px;
                overflow: hidden;
                clip: rect(0, 0, 0, 0);
                white-space: nowrap;
                border: 0;
            }
    }
}

/* PayrollOverview tab content wrapper — replaces .page-container which is
   for top-of-page use. PayrollOverview is rendered inside a RadzenCard tab
   in PayrollPage, so the fixed-viewport-height + overflow-hidden pattern
   from page-container caused the data grid to render outside the parent
   card on mobile. Plain block flow lets the host card grow naturally. */
.payroll-overview {
    display: block;
}

    .payroll-overview .grid-container {
        display: block;
        flex: none;
        height: auto;
        min-height: 0;
        margin-top: 12px;
        overflow: visible;
    }

        .payroll-overview .grid-container .rz-data-grid {
            height: auto !important;
        }

        /* Horizontal scroll when columns exceed container width — placed on
           the inner Radzen scroll wrapper so vertical content flows
           naturally on the outer container. */
        .payroll-overview .grid-container .rz-data-grid-data,
        .payroll-overview .grid-container .rz-grid-table-wrapper {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }

/* Tab-content section header — neutral padding, soft separator, no hero.
   `display: flex; flex-direction: column; gap` so internal sections (action
   buttons → department cards → search row) all have breathing room
   between them, instead of being flush against each other. */
.payroll-overview-header {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 12px 16px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--rz-border-color, rgba(15, 23, 42, 0.06));
    background: transparent;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    /* On phones, the 4-button action group lays out as a clean 2x2 grid
       with equal-width buttons. Without this, button widths flex to text
       length (Finalize > Report, Revert > Export) and the grid looks
       ragged. */
    .payroll-overview-header .eq-section-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
        width: 100%;
    }

        .payroll-overview-header .eq-section-actions > .rz-button,
        .payroll-overview-header .eq-section-actions > .rz-badge {
            width: 100% !important;
            justify-content: center !important;
        }
}

/* On mobile, let the grid-container size to its natural content rather
   than being forced taller. The earlier min-height: 320 px produced large
   empty space below short result sets. The page-container override above
   already releases the viewport-height constraint, so the grid won't be
   crushed by other content above it. */

.eq-section-actions {
    flex-wrap: wrap !important;
}

@media (max-width: 768px) {
    /* On phones, action group spans full width once it wraps under the
       title — so dropdowns/search fit cleanly instead of huddling right. */
    .eq-section-header > .eq-section-actions {
        flex: 1 1 100%;
        justify-content: flex-start;
    }

        .eq-section-header > .eq-section-actions > * {
            flex: 1 1 auto;
            min-width: 140px;
        }
}

/* Replacement input padding — !important beats Radzen's default rule which
   loads after app.css. Selectors are matched VERBATIM with Radzen's own
   `default.css` rule so we hit exactly the same elements (no double-
   padding the wrapper + the inner input on datepicker / timespanpicker). */
.rz-timespanpicker > .rz-inputtext,
.rz-colorpicker,
.rz-lookup-search input,
.rz-numeric,
.rz-datepicker > .rz-inputtext,
.rz-multiselect,
.rz-dropdown,
.mask,
.rz-textarea,
.rz-textbox {
    padding-block: 4px !important;
    padding-inline: 10px !important;
}

/* RadzenNumeric spinner buttons (the up/down arrows next to numeric inputs).
   The 3-tier sizing rule excludes `.rz-spinner-button` so these stay at
   Radzen defaults — but Radzen defaults are tiny (~14×14 px each, stacked)
   and unusable on touch. Force a proper hit target: 22 px wide × 16 px
   tall on desktop, 28 px wide × 18 px tall on touch (35-36 px total
   stacked, matching the input height). The wrapper needs `position:
   relative` + right padding-reservation so the spinners don't overlap
   the input text. */
.rz-numeric {
    position: relative;
    padding-right: 28px !important;
}

    .rz-numeric .rz-spinner-button,
    .rz-numeric .rz-spinner-up,
    .rz-numeric .rz-spinner-down {
        width: 22px !important;
        min-width: 22px !important;
        height: 16px !important;
        min-height: 16px !important;
        padding: 0 !important;
        font-size: 12px !important;
        line-height: 1 !important;
        background: transparent !important;
        border: none !important;
        color: var(--color-gray-600, #4B5563) !important;
        box-shadow: none !important;
    }

        .rz-numeric .rz-spinner-button:hover {
            background: rgba(15, 23, 42, 0.06) !important;
            color: var(--rz-primary) !important;
        }

@media (pointer: coarse), (max-width: 768px) {
    /* Touch — bigger spinners, more right-padding on the wrapper. */
    .rz-numeric {
        padding-right: 32px !important;
    }

        .rz-numeric .rz-spinner-button,
        .rz-numeric .rz-spinner-up,
        .rz-numeric .rz-spinner-down {
            width: 28px !important;
            min-width: 28px !important;
            height: 18px !important;
            min-height: 18px !important;
            font-size: 14px !important;
        }
}

/* Body — calm, very subtle warm gradient */
body {
    background: linear-gradient(180deg, #F4F7FB 0%, #F8FAFC 35%, #FAFBFD 100%) !important;
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Page-container — softer surface + entry animation */
.page-container {
    border-radius: var(--eq-radius) !important;
    box-shadow: var(--eq-soft-shadow) !important;
    border: 1px solid rgba(15, 23, 42, 0.04);
    background: #FFFFFF !important;
    animation: eqFadeIn 280ms var(--eq-ease);
}

/* The first .page-header in any .page-container gets the wavy brand-blue hero
   strip by default — this is now the standard look across the app. The
   `.page-header--hero` class is kept as an explicit alias for back-compat. */
.page-header {
    position: relative;
    padding: 4px 0 12px 0;
    margin-bottom: 4px;
}

.page-container > .page-header:first-child,
.page-header--hero {
    margin: -20px -20px 16px -20px;
    padding: 24px 24px 32px 24px;
    border-radius: var(--eq-radius) var(--eq-radius) 0 0;
    color: #FFFFFF;
    background:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='120' viewBox='0 0 1200 120' preserveAspectRatio='none'><path d='M0,70 C200,110 400,30 600,70 S1000,110 1200,70 V120 H0 Z' fill='%23FFFFFF' opacity='0.10'/><path d='M0,90 C200,60 400,120 600,80 S1000,40 1200,90 V120 H0 Z' fill='%23FFFFFF' opacity='0.07'/></svg>"),
        var(--eq-hero-gradient);
    background-size: 100% 100%, 100% 100%;
    background-position: bottom center, top left;
    background-repeat: no-repeat, no-repeat;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.22);
}

/* `.page-hero` — self-contained hero strip utility. Use when a page or
   tab content (not a top-of-page-container scenario) wants the navy hero
   treatment for its title row. No negative margins, no flex layout
   constraints — just visual styling. Drop into any container.

   Usage:
       <div class="page-hero">
           <RadzenStack ... class="eq-section-header">
               <div>
                   <RadzenText class="page-hero-title">Document Center</RadzenText>
                   <RadzenText class="page-hero-subtitle">Overview...</RadzenText>
               </div>
               <RadzenStack class="eq-section-actions">
                   <RadzenButton Text="..." />
               </RadzenStack>
           </RadzenStack>
       </div>
*/
.page-hero {
    padding: 20px 24px 28px 24px;
    border-radius: var(--eq-radius);
    margin: 0 0 16px 0;
    color: #FFFFFF;
    background:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='120' viewBox='0 0 1200 120' preserveAspectRatio='none'><path d='M0,70 C200,110 400,30 600,70 S1000,110 1200,70 V120 H0 Z' fill='%23FFFFFF' opacity='0.10'/><path d='M0,90 C200,60 400,120 600,80 S1000,40 1200,90 V120 H0 Z' fill='%23FFFFFF' opacity='0.07'/></svg>") bottom center / 100% 100% no-repeat,
        var(--eq-hero-gradient);
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.22);
}

    /* White text + icons scoped to the section-header strip and the title
       elements themselves. NOT applied to nested .rz-card content (which
       has its own white background — would paint invisible white-on-white
       text). The selectors descend through the typical .page-hero >
       .eq-section-header > div > <title> structure but stop at any
       .rz-card boundary. */
    .page-hero > .eq-section-header h1,
    .page-hero > .eq-section-header h2,
    .page-hero > .eq-section-header h3,
    .page-hero > .eq-section-header h4,
    .page-hero > .eq-section-header h5,
    .page-hero > .eq-section-header h6,
    .page-hero > .eq-section-header .rz-text,
    .page-hero > .eq-section-header .module-title,
    .page-hero > .eq-section-header .page-header-title,
    .page-hero > .eq-section-header .page-hero-title,
    .page-hero > .eq-section-header .rz-icon,
    .page-hero > .eq-section-header .rzi,
    .page-hero > .eq-section-header i.material-icons,
    .page-hero > .eq-section-header i.material-icons-outlined,
    .page-hero > .page-header-title,
    .page-hero > .page-hero-title,
    .page-hero > .page-header-subtitle,
    .page-hero > .page-hero-subtitle {
        color: #FFFFFF !important;
    }

    /* Subtitles softer (88% white). */
    .page-hero > .eq-section-header .page-header-subtitle,
    .page-hero > .eq-section-header .page-hero-subtitle,
    .page-hero > .eq-section-header .rz-text-caption,
    .page-hero > .eq-section-header .rz-text-body2 {
        color: rgba(255, 255, 255, 0.88) !important;
    }

@media (max-width: 768px) {
    /* Tighten on phones — less wasted vertical space, action buttons wrap. */
    .page-hero {
        padding: 14px 16px 20px 16px;
        margin-bottom: 12px;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   Page-hero spacing normalization — every page has THE SAME gap between
   the global header and the hero strip, regardless of which pattern the
   page uses. Two patterns are normalized to the same 8 px gap:

     1. `.page-hero` — explicit utility used in 19+ pages.
     2. Auto-hero — `<div class="page-container"><div class="page-header">`
        which gets the hero treatment via the modern theme layer.

   Mechanism: everything else gets zeroed at the top, and a single 8 px
   gap is injected via `.app-body-content`'s padding-top.
   ───────────────────────────────────────────────────────────────────── */
.app-body .app-body-content {
    padding: 8px 8px 0 8px;
}

/* Outer wrappers with their own top padding/margin — neutralize so the
   8 px from app-body-content is the only gap. */
.container-fluid:has(> .page-hero:first-child),
.page-container:has(> .page-hero:first-child) {
    padding-top: 0 !important;
}

/* Auto-hero pattern: .page-container margin defaults to 20 px on all
   sides. Override the top to 0 specifically when it contains the
   auto-hero (a page-header as first child). The other three sides keep
   their 20 px spacing. */
.app-body .app-body-content .page-container:has(> .page-header:first-child),
.app-body .app-body-content .page-container:has(> .page-header--hero:first-child) {
    margin-top: 0 !important;
}

/* For pages without an outer container (StaffAttendance, StaffRequest
   use a bare RadzenStack as root) — strip any first-row gap above the
   hero. */
.app-body .app-body-content > .rz-stack > .page-hero:first-child,
.app-body .app-body-content > .rz-stack > div:first-child > .page-hero:first-child,
.app-body .app-body-content > .rz-stack > .rz-stack:first-child > .page-hero:first-child {
    margin-top: 0;
}

@media (max-width: 768px) {
    /* On phones, reduce the body breathing room so screens stay dense. */
    .app-body .app-body-content {
        padding: 4px 4px 0 4px;
    }
}

/* Non-first .page-header (split layouts: Task360 workspace, Calendar) stays
   neutral so toolbars below the hero strip render on white. */
.page-container > .page-header:not(:first-child),
.page-header--hero + .page-header {
    background: transparent;
    color: inherit;
    margin: 0 0 4px 0;
    padding: 4px 0 12px 0;
    border-radius: 0;
    box-shadow: none;
}

/* White-text rules for the hero strip. Scoped strictly to the title row
   (`.eq-section-header` or `.page-hero-title` / `.page-hero-subtitle` /
   `.page-header-title` / `.page-header-subtitle`) — NOT the entire
   `.page-header` subtree. Per CLAUDE.md "stats live inside page-header"
   convention, dashboard stat cards (RadzenRow with KPI cards) are nested
   inside `.page-header`, so a broad rule here would paint white text on
   the white card backgrounds — invisible. */
.page-container > .page-header:first-child > .eq-section-header h1,
.page-container > .page-header:first-child > .eq-section-header h2,
.page-container > .page-header:first-child > .eq-section-header h3,
.page-container > .page-header:first-child > .eq-section-header h4,
.page-container > .page-header:first-child > .eq-section-header h5,
.page-container > .page-header:first-child > .eq-section-header h6,
.page-container > .page-header:first-child > .eq-section-header .rz-text,
.page-container > .page-header:first-child > .eq-section-header .module-title,
.page-container > .page-header:first-child > .eq-section-header .rz-icon,
.page-container > .page-header:first-child > .eq-section-header .rzi,
.page-container > .page-header:first-child > .eq-section-header i.material-icons,
.page-container > .page-header:first-child > .eq-section-header i.material-icons-outlined,
.page-container > .page-header:first-child > .page-header-title,
.page-container > .page-header:first-child > .page-header-subtitle,
.page-header--hero > .eq-section-header h1,
.page-header--hero > .eq-section-header h2,
.page-header--hero > .eq-section-header h3,
.page-header--hero > .eq-section-header h4,
.page-header--hero > .eq-section-header h5,
.page-header--hero > .eq-section-header h6,
.page-header--hero > .eq-section-header .rz-text,
.page-header--hero > .eq-section-header .module-title,
.page-header--hero > .eq-section-header .rz-icon,
.page-header--hero > .eq-section-header .rzi,
.page-header--hero > .eq-section-header i.material-icons,
.page-header--hero > .eq-section-header i.material-icons-outlined,
.page-header--hero > .page-header-title,
.page-header--hero > .page-header-subtitle {
    color: #FFFFFF !important;
}

/* Subtitles slightly softer (88% white) so primary title stays prominent. */
.page-container > .page-header:first-child > .eq-section-header .rz-text-caption,
.page-container > .page-header:first-child > .eq-section-header .rz-text-body2,
.page-container > .page-header:first-child > .eq-section-header .page-header-subtitle,
.page-container > .page-header:first-child > .eq-section-header .page-hero-subtitle,
.page-header--hero > .eq-section-header .rz-text-caption,
.page-header--hero > .eq-section-header .rz-text-body2,
.page-header--hero > .eq-section-header .page-header-subtitle,
.page-header--hero > .eq-section-header .page-hero-subtitle {
    color: rgba(255, 255, 255, 0.88) !important;
}

/* Pages that put the title in a wrapper div without `.eq-section-header`
   (older patterns) — fall back to direct-child selectors that hit the
   common Radzen output structures while still excluding deeply nested
   cards. Two-level descent only: page-header > div > <heading element>. */
.page-container > .page-header:first-child > div > .page-header-title,
.page-container > .page-header:first-child > div > .page-header-subtitle,
.page-header--hero > div > .page-header-title,
.page-header--hero > div > .page-header-subtitle {
    color: #FFFFFF !important;
}

/* RadzenCard — softer surface */
.rz-card {
    border-radius: var(--eq-radius) !important;
    border: var(--eq-card-border) !important;
    box-shadow: var(--eq-soft-shadow) !important;
    transition: box-shadow 250ms var(--eq-ease), transform 250ms var(--eq-ease), border-color 250ms var(--eq-ease);
}

/* Outlined cards stay flatter — no extra shadow */
.rz-card.rz-variant-outlined {
    box-shadow: none !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
}

/* Cards inside dialogs are visually flat — dialog already provides elevation */
.rz-dialog .rz-card {
    box-shadow: none !important;
}

/* Hover lift on visibly-clickable cards (kanban tasks, dashboard items, etc.) */
.task360-card,
.dashboard-item,
.rz-card.rz-clickable {
    cursor: pointer;
}

.task360-card:hover,
.dashboard-item:hover,
.rz-card.rz-clickable:hover {
    box-shadow: var(--eq-soft-shadow-hover) !important;
    transform: translateY(-2px);
    border-color: rgba(41, 171, 226, 0.18) !important;
}

/* ----------------------------------------------------------------------------
   Button sizing — 3-tier system aligned with Material 3 + WCAG 2.5.5 AAA touch
   targets. Small buttons stay compact on desktop for density, uplift to a
   comfortable 40 px on mobile. Default is 40 px desktop / 44 px mobile.
   Spinner buttons (numeric +/-) are excluded — they have their own footprint.
   ---------------------------------------------------------------------------- */

.rz-button:not(.rz-spinner-button):not(.rz-spinner-up):not(.rz-spinner-down) {
    min-height: 40px;
    padding: 8px 16px;
    font-size: 14px;
    touch-action: manipulation;
}

.rz-button.rz-button-sm:not(.rz-spinner-button) {
    min-height: 32px;
    padding: 4px 10px;
    font-size: 13px;
}

.rz-button.rz-button-lg:not(.rz-spinner-button) {
    min-height: 48px;
    padding: 12px 24px;
    font-size: 15px;
}

/* Icon-only buttons render square — Radzen adds .rz-button-icon-only when
   no Text is set. */
.rz-button.rz-button-icon-only:not(.rz-spinner-button) {
    min-width: 40px;
    padding: 0;
}

.rz-button.rz-button-icon-only.rz-button-sm:not(.rz-spinner-button) {
    min-width: 32px;
}

.rz-button.rz-button-icon-only.rz-button-lg:not(.rz-spinner-button) {
    min-width: 48px;
}

/* Touch-friendly sizing applies to ANY touch device — phones, tablets,
   touchscreen laptops — regardless of viewport width. Without this, an
   iPad in landscape (1024 px wide) gets desktop-density tap targets and
   iOS triggers zoom-on-focus on form fields. The comma in the @media
   query is OR — match if pointer is coarse OR width ≤ 768 px. */
@media (pointer: coarse), (max-width: 768px) {
    /* Touch tier — heights match the compact form-control heights (36 px
       inputs / 36 px default button) so a button next to a dropdown or
       textbox lines up without one looming taller. Still well above WCAG
       2.5.5 AA (24 px) and within Material 3 comfortable range. */
    .rz-button:not(.rz-spinner-button):not(.rz-spinner-up):not(.rz-spinner-down) {
        min-height: 36px;
        padding: 7px 12px;
        font-size: 13px;
    }

    .rz-button.rz-button-sm:not(.rz-spinner-button) {
        min-height: 30px;
        padding: 4px 10px;
        font-size: 12px;
    }

    .rz-button.rz-button-lg:not(.rz-spinner-button) {
        min-height: 42px;
        padding: 10px 16px;
        font-size: 14px;
    }

    .rz-button.rz-button-icon-only:not(.rz-spinner-button) {
        min-width: 36px;
    }
    .rz-button.rz-button-icon-only.rz-button-sm:not(.rz-spinner-button) {
        min-width: 30px;
    }
    .rz-button.rz-button-icon-only.rz-button-lg:not(.rz-spinner-button) {
        min-width: 42px;
    }

    /* Compact form controls on touch — 14 px font with reduced inner padding
       so dropdowns/textboxes/datepickers stay visually tight on phones and
       tablets. 32-36 px height range tracks the smaller button tier. */
    .rz-textbox,
    .rz-textarea,
    .rz-dropdown .rz-inputtext,
    .rz-numeric .rz-inputtext,
    .rz-datepicker input,
    .rz-autocomplete input,
    input.rz-inputtext,
    select.rz-inputtext,
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="search"],
    input[type="tel"],
    input[type="url"] {
        font-size: 14px !important;
    }

    /* Touch tier — selectors mirror Radzen's verbatim so we override the
       same elements (wrapper for dropdown/numeric/multiselect, inner
       inputtext for datepicker/timespanpicker, etc.). Avoids the double-
       pad-the-wrapper-and-inner bug. */
    .rz-timespanpicker > .rz-inputtext,
    .rz-colorpicker,
    .rz-lookup-search input,
    .rz-numeric,
    .rz-datepicker > .rz-inputtext,
    .rz-multiselect,
    .rz-dropdown,
    .mask,
    .rz-textarea,
    .rz-textbox {
        padding-block: 6px !important;
        padding-inline: 10px !important;
    }

    .rz-textbox,
    .rz-numeric,
    .rz-datepicker,
    .rz-dropdown,
    .rz-multiselect,
    .rz-autocomplete {
        min-height: 36px !important;
    }

        .rz-dropdown .rz-dropdown-trigger {
            min-height: 34px !important;
        }

    .rz-textarea {
        padding: 4px 5px !important;
    }

    /* Form labels and helper text trim a bit too so forms stay compact. */
    .rz-form-field-label,
    label.rz-label {
        font-size: 12.5px !important;
    }

    /* 8 px gap between adjacent buttons so users don't fat-finger neighbours */
    .rz-button + .rz-button {
        margin-left: 8px;
    }
}

/* iOS Safari only — bump input font back to 16 px to avoid the zoom-on-focus
   behaviour that other browsers don't have. -webkit-touch-callout is iOS-only,
   so this @supports block is a clean iOS gate. The other 13 platforms keep
   the compact 14 px sizing above. */
@supports (-webkit-touch-callout: none) {
    @media (pointer: coarse), (max-width: 768px) {
        .rz-textbox,
        .rz-textarea,
        .rz-dropdown .rz-inputtext,
        .rz-numeric .rz-inputtext,
        .rz-datepicker input,
        .rz-autocomplete input,
        input.rz-inputtext,
        select.rz-inputtext,
        input[type="text"],
        input[type="email"],
        input[type="password"],
        input[type="number"],
        input[type="search"],
        input[type="tel"],
        input[type="url"] {
            font-size: 16px !important;
        }
    }
}

/* Tablet portrait/landscape layout density (769-1024 px) — tighter than
   desktop, looser than mobile. Touch targets already enlarged by the
   pointer:coarse rule above; this block is purely about how much
   chrome/whitespace surrounds the content. */
@media (min-width: 769px) and (max-width: 1024px) {
    .page-container {
        margin: 14px !important;
        padding: 16px !important;
    }

    .page-container > .page-header:first-child,
    .page-header--hero {
        margin: -16px -16px 14px -16px;
        padding: 20px 20px 26px 20px;
    }

    /* Cap dialog width so it doesn't span the full tablet viewport */
    .rz-dialog:not(.rz-dialog-fullscreen) {
        max-width: 92vw !important;
    }

    /* Slightly tighter card padding so 2-up grids don't waste space */
    .rz-card {
        padding: 12px;
    }
}

/* Buttons — gentle hover lift, slightly stronger primary glow.
   white-space:nowrap stops "Download Report" / "Add Employee" type labels
   from wrapping into chunky two-line buttons in narrow flex containers.
   If the button can't fit horizontally, the parent layout should wrap or
   the button should be downgraded to icon-only — wrapping mid-button is
   never the right answer. */
.rz-button {
    transition: transform 180ms var(--eq-ease), box-shadow 180ms var(--eq-ease), filter 180ms var(--eq-ease) !important;
    white-space: nowrap;
}

.rz-button .rz-button-text,
.rz-button > span:not(.rz-button-icon) {
    white-space: nowrap;
}

.rz-button:not(:disabled):not(.rz-button-link):not(.rz-spinner-button):hover {
    transform: translateY(-1px);
}

.rz-button:not(:disabled):not(.rz-button-link):not(.rz-spinner-button):active {
    transform: translateY(0);
    filter: brightness(0.96);
}

.rz-button.rz-primary,
.rz-button-primary {
    box-shadow: 0 1px 2px rgba(41, 171, 226, 0.20);
}

.rz-button.rz-primary:not(:disabled):hover,
.rz-button-primary:not(:disabled):hover {
    box-shadow: 0 4px 14px rgba(41, 171, 226, 0.30);
}

/* Global RadzenHeader (the top navy strip) — exact mirror of the page
   hero treatment but in the navy palette. Same wave SVG shape (filled
   white at 10%/7% opacity), same 135° linear gradient angle, same soft
   elevated shadow. Hero is brand-blue with white waves; header is brand-
   navy with white waves. The two surfaces feel like a matched set:
   header on top of every page, hero on top of landing pages, identical
   formula in two color keys. */
.rz-header {
    position: relative;
    background:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='64' viewBox='0 0 1200 64' preserveAspectRatio='none'><path d='M0,38 C200,59 400,17 600,38 S1000,59 1200,38 V64 H0 Z' fill='%23FFFFFF' opacity='0.10'/><path d='M0,48 C200,32 400,64 600,43 S1000,21 1200,48 V64 H0 Z' fill='%23FFFFFF' opacity='0.07'/></svg>") bottom center / 100% 100% no-repeat,
        var(--eq-header-gradient) !important;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.22);
    transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

.rz-header.eq-header-hidden {
    transform: translateY(-100%);
}

@media (max-width: 768px) {
    .rz-header {
        min-height: 48px !important;
        height: 48px !important;
    }
    .rz-header .menu-button {
        top: 2px !important;
    }
    .rz-header .menu-button i,
    .rz-header .menu-button .rz-button-icon {
        font-size: 26px !important;
    }
    .rz-header .rz-button-primary i,
    .rz-header .rz-button-primary .rz-icon {
        font-size: 20px !important;
    }
    .rz-header .rz-button-primary {
        padding: 4px 8px !important;
        min-height: 36px !important;
    }
}

/* The right-side button group in MainLayout uses class="dark-blue-div"
   which the legacy `.dark-blue-div` rule paints with a solid navy
   background. Inside the header that creates a visible stripe behind
   the help/notification/profile pack — breaking the gradient flow.
   Force transparent so the header gradient + waves show through. */
.rz-header .dark-blue-div,
.rz-header .rz-profile-menu.dark-blue-div,
.rz-header ul.rz-profile-menu.dark-blue-div {
    background: transparent !important;
    background-color: transparent !important;
}

/* Header buttons — "lighter shade of the header colour" so they show up
   cleanly against the navy strip without going brand-cyan. */
.rz-header .rz-button.rz-primary,
.rz-header .rz-button-primary,
.rz-header .dark-blue-div .rz-button.rz-primary,
.rz-header .dark-blue-div .rz-button-primary {
    background: var(--rz-secondary-light) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    border-color: transparent !important;
}

.rz-header .rz-button.rz-primary:hover,
.rz-header .rz-button-primary:hover,
.rz-header .dark-blue-div .rz-button.rz-primary:hover,
.rz-header .dark-blue-div .rz-button-primary:hover {
    background: rgba(255, 255, 255, 0.16) !important;
    border-color: transparent !important;
}

/* The drawer-toggle (apps icon, left of header) stays transparent — it's
   the only "always-on" affordance and benefits from being subtle. */
.rz-header .menu-button,
.rz-header .menu-button:hover {
    background: transparent !important;
}

.rz-header .menu-button:hover {
    background: rgba(255, 255, 255, 0.10) !important;
}

/* Header button SIZING — overrides the global 3-tier rules. Header buttons
   must fit within the navy strip; without this, Size="Large" (used by the
   drawer-toggle in MainLayout) renders at 48-52 px and overflows the
   ~48 px header on mobile, leaving a "pill" hanging below the strip.
   :not(.menu-button) excludes the drawer toggle so the dedicated 40 px
   square rule below isn't beaten on specificity. */
.rz-header .rz-button:not(.rz-spinner-button):not(.menu-button),
.rz-header .rz-button.rz-button-lg:not(.rz-spinner-button):not(.menu-button),
.rz-header .rz-button.rz-button-sm:not(.rz-spinner-button):not(.menu-button) {
    min-height: 36px !important;
    height: 36px !important;
    padding: 6px 10px !important;
}

@media (max-width: 768px) {
    .rz-header .rz-button:not(.rz-spinner-button):not(.menu-button),
    .rz-header .rz-button.rz-button-lg:not(.rz-spinner-button):not(.menu-button),
    .rz-header .rz-button.rz-button-sm:not(.rz-spinner-button):not(.menu-button) {
        height: 32px !important;
        min-height: 32px !important;
        padding: 4px 8px !important;
    }
}

/* Don't apply lift/glow to header buttons — they live in their own context. */
.rz-header .rz-button,
.rz-header .rz-button.rz-primary,
.rz-header .rz-button-primary,
.rz-header .rz-button:hover,
.rz-header .rz-button.rz-primary:not(:disabled):hover,
.rz-header .rz-button-primary:not(:disabled):hover {
    box-shadow: none !important;
    transform: none !important;
}

/* Form fields — soft focus halo replacing harsh outlines */
.rz-textbox:focus,
.rz-textarea:focus,
.rz-dropdown.rz-state-focused,
.rz-datepicker.rz-state-focused,
.rz-numeric.rz-state-focused,
.rz-form-field-content:focus-within {
    box-shadow: var(--eq-focus-ring) !important;
    border-color: var(--rz-primary) !important;
    outline: none !important;
}

/* Dialogs — softer elevation + smooth entry. On mobile the full-screen
   rule from design-tokens.css line 389 wins on width/height/transform; we
   override the radius here so it's actually 0 (not 14 px overflowing the
   viewport edge) and swap the scale-in animation for a slide-up that
   feels native on phones. */
.rz-dialog {
    border-radius: var(--eq-radius) !important;
    box-shadow: var(--eq-elevated-shadow) !important;
    animation: eqDialogIn 220ms var(--eq-ease);
}

.rz-dialog-titlebar {
    border-radius: var(--eq-radius) var(--eq-radius) 0 0 !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.05);
}

@media (max-width: 768px) {
    .rz-dialog {
        border-radius: 0 !important;
        animation: eqDialogSlideUp 240ms var(--eq-ease);
    }
    .rz-dialog-titlebar {
        border-radius: 0 !important;
    }
}

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

/* Badges — slightly heavier weight for legibility on small text */
.rz-badge {
    font-weight: 500 !important;
    letter-spacing: 0.01em;
}

/* DataGrid header — keep brand navy but soften the typography */
.rz-data-grid .rz-grid-table thead tr th {
    font-weight: 600 !important;
    letter-spacing: 0.02em;
    text-transform: none;
}

/* Sidebar / navigation active item — gentle accent bar on the left */
.rz-panel-menu-item.rz-state-active::before,
.rz-navigation-item.rz-state-active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 25%;
    bottom: 25%;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--rz-primary);
}

.rz-panel-menu-item,
.rz-navigation-item {
    position: relative;
    transition: background-color 180ms var(--eq-ease), color 180ms var(--eq-ease);
}

/* Notification toast — softer entry */
.rz-notification {
    border-radius: var(--eq-radius) !important;
    box-shadow: var(--eq-elevated-shadow) !important;
    animation: eqSlideInRight 240ms var(--eq-ease);
}

/* Tabs — clearer underline on active */
.rz-tabview-nav .rz-tabview-selected .rz-tabview-title {
    color: var(--rz-primary) !important;
    font-weight: 600;
}

/* Animations */
@keyframes eqFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes eqDialogIn {
    from { opacity: 0; transform: translateY(-8px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes eqSlideInRight {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Reduce-motion accessibility — disable transforms and animations */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .page-container,
    .rz-card.rz-clickable:hover,
    .task360-card:hover,
    .dashboard-item:hover,
    .rz-button:hover:not(:disabled) {
        transform: none !important;
    }
}

/* ----------------------------------------------------------------------------
   Audit fixes
   ---------------------------------------------------------------------------- */

/* Body font: a real system stack. The legacy declaration at line ~613 sets
   body font-family to 'Material Symbols Outlined, sans-serif' — that's an
   icon font, and any text codepoint that happens to exist in it would
   render as an icon glyph instead of a letter. Override here. RadzenIcon
   sets its own font-family inline so icons aren't affected. */
body {
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        "Inter",
        system-ui,
        Roboto,
        "Helvetica Neue",
        Arial,
        sans-serif !important;
}

/* Selection: branded so highlighted text reads on the brand without the
   default browser blue clashing with brand cyan. */
::selection {
    background: rgba(41, 171, 226, 0.22);
    color: var(--rz-base-900);
}

/* Custom scrollbars — thin, brand-tinted, modern SaaS look. WebKit uses
   ::-webkit-scrollbar; Firefox uses scrollbar-width / scrollbar-color. */
html {
    scrollbar-width: thin;
    scrollbar-color: rgba(15, 23, 42, 0.20) transparent;
}

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

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

::-webkit-scrollbar-thumb {
    background: rgba(15, 23, 42, 0.18);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(15, 23, 42, 0.32);
    background-clip: padding-box;
    border: 2px solid transparent;
}

/* Keyboard-only focus rings — show the brand halo when users tab in,
   suppress the click-focus halo so mouse clicks don't leave a sticky
   ring. Modern browsers support :focus-visible natively. */
.rz-button:focus:not(:focus-visible),
.rz-textbox:focus:not(:focus-visible),
.rz-textarea:focus:not(:focus-visible),
.rz-dropdown:focus:not(:focus-visible) {
    outline: none !important;
}

.rz-button:focus-visible {
    outline: none !important;
    box-shadow: var(--eq-focus-ring) !important;
}

/* Branded error boundary — was an unstyled red bar with a yellow icon. */
.blazor-error-boundary {
    background: linear-gradient(135deg, var(--rz-danger), var(--rz-danger-dark)) !important;
    color: #FFFFFF !important;
    padding: 14px 18px 14px 56px !important;
    border-radius: var(--eq-radius);
    box-shadow: var(--eq-elevated-shadow);
    font-weight: 500;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='%23FFFFFF'><path d='M12 2L1 21h22L12 2zm0 4.7L19.5 19h-15L12 6.7zM11 10v4h2v-4h-2zm0 6v2h2v-2h-2z'/></svg>"),
        linear-gradient(135deg, var(--rz-danger), var(--rz-danger-dark)) !important;
    background-repeat: no-repeat, no-repeat !important;
    background-position: 16px center, 0 0 !important;
    background-size: 24px 24px, cover !important;
}

.blazor-error-boundary::after {
    content: "Something went wrong. Reload the page to try again." !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   HEADER FINAL OVERRIDES — sit at the end of the modern layer so they win
   over the legacy `.rz-header .menu-button` block (~line 2903) and the
   3-class `.rz-header .rz-button.rz-primary` background rule.

   Three issues being fixed here:
     • Apps drawer toggle was floating at left:15px / top:5px (legacy
       position:absolute) and being painted with --rz-secondary-light
       (3-class background rule beat the 2-class menu-button rule).
     • The 3-tier sizing selector matched .menu-button too, fighting the
       40 px square sizing.
     • Profile gravatar (40 px default) + chevron overflowed the 48 px
       mobile header strip.
   ───────────────────────────────────────────────────────────────────── */

.rz-header .rz-button.menu-button,
.rz-header .rz-button-primary.menu-button,
.rz-header .menu-button.rz-primary {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}

    .rz-header .rz-button.menu-button:hover,
    .rz-header .rz-button-primary.menu-button:hover,
    .rz-header .menu-button.rz-primary:hover {
        background: rgba(255, 255, 255, 0.12) !important;
    }

    .rz-header .rz-button.menu-button i,
    .rz-header .rz-button.menu-button .rz-button-icon,
    .rz-header .rz-button.menu-button .rzi {
        font-size: 22px !important;
        line-height: 1 !important;
        color: rgba(255, 255, 255, 0.9) !important;
    }

/* Profile menu — gravatar + chevron must fit within the header strip.
   The wrapper itself is the flex item, gravatar is the visible avatar. */
.rz-header .rz-profile-menu {
    height: auto !important;
    align-items: center !important;
    display: flex !important;
    padding: 0 4px !important;
}

    .rz-header .rz-profile-menu .rz-gravatar,
    .rz-header .rz-profile-menu img.rz-gravatar {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
    }

    .rz-header .rz-profile-menu .rz-icon,
    .rz-header .rz-profile-menu .rzi {
        font-size: 18px !important;
        color: rgba(255, 255, 255, 0.85) !important;
    }

@media (max-width: 1024px) {
    /* Mobile + tablet: header is 48 px, so the gravatar pack needs to
       collapse one notch to clear the strip cleanly. */
    .rz-header .rz-button.menu-button,
    .rz-header .rz-button-primary.menu-button,
    .rz-header .menu-button.rz-primary {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        max-height: 36px !important;
    }

    .rz-header .rz-button.menu-button i,
    .rz-header .rz-button.menu-button .rz-button-icon,
    .rz-header .rz-button.menu-button .rzi {
        font-size: 20px !important;
    }

    .rz-header .rz-profile-menu .rz-gravatar,
    .rz-header .rz-profile-menu img.rz-gravatar {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
    }

    .rz-header .rz-profile-menu .rz-icon,
    .rz-header .rz-profile-menu .rzi {
        font-size: 16px !important;
    }
}

/* App drawer (the apps grid popup) — was rendered with 20 px container
   padding and 15 px vertical gap inside each module tile, which made each
   tile ~150 px tall on phones. Compact for mobile so users see more
   modules without scrolling and the panel doesn't dominate the screen. */
@media (max-width: 768px) {
    .app-drawer-popup {
        left: 6px !important;
        right: 6px !important;
        max-width: calc(100vw - 12px) !important;
    }

        .app-drawer-popup .app-drawer-stack {
            padding: 10px !important;
        }

    .app-drawer-stack .modules-title-stack {
        padding-bottom: 4px !important;
        margin-bottom: 4px !important;
    }

    .app-drawer-stack .modules-title {
        font-size: 11px !important;
        line-height: 14px !important;
    }

    /* Tiles — drop the inner Gap=15 px (Radzen inline) to ~6 px and tighten
       button padding so the icon + label pack stays compact. */
    .app-drawer-popup .menu-stack {
        --rz-gap: 6px;
    }

        .app-drawer-popup .menu-stack > .rz-col,
        .app-drawer-popup .menu-stack .rz-col {
            padding: 4px !important;
        }

    .app-drawer-popup .menu-item .menu-link.rz-button {
        padding: 6px 4px !important;
        min-height: auto !important;
    }

    .app-drawer-popup .menu-item .menu-link .menu-link-stack {
        gap: 4px !important;
    }

        .app-drawer-popup .menu-item .menu-link .menu-link-stack .menu-link-text {
            font-size: 12px !important;
            line-height: 14px !important;
        }

    /* Sprite icons — keep 34 px box (background-position depends on it) but
       visually scale down a touch with transform. Doesn't affect layout box. */
    .app-drawer-popup .menu-icon {
        transform: scale(0.82);
        transform-origin: center;
    }

    /* Dropdown caret on tiles with submenus — was 30 px chunky; trim. */
    .app-drawer-popup .menu-item .menu-link .rz-icon {
        font-size: 18px !important;
    }

    /* Footer band (org logo + version) — tighten too. */
    .app-drawer-popup .header-organization-name {
        padding: 6px 8px !important;
    }

        .app-drawer-popup .header-organization-name img {
            height: 22px !important;
        }
}

/* Quick actions bar (Admin Dashboard) — soft shadow + tighter icon. Heights
   come from the 3-tier system (Small = 32 px desktop / 40 px touch) so the
   button is comfortable on both density modes without text overflow. */
.quick-actions-card .quick-action-btn {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) !important;
}

    .quick-actions-card .quick-action-btn .rz-icon,
    .quick-actions-card .quick-action-btn .rzi {
        font-size: 16px !important;
    }

@media (min-width: 1025px) and (pointer: fine) {
    /* Desktop only — extra compact padding for density. */
    .quick-actions-card .quick-action-btn {
        padding: 4px 12px !important;
    }
}

@media (max-width: 600px) {
    /* Phone: Quick Actions row becomes a 2-column grid so labels don't wrap
       onto their own row each. */
    .quick-actions-card .rz-stack {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 6px !important;
    }

        .quick-actions-card .rz-stack > div:first-child {
            grid-column: 1 / -1;
        }

    .quick-actions-card .quick-action-btn {
        width: 100% !important;
        justify-content: flex-start !important;
    }
}

/* Time-series chart card — let the chart breathe vertically on mobile and
   prevent the legend from squeezing the plot area. */
.eq-time-series-card {
    overflow: hidden;
}

    .eq-time-series-card .rz-chart {
        max-width: 100%;
    }

@media (max-width: 768px) {
    .eq-time-series-card .rz-chart-tick text,
    .eq-time-series-card .rz-axis-tick text {
        font-size: 10px !important;
    }

    .eq-time-series-card .rz-chart-legend {
        font-size: 11px !important;
    }
}

/* Dashboard filter bar — keep dropdown + refresh on a single row, even on
   narrow phones. We DO NOT force a compact height: the 3-tier system +
   touch-uplift already give Small buttons 32 px desktop / 40 px touch,
   and the 16 px iOS-zoom-prevention font on inputs needs the taller
   container so text doesn't overflow on tablet. Earlier I forced
   32 px here and it clipped the dropdown text on tablet (16 px font +
   Radzen padding > 32 px container). */
@media (min-width: 1025px) and (pointer: fine) {
    /* Desktop only — tighten heights for density. Tablet/touch keeps the
       larger natural sizing for legibility + finger-friendly hit area. */
    .dashboard-filters-bar .rz-dropdown {
        min-height: 32px !important;
    }

    .dashboard-filters-bar .rz-button.dashboard-refresh-btn,
    .dashboard-filters-bar .dashboard-refresh-btn {
        min-height: 32px !important;
        padding: 4px 10px !important;
    }
}

@media (max-width: 480px) {
    /* Phone: drop the "Refresh" word so the button is icon-only and
       guaranteed to share the row with the dropdown. */
    .dashboard-filters-bar .dashboard-refresh-btn .refresh-label {
        display: none !important;
    }

    .dashboard-filters-bar .dashboard-refresh-btn {
        min-width: 44px !important;
        width: 44px !important;
        padding: 0 !important;
        justify-content: center !important;
    }

        .dashboard-filters-bar .dashboard-refresh-btn .rz-icon,
        .dashboard-filters-bar .dashboard-refresh-btn .rzi {
            margin-right: 0 !important;
        }
}

/* ===== END MODERN THEME LAYER ===== */

:root:root {
    /* Neutrals - cool blue-gray scale (derived from navy) */
    --rz-white: #FFFFFF;
    --rz-black: #000000;
    --rz-base-50: #F7F8FA;
    --rz-base-100: #EEF0F4;
    --rz-base-200: #DDE1E8;
    --rz-base-300: #C5CAD4;
    --rz-base-400: #8D95A5;
    --rz-base-500: #616B7E;
    --rz-base-600: #475264;
    --rz-base-700: #343E4F;
    --rz-base-800: #1F2937;
    --rz-base-900: #111827;

    /* Primary - Brand Blue (from logo) */
    --rz-primary: #29ABE2;
    --rz-primary-light: #4DBDE8;
    --rz-primary-lighter: rgba(41, 171, 226, 0.10);
    --rz-primary-dark: #1E8FBF;
    --rz-primary-darker: #16749C;

    /* Secondary - Deep Navy (derived from brand blue) */
    --rz-secondary: #1B2A4A;
    --rz-secondary-light: #263B63;
    --rz-secondary-lighter: rgba(27, 42, 74, 0.10);
    --rz-secondary-dark: #131E36;
    --rz-secondary-darker: #0C1424;

    /* Info - Brand Blue */
    --rz-info: #29ABE2;
    --rz-info-light: #4DBDE8;
    --rz-info-lighter: rgba(41, 171, 226, 0.10);
    --rz-info-dark: #1E8FBF;
    --rz-info-darker: #16749C;

    /* Success - Brand Green (from logo "3") */
    --rz-success: #009B4D;
    --rz-success-light: #1AB866;
    --rz-success-lighter: rgba(0, 155, 77, 0.10);
    --rz-success-dark: #008040;
    --rz-success-darker: #006633;

    /* Warning - Brand Gold (from logo "6") */
    --rz-warning: #E6A817;
    --rz-warning-light: #F0BA3A;
    --rz-warning-lighter: rgba(230, 168, 23, 0.10);
    --rz-warning-dark: #CC9410;
    --rz-warning-darker: #A67A0D;

    /* Danger - Brand Red (from logo "0") */
    --rz-danger: #C1272D;
    --rz-danger-light: #D44348;
    --rz-danger-lighter: rgba(193, 39, 45, 0.10);
    --rz-danger-dark: #A32025;
    --rz-danger-darker: #85191D;
    /* Chart series colors - Logo-anchored palette (Blue, Green, Gold, Red + complements) */
    --rz-series-1: #29ABE2;               /* Brand Blue (primary) */
    --rz-series-2: #009B4D;               /* Brand Green ("3") */
    --rz-series-3: #E6A817;               /* Brand Gold ("6") */
    --rz-series-4: #C1272D;               /* Brand Red ("0") */
    --rz-series-5: #6D6E71;               /* Brand Gray (logo text) */
    --rz-series-6: #7C3AED;               /* Purple (complement) */
    --rz-series-7: #F56510;               /* Orange (warm accent) */
    --rz-series-8: #1E8FBF;               /* Blue Dark */
    --rz-series-9: #EC4899;               /* Pink */
    --rz-series-10: #1AB866;              /* Green Light */
    --rz-series-11: #06B6D4;              /* Cyan */
    --rz-series-12: #F0BA3A;              /* Gold Light */
    --rz-series-13: #4DBDE8;              /* Blue Light */
    --rz-series-14: #D44348;              /* Red Light */
    --rz-series-15: #8B5CF6;              /* Violet */
    --rz-series-16: #0E7490;              /* Teal */
    --rz-series-17: #84CC16;              /* Lime */
    --rz-series-18: #A32025;              /* Red Dark */
    --rz-series-19: #475264;              /* Slate */
    --rz-series-20: #D946EF;              /* Fuchsia */
    --rz-series-21: #008040;              /* Green Dark */
    --rz-series-22: #CC9410;              /* Gold Dark */
    --rz-series-23: #16749C;              /* Blue Darker */
    --rz-series-24: #BE185D;              /* Rose */
    --light-blue: var(--rz-info-light);   /* Light Blue */
    --rz-panel-menu-item-background-color: var(--rz-secondary);
    --rz-grid-selected-background-color: var(--rz-primary-lighter);
    --rz-panel-menu-item-background-color: var(--rz-white);
    --rz-panel-menu-item-2nd-level-background-color: var(--rz-white);
    --rz-panel-menu-item-2nd-level-active-background-color: var(--rz-white);
    --rz-panel-menu-item-active-color: var(--rz-primary);
    --rz-panel-menu-item-2nd-level-active-color: var(--rz-primary);
    --rz-panel-menu-item-hover-background-color: var(--rz-primary);
    --rz-panel-menu-item-active-indicator: var(--rz-primary);
    --rz-panel-menu-item-2nd-level-hover-background-color: var(--rz-primary);
    --rz-panel-menu-item-color: #4B5563;
    --rz-menu-top-item-selected-color: var(--rz-secondary);
    --rz-menu-item-hover-background-color: var(--rz-secondary);
    --rz-menu-top-item-hover-color: var(--rz-secondary);
    --rz-sidebar-background-color: var(--rz-secondary); /*Changed*/
    --rz-panel-menu-item-active-background-color: var(--rz-white);
    --rz-button-disabled-opacity: 0.6;
    --rz-accordion-item-background-color: var(--rz-base-200);
    --rz-tabs-padding: 5px;
    --rz-datalist-item-padding: 5 px;
    --rz-dropdown-item-selected-background-color: var(--rz-primary);
    --rz-accordion-item-background-color: var(--rz-white);
    --rz-scheduler-toolbar-background-color: var(--rz-white);
    --rz-upload-button-bar-background-color: var(--rz-white);
    --rz-grid-frozen-cell-background-color: var(--rz-base-900);
    --rz-grid-header-background-color: var(--rz-secondary);
    --rz-grid-header-color: var(--rz-white);
    --rz-tabs-tab-background-color: var(--rz-base-300);
    --rz-switch-checked-background-color: var(--rz-primary);
    --rz-scheduler-view-selected-background-color: var(--rz-primary);
    --rz-scheduler-prev-next-button-background-color: var(--rz-primary);
    --rz-selectbar-selected-background-color: var(--rz-primary);
    --rz-selectbar-selected-border: var(--rz-primary);
    --rz-footer-padding: 4px;
    --rz-tooltip-background-color: var(--rz-base-400);
    --rz-tabs-tab-color: var(--rz-base-800);
    --rz-on-primary-lighter: var(--rz-primary-light);
    --rz-dropdown-item-hover-background-color: var(--rz-primary);
    --rz-dropdown-item-selected-hover-background-color: var(--rz-primary);
    --rz-datepicker-calendar-hover-background-color: var(--rz-primary-light);
    --rz-dialog-background-color: var(--rz-white);
    --rz-layout-body-background-color: #f4f5f9;
    --rz-layout-body-padding: 0px;
    --rz-dialog-content-padding: 2px;
    --rz-scheduler-event-background-color: var(--rz-base-400);
    --rz-grid-header-cell-padding: 8px;
    --rz-header-min-height: 3.9rem;
    --rz-menu-top-item-background-color: var(--rz-secondary);
    --rz-menu-top-item-selected-color: var(--rz-white);
    --rz-menu-top-item-color: var(--rz-white);
    --rz-menu-top-item-icon-color: var(--rz-white);
    --rz-menu-top-item-icon-hover-color: var(--rz-white);
    --rz-menu-top-item-hover-color: var(--rz-white);
}


body {
    font-family: 'Material Symbols Outlined', sans-serif;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50060;
}

.validation-message {
    color: #e50060;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }


.overlay-loading {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    background-color: rgba(255, 255, 255, 0.6);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

@media print {
    .no-print, .no-print * {
        display: none !important;
    }
}


@media (max-width: 768px) {
}

.student-card {
    box-shadow: rgb(202 204 209) 0px 3px 8px;
    border: 1px solid #cbccd1;
}

    .student-card .rz-label {
        color: #555555;
    }

.student-title-panel {
    background-color: #f3f5f9;
    border-radius: 10px;
}

    .student-title-panel .student-name {
        font-size: 22px;
    }

        .student-title-panel .student-name .rz-button-text {
            color: #4f4f50;
        }

    .student-title-panel .et-label {
        font-size: 14px;
        padding: 0;
        margin: 0;
        margin-left: 18px;
        color: #009cf6;
    }

.student-title-control-panel {
    background-color: var(--rz-white);
    padding: 5px;
    border-radius: 10px;
}

    .student-title-control-panel .rz-button-box {
        gap: .5rem !important;
    }
/*
    .student-title-control-panel .rz-button.rz-variant-outlined.rz-secondary.rz-shade-default {
        box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary);
        color: var(--rz-secondary);
    }*/

.classroom-exam-input {
}

    .classroom-exam-input .rz-form-field-end {
        padding: 0 !important;
        margin-left: 5px;
    }

    .classroom-exam-input .rz-form-field-content {
        padding: 0px !important;
        margin: 0px;
    }

.rz-tabview.rz-tabview-top {
    padding: 2px;
}

.rz-tabview-nav {
    overflow-x: auto;
    overflow-y: hidden;
}

.rz-border {
    border-color: var(--rz-base-400) !important;
    border-radius: var(--rz-accordion-border-radius);
}

.rz-chip .rz-chip-text p {
    margin: 0 !important;
}

/* changes */
#UserName:focus {
    border: 1px solid var(--light-blue)
}

#Password:focus {
    border: 1px solid var(--light-blue)
}

.student-name {
    color: var(--rz-secondary);
    /* <button tabindex="0" type="button" title="Attendance" textstyle="TextStyle.H6" tagname="TagName.H5" class="rz-button rz-button-md rz-variant-text rz-primary rz-shade-default rz-color-on-secondary-lighter student-name" id="hcm6jtPsGk" _bl_6c46eee2-de88-40b5-bd05-c2b2f06fe947="" fdprocessedid="jgq858"><span class="rz-button-box"><span class="rz-button-text">Aarav Kapoor</span></span></button> */
    /* remove rz-color-on-secondary-lighter from above button for all*/
}

    .student-name:hover {
        color: var(--rz-secondary) !important;
    }


.student-profile-card {
    background: var(--rz-primary-light) !important;
    height: 100%;
}

    .student-profile-card .rz-text-caption {
        color: var(--rz-white) !important;
    }

    .student-profile-card .rz-text-body2 {
        color: var(--rz-white) !important;
    }

    .student-profile-card .rzi {
        color: var(--rz-white);
    }

.student-title .rz-text-body2 {
    color: var(--light-blue);
}

.student-profile-panel .student-profile-item {
    border-bottom: 1px solid #e9ecef;
    width: 100%;
}

    .student-profile-panel .student-profile-item .student-profile-label {
        width: 150px;
        padding-top: 15px;
        padding-bottom: 0px;
        margin-bottom: 0px;
        font-size: 16px;
    }

    .student-profile-panel .student-profile-item .student-profile-text {
        padding-top: 15px;
        padding-bottom: 0px;
        color: var(--rz-black);
        margin-bottom: 0px;
        font-size: 16px;
        flex: 1;
        font-weight: 600;
        color: var(--rz-secondary);
    }

.my-profile-container .rz-dialog-side-content {
    height: 94%;
}

.rz-autocomplete-list-item:hover {
    background-color: var(--rz-primary) !important;
    color: var(--rz-white) !important;
}

.rz-autocomplete-list-item .rz-button:hover {
    color: var(--rz-white) !important;
}

.messages-item-group {
    background-color: var(--rz-primary-light) !important;
}

    .messages-item-group .messages-item-label {
        color: var(--rz-white) !important;
        padding-top: 5px;
        padding-left: 5px;
    }

    .messages-item-group i {
        color: var(--rz-white) !important;
        margin: 5px;
        max-width: 100% !important;
    }

.messages-item-content {
    color: var(--rz-white) !important;
}

.rz-data-row .rz-cell-data .rz-link-text {
    font-weight: bolder !important;
}

.rz-splitbutton .rz-button:hover {
    color: var(--light-blue) !important;
}

/*Inventory Start*/

.inventory-stack {
}

.inventory-stack .rz-datatable {
    border:none;
}
/*Inventory End*/
/* recieved messages class */
.recieved-messages-item-group {
    width: fit-content;
    margin-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
    background-color: var(--light-blue);
    max-width: 100% !important;
}

    .recieved-messages-item-group .messages-item-label {
        color: var(--rz-white) !important;
        padding-top: 5px;
        padding-left: 5px;
    }

.rz-tick .rz-tick-text {
    fill: var(--rz-black);
}

.recieved-messages-item-group {
    background-color: var(--rz-primary);
}

    .recieved-messages-item-group i {
        color: var(--rz-white) !important;
        margin: 5px;
    }


.rz-scheduler {
    font-weight: bolder;
}

.rz-tabview-title {
    text-wrap-mode:nowrap;
}


.students-in-classroom-div {
    overflow: hidden;
    border: none !important;
    border-radius: 7px;
    padding-right: 7px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    transition: 0.1s linear scale;
}

    .students-in-classroom-div .download-highlight .rz-button {
        color: var(--light-blue) !important;
    }

        .students-in-classroom-div .download-highlight .rz-button:hover {
            color: var(--rz-primary) !important;
        }

@keyframes gradientAnimate {
    0% {
        background-position: 0 50%;
    }

    100% {
        background-position: 200% 50%;
    }
}

.rz-header {
    /* Use longhand `background-color` — the shorthand `background` would
       reset background-image and wipe out the topographic contour pattern
       defined in the modern theme layer (~line 631). */
    background-color: var(--bg-header) !important;
    /* color:var(--rz-white) !important; */
}

.rz-sidebar-toggle {
    background: var(--rz-secondary) !important;
    border: none !important;
    color: var(--rz-white) !important;
}

ul.rz-profile-menu {
    background: var(--rz-secondary) !important;
    border: none !important;
    color: var(--rz-white) !important;
}

/* add this class to the right side user logo div and to the i inside that div too. Also to the H6 below the heading */
.dark-blue-div {
    background-color: var(--rz-secondary) !important;
    color: var(--rz-white) !important;
}

    .dark-blue-div .rz-text-body1 {
        color: var(--rz-white) !important;
    }

ul.rz-profile-menu.dark-blue-div {
    background: var(--rz-secondary) !important;
    border: none !important;
    color: var(--rz-white) !important;
}

    ul.rz-profile-menu.dark-blue-div .rz-navigation-item {
        background: var(--rz-secondary) !important;
        border: none !important;
        color: var(--rz-white) !important;
    }

    ul.rz-profile-menu.dark-blue-div .rz-navigation-item-wrapper-active {
        background: var(--rz-secondary) !important;
        border: none !important;
        color: var(--rz-white) !important;
    }

    ul.rz-profile-menu.dark-blue-div .rz-navigation-item.menu-items-pop {
        background: var(--rz-white) !important;
        border: none !important;
        color: var(--rz-secondary) !important;
    }

.dark-blue-div .rz-navigation-item .rz-navigation-item-icon-children {
    background: var(--rz-secondary) !important;
    border: none !important;
    color: var(--rz-white) !important;
}

.header-school-name {
}

.school-heading {
    color: var(--rz-info-dark);
    background-size: 200% auto;
    margin: 0 !important;
    font-size: 1rem !important;
    font-weight: bolder !important;
}

/* Page Header Styles - Common across all modules */
.page-header-title {
    margin: 0 !important;
    font-weight: 600 !important;
    font-size: 1.25rem !important;
}

.page-header-subtitle {
    color: #666;
    margin-top: 4px;
}

.bolder-text {
    font-weight: bolder !important;
}

.classroom-control:hover {
    color: var(--light-blue) !important;
}

.remove-margin-bottom {
    margin-bottom: 0px !important;
}

.rz-dropdown-item {
    transition: background-color linear 0.1s !important;
}

.rz-multiselect-item-content .rz-text-body1 {
    margin: 0;
}

.rz-dropdown-items-wrapper .rz-dropdown-item:hover {
    background-color: var(--rz-primary-light);
}

.rz-multiselect-items-wrapper .rz-text-body1 {
    color: inherit !important;
}

@media (max-width: 768px) {
    .rz-footer .equant360-footer {
        display: none !important;
    }

    .rz-layout .app-body {
        padding-right: 0rem !important;
    }

    .app-body .menu-icons {
        display: none !important;
    }
}

@media (max-width: 1024px) {
    .messages {
        padding: 0px !important;
    }
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    margin-bottom: 0px !important;
}

@media print {

    .rz-sidebar {
        display: none !important;
    }

    .no-print, .no-print * {
        visibility: hidden;
        display: none !important;
    }

    .app-body {
        width: 1400px;
    }

    @page {
        size: 297mm 210mm; /* landscape */
        /* you can also specify margins here: */
        margin: 25mm;
        margin-right: 45mm; /* for compatibility with both A4 and Letter */
    }
}

/* style sheet for "A4" printing */
@media print {
    .rz-sidebar {
        display: none !important;
    }

    .no-print, .no-print * {
        visibility: hidden;
        display: none !important;
    }

    @page {
        margin: 3cm;
        size: A4 landscape;
    }
}

.menu-icons {
    max-width: 80px;
    background-color: var(--rz-white);
}

.rz-layout .app-body {
    padding-right: 1rem;
    padding-left: 10px;
    height: 100%;
    width: 100%;
    overflow-x: hidden; /* Prevent page-level horizontal scroll */
}

.top-controls-panel-grade .top-controls-section {
    border: none !important;
}

    .top-controls-panel-grade .top-controls-section .rz-form-field-content {
        border-radius: 15px;
        border: 1.5px solid #2679e5;
        padding: 1rem;
        background-color: #f7fbff;
    }

        .top-controls-panel-grade .top-controls-section .rz-form-field-content .rz-form-field-label {
            font-size: 14px;
            border-radius: 15px;
            border: 1px solid #2679e5;
            padding-top: 3px;
            padding-bottom: 3px;
            padding-left: 6px;
            padding-right: 6px;
            margin-left: 20px;
        }

        .top-controls-panel-grade .top-controls-section .rz-form-field-content:focus {
            border-radius: 15px !important;
            border: 1.5px solid #2679e5 !important;
            padding: 1rem !important;
            background-color: #f7fbff !important;
        }

.top-controls-panel-asses .top-controls-section {
    border: none !important;
}

.top-controls-panel-asses .rz-form-field:hover .rz-form-field-content {
    border-radius: 15px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px !important;
    border: 1px solid rgb(215 216 217) !important;
    background-color: rgb(250 250 251) !important;
    row-gap: 0px;
    padding: 1rem;
}

.top-controls-panel-asses .top-controls-section .rz-form-field-content {
    border-radius: 15px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px !important;
    border: 1px solid rgb(215 216 217) !important;
    background-color: rgb(250 250 251) !important;
    row-gap: 0px;
    padding: 1rem;
}

    .top-controls-panel-asses .top-controls-section .rz-form-field-content .rz-form-field-label {
        font-size: 14px;
        border-radius: 15px;
        border: 1px solid rgb(215 216 217);
        padding-top: 3px;
        padding-bottom: 3px;
        padding-left: 6px;
        padding-right: 6px;
        margin-left: 20px;
    }

    .top-controls-panel-asses .top-controls-section .rz-form-field-content:focus {
        box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px !important;
        border: 1px solid rgb(215 216 217) !important;
        background-color: rgb(250 250 251) !important;
    }

.top-controls-panel {   
    background-color: var(--rz-white);
    border-end-end-radius: 15px 15px;
    border-end-start-radius: 15px 15px;
}

    .top-controls-panel .top-controls-panel-asses {
    }

.app-body .app-body-content {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}

.classroom-control-filter-panel {
    background-color: var(--rz-white);
    border: 1px solid var(--rz-white);
    border-radius: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-right: 20px;
    padding-left: 20px;
}

    .classroom-control-filter-panel .rz-form-field-content {
        margin-block: 0px;
    }

    .classroom-control-filter-panel .classroom-control-search-icon {
        color: #d6d6d6;
    }

    .classroom-control-filter-panel .classroom-control-search-control {
        height: 30px;
    }

    .classroom-control-filter-panel .rz-label {
        padding: 3px;
        color: #a7a7a7;
    }

    .classroom-control-filter-panel .rz-text-body1 {
        border: 1px solid #e2e2e2;
        border-radius: 10px;
        margin-block: 0px;
        padding: 5px;
        width: 30px;
        text-align: center;
    }

.app-body .app-body-content {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}

.syllabus-stack .rz-row {
    background-color: var(--rz-white);
}

/* Syllabus/Subjects Page Styles */
.syllabus-stack {
    background-color: var(--rz-white);
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    padding: 1rem;
}

    .syllabus-stack .rz-row {
        width: 100%;
    }

.syllabus-header .syllabus-control {
    width: 100%;
}

    .syllabus-stack .rz-row-container {
        border: 1px solid #0263b7;
        background-color: #C2DDFF21;
        border-radius: 15px;
        margin-top: 0.5rem;
    }

    .syllabus-stack .add-edit-btn {
        background-color: #1e293b !important;
    }

    .syllabus-stack .container-divider {
        border-left: 2px solid #DADDE6;
        padding-left: 5px;
    }

    .syllabus-stack .syllabus-upload-btn {
        background-color: var(--rz-secondary) !important;
    }

.syllabus-upload .rz-fileupload-content {
    display: none;
}

.syllabus-upload .rz-fileupload-buttonbar {
    background-color: var(--rz-base-200);
}

    .syllabus-upload .rz-fileupload-buttonbar .rz-fileupload-choose {
        background-color: var(--rz-base-200);
        color: var(--rz-text-color);
        height: auto;
    }

.syllabus-html-stack {
    background-color: var(--rz-white);
    border-radius: 5px;
    padding: 1rem;
}

    .syllabus-html-stack .save-btn {
        background-color: #1e293b !important;
    }

    .syllabus-html-stack .cancel-btn {
        background-color: #DEE2E6 !important;
        color: #212529 !important;
    }

.exam-settings-stack {
    height: 100%;
}

    .exam-settings-stack .exam-header {
        background-color: var(--rz-white);
        border-bottom-left-radius: 15px;
        border-bottom-right-radius: 15px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.05);
        width: 100%;
    }

    .exam-settings-stack .subject-header {
        width: 100%;
        border-radius: 1rem;
        background-color: #F8FAFB;
    }

    .exam-settings-stack .exam-subjects-tab {
        background-color: var(--rz-white);
        width: 100%;
        margin-top: 1rem;
        border-radius: 10px;
        padding: 10px;
    }

    .exam-settings-stack .exam-stack-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        width: 100%;
    }

    .exam-settings-stack .exam-stack-left {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 0.5rem;
    }

    .exam-settings-stack .exam-grade-left {
        display: flex;
        align-items: center;
        min-width: 180px;
        gap: 0.5rem;
    }

    .exam-settings-stack .exam-grade-row {
        display: flex;
        align-items: center;
        width: 100%;
        margin-bottom: 0.5rem;
    }

    .exam-settings-stack .exam-stack-right {
        display: flex;
        align-items: flex-end;
        justify-content: flex-end;
    }

.exam-top-panel {
    background-color: var(--rz-white);
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.exam-timetable-header {
    width: 100%;
    border: 1px solid #0263b7;
    padding: 15px;
    margin: 0.5rem;
    background-color: #C2DDFF21; /* Slight blue transparent */
    border-radius: 15px;
    display: flex;
    align-items: center;
}

    .exam-timetable-header .exam-actions {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        flex-wrap: wrap;
        gap: 1rem;
    }

.exam-calender-container {
    max-width: 1000px;
    margin: 0 auto;
    font-size: 15px;
    border: 2px solid #ccc;
    border-radius: 3px;
}

    .exam-calender-container .calendar-row-header {
        font-weight: bold;
        background-color: #F8FAFB;
        border-bottom: 2px solid #D9D9D9;
    }

    .exam-calender-container .calendar-rows {
        border-bottom: 2px solid #D9D9D9;
    }

    .exam-calender-container .even-rows {
        background-color: #F8FAFB;
    }

.examresults-header {
    background-color: var(--rz-white);
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.examreportcard-header {
    background-color: var(--rz-white);
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    padding: 1rem;
}

.examreportcard-stack {
    min-height: 100vh;
    background-color: var(--rz-background);
    padding: 1rem;
}

    .examreportcard-stack .cardheader {
        background: white;
        width: 100%;
        max-width: 794px;
        padding: 2rem;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
        border-radius: 8px;
    }

    .examreportcard-stack .logostyle {
        max-width: 150px;
        width: 100%;
        background-color: lightgray;
    }

    .examreportcard-stack .examtypeheader {
        background-color: #EAF3F7;
        padding: 0.5rem;
        text-align: center;
        color: white;
        margin-bottom: 1rem;
    }

    .examreportcard-stack .markscardheader {
        padding-bottom: 10px;
        margin-top: 20px;
    }

    .examreportcard-stack .markstotal {
        border-top: 2px solid #4a90e2;
        padding-top: 10px;
        margin-top: 15px;
    }

    .examreportcard-stack .signaturebox {
        height: 80px;
        width: 250px;
        border: 1px solid #ccc;
    }

    .examreportcard-stack .noteinfo {
        font-size: 0.9rem;
        color: gray;
    }

.attendance-header {
    width: 100%;
    background-color: var(--rz-white);
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    display: flex;
    gap: 0;
}

    .attendance-header .grade-splitbutton {
        width: 100%;
        background-color: #C2DDFF21;
    }

.attendance-stack {
    width: 100%;
    background-color: var(--rz-white);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.calendar-stack {
    background-color: var(--rz-white);
    border-radius: 10px;
    margin-top: 15px;
    padding: 0.5rem;
    height: 100%;
    width: 100%;
}

    .calendar-stack .calender-label {
        font-weight: bolder;
        font-size: large;
        text-align: left;
        display: block;
        margin-top: 5px;
    }

    .calendar-stack .rz-month-view .rz-slot {
        border: none !important;
    }

    .calendar-stack .rz-event-list-btn {
        padding-top: 3px;
    }

.dashboard-stack {
    background-color: var(--rz-white);
    border-end-end-radius: 15px 15px;
    border-end-start-radius: 15px 15px;
    padding: 15px 15px 15px 15px;
}

    .dashboard-stack .profile-avatar {
        padding: 10px;
    }

    .dashboard-stack .student-info .student-name {
        color: var(--rz-black);
        font-size: 25px;
        font-weight: 600;
    }

    .dashboard-stack .student-info .student-grade .student-text {
        color: #475569;
        font-size: 15px;
        font-weight: 600;
    }

    .dashboard-stack .student-info .student-label {
        color: #6c777f;
        font-size: 15px;
    }

    .dashboard-stack .student-info .student-text.student-prop {
        color: var(--rz-black);
        font-size: 15px;
    }

.dashboard-item {
    background-color: var(--rz-white);
    border-radius: 15px 15px;
    padding: 10px;
}

.dashboard-items .dashboard-item i {
    padding: 15px;
    font-size: 30px;
    border-radius: 50px;
}

.dashboard-items .dashboard-item .dashboard-text {
    font-size: 30px;
    font-weight: 600;
}

.dashboard-items .dashboard-item .rz-month-view .rz-slot {
    border: none !important;
}

.dashboard-items .dashboard-item .rz-event-list-btn {
    padding-top: 3px;
}

.dashboard-items .dashboard-item .dashboard-item-block {
    border-radius: 10px 10px;
    background-color: #f4f5f9;
    padding: 20px;
}

.dashboard-items .dashboard-item .dashboard-item-value {
    font-weight: 800;
    font-size: 30px;
}

.dashboard-items .dashboard-item .dashboard-item-label {
    font-weight: 300;
    font-size: 15px;
}

.rz-button.rz-variant-outlined.rz-primary.rz-shade-default {
    box-shadow: inset 0 0 0 var(--rz-border-width) #2679e5 !important;
    color: var(--rz-black) !important;
}

.dashboard-item .asses {
    padding: 15px;
    width: 100%;
}

    .dashboard-item .asses .asses-title {
        font-size: 18px;
        font-weight: 600;
    }

    .dashboard-item .asses .asses-box {
        border-radius: 5px 5px;
        width: 100%;
    }

    .dashboard-item .asses .asses-subject-box {
        width: 100%;
        background-color: #e9f4fb;
        padding: 10px;
        border-start-end-radius: 5px 5px;
        border-start-start-radius: 5px 5px;
    }

        .dashboard-item .asses .asses-subject-box .sub-name {
            font-size: 12px;
        }

        .dashboard-item .asses .asses-subject-box .unit-name {
            font-size: 16px;
            font-weight: 500;
        }

    .dashboard-item .asses .asses-due-date {
        width: 100%;
        background-color: #7394d4;
        padding: 10px;
        border-end-end-radius: 5px 5px;
        border-end-start-radius: 5px 5px;
    }

.message-list {
    background-color: var(--rz-white);
    border-radius: 20px;
}

    .message-list .message-list-item {
        padding: 10px;
        color: var(--rz-black);
        min-height: 56px;
    }

        .message-list .message-list-item .rz-text-caption {
            color: var(--rz-white);
        }

        .message-list .message-list-item.selected-message-item {
            background-color: var(--rz-primary);
            color: var(--rz-white);
        }

        .message-list .message-list-item:hover {
            background-color: var(--rz-primary);
            color: var(--rz-white);
        }

.messages {
    border-radius: 20px;
    background-color: var(--rz-white);
    width: 100%;
    padding: 5px;
    height: 100%;
}

    .messages .messages-item-group {
        width: fit-content;
        margin-bottom: 5px;
        background-color: var(--rz-base-50);
        padding-left: 10px;
        padding-right: 10px;
    }

        .messages .messages-item-group .messages-item-label {
            color: var(--rz-white);
        }

        .messages .messages-item-group .messages-item-content {
            margin: 3px;
        }

.messages-header {
    background-color: var(--rz-white);
    width: 100%;
    border-radius: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
}

    .messages-header .header-button {
        border-radius: 6px;
        padding: 10px 20px;
        height: 40px;
        width: 100%;
    }

    .messages-header .search-icon {
        position: absolute;
        left: 10px;
        top: 10px;
        color: #888;
    }

    .messages-header .search-box {
        padding-left: 30px;
        padding-right: 10px;
        border-radius: 12px;
        height: 40px;
        width: 100%;
        border: 1px solid #ddd;
        box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    }

.messages-stack {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100vh;
    overflow: hidden;
    padding-bottom: 5px;
}

    .messages-stack .messages-module {
        width: 100%;
        display: flex !important;
        flex: 1 !important;
        flex-direction: column !important;
        overflow: hidden;
        flex-wrap: nowrap;
    }

        .messages-stack .messages-module .messages-module-row {
            width: 100%;
            display: flex !important;
            flex: 1 !important;
            overflow: hidden;
            flex-wrap: nowrap;
        }

            .messages-stack .messages-module .messages-module-row .messages {
                width: 100%;
                display: flex !important;
                flex: 1;
                flex-direction: column !important;
                overflow: hidden;
                flex-wrap: nowrap;
                --rz-gap: 0px;
                flex-wrap: nowrap;
            }

            .messages-stack .messages-module .messages-module-row .messages-list {
                width: 100%;
                display: flex !important;
                flex: 1;
                flex-direction: column !important;
                overflow: hidden;
                flex-wrap: nowrap;
            }

/* Teacher Timetable */

.teacher-schedule-dialog {
    background-color: #CECECE !important;
}

.teacher-schedule-stack .rz-datatable {
    border: none;
    background: #F3F4F8;
}

.teacher-schedule-stack .rz-grid-table {
    width: auto;
}

.teacher-schedule-stack .teacher-schedule-health-dashboard {
    background: #F3F4F8;
    padding: 15px;
}

    .teacher-schedule-stack .teacher-schedule-health-dashboard .teacher-schedule-health-dashboard {
        background: #FFFFFF;
        border-radius: 11px;
    }

.teacher-schedule-stack .teacher-schedule-health-score {
    font-style: normal;
    font-weight: 600;
    font-size: 26px;
    color: #4F4F50;
}

.teacher-schedule-stack .teacher-schedule-table-stack {
    background: #FFFFFF;
    box-shadow: 0px 4px 6px -4px rgba(24, 39, 75, 0.12), 0px 8px 8px -4px rgba(24, 39, 75, 0.08);
    border-radius: 13px;
    padding: 10px;
}

.teacher-schedule-stack .session-allocation-table .rz-grid-table {
    border-collapse: separate;
    border-spacing: 10px 5px; /* horizontal and vertical spacing between cells */
}

    .teacher-schedule-stack .session-allocation-table .rz-grid-table thead th {
        background-color: var(--rz-primary);
        border-radius: 12px;
        height: 40px;
    }

    .teacher-schedule-stack .session-allocation-table .rz-grid-table td {
        padding: 0 !important;
    }

    .teacher-schedule-stack .session-allocation-table .rz-grid-table .timetable-cell {
        box-sizing: border-box;
        background: #FBFBFB;
        box-sizing: border-box;
        margin: 2px;
        border-radius: 12px;
    }

    .teacher-schedule-stack .session-allocation-table .rz-grid-table .rz-cell-data {
        height: 60px;
    }

    .teacher-schedule-stack .session-allocation-table .rz-grid-table .timetable-cell .subject-name {
        font-style: normal;
        font-weight: 400;
        font-size: 12px;
        align-items: center;
        color: #767676;
    }

    .teacher-schedule-stack .session-allocation-table .rz-grid-table .timetable-cell .grade-name {
        font-style: normal;
        font-weight: 400;
        font-size: 16px;
        align-items: center;
        color: #000000;
    }

    .teacher-schedule-stack .session-allocation-table .rz-grid-table .timetable-cell-break {
        box-sizing: border-box;
        background: var(--rz-white);
        margin: 2px;
        border-radius: 12px;
    }

.teacher-schedule-health-dashboard-widget {
    background: #FFFFFF;
    border-radius: 11px;
    padding: 15px;
}

    .teacher-schedule-health-dashboard-widget .widget-icon {
        color: #5B93FF;
        font-size: 30px;
    }

    .teacher-schedule-health-dashboard-widget .widget-text {
        font-style: normal;
        font-weight: 600;
        font-size: 20px;
        color: #000000;
    }

    .teacher-schedule-health-dashboard-widget .widget-title {
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        color: #767676;
    }

    .teacher-schedule-health-dashboard-widget .widget-container {
        position: relative;
        width: 100%;
        height: 100%;
    }

    .teacher-schedule-health-dashboard-widget .info-icon-top-right {
        position: absolute;
        top: 6px;
        right: 6px;
        font-size: 18px;
        color: var(--rz-primary);
        cursor: help;
    }


.class-scheduler-stack {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100vh;
    overflow: hidden;
}

    .class-scheduler-stack .class-scheduler-parent, .class-scheduler-stack .class-scheduler-parent-child, .class-scheduler-stack .class-scheduler-parent-col {
        display: flex !important;
        flex: 1 !important;
        flex-direction: column !important;
    }

    .class-scheduler-stack .class-schedule-header {
        background-color: var(--rz-white);
        border-bottom-left-radius: 15px;
        border-bottom-right-radius: 15px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.05);
        width: 100%;
    }

    .class-scheduler-stack .class-timetable-header {
        background-color: var(--rz-white);
        border-radius: 15px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.05);
        width: 100%;
    }

    .class-scheduler-stack .class-schedule-wizard {
        background-color: var(--rz-white);
        border-radius: 15px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.05);
        width: 100%;
        display: flex !important;
    }

        .class-scheduler-stack .class-schedule-wizard .text-divider {
            font-size: 40px;
            font-weight: 100;
        }

        .class-scheduler-stack .class-schedule-wizard .wizard-item {
            padding: 8px;
            /*background-color: #F3F5F9;*/
            border: 1px solid #E9ECEF;
            font-style: normal;
            font-weight: 400;
            font-size: 12px;
            color: #4F4F50;
            border-radius: 12px;
        }

            .class-scheduler-stack .class-schedule-wizard .wizard-item.active {
                /*background-color: #00A6E0;*/
                border: 1px solid #A1DDFF;
                border-radius: 12px;
            }

            .class-scheduler-stack .class-schedule-wizard .wizard-item.completed {
                /*background-color: #16B859;*/
                border: 1px solid #E9ECEF;
                border-radius: 12px;
            }

        .class-scheduler-stack .class-schedule-wizard .timetable-title {
            font-weight: 600;
            font-size: 16px;
            font-style: normal;
            font-weight: 600;
            color: #4F4F50;
        }

        .class-scheduler-stack .class-schedule-wizard .input-label {
            font-size: small;
            margin: 0;
            padding: 0;
            font-style: normal;
            font-weight: 400;
            font-size: 10px;
            color: #4F4F50;
        }

        .class-scheduler-stack .class-schedule-wizard .input-text {
            font-size: medium;
            margin: 0;
            padding: 0;
            font-style: normal;
            font-weight: 400;
            font-size: 12px;
            color: #262526;
        }

    .class-scheduler-stack .class-schedule-records {
        background-color: var(--rz-white);
        border-radius: 15px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.05);
        width: 100%;
    }

        .class-scheduler-stack .class-schedule-records .text-divider {
            font-size: 40px;
            font-weight: 100;
        }

        .class-scheduler-stack .class-schedule-records .timetable-title {
            font-weight: 600;
            font-size: 16px;
            font-style: normal;
            font-weight: 600;
            color: #4F4F50;
        }

        .class-scheduler-stack .class-schedule-records .input-label {
            font-size: small;
            margin: 0;
            padding: 0;
            font-style: normal;
            font-weight: 400;
            font-size: 10px;
            color: #4F4F50;
        }

        .class-scheduler-stack .class-schedule-records .input-text {
            font-size: medium;
            margin: 0;
            padding: 0;
            font-style: normal;
            font-weight: 400;
            font-size: 14px;
            color: #262526;
        }

    .class-scheduler-stack .rz-switch.rz-switch-checked .rz-switch-circle {
        background-color: #475569;
    }

    .class-scheduler-stack .input-controls {
        border: 1px solid #0263b7;
        background-color: #C2DDFF21;
        padding: 15px 20px;
        border-radius: 15px;
        flex: 1 1 auto;
    }

    .class-scheduler-stack .teacher-allocation-panel {
        background-color: var(--rz-white);
        border-radius: 15px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.05);
        padding: 10px;
        display: flex !important;
        flex: 1 !important;
        overflow: hidden;
    }

.teacher-allocation-panel .teacher-list-panel {
    display: flex !important;
    flex: 1 !important;
}

    .teacher-allocation-panel .teacher-list-panel .class-scheduler-parent-col {
        box-sizing: border-box;
        background: rgb(247 251 255);
        border: 1px solid #2679E5;
        box-shadow: 0px 1px 2px rgba(69, 73, 79, 0.3), 0px 1px 3px 1px rgba(69, 73, 79, 0.15);
        border-radius: 12px;
        padding: 10px;
    }

    .teacher-allocation-panel .teacher-list-panel .teacher-list, .teacher-allocation-panel .teacher-list-panel .allocation-list {
        flex: 1 1 0;
        min-height: 0;
        overflow-y: auto;
    }

    .teacher-allocation-panel .teacher-list-panel .util-title {
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        color: #1e293b;
    }

.teacher-allocation-panel .add-teachers-title {
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    color: #4F4F50;
    padding-bottom: 5px;
}

.teacher-allocation-panel .teacher-list-panel .teacher-list .teacher-list-item {
    background: #DCECFE;
    border: 1px solid #C9E1FF;
    border-radius: 4px;
    cursor: grab;
}

    .teacher-allocation-panel .teacher-list-panel .teacher-list .teacher-list-item .rz-text-body1 {
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        color: #1e293b
    }

    .teacher-allocation-panel .teacher-list-panel .teacher-list .teacher-list-item .teacher-busy-status {
        height: 100%;
    }

        .teacher-allocation-panel .teacher-list-panel .teacher-list .teacher-list-item .teacher-busy-status.free {
            background-color: seagreen;
        }

        .teacher-allocation-panel .teacher-list-panel .teacher-list .teacher-list-item .teacher-busy-status.partial {
            background-color: #EBA010;
        }

        .teacher-allocation-panel .teacher-list-panel .teacher-list .teacher-list-item .teacher-busy-status.busy {
            background-color: #F31155;
        }

.allocation-list .subject-header {
    background: #1e293b;
    border-radius: 6px 6px 0px 0px;
    padding: 5px;
}

    .allocation-list .subject-header .rz-text-body1 {
        font-style: normal;
        font-weight: 700;
        font-size: 14px;
        color: #FFFFFF;
    }

.allocation-list .subject-teachers {
    background-color: var(--rz-white);
    border-radius: 6px;
    pointer-events: auto !important;
}

    .allocation-list .subject-teachers .rz-form-field-content {
        margin: 0;
    }

    .allocation-list .subject-teachers .teacher-allocation-item {
        padding: 5px;
    }

        .allocation-list .subject-teachers .teacher-allocation-item .rz-button-icon-left {
            font-size: 15px;
        }

.time-allocation-stack {
    flex: 1 1 0;
    min-height: 0;
    overflow: auto;
    padding: 10px;
    background-color: #FFFFFF;
    border-radius: 12px;
}

    .time-allocation-stack .rz-grid-table {
        width: auto;
    }

    .time-allocation-stack .remove-time-slot-button {
        position: absolute;
        top: 0px;
        right: 0px;
    }

    .time-allocation-stack .add-time-slot-panel {
        box-sizing: border-box;
        background: #FFFFFF;
        border: 1px dashed #777777;
    }

    .time-allocation-stack .time-allocation-table .rz-grid-table {
        border-collapse: separate;
        border-spacing: 10px 5px; /* horizontal and vertical spacing between cells */
    }

        .time-allocation-stack .time-allocation-table .rz-grid-table thead th {
            background-color: var(--rz-white);
        }

        .time-allocation-stack .time-allocation-table .rz-grid-table td {
            padding: 0 !important;
        }

        .time-allocation-stack .time-allocation-table .rz-grid-table .timetable-cell {
            box-sizing: border-box;
            background: #D9D9D9;
            border: 1px solid #DEE2E7;
            margin: 2px;
            border-radius: 12px;
        }

        .time-allocation-stack .time-allocation-table .rz-grid-table .timetable-cell-break {
            box-sizing: border-box;
            background: var(--rz-white);
            margin: 2px;
        }

    .time-allocation-stack .session-allocation-table {
        border: none;
    }

        .time-allocation-stack .session-allocation-table .rz-grid-table {
            border-collapse: separate;
            border-spacing: 10px 5px; /* horizontal and vertical spacing between cells */
            border: none;
        }

        .time-allocation-stack .session-allocation-table .rz-data-grid-data {
            background: #F3F4F8;
            border-radius: 12px;
        }

        .time-allocation-stack .session-allocation-table .rz-grid-table thead th {
            background-color: var(--rz-primary);
            border-radius: 12px;
        }

        .time-allocation-stack .session-allocation-table .rz-grid-table td {
            padding: 0 !important;
        }

        .time-allocation-stack .session-allocation-table .rz-grid-table .timetable-cell {
            box-sizing: border-box;
            background: #D9D9D9;
            border: 1px solid #DEE2E7;
            margin: 2px;
            border-radius: 12px;
        }

            .time-allocation-stack .session-allocation-table .rz-grid-table .timetable-cell.timetable-cell-conflict {
                box-sizing: border-box;
                background: #D9D9D9;
                border: 5px groove red;
                margin: 2px;
                border-radius: 12px;
            }

            .time-allocation-stack .session-allocation-table .rz-grid-table .timetable-cell.timetable-cell-ignore-conflict {
                box-sizing: border-box;
                background: #D9D9D9;
                border: 5px groove #FFBF00;
                margin: 2px;
                border-radius: 12px;
            }

        .time-allocation-stack .session-allocation-table .rz-grid-table .timetable-cell-break {
            box-sizing: border-box;
            background: var(--rz-white);
            margin: 2px;
            border-radius: 12px;
        }

.session-allocation-table .subject-name {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    color: var(--rz-black);
}

.session-allocation-table .teacher-name .rz-button-text {
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    color: var(--rz-black);
}

.session-allocation-table .period-time {
    font-style: normal;
    font-weight: 400;
    font-size: 12.7px;
    color: #FFFFFF;
}

.session-allocation-table .period-type {
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    color: #FFFFFF;
}

.add-time-slots-popup {
    display: none;
    position: absolute;
    overflow: hidden;
    border: var(--rz-panel-border);
    background-color: var(--rz-panel-background-color);
    box-shadow: var(--rz-panel-shadow);
    border-radius: var(--rz-border-radius)
}

.time-allocation-stack .time-allocation-color-pallete {
    background-color: var(--rz-white);
    border-radius: 15px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    padding: 20px;
}

/* Teacher Timetable end */


.login-tab {
    min-height: 100vh;
    width: 100%;
    padding: 0px !important;
    margin: 0;
    overflow: hidden;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.feesettings-header {
    background-color: var(--rz-white);
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    padding: 1rem;
}

.feepayment-header {
    padding: 1rem;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    background: var(--rz-white);
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    flex-wrap: wrap;
}

    .feepayment-header .user-avatar {
        background-color: #f0f6ff;
        border-radius: 50%;
        padding: 0.75rem;
    }

        .feepayment-header .user-avatar .avatar-icon {
            font-size: 60px;
            color: #4a4a4a;
        }

        .feepayment-header .user-avatar .img-icon {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            object-fit: cover;
        }

    .feepayment-header .profile-row {
        width: 100%;
        flex-wrap: wrap;
    }

        .feepayment-header .profile-row .profile-item-fixed {
            width: 150px;
            gap: 0.25rem;
            display: flex;
            align-items: center;
        }

        .feepayment-header .profile-row .profile-item {
            gap: 0.25rem;
            display: flex;
            align-items: center;
        }

        .feepayment-header .profile-row .label-text {
            color: #888;
            font-size: 0.95rem;
        }

        .feepayment-header .profile-row .value-text {
            font-weight: bold;
            font-size: 1rem;
        }

.feepayment-card {
    background-color: #ffffff;
    padding: 1rem;
}

.feeshistory-card {
    padding: 1rem;
    height: 100%;
    position: relative;
}

    .feeshistory-card .payment-badge {
        color: white;
        padding: 0.25rem 0.5rem;
        border-radius: 6px;
    }

.feereciept-header {
    max-width: 795px;
    width: 100%;
    background-color: white;
    padding: 24px;
    border-radius: 8px;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.05);
}

    .feereciept-header .feetype-title {
        font-weight: bold;
        text-transform: uppercase;
    }

.gallery-header {
    background-color: var(--rz-white);
    width: 100%;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
    gap: 10px;
}

    .gallery-header .gallery-edit-header {
        border: 1px solid #0263b7;
        border-radius: 15px;
    }

.files-stack {
    width: 100%;
}

    .files-stack .elevated-box {
        background-color: var(--rz-white) !important;
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1) !important;
        border-radius: 4px;
    }

    .files-stack .elevated-title {
        flex: 1;
        text-align: center;
        height: 40px;
        padding: 8px 16px;
        font-weight: 600;
    }

    .files-stack .btn-40 {
        height: 40px;
        min-width: 40px;
    }

.album-section {
    width: 100%;
    padding: 8px;
    margin: 0;
}

    .album-section .gallery-img-column {
        margin-bottom: 16px;
    }

    .album-section .image-stack {
        position: relative;
        background: var(--rz-white);
        border-radius: 8px;
        padding: 4px;
    }

    .album-section .gallery-thumbnail {
        width: 100%;
        height: 130px;
        object-fit: cover;
        border-radius: 6px;
        transition: transform 0.2s ease-in-out;
    }

        .album-section .gallery-thumbnail:hover {
            transform: scale(1.03);
        }

    .album-section .image-delete-icon {
        position: absolute;
        top: 6px;
        right: 6px;
        color: red;
        background: white;
        border-radius: 50%;
        padding: 2px;
        cursor: pointer;
    }

    .album-section .nofile-message {
        text-align: center;
        padding: 200px 0;
    }

.album-list-wrapper {
    padding: 16px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

    .album-list-wrapper .album-list-header {
        font-weight: 600;
        font-size: 16px;
        color: #555;
        margin-bottom: 12px;
    }

    .album-list-wrapper .album-card {
        background-color: #2562A8;
        border-radius: 12px;
        color: white;
        height: 120px;
        cursor: pointer;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }

    .album-list-wrapper .album-card-hover:hover {
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
        transform: scale(1.02);
        transition: all 0.2s ease-in-out;
    }

/*Main Layout CSS*/

.menu-icon {
    display: inline-block;
    background-image: url("../img/icons.png?v8");
    background-repeat: no-repeat;
}

.menu-icon-dashboard {
    width: 34px;
    height: 34px;
    background-position: -9px -11px;
}

.menu-icon-messages {
    width: 34px;
    height: 34px;
    background-position: -154px -50px;
}

.menu-icon-payroll {
    width: 34px;
    height: 34px;
    background-position: -106px -11px;
}

.menu-icon-leads {
    width: 34px;
    height: 34px;
    background-position: -9px -50px;
}

.menu-icon-calendar {
    width: 34px;
    height: 34px;
    background-position: -106px -50px;
}

.menu-icon-gallery {
    width: 34px;
    height: 34px;
    background-position: -5px -45px;
}

.menu-icon-admin {
    width: 34px;
    height: 34px;
    background-position: -9px -94px;
}

.menu-icon-task {
    width: 34px;
    height: 34px;
    background-position: -152px -11px;
}

.menu-icon-inventory {
    width: 34px;
    height: 34px;
    background-position: -57px -50px;
}

.menu-icon-staff {
    width: 34px;
    height: 34px;
    background-position: -59px -11px;
}

.menu-icon-document {
    width: 34px;
    height: 34px;
    background-position: -59px -89px;
}

.menu-icon-myrequest {
    width: 34px;
    height: 34px;
    background-position: -106px -89px;
}

.menu-icon-myrequests {
    width: 34px;
    height: 34px;
    background-position: -9px -130px;
}

.menu-icon-attendance {
    width: 34px;
    height: 34px;
    background-position: -151px -88px;
}

.app-drawer-popup {
    display: none;
    position: absolute;
    top: 55px !important;
    left: 10px !important;
    max-width: 600px;
    background: #FFFFFF;
    border: 3px solid var(--rz-secondary);
    box-shadow: 0px 7px 29px rgba(100, 100, 111, 0.2);
    border-radius: 12px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-10px);
    transition: max-height 0.5s ease-out, opacity 0.3s ease, transform 0.3s ease;
    overflow-y: auto;
}

    .app-drawer-popup.rz-open {
        max-height: 90vh; /* 90% of the viewport height */
        opacity: 1;
        transform: translateY(0);
    }

    .app-drawer-popup .app-drawer-stack {
        width: 100%;
        padding: 20px;
    }

.app-drawer-stack .modules-title {
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 17px;
    letter-spacing: 0.04em;
    color: #7D7D7D;
    word-wrap: unset;
}

.app-drawer-stack .modules-title-stack {
    border-bottom: 1px solid #CFCFCF;
}

.menu-stack {
}

    .menu-stack .menu-item {
        width: 100%;
        border: 1px solid transparent; /* Blue border */
        border-radius: 12px; /* Optional: rounded corners */
    }

        .menu-stack .menu-item.active {
            width: 100%;
            border: 1px solid var(--rz-secondary); /* Blue border */
            border-radius: 12px; /* Optional: rounded corners */
            box-shadow: 0px 7px 29px rgba(100, 100, 111, 0.2); /* Soft shadow */
            background-color: #fff;
        }

        .menu-stack .menu-item:hover {
            width: 100%;
            border: 1px solid var(--rz-secondary); /* Blue border */
            border-radius: 12px; /* Optional: rounded corners */
            box-shadow: 0px 7px 29px rgba(100, 100, 111, 0.2); /* Soft shadow */
            background-color: #fff;
        }

.menu-item .menu-link {
    text-decoration: none;
    padding-left: 5px;
    padding-right: 5px;
}

    .menu-item .menu-link:hover {
        text-decoration: none;
    }

    .menu-item .menu-link.active .menu-link-stack {
        text-decoration: none;
    }

    .menu-item .menu-link .menu-link-stack {
    }

        .menu-item .menu-link .menu-link-stack .menu-link-text {
            font-style: normal;
            font-weight: 500;
            font-size: 14.2105px;
            line-height: 17px;
            text-align: center;
            color: #494949;
            text-wrap-mode: nowrap;
        }

        .menu-item .menu-link .menu-link-stack .menu-link-icon {
        }

.menu-item .rz-button.rz-variant-text.rz-base:not(.rz-state-disabled):hover {
    background-color: transparent;
    color: #494949;
}

.notification-popup {
    display: none;
    position: absolute;
    overflow: auto;
    width: 250px;
    border: var(--rz-panel-border);
    background-color: var(--rz-secondary);
    box-shadow: var(--rz-panel-shadow);
    border-radius: var(--rz-border-radius);
    right: auto !important;
}

    .notification-popup .notification-item {
    }

        .notification-popup .notification-item .rz-button-box {
            width: 100%;
        }

        .notification-popup .notification-item a {
            color: var(--rz-white);
        }

    .notification-popup .rz-text-body1 {
        color: var(--rz-white);
    }

.rz-header .menu-button {
    box-sizing: border-box;
    position: absolute;
    left: 15px;
    top: 5px;
    background: transparent;
    border-radius: 19px;
    border: none !important;
}

    .rz-header .menu-button i,
    .rz-header .menu-button .rz-button-icon {
        font-size: 30px !important;
        color: rgba(255, 255, 255, 0.85) !important;
    }

    .rz-header .menu-button:hover {
        background: rgba(255, 255, 255, 0.1) !important;
    }

/* Header buttons (notification, help, etc.) */
.rz-header .rz-button-primary,
.rz-header .dark-blue-div .rz-button-primary {
    background: transparent !important;
    border-color: transparent !important;
}

    .rz-header .rz-button-primary:hover,
    .rz-header .dark-blue-div .rz-button-primary:hover {
        background: rgba(255, 255, 255, 0.1) !important;
        border-color: transparent !important;
    }

    /* Header button icons - default sizing */
    .rz-header .rz-button-primary i,
    .rz-header .rz-button-primary .rz-icon,
    .rz-header .dark-blue-div .rz-button-primary i,
    .rz-header .dark-blue-div .rz-button-primary .rz-icon {
        font-size: 24px !important;
    }

    /* Help + Notification icons — unified white-on-navy for a calmer header.
       Notification badge keeps its own colour so urgent state is still visible. */
    .rz-header .rz-button-primary i.rzi-help-outline,
    .rz-header .rz-button-primary .rz-icon.rzi-help-outline,
    .rz-header .dark-blue-div .rz-button-primary i.rzi-help-outline,
    .rz-header .dark-blue-div .rz-button-primary .rz-icon.rzi-help-outline,
    .rz-header .rz-button-primary i.rzi-notifications,
    .rz-header .rz-button-primary .rz-icon.rzi-notifications,
    .rz-header .dark-blue-div .rz-button-primary i.rzi-notifications,
    .rz-header .dark-blue-div .rz-button-primary .rz-icon.rzi-notifications {
        color: rgba(255, 255, 255, 0.85) !important;
    }

/*Main Layout CSS end*/

/* Task Management Styles */
.task-board-container {
    padding: 1rem;
    background-color: var(--rz-background);
    border-radius: 10px;
}

.task-board-column {
    background-color: var(--rz-white);
    border-radius: 10px;
    padding: 0.5rem;
    min-height: 500px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.task-column-header {
    background-color: var(--rz-base-100);
    border-radius: 8px;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    border-bottom: 3px solid var(--rz-primary);
}

.task-column-title {
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--rz-text-color);
}

.task-column-count {
    margin-left: 0.5rem;
}

.task-column-content {
    min-height: 400px;
    padding: 10px;
}

.task-card {
    background-color: var(--rz-white);
    border: 1px solid var(--rz-base-200);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

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

.task-card-title {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--rz-text-color);
    margin-bottom: 0.5rem;
    line-height: 1.3;
}

.task-card-description {
    font-size: 0.85rem;
    color: var(--rz-text-secondary-color);
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

.task-due-date {
    font-size: 0.8rem;
    color: var(--rz-text-tertiary-color);
}

.task-assigned-to {
    font-size: 0.8rem;
    color: var(--rz-text-secondary-color);
}

.task-progress {
    width: 30px;
    height: 30px;
}

.task-priority-badge {
    font-size: 0.7rem;
    padding: 0.25rem 0.5rem;
}

.task-list-title {
    font-weight: 600;
    color: var(--rz-text-color);
}

.task-list-project {
    font-size: 0.85rem;
    color: var(--rz-text-tertiary-color);
}

.top-controls-section .rz-form-field-content .rz-inputtext, .top-controls-section .rz-datepicker > .rz-inputtext:not(:disabled):not(.rz-state-disabled):hover {
    border: var(--rz-input-border);
}

.task-list-progress {
    height: 8px;
    border-radius: 4px;
}

.task-view-controls {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    background-color: var(--rz-white);
    border-radius: 50px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    padding: 0.5rem;
}

/* Task Dashboard Specific */
.task-card-project {
    font-size: 0.85rem;
    color: var(--rz-text-tertiary-color);
}

/* Responsive adjustments for task management */
@media (max-width: 768px) {
    .task-board-column {
        margin: 0.1rem;
        padding: 0.25rem;
    }
    
    .task-card {
        padding: 0.75rem;
        margin-bottom: 0.4rem;
    }
    
    .task-card-title {
        font-size: 0.9rem;
    }
    
    .task-card-description {
        font-size: 0.8rem;
    }
    
    .task-view-controls {
        bottom: 10px;
        right: 10px;
    }
}

/* Library Management */
.add-book-dialog{
    width:95vh;
    max-width:950px !important;
}

/* Task Status Specific Colors */
.status-todo {
    border-left-color: var(--rz-info) !important;
}

.status-inprogress {
    border-left-color: var(--rz-warning) !important;
}

.status-review {
    border-left-color: var(--rz-series-1) !important;
}

.status-done {
    border-left-color: var(--rz-success) !important;
}

.status-cancelled {
    border-left-color: var(--rz-danger) !important;
}


/* Task Management Radzen DropZone Styles */
.task-card {
    transition: all 0.2s ease;
    width: 100%;
}

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

.task-draggable {
    cursor: move;
}

.task-drop-zone {
    transition: all 0.3s ease;
    border-radius: 8px;
    background-color: var(--rz-base-25);
    border: 2px solid transparent;
}

/* Radzen DropZone built-in classes */
.task-drop-zone.rz-can-drop {
    background-color: rgba(var(--rz-success), 0.1);
    border-color: var(--rz-success);
}

.task-drop-zone.rz-no-drop {
    background-color: rgba(var(--rz-danger), 0.1);
    border-color: var(--rz-danger);
}

.task-column-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: var(--rz-white);
    border-bottom: 1px solid var(--rz-base-200);
    padding: 10px;
    margin: -10px -10px 10px -10px;
}

.task-board-column {
    background-color: var(--rz-base-50);
    border-radius: 8px;
    border: 1px solid var(--rz-base-200);
    min-height: 500px;
}

.task-column-content {
    max-height: 70vh;
    overflow-y: auto;
}

/* Enhanced drag visual feedback */
.rz-dragging .task-card {
    opacity: 0.8;
    transform: scale(1.05);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    z-index: 1000;
}

/* Task Management Layout Improvements */
.top-controls-panel {
}

.top-controls-panel .rz-formfield {
    margin-bottom: 0;
}

.date-filter-panel {
}

.actions-stats-panel {
    padding: 0 5px;
}

.task-stats-panel {
    padding: 10px 0;
}

.task-stats-panel .rz-badge {
    min-width: 24px;
    text-align: center;
}

/* Responsive SelectBar improvements */
.rz-selectbar {
    flex-wrap: wrap !important;
    gap: 4px;
}

.rz-selectbar .rz-selectbar-item {
    flex: 0 0 auto;
    min-width: fit-content;
    white-space: nowrap;
}

/* Responsive layout for medium screens */
@media (max-width: 992px) {
    .top-controls-panel-grade,
    .top-controls-panel-asses {
        margin-bottom: 15px;
    }
    
    .rz-selectbar .rz-selectbar-item {
        font-size: 0.85rem;
        padding: 6px 12px;
    }
}

@media (max-width: 768px) {
    .top-controls-panel .rz-stack {
        min-width: 100% !important;
    }
    
    .rz-selectbar {
        justify-content: center;
    }
    
    .rz-selectbar .rz-selectbar-item {
        font-size: 0.8rem;
        padding: 5px 10px;
    }
    
    .actions-stats-panel {
        margin-bottom: 20px;
    }
    
    .actions-stats-panel .rz-column {
        margin-bottom: 15px;
    }
    
    .task-stats-panel {
        justify-content: center !important;
        padding: 5px 0;
    }
    
    .actions-stats-panel .rz-button {
        font-size: 0.9rem;
        padding: 8px 12px;
    }
}

/* Dialog improvements - Enhanced for full width control */
.rz-dialog {
    max-width: 90vw;
}

.rz-dialog .rz-dialog-content {
    padding: 20px;
    width: 100%;
}

.rz-dialog .rz-formfield {
    width: 100%;
}

.rz-dialog .rz-formfield .rz-dropdown,
.rz-dialog .rz-formfield .rz-textbox,
.rz-dialog .rz-formfield .rz-textarea,
.rz-dialog .rz-formfield .rz-datepicker,
.rz-dialog .rz-formfield .rz-numeric,
.rz-dialog .rz-formfield .rz-colorpicker {
    width: 100% !important;
    min-width: unset !important;
    box-sizing: border-box;
}

.rz-dialog .rz-dropdown,
.rz-dialog .rz-textbox,
.rz-dialog .rz-textarea,
.rz-dialog .rz-datepicker,
.rz-dialog .rz-numeric,
.rz-dialog .rz-colorpicker {
    width: 100% !important;
    min-width: unset !important;
    box-sizing: border-box;
}

/* Ensure column controls take full width */
.rz-dialog .rz-row .rz-col .rz-formfield {
    width: 100%;
}

.rz-dialog .rz-row .rz-col .rz-formfield > * {
    width: 100% !important;
}

/* Color picker specific fix */
.rz-dialog .rz-colorpicker .rz-colorpicker-trigger {
    width: 100% !important;
}

/* Numeric input specific fix */
.rz-dialog .rz-numeric {
    display: flex;
    align-items: stretch;
}

.rz-dialog .rz-numeric .rz-numeric-spinner {
    width: auto !important;
    min-width: 32px;
    flex-shrink: 0;
}

/* Fix numeric spinner button styling */
.rz-numeric .rz-spinner-btn {
    background-color: var(--rz-base-200) !important;
    color: var(--rz-base-700) !important;
    border: 1px solid var(--rz-base-300) !important;
    width: 32px !important;
    min-width: 32px !important;
}

.rz-numeric .rz-spinner-btn:hover {
    background-color: var(--rz-base-300) !important;
    color: var(--rz-base-800) !important;
}

.rz-numeric .rz-spinner-btn:active {
    background-color: var(--rz-primary-lighter) !important;
}

/* Ensure numeric input takes remaining space */
.rz-numeric input {
    flex: 1;
    min-width: 0;
}

/* Tabs content full width */
.rz-dialog .rz-tabs-content {
    width: 100%;
    padding: 0;
}

.rz-dialog .rz-tabs-content .rz-stack {
    width: 100%;
}

/* Mobile dialog: full-screen is canonical and lives in design-tokens.css
   line 389. The previous .rz-dialog { width: 95% } rule here was winning
   by cascade order and giving an awkward 5 % margin around the dialog —
   removed. Only the content / form padding polish stays. */
@media (max-width: 768px) {
    .rz-dialog .rz-dialog-content {
        padding: 15px;
    }

    .rz-dialog .rz-formfield {
        margin-bottom: 15px;
    }

    .rz-dialog .rz-row .rz-col {
        margin-bottom: 10px;
    }
}

/* Task board layout improvements */
.task-board-container {
    padding: 0 10px;
}

.task-board-column {
    padding: 15px 10px;
    margin-bottom: 20px;
}

.task-column-header {
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--rz-base-300);
}

.task-column-title {
    font-weight: 600;
    font-size: 1.1rem;
}

.task-detail-tabs .rz-form-field{
    width:100%;
}

/* Staff DropDownDataGrid Styles */
#popup-staffDropDownDataGrid {
    height: 70vh !important;
    overflow: auto !important;
}

/* ========================================
   ModuleNavigation Component Styles
   Professional Tab Bar Design
   ======================================== */

.module-nav-wrapper {
    position: relative;
    width: 100%;
    background: var(--color-white);
    /* Allow dropdowns to overflow */
    overflow: visible;
}

/* Right fade indicator to show more content */
.module-nav-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 40px;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.9) 50%, var(--color-white));
    pointer-events: none;
    z-index: 1;
}

.module-nav {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--color-gray-300) transparent;
    gap: 0;
    padding: 0 48px 0 16px; /* Extra right padding for fade indicator */
    background: var(--color-white);
    border-bottom: 2px solid var(--color-gray-200);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    width: 100%;
}

/* Show thin scrollbar on hover for desktop */
.module-nav::-webkit-scrollbar {
    height: 4px;
}

.module-nav::-webkit-scrollbar-track {
    background: transparent;
}

.module-nav::-webkit-scrollbar-thumb {
    background: var(--color-gray-300);
    border-radius: 2px;
}

.module-nav::-webkit-scrollbar-thumb:hover {
    background: var(--color-gray-400);
}

.module-nav-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-shrink: 0;
    scroll-snap-align: start;
    min-height: 52px;
    padding: 14px 24px;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    background: transparent;
    color: var(--color-gray-600);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    white-space: nowrap;
}

.module-nav-item:hover:not(.module-nav-item--disabled) {
    background: var(--color-gray-50);
    color: var(--color-gray-800);
}

.module-nav-item:focus {
    outline: none;
    background: var(--color-gray-100);
}

.module-nav-item--active {
    color: var(--rz-info);
    border-bottom-color: var(--rz-info);
    background: transparent;
    font-weight: 600;
}

.module-nav-item--active:hover {
    background: var(--rz-info-lighter);
}

.module-nav-item--active .module-nav-icon {
    color: var(--rz-info);
}

.module-nav-item--disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.module-nav-icon {
    font-size: 20px;
    color: var(--color-gray-400);
    transition: color 0.2s ease;
}

.module-nav-item:hover .module-nav-icon {
    color: var(--color-gray-600);
}

.module-nav-text {
    line-height: 1.2;
}

/* Badge styles */
.module-nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    margin-left: 4px;
}

.module-nav-badge--primary {
    background: var(--rz-primary);
    color: white;
}

.module-nav-badge--secondary {
    background: var(--rz-secondary);
    color: white;
}

.module-nav-badge--success {
    background: var(--rz-success);
    color: white;
}

.module-nav-badge--warning {
    background: var(--rz-warning);
    color: white;
}

.module-nav-badge--danger {
    background: var(--rz-danger);
    color: white;
}

.module-nav-badge--info {
    background: var(--rz-info);
    color: white;
}

.module-nav-badge--light {
    background: var(--color-gray-100);
    color: var(--color-gray-700);
}

.module-nav-badge--dark {
    background: var(--color-gray-800);
    color: white;
}

/* Mobile responsive - stack items nicely */
@media (max-width: 768px) {
    .module-nav {
        padding: 0 8px;
    }

    .module-nav-item {
        padding: 12px 16px;
        min-height: 48px;
        gap: 8px;
    }

    .module-nav-icon {
        font-size: 18px;
    }

    .module-nav-text {
        font-size: 13px;
    }
}

/* ==========================================================================
   Module Navigation Dropdown Styles
   ========================================================================== */

.module-nav-dropdown {
    position: relative !important;
    display: inline-flex;
    z-index: 10;
}

.module-nav-item--has-dropdown {
    padding-right: 8px;
}

.module-nav-dropdown-icon {
    font-size: 18px !important;
    color: var(--color-gray-400);
    margin-left: -4px;
    transition: transform 0.2s ease;
}

.module-nav-item--active .module-nav-dropdown-icon {
    color: var(--rz-info);
}

.module-nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 220px;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    z-index: 9999;
    padding: 8px 0;
    animation: dropdownFadeIn 0.15s ease;
    /* Ensure visibility */
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
}

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

.module-nav-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 16px;
    border: none;
    background: transparent;
    color: var(--color-gray-700);
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.module-nav-dropdown-item:hover {
    background: var(--color-gray-100);
    color: var(--rz-info);
}

.module-nav-dropdown-item:focus {
    outline: none;
    background: var(--color-gray-200);
}

.module-nav-dropdown-item--disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.module-nav-dropdown-item--disabled:hover {
    background: transparent;
    color: var(--color-gray-700);
}

.module-nav-dropdown-item-icon {
    font-size: 18px !important;
    color: var(--color-gray-600);
}

.module-nav-dropdown-item:hover .module-nav-dropdown-item-icon {
    color: var(--rz-info);
}

/* Mobile dropdown adjustments */
@media (max-width: 768px) {
    .module-nav-dropdown-menu {
        min-width: 180px;
        left: auto;
        right: 0;
    }

    .module-nav-dropdown-item {
        padding: 12px 16px;
        min-height: 44px;
    }
}

/* ==========================================================================
   Page Layout with Contained Grid Scroll
   Radzen-recommended flexbox pattern for DataGrid scroll containment
   ========================================================================== */

/* Main page container - fills viewport height with flex column layout */
.page-container {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 120px); /* Account for header/nav */
    padding: 20px;
    background: white;
    border-radius: 8px;
    margin: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    max-width: calc(100vw - 40px); /* Prevent expanding beyond viewport */
    overflow: hidden; /* Contain all overflow within */
}

@media (max-width: 768px) {
    /* Mobile: switch page-container from flex-column-with-fixed-height to
       plain block flow. The desktop pattern (flex column, child grid takes
       remaining space, internal overflow:auto for scrolling) breaks on
       phones — nothing can grow past calc(100vh - 120 px), grid gets
       crushed, and mixing overflow-x:auto with overflow-y:visible (CSS
       spec collapses that to overflow:auto on both axes) causes the grid
       to render outside the parent's white card.

       Plain block flow + auto height + page-level scroll = everything in
       one continuous white card that scrolls as a unit. */
    .page-container {
        display: block;
        height: auto;
        min-height: 0;
        overflow: visible;
        margin: 8px;
        padding: 12px;
        max-width: calc(100vw - 16px);
    }

        /* Grid container uses plain block flow with no overflow control —
           the grid renders at its natural full height inside the white
           card. Horizontal scroll for wide columns is handled by the inner
           Radzen `.rz-data-grid-data` table-wrapper below, which has its
           own scroll viewport. */
        .page-container .grid-container {
            display: block;
            flex: none;
            height: auto;
            min-height: 0;
            overflow: visible;
        }

            .page-container .grid-container .rz-data-grid {
                height: auto !important;
            }

            /* Radzen's table wrapper IS the right place to scroll
               horizontally — it's a different element from the outer
               grid container, so overflow-x:auto here doesn't collapse
               the outer container's vertical flow. */
            .page-container .grid-container .rz-data-grid-data,
            .page-container .grid-container .rz-grid-table-wrapper {
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
            }
}

/* Fixed header section - doesn't scroll */
.page-header {
    flex-shrink: 0;
}

/* Grid wrapper - expands to fill remaining space, enables scroll */
/* IMPORTANT: height: 0 is required for percentage-based child heights to work */
.grid-container {
    flex: 1;
    height: 0;
    min-height: 0;
    margin-top: 15px;
    overflow: auto; /* Both horizontal and vertical scroll within container */
}

/* DataGrid inside grid-container should fill 100% height */
.grid-container .rz-data-grid {
    height: 100% !important;
}

/* Task360 pages need natural vertical flow because Quick Create can be tall. */
.task360-simple-page {
    height: auto;
    min-height: calc(100vh - 120px);
    overflow-y: auto;
}

.task360-board-page {
    height: auto;
    min-height: calc(100vh - 120px);
    overflow-y: auto;
}

.task360-board-page .grid-container {
    flex: 0 0 auto;
    height: auto;
    min-height: 420px;
    overflow: auto;
}

/* Variant: Full page without card styling */
.page-container--full {
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    height: calc(100vh - 80px);
    padding: 20px;
}

/* Variant: Compact page with less padding */
.page-container--compact {
    padding: 15px;
    margin: 15px;
    height: calc(100vh - 110px);
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .page-container {
        margin: 10px;
        padding: 15px;
        height: calc(100vh - 100px);
    }

    .task360-simple-page,
    .task360-board-page {
        min-height: calc(100vh - 100px);
    }

    .page-container--full {
        height: calc(100vh - 60px);
        padding: 15px;
    }
}

/* ==========================================================================
   Compact Spacing - Zoho-like Design
   ========================================================================== */

/* Compact page header */
.page-header.compact {
    padding: 12px 16px;
    gap: 8px;
}

.page-header.compact .rz-text-h5 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
}

/* Detail content area */
.detail-content {
    flex: 1;
    overflow: auto;
    padding: 16px;
    background-color: #f5f7fa;
}

/* Compact cards */
.rz-card.compact {
    padding: 12px 16px;
}

.rz-card.compact .rz-text-h6 {
    font-size: 1rem;
    margin-bottom: 8px;
}

/* Field group - Zoho-like compact fields */
.field-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
}

.field-group .field-label {
    color: #6c757d;
    font-size: 0.75rem;
    text-transform: uppercase;
    font-weight: 600;
}

.field-group .field-value {
    color: #212529;
    font-size: 0.875rem;
}

/* Stat item */
.stat-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 0;
    border-bottom: 1px solid #dee2e6;
}

.stat-item:last-child {
    border-bottom: none;
}

.stat-item .stat-value {
    margin: 0;
    color: var(--rz-primary);
    font-weight: 700;
    font-size: 1.5rem;
}

.stat-item .stat-label {
    color: #6c757d;
    font-size: 0.75rem;
    text-transform: uppercase;
}

/* Compact data grid */
.compact-grid .rz-data-grid {
    font-size: 0.875rem;
}

.compact-grid .rz-datatable-data td {
    padding: 8px;
}

/* Spacing utilities */
.mb-1 { margin-bottom: 4px !important; }
.mb-2 { margin-bottom: 8px !important; }
.rz-mt-2 { margin-top: 8px !important; }
.rz-mt-3 { margin-top: 12px !important; }

/* ── Warmup splash (cold-start UX for Azure Container Apps) ─────────────── */
.ew-splash{position:fixed;inset:0;z-index:2147483647;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#03045E 0%,#134681 50%,#2164B2 100%);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;transition:opacity .65s ease,transform .65s ease;opacity:1}
.ew-fadeout{opacity:0;transform:scale(1.03);pointer-events:none}
.ew-card{background:#fff;border-radius:16px;padding:2.5rem 2.5rem 2rem;width:100%;max-width:420px;margin:1rem;box-shadow:0 24px 64px rgba(3,4,94,.35);display:flex;flex-direction:column;align-items:center;gap:1.1rem}
.ew-logo{max-width:190px;max-height:72px;object-fit:contain}
.ew-divider{width:100%;height:2px;background:linear-gradient(to right,#03045E,#2164B2,#63bef2);border-radius:2px}
.ew-statement-area{width:100%;min-height:6rem;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:.45rem;padding:.25rem 0}
.ew-stmt-label{font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#2164B2;opacity:0;transition:opacity .42s ease}
.ew-stmt-text{font-size:1.1rem;font-weight:600;color:#0d1b2a;line-height:1.4;opacity:0;transition:opacity .42s ease}
.ew-stmt-in{opacity:1!important}
.ew-footer{width:100%;display:flex;flex-direction:column;align-items:center;gap:.75rem}
.ew-status{font-size:.82rem;color:#64748b;text-align:center}
.ew-ok{color:#16a34a;font-weight:600}
.ew-warn{color:#d97706}
.ew-err{color:#dc2626;font-weight:600}
.ew-btn{width:100%;padding:.75rem 1.5rem;border:none;border-radius:8px;background:#0066FF;color:#fff;font-size:.95rem;font-weight:600;cursor:pointer;transition:background .2s ease,opacity .2s ease;opacity:.7}
.ew-btn-ready{opacity:1}
.ew-btn:not(:disabled):hover{background:#0052cc}
.ew-btn:disabled{cursor:not-allowed}
.ew-retry{background:none;border:1.5px solid #0066FF;color:#0066FF;padding:.5rem 1.25rem;border-radius:6px;font-size:.87rem;font-weight:500;cursor:pointer;transition:background .2s ease}
.ew-retry:hover{background:rgba(0,102,255,.08)}
@media(max-width:480px){.ew-card{padding:2rem 1.5rem 1.5rem;border-radius:12px;margin:.5rem}.ew-stmt-text{font-size:1rem}}