/*
 * UI fixes: spacing, control widths and overflow only.
 * No colours, fonts or behaviour are changed here. Loaded last in layouts/app.blade.php,
 * so removing the <link> restores the previous look exactly.
 */

/* 1. Filter blocks (label + select/button).
      The first filter of each row was wrapped in a flex .input-group, which left its select
      narrower than the identical selects beside it. Stack it like the others. */
.page-content .input-group.mt-3 {
    display: block;
}

.page-content .input-group.mt-3 > .input-group-btn {
    display: block;
    width: 100%;
}

/* 2. Search / action buttons attached to an input were squeezed by the input and clipped. */
.page-content .input-group > .input-group-append {
    flex: 0 0 auto;
}

.page-content .input-group > .input-group-append > .btn {
    flex: 0 0 auto;
    min-width: 48px;
}

/* 3. Buttons inside table cells: even gaps when they wrap onto a second line. */
.page-content .table td .btn,
.page-content table.dataTable td .btn {
    margin: 2px 4px 2px 0;
    vertical-align: middle;
}

/* 3b. Action cells keep their buttons on one line. In a narrow column every icon dropped to its own
       line and made rows 150px tall. Only cells that hold buttons/links are affected. */
.page-content table td:has(> a.btn, > button.btn, > a.edit, > a.delete) {
    white-space: nowrap;
}

/* 3c. Detail-page tabs were fixed at 150px, so long labels wrapped to uneven heights and, on small
       screens, left half-width gaps. Keep 150px as the minimum and let them grow. */
#myTab li a {
    width: auto;
    min-width: 150px;
}

/* 3d. Cards that hold a data table had a shadow and rounded border but no inner padding, so the table
       touched the card edges. 20px sides / 16px top and bottom is what the Queries table card already uses. */
.page-content .card-box.AD-tabs,
.page-content .card-box.mt-5:has(table):not(.table-card) {
    padding: 16px 20px;
}

/* these two carry Bootstrap's pl-2 / pr-2 (!important), so they need !important to be overridden */
.page-content .card-box.pl-2.pr-2 {
    padding: 16px 20px !important;
}

.page-content .card.card-topline-aqua.pl-2.pr-2 {
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-bottom: 16px;
}

/* the card header carries its own side padding; with the card padded it would sit inset from the table */
.page-content .card.card-topline-aqua.pl-2.pr-2 > .card-head header {
    padding-left: 0;
}

.page-content .card.card-topline-aqua.pl-2.pr-2 > .card-head .tools {
    padding-right: 0;
}

/* 4. Queries toolbar: let the search form wrap instead of pushing the button out of the card. */
.page-content .queries-page .queries-toolbar form {
    flex-wrap: wrap;
}

.page-content .queries-page .queries-toolbar form .form-control {
    max-width: 100%;
}

/* 5. Tablet and phone */
@media (max-width: 991px) {
    /* The header logo is sized as 30% of the screen, which made the header over 160px tall. */
    .page-header .page-logo img {
        width: auto !important;
        max-height: 46px;
    }
}

@media (max-width: 767px) {
    /* Tabs share each row evenly instead of sitting at 150px with an empty half beside them. */
    #myTab {
        display: flex;
        flex-wrap: wrap;
    }

    #myTab li {
        float: none;
        flex: 1 1 140px;
    }

    #myTab li a {
        min-width: 0;
        white-space: normal;
    }

    /* Forms that carry a fixed 60px side margin left the fields half-width on small screens. */
    .page-content form[style*="margin-left: 60px"] {
        margin-left: 15px !important;
        margin-right: 15px !important;
    }

    .page-content .queries-page .queries-toolbar form .form-control {
        width: 100% !important;
    }

    .page-content .queries-page .queries-toolbar form select.form-control {
        flex: 1 1 140px;
    }
}