/* =====================================================================
   Lead & Rise — پنل کاربری
   ---------------------------------------------------------------------
   فقط کامپوننت‌هایی که در style.css وجود نداشتند: تب‌ها، کارت رکورد،
   نشان وضعیت، حالت خالی و اسکلت بارگذاری.

   هیچ رنگ یا اندازه‌ای اینجا hardcode نمی‌شود — همه از توکن‌های :root
   در style.css می‌آید. قواعد برند رعایت شده:
     • طلایی هرگز متن روی زمینه‌ی روشن نیست (کنتراست ۲.۲۱) → --gold-ink
     • فقط logical properties
     • حلقه‌ی فوکوس طلایی-جوهری با offset
   ===================================================================== */


/* ---------------------------------------------------------------------
   نوار خوش‌آمد
   --------------------------------------------------------------------- */
.panel-head {
  display: flex; flex-wrap: wrap; gap: var(--sp-4);
  align-items: center; justify-content: space-between;
}
.panel-head__who { min-inline-size: 0; }
.panel-head__mail {
  display: block; margin-block-start: var(--sp-2);
  font-size: var(--fs-caption); color: var(--text-faint);
  overflow-wrap: anywhere;
}


/* ---------------------------------------------------------------------
   تب‌ها — ظاهر .anchor-nav ولی با <button> چون مقصدی برای رفتن نیست
   --------------------------------------------------------------------- */
.panel-tabs {
  position: sticky; inset-block-start: var(--header-h); z-index: 80;
  background: rgba(251, 246, 236, .94);
  backdrop-filter: blur(8px);
  border-block-end: 1px solid var(--rule);
}
.panel-tabs > .container {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  padding-block: var(--sp-3);
}
.panel-tabs button {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-block-size: 44px; padding-inline: var(--sp-4);
  border: 1px solid var(--rule); border-radius: var(--r-sm);
  background: var(--surface); color: var(--navy);
  font: inherit; font-size: var(--fs-small); font-weight: 600;
  cursor: pointer;
  transition: background-color var(--t), border-color var(--t), color var(--t);
}
.panel-tabs button:hover,
.panel-tabs button[aria-selected="true"] {
  background: var(--navy); border-color: var(--navy); color: var(--ivory);
}
.panel-tabs button:focus-visible {
  outline: 3px solid var(--gold-ink); outline-offset: 3px;
}
/* شمارنده‌ی کنار عنوان تب */
.panel-tabs .count {
  min-inline-size: 22px; padding-inline: 6px;
  border-radius: var(--r-pill);
  background: var(--gold-tint); color: var(--gold-ink);
  font-size: var(--fs-caption); font-weight: 700; text-align: center;
}
.panel-tabs button[aria-selected="true"] .count {
  background: rgba(199, 163, 91, .26); color: var(--gold);
}


/* ---------------------------------------------------------------------
   یادداشت توضیحی بالای لیست
   --------------------------------------------------------------------- */
.notice {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--rule); border-inline-start: 3px solid var(--gold);
  border-radius: var(--r-md);
  background: var(--surface);
  font-size: var(--fs-small); color: var(--text-muted);
}
.notice svg { flex: none; color: var(--gold-ink); margin-block-start: 2px; }
.notice p { margin: 0; }


/* ---------------------------------------------------------------------
   کارت رکورد (رزرو یا پیام)
   --------------------------------------------------------------------- */
.record-list { display: grid; gap: var(--sp-4); }

.record-card {
  padding: var(--sp-5);
  border: 1px solid var(--rule); border-radius: var(--r-lg);
  background: var(--surface);
  transition: border-color var(--t);
}
.record-card:hover { border-color: var(--rule-strong); }

.record-card__head {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  align-items: baseline; justify-content: space-between;
  padding-block-end: var(--sp-4); margin-block-end: var(--sp-4);
  border-block-end: 1px solid var(--rule);
}
.record-card__title {
  margin: 0; font-size: var(--fs-h3); line-height: var(--lh-heading);
}
.record-card__date { font-size: var(--fs-caption); color: var(--text-faint); }

.record-card__body {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-small); line-height: var(--lh-body); color: var(--text-muted);
  white-space: pre-line; overflow-wrap: anywhere;
}
.record-card__body:last-child { margin-block-end: 0; }

/* ریز-اطلاعات: عنوان/مقدار زیر هم روی موبایل، کنار هم روی دسکتاپ */
.record-card__meta {
  display: grid; gap: var(--sp-3) var(--sp-5);
  margin: 0; padding-block-start: var(--sp-4);
  border-block-start: 1px solid var(--rule);
}
@media (min-width: 640px) {
  .record-card__meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.record-card__meta dt {
  font-size: var(--fs-caption); font-weight: 700; color: var(--gold-ink);
  margin-block-end: var(--sp-1);
}
.record-card__meta dd {
  margin: 0; font-size: var(--fs-small); color: var(--text-muted);
  white-space: pre-line; overflow-wrap: anywhere;
}


/* ---------------------------------------------------------------------
   نشان وضعیت
   --------------------------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px var(--sp-3); border-radius: var(--r-sm);
  border: 1px solid var(--rule-gold); background: var(--gold-tint);
  color: var(--gold-ink);
  font-size: var(--fs-caption); font-weight: 600; white-space: nowrap;
}
.badge::before {
  content: ""; inline-size: 7px; block-size: 7px;
  border-radius: var(--r-pill); background: currentColor;
}
/* در جریان — همان طلایی پیش‌فرض */
.badge--pending { }
/* تأییدشده — سرمه‌ای پررنگ، بدون افزودن رنگ تازه به پالت */
.badge--done {
  border-color: var(--navy); background: var(--navy); color: var(--ivory);
}
/* بسته‌شده — خنثی */
.badge--closed {
  border-color: var(--rule-strong); background: var(--ivory-deep); color: var(--text-faint);
}


/* ---------------------------------------------------------------------
   حالت خالی و حالت خطا
   --------------------------------------------------------------------- */
.empty-state {
  padding: var(--sp-7) var(--sp-5);
  border: 1px dashed var(--rule-strong); border-radius: var(--r-lg);
  background: var(--surface); text-align: center;
}
.empty-state svg { color: var(--gold-ink); margin-block-end: var(--sp-4); }
.empty-state h3 { font-size: var(--fs-h3); margin-block-end: var(--sp-2); }
.empty-state p {
  max-inline-size: 46ch; margin-inline: auto; margin-block-end: var(--sp-5);
  font-size: var(--fs-small); color: var(--text-muted);
}
.empty-state > :last-child { margin-block-end: 0; }


/* ---------------------------------------------------------------------
   اسکلت بارگذاری
   --------------------------------------------------------------------- */
.skeleton {
  block-size: 96px; border-radius: var(--r-lg);
  border: 1px solid var(--rule); background: var(--ivory-deep);
  animation: lr-pulse 1.4s ease-in-out infinite;
}
.skeleton + .skeleton { animation-delay: .18s; }
@keyframes lr-pulse { 0%, 100% { opacity: .5; } 50% { opacity: .9; } }
@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; opacity: .6; }
}


/* ---------------------------------------------------------------------
   پنل‌ها: فقط یکی هم‌زمان دیده می‌شود
   --------------------------------------------------------------------- */
[role="tabpanel"][hidden] { display: none; }
.panel-section { padding-block: var(--sp-7); }
.panel-section > * + * { margin-block-start: var(--sp-5); }


/* ---------------------------------------------------------------------
   صفحه‌ی ورود / ثبت‌نام
   --------------------------------------------------------------------- */
.auth-switch {
  display: flex; gap: var(--sp-2);
  padding: var(--sp-1); margin-block-end: var(--sp-5);
  border: 1px solid var(--rule); border-radius: var(--r-md);
  background: var(--ivory-deep);
}
.auth-switch button {
  flex: 1; min-block-size: 46px;
  border: 1px solid transparent; border-radius: var(--r-sm);
  background: transparent; color: var(--text-muted);
  font: inherit; font-size: var(--fs-small); font-weight: 700;
  cursor: pointer;
  transition: background-color var(--t), color var(--t), border-color var(--t);
}
.auth-switch button[aria-selected="true"] {
  background: var(--surface); border-color: var(--rule-strong); color: var(--navy);
}
.auth-switch button:focus-visible {
  outline: 3px solid var(--gold-ink); outline-offset: 2px;
}

.auth-aside-link {
  display: inline-block; margin-block-start: var(--sp-3);
  background: none; border: 0; padding: 0;
  font: inherit; font-size: var(--fs-caption); font-weight: 600;
  color: var(--gold-ink); text-decoration: underline;
  text-underline-offset: 3px; cursor: pointer;
}
.auth-aside-link:hover { color: var(--navy); }
.auth-aside-link:focus-visible {
  outline: 3px solid var(--gold-ink); outline-offset: 3px; border-radius: var(--r-sm);
}

/* ورودی غیرقابل ویرایش (ایمیل در پنل) */
.input[readonly] {
  background: var(--ivory-deep); color: var(--text-muted); cursor: not-allowed;
}


/* ---------------------------------------------------------------------
   جداکننده‌ی داخل فرم پروفایل
   --------------------------------------------------------------------- */
.form-part + .form-part {
  margin-block-start: var(--sp-6); padding-block-start: var(--sp-6);
  border-block-start: 1px solid var(--rule);
}
.form-part__title { font-size: var(--fs-h3); margin-block-end: var(--sp-2); }
.form-part__hint {
  font-size: var(--fs-small); color: var(--text-muted);
  margin-block-end: var(--sp-5);
}