/* =====================================================================
   Hexaom Admin — Design System (v1)
   Arabic-first RTL, calm financial UI. Scoped under body.hx-admin-app so
   it never affects the cashier app or the shared MudBlazor theme.
   Layers: 1) tokens  2) shell  3) component restyles  4) utilities
   ===================================================================== */

/* ---------- 1) Design tokens ---------- */
body.hx-admin-app {
    /* Brand */
    --hx-primary: #3d4e81;
    --hx-primary-strong: #2f3a6b;
    --hx-primary-soft: #eef1f8;
    --hx-primary-contrast: #ffffff;

    /* Surfaces & background */
    --hx-bg: #f4f6fb;
    --hx-surface: #ffffff;
    --hx-surface-2: #f8fafc;

    /* Lines */
    --hx-border: #e7eaf2;
    --hx-border-strong: #d6dbe7;

    /* Text (contrast-checked on white: ≥4.5:1) */
    --hx-text: #1f2533;
    --hx-text-secondary: #59617a;
    --hx-text-muted: #6c7489;

    /* Status — text darkened to ≥4.5:1 on its soft background */
    --hx-success: #1b5e20;   --hx-success-soft: #e7f4e8;
    --hx-warning: #8a5300;   --hx-warning-soft: #fff3e0;
    --hx-error:   #b3201f;   --hx-error-soft:   #fdeaea;
    --hx-info:    #2f3a6b;   --hx-info-soft:    #eef1f8;

    /* Typography: distinctive Arabic display + refined body */
    --hx-font-display: "Tajawal", "Cairo", "Segoe UI", sans-serif;
    --hx-focus-ring: 0 0 0 3px rgba(61, 78, 129, 0.35);

    /* Shape & depth */
    --hx-radius: 14px;
    --hx-radius-sm: 10px;
    --hx-radius-pill: 999px;
    --hx-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
    --hx-shadow: 0 8px 28px rgba(16, 24, 40, 0.07);

    /* Layout — matches MudBlazor non-dense appbar so content never overlaps */
    --hx-topbar-h: 64px;

    background: var(--hx-bg);
    color: var(--hx-text);
}

/* Tabular figures for money/numbers */
body.hx-admin-app .hx-num,
body.hx-admin-app .hx-money {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    letter-spacing: 0;
}

/* ---------- 2) Shell: sidebar + topbar ---------- */

/* App background */
body.hx-admin-app .pos-main-content,
body.hx-admin-app .mud-main-content {
    background: var(--hx-bg);
}

/* Offset content below the fixed topbar — the shell's padding shorthand
   drops MudBlazor's default appbar offset, so we restore it here. */
body.hx-admin-app .pos-main-content {
    padding-top: calc(var(--hx-topbar-h) + 1.25rem);
}

/* Sidebar host */
body.hx-admin-app .pos-admin-sidebar-host {
    width: min(18rem, 44vw);
    background: var(--hx-surface);
    border-inline-start: 1px solid var(--hx-border);
    transition: width .18s ease;
}

/* Collapsed rail (desktop toggle): hide the sidebar so content takes full width. */
body.hx-admin-app .pos-shell-root.hx-rail-collapsed .pos-admin-sidebar-host {
    display: none;
}

/* Brand block */
body.hx-admin-app .hx-brand {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 1rem 1rem 0.75rem;
    margin-bottom: 0.25rem;
    border-bottom: 1px solid var(--hx-border);
}

body.hx-admin-app .hx-brand__mark {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 1.15rem;
    color: var(--hx-primary-contrast);
    background: linear-gradient(135deg, var(--hx-primary) 0%, var(--hx-primary-strong) 100%);
    box-shadow: var(--hx-shadow-sm);
    flex-shrink: 0;
}

body.hx-admin-app .hx-brand__name {
    font-family: var(--hx-font-display);
    font-weight: 800;
    font-size: 1.1rem;
    line-height: 1.1;
    letter-spacing: -.01em;
    color: var(--hx-text);
}

body.hx-admin-app .hx-brand__meta {
    font-size: 0.75rem;
    color: var(--hx-text-muted);
}

/* Nav menu */
body.hx-admin-app .admin-nav-menu {
    padding: 0.5rem 0.5rem 1.25rem;
}

body.hx-admin-app .admin-nav-menu .mud-nav-link {
    border-radius: var(--hx-radius-sm);
    margin: 0.125rem 0;
    color: var(--hx-text-secondary);
    font-weight: 500;
    transition: background-color .15s ease, color .15s ease;
}

body.hx-admin-app .admin-nav-menu .mud-nav-link .mud-icon-root {
    color: var(--hx-text-muted);
}

body.hx-admin-app .admin-nav-menu .mud-nav-link:hover {
    background: var(--hx-surface-2);
    color: var(--hx-text);
}

body.hx-admin-app .admin-nav-menu .mud-nav-group > .mud-nav-link {
    font-weight: 700;
    color: var(--hx-text);
}

/* Active item: soft primary fill + start accent bar */
body.hx-admin-app .admin-nav-menu .mud-nav-link.active {
    background: var(--hx-primary-soft);
    color: var(--hx-primary-strong);
    font-weight: 700;
    position: relative;
}

body.hx-admin-app .admin-nav-menu .mud-nav-link.active .mud-icon-root {
    color: var(--hx-primary-strong);
}

body.hx-admin-app .admin-nav-menu .mud-nav-link.active::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 18%;
    bottom: 18%;
    width: 3px;
    border-radius: var(--hx-radius-pill);
    background: var(--hx-primary);
}

/* Topbar (MudAppBar) — taller, breathable, 3-zone layout */
body.hx-admin-app .mud-appbar.hx-appbar {
    background: var(--hx-surface) !important;
    color: var(--hx-text) !important;
    border-bottom: 1px solid var(--hx-border);
    box-shadow: var(--hx-shadow-sm) !important;
    height: var(--hx-topbar-h);
}

body.hx-admin-app .mud-appbar.hx-appbar .mud-toolbar {
    height: var(--hx-topbar-h);
    min-height: var(--hx-topbar-h);
    padding-inline: 1.25rem;
}

body.hx-admin-app .hx-topbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
}

body.hx-admin-app .hx-topbar__menu { flex-shrink: 0; }

/* Zone 1 — establishment identity */
body.hx-admin-app .hx-establishment {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-width: 0;
    flex-shrink: 0;
}

body.hx-admin-app .hx-establishment__logo {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--hx-border);
    background: var(--hx-surface);
}

body.hx-admin-app .hx-establishment__logo--initial {
    display: grid;
    place-items: center;
    border: 0;
    font-family: var(--hx-font-display);
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--hx-primary-contrast);
    background: linear-gradient(135deg, var(--hx-primary) 0%, var(--hx-primary-strong) 100%);
}

body.hx-admin-app .hx-establishment__text { min-width: 0; }

body.hx-admin-app .hx-establishment__name {
    font-family: var(--hx-font-display);
    font-weight: 800;
    font-size: 1rem;
    line-height: 1.2;
    color: var(--hx-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 18ch;
}

body.hx-admin-app .hx-establishment__system {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--hx-text-muted);
}

body.hx-admin-app .hx-establishment__system-icon {
    font-size: 0.85rem !important;
    color: var(--hx-primary);
}

/* Zone 2 — search, centered with a sensible cap */
body.hx-admin-app .hx-topbar__search {
    flex: 1 1 auto;
    max-width: 460px;
    margin-inline: auto;
}

body.hx-admin-app .hx-topbar__search .mud-input.mud-input-outlined .mud-input-outlined-border {
    border-radius: var(--hx-radius-pill);
    background: var(--hx-surface-2);
}

@media (max-width: 959.98px) {
    body.hx-admin-app .hx-topbar__search { display: none; }
    body.hx-admin-app .hx-establishment { flex: 1 1 auto; }
}

/* Zone 3 — actions */
body.hx-admin-app .hx-topbar__actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}

body.hx-admin-app .hx-topbar__divider {
    width: 1px;
    height: 28px;
    background: var(--hx-border);
    margin-inline: 0.5rem;
}

body.hx-admin-app .hx-topbar__user {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    padding: 0.3rem 0.5rem;
    border-radius: var(--hx-radius-pill);
    transition: background-color .15s ease;
}

body.hx-admin-app .hx-topbar__user:hover { background: var(--hx-surface-2); }

body.hx-admin-app .hx-topbar__user-text { text-align: start; line-height: 1.15; }

body.hx-admin-app .hx-topbar__user-name {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--hx-text);
}

body.hx-admin-app .hx-topbar__user-role {
    font-size: 0.72rem;
    color: var(--hx-text-muted);
}

body.hx-admin-app .hx-topbar__user-caret {
    font-size: 1.1rem !important;
    color: var(--hx-text-muted);
}

/* User dropdown: anchor the menu just under the user chip (top inline-start = the
   right edge in RTL) instead of centering it in the viewport like a modal. The
   overlay itself is transparent and only catches the outside click to close. */
body.hx-admin-app .hx-user-menu-overlay__anchor {
    position: fixed;
    top: calc(var(--hx-topbar-h) + 4px);
    /* The account chip sits at the END of the RTL bar (its left edge), so anchor the menu there. */
    inset-inline-end: 12px;
    display: flex;
}

/* ---------- 3) Component restyles ---------- */

/* Cards: thin border + soft radius instead of heavy elevation */
body.hx-admin-app .mud-paper {
    border-radius: var(--hx-radius);
}

body.hx-admin-app .mud-paper.mud-elevation-0,
body.hx-admin-app .mud-paper.mud-paper-outlined {
    border: 1px solid var(--hx-border);
    box-shadow: var(--hx-shadow-sm);
}

/* Page header */
body.hx-admin-app .admin-page-header {
    margin-bottom: 1.25rem;
}

body.hx-admin-app .admin-page-header__title {
    font-family: var(--hx-font-display);
    font-weight: 800;
    font-size: 1.6rem;
    letter-spacing: -.015em;
    color: var(--hx-text);
}

body.hx-admin-app .admin-page-header__subtitle {
    color: var(--hx-text-secondary);
    max-width: 64ch;
}

/* Tables */
body.hx-admin-app .mud-table-root .mud-table-head th,
body.hx-admin-app .mud-simple-table thead th {
    background: var(--hx-surface-2);
    color: var(--hx-text-secondary);
    font-weight: 700;
    font-size: 0.8rem;
    border-bottom: 1px solid var(--hx-border);
}

body.hx-admin-app .mud-table-root .mud-table-row:hover,
body.hx-admin-app .mud-simple-table tbody tr:hover {
    background: var(--hx-surface-2);
}

/* Inputs: rounded, calm */
body.hx-admin-app .mud-input.mud-input-outlined .mud-input-outlined-border {
    border-radius: var(--hx-radius-sm);
    border-color: var(--hx-border-strong);
}

/* Comfortable table row density (less cramped, easier to scan). */
body.hx-admin-app .mud-table-root .mud-table-cell {
    padding-block: 0.7rem;
}

/* MudDataGrid: match the design-system table look (header tint, hover, density, calm borders). */
body.hx-admin-app .mud-data-grid .mud-table-head .mud-table-cell,
body.hx-admin-app .mud-data-grid .mud-table-head th {
    background: var(--hx-surface-2);
    color: var(--hx-text-secondary);
    font-weight: 700;
    font-size: 0.8rem;
    border-bottom: 1px solid var(--hx-border);
}

body.hx-admin-app .mud-data-grid .mud-table-row:hover {
    background: var(--hx-surface-2);
}

body.hx-admin-app .mud-data-grid .mud-table-cell {
    padding-block: 0.7rem;
    border-color: var(--hx-border);
}

/* Grid fits its container exactly like the official MudBlazor demo: the table
   fills 100% width and column content wraps, so there is NO forced horizontal
   scroller. The .hx-admin-data-scroll host keeps overflow-x:auto only as a
   last-resort safety net for genuinely oversized content. */
body.hx-admin-app .mud-data-grid .mud-table-root,
body.hx-admin-app .mud-data-grid table.mud-table {
    width: 100%;
    table-layout: auto;
}
/* Header labels stay on one line; body cells wrap so long text (e.g. ZATCA
   responses) never overlaps neighbouring columns or stretches the table. */
body.hx-admin-app .mud-data-grid .mud-table-head .mud-table-cell {
    white-space: nowrap;
}
body.hx-admin-app .mud-data-grid .mud-table-cell {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    vertical-align: top;
}
/* Cap long free-text columns so a single verbose value can't stretch the grid. */
body.hx-admin-app .mud-data-grid .hx-cell-longtext {
    max-width: 260px;
}

/* Reusable form-page shell: capped reading width + room for the sticky save bar. */
body.hx-admin-app .hx-form-page {
    max-width: 860px;
    margin-inline: auto;
    padding-bottom: 96px;
}

/* Dialogs: cap the wide variants to a comfortable medium width (most were too wide). */
body.hx-admin-app .mud-dialog.mud-dialog-width-lg,
body.hx-admin-app .mud-dialog.mud-dialog-width-xl,
body.hx-admin-app .mud-dialog.mud-dialog-width-false {
    max-width: 640px;
    width: 100%;
}

/* Active sidebar item: reinforce via aria-current (Blazor NavLink sets it) so the current
   page is always visibly highlighted, not just the .active class. */
body.hx-admin-app .admin-nav-menu .mud-nav-link[aria-current="page"] {
    background: var(--hx-primary-soft);
    color: var(--hx-primary-strong);
    font-weight: 700;
    position: relative;
}

body.hx-admin-app .admin-nav-menu .mud-nav-link[aria-current="page"] .mud-icon-root {
    color: var(--hx-primary-strong);
}

body.hx-admin-app .admin-nav-menu .mud-nav-link[aria-current="page"]::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 18%;
    bottom: 18%;
    width: 3px;
    border-radius: var(--hx-radius-pill);
    background: var(--hx-primary);
}

/* Breadcrumbs (page header wayfinding): small, muted, with breathing room. */
body.hx-admin-app .admin-page-header__crumbs {
    font-size: 0.8rem;
    margin-bottom: 0.25rem;
}

body.hx-admin-app .admin-page-header__crumbs .mud-breadcrumb-item a,
body.hx-admin-app .admin-page-header__crumbs .mud-breadcrumb-item .mud-typography {
    color: var(--hx-text-muted);
}

body.hx-admin-app .admin-page-header__crumbs .mud-breadcrumb-item:last-child .mud-typography {
    color: var(--hx-text-secondary);
    font-weight: 600;
}

/* ---------- 4) Reusable pieces (status chip, metric card, money) ---------- */

/* Status chip = color + text */
body.hx-admin-app .hx-status {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.2rem 0.6rem;
    border-radius: var(--hx-radius-pill);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
}

body.hx-admin-app .hx-status::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

body.hx-admin-app .hx-status--success { color: var(--hx-success); background: var(--hx-success-soft); }
body.hx-admin-app .hx-status--warning { color: var(--hx-warning); background: var(--hx-warning-soft); }
body.hx-admin-app .hx-status--error   { color: var(--hx-error);   background: var(--hx-error-soft); }
body.hx-admin-app .hx-status--info    { color: var(--hx-info);    background: var(--hx-info-soft); }
body.hx-admin-app .hx-status--neutral { color: var(--hx-text-secondary); background: var(--hx-surface-2); }

/* Document totals rows */
body.hx-admin-app .hx-total-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.35rem 0;
    font-size: 0.9rem;
    color: var(--hx-text-secondary);
}

body.hx-admin-app .hx-total-row--grand {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--hx-text);
}

body.hx-admin-app .hx-total-row--grand .hx-money {
    font-family: var(--hx-font-display);
    font-size: 1.15rem;
}

/* Money */
body.hx-admin-app .hx-money {
    font-weight: 700;
    color: var(--hx-text);
}

body.hx-admin-app .hx-money--due { color: var(--hx-error); }

/* Stat / metric card */
body.hx-admin-app .hx-stat {
    height: 100%;
    padding: 1.1rem 1.15rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

body.hx-admin-app .hx-stat__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

body.hx-admin-app .hx-stat__label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--hx-text-secondary);
}

body.hx-admin-app .hx-stat__icon {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

body.hx-admin-app .hx-stat__icon .mud-icon-root { font-size: 1.25rem; }

body.hx-admin-app .hx-stat__value {
    font-family: var(--hx-font-display);
    font-size: 1.8rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.01em;
    color: var(--hx-text);
}

body.hx-admin-app .hx-stat__meta {
    font-size: 0.8rem;
    color: var(--hx-text-muted);
}

/* Tone variants for the icon bubble + value accent */
body.hx-admin-app .hx-stat--success .hx-stat__icon { background: var(--hx-success-soft); color: var(--hx-success); }
body.hx-admin-app .hx-stat--warning .hx-stat__icon { background: var(--hx-warning-soft); color: var(--hx-warning); }
body.hx-admin-app .hx-stat--error   .hx-stat__icon { background: var(--hx-error-soft);   color: var(--hx-error); }
body.hx-admin-app .hx-stat--info    .hx-stat__icon { background: var(--hx-info-soft);    color: var(--hx-info); }
body.hx-admin-app .hx-stat--primary .hx-stat__icon { background: var(--hx-primary-soft); color: var(--hx-primary-strong); }

/* Trend pill */
body.hx-admin-app .hx-trend {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.78rem;
    font-weight: 700;
}

body.hx-admin-app .hx-trend--up { color: var(--hx-success); }
body.hx-admin-app .hx-trend--down { color: var(--hx-error); }
body.hx-admin-app .hx-trend--flat { color: var(--hx-text-muted); }

/* ---------- Date range fields: fixed, tidy, click-to-open ---------- */
body.hx-admin-app .hx-daterange {
    gap: 0.75rem;
}

body.hx-admin-app .hx-daterange__field {
    flex: 0 1 190px;
    min-width: 160px;
}

/* Date pickers open on clicking anywhere in the field (Editable=false) */
body.hx-admin-app .hx-daterange__field .mud-input,
body.hx-admin-app .hx-daterange__field input {
    cursor: pointer;
}

/* ---------- Dialogs: consistent, refined sizing ---------- */
body.hx-admin-app .mud-dialog,
.mud-dialog.hx-admin-dialog {
    border-radius: var(--hx-radius, 14px);
}

.mud-dialog.hx-admin-dialog .mud-dialog-title {
    padding: 1.1rem 1.5rem 0.5rem;
    font-family: "Tajawal", "Cairo", sans-serif;
    font-weight: 800;
}

.mud-dialog.hx-admin-dialog .mud-dialog-content {
    padding: 1rem 1.5rem;
}

.mud-dialog.hx-admin-dialog .mud-dialog-actions {
    padding: 0.75rem 1.5rem 1.1rem;
    gap: 0.5rem;
    border-top: 1px solid var(--hx-border, #e7eaf2);
}

/* ---------- Forms: RTL-correct labels/placeholders + comfortable density ---------- */
body.hx-admin-app .mud-input-label {
    text-align: right;
}

/* RTL fix: MudBlazor anchors the floating (outlined) label to the LEFT by default, so in an
   Arabic UI the label drifts to the wrong side. Re-anchor it to the right (start). */
body.hx-admin-app .mud-input-label.mud-input-label-inputcontrol {
    left: auto;
    right: 0;
    transform-origin: top right;
}

/* The notched-outline legend (the gap the label sits in) must also be on the right in RTL. */
body.hx-admin-app .mud-input-outlined-border {
    text-align: right;
}

/* Helper text under a field should use the app's Arabic font (not a Latin fallback) and align right. */
body.hx-admin-app .mud-input-helper-text {
    font-family: inherit;
    text-align: right;
}

body.hx-admin-app input::placeholder,
body.hx-admin-app textarea::placeholder {
    text-align: right;
    opacity: 0.7;
}

/* Tables: enable sticky, sortable header affordance spacing */
body.hx-admin-app .mud-table-sort-label {
    font-weight: 700;
}

/* ---------- Unified list-page template ---------- */

/* Filter bar card */
body.hx-admin-app .hx-filterbar {
    padding: 1rem 1.1rem;
    margin-bottom: 1rem;
    background: var(--hx-surface);
    border: 1px solid var(--hx-border);
    border-radius: var(--hx-radius);
}

/* Filter rows align to the bottom so the apply button lines up with the inputs. */
body.hx-admin-app .hx-filterbar .mud-grid {
    align-items: flex-end;
}

/* Date-range = two pickers side by side (not stacked) even inside a narrow filter column. */
body.hx-admin-app .hx-daterange {
    flex-wrap: nowrap;
    gap: 0.5rem;
}

body.hx-admin-app .hx-daterange__field {
    flex: 1 1 0;
    min-width: 0;
}

/* Toolbar above a table: title/meta on the start, actions on the end */
body.hx-admin-app .hx-list-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

body.hx-admin-app .hx-list-meta {
    font-size: 0.85rem;
    color: var(--hx-text-secondary);
}

body.hx-admin-app .hx-list-meta strong {
    font-family: var(--hx-font-display);
    color: var(--hx-text);
}

/* Table cells: comfortable rhythm + RTL-aware numeric alignment */
body.hx-admin-app .mud-table-root .mud-table-cell {
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
}

/* "Needs attention" list */
body.hx-admin-app .hx-attn {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0.25rem;
    border-bottom: 1px solid var(--hx-border);
}

body.hx-admin-app .hx-attn:last-child { border-bottom: 0; }

body.hx-admin-app .hx-attn__icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

body.hx-admin-app .hx-attn__body { flex: 1 1 auto; min-width: 0; }

body.hx-admin-app .hx-attn__title { font-weight: 600; font-size: 0.9rem; }

body.hx-admin-app .hx-attn__meta { font-size: 0.8rem; color: var(--hx-text-muted); }

/* ---------- 5) Accessibility: focus & touch ---------- */

/* Visible focus ring on keyboard navigation (not on mouse press) */
body.hx-admin-app a:focus-visible,
body.hx-admin-app button:focus-visible,
body.hx-admin-app .mud-nav-link:focus-visible,
body.hx-admin-app .mud-button-root:focus-visible,
body.hx-admin-app .mud-icon-button:focus-visible,
body.hx-admin-app .mud-input-control:focus-within {
    outline: none;
    box-shadow: var(--hx-focus-ring);
    border-radius: var(--hx-radius-sm);
}

/* Comfortable touch targets for nav rows */
body.hx-admin-app .admin-nav-menu .mud-nav-link {
    min-height: 44px;
}

/* ---------- 6) Motion: orchestrated page-load reveal ---------- */
@keyframes hx-rise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

body.hx-admin-app .hx-stat,
body.hx-admin-app .admin-page-header,
body.hx-admin-app main .mud-grid > .mud-grid-item > .mud-paper {
    animation: hx-rise .42s cubic-bezier(.21, .6, .35, 1) both;
}

/* Stagger the KPI row for a single, well-timed entrance */
body.hx-admin-app main .mud-grid > .mud-grid-item:nth-child(1) .hx-stat { animation-delay: .02s; }
body.hx-admin-app main .mud-grid > .mud-grid-item:nth-child(2) .hx-stat { animation-delay: .07s; }
body.hx-admin-app main .mud-grid > .mud-grid-item:nth-child(3) .hx-stat { animation-delay: .12s; }
body.hx-admin-app main .mud-grid > .mud-grid-item:nth-child(4) .hx-stat { animation-delay: .17s; }

/* Respect user preference: no motion */
@media (prefers-reduced-motion: reduce) {
    body.hx-admin-app * {
        animation: none !important;
        transition: none !important;
    }
}

/* ---------- Dashboard footer ---------- */
body.hx-admin-app .hx-admin-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 2rem;
    padding: 1rem 1.25rem 1.5rem;
    border-top: 1px solid var(--hx-border, #e7eaf2);
    color: var(--hx-text-secondary, #64748b);
    font-size: 0.82rem;
}
body.hx-admin-app .hx-admin-footer__sep { opacity: 0.5; }
body.hx-admin-app .hx-admin-footer__link {
    color: var(--hx-primary, #3d4e81);
    font-weight: 700;
    text-decoration: none;
}
body.hx-admin-app .hx-admin-footer__link:hover { text-decoration: underline; }

/* ---------- Platform footer (shared HexaomFooter component) ---------- */
body.hx-admin-app .hx-platform-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    margin-top: 2rem;
    padding: 1rem 1.25rem 1.5rem;
    border-top: 1px solid var(--hx-border, #e7eaf2);
    color: var(--hx-text-secondary, #64748b);
    font-size: 0.82rem;
    text-align: center;
}
body.hx-admin-app .hx-platform-footer__line { line-height: 1.7; }
body.hx-admin-app .hx-platform-footer__name { font-weight: 700; }
body.hx-admin-app .hx-platform-footer__sep { opacity: 0.5; margin: 0 0.15rem; }
body.hx-admin-app .hx-platform-footer__link {
    color: var(--hx-primary, #3d4e81);
    font-weight: 700;
    text-decoration: none;
}
body.hx-admin-app .hx-platform-footer__link:hover { text-decoration: underline; }

/* ---------- Dialogs: never span the whole screen ---------- */
body.hx-admin-app .mud-dialog.hx-admin-dialog {
    width: 100%;
    max-width: 560px !important;
    margin-inline: auto;
}
body.hx-admin-app .mud-dialog.hx-admin-dialog.mud-dialog-width-xs { max-width: 420px !important; }
body.hx-admin-app .mud-dialog.hx-admin-dialog.mud-dialog-width-md { max-width: 760px !important; }
body.hx-admin-app .mud-dialog.hx-admin-dialog.mud-dialog-width-lg,
body.hx-admin-app .mud-dialog.hx-admin-dialog.mud-dialog-width-xl { max-width: 920px !important; }

/* ---------- Active sidebar item: unmistakable highlight ---------- */
body.hx-admin-app .admin-nav-menu .mud-nav-link.active,
body.hx-admin-app .admin-nav-menu .mud-nav-link.mud-nav-link-active,
body.hx-admin-app .admin-nav-menu .mud-nav-link[aria-current="page"] {
    background: var(--hx-primary, #3d4e81);
    color: #fff;
    font-weight: 700;
}
body.hx-admin-app .admin-nav-menu .mud-nav-link.active .mud-icon-root,
body.hx-admin-app .admin-nav-menu .mud-nav-link.mud-nav-link-active .mud-icon-root,
body.hx-admin-app .admin-nav-menu .mud-nav-link[aria-current="page"] .mud-icon-root {
    color: #fff;
}
body.hx-admin-app .admin-nav-menu .mud-nav-link.active:hover,
body.hx-admin-app .admin-nav-menu .mud-nav-link.mud-nav-link-active:hover,
body.hx-admin-app .admin-nav-menu .mud-nav-link[aria-current="page"]:hover {
    background: var(--hx-primary-strong, #2f3d68);
    color: #fff;
}