/* ════════════════════════════════════════════════════════════
 * ui-datagrid.css — Biosis RCL component stilleri
 * Bölümler: UiDataGrid, UiDataGridPagination
 * (ui-components.css monolitinden bölündü — 2026-06-02)
 * ════════════════════════════════════════════════════════════ */

/*
 * UiDataGrid — chrome + CSS-grid table replacement (no <table>, per
 * iron rule #5). Every row reuses the same `grid-template-columns`
 * the parent component sets inline based on column definitions, so
 * columns line up across header + skeleton + data rows.
 */

.ui-grid {
    display: flex;
    flex-direction: column;
    background-color: var(--va-card);
    border: 1px solid var(--va-border);
    border-radius: 12px;
    overflow: hidden;
}

/* ── Toolbar ────────────────────────────────────────────────────── */
.ui-grid__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-block-end: 1px solid var(--va-border);
    background-color: var(--va-card);
    flex-wrap: wrap;
}
.ui-grid__search {
    flex: 1 1 240px;
    max-width: 360px;
}
.ui-grid__toolbar-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.ui-grid__selected-count {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: 999px;
    background-color: color-mix(in oklab, var(--va-accent) 18%, transparent);
    color: var(--va-accent);
    font-size: 0.6875rem;
    font-weight: 600;
    border: 1px solid color-mix(in oklab, var(--va-accent) 32%, transparent);
}

/* ── Body: horizontal + vertical scroll wrap → CSS-grid rows ─────
 *
 * The body scrolls in BOTH directions. Vertical scroll kicks in when
 * the row count would otherwise stretch the grid past the soft cap
 * (~15 rows × ~40px). The header row inside `.ui-grid__rows` is
 * `position: sticky; inset-block-start: 0` so it stays put while
 * the body scrolls under it. Horizontal scroll is unchanged.
 *
 * The cap is a `max-height` rather than a fixed `height` so a grid
 * with fewer rows than the cap still sizes to its content (no
 * empty space below the last row).
 */
.ui-grid__scroll {
    overflow: auto;
    /*
     * Row-height fallback (56px) is an average that covers both plain
     * single-line rows (~40px) and avatar-laden two-line rows (~60px);
     * pages with unusually tall rows can override `--ui-grid-row-h`
     * via inline style on the grid section.
     */
    max-height: calc(var(--ui-grid-row-cap, 15) * var(--ui-grid-row-h, 56px));
}
.ui-grid__rows {
    /* grid-template-columns is set inline by the markup so the column
       widths track the column definitions. Children flow row by row. */
    display: grid;
    width: 100%;
    min-width: max-content;
}

.ui-grid__row {
    display: contents;
}

/* All cells share consistent padding + border-bottom; we use a single
   shared border per row by border-bottom-ing each cell. */
.ui-grid__cell {
    padding: 10px 12px;
    font-size: 0.8125rem;
    color: var(--va-text);
    border-block-end: 1px solid var(--va-border);
    background-color: var(--va-card);
    display: flex;
    align-items: center;
    min-width: 0;
}
.ui-grid__cell--align-start  { justify-content: flex-start; text-align: start; }
.ui-grid__cell--align-center { justify-content: center;     text-align: center; }
.ui-grid__cell--align-end    { justify-content: flex-end;   text-align: end; }

/* Header cells take a slightly different chrome. */
.ui-grid__cell--head {
    background-color: var(--va-elevated);
    color: var(--va-text-dim);
    font-family: var(--va-font-heading);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-block-end: 1px solid var(--va-border);
    position: sticky;
    inset-block-start: 0;
    z-index: 1;
}

/* Frozen leading-edge columns — `inset-inline-start` is set inline to
   accumulate offsets across multiple frozen columns. Frozen body cells
   take a darker bg (`--va-bg`, the page background) so they read as a
   distinct "pinned" column when the user scrolls horizontally — this
   matches the contrast the legacy dashboard's `va-grid-table th/td
   [style*=sticky]` rule established. The 1px box-shadow on the trailing
   edge is a subtle separator. */
.ui-grid__cell--frozen {
    background-color: var(--va-bg);
    box-shadow: 1px 0 0 var(--va-border);
}
.ui-grid__row--head .ui-grid__cell--frozen {
    /* Header frozen cells stay on the same darker bg so the entire
       frozen column reads as a unified pinned strip. */
    background-color: var(--va-bg);
}
[dir="rtl"] .ui-grid__cell--frozen {
    box-shadow: -1px 0 0 var(--va-border);
}

/* ── Header sort button ────────────────────────────────────────── */
/*
 * `font: inherit` resets every font-* property INCLUDING the
 * implicit Tailwind/Preflight `text-transform: none` reset on
 * buttons — but Safari + some Chromium versions occasionally drop
 * the inherit when a parent `text-transform: uppercase` is on a
 * sticky-positioned ancestor. Repeat the rule explicitly so the
 * sort buttons inside header cells render upper-case the same way
 * static header text does.
 */
.ui-grid__sort-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 0;
    padding: 0;
    color: inherit;
    font: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    cursor: pointer;
}
.ui-grid__sort-btn:focus-visible {
    outline: 2px solid var(--va-accent);
    outline-offset: 1px;
}
.ui-grid__sort-btn--active { color: var(--va-accent); }
.ui-grid__sort-idle { opacity: 0.4; }

/* ── Data rows: hover + clickable ──────────────────────────────── */
.ui-grid__row:not(.ui-grid__row--head):not(.ui-grid__row--skeleton):not(.ui-grid__empty):hover .ui-grid__cell {
    background-color: color-mix(in oklab, var(--va-accent) 6%, var(--va-card));
}
/* Frozen cells need an explicit hover rule too — the generic
   `.ui-grid__cell` selector above sets a hover bg, but the frozen
   variant has its own `background-color: var(--va-bg)` declaration
   which would override the hover otherwise. Repeat with the tinted
   value (mixed against the bg base so the contrast against the rest
   of the row stays consistent). */
.ui-grid__row:not(.ui-grid__row--head):not(.ui-grid__row--skeleton):not(.ui-grid__empty):hover .ui-grid__cell--frozen {
    background-color: color-mix(in oklab, var(--va-accent) 6%, var(--va-bg));
}
.ui-grid__row--clickable .ui-grid__cell { cursor: pointer; }

/* Skeleton rows — non-interactive; the cells render UiSkeleton bars.
   `min-height` keeps loading rows the same height as data rows so the
   page doesn't visibly jump when real data arrives. The bar itself is
   intentionally short (8px) so the row reads as "pending" rather than
   "filled with placeholder content". */
.ui-grid__row--skeleton .ui-grid__cell {
    cursor: default;
    min-height: var(--ui-grid-row-h, 41px);
}

/* Empty state row — a single cell that spans every column. */
.ui-grid__empty {
    display: contents;
}
.ui-grid__empty > [role="cell"] {
    grid-column: 1 / -1;
    padding: 28px 16px;
    background-color: var(--va-card);
    border-block-end: 0;
}
.ui-grid__empty-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--va-text-muted);
}
.ui-grid__empty-mark {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background-color: var(--va-elevated);
    color: var(--va-text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ui-grid__empty-inner p {
    margin: 0;
    font-size: 0.8125rem;
}

/* ── Native checkbox styling — keeps shape but uses our accent ─── */
.ui-grid__checkbox {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--va-accent);
}

/* ── Footer custom slot ────────────────────────────────────────── */
.ui-grid__footer {
    padding: 10px 12px;
    border-block-start: 1px solid var(--va-border);
    background-color: var(--va-card);
    font-size: 0.8125rem;
    color: var(--va-text-dim);
}

/* ── Mobile card list ─────────────────────────────────────────────
 *
 * The mobile layout is a stack of cards: one per row. The desktop
 * CSS-grid table is hidden under the breakpoint and the card list
 * takes over. Pages that supply a `MobileTemplate` get full control
 * over each card's content; pages that don't get an auto-fallback
 * (first 4 columns rendered as label / value rows — same default
 * the legacy dashboard's VaGrid shipped).
 *
 * Toolbar (search, bulk actions) and pagination stay in the same
 * place — they sit outside the body so they work on both layouts
 * without duplication.
 */
.ui-grid__mobile { display: none; }

@media (max-width: 639.98px) {
    .ui-grid__cell { padding: 8px 10px; }

    /* Hide the desktop scroll body + show the mobile card list. */
    .ui-grid__scroll { display: none; }
    .ui-grid__mobile {
        display: flex;
        flex-direction: column;
        background-color: var(--va-card);
    }
}

.ui-grid__mobile-card {
    padding: 14px 16px;
    border-block-start: 1px solid var(--va-border);
    background-color: var(--va-card);
    /* Cards stack their own field rows — flex column lets a `MobileTemplate`
       choose its own internal layout while the fallback rows still
       inherit a consistent gap. */
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ui-grid__mobile-card:first-child { border-block-start: 0; }
.ui-grid__mobile-card--clickable { cursor: pointer; }
.ui-grid__mobile-card--clickable:active,
.ui-grid__mobile-card--clickable:hover {
    background-color: color-mix(in oklab, var(--va-accent) 6%, var(--va-card));
}

/* Skeleton variant — bars stack like the eventual rows so the card
   reads as "pending" without changing the overall card height when
   real data arrives. */
.ui-grid__mobile-card--skeleton {
    cursor: default;
    /* Leave gap on the skeleton bars; pulse animation lives inside
       UiSkeleton itself. */
}

/* Empty state for the mobile list — matches the desktop empty layout
   (icon + message centred) so the page feels consistent across
   layouts. */
.ui-grid__mobile-empty {
    padding: 28px 16px;
    background-color: var(--va-card);
    border-block-start: 1px solid var(--va-border);
}
.ui-grid__mobile-empty:first-child { border-block-start: 0; }

/* Auto-fallback row layout: label on the left, value flush right.
   Long values truncate with an ellipsis so a row doesn't wrap to
   three lines on a narrow phone. Pages with multi-line content
   should opt into a `MobileTemplate` rather than relying on the
   fallback. */
.ui-grid__mobile-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.ui-grid__mobile-label {
    font-size: 0.71875rem;
    color: var(--va-text-muted);
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}
.ui-grid__mobile-value {
    font-size: 0.85rem;
    color: var(--va-text);
    text-align: end;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* === Ui/DataGrid/UiDataGridPagination.razor.css === */
/*
 * UiDataGridPagination — page navigation row + page-size picker.
 * Logical inset / margin properties so the layout flips for RTL.
 */

.ui-grid-pg {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-block-start: 1px solid var(--va-border);
    flex-wrap: wrap;
}

.ui-grid-pg__info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    font-family: var(--va-font-mono);
    font-size: 0.75rem;
    color: var(--va-text-muted);
}
.ui-grid-pg__size {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.ui-grid-pg__size-label {
    font-family: var(--va-font-body);
    font-size: 0.75rem;
    color: var(--va-text-muted);
}
/*
 * The size picker now wraps a UiSelect (was a native <select>). Cap
 * its width so the popover-trigger doesn't try to fill the row; the
 * UiSelect's default is `width: 100%` for form-field usage, but in
 * the toolbar a compact 4rem reads better. The select is rendered
 * with Size="sm" + Direction="up" so it stays small and its popover
 * escapes the grid's `overflow: hidden` chrome by opening upward.
 */
.ui-grid-pg__size-select {
    display: inline-flex;
    width: 4rem;
}

/* ── Page-button row ────────────────────────────────────────────── */
.ui-grid-pg__buttons {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.ui-grid-pg__btn {
    min-width: 30px;
    height: 30px;
    padding: 0 8px;
    background-color: transparent;
    border: 1px solid var(--va-border);
    border-radius: 7px;
    color: var(--va-text-dim);
    font-family: var(--va-font-mono);
    font-size: 0.75rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.ui-grid-pg__btn:hover:not(:disabled) {
    background-color: var(--va-elevated);
    border-color: var(--va-border-light);
    color: var(--va-text);
}
.ui-grid-pg__btn:focus-visible {
    outline: 2px solid var(--va-accent);
    outline-offset: 2px;
}
.ui-grid-pg__btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.ui-grid-pg__btn--active {
    background-color: color-mix(in oklab, var(--va-accent) 18%, transparent);
    border-color: color-mix(in oklab, var(--va-accent) 35%, var(--va-border));
    color: var(--va-accent);
    font-weight: 600;
}

.ui-grid-pg__ellipsis {
    color: var(--va-text-muted);
    padding: 0 4px;
    user-select: none;
}

/* ── Mobile ─────────────────────────────────────────────────────── */
@media (max-width: 639.98px) {
    .ui-grid-pg { gap: 10px; }
    .ui-grid-pg__info { width: 100%; }
}

/* RTL: flip the chevron icons inside paging buttons. The button layout
   is already logical; only the visual chevrons need mirroring. */
[dir="rtl"] .ui-grid-pg__btn svg {
    transform: scaleX(-1);
}

/* === Ui/DateTime/UiCalendar.razor.css === */