/* ============================================================================
   ew-ui.css  --  EdWise UI SDK global stylesheet  (ships from Ew.Ui.Components)
   ----------------------------------------------------------------------------
   The GLOBAL (non-scoped) polish that makes raw Radzen widgets look like the
   EdWise design system out of the box. Component-specific styling lives in each
   component's scoped .razor.css (shipped automatically in <App>.styles.css);
   THIS file covers the widgets Radzen renders without a wrapping Ew component
   -- dialogs, tabs, the data-grid pager -- which the Material base leaves with
   raw browser chrome (boxy <button> tabs, bulleted pager lists, mismatched
   control sizes).

   Consumers reference it ONCE:
       <link rel="stylesheet" href="_content/Ew.Ui.Components/css/ew-ui.css" />
   placed AFTER the Radzen Material base theme and BEFORE app-specific overrides,
   so it overrides Radzen's defaults but an app can still override it.

   Everything here is TOKEN-DRIVEN with fallbacks: it adapts to whatever palette
   the app sets (--rz-primary, --rz-base-*, ...) and still looks right with no
   palette at all. A fix to any of these widgets is made HERE, once, and every
   consuming app picks it up -- nothing to copy per app.
   ============================================================================ */

/* --- Typography: the heading voice (EdWise theme, 2026-06-09 spec section 6) ------------
   Avenir Next (the brand face -- licensed webfonts, agency-delivered, self-hosted like
   RobotoFlex) carries headings, display styles, and KPI numbers; body/forms/grids stay
   Roboto Flex via the base's --rz-text-font-family. ONE family name with explicit weights
   so the bundled woff2s win consistently over any locally-installed desktop cuts (whose
   Medium registers as a separate family). Falls back to Roboto gracefully if the files
   are absent. Keep in sync: font files ship in ../fonts/ in the same package. */
@font-face {
    font-family: "Avenir Next";
    src: url("../fonts/AvenirNext-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Avenir Next";
    src: url("../fonts/AvenirNext-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Avenir Next";
    src: url("../fonts/AvenirNext-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
h1, h2, h3, h4, h5, h6,
.rz-text-h1, .rz-text-h2, .rz-text-h3, .rz-text-h4, .rz-text-h5, .rz-text-h6,
.rz-text-display-h1, .rz-text-display-h2, .rz-text-display-h3,
.rz-text-display-h4, .rz-text-display-h5, .rz-text-display-h6,
.ew-kpi-value, .ew-kpi-stat-value {
    font-family: var(--ew-heading-font-family, 'Avenir Next', Roboto, sans-serif);
}

/* --- Dialog surfaces ----------------------------------------------------- */
/* Pure white to match the dialog body (no titlebar/body seam). --rz-white is
   literally #ffffff in every palette; the fallback covers a missing token. */
.rz-dialog-titlebar,
.rz-dialog-side-titlebar {
    background-color: var(--rz-white, #ffffff);
}
.rz-dialog-side {
    background-color: var(--rz-white, #ffffff);
}

/* --- Icon buttons (dialog close-X, dropdown clear-X) ---------------------
   The Material base leaves these with browser-default <button> chrome (gray
   box + outset border). Reset to clean, borderless icon buttons. */
.rz-dialog-titlebar-close,
.rz-dropdown-clear-icon {
    -webkit-appearance: none;
    appearance: none;
    border: none;
    background: transparent;
    box-shadow: none;
    color: var(--rz-text-secondary-color, #454a4f);
    cursor: pointer;
}
.rz-dialog-titlebar-close {
    width: 2rem;
    height: 2rem;
    padding: 0;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s, color 0.15s;
}
.rz-dialog-titlebar-close:hover {
    background: var(--rz-base-200, #e3eaf2);
    color: var(--rz-base-900, #1b1d20);
}
.rz-dropdown-clear-icon:hover {
    color: var(--rz-base-900, #1b1d20);
    opacity: 1;
}

/* --- Notification toast close-X (RadzenNotification) ---------------------
   The Material base leaves this as a raw <button> (gray box + outset border).
   Reset to a clean borderless icon that inherits the toast's own (light) text
   color, with a subtle white hover on the colored success/error/etc. toasts. */
.rz-notification-close {
    -webkit-appearance: none;
    appearance: none;
    border: none;
    background: transparent;
    box-shadow: none;
    color: inherit;
    opacity: 0.8;
    cursor: pointer;
    padding: 0;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background-color 0.15s ease, opacity 0.15s ease;
}
.rz-notification-close:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.18);
}

/* --- Tabs (RadzenTabs) ---------------------------------------------------
   Each tab is a <button> the base never resets, so it falls back to default
   button chrome (gray box). Reset it; render a clean underlined Material tab.
   The nav carries an inset baseline and the active tab an inset bottom
   indicator on the SAME plane (the active line replaces the baseline -- no
   double underline). Radzen's animated li::after indicator is disabled (it
   stacked with ours + left paint trails when clicking between tabs). */
.rz-tabview-nav {
    background: var(--rz-base-50, #f8fafb);
    box-shadow: inset 0 -1px 0 0 var(--rz-base-300, #dfe5ec);
    padding: 0 0.75rem;
    gap: 0.25rem;
}
.rz-tabview-nav li { margin: 0; }
.rz-tabview-nav li::after { display: none !important; }
.rz-tabview-nav li button {
    -webkit-appearance: none;
    appearance: none;
    padding: 0.875rem 1rem;
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--rz-text-secondary-color, #454a4f);
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: inset 0 -2px 0 0 transparent;
    cursor: pointer;
    transition: color 0.15s ease;
}
.rz-tabview-nav li button:hover { color: var(--rz-text-color, #1b1d20); }
.rz-tabview-nav li.rz-tabview-selected button {
    color: var(--rz-primary, #004af2);
    box-shadow: inset 0 -2px 0 0 var(--rz-primary, #004af2);
}
.rz-tabview-nav li button .rz-tabview-title {
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: inherit;
}

/* --- Pager (RadzenDataGrid / RadzenPager) --------------------------------
   Radzen ships the pager controls at mismatched sizes: 28px page/arrow buttons
   (compact grids) or 48px (default density) next to a 40px page-size dropdown,
   with different corner radii -- so the bar reads as a jumble. Pull every
   control into ONE coherent family (32px tall, 8px radius) and reset the stray
   <ul>/<li> bullets the base leaves on .rz-pager-pages.
   (.rz-pager-element is on EVERY pager button -- first/prev/page/next/last;
   .rz-pager-page is the numbered one; .rz-paginator-page is an older alias.) */
.rz-pager {
    display: flex;
    align-items: center;
    border-top: 1px solid var(--rz-base-200, #e3eaf2);
    padding: 0.625rem 1rem;
    font-size: 0.8125rem;
    gap: 0.5rem;
}
.rz-pager-pages,
.rz-pager .rz-pager-item {
    list-style: none;
    margin: 0;
    display: inline-flex;
    align-items: center;
}
.rz-pager-pages { gap: 2px; }

/* every pager button -- one size + shape. Radzen sizes these via
   min-height/line-height/padding (NOT an explicit height), and its compact
   selector (.rz-pager.rz-density-compact .rz-pager-element) out-specifies a
   plain .rz-pager rule -- so match BOTH densities and override min-height, or
   the buttons stay 48px / 28px and clash with the 32px dropdown. */
.rz-pager .rz-pager-element,
.rz-pager.rz-density-compact .rz-pager-element,
.rz-pager .rz-paginator-page {
    min-width: 32px;
    min-height: 32px;
    height: 32px;
    padding: 0 6px;
    line-height: 1;
    border-radius: 50%;   /* circular page/arrow buttons (matches the original Radzen pager) -- 32x32 = circle */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--rz-text-color, #1b1d20);
    transition: background-color 0.15s ease, color 0.15s ease;
}
.rz-pager .rz-pager-element:not(.rz-state-active):not(.rz-state-disabled):hover,
.rz-pager .rz-paginator-page:not(.rz-state-active):not(.rz-state-disabled):hover {
    background-color: var(--rz-base-200, #e3eaf2);
}
.rz-pager .rz-pager-element.rz-state-disabled {
    opacity: 0.38;
    cursor: default;
}
.rz-pager .rz-pager-page.rz-state-active,
.rz-pager .rz-paginator-page.rz-state-active {
    background-color: var(--rz-primary-lighter, rgba(0, 74, 242, 0.12));
    font-weight: 600;
}

/* page-size dropdown -- shrink from Radzen's 40px input height to the buttons'
   32px + match the radius. */
.rz-pager .rz-dropdown {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 32px;
    min-height: 32px;
    min-width: 70px;
    border-radius: 8px;
    /* Radzen ships 7px vertical padding here, which shrinks the content box below the 24px label height
       -- so align-items can't vertically center the value (it sits off-center). Kill the vertical
       padding (keep horizontal). */
    padding: 0 0.5rem;
}
.rz-pager .rz-dropdown .rz-dropdown-trigger { height: 32px; display: flex; align-items: center; }
/* The value label is a DIRECT child of .rz-dropdown (the trigger only holds the caret). Make it fill the
   full height + tightly center its own text, with no vertical padding/line-height nudging the number. */
.rz-pager .rz-dropdown-label {
    display: flex;
    align-items: center;
    height: 32px;
    line-height: 1;
    padding-top: 0;
    padding-bottom: 0;
    margin: 0;
    text-overflow: clip;
    overflow: visible;
}

/* summary + "items per page" -- muted, same compact size as the controls */
.rz-pager .rz-pager-summary,
.rz-pager .rz-pagesize-text {
    color: var(--rz-text-secondary-color, #454a4f);
}

/* EwPageHeader: the title <h1> is a PROGRAMMATIC focus target (Blazor <FocusOnNavigate Selector="h1"/>
   for screen-reader heading focus) -- not keyboard-tabbable, so its focus ring is just an ugly box on
   every navigation. Suppress it. No-op for apps that don't use FocusOnNavigate. */
.ew-page-header h1:focus,
.ew-page-header h1:focus-visible {
    outline: none;
}

/* --- Buttons: the M3 emphasis ladder (EdWise theme, 2026-06-09 spec section 5) ---------
   The licensed base styles Variant.Flat as just "Filled minus shadow" -- the SDK had no real
   medium emphasis. Restyle Flat as M3 filled-tonal: container fill + on-container label, no
   elevation. Primary/Secondary tonal-ize on SECONDARY-container (not primary-container: on
   dark, a T30 primary container out-shouts the pale T80 filled primary and inverts the
   hierarchy); severity buttons tonal-ize with their own family container. Hover/press/focus
   ride the ink/white scrim tokens declared in material3-base-overrides / dark-overrides. */
.rz-button.rz-primary.rz-variant-flat,
.rz-button.rz-secondary.rz-variant-flat {
    background-color: var(--rz-secondary-light, #dfe1f9);
    color: var(--rz-on-secondary-light, #171b2c);
}
.rz-button.rz-success.rz-variant-flat {
    background-color: var(--rz-success-light, #a0f6ae);
    color: var(--rz-on-success-light, #00210a);
}
.rz-button.rz-warning.rz-variant-flat {
    background-color: var(--rz-warning-light, #ffdeae);
    color: var(--rz-on-warning-light, #281900);
}
.rz-button.rz-danger.rz-variant-flat {
    background-color: var(--rz-danger-light, #ffdad6);
    color: var(--rz-on-danger-light, #410002);
}
.rz-button.rz-info.rz-variant-flat {
    background-color: var(--rz-info-light, #b9eaff);
    color: var(--rz-on-info-light, #001f29);
}
.rz-button.rz-light.rz-variant-flat {
    background-color: var(--rz-base-200, #e3eaf2);
    color: var(--rz-base-900, #1b1d20);
}

/* Neutral (Light) FILLED buttons: M3 has no "gray filled" role -- the washed gray pill reads
   cheap next to a filled primary (user call, 2026-06-10). Neutral high-emphasis renders as the
   M3 outlined quiet button instead: transparent fill, outline-role border, body label. The
   gray tonal remains available as Neutral + Variant.Flat. */
.rz-button.rz-light.rz-variant-filled {
    background-color: transparent;
    border: 1px solid var(--ew-button-outline, #74797e);
    color: var(--rz-base-900, #1b1d20);
}

/* Outlined buttons: border upgrades from the faint input gray (base-600, ~1.5:1 on white) to
   the M3 OUTLINE role via --ew-button-outline (base-700 light; dark-overrides points it at the
   dark outline equivalent) -- a control boundary should clear ~3:1. Labels keep their family
   color from the base theme. */
.rz-button.rz-variant-outlined.rz-primary,
.rz-button.rz-variant-outlined.rz-secondary,
.rz-button.rz-variant-outlined.rz-success,
.rz-button.rz-variant-outlined.rz-warning,
.rz-button.rz-variant-outlined.rz-danger,
.rz-button.rz-variant-outlined.rz-info,
.rz-button.rz-variant-outlined.rz-light {
    border-color: var(--ew-button-outline, #74797e);
}