/* ===========================================================================
   Tasneef Portal — application component layer
   ---------------------------------------------------------------------------
   Built ON TOP of the Tasnef Design System tokens in /css/tokens/*, and
   matched to the "Tasnef Admin Dashboard" design: measurements below are taken
   from that design rather than invented.

   Design decisions carried over verbatim:
     · The page is WHITE. Separation comes from #EDEDED hairlines plus a
       0 1px 2px rgba(0,0,0,.02) micro-shadow — not from a grey band.
     · Sidebar 230px, purple. Nav items 8px radius; the active item is a white
       pill with purple ink.
     · Stat cards 14px radius; section cards 16px; buttons are pills.
     · Table header sits on #F9F9F9 with the OUTER corners rounded.
     · Success is the Facilities green #0A4333 on #E7F1ED. Purple stays the
       brand and marks actions and figures.
     · Hover on a filled button INVERTS it; never darkens.

   NUMERALS: every digit rendered by the app goes through src/lib/format.js,
   which emits Latin digits and Gregorian dates. Templates must not call
   toLocaleDateString. `.num` additionally forces LTR + tabular figures so
   columns of numbers align.

   Contents
     1  Base            6  Cards / stats     11  Steps / breadcrumb
     2  Layout          7  Alerts            12  Modal
     3  Buttons         8  Tables            13  Empty / pager / misc
     4  Forms           9  Toolbar           14  Auth
     5  Chips / badges  10 Tabs              15  Shell · 16 Errors · 17 Print
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. Base
   --------------------------------------------------------------------------- */
:root {
  /* Portal-level additions the design uses but the token mirror has no name for */
  --success-ink: #0a4333;   /* Facilities green — the design's "مكتمل" badge */
  --success-bg:  #e7f1ed;
  --warning-ink: #7a5b00;
  --warning-bg:  #fdf6dc;
  --warning-dot: #c9a400;
  --neutral-ink: #6c6c6c;
  --neutral-bg:  #f4f4f4;
  --brand-soft-bg: #f4effa;  /* "قيد التطوير" badge fill */
  --row-line: #f1f1f1;       /* table row separator, lighter than the hairline */
  --card-shadow: 0 1px 2px rgba(0, 0, 0, .02);
  --sidebar-width: 230px;
}

body {
  min-height: 100dvh;
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard);
}

a { color: var(--text-link); }
a:hover { color: var(--text-link-hover); }
[hidden] { display: none !important; }

p { line-height: 1.9; text-wrap: pretty; }

.muted { color: var(--text-muted); }
.link  { color: var(--text-link); font-weight: var(--font-weight-medium); }
.link:hover { opacity: .7; }
.nowrap { white-space: nowrap; }

/* Numbers, codes, dates: always LTR and tabular so columns line up. */
.num {
  font-family: var(--font-family-numeric);
  font-variant-numeric: tabular-nums;
  direction: ltr;
  unicode-bidi: isolate;
}

/* Slim scrollbars, as the design specifies */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #00000022; border-radius: 10px; }
::-webkit-scrollbar-track { background: transparent; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ---------------------------------------------------------------------------
   2. Layout
   --------------------------------------------------------------------------- */
.stack { display: flex; flex-direction: column; gap: var(--space-4); }
.row   { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.row--between { justify-content: space-between; }
.grid  { display: grid; gap: 16px; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

/* Page header: actions on one side, title block on the other. wrap-reverse
   keeps the title above the actions when it wraps on narrow screens. */
.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap-reverse;
}
.page-head__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.page-head__text-block { text-align: start; }
.page-head__title { margin-bottom: 6px; font-size: 26px; font-weight: var(--font-weight-medium); color: var(--text-heading); }
.page-head__text  { font-size: var(--font-size-sm); color: var(--text-muted); }

.section-title { font: var(--type-h3); text-align: center; }

/* The four-point sparkle, the brand's signature motif */
.sparkle {
  display: inline-block;
  width: 1em; height: 1em;
  background: currentColor;
  -webkit-mask: url("/img/sparkle.svg") center / contain no-repeat;
  mask: url("/img/sparkle.svg") center / contain no-repeat;
}

/* ---------------------------------------------------------------------------
   3. Buttons — pills; hover inverts
   --------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 11px 24px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: 1.2;
  cursor: pointer;
  transition: all .4s var(--ease-standard);
}
.btn:hover { text-decoration: none; }
.btn svg { width: 17px; height: 17px; flex: none; }

.btn--primary {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: var(--text-on-brand);
}
.btn--primary:hover:not(:disabled) { background: var(--surface-card); color: var(--brand-primary); }

/* The design's secondary: white with a grey outline, filling purple on hover */
.btn--secondary {
  background: var(--surface-card);
  border-color: var(--border-field);
  color: var(--text-body);
  font-weight: var(--font-weight-regular);
}
.btn--secondary:hover:not(:disabled) {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: var(--text-on-brand);
}

/* Outline in brand purple — for the canonical filled + outline pairing */
.btn--outline {
  background: transparent;
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}
.btn--outline:hover:not(:disabled) { background: var(--brand-primary); color: var(--text-on-brand); }

.btn--deep {
  background: var(--surface-brand-deep);
  border-color: var(--surface-brand-deep);
  color: var(--text-on-brand);
}
.btn--deep:hover:not(:disabled) { background: var(--surface-card); color: var(--surface-brand-deep); }

.btn--light {
  background: var(--white);
  border-color: var(--white);
  color: var(--brand-primary);
}
.btn--light:hover:not(:disabled) { background: transparent; color: var(--text-on-brand); }

.btn--ghost {
  background: transparent;
  border-color: var(--border-hairline);
  color: var(--text-body);
  font-weight: var(--font-weight-regular);
}
.btn--ghost:hover:not(:disabled) {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: var(--text-on-brand);
}

.btn--danger {
  background: var(--state-danger);
  border-color: var(--state-danger);
  color: var(--white);
}
.btn--danger:hover:not(:disabled) { background: var(--surface-card); color: var(--state-danger); }

.btn--sm { padding: 8px 18px; font-size: 13px; }
.btn--lg { padding: 14px 30px; font-size: var(--font-size-md); }
.btn--block { width: 100%; }

.btn:disabled,
.btn.is-loading {
  background: var(--grey-150);
  border-color: var(--grey-150);
  color: var(--grey-400);
  cursor: not-allowed;
}

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 36px; height: 36px;
  background: transparent;
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-circle);
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-standard);
}
.icon-btn:hover { color: var(--brand-primary); border-color: var(--brand-primary); }
.icon-btn svg { width: 17px; height: 17px; }

.spinner {
  width: 15px; height: 15px;
  border: 2px solid rgba(0, 0, 0, .18);
  border-top-color: var(--grey-400);
  border-radius: var(--radius-circle);
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------------------
   4. Forms
   --------------------------------------------------------------------------- */
.form { display: flex; flex-direction: column; gap: 18px; }
.form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }

.field { display: flex; flex-direction: column; gap: 8px; }
.field__label { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--text-heading); }
.field__label .req { color: var(--state-danger); }

.field__input,
.field__select,
.field__textarea {
  width: 100%;
  min-height: var(--control-height-md);
  padding-inline: var(--space-4);
  background: var(--surface-field);
  border: 1px solid var(--border-field);
  border-radius: var(--radius-md);
  color: var(--text-body);
  font-family: inherit;
  transition: border-color var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
}
.field__textarea { padding-block: 13px; min-height: 110px; resize: vertical; line-height: 1.7; }

.field__input::placeholder,
.field__textarea::placeholder { color: var(--grey-400); }

.field__input:hover, .field__select:hover, .field__textarea:hover { border-color: var(--grey-400); }

.field__input:focus, .field__select:focus, .field__textarea:focus {
  outline: none;
  border-color: var(--border-brand);
  box-shadow: 0 0 0 3px var(--brand-primary-soft);
}

.field__input--error, .field__select--error { border-color: var(--state-danger); }
.field__input--error:focus { box-shadow: 0 0 0 3px var(--state-danger-soft); }
.field__input:disabled, .field__select:disabled { background: var(--grey-150); color: var(--grey-400); cursor: not-allowed; }

.field__select {
  appearance: none;
  padding-inline-end: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5 10 12.5 15 7.5' stroke='%236c6c6c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left var(--space-4) center;
  background-size: 20px;
}
[dir='ltr'] .field__select { background-position: right var(--space-4) center; }

/* Phone, email, IBAN, iqama — values that must read left to right */
.field__input--ltr { direction: ltr; text-align: start; }

.field__group { position: relative; display: flex; align-items: center; }
.field__group .field__input { padding-inline-end: 52px; }

.field__toggle {
  position: absolute;
  inset-inline-end: 5px;
  display: grid; place-items: center;
  width: 39px; height: 39px;
  background: transparent;
  border: 0;
  border-radius: var(--radius-circle);
  color: var(--text-subtle);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-standard);
}
.field__toggle:hover { color: var(--brand-primary); background: var(--brand-soft-bg); }
.field__toggle svg { width: 19px; height: 19px; }

.field__hint  { font-size: var(--font-size-xs); color: var(--text-muted); }
.field__error { font-size: 13px; color: var(--state-danger); }

.check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: var(--font-size-sm); }
.check input { width: 18px; height: 18px; accent-color: var(--brand-primary); cursor: pointer; }

.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: var(--font-size-sm); }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch__track {
  width: 44px; height: 26px; padding: 3px;
  background: var(--grey-300);
  border-radius: var(--radius-pill);
  transition: background-color var(--duration-fast) var(--ease-standard);
}
.switch__thumb {
  display: block; width: 20px; height: 20px;
  background: var(--white);
  border-radius: var(--radius-circle);
  transition: transform var(--duration-fast) var(--ease-standard);
}
.switch input:checked + .switch__track { background: var(--brand-primary); }
.switch input:checked + .switch__track .switch__thumb { transform: translateX(-18px); }
[dir='ltr'] .switch input:checked + .switch__track .switch__thumb { transform: translateX(18px); }
.switch input:focus-visible + .switch__track { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* ---------------------------------------------------------------------------
   5. Chips and badges
   --------------------------------------------------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding-inline: 13px;
  background: var(--surface-chip);
  border: 1px solid transparent;
  border-radius: var(--radius-md);   /* 10px — pills are for buttons only */
  font-size: 13px;
  color: var(--text-body);
  transition: all var(--duration-fast) var(--ease-standard);
}
.chip--selectable { cursor: pointer; }
.chip--selectable:hover { border-color: var(--brand-accent); }
.chip.is-selected { background: var(--brand-soft-bg); border-color: var(--brand-primary); color: var(--brand-primary); }
.chip__remove {
  display: grid; place-items: center;
  width: 18px; height: 18px;
  background: transparent; border: 0;
  border-radius: var(--radius-circle);
  color: var(--text-subtle);
  cursor: pointer;
}
.chip__remove:hover { background: var(--grey-200); color: var(--text-body); }

/* Status badge — the design's pill with a leading dot */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs);
  white-space: nowrap;
}
.badge__dot { width: 6px; height: 6px; border-radius: var(--radius-circle); background: currentColor; display: inline-block; }

.badge--brand   { background: var(--brand-soft-bg); color: var(--brand-primary); }
.badge--brand .badge__dot { background: var(--brand-accent); }
.badge--success { background: var(--success-bg); color: var(--success-ink); }
.badge--warning { background: var(--warning-bg); color: var(--warning-ink); }
.badge--warning .badge__dot { background: var(--warning-dot); }
.badge--danger  { background: var(--state-danger-soft); color: var(--state-danger); }
.badge--neutral { background: var(--neutral-bg); color: var(--neutral-ink); }

/* ---------------------------------------------------------------------------
   6. Cards and stat tiles
   --------------------------------------------------------------------------- */
.card {
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-lg);      /* 16px */
  box-shadow: var(--card-shadow);
  overflow: hidden;
}
.card + .card { margin-top: 22px; }
.card--panel { border-radius: var(--radius-panel); }
.card--flush .card__body { padding: 0; }

.card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 18px 22px;
  border-bottom: 1px solid var(--border-hairline);
}
.card__title { font-size: 17px; font-weight: var(--font-weight-medium); color: var(--text-heading); }
.card__body  { padding: 20px 22px; }
.card__foot  {
  display: flex; gap: 10px; justify-content: flex-end;
  padding: 16px 22px;
  background: var(--surface-section);
  border-top: 1px solid var(--border-hairline);
}

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
.stat {
  padding: 18px 20px;
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-radius: 14px;
  box-shadow: var(--card-shadow);
}
.stat__label { margin-bottom: 6px; font-size: 13px; color: var(--text-muted); }
.stat__value {
  font-family: var(--font-family-numeric);
  font-variant-numeric: tabular-nums;
  font-size: 30px;
  font-weight: var(--font-weight-bold);
  line-height: 1.1;
  color: var(--brand-primary);
}
/* When the "value" is words rather than a figure */
.stat__value--text { font-size: 19px; font-family: var(--font-family-core); }
.stat__value--ink  { color: var(--text-heading); }
.stat__meta { margin-top: 6px; font-size: var(--font-size-xs); color: var(--text-muted); }

/* ---------------------------------------------------------------------------
   7. Alerts
   --------------------------------------------------------------------------- */
.alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
}
.alert p { line-height: 1.6; }
.alert__icon { flex: none; width: 19px; height: 19px; margin-top: 2px; }

.alert--error   { background: var(--state-danger-soft);  border-color: var(--alert-danger-border);  color: var(--state-danger); }
.alert--success { background: var(--success-bg);         border-color: var(--alert-success-border); color: var(--success-ink); }
.alert--warning { background: var(--warning-bg);         border-color: var(--alert-warning-border); color: var(--warning-ink); }
.alert--info    { background: var(--brand-soft-bg);      border-color: var(--alert-info-border);    color: var(--brand-primary); }

:root {
  --alert-danger-border:  #f0c9c9;
  --alert-success-border: #cfe3dc;
  --alert-warning-border: #f0d9ac;
  --alert-info-border:    var(--purple-100);
}

/* ---------------------------------------------------------------------------
   8. Tables — header band with rounded outer corners
   --------------------------------------------------------------------------- */
.table-wrap { width: 100%; overflow-x: auto; }

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}
.table thead tr { background: var(--surface-section); }
.table thead th {
  padding: 12px 16px;
  font-weight: var(--font-weight-medium);
  color: var(--text-muted);
  text-align: start;
  white-space: nowrap;
}
/* Round the band's outer ends (RTL: first cell is on the right) */
.table thead th:first-child { border-radius: 0 8px 8px 0; }
.table thead th:last-child  { border-radius: 8px 0 0 8px; }
[dir='ltr'] .table thead th:first-child { border-radius: 8px 0 0 8px; }
[dir='ltr'] .table thead th:last-child  { border-radius: 0 8px 8px 0; }

.table tbody td {
  padding: 14px 16px;
  color: var(--text-body);
  border-bottom: 1px solid var(--row-line);
}
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background-color var(--duration-fast) var(--ease-standard); }
.table tbody tr:hover { background: var(--surface-section); }
.table tbody tr.is-selected { background: var(--brand-soft-bg); }

.table .is-center { text-align: center; }
.table .is-end    { text-align: end; }
.table .is-muted  { color: var(--text-muted); }
.table .is-actions { width: 1%; white-space: nowrap; }
.table td.is-num {
  font-family: var(--font-family-numeric);
  font-variant-numeric: tabular-nums;
  direction: ltr;
  unicode-bidi: isolate;
}

/* ---------------------------------------------------------------------------
   9. Toolbar / filters
   --------------------------------------------------------------------------- */
.toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 14px 16px;
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-radius: 14px;
  box-shadow: var(--card-shadow);
  margin-bottom: 16px;
}
.toolbar__search { flex: 1 1 220px; min-width: 180px; }
.toolbar__spacer { flex: 1; }
.toolbar .field__input,
.toolbar .field__select { min-height: var(--control-height-sm); }

/* ---------------------------------------------------------------------------
   10. Tabs
   --------------------------------------------------------------------------- */
.tabs {
  display: flex;
  gap: 26px;
  border-bottom: 1px solid var(--border-hairline);
  margin-bottom: 18px;
  overflow-x: auto;
}
.tab {
  position: relative;
  padding: 13px 0;
  background: none; border: 0;
  font-family: inherit;
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--duration-fast) var(--ease-standard);
}
.tab:hover { color: var(--text-body); }
.tab.is-active { color: var(--brand-primary); font-weight: var(--font-weight-medium); }
.tab.is-active::after {
  content: '';
  position: absolute; inset-inline: 0; bottom: -1px;
  height: 2px; background: var(--brand-primary); border-radius: var(--radius-xs);
}

/* ---------------------------------------------------------------------------
   11. Steps and breadcrumb
   --------------------------------------------------------------------------- */
.steps { display: flex; gap: 14px; justify-content: center; margin-bottom: 24px; }
.step { flex: 0 1 160px; text-align: center; }
.step__bar { height: 3px; background: var(--grey-200); border-radius: var(--radius-xs); transition: background-color var(--duration-base) var(--ease-standard); }
.step__label { margin-top: 10px; font-size: var(--font-size-xs); color: var(--text-subtle); }
.step.is-done .step__bar   { background: var(--brand-accent); }
.step.is-active .step__bar { background: var(--brand-primary); }
.step.is-active .step__label { color: var(--brand-primary); font-weight: var(--font-weight-medium); }

.crumbs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; font-size: var(--font-size-xs); }
.crumbs a { color: var(--text-crumb); }
.crumbs a:hover { color: var(--brand-primary); }
.crumbs__sep { color: var(--text-crumb); }
.crumbs__current { color: var(--text-body); }

/* ---------------------------------------------------------------------------
   12. Modal
   --------------------------------------------------------------------------- */
.modal {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center;
  padding: var(--space-4);
  background: var(--overlay-scrim);
}
.modal__panel {
  width: 100%; max-width: 560px; max-height: 88dvh;
  display: flex; flex-direction: column;
  background: var(--surface-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-modal);
  overflow: hidden;
}
.modal__header {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: 18px 22px;
  border-bottom: 1px solid var(--border-hairline);
}
.modal__title { font-size: 17px; font-weight: var(--font-weight-medium); }
.modal__body  { padding: 20px 22px; overflow-y: auto; }
.modal__foot  {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  padding: 16px 22px;
  background: var(--surface-section);
  border-top: 1px solid var(--border-hairline);
}

/* ---------------------------------------------------------------------------
   13. Empty state, pager, avatar, skeleton
   --------------------------------------------------------------------------- */
.empty { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 60px var(--space-5); text-align: center; }
.empty__mark  { font-size: 38px; color: var(--brand-accent); opacity: .5; }
.empty__title { font-size: 17px; font-weight: var(--font-weight-medium); }
.empty__text  { font-size: var(--font-size-sm); color: var(--text-muted); max-width: 380px; }

.pager { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding-top: 18px; }
.pager__info { font-size: var(--font-size-xs); color: var(--text-muted); }
.pager__controls { display: flex; gap: 6px; }
.pager__btn {
  min-width: 36px; height: 36px;
  display: grid; place-items: center;
  padding-inline: 10px;
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md);
  font-family: inherit; font-size: 13px;
  color: var(--text-body);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-standard);
}
.pager__btn:hover:not(:disabled) { border-color: var(--brand-primary); color: var(--brand-primary); }
.pager__btn.is-active { background: var(--brand-primary); border-color: var(--brand-primary); color: var(--text-on-brand); }
.pager__btn:disabled { opacity: .45; cursor: not-allowed; }

.avatar {
  display: grid; place-items: center;
  width: 38px; height: 38px; flex: none;
  background: var(--brand-soft-bg);
  color: var(--brand-primary);
  border-radius: var(--radius-circle);
  font-size: 13px; font-weight: var(--font-weight-medium);
}

.skeleton {
  background: linear-gradient(90deg, var(--grey-150) 25%, var(--grey-100) 37%, var(--grey-150) 63%);
  background-size: 400% 100%;
  border-radius: var(--radius-sm);
  animation: shimmer 1.4s ease infinite;
}
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* ===========================================================================
   14. Auth
   =========================================================================== */
.auth { display: grid; grid-template-columns: 1.05fr 1fr; min-height: 100dvh; }
.auth--single { grid-template-columns: 1fr; }

.auth__brand {
  position: relative;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 70px 50px;
  background: var(--surface-brand);
  color: var(--text-on-brand);
  overflow: hidden;
}
.auth__brand::after {
  content: '';
  position: absolute;
  inset-block-end: -14%; inset-inline-start: -14%;
  width: 62%; aspect-ratio: 1;
  background: currentColor;
  -webkit-mask: url("/img/sparkle.svg") center / contain no-repeat;
  mask: url("/img/sparkle.svg") center / contain no-repeat;
  opacity: .08;
  pointer-events: none;
}
.auth__brand-inner { position: relative; z-index: 1; }
.auth__logo { width: 182px; margin-bottom: 44px; }
.auth__logo img { width: 100%; height: auto; }
.auth__brand-title { font-size: var(--font-size-4xl); font-weight: var(--font-weight-medium); color: var(--text-on-brand); line-height: 1.35; }
.auth__brand-subtitle { margin-top: 10px; font-size: var(--font-size-xl); color: rgba(255, 255, 255, .74); }
.auth__features { margin-top: 44px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; }
.auth__features li {
  position: relative;
  padding-inline-start: 28px;
  font-size: var(--font-size-sm);
  color: rgba(255, 255, 255, .84);
}
.auth__features li::before {
  content: '';
  position: absolute; inset-inline-start: 0; top: .2em;
  width: 14px; height: 14px;
  background: var(--brand-accent);
  -webkit-mask: url("/img/sparkle.svg") center / contain no-repeat;
  mask: url("/img/sparkle.svg") center / contain no-repeat;
}
.auth__brand-footer { position: relative; z-index: 1; font-size: var(--font-size-xs); color: rgba(255, 255, 255, .55); }

.auth__panel {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 22px;
  padding: 50px var(--space-4);
  background: var(--surface-section);
}
.auth__card {
  width: 100%; max-width: 430px;
  padding: 40px;
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-float);
}
.auth__header { margin-bottom: 22px; }
.auth__title { font-size: 24px; font-weight: var(--font-weight-medium); }
.auth__subtitle { margin-top: 6px; font-size: var(--font-size-sm); color: var(--text-muted); }
.auth__card .alert { margin-bottom: 18px; }
.auth__footer {
  margin-top: 22px; padding-top: 18px;
  border-top: 1px solid var(--border-hairline);
  font-size: var(--font-size-xs); color: var(--text-muted); text-align: center;
}
.auth__copyright { font-size: var(--font-size-xs); color: var(--text-legal); }

@media (max-width: 860px) {
  .auth { grid-template-columns: 1fr; }
  .auth__brand {
    flex-direction: row; align-items: center; gap: 14px;
    padding: 18px;
    padding-top: calc(18px + env(safe-area-inset-top, 0px));
  }
  .auth__brand::after { display: none; }
  .auth__logo { width: 132px; margin-bottom: 0; }
  .auth__brand-inner { display: flex; align-items: center; gap: 14px; }
  .auth__brand-title, .auth__brand-subtitle, .auth__features, .auth__brand-footer { display: none; }
  .auth__panel { justify-content: flex-start; padding-top: 30px; }
  .auth__card { padding: 24px; box-shadow: var(--shadow-tile); }
}

/* ===========================================================================
   15. App shell
   =========================================================================== */
.shell { display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); min-height: 100dvh; background: var(--surface-page); }

.shell__sidebar {
  display: flex; flex-direction: column; gap: 2px;
  padding: 0 0 28px;
  background: var(--surface-brand);
  color: var(--text-on-brand);
  /* align-self:start is what makes position:sticky work inside the grid — a
     stretched item is already the full row height, so sticky has nothing to
     do. But "start" sizes the item to its CONTENT, which left the purple
     field ending partway down the page on tall screens. An explicit viewport
     height fixes that: the field always fills the screen, and a nav longer
     than the viewport scrolls inside it. */
  position: sticky; top: 0; align-self: start;
  height: 100dvh; overflow-y: auto;
}
.shell__brand { display: flex; justify-content: center; padding: 22px 18px 18px; }
.shell__brand img { height: 34px; width: auto; display: block; }

.nav__group-title {
  padding: 14px 18px 6px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: rgba(255, 255, 255, .6);
  letter-spacing: .02em;
}
.nav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.nav__link {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin: 0 10px;
  padding: 10px 14px;
  border-radius: 8px;
  color: var(--text-on-brand);
  font-size: var(--font-size-sm);
  transition: background-color var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard);
}
.nav__link:hover { background: rgba(255, 255, 255, .12); color: var(--text-on-brand); text-decoration: none; }
.nav__link.is-active {
  padding: 11px 14px;
  background: var(--white);
  color: var(--brand-primary);
  font-weight: var(--font-weight-medium);
}
.nav__link.is-planned { color: rgba(255, 255, 255, .85); cursor: default; }
.nav__link.is-planned:hover { background: rgba(255, 255, 255, .12); }

.nav__badge {
  flex: none;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .12);
  font-size: 10px;
  color: rgba(255, 255, 255, .8);
}

.shell__main { display: flex; flex-direction: column; min-width: 0; }

/* The bar itself is full-bleed (its border must reach both edges); the inner
   wrapper carries the layout and is capped to the same width as .content, so
   the header lines up with the page beneath it on wide monitors. */
.topbar {
  position: sticky; top: 0; z-index: 5;
  display: flex;
  height: 68px;
  padding: 0 26px;
  padding-top: env(safe-area-inset-top, 0px);
  background: var(--surface-card);
  border-bottom: 1px solid var(--border-hairline);
}
.topbar__title { font-size: var(--font-size-lg); font-weight: var(--font-weight-medium); color: var(--text-heading); }
.topbar__menu {
  display: none; flex-direction: column; justify-content: center; gap: 4px;
  width: 38px; height: 38px; padding-inline: 8px;
  background: transparent;
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md);
  cursor: pointer;
}
.topbar__menu span { display: block; height: 2px; background: var(--text-body); border-radius: var(--radius-xs); }
.topbar__user { display: flex; align-items: center; gap: 14px; }
.topbar__identity { text-align: start; line-height: 1.35; }
.topbar__identity strong { display: block; font-size: 13px; font-weight: var(--font-weight-bold); color: var(--text-heading); }
.topbar__identity span   { display: block; font-size: var(--font-size-xs); color: var(--text-muted); }

/* Sun / moon switch, matching the design's header control */
.theme-toggle {
  display: flex; align-items: center; gap: 2px;
  padding: 4px;
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-pill);
}
.theme-toggle__btn {
  display: grid; place-items: center;
  width: 30px; height: 30px;
  background: transparent;
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard);
}
.theme-toggle__btn img,
.theme-toggle__btn svg { width: 15px; height: 15px; opacity: .55; }
.theme-toggle__btn:hover { background: var(--surface-chip); }
.theme-toggle__btn.is-active { background: #f2eef7; }
.theme-toggle__btn.is-active img,
.theme-toggle__btn.is-active svg { opacity: 1; }

.content {
  flex: 1;
  display: flex; flex-direction: column; gap: 22px;
  /* Cap the reading width on large monitors. Without this the dashboard
     stretched the full width of the screen, which makes headings and table
     rows uncomfortably long. Wide tables still scroll inside .table-wrap. */
  width: 100%;
  max-width: var(--container-max);   /* 1320px */
  margin-inline: auto;
  padding: 28px 26px 48px;
  padding-bottom: calc(48px + env(safe-area-inset-bottom, 0px));
}

/* Screens wide enough that even the capped column floats in space: keep the
   topbar aligned with the content beneath it rather than hugging the edges. */
.topbar__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
}

.shell__scrim { position: fixed; inset: 0; z-index: 25; background: var(--overlay-scrim); }

@media (max-width: 1024px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .shell__sidebar {
    position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 30;
    width: var(--sidebar-width);
    max-height: 100dvh;
    transform: translateX(100%);
    transition: transform var(--duration-fast) var(--ease-standard);
    box-shadow: var(--shadow-modal);
  }
  [dir='ltr'] .shell__sidebar { transform: translateX(-100%); }
  .shell__sidebar.is-open { transform: translateX(0); }
  .topbar { padding: 0 16px; }
  .topbar__inner { justify-content: flex-start; gap: 12px; }
  .topbar__menu { display: flex; }
  .topbar__title { flex: 1; }
  .topbar__identity { display: none; }
  .content { padding: 20px 16px 40px; }
}

/* ===========================================================================
   16. Error page
   =========================================================================== */
.error-page { display: grid; place-items: center; min-height: 100dvh; padding: var(--space-5); background: var(--surface-section); }
.error-page__inner { max-width: 480px; text-align: center; }
.error-page__status {
  font-family: var(--font-family-numeric);
  font-size: 44px; font-weight: var(--font-weight-bold);
  color: var(--brand-primary);
  direction: ltr;
}
.error-page__title { margin-top: 8px; font-size: 24px; font-weight: var(--font-weight-medium); }
.error-page__message { margin-top: 10px; color: var(--text-muted); }
.error-page__actions { margin-top: 24px; }
.error-page__detail {
  margin-top: 18px; padding: var(--space-4);
  background: var(--surface-chip);
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
  text-align: start; direction: ltr;
  overflow-x: auto; white-space: pre-wrap; word-break: break-word;
}

/* ===========================================================================
   17. Styleguide (development only)
   =========================================================================== */
.sg__section { margin-bottom: 44px; }
.sg__heading { padding-bottom: 10px; margin-bottom: 18px; border-bottom: 1px solid var(--border-hairline); font-size: 17px; font-weight: var(--font-weight-medium); }
.sg__row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.sg__swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 14px; }
.sg__swatch { border: 1px solid var(--border-hairline); border-radius: var(--radius-md); overflow: hidden; }
.sg__swatch-chip { height: 56px; }
.sg__swatch-name { padding: 10px; font-size: var(--font-size-xs); }
.sg__note { font-size: var(--font-size-xs); color: var(--text-muted); margin-bottom: 14px; }

/* ===========================================================================
   18. Print
   =========================================================================== */
@media print {
  .shell__sidebar, .topbar, .shell__scrim, .toolbar, .pager, .btn, .modal { display: none !important; }
  .shell { grid-template-columns: 1fr; }
  body, .shell__main { background: var(--white); }
  .content { padding: 0; }
  .card { border: 1px solid var(--grey-300); box-shadow: none; }
}

/* ---------------------------------------------------------------------------
   Public report share  (/r/:token)
   ---------------------------------------------------------------------------
   The one set of screens a client sees. No sidebar, no navigation, nothing
   that implies there is a system behind it — a shared report is a document,
   not an application window. Built on the same tokens as everything else so
   it still looks like Tasnef.
   --------------------------------------------------------------------------- */
.share {
  max-width: 900px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-4) var(--space-10);
}

.share--center {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80vh;
}

.share__head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);
  flex-wrap: wrap;
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: var(--space-6);
}

.share__logo { height: 28px; width: auto; }

.share__title {
  font-size: var(--font-size-2xl);
  font-weight: 600;
  margin: 0 0 var(--space-2);
  color: var(--text-strong);
}

.share__meta {
  margin: 0 0 var(--space-1);
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

.share__card {
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
}

.share__card--notice { text-align: center; max-width: 420px; }
.share__card--notice .share__logo { margin-bottom: var(--space-5); }

.share__section-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  margin: 0 0 var(--space-3);
  color: var(--text-strong);
}

.share__badge {
  display: inline-block;
  font-size: var(--font-size-xs);
  font-weight: 400;
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  color: var(--text-muted);
  margin-inline-start: var(--space-2);
  vertical-align: middle;
}

.share__text { margin: 0 0 var(--space-3); line-height: 1.7; }
.share__text--muted { color: var(--text-muted); font-size: var(--font-size-sm); }

.share__phase {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-muted);
  margin: var(--space-4) 0 var(--space-2);
}

/* auto-fill, so one photograph does not stretch across the whole row */
.share__gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-3);
}

.share__figure { margin: 0; }

.share__image {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  background: var(--surface-sunken);
}

.share__caption {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  margin-top: var(--space-1);
}

.share__foot {
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-subtle);
  text-align: center;
}

@media (max-width: 600px) {
  .share__image { height: 140px; }
  .share__gallery { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}