/* Vazirmatn v33.003 — SIL Open Font License 1.1; متن مجوز در static/fonts/OFL.txt است. */
@font-face { font-family:"Vazirmatn"; src:url("../fonts/Vazirmatn-variable.woff2") format("woff2"); font-style:normal; font-weight:100 900; font-display:swap; }
/* توکن‌های رنگ، فاصله‌گذاری و تایپوگرافی مصوب docs/design/design-system.md؛ نام متغیرهای قبلی به‌عنوان alias حفظ شده تا templateهای موجود بدون تغییر کار کنند. */
:root {
  color-scheme: light dark;
  --surface:#f5f7fa; --card:#fff; --text:#17212b; --muted:#5b6673; --accent:#036a9b; --accent-contrast:#fff;
  --focus:#7c3aed; --border:#d7e0e8; --border-strong:#758391; --radius:1rem;
  --income:#137a45; --income-soft:#e8f7ee; --expense:#b83b29; --expense-soft:#fff0ed;
  --danger:#a9231b; --danger-contrast:#fff; --danger-soft:#fff1ef;
  --warning-bg:#fff3d6; --warning-text:#8a5900;
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-5:1.5rem; --space-6:2rem; --space-7:3rem; --space-8:4rem;
  --fs-display:clamp(2rem,7vw,2.5rem); --lh-display:1.2;
  --fs-title:1.75rem; --lh-title:1.29;
  --fs-section:1.25rem; --lh-section:1.5;
  --fs-body:1rem; --lh-body:1.75;
  --fs-label:.875rem; --lh-label:1.57;
  --fs-caption:.8125rem; --lh-caption:1.54;
  --gradient-brand:linear-gradient(135deg,#047cb5 0%,#036a5f 100%);
  --gradient-wash-1:color-mix(in srgb, #047cb5 42%, transparent);
  --gradient-wash-2:color-mix(in srgb, #05b0a0 32%, transparent);
  --glass-bg:rgba(255,255,255,.64); --glass-border:rgba(255,255,255,.55);
  --shadow-1:0 2px 8px rgb(23 33 43 / 8%); --shadow-2:0 8px 24px rgb(23 33 43 / 14%); --shadow-3:0 16px 40px rgb(23 33 43 / 20%);
  --shadow-glow:0 10px 30px -6px rgb(4 124 181 / 45%);
  --ease-spring:cubic-bezier(.34,1.56,.64,1); --ease-out:cubic-bezier(.16,1,.3,1);
}
:root[data-theme="dark"] {
  --surface:#071f1c; --card:#10352f; --text:#f4f8f6; --muted:#b4c6c0; --accent:#5edbaa; --accent-contrast:#071f1c;
  --focus:#f9d65c; --border:#2b5a51; --border-strong:#71998f;
  --income:#6fe2a1; --income-soft:#163e32; --expense:#ff9b88; --expense-soft:#49261f;
  --danger:#ff7669; --danger-contrast:#071f1c; --danger-soft:#4a211d;
  --warning-bg:#3d310f; --warning-text:#f4c95d;
  --gradient-brand:linear-gradient(135deg,#5edbaa 0%,#22b8d6 100%);
  --gradient-wash-1:color-mix(in srgb, #5edbaa 30%, transparent);
  --gradient-wash-2:color-mix(in srgb, #22b8d6 26%, transparent);
  --glass-bg:rgba(16,53,47,.58); --glass-border:rgba(255,255,255,.09);
  --shadow-1:0 2px 8px rgb(0 0 0 / 24%); --shadow-2:0 8px 24px rgb(0 0 0 / 32%); --shadow-3:0 16px 40px rgb(0 0 0 / 40%);
  --shadow-glow:0 10px 30px -6px rgb(94 219 170 / 40%);
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] {
    --surface:#071f1c; --card:#10352f; --text:#f4f8f6; --muted:#b4c6c0; --accent:#5edbaa; --accent-contrast:#071f1c;
    --focus:#f9d65c; --border:#2b5a51; --border-strong:#71998f;
    --income:#6fe2a1; --income-soft:#163e32; --expense:#ff9b88; --expense-soft:#49261f;
    --danger:#ff7669; --danger-contrast:#071f1c; --danger-soft:#4a211d;
    --warning-bg:#3d310f; --warning-text:#f4c95d;
    --gradient-brand:linear-gradient(135deg,#5edbaa 0%,#22b8d6 100%);
    --gradient-wash-1:color-mix(in srgb, #5edbaa 30%, transparent);
    --gradient-wash-2:color-mix(in srgb, #22b8d6 26%, transparent);
    --glass-bg:rgba(16,53,47,.58); --glass-border:rgba(255,255,255,.09);
    --shadow-1:0 2px 8px rgb(0 0 0 / 24%); --shadow-2:0 8px 24px rgb(0 0 0 / 32%); --shadow-3:0 16px 40px rgb(0 0 0 / 40%);
    --shadow-glow:0 10px 30px -6px rgb(94 219 170 / 40%);
  }
}
* { box-sizing:border-box; } body { margin:0; min-width:20rem; position:relative; color:var(--text); background-color:var(--surface); font-family:"Vazirmatn",Tahoma,Arial,sans-serif; font-size:var(--fs-body); line-height:var(--lh-body); } a { color:inherit; } button,.button { min-height:44px; font:inherit; } :focus-visible { outline:3px solid var(--focus); outline-offset:3px; }
body::before { content:""; position:fixed; inset-inline:0; top:0; height:36rem; background:linear-gradient(165deg, var(--gradient-wash-1) 0%, var(--gradient-wash-2) 55%, transparent 85%); z-index:-1; pointer-events:none; }
h2 { margin:0 0 var(--space-3); font-size:var(--fs-section); line-height:var(--lh-section); font-weight:700; }
.skip-link { position:fixed; top:-5rem; inset-inline-start:1rem; z-index:2; padding:.5rem 1rem; color:var(--surface); background:var(--text); } .skip-link:focus { top:1rem; } .site-header,.page-shell { width:min(100% - 2rem,72rem); margin:auto; } .site-header { min-height:4.5rem; display:flex; align-items:center; justify-content:space-between; } .brand { text-decoration:none; font-weight:800; font-size:1.25rem; } .brand span,.hero>p:not(.eyebrow),.card p { color:var(--muted); } .site-header nav { display:flex; align-items:center; gap:1.1rem; flex-wrap:wrap; } .site-header nav a { display:inline-flex; align-items:center; gap:.3rem; text-decoration:none; font-weight:600; } .site-header nav form { display:contents; } .site-header nav button { min-height:auto; padding:.4rem .3rem; border:0; background:none; color:inherit; font-weight:600; cursor:pointer; } .theme-toggle { width:44px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--border); border-radius:50%; color:var(--text); background:var(--card); }
.site-header nav a .badge { font-size:.7rem; padding:.1rem .5rem; } .page-shell { padding-block:clamp(2rem,8vw,5rem); } .hero { max-width:42rem; } .eyebrow { margin:0 0 var(--space-1); color:var(--accent); font-weight:700; font-size:var(--fs-caption); line-height:var(--lh-caption); } h1 { margin:var(--space-1) 0 var(--space-4); font-size:var(--fs-title); line-height:var(--lh-title); font-weight:800; } .hero h1 { font-size:clamp(2rem,9vw,4.5rem); line-height:1.15; } .button { display:inline-flex; align-items:center; justify-content:center; margin-top:1rem; padding:.65rem 1.15rem; border:0; border-radius:.75rem; text-decoration:none; font-weight:700; cursor:pointer; background:var(--card); color:var(--text); } .button-primary { color:var(--accent-contrast); background:var(--gradient-brand); box-shadow:var(--shadow-glow); } .card { max-width:36rem; margin-top:3rem; padding:var(--space-5); border:1px solid var(--glass-border); border-radius:var(--radius); background:var(--glass-bg); backdrop-filter:blur(20px) saturate(160%); -webkit-backdrop-filter:blur(20px) saturate(160%); box-shadow:var(--shadow-2); } .card h2 { margin-top:0; }
@media (min-width:48rem) { .card,.panel { padding:var(--space-6); } }
@media (prefers-reduced-motion:no-preference) {
  .button,.theme-toggle { transition:transform 220ms var(--ease-spring),box-shadow 220ms var(--ease-out),filter 160ms ease; }
  .button:hover,.theme-toggle:hover { transform:translateY(-2px); filter:brightness(1.05); }
  .button:active,.theme-toggle:active { transform:translateY(0) scale(.96); }
  .button-primary:hover { box-shadow:0 16px 36px -8px rgb(4 124 181 / 55%); }
  :root[data-theme="dark"] .button-primary:hover { box-shadow:0 16px 36px -8px rgb(94 219 170 / 50%); }
  .theme-toggle svg { transition:transform 420ms var(--ease-spring); }
  .theme-toggle:active svg { transform:rotate(180deg); }
  .item-row,.summary-grid>div,.chart-card { transition:transform 220ms var(--ease-out),box-shadow 220ms var(--ease-out),border-color 220ms var(--ease-out); }
  .item-row:hover { transform:translateY(-2px); box-shadow:var(--shadow-1); border-color:var(--border-strong); }
  .summary-grid>div:hover,.chart-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-3); }
  .site-header nav a { transition:color 160ms ease,transform 160ms var(--ease-out); }
  .site-header nav a:hover { color:var(--accent); transform:translateY(-1px); }
  .segmented label { transition:background 240ms var(--ease-out),color 240ms var(--ease-out),box-shadow 240ms var(--ease-out); }
  .site-header nav a .badge { animation:badge-pop 320ms var(--ease-spring); }
}
@keyframes badge-pop { from { transform:scale(0); } to { transform:scale(1); } }
/* اسکلتون لودینگ نمودار تا مقداردهی Chart.js */
.chart-skeleton { display:none; }
.chart-card.is-loading canvas { display:none; }
.chart-card.is-loading .chart-skeleton { display:block; height:17rem; margin-block:var(--space-4); border-radius:.75rem; background:linear-gradient(100deg, var(--border) 25%, color-mix(in srgb, var(--card) 65%, var(--border)) 50%, var(--border) 75%); background-size:200% 100%; }
@media (prefers-reduced-motion:no-preference) { .chart-card.is-loading .chart-skeleton { animation:skeleton-shimmer 1.4s ease-in-out infinite; } }
@keyframes skeleton-shimmer { from { background-position:200% 0; } to { background-position:-200% 0; } }

.dashboard-page { max-width:72rem; } .dashboard-header h1,.panel-head h1 { margin:0; font-size:var(--fs-title); line-height:var(--lh-title); font-weight:800; } .month-filter { display:flex; flex-wrap:wrap; gap:var(--space-3); align-items:end; margin-top:var(--space-4); } .month-filter .button { margin:0; } .summary-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(10rem,1fr)); gap:var(--space-4); margin:var(--space-5) 0; } .summary-grid>div { padding:var(--space-4); border:1px solid var(--glass-border); border-radius:var(--radius); background:var(--glass-bg); backdrop-filter:blur(20px) saturate(160%); -webkit-backdrop-filter:blur(20px) saturate(160%); box-shadow:var(--shadow-2); }
/* chart-card عمداً غیرشیشه‌ای است: چند نمونه هم‌زمان روی یک صفحه است و blur همزمان روی گوشی ضعیف هزینه دارد؛ سایه‌ی برجسته حس کارت را بدون هزینه‌ی GPU حفظ می‌کند. */
.chart-card { padding:var(--space-4); border:1px solid var(--border); border-radius:var(--radius); background:var(--card); box-shadow:var(--shadow-2); } .summary-grid dt { color:var(--muted); font-size:var(--fs-label); } .summary-grid dd { margin:var(--space-1) 0 0; font-size:var(--fs-section); font-weight:800; } .comparison { color:var(--muted); font-size:var(--fs-caption); } .chart-card { max-width:none; margin-top:var(--space-5); } .chart-card canvas { display:block; width:100%; min-height:17rem; max-height:24rem; margin-block:var(--space-4); } .chart-card table { width:100%; border-collapse:collapse; } .chart-card th,.chart-card td { padding:var(--space-3); text-align:right; border-block-start:1px solid var(--border); } .chart-card th { color:var(--muted); }

/* دکمه‌های ثانویه، خطر و شبح */
.button-secondary { color:var(--text); background:transparent; border:1px solid var(--border-strong); } .button-danger { color:var(--danger-contrast); background:var(--danger); } .button-ghost { color:var(--accent); background:transparent; padding-inline:.25rem; margin-top:0; } .button-ghost[aria-pressed="true"] { color:var(--accent-contrast); background:var(--accent); } .button[disabled],.button-disabled { opacity:.6; pointer-events:none; } .button-row { display:flex; flex-wrap:wrap; gap:var(--space-3); margin-top:var(--space-4); } .button-row .button { margin-top:0; }

/* حالت خالی/قفل با آیکون بزرگ برای سلسله‌مراتب بصری روشن */
.locked-icon { display:flex; align-items:center; justify-content:center; width:3.5rem; height:3.5rem; margin-bottom:var(--space-3); border-radius:50%; background:var(--warning-bg); color:var(--warning-text); }
.locked-icon svg { width:1.75rem; height:1.75rem; }

/* صفحات فهرستی پهن‌تر از فرم‌های کوتاه */
.panel { max-width:56rem; margin-top:var(--space-6); padding:var(--space-5); border:1px solid var(--glass-border); border-radius:var(--radius); background:var(--glass-bg); backdrop-filter:blur(20px) saturate(160%); -webkit-backdrop-filter:blur(20px) saturate(160%); box-shadow:var(--shadow-2); } .panel + .panel { margin-top:var(--space-5); } .panel-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-4); margin-bottom:var(--space-4); }

/* ردیف‌های فهرست حساب/تراکنش */
.item-list { display:flex; flex-direction:column; gap:var(--space-3); margin:0; padding:0; list-style:none; }
.item-row { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2) var(--space-3); padding:var(--space-3) var(--space-4); border:1px solid var(--border); border-radius:.85rem; background:var(--surface); }
.item-icon { flex-shrink:0; display:flex; align-items:center; justify-content:center; width:2.75rem; height:2.75rem; border-radius:50%; background:var(--card); color:var(--muted); }
.item-icon svg { width:1.25rem; height:1.25rem; }
.item-icon[data-type="INCOME"] { color:var(--income); } .item-icon[data-type="EXPENSE"] { color:var(--expense); }
.item-body { flex:1 1 10rem; min-width:0; display:flex; flex-direction:column; gap:.15rem; }
.item-title { font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.item-meta { color:var(--muted); font-size:var(--fs-caption); line-height:var(--lh-caption); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.item-amount { flex-shrink:0; font-weight:800; white-space:nowrap; text-align:end; margin-inline-start:auto; }
.item-amount[data-type="INCOME"] { color:var(--income); } .item-amount[data-type="EXPENSE"] { color:var(--expense); }
.item-actions { flex-basis:100%; display:flex; gap:var(--space-2); justify-content:flex-end; border-block-start:1px solid var(--border); padding-top:var(--space-2); }
.item-actions form { display:contents; }

.pagination { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:var(--space-3); margin-top:var(--space-5); padding-top:var(--space-4); border-top:1px solid var(--border); }
.pagination-status { color:var(--muted); font-size:var(--fs-caption); text-align:center; }
.filter-field select,.filter-field input { min-height:2.75rem; }
.filter-field .errorlist { max-width:18rem; }
.filter-error-summary { margin-top:var(--space-3); padding:var(--space-3); border-inline-start:3px solid var(--danger); border-radius:.5rem; color:var(--danger); background:var(--danger-soft); }
@media (max-width:480px) { .pagination { gap:var(--space-2); } .pagination-status { flex:1 0 100%; order:-1; } }

/* صفحات مرکز عملیات: چیدمان متراکم، خوانا و قابل استفاده با صفحه‌کلید */
.operations-page { max-width:76rem; }
.operations-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr)); gap:var(--space-4); margin-block:var(--space-5); }
.operations-card { display:block; min-width:0; padding:var(--space-4); border:1px solid var(--border); border-radius:var(--radius); background:var(--card); color:var(--text); text-decoration:none; box-shadow:var(--shadow-1); }
a.operations-card { transition:border-color 160ms ease,transform 160ms ease,box-shadow 160ms ease; }
a.operations-card:hover { border-color:var(--accent); transform:translateY(-2px); box-shadow:var(--shadow-2); }
.operations-card h2 { margin-block:var(--space-2); }
.operations-card p,.operations-card small { color:var(--muted); }
.operations-icon { display:inline-flex; min-height:2.4rem; align-items:center; padding-inline:.8rem; border-radius:999px; background:var(--warning-bg); color:var(--warning-text); font-weight:800; }
.operations-filter { display:grid; gap:var(--space-2); margin-block:var(--space-4); }
.operations-filter>div { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2); }
.operations-filter input,.operations-filter select { min-height:2.75rem; min-width:min(100%,12rem); flex:1 1 12rem; padding:.5rem .75rem; border:1px solid var(--border-strong); border-radius:.65rem; background:var(--card); color:var(--text); font:inherit; }
.operations-filter .button { margin:0; }
.compact-list { display:grid; gap:var(--space-2); margin:0; padding:0; list-style:none; }
.compact-list li { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.2rem var(--space-2); align-items:center; padding-block:var(--space-2); border-block-end:1px solid var(--border); }
.compact-list small { grid-column:1/-1; overflow-wrap:anywhere; font-size:var(--fs-caption); }
.operations-id { overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
.audit-row { align-items:flex-start; }
.audit-row .item-meta { white-space:normal; overflow:visible; text-overflow:clip; overflow-wrap:anywhere; }
.request-reference { display:inline-block; padding:.5rem .75rem; border:1px solid var(--border); border-radius:.6rem; background:var(--surface); font-family:ui-monospace,monospace; overflow-wrap:anywhere; }

/* برچسب وضعیت */
.badge { display:inline-flex; align-items:center; gap:.3rem; padding:.2rem .65rem; border-radius:999px; font-size:var(--fs-caption); font-weight:700; background:var(--border); } .badge-success { color:var(--income); background:var(--income-soft); } .badge-danger { color:var(--danger); background:var(--danger-soft); } .badge-warning { color:var(--warning-text); background:var(--warning-bg); } .badge-neutral { color:var(--muted); }

/* پیام‌های وضعیت/هشدار صفحه */
.notice { margin-top:var(--space-4); padding:var(--space-3) var(--space-4); border-radius:.75rem; background:var(--warning-bg); color:var(--warning-text); } .empty-state { padding:var(--space-6) var(--space-4); text-align:center; color:var(--muted); }
.trial-banner { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-3); } .trial-banner .button { margin:0; }

/* اطلاعات کارت پرداخت: ردیف کپی و پیش‌نمایش رسید */
.payment-card-info { background:var(--glass-bg); backdrop-filter:blur(20px) saturate(160%); -webkit-backdrop-filter:blur(20px) saturate(160%); border:1px solid var(--glass-border); box-shadow:var(--shadow-glow); color:var(--text); }
.payment-card-info .copy-row { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.6rem; margin-top:.6rem; } .payment-card-info .copy-row .button { margin:0; flex-shrink:0; }
.receipt-preview { display:block; max-width:12rem; max-height:12rem; margin-top:.6rem; border:1px solid var(--border); border-radius:.65rem; object-fit:contain; }
.receipt-preview[hidden] { display:none; }
.receipt-preview-lg { max-width:22rem; max-height:22rem; }

/* onboarding اعلان: بنر جمع‌وجور در انتهای صفحات روزانه (وضعیت‌محور، قابل رد کردن)
   و کارت کامل مدیریت آن در مرکز اعلان که همیشه نمایش داده می‌شود */
.push-onboarding { margin-top:var(--space-5); padding:var(--space-4); border:1px solid var(--glass-border); border-radius:var(--radius); background:var(--glass-bg); }
.push-onboarding h2,.push-management h2 { margin-top:0; font-size:1rem; }
.push-onboarding-actions { display:flex; flex-wrap:wrap; gap:var(--space-3); margin-top:var(--space-3); }
.push-onboarding-actions .button,.push-management .button { min-height:44px; min-width:44px; }
.push-onboarding-noscript { margin-top:var(--space-5); padding:var(--space-3) var(--space-4); border-radius:.75rem; background:var(--surface); color:var(--muted); }
.push-management { margin-top:var(--space-5); }
.push-management [data-push-action] { min-height:44px; min-width:44px; margin-top:var(--space-3); }
.push-management [data-push-reset] { min-height:44px; margin-top:var(--space-3); }

/* رشته پیام تیکت پشتیبانی */
.message-thread { display:flex; flex-direction:column; gap:var(--space-3); margin:var(--space-4) 0; padding:0; list-style:none; }
.message { max-width:34rem; padding:var(--space-3) var(--space-4); border-radius:.85rem; background:var(--surface); border:1px solid var(--border); white-space:pre-wrap; }
.message-staff { align-self:flex-end; background:var(--income-soft); border-color:transparent; }
.message-meta { display:block; margin-bottom:var(--space-1); color:var(--muted); font-size:var(--fs-caption); font-weight:700; }

/* فرم‌ها */
.field { margin:0 0 var(--space-4); } .field-compact { margin:0; } .field label { display:block; margin-bottom:var(--space-2); font-size:var(--fs-label); line-height:var(--lh-label); font-weight:600; } .field .help-text { display:block; margin-top:var(--space-1); color:var(--muted); font-size:var(--fs-caption); } .field ul.errorlist { margin:var(--space-1) 0 0; padding-inline-start:1.1rem; color:var(--danger); font-size:var(--fs-caption); }
input,select,textarea { width:100%; min-height:44px; padding:var(--space-2) var(--space-3); border:1px solid var(--border); border-radius:.65rem; background:var(--card); color:var(--text); font:inherit; transition:border-color 180ms ease,box-shadow 180ms ease; } textarea { min-height:5.5rem; } input:focus-visible,select:focus-visible,textarea:focus-visible { outline:3px solid var(--focus); outline-offset:2px; border-color:var(--focus); box-shadow:0 0 0 6px color-mix(in srgb, var(--focus) 18%, transparent); } input[type="checkbox"],input[type="radio"] { width:1.35rem; height:1.35rem; min-height:0; flex-shrink:0; accent-color:var(--accent); }
.field:has(input[type="checkbox"]) { display:flex; align-items:center; gap:.6rem; } .field:has(input[type="checkbox"]) label { margin:0; order:2; } .field:has(input[type="checkbox"]) input { order:1; }
.amount-field input { font-size:var(--fs-display); line-height:var(--lh-display); font-weight:800; text-align:center; }

/* کنترل قطعه‌ای برای انتخاب نوع تراکنش */
.segmented { display:flex; gap:var(--space-2); padding:var(--space-1); border:1px solid var(--border); border-radius:.85rem; background:var(--surface); margin-bottom:var(--space-4); } .segmented input { position:absolute; opacity:0; width:1px; height:1px; } .segmented label { flex:1; min-height:44px; display:flex; align-items:center; justify-content:center; margin:0; border-radius:.6rem; font-weight:700; cursor:pointer; } .segmented input:checked + label { background:var(--gradient-brand); color:var(--accent-contrast); box-shadow:var(--shadow-glow); } .segmented input:focus-visible + label { outline:3px solid var(--focus); outline-offset:2px; }

/* جدول‌های داده عمومی (اشتراک، مدیریت) */
.table-scroll { overflow-x:auto; } .data-table { width:100%; border-collapse:collapse; margin-top:var(--space-2); } .data-table th,.data-table td { padding:var(--space-3); text-align:right; border-block-start:1px solid var(--border); } .data-table th { color:var(--muted); font-size:var(--fs-label); font-weight:700; }
.deletion-approval-page { max-width:48rem; }
.deletion-approval-list { list-style:none; padding:0; display:grid; gap:var(--space-4); }
.deletion-approval-item { min-width:0; padding:var(--space-4); border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); }
.deletion-approval-item h2 { font-size:1.15rem; }
.deletion-approval-item dl { display:grid; gap:var(--space-2); margin:var(--space-4) 0; }
.deletion-approval-item dl div { display:grid; grid-template-columns:minmax(7rem,1fr) minmax(0,2fr); gap:var(--space-2); }
.deletion-approval-item dt { color:var(--muted); }
.deletion-approval-item dd { margin:0; min-width:0; overflow-wrap:anywhere; }
.deletion-approval-confirm { display:flex; align-items:flex-start; gap:var(--space-2); line-height:1.8; }
.deletion-approval-confirm input { width:1.25rem; height:1.25rem; flex:none; margin-top:.25rem; }
@media (max-width:35rem) { .deletion-approval-item dl div { display:block; } .deletion-approval-item dd { margin-top:.25rem; } }
body:has(.deletion-approval-page) .bottom-nav,
body:has(.deletion-approval-page) #push-onboarding { display:none; }

/* پیام‌های toast مبتنی بر Django messages */
.toast-region { position:fixed; inset-inline:0; bottom:1rem; z-index:5; display:flex; flex-direction:column; align-items:center; gap:.5rem; padding-inline:1rem; pointer-events:none; } .toast { pointer-events:auto; display:flex; align-items:center; gap:.75rem; max-width:32rem; width:100%; padding:.75rem 1rem; border-radius:.75rem; background:var(--text); color:var(--surface); box-shadow:0 .5rem 1.5rem rgba(0,0,0,.2); border-inline-start:4px solid transparent; } .toast a { text-decoration:underline; font-weight:700; white-space:nowrap; } .toast button[data-toast-dismiss] { margin-inline-start:auto; background:none; border:0; color:inherit; min-height:auto; opacity:.7; } .toast-error { border-inline-start-color:var(--danger); } .toast-success { border-inline-start-color:var(--income); } .toast-warning { border-inline-start-color:var(--warning-text); }
@media (prefers-reduced-motion:no-preference) { .toast { animation:toast-in 320ms var(--ease-spring); } .toast.toast-leaving { animation:toast-out 200ms var(--ease-out) forwards; } }
@keyframes toast-in { from { opacity:0; transform:translateY(.75rem) scale(.95); } to { opacity:1; transform:none; } }
@keyframes toast-out { from { opacity:1; transform:none; } to { opacity:0; transform:translateY(.5rem) scale(.95); } }

@media (max-width:28rem) { .item-meta { display:block; } }

/* ترنزیشن نرم بین صفحات با View Transitions API بومی مرورگر؛ در مرورگرهای بدون پشتیبانی، این بلوک نادیده گرفته می‌شود و ناوبری معمولی بدون خطا انجام می‌شود. */
@media (prefers-reduced-motion:no-preference) {
  @view-transition { navigation:auto; }
  .site-header { view-transition-name:site-header; }
  h1 { view-transition-name:page-title; }
  ::view-transition-old(root) { animation:220ms var(--ease-out) both view-transition-fade-out; }
  ::view-transition-new(root) { animation:320ms var(--ease-out) both view-transition-fade-in; }
  @keyframes view-transition-fade-out { to { opacity:0; transform:translateY(-.5rem) scale(.99); } }
  @keyframes view-transition-fade-in { from { opacity:0; transform:translateY(.5rem) scale(.99); } }
}

/* پیمایش پایین صفحه برای موبایل؛ در دسکتاپ کاملاً پنهان است */
.bottom-nav { display:none; }
@media (max-width:767px) {
  /* نوار بالا روی موبایل جمع‌وجورتر تا در یک خط جا شود (bottom-nav مکمل آن است) */
  .site-header { min-height:3.75rem; }
  .site-header nav { gap:.5rem; }
  .site-header nav a { font-size:.85rem; }
  .site-header nav button { padding:.4rem .2rem; }
  .bottom-nav { display:block; position:fixed; bottom:0; inset-inline:0; z-index:40; background:var(--glass-bg); backdrop-filter:blur(20px) saturate(160%); -webkit-backdrop-filter:blur(20px) saturate(160%); border-top:1px solid var(--glass-border); padding-bottom:env(safe-area-inset-bottom); }
  .bottom-nav ul { display:flex; align-items:center; justify-content:space-between; margin:0; padding:.35rem var(--space-2); list-style:none; }
  .bottom-nav li { flex:1; display:flex; justify-content:center; }
  .bottom-nav a { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.2rem; min-height:44px; min-width:44px; padding:.25rem .3rem; color:var(--muted); text-decoration:none; font-size:.7rem; font-weight:600; }
  .bottom-nav a svg { width:1.35rem; height:1.35rem; }
  .bottom-nav a[aria-current="page"] { color:var(--accent); }
  .bottom-nav-primary a { transform:translateY(-.65rem); color:var(--text); }
  .bottom-nav-primary .icon-wrap { display:flex; align-items:center; justify-content:center; width:2.9rem; height:2.9rem; border-radius:50%; background:var(--gradient-brand); color:var(--accent-contrast); box-shadow:var(--shadow-glow); }
  .bottom-nav-primary a svg { width:1.5rem; height:1.5rem; }
  body:has(.bottom-nav) .page-shell { padding-bottom:calc(5.5rem + env(safe-area-inset-bottom)); }
  /* toast-region (z-index:5) زیر bottom-nav (z-index:40) کاملاً پنهان و
     غیرقابل‌کلیک می‌شد؛ در موبایل باید بالای نوار پایین و با z-index بالاتر
     نمایش داده شود تا پیام موفقیت/خطا و لینک بازگردانی همیشه در دسترس باشند. */
  body:has(.bottom-nav) .toast-region { bottom:calc(6.25rem + env(safe-area-inset-bottom)); z-index:45; }
  /* این مقصدها روی موبایل در bottom-nav هم هستند؛ تکرارشان در نوار بالا نوبار را شلوغ می‌کند. فقط وقتی bottom-nav واقعاً در صفحه هست پنهان می‌شوند (کارمندان bottom-nav ندارند، پس نسخه‌ی بالا برایشان باقی می‌ماند) */
  body:has(.bottom-nav) .site-header nav a.nav-mobile-duplicate { display:none; }
}
.operator-requeue-form { display:flex; align-items:end; gap:var(--space-2); flex-wrap:wrap; }
.operator-requeue-form input[type="text"] { max-width:14rem; }

/* وضعیت scheduler علاوه بر رنگ با متن و نماد منتقل می‌شود. */
.scheduler-status-table { min-width:52rem; }
.status-pill { display:inline-flex; align-items:center; gap:.35rem; padding:.2rem .65rem; border-radius:999px; font-size:var(--fs-caption); font-weight:700; white-space:nowrap; background:var(--border); color:var(--text); }
.status-healthy { background:var(--income-soft); color:var(--income); }
.status-running { background:color-mix(in srgb, var(--accent) 14%, var(--card)); color:var(--accent); }
.status-overdue,.status-failed { background:var(--danger-soft); color:var(--danger); }
.status-uninitialized { background:var(--warning-bg); color:var(--warning-text); }
.status-disabled { color:var(--muted); }