/* =========================================================================
   Global mobile rules.

   Loaded by every layout. Deliberately plain CSS, no Tailwind: the accountant
   and agent layouts do not load Tailwind at all, so utility classes are inert
   there and a shared stylesheet is the only thing that reaches all seven roles.

   Breakpoint is 820px to match the existing drawer breakpoint in
   components/navigation.css.
   ========================================================================= */

@media (max-width: 820px) {

    /* ---------------------------------------------------------------------
       Wide data tables.

       Most tables in this app are `w-full` inside an `overflow-x-auto` box.
       That combination does NOT scroll - `width: 100%` resolves against the
       container, so the columns just squeeze until they are unreadable. Giving
       the table `min-width: max-content` makes it take the width its content
       actually needs, which is what finally produces a scrollbar.

       Using :has() lets this cover tables that were never wrapped at all
       (area-supervisor and about half of accountant) without editing 91
       separate blocks of markup. A narrow table is unaffected: max-content
       simply resolves to something smaller than the container.

       Specificity here is deliberately low (0,0,2), so an explicit
       `min-w-[900px]` utility on a specific table still wins.
       --------------------------------------------------------------------- */
    :where(div, section, main, form, article):has(> table) {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    :where(div, section, main, form, article):has(> table) > table {
        min-width: max-content;
    }

    /* Long unbroken strings - emails, reference numbers, URLs - must not be
       what forces the horizontal scroll. */
    td,
    th {
        overflow-wrap: break-word;
    }

    /* ---------------------------------------------------------------------
       Fixed-width blocks.

       A hard `width` in px on a card or panel is the other common cause of a
       page that scrolls sideways. Cap anything that declares one.
       --------------------------------------------------------------------- */
    img,
    video,
    canvas,
    svg:not([class*="w-"]):not([class*="h-"]) {
        max-width: 100%;
        height: auto;
    }

    /* Charts render into a canvas sized by JS; keep them inside the card. */
    .chart-container,
    .chart-wrapper {
        max-width: 100%;
        overflow-x: auto;
    }
}

/* -------------------------------------------------------------------------
   Below 480px the two-across stat/summary rows used across the dashboards
   stop being readable, so collapse the common grid helpers to one column.
   Scoped to the project's own class names, not to bare selectors.
   ------------------------------------------------------------------------- */
@media (max-width: 480px) {

    .stats-grid,
    .summary-grid,
    .metrics-grid,
    .cards-grid,
    .kpi-grid,
    .overview-grid {
        grid-template-columns: 1fr !important;
    }

    /* Button rows: stack rather than overflow. */
    .actions-row,
    .button-row,
    .form-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .actions-row > *,
    .button-row > *,
    .form-actions > * {
        width: 100%;
    }
}


/* -------------------------------------------------------------------------
   Multi-column grids declared in the project's own stylesheets.

   These class names were derived from every `grid-template-columns` rule in
   public/css that declares 2+ columns. Calendars (.ml-cal-days,
   .repayment-calendar-grid, .schedule-calendar-grid), OTP inputs and
   icon+text alert rows are deliberately excluded - collapsing those to one
   column would break them rather than fix them. The .workflow-step timeline is
   excluded for the same reason: landing.css already gives it a marker-plus-
   content mobile grid, and because this file loads last, collapsing it here
   silently overrode that and pushed the copy on top of the timeline rule.

   This is the only thing that reaches the accountant and agent pages, which
   load no Tailwind at all.
   ------------------------------------------------------------------------- */
@media (max-width: 820px) {
    .activity-logs-filter-row,
    .activity-logs-summary-grid,
    .add-expense-form,
    .analytics-grid,
    .analytics-section,
    .area-insights-top,
    .borrower-details-grid,
    .button-row-two,
    .calendar-summary-grid,
    .cbu-savings-summary-grid,
    .chart-custom-range-grid,
    .chart-filter-panel-grid,
    .charts-grid,
    .collection-monitoring-summary-grid,
    .dashboard-top,
    .details-grid,
    .disbursement-summary-grid,
    .expenses-summary-grid,
    .feature-grid,
    .feature-row,
    .features-grid,
    .filter-grid,
    .final-confirm-layout,
    .final-confirm-split,
    .financial-reports-summary-grid,
    .footer-links,
    .form-grid-2,
    .form-grid-3,
    .form-grid-custom,
    .form-grid-three,
    .form-grid-two,
    .general-ledger-summary-grid,
    .generate-payroll-form,
    .info-cards,
    .method-summary-card,
    .metrics-summary,
    .ml-loan-info-grid,
    .ml-main-grid,
    .ml-progress-stats,
    .ml-summary-grid,
    .nav-payment-methods,
    .nav-payment-summary-card,
    .payment-method-card,
    .payroll-summary-grid,
    .ph-summary-grid,
    .preview-review-grid,
    .quick-stats,
    .release-grid-2,
    .release-grid-3,
    .release-grid-4,
    .release-summary-grid,
    .repayment-live-summary-grid,
    .repayment-summary-cards,
    .review-kv-grid,
    .site-footer__top,
    .sp-panel-grid,
    .start-application-features,
    .status-features,
    .summary-grid,
    .totals-grid,
    .trust-stats,
    .why-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}


/* -------------------------------------------------------------------------
   Tailwind grids that were never given a responsive variant.

   Three guards keep this from doing damage:

     1. no `*:grid-cols` on the element - `grid-cols-2 md:grid-cols-4` means
        the author deliberately chose 2 columns on mobile, so leave it.
     2. no `col-span-*` child - collapsing to one column would make a
        `col-span-2` child generate implicit columns and overflow.
     3. only 2-6 columns. grid-cols-7 is used solely for the month calendars
        (25 occurrences) and grid-cols-12 is the 12-column span system
        (93 occurrences); both must keep their column count.

   Applies to the five layouts that load the Tailwind CDN; inert elsewhere.
   ------------------------------------------------------------------------- */
@media (max-width: 639.98px) {
    [class~="grid-cols-2"]:not([class*="sm:grid-cols"]):not([class*="md:grid-cols"]):not([class*="lg:grid-cols"]):not([class*="xl:grid-cols"]):not(:has(> [class*="col-span"])),
    [class~="grid-cols-3"]:not([class*="sm:grid-cols"]):not([class*="md:grid-cols"]):not([class*="lg:grid-cols"]):not([class*="xl:grid-cols"]):not(:has(> [class*="col-span"])),
    [class~="grid-cols-4"]:not([class*="sm:grid-cols"]):not([class*="md:grid-cols"]):not([class*="lg:grid-cols"]):not([class*="xl:grid-cols"]):not(:has(> [class*="col-span"])),
    [class~="grid-cols-5"]:not([class*="sm:grid-cols"]):not([class*="md:grid-cols"]):not([class*="lg:grid-cols"]):not([class*="xl:grid-cols"]):not(:has(> [class*="col-span"])),
    [class~="grid-cols-6"]:not([class*="sm:grid-cols"]):not([class*="md:grid-cols"]):not([class*="lg:grid-cols"]):not([class*="xl:grid-cols"]):not(:has(> [class*="col-span"])) {
        grid-template-columns: minmax(0, 1fr);
    }
}


/* -------------------------------------------------------------------------
   Scroll containers.

   `.no-scrollbar` was defined inline in three of the nine layouts, so any
   shared partial using it (the loan-application step indicator, for one)
   showed a scrollbar on the other six. Define it once, here, since every
   layout links this file.
   ------------------------------------------------------------------------- */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}


/* -------------------------------------------------------------------------
   Card tables.

   Opt-in with `card-table` on a <table> whose cells carry `data-label`.
   Below `sm` the header row is dropped and each <tr> becomes a two-column
   card, so a table with more columns than a phone has width reads top to
   bottom instead of demanding a sideways scroll. The markup stays a real
   table, so wider screens and screen readers are unaffected.

   Two cells can opt out of the label/value flow:
     data-card="title"   first line, left  - no label, prominent
     data-card="badge"   first line, right - no label, e.g. a status pill
     data-card="wide"    own full-width line, keeps its label - long free
                         text such as a description or an address
     data-card="actions" own full-width line at the foot of the card

   Pair this with `sm:`-prefixed `overflow-x-auto` / `min-w-max` on the
   wrapper and table, rather than overriding those utilities here: the
   Tailwind CDN injects its styles after this file, so it would win the tie.
   ------------------------------------------------------------------------- */
@media (max-width: 639.98px) {
    .card-table,
    .card-table tbody {
        display: block;
        width: 100%;
        /* Page stylesheets give wide tables a min-width so their wrapper
           scrolls. Cards have no columns to hold apart, and that width would
           make the cards themselves overflow. */
        min-width: 0;
    }

    .card-table thead {
        display: none;
    }

    .card-table tbody tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 14px;
        row-gap: 10px;
        padding: 14px 16px;
    }

    .card-table tbody td {
        display: block;
        padding: 0;
        border: 0;
        text-align: left;
        vertical-align: baseline;
    }

    .card-table tbody tr + tr {
        border-top: 1px solid rgba(148, 163, 184, 0.24);
    }

    .card-table tbody td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 2px;
        font-size: 0.6rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: #94a3b8;
    }

    /* Both first-line cells are placed explicitly so they share row 1 whatever
       their position in the source order; everything else auto-flows below. */
    .card-table tbody td[data-card="title"] {
        grid-column: 1;
        grid-row: 1;
    }

    .card-table tbody td[data-card="badge"] {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
        text-align: right;
    }

    .card-table tbody td[data-card="wide"],
    .card-table tbody td[data-card="actions"] {
        grid-column: 1 / -1;
    }

    /* Row actions read as a footer to the card, so they stay centred where
       the rest of the cell text is flush left. */
    .card-table tbody td[data-card="actions"] {
        text-align: center;
    }

    /* An empty-state cell spans the table with a colspan and has no
       data-label, which would otherwise render an empty label block. */
    .card-table tbody td[data-card="title"]::before,
    .card-table tbody td[data-card="badge"]::before,
    .card-table tbody td[data-card="actions"]::before,
    .card-table tbody td[colspan]::before {
        content: none;
    }

    .card-table tbody td[colspan] {
        grid-column: 1 / -1;
        text-align: center;
    }
}