/* early-reveal.css — critical first-paint rules (v50)
 *
 * When already authed (html.kt-early-reveal):
 *   → spinner is HIDDEN immediately
 *   → app is shown with correct mobile layout from first paint
 * FOUC fixed by size locks + mobile-first grids, not by holding a spinner.
 */

/* Already signed in: never show spinner */
html.kt-early-reveal #loading-overlay {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}
html.kt-early-reveal #app {
  display: grid !important;
  visibility: visible !important;
}

/* After paint-ready (cold load path) */
html.kt-paint-ready #loading-overlay {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}
html.kt-paint-ready #app {
  visibility: visible !important;
}

/* ── SVG icon sizes (never paint at browser default ~300px) ─ */
.sidebar__nav a svg,
#mobile-nav-drawer svg,
.mobile-topbar__burger svg,
.bottom-bar__tab svg,
.bottom-bar__tab-pill svg,
.sidebar svg {
  width: 18px !important;
  height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
  flex-shrink: 0 !important;
  display: block !important;
}
.bottom-bar__tab svg,
.bottom-bar__tab-pill svg {
  width: 19px !important;
  height: 19px !important;
  max-width: 19px !important;
  max-height: 19px !important;
}


/* Logo size lock — prevent small→large jump */
.sidebar__logo img,
.mobile-topbar__logo img {
  height: 36px !important;
  width: auto !important;
  max-height: 36px !important;
  max-width: 180px !important;
  display: block !important;
  background: #fff !important;
  border-radius: 7px !important;
  padding: 5px 10px !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
}
.mobile-topbar__logo img {
  border-radius: 6px !important;
  padding: 5px 9px !important;
}


/* ── Skeleton size lock ──────────────────────────────────── */
.skeleton {
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}
.skeleton__row {
  height: 48px !important;
  max-height: 56px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  border-radius: 10px !important;
}

/* ── Native layout via CSS (before JS measures topbar) ───── */
html.kt-native-app #mobile-topbar {
  display: flex !important;
  height: calc(56px + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
}
html.kt-native-app #bottom-bar {
  display: flex !important;
}
html.kt-native-app .dashboard {
  position: absolute !important;
  top: calc(56px + env(safe-area-inset-top, 0px)) !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: 1fr !important;
}
html.kt-native-app .main-content {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  padding-top: 12px !important;
  padding-bottom: calc(24px + 76px + env(safe-area-inset-bottom, 0px)) !important;
}

/* Nothing may be wider than the viewport at first paint. .main-content is a
   grid item, so its automatic minimum size is min-content — a wide page-header
   row widened the column past the viewport until sidebar.js injected these same
   rules at runtime, which read as "stretched, then snapped inward".
   ⚠️ KEEP IN SYNC with global.css and injectPolishStyles() in sidebar.js. */
html, body { max-width: 100% !important; }
.dashboard { width: 100% !important; max-width: 100% !important; overflow-x: hidden !important; }
.main-content {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

/* Mobile grids — first paint is always 2×2 on phones.
   ⚠️ KEEP IN SYNC with .stats-grid in global.css. These carry !important and
   are in <head>, so they decide the FIRST PAINT geometry; if the two disagree
   the grid is laid out one way and re-laid another, which is exactly the
   settle-after-load this file exists to prevent. The 1400px 5-across
   breakpoint is deliberate: below it, 5 equal columns are too narrow for a
   7-figure money value, which then wraps and grows the whole stat row. */
.stats-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}
@media (min-width: 700px) {
  .stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
  }
}
@media (min-width: 1400px) {
  .stats-grid { grid-template-columns: repeat(5, 1fr) !important; }
}

/* Reserve the stat value's height before any data arrives, so a card holding a
   skeleton is exactly as tall as one holding "KES 1,240,000". Without this the
   value grows to two lines when real data lands and pushes everything below it
   down — measured at 103-154px. ⚠️ KEEP IN SYNC with global.css. */
.stat-card__value {
  overflow-wrap: normal !important;
  word-break   : normal !important;
  line-height  : 1.2;
  min-height   : calc(2 * 1.2 * 1.15rem);
}
@media (min-width: 701px) {
  .stat-card__value {
    font-size  : 1.75rem !important;
    line-height: 1.2 !important;
    min-height : calc(2 * 1.2 * 1.75rem);
  }
}

.summary-row {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}
@media (min-width: 700px) {
  .summary-row {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
  }
}

@media (max-width: 700px) {
  .quick-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  .qa-btn {
    width: 100% !important;
    min-width: 0 !important;
    padding: 10px 8px !important;
    font-size: 0.75rem !important;
    white-space: normal !important;
  }
}

@media (max-width: 900px) {
  .tenant-header { display: none !important; }
  .tenant-row {
    display: block !important;
    grid-template-columns: none !important;
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  .tenant-row-header {
    display: flex !important;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
  }
}

.ct-row { flex-wrap: wrap !important; gap: 10px !important; }
.ct-row > div:last-child,
.ct-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  max-width: 100% !important;
}
.ct-row .btn,
.ct-actions .btn {
  white-space: normal !important;
  font-size: 0.75rem !important;
  padding: 6px 10px !important;
  min-width: 0 !important;
}
@media (max-width: 600px) {
  .ct-row { flex-direction: column !important; align-items: stretch !important; }
  .ct-row > div:last-child,
  .ct-actions { width: 100% !important; }
  .ct-row .btn,
  .ct-actions .btn { flex: 1 1 calc(50% - 6px) !important; }
}