/* =============================================================================
   VY-Accounts — Responsive overrides
   -----------------------------------------------------------------------------
   ALL cross-cutting responsive rules live in this file, and this file is
   loaded LAST in base.html so its rules always win over the desktop defaults
   at the same specificity.

   Why a dedicated file? Prior to splitting this out, mobile overrides were
   embedded in base.css @media blocks. But base.css is loaded BEFORE
   components.css, which meant any property set on a component's desktop rule
   (e.g. `.vy-sidebar { position: sticky; min-height: calc(100vh - ...) }`)
   would clobber the mobile override (`position: fixed; min-height: 0`) via
   the cascade's "later-wins-at-same-specificity" rule — even though the
   media query matched. The sidebar then stayed sticky, occupied full height
   in normal flow (because mobile's `display: block` on .app-body meant the
   grid no longer held it in column 1), and shoved main content hundreds of
   pixels down the page. That is the root cause of the "huge gap below header
   on mobile" bug.

   Loading responsive.css last guarantees mobile wins.
   ============================================================================= */


/* ---------------------------------------------------------------------------
   Tablet: 900 – 1100px  (sidebar visible but trimmed)
   --------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .app-main { padding: var(--sp-5); }
  /* KPI rows on Rent register / summary: 5 or 6 columns -> 3 on tablet */
  .vy-kpi-grid { grid-template-columns: repeat(3, 1fr) !important; }
}


/* ---------------------------------------------------------------------------
   Mobile: <= 900px  (sidebar becomes a slide-in drawer)
   ---------------------------------------------------------------------------
   We drop the grid layout on .app-body entirely here. Because the sidebar
   is position:fixed (out of flow) and the backdrop is display:none until
   opened, .app-main is the only in-flow child; a block container renders
   identically on every browser without the implicit-row quirks some engines
   give grids with fixed children.
   --------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .app-body {
    display: block;
    min-height: 0;
  }
  .app-main {
    padding: var(--sp-4);
    min-width: 0;
    overflow-x: hidden;
  }

  /* Sidebar as drawer. Every property that components.css sets on the
     desktop sidebar must be re-asserted here; otherwise the desktop rule
     (loaded before responsive.css) wins. */
  .vy-sidebar {
    position: fixed;
    top: var(--header-h);
    left: 0;
    bottom: 0;
    width: min(84vw, 320px);
    min-height: 0;                 /* not calc(100vh - header) anymore */
    transform: translateX(-102%);
    transition: transform var(--dur-base) var(--ease-out),
                box-shadow var(--dur-base) var(--ease-out);
    z-index: var(--z-sticky);
    box-shadow: none;
    /* Keep overflow scroll behaviour from components.css */
  }
  body.vy-sidebar-open .vy-sidebar {
    transform: translateX(0);
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.24);
  }

  .vy-header__hamburger { display: inline-flex !important; }

  /* Stat grids: 4-up -> 2-up on tablet, 1-up on mobile (560px below) */
  .vy-stat-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* KPI grids collapse to 2 columns here; 1 column below 560. */
  .vy-kpi-grid { grid-template-columns: repeat(2, 1fr) !important; }
}


/* ---------------------------------------------------------------------------
   Narrow mobile: <= 560px
   --------------------------------------------------------------------------- */
@media (max-width: 560px) {
  .app-main { padding: var(--sp-3); }
  .vy-stat-grid { grid-template-columns: 1fr !important; }
  .vy-kpi-grid { grid-template-columns: 1fr !important; }

  /* Page-header row stacks on small screens */
  .vy-page-header {
    flex-direction: column;
    align-items: stretch !important;
    gap: var(--sp-3);
  }
  .vy-page-header__actions { flex-wrap: wrap; }

  /* Tables: let them scroll horizontally rather than crush columns */
  .vy-table-wrap { overflow-x: auto; }
  .vy-table { min-width: 640px; }

  /* Hide hardware keyboard hint on mobile */
  .auth-foot-copy .auth-kbd { display: none; }

  /* Theme switch: icons only, no labels */
  .vy-theme-switch__btn span { display: none; }
  .vy-theme-switch__btn { padding: 6px 8px !important; }

  /* Header condensing. The tenant chip hides because the centre name
     already appears on the landing / tenant page below. */
  .vy-header { padding: 0 var(--sp-3); gap: 6px; }
  .vy-header__tools { gap: 6px; flex-wrap: nowrap; }
  .vy-header__tools > .vy-chip { display: none; }
  /* Profile link becomes compact */
  .vy-header .vy-btn--sm { padding: 5px 8px; font-size: var(--fs-xs); }
  /* Brand: hide the NGO eyebrow on very small screens, keep the wordmark */
  .vy-brand__eyebrow { display: none; }

  /* Make inline-styled multi-column sections stack on narrow phones.
     Using `main ... ` (descendant) instead of `main > div` because many
     dashboards wrap the grid in another element (card / section), and
     nested grids were previously not being collapsed and pushed the
     page beyond the viewport, triggering the browser's zoom-out and
     making everything look like a full desktop render. */
  /* Non-class inline grids collapse to 1 column. Class-bearing
     grids (.vy-stat-grid, .vy-kpi-grid) are handled by their own
     class-level rules below so they can be 2-col, not 1-col --
     excluded from this broad sweep via :not() so their own rule
     wins the cascade. */
  main div[style*="grid-template-columns: 2fr 1fr"]:not(.vy-stat-grid):not(.vy-kpi-grid),
  main div[style*="grid-template-columns: 1fr 2fr"]:not(.vy-stat-grid):not(.vy-kpi-grid),
  main div[style*="grid-template-columns: 1fr 1fr"]:not(.vy-stat-grid):not(.vy-kpi-grid),
  main div[style*="grid-template-columns: repeat(2,"]:not(.vy-stat-grid):not(.vy-kpi-grid),
  main div[style*="grid-template-columns: repeat(3,"]:not(.vy-stat-grid):not(.vy-kpi-grid),
  main div[style*="grid-template-columns: repeat(4,"]:not(.vy-stat-grid):not(.vy-kpi-grid),
  main div[style*="grid-template-columns: repeat(5,"]:not(.vy-stat-grid):not(.vy-kpi-grid),
  main div[style*="grid-template-columns: repeat(6,"]:not(.vy-stat-grid):not(.vy-kpi-grid),
  main .vy-card__body[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* Inline min-width rules on search boxes and filter selects force
     horizontal scroll on phones. Flatten them here -- at this width a
     full-width control reads best anyway. */
  .vy-search[style*="min-width"],
  main form[style*="min-width"],
  main [style*="min-width: 320px"],
  main [style*="min-width: 300px"],
  main [style*="min-width: 280px"],
  main [style*="min-width: 260px"],
  main [style*="min-width: 240px"],
  main [style*="min-width: 220px"],
  main [style*="min-width:320px"],
  main [style*="min-width:300px"],
  main [style*="min-width:280px"],
  main [style*="min-width:260px"],
  main [style*="min-width:240px"],
  main [style*="min-width:220px"] {
    min-width: 0 !important;
  }

  /* Inline max-width: 640px / 720px on form cards ("form, class=vy-card
     style=max-width: 720px") is fine on desktop but when combined with
     inline padding from <div style="display:flex; gap:8px;"> rows for
     two-up fields, the flex row pushes wider than the viewport. Force
     flex rows under main to wrap. */
  main div[style*="display:flex"],
  main div[style*="display: flex"] {
    flex-wrap: wrap;
  }
}

/* ---------------------------------------------------------------------------
   Tablet + narrow desktop guard (901-1024)
   Some form pages use fixed-px widths that overflow phablet tablets.
   --------------------------------------------------------------------------- */
@media (max-width: 900px) {
  /* Forms with inline max-width: 720px on .vy-card work, but any
     max-width greater than 100vw should be capped so the card never
     overflows the viewport. Fall back to full-width minus a gutter. */
  main .vy-card[style*="max-width"] {
    max-width: 100% !important;
  }
  /* Tables that sit directly in main (without a .vy-table-wrap wrapper)
     are the classic horizontal-overflow source. Guard the wrapper
     element itself so it never forces the body wider than the viewport. */
  main > table,
  main table.vy-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}


/* =============================================================================
   FORM CONTROL SHRINKAGE (global, not just mobile)
   -----------------------------------------------------------------------------
   Grid and flex items default to ``min-width: auto``, which means they
   refuse to shrink below their intrinsic content width. For form
   controls that means:

     * a <select> whose longest <option> is "Pune Center UPI (UPI / wallet)"
       asserts a min-content width around 300px,
     * an <input type="date"> reserves space for the native picker chrome,
     * a very long placeholder can also force a minimum.

   Either one is enough to push the .vy-field-row grid track wider than
   the phone viewport -- exactly the "many input boxes going outside the
   screen" symptom. The fix is unconditional: let grid and flex children
   shrink to zero and cap form-control width to the track. This has no
   visible effect on desktop (tracks are already wide enough) and cures
   every inline / nested field-row on mobile at once.
   ============================================================================= */
.vy-field,
.vy-field-row > *,
.vy-card__body > *,
.vy-form > * {
  min-width: 0;
}
/* The classed form-controls AND any raw input/select/textarea/button/a
   that happens to sit inside main without a vy-class -- every page gets
   the same guarantee, so an older template that uses bare tags (or a
   third-party widget) still stays inside the viewport. */
.vy-input,
.vy-select,
.vy-textarea,
main input,
main select,
main textarea {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

/* Long words, URLs, mono strings (receipt numbers, FCRA references,
   SHA-256 hashes, email addresses in audit logs) would otherwise force
   horizontal scroll inside tight cards. Let them break where needed. */
.vy-card,
.vy-card__body,
.vy-crumbs,
.vy-page-header,
.vy-kv dt,
.vy-kv dd {
  overflow-wrap: anywhere;
}

/* Code / kbd / pre / samp are the most common micro-overflow source on
   audit-event, donation-detail and receipt-preview screens. Scroll
   horizontally within themselves rather than pushing the page. */
main pre,
main code,
main kbd,
main samp {
  max-width: 100%;
  overflow-x: auto;
  word-break: break-word;
  -webkit-overflow-scrolling: touch;
}

/* Media never forces page width. */
main img,
main svg,
main iframe,
main video {
  max-width: 100%;
}

/* Tables that DON'T use the .vy-table-wrap scroll container get a
   block-level horizontal scroll of their own so the page doesn't
   inherit the table's minimum intrinsic width. .vy-table kept on its
   grid so the existing min-width rule and sticky header still work. */
main > table,
main > section > table,
main > div > table,
main article > table,
main table:not(.vy-table) {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
/* Chips inside subtitles (tenant name, status pills) truncate rather
   than overflow on tiny screens. */
@media (max-width: 560px) {
  .vy-page-header__sub .vy-chip,
  .vy-crumbs .vy-chip {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Form max-width is always a ceiling, but some phones apply it as a
     target when the parent is wider -- defensive cap to 100% so a form
     never reserves more than the viewport. */
  main form.vy-form,
  main .vy-form[style*="max-width"] {
    max-width: 100% !important;
  }
}


/* =============================================================================
   MOBILE-NATIVE POLISH (<= 560px)
   -----------------------------------------------------------------------------
   Everything above this point fixes LAYOUT on mobile -- no overflow, no
   giant gap. This block tunes COMPONENT DENSITY so the app reads as a
   mobile app and not a desktop page squeezed into a phone:

     * h1 / page-header: dial down font-size and vertical padding so the
       title doesn't eat 25% of the viewport.
     * KPI + stat tiles: smaller padding, smaller value font, and a
       2-column grid (instead of 1-column) so 4 tiles fit in one viewport.
     * Page-header action row: smaller buttons, tighter gap.
     * Breadcrumbs: single line, slightly smaller.
     * Cards: trim outer padding so content gets more width.
   ============================================================================= */
@media (max-width: 560px) {

  /* -------- Page header ---------------------------------------------- */
  .vy-page-header {
    padding-bottom: var(--sp-3);
    margin-bottom: var(--sp-3);
    gap: var(--sp-2);
  }
  .vy-page-header__title {
    font-size: var(--fs-xl);   /* was fs-2xl / fs-3xl on desktop */
    line-height: 1.2;
    letter-spacing: -0.01em;
  }
  .vy-page-header__sub {
    font-size: var(--fs-sm);
    line-height: 1.45;
  }
  .vy-page-header__actions {
    gap: 6px;                  /* tight wrap */
  }
  .vy-page-header__actions .vy-btn {
    padding: 6px 10px;         /* was 8px 14px */
    font-size: var(--fs-xs);
    flex: 0 0 auto;
  }

  /* The "CENTRE RENT COLLECTION" style eyebrow above page titles. */
  .vy-eyebrow {
    font-size: 10px;
    letter-spacing: 0.16em;
  }

  /* -------- KPI / Stat tiles ----------------------------------------- */
  /* Two tiles per row by default on phones so 4 KPIs fit in ~1 viewport.
     Previous rule collapsed to 1-column at this breakpoint; that made
     every rent-register / dashboard page feel like an endless scroll. */
  .vy-stat-grid { grid-template-columns: repeat(2, 1fr) !important; gap: var(--sp-3) !important; }
  .vy-kpi-grid  { grid-template-columns: repeat(2, 1fr) !important; gap: var(--sp-3) !important; }

  .vy-stat, .vy-kpi {
    padding: var(--sp-3);      /* was sp-4 / sp-5 */
    border-radius: var(--radius-md);
  }
  .vy-stat__label, .vy-kpi__label {
    font-size: 10px;
    letter-spacing: 0.12em;
  }
  .vy-stat__value, .vy-kpi__value {
    font-size: var(--fs-xl);   /* was fs-2xl / fs-3xl */
    line-height: 1.15;
    letter-spacing: -0.02em;
  }
  .vy-stat__sub, .vy-kpi__sub {
    font-size: 11px;
    line-height: 1.35;
  }

  /* -------- Breadcrumbs ---------------------------------------------- */
  .vy-crumbs {
    font-size: var(--fs-xs);
    margin-bottom: var(--sp-2);
    gap: 6px;
  }

  /* -------- Cards ---------------------------------------------------- */
  .vy-card__header,
  .vy-card__body,
  .vy-card__footer {
    padding: var(--sp-3) var(--sp-4);
  }
  .vy-card__title {
    font-size: var(--fs-md);
  }

  /* -------- Form fields --------------------------------------------- */
  .vy-field__label { font-size: var(--fs-sm); }
  .vy-input, .vy-select, .vy-textarea {
    font-size: 16px;            /* prevents iOS zoom-on-focus */
  }

  /* -------- Toolbar (search + filter bar on list pages) -------------- */
  .vy-table-toolbar {
    flex-direction: column;
    align-items: stretch !important;
    gap: var(--sp-2);
  }
  .vy-table-toolbar__actions {
    flex-wrap: wrap;
    gap: var(--sp-2);
  }
  .vy-search { min-width: 0 !important; width: 100%; }

  /* -------- Buttons: tap target but compact -------------------------- */
  .vy-btn {
    padding: 8px 12px;          /* slightly smaller than desktop */
  }
  .vy-btn--sm {
    padding: 6px 10px;
    font-size: var(--fs-xs);
  }

  /* -------- Envbar smaller so prod banner doesn't dominate ----------- */
  .vy-envbar { font-size: 10px; height: 24px; }
}


/* =============================================================================
   TABLET POLISH (560px..900px)
   At this width we have room for 3-4 column tile grids and desktop-ish
   typography, but the action rows still need to wrap cleanly.
   ============================================================================= */
@media (min-width: 561px) and (max-width: 900px) {
  .vy-stat-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .vy-kpi-grid  { grid-template-columns: repeat(3, 1fr) !important; }
  .vy-page-header__actions { gap: 8px; flex-wrap: wrap; }
  .vy-page-header__actions .vy-btn { font-size: var(--fs-sm); }
}