/*
    Loading skeletons for the admin pages that aren't an area of their own: the data grid skeleton (Transactions,
    Components/Pages/Admin/AdminSkeletons/AdminGridSkeleton.razor) and the settings skeletons (Partner Sharing, Email
    Preferences, Update Account, Accessibility; AdminSettingsSkeleton.razor). The bones themselves and their sweep are
    the Dashboard's (admin-dashboard.css, .dsh-bone / --dsh-bone); this file only shapes them and frames the grid with
    the admin grid tokens (admin-grid.css, --ag-*), so light, dark, Grid borders and High contrast match the real grid.
    Motion stops with prefers-reduced-motion (admin-dashboard.css) and the Accessibility page's Reduce motion switch
    (admin-accessibility.css).
*/

/* ------------------------------------------------------------------ Tones */

.ask-page, .upa-skeleton, .emp-skeleton { --dsh-bone: rgba(91, 100, 117, .1); --dsh-wave: rgba(255, 255, 255, .85); }
[data-bs-theme="dark"] .ask-page, [data-bs-theme="dark"] .upa-skeleton, [data-bs-theme="dark"] .emp-skeleton { --dsh-bone: rgba(170, 178, 194, .12); --dsh-wave: rgba(255, 255, 255, .12); }

/* ------------------------------------------------------------------ Shared shapes */

.ask-checkbox { width: 1rem; height: 1rem; border-radius: .3rem; }
.ask-checkbox.is-on { background-color: color-mix(in srgb, var(--ag-accent) 30%, transparent); }
.ask-round-btn { width: 2rem; height: 2rem; border-radius: 999px; }
.ask-logo { width: 2.1rem; height: 2.1rem; border-radius: 999px; }
.ask-chip { height: 1.25rem; border-radius: 999px; }
.ask-badge { width: 6rem; height: 1.3rem; border-radius: 999px; }
.ask-input { width: 100%; height: calc(2.25rem + 2px); border-radius: .5rem; }
.ask-button { height: 2.1rem; border-radius: .5rem; }
.ask-button.is-primary { background-color: color-mix(in srgb, var(--ag-accent) 26%, transparent); }
.ask-switch { width: 2.1rem; height: 1.15rem; border-radius: 999px; }
.ask-switch-row { display: flex; align-items: center; gap: .6rem; min-height: 1.5rem; }
.ask-avatar { width: 160px; height: 160px; margin: 0 auto 1rem; border-radius: 999px; }
.ask-push { margin-left: auto; }

/* ------------------------------------------------------------------ Data grid */

/* Flush to the card's edges, exactly where the borderless grid sits (admin-grid.css .admin-grid-borderless). */
.ask-grid-card { overflow: hidden; }
.ask-grid { margin: calc(-1 * var(--si-card-spacer-y, 1.5rem)) calc(-1 * var(--si-card-spacer-x, 1.5rem)); color: var(--ag-text); }

.ask-grid-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .45rem;
    box-sizing: border-box;
    min-height: 3.55rem;
    padding: .7rem .85rem;
    border-bottom: 1px solid var(--ag-rule);
}
.ask-tbar-btn { display: inline-flex; align-items: center; gap: .35rem; height: 2.1rem; padding: 0 .8rem; color: var(--ag-muted); font-size: .8rem; font-weight: 700; white-space: nowrap; }
.ask-tbar-icon { width: .9rem; height: .9rem; border-radius: .25rem; }
.ask-tbar-pill { width: 6.5rem; height: 2.1rem; border-radius: 999px; }
.ask-grid-search {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    box-sizing: border-box;
    width: min(18rem, 100%);
    height: 2.1rem;
    margin-left: auto;
    padding: 0 .75rem;
    border: 1px solid var(--ag-line-strong);
    border-radius: 999px;
    background: var(--ag-head);
    color: var(--ag-muted);
}

/* Columns keep their real widths; whatever passes the card's edge is clipped, as the grid's own scroll hides it. */
.ask-grid-scroll { overflow: hidden; }
.ask-grid-table { display: grid; width: max-content; min-width: 100%; }
.ask-grid-head {
    display: flex;
    align-items: center;
    min-width: 0;
    min-height: 2.4rem;
    padding: .55rem .75rem;
    border-bottom: 1px solid var(--ag-rule);
    background: var(--ag-head);
    color: var(--ag-muted);
    font-size: .62rem;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: .03em;
    text-transform: uppercase;
}
.ask-grid-cell {
    display: flex;
    align-items: center;
    min-width: 0;
    min-height: 3.35rem;
    padding: .55rem .75rem;
    border-bottom: 1px solid var(--ag-rule);
}
.ask-grid-head.is-end, .ask-grid-cell.is-end { justify-content: flex-end; }
.ask-grid-head.is-center, .ask-grid-cell.is-center { justify-content: center; }
.ask-chips { gap: .3rem; }
.ask-amount.is-inflow { background-color: rgba(22, 163, 74, .14); }
[data-bs-theme="dark"] .ask-amount.is-inflow { background-color: rgba(52, 211, 153, .16); }

.ask-grid-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; padding: .7rem .85rem; }
.ask-pager-nums { display: flex; align-items: center; gap: .3rem; }
.ask-pager-btn { width: 2rem; height: 2rem; border-radius: .55rem; }
.ask-pager-btn.is-current { background-color: color-mix(in srgb, var(--ag-accent) 26%, transparent); }
.ask-pager-size { width: 4.5rem; height: 2rem; margin-left: .5rem; border-radius: .55rem; }

/* ------------------------------------------------------------------ Generic page body (AdminPageSkeleton) */

.ask-page { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.ask-page-hero { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 190px; padding: 1.5rem; border: 1px solid var(--set-hero-border, var(--bs-border-color)); border-radius: 20px; background: var(--set-hero-bg, transparent); }
.ask-page-hero-copy { display: flex; flex-direction: column; gap: .7rem; flex: 1 1 auto; min-width: 0; }
.ask-page-hero-art { flex: 0 0 auto; width: min(34%, 280px); height: 120px; border-radius: 18px; }
.ask-page-tiles { display: grid; gap: .65rem; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.ask-page-tile, .ask-page-card { display: flex; flex-direction: column; gap: .5rem; padding: 1rem; border: 1px solid var(--set-card-border, var(--bs-border-color)); border-radius: 16px; background: var(--set-card, transparent); }
.ask-page-grid { display: grid; gap: 1rem; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.ask-page-card { min-height: 240px; }
.ask-page-bars { display: flex; align-items: flex-end; gap: 6px; height: 180px; margin-top: auto; }
.ask-page-bars > span { flex: 1 1 0; border-radius: 6px 6px 2px 2px; }
.ask-page-row { display: flex; align-items: center; gap: .6rem; padding: .3rem 0; }
.ask-page-dot { width: 28px; height: 28px; border-radius: 9px; }

@media (max-width: 991.98px) {
    .ask-page-grid { grid-template-columns: minmax(0, 1fr); }
    .ask-page-hero-art { display: none; }
}

/* ------------------------------------------------------------------ Update Account (UpdateAccountSkeleton; the real upa-* layout holds the shapes) */

.upa-skeleton .upa-hero { animation: none; }
.upa-skeleton .upa-card { animation: none; }
.upa-skeleton .upa-stat-bone { gap: .45rem; animation: none; }
.upa-bone-av { position: absolute; border-radius: 50%; }
.upa-bone-av-user { left: 0; top: 0; width: 148px; height: 148px; }
.upa-bone-av-partner { right: 0; bottom: 0; width: 84px; height: 84px; box-shadow: 0 0 0 4px var(--set-card, #fff); }
.upa-bone-glyph { width: 30px; height: 30px; border-radius: 10px; }
.upa-skeleton .upa-card-title { gap: .55rem; flex-wrap: nowrap; }
.upa-bone-input { width: 100%; height: 42px; border-radius: 12px; }
.upa-bone-save { width: 10rem; height: 48px; border-radius: 14px; }
.upa-bone-head-btn { width: 9.5rem; height: 40px; border-radius: 12px; }
.upa-bone-line { display: flex; align-items: center; gap: .7rem; padding: .45rem 0; }
.upa-bone-dot { width: 30px; height: 30px; border-radius: 10px; }
.upa-bone-tl { width: 14px; height: 14px; border-radius: 50%; }
.upa-skeleton .dsh-lines { flex: 1 1 auto; min-width: 0; }
@media (max-width: 767.98px) {
    .upa-bone-head-btn { width: 40px; }
    .upa-bone-av-user { width: 124px; height: 124px; }
    .upa-bone-av-partner { width: 72px; height: 72px; }
}

/* ------------------------------------------------------------------ Accessibility (the switches wait for this browser's saved preferences) */

.a11y-title .ask-a11y-state { display: inline-block; width: 2.3rem; height: 1.05rem; margin-left: .5rem; border-radius: 999px; vertical-align: -.12rem; }
.ask-a11y-switch { width: 2.9rem; height: 1.55rem; border-radius: 999px; }

@media (max-width: 575.98px) {
    .ask-tbar-btn { display: none; }
    .ask-grid-search { width: 100%; margin-left: 0; }
}

/* ------------------------------------------------------------------ Email Preferences (EmailPreferencesSkeleton; the real emp-* layout holds the shapes) */

.emp-bone-av { width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto; }
.emp-bone-ring { width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto; }
.emp-bone-glyph { width: 32px; height: 32px; border-radius: 10px; flex: 0 0 auto; }
.emp-bone-switch { width: 46px; height: 26px; border-radius: 999px; flex: 0 0 auto; }
.emp-bone-save { width: 9rem; height: 46px; border-radius: 14px; }
.emp-skeleton .emp-group-title { display: flex; align-items: center; gap: .6rem; }