/*
 * StandardGrid Component Styles
 * Closina Phase 11d - Standardized Grid Styling
 * Updated Phase U01 - Migrated to closina-theme.css token system
 *
 * Note: Primary tokens (--closina-primary, --closina-border, etc.) are now
 * defined in closina-theme.css. This file only defines grid-specific variables.
 */

/* ========================================
   CSS Variables - Grid-Specific Tokens
   (Primary tokens inherited from closina-theme.css)
   ======================================== */
:root {
    --closina-grid-accent: var(--closina-primary-hover);
    --closina-grid-bg-light: var(--closina-surface-hover);
    --closina-grid-text-dark: var(--closina-text-primary);
    --closina-grid-text-medium: var(--closina-text-secondary);
    --closina-grid-error: var(--closina-error);
    --closina-grid-warning: var(--closina-warning);
}

/* Dark mode grid-specific token overrides */
[data-theme="dark"] {
    --closina-grid-error: var(--closina-error);
    --closina-grid-warning: var(--closina-warning);
}

/* ========================================
   Container Styles
   ======================================== */
.sfgrid-container {
    border: 1px solid var(--closina-border);
    border-radius: var(--closina-radius-md);
    overflow: hidden;
    background: var(--closina-surface);
}

/* ========================================
   Custom Toolbar Styles
   ======================================== */
/* U80 Sub-Phase F L6: this rule is the SINGLE SOURCE of the toolbar layout —
   StandardGrid.razor previously duplicated padding/border/background/display/
   gap/flex-wrap as an inline style="..." on the .custom-grid-toolbar div; that
   inline style was removed so this rule is authoritative (Cat 12). The base
   padding stays 8px (the HOUSE ≥44px touch floor — platform convention, not WCAG;
   re-cited Phase Z39 — governs ≤959px via the media
   blocks further down); the desktop-gated 4px compaction is below. */
.custom-grid-toolbar {
    padding: 8px;
    border-bottom: 1px solid var(--closina-border);
    background: var(--closina-grid-bg-light);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* U80 Sub-Phase F L6: desktop-gated toolbar padding 8px -> 4px. Reclaims ~8px
   of vertical chrome per list page at ≥960px. Touch viewports (≤959px) keep
   the larger padding via the rules below — the ≥44px touch-target floor is
   unaffected because this only trims the toolbar's own padding, not the
   buttons inside it. */
@media (min-width: 960px) {
    .custom-grid-toolbar {
        padding: 4px;
    }
}

/* Toolbar action buttons with Closina branding */
.custom-grid-toolbar .mud-button-filled-primary {
    background-color: var(--closina-primary);
}

.custom-grid-toolbar .mud-button-filled-primary:hover {
    background-color: var(--closina-primary-hover);
}

.custom-grid-toolbar .mud-button-filled-secondary {
    background-color: var(--closina-secondary);
}

.custom-grid-toolbar .mud-icon-button-primary {
    color: var(--closina-primary);
}

.custom-grid-toolbar .mud-icon-button-secondary {
    color: var(--closina-secondary);
}

/* ========================================
   Text Ellipsis Utilities
   ======================================== */
.text-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    display: inline-block;
}

.e-grid .e-rowcell .text-ellipsis {
    max-width: calc(100% - 16px);
}

/* ========================================
   Grid Header Styles
   ======================================== */
/* Header text wrapping support */
.e-grid .e-headercell {
    height: auto !important;
    min-height: 44px !important;
    line-height: 1.4 !important;
}

/* ========================================
   Column Chooser
   ======================================== */
.e-grid .e-dialog.e-ccdlg {
    max-height: 300px !important;
    width: 300px !important;
}

/* ========================================
   Currency and Numeric Styling
   ======================================== */
/* Negative currency styling */
.negative-currency {
    color: var(--closina-grid-error) !important;
}

/* ========================================
   Density Mode Styles
   ======================================== */

/* Dense Density Mode */
.grid-density-dense {
    --grid-font-size: 12px;
    --grid-row-padding: 4px 8px;
    --grid-header-padding: 6px 8px;
}

.grid-density-dense .e-grid .e-row,
.grid-density-dense .e-grid .e-altrow {
    font-size: var(--grid-font-size);
}

.grid-density-dense .e-grid .e-rowcell {
    padding: var(--grid-row-padding);
    line-height: 1.2;
}

.grid-density-dense .e-grid .e-headercell {
    padding: var(--grid-header-padding);
    font-size: 13px;
    font-weight: 600;
}

/* Adjust action buttons for dense mode */
.grid-density-dense .mud-button-root {
    min-width: 28px;
    min-height: 28px;
    padding: 4px;
}

.grid-density-dense .mud-icon-button {
    padding: 4px;
}

/* Regular Density Mode (Default) */
.grid-density-regular {
    --grid-font-size: 14px;
    --grid-row-padding: 8px 12px;
    --grid-header-padding: 10px 12px;
}

.grid-density-regular .e-grid .e-row,
.grid-density-regular .e-grid .e-altrow {
    font-size: var(--grid-font-size);
}

.grid-density-regular .e-grid .e-rowcell {
    padding: var(--grid-row-padding);
    line-height: 1.4;
}

.grid-density-regular .e-grid .e-headercell {
    padding: var(--grid-header-padding);
    font-size: 14px;
    font-weight: 600;
}

/* Comfortable Density Mode */
.grid-density-comfortable {
    --grid-font-size: 15px;
    --grid-row-padding: 12px 16px;
    --grid-header-padding: 14px 16px;
}

.grid-density-comfortable .e-grid .e-row,
.grid-density-comfortable .e-grid .e-altrow {
    font-size: var(--grid-font-size);
}

.grid-density-comfortable .e-grid .e-rowcell {
    padding: var(--grid-row-padding);
    line-height: 1.6;
}

.grid-density-comfortable .e-grid .e-headercell {
    padding: var(--grid-header-padding);
    font-size: 15px;
    font-weight: 600;
}

/* Adjust action buttons for comfortable mode */
.grid-density-comfortable .mud-button-root {
    min-width: 40px;
    min-height: 40px;
    padding: 8px;
}

.grid-density-comfortable .mud-icon-button {
    padding: 8px;
}

/* Override grid density button sizes on touch viewports — HOUSE 44px touch floor
   (platform convention: Apple HIG 44pt / Material 48dp). Re-cited Phase Z39: this is
   NOT WCAG 2.5.5, which is 44x44 at Level AAA and is not claimed. The WCAG bar we
   grade against is 2.5.8 Target Size (Minimum), Level AA, 24x24, at all pointer
   inputs including mouse.
   Dense/comfortable modes shrink buttons to 28-40px — above that 24x24 AA floor, so
   compliant on desktop, but below our house 44px touch floor. On tablets and phones,
   enforce 44px. */
@media (max-width: 959px) {
    .grid-density-dense .mud-button-root,
    .grid-density-dense .mud-icon-button,
    .grid-density-comfortable .mud-button-root,
    .grid-density-comfortable .mud-icon-button {
        min-width: 44px !important;
        min-height: 44px !important;
    }
}

/* ========================================
   Record Count and Footer Styles
   ======================================== */

/* Record count display in toolbar */
.e-record-count {
    font-size: 14px;
    color: var(--closina-grid-text-medium);
    padding: 8px 16px;
    display: inline-block;
}

/* Filtered indicator badge */
.e-filtered-indicator {
    color: var(--closina-grid-warning);
    font-weight: 600;
    margin-left: 8px;
}

/* Footer count (for aggregates) */
.e-footer-count {
    font-weight: 600;
    padding: 8px;
    background: var(--closina-grid-bg-light);
    color: var(--closina-grid-text-dark);
}

/* Aggregate footer styling */
.e-grid .e-gridfooter {
    background: var(--closina-grid-bg-light);
    border-top: 2px solid var(--closina-border);
}

.e-grid .e-summarycell {
    font-weight: 600;
    color: var(--closina-grid-text-dark);
}

/* Selected row highlight with Closina primary color */
.e-grid .e-selectionbackground {
    background-color: var(--closina-primary-light) !important;
}

.e-grid .e-row.e-altrow.e-selectionbackground {
    background-color: var(--closina-primary-border) !important;
}

/* Active cell border */
.e-grid .e-rowcell.e-active {
    border-color: var(--closina-primary) !important;
}

/* Header focus/active state */
.e-grid .e-headercell:focus,
.e-grid .e-headercell.e-focused {
    outline-color: var(--closina-primary) !important;
}

/* Sort icon color */
.e-grid .e-sortnumber {
    background-color: var(--closina-primary) !important;
}

/* Filter bar active state */
.e-grid .e-filterbar .e-input-focus::after {
    background-color: var(--closina-primary) !important;
}

/* ========================================
   Responsive Styles for Mobile
   ======================================== */

/* Mobile breakpoint - tablets and smaller */
@media (max-width: 959px) {
    /* Adjust container height for mobile */
    .sfgrid-container {
        height: calc(100dvh - 25rem) !important;
    }

    /* Stack toolbar buttons on mobile */
    .custom-grid-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .custom-grid-toolbar > * {
        width: 100%;
    }

    /* Make grid toolbar stack vertically */
    .e-grid .e-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .e-grid .e-toolbar-items {
        flex-direction: column;
        width: 100%;
    }

    /* Adjust button sizes for touch */
    .mud-button-root,
    .mud-icon-button {
        min-height: 44px;
        padding: 8px 16px;
    }

    /* Reduce font sizes slightly */
    .e-grid .e-rowcell,
    .e-grid .e-headercell {
        font-size: 13px;
    }

    /* UX Audit 2026-03-30: Grid column header touch targets.
       Sort buttons and header cells render at 24px height on mobile — exactly ON the
       WCAG 2.5.8 AA 24x24 floor, so not an AA failure, but below our house 44px touch
       floor. Raise to 44px on touch devices (house/platform convention — re-cited
       Phase Z39; NOT WCAG 2.5.5, which is AAA and not claimed). */
    .e-grid .e-headercell {
        min-height: 44px !important;
    }
    .e-grid .e-headercell .e-headercelldiv {
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
    }

    /* Adjust density for mobile - force regular or comfortable */
    .grid-density-dense {
        --grid-font-size: 13px;
        --grid-row-padding: 8px 12px;
        --grid-header-padding: 10px 12px;
    }

    /* Make column chooser dialog full-width on mobile */
    .e-grid .e-dialog.e-ccdlg {
        width: 90% !important;
        max-width: none !important;
    }

    /* Stack record count on mobile */
    .e-record-count {
        display: block;
        width: 100%;
        text-align: center;
    }
}

/* Small mobile breakpoint - phones */
@media (max-width: 480px) {
    /* Further reduce padding on small screens
       Keep gap >= 8px for the house UX-S05 adjacency convention (re-cited Phase Z39:
       NOT WCAG 2.5.8, which is the 24x24 size minimum and contains no 8px figure) */
    .custom-grid-toolbar {
        padding: 4px;
        gap: 8px;
    }

    .e-grid .e-rowcell {
        padding: 6px 8px;
    }

    .e-grid .e-headercell {
        padding: 8px;
        font-size: 12px;
    }

    /* Adjust container height for phones */
    .sfgrid-container {
        height: calc(100dvh - 20rem) !important;
    }
}

/* ========================================
   Critical Mobile Viewport Containment
   Prevents horizontal page scroll at 375px
   ======================================== */
@media (max-width: 599px) {
    /* Strict viewport containment */
    .sfgrid-container {
        max-width: 100vw !important;
        width: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    /* Only the inner .e-content should scroll horizontally.
       The outer .e-grid has overflow:auto by default which creates
       a duplicate scrollbar. Suppress it; let .e-content handle scrolling. */
    .e-grid {
        overflow-x: hidden !important;
    }
    .e-gridcontent,
    .e-gridheader {
        max-width: 100% !important;
    }
    .e-content {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Table can expand for content but scrolls within container */
    .e-grid table.e-table {
        min-width: max-content !important;
    }

    /* Toolbar must stay within viewport */
    .custom-grid-toolbar {
        max-width: 100% !important;
        box-sizing: border-box !important;
        flex-wrap: wrap !important;
    }

    /* Search field responsive sizing */
    .grid-search-field {
        min-width: 0 !important;
        flex: 1 1 100% !important;
        max-width: 100% !important;
    }

    /* Toolbar spacer should collapse on mobile */
    .grid-toolbar-spacer {
        flex: 0 0 auto !important;
        width: 0 !important;
        min-width: 0 !important;
    }

    /* Stack toolbar items vertically on small screens */
    .custom-grid-toolbar > * {
        flex: 0 0 auto !important;
    }

    /* Record count on its own row */
    .e-record-count {
        flex: 1 1 100% !important;
        text-align: center !important;
        padding: 4px 8px !important;
        font-size: 12px !important;
    }

    /* === MOBILE TOOLBAR MODERNIZATION ===
       On mobile, keep only search + clear filter. Hide ALL tooltip wrappers
       (density, column chooser, save/reset prefs, copy, export, sorting)
       then show back only the clear-filter button.
       Previously we hid inner buttons only — but the outer .mud-tooltip-root
       wrappers stayed as display:block, each consuming 4px of flex gap,
       causing a ~48px phantom overflow + horizontal scrollbar. */

    /* Hide ALL tooltip-wrapped buttons in toolbar */
    .custom-grid-toolbar > .mud-tooltip-root {
        display: none !important;
    }

    /* Hide custom toolbar items (Create buttons, bulk actions) on mobile.
       These buttons cover the search input at 375px (UX-R03). */
    .custom-grid-toolbar .grid-custom-toolbar-items {
        display: none !important;
    }

    /* Show back only: clear all filters */
    .custom-grid-toolbar > .mud-tooltip-root:has([aria-label="Clear all filters"]) {
        display: block !important;
    }

    /* Hide record count + spacer — pager already shows this info */
    .custom-grid-toolbar .e-record-count,
    .custom-grid-toolbar .grid-toolbar-spacer {
        display: none !important;
    }

    /* Compact toolbar: single row with search + filter button
       Gap must be >= 8px for the house UX-S05 adjacency convention on touch (re-cited
       Phase Z39: NOT WCAG 2.5.8 — that is the 24x24 size minimum, no 8px figure) */
    .custom-grid-toolbar {
        padding: 4px 8px !important;
        gap: 8px !important;
        flex-wrap: nowrap !important;
        overflow: hidden !important;
    }

    /* Search field must shrink to share space with clear-filter button */
    .custom-grid-toolbar > .mud-input-control {
        flex: 1 1 0 !important;
        min-width: 0 !important;
    }

    /* === COMPACT PAGER ===
       Hide "Items per page" dropdown — default 20 is fine on mobile.
       Keep just the page navigation arrows and page indicator. */
    .e-pager .e-pagesizes,
    .e-pager [class*="pagesizes"],
    .e-pager .e-pagerdropdown,
    .e-pager .e-pagerconstant {
        display: none !important;
    }

    /* Compact pager padding */
    .e-pager {
        padding: 4px 8px !important;
    }
}

/* ========================================
   Modern Grid Lines — Minimal & Clean
   Removes heavy cell borders for a contemporary look.
   Inspired by Linear, Notion, Stripe dashboards.
   ======================================== */

/* Remove vertical column separators everywhere */
.e-grid .e-rowcell {
    border-left-color: transparent !important;
    border-right-color: transparent !important;
}
.e-grid .e-headercell {
    border-left-color: transparent !important;
    border-right-color: transparent !important;
}

/* Hide resize-handle separator line between header columns */
.e-grid .e-rhandler {
    border-right-color: transparent !important;
}

/* Very faint horizontal row dividers — almost invisible */
.e-grid .e-rowcell {
    border-bottom: 1px solid var(--closina-border-faint) !important;
}

/* Subtle header bottom border — half original weight */
.e-grid .e-headercell {
    border-bottom: 1px solid var(--closina-border-header) !important;
}

/* Row hover highlight for scannability */
.e-grid .e-row:hover td.e-rowcell,
.e-grid .e-altrow:hover td.e-rowcell {
    background-color: var(--closina-hover-faint) !important;
    transition: background-color var(--closina-transition-fast);
}

/* Dark mode adjustments */
[data-theme="dark"] .e-grid .e-rowcell {
    border-bottom-color: var(--closina-border-faint) !important;
    border-left-color: transparent !important;
    border-right-color: transparent !important;
}
[data-theme="dark"] .e-grid .e-headercell {
    border-bottom-color: var(--closina-border-header) !important;
    border-left-color: transparent !important;
    border-right-color: transparent !important;
}
[data-theme="dark"] .e-grid .e-row:hover td.e-rowcell,
[data-theme="dark"] .e-grid .e-altrow:hover td.e-rowcell {
    background-color: var(--closina-hover-faint) !important;
}

/* On mobile, flatten container radius for edge-to-edge */
@media (max-width: 599px) {
    .sfgrid-container {
        border-radius: 0 !important;
    }
    .custom-grid-toolbar {
        border-bottom: 1px solid var(--closina-border) !important;
    }
}

/* ========================================
   Grid Header Alignment (UX Audit 2026-03-08)
   Fix: Column header baselines show slight vertical
   misalignment (>3px) at tablet/mobile viewports.
   ======================================== */
.e-grid .e-headercell {
    vertical-align: middle;
}

.e-grid .e-headercell .e-headercelldiv {
    display: flex;
    align-items: center;
    line-height: 1.4;
}

/* ========================================
   Grid Row Link Touch Targets (UX Audit 2026-03-08)
   Fix: Email/name links in table rows are only 20px
   tall — below 24px desktop minimum and 44px touch minimum.
   ======================================== */
.e-grid .e-rowcell .mud-link {
    min-height: 24px;
    display: inline-flex;
    align-items: center;
}

@media (max-width: 959px) {
    .e-grid .e-rowcell .mud-link {
        min-height: 44px;
        padding-top: 4px;
        padding-bottom: 4px;
    }
}

/* ========================================
   Grid Column Minimum Width on Touch Viewports (UX Audit 2026-03-09)
   Issue: On 375px mobile, Syncfusion grid columns compress to 7-17px
   width when 14+ columns compete for space. Column header labels become
   untappable. The grid already scrolls horizontally inside .e-content,
   so enforcing a minimum column width safely expands the scrollable area.
   ======================================== */
@media (max-width: 959px) {
    .e-grid .e-headercell {
        min-width: 80px !important;
    }
    .e-grid .e-rowcell {
        min-width: 80px !important;
    }
}

/* ========================================
   Foldable Device Support (Samsung Fold, etc.)
   Inner screen / small tablets: 400-767px
   ======================================== */
@media (max-width: 767px) and (min-width: 400px) {
    .sfgrid-container {
        height: calc(100dvh - 18rem) !important;
    }
    .e-grid .e-headercell {
        min-width: 65px !important;
        font-size: 12px;
        padding: 6px 8px;
    }
    .e-grid .e-rowcell {
        min-width: 65px !important;
        padding: 6px 8px;
    }
}

/* ========================================
   Foldable Device Support (Samsung Fold, etc.)
   Folded state: ~280-360px width
   ======================================== */
@media (max-width: 399px) {
    /* Reduce grid height offset for very narrow screens that have less chrome */
    .sfgrid-container {
        height: calc(100dvh - 14rem) !important;
    }

    /* Narrower minimum column width so columns fit without excessive scroll */
    .e-grid .e-headercell {
        min-width: 60px !important;
    }
    .e-grid .e-rowcell {
        min-width: 60px !important;
    }

    /* Tighter cell padding */
    .e-grid .e-rowcell {
        padding: 4px 6px;
    }
    .e-grid .e-headercell {
        padding: 4px 6px;
        font-size: 11px;
    }
}

/* ========================================
   RefreshButtonWithBadge Animation
   ======================================== */

/* Pulsing animation for the badge when new events are available */
.mud-badge.pulsing-badge {
    animation: pulse 2s infinite;
}

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