/*
 * The simplified Mulkdar look (2026-09): larger text, fewer and bigger targets, the brand's navy,
 * gold and ivory. Loaded after base.css and theme.css and overrides them. Logical properties only.
 */
:root {
  --bg: #FAF7F1;
  --surface: #FFFFFF;
  --fg: #17202B;
  --muted: #4A5568;
  --line: #E4DDCF;
  --line-strong: #CFC5B2;
  --accent: #0F2D52;
  --accent-fg: #FFFFFF;
  --navy: #0F2D52;
  --navy-hover: #0A1F3A;
  --navy-tint: #E8EEF6;
  --gold: #C9A961;
  --gold-ink: #8A6A22;
  --tint: #F3EEE3;
  --danger: #9F1C12;
  --danger-bg: #FCE8E6;
  --warn: #7A4A00;
  --warn-bg: #FFF2D6;
  --ok: #1B5E33;
  --ok-bg: #E3F2E7;
  --radius: 16px;
  --sidebar: 19rem;
  /* The brand typeface for both languages (static/css/fonts.css), with system fallbacks. */
  --font-ar: "Readex Pro", "Segoe UI", Tahoma, sans-serif;
  --font-en: "Readex Pro", "Segoe UI", system-ui, sans-serif;
}
html[lang="ar"] body { line-height: 1.75; }

/* Text size: three steps chosen in the top bar (static/js/text-size.js). Everything is in rem.
   Small 14 px, normal 16 px (the browser's own size), large 18 px. */
html { font-size: 100%; }
html[data-text="1"] { font-size: 87.5%; }
html[data-text="3"] { font-size: 112.5%; }

body { background: var(--bg); color: var(--fg); }
a { color: var(--navy); }
:focus-visible { outline: 3px solid var(--gold-ink); outline-offset: 3px; }
h1 { font-size: clamp(1.625rem, 2.4vw, 2.125rem); color: var(--navy); }
h2 { font-size: 1.25rem; color: var(--navy); }
.muted { color: var(--muted); }
.card { border-color: var(--line); border-radius: 20px; box-shadow: none; }

/* --- Buttons ----------------------------------------------------------------------------------------------- */
.btn { min-block-size: 52px; border: 2px solid var(--line-strong); border-radius: 14px; font-weight: 600; }
.btn:hover { background: var(--tint); border-color: var(--line-strong); }
.btn--primary { background: var(--navy); border-color: var(--navy); color: #FFFFFF; }
.btn--primary:hover { background: var(--navy-hover); border-color: var(--navy-hover); }
.btn--small { min-block-size: 44px; font-size: .9375rem; }
.btn--ghost { border-color: transparent; }
.btn .icon { inline-size: 1.35rem; block-size: 1.35rem; }

/* --- Sidebar: six places, white, the current one in navy -------------------------------------------------- */
.app-stage { margin-inline-start: var(--sidebar); }
.app-sidebar {
  inline-size: var(--sidebar); padding: 1.5rem 1rem 1rem;
  background: var(--surface); color: var(--fg); border-inline-end: 1px solid var(--line);
}
.app-sidebar .brand { color: var(--navy); }
.app-sidebar .brand span { font-size: 1.4rem; }
.app-sidebar .brand-mark:has(.brand-logo) { box-shadow: none; }
.brand-logo { inline-size: 46px; block-size: 46px; }
.sidebar-caption { color: var(--muted); font-size: .875rem; margin-block: .35rem 1.25rem; }
.sidebar-nav { gap: .35rem; }
.nav-link {
  min-block-size: 56px; gap: .85rem; padding: .5rem 1rem; border-radius: 14px;
  color: var(--fg); font-size: 1.0625rem; font-weight: 500;
}
.nav-link .icon { inline-size: 1.6rem; block-size: 1.6rem; color: var(--navy); }
.nav-link:hover { background: var(--navy-tint); color: var(--navy); }
.nav-link[aria-current="page"] { background: var(--navy); color: #FFFFFF; font-weight: 700; box-shadow: none; }
.nav-link[aria-current="page"] .icon { color: #FFFFFF; }
.app-sidebar :focus-visible { outline-color: var(--gold-ink); }
.sidebar-footer .btn { color: var(--muted); background: transparent; border-color: var(--line); }
.sidebar-footer .btn:hover { background: var(--tint); color: var(--navy); border-color: var(--line-strong); }
.sidebar-close { color: var(--fg); background: transparent; border-color: var(--line); }
.sidebar-close:hover { background: var(--tint); color: var(--navy); border-color: var(--line-strong); }

/* --- Top bar: search, text size, notifications, language, sign out ---------------------------------------- */
.app-topbar { min-block-size: 88px; gap: .75rem 1rem; background: var(--surface); border-block-end-color: var(--line); }
.topbar-search {
  flex: 1 1 14rem; display: flex; align-items: center; gap: .6rem; min-block-size: 56px; margin: 0;
  padding-inline: 1rem; border: 2px solid var(--line-strong); border-radius: 16px; background: #FFFFFF; color: var(--navy);
}
.topbar-search:focus-within { border-color: var(--navy); }
.topbar-search .icon { inline-size: 1.5rem; block-size: 1.5rem; }
.topbar-search input {
  flex: 1; min-inline-size: 0; border: 0; outline: none; background: transparent; color: var(--fg); font: inherit;
}
.topbar-search input::placeholder { color: #5B6472; }
.text-size {
  display: flex; align-items: center; gap: .2rem; padding: .25rem .35rem;
  border: 2px solid var(--line-strong); border-radius: 14px; background: #FFFFFF;
}
.text-size__label { padding-inline: .4rem; color: var(--muted); font-size: .8125rem; }
.text-size__step {
  inline-size: 2.4rem; block-size: 2.4rem; border: 0; border-radius: 10px;
  background: transparent; color: var(--fg); font: inherit; font-weight: 700; line-height: 1; cursor: pointer;
}
.text-size__step--1 { font-size: .8125rem; }
.text-size__step--2 { font-size: 1rem; }
.text-size__step--3 { font-size: 1.25rem; }
.text-size__step:hover { background: var(--tint); }
.text-size__step[aria-pressed="true"] { background: var(--navy); color: #FFFFFF; }
.topbar-bell .icon { inline-size: 1.4rem; block-size: 1.4rem; }
/* With the sidebar on screen, sign out lives at its foot; the top bar keeps it only on small screens. */
@media (min-width: 64.01rem) { .app-shell .topbar-signout { display: none; } }

/* --- Office home ------------------------------------------------------------------------------------------ */
.home-greeting h1 { margin-block: 0 .25rem; }
.home-greeting p { margin: 0; }
.quick-actions {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  gap: 1rem; margin-block: 1.25rem 1.5rem;
}
.quick-action {
  display: flex; align-items: center; gap: 1rem; min-block-size: 6.25rem; padding: 1rem 1.25rem;
  border: 2px solid var(--navy); border-radius: 20px; background: #FFFFFF; color: var(--navy); text-decoration: none;
}
.quick-action:hover { box-shadow: 0 6px 18px rgb(15 45 82 / 12%); }
.quick-action__icon {
  display: grid; place-items: center; flex: none; inline-size: 3.25rem; block-size: 3.25rem;
  border-radius: 50%; background: var(--navy-tint); color: var(--navy);
}
.quick-action__icon .icon { inline-size: 1.75rem; block-size: 1.75rem; }
.quick-action__text { display: grid; gap: .15rem; }
.quick-action__text strong { font-size: 1.15rem; }
.quick-action__text span { color: var(--muted); font-size: .9375rem; }
.quick-action--primary { background: var(--navy); color: #FFFFFF; }
.quick-action--primary .quick-action__icon { background: #FFFFFF; }
.quick-action--primary .quick-action__text span { color: #D8E0EC; }

.month-card .section-head { align-items: flex-start; }
.month-card .section-head p { margin: .15rem 0 0; font-size: .875rem; }
.month-card__sentence { margin-block: .75rem 1rem; font-size: 1.35rem; font-weight: 600; line-height: 1.6; }
.progress { block-size: 1.1rem; border-radius: 999px; background: #ECE6DA; overflow: hidden; }
.progress > span { display: block; block-size: 100%; max-inline-size: 100%; border-radius: 999px; background: var(--navy); }
.month-card__facts {
  display: flex; flex-wrap: wrap; gap: .4rem 2rem; margin: 1rem 0 0; padding: 0; list-style: none; color: var(--muted);
}

.section-intro { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem; margin-block: 1.75rem .75rem; }
.section-intro h2, .section-intro p { margin: 0; }
.follow-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr)); gap: 1rem; margin-block-end: 1.5rem;
}
.follow-tile {
  display: flex; flex-direction: column; gap: .3rem; padding: 1.15rem 1.25rem;
  border: 2px solid #CBD6E6; border-radius: 20px; background: #FFFFFF; color: var(--fg); text-decoration: none;
}
.follow-tile:hover { border-color: var(--navy); }
.follow-tile__head { display: flex; align-items: center; gap: .75rem; }
.follow-tile__icon {
  display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; border-radius: 50%;
  background: var(--navy-tint); color: var(--navy);
}
.follow-tile__icon .icon { inline-size: 1.5rem; block-size: 1.5rem; }
.follow-tile__count { font-size: 2.1rem; font-weight: 700; line-height: 1; color: var(--navy); }
.follow-tile strong { font-size: 1.05rem; }
.follow-tile .muted { font-size: .9rem; }
.follow-tile__open { margin-block-start: auto; padding-block-start: .35rem; color: var(--navy); font-weight: 700; font-size: .9375rem; }
.follow-tile--danger { border-color: #F2B8B2; background: #FFF7F6; }
.follow-tile--danger .follow-tile__icon { background: #FCE1DD; color: var(--danger); }
.follow-tile--danger .follow-tile__count { color: var(--danger); }
.follow-tile--warning { border-color: #EBD9B0; }
.follow-tile--warning .follow-tile__icon { background: var(--warn-bg); color: var(--warn); }
.follow-tile--warning .follow-tile__count { color: var(--warn); }

.late-list { margin: 0; padding: 0; list-style: none; }
.late-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem;
  padding-block: 1rem; border-block-start: 1px solid var(--line);
}
.late-row:first-child { border-block-start: 0; }
.late-row__who { flex: 1 1 16rem; display: grid; gap: .1rem; }
.late-row__who strong { font-size: 1.1rem; }
.late-row__amount { display: grid; justify-items: end; gap: .25rem; }
.late-row__balance { font-size: 1.25rem; font-weight: 700; color: var(--danger); }
.late-row__actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.home-more-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); gap: 0 1.25rem; }

/* --- Recording money: three steps, one question each -------------------------------------------------- */
.btn--large { min-block-size: 64px; padding-inline: 1.75rem; font-size: 1.1rem; border-radius: 16px; }
.stepper {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem;
  margin: 0 0 1.75rem; padding: 0; list-style: none;
}
.stepper__step {
  display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem;
  border: 2px solid var(--line); border-radius: 16px; background: #FFFFFF; font-weight: 600; color: var(--muted);
}
.stepper__mark {
  display: grid; place-items: center; flex: none; inline-size: 2.5rem; block-size: 2.5rem; border-radius: 50%;
  border: 2px solid var(--line-strong); font-weight: 700;
}
.stepper__mark .icon { inline-size: 1.3rem; block-size: 1.3rem; }
.stepper__step--current { border-color: var(--navy); color: var(--navy); }
.stepper__step--current .stepper__mark { background: var(--navy); border-color: var(--navy); color: #FFFFFF; }
.stepper__step--done { color: var(--fg); }
.stepper__step--done .stepper__mark { background: var(--gold); border-color: var(--gold); color: var(--navy); }
.record-step { display: grid; gap: 1.1rem; }
.record-question { margin: 0; font-size: clamp(1.4rem, 2.2vw, 1.75rem); color: var(--fg); }
.record-context {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .35rem 1.5rem;
  padding: 1rem 1.25rem; border-radius: 16px; background: var(--navy-tint); color: var(--navy);
}
.pick-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr)); gap: 1rem; }
.pick-card {
  display: grid; gap: .2rem; padding: 1.1rem 1.25rem; border: 2px solid var(--line-strong); border-radius: 18px;
  background: #FFFFFF; color: var(--fg); text-decoration: none;
}
.pick-card:hover, .pick-card:focus-visible { border-color: var(--navy); }
.pick-card strong { font-size: 1.15rem; }
.pick-card__owed { font-weight: 600; color: var(--warn); }
.pick-card__owed--late { color: var(--danger); }
.choice-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); gap: 1rem; margin: 0; padding: 0; border: 0; }
.choice-tile {
  display: flex; align-items: center; gap: .9rem; min-block-size: 5.5rem; padding: .9rem 1.25rem; cursor: pointer;
  border: 2px solid var(--line-strong); border-radius: 18px; background: #FFFFFF; font-size: 1.1rem; font-weight: 600;
}
.choice-tile input { flex: none; inline-size: 1.5rem; block-size: 1.5rem; margin: 0; accent-color: var(--navy); }
.choice-tile:has(input:checked) { border: 3px solid var(--navy); background: #F2F6FB; color: var(--navy); }
.choice-tile:has(input:focus-visible) { outline: 3px solid var(--gold-ink); outline-offset: 3px; }
.choice-tiles--methods .choice-tile { min-block-size: 6.5rem; }
.choice-tile__icon { display: grid; place-items: center; color: var(--navy); }
.choice-tile__icon .icon { inline-size: 2.25rem; block-size: 2.25rem; }
.review-box { display: grid; gap: .35rem; padding: 1.1rem 1.35rem; border: 2px dashed var(--gold); border-radius: 18px; background: #FFFFFF; }
.review-box p { margin: 0; font-size: 1.2rem; font-weight: 600; line-height: 1.7; }
.review-box ul, .done-card__parts { margin: 0; padding-inline-start: 1.25rem; }
.record-actions { display: flex; flex-wrap: wrap; gap: .75rem; padding-block-start: .5rem; }
.record-actions--center { justify-content: center; }
.done-card {
  display: grid; justify-items: center; gap: .9rem; padding: 2.5rem 1.5rem; text-align: center;
  border: 1px solid var(--line); border-radius: 24px; background: #FFFFFF;
}
.done-card__icon {
  display: grid; place-items: center; inline-size: 6rem; block-size: 6rem; border-radius: 50%;
  background: var(--ok-bg); color: var(--ok);
}
.done-card__icon .icon { inline-size: 3.25rem; block-size: 3.25rem; }
.done-card h2 { margin: 0; font-size: 1.9rem; color: var(--ok); }
.done-card__sentence { margin: 0; font-size: 1.2rem; }
.done-card__parts { text-align: start; }

/* --- Tenant page (one contract) ------------------------------------------------------------------------ */
.tenant-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-block-end: 1.25rem;
  padding: 1.5rem 1.75rem; border: 1px solid var(--line); border-radius: 22px; background: #FFFFFF;
}
.tenant-head__avatar {
  display: grid; place-items: center; flex: none; inline-size: 4.5rem; block-size: 4.5rem; border-radius: 50%;
  background: var(--navy-tint); color: var(--navy); font-size: 2rem; font-weight: 700;
}
.tenant-head__who { flex: 1 1 16rem; }
.tenant-head__who h1 { margin: 0; line-height: 1.3; }
.tenant-head__who p { margin: .2rem 0 0; }
.tenant-head__actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.contract-summary .section-head { align-items: center; }
.contract-summary__sentence { margin: .25rem 0 .5rem; font-size: 1.2rem; line-height: 1.8; }
.contract-summary p.muted { margin: 0; }
.money-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); gap: 1rem; margin-block-end: 1.5rem; }
.money-tile {
  display: grid; gap: .3rem; padding: 1.25rem 1.4rem; border: 1px solid var(--line); border-radius: 20px; background: #FFFFFF;
}
.money-tile span { display: flex; align-items: center; gap: .5rem; font-weight: 600; color: var(--muted); }
.money-tile strong { font-size: 1.75rem; line-height: 1.3; }
.money-tile--paid { border-color: #BFE0C9; background: var(--ok-bg); }
.money-tile--paid span, .money-tile--paid strong { color: var(--ok); }
.money-tile--late { border-color: #F2B8B2; background: var(--danger-bg); }
.money-tile--late span, .money-tile--late strong { color: var(--danger); }
.inst-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(11.5rem, 100%), 1fr)); gap: .75rem;
  margin: 0; padding: 0; list-style: none;
}
.inst-tile {
  display: grid; gap: .15rem; block-size: 100%; padding: .85rem 1rem; border: 2px solid var(--line-strong);
  border-radius: 16px; background: #FFFFFF; color: var(--fg); text-decoration: none;
}
a.inst-tile:hover { border-color: var(--navy); }
.inst-tile__no { font-weight: 700; }
.inst-tile__date .date-cell { font-size: .875rem; }
.inst-tile__amount { color: var(--muted); font-size: .9375rem; }
.inst-tile__state {
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-block-start: .2rem;
  font-size: .875rem; font-weight: 600; overflow-wrap: normal;
}
.inst-tile__state .icon { inline-size: 1.1rem; block-size: 1.1rem; }
.inst-tile--paid { border-color: #BFE0C9; }
.inst-tile--paid .inst-tile__state { color: var(--ok); }
.inst-tile--late { border: 3px solid #D9534A; background: #FFF7F6; }
.inst-tile--late .inst-tile__state { color: var(--danger); }
.inst-tile--soon { border-color: #EBD9B0; }
.inst-tile--soon .inst-tile__state { color: var(--warn); }
.inst-tile--later { border-style: dashed; }
.inst-tile--later .inst-tile__state { color: var(--muted); }
.more-actions > summary, .schedule-details > summary {
  min-block-size: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 700; color: var(--navy);
}
.more-actions[open] > summary, .schedule-details[open] > summary { margin-block-end: 1rem; }

/* --- Owner statement as an equation ------------------------------------------------------------------ */
.equation { display: flex; flex-wrap: wrap; align-items: stretch; gap: .75rem; }
.equation__term {
  flex: 1 1 8.5rem; display: grid; align-content: center; gap: .3rem; padding: 1.1rem 1.25rem;
  border: 1px solid var(--line); border-radius: 18px; background: #FFFFFF;
}
.equation__term span { color: var(--muted); font-size: .95rem; }
.equation__term strong { font-size: 1.5rem; line-height: 1.3; }
.equation__op { display: grid; place-items: center; font-size: 2rem; font-weight: 700; color: var(--muted); }
.equation__term--net { flex-grow: 1.3; background: var(--navy); border-color: var(--navy); }
.equation__term--net span { color: #E7D6A8; }
.equation__term--net strong { color: #FFFFFF; font-size: 1.7rem; }
.equation__term--owes { background: var(--warn-bg); border-color: #EBD9B0; }
.equation__term--owes span, .equation__term--owes strong { color: var(--warn); }
.statement-equation__note { margin: 1rem 0 0; }
@media (max-width: 40rem) {
  .equation { flex-direction: column; }
  .equation__op { font-size: 1.5rem; }
}

/* --- Page search boxes and form fields ------------------------------------------------------------------ */
.search-form .btn { flex: none; }
.search-form input { min-block-size: 52px; border: 2px solid var(--line-strong); border-radius: 14px; }
.search-form input:focus { border-color: var(--navy); outline: none; }
.field input:not([type="radio"]):not([type="checkbox"]), .field select, .field textarea {
  min-block-size: 52px; border: 2px solid var(--line-strong); border-radius: 14px;
}

/* --- «More» page and search results ---------------------------------------------------------------------- */
.more-group { margin-block-end: 2rem; }
.tile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); gap: 1rem; }
.tile {
  display: flex; align-items: flex-start; gap: 1rem; min-block-size: 6rem; padding: 1.15rem 1.25rem;
  border: 1px solid var(--line); border-radius: 18px; background: #FFFFFF; color: var(--fg); text-decoration: none;
}
.tile:hover { border-color: var(--navy); }
.tile__icon {
  display: grid; place-items: center; flex: none; inline-size: 3rem; block-size: 3rem;
  border-radius: 50%; background: var(--navy-tint); color: var(--navy);
}
.tile__icon .icon { inline-size: 1.6rem; block-size: 1.6rem; }
.tile__text { display: grid; gap: .2rem; }
.tile__text strong { color: var(--navy); font-size: 1.1rem; }
.tile__text span { color: var(--muted); font-size: .9375rem; }
.result-list { display: grid; margin: 0; padding: 0; list-style: none; }
.result-list li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem;
  padding-block: .85rem; border-block-start: 1px solid var(--line);
}
.result-list li:first-child { border-block-start: 0; }

@media (max-width: 64rem) {
  .app-stage { margin: 0; }
  .app-nav-ready .app-sidebar { inline-size: min(19rem, 88vw); }
  .sidebar-close { color: var(--fg); border-color: var(--line); font-size: 1rem; }
}
@media (max-width: 40rem) {
  .text-size__label { display: none; }
  /* Icons only on a phone; the words stay for screen readers. */
  .topbar-bell > span:not(.badge), .topbar-signout .btn > span, .sidebar-toggle > span {
    position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .app-topbar__actions { flex-basis: auto; gap: .5rem; }
  .topbar-search { flex-basis: 100%; order: 3; }
  .quick-action { min-block-size: 5rem; }
  .late-row__amount { justify-items: start; }
}

/* --- Subscription ------------------------------------------------------------------------------------------ */
.subscription-notice { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; }
.subscription-notice p { margin: 0; }
.plan-card__sentence { margin-block: .5rem 1.25rem; font-size: 1.2rem; font-weight: 600; line-height: 1.6; }
.usage { display: grid; gap: .6rem; margin-block-end: 1rem; }
.usage__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-block-start: .5rem; }
.usage__row span { display: flex; align-items: center; gap: .5rem; font-weight: 600; }
.price-lines { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .5rem; }
.price-lines li { display: flex; justify-content: space-between; gap: 1rem; padding-block-end: .5rem; border-block-end: 1px solid var(--line, #E5DFD3); }
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); gap: 1rem; margin-block-end: 1rem; }
.plan-tile { display: grid; gap: .35rem; align-content: start; padding: 1rem 1.1rem; border: 2px solid var(--line, #E5DFD3); border-radius: 14px; background: #fff; }
.plan-tile strong { font-size: 1.2rem; }
.plan-tile__price { font-size: 1.1rem; font-weight: 600; color: var(--navy); }
.plan-tile--current { border-color: var(--navy); }
.plan-tile .badge { justify-self: start; }
.done-card--notice .done-card__icon { background: var(--warn-bg); color: var(--warn); }
.done-card--notice h1 { margin: 0; font-size: 1.75rem; color: var(--navy); }
.done-card--notice .done-card__sentence { max-inline-size: 36rem; line-height: 1.7; }
.owner-space-points { display: grid; gap: .6rem; margin-block: 1rem 1.25rem; padding: 0; list-style: none; }
.owner-space-points li { display: flex; align-items: flex-start; gap: .6rem; }
.owner-space-points .icon { flex: none; color: var(--ok); }
.start-card { display: flex; align-items: flex-start; gap: 1.25rem; margin-block-end: 1.25rem; border: 2px solid var(--navy); }
.start-card__icon { display: grid; place-items: center; flex: none; inline-size: 4rem; block-size: 4rem; border-radius: 50%; background: #EEF1F7; color: var(--navy); }
.start-card__icon .icon { inline-size: 2rem; block-size: 2rem; }
.start-card h2 { margin: 0 0 .35rem; }
.start-card p { margin: 0 0 1rem; }

/* --- Vacant-unit network ----------------------------------------------------------------------------------- */
.network-filter { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr)); gap: .5rem 1rem; align-items: end; margin-block-end: 1rem; }
.network-filter .button-row { padding-block-end: .9rem; }
.listing-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(24rem, 100%), 1fr)); gap: 1rem; margin-block-end: 1rem; }
.listing { display: grid; gap: .6rem; align-content: start; }
.listing--mine { border-color: var(--navy); }
.listing__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem; }
.listing__head h2 { margin: 0; font-size: 1.25rem; }
.listing__rent { font-size: 1.2rem; color: var(--navy); }
.listing__place { display: flex; align-items: center; gap: .4rem; margin: 0; font-weight: 600; }
.listing__facts { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.listing__facts li { padding: .2rem .7rem; border-radius: 999px; background: #F1EDE4; font-size: .95rem; }
.listing__description { margin: 0; line-height: 1.7; }
.listing__office { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; padding-block-start: .75rem; border-block-start: 1px solid var(--line); }
.listing__report summary { cursor: pointer; color: var(--muted); font-size: .95rem; }
.listing__reported { margin: 0; font-size: .95rem; }
.review-form { margin-block-start: .75rem; }

/* --- Early warning ----------------------------------------------------------------------------------------- */
.warning-card { border-color: #F2B8B2; }
.warning-list { display: grid; gap: .9rem; margin: 0; padding: 0; list-style: none; }
.warning-row { display: grid; gap: .5rem; padding: 1rem 1.1rem; border: 1px solid var(--line); border-inline-start: 6px solid var(--warn-line, #E0A43A); border-radius: 14px; background: #fff; }
.warning-row--high { border-inline-start-color: var(--danger); }
.warning-row__who { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
.warning-row__who strong { font-size: 1.1rem; }
.warning-row__reasons { margin: 0; padding-inline-start: 1.25rem; line-height: 1.8; }
.warning-row__action { display: flex; align-items: flex-start; gap: .5rem; margin: 0; font-weight: 600; color: var(--navy); }
.warning-row__action .icon { flex: none; margin-block-start: .2rem; }
.warning-notice { margin-block-end: 1.25rem; padding: 1rem 1.25rem; border-radius: 14px; border: 1px solid #F3D9A4; background: var(--warn-bg); }
.warning-notice--high { border-color: #F2B8B2; background: var(--danger-bg); }
.warning-notice h2 { display: flex; align-items: center; gap: .5rem; margin: 0 0 .5rem; font-size: 1.15rem; }
.warning-notice ul { margin: 0 0 .5rem; padding-inline-start: 1.25rem; line-height: 1.8; }
.warning-filter { margin-block-end: 1rem; }
.warning-rules { margin-block-start: 1.5rem; }
.warning-rules summary { cursor: pointer; font-weight: 600; }
/* The arrow before a suggested step points forward, the opposite of the back arrow it is drawn as. */
[dir="rtl"] .warning-row__action .icon--directional { transform: none; }
[dir="ltr"] .warning-row__action .icon--directional { transform: scaleX(-1); }
.limit-hint { margin-block: .25rem 1rem; padding: .75rem 1rem; border-radius: 12px; background: #F4F1EA; }
.limit-hint p { margin: 0; }
.limit-card h2 { margin-block-start: 0; }

/* --- Platform overview ------------------------------------------------------------------------------------- */
.overview-period { font-weight: 600; }
.money-tile small { font-size: .85rem; }
.overview-counts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr)); gap: .75rem; }
.overview-counts div { display: grid; gap: .2rem; padding: .9rem 1rem; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.overview-counts strong { font-size: 1.8rem; line-height: 1.2; color: var(--navy); }
.overview-list li { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; padding-block: .5rem; border-block-end: 1px solid var(--line); }
.overview-bar { block-size: .7rem; border-radius: 999px; background: #ECE6DA; overflow: hidden; margin-block-end: .25rem; min-inline-size: 8rem; }
.overview-bar > span { display: block; block-size: 100%; background: var(--navy); border-radius: 999px; }
.overview-bar--money > span { background: #C9A961; }
.sidebar-footer { display: grid; gap: .5rem; }
.sidebar-footer form .btn { inline-size: 100%; }

.second-factor-steps { padding-inline-start: 1.25rem; line-height: 1.9; }
.second-factor-qr { display: grid; place-items: center; margin-block: 1rem; padding: 1rem; border-radius: 14px; background: #fff; border: 1px solid var(--line); }
.second-factor-qr svg { inline-size: 220px; block-size: 220px; }
.second-factor-key { font-size: 1.2rem; font-weight: 600; letter-spacing: .08em; text-align: center; }

/* A period on two lines («from» / «to») */
.date-range { display: inline-flex; flex-direction: column; gap: .15rem; }
.period-line { margin-block: .35rem 0; font-weight: 600; color: var(--fg); }
.period-line.muted { color: var(--muted); }
.overview-legend { margin-block: 1rem 0; font-size: .9375rem; line-height: 1.8; }
.verify-resend { margin-block-start: .75rem; }
.btn--link { border-color: transparent; background: transparent; }

/* --- Payment punctuality: one row per band (check / clock / alert), then who paid late ------------------------ */
.punct__headline { font-size: 1.125rem; font-weight: 600; }
.punct-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.punct-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .45rem 1rem; }
.punct-row__label { display: flex; align-items: center; gap: .6rem; font-weight: 600; }
.punct-row__icon { display: inline-grid; place-items: center; inline-size: 2.25rem; block-size: 2.25rem; border-radius: 50%; flex: none; }
.punct-row__icon .icon { inline-size: 1.25rem; block-size: 1.25rem; }
.punct-row__track { grid-column: 1 / -1; grid-row: 2; display: block; block-size: 1rem; border-radius: 6px; background: var(--tint); overflow: hidden; }
.punct-row__track > span { display: block; block-size: 100%; border-radius: 6px; }
.punct-row__count { font-size: 1.0625rem; white-space: nowrap; }
.punct-row--on_time .punct-row__icon { background: var(--ok-bg); color: var(--ok); }
.punct-row--on_time .punct-row__track > span { background: #2E7D4F; }
.punct-row--on_time .punct-row__count { color: var(--ok); }
.punct-row--late .punct-row__icon { background: var(--warn-bg); color: var(--warn); }
.punct-row--late .punct-row__track > span { background: #D69E2E; }
.punct-row--late .punct-row__count { color: var(--warn); }
.punct-row--very_late .punct-row__icon { background: var(--danger-bg); color: var(--danger); }
.punct-row--very_late .punct-row__track > span { background: var(--danger); }
.punct-row--very_late .punct-row__count { color: var(--danger); }
.late-payers { margin-block-start: .5rem; padding-block-start: 1rem; border-block-start: 1px solid var(--line); }
.late-payers h4 { margin: 0 0 .75rem; font-size: 1.0625rem; }
.late-payers__list { display: grid; gap: .6rem; }
.late-payer { display: grid; gap: .4rem; padding: .75rem 1rem; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.late-payer__who { display: grid; gap: .15rem; }
.late-payer__facts { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .75rem; font-size: .9375rem; }
.late-payers__more { margin-block-start: .6rem; }
.late-payers__more summary { cursor: pointer; color: var(--navy); font-weight: 600; margin-block-end: .6rem; }

/* --- Discount codes ---------------------------------------------------------------------------------------------- */
.discount-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem; }
.discount-form .field { flex: 1 1 14rem; margin: 0; }
.discount-form .btn { min-inline-size: 8rem; }
.discount-layout { align-items: start; }
.discount-list { display: grid; gap: .9rem; }
.discount-item { display: grid; gap: .5rem; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: 16px; }
.discount-item--off { background: var(--bg); }
.discount-item__head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; }
.discount-code { font-size: 1.25rem; letter-spacing: .06em; color: var(--navy); }
.discount-item__percent { font-weight: 700; color: var(--gold-ink); }
.discount-item__facts { margin: 0; font-size: .9375rem; }
.discount-item__users summary { cursor: pointer; color: var(--navy); font-weight: 600; }
.discount-item__users ul { margin-block-start: .5rem; display: grid; gap: .3rem; }
.notice--success { border-inline-start-color: var(--ok); background: var(--ok-bg); }
.notice:has(> .icon) { display: flex; align-items: center; gap: .6rem; }
.notice > .icon { flex: none; inline-size: 1.4rem; block-size: 1.4rem; }

/* --- Terms and privacy ---------------------------------------------------------------------------------------- */
.legal-doc { max-inline-size: 52rem; margin-inline: auto; }
.legal-doc__head { display: grid; gap: .5rem; padding-block-end: 1rem; border-block-end: 1px solid var(--line); }
.legal-doc__head h1 { margin: 0; }
.legal-doc__head .btn[aria-current="page"] { background: var(--navy); border-color: var(--navy); color: #FFFFFF; }
.legal-doc__body { line-height: 1.95; }
.legal-doc__body section { padding-block: .75rem; scroll-margin-block-start: 6rem; }
.legal-doc__body h2 { font-size: 1.25rem; margin-block: .75rem .5rem; color: var(--navy); }
.legal-doc__body ul { padding-inline-start: 1.25rem; display: grid; gap: .35rem; }
.legal-doc__body a { color: var(--navy); font-weight: 600; }
.legal-todo { background: #FFF2D6; color: var(--warn); padding-inline: .25rem; border-radius: 4px; }
.legal-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.5rem; padding-block: .75rem; font-size: .9375rem; }
.legal-links a { color: var(--muted); }
.legal-links a:hover { color: var(--navy); }
.seller-disclosure { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem 1.25rem; margin: 0; padding-block-end: .75rem; color: var(--muted); font-size: .875rem; }
.seller-disclosure a { color: var(--muted); }
.seller-disclosure a:hover { color: var(--navy); }
.legal-read { display: flex; flex-wrap: wrap; gap: .25rem .9rem; margin-block: .25rem .5rem; font-size: .9375rem; }
.legal-read a { color: var(--navy); font-weight: 600; }
.legal-points { padding-inline-start: 1.25rem; line-height: 1.9; }
.legal-decline { margin-block-start: .5rem; }

/* --- Sidebar: the name and who is signed in on top, set apart; places below in small groups ------------------- */
.sidebar-top { display: grid; gap: 1rem; padding-block-end: 1.25rem; margin-block-end: 1.25rem; border-block-end: 1px solid var(--line); }
.sidebar-who { display: grid; gap: .1rem; padding: .6rem .9rem; border-radius: 12px; background: var(--bg); }
.sidebar-who span { color: var(--muted); font-size: .8125rem; }
.sidebar-who strong { color: var(--fg); font-size: .9375rem; line-height: 1.5; overflow-wrap: anywhere; }
.sidebar-group { margin: 1rem 0 .3rem; padding-inline: 1rem; color: var(--muted); font-size: .8125rem; font-weight: 600; }
.sidebar-nav > .sidebar-group:first-child { margin-block-start: 0; }
.nav-link { position: relative; min-block-size: 52px; border-radius: 12px; }
.nav-link[aria-current="page"]::before {
  content: ""; position: absolute; inset-inline-start: 0; inset-block: 12px; inline-size: 4px;
  border-start-end-radius: 4px; border-end-end-radius: 4px; background: var(--gold);
}
.sidebar-footer { padding-block-start: 1rem; border-block-start: 1px solid var(--line); }

/* --- Copying a unit ------------------------------------------------------------------------------------------ */
.copy-source { margin-block: 1rem; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); }
.copy-source__title { margin: 0 0 .5rem; font-weight: 700; color: var(--navy); }
.button-row--tight { gap: .4rem; flex-wrap: nowrap; }

/* --- The confirm box (static/js/forms.js) ----------------------------------------------------------------------- */
.confirm-dialog { inline-size: min(30rem, calc(100vw - 2rem)); padding: 0; border: 0; border-radius: 20px; background: var(--surface); color: var(--fg); box-shadow: 0 24px 60px rgb(15 45 82 / 25%); }
.confirm-dialog::backdrop { background: rgb(15 45 82 / 45%); }
.confirm-dialog form { display: grid; justify-items: center; gap: .75rem; padding: 1.75rem 1.5rem 1.5rem; text-align: center; }
.confirm-dialog__icon { display: grid; place-items: center; inline-size: 3.5rem; block-size: 3.5rem; border-radius: 50%; background: var(--warn-bg); color: var(--warn); }
.confirm-dialog__icon .icon { inline-size: 1.9rem; block-size: 1.9rem; }
.confirm-dialog__title { margin: 0; font-size: 1.25rem; color: var(--navy); }
.confirm-dialog__message { margin: 0; font-size: 1.0625rem; line-height: 1.8; }
.confirm-dialog__actions { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; inline-size: 100%; margin-block-start: .5rem; }
.confirm-dialog--danger .confirm-dialog__icon { background: var(--danger-bg); color: var(--danger); }
.confirm-dialog--danger .confirm-dialog__yes { background: var(--danger); border-color: var(--danger); }

/* --- Removing a unit or a tenant --------------------------------------------------------------------------------- */
.btn--danger-outline { color: var(--danger); border-color: #E7B7B2; background: #FFFFFF; }
.btn--danger-outline:hover { background: var(--danger-bg); border-color: var(--danger); color: var(--danger); }
.removed-notice { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; }
.removed-notice p { margin: 0; }
.removed-list { margin-block-start: 1rem; }
.removed-list summary { cursor: pointer; color: var(--muted); font-weight: 600; }
.removed-list ul { display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin-block-start: .5rem; }

/* --- Technical support notices ------------------------------------------------------------------------------------ */
.support-notice { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; }
.support-notice p { display: flex; align-items: center; gap: .5rem; margin: 0; }
.support-notice form { margin: 0; }

/* --- Types written under «أخرى» ------------------------------------------------------------------------------------ */
.nav-badge { margin-inline-start: auto; min-inline-size: 1.6rem; padding: 0 .45rem; border-radius: 999px; background: var(--gold); color: var(--navy); font-size: .8125rem; font-weight: 700; text-align: center; line-height: 1.6rem; }
.custom-type--new { background: var(--warn-bg); border-radius: 12px; padding-inline: .75rem; }
.overview-list li form { margin: 0; }

/* --- Transfer receipts ---------------------------------------------------------------------------------------- */
.transfer-cta { margin: 0 0 1rem; }
.transfer-list { display: grid; gap: 1rem; }
.transfer-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem 1.25rem; align-items: start; }
.transfer-item__file { display: grid; place-items: center; gap: .35rem; inline-size: 6.5rem; block-size: 6.5rem; border: 1px dashed var(--line-strong); border-radius: 14px; color: var(--navy); font-size: .8125rem; font-weight: 600; text-align: center; text-decoration: none; }
.transfer-item__file .icon { inline-size: 1.8rem; block-size: 1.8rem; }
.transfer-item__body { display: grid; gap: .35rem; }
.transfer-item__amount { margin: .25rem 0; font-size: 1.125rem; font-weight: 700; color: var(--navy); }
.transfer-item__checks { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; }
.transfer-item__actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .75rem; margin-block-start: .5rem; }
.transfer-item__actions form { margin: 0; }
.transfer-item__reject summary { list-style: none; cursor: pointer; }
.transfer-item__reject[open] form { margin-block-start: .75rem; }
.transfer-mine { display: grid; gap: .5rem; }
.transfer-mine li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.receipt-link { font-size: .8125rem; font-weight: 600; color: var(--navy); }
@media (max-width: 40rem) { .transfer-item { grid-template-columns: minmax(0, 1fr); } }

/* Unit condition photos: move-in and move-out side by side on wide screens, one under the other on phones. */
.condition-stages { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: 1rem; align-items: start; }
.condition-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: .75rem; }
.condition-grid li { display: grid; gap: .35rem; align-content: start; }
.condition-grid figure { margin: 0; display: grid; gap: .35rem; }
.condition-grid img { inline-size: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); background: var(--tint); }
.condition-grid figcaption { display: grid; gap: .1rem; font-size: .875rem; line-height: 1.45; }
.condition-count { font-size: .875rem; color: var(--muted); }

/* The owner's voice summary: one big play button, then the same words to read. */
.voice-cta { margin-block: .5rem 1rem; }
.voice-card { display: grid; gap: .75rem; }
.voice-play { justify-self: start; min-block-size: 3.5rem; padding-inline: 1.75rem; font-size: 1.125rem; gap: .6rem; }
.voice-play .icon { inline-size: 1.6rem; block-size: 1.6rem; }
.voice-script { border-block-start: 1px solid var(--line); padding-block-start: .75rem; }
.voice-script p { margin: 0 0 .5rem; line-height: 1.8; }

/* Migration assistant: the three steps, the column table, what cannot be added. */
.migration-steps { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 0 0 1rem; list-style: none; counter-reset: step; }
.migration-steps li { counter-increment: step; padding: .35rem .8rem; border: 1px solid var(--line); border-radius: 999px; font-size: .9375rem; color: var(--muted); }
.migration-steps li::before { content: counter(step) ". "; }
.migration-steps li[aria-current="step"] { background: var(--navy); border-color: var(--navy); color: #fff; font-weight: 600; }
.migration-columns select { min-inline-size: 13rem; inline-size: 100%; min-block-size: 48px; padding: .4rem .75rem;
  font: inherit; font-size: 1rem; color: var(--fg); background: var(--surface); border: 2px solid var(--line-strong);
  border-radius: 12px; }
.migration-sensitive th, .migration-sensitive td { color: var(--muted); }
.migration-problems { display: grid; gap: .35rem; padding-inline-start: 1.1rem; }
.migration-left { border-inline-start: 4px solid var(--warn-line, #b7791f); background: var(--warn-bg); }
.migration-owner { border: 1px solid var(--line); border-radius: var(--radius, 10px); padding: .75rem 1rem; margin-block-end: .75rem; }

/* --- Sign-in pages: the form alone on a phone; the brand beside it on a computer ------------------------------ */
.auth-shell .app-main:has(.auth-split) { max-inline-size: 64rem; padding-block-start: 2rem; }
.auth-split { display: grid; margin-inline: auto; max-inline-size: 30rem; }
.auth-brand { display: none; }
.auth-panel { background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: 2rem 1.5rem;
  box-shadow: 0 10px 30px rgba(15, 45, 82, .06); }
.auth-panel h1 { margin-block: 0 1.25rem; }
.auth-panel .muted { margin-block: -.5rem 1.25rem; }

.role-tiles { border: 0; padding: 0; margin: 0 0 1.25rem; }
.role-tiles legend { font-weight: 600; padding: 0; margin-block-end: .6rem; }
.role-tiles__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.role-tile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .45rem; min-block-size: 6.5rem; padding: .9rem .5rem; text-align: center; cursor: pointer;
  border: 2px solid var(--line-strong); border-radius: 16px; background: var(--surface); transition: border-color .15s; }
.role-tile input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.role-tile__icon .icon { inline-size: 2rem; block-size: 2rem; color: var(--navy); }
.role-tile__title { font-weight: 700; font-size: 1.0625rem; line-height: 1.35; color: var(--fg); }
.role-tile:hover { border-color: var(--navy); }
.role-tile:has(input:checked) { border-color: var(--navy); background: var(--navy-tint); box-shadow: inset 0 0 0 1px var(--navy); }
.role-tile:has(input:focus-visible) { outline: 3px solid var(--gold); outline-offset: 2px; }

.code-field input { font-size: 2rem; letter-spacing: .6em; text-align: center; font-weight: 700;
  padding-inline-start: .6em; }
.verify-resend { margin-block-start: .75rem; }

@media (min-width: 60rem) {
  .auth-split { max-inline-size: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-block-size: 32rem;
    background: var(--surface); border: 1px solid var(--line); border-radius: 28px; overflow: hidden;
    box-shadow: 0 20px 50px rgba(15, 45, 82, .10); }
  .auth-panel { border: 0; border-radius: 0; box-shadow: none; padding: 3rem 3.25rem; align-self: center; }
  .auth-brand { display: flex; flex-direction: column; justify-content: center; gap: 1rem; padding: 3rem;
    background: var(--navy); color: #FAF7F1; position: relative; overflow: hidden; }
  .auth-brand::after { content: ""; position: absolute; inset-inline-end: -8rem; inset-block-end: -8rem;
    inline-size: 16rem; block-size: 16rem; border-radius: 50%; border: 2.5rem solid rgba(201, 169, 97, .18); }
  .auth-brand__mark .brand-logo { inline-size: 5.5rem; block-size: 5.5rem; border-radius: 22px;
    box-shadow: 0 0 0 2px rgba(250, 247, 241, .25); }
  .auth-brand__name { font-size: 2.5rem; font-weight: 800; margin: 0; }
  .auth-brand__line { font-size: 1.375rem; line-height: 1.7; margin: 0; max-inline-size: 20rem; color: #E9E1CF;
    text-wrap: balance; position: relative; z-index: 1; }
  .auth-brand__line::before { content: ""; display: block; inline-size: 3rem; block-size: 4px; border-radius: 2px;
    background: var(--gold); margin-block-end: 1rem; }
}

/* Message balance (apps/subscriptions/messages.py). */
.progress--warn > span { background: #B7791F; }
.progress--full > span { background: var(--danger); }
.balance-card { display: grid; gap: .9rem; }
.balance-card__left { margin: 0; font-size: 1.125rem; }
.balance-card__left .num { font-size: 2.5rem; font-weight: 800; color: var(--navy); margin-inline-end: .35rem; }
.balance-card__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .75rem; margin: 0; }
.balance-card__facts div { background: var(--tint); border-radius: 12px; padding: .7rem .9rem; }
.balance-card__facts dt { font-size: .875rem; color: var(--muted); }
.balance-card__facts dd { margin: .2rem 0 0; font-weight: 700; }

/* Contracts past their end date with the tenant still in (apps/contracts/renewal.py). */
.ended-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-block-start: .75rem; }
.ended-item { display: grid; gap: .5rem; }
.ended-item h2 { margin: 0; font-size: 1.25rem; }
.ended-item p { margin: 0; }
.ended-notice p { margin: 0 0 .35rem; }