/*
 * Mobile layout for the Master Data and User Management list pages.
 *
 * Tables that responsive_cards.js tags with `.rt-cards` turn into cards on
 * phones and tablets (up to 1100px): every cell shows its column heading
 * (data-label) next to the value. Phones get one card per row; tablets get a
 * grid of two or three cards across. Page chrome (headers, search bars,
 * DataTables controls, pagination) is stacked and made full width on phones.
 * Desktop is untouched.
 *
 * Page-level <style> blocks load after this file, so the rules that have to win
 * against them use !important.
 */
/* ---- Laptop / tablet: tables stay tables ----
 * Edit / Delete / Map sit on ONE line (the column grows to fit them instead of
 * stacking the buttons two or three high), and a table wider than its card
 * scrolls inside the card instead of spilling past the page edge. */
body.rt-page table td.rt-actions {
    white-space: nowrap;
}

body.rt-page table td.rt-actions > form {
    display: inline-block;
    margin: 0;
}

body.rt-page table td.rt-actions .btn,
body.rt-page table td.rt-actions .btn-restore,
body.rt-page table td.rt-actions .btn-purge,
body.rt-page table td.rt-actions .boundary-btn {
    vertical-align: middle;
}

body.rt-page .dataTables_wrapper {
    max-width: 100%;
    overflow-x: auto;
}

/* DataTables stamps a pixel width on the table when it first draws; if the page then shifts by a few
 * pixels (a scrollbar appearing) the table ends up wider than its card and shows a pointless sliver of
 * scrollbar. Follow the card instead - a table whose content needs more room still grows and scrolls. */
body.rt-page table.dataTable {
    width: 100% !important;
}

/* ---- Tablet: let the page header wrap instead of squeezing title and buttons together ---- */
@media (min-width: 769px) and (max-width: 1100px) {
    body.rt-page .page-header .container > .d-flex {
        flex-wrap: wrap;
        justify-content: center !important;
        gap: 10px 12px;
    }

    body.rt-page .page-header .page-title {
        flex: 1 1 100%;
        order: -1;
        text-align: center;
        white-space: normal;
    }
}

@media (max-width: 768px) {

    /* ---- Page chrome: release fixed heights, nested scrolling, big padding ---- */
    body.rt-page {
        overflow-x: hidden;
        overflow-y: auto !important;
    }

    body.rt-page .main-container {
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        padding: 10px !important;
    }

    body.rt-page .container-fire,
    body.rt-page .container-fire-full,
    body.rt-page .container-fire-block,
    body.rt-page .container-species,
    body.rt-page .container-vss,
    body.rt-page .container-depot,
    body.rt-page .container-forest,
    body.rt-page .container-reserve-forest {
        height: auto !important;
        overflow: visible !important;
        padding: 14px !important;
        margin-top: 0 !important;
        border-radius: 16px !important;
    }

    body.rt-page .table-container {
        height: auto !important;
        flex: none !important;
        overflow: visible !important;
        padding: 12px !important;
        border-radius: 12px !important;
    }

    body.rt-page .table-wrapper {
        height: auto !important;
        max-height: none !important;
        flex: none !important;
        overflow: visible !important;
        border: 0 !important;
        border-radius: 0 !important;
    }

    /* ---- Page header: title on top, buttons stacked full width ---- */
    body.rt-page .page-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        margin-bottom: 16px !important;
        padding-bottom: 14px !important;
    }

    body.rt-page .page-header > .container,
    body.rt-page .page-header .container > .d-flex {
        padding: 0 !important;
        width: 100%;
    }

    body.rt-page .page-header .container > .d-flex,
    body.rt-page .page-header .d-flex,
    body.rt-page .page-header > div[style*="display: flex"] {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    body.rt-page .page-title {
        position: static !important;
        transform: none !important;
        order: -1;
        padding: 0 !important;
        font-size: 20px !important;
        line-height: 1.3;
        text-align: center !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        justify-content: center !important;
    }

    body.rt-page .page-title i {
        font-size: 20px !important;
    }

    body.rt-page .page-header .back-button,
    body.rt-page .page-header .add-button,
    body.rt-page .page-header .btn {
        width: 100% !important;
        justify-content: center !important;
        padding: 10px 16px !important;
        font-size: 15px !important;
        margin: 0 !important;
    }

    /* ---- Info / search / filter strips ---- */
    body.rt-page .info-search-row {
        flex-direction: column !important;
        gap: 12px !important;
        margin-bottom: 14px !important;
    }

    body.rt-page .info-box,
    body.rt-page .search-section {
        padding: 12px 14px !important;
        width: 100%;
    }

    body.rt-page .search-form {
        flex-wrap: wrap;
    }

    body.rt-page .search-form input,
    body.rt-page .search-form select {
        min-width: 0;
        width: 100%;
    }

    /* ---- DataTables controls ---- */
    body.rt-page .dataTables_wrapper .dataTables_length,
    body.rt-page .dataTables_wrapper .dataTables_filter,
    body.rt-page .dataTables_wrapper .dataTables_info,
    body.rt-page .dataTables_wrapper .dataTables_paginate {
        float: none !important;
        width: 100%;
        margin: 6px 0 !important;
        text-align: center !important;
    }

    body.rt-page .dataTables_wrapper .dataTables_filter label {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
    }

    body.rt-page .dataTables_wrapper .dataTables_filter input {
        flex: 1;
        min-width: 0;
        margin-left: 0 !important;
    }

    body.rt-page .dataTables_wrapper .dataTables_paginate {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px;
    }

    body.rt-page .dataTables_wrapper .dataTables_paginate .paginate_button {
        padding: 0.3em 0.7em !important;
        margin: 0 !important;
    }

    /* Server-side pagination (user management) */
    body.rt-page .pagination-container {
        flex-direction: column !important;
        align-items: center !important;
        gap: 12px !important;
        text-align: center;
    }

    body.rt-page .pagination {
        flex-wrap: wrap;
        justify-content: center;
    }

}

/* ---- Tables -> cards: phones and tablets ---- */
@media (max-width: 1100px) {

    body.rt-page table.rt-cards {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        border: 0 !important;
        background: transparent !important;
    }

    body.rt-page table.rt-cards thead {
        display: none !important;
    }

    body.rt-page table.rt-cards tbody,
    body.rt-page table.rt-cards tr,
    body.rt-page table.rt-cards td {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box;
    }

    body.rt-page table.rt-cards tbody tr {
        background: #fff !important;
        border: 1px solid #fde2d1 !important;
        border-left: 4px solid #f4511e !important;
        border-radius: 12px;
        margin: 0 0 12px !important;
        padding: 4px 14px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
    }

    body.rt-page table.rt-cards tbody tr:hover td {
        background: transparent !important;
    }

    body.rt-page table.rt-cards td {
        display: flex !important;
        align-items: flex-start;
        justify-content: space-between;
        gap: 14px;
        padding: 9px 0 !important;
        border: 0 !important;
        border-bottom: 1px dashed #f0d9cc !important;
        background: transparent !important;
        box-shadow: none !important;
        text-align: right !important;
        overflow-wrap: anywhere;
        word-break: break-word;
        white-space: normal !important;
    }

    body.rt-page table.rt-cards td:last-child {
        border-bottom: 0 !important;
    }

    /* Columns a page hides on purpose (user management Actions) stay hidden */
    body.rt-page table.rt-cards .actions-column {
        display: none !important;
    }

    body.rt-page table.rt-cards td::before {
        content: attr(data-label);
        flex: 0 0 34%;
        max-width: 34%;
        color: #9a3412;
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.4px;
        text-align: left;
        text-transform: uppercase;
        overflow-wrap: normal;
        word-break: normal;
    }

    /* No heading (checkbox column, empty-table message): value only */
    body.rt-page table.rt-cards td:not([data-label])::before,
    body.rt-page table.rt-cards td[data-label=""]::before {
        display: none;
    }

    body.rt-page table.rt-cards td[colspan] {
        justify-content: center;
        text-align: center !important;
    }

    /* Row-number column: slim, left-aligned chip instead of a full row */
    body.rt-page table.rt-cards td.rt-index {
        justify-content: flex-start;
        padding-bottom: 4px !important;
    }

    body.rt-page table.rt-cards td.rt-index::before {
        flex: 0 0 auto;
        max-width: none;
    }

    /* Action buttons: their own row, buttons share the width */
    body.rt-page table.rt-cards td.rt-actions {
        flex-wrap: wrap;
        justify-content: stretch;
        gap: 8px;
        padding-top: 12px !important;
    }

    body.rt-page table.rt-cards td.rt-actions::before {
        display: none;
    }

    body.rt-page table.rt-cards td.rt-actions > a,
    body.rt-page table.rt-cards td.rt-actions > button,
    body.rt-page table.rt-cards td.rt-actions > form {
        flex: 1 1 auto;
        margin: 0 !important;
        padding: 8px 12px !important;
        text-align: center !important;
        white-space: nowrap;
    }

    body.rt-page table.rt-cards td.rt-actions > form > button {
        width: 100%;
    }

    /* Badges / chips inside a card must not stretch */
    body.rt-page table.rt-cards td .badge {
        white-space: normal;
        text-align: center;
    }

}

@media (max-width: 768px) {

    /* ---- Modals ---- */
    body.rt-page .modal-dialog {
        margin: 0.75rem !important;
        max-width: none;
    }
}

/* ---- Tablet (iPad portrait and landscape): card grid ----
 * Cards flow into as many columns as fit, about 280px each: two across on a
 * portrait iPad, three across on a landscape one. Stacked rows are removed, so
 * the grid gap does the spacing. A "no records" message row spans the grid. */
@media (min-width: 769px) and (max-width: 1100px) {
    /* !important: the base card rules above force tbody to display:block with !important */
    body.rt-page table.rt-cards tbody {
        display: grid !important;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 14px;
    }

    /* Landscape iPad (1024px): three across */
    @media (min-width: 1024px) {
        body.rt-page table.rt-cards tbody {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
    }

    body.rt-page table.rt-cards tbody tr {
        margin: 0 !important;
    }

    body.rt-page table.rt-cards tbody tr:has(> td[colspan]) {
        grid-column: 1 / -1;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        padding: 0;
    }
}