/*
 * Phone-width refinements for the CRM (dashboard layouts).
 *
 * Tables: below 768px any data table with more than two columns is turned
 * into a stack of cards by assets/js/mobile-tables.js, which copies each
 * heading into the cell's data-label and adds .table-stack / .table-stacked.
 * Everything else here is small layout hygiene for narrow screens.
 */
@media (max-width: 767.98px) {
    /* iOS zooms into inputs smaller than 16px; keep them readable and zoom-free. */
    .form-control,
    .custom-select,
    input:not([type=checkbox]):not([type=radio]):not([type=range]),
    select,
    textarea,
    .select2-container .select2-selection,
    .select2-container .select2-search__field {
        font-size: 16px !important;
    }

    .table-responsive.table-stacked {
        overflow: visible;
        padding-bottom: 0;
    }

    .table-stack {
        border-collapse: separate;
    }
    .table-stack thead {
        display: none;
    }
    .table-stack,
    .table-stack tbody,
    .table-stack tr,
    .table-stack td,
    .table-stack th {
        display: block;
        width: 100%;
    }
    .table-stack tbody tr {
        position: relative;
        margin: 0 0 .75rem;
        padding: .5rem .9rem;
        border: 1px solid #ebe9f1;
        border-radius: .5rem;
        background: #fff;
    }
    .table-stack.table-striped tbody tr:nth-of-type(odd),
    .table-stack.table-striped tbody tr:nth-of-type(odd) td,
    .table-stack.table-striped tbody tr:nth-of-type(odd) th {
        background: #fff !important;
    }
    .table-stack tbody tr:last-child {
        margin-bottom: 0;
    }
    .table-stack td,
    .table-stack tbody th {
        display: grid;
        grid-template-columns: minmax(6rem, 38%) 1fr;
        gap: .25rem .75rem;
        align-items: start;
        padding: .35rem 0 !important;
        border: 0 !important;
        text-align: left !important;
        white-space: normal !important;
        max-width: none !important;
        min-width: 0;
        word-break: break-word;
    }
    .table-stack td::before,
    .table-stack tbody th::before {
        content: attr(data-label);
        font-size: .75rem;
        font-weight: 600;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: #6e6b7b;
        padding-top: .15rem;
    }
    .table-stack td.stack-unlabelled,
    .table-stack tbody th.stack-unlabelled {
        grid-template-columns: 1fr;
    }
    .table-stack td.stack-unlabelled::before,
    .table-stack tbody th.stack-unlabelled::before {
        display: none;
    }
    .table-stack td.stack-empty {
        display: none;
    }
    /* A row selection checkbox sits on the card's top-left corner. */
    .table-stack tbody tr.has-check {
        padding-left: 3.25rem;
    }
    .table-stack td.stack-check {
        position: absolute;
        top: .8rem;
        left: 1rem;
        width: auto;
        padding: 0 !important;
        display: block;
    }
    .table-stack td.stack-check .form-check,
    .table-stack td.stack-check .custom-control {
        padding-left: 0;
        margin: 0;
        min-height: 0;
    }
    .table-stack td.stack-check input[type=checkbox] {
        position: static;
        margin: 0;
        width: 1.1rem;
        height: 1.1rem;
    }
    .table-stack tbody tr.has-actions {
        padding-right: 3.25rem;
    }
    .table-stack td > a,
    .table-stack td .font-weight-bold {
        white-space: normal;
        overflow-wrap: anywhere;
    }
    /* Row actions (kebab / buttons) sit on the card's top-right corner. */
    .table-stack td.stack-actions {
        position: absolute;
        top: .35rem;
        right: .5rem;
        width: auto;
        padding: 0 !important;
        display: block;
    }
    .table-stack td.stack-actions .dropdown-menu {
        right: 0;
        left: auto;
    }
    .table-stack td.stack-actions form {
        display: inline-block;
    }
    .table-stack td.stack-buttons {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: .5rem;
        padding-top: .6rem !important;
    }
    .table-stack td.stack-buttons form {
        display: inline-block;
        margin: 0;
    }
    .table-stack .custom-control,
    .table-stack .checkbox {
        min-height: 1.25rem;
    }

    /* Card headers: title and controls wrap instead of squeezing. */
    .card .card-header.flex-wrap > * {
        margin-bottom: .5rem;
    }

    /* Bootstrap pagination: let long page lists wrap rather than overflow. */
    .pagination {
        flex-wrap: wrap;
        row-gap: .35rem;
    }

    /* Breadcrumb bar and content gutters. */
    .content-header-left .breadcrumb {
        flex-wrap: wrap;
    }
    .content-body > .row > [class*="col-"] {
        min-width: 0;
    }

    /* ApexCharts SVG can push past its column on narrow screens. */
    .apexcharts-canvas,
    .apexcharts-canvas svg {
        max-width: 100%;
    }

    /* Invoice editor line items: the column headings only make sense as a
       header row on wide screens; the inputs carry placeholders anyway. */
    .invoice-product-details p.col-title {
        display: none;
    }
    .invoice-product-details .repeater-wrapper > .row:first-child .col-12 {
        margin: 0 !important;
    }
    .invoice-product-details .item-form-padding .row > [class*="col-"] {
        margin-bottom: .5rem;
    }

    /* The floating support button must not cover the last row's actions. */
    .support-btn {
        width: 3rem;
        height: 3rem;
        right: 12px;
        bottom: 12px;
    }
}