/* ============================================================
   KodiManager — Global Stylesheet
   Design language: Clean, professional, Kenya-grounded.
   Palette: Deep navy authority + warm amber accent + clean white.
   Fonts: Inter (UI) + Sora (display headings)
   ============================================================ */

/* Google Fonts is loaded via a <link rel="stylesheet"> in each page's <head>,
   not an @import here — @import blocks the browser from discovering the font
   request until this whole file is fetched and parsed; a <link> tag lets the
   preload scanner start it immediately, in parallel with everything else. */

/* ── Tokens ──────────────────────────────────────────────── */
:root {
  /* Brand */
  --clr-navy      : #0F2044;
  --clr-amber     : #F5A623;
  --clr-amber-dk  : #D4891A;
  --clr-green     : #1DB954;
  --clr-red       : #E5383B;
  --clr-sky       : #E8F0FE;

  /* Neutral scale */
  --clr-white     : #FFFFFF;
  --clr-bg        : #F7F9FC;
  --clr-surface   : #FFFFFF;
  --clr-border    : #DDE3EE;
  --clr-muted     : #6B7A99;
  --clr-text      : #1A2340;
  --clr-text-soft : #4A5578;

  /* Type */
  --font-display  : 'Sora', sans-serif;
  --font-body     : 'Inter', sans-serif;

  /* Spacing */
  --sp-xs  : 4px;
  --sp-sm  : 8px;
  --sp-md  : 16px;
  --sp-lg  : 24px;
  --sp-xl  : 40px;
  --sp-2xl : 64px;

  /* Radius */
  --r-sm  : 6px;
  --r-md  : 10px;
  --r-lg  : 16px;
  --r-pill: 999px;

  /* Shadow */
  --shadow-sm : 0 1px 3px rgba(15,32,68,0.08);
  --shadow-md : 0 4px 16px rgba(15,32,68,0.10);
  --shadow-lg : 0 8px 32px rgba(15,32,68,0.14);

  --transition   : 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --ease-smooth  : cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Reset ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  font-family : var(--font-body);
  color       : var(--clr-text);
  background  : var(--clr-bg);
  line-height : 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
img { max-width: 100%; display: block; }
a   { color: var(--clr-navy); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Cross-device layout hardening ───────────────────────── */
.card,
.stat-card,
.list-row,
.ct-row,
.reading-row,
.tenant-row,
.form-group,
.btn,
.access-option,
.prop-check,
.qa-btn {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

/* U8 (#249/#250): break-word, NOT anywhere. Both let one long unbroken string
   (an email, a code) break so it cannot overflow a card. But `anywhere` (and
   the old `word-break: break-word`, which behaves the same) also shrinks every
   element's MINIMUM width to one letter, so in a flex row the browser squeezed
   names, labels and money down to a letter's width and split them mid-word
   ("Tena/nt", "15,0/00", "OCCUPANC/Y") — at default size on Invoices, and on
   most pages once the phone's font size is larger. break-word only breaks a
   word that cannot fit on a whole line of its own; rows wrap at spaces. */
.card *,
.list-row *,
.ct-row *,
.tenant-row *,
.stat-card *,
.reading-row * {
  overflow-wrap: break-word;
}
/* Money, dates and counts: never split, never cut (owner rule, U8). */
.num { white-space: nowrap; font-variant-numeric: tabular-nums; }
/* U4 + U8: two form fields side by side (e.g. "Lease start date" + "Deposit
   paid"). `1fr 1fr` could not shrink below a date input's built-in width, so
   on a phone the date box ran into the next field and the labels collided.
   Two columns while each field has at least 8rem, one column otherwise — rem,
   so a larger phone font stacks them too. align-items:end keeps the inputs
   level when one label wraps to two lines. */
.form-row-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr));
  gap: var(--sp-md);
  align-items: end;
}
.form-row-2 > * { min-width: 0; }
.form-row-2 input, .form-row-2 select, .form-row-2 textarea { min-width: 0; width: 100%; max-width: 100%; box-sizing: border-box; }

/* ── Typography ──────────────────────────────────────────── */
h1, h2, h3, h4, h5 {
  font-family : var(--font-display);
  line-height : 1.2;
  color       : var(--clr-navy);
}
h1 { font-size: clamp(2rem, 4vw, 3rem);    font-weight: 800; }
h2 { font-size: clamp(1.5rem, 3vw, 2rem);  font-weight: 700; }
h3 { font-size: 1.25rem; font-weight: 600; }
h4 { font-size: 1rem;    font-weight: 600; }
p  { color: var(--clr-text-soft); }

/* ── Layout Utilities ──────────────────────────────────── */
.container {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 var(--sp-lg);
}
.flex         { display: flex; }
.flex-center  { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-col     { display: flex; flex-direction: column; }
.gap-sm  { gap: var(--sp-sm); }
.gap-md  { gap: var(--sp-md); }
.gap-lg  { gap: var(--sp-lg); }
.text-center { text-align: center; }
.mt-sm   { margin-top: var(--sp-sm);  }
.mt-md   { margin-top: var(--sp-md);  }
.mt-lg   { margin-top: var(--sp-lg);  }
.mt-xl   { margin-top: var(--sp-xl);  }

/* ── Card ────────────────────────────────────────────────── */
.card {
  background    : var(--clr-surface);
  border        : 1px solid var(--clr-border);
  border-radius : var(--r-lg);
  padding       : var(--sp-lg);
  box-shadow    : var(--shadow-sm);
  transition    : box-shadow 220ms var(--ease-out-soft), transform 220ms var(--ease-out-soft);
}
.card--raised { box-shadow: var(--shadow-md); }
.card--hover:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* ── Buttons ────────────────────────────────────────────── */
.btn {
  display         : inline-flex;
  align-items     : center;
  justify-content : center;
  gap             : var(--sp-sm);
  font-family     : var(--font-body);
  font-size       : 0.9375rem;
  font-weight     : 600;
  line-height     : 1;
  padding         : 12px 24px;
  border-radius   : var(--r-md);
  border          : 2px solid transparent;
  cursor          : pointer;
  transition      : background var(--transition), color var(--transition),
                    box-shadow var(--transition), transform var(--transition);
  white-space     : nowrap;
  text-decoration : none;
}
.btn:hover:not(:disabled) { transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: translateY(1px) scale(0.97); transition-duration: 80ms; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

.btn--primary {
  background : var(--clr-amber);
  color      : var(--clr-navy);
  border-color: var(--clr-amber);
}
.btn--primary:hover:not(:disabled) {
  background  : var(--clr-amber-dk);
  border-color: var(--clr-amber-dk);
  box-shadow  : 0 4px 12px rgba(245,166,35,0.35);
}

.btn--navy {
  background : var(--clr-navy);
  color      : var(--clr-white);
  border-color: var(--clr-navy);
}
.btn--navy:hover:not(:disabled) {
  background : #162d5c;
  box-shadow : var(--shadow-md);
}

.btn--outline {
  background   : transparent;
  color        : var(--clr-navy);
  border-color : var(--clr-navy);
}
.btn--outline:hover:not(:disabled) {
  background: var(--clr-sky);
}

.btn--sm { padding: 8px 16px; font-size: 0.875rem; }
.btn--lg { padding: 15px 32px; font-size: 1rem; }
.btn--full { width: 100%; }

/* ── Forms ───────────────────────────────────────────────── */
.form-group {
  display       : flex;
  flex-direction: column;
  gap           : var(--sp-xs);
}
.form-group label {
  font-size  : 0.875rem;
  font-weight: 600;
  color      : var(--clr-text);
}
.form-group input,
.form-group select,
.form-group textarea {
  width         : 100%;
  padding       : 11px 14px;
  border        : 1.5px solid var(--clr-border);
  border-radius : var(--r-sm);
  font-family   : var(--font-body);
  font-size     : 0.9375rem;
  color         : var(--clr-text);
  background    : var(--clr-white);
  transition    : border-color var(--transition), box-shadow var(--transition);
  outline       : none;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--clr-amber);
  box-shadow  : 0 0 0 3px rgba(245,166,35,0.15);
}
.form-group input::placeholder { color: #9AA4BF; }

/* ── Auth Error ──────────────────────────────────────────── */
.auth-error {
  font-size    : 0.875rem;
  color        : var(--clr-red);
  background   : #FFF0F0;
  border       : 1px solid #FFD0D0;
  border-radius: var(--r-sm);
  padding      : var(--sp-sm) var(--sp-md);
  min-height   : 36px;
}
.auth-error:empty { display: none; }

/* ── Auth Page Layout ──────────────────────────────────── */
.auth-page {
  min-height  : 100vh;
  display     : grid;
  grid-template-columns: 1fr 1fr;
}
.auth-panel--left {
  position      : relative;
  overflow      : hidden;
  background    : linear-gradient(160deg, var(--clr-sky) 0%, var(--clr-white) 65%);
  color         : var(--clr-navy);
  padding       : var(--sp-2xl) var(--sp-xl);
  display       : flex;
  flex-direction: column;
  justify-content: center;
  border-right  : 1px solid var(--clr-border);
}
.auth-panel--left::before {
  content       : "";
  position      : absolute;
  width         : 420px; height: 420px;
  right         : -160px; top: -140px;
  background    : radial-gradient(circle, rgba(245,166,35,0.18) 0%, rgba(245,166,35,0) 70%);
  pointer-events: none;
}
.auth-panel--left::after {
  content       : "";
  position      : absolute;
  width         : 320px; height: 320px;
  left          : -120px; bottom: -120px;
  background    : radial-gradient(circle, rgba(15,32,68,0.07) 0%, rgba(15,32,68,0) 70%);
  pointer-events: none;
}
.auth-panel--left > * { position: relative; z-index: 1; }
.auth-panel--left h1 { color: var(--clr-navy); }
.auth-panel--left p  { color: var(--clr-text-soft); font-size: 1.05rem; margin-top: var(--sp-md); }
.auth-panel--left .auth-brand {
  display    : flex;
  align-items: center;
  margin-bottom: var(--sp-xl);
}
.auth-panel--left .auth-brand img { height: 38px; width: auto; flex-shrink: 0; }

.auth-panel--right {
  background: var(--clr-white);
  padding   : var(--sp-2xl) var(--sp-xl);
  display   : flex;
  flex-direction: column;
  justify-content: center;
}

.auth-form-wrap {
  width    : 100%;
  max-width: 400px;
  margin   : 0 auto;
}
.auth-form-wrap h2 { margin-bottom: var(--sp-xs); }
.auth-form-wrap > p { margin-bottom: var(--sp-xl); font-size: 0.9375rem; }

/* ── Nav ─────────────────────────────────────────────────── */
.nav {
  position  : sticky;
  top       : 0;
  z-index   : 100;
  background: var(--clr-white);
  border-bottom: 1px solid var(--clr-border);
  box-shadow: var(--shadow-sm);
}
.nav__inner {
  height : 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav__logo {
  display     : inline-flex;
  align-items : center;
  text-decoration: none;
}
.nav__logo img { height: 34px; width: auto; flex-shrink: 0; }
.nav__links { display: flex; align-items: center; gap: var(--sp-lg); }
.nav__links a {
  font-size  : 0.9375rem;
  font-weight: 500;
  color      : var(--clr-text-soft);
  transition : color var(--transition);
}
.nav__links a:hover { color: var(--clr-navy); text-decoration: none; }

/* ── Dashboard Sidebar Layout ──────────────────────────── */
.dashboard {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 100vh;
}
.sidebar {
  background    : var(--clr-navy);
  padding       : var(--sp-xl) 0;
  display       : flex;
  flex-direction: column;
}
.sidebar__logo {
  display       : flex;
  align-items   : center;
  gap           : 10px;
  padding       : 0 var(--sp-lg) var(--sp-xl);
  text-decoration: none;
}
.sidebar__logo img {
  height     : 36px; width: auto; flex-shrink: 0;
  background : var(--clr-white);
  border-radius: 7px;
  padding    : 4px 8px;
  box-sizing : border-box;
}
.sidebar__nav a {
  display     : flex;
  align-items : center;
  gap         : var(--sp-md);
  padding     : 12px var(--sp-lg);
  color       : rgba(255,255,255,0.65);
  font-size   : 0.9375rem;
  font-weight : 500;
  transition  : background var(--transition), color var(--transition);
  border-left : 3px solid transparent;
}
.sidebar__nav a:hover,
.sidebar__nav a.active {
  background  : rgba(255,255,255,0.08);
  color       : var(--clr-white);
  text-decoration: none;
  border-left-color: var(--clr-amber);
}
.sidebar__nav a svg { width: 18px; height: 18px; flex-shrink: 0; }

.main-content {
  padding   : var(--sp-xl);
  overflow-y: visible;
  /* min-width:0 is load-bearing, not tidying: without it this grid item's
     automatic minimum size is its min-content width, so one wide row (the
     page-header action buttons) widens the whole column past the viewport. */
  min-width : 0;
  max-width : 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}
.dashboard {
  width     : 100%;
  max-width : 100%;
  overflow-x: hidden;
}
.page-header { margin-bottom: var(--sp-xl); }
.page-header h2 { margin-bottom: var(--sp-xs); }

/* ── Stat Cards ──────────────────────────────────────────── */
/* Mobile-first: 2x2 grid on phones (matches site layout the user wants).
   Wider screens step up to more columns. The auto-fit rule is deliberately
   scoped to >=700px — applying it at every width is what used to collapse the
   grid to a single vertical stack on narrow native viewports; the 2-column
   base rule below is what phones get. */
.stats-grid {
  display              : grid;
  /* U8: 2 columns on phones at the default font size (down to 320px), ONE
     column when the phone's font size is larger — the minimum is in rem, and
     rem grows with the font size, so the grid re-flows by itself. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr));
  gap                  : var(--sp-md);
  margin-bottom        : var(--sp-xl);
}
@media (min-width: 700px) {
  .stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--sp-lg);
  }
}
/* 5 across only where 5 cards are actually wide enough for a 7-figure sum.
   At 901px this rule gave ~107px cards, in which "1,240,000" cannot fit at any
   readable size — so it wrapped and grew the row. Below 1400px the auto-fit
   rule above wraps to 3+2 instead, which keeps every card >= 200px. */
@media (min-width: 1400px) {
  .stats-grid { grid-template-columns: repeat(5, 1fr); }
}
.stat-card {
  background   : var(--clr-surface);
  border       : 1px solid var(--clr-border);
  border-radius: var(--r-lg);
  padding      : var(--sp-md);
  box-shadow   : var(--shadow-sm);
  transition   : transform 220ms var(--ease-out-soft), box-shadow 220ms var(--ease-out-soft);
  min-width    : 0;
}
.stat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.stat-card__label {
  font-size  : 0.625rem;
  font-weight: 600;
  color      : var(--clr-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  /* U8: may take two lines — never cut with "…". */
  white-space: normal;
}
.stat-card__value {
  font-family: var(--font-display);
  font-size  : 1.35rem;
  font-weight: 700;
  color      : var(--clr-navy);
  margin-top : 2px;
  /* `.stat-card *` above sets overflow-wrap:anywhere so a long unbroken string
     can never overflow a card. On a money figure that is actively harmful: it
     splits "KES 1,240,000" mid-digit and, more importantly, lets the value grow
     to 2-3 lines the moment real data replaces the skeleton — measured at a
     103-154px downward jump of everything below the stat row. Wrap only at real
     word boundaries, and reserve the two-line height up front so the card is the
     same size holding a skeleton as it is holding the number. */
  overflow-wrap: normal;
  word-break   : normal;
  /* 1.2 rather than the inherited body 1.6: this is a single display number,
     and the tighter leading keeps the reserved two-line box from adding a lot
     of dead space to the cards that only ever hold a short count. */
  line-height  : 1.2;
  min-height   : calc(2 * 1.2 * 1.15rem);
}
.inv-stat__val { overflow-wrap: normal; word-break: normal; }
.stat-card__value--green { color: var(--clr-green); }
.stat-card__value--red   { color: var(--clr-red);   }
.stat-card__value--amber { color: var(--clr-amber-dk); }

@media (min-width: 701px) {
  .stat-card { padding: var(--sp-lg); }
  .stat-card__label { font-size: 0.6875rem; }
  .stat-card__value {
    font-size : 1.75rem;
    margin-top: var(--sp-xs);
    /* Two lines reserved: "KES" wraps above the figure in the narrower cards.
       Measured stable from skeleton to real value at every width 360-1600. */
    min-height: calc(2 * 1.2 * 1.75rem);
  }
}

/* ── Badge ───────────────────────────────────────────────── */
.badge {
  display       : inline-flex;
  align-items   : center;
  padding       : 3px 10px;
  border-radius : var(--r-pill);
  font-size     : 0.75rem;
  font-weight   : 600;
  transition    : background-color 260ms var(--ease-smooth), color 260ms var(--ease-smooth);
}
.badge--green  { background: #E6F9EF; color: #1A7A3F; }
.badge--red    { background: #FFF0F0; color: #C0392B; }
.badge--amber  { background: #FFF8E7; color: #9A6500; }
.badge--blue   { background: #EBF3FF; color: #1A56DB; }
.badge--grey   { background: #F0F2F7; color: #6B7A99; }

/* ── Table ───────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; }
table {
  width          : 100%;
  border-collapse: collapse;
  font-size      : 0.9375rem;
}
thead th {
  text-align   : left;
  font-size    : 0.8125rem;
  font-weight  : 600;
  color        : var(--clr-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding      : var(--sp-sm) var(--sp-md);
  border-bottom: 2px solid var(--clr-border);
  background   : var(--clr-bg);
}
tbody td {
  padding      : 14px var(--sp-md);
  border-bottom: 1px solid var(--clr-border);
  color        : var(--clr-text);
  vertical-align: middle;
  transition   : background-color 150ms var(--ease-smooth);
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--clr-sky); }

/* ── Empty State ─────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding   : var(--sp-2xl) var(--sp-xl);
  color     : var(--clr-muted);
}
.empty-state svg { margin: 0 auto var(--sp-md); opacity: 0.4; }
.empty-state h3  { color: var(--clr-text-soft); margin-bottom: var(--sp-sm); }

/* ── Toast ───────────────────────────────────────────────── */
#toast-container {
  position  : fixed;
  top       : var(--sp-lg);
  left      : 50%;
  transform : translateX(-50%);
  z-index   : 9999;
  display   : flex;
  flex-direction: column;
  align-items: center;
  gap       : var(--sp-sm);
  pointer-events: none;
  width: min(90vw, 360px);
  max-width: min(90vw, 360px);
  padding: 0 12px;
  box-sizing: border-box;
}
.toast {
  background   : var(--clr-navy);
  color        : var(--clr-white);
  padding      : 13px 20px;
  border-radius: 20px;
  font-size    : 0.9rem;
  font-weight  : 500;
  line-height  : 1.45;
  text-align   : center;
  box-shadow   : 0 10px 28px rgba(15,32,68,0.22), 0 2px 8px rgba(15,32,68,0.12);
  animation    : toastIn 360ms var(--ease-out-soft);
  max-width    : 100%;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  pointer-events: auto;
  transform-origin: center top;
  border-left: none;
  white-space: normal;
  overflow-wrap: anywhere;
}
.toast--success {
  box-shadow: 0 10px 28px rgba(15,32,68,0.22), 0 0 0 1.5px rgba(29,185,84,0.45);
}
.toast--error {
  box-shadow: 0 10px 28px rgba(15,32,68,0.22), 0 0 0 1.5px rgba(229,56,59,0.45);
}
.toast--info {
  box-shadow: 0 10px 28px rgba(15,32,68,0.22), 0 0 0 1.5px rgba(245,166,35,0.45);
}
.toast--out { animation: toastOut 200ms var(--ease-smooth) forwards; }

@keyframes toastIn {
  from { opacity: 0; transform: translateY(-14px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes toastOut {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(-8px) scale(0.97); }
}

/* ── Loading skeletons ───────────────────────────────────── */
.skeleton { display: flex; flex-direction: column; gap: var(--sp-sm); padding: var(--sp-xs) 0; }
.skeleton__row {
  height       : 56px;
  border-radius: var(--r-md);
  background   : linear-gradient(
    105deg,
    #EEF2F8 0%,
    #EEF2F8 40%,
    #FFFFFF 50%,
    #EEF2F8 60%,
    #EEF2F8 100%
  );
  background-size: 220% 100%;
  animation    : skeletonSlash 1.6s ease-in-out infinite;
  filter: none;
  box-shadow: none;
}
.skeleton__row:nth-child(1) { animation-delay: 0s;    }
.skeleton__row:nth-child(2) { animation-delay: 0.12s; opacity: 0.88; }
.skeleton__row:nth-child(3) { animation-delay: 0.24s; opacity: 0.74; }
.skeleton__row:nth-child(4) { animation-delay: 0.36s; opacity: 0.6;  }
.skeleton__row:nth-child(5) { animation-delay: 0.48s; opacity: 0.46; }
.skeleton-cell { padding: var(--sp-md) !important; border: none !important; }
@keyframes skeletonSlash {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton__row { animation: none; background: #EEF2F8; filter: none; box-shadow: none; }
}

.skeleton-value {
  display      : inline-block;
  width        : 2.6em;
  height        : 0.8em;
  border-radius: var(--r-sm);
  background   : linear-gradient(
    105deg,
    #EEF2F8 0%,
    #EEF2F8 40%,
    #FFFFFF 50%,
    #EEF2F8 60%,
    #EEF2F8 100%
  );
  background-size: 220% 100%;
  animation    : skeletonSlash 1.6s ease-in-out infinite;
  vertical-align: middle;
  filter: none;
  box-shadow: none;
}
.skeleton-value--wide { width: 4.4em; }
.skeleton-value--dark {
  background: linear-gradient(
    105deg,
    rgba(255,255,255,0.12) 0%,
    rgba(255,255,255,0.12) 40%,
    rgba(255,255,255,0.35) 50%,
    rgba(255,255,255,0.12) 60%,
    rgba(255,255,255,0.12) 100%
  );
  background-size: 220% 100%;
}
@media (prefers-reduced-motion: reduce) {
  .skeleton-value { animation: none; background: #EEF2F8; filter: none; box-shadow: none; }
}

/* ── N1 (#252): a swipe inside a popup must never reach the page behind it ──
   A popup's own scroll stops at its edges instead of carrying on to the page,
   and while one is open the page cannot do the browser's own pull-to-refresh
   (a reload would lose what was typed). Our pull-to-refresh is off then too
   (pull-to-refresh.js). */
.modal, .modal-overlay, .drawer, .drawer-overlay { overscroll-behavior: contain; }
html:has(.modal-overlay.open), html:has(.drawer-overlay.open),
html:has(.modal-overlay.open) body, html:has(.drawer-overlay.open) body { overscroll-behavior-y: none; }

/* ── Pull-to-refresh ─────────────────────────────────────── */
.ptr-indicator {
  height: 0; opacity: 0; overflow: hidden; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  margin: 0;
}
.ptr-indicator--animated { transition: height 200ms ease, opacity 200ms ease; }
.ptr-indicator__spinner {
  width: 22px; height: 22px; flex-shrink: 0;
  border: 2.5px solid var(--clr-border); border-top-color: var(--clr-amber);
  border-radius: 50%;
}
.ptr-indicator--ready .ptr-indicator__spinner { border-top-color: var(--clr-navy); }
.ptr-indicator--spinning .ptr-indicator__spinner { animation: ptrSpin 700ms linear infinite; }
@keyframes ptrSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .ptr-indicator--spinning .ptr-indicator__spinner { animation: none; }
}

/* Reserve the scrollbar's width from the first frame. Without this, a page that
   starts short (skeletons) and grows once data lands gains a classic scrollbar,
   which narrows the viewport and shifts every right-aligned element inward.
   Scoped to widths that actually have classic scrollbars — phones use overlay
   scrollbars, where this is a no-op on a real device but not in every engine. */
@media (min-width: 901px) {
  html { scrollbar-gutter: stable; }
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 900px) {
  .auth-page { grid-template-columns: 1fr; }
  .auth-panel--left { display: none; }
  .dashboard { grid-template-columns: 1fr; }
  .sidebar { display: none; }
}
@media (max-width: 600px) {
  .container { padding: 0 var(--sp-md); }
  .main-content { padding: calc(var(--sp-lg) + 56px) var(--sp-md) var(--sp-lg); }
  .kt-native-app .main-content { padding-top: 12px; }

  .card {
    padding: 14px 12px;
  }
  .btn {
    white-space: normal;
    min-height: 44px;
    line-height: 1.25;
    text-align: center;
  }
  .btn--sm {
    min-height: 40px;
  }
}

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

/* ── Mobile top bar ──────────────────────────────────────── */
#mobile-topbar {
  display        : none;
  position       : fixed;
  top            : 0;
  left           : 0;
  right          : 0;
  z-index        : 200;
  background     : var(--clr-navy);
  padding        : 0 var(--sp-lg);
  height         : 56px;
  align-items    : center;
  justify-content: space-between;
  border-bottom  : 1px solid rgba(255,255,255,0.1);
}
.mobile-topbar__logo {
  display     : inline-flex;
  align-items : center;
  text-decoration: none;
  min-width   : 0;
}
.mobile-topbar__logo img {
  height     : 36px; max-width: 100%; width: auto; flex-shrink: 1;
  background : white;
  border-radius: 6px;
  padding    : 4px 7px;
  box-sizing : border-box;
}
.mobile-topbar__burger {
  background : none; border: none; cursor: pointer;
  color      : white; display: flex; align-items: center;
  padding    : 6px;
}

/* ── Mobile nav overlay ──────────────────────────────────── */
#mobile-nav-overlay {
  position  : fixed; inset: 0;
  background: rgba(0,0,0,0.6);
  z-index   : 300;
  opacity   : 0; pointer-events: none;
  transition: opacity 200ms;
}
#mobile-nav-overlay.open { opacity: 1; pointer-events: all; }
#mobile-nav-drawer {
  position  : absolute; left: 0; top: 0; bottom: 0;
  width     : 280px; background: var(--clr-navy);
  display   : flex; flex-direction: column;
  transform : translateX(-100%);
  transition: transform 250ms ease;
  overflow-y: auto;
}
#mobile-nav-overlay.open #mobile-nav-drawer { transform: translateX(0); }

/* ── Subscription badge on sidebar ──────────────────────── */
.sub-badge {
  display       : inline-flex; align-items: center;
  padding       : 2px 8px; border-radius: var(--r-pill);
  font-size     : 0.7rem; font-weight: 700;
  margin-left   : auto; letter-spacing: 0.03em;
}
.sub-badge--ok      { background: rgba(30,185,84,0.2); color: #6EF2A1; }
.sub-badge--warning { background: rgba(245,166,35,0.2); color: var(--clr-amber); }
.sub-badge--expired { background: rgba(229,56,59,0.2);  color: #FF8A8A; }

/* ── Native app bottom tab bar ───────────────────────────── */
#bottom-bar {
  display: none;
  position: fixed;
  left: var(--sp-md); right: var(--sp-md);
  bottom: calc(var(--sp-md) + env(safe-area-inset-bottom, 0));
  z-index: 250;
  background: var(--clr-navy);
  border-radius: 999px;
  padding: 6px;
  box-shadow: 0 10px 28px rgba(15,32,68,0.4), 0 2px 8px rgba(15,32,68,0.25);
}
.bottom-bar__tab {
  flex: 1;
  min-width: 0;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer;
  color: rgba(255,255,255,0.55);
  font-family: var(--font-body); font-size: 0.625rem; font-weight: 600;
  text-decoration: none;
}
.bottom-bar__tab:hover, .bottom-bar__tab:focus, .bottom-bar__tab:active { text-decoration: none; }
.bottom-bar__tab svg { width: 19px; height: 19px; flex-shrink: 0; }
.bottom-bar__tab-pill {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  max-width: 100%;
  padding: 7px 4px;
  border-radius: 999px;
  transition: background var(--transition);
}
.bottom-bar__tab-pill span {
  max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bottom-bar__tab.active { color: var(--clr-white); }
.bottom-bar__tab.active .bottom-bar__tab-pill { background: rgba(255,255,255,0.16); }

.kt-native-app #mobile-topbar {
  height: calc(56px + env(safe-area-inset-top, 0));
  padding-top: env(safe-area-inset-top, 0);
}
.kt-native-app .mobile-topbar__burger { display: none; }
.kt-native-app #bottom-bar { display: flex; }
.kt-native-app #toast-container { top: calc(var(--sp-lg) + env(safe-area-inset-top, 0)); }
/* U8: the space kept free under the content follows the bar's REAL height
   (sidebar.js measures it into --bottom-bar-h; the bar grows with the phone's
   font size). 76px is the default-size height, used until it is measured. */
.kt-native-app .main-content { padding-bottom: calc(var(--sp-lg) + var(--bottom-bar-h, 76px) + env(safe-area-inset-bottom, 0)); }
.kt-native-app .nav { padding-top: env(safe-area-inset-top, 0); }

/* ── Show mobile bar on small screens ────────────────────── */
@media (max-width: 900px) {
  #mobile-topbar { display: flex; }
  .dashboard { grid-template-columns: 1fr; }
  .sidebar   { display: none; }
  .main-content { padding: calc(var(--sp-lg) + 56px) var(--sp-md) var(--sp-lg); }
  .kt-native-app .main-content { padding-top: 12px; }
  #toast-container { top: calc(56px + var(--sp-md)); }
  .kt-native-app #toast-container { top: calc(56px + var(--sp-md) + env(safe-area-inset-top, 0)); }

  body:has(.dashboard)::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 56px;
    background: var(--clr-navy);
    z-index: 199;
    pointer-events: none;
  }
  .kt-native-app body:has(.dashboard)::before {
    height: calc(56px + env(safe-area-inset-top, 0));
  }
}

/* ── Mobile: Reports page ────────────────────────────────── */
@media (max-width: 600px) {
  .report-grid           { gap: var(--sp-sm); margin-bottom: var(--sp-lg); }
  .report-type-card {
    display: flex !important; align-items: center; gap: var(--sp-md);
    padding: var(--sp-sm) var(--sp-md) !important;
  }
  .report-type-card__icon {
    width: 36px !important; height: 36px !important; font-size: 1.1rem !important;
    margin-bottom: 0 !important; flex-shrink: 0;
  }
  .report-type-card h3   { font-size: 0.9375rem !important; margin-bottom: 0 !important; }
  .report-type-card p    { display: none !important; }
  .controls-bar          { padding: var(--sp-md); gap: var(--sp-sm); }
  .controls-bar .btn     { width: 100%; }
  .control-group select,
  .control-group input   { min-width: 100%; }
  .rs-cell__val          { font-size: 1.25rem; }
  .report-summary        { flex-wrap: wrap; }
  .rs-cell               { flex: 1 1 50%; border-right: none; border-bottom: 1px solid var(--clr-border); }
  .rs-cell:nth-last-child(-n+2) { border-bottom: none; }
  .report-header         { padding: var(--sp-lg); }
  .report-header__right  { text-align: left; }
}

/* ── Mobile: Reminder modal ──────────────────────────────── */
@media (max-width: 600px) {
  .modal { padding: var(--sp-lg) var(--sp-md); }
  .modal__footer { flex-direction: column; }
  .modal__footer .btn { width: 100%; }
  #remind-modal .modal { max-width: 100%; margin: 0 var(--sp-md); }
}

/* ── Phones only: Tenants page — mobile-first card layout so
   first paint never shows the huge desktop multi-column grid. ── */
@media (max-width: 900px) {
  .tenant-header { display: none !important; }
  .tenant-row {
    display: block !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: var(--sp-md) !important;
    grid-template-columns: none !important;
  }
  .tenant-row-header {
    display: flex !important;
    align-items: center;
    gap: var(--sp-md);
    margin-bottom: var(--sp-sm);
  }
  /* U8: the value moves UNDER its label (right-aligned) when the two do not
     fit side by side at a large font size, instead of being squeezed and split. */
  .tenant-row > [data-label] {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    column-gap: var(--sp-md);
    row-gap: 2px;
    padding: var(--sp-sm) 0;
    border-top: 1px solid var(--clr-border);
    text-align: right;
  }
  .tenant-row > [data-label]::before {
    content: attr(data-label);
    font-size: 0.75rem; font-weight: 700; color: var(--clr-muted);
    text-transform: uppercase; letter-spacing: 0.04em;
    flex-shrink: 0; text-align: left;
    margin-right: auto;
  }
  .tenant-unit, .tenant-balance { font-size: 0.875rem; }
  .tenant-actions { flex-wrap: wrap; justify-content: flex-end; }
  .search-bar { flex-direction: column; }
  .search-bar input, .search-bar select { width: 100%; }
}

/* ── Mobile + laptop: filter tab strips ─────────────────────── */
@media (max-width: 900px) {
  .tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab-btn { flex-shrink: 0; white-space: nowrap; }
}

/* ── Mobile + laptop: page header action buttons ───────────────── */
@media (max-width: 900px) {
  .page-header.flex-between { flex-wrap: wrap; row-gap: var(--sp-sm); }
  .page-header.flex-between > *:last-child {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-sm);
    width: 100%;
  }
  .page-header.flex-between > *:last-child > .btn,
  .page-header.flex-between > *:last-child.btn {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.8125rem;
    padding: 8px 12px;
    white-space: normal;
  }
}

/* ── Mobile + laptop: data tables & grid-row lists ──────────────── */
@media (max-width: 1300px) {
  .card { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .prop-table, .unit-table, .readings-table { min-width: 700px; }
}

/* ── Phones only: turn tables into stacked cards ──────────────── */
@media (max-width: 700px) {
  .prop-table, .unit-table, .readings-table { min-width: 0 !important; }
  .prop-table, .unit-table, .readings-table,
  .prop-table tbody, .unit-table tbody, .readings-table tbody,
  .prop-table tr, .unit-table tr, .readings-table tr,
  .prop-table td, .unit-table td, .readings-table td {
    display: block; width: 100%;
  }
  .prop-table thead, .unit-table thead, .readings-table thead,
  .readings-table tfoot { display: none; }
  .prop-table tr, .unit-table tr, .readings-table tr {
    padding: var(--sp-md) 0;
    border-bottom: 1px solid var(--clr-border);
  }
  .prop-table td, .unit-table td, .readings-table td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-md);
    padding: var(--sp-md) var(--sp-md) !important;
    border-bottom: none !important;
    text-align: right;
  }
  .prop-table td::before, .unit-table td::before, .readings-table td::before {
    content: attr(data-label);
    font-size: 0.75rem; font-weight: 700; color: var(--clr-muted);
    text-transform: uppercase; letter-spacing: 0.04em;
    flex-shrink: 0; text-align: left;
  }
}

/* ── Mobile nav drawer ───────────────────────────────────── */
#mobile-nav-drawer nav a svg,
#mobile-nav-drawer .mobile-topbar__logo svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

#mobile-nav-drawer nav a {
  padding: 9px var(--sp-lg) !important;
  gap: 10px !important;
  font-size: 0.875rem !important;
}