/* ═══════════════════════════════════════════════════════════════
   Identity layer on top of MudBlazor.

   MudBlazor draws the components; this file adds what it does not know: the colour tokens the rest
   of the code reads, the two Arabic typefaces, soft elevated surfaces instead of hairline boxes,
   the phone shell (a floating bottom bar and sliding sheets), the home hero, request rows and
   service cards. No global element rules (input, table, ...) — those belong to the library,
   and a global rule here fights it silently.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --paper:      #f5f5ef;
  --surface:    #ffffff;
  --sunk:       #eeeee6;
  --rule:       #e6e5dc;
  --rule-firm:  #d5d3c6;
  --ink:        #15190f;
  --ink-2:      #4b5145;
  --ink-3:      #868b80;
  /* The society's logo colours: olive circle, globe blue, wheat yellow */
  --brand:      #485018;
  --brand-deep: #2f3510;
  --brand-lift: #5f6a22;
  --brand-soft: #edf0df;
  --wheat:      #f8c000;
  --wheat-soft: #fff4c7;
  --gold:       #a67c00;
  --gold-soft:  #fdf3cc;
  --gold-line:  #efd77a;
  --wait: #8a6100; --wait-soft: #fcf2da;
  --move: #1878b0; --move-soft: #e6f1f9;
  --done: #2e7d4f; --done-soft: #e5f3ea;
  --stop: #a02419; --stop-soft: #fbeae7;

  /* One spacing rhythm — no arbitrary sizes */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;

  /* Surfaces: radius and layered shadows instead of borders */
  --r-card: 20px;
  --shadow-card: 0 1px 2px rgba(21,25,15,.04), 0 12px 32px -16px rgba(21,25,15,.18);
  --shadow-lift: 0 2px 4px rgba(21,25,15,.05), 0 20px 44px -18px rgba(21,25,15,.28);
  --glass: rgba(255,255,255,.8);
  --ease: cubic-bezier(.2,.8,.2,1);

  --bottom-nav: 64px;
  --bottom-gap: 10px;
}

html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--mud-typography-default-family, "IBM Plex Sans Arabic", system-ui, sans-serif);
  color: var(--ink);
  overscroll-behavior-y: none;
  /* Two soft glows in the brand colours give the page depth; a flat beige read as a form from 2012 */
  background:
    radial-gradient(900px 520px at 90% -10%, rgba(72,80,24,.12), transparent 65%),
    radial-gradient(700px 480px at 0% 30%, rgba(24,120,176,.07), transparent 60%),
    var(--paper);
  background-attachment: fixed;
}

/* Tabular digits: dates and counters do not jitter */
body, .num, .req-due, .mud-table { font-variant-numeric: tabular-nums; }

/* Focus ring on the page title after every navigation (FocusOnNavigate) — no visual value */
[tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none; }

/* Latin keys inside an RTL UI */
/* On a Mud field the class lands on the whole wrapper, and on a labelled field on its block — target the input alone, never the label or the helper text */
.mono:not(.mud-input-control):not(.f-block), .mono input {
  direction: ltr; text-align: left; unicode-bidi: isolate;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .84rem;
}

/* ── Library surfaces: soft elevation, pill buttons ─────────────── */
/* Every outlined card in the app becomes a floating surface — one rule, no markup change */
.mud-paper-outlined { border-color: transparent; border-radius: var(--r-card); box-shadow: var(--shadow-card); }
.mud-paper-outlined .mud-paper-outlined { box-shadow: none; border-color: var(--rule); border-radius: 14px; }
/* A card title always sits 12px above its content — no per-title margin class */
.mud-paper-outlined > .mud-typography-h3 { margin-bottom: var(--s3); }
.mud-table { border-radius: var(--r-card); box-shadow: var(--shadow-card); }
.mud-dialog { border-radius: 24px; }
.mud-expand-panel { border-radius: 14px !important; }

.mud-button-root { transition: transform .12s var(--ease), box-shadow .2s var(--ease), background-color .2s; }
.mud-button { border-radius: 999px; }
.mud-button-filled, .mud-button-outlined { padding-inline: 20px; }
.mud-button-filled.mud-button-filled-primary {
  background-image: linear-gradient(135deg, var(--brand-lift), var(--brand));
  box-shadow: 0 10px 22px -10px rgba(72,80,24,.6);
}
.mud-button-filled.mud-button-filled-primary:hover { box-shadow: 0 14px 26px -10px rgba(72,80,24,.7); transform: translateY(-1px); }
.mud-button-root:active { transform: scale(.97); }
/* The white fill sits on the wrapper, the border on an absolute fieldset inside it: both must carry the radius,
   or the fill pokes out at the corners of every field */
.mud-input.mud-input-outlined { background: var(--surface); border-radius: var(--mud-default-borderradius); }
.mud-chip { font-weight: 600; border-radius: 999px; }
.steps-list { margin: 0; padding-inline-start: 1.25em; }
.mud-tabs-toolbar { border: 0 !important; }
.mud-tab { text-transform: none; border-radius: 12px; }
.mud-tab .mud-icon-root { margin-inline-end: var(--s2); }

/* ── Vertical rhythm: one rule, not a margin per element ──────────
   Every top-level block on a page is 24px from the one before it (16px on phones). A section label sits 12px above
   its list, and a "see all" link 8px under its list. Utility classes (mt-3, mb-4) on top-level blocks are overridden
   on purpose: they are what made the same page read 24px here and 12px there. */
.app-content > *, .req-page > * { margin-top: 0 !important; margin-bottom: 0 !important; }
.app-content > * + *, .req-page > * + * { margin-top: var(--s5) !important; }
.app-content > .section-label + *, .req-page > .section-label + * { margin-top: var(--s3) !important; }
.app-content > .mud-paper + .mud-button-root, .req-page > .mud-paper + .mud-button-root { margin-top: var(--s2) !important; }
@media (max-width: 959.98px) {
  .app-content > * + *, .req-page > * + * { margin-top: var(--s4) !important; }
}

/* Every surface shares the card padding: 20px on desktop, 16px on phones — expansion panels included.
   Selectors at the library's own specificity (.mud-expand-panel .header.gutters), otherwise its 24px wins. */
.mud-expand-panel .mud-expand-panel-header.mud-expand-panel-header-gutters { padding: 14px 20px; min-height: 0; }
.mud-expand-panel .mud-expand-panel-content.mud-expand-panel-gutters { padding: 0 20px 16px; }
.mud-expand-panel + .mud-expand-panel { margin-top: var(--s2); }
@media (max-width: 599.98px) {
  .mud-expand-panel .mud-expand-panel-header.mud-expand-panel-header-gutters { padding: 12px 16px; }
  .mud-expand-panel .mud-expand-panel-content.mud-expand-panel-gutters { padding: 0 16px 12px; }
}
/* A MudGrid offsets its items' 12px padding with negative margins; keep that offset inside the rhythm */
.app-content > .mud-grid, .req-page > .mud-grid { margin-top: calc(var(--s5) - 12px) !important; }
@media (max-width: 959.98px) { .app-content > .mud-grid, .req-page > .mud-grid { margin-top: calc(var(--s4) - 12px) !important; } }

/* Content enters with a short rise, one child after the other — nothing jumps into place.
   fill-mode backwards, not both: "both" leaves an identity transform on every block after the animation, and a
   transformed ancestor traps position:fixed — the date picker's overlay opened inside its card instead of over the page */
.app-content > * { animation: rise .55s var(--ease) backwards; }
.app-content > :nth-child(2) { animation-delay: 50ms; }
.app-content > :nth-child(3) { animation-delay: 100ms; }
.app-content > :nth-child(4) { animation-delay: 150ms; }
.app-content > :nth-child(5) { animation-delay: 200ms; }
.app-content > :nth-child(6) { animation-delay: 250ms; }
.app-content > :nth-child(n+7) { animation-delay: 300ms; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ── Top bar: frosted glass, not a dark block ───────────────────── */
.mud-appbar.topbar {
  padding-inline: var(--s3);
  background: var(--glass); color: var(--ink);
  -webkit-backdrop-filter: saturate(160%) blur(16px); backdrop-filter: saturate(160%) blur(16px);
  box-shadow: 0 1px 0 rgba(21,25,15,.06);
}
.brand { display: flex; align-items: center; gap: var(--s3); min-width: 0; color: inherit; text-decoration: none; }
.brand-logo { height: 38px; width: auto; flex: none; display: block; }
.brand-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.brand-text strong { font-family: "Noto Kufi Arabic", sans-serif; font-size: .98rem; color: var(--ink); }
.brand-text span { font-size: .72rem; color: var(--ink-3); }

.avatar {
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand); font-weight: 700; font-size: .8rem;
}
.avatar.lg { width: 44px; height: 44px; font-size: .95rem; background: linear-gradient(135deg, var(--brand-lift), var(--brand)); color: #fff; }
.who { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.25; min-width: 0; }
.who .n { font-size: .88rem; font-weight: 700; color: var(--ink); }
.who .r { font-size: .72rem; color: var(--ink-3); }

/* ── Side menu (desktop): pills on the page, no wall ────────────── */
.mud-drawer.side { background: transparent; border: 0; }
.side-nav { padding: var(--s3) var(--s3); }
.side-cta { padding: var(--s2) 0 var(--s4); }
.side-cta .mud-button { height: 46px; font-size: .95rem; }
/* On /new the button is the current place, not an action: olive, flat, not tappable — the disabled grey would read as broken */
/* !important because the library's disabled rule uses it too */
.side-cta .mud-button.here, .side-cta .mud-button.here:disabled {
  background-image: none; background-color: var(--brand-deep) !important; color: #fff !important; box-shadow: none; opacity: 1;
}
.side-cta .mud-button.here .mud-icon-root { color: #fff; }
.side-nav .mud-nav-link { border-radius: 14px; margin-block: 2px; font-weight: 500; }
.side-nav .mud-nav-link.active { background: var(--surface); color: var(--brand); box-shadow: var(--shadow-card); font-weight: 700; }
.side-nav .mud-nav-link.active .mud-icon-root { color: var(--brand); }
.side-foot { margin-top: auto; padding: var(--s3) var(--s3) var(--s4); display: flex; flex-direction: column; gap: var(--s3); }
.side-me { display: flex; align-items: center; gap: var(--s3); padding: var(--s3); background: var(--surface); border-radius: 16px; box-shadow: var(--shadow-card); }
.nav-sep {
  padding: var(--s4) var(--s4) var(--s1);
  font-size: .7rem; font-weight: 700; letter-spacing: .08em; color: var(--ink-3);
}
.nav-count {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px;
  margin-inline-start: var(--s2); border-radius: 999px;
  background: var(--brand); color: #fff; font-size: .72rem; font-weight: 700;
}
.tab-count {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px;
  margin-inline-start: var(--s2); border-radius: 999px;
  background: var(--brand-soft); color: var(--brand); font-size: .72rem; font-weight: 700;
}
.mud-tab-active .tab-count { background: var(--brand); color: #fff; }

/* Tabs as the app's own pills — white cards, the active one olive — not the library's sunk grey track */
.seg .mud-tabs-tabbar { background: transparent; padding: 0; }
.seg .mud-tabs-tabbar-inner { min-height: 0; }
/* Each tab is wrapped in a div; the wrappers are the flex items of .mud-tabs-tabbar-wrapper — the gap goes there */
.seg .mud-tabs-tabbar-content { display: flex; width: 100%; }
.seg .mud-tabs-tabbar-wrapper { gap: var(--s2); width: 100%; }
/* Three tabs on a 375px screen: the library's 160px minimum made them scroll with arrows — these always fit */
.seg .mud-tab {
  flex: 0 1 auto; min-height: 40px; min-width: 0 !important; padding: 0 18px; white-space: nowrap;
  border-radius: 999px; background: var(--surface); color: var(--ink-2); box-shadow: var(--shadow-card);
  transition: background .2s var(--ease), color .2s, transform .12s var(--ease);
}
.seg .mud-tab:active { transform: scale(.97); }
.seg .mud-tabs-scroll-button { display: none !important; }
.seg .mud-tab.mud-tab-active { background-image: linear-gradient(135deg, var(--brand-lift), var(--brand)); color: #fff; }
.seg .mud-tab.mud-tab-active .mud-icon-root { color: #fff; }
.seg .mud-tab-active .tab-count { background: rgba(255,255,255,.22); color: #fff; }
.seg .mud-tab-slider { display: none; }
.seg .mud-tabs-panels { padding-top: var(--s4); }
@media (max-width: 599.98px) {
  /* Three tabs share the width; four or more never wrap to two lines: the row scrolls sideways, without a scrollbar */
  .seg .mud-tabs-tabbar-content { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .seg .mud-tabs-tabbar-content::-webkit-scrollbar { display: none; }
  .seg .mud-tabs-tabbar-wrapper > div { flex: 1 0 auto; min-width: 0; }
  .seg .mud-tab { width: 100%; padding: 0 var(--s3); }
}

/* Signed in as someone else: a bar the administrator cannot miss, above every page */
.impersonation-bar { display: flex; align-items: center; gap: var(--s2); flex-wrap: nowrap; padding: 4px var(--s3); background: var(--wheat); color: var(--brand-deep); border-bottom: 1px solid var(--rule); font-size: .82rem; }
.impersonation-bar .text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; }
.impersonation-bar .switch { display: flex; align-items: center; gap: 2px; flex: 1 1 140px; min-width: 0; max-width: 320px; margin-inline-start: auto; }
.impersonation-bar .switch .mud-select, .impersonation-bar .switch .mud-input-control { flex: 1; min-width: 0; margin: 0; }
.impersonation-bar .back { flex: none; }

/* ── Content ───────────────────────────────────────────────────── */
.app-content { padding-block: var(--s5) var(--s7); }

@media (max-width: 959.98px) {
  .app-content { padding-block: var(--s4) calc(var(--bottom-nav) + var(--bottom-gap) + var(--s6) + env(safe-area-inset-bottom)); }
}

/* ── Bottom bar (phone): a floating glass pill ──────────────────── */
.mud-appbar.bottom-nav {
  /* Above dialogs (1400) and below snackbars (1500): the bar is always visible and always tappable —
     a sheet floats above it instead of covering it */
  z-index: 1450;
  position: fixed; inset-inline: 12px; bottom: calc(var(--bottom-gap) + env(safe-area-inset-bottom));
  width: auto; height: var(--bottom-nav); padding: 0; border: 0; border-radius: 26px;
  background: var(--glass); color: var(--ink-3);
  -webkit-backdrop-filter: saturate(160%) blur(18px); backdrop-filter: saturate(160%) blur(18px);
  box-shadow: 0 18px 40px -18px rgba(21,25,15,.4), 0 0 0 1px rgba(21,25,15,.05);
}
.bottom-nav .mud-toolbar { padding: 0 var(--s2); height: var(--bottom-nav); gap: 0; }
.bnav-item {
  all: unset; box-sizing: border-box; cursor: pointer;
  flex: 1; height: var(--bottom-nav);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--ink-3); text-decoration: none; font-size: .68rem; font-weight: 600;
  -webkit-tap-highlight-color: transparent;
}
.bnav-ico { display: grid; place-items: center; height: 30px; padding: 0 16px; border-radius: 999px; transition: background .2s var(--ease), transform .15s var(--ease); }
.bnav-item .mud-icon-root { font-size: 1.4rem; }
.bnav-item.active { color: var(--brand); }
.bnav-item.active .bnav-ico { background: var(--brand-soft); }
.bnav-item:active .bnav-ico { transform: scale(.9); }
.bnav-new { color: var(--ink-2); }
/* Inside the bar, not overhanging it: a button rising out of the bar collided with every sheet floating above it */
.bnav-fab {
  width: 44px; height: 32px; border-radius: 12px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #ffd44a, var(--wheat)); color: var(--brand-deep);
  box-shadow: 0 6px 14px -6px rgba(248,192,0,.8);
  transition: transform .15s var(--ease);
}
.bnav-new:active .bnav-fab { transform: scale(.92); }
/* On the new-request pages the tab shows "you are here" and stops being a button: olive, no shadow, no tap */
.bnav-new.active { pointer-events: none; cursor: default; color: var(--brand); }
.bnav-new.active .bnav-fab { background: var(--brand); color: #fff; box-shadow: none; }
.bnav-fab .mud-icon-root { font-size: 1.5rem; }
.bnav-item .mud-badge { font-size: .62rem; }

/* ── Sheet sliding up from the bottom ──────────────────────────── */
.sheet .mud-drawer-content, .mud-drawer.sheet {
  border-radius: 26px;
  max-height: 80vh;
  padding-bottom: var(--s4);
}
/* The bar is above dialogs, so "More" must open above them too — otherwise it opened behind an open sheet */
.mud-drawer.sheet { z-index: 1460; }
/* Open: a floating card above the bottom bar, with the same side insets as the bar */
.mud-drawer.mud-drawer-temporary.mud-drawer-pos-bottom.sheet.mud-drawer--open {
  bottom: calc(var(--bottom-nav) + var(--bottom-gap) * 2 + env(safe-area-inset-bottom));
  inset-inline: 12px; width: auto;
}
/* Sheet height comes from its content (Height="auto"), but the library closes it with bottom: calc(-1 * auto),
   an invalid value — so the "closed" sheet stays visible mid-screen. Closing is explicit here. */
/* The same class chain the library uses (four classes), otherwise our rule silently loses on specificity */
.mud-drawer.mud-drawer-temporary.mud-drawer-pos-bottom.sheet.mud-drawer--closed { bottom: -100vh; }
/* No display:none before the first open — a display change cancels the transition and the sheet jumps instead of sliding */
.mud-drawer.sheet.mud-drawer--initial { visibility: hidden; }
.mud-drawer.mud-drawer-temporary.mud-drawer-pos-bottom.sheet:not(.mud-drawer--initial) {
  transition: bottom 320ms var(--ease), visibility 0s;
}
.sheet-grip { width: 42px; height: 5px; border-radius: 3px; background: var(--rule-firm); margin: 10px auto 6px; }
.sheet-head { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s5) var(--s2); }
.sheet-head .n { font-weight: 700; }
.sheet-head .r { font-size: .78rem; color: var(--ink-3); }
.sheet-nav { padding-inline: var(--s3); }
.sheet-nav .mud-nav-link { border-radius: 14px; }
.sheet-foot { padding: var(--s3) var(--s5) 0; }

/* Dialog paddings follow the page rhythm (16/20), not the library's 24 */
.mud-dialog-title { padding: var(--s5) var(--s5) var(--s1); }
.mud-dialog-content { padding: var(--s2) var(--s5); }
.mud-dialog-actions { padding: var(--s3) var(--s5) var(--s5); }

/* Dialogs become bottom sheets on phones — no second code path.
   The sheet floats above the bottom bar (never over it): the bar stays visible and tappable. */
@media (max-width: 599.98px) {
  .mud-dialog-container {
    align-items: flex-end !important; box-sizing: border-box;
    padding: 0 12px calc(var(--bottom-nav) + var(--bottom-gap) * 2 + env(safe-area-inset-bottom));
  }
  /* The library does not animate a dialog on entry; on phones it slides up from the bottom like an app screen */
  .mud-dialog { animation: sheet-up 280ms var(--ease) both; }
  .mud-dialog {
    width: 100% !important; max-width: 100% !important; margin: 0 !important;
    border-radius: 26px !important;
    max-height: calc(100dvh - var(--bottom-nav) - var(--bottom-gap) * 3 - 56px - env(safe-area-inset-bottom));
  }
  .mud-dialog-title { padding: var(--s4) var(--s4) var(--s1); }
  .mud-dialog-content { padding: var(--s2) var(--s4); }
  .mud-dialog-actions { padding: var(--s3) var(--s4) var(--s4); }
}
/* Picker dialogs (date, time) are library overlays, not MudDialog containers: give them the same sheet on phones */
@media (max-width: 599.98px) {
  .mud-picker .mud-overlay-dialog {
    display: flex; align-items: flex-end; justify-content: center; box-sizing: border-box;
    padding: 0 12px calc(var(--bottom-nav) + var(--bottom-gap) * 2 + env(safe-area-inset-bottom));
  }
  .mud-picker .mud-overlay-dialog .mud-overlay-content { width: 100%; }
  .mud-picker .mud-picker-paper.mud-dialog { margin: 0 auto !important; }
  /* The calendar keeps the library's 310px; its grid track is centred in the sheet instead of sitting at the start edge,
     which left an empty band on the left that grew with the phone's width */
  .mud-picker .mud-picker-calendar-content { justify-content: center; }
}
/* Snackbars rise above the bar too */
@media (max-width: 959.98px) {
  [class*="mud-snackbar-location-bottom"] { bottom: calc(var(--bottom-nav) + var(--bottom-gap) * 2 + env(safe-area-inset-bottom)); }
}

/* ── Rooms: a week strip, then a card per room with its slots as chips (they wrap on phones, line up on desktop) ─── */
/* The rooms page: a toolbar (room, durations), then one card with the week's navigation, legend and grid */
.rooms-bar { display: flex; align-items: flex-end; gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s4); }
.rooms-bar-room { flex: 1 1 280px; max-width: 420px; }
.rooms-bar-room .room-pick { max-width: none; }
.rooms-bar-durs { flex: 1 1 320px; min-width: 0; }
.rooms-bar-durs .durs { grid-template-columns: repeat(auto-fill, minmax(84px, max-content)); }
.rooms-bar-actions { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; align-self: flex-end; margin-inline-start: auto; }
/* Manual entry: a second row of the toolbar; the button lines up with the fields' bottom edge */
.manual-entry { flex: 1 1 100%; display: flex; align-items: flex-end; gap: var(--s3); flex-wrap: wrap; padding-top: var(--s2); border-top: 1px solid var(--rule); }
.manual-entry .manual-date { flex: 1 1 160px; max-width: 220px; }
.manual-entry .manual-time { flex: 1 1 140px; max-width: 180px; }
.manual-entry .manual-dur { flex: 1 1 140px; max-width: 200px; }
.manual-entry .manual-go { margin-bottom: 2px; }
.week-nav { display: flex; align-items: center; gap: var(--s1); flex-wrap: wrap; padding: var(--s3) var(--s4) var(--s2); }
.week-nav .week-text { font-size: .8rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.week-nav .day-pick { width: 168px; flex: none; }
.week-nav .legend { margin: 0; }
.legend { display: inline-flex; gap: var(--s1); flex-wrap: wrap; }
/* The legend's three states, read at a glance on the beige page */
.rng { display: inline-flex; align-items: center; gap: 4px; min-height: 28px; padding: 2px 10px; border-radius: 10px; border: 1px solid transparent; font-size: .74rem; font-weight: 500; }
.rng.free { background: var(--surface); color: var(--brand); border-color: #b9c27e; }
.rng.held { background: #ffc94d; color: #3d2c00; border-color: #ffc94d; }
.rng.booked { background: var(--brand); color: #fff; border-color: var(--brand); }
.room-pick { max-width: 480px; }
/* The rooms page's ruler: the day as a row of slots that scrolls sideways; the pick is a block with two handles over it */
.slotpick { overflow: hidden; }
.ruler { overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: var(--s1); border-top: 1px solid var(--rule); }
.ruler-track { --slot-w: 44px; --day-w: 76px; display: grid; grid-template-rows: 18px; grid-auto-rows: 52px; column-gap: 0; row-gap: 2px; min-width: max-content; position: relative; }
.ruler-corner, .ruler-day { grid-column: 1; position: sticky; inset-inline-start: 0; z-index: 2; background: var(--surface); }
.ruler-corner { grid-row: 1; }
.ruler-day { display: flex; align-items: center; gap: 6px; padding-inline: 8px; border-inline-end: 1px solid var(--rule); font-size: .74rem; color: var(--ink-2); }
.ruler-day .dd { font-weight: 700; font-size: .95rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.ruler-day.today .dd { color: var(--brand); }
.ruler-day.on { background: var(--brand-soft); }
.ruler-hour { grid-row: 1; font-size: .64rem; color: var(--ink-3); border-inline-start: 1px solid var(--rule); padding-inline-start: 4px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ruler-cell { border: 0; border-inline-start: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: var(--surface); padding: 0; cursor: pointer; }
.ruler-cell.free:hover, .ruler-cell.free:focus-visible { background: var(--brand-soft); outline: none; }
.ruler-cell.held { background: #ffc94d; }
.ruler-cell.booked { background: var(--brand); }
.ruler-cell.blocked { background: repeating-linear-gradient(135deg, var(--sunk) 0 5px, var(--surface) 5px 10px); cursor: default; }
.ruler-cell:disabled { cursor: default; }
.ruler-sel { position: relative; z-index: 1; display: flex; align-items: center; background: var(--wheat); box-shadow: inset 0 0 0 2px var(--brand); border-radius: 10px; color: var(--brand-deep); font-size: .72rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.ruler-sel .body { flex: 1; min-width: 0; text-align: center; white-space: nowrap; overflow: hidden; touch-action: none; cursor: grab; padding: 0 12px; }
/* A block narrower than four cells cannot hold its text between the handles: the time floats above it as a badge */
.ruler-sel { container-type: inline-size; }
@container (max-width: 189px) {
  .ruler-sel .body { overflow: visible; }
  .ruler-sel .body span { position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); z-index: 3;
    background: var(--brand); color: #fff; padding: 2px 10px; border-radius: 999px; font-size: .7rem; white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,.2); }
}
.ruler-sel.dragging .body { cursor: grabbing; }
/* Lifted while dragged: no transition to fight the pointer, above the cells, and the finger never scrolls the ruler instead */
.ruler-sel { touch-action: none; will-change: transform; }
.ruler-sel.dragging { transition: none; z-index: 2; box-shadow: inset 0 0 0 2px var(--brand), 0 6px 16px rgba(0,0,0,.18); }
.ruler-sel .handle { position: absolute; top: 50%; width: 16px; height: 32px; transform: translateY(-50%); background: var(--brand); border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,.25); touch-action: none; cursor: ew-resize; }
.ruler-sel .handle::after { content: ""; position: absolute; inset: 9px 6px; border-inline: 1.5px solid rgba(255,255,255,.7); }
.ruler-sel .handle.start { inset-inline-start: -8px; }
.ruler-sel .handle.end { inset-inline-end: -8px; }
.rng.blocked { background: repeating-linear-gradient(135deg, var(--sunk) 0 5px, var(--surface) 5px 10px); color: var(--ink-2); border-color: var(--rule); }
.book-bar .book-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.book-bar .book-text span { font-size: .8rem; color: var(--ink-2); }
/* Choice pills (durations, weekdays): a grid of equal cells, so a row of eleven wraps as tidily as a row of four and no label breaks in two */
.durs { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; }
.durs .f-label { grid-column: 1 / -1; margin: 0; }
.dur { border: 1px solid var(--rule); background: var(--surface); color: var(--ink-2); border-radius: 999px; padding: 6px 10px; font: inherit; font-size: .8rem; cursor: pointer; white-space: nowrap; text-align: center; }
.dur.on { background: var(--brand); color: #fff; border-color: var(--brand); }
.choice { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); border-radius: 14px; background: var(--brand-soft); }
.choice .choice-ico { color: var(--brand); flex: none; }
.choice .choice-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.choice .choice-text span { font-size: .82rem; color: var(--ink-2); }
.choice bdi { white-space: nowrap; }
.choice.empty { background: var(--sunk); flex-wrap: wrap; }
.choice.empty .choice-text { color: var(--ink-3); }
/* ── Plan ── The floor drawing as an image with the rooms drawn over it as percent-positioned buttons; the tip is CSS only */
.map-scroll { max-width: 960px; margin-inline: auto; overflow-x: auto; overscroll-behavior-x: contain; }
.map-close { margin-inline-start: auto; }
.map-bar { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s3); }
.map-bar .durs { display: flex; gap: 6px; }
.map-caption { flex: 1; }
.map { position: relative; direction: ltr; overflow: hidden; border-radius: 12px; background: var(--surface); user-select: none; -webkit-user-select: none; }
.map-floor { position: absolute; inset: 0; transition: transform .45s var(--ease); }
.map-floor[hidden] { display: none; }
.map-floor img { display: block; width: 100%; height: 100%; }
.map-room { position: absolute; border: 1.5px solid; border-radius: 4px; padding: 0; font: inherit; font-size: .68rem; line-height: 1.1;
  display: grid; place-items: center; cursor: pointer; container-type: size;
  animation: map-in .25s var(--ease) calc(var(--i) * 25ms) backwards; transition: background-color .2s, box-shadow .15s, opacity .3s; }
.map-room::after { content: ""; position: absolute; inset: -8px; }      /* the hit pad */
.map-room .lbl { display: none; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; max-width: 100%; }
/* The shape's number: shown on phones only, where the name rarely fits; the list under the plan carries the names */
.map-room .num { display: none; position: absolute; top: 2px; inset-inline-start: 2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  background: var(--brand); color: #fff; font-size: .62rem; font-weight: 700; line-height: 16px; text-align: center; }
/* Zoomed, every shape is large enough for its name: the font is divided by the zoom so it fits the layout box, and the numbers step aside */
.map.zoomed .map-room .lbl { display: block; font-size: calc(.72rem / var(--zoom, 1)); }
.map.zoomed .map-room .num { display: none; }
.map-legend { display: none; list-style: none; padding: 0; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }
.map-legend-item { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--rule); border-radius: 999px; padding-block: 4px; padding-inline: 6px 10px;
  background: var(--surface); color: var(--ink); font: inherit; font-size: .8rem; cursor: pointer; }
.map-legend-item .num { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--brand); color: #fff; font-size: .68rem; font-weight: 700; }
.map-legend-item.on { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); font-weight: 600; }
.map-legend-item:disabled { opacity: .6; cursor: not-allowed; }
@container (min-width: 64px) and (min-height: 16px) { .map-room .lbl { display: block; } }
.map-room.free { background: var(--brand-soft); border-color: #b9c27e; color: var(--brand-deep); animation: map-in .25s var(--ease) calc(var(--i) * 25ms) backwards, map-breathe 2.4s ease-in-out infinite; }
.map-room.held { background: color-mix(in srgb, #ffc94d 55%, transparent); border-color: #ffc94d; color: #3d2c00; }
.map-room.booked { background: color-mix(in srgb, var(--brand) 22%, transparent); border-color: var(--brand); color: var(--brand-deep); }
.map-room.blocked { background: repeating-linear-gradient(135deg, var(--sunk) 0 5px, var(--surface) 5px 10px); border-color: var(--rule-firm); color: var(--ink-2); }
.map-room.unavailable { background: var(--sunk); border-style: dashed; border-color: var(--rule-firm); pointer-events: none; }
.map-room:hover, .map-room:focus-visible { border-width: 2px; outline: none; z-index: 2; }
.map-room:hover { box-shadow: 0 0 0 4px var(--brand-soft); }
.map-room.on { box-shadow: inset 0 0 0 2px var(--brand); font-weight: 600; z-index: 1; animation: map-pop .3s var(--ease); }
/* The keyboard ring is a brand ring over a surface gap, after .on so the picked room keeps both its inset mark and the ring */
.map-room:focus-visible { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--brand); }
.map-room.on:focus-visible { box-shadow: inset 0 0 0 2px var(--brand), 0 0 0 2px var(--surface), 0 0 0 4px var(--brand); }
/* The breathe animates box-shadow and would beat the ring on a free room a keyboard user tabs through */
.map-room.free:focus-visible { animation: none; }
.map-room.dim { opacity: .55; }
.map-room:disabled { cursor: not-allowed; opacity: .6; }
.map-tip { position: absolute; z-index: 3; pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity .15s, transform .15s;
  display: grid; gap: 2px; width: max-content; max-width: 220px; padding: var(--s2) var(--s3); border-radius: 10px;
  background: var(--surface); box-shadow: var(--shadow-lift); font-size: .78rem; }
.map-room:hover + .map-tip, .map-room:focus-visible + .map-tip { opacity: 1; transform: none; }
/* Zoomed, the pane is scaled 2.2x and so would be the tip; the info strip carries the text instead */
.map.zoomed .map-tip { display: none; }
.map-info { min-height: 24px; font-size: .84rem; color: var(--ink-2); margin-top: var(--s3); }
/* The builder: shapes drag (the script owns the drag), the selected one shows four corner handles */
.map.edit .map-room { touch-action: none; cursor: move; }
/* Above the shape's own hit pad (the ::after that widens the target), or the corner cannot be grabbed */
.map.edit .map-room .handle { position: absolute; z-index: 2; width: 12px; height: 12px; border-radius: 3px; background: var(--brand); box-shadow: 0 1px 3px rgba(0,0,0,.25); touch-action: none; }
.map.edit .map-room .handle.nw { top: -6px; left: -6px; cursor: nwse-resize; }
.map.edit .map-room .handle.se { bottom: -6px; right: -6px; cursor: nwse-resize; }
.map.edit .map-room .handle.ne { top: -6px; right: -6px; cursor: nesw-resize; }
.map.edit .map-room .handle.sw { bottom: -6px; left: -6px; cursor: nesw-resize; }
.map.edit.drawing { cursor: crosshair; touch-action: none; }
.map-draft { position: absolute; border: 1.5px dashed var(--brand); background: var(--wheat-soft); pointer-events: none; }
/* The builder's bar: the room list, the mode buttons and the save; under it the selected shape as four numbers */
.plan-bar { display: flex; align-items: flex-end; gap: var(--s2); flex-wrap: wrap; }
.plan-bar .plan-room { flex: 1 1 220px; max-width: 320px; }
.plan-bar .spacer { flex: 1; }
.plan-shape { display: flex; align-items: flex-end; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s3); }
.plan-shape .plan-shape-name { flex: 1 1 100%; }
.plan-shape .plan-num { width: 96px; }
@keyframes map-in { from { opacity: 0; } }
@keyframes map-pop { 50% { transform: scale(1.03); } }
@keyframes map-breathe { 50% { box-shadow: 0 0 0 3px var(--brand-soft); } }
@media (max-width: 599.98px) {
  /* The plan on a phone scrolls sideways at a width that keeps a 5 m wall tappable; a name shows where it fits, and every shape is numbered with its name in the list under the plan */
  .map { min-width: 640px; }
  /* Zoomed, the box fits the screen, so the fly-to-room centres the room in what is visible, not in a box twice the screen's width */
  .map.zoomed { min-width: 0; }
  .map-room { font-size: .6rem; }
  .map-room .num { display: block; }
  .map-legend { display: flex; }
  .room-pick { max-width: none; }
  /* The booking bar on phones: the choice on top, then the two buttons side by side */
  .ruler-track { --slot-w: 40px; --day-w: 64px; grid-auto-rows: 46px; }
  .rooms-bar { gap: var(--s3); }
  /* On a phone the toolbar is a stack: the room, the durations stretched across as one control, the two actions as equal pills */
  .rooms-bar-durs .durs { grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); }
  .rooms-bar-actions { width: 100%; margin-inline-start: 0; display: grid; grid-template-columns: 1fr 1fr; align-self: auto; }
  .rooms-bar-actions .mud-button-root { width: 100%; }
  .manual-entry .manual-date, .manual-entry .manual-time, .manual-entry .manual-dur { flex: 1 1 calc(50% - var(--s3)); max-width: none; }
  .manual-entry .manual-go { flex: 1 1 100%; }
  .plan-shape .plan-num { flex: 1 1 calc(50% - var(--s2)); width: auto; }
  .rooms-bar-room { max-width: none; }
  .week-nav { padding: var(--s2) var(--s3); }
  .week-nav .day-pick { display: none; }
  .week-nav .legend { width: 100%; }
  .book-bar .book-text { flex: 1 1 100%; }
  .book-bar .spacer { display: none; }
  .book-bar .mud-button-filled { flex: 1; }
  .choice .mud-button-root { flex: none; }
}

/* ── Bell ──────────────────────────────────────────────────────── */
.bell-list { width: min(360px, 92vw); }
.bell-head { display: flex; align-items: center; justify-content: space-between; padding: var(--s2) var(--s4) var(--s1); }
.bell-empty { padding: var(--s3) var(--s4) var(--s4); color: var(--ink-3); }
.bell-item .mud-menu-item-text, .bell-item { display: block; }
.bell-item .k { display: block; font-size: .72rem; font-weight: 700; color: var(--brand); }
.bell-item .t { display: block; font-size: .86rem; white-space: normal; line-height: 1.5; }
.bell-item .w { display: block; font-size: .72rem; color: var(--ink-3); }
.bell-item.unread { background: var(--brand-soft); }

/* ── Empty state ───────────────────────────────────────────────── */
.empty { padding: var(--s5) var(--s3); text-align: center; }
.empty-mark { color: var(--brand); font-size: 2.2rem; width: 64px; height: 64px; padding: 16px; border-radius: 22px; background: var(--brand-soft); }
.empty-msg { color: var(--ink-2); }

/* ── Home hero: greeting, summary, and the four numbers on one gradient card ── */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: 28px; padding: var(--s5); color: #fff;
  background: linear-gradient(135deg, var(--brand-deep) 0%, var(--brand) 55%, #5b6620 100%);
  box-shadow: 0 28px 56px -26px rgba(47,53,16,.7);
}
.hero::before, .hero::after {
  content: ""; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none;
  width: 60%; aspect-ratio: 1;
}
.hero::before { top: -45%; inset-inline-end: -15%; background: radial-gradient(circle, rgba(248,192,0,.38), transparent 62%); }
.hero::after { bottom: -55%; inset-inline-start: -10%; width: 55%; background: radial-gradient(circle, rgba(24,120,176,.4), transparent 62%); }
.hero-top { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s4); flex-wrap: wrap; }
.hero-eyebrow { font-size: .82rem; font-weight: 600; color: var(--wheat); }
.hero-name { font-family: "Noto Kufi Arabic", sans-serif; font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.4rem); font-weight: 800; margin: 2px 0 0; line-height: 1.3; }
.hero-sum { margin: var(--s1) 0 0; opacity: .85; font-size: .95rem; max-width: 48ch; }
.hero-cta {
  display: inline-flex; align-items: center; gap: var(--s2); flex: none;
  padding-block: 11px; padding-inline: 16px 20px; border-radius: 999px; text-decoration: none;
  background: var(--wheat); color: var(--brand-deep); font-weight: 700; font-size: .95rem;
  box-shadow: 0 10px 24px -8px rgba(248,192,0,.7);
  transition: transform .15s var(--ease), box-shadow .2s;
}
.hero-cta:hover { transform: translateY(-1px); box-shadow: 0 14px 28px -8px rgba(248,192,0,.8); }
.hero-cta:active { transform: scale(.97); }
/* One quiet line of numbers under the greeting — the four glass tiles were a dashboard nobody asked for */
.hero-line { margin: var(--s4) 0 0; padding-top: var(--s3); border-top: 1px solid rgba(255,255,255,.14); font-size: .84rem; opacity: .8; }
/* On phones the bar's "+" already leads to a new request */
@media (max-width: 959.98px) { .hero { padding: var(--s4); border-radius: 24px; } .hero-cta { display: none; } }

/* ── Status pill: a dot and a tinted capsule ───────────────────── */
.pill {
  display: inline-flex; align-items: center; gap: 6px; padding-block: 3px; padding-inline: 8px 10px;
  border-radius: 999px; font-size: .74rem; font-weight: 700; white-space: nowrap; line-height: 1.5;
  background: var(--sunk); color: var(--ink-2);
}
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.pill.tone-wait { background: var(--wait-soft); color: var(--wait); }
.pill.tone-move { background: var(--move-soft); color: var(--move); }
.pill.tone-done { background: var(--done-soft); color: var(--done); }
.pill.tone-stop { background: var(--stop-soft); color: var(--stop); }
.pill.tone-late .dot { animation: blink 1.4s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .25; } }

/* ── Request rows ──────────────────────────────────────────────── */
.req-list { overflow: hidden; }
.req-row {
  position: relative; display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s4); min-height: 74px;
  color: inherit; text-decoration: none; transition: background .15s;
  -webkit-tap-highlight-color: transparent;
}
.req-row + .req-row::before { content: ""; position: absolute; top: 0; inset-inline: var(--s4); height: 1px; background: var(--rule); }
.req-row:hover { background: var(--sunk); }
.req-row:active { background: var(--brand-soft); }
.req-ico, .svc-ico {
  width: 44px; height: 44px; border-radius: 14px; flex: none;
  display: grid; place-items: center; background: var(--brand-soft); color: var(--brand);
}
.req-ico.tone-wh, .svc-ico.tone-wh { background: var(--move-soft); color: var(--move); }
.req-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; color: inherit; text-decoration: none; }
.req-title { font-weight: 700; font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.req-sub { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s2); font-size: .78rem; color: var(--ink-3); }
.req-sub > span + span::before { content: "·"; margin-inline-end: var(--s2); opacity: .6; }
.req-sub .num { white-space: nowrap; }
.req-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.req-due { font-size: .74rem; color: var(--ink-3); white-space: nowrap; }
.req-due.late { color: var(--stop); font-weight: 700; }
.req-go { color: var(--ink-3); flex: none; transition: transform .2s var(--ease); }
.req-row:hover .req-go { transform: translateX(-3px); }

@media (max-width: 599.98px) {
  .req-row { padding-inline: var(--s3); }
  .req-go { display: none; }
}

/* ── Service cards ─────────────────────────────────────────────── */
.svc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.svc-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 759.98px) { .svc-grid, .svc-grid.cols-3 { grid-template-columns: 1fr; } }

.svc {
  position: relative; display: flex; align-items: flex-start; gap: var(--s3);
  padding-block: var(--s4); padding-inline: var(--s4) calc(var(--s4) + 20px);
  background: var(--surface); border-radius: 18px; box-shadow: var(--shadow-card);
  color: inherit; text-decoration: none;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.svc:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.svc:active { transform: scale(.985); }
.svc-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.svc-t { font-weight: 700; font-size: .95rem; }
.svc-d { font-size: .8rem; color: var(--ink-3); }
.svc-m { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s1); font-size: .74rem; color: var(--ink-2); }
.svc-m span { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; background: var(--sunk); }
.svc-go { position: absolute; inset-inline-end: var(--s3); top: 50%; transform: translateY(-50%); color: var(--ink-3); }
.svc.compact { padding-block: var(--s3); align-items: center; }
.svc.compact .svc-ico { width: 38px; height: 38px; border-radius: 12px; }

/* The launcher search: one big pill */
.search .mud-input.mud-input-outlined { border-radius: 999px; box-shadow: var(--shadow-card); font-size: 1.05rem; }
/* At the library's own specificity (.mud-input.mud-input-outlined > .border), or its 14px wins and the pill fill pokes out */
.search .mud-input.mud-input-outlined > .mud-input-outlined-border { border-radius: 999px; }
.search .mud-input-adornment { margin-inline-start: var(--s2); }

/* ── Menu items inside SelectMenu ──────────────────────────────── */
.sm-group {
  display: block; font-size: .68rem; font-weight: 700; letter-spacing: .06em;
  color: var(--ink-3); margin: 0 0 4px; padding-bottom: 3px; border-bottom: 1px solid var(--rule);
}
.sm-main { display: block; }
.sm-sub { display: block; font-size: .72rem; color: var(--ink-3); }

/* ── Login (plain HTML form — posts to /login) ─────────────────── */
.login-wrap {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: 100dvh; display: grid; place-items: center; padding: var(--s5);
  background: #1e2309;
}
/* Three drifting colour fields in the logo colours, blurred into an aurora — the only decoration on the page */
.login-wrap::before {
  content: ""; position: absolute; inset: -25%; z-index: -1;
  background:
    radial-gradient(38% 38% at 25% 30%, rgba(95,106,34,.95), transparent 70%),
    radial-gradient(34% 34% at 78% 22%, rgba(24,120,176,.6), transparent 70%),
    radial-gradient(30% 30% at 62% 84%, rgba(248,192,0,.5), transparent 70%);
  filter: blur(48px);
  animation: drift 20s ease-in-out infinite alternate;
}
@keyframes drift { to { transform: translate(6%, -5%) rotate(10deg) scale(1.08); } }
.login-card {
  width: 100%; max-width: 400px; background: rgba(255,255,255,.94);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  border-radius: 28px; padding: var(--s6);
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.7);
  animation: rise .6s var(--ease) both;
}
.login-logo { display: block; width: 200px; max-width: 70%; height: auto; margin: 0 auto var(--s4); }
.login-card h1 { font-family: "Noto Kufi Arabic", sans-serif; font-size: 1.3rem; font-weight: 800; margin: 0 0 2px; }
.login-card .sub { color: var(--ink-3); font-size: .85rem; margin-bottom: var(--s5); }
.login-card .field { margin-bottom: var(--s4); }
.login-card label { display: block; font-weight: 600; font-size: .86rem; margin-bottom: 6px; }
.login-card input {
  width: 100%; box-sizing: border-box; padding: 13px var(--s4); font: inherit; font-size: 1rem;
  border: 1px solid var(--rule-firm); border-radius: 14px; background: var(--surface); color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
.login-card input:focus { outline: none; border-color: var(--brand-lift); box-shadow: 0 0 0 4px var(--brand-soft); }
.login-card .submit {
  width: 100%; padding: 14px; margin-top: var(--s2); font: inherit; font-weight: 700; font-size: 1rem;
  border: 0; border-radius: 999px; cursor: pointer; color: #fff;
  background: linear-gradient(135deg, var(--brand-lift), var(--brand));
  box-shadow: 0 12px 24px -10px rgba(72,80,24,.7);
  transition: transform .15s var(--ease), box-shadow .2s;
}
.login-card .submit:hover { transform: translateY(-1px); box-shadow: 0 16px 28px -10px rgba(72,80,24,.8); }
.login-card .submit:active { transform: scale(.98); }
.login-card .alert { padding: 10px var(--s3); border-radius: 12px; background: var(--stop-soft); color: var(--stop); font-size: .86rem; margin-bottom: var(--s4); }

/* ── Sticky action bar at the bottom of the screen ─────────────── */
.sticky-actions {
  position: sticky; bottom: var(--s3); z-index: 5;
  display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center;
  padding: var(--s3) var(--s4);
  background: var(--glass); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-radius: 22px; box-shadow: var(--shadow-lift), 0 0 0 1px rgba(21,25,15,.05);
}
.sticky-actions .spacer { flex: 1; }
@media (max-width: 959.98px) {
  .sticky-actions { bottom: calc(var(--bottom-nav) + var(--bottom-gap) + var(--s2) + env(safe-area-inset-bottom)); }
}
@media (max-width: 599.98px) {
  .sticky-actions > .mud-button-root { flex: 1 1 auto; }
  .sticky-actions > .mud-button-text { flex: 1 1 100%; }
  .sticky-actions .spacer { display: none; }
}

/* ── Page headers ──────────────────────────────────────────────── */
.page-head { margin-bottom: 0; }
.page-head.with-actions { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3); }
.page-head-text { min-width: 0; }
.page-head .eyebrow { font-size: .76rem; font-weight: 700; letter-spacing: .04em; color: var(--gold); margin-bottom: var(--s1); }
.page-head h1, .page-head .mud-typography-h1 { margin: 0; font-size: clamp(1.6rem, 1.25rem + 1.3vw, 2.1rem); font-weight: 800; }
.page-head p { margin: var(--s1) 0 0; color: var(--ink-3); font-size: .9rem; max-width: 62ch; }
.section-label { font-size: .8rem; font-weight: 700; letter-spacing: .03em; color: var(--ink-2); margin: 0 0 var(--s3); display: flex; align-items: center; gap: var(--s2); }
.section-label .pill { padding: 0 8px; font-size: .72rem; }

/* ── Stats (admin dashboard) ───────────────────────────────────── */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); }
@media (max-width: 759.98px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.stat { padding: var(--s4); background: var(--surface); border-radius: 18px; box-shadow: var(--shadow-card); }
.stat .n { display: block; font-family: "Noto Kufi Arabic", sans-serif; font-size: 1.8rem; font-weight: 800; line-height: 1.2; color: var(--brand); }
.stat .n.zero { color: var(--ink-3); }
.stat .n.tone-wait { color: var(--wait); }
.stat .n.tone-move { color: var(--move); }
.stat .n.tone-alert { color: var(--stop); }
.stat .l { display: block; margin-top: 4px; font-size: .78rem; color: var(--ink-3); }

/* ── Progress track: where the request stands, one glance ──────── */
/* With many stops (approvals, then every tracked execution step) the track scrolls inside itself, never the page;
   the padding keeps the current stop's ring clear of the scroll box */
.track { display: flex; list-style: none; margin: var(--s4) 0 0; padding: var(--s2) 0; overflow-x: auto; }
.track li {
  position: relative; flex: 0 1 44px; display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-align: center; font-size: .72rem; color: var(--ink-3); line-height: 1.35;
}
/* The current stop takes the free width, but its dot is pinned 22px from its start edge — not centred in the
   stretched column — so "1" sits in the same place on every row whatever the number of stops. Only it has a label;
   the other stops are dots, and the approval trail names them. */
.track li.now { flex: 1 1 auto; align-items: flex-start; padding-inline-start: 10px; }
.track li.now::before { width: 22px; }
.track li.now::after { inset-inline-start: 22px; inset-inline-end: 0; width: auto; }
.track li:not(.now) .t-l { display: none; }
.track li.now .t-l { white-space: nowrap; padding: 0; }
/* Each stop draws its own two half-lines, so nothing reaches past the track — a line drawn from one stop
   to the next overflowed the page on phones, where stops have different widths */
.track li::before, .track li::after { content: ""; position: absolute; top: 11px; width: 50%; height: 2px; background: var(--rule); }
.track li::before { inset-inline-start: 0; }
.track li::after { inset-inline-end: 0; }
.track li:first-child::before, .track li:last-child::after { content: none; }
.track li.done::before, .track li.done::after, .track li.now::before { background: var(--done); }
.t-dot {
  position: relative; z-index: 1; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface); border: 2px solid var(--rule-firm); color: var(--ink-3); font-size: .7rem; font-weight: 700;
}
.t-dot .mud-icon-root { width: 14px; height: 14px; font-size: 14px; }
.track li.done .t-dot { background: var(--done); border-color: var(--done); color: #fff; }
.track li.now .t-dot { background: var(--wheat); border-color: var(--wheat); color: var(--brand-deep); box-shadow: 0 0 0 5px var(--wheat-soft); }
.track li.now { color: var(--ink); font-weight: 700; }
.track li.stop .t-dot { background: var(--stop); border-color: var(--stop); color: #fff; }
.track li.stop { color: var(--stop); }
.t-l { padding: 0 4px; }
/* Wider screens have room: every stop gets its label, at a fixed width so the current dot stays pinned */
@media (min-width: 600px) {
  .track li { flex: 0 0 112px; }
  .track li:not(.now) .t-l { display: block; max-width: 104px; }
}

/* ── Approval trail: a timeline with a connecting line ─────────── */
.chain { list-style: none; margin: 0; padding: 0; }
.chain li { position: relative; display: flex; gap: var(--s3); padding: var(--s2) 0 var(--s4); }
.chain li:last-child { padding-bottom: 0; }
.chain li:not(:last-child)::before { content: ""; position: absolute; top: 40px; bottom: 0; inset-inline-start: 15px; width: 2px; background: var(--rule); }
.chain li.is-approved:not(:last-child)::before { background: #b7ddc6; }
.chain .dot {
  position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--sunk); color: var(--ink-3); font-size: .8rem; font-weight: 700;
}
.chain .is-approved .dot { background: var(--done); color: #fff; }
.chain .is-rejected .dot { background: var(--stop); color: #fff; }
.chain .is-current .dot { background: var(--wheat); color: var(--brand-deep); box-shadow: 0 0 0 5px var(--wheat-soft); animation: pulse 2.2s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 9px rgba(248,192,0,.15); } }
.chain .body { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-top: 5px; }
.chain .who { font-weight: 700; }
.chain .meta { font-size: .78rem; color: var(--ink-3); }
.chain .note { font-size: .84rem; color: var(--ink-2); background: var(--sunk); padding: 6px var(--s3); border-radius: 10px; margin-top: 4px; }

/* "Will be approved by" — the route the request will take, drawn as numbered stops */
.route {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3);
  padding: var(--s3) var(--s4);
  background: var(--surface); border-radius: 16px; box-shadow: var(--shadow-card); font-size: .86rem;
}
.route .lead { font-weight: 700; color: var(--gold); }
.route .stop-n { display: inline-flex; align-items: center; gap: 6px; padding-block: 3px; padding-inline: 4px 12px; border-radius: 999px; background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.route .stop-n i { font-style: normal; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--brand); color: #fff; font-size: .72rem; }
.route .arr { color: var(--ink-3); }
.route .hint { color: var(--ink-2); }

/* Step indicator of a new request: three numbered pills, the current one filled */
.steps { display: flex; gap: var(--s2); list-style: none; margin: 0; padding: 0; }
.steps li { display: inline-flex; align-items: center; gap: 6px; padding-block: 4px; padding-inline: 5px 12px; border-radius: 999px; background: var(--sunk); color: var(--ink-3); font-size: .8rem; font-weight: 600; }
.steps li i { font-style: normal; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--surface); color: var(--ink-3); font-size: .72rem; }
.steps li.now { background: var(--brand-soft); color: var(--brand); }
.steps li.now i { background: var(--brand); color: #fff; }
.steps li.done { color: var(--done); }
.steps li.done i { background: var(--done); color: #fff; }

/* "What happens after sending": numbered stops, then the sent screen */
.next-steps { list-style: none; margin: 0 0 var(--s4); padding: 0; display: flex; flex-direction: column; gap: var(--s2); }
.next-steps li { display: flex; align-items: center; gap: var(--s3); font-weight: 600; }
.next-steps li i { font-style: normal; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); font-size: .78rem; flex: none; }
.next-steps li i .mud-icon-root { width: 16px; height: 16px; }
/* Named "sent", not "done": "done" is a state class on track stops, and a bare .done rule padded every finished stop */
.sent { text-align: center; padding: var(--s6) var(--s4); max-width: 560px; margin: 0 auto; }
.sent-mark { display: grid; place-items: center; width: 88px; height: 88px; margin: 0 auto var(--s4); border-radius: 50%; background: linear-gradient(135deg, #3f9a66, var(--done)); color: #fff; box-shadow: 0 18px 40px -16px rgba(46,125,79,.7); animation: pop .6s var(--ease) both; }
.sent-mark .mud-icon-root { width: 44px; height: 44px; }
@keyframes pop { from { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.08); } to { transform: none; opacity: 1; } }
.sent-num { font-size: 1.05rem; color: var(--ink-3); margin: var(--s1) 0 var(--s5); }
.sent .facts { text-align: start; grid-template-columns: 1fr 1fr; }
.sent-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2); margin-top: var(--s6); }

/* A deleted request row: the restore button sits beside the text on desktop and under it on phones,
   so the meta line keeps its full width instead of wrapping around the button */
.req-row.deleted > .mud-button-root { flex: none; }
@media (max-width: 599.98px) {
  .req-row.deleted > .mud-button-root { flex: 0 0 auto; margin-inline-start: calc(44px + var(--s3)); }
  .req-row.deleted .req-main { flex-basis: calc(100% - 44px - var(--s3)); }
}
/* A request row wraps: a deleted row's restore button drops under its text on phones */
.req-row { flex-wrap: wrap; }

/* The decision sheet: title with number and pill, content spacing */
.sheet-title { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.sheet-title .eyebrow { font-size: .74rem; font-weight: 700; color: var(--gold); }
.decision-sheet .section-label { margin-top: var(--s4); }
.sheet-btns { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); width: 100%; }
.sheet-btns .open-link { order: -1; margin-inline-end: auto; }
@media (max-width: 599.98px) {
  .sheet-btns .mud-button-filled { flex: 1 1 100%; order: -2; }
  .sheet-btns .mud-button-outlined, .sheet-btns .mud-button-text:not(.open-link) { flex: 1 1 40%; }
  .sheet-btns .open-link { flex: 1 1 100%; order: 5; margin: 0; }
}

/* The request page: one column at reading width, a header card, then tabs — not six cards in two uneven columns */
.req-page { max-width: 880px; margin: 0 auto; }
.req-head .page-head { margin-bottom: 0; }
.req-head .facts { grid-template-columns: repeat(3, minmax(0, max-content)); gap: var(--s3) var(--s7); }
.req-head .track { margin-top: var(--s5); }
@media (max-width: 599.98px) { .req-head .facts { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: var(--s3); } }
/* Logs page: the tool row, then rows of time + what happened */
.log-tools { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; margin-bottom: var(--s3); }
.log-tools .pick { flex: 1 1 180px; min-width: 0; }
.log-tools .mud-input-control { margin: 0; }
.log-row { position: relative; display: flex; gap: var(--s3); padding: var(--s3) var(--s4); font-size: .88rem; }
.log-row + .log-row::before { content: ""; position: absolute; top: 0; inset-inline: var(--s4); height: 1px; background: var(--rule); }
.log-row .when { flex: none; color: var(--ink-3); font-size: .76rem; padding-top: 3px; white-space: nowrap; }
.log-row .body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.log-row .subject { unicode-bidi: isolate; }
/* System-log lines are English: isolated left-to-right so punctuation and ids do not flip inside the RTL page */
.log-row .msg { display: block; direction: ltr; unicode-bidi: isolate; text-align: left; overflow-wrap: anywhere; margin-top: 2px; }
.log-row .src { font-size: .72rem; color: var(--ink-3); direction: ltr; unicode-bidi: isolate; text-align: left; overflow-wrap: anywhere; }
.log-row .note { color: var(--ink-2); background: var(--sunk); padding: 6px var(--s3); border-radius: 10px; margin-top: 4px; font-size: .82rem; overflow-wrap: anywhere; }
.log-row.is-error { background: var(--stop-soft); }
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2); margin-top: var(--s3); font-size: .82rem; }
@media (max-width: 599.98px) { .log-row { flex-direction: column; gap: 4px; } }
/* Sensitive actions: a quiet row of red text buttons at the end of the page */
.danger-zone { display: flex; flex-wrap: wrap; gap: var(--s2); justify-content: flex-end; }
/* The decision card: a tinted surface, the one thing on the page that asks something of the reader */
.decision { background: linear-gradient(160deg, #f4f6ea, #fff 65%); }

/* ── Activity log ──────────────────────────────────────────────── */
.log { list-style: none; margin: 0; padding: 0; font-size: .88rem; }
.log li { display: grid; grid-template-columns: 1fr auto; gap: var(--s3); align-items: start; padding: var(--s3) 0; border-bottom: 1px solid var(--rule); }
.log li:first-child { padding-top: 0; }
.log li:last-child { border-bottom: 0; padding-bottom: 0; }
.log .what { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.log .who { font-weight: 700; }
.log .act { color: var(--ink-2); }
.log .note { color: var(--ink-2); background: var(--sunk); padding: 6px var(--s3); border-radius: 10px; margin-top: 4px; }
.log .when { color: var(--ink-3); font-size: .76rem; white-space: nowrap; padding-top: 3px; }

/* ── Facts: a label above its value — read in one pass, no sentence to parse ── */
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3) var(--s4); margin-top: var(--s4); }
.facts.wrap { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); margin-top: 0; }
.fact { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fact.wide { grid-column: 1 / -1; }
.fact .k { font-size: .74rem; font-weight: 600; color: var(--ink-3); }
.fact .v { font-size: .98rem; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.fact .v.late { color: var(--stop); }
@media (max-width: 599.98px) {
  .facts { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: var(--s3); }
  .facts.wrap { grid-template-columns: 1fr 1fr; }
  .fact .v { font-size: .92rem; }
}

/* Form labels above the field; help and errors under it, quieter than the value */
.f-label { display: block; font-size: .84rem; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; line-height: 1.4; }
.f-label .req { color: var(--stop); margin-inline-start: 2px; }
.field-help { display: block; margin-top: 4px; color: var(--ink-3); font-size: .76rem; line-height: 1.5; }
.field-error { display: block; margin-top: 4px; font-size: .78rem; }
.field .mud-input-control { margin-top: 0; }

/* ── Attachments ───────────────────────────────────────────────── */
.file-row { display: flex; align-items: center; gap: var(--s2); padding: 8px 0; border-bottom: 1px solid var(--rule); }
.file-row:last-child { border-bottom: 0; }
.file-row .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-row .sz { font-size: .76rem; color: var(--ink-3); }

/* ── Dynamic form grid ─────────────────────────────────────────── */
.form-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s4) var(--s3); }
.form-grid > .field { grid-column: span 6; }
.form-grid > .field.short { grid-column: span 3; }
.form-grid > .field.wide { grid-column: 1 / -1; }
@media (max-width: 1099.98px) { .form-grid > .field.short { grid-column: span 6; } }
/* On a phone a short field keeps half the line: a date beside a count, a checkbox beside a checkbox */
@media (max-width: 759.98px) { .form-grid > .field { grid-column: 1 / -1; } .form-grid > .field.short { grid-column: span 6; } }

/* ── Conditions editor ─────────────────────────────────────────── */
/* One condition = one aligned row: field, operator, value, remove. Never wrapped, so the rows line up. */
.cond { display: grid; grid-template-columns: minmax(0, 1.2fr) 7.5rem minmax(0, 1.2fr) auto; gap: var(--s2); align-items: center; }
.cond > .mud-input-control { min-width: 0; }
.conds { display: flex; flex-direction: column; gap: var(--s2); }
.cond-group { background: var(--sunk); border-radius: 12px; padding: var(--s3); }
.cond-or { display: flex; align-items: center; gap: var(--s3); margin: var(--s2) 0; font-size: .78rem; font-weight: 700; color: var(--ink-3); }
.cond-or::before, .cond-or::after { content: ""; flex: 1; border-top: 1px solid var(--rule-firm); }
@media (max-width: 599.98px) {
  .cond { grid-template-columns: minmax(0, 1fr) auto; }
  .cond > .cond-field, .cond > .cond-op, .cond > .cond-val { grid-column: 1; }
  .cond > .mud-icon-button { grid-column: 2; grid-row: 1 / span 3; }
  /* Stacked, each row is its own card: otherwise nothing separates one condition's three fields from the next one's */
  .conds { gap: var(--s3); }
  .cond, .opt { background: var(--paper); border: 1px solid var(--rule); border-radius: 12px; padding: var(--s3); }
  .cond-group { padding: var(--s2); }
}
.conds-foot { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; font-size: .82rem; color: var(--ink-3); }

/* ── Admin and catalog editor ── */
.val-off { color: var(--ink-3); text-decoration: line-through; }
.row-tappable { cursor: pointer; }
.filter { flex: 1 1 240px; min-width: 0; }
.role-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); column-gap: var(--s3); }
.num-col { width: 8rem; font-variant-numeric: tabular-nums; }

/* Editor tables: fields inside cells align to the top, and the settings panel is a sunken row under the field */
.etable .mud-table-cell { vertical-align: top; }
.settings-cell { background: var(--sunk); padding: var(--s4) !important; }
.settings { display: flex; flex-direction: column; gap: var(--s3); }
.opts { display: flex; flex-direction: column; gap: var(--s2); }
.opt { display: grid; grid-template-columns: 1fr 1.4fr auto; gap: var(--s2); align-items: start; }
.opt.col { grid-template-columns: 1fr 1.2fr 1fr auto; }
.inline-row { display: flex; gap: var(--s2); align-items: flex-start; flex-wrap: wrap; }
.inline-row > .mud-input-control, .inline-row > .f-block { flex: 1 1 200px; min-width: 0; }
.none-note { color: var(--ink-3); }
.col-party { width: 24rem; }
.col-actions { white-space: nowrap; }
.col-days { width: 9rem; }
.cond-wait { color: var(--ink-3); }
@media (max-width: 599.98px) {
  .opts { gap: var(--s3); }
  .opt, .opt.col { grid-template-columns: 1fr auto; }
  .opt > .mud-input-control, .opt > .inline-row { grid-column: 1; }
  .opt > .mud-icon-button { grid-column: 2; grid-row: 1; }
  .col-party, .col-days { width: auto; min-width: 0; }
}
/* The tab bar sticks under the top bar so it is not lost on a long page */
.editor-tabs .mud-tabs-tabbar { position: sticky; top: 56px; z-index: 2; background: var(--paper); }

/* Permissions matrix: scrolls horizontally with a pinned name column */
.perm-wrap { overflow-x: auto; }
.perm-table th, .perm-table td { white-space: nowrap; }
.perm-name { position: sticky; inset-inline-start: 0; background: var(--surface); z-index: 1; min-width: 200px; }
.perm-role { text-align: center; font-weight: 600; }
.perm-cell { text-align: center; }

/* Admin dashboard: horizontal bars */
.bars { display: flex; flex-direction: column; gap: var(--s2); }
.bar-row { display: grid; grid-template-columns: minmax(120px, 1fr) 3rem 2fr; gap: var(--s3); align-items: center; }
.bar-row .mud-chip { justify-self: start; }
.bar-n { font-variant-numeric: tabular-nums; font-weight: 600; text-align: center; }
.bar-label { display: flex; flex-direction: column; min-width: 0; }
.bar-label > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-sub { font-size: .8rem; color: var(--ink-3); }
@media (max-width: 599.98px) {
  .bar-row { grid-template-columns: 1fr 3rem; }
  .bar-row .mud-progress-linear { grid-column: 1 / -1; }
}

/* Lookup lists: chips scroll horizontally on phones */
.list-keys { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: var(--s1); padding-bottom: var(--s1); scrollbar-width: none; }
@media (min-width: 600px) { .list-keys { flex-wrap: wrap; } }
.chip-n { font-size: .75rem; opacity: .7; margin-inline-start: var(--s1); }

/* Dynamic form and row table */
.datetime-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.field-check { margin-top: var(--s2); }
.check-row { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); }
.row-card { padding: var(--s3); margin-bottom: var(--s2); }
.row-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--s2); color: var(--ink-3); font-size: .85rem; }
.row-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--s2); }

/* Editor tabs on phones: no 160px minimum and no icons, otherwise only one tab shows */
@media (max-width: 599.98px) {
  .editor-tabs .mud-tab { min-width: 0 !important; padding: 0 var(--s3); }
  .editor-tabs .mud-tab .mud-icon-root { display: none; }
}

/* Second guard on top of MudHidden: before the server knows the screen width, everything is rendered */
@media (min-width: 960px) { .bottom-nav, .sheet { display: none !important; } }

@keyframes sheet-up { from { transform: translateY(48px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .mud-drawer.sheet, .bnav-ico, .svc, .req-go, .mud-button-root, .map-room, .map-floor, .map-tip { transition: none !important; }
  .mud-dialog, .app-content > *, .login-card, .login-wrap::before, .chain .is-current .dot, .pill .dot, .map-room { animation: none !important; }
}

/* Loading bar: fixed under the top bar, shown after a short delay so it does not flicker */
.load-bar { position: fixed; top: 56px; inset-inline: 0; z-index: 1400; height: 3px; animation: fade-in 0s 250ms both; }
.load-bar[hidden] { display: none !important; }
/* One bar, three reasons to show it: the server says it is busy (the rule above lifts), a tap has had no answer for a
   moment (pending), or the page is drawn but not connected yet (connecting). The last two are set by the browser,
   which is the only side that can speak on a slow line. A page that never connects stops the bar after 20 seconds. */
html.pending .load-bar[hidden], html.connecting .load-bar[hidden] { display: block !important; }
html.connecting .load-bar { animation: fade-in 0s 250ms both, give-up 0s 20s forwards; }
@keyframes give-up { to { visibility: hidden; } }
html.pending, html.pending body { cursor: progress; }
.is-pending { opacity: .6; pointer-events: none; }
.loading-block { display: grid; gap: var(--s2); }
/* Which build is this: the side menu, the phone's "more" sheet and the login card end with it */
.app-version { color: var(--ink-3); font-size: .75rem; text-align: center; }
.login-card .app-version { margin-top: var(--s4); }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* Editor tables on phones: the label above the field, not beside it — the field needs the full width,
   and the "party" label next to the select left it a third of the screen */
/* MudTable always sets mud-sm-table and scopes phone behaviour to a media query — our rule is scoped the same way,
   otherwise table cells turn into blocks on desktop too */
@media (max-width: 599.98px) {
  .mud-sm-table.etable .mud-table-cell { display: block; padding: var(--s2); }
  .mud-sm-table.etable .mud-table-cell::before {
    display: block; padding: 0; margin-bottom: var(--s1);
    font-size: .74rem; font-weight: 600; color: var(--ink-3);
  }
  .mud-sm-table.etable .mud-table-cell:not([data-label])::before { content: none; }
  .mud-sm-table.etable .mud-table-cell .mud-input-control { width: 100%; }
  /* Each row is a card of its own, so one row's stacked fields are not read as the next row's.
     Two columns: a text field or a select takes the whole line; a time, a number, a checkbox, a name or the
     buttons take half, so a short control never leaves the other half of its line empty. */
  .mud-sm-table.etable .mud-table-row { display: grid; grid-template-columns: 1fr 1fr; align-items: center; border: 1px solid var(--rule); border-radius: 12px; margin: var(--s3); padding: var(--s2) var(--s1); }
  .mud-sm-table.etable .mud-table-row .mud-table-cell { border-bottom: none; }
  .mud-sm-table.etable .mud-table-cell:has(.mud-input-control), .mud-sm-table.etable .mud-table-cell:has(.conds), .mud-sm-table.etable .settings-cell { grid-column: 1 / -1; }
  .mud-sm-table.etable .mud-table-cell:has(.mud-picker), .mud-sm-table.etable .mud-table-cell:has(.mud-input-number-control),
  .mud-sm-table.etable .mud-table-cell:has(.mud-input-control-boolean-input) { grid-column: auto; }
  /* A checkbox reads as "label ☑" on one line, the box at the reading edge, like the library's own labelled checkbox */
  .mud-sm-table.etable .mud-table-cell:has(.mud-input-control-boolean-input) { display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: var(--s1); }
  .mud-sm-table.etable .mud-table-cell:has(.mud-input-control-boolean-input)::before { margin: 0; font-size: .9rem; font-weight: 400; color: var(--ink); }
  .mud-sm-table.etable .mud-table-cell:has(.mud-input-control-boolean-input)::before { white-space: nowrap; }
  .mud-sm-table.etable .mud-table-cell .mud-input-control-boolean-input { width: auto; flex: none; }
  .mud-sm-table.etable .cell-head { font-weight: 700; }
  /* Half a line is too narrow for "07:30 ص" beside a clock icon; the field opens on tap without it */
  .mud-sm-table.etable .mud-picker .mud-input-adornment { display: none; }
  .mud-sm-table.etable .mud-table-row:has(> .settings-cell) { margin-top: calc(-1 * var(--s2)); border-top-left-radius: 0; border-top-right-radius: 0; }
  .mud-sm-table.etable .mud-table-row:has(+ .mud-table-row > .settings-cell) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
}

/* The attach button inside MudFileUpload used to stretch across the whole page */
.mud-file-upload .mud-button-root { align-self: flex-start; }