/*
 * Tablet and phone adjustments.
 *
 * Every rule lives inside a max-width / pointer media query: the desktop layout (>= 992px, mouse) is not touched.
 *   - below 992px  : tablets (portrait) and phones
 *   - below 768px  : phones. Tables switch to "cards" (class table-cards / table-parts), forms stack.
 *   - pointer: coarse (finger): bigger tap targets.
 * Loaded after site.css. Bootstrap here is 5.1 (no --bs-border-color etc.), so plain colors are used.
 */

/* Sort selector injected by site.js (AutoMoteur.addMobileSort): phones only. */
.mobile-sort {
    display: none;
}

/* ================================================================================================
   Tablet and below (< 992px)
   ================================================================================================ */
@media (max-width: 991.98px) {

    /* ---- Navbar (collapsed menu) ---- */
    .navbar-collapse {
        padding-bottom: .5rem;
    }

    .navbar-collapse .navbar-nav .nav-item .nav-link {
        padding: .75rem 1rem !important;
    }

    .navbar-collapse .notification-bell {
        margin: 0;
        padding: .25rem 1rem;
        display: inline-block;
    }

    .navbar-collapse .notification-count {
        top: -2px;
        right: 4px;
    }

    .navbar-collapse .navbar-nav .btn-link.nav-link {
        width: 100%;
        text-align: left;
    }

    /* ---- Notification panel: opens inline, under the bell (inside the collapsed menu), never wider than the screen ---- */
    .notification-container {
        position: static;
        width: auto;
        max-width: 480px;
        margin: .25rem .5rem .5rem;
    }

    .notification-container .list-group {
        max-height: 60vh;
    }

    /* ---- Work slips list: status menu above the table, as a wrapped row of buttons ---- */
    .slip-menu {
        display: flex !important;
        flex-wrap: wrap;
        gap: .5rem !important;
    }

    .slip-menu > * {
        flex: 1 1 auto;
    }

    .slip-menu .menu-create {
        flex-basis: 100%;
    }

    .slip-menu .menu-status {
        flex: 2 1 100%;
        order: 1;
    }

    /* "Soumissions diverses" and "Travaux terminés" share the line under the status buttons */
    .slip-menu .menu-other { order: 2; }
    .slip-menu .menu-completed { order: 3; }
    .slip-menu .menu-all { order: 4; }

    .slip-menu .menu-status .list-group {
        flex-direction: row;
    }

    .slip-menu .menu-status .list-group-item {
        flex: 1 1 0;
        text-align: center;
        border-width: 0 0 0 1px;
        padding-left: .5rem;
        padding-right: .5rem;
    }

    .slip-menu .menu-status .list-group-item:first-child {
        border-left-width: 0;
    }

    /* ---- Form header toolbar (Back / title / actions) ---- */
    .form-toolbar {
        display: grid !important;
        grid-template-columns: auto 1fr;
        gap: .5rem;
        align-items: center;
    }

    .form-toolbar > h4 {
        font-size: 1.15rem;
        text-align: right;
    }

    .form-toolbar > .toolbar-actions {
        grid-column: 1 / -1;
        flex-wrap: wrap;
    }

    .form-toolbar > .toolbar-actions > .btn,
    .form-toolbar > .toolbar-actions > div {
        flex: 1 1 auto;
    }

    /* the wrapper around the (maybe disabled) rebuilt engine button */
    .form-toolbar > .toolbar-actions > div > .btn {
        width: 100%;
    }
}

/* ================================================================================================
   Landscape tablets / small laptops (992px - 1199px): the navbar is inline, keep its labels on one line
   ================================================================================================ */
@media (min-width: 992px) and (max-width: 1199.98px) {

    .navbar-nav .nav-item .nav-link {
        white-space: nowrap;
        padding-left: .6rem !important;
        padding-right: .6rem !important;
    }

    .notification-bell {
        margin-right: 8px;
    }
}

@media (min-width: 992px) and (max-width: 1099.98px) {

    .navbar-nav .nav-item .nav-link {
        padding-left: .4rem !important;
        padding-right: .4rem !important;
    }
}

/* ================================================================================================
   Tablet only (768px - 991px): lists keep their columns, but long texts wrap instead of being cut
   ================================================================================================ */
@media (min-width: 768px) and (max-width: 991.98px) {

    table.table-cards:not(#NotesTable) > tbody > tr > td:not(.actions) {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        overflow-wrap: anywhere;
    }
}

/* ================================================================================================
   Parts and work-hour entry on tablets AND phones (< 992px): no inner scrolling boxes (the page
   scrolls), finger-sized fields, one block per part with a small label above every field.
   The arrangement of the fields inside a part is below: tablet (2 lines per part) / phone (card).
   ================================================================================================ */
@media (max-width: 991.98px) {

    /* ---- Parts tables: one card per part, the page scrolls (no inner scrolling box) ---- */
    .parts-card .dt-scroll-head {
        display: none;
    }

    .parts-card div.dt-scroll-body {
        border-bottom: 0 !important;
        max-height: none !important;
        height: auto !important;
        overflow: visible !important;
    }

    .parts-card .card-body,
    .parts-card.card-body,
    .parts-card .card-body > .px-2 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .parts-card .dt-container > .row {
        margin-left: 0;
        margin-right: 0;
    }

    table.table-parts {
        display: block;
        width: 100% !important;
        border: 0;
    }

    table.table-parts > thead {
        display: none !important;
    }

    table.table-parts > tbody {
        display: block;
    }

    table.table-parts > tbody > tr {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        column-gap: .5rem;
        row-gap: .3rem;
        padding: .5rem .5rem .6rem;
        border-bottom: 2px solid #dee2e6;
        background-color: var(--bs-table-bg) !important;
        box-shadow: none !important;
    }

    /* the tint of a filled row (table-info) is carried by the card itself, not by each cell */
    table.table-parts > tbody > tr > td {
        display: block;
        min-width: 0;
        width: auto !important;
        border: 0;
        padding: 0;
        box-shadow: none !important;
        background: transparent !important;
    }

    table.table-parts > tbody > tr > td::before {
        display: block;
        font-size: .8rem;
        color: #6c757d;
        margin-bottom: .1rem;
    }

    table.table-parts .form-check-input {
        margin: 0;
        width: 1.5rem;
        height: 1.5rem;
    }

    #headPartsTable > tbody > tr > td:nth-child(2)::before,
    #enginePartsTable > tbody > tr > td:nth-child(2)::before { content: "Description"; }
    #headPartsTable > tbody > tr > td:nth-child(3)::before,
    #enginePartsTable > tbody > tr > td:nth-child(3)::before { content: "No. pièce"; }
    #headPartsTable > tbody > tr > td:nth-child(4)::before,
    #enginePartsTable > tbody > tr > td:nth-child(4)::before { content: "Qté"; }
    #headPartsTable > tbody > tr > td:nth-child(5)::before,
    #enginePartsTable > tbody > tr > td:nth-child(5)::before { content: "Coût"; }
    #headPartsTable > tbody > tr > td:nth-child(6)::before,
    #enginePartsTable > tbody > tr > td:nth-child(6)::before { content: "Prix client"; }
    #headPartsTable > tbody > tr > td:nth-child(7)::before,
    #enginePartsTable > tbody > tr > td:nth-child(7)::before { content: "Informations"; }
    #headPartsTable > tbody > tr > td:nth-child(1)::before,
    #enginePartsTable > tbody > tr > td:nth-child(1)::before,
    #headPartsTable > tbody > tr > td:nth-child(8)::before,
    #enginePartsTable > tbody > tr > td:nth-child(8)::before { content: none; }

    #RebuiltEnginePartsTable > tbody > tr > td:nth-child(1)::before { content: "Pièce"; }
    #RebuiltEnginePartsTable > tbody > tr > td:nth-child(2)::before { content: "No. pièce"; }
    #RebuiltEnginePartsTable > tbody > tr > td:nth-child(3)::before { content: "Quantité"; }
    #RebuiltEnginePartsTable > tbody > tr > td:nth-child(4)::before { content: "Coût"; }
    #RebuiltEnginePartsTable > tbody > tr > td:nth-child(5)::before { content: "Prix client"; }
    #RebuiltEnginePartsTable > tbody > tr > td:nth-child(6)::before { content: "Informations"; }
    #RebuiltEnginePartsTable > tbody > tr > td:nth-child(7)::before { content: none; }

    table.table-parts .form-control,
    .workHoursTable .form-control,
    .workHoursTable .btn {
        min-height: 40px;
        font-size: 16px;
    }

    table.table-parts .btn-outline-danger {
        min-height: 40px;
        min-width: 48px;
    }

    /* Part headers: title and "Ajouter une pièce" stay on one line */
    .parts-card .card-header .btn {
        white-space: nowrap;
    }

    .workHoursTable .deleteWorkTime {
        min-height: 40px;
        min-width: 48px;
    }
    /* (table-bordered draws a dark 1px line on top of every row) */
    .workHoursTable > tbody > tr,
    table.table-parts > tbody > tr {
        border-top: 0;
    }

    /* ---- Work hours: one card per entry ---- */
    .workHoursTable {
        display: block;
        border: 0;
    }

    .workHoursTable > thead {
        display: none;
    }

    .workHoursTable > tbody {
        display: block;
    }

    .workHoursTable > tbody > tr {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "date date"
            "start end"
            "total actions";
        column-gap: .5rem;
        row-gap: .35rem;
        padding: .5rem .25rem;
        border-bottom: 1px solid #dee2e6;
    }

    .workHoursTable > tbody > tr > td {
        display: block;
        border: 0;
        padding: 0;
        min-width: 0;
        box-shadow: none;
        background: transparent;
    }

    .workHoursTable > tbody > tr > td::before {
        display: block;
        font-size: .8rem;
        color: #6c757d;
        margin-bottom: .1rem;
    }

    .workHoursTable > tbody > tr > td:nth-child(1) { grid-area: date; }
    .workHoursTable > tbody > tr > td:nth-child(2) { grid-area: start; }
    .workHoursTable > tbody > tr > td:nth-child(3) { grid-area: end; }
    .workHoursTable > tbody > tr > td:nth-child(4) { grid-area: total; }
    .workHoursTable > tbody > tr > td:nth-child(5) { grid-area: actions; align-self: end; text-align: right; }
    .workHoursTable > tbody > tr > td:nth-child(1)::before { content: "Date"; }
    .workHoursTable > tbody > tr > td:nth-child(2)::before { content: "Début"; }
    .workHoursTable > tbody > tr > td:nth-child(3)::before { content: "Fin"; }
    .workHoursTable > tbody > tr > td:nth-child(4)::before { content: "Total (h)"; }
    .workHoursTable > tbody > tr > td:nth-child(5)::before { content: none; }

    .workHoursTable .input-group > .form-control,
    .workHoursTable .input-group > .btn {
        min-height: 42px;
    }

    .workHoursTable .input-group > .btn {
        padding-left: .85rem;
        padding-right: .85rem;
    }

    .workHoursTable .deleteWorkTime {
        min-height: 42px;
        min-width: 48px;
    }

    .workHoursCard .card-header .btn {
        min-height: 0;
    }

}

/* ================================================================================================
   Tablet only (768px - 991px): a part is two lines
       Requis | Description | No. pièce | Qté | Coût | Prix client | (delete)
              | Informations
   ================================================================================================ */
@media (min-width: 768px) and (max-width: 991.98px) {

    /* Work hours: one line per entry (Date | Début | Fin | Total | delete), it must fit in the card */
    .workHoursTable > tbody > tr {
        grid-template-columns: minmax(0, 1.9fr) minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(0, .8fr) 3.5rem;
        grid-template-areas: "date start end total actions";
        align-items: end;
    }

    table.table-parts > tbody > tr {
        grid-template-columns: 3.25rem minmax(0, 2.2fr) minmax(0, 1.4fr) minmax(0, .9fr) minmax(0, 1fr) minmax(0, 1fr) 3.5rem;
        align-items: end;
    }

    /* Work slip parts: Requis, Description, No. pièce, Qté, Coût, Prix client, Informations, delete */
    #headPartsTable > tbody > tr > td:nth-child(1),
    #enginePartsTable > tbody > tr > td:nth-child(1) {
        grid-column: 1;
        grid-row: 1;
        text-align: center;
        padding-bottom: .4rem;
    }

    #headPartsTable > tbody > tr > td:nth-child(1)::before,
    #enginePartsTable > tbody > tr > td:nth-child(1)::before {
        content: "Requis";
    }

    #headPartsTable > tbody > tr > td:nth-child(2), #enginePartsTable > tbody > tr > td:nth-child(2) { grid-column: 2; grid-row: 1; }
    #headPartsTable > tbody > tr > td:nth-child(3), #enginePartsTable > tbody > tr > td:nth-child(3) { grid-column: 3; grid-row: 1; }
    #headPartsTable > tbody > tr > td:nth-child(4), #enginePartsTable > tbody > tr > td:nth-child(4) { grid-column: 4; grid-row: 1; }
    #headPartsTable > tbody > tr > td:nth-child(5), #enginePartsTable > tbody > tr > td:nth-child(5) { grid-column: 5; grid-row: 1; }
    #headPartsTable > tbody > tr > td:nth-child(6), #enginePartsTable > tbody > tr > td:nth-child(6) { grid-column: 6; grid-row: 1; }
    #headPartsTable > tbody > tr > td:nth-child(7), #enginePartsTable > tbody > tr > td:nth-child(7) { grid-column: 2 / 7; grid-row: 2; }
    #headPartsTable > tbody > tr > td:nth-child(8), #enginePartsTable > tbody > tr > td:nth-child(8) { grid-column: 7; grid-row: 1; text-align: center; }

    /* Rebuilt engine parts: Pièce, No. pièce, Quantité, Coût, Prix client, Informations, delete */
    #RebuiltEnginePartsTable > tbody > tr {
        grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.4fr) minmax(0, .9fr) minmax(0, 1fr) minmax(0, 1fr) 3.5rem;
    }

    #RebuiltEnginePartsTable > tbody > tr > td:nth-child(1) { grid-column: 1; grid-row: 1; }
    #RebuiltEnginePartsTable > tbody > tr > td:nth-child(2) { grid-column: 2; grid-row: 1; }
    #RebuiltEnginePartsTable > tbody > tr > td:nth-child(3) { grid-column: 3; grid-row: 1; }
    #RebuiltEnginePartsTable > tbody > tr > td:nth-child(4) { grid-column: 4; grid-row: 1; }
    #RebuiltEnginePartsTable > tbody > tr > td:nth-child(5) { grid-column: 5; grid-row: 1; }
    #RebuiltEnginePartsTable > tbody > tr > td:nth-child(6) { grid-column: 1 / 6; grid-row: 2; }
    #RebuiltEnginePartsTable > tbody > tr > td:nth-child(7) { grid-column: 6; grid-row: 1; text-align: center; }
}

/* ================================================================================================
   Global search results: cards on tablets AND phones (6 columns do not fit in 768px). Same idea as
   table-cards (phones only), with its own class and its own sort selector (.mobile-sort-lg).
   ================================================================================================ */
@media (max-width: 991.98px) {

    .mobile-sort-lg {
        display: flex;
        align-items: center;
        gap: .5rem;
        margin: 0 0 .35rem;
    }

    .mobile-sort-lg label {
        margin: 0;
        white-space: nowrap;
    }

    .mobile-sort-lg select {
        flex: 1 1 auto;
    }

    /* ---- Global search results: cards ---- */
    table.table-cards-lg {
        display: block;
        width: 100% !important;
        border: 0;
    }

    table.table-cards-lg > thead {
        display: none;
    }

    /* (Bootstrap puts a dark 2px line above every table section after the first one: now the first visible one) */
    table.table-cards-lg > tbody,
    table.table-parts > tbody,
    .workHoursTable > tbody {
        border-top: 0;
    }

    table.table-cards-lg > tbody {
        display: block;
    }

    /* the row (not each cell) carries the background: stripes / "important" colour without gaps between cells */
    /* (!important: dataTables.bootstrap5.css is loaded after this file and paints the cells) */
    table.table-cards-lg > tbody > tr {
        border-top: 0;
        display: grid;
        grid-template-columns: 1fr auto;
        border-bottom: 1px solid #dee2e6;
        background-color: var(--bs-table-bg) !important;
        box-shadow: none !important;
    }

    table.table-cards-lg.table-striped > tbody > tr:nth-of-type(odd) {
        box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, .05) !important;
    }

    table.table-cards-lg > tbody > tr > td {
        display: block;
        min-width: 0;
        width: auto !important;
        max-width: none !important;
        border: 0;
        background: transparent !important;
        box-shadow: none !important;
        padding: .1rem .6rem;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        overflow-wrap: anywhere;
        text-align: left !important;
    }

    table.table-cards-lg > tbody > tr > td.dt-empty {
        text-align: center !important;
    }

    table.table-cards-lg > tbody > tr > td.actions {
        white-space: nowrap !important;
        text-align: right !important;
        align-self: center;
    }

    /* Global search results */
    #resultsTable > tbody > tr {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "customer type"
            "engine engine"
            "no no"
            "date done";
    }

    #resultsTable .cell-customer { grid-area: customer; padding-top: .5rem; font-weight: 600; }
    #resultsTable .cell-type { grid-area: type; padding-top: .5rem; color: #6c757d; font-size: .85rem; text-align: right !important; }
    #resultsTable .cell-engine { grid-area: engine; }
    #resultsTable .cell-no { grid-area: no; font-weight: 600; color: #EB1C24; }
    #resultsTable .cell-no:not(:empty)::before { content: "Moteur no. "; font-weight: 400; color: #6c757d; }
    #resultsTable .cell-date { grid-area: date; padding-bottom: .5rem; color: #6c757d; font-size: .85rem; }
    #resultsTable .cell-done { grid-area: done; padding-bottom: .5rem; color: #6c757d; font-size: .85rem; text-align: right !important; }
    #resultsTable .cell-date:not(:empty)::before { content: "Créé le "; }
    #resultsTable .cell-done:not(:empty)::before { content: "Terminé le "; }
}

/* ================================================================================================
   Phone (< 768px)
   ================================================================================================ */
@media (max-width: 767.98px) {

    /* ---- Page frame: use the full width ---- */
    .container {
        padding-left: .25rem;
        padding-right: .25rem;
    }

    /* a .row has a negative margin of half its gutter: the container padding must match it or the page overflows */
    .container-fluid {
        padding-left: .5rem;
        padding-right: .5rem;
    }

    .row {
        --bs-gutter-x: 1rem;
    }

    /* 16px fields: below that iOS zooms the page in when a field gets the focus */
    .form-control,
    .form-select,
    .table-compact .form-control,
    .form-control-sm,
    .form-select-sm {
        font-size: 16px;
    }

    .form-control:not(textarea),
    .form-select {
        min-height: 40px;
    }

    .card-header {
        padding: .35rem .75rem !important;
    }

    .card-body {
        padding: .5rem .75rem .6rem .75rem !important;
    }

    .btn {
        min-height: 40px;
    }

    .btn-sm {
        min-height: 36px;
    }

    /* ---- Slip menu on a phone: two columns ---- */
    .slip-menu .menu-other,
    .slip-menu .menu-completed,
    .slip-menu .menu-all {
        flex: 1 1 calc(50% - .25rem);
    }

    .slip-menu .menu-all {
        flex-basis: 100%;
    }

    .slip-menu .menu-status .list-group-item {
        font-size: .85rem;
        padding: .5rem .25rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: .15rem;
        line-height: 1.15;
    }

    /* ---- DataTables controls ---- */
    .dt-container > .row {
        margin-top: .25rem !important;
    }

    /* "Afficher [25] entrées" is reduced to the select, so it sits on the same line as the search field */
    .dt-container > .row:first-child {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: .5rem;
        margin-left: 0;
        margin-right: 0;
    }

    .dt-container > .row:first-child > * {
        width: auto;
        min-width: 0;
        padding: 0;
        margin: 0 !important;
    }

    .dt-container > .row:first-child > .dt-layout-end {
        flex: 1 1 auto;
    }

    .dt-container .dt-length label {
        font-size: 0;
        margin: 0;
    }

    .dt-container .dt-length select {
        width: auto;
        margin: 0 !important;
        font-size: 16px;
    }

    .dt-container .dt-search {
        display: flex;
        align-items: center;
        gap: .5rem;
    }

    .dt-container .dt-search label {
        margin: 0;
        white-space: nowrap;
    }

    .dt-container .dt-search input {
        flex: 1 1 0;
        width: 0;
        margin-left: 0 !important;
        min-width: 0;
    }

    .dt-container .dt-paging .pagination {
        flex-wrap: wrap;
        justify-content: center;
    }

    .dt-container .dt-paging {
        width: 100%;
    }

    .dt-container .dt-info {
        text-align: center;
    }

    .mobile-sort {
        display: flex;
        align-items: center;
        gap: .5rem;
        margin: 0 0 .35rem;
    }

    .mobile-sort label {
        margin: 0;
        white-space: nowrap;
    }

    .mobile-sort select {
        flex: 1 1 auto;
    }

    /* ---- Lists as cards ---- */
    table.table-cards {
        display: block;
        width: 100% !important;
        border: 0;
    }

    table.table-cards > thead {
        display: none;
    }

    /* (Bootstrap puts a dark 2px line above every table section after the first one: now the first visible one) */
    table.table-cards > tbody,
    table.table-parts > tbody,
    .workHoursTable > tbody {
        border-top: 0;
    }

    table.table-cards > tbody {
        display: block;
    }

    /* the row (not each cell) carries the background: stripes / "important" colour without gaps between cells */
    /* (!important: dataTables.bootstrap5.css is loaded after this file and paints the cells) */
    table.table-cards > tbody > tr {
        border-top: 0;
        display: grid;
        grid-template-columns: 1fr auto;
        border-bottom: 1px solid #dee2e6;
        background-color: var(--bs-table-bg) !important;
        box-shadow: none !important;
    }

    table.table-cards.table-striped > tbody > tr:nth-of-type(odd) {
        box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, .05) !important;
    }

    table.table-cards > tbody > tr > td {
        display: block;
        min-width: 0;
        width: auto !important;
        max-width: none !important;
        border: 0;
        background: transparent !important;
        box-shadow: none !important;
        padding: .1rem .6rem;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        overflow-wrap: anywhere;
        text-align: left !important;
    }

    table.table-cards > tbody > tr > td.dt-empty {
        text-align: center !important;
    }

    table.table-cards > tbody > tr > td.actions {
        white-space: nowrap !important;
        text-align: right !important;
        align-self: center;
    }

    /* Work slips list: date (+ completed date) / customer / vehicle, actions on the right */
    #workSlipTable > tbody > tr {
        grid-template-columns: auto 1fr auto;
        grid-template-areas:
            "date done actions"
            "customer customer actions"
            "engine engine engine";
    }

    #workSlipTable .cell-date { grid-area: date; padding-top: .5rem; color: #6c757d; font-size: .9rem; }
    #workSlipTable .cell-done { grid-area: done; padding-top: .5rem; color: #6c757d; font-size: .9rem; }
    #workSlipTable .cell-customer { grid-area: customer; font-weight: 600; }
    #workSlipTable .cell-engine { grid-area: engine; padding-bottom: .5rem; }
    #workSlipTable .actions { grid-area: actions; padding-top: .5rem; }

    #workSlipTable .cell-done:not(:empty)::before {
        content: "Terminé le ";
    }

    /* Rebuilt engines list: number / customer / model / dates, delete on the right */
    #rebuiltEnginesTable > tbody > tr {
        grid-template-columns: 1fr 1fr auto;
        grid-template-areas:
            "no no actions"
            "customer customer actions"
            "engine engine engine"
            "date done done";
    }

    #rebuiltEnginesTable .cell-no { grid-area: no; padding-top: .5rem; font-weight: 700; color: #EB1C24; }
    #rebuiltEnginesTable .cell-no::before { content: "Moteur no. "; font-weight: 400; color: #6c757d; }
    #rebuiltEnginesTable .cell-customer { grid-area: customer; font-weight: 600; }
    #rebuiltEnginesTable .cell-engine { grid-area: engine; }
    #rebuiltEnginesTable .cell-date { grid-area: date; padding-bottom: .5rem; color: #6c757d; font-size: .85rem; }
    #rebuiltEnginesTable .cell-done { grid-area: done; padding-bottom: .5rem; color: #6c757d; font-size: .85rem; }
    #rebuiltEnginesTable .cell-date::before { content: "Livraison : "; }
    #rebuiltEnginesTable .cell-done::before { content: "Terminé : "; }
    #rebuiltEnginesTable .actions { grid-area: actions; }

    /* Notes list (RowReorder handle kept on the left) */
    #NotesTable > tbody > tr {
        grid-template-columns: auto 1fr auto;
        grid-template-areas:
            "handle customer actions"
            "handle date actions"
            "handle engine engine";
    }

    #NotesTable .cell-handle { grid-area: handle; align-self: center; padding: 0 .5rem; }
    #NotesTable .cell-handle .drag-handle { padding: .75rem .5rem; touch-action: none; }
    #NotesTable .cell-customer { grid-area: customer; padding-top: .5rem; font-weight: 600; }
    #NotesTable .cell-date { grid-area: date; color: #6c757d; font-size: .85rem; }
    /* long notes: first lines only (a tap opens the whole note) */
    #NotesTable .cell-engine {
        grid-area: engine;
        padding-bottom: 0;
        margin-bottom: .5rem;
        display: -webkit-box !important;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4;
        overflow: hidden !important;
    }
    #NotesTable .actions { grid-area: actions; padding-top: .5rem; }

    /* ---- Forms ---- */
    .form-toolbar > .toolbar-actions > .btn,
    .form-toolbar > .toolbar-actions > div {
        flex: 1 1 calc(50% - .25rem);
    }

    /* "Divers" free text next to its checkbox */
    .form-check .divers-info {
        max-width: calc(100vw - 4rem) !important;
        width: calc(100vw - 4rem) !important;
        margin-left: 0 !important;
        margin-top: .35rem;
    }

    /* Checkbox / radio groups: easy to hit with a finger */
    .form-check-inline {
        margin-right: 0;
    }

    /* the checkbox hangs in the left padding of .form-check; p-1 removed it, so the first box was cut off */
    .form-check.form-check-inline.p-1 {
        padding: .4rem .25rem .4rem 1.9rem !important;
    }

    .form-check.form-check-inline.p-1 .form-check-input {
        margin-top: .1rem;
    }

    .form-check-input {
        width: 1.3em;
        height: 1.3em;
    }

    .form-check-input + .form-check-label {
        padding-left: .15rem;
    }

    .card-footer {
        padding: .4rem .75rem;
    }

    /* Work slip parts: Requis, Description, No. pièce, Qté, Coût, Prix client, Informations, delete */
    #headPartsTable > tbody > tr > td:nth-child(1),
    #enginePartsTable > tbody > tr > td:nth-child(1) {
        grid-column: 1 / 3;
        display: flex;
        align-items: center;
        gap: .5rem;
    }

    #headPartsTable > tbody > tr > td:nth-child(1)::after,
    #enginePartsTable > tbody > tr > td:nth-child(1)::after {
        content: "Requis";
        font-size: .9rem;
    }

    #headPartsTable > tbody > tr > td:nth-child(2),
    #enginePartsTable > tbody > tr > td:nth-child(2) { grid-column: 1 / 3; }
    #headPartsTable > tbody > tr > td:nth-child(3),
    #enginePartsTable > tbody > tr > td:nth-child(3) { grid-column: 3; }
    #headPartsTable > tbody > tr > td:nth-child(7),
    #enginePartsTable > tbody > tr > td:nth-child(7) { grid-column: 1 / -1; }
    #headPartsTable > tbody > tr > td:nth-child(8),
    #enginePartsTable > tbody > tr > td:nth-child(8) { grid-column: 3; grid-row: 1; text-align: right; }

    /* Rebuilt engine parts: Pièce, No. pièce, Quantité, Coût, Prix client, Informations, delete */
    #RebuiltEnginePartsTable > tbody > tr > td:nth-child(1) { grid-column: 1 / 3; }
    #RebuiltEnginePartsTable > tbody > tr > td:nth-child(2) { grid-column: 3; }
    #RebuiltEnginePartsTable > tbody > tr > td:nth-child(6) { grid-column: 1 / 3; }
    #RebuiltEnginePartsTable > tbody > tr > td:nth-child(7) { grid-column: 3; align-self: end; text-align: right; }
    /* ---- Login ---- */
    #account .btn-lg {
        font-size: 1.1rem;
    }
}

/* ================================================================================================
   Touch screens (finger): bigger tap targets, whatever the width (stops before big desktop screens)
   ================================================================================================ */
@media (pointer: coarse) and (max-width: 1199.98px) {

    .btn-xs {
        padding: .5rem .65rem;
        font-size: .85rem;
    }

    .btn-xs i {
        font-size: 1rem;
    }

    .btn-sm {
        min-height: 36px;
    }

    .form-check-input {
        width: 1.3em;
        height: 1.3em;
    }

    .table-compact .form-check-input {
        width: 1.2rem;
        height: 1.2rem;
    }

    .table-compact .form-control,
    .table-compact .form-control:focus {
        min-height: 36px;
        height: 36px;
    }

    .page-link {
        padding: .5rem .85rem;
    }

    .list-group-item-action {
        padding-top: .65rem;
        padding-bottom: .65rem;
    }

    .notification-item .btn {
        padding: .5rem .65rem;
    }
}