/* ============================================================================
   "Ink & Clay" theme layer for Serenity
   ----------------------------------------------------------------------------
   Loaded last in the Base CSS bundle, after Bootstrap and Serenity's own theme.

   Strategy: define the design tokens once, then REMAP Bootstrap's variables
   onto them, so stock Serenity components inherit the identity instead of being
   overridden selector by selector. Only the chrome that Bootstrap variables
   cannot reach is styled directly.

   Every text colour below was contrast-checked; see docs/04-design-system.md.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600&display=swap');

:root {
  /* ---- Ink: structure, navigation, primary action ---- */
  --ink-950:#0C1728; --ink-900:#12203A; --ink-800:#16263F; --ink-700:#1E3355;
  --ink-600:#2A4470; --ink-500:#3A578C; --ink-300:#8FA2C0; --ink-200:#C2CDDE;
  --ink-100:#DFE6EF; --ink-50:#EEF2F8;

  /* ---- Clay: brand and accent, used sparingly ---- */
  --clay-700:#8F4A2E; --clay-600:#A3563A; --clay-500:#B0603F;
  --clay-100:#F0DDD1; --clay-50:#FAF0E9;

  /* ---- Stone: warm neutrals, never pure grey ---- */
  --stone-950:#1C1B19; --stone-700:#4A4741; --stone-600:#5C584F; --stone-500:#6F6B63;
  --stone-400:#9A958C; --stone-300:#C4BFB6; --stone-250:#D6D2C9;
  --stone-200:#E5E2DB; --stone-150:#EDEAE4; --stone-100:#F2F0EB; --stone-50:#F7F6F3;

  /* ---- Clinical semantics ---- */
  --jade-800:#155E45; --jade-700:#047857; --jade-500:#10B981;
  --jade-200:#A7E8CE; --jade-100:#D1FAE5; --jade-50:#ECFDF5;
  --amber-800:#92400E; --amber-700:#B45309; --amber-600:#D97706;
  --amber-500:#F59E0B; --amber-200:#FCD9A0; --amber-100:#FDEBC8; --amber-50:#FFFBEB;
  --garnet-800:#8C1D18; --garnet-700:#B42318; --garnet-600:#D13A2A;
  --garnet-500:#F04438; --garnet-200:#FDC9C4; --garnet-100:#FEE4E2; --garnet-50:#FEF3F2;
  --violet-700:#6941C6; --violet-500:#9E77ED; --violet-100:#EBE3FD; --violet-50:#F5F1FE;

  /* ---- Bootstrap remap: this is what carries the identity everywhere ---- */
  --bs-primary:#16263F;
  --bs-primary-rgb:22,38,63;
  --bs-secondary:#6F6B63;
  --bs-success:#047857;   --bs-success-rgb:4,120,87;
  --bs-warning:#B45309;   --bs-warning-rgb:180,83,9;
  --bs-danger:#B42318;    --bs-danger-rgb:180,35,24;
  --bs-info:#1E3355;
  --bs-body-bg:#F7F6F3;
  --bs-body-color:#1C1B19;
  --bs-secondary-color:#4A4741;
  --bs-border-color:#E5E2DB;
  --bs-border-radius:8px;
  --bs-border-radius-sm:6px;
  --bs-border-radius-lg:12px;
  --bs-link-color:#1E3355;
  --bs-link-hover-color:#16263F;
  --bs-font-sans-serif:"IBM Plex Sans Arabic","Segoe UI",Tahoma,Arial,sans-serif;
  --bs-body-font-family:"IBM Plex Sans Arabic","Segoe UI",Tahoma,Arial,sans-serif;
  --bs-body-font-size:14px;
}

/* ---------------------------------------------------------------- typography */
body, .s-Layout, input, select, textarea, button, .ui-widget {
  font-family: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif !important;
}
body { background: var(--stone-50); color: var(--stone-950); font-size: 14px; }
h1,h2,h3,h4,h5 { font-weight: 600; letter-spacing: -.01em; color: var(--stone-950); }

/* Latin runs inside Arabic text — emails, phones, IDs — stay legible and aligned */
.num, [dir="ltr"] { font-variant-numeric: tabular-nums; }

/* ================================================================= app shell
   A fixed icon rail carries the module groups; a contextual pane carries the
   screens inside the selected group. Laid out entirely with logical properties
   so the whole shell mirrors from the `dir` attribute rather than from a
   duplicated RTL stylesheet.

   Sized against the worst case we agreed on: a 1366x768 laptop (the navigation
   must fit 768px of height with no scrollbar) that is also touched (every
   target is at least 44px). Nine groups fit today with room to spare; the rail
   grows by adding buttons, not by capping how many modules may exist.
   ========================================================================= */
:root {
  --mn-rail-w: 92px;
  --mn-pane-w: 236px;
  --mn-top-h: 52px;
  --mn-nav-w: calc(var(--mn-rail-w) + var(--mn-pane-w));
}
body.s-sidebar-pane-collapsed { --mn-nav-w: var(--mn-rail-w); }

/* ---- rail ---------------------------------------------------------------- */
.mn-rail {
  position: fixed; inset-block: 0; inset-inline-start: 0;
  inline-size: var(--mn-rail-w); z-index: 1032;
  display: flex; flex-direction: column;
  background: var(--ink-900);
}
.mn-rail-brand {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; min-block-size: 58px; text-decoration: none; flex: none;
  border-block-end: 1px solid rgba(255,255,255,.09);
}
.mn-mark { inline-size: 100%; block-size: 100%; display: block; }
.mn-rail-mark {
  inline-size: 24px; block-size: 24px; display: block;
  color: #fff; --mn-mark-accent: var(--clay-500);
}
.mn-rail-wordmark { font-size: 12.5px; font-weight: 600; color: #fff; letter-spacing: .01em; }

.mn-rail-nav { flex: 1 1 auto; display: flex; flex-direction: column; padding-block: 6px; }
.mn-rail-foot { flex: none; padding-block: 6px; border-block-start: 1px solid rgba(255,255,255,.09); }

.mn-rail-btn {
  position: relative; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px;
  inline-size: 100%; min-block-size: 54px; padding: 6px 5px;
  border: none; background: none; text-decoration: none; cursor: pointer;
  color: rgba(255,255,255,.66);
  transition: color .14s cubic-bezier(.22,.61,.36,1),
              background-color .14s cubic-bezier(.22,.61,.36,1);
}
.mn-rail-btn > i { font-size: 17px; line-height: 17px; }
.mn-rail-label {
  font-size: 11.5px; line-height: 13.5px; font-weight: 500; text-align: center;
  max-inline-size: 84px; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; word-break: break-word;
}
.mn-rail-btn:hover  { color: #fff; background: rgba(255,255,255,.07); }
.mn-rail-btn.open   { color: #fff; background: rgba(255,255,255,.10); }
.mn-rail-btn.active { color: #fff; background: rgba(255,255,255,.13); font-weight: 600; }
/* Clay marker on the inline-start edge marks where you are, not where you hover */
.mn-rail-btn.active::before {
  content: ""; position: absolute; inset-inline-start: 0; inset-block: 7px;
  inline-size: 3px; border-radius: 3px; background: var(--clay-500);
}

.mn-rail-user .dropdown-menu.mn-user-menu {
  min-inline-size: 218px; border: 1px solid var(--stone-200); border-radius: 12px;
  box-shadow: 0 16px 32px rgba(12,23,40,.18); padding: 6px;
}
.mn-user-card {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px 12px;
  border-block-end: 1px solid var(--stone-150); margin-block-end: 6px;
}
.mn-user-avatar {
  inline-size: 34px; block-size: 34px; border-radius: 9px; flex: none;
  display: grid; place-items: center; background: var(--ink-50); color: var(--ink-700);
}
.mn-user-name { font-size: 13.5px; font-weight: 600; color: var(--stone-950); }
.mn-user-menu .dropdown-item {
  display: flex; align-items: center; gap: 9px; min-block-size: 40px;
  border-radius: 8px; font-size: 13.5px; color: var(--stone-700);
}
.mn-user-menu .dropdown-item:hover { background: var(--stone-50); color: var(--stone-950); }
.mn-user-menu .dropdown-item > i { inline-size: 16px; color: var(--stone-400); }

/* ---- contextual pane ----------------------------------------------------- */
.s-sidebar.mn-pane {
  position: fixed; left: auto; right: auto; top: 0; bottom: 0;
  inset-block: 0; inset-inline-start: var(--mn-rail-w);
  width: var(--mn-pane-w); inline-size: var(--mn-pane-w);
  transform: none; z-index: 1031; display: block;
  transition: transform .2s cubic-bezier(.22,.61,.36,1);
}
.s-sidebar.mn-pane .s-sidebar-pane.mn-pane-inner {
  position: absolute; inset: 0; inline-size: 100%; width: 100%;
  display: flex; flex-direction: column;
  background: #fff; border-inline-end: 1px solid var(--stone-200);
}
body.s-sidebar-pane-collapsed .s-sidebar.mn-pane {
  transform: translateX(-100%); pointer-events: none;
}
html[dir=rtl] body.s-sidebar-pane-collapsed .s-sidebar.mn-pane { transform: translateX(100%); }

.mn-pane-head {
  flex: none; display: flex; align-items: center; gap: 8px;
  min-block-size: var(--mn-top-h); padding-inline: 16px 8px;
  border-block-end: 1px solid var(--stone-200);
  background: linear-gradient(var(--stone-50), #fff);
}
.mn-pane-title {
  margin: 0; font-size: 13.5px; font-weight: 600; letter-spacing: -.005em;
  color: var(--stone-950); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mn-pane-collapse {
  margin-inline-start: auto; flex: none;
  inline-size: 30px; block-size: 30px; border-radius: 8px;
  border: 1px solid transparent; background: none; color: var(--stone-400);
  transition: background-color .14s, color .14s, border-color .14s;
}
.mn-pane-collapse:hover { background: var(--stone-100); color: var(--stone-700); border-color: var(--stone-200); }
/* The chevron points where the pane goes, not where the content is.
   In RTL the pane sits on the right and collapses rightwards
   (translateX(100%)), so the arrow must point right — mirroring it here made
   it point at the content instead, which reads as "open" rather than "close".
   The base glyph is fa-angle-double-right, so RTL needs no flip at all; LTR
   is the case that does. */
html:not([dir=rtl]) .mn-pane-collapse > i { transform: scaleX(-1); }

.mn-pane-search { flex: none; position: relative; padding: 10px 12px; }
.mn-pane-search-icon {
  position: absolute; inset-inline-start: 22px; inset-block-start: 50%;
  transform: translateY(-50%); font-size: 12.5px; color: var(--stone-400); pointer-events: none;
}
.s-sidebar-search-input.mn-pane-search-input {
  inline-size: 100%; min-block-size: 36px; padding-inline: 32px 10px;
  border: 1px solid var(--stone-250); border-radius: 8px; background: var(--stone-50);
  font-size: 13px; color: var(--stone-950); line-height: normal;
}
.s-sidebar-search-input.mn-pane-search-input::placeholder { color: var(--stone-400); }
.s-sidebar-search-input.mn-pane-search-input:focus {
  background: #fff; border-color: var(--ink-600); box-shadow: 0 0 0 3px var(--ink-100);
}

/* Any scrollbar here would be an admission the grouping failed. One group's
   screens always fit; the rule below only matters on a very short viewport. */
.mn-pane-scroll {
  flex: 1 1 auto; overflow-y: auto; padding: 4px 8px 12px;
  scrollbar-width: thin; scrollbar-color: var(--stone-250) transparent;
}
.mn-pane-scroll::-webkit-scrollbar { inline-size: 6px; }
.mn-pane-scroll::-webkit-scrollbar-thumb { background: var(--stone-250); border-radius: 3px; }
.mn-pane-scroll::-webkit-scrollbar-track { background: transparent; }

.mn-pane-list, .mn-pane-sub { list-style: none; margin: 0; padding: 0; }
.mn-pane-sub { padding-inline-start: 22px; }
.s-sidebar-link.mn-pane-link {
  position: relative; display: flex; align-items: center; gap: 10px;
  min-block-size: 44px; padding-inline: 10px; border-radius: 8px;
  font-size: 13.5px; font-weight: 500; color: var(--stone-700); text-decoration: none;
  transition: background-color .14s cubic-bezier(.22,.61,.36,1), color .14s;
}
.mn-pane-icon { flex: none; inline-size: 17px; font-size: 14px; color: var(--stone-400); text-align: center; }
.s-sidebar-link.mn-pane-link:hover { background: var(--stone-50); color: var(--stone-950); }
.s-sidebar-link.mn-pane-link:hover .mn-pane-icon { color: var(--stone-700); }
.mn-pane-item.active > .s-sidebar-link.mn-pane-link {
  background: var(--ink-50); color: var(--ink-900); font-weight: 600;
}
.mn-pane-item.active > .s-sidebar-link.mn-pane-link .mn-pane-icon { color: var(--ink-700); }
.mn-pane-item.active > .s-sidebar-link.mn-pane-link::before {
  content: ""; position: absolute; inset-inline-start: 0; inset-block: 10px;
  inline-size: 3px; border-radius: 3px; background: var(--clay-500);
}

/* While searching, every group is in scope, so each list names itself and
   lists with no surviving item drop out entirely. */
body.mn-searching .mn-pane-list::before {
  content: attr(data-title); display: block;
  padding: 12px 10px 4px; font-size: 10.5px; font-weight: 600;
  letter-spacing: .05em; color: var(--stone-400);
}
body.mn-searching .mn-pane-list:not(:has(.s-sidebar-item:not(.non-match))) { display: none; }

/* ---- top bar ------------------------------------------------------------- */
.mn-top {
  position: fixed; inset-block-start: 0; inset-inline-start: var(--mn-nav-w); inset-inline-end: 0;
  block-size: var(--mn-top-h); z-index: 1020;
  display: flex; align-items: center; gap: 12px; padding-inline: 20px;
  background: #fff; border-block-end: 1px solid var(--stone-200);
  transition: inset-inline-start .2s cubic-bezier(.22,.61,.36,1);
}
.mn-top-crumbs { display: flex; align-items: center; gap: 7px; min-inline-size: 0; }
.mn-crumb {
  font-size: 12.5px; font-weight: 500; color: var(--stone-500);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mn-crumb.current { font-weight: 600; color: var(--stone-950); }
/* The chevron is a direction, so it flips with the document rather than being
   hard-coded to point left. */
.mn-crumb-sep { font-size: 11px; color: var(--stone-300); }
html:not([dir=rtl]) .mn-crumb-sep { transform: scaleX(-1); }
.mn-top-actions { margin-inline-start: auto; display: flex; align-items: center; gap: 4px; }
.mn-top-link {
  display: grid; place-items: center; inline-size: 36px; block-size: 36px;
  border-radius: 8px; color: var(--stone-500); font-size: 17px; text-decoration: none;
}
.mn-top-link:hover { background: var(--stone-50); color: var(--stone-950); }
.s-sidebar-toggler.mn-top-toggler {
  display: none; inline-size: 36px; block-size: 36px; flex: none;
  border: none; background: none; color: var(--stone-700); font-size: 18px;
}

/* ---- content ------------------------------------------------------------- */
.s-main {
  padding-left: 0; padding-right: 0;
  padding-inline-start: var(--mn-nav-w); padding-block-start: var(--mn-top-h);
  transition: padding-inline-start .2s cubic-bezier(.22,.61,.36,1);
  min-block-size: 100vh;
}
@media (min-width: 1200px) {
  .s-main { padding-left: 0; padding-right: 0; padding-inline-start: var(--mn-nav-w); }
  .s-sidebar.mn-pane { transform: none; }
  body.s-sidebar-pane-collapsed .s-sidebar.mn-pane { transform: translateX(-100%); }
  html[dir=rtl] body.s-sidebar-pane-collapsed .s-sidebar.mn-pane { transform: translateX(100%); }
}
.s-main > .content { padding: 20px 24px 32px; }
.s-main > .content > .content-header { padding: 0; margin: 0; background: none; border: none; }

/* An off-canvas panel is moved with a transform, and a transform still counts
   towards the document's scrollable area — which made every page on a phone
   scroll sideways into empty space. `clip` removes that overflow without
   turning the root into a scroll container, so sticky positioning survives. */
html { overflow-x: clip; }

/* The dimmed layer behind the pane on a phone. Driven purely by the body class
   so it stays in step with Serenity's own hamburger toggler. */
.mn-scrim { display: none; }

/* Below the laptop width the pane becomes a temporary layer over the content
   rather than a column beside it. */
@media (max-width: 1199.98px) {
  .s-main { padding-inline-start: var(--mn-rail-w); }
  .mn-top { inset-inline-start: var(--mn-rail-w); }
  .s-sidebar.mn-pane { transform: translateX(-100%); box-shadow: 0 0 40px rgba(12,23,40,.28); }
  html[dir=rtl] .s-sidebar.mn-pane { transform: translateX(100%); }
  body.s-sidebar-expanded .s-sidebar.mn-pane,
  html[dir=rtl] body.s-sidebar-expanded .s-sidebar.mn-pane { transform: none; }
  .s-sidebar-toggler.mn-top-toggler { display: grid; place-items: center; }
  .s-main > .content { padding: 16px; }

  body.s-sidebar-expanded .mn-scrim {
    display: block; position: fixed; inset: 0; z-index: 1030;
    background: rgba(12,23,40,.45);
  }
}

@media (max-width: 700px) {
  :root {
    --mn-rail-w: 78px;
    /* Never let the rail and pane fill the screen: a strip of the page has to
       stay visible and tappable, or there is nothing to dismiss the pane with. */
    --mn-pane-w: min(236px, calc(100vw - var(--mn-rail-w) - 48px));
  }
  .mn-rail-label { font-size: 11.5px; max-inline-size: 70px; line-height: 13px; }
  .mn-rail-btn { min-block-size: 52px; }
  .mn-rail-brand { min-block-size: 52px; }
  .mn-pane-head { padding-inline: 12px 6px; }
  .mn-pane-scroll { padding-inline: 6px; }
}

/* ---- touch ---------------------------------------------------------------
   The agreed worst case is a 1366x768 laptop that is ALSO touched. Rather than
   make every control finger-sized on a mouse-driven machine, the 44px floor is
   applied where the input is actually coarse. Anything a finger must hit is
   grown by padding, so the visual weight of the control does not change.
   -------------------------------------------------------------------------- */
@media (pointer: coarse) {
  .mn-pane-collapse { inline-size: 44px; block-size: 44px; }
  .s-sidebar-search-input.mn-pane-search-input { min-block-size: 44px; }
  .mn-top-link,
  .s-sidebar-toggler.mn-top-toggler { inline-size: 44px; block-size: 44px; }
  .mn-user-menu .dropdown-item { min-block-size: 44px; }
  .s-Toolbar .tool-button { min-block-size: 44px; display: inline-flex; align-items: center; }
  /* Serenity's "show inactive records" switch is an empty anchor drawn by a
     ::before glyph, so it inherits no size of its own — 19x29 and unhittable
     with a thumb. It appears on every grid whose row is IIsActiveRow. */
  .s-ToggleButton > a {
    display: inline-flex; align-items: center; justify-content: center;
    min-inline-size: 44px; min-block-size: 44px;
  }
  .s-PropertyGrid input.editor, .s-PropertyGrid select.editor,
  .s-PropertyGrid .select2-selection { min-block-size: 44px; }
  .s-PropertyGrid .field > .ui-datepicker-trigger { inline-size: 40px; block-size: 40px; }
  .btn { min-block-size: 44px; }
  /* The row is 48px on touch, so a 44px link fits inside it without
     spilling into the row above or below. */
  .slick-cell a { display: inline-flex; align-items: center; min-block-size: 44px; }
  .s-QuickSearchBar input, .s-DataGrid input.s-QuickSearchInput,
  input.s-Serenity-QuickSearchInput { min-block-size: 44px; }
  .slick-pg-size, .slick-pg-current { min-block-size: 44px; }
  .slick-pg-in > * { min-block-size: 44px; }
}

/* The login screen has no shell; keep it out of the way there. */
.no-navigation .mn-rail, .no-navigation .mn-pane, .no-navigation .mn-top { display: none; }

/* ---------------------------------------------------------------- buttons */
.btn { border-radius: 8px; font-weight: 600; font-size: 13px; }
.btn-primary {
  background: var(--ink-800); border-color: var(--ink-800);
  box-shadow: 0 1px 2px rgba(18,32,58,.06), inset 0 1px 0 rgba(255,255,255,.10);
}
.btn-primary:hover, .btn-primary:focus { background: var(--ink-700); border-color: var(--ink-700); }
.btn-success { background: var(--jade-700); border-color: var(--jade-700); }
.btn-danger  { background: var(--garnet-700); border-color: var(--garnet-700); }
.btn-warning { background: var(--amber-700); border-color: var(--amber-700); color:#fff; }
.btn-outline-secondary { border-color: var(--stone-250); color: var(--stone-700); }
.btn-outline-secondary:hover { background: var(--stone-50); border-color: var(--stone-400); color: var(--stone-950); }

/* ---------------------------------------------------------------- toolbar */
.s-Toolbar, .s-DataGrid > .s-Toolbar {
  background: linear-gradient(var(--stone-50), #fff) !important;
  border-block-end: 1px solid var(--stone-200);
  border-start-start-radius: 12px; border-start-end-radius: 12px;
  padding: 8px 12px;
}
.s-Toolbar .tool-button {
  border-radius: 8px; font-weight: 600; font-size: 12.5px;
  transition: background-color .14s, color .14s;
}
.s-Toolbar .tool-button:hover { background: var(--ink-50); color: var(--ink-800); }
.s-Toolbar .add-button { background: var(--ink-800); color:#fff; }
.s-Toolbar .add-button:hover { background: var(--ink-700); color:#fff; }
/* Serenity marks a forbidden toolbar action with .disabled but leaves it
   clickable, so it still opened a dialog the server would then refuse. */
.s-Toolbar .tool-button.disabled,
.s-Toolbar .tool-button.disabled:hover {
  pointer-events: none; cursor: not-allowed;
  opacity: 1; background: var(--stone-100); color: var(--stone-400);
  box-shadow: none;
}
.s-Toolbar .tool-button.disabled .fa { color: var(--stone-300) !important; }

/* ---------------------------------------------------------------- grid */
.s-DataGrid, .s-Panel, .grid-container {
  background:#fff; border:1px solid var(--stone-200);
  border-radius:12px; box-shadow:0 1px 2px rgba(18,32,58,.06);
  overflow:hidden;
}
.slick-header, .slick-header-columns {
  background: var(--stone-100) !important;
  border-block-end: 1px solid var(--stone-250) !important;
}
.slick-header-column {
  background: transparent !important;
  font-size: 11.5px !important; font-weight: 600 !important;
  letter-spacing: .045em; color: var(--stone-600) !important;
  border-inline-end: 1px solid var(--stone-200) !important;
}
.slick-row .slick-cell {
  font-size: 13px; color: var(--stone-950);
  border-block-end: 1px solid var(--stone-150) !important;
  padding-block: 7px;
}
.slick-row:hover .slick-cell { background: var(--stone-50) !important; }
.slick-row.active .slick-cell, .slick-row.selected .slick-cell { background: var(--ink-50) !important; }
.slick-cell a { color: var(--ink-700); font-weight: 600; }
/* The case number is the way into the whole file, so it reads as the
   primary link on the row. */
.slick-cell a.mn-caselink { color: var(--clay-700); }
.slick-cell a.mn-caselink:hover { color: var(--clay-600); text-decoration: underline; }
.slick-cell a:hover { color: var(--ink-900); }

/* Pager arrows.
   Serenity hard-codes these for a left-to-right grid: first f100 (<<), prev
   f104 (<), next f105 (>), last f101 (>>). The buttons already sit correctly
   in RTL - first is rightmost, because the row order flips - but the arrows
   kept pointing the wrong way, so "first page" looked like it went forwards.
   Swapping the glyphs beats mirroring them: a flipped glyph also mirrors its
   optical weight, and these chevrons are not symmetrical. */
html[dir=rtl] .slick-pg-first > span:before { content: "\f101"; }
html[dir=rtl] .slick-pg-prev  > span:before { content: "\f105"; }
html[dir=rtl] .slick-pg-next  > span:before { content: "\f104"; }
html[dir=rtl] .slick-pg-last  > span:before { content: "\f100"; }

/* Quick search */
.s-QuickSearchBar input, .s-DataGrid input.s-QuickSearchInput {
  border:1px solid var(--stone-250); border-radius:8px;
}

/* ---------------------------------------------------------------- forms */
.form-control, .form-select, .select2-selection, input.editor, textarea.editor {
  border:1px solid var(--stone-250) !important;
  border-radius:8px !important;
  font-size:14px; color: var(--stone-950);
  transition: border-color .18s, box-shadow .18s;
}
.form-control:focus, .form-select:focus, input.editor:focus, textarea.editor:focus {
  border-color: var(--ink-600) !important;
  box-shadow: 0 0 0 3px var(--ink-100) !important;
}
.caption, label.caption, .field label {
  font-size: 11.5px; font-weight: 600; letter-spacing:.03em; color: var(--stone-700);
}
.required-mark, .s-Field.required > .caption::after { color: var(--garnet-500); }

/* Serenity lays every field in one full-width column, so a date input ends up
   800px wide next to a caption floated a long way from it. Two columns with a
   capped measure keeps related fields in one eyeful, and anything free-text
   spans the full width because it needs the room. */
/* A form must never scroll sideways. Serenity puts overflow-x:auto on the
   category wrapper, so anything a pixel too wide becomes an inner scrollbar
   instead of wrapping — the field stacks instead. */
.s-PropertyGrid .categories {
  max-inline-size: 1040px; overflow-x: visible;
}
/* min(330px, 100%) is the whole point: a bare minmax(330px, 1fr) forces a
   330px track inside a narrower box and overflows it. The sign-in card is
   314px wide, which is exactly how that bug showed up. */
.s-PropertyGrid:not(.mn-login-fields) .category {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr));
  gap: 0 32px; padding-inline: 0;
}
/* A detail grid inside a form is a table, not a field — it gets the whole row
   and its own label line, or it ends up squeezed into half the dialog. */
.s-PropertyGrid .category > .field:has(.s-GridEditor),
.s-PropertyGrid .category > .field:has(.slick-viewport) {
  grid-column: 1 / -1; grid-template-columns: 1fr; gap: 6px;
}
.s-PropertyGrid .field:has(.s-GridEditor) > .caption,
.s-PropertyGrid .field:has(.slick-viewport) > .caption { padding-block-start: 0; }
.s-PropertyGrid .field:has(.s-GridEditor) > .editor,
.s-PropertyGrid .field:has(.slick-viewport) > .editor { grid-column: 1; }
.s-PropertyGrid .s-GridEditor .s-DataGrid,
.s-PropertyGrid .s-GridEditor { inline-size: 100%; }

.s-PropertyGrid:not(.mn-login-fields) .category > .field:has(textarea),
.s-PropertyGrid:not(.mn-login-fields) .category > .field:has(.s-HtmlContentEditor),
.s-PropertyGrid:not(.mn-login-fields) .category > .field.col-span-2 { grid-column: 1 / -1; }
.s-PropertyGrid .category-title {
  grid-column: 1 / -1; margin: 6px 0 12px; padding-block-end: 8px;
  border-block-end: 1px solid var(--stone-200);
  font-size: 11.5px; font-weight: 600; letter-spacing: .05em; color: var(--clay-700);
  background: none;
}
.s-PropertyGrid:not(.mn-login-fields) .field {
  display: grid; grid-template-columns: 148px minmax(0, 1fr);
  align-items: start; gap: 0 12px; margin-block-end: 12px; padding: 0;
}
.s-PropertyGrid:not(.mn-login-fields) .field > .caption {
  float: none; width: auto; inline-size: auto; padding: 10px 0 0;
  text-align: start; line-height: 18px;
  font-size: 12.5px; font-weight: 600; color: var(--stone-700);
}
.s-PropertyGrid .field > .caption > sup { color: var(--garnet-500); margin-inline-end: 3px; top: 0; }
/* Every editor is pinned to the same cell explicitly. Auto-placement alone
   breaks as soon as a field has two children (a date input and its trigger). */
.s-PropertyGrid:not(.mn-login-fields) .field > .editor,
.s-PropertyGrid:not(.mn-login-fields) .field > .editor-container,
.s-PropertyGrid:not(.mn-login-fields) .field > .select2-container {
  grid-column: 2; grid-row: 1;
  float: none; width: 100%; inline-size: 100%; margin: 0;
}
.s-PropertyGrid:not(.mn-login-fields) .field > .vx { grid-column: 2; }
.s-PropertyGrid .field > .clear { display: none; }
/* A date editor is an input plus a trigger button as siblings; without this the
   button auto-places into the next grid cell and drops below the field. */
.s-PropertyGrid:not(.mn-login-fields) .field > .ui-datepicker-trigger {
  grid-column: 2; grid-row: 1; justify-self: end; align-self: center;
  inline-size: 32px; block-size: 32px; margin-inline-end: 3px;
  border: none; background: none; color: var(--stone-400); border-radius: 6px; z-index: 2;
}
.s-PropertyGrid .field > .ui-datepicker-trigger:hover { background: var(--stone-100); color: var(--stone-700); }
.s-PropertyGrid input.s-DateEditor, .s-PropertyGrid input.s-DateTimeEditor { padding-inline-end: 38px; }
.s-PropertyGrid input.editor, .s-PropertyGrid select.editor,
.s-PropertyGrid textarea.editor, .s-PropertyGrid .select2-selection {
  min-block-size: 38px; padding-inline: 10px;
}
.s-PropertyGrid textarea.editor { min-block-size: 84px; padding-block: 8px; line-height: 22px; }

/* Panel-mode dialogs (the grid opens edit forms inline) get the same framing
   as a modal so the two never look like different products. */
.s-Panel > .s-PropertyGrid, .ui-dialog .s-PropertyGrid { padding: 20px 22px; }
.s-Panel > .s-DialogTitle, .s-Panel > .panel-titlebar {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px; min-block-size: 52px;
  background: linear-gradient(var(--stone-50), #fff);
  border-block-end: 1px solid var(--stone-200);
  font-size: 15px; font-weight: 600; color: var(--stone-950);
}
.s-Panel > .panel-titlebar > .panel-titlebar-text { flex: 1 1 auto; min-inline-size: 0; }
.s-Panel .panel-titlebar-close, .ui-dialog-titlebar-close {
  margin-inline-start: auto; inline-size: 32px; block-size: 32px;
  border-radius: 8px; color: var(--stone-400); border: none; background: none;
}
.s-Panel .panel-titlebar-close:hover, .ui-dialog-titlebar-close:hover {
  background: var(--stone-100); color: var(--stone-950);
}

@media (max-width: 820px) {
  .s-PropertyGrid .category { grid-template-columns: 1fr; }
  .s-PropertyGrid .field { grid-template-columns: 1fr; gap: 4px; }
  .s-PropertyGrid .field > .caption { padding-block-start: 0; }
  .s-PropertyGrid .field > .vx { grid-column: 1; }
}

/* ---------------------------------------------------------------- dialogs */
.ui-dialog, .modal-content, .s-Dialog {
  border:none !important; border-radius:16px !important;
  box-shadow: 0 24px 48px rgba(18,32,58,.16), 0 8px 16px rgba(18,32,58,.08) !important;
  overflow:hidden;
}
.ui-dialog-titlebar, .modal-header, .s-DialogTitle {
  background: linear-gradient(var(--stone-50), #fff) !important;
  border-block-end:1px solid var(--stone-200) !important;
  color: var(--stone-950) !important; font-weight:600;
}
.ui-dialog .ui-dialog-buttonpane, .modal-footer {
  background: var(--stone-50); border-block-start:1px solid var(--stone-200);
}

/* Tabs inside dialogs */
.nav-tabs { border-block-end:1px solid var(--stone-200); }
.nav-tabs .nav-link { color: var(--stone-500); font-weight:600; font-size:13.5px; border:none; }
.nav-tabs .nav-link:hover { color: var(--stone-700); border:none; }
.nav-tabs .nav-link.active {
  color: var(--ink-800); background:transparent; border:none;
  box-shadow: inset 0 -2px 0 var(--clay-500);
}

.text-purple, .tool-button .fa.text-purple { color: var(--ink-600) !important; }
.s-Toolbar .save-and-close-button { background: var(--ink-800); color: #fff; }
.s-Toolbar .save-and-close-button .fa { color: #fff !important; }
.s-Toolbar .save-and-close-button:hover { background: var(--ink-700); color: #fff; }
.s-Toolbar .delete-button .fa { color: var(--garnet-600) !important; }

/* ---------------------------------------------------------------- semantic text */
.text-success { color: var(--jade-700) !important; }
.text-danger  { color: var(--garnet-700) !important; }
.text-warning { color: var(--amber-700) !important; }
.text-muted   { color: var(--stone-500) !important; }

/* ---------------------------------------------------------------- focus */
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ink-100), 0 0 0 1px var(--ink-600);
  border-radius: 6px;
}

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

/* ================================================================ sign-in
   A split threshold: the patronage and the purpose of the service on the ink
   side, the form on the light side. On a phone the ink panel becomes a header
   band rather than being dropped — it is the reason the page looks like this.
   ======================================================================== */
body.mn-login { background: var(--stone-50); }
.mn-login-split {
  min-block-size: 100vh; display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
}
.mn-login-brand {
  position: relative; overflow: hidden;
  background:
    radial-gradient(85% 65% at 18% 4%, rgba(176,96,63,.38), transparent 64%),
    linear-gradient(160deg, var(--ink-800), var(--ink-950));
  color: #fff; padding: 56px clamp(32px, 5vw, 76px);
  display: flex; flex-direction: column; justify-content: center; gap: 44px;
}
/* A single beam crossing the panel — the one decorative gesture on the page. */
.mn-login-brand::after {
  content: ""; position: absolute; inset-block-start: -30%; inset-inline-start: -10%;
  inline-size: 60%; block-size: 160%; pointer-events: none;
  background: linear-gradient(74deg, transparent 46%, rgba(255,255,255,.05) 50%, transparent 54%);
}
.mn-login-brand-top { display: flex; align-items: center; gap: 16px; }
.mn-login-mark {
  flex: none; inline-size: 48px; block-size: 48px; display: block;
  color: #fff; --mn-mark-accent: #D89A72;
}
.mn-login-name { font-size: 28px; line-height: 34px; font-weight: 600; letter-spacing: -.015em; }
.mn-login-sub { margin-block-start: 3px; font-size: 13.5px; color: rgba(255,255,255,.62); }

.mn-login-patrons { display: flex; flex-direction: column; gap: 22px; }
.mn-login-patron { display: flex; align-items: center; gap: 18px; }
/* Sized for presence rather than for economy: this is the one place on the
   sign-in screen that is not there to be used, and a thumbnail would read as
   an avatar rather than as a portrait. */
.mn-login-portrait {
  flex: none; inline-size: 84px; block-size: 102px; border-radius: 12px; overflow: hidden;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(240,221,209,.28);
  box-shadow: 0 6px 18px rgba(12,23,40,.38);
  display: grid; place-items: center;
}
.mn-login-portrait img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: center top; }
.mn-login-ph { font-size: 28px; color: rgba(255,255,255,.34); }
.mn-login-rank {
  font-size: 11.5px; font-weight: 600; letter-spacing: .05em; color: var(--clay-100);
}
.mn-login-pname { margin-block-start: 4px; font-size: 17px; font-weight: 600; letter-spacing: -.008em; }

.mn-login-word {
  margin: 0; max-inline-size: 42ch; font-size: 14.5px; line-height: 27px;
  color: rgba(255,255,255,.72); padding-inline-start: 16px;
  border-inline-start: 2px solid var(--clay-500);
}

.mn-login-form {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: 48px clamp(20px, 4vw, 56px); gap: 18px;
}
.mn-login-form > #LoginPanel { inline-size: 100%; max-inline-size: 372px; }
.mn-login-alert { inline-size: 100%; max-inline-size: 372px; border-radius: 10px; }
.mn-login-card {
  background: #fff; border: 1px solid var(--stone-200); border-radius: 16px;
  padding: 32px 28px; box-shadow: 0 2px 4px rgba(18,32,58,.05), 0 12px 32px rgba(18,32,58,.06);
}
.mn-login-title {
  margin: 0 0 22px; font-size: 19px; line-height: 27px; font-weight: 600;
  letter-spacing: -.012em; color: var(--stone-950);
}
/* The stock property grid floats the caption beside the input and clears with
   a spacer div; stacked reads far better in a narrow sign-in card and keeps the
   Arabic label on its own baseline. */
.mn-login-fields, .mn-login-fields .categories, .mn-login-fields .category {
  margin: 0; padding: 0; border: none; background: none;
}
.mn-login-fields .category-title { display: none; }
.mn-login-fields .field { display: block; margin: 0 0 18px; padding: 0; min-block-size: 0; }
.mn-login-fields .field > .caption {
  display: block; float: none; width: auto; inline-size: auto; text-align: start;
  margin: 0 0 6px; padding: 0; line-height: 18px;
  font-size: 12px; font-weight: 600; letter-spacing: .01em; color: var(--stone-700);
}
.mn-login-fields .field > .caption > sup {
  color: var(--garnet-500); margin-inline-end: 3px; font-size: 12px; top: 0;
}
.mn-login-fields input.editor {
  display: block; float: none; width: 100%; inline-size: 100%;
  min-block-size: 44px; padding-inline: 12px; margin: 0;
  border: 1px solid var(--stone-250) !important; border-radius: 10px !important;
  font-size: 14.5px; background: var(--stone-50);
}
.mn-login-fields input.editor:focus {
  background: #fff; border-color: var(--ink-600) !important;
  box-shadow: 0 0 0 3px var(--ink-100) !important;
}
.mn-login-fields .clear { display: none; }
.mn-login-fields .vx { margin: 0; }
.mn-login-fields .vx > .error { display: block; margin-block-start: 6px; font-size: 12px; color: var(--garnet-700); }

.mn-login-actions { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.btn.btn-primary.mn-login-btn {
  inline-size: 100%; min-block-size: 46px; border-radius: 10px;
  font-size: 14.5px; font-weight: 600; margin-block-start: 6px;
}
.mn-login-forgot {
  display: inline-flex; align-items: center; min-block-size: 44px; padding-inline: 8px;
  font-size: 13px; color: var(--stone-500); text-decoration: none;
}
.mn-login-forgot:hover { color: var(--ink-700); text-decoration: underline; }
.mn-login-foot {
  max-inline-size: 372px; text-align: center;
  font-size: 12px; line-height: 19px; color: var(--stone-400);
}

@media (max-width: 900px) {
  .mn-login-split { grid-template-columns: 1fr; min-block-size: auto; }
  .mn-login-brand { padding: 32px 24px; gap: 26px; }
  .mn-login-patrons { flex-direction: row; flex-wrap: wrap; gap: 14px 28px; }
  .mn-login-word { font-size: 13.5px; line-height: 24px; }
  .mn-login-form { padding: 32px 20px 44px; }
}

/* ================================================================== splash
   The entrance, once per session. The beam sweeps, the tower rises, the name
   settles, and the whole thing leaves inside a second and a half. It sits
   above everything and takes no clicks after it starts fading.
   ======================================================================== */
.mn-splash {
  position: fixed; inset: 0; z-index: 4000;
  display: grid; place-items: center;
  background:
    radial-gradient(120% 90% at 50% 12%, rgba(245,158,11,.16), transparent 58%),
    radial-gradient(90% 70% at 18% 100%, rgba(176,96,63,.20), transparent 62%),
    linear-gradient(158deg, var(--ink-800), var(--ink-950));
  opacity: 1; transition: opacity .4s ease;
}
.mn-splash.is-out { opacity: 0; pointer-events: none; }

.mn-splash-inner {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  text-align: center; padding: 24px;
}
.mn-splash-mark {
  inline-size: 92px; block-size: 92px; display: block;
  color: #fff; --mn-mark-accent: #FBBF24;
  filter: drop-shadow(0 10px 26px rgba(245,158,11,.30));
}
.mn-splash-word {
  margin-block-start: 18px;
  font-size: 34px; line-height: 42px; font-weight: 600;
  letter-spacing: -.02em; color: #fff;
}
.mn-splash-sub { font-size: 13.5px; color: rgba(255,255,255,.60); }

/* A still frame for anyone who asked not to be moved. */
.mn-splash.is-still .mn-splash-inner { opacity: 1; }

.mn-splash.is-playing .mn-splash-mark {
  animation: mn-rise .62s cubic-bezier(.22,.9,.3,1) both;
}
.mn-splash.is-playing .mn-splash-word {
  animation: mn-rise .56s cubic-bezier(.22,.9,.3,1) .16s both;
}
.mn-splash.is-playing .mn-splash-sub {
  animation: mn-rise .56s cubic-bezier(.22,.9,.3,1) .26s both;
}
/* The door draws itself, then the cross arrives on it. The dash length is
   the path's own length rounded up, so the stroke starts fully retracted. */
.mn-splash.is-playing .mn-mark-door {
  stroke-dasharray: 76; stroke-dashoffset: 76;
  animation: mn-draw .82s cubic-bezier(.33,0,.2,1) .18s both;
}
.mn-splash.is-playing .mn-mark-glow {
  animation: mn-light .7s cubic-bezier(.33,0,.2,1) .52s both;
  transform-origin: 20px 35.4px;
}
.mn-splash.is-playing .mn-mark-cross {
  transform-origin: 20px 15.2px;
  animation: mn-settle .5s cubic-bezier(.22,1.2,.36,1) .68s both;
}

@keyframes mn-draw { to { stroke-dashoffset: 0; } }
@keyframes mn-light {
  from { opacity: 0; transform: scaleY(.2); }
  to   { opacity: 1; transform: none; }
}
@keyframes mn-settle {
  from { opacity: 0; transform: scale(.55); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes mn-rise {
  from { opacity: 0; transform: translateY(14px) scale(.965); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mn-splash, .mn-splash * { animation: none !important; transition-duration: .15s !important; }
}