/* IBM Plex Sans Arabic — self-hosted from /wwwroot/fonts/ibm-plex-sans-arabic.
   Designed Arabic-first (also covers Latin) so the same family can serve LTR
   and RTL UI without swapping stacks. */
@font-face {
    font-family: 'IBM Plex Sans Arabic';
    font-style: normal;
    font-weight: 100;
    font-display: swap;
    src: url('/fonts/ibm-plex-sans-arabic/IBMPlexSansArabic-Thin.ttf') format('truetype');
}
@font-face {
    font-family: 'IBM Plex Sans Arabic';
    font-style: normal;
    font-weight: 200;
    font-display: swap;
    src: url('/fonts/ibm-plex-sans-arabic/IBMPlexSansArabic-ExtraLight.ttf') format('truetype');
}
@font-face {
    font-family: 'IBM Plex Sans Arabic';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('/fonts/ibm-plex-sans-arabic/IBMPlexSansArabic-Light.ttf') format('truetype');
}
@font-face {
    font-family: 'IBM Plex Sans Arabic';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/ibm-plex-sans-arabic/IBMPlexSansArabic-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'IBM Plex Sans Arabic';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/fonts/ibm-plex-sans-arabic/IBMPlexSansArabic-Medium.ttf') format('truetype');
}
@font-face {
    font-family: 'IBM Plex Sans Arabic';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/fonts/ibm-plex-sans-arabic/IBMPlexSansArabic-SemiBold.ttf') format('truetype');
}
@font-face {
    font-family: 'IBM Plex Sans Arabic';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/fonts/ibm-plex-sans-arabic/IBMPlexSansArabic-Bold.ttf') format('truetype');
}

html, body {
    font-family: 'IBM Plex Sans Arabic', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* Legacy Bootstrap-era styles for non-MudBlazor pages (Identity / Account scaffolding).
   Colors track the active MudTheme palette so org-branding overrides flow through. */
a, .btn-link {
    color: var(--mud-palette-primary);
}

.btn-primary {
    color: var(--mud-palette-primary-text);
    background-color: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary-darken);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem var(--mud-palette-surface),
                0 0 0 0.25rem var(--mud-palette-primary);
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--mud-palette-success);
}

.invalid {
    outline: 1px solid var(--mud-palette-error);
}

.validation-message {
    color: var(--mud-palette-error);
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: var(--mud-palette-lines-default, #929292);
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}
/* TOTP QR card — black-on-white QR sits on a white card with quiet-zone padding so
   it stays scannable (and looks intentional) on both light and dark themes. */
.totp-qr-card {
    display: inline-block;
    background: #ffffff;
    padding: 16px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    line-height: 0;
}

.totp-qr-card img,
.totp-qr-card canvas {
    display: block;
}


/* ── Account/Identity SSR forms — native <InputText> styled to match MudBlazor outlined inputs ── */
.account-field { margin-bottom: 16px; }
.account-field > label {
    display: block; margin-bottom: 4px;
    font-size: 0.75rem; color: var(--mud-palette-text-secondary, rgba(0,0,0,0.6));
    font-weight: 500;
}
.account-field > input,
.account-field > select,
.account-field > textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--mud-palette-lines-default, rgba(0,0,0,0.23));
    border-radius: 4px;
    font-size: 1rem;
    font-family: inherit;
    background: var(--mud-palette-surface, #fff);
    color: var(--mud-palette-text-primary, rgba(0,0,0,0.87));
    box-sizing: border-box;
    transition: border-color 0.2s;
}
.account-field > input:focus,
.account-field > select:focus,
.account-field > textarea:focus {
    outline: none;
    border-color: var(--mud-palette-primary, #1976d2);
    border-width: 2px;
    padding: 11px 13px;
}
.account-field > input.invalid { border-color: var(--mud-palette-error, #f44336); }
.account-field > .field-error {
    display: block; margin-top: 4px;
    font-size: 0.75rem; color: var(--mud-palette-error, #f44336);
}
.account-checkbox { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.account-checkbox input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--mud-palette-primary, #1976d2); }


/* ══════════════════════════════════════════════════════════════════════════════
   Theme-aware accent chips, tints and table headers
   ──────────────────────────────────────────────────────────────────────────────
   These replace the hand-written pastel/dark hex pairs (#e3f2fd + #1565c0, …)
   that used to be inlined on IO badges, group banners and report tables. Those
   pairs only worked on a light surface: in dark mode the fill stayed bright and
   the near-black text disappeared.

   Every class here derives BOTH fill and text from one accent, mixed against the
   live MudBlazor palette. That is what makes a single declaration correct in both
   themes — in light mode the mix lands within a few percent of the old pastel, in
   dark mode it resolves against the dark surface instead.

   Two ways to set the accent:
     static markup  → add a modifier class:  class="lcs-chip lcs--di"
     computed value → set the var inline:    class="lcs-chip" style="--lcs-accent:@c"
   ══════════════════════════════════════════════════════════════════════════════ */

.lcs-chip {
    display: inline-block;
    border-radius: 12px;
    padding: 2px 9px;
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
    background: color-mix(in srgb, var(--lcs-accent) 18%, var(--mud-palette-surface));
    color: color-mix(in srgb, var(--lcs-accent) 55%, var(--mud-palette-text-primary));
}

/* Accent modifiers. These set ONLY --lcs-accent, so they compose with any base
   class above: "lcs-chip lcs--di" for a badge, "lcs-hdr lcs--di" for the matching
   table header, "lcs-tint lcs--di" for a tinted row. */

/* IO-type accents — the palette that was copy-pasted across the report pages. */
.lcs--di { --lcs-accent: #1565c0 }
.lcs--do { --lcs-accent: #6a1b9a }
.lcs--ai { --lcs-accent: #e65100 }
.lcs--ao { --lcs-accent: #b71c1c }
.lcs--ui { --lcs-accent: #00838f }
.lcs--sp { --lcs-accent: #1b5e20 }
.lcs--sw { --lcs-accent: #283593 }

/* Semantic accents for note / status pills. */
.lcs--info    { --lcs-accent: #1565c0 }
.lcs--warn    { --lcs-accent: #e65100 }
.lcs--success { --lcs-accent: #2e7d32 }
.lcs--error   { --lcs-accent: #c62828 }

/* Tinted surfaces: group banners, suggestion cards, validation cards.
   Composable — a card typically takes .lcs-tint + .lcs-tint-border. */
.lcs-tint        { background: color-mix(in srgb, var(--lcs-accent) 8%, var(--mud-palette-surface)) }
.lcs-tint-strong { background: color-mix(in srgb, var(--lcs-accent) 18%, var(--mud-palette-surface)) }
.lcs-tint-text   { color: color-mix(in srgb, var(--lcs-accent) 55%, var(--mud-palette-text-primary)) }
.lcs-tint-border { border-color: color-mix(in srgb, var(--lcs-accent) 40%, var(--mud-palette-lines-default)) }

.lcs--group { --lcs-accent: #3d5afe }   /* equipment-group indigo */

/* Report table header cells. Two tint levels because the DDC summary uses the
   lighter fill for "Used IO" and the heavier one for "Provided IO" (▲) columns —
   same accent, different weight, so the two column groups stay distinguishable. */
.lcs-hdr {
    background: color-mix(in srgb, var(--lcs-accent) 16%, var(--mud-palette-surface));
    color: color-mix(in srgb, var(--lcs-accent) 55%, var(--mud-palette-text-primary));
    font-weight: 700;
}
.lcs-hdr--strong { background: color-mix(in srgb, var(--lcs-accent) 34%, var(--mud-palette-surface)) }


/* Catalog edit dialogs use vertical MudTabs (Position.Left). By default MudBlazor
   centers the tab label inside each row, which looks ragged when tab labels vary
   in length. Force left alignment so icon+text start at the same x-coordinate. */
.catalog-vtabs .mud-tab {
    justify-content: flex-start !important;
    text-align: left;
    padding-left: 16px;
    padding-right: 16px;
}