/* ============================================================
   pages.css — الصفحات المبنيّة في الخادم
   Styles for the server-rendered pages that Django added: the person
   permalink, the change log, the permission notice, plus the handful
   of controls the tree pages didn't already have.

   يعتمد كلياً على متغيّرات base.css فلا ألوان جديدة هنا.
   Built entirely on the base.css tokens — no new colours introduced.
   ============================================================ */

.page {
  max-width: 760px;
  margin-inline: auto;
  padding: 20px 16px 64px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.page__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.page__title {
  font-family: var(--font-head);
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0;
}

.page__card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: 24px 20px;
}

.page__lead {
  color: var(--text-muted);
  font-size: .88rem;
  line-height: 1.8;
  margin: 0 0 14px;
}

.page__notice {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: 32px 24px;
  text-align: center;
  line-height: 1.9;
}

.page__notice h1 {
  font-family: var(--font-head);
  font-size: 1.2rem;
  margin: 12px 0;
}

.page__notice p { color: var(--text-muted); font-size: .92rem; margin: 0 0 16px; }

.page__code {
  background: var(--surface-sunk);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  font-size: .82rem;
  overflow-x: auto;
  text-align: left;
}

.page__actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-block-start: 18px;
}

/* الاسم الحالي في نهاية سلسلة النسب / the person themselves, closing the chain */
.lineage__self { font-weight: 700; color: var(--g, var(--accent)); }

/* روابط الأبناء في الصفحة المستقلة تأخذ شكل الأزرار نفسه */
.sons__item { text-decoration: none; color: inherit; }

/* ---------- سجلّ التعديلات / the change log table ---------- */
.log {
  width: 100%;
  border-collapse: collapse;
  font-size: .84rem;
}

.log th,
.log td {
  padding: 9px 10px;
  border-block-end: 1px solid var(--border);
  text-align: start;
  vertical-align: middle;
}

.log th {
  font-weight: 700;
  color: var(--text-muted);
  font-size: .78rem;
  white-space: nowrap;
}

.log tbody tr:hover { background: var(--surface-2); }

.log__when { color: var(--text-faint); white-space: nowrap; font-size: .78rem; }

.log__action { font-size: .74rem; }
.log__action--create { color: var(--success); border-color: color-mix(in oklab, var(--success) 40%, var(--border)); }
.log__action--delete { color: var(--danger);  border-color: color-mix(in oklab, var(--danger) 40%, var(--border)); }

.log__detail { color: var(--text-faint); }

/* اسم لم يعد له صفحة — محذوف من الشجرة */
.log__gone { color: var(--text-faint); text-decoration: line-through; }

.log__chip {
  display: inline-block;
  background: var(--surface-sunk);
  border-radius: var(--r-sm);
  padding: 1px 6px;
  margin-inline-end: 4px;
  font-size: .74rem;
}

/* الجدول ينزلق أفقياً على الجوال بدل أن يمدّ الصفحة */
@media (max-width: 620px) {
  .page__card { overflow-x: auto; }
  .log { min-width: 520px; }
}

/* ---------- الحسابات / accounts ---------- */
.page--narrow { max-width: 520px; }

.card__title {
  font-family: var(--font-head);
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 6px;
}

/* النماذج الطويلة في عمودين على الشاشات الواسعة */
.form--grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0 16px; }
.form--grid > button { grid-column: 1 / -1; justify-self: start; }

.field__error { color: var(--danger); font-size: .78rem; }

.form__error {
  background: var(--danger-soft);
  border: 1px solid color-mix(in oklab, var(--danger) 40%, var(--border));
  color: var(--danger);
  border-radius: var(--r-sm);
  padding: 8px 12px;
  font-size: .84rem;
  margin-block-end: 12px;
}

/* رسائل النجاح والخطأ بعد كل إجراء */
.flash { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }

.flash__item {
  border-radius: var(--r-md);
  padding: 10px 14px;
  font-size: .88rem;
  border: 1px solid;
}

.flash__item--success { background: var(--success-soft); border-color: color-mix(in oklab, var(--success) 40%, var(--border)); color: var(--success); }
.flash__item--error   { background: var(--danger-soft);  border-color: color-mix(in oklab, var(--danger) 40%, var(--border));  color: var(--danger); }
.flash__item--info    { background: var(--surface-2);    border-color: var(--border); color: var(--text-muted); }

.accounts td { vertical-align: top; }
.accounts__full { color: var(--text-faint); font-size: .78rem; }
.accounts__none { color: var(--text-faint); }
.accounts__on  { color: var(--success); font-weight: 600; font-size: .8rem; }
.accounts__off { color: var(--danger);  font-weight: 600; font-size: .8rem; }

/* لون لكل دور، ليُقرأ الجدول بلمحة */
.role--admin     { color: var(--danger);  border-color: color-mix(in oklab, var(--danger) 40%, var(--border)); }
.role--assistant { color: var(--accent);  border-color: color-mix(in oklab, var(--accent) 45%, var(--border)); }
.role--user      { color: var(--text-muted); }
.chip--self      { background: var(--surface-sunk); color: var(--text-muted); }

.inline-form { display: inline; margin: 0; }

.assign {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--surface-sunk);
  border-radius: var(--r-sm);
  padding: 2px 4px 2px 8px;
  margin: 0 0 4px 4px;
  font-size: .8rem;
}

.assign__x {
  border: none;
  background: none;
  color: var(--text-faint);
  cursor: pointer;
  font-size: .8rem;
  padding: 0 2px;
  line-height: 1;
}
.assign__x:hover { color: var(--danger); }

/* نموذج كلمة المرور مطويّ داخل الجدول حتى لا يزدحم */
.pw summary { display: inline-block; list-style: none; cursor: pointer; }
.pw summary::-webkit-details-marker { display: none; }
.pw__form { display: flex; flex-direction: column; gap: 6px; margin-block-start: 8px; min-width: 170px; }

/* ---------- عناصر تحكّم إضافية / small controls ---------- */
.check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .88rem;
  cursor: pointer;
  line-height: 1.6;
}

.check input { inline-size: 18px; block-size: 18px; accent-color: var(--accent); cursor: pointer; }

/* زر الخروج داخل الشريط العلوي / logout sits inline in the top bar */
.logout-form { display: inline-flex; margin: 0; }

/* ---------- عين إظهار كلمة المرور / show-password toggle ---------- */
.pw-field { position: relative; display: block; }

/* مساحة للزر حتى لا يمرّ النصّ تحته */
.pw-field .input { padding-inline-end: 40px; }

.pw-eye {
  position: absolute;
  inset-inline-end: 5px;
  inset-block-start: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 30px;
  block-size: 30px;
  padding: 0;
  border: none;
  background: none;
  border-radius: var(--r-sm);
  color: var(--text-faint);
  cursor: pointer;
}

.pw-eye:hover { color: var(--text); background: var(--surface-sunk); }
.pw-eye svg { inline-size: 19px; block-size: 19px; }