/*
 * Narrow screens (375 px) - lists of every module (QA 05.10, 5.3).
 * Loaded in <head> of every page by plugins/Articles/index.php - no core file.
 */

/*
 * The "+" of a collapsed (responsive) row sat ON the first word of the row
 * (Receivables: "+ероСкан" instead of "АероСкан"). The core gives every first
 * cell "padding-left: 15px !important", which beats the 30 px DataTables
 * keeps for its control - give the control cell its room back.
 *
 * Retest 19.10: the rule is on every first cell of a collapsed table, not
 * only on the one that already has "dtr-control". Responsive measures the
 * columns on a hidden copy of the table (always "dtr-inline collapsed") with
 * the freshly drawn rows, which do not carry "dtr-control" yet - it counted
 * the first cell 22 px narrower than it is drawn, so Clients came out 374 px
 * in a card of 360 px. Now the copy and the real table agree.
 */
table.dataTable.dtr-inline.collapsed > tbody > tr:not(.child) > td:first-child:not(.dataTables_empty),
table.dataTable.dtr-inline.collapsed > tbody > tr:not(.child) > th:first-child {
    padding-left: 32px !important;
}

/*
 * Long names on a narrow screen (retest 19.10). In responsive mode the core
 * puts "nowrap" on the table (app.js), so every cell stays on one line. The
 * first column is always shown (Responsive keeps at least one), and a long
 * name in it ("CNS-R-004 - Фотополимерна смола Formlabs Dental Model 1 л")
 * made Warehouse -> Batches 435 px in a card of 345 px - the page was cut on
 * the right, the details of an opened row too. These cells now wrap at the
 * spaces; Responsive measures the same copy, so it hides as many of the other
 * columns as needed for the table to fit the card:
 *  - the first column (a date marked "app-nowrap" stays on one line);
 *  - columns marked "all" (always shown - the client name in Clients);
 *  - name columns marked "app-wrap-name" (article, warehouse, client) - they
 *    also keep 100 px, so a name is not squeezed to one word per line.
 * Ordinary words are never split ("overflow-wrap: break-word" does not change
 * how narrow a column may become, unlike "anywhere").
 */
table.dataTable.nowrap > tbody > tr:not(.child) > td:first-child:not(.app-nowrap),
table.dataTable.nowrap > tbody > tr:not(.child) > td.all:not(.option),
table.dataTable.nowrap > tbody > tr:not(.child) > td.app-wrap-name {
    white-space: normal;
    overflow-wrap: break-word;
}
table.dataTable > tbody > tr > td.app-wrap-name {
    min-width: 100px;
}

/*
 * A column that has to stay on one line (Warehouse -> Movements, the date with
 * the time, retest 19.10): no fixed width - it takes just what the value needs.
 */
table.dataTable td.app-nowrap,
table.dataTable th.app-nowrap {
    white-space: nowrap;
}

/*
 * Details of an opened row (retest 19.10): Responsive copies the class of the
 * column onto its line, so a right-aligned column ("text-end" - Quantity,
 * Unit cost) pushed its caption to the right. The core already resets the old
 * "text-right"; the Bootstrap 5 names are reset here. The value keeps its own
 * right alignment (.dtr-data).
 */
table.dataTable > tbody > tr.child ul.dtr-details > li.text-end,
table.dataTable > tbody > tr.child ul.dtr-details > li.text-start,
table.dataTable > tbody > tr.child ul.dtr-details > li.text-center,
table.dataTable > tbody > tr.child ul.dtr-details > li.dt-right,
table.dataTable > tbody > tr.child ul.dtr-details > li.dt-body-right,
table.dataTable > tbody > tr.child ul.dtr-details > li.dt-center {
    text-align: left !important;
}
table.dataTable > tbody > tr.child ul.dtr-details > li > span.dtr-title {
    text-align: left;
}

/*
 * Counter cards (Clients -> Overview, dashboard; retest 19.10): the caption
 * sits in an absolutely placed block anchored only on the right, so a long
 * caption ("Контакти, влизали в последните 7 дни") grew to the left over the
 * icon. The block now stays in the flow next to the icon: it gets the rest of
 * the width, the caption wraps there and the card grows with it. Same look
 * (number and caption on the right) when the caption fits.
 */
.dashboard-icon-widget .widget-details {
    position: static;
    overflow: hidden;
    padding-left: 15px;
    margin-right: -8px; /* the old block sat 20 px from the edge, the card pads 28 px */
}

/*
 * Same height in a row (retest 19.10, Clients -> Overview at 1366 px): with
 * the caption wrapping, the cards of one row came out 117/117/137/157 px high.
 * The Bootstrap row already stretches its columns to the tallest one; the link
 * and the card inside now take that height too (the card keeps its 20 px
 * bottom margin). Only a column holding just one card link - the dashboard
 * columns (.widget-column) stack several widgets and are left alone.
 * Retest 19.10: the two "Contacts logged in ..." cards are wrapped in
 * "a.contact-widget-link" (inline, no white-link) and stayed 137 px next to
 * 157 px - they get the same rules (that link is used only on this row).
 */
.row > [class*="col-"]:not(.widget-column) > a.white-link:only-child,
.row > [class*="col-"]:not(.widget-column) > a.contact-widget-link:only-child {
    display: block;
    height: 100%;
}
.row > [class*="col-"]:not(.widget-column) > a.white-link:only-child > .card.dashboard-icon-widget:only-child,
.row > [class*="col-"]:not(.widget-column) > a.contact-widget-link:only-child > .card.dashboard-icon-widget:only-child {
    height: calc(100% - 20px);
}

@media (max-width: 600px) {
    /*
     * The tool row of a list (Excel / Print / "Search") ran past the right
     * edge of the card (Clients, the Contacts tab): the right part could not
     * shrink and the search field is a fixed 200 px. It now takes the row,
     * wraps when needed and the field fits the space that is left.
     */
    .filter-section-right {
        flex: 1 1 100% !important;
        max-width: 100%;
        min-width: 0;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
    }
    .filter-section-right .filter-item-box {
        min-width: 0;
        max-width: calc(100% - 10px);
    }
    .filter-section-right .dataTables_filter,
    .filter-section-right .dataTables_filter label {
        max-width: 100%;
    }
    .filter-section-right .dataTables_filter input {
        max-width: 100%;
        box-sizing: border-box;
    }
}

/*
 * Free text without spaces (final sweep 16.10): a batch number / note of 100
 * characters in one piece made Warehouse -> Movements 2012 px wide in a card
 * of 1066 px, without a scroll bar (the core sets .table-responsive to
 * overflow-x: unset). A column with class "app-wrap-anywhere" breaks such a
 * value where it has to; normal text still wraps at the spaces. Only on the
 * free-text columns (batch, note) - on names it would split ordinary words
 * when a narrow screen squeezes the table.
 */
table.dataTable td.app-wrap-anywhere,
table.dataTable th.app-wrap-anywhere {
    overflow-wrap: anywhere;
    word-break: break-word;
    min-width: 80px;
}

/*
 * The same free text in the details of a collapsed row (retest 19.10): at
 * 375 px the "+" opens a list of the hidden columns, but the table carries
 * the "nowrap" class (app.js, responsive mode) and the child cell inherited
 * "white-space: nowrap" - a 100-character batch made the table 887 px in a
 * card of 345 px and cut every other value too. The details now wrap at the
 * spaces like normal text; "overflow-wrap: anywhere" splits a word only when
 * it is wider than the line by itself, so ordinary words stay whole.
 */
table.dataTable > tbody > tr.child > td.child {
    white-space: normal;
}
table.dataTable > tbody > tr.child ul.dtr-details {
    max-width: 100%;
}
table.dataTable > tbody > tr.child ul.dtr-details > li,
table.dataTable > tbody > tr.child span.dtr-data {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/*
 * "Invoice what is available" / "New invoice from selection" (QA 19.10,
 * 375 px): the eight-column table of the wizard (Invoices ->
 * invoiceable_sources.php) was wider than the modal and "Quantity to invoice"
 * was off screen, with no visible scroll bar. Under 768 px each row is a card:
 * the checkbox and the name on top, then one cell per line - the caption of
 * its column (data-label) on the left, the value on the right, the quantity
 * field last. Same inputs, names and classes - the JS total and the red
 * "over available" row work as before. Not a DataTable - the rules above do
 * not touch it.
 */
@media (max-width: 767px) {
    .table.invoice-sources-table,
    .table.invoice-sources-table > tbody {
        display: block;
        width: 100%;
    }
    .table.invoice-sources-table > thead {
        display: none;
    }
    .table.invoice-sources-table > tbody > tr {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        border: 1px solid #dee2e6;
        border-radius: 4px;
        margin-bottom: 10px;
        padding: 4px 0;
        background-color: var(--bs-table-bg); /* the red "over available" card stays red between its cells */
    }
    .table.invoice-sources-table > tbody > tr > td {
        display: block;
        flex: 0 0 100%;
        max-width: 100%;
        min-width: 0;
        order: 3;
        border-bottom-width: 0;
        padding: 3px 10px;
        text-align: right;
        overflow-wrap: anywhere;
    }
    .table.invoice-sources-table > tbody > tr > td[data-label]::before {
        content: attr(data-label);
        float: left;
        max-width: 55%;
        padding-right: 10px;
        text-align: left;
        color: #6c757d;
        overflow-wrap: normal;
    }
    .table.invoice-sources-table > tbody > tr > td[data-label]:not(.sel-qty)::after {
        content: "";
        display: table;
        clear: both;
    }
    .table.invoice-sources-table > tbody > tr > td.sel-pick {
        flex: 0 0 auto;
        order: 1;
        padding-right: 0;
    }
    .table.invoice-sources-table > tbody > tr > td.sel-name {
        flex: 1 1 0;
        order: 2;
        text-align: left;
        font-weight: 600;
        overflow-wrap: break-word;
    }
    /* the field to fill in - last, its caption level with it */
    .table.invoice-sources-table > tbody > tr > td.sel-qty {
        display: flex;
        align-items: center;
        justify-content: space-between;
        order: 4;
        padding-top: 6px;
        padding-bottom: 6px;
    }
    .table.invoice-sources-table > tbody > tr > td.sel-qty::before {
        float: none;
        flex: 1 1 auto;
        color: inherit;
        font-weight: 600;
    }
    .table.invoice-sources-table > tbody > tr > td.sel-qty > .selection-qty {
        flex: 0 0 40%;
        width: 40%;
        min-width: 90px;
    }
}

/*
 * The filters of a list on the tool row (demo 20.10, Sales at ~860 px): with
 * saved filters on (smartFilterIdentity) the core puts the filters and their
 * check / cancel buttons in a separate block (.filter-form) BELOW the tool
 * row - always, at every width - so the row was [columns] and the filters
 * came on a line of their own. While that block is open, the tool row and the
 * block now share one flex row: columns button + left part, then the filters
 * (they take the free space and wrap inside it), then Excel / Print / Search
 * on the right. When the row is too short for all three, Excel / Print /
 * Search go to the next line (on the right); in a very narrow card (under
 * ~400 px) the filters go there too. Only from 768 px: on a phone the core
 * layout stays (the filters on a line of their own, wrapped inside the card). The closed block (.hide) and
 * lists without saved filters are not touched.
 */
@media (min-width: 768px) {
    .filter-section-container:has(> .filter-form:not(.hide)) {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
    }
    .filter-section-container:has(> .filter-form:not(.hide)) > .filter-section-flex-row {
        display: contents;
    }
    .filter-section-container:has(> .filter-form:not(.hide)) > .filter-section-flex-row > .filter-section-left {
        order: 1;
        flex: 0 1 auto;
        min-width: 0;
    }
    .filter-section-container:has(> .filter-form:not(.hide)) > .filter-form {
        order: 2;
        flex: 1 1 320px; /* one 200 px dropdown with its two buttons */
        min-width: 0;
        border-top: 0;
        margin-top: 0;
        padding-top: 0;
    }
    .filter-section-container:has(> .filter-form:not(.hide)) > .filter-section-flex-row > .filter-section-right {
        order: 3;
        flex: 0 0 auto;
        margin-left: auto;
    }
}

/*
 * Lists whose filters are open from the start (demo 20.10: Articles, Sales,
 * Quotes, Invoices ... - the view calls showFilterForm() and puts
 * "filters-pinned-open" on the .dataTables_wrapper): no green check ("save
 * this filter") and no x-circle ("close the filters") next to the filters -
 * the filters stay on the tool row and cannot be closed. A filter change still
 * reloads the table (the core does it on change of the dropdown, not via these
 * buttons); saved filters chosen from the "Filters" dropdown still apply.
 * Hidden at every width, nothing left in their place (display: none; the core
 * toggles .hide on the save box, hence !important). Other lists - untouched.
 */
.filters-pinned-open .filter-form > .save-filter-box,
.filters-pinned-open .filter-form > .filter-cancel-box {
    display: none !important;
}
@media (min-width: 768px) {
    /* without the two buttons one 200 px dropdown needs ~220 px, not 320 */
    .filters-pinned-open .filter-section-container:has(> .filter-form:not(.hide)) > .filter-form {
        flex-basis: 220px;
    }
}