/* Cascade layer `core` (UX-361) — fonts, base and the MudBlazor input normalisation; core.css builds on it. Layer order: App.razor <head>.
   Everything in this file sits inside this block; see the end of the file. */
@layer core {

/* Vazir — self-hosted Persian font (no CDN). One family, real weights 100-700. */
@font-face {
    font-family: 'Vazir';
    font-style: normal;
    font-weight: 100;
    font-display: swap;
    src: url('fonts/Vazir/woff2/Vazir-Thin.woff2') format('woff2'),
         url('fonts/Vazir/woff/Vazir-Thin.woff') format('woff'),
         url('fonts/Vazir/ttf/Vazir-Thin.ttf') format('truetype');
}
@font-face {
    font-family: 'Vazir';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('fonts/Vazir/woff2/Vazir-Light.woff2') format('woff2'),
         url('fonts/Vazir/woff/Vazir-Light.woff') format('woff'),
         url('fonts/Vazir/ttf/Vazir-Light.ttf') format('truetype');
}
@font-face {
    font-family: 'Vazir';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/Vazir/woff2/Vazir.woff2') format('woff2'),
         url('fonts/Vazir/woff/Vazir.woff') format('woff'),
         url('fonts/Vazir/ttf/Vazir.ttf') format('truetype');
}
@font-face {
    font-family: 'Vazir';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/Vazir/woff2/Vazir-Medium.woff2') format('woff2'),
         url('fonts/Vazir/woff/Vazir-Medium.woff') format('woff'),
         url('fonts/Vazir/ttf/Vazir-Medium.ttf') format('truetype');
}
@font-face {
    font-family: 'Vazir';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/Vazir/woff2/Vazir-Bold.woff2') format('woff2'),
         url('fonts/Vazir/woff/Vazir-Bold.woff') format('woff'),
         url('fonts/Vazir/ttf/Vazir-Bold.ttf') format('truetype');
}

/* Heebo — self-hosted English font with variable weight. woff2 first (UX-365): App.razor preloads exactly
   this URL for en-US, so it must stay a plain, unfingerprinted path; the ttf is the fallback. */
@font-face {
    font-family: 'Heebo';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('fonts/Heebo/Heebo-VariableFont_wght.woff2') format('woff2'),
         url('fonts/Heebo/Heebo-VariableFont_wght.ttf') format('truetype');
}

/* UX-371: the old shell's --uni-* aliases (a 76px top bar, a 300px sidebar, colour copies of --ds-*) were
   removed with the shell itself; nothing read them. The shell's one geometry variable,
   --uni-appbar-height, lives on :root in app-ui.css. */

html,
body {
    margin: 0;
    min-height: 100%;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: var(--ds-bg);
    color: var(--ds-text);
}

html[dir="rtl"] body {
    font-family: "Vazir", Tahoma, Arial, sans-serif;
}

html[lang^="en"] body {
    font-family: "Heebo", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
    box-sizing: border-box;
}

/* Routes.razor's <FocusOnNavigate Selector="h1"> moves focus to the page heading
   after every navigation so screen readers land in the new content, which otherwise
   paints a focus ring around the heading on every page load. tabindex="-1" keeps the
   heading out of the tab order, so this focus is only ever programmatic and there is
   no keyboard-focus ring worth preserving. (A :focus-visible guard does not help —
   Chrome still matches it for this programmatic focus.) */
h1[tabindex="-1"]:focus,
.core-page-title[tabindex="-1"]:focus {
    outline: none;
}

/* UX-371: the old shell (.uni-shell, .uni-topbar, .uni-sidebar, .uni-main, .uni-brand-*, .uni-profile-*,
   .uni-header-*, .uni-action-area/-badge, .uni-date-card, .uni-company-card, .uni-context-meta, ~220 lines)
   stood here. No component, page or script rendered any of it - MainLayout is MudLayout + .uni-appbar /
   .uni-drawer, styled in app-ui.css and MainLayout.razor.css. The two live pieces moved: the base of
   .uni-context-card (flex row, gap, ink) to app-ui.css, and .uni-context-arrow was already in
   MainLayout.razor.css.

   Mud RTL (UX-375): the `[dir="rtl"] .mud-* { direction: rtl }` list that stood here repeated what the
   dir attribute on <html> already gives by inheritance, and - because `[dir="rtl"]` matches the <html>
   ancestor - it overrode an inner dir="ltr" (a code or phone field inside a Persian page) back to RTL.
   The direction now comes from the dir attribute alone. */

[dir="rtl"] .mud-typography,
[dir="rtl"] .mud-button,
[dir="rtl"] .mud-input,
[dir="rtl"] .mud-input-control,
[dir="rtl"] .mud-input-slot,
[dir="rtl"] .mud-input-root,
[dir="rtl"] .mud-select,
[dir="rtl"] .mud-select-input,
[dir="rtl"] .mud-table,
[dir="rtl"] .mud-dialog {
    font-family: "Vazir", "Segoe UI", Tahoma, Arial, sans-serif;
}

/* Input text starts where the input's own direction starts (UX-375): right in a Persian field, left in a
   dir="ltr" one. Was `direction: rtl; text-align: right`, which pinned every input under an RTL page. */
[dir="rtl"] .mud-input-slot,
[dir="rtl"] .mud-input-root,
[dir="rtl"] .mud-select-input,
[dir="rtl"] .mud-input-control input,
[dir="rtl"] .mud-input-control textarea {
    text-align: start;
}

/* Responsive - UX-357: the 1450/1280/980/768px blocks that stood here only styled the legacy shell
   removed above. Breakpoints: see the top of core.css. */

/* Drawer / content motion (UX-364): the spring curve (.36s cubic-bezier(.34, 1.56, .64, 1)) and
   `will-change: width` that stood here made the rail overshoot and arrive after the content and the
   flyout. One duration and easing for all three now lives in app-ui.css (.uni-drawer, .uni-main-content)
   and NavFlyout.razor.css. */

/* Below MudBlazor's Md breakpoint the MudDrawer becomes a temporary overlay
   (with scrim). Match the design's ~82% width sheet instead of the desktop width. */
@media screen and (max-width: 959.95px) {
    .mud-drawer.uni-drawer {
        --mud-drawer-width: 82vw !important;
        width: 82vw !important;
        max-width: 340px !important;
    }
}

/* =========================================================
   UNIGATE - MudBlazor Input Vertical Alignment Fix
   Fixes TextField / Select text sticking to top in RTL forms
   UX-363: one control height. Every literal 46px here is var(--ds-control-h) (40px, theme-tokens.css);
   compact containers (grid filter row, pager, calendar month/year - core.css) re-point the token to
   --ds-control-h-sm (32px). The Dense-only 46px rule is gone: Dense fields take the token like the rest.
   ========================================================= */

.mud-input-control {
    margin-top: 0;
}

    /* The input container is a FLEX COLUMN: its cross axis is horizontal, so `align-items:center`
       stops the input from stretching and collapses every field to its content width
       (~117px regardless of the grid cell). `stretch` restores full-width inputs app-wide.
       Vertical centering of the text is handled by the input's own height/line-height below. */
    .mud-input-control .mud-input-control-input-container {
        align-items: stretch;
    }

/* `display:flex` here would put the input and its sibling slot in one flex row and split the
   width 50/50. Keep the block layout; the fixed height + line-height already centre the text. */
.mud-input.mud-input-outlined {
    min-height: var(--ds-control-h);
    border-radius: 11px; /* UX-363: same as .core-input (core.css) */
}

    /* content-box + 14px side padding would overflow the container at width:100%. */
    .mud-input.mud-input-outlined > input.mud-input-root,
    .mud-input.mud-input-outlined > div.mud-input-slot {
        box-sizing: border-box;
    }

    .mud-input.mud-input-outlined .mud-input-root {
        min-height: var(--ds-control-h);
        height: var(--ds-control-h);
        line-height: var(--ds-control-h);
        padding-top: 0;
        padding-bottom: 0;
        display: flex;
        align-items: center;
    }

    .mud-input.mud-input-outlined input.mud-input-root {
        display: block;
        line-height: var(--ds-control-h);
    }

    /* چیزی که MudBlazor پنهان کرده باید پنهان بماند.

       قاعدهٔ بالا با `.mud-input-root` هم روی خودِ input می‌نشیند و هم روی یک <div> کمکی که
       MudBlazor با style="display:none" می‌سازد؛ و چون display را !important می‌دهد، همان
       پنهانِ درون‌خطی را باطل می‌کرد. نتیجه: آن div به یک آیتمِ flex تبدیل می‌شد و نصفِ عرضِ
       کادر را می‌گرفت، پس نیمی از هر فیلد فقط ظاهرِ فیلد بود و کلیک روی آن کاری نمی‌کرد.

       شرط روی style درون‌خطی عمدی است: اسلات‌هایی که واقعاً دیده می‌شوند (نمایشِ MudSelect و
       مانندش) نباید پنهان شوند — فقط آنچه خودِ کتابخانه پنهان کرده.

       UX-361: قاعدهٔ بالا دیگر !important ندارد و style درون‌خطی خودش برنده است؛ این قاعده فقط احتیاط است. */
    .mud-input.mud-input-outlined .mud-input-root[style*="display:none"],
    .mud-input.mud-input-outlined .mud-input-root[style*="display: none"] {
        display: none;
    }

/* Select value alignment */
.mud-select .mud-input-root,
.mud-select .mud-select-input,
.mud-select .mud-input-slot {
    min-height: var(--ds-control-h);
    height: var(--ds-control-h);
    line-height: var(--ds-control-h);
    display: flex;
    align-items: center;
}

/* Placeholder and selected text */
.mud-select .mud-select-input,
.mud-input input,
.mud-input textarea {
    color: var(--ds-text);
    font-weight: var(--ds-fw-regular);
}

.mud-select .mud-select-input {
    padding-top: 0;
    padding-bottom: 0;
}

/* Icons inside inputs */
.mud-input-adornment {
    height: var(--ds-control-h);
    display: flex;
    align-items: center;
    justify-content: center;
}

    .mud-input-adornment .mud-icon-root {
        margin-top: 0;
    }

/* RTL input text (UX-375): start, not right, and no `direction: rtl` - see the Mud RTL note above. */
[dir="rtl"] .mud-input input,
[dir="rtl"] .mud-input textarea,
[dir="rtl"] .mud-select .mud-select-input {
    text-align: start;
}

/* Outlined border consistency */
.mud-input-outlined-border {
    border-color: var(--ds-border-strong);
    border-radius: 11px; /* UX-363: same as .core-input (core.css) */
}

/* Do not force multiline textareas to single-line height */
.mud-input textarea.mud-input-root {
    height: auto;
    min-height: 92px;
    line-height: 1.8;
    padding-top: 12px;
    padding-bottom: 12px;
    align-items: flex-start;
}

} /* end @layer core */