:root {
    --oa-bg: oklch(1 0 0);
    --oa-surface: oklch(0.968 0.004 18);
    --oa-surface-strong: oklch(0.935 0.008 18);
    --oa-ink: oklch(0.22 0.018 18);
    --oa-muted: oklch(0.47 0.02 18);
    --oa-primary: oklch(0.56 0.205 18);
    --oa-primary-dark: oklch(0.43 0.16 18);
    --oa-primary-soft: oklch(0.95 0.025 18);
    --oa-accent: oklch(0.43 0.105 174);
    --oa-success: oklch(0.47 0.12 150);
    --oa-success-soft: oklch(0.95 0.035 150);
    --oa-warning: oklch(0.68 0.15 72);
    --oa-warning-soft: oklch(0.96 0.04 72);
    --oa-danger: oklch(0.52 0.19 25);
    --oa-danger-soft: oklch(0.95 0.035 25);
    --oa-border: oklch(0.88 0.009 18);
    --oa-focus: oklch(0.62 0.18 18 / 0.28);
    --oa-radius-sm: 6px;
    --oa-radius: 10px;
    --oa-z-dropdown: 400;
    --oa-z-sticky: 500;
    --oa-z-modal: 700;
    --mud-palette-primary: oklch(0.56 0.205 18);
    --mud-palette-primary-darken: oklch(0.43 0.16 18);
    --mud-palette-primary-text: oklch(0.56 0.205 18);
    --mud-palette-action-default: oklch(0.36 0.024 18);
    --mud-default-borderradius: 8px;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; background: var(--oa-surface); color: var(--oa-ink); }
body, .mud-typography, .mud-button-root, input, button, textarea, select { font-family: Vazirmatn, "Segoe UI", Tahoma, Arial, sans-serif; }
body { font-size: 14px; line-height: 1.6; }
a { color: var(--oa-primary-dark); }
h1, h2, h3 { margin: 0; color: var(--oa-ink); font-weight: 650; text-wrap: balance; }
h1 { font-size: 1.75rem; line-height: 1.3; letter-spacing: -0.02em; }
h2 { font-size: 1.1rem; }
p { text-wrap: pretty; }
button, a, input { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--oa-focus); outline-offset: 2px; }
h1[tabindex="-1"]:focus { outline: none; }
.numeric { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }

.oa-appbar { background: var(--oa-bg) !important; color: var(--oa-ink) !important; border-block-end: 1px solid var(--oa-border); height: 64px; padding-inline: 12px; z-index: var(--oa-z-sticky); }
.brand-lockup { display: flex; align-items: center; gap: 10px; color: var(--oa-ink); text-decoration: none; min-width: 208px; }
.brand-lockup > span:last-child { display: flex; flex-direction: column; line-height: 1.25; }
.brand-lockup strong { font-size: 14px; }
.brand-lockup small { color: var(--oa-muted); font-size: 11px; }
.brand-mark { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--oa-primary); color: var(--oa-bg); font: 700 18px/1 Georgia, serif; }
.brand-mark-large { width: 48px; height: 48px; font-size: 26px; border-radius: 12px; }
.language-switch { padding: 6px 10px; margin-inline: 8px; color: var(--oa-primary-dark); font-weight: 650; text-decoration: none; border-radius: var(--oa-radius-sm); }
.language-switch:hover { background: var(--oa-primary-soft); }
.account-trigger { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 8px; border: 0; border-radius: 8px; background: transparent; color: var(--oa-ink); cursor: pointer; }
.account-trigger:hover { background: var(--oa-surface); }
.account-avatar, .table-avatar { display: inline-grid; place-items: center; border-radius: 50%; background: var(--oa-surface-strong); color: var(--oa-primary-dark); font-weight: 700; }
.account-avatar { width: 30px; height: 30px; }
.account-menu-content { min-width: 220px; padding: 8px; }
.account-menu-label { padding: 8px 10px; color: var(--oa-muted); border-block-end: 1px solid var(--oa-border); }
.menu-action { display: flex; width: 100%; align-items: center; gap: 8px; border: 0; background: transparent; color: var(--oa-ink); padding: 10px; margin-block-start: 4px; border-radius: 6px; cursor: pointer; }
.menu-action:hover { background: var(--oa-surface); }

.oa-drawer { background: var(--oa-surface) !important; border-inline-end: 1px solid var(--oa-border) !important; padding-block-start: 16px; }
.side-nav { padding: 8px 12px; }
.nav-section-label { padding: 4px 12px 8px; font-size: 12px; color: var(--oa-muted); font-weight: 600; }
.nav-section-spaced { margin-block-start: 22px; }
.side-nav-link { display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 8px 12px; margin-block: 2px; border-radius: 8px; color: oklch(0.34 0.02 18); text-decoration: none; font-weight: 550; }
.side-nav-link .mud-icon-root { color: var(--oa-muted); font-size: 21px; }
.side-nav-link:hover { background: var(--oa-surface-strong); }
.side-nav-link.active { background: var(--oa-primary-soft); color: var(--oa-primary-dark); }
.side-nav-link.active .mud-icon-root { color: var(--oa-primary); }
.oa-main { background: var(--oa-bg); min-height: calc(100vh - 64px); }
.oa-content { max-width: 1480px; margin-inline: auto; padding: 30px clamp(18px, 3vw, 44px) 64px; }

.page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; min-height: 66px; margin-block-end: 28px; }
.page-header p { margin: 5px 0 0; color: var(--oa-muted); max-width: 70ch; }
.back-link { display: inline-flex; margin-block-end: 6px; color: var(--oa-muted); text-decoration: none; font-size: 13px; }
.back-link:hover { color: var(--oa-primary-dark); text-decoration: underline; }
.summary-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: 1px solid var(--oa-border); margin-block-end: 30px; }
.summary-strip > div { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; border-inline-end: 1px solid var(--oa-border); }
.summary-strip > div:last-child { border-inline-end: 0; }
.summary-strip span { color: var(--oa-muted); }
.summary-strip strong { font-size: 1.6rem; font-variant-numeric: tabular-nums; }
.work-queue { max-width: 850px; padding-block: 8px; }
.work-queue p, .section-heading p { color: var(--oa-muted); margin: 5px 0; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-block-end: 16px; }
.skeleton-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--oa-border); margin-block-end: 30px; }
.skeleton-grid span { height: 76px; background: linear-gradient(90deg, var(--oa-surface) 25%, var(--oa-bg) 50%, var(--oa-surface) 75%); background-size: 200% 100%; animation: skeleton 1.5s infinite; }
@keyframes skeleton { to { background-position: -200% 0; } }

.status-badge { display: inline-flex; align-items: center; gap: 5px; width: fit-content; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 650; white-space: nowrap; }
.status-badge .mud-icon-root { font-size: 15px; }
.status-ready { color: oklch(0.35 0.11 150); background: var(--oa-success-soft); }
.status-disabled { color: oklch(0.41 0.05 18); background: var(--oa-surface-strong); }
.status-restricted { color: oklch(0.42 0.12 72); background: var(--oa-warning-soft); }

.table-toolbar { display: flex; align-items: center; gap: 10px; margin-block-end: 14px; }
.table-toolbar .mud-input-control { max-width: 420px; }
.data-surface { border-block: 1px solid var(--oa-border); overflow-x: auto; }
.data-surface .mud-table { box-shadow: none; border-radius: 0; }
.data-surface .mud-table-head .mud-table-cell { background: var(--oa-surface); color: var(--oa-muted); font-size: 12px; font-weight: 650; }
.data-surface .mud-table-cell { border-color: var(--oa-border); padding: 10px 14px; }
.identity-cell { display: flex; align-items: center; gap: 10px; min-width: 210px; }
.identity-cell > span:last-child { display: flex; flex-direction: column; }
.identity-cell small { color: var(--oa-muted); direction: ltr; text-align: start; }
.table-avatar { width: 32px; height: 32px; flex: 0 0 32px; }
.tag-list { display: flex; flex-wrap: wrap; gap: 5px; }
.role-tag, .permission-tag { padding: 2px 7px; border-radius: 5px; font-size: 12px; background: var(--oa-surface); color: oklch(0.35 0.025 18); border: 1px solid var(--oa-border); }
.permission-tag { direction: ltr; unicode-bidi: isolate; }
.table-actions { white-space: nowrap; text-align: end !important; }
.empty-row { padding: 38px; text-align: center; color: var(--oa-muted); }

.form-surface { max-width: 980px; border-block-start: 1px solid var(--oa-border); padding-block-start: 24px; }
.oa-form { display: flex; flex-direction: column; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field-wide { grid-column: 1 / -1; }
.field label, .oa-form > label:not(.check-row) { color: var(--oa-ink); font-weight: 600; }
.field input, .oa-form input:not([type=checkbox]), .permission-editor > .field input { width: 100%; min-height: 42px; border: 1px solid oklch(0.75 0.012 18); border-radius: 8px; padding: 8px 11px; background: var(--oa-bg); color: var(--oa-ink); }
.field input:hover, .oa-form input:not([type=checkbox]):hover { border-color: var(--oa-muted); }
.field input:focus, .oa-form input:not([type=checkbox]):focus { border-color: var(--oa-primary); outline: 3px solid var(--oa-focus); }
.field small { color: var(--oa-muted); }
.validation-message { color: var(--oa-danger); font-size: 12px; }
.choice-field { border: 0; padding: 0; margin: 28px 0 0; }
.choice-field legend { font-size: 1rem; font-weight: 650; }
.choice-field > p { margin: 2px 0 12px; color: var(--oa-muted); }
.choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 8px; }
.choice-row { display: flex; align-items: flex-start; gap: 10px; padding: 11px 12px; border: 1px solid var(--oa-border); border-radius: 8px; cursor: pointer; }
.choice-row:hover { background: var(--oa-surface); }
.choice-row input { margin-block-start: 4px; accent-color: var(--oa-primary); }
.choice-row span { display: flex; flex-direction: column; }
.choice-row small { color: var(--oa-muted); }
.form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-block-start: 28px; padding-block-start: 18px; border-block-start: 1px solid var(--oa-border); }
.form-alert, .form-success { display: flex; align-items: center; gap: 8px; padding: 10px 12px; margin-block-end: 18px; border-radius: 8px; }
.form-alert { color: oklch(0.4 0.16 25); background: var(--oa-danger-soft); }
.form-success { color: oklch(0.35 0.11 150); background: var(--oa-success-soft); }
.permission-inspector { margin-block-start: 28px; }
.permission-inspector h2 { margin-block-end: 10px; }

.split-workspace { display: grid; grid-template-columns: 280px minmax(0, 1fr); min-height: 580px; border-block: 1px solid var(--oa-border); }
.role-list { padding: 12px 0; border-inline-end: 1px solid var(--oa-border); }
.role-list-item { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 58px; padding: 9px 13px; border: 0; background: transparent; color: var(--oa-ink); text-align: start; cursor: pointer; }
.role-list-item > span:first-child { display: flex; flex-direction: column; }
.role-list-item small { color: var(--oa-muted); }
.role-list-item > span:last-child { color: var(--oa-muted); font-variant-numeric: tabular-nums; }
.role-list-item:hover { background: var(--oa-surface); }
.role-list-item.selected { background: var(--oa-primary-soft); color: var(--oa-primary-dark); }
.add-role-button { display: flex; align-items: center; gap: 8px; border: 0; background: transparent; color: var(--oa-primary-dark); padding: 10px 13px; cursor: pointer; font-weight: 650; }
.permission-editor { padding: 22px 28px; min-width: 0; }
.count-label { color: var(--oa-muted); }
.permission-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px 26px; }
.permission-groups fieldset { border: 0; padding: 0; margin: 0; }
.permission-groups legend { width: 100%; padding-block-end: 7px; border-block-end: 1px solid var(--oa-border); font-weight: 700; }
.permission-row { display: flex; align-items: flex-start; gap: 9px; padding: 9px 3px; cursor: pointer; }
.permission-row input { margin-block-start: 4px; accent-color: var(--oa-primary); }
.permission-row span { display: flex; flex-direction: column; min-width: 0; }
.permission-row strong { direction: ltr; text-align: start; font: 600 12px/1.5 ui-monospace, Consolas, monospace; }
.permission-row small { color: var(--oa-muted); }
.read-only-note, .safe-note { display: flex; align-items: flex-start; gap: 8px; color: var(--oa-muted); }

.admin-overview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-block: 1px solid var(--oa-border); margin-block-end: 30px; }
.admin-overview > a { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 20px; color: var(--oa-ink); text-decoration: none; border-block-end: 1px solid var(--oa-border); }
.admin-overview > a:nth-child(odd) { border-inline-end: 1px solid var(--oa-border); }
.admin-overview > a:hover { background: var(--oa-surface); }
.admin-overview > a > .mud-icon-root:first-child { color: var(--oa-primary); }
.admin-overview span { display: flex; flex-direction: column; }
.admin-overview small { color: var(--oa-muted); }
.info-panel { max-width: 920px; padding: 20px; background: var(--oa-surface); border-radius: var(--oa-radius); }
.detail-list { margin: 0; }
.detail-list > div { display: grid; grid-template-columns: minmax(150px, .5fr) 1fr; gap: 20px; padding: 10px 0; border-block-end: 1px solid var(--oa-border); }
.detail-list dt { color: var(--oa-muted); }
.detail-list dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.safe-note { margin: 16px 0 0; }
.health-banner { display: flex; align-items: center; gap: 13px; max-width: 920px; padding: 14px 16px; margin-block-end: 14px; border-radius: var(--oa-radius); }
.health-banner div { display: flex; flex-direction: column; }
.health-banner.healthy { background: var(--oa-success-soft); color: oklch(0.35 0.11 150); }
.health-banner.unhealthy { background: var(--oa-danger-soft); color: oklch(0.4 0.16 25); }
.migration-list { display: flex; flex-direction: column; gap: 5px; margin-block-start: 14px; direction: ltr; }

.login-layout { min-height: 100vh; background: var(--oa-bg); }
.login-page { display: grid; grid-template-columns: minmax(340px, .9fr) minmax(480px, 1.1fr); min-height: 100vh; }
.login-context { display: flex; flex-direction: column; justify-content: center; padding: clamp(42px, 7vw, 100px); color: var(--oa-bg); background: oklch(0.22 0.045 18); }
.login-context h1 { color: var(--oa-bg); margin-block: 22px 8px; font-size: 2rem; }
.login-context > p { max-width: 44ch; color: oklch(0.86 0.018 18); font-size: 16px; }
.login-principles { display: flex; flex-direction: column; gap: 9px; margin-block-start: 30px; }
.login-principles span { display: flex; align-items: center; gap: 9px; color: oklch(0.89 0.018 18); }
.login-principles .mud-icon-root { color: oklch(0.72 0.12 18); }
.login-panel { position: relative; display: grid; place-items: center; padding: 36px; }
.login-language { position: absolute; inset-block-start: 24px; inset-inline-end: 28px; text-decoration: none; font-weight: 650; }
.login-form-wrap { width: min(390px, 100%); }
.login-form-wrap h2 { font-size: 1.7rem; }
.login-form-wrap > p { color: var(--oa-muted); margin: 6px 0 24px; }
.oa-form > label:not(:first-of-type) { margin-block-start: 15px; }
.check-row { display: flex; align-items: center; gap: 8px; margin-block: 14px 20px; color: var(--oa-muted); cursor: pointer; }
.check-row input { accent-color: var(--oa-primary); }
.primary-button { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border: 0; border-radius: 8px; background: var(--oa-primary); color: var(--oa-bg); font-weight: 700; cursor: pointer; }
.primary-button:hover { background: var(--oa-primary-dark); }
.mobile-brand { display: none; align-items: center; gap: 10px; margin-block-end: 34px; }
.state-page { display: grid; justify-items: center; align-content: center; gap: 10px; min-height: 60vh; text-align: center; }
.state-page p { color: var(--oa-muted); }
.page-loading { padding: 60px; text-align: center; color: var(--oa-muted); }

#blazor-error-ui { display: none; position: fixed; inset-block-end: 0; inset-inline: 0; z-index: var(--oa-z-modal); padding: 10px 20px; background: var(--oa-warning-soft); color: var(--oa-ink); }
#blazor-error-ui .dismiss { position: absolute; inset-inline-end: 14px; cursor: pointer; }

@media (max-width: 900px) {
    .summary-strip { grid-template-columns: repeat(2, 1fr); }
    .summary-strip > div:nth-child(2) { border-inline-end: 0; }
    .login-page { grid-template-columns: 1fr; }
    .login-context { display: none; }
    .mobile-brand { display: flex; }
}
@media (max-width: 700px) {
    .oa-content { padding: 22px 16px 48px; }
    .account-name, .brand-lockup small { display: none; }
    .brand-lockup { min-width: 0; }
    .page-header { align-items: flex-start; flex-direction: column; margin-block-end: 20px; }
    .form-grid, .admin-overview, .split-workspace { grid-template-columns: 1fr; }
    .role-list { border-inline-end: 0; border-block-end: 1px solid var(--oa-border); }
    .permission-editor { padding: 18px 4px; }
    .admin-overview > a:nth-child(odd) { border-inline-end: 0; }
    .detail-list > div { grid-template-columns: 1fr; gap: 2px; }
}
@media (max-width: 480px) {
    .summary-strip { grid-template-columns: 1fr; }
    .summary-strip > div { border-inline-end: 0; }
    .table-toolbar { align-items: stretch; flex-direction: column; }
    .login-panel { padding: 24px 18px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}