/*
 * Base styles. Layout uses logical properties only (inline/block start/end),
 * never physical left/right, so the same rules serve RTL and LTR.
 */
:root {
  --bg: #f6f5f1;
  --surface: #ffffff;
  --fg: #1d1d1b;
  --muted: #5d5b55;
  --line: #dfdcd3;
  --accent: #0e6655;
  --accent-fg: #ffffff;
  --warn-line: #b7791f;
  --warn-bg: #fff7e6;
  --radius: 10px;
  --font-ar: "Segoe UI", "Noto Sans Arabic", "Geeza Pro", Tahoma, sans-serif;
  --font-en: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html[lang="ar"] body { font-family: var(--font-ar); line-height: 1.8; }
html[lang="en"] body { font-family: var(--font-en); line-height: 1.6; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  overflow-wrap: anywhere;
}

h1 { font-size: 1.5rem; margin-block: 1rem .5rem; }
h2 { font-size: 1.125rem; margin-block: 0 .75rem; }
.muted { color: var(--muted); }

.skip-link { position: absolute; inset-inline-start: -9999px; }
.skip-link:focus { inset-inline-start: 1rem; inset-block-start: 1rem; z-index: 10; }
.visually-hidden {
  position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* --- Top bar ------------------------------------------------------------ */
.topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .75rem;
  padding-block: .6rem;
  padding-inline: 1rem;
  background: var(--surface);
  border-block-end: 1px solid var(--line);
}
.brand {
  display: flex; align-items: center; gap: .5rem;
  margin-inline-end: auto;
  color: inherit; text-decoration: none; font-weight: 600;
}
.lang-switch { display: flex; gap: .25rem; }

/* --- Buttons and icons ---------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: .4rem;
  min-block-size: 44px;
  padding-block: .45rem; padding-inline: .9rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); color: inherit;
  font: inherit; text-decoration: none; cursor: pointer;
}
.btn--primary { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.btn--ghost { border-color: transparent; background: transparent; padding-inline: .25rem; }
.btn--small { min-block-size: 36px; padding-inline: .7rem; }
.btn[disabled] { opacity: 1; cursor: default; border-color: var(--accent); color: var(--accent); }

.icon { inline-size: 1.25rem; block-size: 1.25rem; flex: none; }
/* Only directional icons flip. Logos, media controls and numerals never do. */
[dir="rtl"] .icon--directional { transform: scaleX(-1); }

/* --- Content -------------------------------------------------------------- */
main { max-inline-size: 64rem; margin-inline: auto; padding-inline: 1rem; padding-block: 1rem 2rem; }
.card {
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding-block: 1rem; padding-inline: 1rem;
  margin-block-end: 1rem;
}
.plain-list { margin: 0; padding-inline-start: 1.25rem; }

/* position: relative keeps absolutely positioned (visually hidden) headers
   inside the scroll area instead of widening the page. */
.table-wrap { position: relative; overflow-x: auto; margin-block-end: .75rem; }
table { inline-size: 100%; border-collapse: collapse; }
th, td {
  text-align: start; vertical-align: top;
  padding-block: .5rem; padding-inline: .75rem;
  border-block-end: 1px solid var(--line);
}
th { font-weight: 600; color: var(--muted); white-space: nowrap; }
/* Words never break mid-letter inside tables; a wide table scrolls in its .table-wrap instead. */
th, td { overflow-wrap: normal; }
/* Figures line up on their right edge, where the decimals are, directly under their header in
   both languages (in Arabic that is also where every other column starts). */
th.amount, td.amount { text-align: right; }
/* A column of buttons (its header is only read aloud) takes just the width of its buttons,
   so the text columns get the room instead of an empty strip. */
th:has(> .visually-hidden:only-child) { inline-size: 1%; }
td:has(> .btn), td:has(> form > .btn), td:has(> .button-row) { white-space: nowrap; }
/* A date in a table: the locale's first calendar, the other one beneath it. */
.date-cell { display: inline-grid; white-space: nowrap; }
.date-cell__second { color: var(--muted); font-size: .8125rem; }
/* Several status badges in one cell stack instead of widening the column. */
td > .badge { display: block; inline-size: fit-content; }
td > .badge + .badge { margin-block-start: .25rem; }

/* Figures: Western digits, aligned, isolated from surrounding text direction */
.num { font-variant-numeric: tabular-nums; unicode-bidi: isolate; white-space: nowrap; }
.money { white-space: nowrap; }
.code { font-family: ui-monospace, Consolas, monospace; font-size: .875em; }

/* --- Notices ---------------------------------------------------------------- */
.notice {
  margin-block: .75rem;
  padding-block: .6rem; padding-inline: .9rem;
  border-inline-start: 4px solid var(--warn-line);
  border-radius: 6px;
  background: var(--warn-bg);
}
.footer { max-inline-size: 64rem; margin-inline: auto; padding-inline: 1rem; padding-block-end: 2rem; }

/* --- Signed-in navigation ------------------------------------------------- */
.user-nav { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; }
.user-nav__who { color: var(--muted); font-size: .9375rem; }
.inline-form { display: inline; margin: 0; }

/* --- Forms ---------------------------------------------------------------- */
.card--narrow { max-inline-size: 28rem; }
.field { display: flex; flex-direction: column; gap: .3rem; margin-block-end: 1rem; }
.field label { font-weight: 600; }
.field input:not([type="radio"]):not([type="checkbox"]) {
  inline-size: 100%;
  min-block-size: 44px;
  padding-block: .5rem; padding-inline: .75rem;
  border: 1px solid var(--line); border-radius: 8px;
  font: inherit; background: var(--surface); color: inherit;
}
.field input:focus-visible, .btn:focus-visible, .choice-card:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 2px;
}
/* Numbers, emails and codes are typed left-to-right; align them to the
   reading edge of the surrounding layout. */
[dir="rtl"] .field input[dir="ltr"] { text-align: end; }
.field--error input { border-color: #b42318; }
.field__error { margin: 0; color: #b42318; font-size: .9375rem; }
.btn--block { inline-size: 100%; justify-content: center; }
.btn--link { border: 0; background: transparent; color: var(--accent); padding-inline: 0; text-decoration: underline; }

/* --- Alerts ----------------------------------------------------------------- */
.messages { margin-block: .5rem 1rem; }
.alert {
  margin-block: 0 .5rem;
  padding-block: .6rem; padding-inline: .9rem;
  border-radius: 8px; border-inline-start: 4px solid var(--line); background: var(--surface);
}
.alert p { margin: 0; }
.alert--error { border-inline-start-color: #b42318; background: #fef3f2; }
.alert--success { border-inline-start-color: var(--accent); background: #ecfdf3; }
.alert--info { border-inline-start-color: #1d4ed8; background: #eff6ff; }

/* --- Choice cards ------------------------------------------------------------ */
.choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); gap: 1rem; }
.choice-card {
  display: flex; flex-direction: column; gap: .35rem;
  inline-size: 100%; text-align: start;
  padding-block: 1rem; padding-inline: 1rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); color: inherit; font: inherit; text-decoration: none; cursor: pointer;
}
.choice-card:hover { border-color: var(--accent); }
.choice-card__title { font-weight: 600; font-size: 1.0625rem; }

/* --- Page structure ------------------------------------------------------------ */
.page-head {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
  gap: .5rem 1rem; margin-block-end: 1rem;
}
.page-head h1 { margin-block: 0 .25rem; }
.section-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .5rem; margin-block-end: .75rem;
}
.section-head h2 { margin: 0; }
.button-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); gap: 0 1rem; }
.big-number { font-size: 1.75rem; font-weight: 700; margin: 0; }
.big-text { font-size: 1.125rem; font-weight: 600; margin-block: 0 .25rem; }
details summary { cursor: pointer; color: var(--accent); margin-block: .5rem; }

/* --- Richer forms --------------------------------------------------------------- */
.card--form { max-inline-size: 48rem; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); gap: 0 1rem; }
fieldset { border: 0; padding: 0; margin: 0 0 .5rem; min-inline-size: 0; }
legend { font-weight: 600; font-size: 1.0625rem; margin-block-end: .5rem; padding: 0; }
.field select, .field textarea {
  inline-size: 100%;
  min-block-size: 44px;
  padding-block: .5rem; padding-inline: .75rem;
  border: 1px solid var(--line); border-radius: 8px;
  font: inherit; background: var(--surface); color: inherit;
}
.field textarea { resize: vertical; }
.field__help { margin: 0; color: var(--muted); font-size: .875rem; }
.field--checkbox label { display: flex; align-items: center; gap: .5rem; min-block-size: 44px; }
.field input[type="radio"], .field input[type="checkbox"] {
  inline-size: 1.25rem; block-size: 1.25rem; margin: 0; flex: none; accent-color: var(--accent);
}
/* Radio and checkbox lists: Django renders each option as div > label > input. */
.field > div > div > label { display: flex; align-items: center; gap: .5rem; min-block-size: 44px; font-weight: 400; }
.dual-date { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr)); gap: .5rem; }
.dual-date__part { display: flex; flex-direction: column; gap: .2rem; font-weight: 400; }
.dual-date__caption { font-size: .8125rem; color: var(--muted); }
.search-form { display: flex; gap: .5rem; margin-block-end: 1rem; }
.search-form input {
  flex: 1; min-inline-size: 0; min-block-size: 44px;
  padding-inline: .75rem; border: 1px solid var(--line); border-radius: 8px; font: inherit;
}

/* --- Facts, badges, steps, preview ---------------------------------------------------- */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr)); gap: .75rem 1rem; margin: 0; }
.facts dt { color: var(--muted); font-size: .875rem; }
.facts dd { margin: 0; font-weight: 600; }
.badge {
  display: inline-block; padding-block: .1rem; padding-inline: .55rem;
  border-radius: 999px; font-size: .8125rem; background: #eef2f1; white-space: nowrap;
}
.badge--warning, .badge--op-faulty { background: #fff4d6; color: #7a4b00; }
.badge--op-out_of_service { background: #fdecea; color: #8a1c12; }
.badge--danger { background: #fde8e7; color: #9f1d14; }
.badge--status-vacant { background: #eaf1ff; color: #1d4ed8; }
.badge--status-leased { background: #e4f5ee; color: #0e6655; }
.badge--status-reserved { background: #f3e8ff; color: #6b21a8; }
.steps { display: flex; flex-wrap: wrap; gap: .35rem .9rem; list-style: none; padding: 0; margin: 0 0 1rem; counter-reset: step; }
.steps__item { counter-increment: step; display: flex; align-items: center; gap: .4rem; color: var(--muted); }
.steps__item::before {
  content: counter(step);
  display: inline-grid; place-items: center; inline-size: 1.6rem; block-size: 1.6rem;
  border: 1px solid var(--line); border-radius: 50%; background: var(--surface);
  font-size: .875rem; font-variant-numeric: tabular-nums;
}
.steps__item--current { color: var(--fg); font-weight: 600; }
.steps__item--current::before { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.steps__item--done::before { border-color: var(--accent); color: var(--accent); }
.preview { margin-block: 1rem; padding-block: 1rem; padding-inline: 1rem; border: 1px dashed var(--accent); border-radius: var(--radius); background: #f3faf7; }
.preview h2 { margin-block-start: 0; }
.notice--info { border-inline-start-color: #1d4ed8; background: #eff6ff; }

/* --- Quick meter table ---------------------------------------------------------- */
.meter-table th { white-space: nowrap; }
.meter-table input {
  inline-size: 100%; min-inline-size: 8rem; min-block-size: 44px;
  padding-inline: .5rem; border: 1px solid var(--line); border-radius: 8px;
  font: inherit; background: var(--surface); color: inherit;
}
[dir="rtl"] .meter-table input[dir="ltr"] { text-align: end; }
.alert--warning { border-inline-start-color: var(--warn-line); background: var(--warn-bg); }

/* --- Contracts and schedules ---------------------------------------------------- */
.badge--state-upcoming { background: #eef2f1; }
.badge--state-due_today { background: #eaf1ff; color: #1d4ed8; }
.badge--state-within_grace, .badge--state-partially_paid { background: #fff4d6; color: #7a4b00; }
.badge--state-overdue { background: #fde8e7; color: #9f1d14; }
.badge--state-paid { background: #e4f5ee; color: #0e6655; }
.badge--state-settled_externally { background: #f1f0ec; color: var(--muted); }
.schedule-table th, .schedule-table td, .facts-table th { white-space: nowrap; }
.schedule-table .dual-date { min-inline-size: 16rem; }
.schedule-table input:not([type="checkbox"]), .facts-table input:not([type="checkbox"]), .facts-table select {
  inline-size: 100%; min-inline-size: 7rem; min-block-size: 40px;
  padding-inline: .5rem; border: 1px solid var(--line); border-radius: 8px;
  font: inherit; background: var(--surface); color: inherit;
}
[dir="rtl"] .schedule-table input[dir="ltr"], [dir="rtl"] .facts-table input[dir="ltr"] { text-align: end; }
.center { text-align: center; }
.row--error { background: #fef3f2; }
.filter-row { display: flex; flex-wrap: wrap; gap: .35rem; margin-block-end: 1rem; }
.btn--current { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.unit-checklist .field > div { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(13rem, 100%), 1fr)); gap: 0 1rem; }

@media (max-width: 480px) {
  .topbar { padding-inline: .75rem; }
  .brand { flex-basis: 100%; margin-inline-end: 0; }
  main, .footer { padding-inline: .75rem; }
  th, td { padding-inline: .5rem; }
}

/* --- Collections ---------------------------------------------------------------------- */
.summary-row { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin-block: 0 1rem; }
.work-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }
.work-item { display: grid; gap: .4rem; }
.work-item p { margin: 0; }
.work-item__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .25rem .75rem; }
.work-item__balance { font-size: 1.25rem; font-weight: 700; }
.row--reversed td { color: var(--muted); }
.row--reversed .money { text-decoration: line-through; }

/* --- Notifications -------------------------------------------------------------------- */
.notice-item--unread { border-inline-start: 4px solid var(--accent); }
.notice-item a { text-decoration: none; color: inherit; }

/* --- Compact navigation ------------------------------------------------------------------ */
.user-nav__links { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; }
.nav-toggle { display: none; }
@media (max-width: 47.99rem) {
  .nav-js .nav-toggle { display: inline-flex; }
  .nav-js .user-nav__links:not(.is-open) { display: none; }
  .user-nav__links.is-open { flex-basis: 100%; }
}

/* --- Owner portal ------------------------------------------------------------------------ */
.office-block { display: grid; gap: 1rem; margin-block-end: 1.5rem; }
.office-block > h2 { margin: 0; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); gap: .75rem; }
.stat { display: flex; flex-direction: column; gap: .25rem; text-decoration: none; color: inherit; }
.stat--row { flex-direction: row; justify-content: space-between; align-items: center; flex-wrap: wrap; margin-block-end: 1rem; }
.stat__label { color: var(--muted); font-size: .875rem; }
.stat__value { font-size: 1.5rem; font-weight: 700; }
.card .work-list { gap: 0; }
.work-item--flat { padding-block: .75rem; border-block-end: 1px solid var(--line); }
.work-item--flat:last-child { border-block-end: 0; }

/* --- Sign-in: who are you ---------------------------------------------------------------- */
.role-choice { border: 0; padding: 0; margin: 0 0 1rem; display: grid; gap: .6rem; }
.role-choice legend { font-weight: 600; margin-block-end: .5rem; padding: 0; }
.role-card { flex-direction: row; flex-wrap: wrap; align-items: center; gap: .2rem .6rem; cursor: pointer; }
.role-card input { inline-size: 1.25rem; block-size: 1.25rem; margin: 0; accent-color: var(--accent); }
.role-card .muted { flex-basis: 100%; padding-inline-start: 1.85rem; }
.role-card:has(input:checked) { border-color: var(--accent); background: #e4f5ee; }
/* Grid items default to their content's width; let wide tables scroll inside their card instead. */
.office-block > *, .stat-grid > *, .grid-2 > * { min-inline-size: 0; }

/* --- Payment punctuality -------------------------------------------------------- */
/* One vocabulary of colour for the on-time record: green settled on time,
   orange up to 30 days past the grace period, red beyond that. Every colour
   is also named in the legend text, so nothing depends on colour alone. */
.punct { display: grid; gap: .75rem; }
.punct__headline { display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem; margin: 0; }
.punct__big { font-size: 2rem; line-height: 1.1; }
.punct__big--on_time { color: #0b6b4d; }
.punct__big--late { color: #9a5b00; }
.punct__big--very_late { color: #9f1d14; }
.punct-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); gap: 1.5rem 2.5rem; }
.punct-pair h3 { margin-block-end: .15rem; }
.punct__rule { margin-block-start: 1rem; }
.punct__rule summary { cursor: pointer; color: var(--accent); font-size: .875rem; }
.punct__bar {
  display: flex; block-size: 14px; border-radius: 999px; overflow: hidden;
  background: #eef2f1; border: 1px solid var(--line);
}
.punct__seg { min-inline-size: 4px; }
.punct__seg--on_time, .punct__dot--on_time { background: #0e8a63; }
.punct__seg--late, .punct__dot--late { background: #d98212; }
.punct__seg--very_late, .punct__dot--very_late { background: #c0392b; }
/* Three boxes, one per band: what it is, how many, what share. */
.punct__legend { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.punct__item { display: grid; gap: .15rem; padding: .6rem .75rem; border: 1px solid var(--line); border-radius: 10px; font-size: .875rem; }
.punct__label { display: flex; align-items: center; gap: .4rem; }
.punct__count { font-size: 1.125rem; }
.punct__dot { inline-size: .7rem; block-size: .7rem; border-radius: 50%; flex: none; }
.punct__note { margin: 0; font-size: .875rem; }
.punct-chip {
  display: inline-block; padding-block: .1rem; padding-inline: .55rem;
  border-radius: 999px; font-size: .8125rem; font-weight: 600; white-space: nowrap;
}
.punct-chip--on_time { background: #e4f5ee; color: #0b5d46; }
.punct-chip--late { background: #fff4d6; color: #7a4b00; }
.punct-chip--very_late { background: #fde8e7; color: #9f1d14; }

/* --- Review fixes ------------------------------------------------------------------------- */
/* Author styles such as display:flex must never reveal an element the page hid. */
[hidden] { display: none !important; }
/* The design is light only: phones in dark mode must not recolour inputs half-way. */
:root { color-scheme: only light; }
h3 { font-size: 1rem; margin-block: 0 .5rem; }
.btn--primary[disabled] { background: #8fb3a9; border-color: #8fb3a9; color: #fff; }
.btn--danger { background: #b42318; border-color: #b42318; color: #fff; }
@media (pointer: coarse) {
  .btn--small { min-block-size: 44px; }            /* a finger-sized target on phones */
}
@media (max-width: 40rem) {
  .filter-row { flex-wrap: nowrap; overflow-x: auto; padding-block-end: .25rem; }
  .filter-row > * { flex: none; }
}
td input[type="checkbox"] { inline-size: 1.4rem; block-size: 1.4rem; }
.import-columns summary { font-weight: 600; }
.import-columns table { font-size: .9rem; }
.badge--contract-active { background: #e3f1ec; color: #0f5c4a; }
.badge--contract-draft { background: #f1f1f1; color: #555; }
.badge--contract-expired, .badge--contract-terminated { background: #fdecea; color: #8a1c12; }
.empty-state { padding-block: 1rem; }

/* Maintenance photos: small thumbnails that open the full picture. */
.photo-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.photo-row img { inline-size: 88px; block-size: 88px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border, #ddd); }
.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li { padding-block: .4rem; border-block-end: 1px solid var(--border, #eee); }
.badge--m-new, .badge--m-awaiting_owner, .badge--m-on_hold { background: #fff4d6; color: #7a4b00; }
.badge--m-assigned, .badge--m-in_progress { background: #eaf1ff; color: #1d4ed8; }
.badge--m-done, .badge--m-closed { background: #e4f5ee; color: #0e6655; }
.badge--m-owner_rejected, .badge--m-cancelled, .badge--m-tenant_responsibility { background: #f1f1f1; color: #555; }