/*
 * mobile.css — small-screen corrections layered on top of DashLite.
 *
 * Loaded last in every dashboard layout (main / landlord / tenant / agent /
 * caretaker / auth) so it can override template rules without touching the
 * vendored dashlite build.
 *
 * Everything here is scoped to phone-sized viewports unless the rule is a
 * layout bug that is simply wrong at every width (see "flexbox shrink").
 */

/* ---------------------------------------------------------------------------
 * 1. Flexbox shrink bugs
 *
 * A flex item defaults to `min-width: auto`, so it refuses to shrink below the
 * intrinsic width of its content. DashLite's `.card-aside-wrap` is a flex row
 * whose `.card-inner` children have `flex-grow: 1` but no `min-width`, so on a
 * narrow screen the profile card renders wider than its own card and pushes the
 * whole page sideways. Same story for the generic flex rows below.
 * ------------------------------------------------------------------------- */
.card-aside-wrap > .card-inner,
.card-aside-wrap > .card-content {
    min-width: 0;
}

.nk-block-between > *,
.nk-block-head-content,
.nk-tb-col,
.user-card .user-info {
    min-width: 0;
}

/* Grid columns only need the shrink override where space is actually scarce;
 * leaving desktop alone avoids reflowing layouts that rely on min-content. */
@media (max-width: 767.98px) {
    .card-inner > .row > [class^="col"] {
        min-width: 0;
    }
}

/* Profile / settings "data list" rows are `label ......... [action]`. The label
 * column is `flex-grow: 1` with no min-width, so a long value pushes the action
 * button off the right edge instead of wrapping. */
.nk-data .data-col {
    min-width: 0;
}

.nk-data .data-col .data-value,
.nk-data .data-col .data-label {
    overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------------------
 * 2. Tables
 *
 * `.table-responsive` wrappers are added in the Blade views. These rules give
 * the scroll container momentum scrolling on iOS and stop the clip from eating
 * an open action dropdown: while a menu is open the wrapper drops its clipping
 * so the menu can overhang the table edge.
 * ------------------------------------------------------------------------- */
.table-responsive {
    -webkit-overflow-scrolling: touch;
}

.table-responsive:has(.dropdown-menu.show),
.table-responsive:has(.dropdown.show) {
    overflow: visible;
}

/* DataTables' own wrapper. The Responsive extension normally collapses columns
 * into a child row, but if its JS fails or a column cannot be collapsed the
 * table must scroll rather than break the page. */
.datatable-wrap,
.dataTables_wrapper > .dataTables_scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Bootstrap sets `.table { width: 100% }`, which forces a table to cram itself
 * into the container — on a phone that wraps every cell to one character per
 * line ("D/a/t/e"). Switching to `width: auto` lets the table take its natural
 * content width and scroll inside the wrapper, while `min-width: 100%` keeps it
 * filling the card when it does fit. Tables that already fit never scroll. */
@media (max-width: 767.98px) {
    .table-responsive > .table,
    .table-responsive > table {
        width: auto;
        min-width: 100%;
    }
}

@media (max-width: 575.98px) {
    /* Break only words that cannot fit on a line of their own — long emails and
     * M-Pesa references — rather than breaking mid-word everywhere. */
    .table td,
    .table th,
    .nk-tb-col {
        overflow-wrap: break-word;
    }

    /* DashLite's transaction/log tables carry generous horizontal padding that
     * is unaffordable on a 360px screen. */
    .table-tranx td,
    .table-tranx th,
    .table-ulogs td,
    .table-ulogs th,
    .table-tickets td,
    .table-tickets th {
        padding-left: .75rem;
        padding-right: .75rem;
    }
}

/* ---------------------------------------------------------------------------
 * 3. Cards and content padding
 *
 * `.card-inner-lg` keeps 2.5rem of padding down to the smallest screens, which
 * leaves very little room for the content itself.
 * ------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    .card-inner-lg {
        padding: 1.25rem;
    }

    .card-inner-xl {
        padding: 1.5rem;
    }

    .nk-block-head-lg {
        padding-bottom: 1rem;
    }
}

/* ---------------------------------------------------------------------------
 * 4. Forms
 *
 * The invoice / voucher builders lay their line items out in a fixed grid with
 * centred numeric inputs that do not shrink. Let the rows wrap instead.
 * ------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .invoice-item-row,
    .voucher-item-row {
        row-gap: .5rem;
    }

    .form-control,
    .form-select,
    .custom-select {
        max-width: 100%;
    }

    /* Numeric inputs in the line-item builders are sized for desktop. */
    input[id^="item-"],
    input[id^="total-"],
    #total-amount {
        min-width: 0;
        width: 100%;
    }

    /* Right-aligned totals blocks are floated at a fixed width on desktop. */
    .float-end.invoice-totals,
    .invoice-bills .float-end {
        float: none !important;
        width: 100%;
    }
}

/* ---------------------------------------------------------------------------
 * 5. Toolbars and button groups
 *
 * Page headers pair a title with a row of actions. On a phone the actions need
 * to wrap under the title rather than squeeze it.
 * ------------------------------------------------------------------------- */
/* The title/actions header row is a flex pair. It needs to wrap for as long as
 * the sidebar is collapsed (below xl), not just on phones — at tablet width a
 * long page title still pushes the action button past the right edge. */
@media (max-width: 991.98px) {
    .nk-block-between {
        flex-wrap: wrap;
        row-gap: .75rem;
    }
}

@media (max-width: 575.98px) {
    .nk-block-tools,
    .toggle-expand-content .nk-block-tools {
        flex-wrap: wrap;
        row-gap: .5rem;
    }

    .btn-toolbar {
        flex-wrap: wrap;
        row-gap: .5rem;
    }

    /* Tap targets: DashLite's small buttons drop under the 44px comfortable
     * minimum. Keep them legible without changing the desktop sizing. */
    .btn-sm,
    .btn-icon.btn-sm {
        min-height: 34px;
    }
}

/* ---------------------------------------------------------------------------
 * 6. Dashboard header
 *
 * `.header-inner` is a flex row: [sidebar toggle] [logo + wordmark] [actions].
 * None of the items can shrink, so on a narrow phone the row runs past the
 * container and the account/avatar button ends up off-screen — unreachable, and
 * invisible to an overflow check because the header is `position: fixed` and so
 * never extends the document's scroll width.
 *
 * Dropping the wordmark (the mark itself still links home) buys back ~150px,
 * which is more than enough to seat the actions on a 320px screen.
 * ------------------------------------------------------------------------- */
@media (max-width: 419.98px) {
    .mrk-shell .header-inner {
        gap: .5rem;
    }

    .mrk-shell .header-inner .logo > span {
        display: none;
    }
}

/* Belt and braces: never let the header row itself overflow its container. */
.mrk-shell .header-inner {
    min-width: 0;
}

.mrk-shell .header-inner > a,
.mrk-shell .header-inner .logo {
    min-width: 0;
}

.mrk-shell .header-actions {
    flex-shrink: 0;
}

/* ---------------------------------------------------------------------------
 * 7. Overflow guards for known-wide widgets
 * ------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    /* Charts render to a canvas sized from the parent; without this the canvas
     * keeps its last (wider) size after an orientation change. */
    .nk-ck,
    .nk-ck-sm,
    canvas {
        max-width: 100%;
    }

    /* Pre-formatted blocks (API keys, callback URLs, backup paths). */
    pre,
    code,
    .code-block {
        overflow-x: auto;
        white-space: pre-wrap;
        word-break: break-word;
    }

    /* Wide content inside modals. Scoped to the table rather than the whole
     * modal body, so pickers and select dropdowns are not clipped. */
    .modal-body > .table-responsive,
    .modal-body > table,
    .modal-body .table-responsive {
        overflow-x: auto;
        max-width: 100%;
    }
}