/* ===========================================================================
   components.css — app shell + المكوّنات (design plan §4.5, §5).
   خصائص منطقية فقط، كل اللون/المسافة عبر متغيّرات tokens.css.
   =========================================================================== */

/* ===================== App shell (§4.5) ===================== */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;   /* أول عمود = يمين في RTL = sidebar */
  grid-template-rows: var(--topbar-height) 1fr;
  grid-template-areas:
    "sidebar topbar"
    "sidebar content";
  min-height: 100vh;
}
.app__sidebar { grid-area: sidebar; position: sticky; top: 0; align-self: start; block-size: 100vh; z-index: var(--z-sidebar); }
.app__topbar  { grid-area: topbar; }
.app__content { grid-area: content; min-width: 0; overflow: auto; }

.content-inner {
  max-width: var(--content-max);
  margin-inline: auto;
  padding: var(--content-pad);
}

/* ===================== Sidebar (§5.1) ===================== */
.sidebar {
  background: var(--color-primary);
  color: var(--color-on-primary);
  block-size: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
  z-index: var(--z-sidebar);
}
.sidebar__brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5);
  font-size: var(--text-h3);
  font-weight: var(--fw-bold);
  border-block-end: 1px solid rgba(255,255,255,0.12);
}
.sidebar__brand-logo {
  width: 36px; height: 36px;
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.16);
  display: grid; place-items: center;
  font-size: 1.1rem;
}
.sidebar__nav { padding: var(--space-3) var(--space-3); display: flex; flex-direction: column; gap: 2px; }
.sidebar__section-label {
  font-size: var(--text-caption);
  text-transform: none;
  color: rgba(255,255,255,0.55);
  padding: var(--space-4) var(--space-4) var(--space-1);
  font-weight: var(--fw-semibold);
}
.sidebar__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  padding-inline: var(--space-4);
  border-radius: var(--radius-md);
  color: var(--color-on-primary);
  opacity: 0.85;
  position: relative;
  transition: background .12s, opacity .12s;
}
.sidebar__item:hover { background: rgba(255,255,255,0.10); opacity: 1; text-decoration: none; }
.sidebar__item--active {
  background: rgba(255,255,255,0.16);
  opacity: 1;
}
.sidebar__item--active::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block: 8px;
  width: 3px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
}
.sidebar__icon { display: inline-flex; align-items: center; justify-content: center; flex: none; }
.sidebar__icon svg { width: 20px; height: 20px; }

/* ===== حالة طيّ الشريط الجانبي (ديسكتوب) ===== */
/* العمود يضيق إلى var(--sidebar-width-collapsed)؛ تبقى الأيقونات + title/aria-label فقط. */
@media (min-width: 992px) {
  .app--sidebar-collapsed { grid-template-columns: var(--sidebar-width-collapsed) 1fr; }
  .app--sidebar-collapsed .sidebar__item span:not(.sidebar__icon),
  .app--sidebar-collapsed .sidebar__section-label,
  .app--sidebar-collapsed .sidebar__brand span { display: none; }
  .app--sidebar-collapsed .sidebar__item { justify-content: center; padding-inline: var(--space-3); }
  .app--sidebar-collapsed .sidebar__brand { justify-content: center; padding-inline: var(--space-3); }
  .app--sidebar-collapsed .sidebar__nav { align-items: stretch; }
}

/* ===================== Topbar (§5.2) ===================== */
.topbar {
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  border-block-end: 1px solid var(--color-border);
  height: var(--topbar-height);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding-inline: var(--space-5);
  position: sticky;
  top: 0;
  z-index: var(--z-topbar);
}
.topbar__spacer { flex: 1; }
.topbar__title { font-weight: var(--fw-bold); font-size: var(--text-h4); color: var(--color-text); }
.topbar__collapse {
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; cursor: pointer;
  color: var(--color-text-muted);
  width: 40px; height: 40px; border-radius: var(--radius-md);
}
.topbar__collapse:hover { background: var(--color-surface-alt); color: var(--color-text); }
.topbar__collapse .sidebar__icon svg { width: 22px; height: 22px; }
/* زر الطيّ للديسكتوب فقط — الموبايل يستخدم .sidebar-toggle المنزلق */
@media (max-width: 991px) { .topbar__collapse { display: none; } }
.topbar__year { display: flex; align-items: center; gap: var(--space-2); }
.topbar__year label { color: var(--color-text-muted); font-size: var(--text-small); }
.year-select {
  border: 1px solid var(--color-border-strong);
  background-color: var(--color-surface-alt);
  border-radius: var(--radius-md);
  padding-block: var(--space-2);
  padding-inline-end: var(--space-3);
  padding-inline-start: calc(var(--space-3) + 18px);
  min-block-size: 38px;
  font-size: var(--text-small);
  font-weight: var(--fw-medium);
  appearance: none; -webkit-appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235A6B7B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left var(--space-2) center;
  transition: border-color .14s ease, box-shadow .14s ease;
}
.year-select:hover { border-color: var(--color-primary); }
.year-select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(15,76,92,0.16); }
.year-select::-ms-expand { display: none; }
.usermenu { position: relative; }
.usermenu__trigger {
  display: flex; align-items: center; gap: var(--space-3);
  background: none; border: 1px solid transparent; cursor: pointer;
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-2);
  color: inherit;
}
.usermenu__trigger:hover { background: var(--color-surface-alt); }
.usermenu__avatar {
  width: 36px; height: 36px;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: var(--color-on-primary);
  display: grid; place-items: center;
  font-weight: var(--fw-bold);
}
.usermenu__name { font-weight: var(--fw-semibold); font-size: var(--text-small); }
.usermenu__meta { display: flex; flex-direction: column; line-height: 1.3; text-align: start; }
.usermenu__caret { display: inline-flex; color: var(--color-text-muted); transition: transform .15s; }
.usermenu__caret svg { width: 16px; height: 16px; }
.usermenu__trigger[aria-expanded="true"] .usermenu__caret { transform: rotate(180deg); }

.usermenu__panel {
  position: absolute;
  inset-block-start: calc(100% + var(--space-2));
  inset-inline-end: 0;
  min-width: 200px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: var(--space-1);
  z-index: var(--z-dropdown);
  display: flex; flex-direction: column; gap: 2px;
}
.usermenu__panel[hidden] { display: none; }
.usermenu__item-form { display: flex; }
.usermenu__item {
  display: flex; align-items: center; width: 100%;
  text-align: start;
  background: none; border: 0; cursor: pointer;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-small);
  color: var(--color-text);
}
.usermenu__item:hover { background: var(--color-surface-alt); text-decoration: none; }
.usermenu__item--danger { color: var(--color-danger); }
.usermenu__item--danger:hover { background: var(--color-danger-soft); }

/* ===================== Page header (§5.11) ===================== */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-block-end: var(--space-5);
  flex-wrap: wrap;
}
.page-header__titles { display: flex; flex-direction: column; gap: var(--space-1); }
.breadcrumb { display: flex; gap: var(--space-2); color: var(--color-text-muted); font-size: var(--text-small); flex-wrap: wrap; }
.breadcrumb a { color: var(--color-text-muted); }
.breadcrumb__sep { color: var(--color-text-disabled); }
.page-header__meta { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }

/* ===================== Buttons (§5.3) ===================== */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  border:1px solid transparent; border-radius:var(--radius-md);
  font-weight:var(--fw-semibold); font-size:var(--text-body); line-height:1;
  block-size:42px; padding-inline:var(--space-5);
  cursor:pointer; white-space:nowrap; text-decoration:none;
  transition:background .14s ease,border-color .14s ease,color .14s ease,box-shadow .14s ease,transform .06s ease;
}
.btn:hover { text-decoration:none; }
.btn:active { transform:translateY(1px); }
.btn--sm { block-size:34px; font-size:var(--text-small); padding-inline:var(--space-4); border-radius:var(--radius-sm); }
.btn--lg { block-size:48px; padding-inline:var(--space-6); font-size:var(--text-h4); }
.btn--block { inline-size:100%; }
.btn:focus-visible { outline:3px solid var(--color-focus-ring); outline-offset:2px; }

/* الإجراء الأساسي: تدرّج لطيف + ظل ملوّن بلون primary لإحساس بارز "قابل للضغط". */
.btn--primary {
  background:linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
  color:var(--color-on-primary);
  box-shadow:0 1px 2px rgba(15,28,38,0.10), 0 4px 12px rgba(15,76,92,0.22);
}
.btn--primary:hover {
  background:linear-gradient(180deg, var(--color-primary-hover) 0%, var(--color-primary-active) 100%);
  box-shadow:0 2px 4px rgba(15,28,38,0.12), 0 6px 16px rgba(15,76,92,0.28);
}
.btn--primary:active { background:var(--color-primary-active); box-shadow:0 1px 2px rgba(15,76,92,0.30); }

.btn--secondary { background:var(--color-surface); color:var(--color-primary); border-color:var(--color-border-strong); box-shadow:var(--shadow-sm); }
.btn--secondary:hover { background:var(--color-primary-soft); border-color:var(--color-primary); }
.btn--secondary:active { background:var(--color-primary-soft); box-shadow:none; }
.btn--ghost { background:transparent; color:var(--color-text); }
.btn--ghost:hover { background:var(--color-surface-alt); }
.btn--ghost:active { background:var(--color-surface-muted); }
.btn--danger {
  background:linear-gradient(180deg, var(--color-danger) 0%, var(--color-danger-hover) 100%);
  color:#fff;
  box-shadow:0 1px 2px rgba(15,28,38,0.10), 0 4px 12px rgba(179,38,30,0.22);
}
.btn--danger:hover { box-shadow:0 2px 4px rgba(15,28,38,0.12), 0 6px 16px rgba(179,38,30,0.28); }
.btn--danger:active { box-shadow:0 1px 2px rgba(179,38,30,0.30); }
.btn--danger-ghost { background:transparent; color:var(--color-danger); }
.btn--danger-ghost:hover { background:var(--color-danger-soft); }
.btn:disabled, .btn[aria-disabled="true"] { opacity:.5; cursor:not-allowed; box-shadow:none; transform:none; }
.btn:disabled:active, .btn[aria-disabled="true"]:active { transform:none; }
.btn[aria-busy="true"] { pointer-events: none; }

.btn__spinner { width: 1em; height: 1em; border: 2px solid currentColor; border-block-start-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }

/* ===================== Fields (§5.4) — outlined على طراز Material ===================== */
.field { display: flex; flex-direction: column; gap: var(--space-2); margin-block-end: var(--space-4); }
.field__label { font-weight: var(--fw-semibold); font-size: var(--text-small); color: var(--color-text); }
.field__label .req { color: var(--color-danger); margin-inline-start: 2px; }

/* الحقل القياسي: outlined نظيف، ارتفاع مريح 44px، حواف متّسقة (radius-md)، خلفية surface. */
.field__input, .field select, .field textarea, .input {
  width: 100%;
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  padding-block: var(--space-2);
  padding-inline: var(--space-4);
  min-height: 44px;
  text-align: start;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color .14s ease, box-shadow .14s ease, background .14s ease;
}
.field__input:hover, .field select:hover, .field textarea:hover, .input:hover {
  border-color: var(--color-primary);
}
/* focus على طراز Material: border يتحوّل primary + حلقة لطيفة شفّافة بلون primary. */
.field__input:focus, .field select:focus, .field textarea:focus, .input:focus,
.field__input:focus-visible, .field select:focus-visible, .field textarea:focus-visible, .input:focus-visible {
  border-color: var(--color-primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(15,76,92,0.16);
}
.field textarea { min-height: 92px; resize: vertical; line-height: var(--lh-body); }
.field__hint { color: var(--color-text-muted); font-size: var(--text-caption); }
.field__error { color: var(--color-danger); font-size: var(--text-caption); font-weight: var(--fw-medium); }

/* select مخصّص: شيفرون SVG عبر background على الجهة الصحيحة في RTL (inset-inline-end = اليسار). */
.field select, select.input {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235A6B7B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left var(--space-3) center;
  /* مساحة كافية لليسار كي لا يتداخل النص مع السهم */
  padding-inline-end: var(--space-4);
  padding-inline-start: calc(var(--space-4) + 18px);
  cursor: pointer;
}
[dir="ltr"] .field select, [dir="ltr"] select.input { background-position: right var(--space-3) center; padding-inline-start: var(--space-4); padding-inline-end: calc(var(--space-4) + 18px); }
.field select:hover, select.input:hover { background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230F4C5C' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); }
.field select::-ms-expand, select.input::-ms-expand { display: none; }

.field--error .field__input,
.field--error select,
.field--error textarea {
  border-color: var(--color-danger);
  background: var(--color-danger-soft);
}
.field--error .field__input:focus,
.field--error select:focus,
.field--error textarea:focus {
  box-shadow: 0 0 0 3px rgba(179,38,30,0.16);
}
::placeholder { color: var(--color-text-disabled); }

/* حقول التاريخ/الوقت/الملف تتّسق مع باقي الحقول (ترث القاعدة العامة أعلاه). */
.field input[type="date"], .field input[type="time"], .field input[type="datetime-local"],
.field input[type="month"], .field input[type="week"] { cursor: text; }
[dir="rtl"] .field input[type="date"]::-webkit-calendar-picker-indicator,
[dir="rtl"] .field input[type="time"]::-webkit-calendar-picker-indicator,
[dir="rtl"] .field input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  margin-inline-start: 0; margin-inline-end: auto;
}
.field input[type="date"]::-webkit-calendar-picker-indicator,
.field input[type="time"]::-webkit-calendar-picker-indicator,
.field input[type="datetime-local"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .7; }
.field input[type="date"]::-webkit-calendar-picker-indicator:hover,
.field input[type="time"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
.field input[type="file"] { padding-block: var(--space-2); padding-inline: var(--space-3); cursor: pointer; line-height: 1.4; }
.field input[type="file"]::file-selector-button {
  appearance: none; border: 1px solid var(--color-border-strong);
  background: var(--color-surface-alt); color: var(--color-primary);
  font: inherit; font-weight: var(--fw-semibold); font-size: var(--text-small);
  border-radius: var(--radius-sm); padding: var(--space-1) var(--space-3);
  margin-inline-end: var(--space-3); cursor: pointer;
  transition: background .12s, border-color .12s;
}
.field input[type="file"]::file-selector-button:hover { background: var(--color-primary-soft); border-color: var(--color-primary); }

/* checkbox / radio: accent بلون النظام + هدف ضغط مريح ومحاذاة عمودية صحيحة. */
.field input[type="checkbox"], .field input[type="radio"],
input.checkbox, input.radio {
  appearance: auto; -webkit-appearance: auto;
  accent-color: var(--color-primary);
  width: 18px; height: 18px; min-height: 0;
  margin: 0; padding: 0;
  border-radius: var(--radius-sm);
  cursor: pointer; flex: none;
  box-shadow: none;
}
.field input[type="radio"], input.radio { border-radius: 50%; }
.field input[type="checkbox"]:focus-visible, .field input[type="radio"]:focus-visible,
input.checkbox:focus-visible, input.radio:focus-visible {
  outline: 3px solid var(--color-focus-ring); outline-offset: 2px;
}
/* صفّ خيار قابل للنقر (label يحتوي checkbox/radio) */
.check-row, .radio-row {
  display: flex; align-items: center; gap: var(--space-2);
  min-height: 44px; cursor: pointer;
  font-size: var(--text-body); font-weight: var(--fw-regular);
}

/* الحقول للقراءة فقط — مكتومة بصريًا لتوضيح أنها غير قابلة للتعديل */
.field__input[readonly],
.field input[readonly],
.field textarea[readonly] {
  background: var(--color-surface-muted, #F1F4F7);
  color: var(--color-text-muted);
  border-color: var(--color-border);
  cursor: not-allowed;
}
.field__input[readonly]:focus,
.field input[readonly]:focus,
.field textarea[readonly]:focus { box-shadow: none; border-color: var(--color-border); }
/* disabled مكتوم */
.field__input:disabled, .field select:disabled, .field textarea:disabled, .input:disabled {
  background: var(--color-surface-muted, #F1F4F7);
  color: var(--color-text-disabled);
  border-color: var(--color-border);
  cursor: not-allowed;
}

/* money input suffix */
.input-money { position: relative; }
.input-money__suffix {
  position: absolute;
  inset-inline-start: var(--space-3);
  inset-block: 0;
  display: flex; align-items: center;
  color: var(--color-text-muted);
  font-size: var(--text-small);
  pointer-events: none;
}
.input-money input { padding-inline-start: var(--space-7); }

/* ===================== Datepicker / Timepicker / Filefield (موحّد) ===================== */
.dp { position: relative; }
.dp__display { padding-inline-end: calc(var(--space-4) + 28px); }
.dp__btn { position:absolute; inset-block:0; inset-inline-end:var(--space-2); width:28px; display:inline-flex; align-items:center; justify-content:center; background:none; border:0; cursor:pointer; color:var(--color-text-muted); }
.dp__btn:hover { color: var(--color-primary); }
.dp__pop { position:absolute; inset-inline-end:0; inset-block-start:calc(100% + var(--space-1)); z-index:var(--z-dropdown); background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-md); box-shadow:var(--shadow-md); padding:var(--space-4); width:320px; direction:rtl; }
.dp__pop[hidden] { display:none; }
.dp__pop--up { inset-block-start:auto; inset-block-end:calc(100% + var(--space-1)); }
.dp__head { display:flex; align-items:center; justify-content:space-between; gap:var(--space-2); margin-block-end:var(--space-2); }
.dp__nav { width:32px; height:32px; border-radius:var(--radius-sm); border:0; background:none; cursor:pointer; color:var(--color-text); }
.dp__nav:hover { background:var(--color-surface-alt); }
.dp__title { display:inline-flex; align-items:center; gap:var(--space-1); background:none; border:0; cursor:pointer; font-weight:var(--fw-semibold); font-size:var(--text-body); color:var(--color-text); border-radius:var(--radius-sm); padding:var(--space-1) var(--space-2); }
.dp__title:hover { background:var(--color-surface-alt); color:var(--color-primary); }
.dp__title:focus-visible { outline:3px solid var(--color-focus-ring); outline-offset:1px; }
.dp__title svg { width:14px; height:14px; }
.dp__grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.dp__dow { font-size:var(--text-caption); color:var(--color-text-muted); text-align:center; padding-block:var(--space-1); font-weight:var(--fw-semibold); }
.dp__day { aspect-ratio:1; border:0; background:none; border-radius:var(--radius-sm); cursor:pointer; font-size:var(--text-small); min-block-size:38px; color:var(--color-text); font-family:var(--font-numeric); }
.dp__day:hover { background:var(--color-primary-soft); color:var(--color-primary); }
.dp__day--other { color:var(--color-text-disabled); }
.dp__day--today { box-shadow:inset 0 0 0 1.5px var(--color-primary); font-weight:var(--fw-semibold); }
.dp__day[aria-selected="true"] { background:var(--color-primary); color:var(--color-on-primary); font-weight:var(--fw-semibold); }
.dp__day[aria-selected="true"]:hover { background:var(--color-primary-hover); color:var(--color-on-primary); }
.dp__day:focus-visible, .dp__nav:focus-visible { outline:3px solid var(--color-focus-ring); outline-offset:1px; }
.dp__foot { display:flex; justify-content:space-between; margin-block-start:var(--space-2); padding-block-start:var(--space-2); border-block-start:1px solid var(--color-border); }
.dp__monthgrid, .dp__yeargrid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-2); }
.dp__mon, .dp__yr { min-block-size:44px; border:0; background:none; cursor:pointer; border-radius:var(--radius-md); font-size:var(--text-small); color:var(--color-text); }
.dp__yr { font-family:var(--font-numeric); }
.dp__mon:hover, .dp__yr:hover { background:var(--color-primary-soft); color:var(--color-primary); }
.dp__mon--sel, .dp__yr--sel { background:var(--color-primary); color:var(--color-on-primary); font-weight:var(--fw-semibold); }
.dp__mon:focus-visible, .dp__yr:focus-visible { outline:3px solid var(--color-focus-ring); outline-offset:1px; }
.tp { display:inline-flex; align-items:center; gap:var(--space-1); inline-size:100%; background:var(--color-surface); border:1px solid var(--color-border-strong); border-radius:var(--radius-md); min-block-size:44px; padding-inline:var(--space-3); transition:border-color .14s ease, box-shadow .14s ease; }
.tp:hover { border-color:var(--color-primary); }
.tp:focus-within { border-color:var(--color-primary); box-shadow:0 0 0 3px rgba(15,76,92,0.16); }
.tp__sel { appearance:none; -webkit-appearance:none; border:0 !important; background:transparent !important; box-shadow:none !important; min-block-size:auto; min-width:0; padding:var(--space-2) var(--space-1); font-family:var(--font-numeric); font-size:var(--text-body); text-align:center; text-align-last:center; cursor:pointer; flex:0 1 auto; }
.tp__sel:focus { outline:none; box-shadow:none; }
.tp__sep { font-weight:var(--fw-bold); color:var(--color-text-muted); padding-block-end:2px; }
.field--error .tp { border-color:var(--color-danger); background:var(--color-danger-soft); }
.routes-modal__toolbar { display:flex; justify-content:flex-start; }
.routes-inline__head { display:flex; align-items:center; gap:var(--space-3); margin-block-end:var(--space-4); }
.routes-inline__title { font-size:var(--text-h4); font-weight:var(--fw-bold); }
.link-btn { background:none; border:0; padding:0; cursor:pointer; color:var(--color-primary); font:inherit; }
.link-btn:hover { text-decoration:underline; }
.filefield { display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap; }
.filefield__native { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.filefield__native:focus-visible + label.btn { outline:3px solid var(--color-focus-ring); outline-offset:2px; }
.filefield__name { font-size:var(--text-small); }
.checkbox-group { display:flex; flex-wrap:wrap; gap:var(--space-3) var(--space-5); }
@media (prefers-reduced-motion: reduce) { .dp__pop { animation:none; } }

/* ===================== Cards & stats (§5.6) ===================== */
.card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
}
.card__header {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3);
  padding-block-end: var(--space-3);
  margin-block-end: var(--space-4);
  border-block-end: 1px solid var(--color-border);
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
  margin-block-end: var(--space-6);
}
.stat {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}
.stat__icon {
  width: 44px; height: 44px;
  border-radius: var(--radius-pill);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  display: grid; place-items: center;
  font-size: 1.25rem;
  flex: none;
}
/* بطاقة الإحصائية كرابط (المتأخرات / طلاب بحاجة لسجل) */
a.stat { color: inherit; transition: box-shadow .12s, transform .12s; }
a.stat:hover { text-decoration: none; box-shadow: var(--shadow-md); }
a.stat:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; }
.stat__body { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.stat__label { color: var(--color-text-muted); font-size: var(--text-small); }
.stat-value { font-size: var(--text-h1); font-weight: var(--fw-bold); line-height: 1.2; }
.stat__sub { font-size: var(--text-caption); color: var(--color-text-muted); }
.stat--danger .stat-value { color: var(--color-danger); }
.stat--warning .stat-value { color: var(--color-warning); }
.stat--danger .stat__icon { background: var(--color-danger-soft); color: var(--color-danger); }

/* ===================== Badges (§5.7) ===================== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  border-radius: var(--radius-pill);
  font-size: var(--text-caption);
  font-weight: var(--fw-semibold);
  padding: var(--space-1) var(--space-3);
  white-space: nowrap;
}
.badge--paid { color: var(--color-success); background: var(--color-success-soft); }
.badge--partial { color: var(--color-warning); background: var(--color-warning-soft); }
.badge--unpaid { color: var(--color-danger); background: var(--color-danger-soft); }
.badge--active { color: var(--color-success); background: var(--color-success-soft); }
.badge--discharged { color: var(--color-text-muted); background: var(--color-surface-alt); }
.badge--manual { color: var(--color-text-muted); background: transparent; border: 1px solid var(--color-border-strong); }
.badge--info { color: var(--color-info); background: var(--color-info-soft); }
.badge--neutral { color: var(--color-text-muted); background: var(--color-surface-alt); }
.role-badge { color: var(--color-primary); background: var(--color-primary-soft); }

/* ===================== Data table (§5.5) ===================== */
.table-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.table-toolbar {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-4);
  flex-wrap: wrap;
  border-block-end: 1px solid var(--color-border);
}
.table-toolbar__search { flex: 1 1 240px; min-width: 200px; }
.table-toolbar__filters { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
/* فلاتر القائمة: نفس مظهر select المخصّص (outlined + شيفرون يسار في RTL). */
.table-toolbar__filters select {
  min-height: 40px; min-width: 140px;
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  padding-block: var(--space-2);
  padding-inline-end: var(--space-4);
  padding-inline-start: calc(var(--space-4) + 18px);
  appearance: none; -webkit-appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235A6B7B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left var(--space-3) center;
  transition: border-color .14s ease, box-shadow .14s ease;
}
.table-toolbar__filters select:hover { border-color: var(--color-primary); }
.table-toolbar__filters select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(15,76,92,0.16); }
.table-toolbar__filters select::-ms-expand { display: none; }
.table-toolbar__actions { margin-inline-start: auto; }

.table-scroll { overflow-x: auto; position: relative; min-height: 160px; }
table.table { width: 100%; border-collapse: collapse; font-size: var(--text-table); }
table.table thead th {
  position: sticky; top: 0;
  background: var(--color-surface-alt);
  text-align: start;
  font-weight: var(--fw-semibold);
  padding: var(--space-3) var(--space-4);
  border-block-end: 2px solid var(--color-border-strong);
  white-space: nowrap;
}
table.table tbody td {
  padding: var(--space-3) var(--space-4);
  border-block-end: 1px solid var(--color-border);
  vertical-align: middle;
}
table.table tbody tr { min-height: 48px; }
table.table tbody tr:nth-child(even) { background: var(--color-surface-alt); }
table.table tbody tr:hover { background: var(--color-primary-soft); }
/* اتساق محاذاة الإجراءات (RTL): الإجراء الأساسي عند بداية السطر المنطقية (يمين
   في RTL). نستخدم flex-start كي تتراصّ الأزرار/الإجراءات عند بداية القراءة. */
.table__actions { display: flex; gap: var(--space-2); justify-content: flex-start; align-items: center; }
/* أزرار إجراءات الصفوف: واضحة كأزرار صغيرة مرتّبة بحالة hover ملموسة. */
.table__actions .btn--sm { border-color: var(--color-border); }
.table__actions .btn--ghost { background: var(--color-surface-alt); color: var(--color-text); border-color: var(--color-border); }
.table__actions .btn--ghost:hover { background: var(--color-primary-soft); color: var(--color-primary); border-color: var(--color-primary); }
.table__actions .btn--danger-ghost { background: var(--color-surface-alt); border-color: var(--color-border); }
.table__actions .btn--danger-ghost:hover { background: var(--color-danger-soft); color: var(--color-danger); border-color: var(--color-danger); }
/* المبالغ تُحاذى للنهاية المنطقية لتتراصّ الأرقام عموديًا (tabular-nums). */
td.amount, th.amount { text-align: end; }

.table-footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-block-start: 1px solid var(--color-border);
  flex-wrap: wrap;
}
.table-footer__count { color: var(--color-text-muted); font-size: var(--text-small); }

/* table states */
.table-state {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
  text-align: center;
  padding: var(--space-8) var(--space-4);
  color: var(--color-text-muted);
}
.table-state__icon { font-size: 2rem; }
.table-error { background: var(--color-danger-soft); color: var(--color-danger); border-radius: var(--radius-md); }

/* loading overlay */
.table-loading {
  position: absolute; inset: 0;
  background: rgba(255,255,255,0.7);
  display: none;
  align-items: center; justify-content: center;
  gap: var(--space-2);
  color: var(--color-text-muted);
  z-index: 2;
}
.htmx-request .table-loading,
.table-loading.htmx-request { display: flex; }

/* ===================== Chips (§5.11) ===================== */
.chips { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-block-end: var(--space-3); }
.chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-caption);
}
.chip button { background: none; border: 0; cursor: pointer; color: var(--color-text-muted); }

/* ===================== Pagination ===================== */
.pagination { display: flex; gap: var(--space-1); align-items: center; }
.pagination .btn--sm { min-width: 36px; }
.pagination [aria-current="page"] { background: var(--color-primary); color: var(--color-on-primary); }

/* ===================== Tabs (§5.8) ===================== */
.tabs { display: flex; gap: var(--space-2); border-block-end: 2px solid var(--color-border); margin-block-end: var(--space-5); }
.tab {
  background: none; border: 0;
  padding: var(--space-3) var(--space-4);
  color: var(--color-text-muted);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  border-block-end: 3px solid transparent;
  margin-block-end: -2px;
  text-decoration: none;
}
.tab:hover { color: var(--color-text); }
.tab--active, .tab[aria-selected="true"] { color: var(--color-primary); border-block-end-color: var(--color-primary); }

/* ===================== Modal (§5.9) ===================== */
.modal__overlay {
  position: fixed; inset: 0;
  background: var(--color-overlay);
  z-index: var(--z-modal);
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-4);
}
.modal__dialog {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 640px;
  max-height: 90vh;
  overflow: auto;
  padding: var(--space-6);
}
.modal__dialog--sm { max-width: 480px; }
.modal__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-block-end: var(--space-4); }
.modal__close { background: none; border: 0; cursor: pointer; font-size: 1.25rem; color: var(--color-text-muted); width: 36px; height: 36px; border-radius: var(--radius-sm); }
.modal__close:hover { background: var(--color-surface-alt); }
.modal__body { margin-block-end: var(--space-5); }
/* القرار الموحّد (RTL): الإجراء الأساسي عند بداية السطر المنطقية (flex-start = يمين
   في RTL)، متّسق مع .table__actions و .pagination. */
.modal__footer { display: flex; gap: var(--space-2); justify-content: flex-start; }

/* ===================== نموذج كصفحة كاملة (المرحلة C) ===================== */
/* أزرار إجراء النموذج (رجوع/حفظ) بنفس منطق RTL لـ modal__footer. */
.form-page { }
.form-actions {
  display: flex;
  gap: var(--space-2);
  justify-content: flex-start;
  margin-block-start: var(--space-5);
}

/* ===================== Toast (§5.10) ===================== */
.toasts {
  position: fixed;
  inset-block-start: calc(var(--topbar-height) + var(--space-3));
  inset-inline-end: var(--space-4); /* أعلى-يمين: بداية القراءة العربية */
  z-index: var(--z-toast);
  display: flex; flex-direction: column; gap: var(--space-2);
  width: min(360px, calc(100vw - 2 * var(--space-4)));
}
.toast {
  display: flex; align-items: flex-start; gap: var(--space-2);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border-inline-start: 4px solid var(--color-info);
  animation: toast-in .2s ease;
}
.toast__body { flex: 1; font-size: var(--text-small); }
.toast__close { background: none; border: 0; cursor: pointer; color: var(--color-text-muted); }
.toast--success { background: var(--color-success-soft); border-inline-start-color: var(--color-success); }
.toast--error { background: var(--color-danger-soft); border-inline-start-color: var(--color-danger); }
.toast--warning { background: var(--color-warning-soft); border-inline-start-color: var(--color-warning); }
.toast--info { background: var(--color-info-soft); border-inline-start-color: var(--color-info); }
/* toast «تحميل»: سبينر متّسق مع .btn__spinner، بلا زر إغلاق. */
.toast--loading { align-items: center; }
.toast__spinner {
  flex: 0 0 auto;
  width: 1em; height: 1em;
  border: 2px solid var(--color-info);
  border-block-start-color: transparent;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}

/* ===================== Login (§6.1) ===================== */
.login-wrap {
  min-height: 100vh;
  display: grid; place-items: center;
  padding: var(--space-5);
  background: var(--color-bg);
}
.login-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-7);
  width: 100%; max-width: 400px;
}
.login-card__brand { text-align: center; margin-block-end: var(--space-5); }
.login-card__logo {
  width: 56px; height: 56px; margin-inline: auto;
  border-radius: var(--radius-md);
  background: var(--color-primary-soft); color: var(--color-primary);
  display: grid; place-items: center; font-size: 1.5rem; font-weight: var(--fw-bold);
  margin-block-end: var(--space-3);
}
.login-credit { text-align: center; margin-block-start: var(--space-5); font-size: var(--text-caption); color: var(--color-text-muted); }

/* ===================== Alerts (inline) ===================== */
.alert { border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); font-size: var(--text-small); display: flex; gap: var(--space-2); align-items: flex-start; }
.alert--error { background: var(--color-danger-soft); color: var(--color-danger); }
.alert--info { background: var(--color-info-soft); color: var(--color-info); }
.alert--success { background: var(--color-success-soft); color: var(--color-success); }
.alert--warning { background: var(--color-warning-soft); color: var(--color-warning); }

/* ===================== Forms layout (§5.12) ===================== */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.form-grid .field--full { grid-column: 1 / -1; }
fieldset { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4); margin-block-end: var(--space-4); }
legend { font-weight: var(--fw-semibold); padding-inline: var(--space-2); }

/* ===================== Definition list (profile) ===================== */
.dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-5); }
.dl dt { color: var(--color-text-muted); font-size: var(--text-small); }
.dl dd { font-weight: var(--fw-medium); }

/* ===================== Dashboard ===================== */
.dashboard__welcome { color: var(--color-text-muted); font-size: var(--text-body); }
.dashboard__welcome strong { color: var(--color-text); }

.dash-grid { display:grid; grid-template-columns:2fr 1fr; gap:var(--space-5); align-items:start; }
@media (max-width:991px){ .dash-grid { grid-template-columns:1fr; } }
.dash-col { display:flex; flex-direction:column; gap:var(--space-5); }
.chart-bars { display:flex; gap:var(--space-3); align-items:flex-end; block-size:180px; padding-block-start:var(--space-3); }
.chart-bars__col { flex:1; display:flex; flex-direction:column; align-items:center; gap:var(--space-2); block-size:100%; justify-content:flex-end; }
.chart-bars__bar { inline-size:60%; min-block-size:4px; background:var(--color-primary); border-radius:var(--radius-sm) var(--radius-sm) 0 0; transition:block-size .3s; }
.chart-bars__col:last-child .chart-bars__bar { background:var(--color-accent); }
.chart-bars__label { font-size:var(--text-caption); color:var(--color-text-muted); }
.bar-list { display:flex; flex-direction:column; gap:var(--space-3); }
.bar-row { display:grid; grid-template-columns:120px 1fr max-content; gap:var(--space-3); align-items:center; font-size:var(--text-small); }
.bar-track { background:var(--color-surface-alt); border-radius:var(--radius-pill); block-size:10px; overflow:hidden; }
.bar-fill { block-size:100%; background:var(--color-accent); border-radius:var(--radius-pill); }

/* قائمة "يحتاج انتباهك" + النشاط الأخير */
.attn-list { display:flex; flex-direction:column; gap:var(--space-2); }
.attn-item {
  display:flex; align-items:flex-start; gap:var(--space-3);
  padding:var(--space-3);
  border-radius:var(--radius-md);
  border:1px solid var(--color-border);
  color:inherit;
}
a.attn-item { transition:background .12s, border-color .12s; }
a.attn-item:hover { text-decoration:none; background:var(--color-surface-alt); border-color:var(--color-border-strong); }
.attn-item__icon { flex:none; display:inline-flex; }
.attn-item__body { display:flex; flex-direction:column; gap:2px; min-width:0; }
.attn-item__title { font-weight:var(--fw-semibold); font-size:var(--text-small); }
.attn-item__sub { font-size:var(--text-caption); color:var(--color-text-muted); }
.attn-item--danger { border-inline-start:3px solid var(--color-danger); }
.attn-item--warning { border-inline-start:3px solid var(--color-warning); }
.attn-empty { display:flex; flex-direction:column; align-items:center; gap:var(--space-2); text-align:center; padding:var(--space-5) var(--space-3); color:var(--color-text-muted); }
.attn-empty__icon { color:var(--color-success); }

/* كتلة الإجراءات السريعة البارزة */
.quick-actions { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:var(--space-3); }
.quick-action {
  display:flex; align-items:center; gap:var(--space-3);
  padding:var(--space-4);
  border-radius:var(--radius-md);
  border:1px solid var(--color-border);
  background:var(--color-surface);
  color:inherit;
  font-weight:var(--fw-semibold);
}
.quick-action:hover { text-decoration:none; border-color:var(--color-primary); background:var(--color-primary-soft); }
.quick-action--primary { background:var(--color-primary); color:var(--color-on-primary); border-color:var(--color-primary); box-shadow:var(--shadow-sm); }
.quick-action--primary:hover { background:var(--color-primary-hover); border-color:var(--color-primary-hover); }
.quick-action__icon { flex:none; display:inline-flex; }
.quick-action__body { display:flex; flex-direction:column; gap:2px; min-width:0; }
.quick-action__sub { font-size:var(--text-caption); font-weight:var(--fw-regular); opacity:.85; }

/* ===================== Dev credit footer ===================== */
.dev-credit { text-align: center; color: var(--color-text-muted); font-size: var(--text-caption); padding: var(--space-5); }

/* ===================== Audit diff (§6.12) ===================== */
.audit-details summary { cursor: pointer; display: inline-flex; list-style: none; }
.audit-details summary::-webkit-details-marker { display: none; }
.audit-diff { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-block-start: var(--space-2); }
.audit-json {
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-2);
  font-size: var(--text-caption);
  max-height: 240px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  direction: ltr;
  text-align: start;
}
@media (max-width: 991px) { .audit-diff { grid-template-columns: 1fr; } }

/* ===================== Animations ===================== */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes toast-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* htmx indicator default */
.htmx-indicator { opacity: 0; transition: opacity .15s; }
.htmx-request .htmx-indicator { opacity: 1; }
.htmx-request.htmx-indicator { opacity: 1; }

/* ===================== Directional icons (RTL) ===================== */
/* أي أيقونة اتجاهية (سهم/شيفرون أفقي) تُقلب أفقيًا في RTL. الشيفرون الرأسي
   (كاريت القائمة المنسدلة) لا يتأثر لأن القلب الأفقي محايد عليه. */
[dir="rtl"] .icon--directional svg { transform: scaleX(-1); }

/* ===================== Utilities ===================== */
.u-flex { display: flex; }
.u-gap-2 { gap: var(--space-2); }
.u-gap-3 { gap: var(--space-3); }
.u-mt-3 { margin-block-start: var(--space-3); }
.u-mt-4 { margin-block-start: var(--space-4); }
.u-mb-4 { margin-block-end: var(--space-4); }
.u-hidden { display: none !important; }
.u-muted { color: var(--color-text-muted); }
.u-right { margin-inline-start: auto; }

/* ===================== Responsive (§4.6) ===================== */
@media (max-width: 1199px) {
  .form-grid { grid-template-columns: 1fr; }
}
@media (max-width: 991px) {
  /* الشريط المنزلق المُخفى (translateX) يُحسب ضمن عرض التمرير؛ نمنع التمرير الأفقي. */
  html, body { overflow-x: hidden; }
  .app {
    grid-template-columns: 1fr;
    grid-template-rows: var(--topbar-height) 1fr;
    grid-template-areas: "topbar" "content";
    overflow-x: hidden;
  }
  .app__sidebar {
    position: fixed;
    inset-block: 0;
    /* التطبيق RTL دائمًا؛ نثبّت الشريط فيزيائيًا على اليمين (right:0) لأن بعض
       محرّكات العرض لا تحلّ inset-inline-end على عنصر fixed بشكل صحيح. */
    right: 0;
    left: auto;
    inset-inline-end: 0;
    inline-size: var(--sidebar-width);
    /* translateX(100%) يدفعه يمينًا خارج الشاشة (وراء الحافة اليمنى) عند الإغلاق.
       في RTL، translateX(100%) ينعكس فيُصبح يسارًا؛ لذا نستخدم قيمة فيزيائية. */
    transform: translateX(100%);
    transition: transform .2s;
    z-index: var(--z-modal);
  }
  .app--sidebar-open .app__sidebar { transform: translateX(0); }
  .app--sidebar-open .app__scrim {
    position: fixed; inset: 0;
    background: var(--color-overlay); z-index: calc(var(--z-modal) - 1);
  }

  /* ضبط الشريط العلوي على الموبايل كي لا يفيض أفقيًا */
  .topbar { gap: var(--space-2); padding-inline: var(--space-3); }
  .topbar__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .topbar__year label { display: none; }       /* نُبقي القائمة المنسدلة فقط */
  .usermenu__meta { display: none; }            /* نُبقي الأفاتار فقط */
}
.sidebar-toggle { display: none; background: none; border: 0; cursor: pointer; font-size: 1.4rem; }
@media (max-width: 991px) {
  .sidebar-toggle { display: inline-flex; }
}

/* ===================== التقارير (§6.11) ===================== */
/* شريط التبويبات الفرعي للتقارير — يلتفّ على الشاشات الضيّقة */
.report-tabs { flex-wrap: wrap; }

/* الاختيار المتعدّد للسنوات/المراحل + أزرار تحديد الكل/مسح */
.report-filters select[multiple] {
  min-height: 6.5rem;
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-2);
  font: inherit;
  background: var(--color-surface);
}
.report-filters select[multiple]:focus {
  outline: none; border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(15, 76, 92, 0.16);
}
.report-filters .ms-actions { display: flex; gap: var(--space-2); margin-block-start: var(--space-2); }

/* جداول التقارير + تمييز صفوف المجاميع الفرعية/العامة */
.report-table caption.report-table__caption {
  text-align: start;
  font-weight: var(--fw-semibold);
  color: var(--color-primary);
  padding: var(--space-2) 0;
}
.report-table tfoot .report-subtotal th,
.report-table tfoot .report-subtotal td {
  font-weight: var(--fw-bold);
  background: var(--color-surface-muted);
}
.report-grand { margin-block-start: var(--space-4); }
.report-grand h3 { margin-block-end: var(--space-3); color: var(--color-primary); }