/* ==========================================================================
   مقام — أنماط الشل الموحّد
   قاعدة ملزمة: لا لون ولا مسافة ولا حجم خطّ مكتوبٌ هنا بقيمة صريحة.
   كل قيمة من tokens.css عبر var(--…).

   0.14.0 — الشل على تصميم maqaam-design (SiteHeader · SiteFooter)، ومكوّنات
   النموذج العام على AccountPage و OfficeOnboarding: الحقل، الزر الأساسي
   والثانوي، عدّاد الخطوات، بطاقة الحالة. الأنماط هنا صنفيّة لأن سياسة الأمان
   تمنع style="" داخل الصفحة (style-src 'self').
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--font-ar);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a { color: var(--text-accent); text-decoration: none; text-underline-offset: 3px; }
a:hover { color: var(--accent-hover); text-decoration: underline; }
:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

/* الأيقونات: خطّ لا تعبئة، وسُمك الخطّ من الرموز. */
svg.icon,
.site-icon-button svg {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: var(--icon-stroke);
  flex: none;
}

/* --- الترويسة (SiteHeader) ------------------------------------------------ */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--surface-inverse);
}

.site-header-inner {
  height: var(--header-height);
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.site-brand {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  text-decoration: none;
}

.site-brand:hover { text-decoration: none; }

.wordmark {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--on-inverse);
  letter-spacing: var(--tracking-tight);
}

.site-context {
  font-size: var(--text-xs);
  color: var(--on-inverse-muted);
}

.site-actions {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.site-icon-button {
  width: var(--tap-min);
  height: var(--tap-min);
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--on-inverse);
  cursor: pointer;
}

.site-icon-button svg { width: var(--icon-md); height: var(--icon-md); }
.site-icon-button svg[hidden] { display: none; }

.site-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  padding: 0 var(--space-2);
  font-size: var(--text-sm);
  color: var(--on-inverse);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  text-decoration: none;
}

.site-icon-button:hover,
.site-link:hover {
  background: var(--state-hover-inverse);
  color: var(--on-inverse);
  text-decoration: none;
}

/* --- المتن ----------------------------------------------------------------- */

.shell-main {
  flex: 1;
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding: var(--space-6) var(--gutter);
}

/* صفحة نموذج عامة: عمود النموذج من الرموز (--form-max) كما في التصميم. */
.shell-main:has(> .form-page) {
  max-width: var(--form-max);
  padding: var(--space-4) var(--gutter) var(--space-5);
}

.stage {
  max-width: var(--prose-max);
}

.stage h1 {
  margin: 0 0 var(--space-3);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
}

.tagline {
  margin: 0 0 var(--space-5);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
}

.note {
  margin: 0 0 var(--space-2);
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

/* --- التذييل (SiteFooter) ------------------------------------------------- */

.site-footer {
  width: 100%;
  background: var(--surface-inverse);
  color: var(--on-inverse);
  border-top: var(--border-hairline);
}

.site-footer-inner {
  max-width: var(--screen-lg);
  margin: 0 auto;
  padding: var(--space-4) var(--gutter);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  justify-content: space-between;
}

.site-promise {
  flex: 1;
  min-width: 200px;
  margin: 0;
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  color: var(--on-inverse-muted);
}

.site-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  font-size: var(--text-xs);
  color: var(--on-inverse-muted);
  white-space: nowrap;
}

/* ==========================================================================
   النموذج العام — AccountPage · OfficeOnboarding
   ========================================================================== */

.form-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.page-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.page-head h1 {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

/* An identifier under the heading (the sign-in address). .code makes it LTR,
   and in a column flex box an LTR block starts on the LEFT -- so it is pinned
   to the start of the RTL line, under the heading, as in AccountPage. */
.page-head > .code { align-self: flex-start; }

.page-head-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}

.lede {
  margin: 0;
  max-width: var(--prose-max);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  color: var(--text-secondary);
}

.step-count {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  color: var(--text-secondary);
}

.step-bars {
  display: flex;
  gap: var(--space-1);
  padding-top: var(--space-1);
}

.step-bars > span {
  flex: 1;
  height: 3px;
  border-radius: var(--radius-full);
  background: var(--color-primary-12);
}

.step-bars > span.on { background: var(--color-primary); }

.fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: 0;
}

.field-label {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.field-aside {
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  color: var(--text-secondary);
}

.field-note {
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  color: var(--text-secondary);
}

.input,
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="search"],
.field select {
  width: 100%;
  height: var(--control-height);
  background: var(--surface-raised);
  border: var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 0 var(--space-3);
  font-family: var(--font-ar);
  font-size: var(--text-md);
  color: var(--text-primary);
}

/* أرقامٌ ومعرّفات تُكتب يساراً بخط الأرقام (التصميم: السجل التجاري والهاتف). */
.field input.ltr,
.field input[type="email"],
.field input[type="tel"] {
  font-family: var(--font-num);
  direction: ltr;
  text-align: left;
}

.field input::placeholder { color: var(--text-disabled); }

.field .phone-row { display: flex; gap: var(--space-2); }
.field .phone-row select { width: auto; flex: 0 1 auto; max-width: 45%; font-size: var(--text-sm); padding: 0 var(--space-2); }
.field .phone-row input { flex: 1 1 auto; min-width: 0; }

.check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  cursor: pointer;
  font-size: var(--text-sm);
  line-height: var(--leading-body);
}

.check input {
  width: 20px;
  height: 20px;
  flex: none;
  margin-top: var(--nudge-1);
  accent-color: var(--color-primary);
}

.fine {
  margin: 0;
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  color: var(--text-secondary);
}

.actions {
  display: flex;
  gap: var(--space-2);
  padding-top: var(--space-2);
  border-top: var(--border-hairline);
}

.button-primary,
.button-secondary {
  min-height: var(--control-height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-4);
  border-radius: var(--radius-sm);
  font-family: var(--font-ar);
  font-size: var(--text-md);
  cursor: pointer;
  text-decoration: none;
}

.button-primary {
  flex: 1;
  background: var(--surface-inverse);
  color: var(--on-inverse);
  border: 0;
  font-weight: var(--weight-medium);
}

.button-primary:hover { background: var(--primary-hover); color: var(--on-inverse); text-decoration: none; }

.button-secondary {
  flex: none;
  background: none;
  border: var(--border-strong);
  color: var(--text-primary);
}

.button-secondary:hover { background: var(--state-hover-tint); color: var(--text-primary); text-decoration: none; }

.button-block { width: 100%; flex: none; }

.text-button {
  min-height: var(--tap-min);
  padding: 0 var(--space-2);
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--font-ar);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.text-button:hover { color: var(--text-primary); }

/* رسائل الحالة داخل النموذج: بحدٍّ وسطحٍ من الرموز، لا بلونٍ جديد. */
.notice {
  margin: 0;
  padding: var(--space-3);
  border: var(--border-hairline);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
}

.notice-error {
  background: var(--surface-sunken);
  border: var(--rule-active-width) solid var(--color-accent);
  color: var(--text-primary);
}

/* بطاقة الحالة — «قيد التوثيق» في التصميم. */
.status-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--surface-sunken);
  border: var(--border-hairline);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}

.status-card svg { width: var(--icon-md); height: var(--icon-md); color: var(--color-primary-48); }
.status-card.done svg { color: var(--color-primary); }

.status-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--nudge-1);
}

.status-title { font-size: var(--text-md); font-weight: var(--weight-medium); }
.status-sub { font-size: var(--text-xs); color: var(--text-secondary); }

/* قسمٌ ضمن الصفحة: عنوانٌ صغير فوق خطٍّ رفيع. */
.block {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  border-top: var(--border-hairline);
  padding-top: var(--space-3);
}

.block-title { margin: 0; font-size: var(--text-sm); font-weight: var(--weight-medium); }

.facts {
  margin: 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
}

.facts dt { color: var(--text-secondary); }
.facts dd { margin: 0; }

/* ==========================================================================
   شاشات الإدارة — م1 ج
   وظيفية بقصد: أداةٌ تُدخل بها المرجعيات، لا واجهةُ زائر. لوحة م5 تُبنى على
   تصاميم maqaam-design، فبناءُ مكوّناتٍ هنا عملٌ يُرمى.
   والقاعدة نفسها تسري: لا قيمة صريحة — كلّها من tokens.css.
   ========================================================================== */

.admin { max-width: none; }
.admin-narrow { max-width: var(--prose-max); }

.admin-bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.admin-h2 {
  margin: var(--space-6) 0 var(--space-3);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-4) 0;
  font-size: var(--text-sm);
}

.admin-table th,
.admin-table td {
  padding: var(--space-2) var(--space-3);
  border-bottom: var(--border-hairline);
  text-align: start;
  vertical-align: top;
}

.admin-table th {
  color: var(--text-secondary);
  font-weight: var(--weight-bold);
}

.admin-missing { color: var(--text-disabled); }

/* The history table inside a row (0.15.2 fix): compact and unwrapped -- at
   1366px every line was wrapping to three (65px rows) inside the phone column. */
.admin-details .admin-table th,
.admin-details .admin-table td {
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-xs);
  white-space: nowrap;
}

/* A row's own details, opened in place (0.15.1). The marker stays: it is what
   says the line opens. */
.admin-details > summary { cursor: pointer; }
.admin-details[open] > summary { margin-block-end: var(--space-2); }

/* The review assistant's hints (0.15.0): one line each, marked by a rule on
   the reading side rather than by colour alone. */
.admin-hint {
    margin-block-start: var(--space-1, 4px);
    padding-inline-start: var(--space-2, 8px);
    border-inline-start: 2px solid var(--text-primary);
    font-size: var(--text-sm, 0.875rem);
}

.admin-form { margin: var(--space-4) 0; max-width: var(--prose-max); }

.admin-field { display: block; margin-bottom: var(--space-3); }
.admin-field > span,
.admin-field > label {
  display: block;
  margin-bottom: var(--space-1);
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.admin-field input {
  width: 100%;
  box-sizing: border-box;
  padding: var(--space-2) var(--space-3);
  border: var(--border-hairline);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  color: var(--text-primary);
  font-family: inherit;
  font-size: var(--text-md);
}

.admin-check {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.admin-group {
  margin: var(--space-5) 0;
  padding: var(--space-4);
  border: var(--border-hairline);
  border-radius: var(--radius-sm);
}

.admin-group legend {
  padding-inline: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.admin-button {
  padding: var(--space-2) var(--space-5);
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--surface-inverse);
  color: var(--on-inverse);
  font-family: inherit;
  font-size: var(--text-md);
  cursor: pointer;
}

.admin-link {
  margin-inline-start: var(--space-3);
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: var(--text-sm);
  text-decoration: underline;
  cursor: pointer;
}

.admin-error,
.admin-ok {
  margin: var(--space-3) 0;
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}

.admin-error { background: var(--surface-sunken); border: var(--border-hairline); }
.admin-ok    { background: var(--surface-raised); border: var(--border-hairline); }

/* صورة خريطة المدينة في شاشة الإدارة — معاينة، لا عرض نهائي. */
.admin-preview {
  display: block;
  max-width: 100%;
  height: auto;
  margin-top: var(--space-3);
  border: var(--border-hairline);
  border-radius: var(--radius-sm);
}

/* الحقول المركّبة — م1 ج، الجزء الثاني.
   القائمة والمساحة النصّية لم تكونا موجودتين في الشاشة الأولى (المدن)، فلولا
   هذه القواعد لظهرتا بخطّ المتصفّح الافتراضي وسط حقولٍ منسّقة. */
.admin-field select,
.admin-field textarea {
  width: 100%;
  box-sizing: border-box;
  padding: var(--space-2) var(--space-3);
  border: var(--border-hairline);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  color: var(--text-primary);
  font-family: inherit;
  font-size: var(--text-md);
}

.admin-field textarea {
  line-height: var(--leading-body);
  resize: vertical;
}

/* تأكيد الحذف.
   لا يوجد لون «خطر» في tokens.css، ولن يُخترع هنا: القاعدة أن كل قيمة من
   الرموز، ولوحة م5 تُبنى على تصاميم maqaam-design. فالتمييز بالحدّ الأثقل
   لا بلونٍ جديد — وهو كافٍ لأن الصندوق لا يظهر إلا لحظة التأكيد. */
.admin-danger {
  margin: var(--space-4) 0;
  padding: var(--space-4);
  border: var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
}

.admin-danger p { margin: 0 0 var(--space-2); }

/* حقل الهاتف — م3-ج-3 (27 سبتمبر).
   مفتاح البلد والرقم في سطرٍ واحد من اليسار إلى اليمين كما يُكتب الرقم.
   القائمة بعرض محتواها، والرقم يأخذ الباقي. والمثال الرمادي من الرموز
   لا لونٌ جديد. */
.phone-row {
  display: flex;
  gap: var(--space-2);
}

.admin-field .phone-row select {
  width: auto;
  flex: 0 1 auto;
  /* 245 countries: the longest name would otherwise set the width and crush
     the number field. A ratio of the row, not a spacing value. */
  max-width: 45%;
}

.admin-field .phone-row input {
  flex: 1 1 auto;
  min-width: 0;
}

.admin-field input::placeholder {
  color: var(--text-disabled);
}

.admin-field .country-search {
  margin-bottom: var(--space-2);
}

.consent-note {
  margin-top: var(--space-3);
}

/* "من أنت؟" (0.14.2). A fieldset without the browser's frame, and the two
   register fields hidden for an independent marketer -- by CSS alone, so
   nothing depends on script. The service drops them anyway. */
fieldset.choice {
  border: 0;
  padding: 0;
  gap: var(--space-2);
}

fieldset.choice legend { margin-bottom: var(--space-2); padding: 0; }

.fields:has(#KindIndependent:checked) .office-only { display: none; }

/* ==========================================================================
   Recorded messages (0.16.0) -- /me/messages and /admin/messages.
   Not in maqaam-design: built from the tokens and the existing surfaces. The
   two sides differ by SIDE and SURFACE, never by colour alone.
   ========================================================================== */

.field textarea {
  width: 100%;
  min-height: calc(var(--control-height) * 2.5);
  background: var(--surface-raised);
  border: var(--border-strong);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-ar);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  color: var(--text-primary);
  resize: vertical;
}

.thread {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.msg {
  max-width: 85%;
  padding: var(--space-3);
  border: var(--border-hairline);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
}

/* The reader's own messages sit at the start of the line; the other side's
   at the end, on the sunken surface. */
.msg-mine { align-self: flex-start; }
.msg-staff { align-self: flex-end; background: var(--surface-sunken); }

.msg-meta {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  margin-block-end: var(--space-1);
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

/* The writer's own line breaks, and nothing else of his: no markup. */
.msg-body {
  white-space: pre-line;
  overflow-wrap: anywhere;
  font-size: var(--text-sm);
  line-height: var(--leading-body);
}

.thread-list { list-style: none; margin: 0; padding: 0; }

.thread-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-block-end: var(--border-hairline);
  font-size: var(--text-sm);
}

.thread-list a { display: flex; gap: var(--space-3); align-items: baseline; }

.tag {
  flex: none;
  padding: 0 var(--space-2);
  border: var(--border-hairline);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

.tag-new { border-color: var(--color-primary); color: var(--text-primary); font-weight: var(--weight-medium); }

/* Inbox filter (0.16.1): the sender's name, a state, one button -- one row. */
.admin-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  margin: var(--space-3) 0;
}

.admin-filter input,
.admin-filter select {
  padding: var(--space-1) var(--space-2);
  border: var(--border-hairline);
  border-radius: var(--radius-sm);
  background: var(--surface-page);
  color: var(--text-primary);
  font: inherit;
  font-size: var(--text-sm);
}

/* Packages (0.17.0): one card per package, side by side where there is room. */
.package-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--space-4);
  margin: var(--space-4) 0;
}

.package-card {
  padding: var(--space-3);
  border: var(--border-hairline);
  border-radius: var(--radius-md);
}

.package-card .admin-form { margin-top: 0; }

.package-move { display: flex; gap: var(--space-2); align-items: center; margin-top: var(--space-1); }
.package-move select { font: inherit; font-size: var(--text-xs); }

/* A member who may post nothing on this page (0.19.1 for the auditor; M5-A
   per page): every form that changes something, and the links that open one,
   are not shown. Search and filter forms (method="get") stay, and so does
   anything marked .admin-readable -- a unit's form drawn closed for a reader,
   the "عرض" link that opens it. And .admin-write marks what a hidden form
   leaves behind: its heading ("إضافة حيّ"), and an edit link whose address
   carries no "edit=" (the cities page edits by "?city=") -- a moderator saw
   both in the live test of 20 October 2026. This hides; AdminAuth.MayEnter is
   what refuses. */
.read-only .admin form:not([method="get"]):not(.admin-readable),
.read-only .admin a[href*="edit="]:not(.admin-readable),
.read-only .admin a[href*="delete="],
.read-only .admin .admin-write { display: none; }
.read-only-note { text-align: center; }

/* A form drawn closed (M5-A): the fieldset that disables it is not a box. */
.admin-plain {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

/* ==========================================================================
   الإعدادات — م5-أ (التصميم: AdminSettings).
   سطرٌ لكل مفتاح: كتلةٌ مكدّسة على الهاتف، وأربعة أعمدة من 768px. وعروض
   الأعمدة هي أعمدة التصميم نفسها (.row فيه)، لا قيمٌ مخترعة.
   ========================================================================== */
.settings-form { margin: var(--space-4) 0; }

.settings-group {
  margin: var(--space-3) 0;
  border: var(--border-hairline);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  overflow: hidden;
}

.settings-group > summary {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  min-height: var(--control-height);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  cursor: pointer;
}

.settings-head { display: none; }

.settings-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  border-top: var(--border-hairline);
  font-size: var(--text-sm);
}

.settings-label {
  display: flex;
  flex-direction: column;
  gap: var(--nudge-1);
  min-width: 0;
}

.settings-key { align-self: flex-start; font-size: var(--text-2xs); color: var(--text-secondary); }

.settings-value {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  min-width: 0;
}

.settings-value .settings-input,
.settings-value select {
  flex: 1 1 0;
  min-width: 0;
  height: var(--control-height-sm);
  padding: 0 var(--space-2);
  border: var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-page);
  color: var(--text-primary);
  font: inherit;
  font-size: var(--text-sm);
}

/* A refused value: the box carries the mark, the line under it the reason. */
.settings-row-invalid .settings-input,
.settings-row-invalid select { border: var(--rule-active-width) solid var(--color-accent); }

.settings-problem { margin: 0; }

.settings-reset .admin-link { margin-inline-start: 0; }

.settings-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: var(--border-hairline);
}

.settings-confirm .admin-h2 { margin-top: 0; }

.settings-constants {
  margin: 0;
  padding-inline-start: var(--space-4);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
}

@media (min-width: 768px) {
  .settings-head,
  .settings-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 140px 150px 110px;
    gap: var(--space-3);
    align-items: start;
  }

  .settings-head {
    padding: var(--space-2) var(--space-3);
    border-top: var(--border-hairline);
    background: var(--surface-sunken);
    font-size: var(--text-xs);
    color: var(--text-secondary);
  }

  .settings-problem { grid-column: 1 / -1; }
}

@media (min-width: 1200px) {
  .settings-head,
  .settings-row { grid-template-columns: minmax(0, 1fr) 160px 190px 120px; }
}

/* --- M5-B: the panel's bar, «اليوم», the oversight, the hub ---------------
   Every value from tokens.css. A table that is wider than a phone scrolls
   inside its own box (.table-scroll), never the page (PRD §6, 360px). */

.admin-tabs {
  display: flex;
  gap: var(--space-1);
  margin: 0 0 var(--space-4);
  border-bottom: var(--border-hairline);
  overflow-x: auto;
}

.admin-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--tap-min);
  padding: 0 var(--space-3);
  border-bottom: var(--rule-active-width) solid transparent;
  color: var(--text-secondary);
  text-decoration: none;
  white-space: nowrap;
}

.admin-tab[aria-current="page"] {
  border-bottom-color: var(--color-primary);
  color: var(--text-primary);
  font-weight: var(--weight-bold);
}

.admin-badge {
  padding: 0 var(--space-2);
  border-radius: var(--radius-full);
  background: var(--surface-inverse);
  color: var(--on-inverse);
  font-size: var(--text-xs);
}

.table-scroll { overflow-x: auto; }

.today-count { margin: 0 0 var(--space-4); color: var(--text-secondary); }
.today-late-count { color: var(--text-accent); font-weight: var(--weight-bold); }

.today-list {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.today-item {
  padding: var(--space-3) var(--space-4);
  border: var(--border-hairline);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
}

.today-item-late { border: var(--border-accent); }

.today-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.today-kind { font-weight: var(--weight-bold); }
.today-title { margin: var(--space-2) 0; }

.today-times {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.today-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.today-actions .admin-link { margin-inline-start: 0; }

.today-go {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  text-decoration: none;
}

.today-more > summary { list-style: none; }
.today-more > summary::-webkit-details-marker { display: none; }

.today-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-2) 0 0;
}

.today-form select,
.today-form input {
  min-height: var(--control-height-sm);
  padding: 0 var(--space-2);
  border: var(--border-hairline);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  color: var(--text-primary);
  font-family: inherit;
}

.today-note { flex: 1 1 auto; min-width: 0; }
.today-empty { padding: var(--space-5) 0; }
.today-add { margin-top: var(--space-6); }

.matrix-table td { text-align: center; }

.hub-grid { display: grid; gap: var(--space-4); }

.hub-links {
  margin: 0;
  padding-inline-start: var(--space-4);
  line-height: var(--leading-body);
}

@media (min-width: 768px) {
  .hub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- M5-C: the review (queue and one unit) ----------------------------
   Two tones from the existing palette, no new colour: an ALERT is the
   correction red (a signal, as tokens.css reserves it); a WARNING is the
   strong border at medium weight -- worth a look, not a stop. */
.tag-alert { border-color: var(--color-accent); color: var(--text-accent); font-weight: var(--weight-medium); }
.tag-warn  { border: var(--border-strong); color: var(--text-primary); font-weight: var(--weight-medium); }

.review-metrics { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.review-alerts { margin-bottom: var(--space-4); }

.review-alert-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-2);
}

.review-alert {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: var(--border-hairline);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
}

.review-alert-label { font-weight: var(--weight-medium); }
.review-alert-warn  { border: var(--border-strong); }
.review-alert-red   { border: var(--border-accent); background: var(--accent-tint); }
.review-alert-red .review-alert-label { color: var(--text-accent); }

.review-decide {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.review-undo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-3) 0;
}

/* «اليوم»: the unit reviews as one card (j2). */
.today-group { background: var(--surface-sunken); }

/* «من اطّلع على بياناتك / وحداتك» (M5-C, q2): the account's access log. */
.access-log {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
  font-size: var(--text-sm);
}

.access-log li {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: var(--border-hairline);
}

/* ---- 0.29.0: «إشعاراتي» and the oversight's periods -------------------
   No new colour and no new size: the pressed choice is the strong text at
   the medium weight, the others the secondary text -- the panel's own
   language for "here" and "elsewhere". */
.choices {
  margin: 0;
  padding: 0;
  border: 0;
  display: grid;
  gap: var(--space-2);
}

.choices legend { padding: 0; margin-bottom: var(--space-1); }

.today-rates {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: 0 0 var(--space-3);
}

.scope-switch,
.period-switch {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: 0 0 var(--space-3);
}

.scope-option {
  min-height: var(--tap-min);
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: var(--text-sm);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.scope-option[aria-pressed="true"],
.period-switch .admin-link[aria-current="page"] {
  color: var(--text-primary);
  font-weight: var(--weight-medium);
  text-decoration: none;
}

.period-switch .admin-link { margin-inline-start: 0; }