/* پنل کاربر اپ (تب «پروفایل» index.html، برگه‌ی #upSheet و برگه‌ی رزرو #serviceModal): اجزای سیستم شیشه‌ای پنل‌ها
   زیر کلاس .up. توکن‌های رنگ (‎--base، ‎--ink-*، ‎--glass…) از assets/css/app-theme.css می‌آیند.
   تم تیره با کلاس dark روی <html> (دکمه‌ی ماه و خورشید سربرگ اپ). */
.up { color: var(--ink-1); }
.up[hidden], .up [hidden] { display: none !important; }
.up :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.up .num { font-variant-numeric: tabular-nums; }

/* گرادیان پشت تب پروفایل (نه کل صفحه)؛ رنگ‌ها با ساعت تهران عوض می‌شوند (user-panel.js → upAurora) */
.up-root { position: relative; isolation: isolate; }
.up-aurora {
  position: absolute; inset: -.75rem -1rem auto; height: 36rem; z-index: -1; pointer-events: none; transition: background 2s ease;
  background:
    radial-gradient(45% 50% at 90% 6%, var(--a1), transparent 70%),
    radial-gradient(48% 45% at 6% 30%, var(--a2), transparent 70%),
    radial-gradient(60% 50% at 60% 92%, var(--a3), transparent 72%);
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
  mask-image: linear-gradient(to bottom, #000 55%, transparent);
}
.dark .up-aurora { opacity: .45; }

/* ================= سطح‌ها ================= */
.up .glass { background: var(--glass); -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%); border: 1px solid var(--glass-edge); box-shadow: var(--shadow); }
.up .glass-strong { background: var(--solid-strong); border: 1px solid var(--glass-edge); box-shadow: var(--shadow); }
.up .solid { background: var(--solid); border: 1px solid var(--glass-edge); box-shadow: var(--shadow-sm); }
.up .soft { background: var(--solid-2); border: 1px solid var(--line); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .up .glass { background: var(--solid); } }
@media (prefers-reduced-transparency: reduce) {
  .up .glass, .up .solid { background: var(--base); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .up-aurora { display: none; }
}
.up .t1 { color: var(--ink-1); } .up .t2 { color: var(--ink-2); } .up .t3 { color: var(--ink-3); } .up .tb { color: var(--brand-ink); }
.up .hair { border-color: var(--line); }
.up .rows > * + * { border-top: 1px solid var(--line); }
.up .scrim { background: var(--scrim); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }

/* ================= کنترل‌ها ================= */
.up .field { background-color: var(--field); border: 1px solid var(--field-edge); color: var(--ink-1); border-radius: .875rem; }
.up .field:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); outline: none; }
.up .field::placeholder { color: var(--ink-3); }
.up select.field option { color: #0c231f; background: #fff; }
.up .btn { align-items: center; justify-content: center; gap: .4rem; font-weight: 700; white-space: nowrap; transition: background-color .15s, filter .15s, transform .15s; }
.up .btn:active { transform: translateY(1px); }
.up .btn:disabled { opacity: .5; pointer-events: none; }
.up .btn-primary { color: #fff; background: linear-gradient(135deg, #10b981 0%, #047857 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 10px 22px -12px var(--brand-glow); }
.up .btn-primary:hover { filter: brightness(1.07); }
.up .btn-ghost { color: var(--ink-1); background: var(--solid-2); border: 1px solid var(--line-2); }
.up .btn-ghost:hover { background: var(--brand-soft); }
.up .btn-danger { color: #be123c; background: rgba(244, 63, 94, .1); }
.dark .up .btn-danger { color: #fda4af; }
.up .btn-danger:hover { background: rgba(244, 63, 94, .18); }
.up .btn-danger[data-armed='true'] { color: #fff; background: #e11d48; }
.up .icon-btn { align-items: center; justify-content: center; color: var(--ink-2); flex-shrink: 0; transition: background-color .15s; position: relative; }
.up .icon-btn:hover { background: var(--brand-soft); color: var(--ink-1); }
.up .chip { height: 2.25rem; padding: 0 .85rem; font-size: .8125rem; border-radius: 999px; border: 1px solid var(--line-2); background: var(--solid-2); color: var(--ink-2); font-weight: 700; align-items: center; gap: .4rem; white-space: nowrap; flex-shrink: 0; }
.up .chip:hover { color: var(--ink-1); }
.up .chip[aria-pressed='true'] { background: var(--ink-1); color: var(--base); border-color: transparent; }
.up .seg { gap: .2rem; padding: .25rem; border-radius: 1rem; background: var(--solid-2); border: 1px solid var(--line); }
.up .seg > button { height: 2.2rem; padding: 0 .85rem; border-radius: .75rem; font-weight: 700; font-size: .8125rem; color: var(--ink-2); white-space: nowrap; flex: 1; }
.up .seg > button[aria-pressed='true'] { background: var(--glass-hi); color: var(--ink-1); box-shadow: var(--shadow-sm); }
.up .tab { height: 2.4rem; padding: 0 .85rem; border-radius: .8rem; font-weight: 700; font-size: .8125rem; color: var(--ink-3); align-items: center; gap: .35rem; white-space: nowrap; flex-shrink: 0; }
.up .tab[aria-selected='true'] { color: var(--ink-1); background: var(--glass-hi); box-shadow: var(--shadow-sm); }
.up .lbl { font-size: .75rem; font-weight: 700; color: var(--ink-2); }
:where(.up .btn, .up .icon-btn, .up .chip, .up .seg, .up .tab, .up .pill) { display: inline-flex; }
:where(.up .lbl) { display: block; margin-bottom: .35rem; }
:where(.up .icon-btn) { width: 2.5rem; height: 2.5rem; border-radius: .9rem; }
:where(.up .btn) { border-radius: .9rem; }
:where(.up .pill) { height: 1.5rem; padding: 0 .6rem; font-size: .6875rem; }
.up .badge { position: absolute; top: .2rem; left: .2rem; min-width: 1.05rem; height: 1.05rem; padding: 0 .25rem; border-radius: 999px; background: #e11d48; color: #fff; font-size: .625rem; font-weight: 800; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px var(--base); }

/* نوار بخش‌ها (چسبان زیر سربرگ اپ؛ ارتفاع سربرگ را user-panel.js در --up-top می‌گذارد) */
.up .up-nav { position: sticky; top: var(--up-top, 4.25rem); z-index: 20; }
.up .up-nav button { flex: 1; min-width: 3.6rem; height: 3.1rem; border-radius: .95rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem; font-size: .6875rem; font-weight: 700; color: var(--ink-3); }
.up .up-nav button[aria-selected='true'] { color: var(--brand-ink); background: var(--glass-hi); box-shadow: var(--shadow-sm); }

/* ================= وضعیت‌ها (برچسب و نقطه)، همان رنگ‌های پنل‌ها ================= */
.up .pill { align-items: center; gap: .35rem; border-radius: 999px; font-weight: 800; white-space: nowrap; }
.up .pill.dot::before { content: ''; width: .4rem; height: .4rem; border-radius: 999px; background: currentColor; }
.up .st-pending { color: #92400e; background: rgba(251, 191, 36, .2); }
.up .st-confirmed { color: #065f46; background: rgba(16, 185, 129, .15); }
.up .st-waiting { color: #5b21b6; background: rgba(139, 92, 246, .15); }
.up .st-visit { color: #075985; background: rgba(14, 165, 233, .15); }
.up .st-completed { color: #334155; background: rgba(100, 116, 139, .15); }
.up .st-cancelled { color: #9f1239; background: rgba(244, 63, 94, .13); }
.up .st-waitlist { color: #3730a3; background: rgba(99, 102, 241, .14); }
.up .st-neutral { color: var(--ink-2); background: var(--solid-2); }
.dark .up .st-pending { color: #fcd34d; background: rgba(251, 191, 36, .13); }
.dark .up .st-confirmed { color: #6ee7b7; background: rgba(16, 185, 129, .14); }
.dark .up .st-waiting { color: #c4b5fd; background: rgba(139, 92, 246, .16); }
.dark .up .st-visit { color: #7dd3fc; background: rgba(14, 165, 233, .15); }
.dark .up .st-completed { color: #cbd5e1; background: rgba(148, 163, 184, .14); }
.dark .up .st-cancelled { color: #fda4af; background: rgba(244, 63, 94, .14); }
.dark .up .st-waitlist { color: #a5b4fc; background: rgba(99, 102, 241, .16); }

/* ================= بلیت «نوبت بعدی من» (امضای پنل کاربر) =================
   دو نیم‌دایره‌ی خالی دو طرف خط سوراخ‌دار با mask ساخته می‌شود تا روی هر پس‌زمینه‌ای درست باشد؛ --perf را user-panel.js می‌گذارد */
.up .ticket {
  --perf: 9.5rem;
  position: relative; border-radius: 1.6rem; color: #ecfdf5;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(110, 231, 183, .28), transparent 60%),
    linear-gradient(155deg, #065f46 0%, #047857 48%, #0f766e 100%);
  box-shadow: 0 26px 50px -28px rgba(4, 52, 44, .75);
  -webkit-mask: radial-gradient(circle .8rem at 0 var(--perf), #0000 97%, #000) left / 51% 100% no-repeat,
                radial-gradient(circle .8rem at 100% var(--perf), #0000 97%, #000) right / 51% 100% no-repeat;
  mask: radial-gradient(circle .8rem at 0 var(--perf), #0000 97%, #000) left / 51% 100% no-repeat,
        radial-gradient(circle .8rem at 100% var(--perf), #0000 97%, #000) right / 51% 100% no-repeat;
}
.dark .up .ticket { background: radial-gradient(120% 90% at 100% 0%, rgba(52, 211, 153, .18), transparent 60%), linear-gradient(155deg, #053d30 0%, #065f46 50%, #134e4a 100%); }
.up .ticket-perf { height: 0; margin: 0 1.2rem; border-top: 2px dashed rgba(236, 253, 245, .32); }
.up .ticket .tk-time { font-size: 2.6rem; line-height: 1; font-weight: 900; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.up .ticket .tk-soft { color: rgba(236, 253, 245, .74); }
.up .ticket .tk-btn { background: rgba(255, 255, 255, .14); color: #fff; border: 1px solid rgba(255, 255, 255, .18); }
.up .ticket .tk-btn:hover { background: rgba(255, 255, 255, .24); }
.up .ticket .tk-chip { background: rgba(255, 255, 255, .16); color: #fff; }

/* صف زنده: هر نقطه یک نفر جلوتر؛ نقطه‌ی بلند خود بیمار */
.up .q-track { display: flex; align-items: center; gap: .32rem; flex-wrap: wrap; }
.up .q-dot { width: .62rem; height: .62rem; border-radius: 999px; background: rgba(236, 253, 245, .38); }
.up .q-dot.now { background: #fcd34d; box-shadow: 0 0 0 3px rgba(252, 211, 77, .28); }
.up .q-dot.me { width: 1.9rem; background: #fff; }
.up .q-dot.me.live { animation: up-breathe 1.8s ease-in-out infinite; }
@keyframes up-breathe { 50% { box-shadow: 0 0 0 5px rgba(255, 255, 255, .25); } }

/* مراحل نوبت و ارجاع */
.up .steps { position: relative; }
.up .step { position: relative; display: flex; gap: .75rem; padding-bottom: 1rem; }
.up .step:last-child { padding-bottom: 0; }
.up .step::before { content: ''; position: absolute; right: .69rem; top: 1.5rem; bottom: .1rem; width: 2px; background: var(--line-2); }
.up .step:last-child::before { display: none; }
.up .step.done::before { background: var(--brand); }
.up .step-dot { width: 1.4rem; height: 1.4rem; border-radius: 999px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border: 2px solid var(--line-2); background: var(--solid); color: transparent; }
.up .step.done .step-dot { background: var(--brand); border-color: var(--brand); color: #fff; }
.up .step.now .step-dot { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }
.up .step.bad .step-dot { background: #e11d48; border-color: #e11d48; color: #fff; }

/* برگه‌ی کناری/پایین */
.up .sheet-panel { max-height: min(88vh, 46rem); }
.up .grab { width: 2.75rem; height: .3rem; border-radius: 999px; background: var(--line-2); margin: .55rem auto 0; }
.up .slot-btn { height: 2.6rem; border-radius: .8rem; border: 1px solid var(--line-2); font-weight: 800; font-size: .8125rem; font-variant-numeric: tabular-nums; color: var(--ink-1); background: var(--solid-2); }
.up .slot-btn:hover { border-color: var(--brand); }
.up .slot-btn[aria-pressed='true'] { background: var(--brand); border-color: var(--brand); color: #fff; }
.up .tl-dot { width: .7rem; height: .7rem; border-radius: 999px; flex-shrink: 0; margin-top: .35rem; box-shadow: 0 0 0 3px var(--base); }

/* ================= برگه‌ی رزرو و درخواست خدمت (#serviceModal در index.html) ================= */
.up .bk-step { display: flex; align-items: center; gap: .5rem; font-size: .875rem; font-weight: 800; color: var(--ink-1); margin-bottom: .6rem; }
.up .bk-step-n { width: 1.6rem; height: 1.6rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: .75rem; background: var(--brand-soft); color: var(--brand-ink); }
.up .bk-opt { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 3.5rem; padding: .35rem; border-radius: 1rem; text-align: center; font-size: .8125rem; font-weight: 800; color: var(--ink-1); background: var(--solid-2); border: 1px solid var(--line-2); transition: border-color .15s, background-color .15s; }
.up .bk-opt small { font-size: .6875rem; font-weight: 600; color: var(--ink-3); }
.up input:checked + .bk-opt { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-ink); box-shadow: 0 0 0 1px var(--brand) inset; }
.up input:focus-visible + .bk-opt { outline: 2px solid var(--brand); outline-offset: 2px; }
.up .bk-day { flex-shrink: 0; min-width: 4.75rem; min-height: 3.5rem; padding: .35rem .6rem; border-radius: 1rem; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid var(--line-2); background: var(--solid-2); color: var(--ink-1); }
.up .bk-day span { font-size: .6875rem; font-weight: 700; color: var(--ink-3); }
.up .bk-day strong { font-size: .8125rem; font-weight: 800; }
.up .bk-day[aria-pressed='true'] { background: var(--brand); border-color: var(--brand); color: #fff; }
.up .bk-day[aria-pressed='true'] span { color: rgba(255, 255, 255, .8); }
/* دکمه‌ی ثبت پایین برگه دیده بماند */
.up .bk-actions { position: sticky; bottom: -1rem; margin: 0 -1rem -1rem; padding: .75rem 1rem 1rem; background: linear-gradient(to top, var(--solid-strong) 70%, transparent); }
.up .bk-receipt { border-radius: 1.4rem; padding: 1rem; text-align: center; background: var(--solid); border: 1px dashed var(--line-2); }
#bookingForChips .chip { height: 2.75rem; }

/* حرکت */
@keyframes up-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.up .rise { animation: up-rise .4s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes up-sheet-in { from { transform: translateY(28px); opacity: 0; } to { transform: none; opacity: 1; } }
.up .sheet-in { animation: up-sheet-in .28s cubic-bezier(.2, .8, .2, 1) both; }
.up .no-scrollbar { scrollbar-width: none; } .up .no-scrollbar::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: reduce) { .up *, .up { transition: none !important; animation: none !important; } }

/* نقطه‌ی اعلان روی دکمه‌ی «پروفایل» نوار پایین اپ */
#upNavDot { position: absolute; top: .2rem; left: calc(50% - 1.05rem); width: .55rem; height: .55rem; border-radius: 999px; background: #e11d48; box-shadow: 0 0 0 2px #fff; }
.dark #upNavDot { box-shadow: 0 0 0 2px #0f172a; }
@media print { #upSheet { display: none !important; } }