/* Shared screen controls. ID specificity intentionally overrides compact-theme rules. */
@media screen {
    /* Form actions share the 30px control height; long labels may wrap. */
    body :is(#appvue, .modal, .auth-wrapper, .table-popup) :is(
        button[type="submit"],
        input[type="submit"],
        input[type="reset"],
        form .btn:not(.btn-close):not(.btn-icon):not(.action-btn),
        .modal-footer .btn:not(.btn-close):not(.btn-icon)
    ) {
        box-sizing: border-box;
        min-height: 30px !important;
        height: auto !important;
        max-width: 100%;
        padding: 4px 12px !important;
        font-size: 13px !important;
        line-height: 20px !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        vertical-align: middle;
        white-space: normal;
    }

    body :is(#appvue, .modal, .auth-wrapper, .table-popup) :is(
        button[type="submit"],
        form .btn:not(.btn-close):not(.btn-icon):not(.action-btn),
        .modal-footer .btn:not(.btn-close):not(.btn-icon)
    ) > :is(i, svg) {
        flex-shrink: 0;
        font-size: 16px !important;
        line-height: 1;
    }

    /* Empty labels above search actions need the same spacing as field labels. */
    body :is(#appvue, .modal, .table-popup) form .form-group > label:has(+ .d-grid) {
        display: inline-block;
        margin-bottom: 0.5rem;
    }

    body :is(#appvue, .modal, .auth-wrapper) :is(.form-control, .form-select) {
        box-sizing: border-box;
        min-width: 0 !important;
        max-width: 100%;
        font-size: 13px !important;
        line-height: 1.5 !important;
        padding: 4px 8px !important;
    }

    body :is(#appvue, .modal, .auth-wrapper) :is(input.form-control:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), select.form-control:not([multiple]):not([size]), .form-select:not([multiple]):not([size])) {
        height: 30px !important;
        min-height: 30px !important;
    }

    body :is(#appvue, .modal, .auth-wrapper) select.form-select {
        padding-inline-end: 2.25rem !important;
    }

    body :is(#appvue, .modal, .auth-wrapper) textarea.form-control {
        height: auto !important;
        min-height: 64px !important;
        resize: vertical;
    }

    body :is(#appvue, .modal, .auth-wrapper) .input-group {
        min-width: 0;
        max-width: 100%;
        align-items: stretch;
    }

    body :is(#appvue, .modal, .auth-wrapper) .input-group > :is(.form-control, .form-select, .select2-container, .choices) {
        flex: 1 1 0%;
        width: 1% !important;
        min-width: 0 !important;
    }

    body :is(#appvue, .modal, .auth-wrapper) .input-group :is(.btn, .input-group-text) {
        min-height: 30px !important;
        height: auto !important;
        font-size: 13px !important;
        padding: 4px 8px !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    body :is(#appvue, .modal, .auth-wrapper) :is(.select2-container, .choices, .form-inline-control, .gb-col, .gb-field, .gb-inline, .gb-total-card) {
        min-width: 0;
        max-width: 100%;
    }

    body :is(#appvue, .modal, .auth-wrapper) .select2-container {
        width: 100% !important;
    }

    body :is(#appvue, .modal, .auth-wrapper) :is(.select2-selection--single, .choices__inner) {
        min-height: 30px !important;
        height: auto !important;
        font-size: 13px !important;
    }

    body :is(#appvue, .modal, .auth-wrapper) .select2-selection--single .select2-selection__rendered {
        line-height: 28px !important;
        padding-inline-end: 2rem;
    }

    body :is(#appvue, .modal, .auth-wrapper) .select2-selection__arrow {
        height: 28px !important;
    }

    body #appvue .gb-items-summary {
        container-type: inline-size;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    body #appvue .gb-items-summary > .gb-col:last-child {
        grid-column: 1 / -1;
    }

    body #appvue .gb-total-grid-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body #appvue .gb-total-grid-2 .gb-field {
        grid-template-columns: minmax(0, 140px) minmax(0, 1fr);
        align-items: center;
    }

    body #appvue .gb-total-grid-2 .gb-inline > :is(.form-control, .form-select) {
        flex: 1 1 0%;
        width: 0 !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    body #appvue .form-inline-label {
        white-space: normal;
    }

    /* The purchase-source label is longer than the standard inline label.
       Stack it above the compound control so neither the label nor placeholder
       is covered by the textbox and its action buttons. */
    body #appvue .erp-billpurchase-header .erp-purchase-source-field {
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
    }

    body #appvue .erp-billpurchase-header .erp-purchase-source-field > .form-inline-label {
        width: 100%;
        min-width: 0;
        max-width: none;
        margin: 0;
        padding-right: 0;
        white-space: normal;
    }

    body #appvue .erp-billpurchase-header .erp-purchase-source-field > .form-inline-control {
        width: 100%;
    }

    /* Respond to the card width too, including narrow cards on wide screens. */
    @container (max-width: 700px) {
        body #appvue .gb-total-grid-2 {
            grid-template-columns: minmax(0, 1fr);
        }
    }

    @container (max-width: 400px) {
        body #appvue .gb-total-grid-2 .gb-field {
            grid-template-columns: minmax(0, 1fr);
        }
    }

    @media (max-width: 991.98px) {
        body #appvue .gb-total-grid-2 {
            grid-template-columns: minmax(0, 1fr);
        }
    }

    @media (max-width: 575.98px) {
        body #appvue .gb-items-summary,
        body #appvue .gb-total-grid-2 .gb-field {
            grid-template-columns: minmax(0, 1fr);
        }

        body #appvue .form-inline-group {
            flex-direction: column;
            align-items: stretch;
            gap: 0.375rem;
        }

        body #appvue .form-inline-control {
            width: 100%;
        }
    }
}

/* Fixed-width save actions stay compact and consistent across document forms. */
@media screen {
    body :is(#appvue, .modal, .table-popup) div:has(> button[name="action"][value="draft"]):has(> button[name="action"][value="confirmed"]) {
        display: grid !important;
        grid-auto-flow: column;
        grid-auto-columns: 170px;
        grid-template-rows: auto;
        justify-content: safe end;
        overflow-x: auto;
        max-width: 100%;
        padding-block: 4px;
        -webkit-overflow-scrolling: touch;
        gap: 6px;
        align-items: stretch;
        min-width: 0;
    }

    body :is(#appvue, .modal, .table-popup) div:has(> button[name="action"][value="draft"]):has(> button[name="action"][value="confirmed"]) > button[name="action"] {
        display: inline-flex !important;
        box-sizing: border-box;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100%;
        height: 100% !important;
        min-height: 32px !important;
        margin: 0 !important;
        padding: 5px 8px !important;
        font-size: 12px !important;
        font-weight: 500;
        line-height: 20px !important;
        border-radius: 8px;
        gap: 6px;
        white-space: normal !important;
        overflow-wrap: anywhere;
        text-align: center;
        align-items: center;
        justify-content: center;
    }

    body :is(#appvue, .modal, .table-popup) button[name="action"] > i {
        flex-shrink: 0;
        font-size: 16px !important;
        line-height: 1;
    }
}

/* Let save actions use the space formerly reserved by the wide Back column. */
@media screen and (min-width: 768px) {
    body :is(#appvue, .modal, .table-popup) .row:has(> div > button[name="action"][value="draft"]):has(> div > button[name="action"][value="confirmed"]) {
        flex-wrap: nowrap;
        align-items: center;
    }
    body :is(#appvue, .modal, .table-popup) .row:has(> div > button[name="action"][value="draft"]):has(> div > button[name="action"][value="confirmed"]) > div:not(:has(> button[name="action"])) {
        flex: 0 0 auto;
        width: auto;
    }
    body :is(#appvue, .modal, .table-popup) .row > div:has(> button[name="action"][value="draft"]):has(> button[name="action"][value="confirmed"]) {
        flex: 1 1 0%;
        width: 0;
        min-width: 0;
    }
}

@media screen {
    body #appvue form.erp-filter-toolbar { display: flex; flex-wrap: nowrap; align-items: flex-end; gap: 10px; overflow-x: auto; padding: 2px 2px 8px; }
    body #appvue .erp-filter-toolbar > .erp-filter-row { display: contents; }
    body #appvue .erp-filter-toolbar .erp-filter-cell { flex: 1 0 125px; width: auto; max-width: none; min-width: 125px; padding: 0; margin: 0; }
    body #appvue .erp-filter-toolbar .erp-filter-cell .form-group { margin: 0 !important; }
    body #appvue .erp-filter-toolbar .erp-filter-actions { flex: 0 0 auto; min-width: 0; }
    body #appvue .erp-filter-toolbar .erp-filter-actions .btn { min-height: 30px; height: 30px; white-space: nowrap; padding: 4px 10px; }
    body #appvue .erp-filter-toolbar .erp-filter-actions label { display: none; }
    body .btn .erp-action-icon { display: inline-flex !important; width: 16px; height: 16px; align-items: center; vertical-align: middle; flex: 0 0 16px; }
    body .btn .erp-action-icon::before { content: none !important; }
    body .btn .erp-action-icon svg { width: 16px; height: 16px; }
}

/* Choices reserves 100px for its selection hint by default, squeezing labels. */
@media screen {
    body .choices__list--dropdown,
    body .choices__list[aria-expanded] {
        box-sizing: border-box;
        border: 1px solid #cce2e6;
        border-radius: 8px;
        background: #FFFFFF;
        color: #305b63;
        box-shadow: 0 5px 16px rgba(34, 106, 121,.10);
        word-break: normal;
    }
    body .choices__list--dropdown .choices__item--selectable,
    body .choices__list[aria-expanded] .choices__item--selectable {
        box-sizing: border-box;
        width: 100%;
        padding: 8px 12px !important;
        font-size: 13px;
        line-height: 1.5;
        white-space: normal;
        word-break: normal;
        overflow-wrap: break-word;
    }
    body .choices__list--dropdown .choices__item--selectable::after,
    body .choices__list[aria-expanded] .choices__item--selectable::after { display: none !important; }
    body .choices__list--dropdown .choices__item--selectable.is-highlighted,
    body .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
        background: #e5f5f8 !important;
        color: #007f96 !important;
    }
    body .choices[data-type*="select-one"] .choices__input {
        box-sizing: border-box;
        width: 100%;
        padding: 8px 12px;
        font-size: 13px;
        line-height: 1.5;
        background: #FFFFFF;
        color: #305b63;
        border-bottom-color: #dbeaed;
    }
    body .choices__list--single { padding: 0 22px 0 0; }
    body .choices__list--single .choices__item { word-break: normal; overflow-wrap: break-word; }
    body .select2-results__option { font-size: 13px; line-height: 1.5; white-space: normal; word-break: normal; overflow-wrap: break-word; padding: 8px 12px; }
    body .select2-container--default .select2-results__option--highlighted[aria-selected] { background: #e5f5f8; color: #007f96; }
}

/* Align the selected Choices value, not just the dropdown options. */
@media screen {
    body :is(#appvue, .modal, .auth-wrapper) .choices[data-type*="select-one"] .choices__inner {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        width: 100%;
        min-height: 30px !important;
        height: auto !important;
        padding: 4px 32px 4px 10px !important;
        border: 1px solid #CED4DA;
        border-radius: 7px;
        background: #FFFFFF;
    }
    body .choices[data-type*="select-one"] .choices__list--single {
        display: block;
        box-sizing: border-box;
        width: 100%;
        min-width: 0;
        padding: 0 !important;
        margin: 0;
    }
    body .choices[data-type*="select-one"] .choices__list--single .choices__item {
        padding: 0;
        margin: 0;
        font-size: 13px;
        line-height: 20px;
        white-space: normal;
        word-break: normal;
        overflow-wrap: break-word;
    }
    body :is(#appvue, .modal, .auth-wrapper) .choices[data-type*="select-one"].is-focused .choices__inner,
    body :is(#appvue, .modal, .auth-wrapper) .choices[data-type*="select-one"].is-open .choices__inner {
        border-width: 1px;
        border-color: #71aeba;
        box-shadow: 0 0 0 2px rgba(113, 174, 186,.12);
    }
    body .choices[data-type*="select-one"]::after { right: 12px; }
    body .choices[data-type*="select-one"]:has(.choices__button) .choices__inner { padding-right: 52px !important; }
}

/* Product picker: use the dialog width rather than viewport Bootstrap columns. */
#product_service:has(.product-picker-filters){container-type:inline-size;width:100%}
#product_service .product-picker-filters{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr) auto;align-items:end;gap:12px;width:100%}
#product_service .product-picker-field{min-width:0;width:auto;margin:0}
#product_service .product-picker-field .btn-box{width:100%;min-width:0}
#product_service .product-picker-field .form-label{display:block;margin:0 0 6px;white-space:normal;line-height:1.5}
#product_service .product-picker-field :is(.form-control,.form-select,.choices,.select2-container){width:100%!important;min-width:0;max-width:100%;margin-bottom:0}
#product_service .product-picker-field select{padding-right:30px;text-overflow:ellipsis}
#product_service .product-picker-actions{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;margin:0;padding:0}
#product_service .product-picker-actions .btn{display:inline-flex;align-items:center;justify-content:center;flex:0 0 36px;width:36px;height:36px;margin:0!important;padding:0!important}
@container(max-width:760px){
 #product_service .product-picker-filters{grid-template-columns:repeat(2,minmax(0,1fr))}
 #product_service .product-picker-keyword{grid-column:1/-1}
 #product_service .product-picker-actions{grid-column:1/-1;justify-content:flex-end}
}
@container(max-width:420px){#product_service .product-picker-filters{grid-template-columns:minmax(0,1fr)}}

/* Bill create forms: bounded controls in two responsive summary columns. */
@media screen {
 body #appvue .bill-form-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
 body #appvue .bill-form-summary > div { min-width: 0; display: grid; gap: 20px; }
 body #appvue .bill-form-summary .gb-col { display: grid; gap: 14px; }
 body #appvue .bill-form-summary .gb-col > .mb-2 { margin-bottom: 0 !important; }
 body #appvue .bill-form-summary .gb-total-grid-2 { display: block; }
 body #appvue .bill-form-summary .gb-total-grid-2 > .row { display: grid; gap: 14px; margin: 0; }
 body #appvue .bill-form-summary .gb-field { grid-template-columns: 130px minmax(0, 280px); gap: 8px 16px; padding: 0; width: 100%; margin: 0; }
 body #appvue .bill-form-summary .gb-field > .form-label { margin: 0; line-height: 1.5; }
 body #appvue .bill-form-summary .gb-inline-row { display: grid; grid-template-columns: 130px minmax(0, 280px); gap: 16px; }
 body #appvue .bill-form-summary .gb-inline-row .form-control { width: 100% !important; }
 body #appvue .bill-form-summary .vat-row:has(.vat-sep) { display: grid; grid-template-columns: minmax(64px, .65fr) auto minmax(100px, 1fr); gap: 8px; }
 body #appvue .bill-form-summary .gb-inline > .form-control { width: 100% !important; }
 body #appvue .bill-form-summary .vat-sep { margin: 0; }
 body #appvue .bill-form-summary #deposit { flex: 1 1 0; width: 0; }
 body #appvue .bill-form-summary #select-deposits-btn { flex-shrink: 0; white-space: nowrap; }
 body #appvue .bill-form-summary #selected-deposits-summary:empty,
 body #appvue .bill-form-summary .gb-field > label:has(+ #selected-deposits-summary) { display: none; }
 body #appvue .bill-form-summary #selected-deposits-summary { grid-column: 2; }
 body #appvue .bill-form-summary .erp-tax-flow > .row { --bs-gutter-x: 16px; --bs-gutter-y: 14px; }
 @media (max-width: 759.98px) {
  body #appvue .bill-form-summary { grid-template-columns: minmax(0, 1fr); }
 }
 @container (max-width: 940px) {
  body #appvue .bill-form-summary .gb-field,
  body #appvue .bill-form-summary .gb-inline-row { grid-template-columns: minmax(0, 280px); gap: 6px; }
  body #appvue .bill-form-summary #selected-deposits-summary { grid-column: 1; }
 }
 @media (max-width: 575.98px) {
  body #appvue .bill-form-summary { margin: 12px !important; gap: 24px; }
  body #appvue .bill-form-summary .gb-field,
  body #appvue .bill-form-summary .gb-inline-row { grid-template-columns: minmax(0, 280px); gap: 6px; }
  body #appvue .bill-form-summary #selected-deposits-summary { grid-column: 1; }
 }
}