/* ==========================================================================
   پاپ‌آپ «تنظیمات» — ۲۰۲۶-۰۹-۲۷ (بازطراحی پس از بازخورد کاربر).

   الگو: پنل تنظیمات اپ‌های حرفه‌ای (منوی کناری + ردیف‌های تنظیم در کارت).
   همه اعداد از توکن‌های `tokens.css`اند: فاصله `--sp-*`، شعاع `--r-*`،
   سایه `--shadow-*`. رنگ فقط از توکن؛ `#hex` خام در تم شب می‌شکند.
   تنها استثنا پیش‌نمایش پوسته‌هاست (پایین‌تر، با توضیح).

   قاعده پدینگ کارت (CLAUDE.md): ردیف‌ها `sp-4 sp-5`.
   ========================================================================== */

/* ---- قاب، پرده، پنل ---- */
.set-modal {
    position: fixed; inset: 0; z-index: 1080;
    display: grid; place-items: center; padding: var(--sp-4);
}
.set-modal[hidden] { display: none; }

.set-backdrop {
    position: absolute; inset: 0;
    background: rgba(2, 6, 23, .5);
    backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
    opacity: 0; transition: opacity 260ms ease;
}
.set-modal.is-open .set-backdrop { opacity: 1; }

.set-panel {
    position: relative;
    width: min(880px, 100%); height: min(640px, calc(100dvh - 32px));
    display: grid; grid-template-columns: 236px minmax(0, 1fr);
    overflow: hidden;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-xl); box-shadow: var(--shadow-pop);
    transform: scale(.96); opacity: 0; outline: none;
    transition: transform 200ms cubic-bezier(.4, 0, 1, 1), opacity 140ms ease;
}
.set-modal.is-open .set-panel {
    transform: scale(1); opacity: 1;
    transition: transform 380ms cubic-bezier(.22, 1, .36, 1), opacity 200ms ease;
}
@media (prefers-reduced-motion: reduce) {
    .set-panel, .set-modal.is-open .set-panel, .set-backdrop { transition: none; transform: none; }
}

/* ---- منوی کناری ---- */
.set-nav {
    display: flex; flex-direction: column; gap: var(--sp-5);
    padding: var(--sp-5) var(--sp-3);
    background: var(--bg); border-inline-end: 1px solid var(--border);
    min-height: 0;
}
.set-nav-head { padding: 0 var(--sp-2); }
.set-title { margin: 0; font-size: 1.05rem; font-weight: 800; color: var(--ink); }
.set-nav-sub {
    margin: 4px 0 0; font-size: .72rem; font-weight: 600; color: var(--text-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.set-nav-list { display: flex; flex-direction: column; gap: var(--sp-1); }
.set-nav-item {
    display: flex; align-items: center; gap: 10px;
    height: 40px; padding: 0 var(--sp-3); border-radius: var(--r-md);
    background: transparent; border: 1px solid transparent;
    color: var(--text-muted); font-family: inherit; font-size: .82rem; font-weight: 700;
    cursor: pointer; text-align: start; transition: var(--t-fast);
}
.set-nav-item i { font-size: 1rem; line-height: 0; }
.set-nav-item:hover { color: var(--ink); background: var(--surface-2); }
.set-nav-item.is-active {
    background: var(--surface); border-color: var(--border);
    color: var(--ink); box-shadow: var(--shadow-sm);
}
.set-nav-item.is-active i { color: var(--primary-2); }
.set-nav-item:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--primary-ring); }

/* ---- ستون محتوا ---- */
/* ⚠️ `.scroll-area` app-shell اینجا عمدا نه: آن قرارداد فقط از ۹۹۲px به بالا
   اسکرول می‌کند و زیر آن عمدا `overflow: visible` است (صفحه خودش اسکرول
   می‌خورد). این پاپ‌آپ روی موبایل تمام‌صفحه است و باید در **هر** عرضی داخل
   خودش اسکرول شود. پس ستون محتوا گرید تک‌ردیفه است، نه فلکس‌پر. */
.set-main {
    position: relative; display: grid; grid-template-rows: minmax(0, 1fr); min-height: 0;
    background: var(--surface-2);
}
.set-close {
    position: absolute; top: var(--sp-3); inset-inline-end: var(--sp-3); z-index: 2;
    display: grid; place-items: center; width: 34px; height: 34px;
    border-radius: 50%; border: 1px solid transparent; background: transparent;
    color: var(--text-muted); cursor: pointer; line-height: 0; transition: var(--t-fast);
}
.set-close:hover { background: var(--surface-2); border-color: var(--border); color: var(--ink); }
.set-close:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--primary-ring); }

.set-scroll { min-height: 0; overflow-y: auto; padding: var(--sp-5) var(--sp-6) var(--sp-6); }
.set-section[hidden] { display: none; }

.set-sec-head { margin-bottom: var(--sp-5); padding-inline-end: 40px; }
.set-sec-title { margin: 0; font-size: 1.15rem; font-weight: 800; color: var(--ink); }
.set-sec-desc { margin: 6px 0 0; font-size: .78rem; line-height: 1.8; color: var(--text-muted); }

.set-group {
    margin: var(--sp-5) 0 var(--sp-2); padding: 0 var(--sp-1);
    font-size: .72rem; font-weight: 800; color: var(--text-muted);
}
.set-sec-head + .set-group { margin-top: 0; }

/* سه سطح پالت خود اپ، نه رنگ تازه: منو `--bg`، محتوا `--surface-2`، کارت
   `--surface`. بدون این پله، کارت روی زمینه هم‌رنگ خودش گم می‌شد. */
.set-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm);
}

/* ---- ردیف تنظیم: آیکون · متن · کنترل ---- */
.set-row {
    display: grid; grid-template-columns: 36px minmax(0, 1fr) auto;
    align-items: center; gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-5);
}
.set-row + .set-row, .set-pw + .set-row { border-top: 1px solid var(--border); }
.set-ico {
    display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--r-md);
    background: var(--primary-soft); color: var(--primary-ink); font-size: 1rem; line-height: 0;
}
.set-ico-ok   { background: var(--st-done-bg);  color: var(--st-done-tx); }
.set-ico-warn { background: var(--urg-high-bg); color: var(--urg-high-tx); }
.set-row-title { font-size: .84rem; font-weight: 700; color: var(--ink); }
.set-row-desc { margin-top: 2px; font-size: .74rem; line-height: 1.7; color: var(--text-muted); }
.set-row-desc[data-state="denied"], .set-row-desc[data-state="blocked"] { color: var(--st-unread-tx); }

/* ردیف فرعی (بازه ساعات سکوت): بدون آیکون، هم‌تراز با متن ردیف بالا. */
.set-row-sub {
    display: flex; flex-wrap: wrap; gap: var(--sp-4);
    padding-inline-start: calc(var(--sp-5) + 36px + var(--sp-3));
    transition: opacity var(--t-fast);
}
.set-row-sub[data-off] { opacity: .45; pointer-events: none; }
.set-inline { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: .76rem; font-weight: 700; color: var(--text); }
.set-select {
    height: 34px; padding: 0 var(--sp-3); border-radius: var(--r-md);
    border: 1px solid var(--border); background: var(--surface); color: var(--ink);
    font-family: inherit; font-size: .78rem; font-weight: 700;
}
.set-select:focus { outline: none; border-color: var(--primary-2); box-shadow: 0 0 0 3px var(--primary-ring); }

/* ---- دکمه‌ها ---- */
.set-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 34px; padding: 0 var(--sp-4); border-radius: var(--r-md);
    border: 1px solid var(--border); background: var(--surface); color: var(--ink);
    font-family: inherit; font-size: .78rem; font-weight: 700; white-space: nowrap;
    cursor: pointer; text-decoration: none; transition: var(--t-fast);
}
.set-btn:hover { background: var(--surface-2); color: var(--ink); }
.set-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--primary-ring); }
.set-btn[disabled] { opacity: .6; cursor: default; }
.set-btn i { line-height: 0; }
.set-btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.set-btn-primary:hover { background: var(--primary-2); border-color: var(--primary-2); color: #fff; }
.set-btn-ghost { border-color: transparent; background: transparent; color: var(--text-muted); }
.set-btn-danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, transparent); }
.set-btn-danger:hover { background: var(--st-unread-bg); color: var(--danger); }
.set-btn-danger.is-armed { background: var(--danger); border-color: var(--danger); color: #fff; }

/* ---- سوییچ ---- */
.set-switch {
    position: relative; flex-shrink: 0; width: 40px; height: 22px; padding: 0;
    border-radius: var(--r-pill); border: 0;
    background: var(--border-strong); cursor: pointer; transition: var(--t-fast);
}
/* دستگیره همیشه سفید با سایه — روی ریل خاموش و روشن هر دو دیده شود. */
.set-switch::after {
    content: ''; position: absolute; top: 3px; inset-inline-start: 3px;
    width: 16px; height: 16px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 3px rgba(15, 23, 42, .3); transition: var(--t-fast);
}
.set-switch[aria-checked="true"] { background: var(--primary-2); }
/* RTL: خانه سمت راست است، پس روشن یعنی حرکت به چپ (همان منطق `.hdr-sw`). */
.set-switch[aria-checked="true"]::after { transform: translateX(-18px); }
.set-switch:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--primary-ring); }

/* ---- فرم رمز (باز شونده زیر ردیف خودش) ---- */
.set-pw {
    display: grid; gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-5) var(--sp-5);
    padding-inline-start: calc(var(--sp-5) + 36px + var(--sp-3));
    background: color-mix(in srgb, var(--surface-2) 55%, var(--surface)); border-top: 1px solid var(--border);
}
.set-pw[hidden] { display: none; }
.set-field label { display: block; margin-bottom: 6px; font-size: .74rem; font-weight: 700; color: var(--ink); }
.set-input { position: relative; }
.set-input input {
    width: 100%; height: 40px; padding: 0 var(--sp-3); padding-inline-end: 44px;
    border-radius: var(--r-md); border: 1px solid var(--border);
    background: var(--surface); color: var(--ink);
    font-family: inherit; font-size: .84rem; font-weight: 600; transition: var(--t-fast);
}
.set-input input[dir="ltr"] { text-align: right; }
.set-input input:focus { outline: none; border-color: var(--primary-2); box-shadow: 0 0 0 3px var(--primary-ring); }
.set-input input[aria-invalid="true"] { border-color: var(--danger); }
.set-eye {
    position: absolute; top: 4px; inset-inline-end: 4px;
    display: grid; place-items: center; width: 32px; height: 32px;
    border: 0; border-radius: var(--r-sm); background: transparent;
    color: var(--text-faint); cursor: pointer; line-height: 0;
}
.set-eye:hover { color: var(--ink); background: var(--surface-2); }

.set-meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: var(--sp-2); }
.set-meter span { height: 4px; border-radius: var(--r-pill); background: var(--border); transition: background var(--t-fast); }
.set-meter[data-meter="1"] span:nth-child(-n+1) { background: var(--danger); }
.set-meter[data-meter="2"] span:nth-child(-n+2) { background: var(--urg-high-tx); }
.set-meter[data-meter="3"] span:nth-child(-n+3) { background: var(--st-done-tx); }
.set-meter[data-meter="4"] span { background: var(--st-done-tx); }

.set-rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.set-rules li {
    display: flex; align-items: center; gap: 8px;
    font-size: .72rem; font-weight: 600; color: var(--text-muted);
}
.set-rules li::before {
    content: ''; width: 14px; height: 14px; flex-shrink: 0; border-radius: 50%;
    border: 1.5px solid var(--border-strong); box-sizing: border-box;
}
.set-rules li.is-ok { color: var(--st-done-tx); }
.set-rules li.is-ok::before {
    border-color: var(--st-done-tx); background: var(--st-done-tx);
    box-shadow: inset 0 0 0 3px var(--surface-2);
}

.set-err { margin: 6px 0 0; font-size: .72rem; font-weight: 700; color: var(--st-unread-tx); }
.set-err[hidden], .set-msg[hidden] { display: none; }
.set-note { margin: 0; font-size: .72rem; line-height: 1.7; color: var(--text-muted); }
.set-msg {
    margin: 0; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md);
    font-size: .74rem; font-weight: 700;
    background: var(--st-unread-bg); color: var(--st-unread-tx);
}
.set-msg.is-ok { background: var(--st-done-bg); color: var(--st-done-tx); }
.set-actions { display: flex; justify-content: flex-end; gap: var(--sp-2); }

/* ---- حالت قفل بخش امنیت ---- */
.set-locked {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: var(--sp-6) var(--sp-5);
    border: 1px dashed var(--border-strong); border-radius: var(--r-lg);
}
.set-locked-ico {
    display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%;
    background: var(--primary-soft); color: var(--primary-ink); font-size: 1.6rem; line-height: 0;
}
.set-locked-title { margin: var(--sp-4) 0 0; font-size: .95rem; font-weight: 800; color: var(--ink); }
.set-locked-desc { margin: var(--sp-2) 0 var(--sp-5); max-width: 380px; font-size: .78rem; line-height: 1.8; color: var(--text-muted); }

/* ---- پوسته‌ها ---- */
.set-themes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
.set-theme {
    display: flex; flex-direction: column; gap: var(--sp-2);
    padding: var(--sp-2); border-radius: var(--r-lg);
    border: 1px solid var(--border); background: var(--surface);
    cursor: pointer; transition: var(--t-fast);
}
.set-theme:hover { border-color: var(--border-strong); }
.set-theme input { position: absolute; opacity: 0; pointer-events: none; }
.set-theme:has(input:checked) { border-color: var(--primary-2); box-shadow: 0 0 0 3px var(--primary-ring); }
.set-theme:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--primary-ring); }
.set-theme-label { font-size: .76rem; font-weight: 700; color: var(--ink); text-align: center; }

/* ⚠️ پیش‌نمایش پوسته تنها جای رنگ خام این فایل است، و عمدا: هر کارت باید
   همان پوسته‌ای را نشان دهد که اسمش است، **مستقل از تم فعلی**. اگر از
   توکن می‌آمد، کارت «روشن» در تم شب تیره دیده می‌شد. */
.set-theme-prev {
    --tp-bg: #f3f6fb; --tp-side: #e3e9f3; --tp-card: #ffffff; --tp-line: #d6deea; --tp-acc: #3b82f6;
    position: relative; display: block; height: 76px; border-radius: var(--r-md); overflow: hidden;
    background: var(--tp-bg); border: 1px solid var(--tp-line);
}
.set-theme-prev-dark {
    --tp-bg: #0f172a; --tp-side: #172036; --tp-card: #1e293b; --tp-line: #293548; --tp-acc: #60a5fa;
}
.set-theme-prev-auto { background: linear-gradient(90deg, #0f172a 50%, #f3f6fb 50%); }
.tp-side { position: absolute; inset-block: 0; right: 0; width: 22%; background: var(--tp-side); }
.tp-bar  { position: absolute; top: 10px; right: 30%; left: 10px; height: 8px; border-radius: 4px; background: var(--tp-acc); opacity: .85; }
.tp-card { position: absolute; top: 26px; right: 30%; width: 28%; bottom: 10px; border-radius: 5px; background: var(--tp-card); border: 1px solid var(--tp-line); }
.tp-card-2 { right: auto; left: 10px; width: 30%; }
.set-theme-prev-auto .tp-side, .set-theme-prev-auto .tp-card { background: rgba(148, 163, 184, .35); border-color: transparent; }

/* ---- انتخاب اندازه متن ---- */
.set-seg {
    display: inline-flex; gap: 2px; padding: 3px;
    border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--border);
}
.set-seg label { position: relative; margin: 0; cursor: pointer; }
.set-seg input { position: absolute; opacity: 0; pointer-events: none; }
.set-seg span {
    display: grid; place-items: center; width: 36px; height: 28px; border-radius: var(--r-sm);
    font-weight: 800; color: var(--text-muted); line-height: 1; transition: var(--t-fast);
}
/* اندازه‌ها px‌اند نه rem: خودِ این نمونه‌ها نباید با تنظیمی که نمایش می‌دهند عوض شوند. */
.set-seg .ts-sm { font-size: 12px; }
.set-seg .ts-md { font-size: 15px; }
.set-seg .ts-lg { font-size: 18px; }
.set-seg input:checked + span { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.set-seg input:focus-visible + span { box-shadow: 0 0 0 3px var(--primary-ring); }

.set-foot-note {
    display: flex; align-items: center; gap: 6px; margin: var(--sp-3) var(--sp-1) 0;
    font-size: .7rem; color: var(--text-faint);
}
.set-foot-note i { line-height: 0; }

/* ---- موبایل: تمام‌صفحه، منو به زبانه‌های افقی ---- */
@media (max-width: 767.98px) {
    .set-modal { padding: 0; }
    .set-panel {
        width: 100%; height: 100dvh; border-radius: 0; border: 0;
        grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr);
    }
    .set-nav {
        gap: var(--sp-3); padding: var(--sp-4) var(--sp-4) 0;
        border-inline-end: 0; border-bottom: 1px solid var(--border);
    }
    .set-nav-head { padding-inline-end: 44px; }
    .set-nav-list { flex-direction: row; gap: var(--sp-1); overflow-x: auto; }
    .set-nav-item {
        flex: 0 0 auto; height: 38px; border-radius: var(--r-md) var(--r-md) 0 0;
        border-bottom: 0;
    }
    .set-nav-item.is-active { box-shadow: none; }
    .set-main { position: static; }
    .set-close { top: var(--sp-3); }
    .set-scroll { padding: var(--sp-4) var(--sp-4) var(--sp-6); }
    .set-sec-head { padding-inline-end: 0; }
    .set-row { grid-template-columns: 32px minmax(0, 1fr); padding: var(--sp-3) var(--sp-4); }
    .set-row > :last-child:not(.set-row-text) { grid-column: 2; justify-self: start; }
    .set-row > .set-switch:last-child { grid-column: 3; grid-row: 1; justify-self: end; }
    .set-row:has(> .set-switch) { grid-template-columns: 32px minmax(0, 1fr) auto; }
    .set-ico { width: 32px; height: 32px; }
    .set-pw, .set-row-sub { padding-inline-start: var(--sp-4); }
    .set-themes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
    .set-theme-prev { height: 60px; }
}