/*
 * Application-wide styling: the Persian face and the per-language font selection. Every area now has a
 * design of its own — the storefront in wwwroot/css/store.css, the administration in wwwroot/css/admin.css,
 * and the supplier portal in the licensed dashboard build it shares with the administration — so what is
 * left here is what belongs to no single area: the faces, the page reset, the culture switcher, and the
 * error banner.
 * Logical properties (inline-start/inline-end) are used throughout so the layout works in both LTR and RTL.
 */

/*
 * Persian typography for the areas that have no design stylesheet of their own: the customer account and
 * the identity pages. The declaration is application-wide rather than per area, which
 * is why the administration stylesheet does not repeat it. The faces are the same two files the storefront
 * already ships under wwwroot/fonts/iranyekanx; nothing is copied, and a browser fetches each file once
 * however many stylesheets declare it.
 */
@font-face {
    font-family: "IRANYekanX";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/iranyekanx/IRANYekanX-Regular.woff2") format("woff2");
}

@font-face {
    font-family: "IRANYekanX";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("fonts/iranyekanx/IRANYekanX-Bold.woff2") format("woff2");
}

:root {
    --surface: #ffffff;
    --text: #1a1a1a;
    --muted-text: #5a5a5a;
    --app-font-latin: "Segoe UI", Tahoma, sans-serif;
    --app-font-persian: "IRANYekanX", "Segoe UI", Tahoma, Arial, sans-serif;
    --app-font-ui: var(--app-font-latin);
}

/* The reading direction chooses the face, exactly as it does on the storefront. */
html[dir="rtl"] {
    --app-font-ui: var(--app-font-persian);
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    font-family: var(--app-font-ui);
    color: var(--text);
    background-color: var(--surface);
}

/*
 * The page direction cannot decide the face for text that is not in the page's language. The
 * administration screens show every supported language side by side, so each cell declares its own
 * language and the declared language selects the face.
 */
[lang|="fa"] {
    font-family: var(--app-font-persian);
}

[lang|="en"] {
    font-family: var(--app-font-latin);
}

.page-section h1 {
    margin-block-start: 0;
}

.culture-switcher {
    display: flex;
    gap: 0.75rem;
}

.culture-link {
    text-decoration: none;
    color: var(--muted-text);
}

.culture-link-active {
    font-weight: 700;
    color: var(--text);
}

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    inset-inline-start: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    inset-inline-end: 0.75rem;
    top: 0.5rem;
}