/* ─────────────────────────────────────────────────────────────
   TENANT PORTAL — the only chrome app.css does not already own.

   WHY THIS FILE EXISTS. app.css is the app-wide skin and it restyles
   every Bootstrap class name the tenant pages already ship: .card,
   .table, .badge, .btn, .form-control, .modal, .alert, .page-header,
   .breadcrumb, the notification bell and its dropdown. All of that is
   deleted from tenant/includes/header.php rather than reproduced. What
   is left here is the handful of things app.css has no reason to know
   about, because they exist only on this surface:

     * the tenant top bar (the console has no <nav class="navbar">)
     * the offcanvas drawer that IS the navigation here
     * the single 40rem column (§5)

   DENSITY IS COMFORTABLE, deliberately. There is no data-density
   attribute on this surface and there must not be one: DESIGN.md §1
   names the tenant portal as the comfortable surface, and comfortable
   is the default in tokens.semantic.css. Adding data-density="compact"
   here would shrink every control to the console's pointer floor
   on the one surface §8 requires 2.75rem thumb targets on.

   Loaded AFTER app.css, so the cascade decides and nothing needs
   the important flag. Layer-2 semantic tokens only.
   ───────────────────────────────────────────────────────────── */

/* ── Top bar ──
   Quiet surface, one hairline. The old version was a navy-to-black
   gradient with a drop shadow: gradient-as-decoration on a surface
   that carries no information, plus a border AND a shadow on the same
   edge (§6). It is sticky rather than fixed, which also deletes the
   spacer div that used to hold the page down under it. */
.navbar {
  background-color: var(--color-bg-surface);
  border-bottom: 1px solid var(--color-border-subtle);
  padding: var(--space-8) 0;
}

.navbar .navbar-brand { padding: 0; }

.rl-brand-logo {
  display: block;
  height: var(--space-32);
  width: auto;
}

.navbar .btn,
.navbar .notification-bell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* §8: a 2.75rem minimum for anything primary or thumb-reachable on the tenant
   portal". Every control on this surface is thumb-reachable — it is a
   phone surface end to end — so the floor is applied once here rather
   than picked per control and forgotten on the next screen. The token
   is read, not the number written out, so density stays the thing that
   owns control size. The console keeps its own tighter pointer floor
   because it sets data-density="compact"; this surface does not. */
.btn,
.btn-close,
.form-control,
.form-select {
  min-height: var(--tap-target);
}

.btn,
.btn-close {
  min-width: var(--tap-target);
}

/* ── The column (§5: single column, 40rem maximum, centred) ──
   app.css gives this 100rem for the console. The tenant portal is one
   person reading one tenancy on a phone; 40rem is the whole layout. */
.main-content-wrapper {
  width: 100%;
  max-width: 40rem;
  margin-inline: auto;
}

/* ── Navigation ──
   The drawer is the navigation at EVERY width here, not only below a
   breakpoint. A fixed persistent sidebar beside a 40rem column is the
   console's layout on a surface §5 says is a single centred column,
   and deleting it also deleted the duplicate copy of the whole nav
   that sidebar.php was carrying for the phone.

   Bootstrap's offcanvas already reads --bs-body-bg and
   --bs-border-color, both of which app.css points at tokens, so only
   the links need saying. Without this they inherit --bs-nav-link-color
   — the accent — and a column of twelve blue links is a page with no
   primary action. */
.offcanvas .nav-link {
  display: flex;
  align-items: center;
  min-height: var(--tap-target);
  padding: var(--space-8) var(--space-12);
  margin-bottom: var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--color-fg-default);
  transition: background-color var(--duration-press) var(--ease-out),
              color var(--duration-press) var(--ease-out);
}

.offcanvas .nav-link:hover {
  background-color: var(--color-bg-sunken);
  color: var(--color-action-default);
}

/* Selection is a background shift, never a gradient fill (§4). */
.offcanvas .nav-link.active {
  background-color: var(--color-action-subtle);
  color: var(--color-action-default);
  font-weight: var(--weight-medium);
}

.offcanvas .nav-link i {
  width: var(--space-16);
  text-align: center;
  margin-right: var(--space-8);
}

.offcanvas .nav-link .badge { margin-left: auto; }

/* Section eyebrows in the drawer. Sentence case, not uppercase: an
   all-caps eyebrow is an Architecture §19 forbidden default. */
.offcanvas h6 {
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  color: var(--color-fg-muted);
  padding-left: var(--space-12);
  margin-bottom: var(--space-8);
}

/* ── Toast ──
   app.css already gives .toast the card surface and the floating
   shadow. Two things are left: the stack has to sit above everything
   (a raw 9999 in the markup is how the z-index war starts), and §4
   specifies a toast as "--card + left status accent" rather than a
   solid status-coloured header bar. layout.php's showToast() sets the
   tone class; the five treatments are the same five as the chips. */
.toast-container { z-index: var(--z-toast); }

.rl-toast {
  border-left: 3px solid var(--color-border-default);
}

.rl-toast--success { border-left-color: var(--color-status-paid-fg); }
.rl-toast--warning { border-left-color: var(--color-status-due-fg); }
.rl-toast--error   { border-left-color: var(--color-status-overdue-fg); }
.rl-toast--info    { border-left-color: var(--color-action-default); }

/* ── Money ──
   A tenant reads three or four figures per screen and compares them
   down the column. Tabular figures are not optional (§3). */
.rl-amount {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* A figure that is the answer to the page's question — the balance on
   the dashboard, the total on an invoice. One per screen. */
.rl-amount--lead {
  display: block;
  font-size: var(--text-h1);
  font-weight: var(--weight-medium);
  line-height: var(--leading-heading);
}

/* ── Definition rows ──
   "Lease start / 1 Mar 2026" repeated down a card is the tenant
   portal's primary content, on my_unit, profile, payment_receipt and
   every detail card. A description list says what it is, and the grid
   keeps the values aligned without a table. */
.rl-facts {
  display: grid;
  grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
  gap: var(--space-8) var(--space-12);
  margin: 0;
}

.rl-facts dt {
  font-weight: var(--weight-regular);
  color: var(--color-fg-muted);
}

.rl-facts dd {
  margin: 0;
  color: var(--color-fg-default);
}

/* A 20rem viewport is a hard requirement here (§8), and two columns at that
   width leaves neither side room to breathe. */
@media (max-width: 29.99em) {
  .rl-facts {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2) var(--space-12);
  }

  .rl-facts dd { margin-bottom: var(--space-8); }
}