/* ============ App shell ============ */
.shell { display: grid; grid-template-columns: var(--sidebar-width) 1fr; min-height: 100vh; }
.shell.is-collapsed { grid-template-columns: var(--sidebar-collapsed) 1fr; }

.sidebar {
  position: sticky; top: 0; height: 100vh; background: var(--color-surface-sidebar); color: #fff;
  display: flex; flex-direction: column; overflow: hidden;
}
.sidebar__brand { height: var(--topbar-height); display: flex; align-items: center; justify-content: space-between; padding-inline: 20px 12px; border-bottom: 1px solid rgba(255,255,255,.08); flex: none; }
.sidebar__brand img { height: 32px; }
.sidebar__collapse { width: 32px; height: 32px; display: grid; place-items: center; background: none; border: 0; color: rgba(255,255,255,.78); cursor: pointer; border-radius: var(--radius-md); }
.sidebar__collapse .icon { width: 16px; height: 16px; }
.sidebar__collapse:hover { background: var(--color-surface-sidebar-hover); color: #fff; }
.sidebar__nav { flex: 1; overflow-y: auto; padding: 8px 12px 16px; display: flex; flex-direction: column; gap: 2px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.2) transparent; }
.nav-group { font: var(--text-caption); color: rgba(255,255,255,.5); padding: 16px 14px 6px 10px; }
.nav-item {
  position: relative; display: flex; align-items: center; gap: 10px; height: 36px; padding-inline: 14px 10px; flex: none;
  border-radius: var(--radius-md); color: rgba(255,255,255,.78); font: var(--text-body); text-decoration: none;
}
.nav-item span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-item:hover { background: var(--color-surface-sidebar-hover); color: #fff; text-decoration: none; }
.nav-item.is-active { background: rgba(255,255,255,.10); color: #fff; font: var(--text-body-strong); }
.nav-item.is-active .icon { color: var(--color-brand-amber); }
.nav-item.is-active::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 8px; width: 3px; height: 20px;
  background: var(--color-brand-amber); border-radius: 2px;
}
.nav-item .icon { width: 20px; height: 20px; }
.nav-item__count { min-width: 20px; height: 20px; display: grid; place-items: center; background: var(--color-brand-amber); color: var(--color-text-on-amber); font: var(--text-caption); border-radius: var(--radius-full); padding: 0 6px; }
.sidebar__pinned { flex: none; border-top: 1px solid rgba(255,255,255,.08); padding: 8px 12px; }
.sidebar__bottom { flex: none; border-top: 1px solid rgba(255,255,255,.08); padding: 12px; }
.user-card { display: flex; align-items: center; gap: 10px; padding-block: 8px; padding-inline: 10px 8px; border-radius: var(--radius-md); background: rgba(255,255,255,.06); }
.user-card__meta { min-width: 0; line-height: 1.4; }
.user-card__name { font: var(--text-body-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-card__role { font: var(--text-small); color: rgba(255,255,255,.6); }
.shell.is-collapsed .nav-item span, .shell.is-collapsed .user-card__meta, .shell.is-collapsed .sidebar__brand img.logo-full { display: none; }
.shell.is-collapsed .nav-group { font-size: 0; padding: 14px 12px 8px; display: flex; justify-content: center; }
.shell.is-collapsed .nav-group::after { content: ""; width: 24px; height: 1px; background: rgba(255,255,255,.16); }
.shell.is-collapsed .nav-item { justify-content: center; padding: 0; width: 48px; }
.shell.is-collapsed .sidebar__brand { justify-content: center; padding: 0; }
.shell.is-collapsed .user-card { justify-content: center; background: none; }

.avatar { width: 32px; height: 32px; border-radius: var(--radius-full); background: var(--color-brand-amber-50); color: var(--color-brand-orange); display: grid; place-items: center; font: var(--text-body-strong); flex: none; }
.avatar-sm { width: 24px; height: 24px; font: var(--text-caption); }
.avatar-lg { width: 40px; height: 40px; }
.avatar--navy { background: var(--color-brand-navy-50); color: var(--color-text-brand); }
.sidebar .avatar { background: var(--color-sidebar-avatar-bg); color: var(--color-sidebar-avatar-fg); }

.main { min-width: 0; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 20; height: var(--topbar-height); background: var(--color-surface-card);
  border-bottom: 1px solid var(--color-border); display: flex; align-items: center; gap: var(--space-4); padding: 0 var(--space-6);
}
.topbar__search { position: relative; width: 420px; }
.topbar__search input { width: 100%; height: 40px; border: 1px solid var(--color-gray-300); background: var(--color-surface-card); border-radius: var(--radius-md); padding-inline: 40px 64px; }
.topbar__search input:focus { outline: none; border: 1.5px solid var(--color-brand-navy); box-shadow: var(--focus-ring); }
.topbar__search .icon { position: absolute; right: 12px; top: 10px; color: var(--color-gray-500); z-index: 1; pointer-events: none; }
.topbar__search kbd { position: absolute; left: 12px; top: 10px; height: 20px; line-height: 18px; font: 500 11px/18px system-ui, sans-serif; color: var(--color-gray-500); border: 1px solid var(--color-border); border-radius: 4px; padding: 0 6px; background: var(--color-gray-100); direction: ltr; }
.topbar__actions { margin-inline-start: auto; display: flex; align-items: center; gap: 12px; }
.topbar__sep { width: 1px; height: 24px; background: var(--color-border); }
.user-trigger { display: flex; align-items: center; gap: 8px; padding-block: 4px; padding-inline: 6px 4px; border-radius: var(--radius-md); border: 0; background: none; cursor: pointer; font: var(--text-body-strong); color: var(--color-text-primary); }
.user-trigger:hover { background: var(--color-gray-100); }
.user-trigger .icon { width: 16px; height: 16px; color: var(--color-gray-500); }
.icon-btn { position: relative; width: 40px; height: 40px; display: grid; place-items: center; border: 0; background: none; border-radius: var(--radius-md); color: var(--color-text-secondary); cursor: pointer; }
.icon-btn:hover { background: var(--color-gray-100); color: var(--color-text-primary); }
.icon-btn .dot { position: absolute; top: 9px; inset-inline-end: 10px; width: 9px; height: 9px; border-radius: 50%; background: var(--color-danger); border: 2px solid var(--color-surface-card); }

.content { padding: 24px 32px; max-width: var(--content-max); width: 100%; }

/* ============ Page header & breadcrumb ============ */
.page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-block-end: var(--space-6); }
.page-header__title { font: var(--text-h1); }
.page-header__sub { font: var(--text-small); color: var(--color-text-secondary); margin-top: 4px; }
.page-header__actions { display: flex; gap: var(--space-2); }
.breadcrumb { display: flex; align-items: center; gap: 4px; font: var(--text-small); color: var(--color-text-primary); margin-block-end: 12px; }
.breadcrumb a { color: var(--color-text-secondary); }
.breadcrumb .icon { width: 16px; height: 16px; color: var(--color-text-muted); }

/* ============ Buttons ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px;
  border-radius: var(--radius-md); border: 1px solid transparent; font: var(--text-body-strong); cursor: pointer; white-space: nowrap; text-decoration: none;
}
.btn:hover { text-decoration: none; }
.btn .icon { width: 20px; height: 20px; }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn-sm { height: 32px; padding: 0 12px; }
.btn-sm .icon { width: 16px; height: 16px; }
.btn-primary { background: var(--color-brand-navy); color: #fff; }
.btn-primary:hover { background: var(--color-brand-navy-700); }
.btn-amber { background: var(--color-brand-amber); color: var(--color-text-on-amber); }
.btn-amber .icon { color: #fff; }   /* owner rule §10: icons in colored buttons are pure white */
.btn-amber:hover { background: var(--color-brand-orange); }
.btn-danger { background: var(--color-danger-solid); color: #fff; }
.btn-danger:hover { background: var(--color-danger-solid-hover); }
.btn-primary .icon, .btn-danger .icon { color: #fff; }
.btn-secondary { background: var(--color-surface-card); color: var(--color-text-brand); border-color: var(--color-gray-300); }
.btn-secondary:hover { background: var(--color-gray-50); border-color: var(--color-gray-400); }
.btn-ghost { background: none; color: var(--color-text-brand); }
.btn-ghost:hover { background: var(--color-gray-100); }
.btn-link { background: none; border: 0; padding: 0; height: auto; color: var(--color-text-brand); }
.btn[disabled], .btn.is-disabled { background: var(--color-gray-200); border-color: transparent; color: var(--color-gray-400); pointer-events: none; }
.btn-secondary[disabled] { background: var(--color-gray-50); border-color: var(--color-gray-200); }
.btn-ghost[disabled] { background: none; }
.btn-block { width: 100%; }

/* ============ Forms ============ */
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field label, .field__label { font: var(--text-body-strong); color: var(--color-text-primary); }
.field__hint { font: var(--text-small); color: var(--color-text-muted); }
.field__error { font: var(--text-small); color: var(--color-danger); }
.input, .select, .textarea {
  width: 100%; height: 40px; border: 1px solid var(--color-gray-300); background: var(--color-surface-card); border-radius: var(--radius-md); padding: 0 12px;
}
.input::placeholder, .textarea::placeholder { color: var(--color-text-muted); }
.input:disabled, .select:disabled { background: var(--color-gray-50); border-color: var(--color-gray-200); color: var(--color-text-muted); }
.textarea { height: auto; min-height: 96px; padding: var(--space-2) var(--space-3); resize: vertical; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--color-gray-400); }
.input:focus, .select:focus, .textarea:focus { outline: none; border: 1.5px solid var(--color-brand-navy); box-shadow: var(--focus-ring); }
.field.has-error .input, .field.has-error .select { border-color: var(--color-danger); }
.input[dir="ltr"] { text-align: right; }   /* Figma: Latin values (username, password) stay right-aligned in RTL forms */
.check { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--color-brand-navy); margin: 0; }
.field__label .req, .field label .req { color: var(--color-danger); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-5); }
.form-grid .span-2 { grid-column: span 2; }
.form-actions { display: flex; gap: var(--space-2); margin-top: var(--space-6); }
.toggle { position: relative; width: 36px; height: 20px; display: inline-block; }
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle span { position: absolute; inset: 0; background: var(--color-gray-300); border-radius: var(--radius-full); transition: .15s; cursor: pointer; }
.toggle span::after { content: ""; position: absolute; top: 2px; inset-inline-start: 2px; width: 16px; height: 16px; background: var(--color-text-on-brand); border-radius: 50%; transition: .15s; }
.toggle input:checked + span { background: var(--color-brand-navy); }
.toggle input:checked + span::after { inset-inline-start: 18px; }

/* ============ Cards ============ */
.card { background: var(--color-surface-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.card__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 0 16px; border-bottom: 1px solid var(--color-border); }
.card__title { font: var(--text-h3); }
.card__body { padding: 16px; }
.card__footer { min-height: 44px; display: flex; align-items: center; padding: 0 16px; border-top: 1px solid var(--color-border); font: var(--text-small); color: var(--color-text-muted); }
.card__body--flush { padding: 0; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); }
.kv { display: grid; grid-template-columns: 160px 1fr; gap: var(--space-2) var(--space-4); }
.kv dt { color: var(--color-text-secondary); }
.kv dd { margin: 0; }

/* ============ Badge/Status ============ */
.badge { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border-radius: var(--radius-full); font: var(--text-small); white-space: nowrap; color: var(--color-gray-800); background: var(--tone-neutral-bg); --dot: var(--tone-neutral-dot); }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--dot); }
.badge-sm { height: 20px; padding: 0 6px; font: var(--text-caption); }
.badge--neutral { background: var(--tone-neutral-bg); --dot: var(--tone-neutral-dot); }
.badge--blue { background: var(--tone-blue-bg); --dot: var(--tone-blue-dot); }
.badge--navy { background: var(--tone-navy-bg); --dot: var(--tone-navy-dot); }
.badge--amber { background: var(--tone-amber-bg); --dot: var(--tone-amber-dot); }
.badge--orange { background: var(--tone-orange-bg); --dot: var(--tone-orange-dot); }
.badge--green { background: var(--tone-green-bg); --dot: var(--tone-green-dot); }
.badge--red { background: var(--tone-red-bg); --dot: var(--tone-red-dot); }

/* ============ Table ============ */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; }
.table th { position: sticky; top: 0; height: 40px; background: var(--color-gray-50); color: var(--color-text-primary); font: 500 12px/20px var(--font-family); text-align: right; padding: 0 12px; border-bottom: 1px solid var(--color-border); white-space: nowrap; }
.table td { height: 48px; padding: 4px 12px; border-bottom: 1px solid var(--color-border); vertical-align: middle; }
.table tbody tr:hover { background: var(--color-gray-50); }
.table tbody tr.is-selected { background: var(--color-brand-navy-50); }
.table tbody tr.is-warning { background: var(--color-warning-bg); box-shadow: inset -3px 0 0 var(--color-warning); }
.table tbody tr:last-child td { border-bottom: 0; }
.table .col-num, .table th.col-num { text-align: left; font-variant-numeric: tabular-nums; }   /* numeric/money columns left-aligned (UI rule) */
.table .col-actions { width: 1%; white-space: nowrap; text-align: left; }
.table--dense td { height: 40px; }
.table-toolbar { display: flex; align-items: center; gap: 8px; min-height: 56px; padding: 8px 12px; border-bottom: 1px solid var(--color-border); flex-wrap: wrap; }
.table-toolbar .input, .table-toolbar .select { height: 36px; width: auto; min-width: 160px; }
.table-footer { display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding: 8px 12px; border-top: 1px solid var(--color-border); color: var(--color-text-secondary); font: var(--text-small); }
.pagination { display: flex; gap: var(--space-1); }
.pagination a, .pagination span { min-width: 32px; height: 32px; display: grid; place-items: center; border-radius: var(--radius-md); font: 500 12px/20px var(--font-family); color: var(--color-text-primary); padding: 0 8px; }
.pagination a:hover { background: var(--color-gray-100); text-decoration: none; }
.pagination .is-current { background: var(--color-brand-navy); color: #fff; border-color: var(--color-brand-navy); }

/* ============ Alerts / banners ============ */
.alert { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; border-radius: var(--radius-md); border: 1px solid; margin-block-end: 16px; color: var(--color-text-secondary); font: var(--text-small); }
.alert .alert__title { color: var(--color-text-primary); }
.alert--banner { border-radius: 0; border-width: 0 0 1px; }
.alert .icon { margin-top: 2px; }
.alert--info { background: var(--color-info-bg); border-color: var(--color-info); }
.alert--info > .icon { color: var(--color-info); }
.alert--warning { background: var(--color-warning-bg); border-color: var(--color-warning); }
.alert--warning > .icon { color: var(--color-warning); }
.alert--danger { background: var(--color-danger-bg); border-color: var(--color-danger); }
.alert--danger > .icon { color: var(--color-danger); }
.alert--success { background: var(--color-success-bg); border-color: var(--color-success); }
.alert--success > .icon { color: var(--color-success); }
.alert__title { font: var(--text-body-strong); }

/* ============ Toasts (bottom-left, UI rule) ============ */
.toasts { position: fixed; inset-inline-end: 24px; bottom: 24px; z-index: 100; display: flex; flex-direction: column; gap: 8px; }
.toast { width: 380px; display: flex; align-items: flex-start; gap: 12px; padding: 16px; background: var(--color-surface-card); color: var(--color-text-primary); border-radius: var(--radius-md); border-inline-start: 4px solid var(--color-success); box-shadow: 0 12px 16px rgba(15,23,42,.12); animation: toast-in .2s ease-out; font: var(--text-body-strong); }
.toast > .icon { color: var(--color-success); }
.toast--danger { border-inline-start-color: var(--color-danger); }
.toast--danger > .icon { color: var(--color-danger); }
.toast--info { border-inline-start-color: var(--color-info); }
.toast--warning { border-inline-start-color: var(--color-warning); }
.toast__text { flex: 1; }
.toast__close { margin-inline-start: auto; width: 32px; height: 32px; margin-block: -6px; display: grid; place-items: center; background: none; border: 0; color: var(--color-gray-500); cursor: pointer; border-radius: var(--radius-md); }
.toast__close:hover { background: var(--color-gray-100); }
@keyframes toast-in { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ============ Empty state ============ */
.empty { text-align: center; padding: 40px 24px; color: var(--color-text-secondary); max-width: 520px; margin: 0 auto; }
.empty__icon { position: relative; width: 104px; height: 104px; margin: 0 auto 16px; border-radius: var(--radius-full); background: var(--color-brand-navy-50); color: var(--color-text-brand); display: grid; place-items: center; }
.empty__icon .icon { width: 32px; height: 32px; }
.empty__icon::before, .empty__icon::after { content: ""; position: absolute; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); background: linear-gradient(#FED408, #F8AF1E 55%, #F49C23); }
.empty__icon::before { width: 12px; height: 12px; top: 6px; inset-inline-end: -6px; }
.empty__icon::after { width: 8px; height: 8px; bottom: 10px; inset-inline-start: -4px; }
.empty__title { font: var(--text-h2); color: var(--color-text-primary); margin-block-end: 6px; }
.empty p { margin-block-end: 16px; }

/* ============ Modal ============ */
.modal-backdrop { position: fixed; inset: 0; background: var(--color-overlay); z-index: 50; display: grid; place-items: center; padding: var(--space-6); }
.modal { width: min(560px, 100%); max-height: calc(100vh - 48px); overflow: auto; background: var(--color-surface-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.modal__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 24px; border-bottom: 1px solid var(--color-border); }
.modal__title { font: var(--text-h2); }
.modal__body { padding: 24px; }
/* footer: primary at the far LEFT, «انصراف» next to it → DOM order: cancel, primary */
.modal__footer { display: flex; justify-content: flex-end; gap: 8px; padding: 16px 24px; border-top: 1px solid var(--color-border); }
.modal--sm { width: min(400px, 100%); }
.modal--lg { width: min(800px, 100%); }
dialog.modal { padding: 0; border: 0; }
dialog.modal::backdrop { background: var(--color-overlay); }

/* ============ Dropdown menu ============ */
.menu-wrap { position: relative; }
.menu { position: absolute; inset-inline-end: 0; top: calc(100% + 4px); min-width: 220px; background: var(--color-surface-card); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); padding: 4px; z-index: 40; display: flex; flex-direction: column; gap: 2px; }
.menu .icon { width: 18px; height: 18px; color: var(--color-gray-600); }
.menu--user { width: 260px; }
.menu__head { display: flex; align-items: center; gap: 10px; padding: 10px; }
.menu a, .menu button { display: flex; width: 100%; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-radius: var(--radius-sm); border: 0; background: none; color: var(--color-text-primary); text-align: right; cursor: pointer; }
.menu a:hover, .menu button:hover { background: var(--color-gray-100); text-decoration: none; }
.menu hr { border: 0; border-top: 1px solid var(--color-border); margin: var(--space-1) 0; }
.menu .is-danger, .menu .is-danger .icon { color: var(--color-danger); }

/* ============ Settings layout (Figma 463:3847): fixed sub-nav on the RIGHT (next to the sidebar), content on the left ============ */
.settings-layout { display: grid; grid-template-columns: 232px minmax(0, 1fr); column-gap: 24px; align-items: start; }
.settings-layout > .settings-head { grid-column: 1 / -1; grid-row: 1; }
.settings-layout > .settings-nav { grid-column: 1; grid-row: 2; }
.settings-layout > .settings-main { grid-column: 2; grid-row: 2; min-width: 0; }
.settings-head { margin-block-end: 24px; }
.settings-nav { position: sticky; top: calc(var(--topbar-height) + 24px); background: var(--color-surface-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 8px; }
.settings-nav__group { font: var(--text-caption); color: var(--color-text-muted); padding: 12px 12px 6px; }
.settings-nav a { display: flex; align-items: center; justify-content: flex-start; gap: 8px; height: 36px; padding: 0 12px; border-radius: var(--radius-md); color: var(--color-text-primary); }
.settings-nav a .icon { width: 18px; height: 18px; color: var(--color-gray-500); }
.settings-nav a:hover { background: var(--color-gray-100); text-decoration: none; }
.settings-nav a.is-active { background: var(--color-brand-navy-50); color: var(--color-text-brand); font: var(--text-body-strong); }
.settings-nav a.is-active .icon { color: var(--color-text-brand); }
.page-title { font: var(--text-h1); margin: 0; }
.page-sub { font: var(--text-small); color: var(--color-text-secondary); margin-top: 4px; }

/* ============ Auth (Figma 277:105) ============ */
.auth { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; overflow: hidden; background: var(--color-surface-page); padding: 48px 24px; }
.auth__sun { position: absolute; pointer-events: none; }
.auth__sun--1 { width: 400px; height: 400px; inset-inline-start: -140px; top: -140px; opacity: .9; }      /* filled navy, top-right */
.auth__sun--2 { width: 200px; height: 200px; inset-inline-start: -60px; top: calc(50% + 110px); opacity: .7; } /* outline amber, right */
.auth__sun--3 { width: 320px; height: 320px; inset-inline-end: -90px; bottom: -60px; opacity: .9; }     /* filled amber, bottom-left */
.auth__sun--4 { width: 140px; height: 140px; inset-inline-end: 120px; top: 80px; opacity: .7; }        /* outline navy, top-left */
.auth-card { position: relative; z-index: 1; width: 438px; background: var(--color-surface-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 40px; }
.auth-card__logo { display: flex; justify-content: center; margin-block-end: 24px; }
.auth-card__logo img { height: 101px; }
.auth-card__title { font: var(--text-h1); text-align: center; margin-block-end: 12px; }
.auth-card__sub { text-align: center; font: var(--text-small); color: var(--color-text-secondary); margin-block-end: 28px; }
.auth-card form > * + * { margin-block-start: 20px; }
.auth-card .btn-block { margin-block-start: 28px !important; }
.auth__foot { position: relative; z-index: 1; margin-top: 24px; font: var(--text-small); color: var(--color-text-muted); text-align: center; }
.auth .alert { margin-block-end: 24px; }
.input-wrap { position: relative; }
.input-wrap .input { padding-inline-end: 44px; }
.input-wrap__btn { position: absolute; inset-inline-end: 8px; top: 8px; width: 24px; height: 24px; border: 0; background: none; color: var(--color-gray-400); cursor: pointer; display: grid; place-items: center; padding: 0; }
.input-wrap__btn .icon { width: 20px; height: 20px; }
.field__error { display: flex; align-items: center; gap: 4px; }
.field__error .icon { width: 16px; height: 16px; }
.pw-strength { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 12px !important; }
.pw-strength span { height: 4px; border-radius: 2px; background: var(--color-gray-200); }
.pw-strength[data-level="1"] span:nth-child(-n+1) { background: var(--color-danger); }
.pw-strength[data-level="2"] span:nth-child(-n+2) { background: var(--color-warning); }
.pw-strength[data-level="3"] span:nth-child(-n+3) { background: var(--color-brand-amber); }
.pw-strength[data-level="4"] span { background: var(--color-success); }
.pw-strength-label { font: var(--text-small); color: var(--color-text-secondary); margin-top: 8px !important; }
.pw-strength-label b { font-weight: 500; }
.pw-rules { list-style: none; padding: 0; margin: 12px 0 0 !important; font: var(--text-small); color: var(--color-text-secondary); display: grid; gap: 4px; }
.pw-rules li { display: flex; align-items: center; gap: 6px; }
.pw-rules li .icon { width: 16px; height: 16px; color: var(--color-gray-300); }
.pw-rules li.ok .icon { color: var(--color-success); }

/* ============ Partner shell ============ */
.pshell__top { position: sticky; top: 0; z-index: 20; height: var(--topbar-height); background: var(--color-surface-card); border-bottom: 1px solid var(--color-border); display: flex; align-items: center; gap: 40px; padding: 0 32px; }
.pshell__top img { height: 32px; }
.pnav { display: flex; gap: var(--space-1); height: 100%; }
.pnav a { display: flex; align-items: center; gap: 8px; padding: 0 12px; color: var(--color-text-secondary); border-bottom: 2px solid transparent; }
.pnav a .icon { width: 18px; height: 18px; }
.pnav a:hover { color: var(--color-text-primary); text-decoration: none; }
.pnav a.is-active { color: var(--color-text-brand); border-bottom-color: var(--color-brand-amber); font: var(--text-body-strong); }
.pshell__actions { gap: 12px; }
.pshell__actions { margin-inline-start: auto; display: flex; align-items: center; gap: var(--space-2); }
/* C11: the partner workspace adds امروز/فرصت‌ها/اشخاص/سازمان‌ها/نیروگاه‌ها → the top nav must still fit a 1280px desktop */
.pnav a { white-space: nowrap; }
@media (min-width: 768px) and (max-width: 1599px) {
  .pshell__top { gap: 20px; padding: 0 24px; }
  .pnav { gap: 0; }
  .pnav a { padding: 0 9px; }
  .pnav a .icon { display: none; }
}
@media (min-width: 768px) and (max-width: 1439px) {
  .pshell__top .user-trigger .cell-stack { display: none; }
}
.pshell .content { margin: 0 auto; }

/* ============ Matrix (roles) ============ */
.matrix th, .matrix td { text-align: center; }
.matrix th:first-child, .matrix td:first-child { text-align: right; }
.matrix select { height: 32px; min-width: 120px; }
.matrix .fixed { color: var(--color-text-secondary); }
.diff-before { background: var(--color-danger-bg); }
.diff-after { background: var(--color-success-bg); }
.code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; direction: ltr; unicode-bidi: isolate; font-size: 12px; }
.temp-password { font-family: ui-monospace, monospace; font-size: 20px; letter-spacing: 1px; direction: ltr; background: var(--color-gray-100); padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); display: inline-block; }

/* ============ Drawer (Figma 37:1822): opens from the LEFT, 480 wide ============ */
.drawer-backdrop { position: fixed; inset: 0; background: var(--color-overlay); z-index: 60; }
.drawer { position: fixed; top: 0; bottom: 0; left: 0; width: 480px; max-width: 100vw; background: var(--color-surface-card); z-index: 61; display: flex; flex-direction: column; box-shadow: 0 12px 16px rgba(15,23,42,.12); border-inline-start: 1px solid var(--color-border); animation: drawer-in .18s ease-out; }
.drawer--wide { width: 760px; }
@keyframes drawer-in { from { transform: translateX(-100%); } to { transform: none; } }
.drawer__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 24px; border-bottom: 1px solid var(--color-border); }
.drawer__title { font: var(--text-h2); }
.drawer__sub { font: var(--text-small); color: var(--color-text-secondary); margin-top: 4px; }
.drawer__body { flex: 1; overflow-y: auto; padding: 24px; }
.drawer__body > * + * { margin-block-start: 20px; }
.drawer__footer { display: flex; justify-content: flex-end; gap: 8px; padding: 16px 24px; border-top: 1px solid var(--color-border); }
.close-btn { width: 32px; height: 32px; display: grid; place-items: center; border: 0; background: none; border-radius: var(--radius-md); color: var(--color-gray-500); cursor: pointer; flex: none; }
.close-btn:hover { background: var(--color-gray-100); }
.close-btn .icon { width: 16px; height: 16px; }
.modal-backdrop { z-index: 60; }
.modal { animation: toast-in .15s ease-out; }
.note { padding: 12px 16px; border-radius: var(--radius-md); background: var(--color-info-bg); font: var(--text-small); color: var(--color-text-secondary); }
.hint { font: var(--text-small); color: var(--color-text-muted); }
.inline-actions { display: flex; gap: 24px; justify-content: flex-start; }
.link-btn { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; color: var(--color-text-brand); font: var(--text-body-strong); cursor: pointer; padding: 0; }
.link-btn .icon { width: 18px; height: 18px; }
.field__label .req { color: var(--color-danger); margin-inline-start: 4px; }
.input-affix { display: flex; align-items: center; height: 40px; border: 1px solid var(--color-gray-300); border-radius: var(--radius-md); background: var(--color-surface-card); }
.input-affix:focus-within { border: 1.5px solid var(--color-brand-navy); box-shadow: var(--focus-ring); }
.input-affix input { flex: 1; border: 0; outline: 0; height: 100%; padding: 0 12px; background: none; min-width: 0; }
.input-affix__fix { padding: 0 12px; color: var(--color-text-secondary); border-inline-start: 1px solid var(--color-gray-200); direction: ltr; font: 400 14px/20px system-ui, sans-serif; }
.switch-row { display: flex; align-items: center; gap: 8px; }

/* ============ Toolbar inside table card ============ */
.toolbar { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.toolbar__search { position: relative; width: 280px; }
.toolbar__search .icon { position: absolute; inset-inline-start: 12px; top: 10px; color: var(--color-gray-500); pointer-events: none; z-index: 1; }
.toolbar__search .input { padding-inline-start: 40px; }
.toolbar .select { width: 160px; }
.toolbar__count { font: var(--text-small); color: var(--color-text-muted); }
.toolbar__end { margin-inline-start: auto; display: flex; gap: 8px; }
.cell-stack { display: flex; flex-direction: column; line-height: 1.4; }
.cell-stack .sub { font: var(--text-small); color: var(--color-text-secondary); }
/* «آخرین اقدام» list cell (partials/last_action.php) */
.last-action { max-width: 240px; }
.last-action__what { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.last-action__what b { font-weight: 600; }
.last-action__subj { color: var(--color-text-secondary); }
.table tr.is-muted td { color: var(--color-text-muted); }
.table tr.is-muted .cell-stack strong { color: var(--color-text-muted); }
.table-note { padding: 12px 16px; border-top: 1px solid var(--color-border); font: var(--text-small); color: var(--color-text-secondary); }
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: left 12px center; padding-inline-end: 40px; }

/* ============ Matrix pills (Figma 467:2647) ============ */
.pill-select { position: relative; display: inline-block; }
.pill-select select { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.pill-select .badge { cursor: pointer; }
.pill-select:focus-within .badge { box-shadow: var(--focus-ring); }
.matrix th, .matrix td { text-align: center; white-space: nowrap; }
.matrix th:first-child, .matrix td:first-child { text-align: right; }
.card-head { padding: 20px 24px 16px; }
.card-head h2 { font: var(--text-h3); }
.card-head p { font: var(--text-small); color: var(--color-text-secondary); margin: 6px 0 0; }
.perm-cell { display: flex; flex-direction: column; gap: 2px; }
.perm-cell .sub { font: var(--text-small); color: var(--color-text-secondary); }
.toggle input:disabled + span { opacity: .5; cursor: default; }
.page-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; }
.page-actions > .row { order: 2; }
.page-actions__meta { font: var(--text-small); color: var(--color-text-muted); }

/* ============ Status cards (system, Figma 473:9250) ============ */
.status-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.status-card { background: var(--color-surface-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.status-card__top { display: flex; align-items: center; gap: 8px; white-space: nowrap; font: var(--text-small); color: var(--color-text-secondary); }
.status-card__icon { width: 32px; height: 32px; border-radius: var(--radius-md); background: var(--color-brand-navy-50); color: var(--color-text-brand); display: grid; place-items: center; }
.status-card__icon .icon { width: 18px; height: 18px; }
.status-card__top .badge { margin-inline-start: auto; }
.status-card__value { font: var(--text-h2); }
.status-card__sub { font: var(--text-small); color: var(--color-text-muted); }
.alert--block { padding: 16px 20px; }
.card-head--row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }

/* ============ Audit (Figma 473:7942 / 473:8986) ============ */
.op-badge { height: 22px; }
.kv-box { background: var(--color-gray-50); border-radius: var(--radius-md); padding: 8px 16px; display: grid; grid-template-columns: 72px 1fr; row-gap: 0; }
.kv-box dt, .kv-box dd { margin: 0; padding: 8px 0; font: var(--text-body); }
.kv-box dt { color: var(--color-text-muted); font: var(--text-small); padding-top: 10px; }
.diff-card { border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; }
.diff-card__head { display: flex; align-items: flex-start; gap: 12px; padding: 20px 16px; }
.diff-card__head .grow { min-width: 0; }
.diff-table th { background: var(--color-gray-50); }
.diff-table td:first-child { font: var(--text-body-strong); border-inline-start: 3px solid transparent; }
.diff-table tr.is-changed td:first-child { border-inline-start-color: var(--color-text-brand); }
.chip-old { display: inline-block; padding: 0 6px; border-radius: 4px; background: var(--color-danger-bg); color: var(--color-danger); text-decoration: line-through; }
.chip-new { display: inline-block; padding: 0 6px; border-radius: 4px; background: var(--color-success-bg); color: var(--color-success); }
.diff-card__foot { padding: 10px 16px; background: var(--color-gray-50); font: var(--text-small); color: var(--color-text-muted); display: flex; align-items: center; gap: 6px; }
.time-stack { display: flex; flex-direction: column; line-height: 1.5; text-align: right; }
.time-stack .sub { font: var(--text-small); color: var(--color-text-secondary); }
.pager { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-top: 1px solid var(--color-border); font: var(--text-small); color: var(--color-text-secondary); }
.pager .pagination a, .pager .pagination span { color: var(--color-text-primary); }
.pagination .is-current, .pager .pagination .is-current { color: #fff; }

/* ============ Full-page states (Figma 21) ============ */
.state-card { background: var(--color-surface-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); min-height: calc(100vh - var(--topbar-height) - 48px); display: grid; place-items: center; }
.state-card .empty { padding: 40px; }
.empty__code { font: var(--text-small); color: var(--color-text-muted); margin-block-end: 4px; }
.maint { min-height: 100vh; display: grid; place-items: center; background: var(--color-surface-page); }
.icon-btn--sm { width: 32px; height: 32px; }
.icon-btn--sm .icon { width: 16px; height: 16px; }
.user-card__more { color: rgba(255,255,255,.6); }
.stack > * + * { margin-block-start: 16px; }
.row .input { flex: 1; }
.date-range { gap: 6px; }
.date-range input { padding: 0 8px 0 0; width: 90px; text-align: center; }
.select--bare { height: 32px; width: auto; border: 0; background-color: transparent; padding-inline: 4px 28px; background-position: left 4px center; font-weight: 500; }
.pagination__gap { border: 0 !important; color: var(--color-text-muted) !important; }
.pagination a .icon, .pagination span .icon { width: 16px; height: 16px; }
.toolbar--tight { gap: 8px; }
.toolbar--tight .select { padding-inline-start: 12px; }
.pcontent { max-width: 1200px; margin: 0 auto; padding: 40px 0; }
.pshell { min-height: 100vh; }

/* ---------- segmented radio (e.g. جنسیت «آقا / خانم») and inline row repeaters (phones, «+ سازمان جدید», «+ شخص جدید») ---------- */
.seg-radio { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--radius-md); background: var(--color-gray-100); align-self: flex-start; }
.seg-radio__item { position: relative; display: inline-flex; cursor: pointer; }
.seg-radio__item input { position: absolute; opacity: 0; pointer-events: none; }
.seg-radio__item span { height: 32px; padding: 0 16px; display: inline-flex; align-items: center; border-radius: 6px; color: var(--color-text-secondary); font: var(--text-body); white-space: nowrap; }
.seg-radio__item:hover span { color: var(--color-text-primary); }
.seg-radio__item input:checked + span { background: var(--color-surface-card); color: var(--color-text-brand); font: var(--text-body-strong); box-shadow: 0 1px 1px rgba(15, 23, 42, .06); }
.seg-radio__item input:focus-visible + span { box-shadow: var(--focus-ring); }
fieldset.field { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.field > legend { padding: 0; margin-block-end: 8px; }
.repeat { display: flex; flex-direction: column; gap: 8px; }
.repeat__list { display: flex; flex-direction: column; gap: 8px; }
.repeat__list:empty { display: none; }
.repeat__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.repeat__row .repeat__label { width: 128px; flex: none; }
.repeat__row .repeat__grow { flex: 1; min-width: 0; }
.repeat__row .repeat__error { flex-basis: 100%; }
.repeat__row.has-error .input-affix { border-color: var(--color-danger); }
.repeat__add { align-self: flex-start; }
.repeat__card { display: flex; flex-direction: column; gap: 12px; padding: 12px 16px 16px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-gray-50); }
.repeat__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.repeat__title { display: inline-flex; align-items: center; gap: 6px; font: var(--text-body-strong); color: var(--color-text-primary); }
.repeat__title .icon { width: 18px; height: 18px; color: var(--color-text-secondary); }
.repeat__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.repeat__grid .span-2 { grid-column: span 2; }
.repeat__dup { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--color-brand-amber); border-radius: var(--radius-md); background: var(--color-brand-amber-50); }
.repeat__dup-title { display: flex; align-items: center; gap: 6px; font: var(--text-body-strong); color: var(--color-text-primary); }
.repeat__dup-title .icon { width: 18px; height: 18px; }
.repeat__dup .radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.repeat__dup .radio input { width: 18px; height: 18px; margin: 0; accent-color: var(--color-brand-navy); }
.repeat__dup .radio input[disabled] + span { color: var(--color-text-muted); }
.phone-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }