/*
 * gb-sales.css - the Sales module's page styles.
 *
 * WHY A GLOBAL STYLESHEET AND NOT .razor.css
 * These rules came out of <style> blocks embedded in four Sales components. They could not
 * simply become CSS isolation files: most of them reach into markup this component does NOT
 * render - BlazoredTypeahead's .blazored-typeahead__* internals, Bootstrap's .input-group,
 * and (since the grid moved into SalesInvoicesGrid) the grid's own <table>. Isolation tags
 * only the elements a component renders itself, so every one of those rules would have
 * silently stopped applying. Same call, and same reason, as gb-gridview.css.
 *
 * WHAT CHANGED IN THE MOVE
 * A <style> block inside a component is global, but only while that component is rendered.
 * NewInv and SalesReturns each defined .tp-invalid-typeahead and .tp-validation-text, with
 * DIFFERENT values - NewInv draws a 2px red underline, SalesReturns explicitly removes it.
 * They never collided only because the two pages are different routes. In one shared file
 * they would, and the loser would change appearance.
 *
 * So each page's copy is scoped to the root class that page already carries
 * (.sales-invoice-page / .sales-returns-page). Both keep exactly the rule they had. The
 * remaining selectors were already prefixed (.sales-returns-form, .invoice-products-*,
 * [data-hrm-required-validation-scope]) and are unchanged.
 *
 * Raw hexes became --kt-* tokens so these follow the theme into dark mode, which a literal
 * #fff cannot: #ff5f73 -> --kt-danger, #0d6efd -> --kt-primary (the typeahead's selected-item
 * highlight was Bootstrap blue on a gold-primary theme), #fff -> --kt-dropdown-bg /
 * --kt-primary-inverse. These are visible changes, listed here deliberately.
 *
 * NOT MOVED: QuickSalesInvoicePaymentsModal keeps its <style>. Its .bm-overlay rule restyles
 * Blazored.Modal's backdrop, which is rendered outside the component and so cannot be scoped
 * by an ancestor; global-only-while-open is the behaviour it wants.
 *
 * The !important declarations below are inherited verbatim. They are not endorsed - the ban
 * in Docs/gb-design-system.md applies to gb-* COMPONENTS. Unpicking them here means
 * re-deriving why each one was added, which is its own task.
 */

/* ---- Sales invoices (NewInv) + its extracted grid ---- */


/* Required/Invalid for BlazoredTypeahead wrapper */
.sales-invoice-page .tp-invalid-typeahead .blazored-typeahead__input,
.sales-invoice-page .tp-invalid-typeahead .blazored-typeahead__input input {
    border-color: var(--kt-input-border-color, #e1e3ea) !important;
    border-bottom-color: var(--kt-danger) !important;
    border-bottom-width: 2px !important;
    box-shadow: none !important;
    border-radius: 0.475rem;
}

.sales-invoice-page .tp-validation-text {
    color: var(--kt-danger);
    font-size: 0.85rem;
    margin-top: 0.25rem;
}

/* Column visibility optimization */
.sales-invoice-page .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* The invoice FORM's tables - the product lines, the fees, the payment types. Excluding
   .gb-grid-table keeps this off the LIST grid, which now wears the generated skin: the skin
   gives grid cells 12px/20px and this rule's !important was overriding it back to 0.75rem/0.5rem,
   so the list looked tighter than every generated page beside it. */
.sales-invoice-page .table:not(.gb-grid-table) th,
.sales-invoice-page .table:not(.gb-grid-table) td {
    vertical-align: middle;
    padding: 0.75rem 0.5rem !important;
}

/* The payment pill's SHAPE now belongs to GbPill (Shared/Components/Design/GbPill.razor.css),
   which carries the generated pages' .gm-state geometry - 20px pill, 11.5px/800, tight padding,
   and a state dot. This rule predates that: it gave the badge a shape because the component had
   none, and its !important font-size and padding beat the component's own stylesheet, so the
   pill rendered as a wide flat rectangle next to an otherwise generated-looking grid.

   min-width: 80px went with it. It kept the status column from resizing as the text changed;
   the generated grids let the chip size to its content, which is what the column does now. */
.sales-invoice-page .payment-status-badge {
    white-space: nowrap;
}

@media (max-width: 991.98px) {
    /* The closed off-canvas menus must not extend the invoice's document viewport. */
    html:has(.sales-invoice-page), body:has(.sales-invoice-page) { overflow-x: clip; }
    .sales-invoice-page .card-body { padding-left: 12px !important; padding-right: 12px !important; }
    .sales-invoice-page .accordion-body { padding: 12px; }
    .sales-invoice-page .row > * { min-width: 0; }
    .sales-invoice-page .form-heading { min-width: 0; padding-right: 0 !important; }
    .sales-invoice-page .form-heading > div { flex-wrap: wrap; gap: 8px !important; }
}

/* ---- Sales returns ---- */


.sales-returns-page .tp-invalid-typeahead .blazored-typeahead,
.sales-returns-page .tp-invalid-typeahead .blazored-typeahead__input,
.sales-returns-page .tp-invalid-typeahead .blazored-typeahead__input input {
    border-color: var(--kt-input-border-color, #e1e3ea) !important;
    border-bottom-color: transparent !important;
    border-bottom-width: 1px !important;
    box-shadow: none !important;
}

.sales-returns-page .tp-validation-text {
    color: var(--kt-danger);
    font-size: 0.85rem;
    margin-top: 0.25rem;
}

.sales-returns-form,
.sales-returns-form .tab-content,
.sales-returns-form .tab-pane,
.sales-returns-form .form-container,
.sales-returns-form .row,
.sales-returns-form .row > [class^="col-"],
.sales-returns-form .row > [class*=" col-"],
.sales-returns-form .d-flex,
.sales-returns-form .flex-grow-1 {
    overflow: visible !important;
}

.sales-returns-form .row {
    position: relative;
}

.sales-returns-form .row > [class^="col-"],
.sales-returns-form .row > [class*=" col-"] {
    position: relative;
    z-index: auto;
}

/* The z-index ladder below keeps each typeahead's dropdown above the fields under it. These
   selectors were a direct-child chain (`.form-container > .row > [col]`): inserting the
   generated skin's .gm-group card between the container and the row unhooks every one of them,
   and the dropdowns go back to being clipped by the next field. Descendant combinator instead,
   so the ladder survives a wrapper. */
.sales-returns-form #primarydata .form-container .row > [class^="col-"],
.sales-returns-form #primarydata .form-container .row > [class*=" col-"] {
    position: relative;
    z-index: 10;
}

.sales-returns-form #primarydata .form-container .row > [class^="col-"]:nth-child(1),
.sales-returns-form #primarydata .form-container .row > [class*=" col-"]:nth-child(1) {
    z-index: 90;
}

.sales-returns-form #primarydata .form-container .row > [class^="col-"]:nth-child(2),
.sales-returns-form #primarydata .form-container .row > [class*=" col-"]:nth-child(2) {
    z-index: 100;
}

.sales-returns-form #primarydata .form-container .row > [class^="col-"]:nth-child(3),
.sales-returns-form #primarydata .form-container .row > [class*=" col-"]:nth-child(3) {
    z-index: 80;
}

.sales-returns-form #primarydata .form-container .row > [class^="col-"]:nth-child(4),
.sales-returns-form #primarydata .form-container .row > [class*=" col-"]:nth-child(4) {
    z-index: 70;
}

.sales-returns-form #primarydata .form-container .row > [class^="col-"]:nth-child(5),
.sales-returns-form #primarydata .form-container .row > [class*=" col-"]:nth-child(5) {
    z-index: 60;
}

.sales-returns-form #primarydata .form-container .row > [class^="col-"]:nth-child(6),
.sales-returns-form #primarydata .form-container .row > [class*=" col-"]:nth-child(6) {
    z-index: 50;
}

.sales-returns-form #primarydata .form-container .row > [class^="col-"]:nth-child(7),
.sales-returns-form #primarydata .form-container .row > [class*=" col-"]:nth-child(7) {
    z-index: 40;
}

.sales-returns-form #primarydata .form-container .row > [class^="col-"]:nth-child(8),
.sales-returns-form #primarydata .form-container .row > [class*=" col-"]:nth-child(8) {
    z-index: 30;
}

.sales-returns-form .row > [class^="col-"]:has(.blazored-typeahead:focus-within),
.sales-returns-form .row > [class*=" col-"]:has(.blazored-typeahead:focus-within) {
    z-index: 16000;
}

.sales-returns-form .row > [class^="col-"]:has(.blazored-typeahead:focus-within) > .d-flex,
.sales-returns-form .row > [class*=" col-"]:has(.blazored-typeahead:focus-within) > .d-flex,
.sales-returns-form .row > [class^="col-"]:has(.blazored-typeahead:focus-within) .flex-grow-1,
.sales-returns-form .row > [class*=" col-"]:has(.blazored-typeahead:focus-within) .flex-grow-1 {
    position: relative;
    z-index: 1;
}

.sales-returns-form .input-group:has(> .blazored-typeahead) {
    align-items: stretch !important;
    overflow: visible !important;
    position: relative;
    width: 100%;
    z-index: 20;
}

.sales-returns-form .input-group:has(> .blazored-typeahead):focus-within {
    z-index: 13000;
}

.sales-returns-form .input-group > .blazored-typeahead {
    flex: 1 1 auto !important;
    width: 1% !important;
    min-width: 0 !important;
    position: relative !important;
    z-index: 1;
}

.sales-returns-form .input-group > .blazored-typeahead:focus-within {
    z-index: 14000;
}

.sales-returns-form .input-group > .blazored-typeahead .blazored-typeahead__controls,
.sales-returns-form .input-group > .blazored-typeahead .blazored-typeahead__input,
.sales-returns-form .input-group > .blazored-typeahead .blazored-typeahead__input input,
.sales-returns-form .input-group > .blazored-typeahead .blazored-typeahead__input-mask,
.sales-returns-form .input-group > .blazored-typeahead .blazored-typeahead__input-mask-wrapper {
    width: 100% !important;
    min-width: 0 !important;
}

.sales-returns-form .input-group > .blazored-typeahead .blazored-typeahead__results {
    position: absolute !important;
    inset-inline: 0 !important;
    top: calc(100% + 2px) !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    z-index: 15000 !important;
    direction: rtl;
}

.sales-returns-form .input-group > .blazored-typeahead .blazored-typeahead__results,
.sales-returns-form .input-group > .blazored-typeahead .blazored-typeahead__result {
    background-color: var(--kt-dropdown-bg, #fff) !important;
}

.sales-returns-form .input-group > .blazored-typeahead .blazored-typeahead__active-item,
.sales-returns-form .input-group > .blazored-typeahead .blazored-typeahead__selected-item-highlighted,
.sales-returns-form .input-group > .blazored-typeahead .blazored-typeahead__result-selected,
.sales-returns-form .input-group > .blazored-typeahead .blazored-typeahead__result-hover,
.sales-returns-form .input-group > .blazored-typeahead .blazored-typeahead__result:hover,
.sales-returns-form .input-group > .blazored-typeahead .blazored-typeahead__result:focus {
    background-color: var(--kt-primary) !important;
    border-color: var(--kt-primary) !important;
    color: var(--kt-primary-inverse, #fff) !important;
}
@media (max-width: 991.98px) {
    html:has(.sales-returns-page), body:has(.sales-returns-page) { overflow-x: clip; }
    .sales-returns-page > .card > .card-body { padding-left: 12px !important; padding-right: 12px !important; }
    .sales-returns-page .form-heading { gap: 8px; }
}
@media (max-width: 575.98px) {
    .sales-returns-page > .card { padding-inline: 0 !important; }
    .sales-returns-form .form-container { padding: 8px !important; }
    .sales-returns-form .form-container .row { padding-inline: 0 !important; }
    .sales-returns-page .actions, .sales-returns-page .form-heading { min-width: 0; width: 100%; }
}

/* ---- Invoice line editor (PackageSales) ---- */


.invoice-products-wrap {
    overflow-x: auto;
}

/* The floor matches what the columns actually declare: 300 + 100 + 150 + 100 + 100 + 75 = 825
   (see the th min-w-*/w-* classes in Sales/PackageSales.razor). It was 960, which is 135px more
   than the table needs and more than the invoice column can give it - so the table always
   scrolled horizontally inside its card, and in RTL the overflow fell on the LEFT, hiding
   الإجمالي and the row actions behind a scrollbar nobody looks for. */
.invoice-products-table {
    min-width: 825px;
    table-layout: fixed;
}

.invoice-products-table th,
.invoice-products-table td {
    vertical-align: top;
}

.invoice-products-table .invoice-product-cell {
    padding-top: .75rem;
}

.invoice-products-table .form-control,
.invoice-products-table .blazored-typeahead {
    min-height: 43px;
}

.invoice-line-help {
    min-height: 32px;
    max-width: 190px;
}
@media (max-width: 991.98px) {
    .invoice-products-wrap { overflow: visible; }
    .invoice-products-table { display: block; min-width: 0; width: 100%; }
    .invoice-products-table thead { display: none; }
    .invoice-products-table tbody, .invoice-products-table tfoot { display: block; }
    .invoice-products-table tbody tr { display: block; border-bottom: 1px solid var(--kt-border-color, #eee); padding-bottom: 12px; }
    .invoice-products-table tbody td { display: block; width: 100% !important; min-width: 0 !important; padding-top: 8px !important; text-align: start !important; }
    .invoice-products-table tbody td::before { display: block; margin-bottom: 6px; color: var(--kt-text-muted, #777); }
    .invoice-products-table tbody td:nth-child(1)::before { content: "الصنف"; }
    .invoice-products-table tbody td:nth-child(2)::before { content: "الكمية"; }
    .invoice-products-table tbody td:nth-child(3)::before { content: "السعر شامل الضريبة"; }
    .invoice-products-table tbody td:nth-child(4)::before { content: "مبلغ الخصم"; }
    .invoice-products-table tbody td:nth-child(5)::before { content: "الإجمالي"; }
    .invoice-products-table .invoice-line-help { max-width: none; min-height: 0; }
    .invoice-products-table tfoot tr { display: flex; flex-wrap: wrap; justify-content: space-between; }
    .invoice-products-table tfoot th:empty { display: none; }
    .invoice-products-table tfoot th { max-width: 100%; white-space: normal !important; }
}

/* ---- Payment method picker ---- */


[data-hrm-required-validation-scope="sales-payment-method"] .gb-hrm-required-invalid {
    border: 1px solid #f1416c !important;
    border-radius: 4px !important;
    box-shadow: none !important;
}

[data-hrm-required-validation-scope="sales-payment-method"] .gb-hrm-required-underline {
    display: none !important;
}

[data-hrm-required-validation-scope="sales-payment-method"] .gb-hrm-required-message {
    display: block;
    margin-top: 4px;
}

[data-hrm-required-validation-scope="sales-payment-method"] .input-group:has(.form-control.gb-hrm-required-invalid) {
    border: 1px solid #f1416c;
    border-radius: 4px;
    overflow: hidden;
}

[data-hrm-required-validation-scope="sales-payment-method"] .input-group:has(.form-control.gb-hrm-required-invalid) .input-group-text,
[data-hrm-required-validation-scope="sales-payment-method"] .input-group:has(.form-control.gb-hrm-required-invalid) .form-control.gb-hrm-required-invalid {
    border-color: transparent !important;
    border-radius: 0 !important;
}

[data-hrm-required-validation-scope="sales-payment-method"] .gb-hrm-save-required-message {
    display: none !important;
}

/* The payment row currently open for editing. Was an inline style="background-color:#fff3cd"
   on the <tr> - a literal light yellow, which is invisible against a dark surface. The warning
   token carries the same "this one is being worked on" reading and inverts with the theme. */
.gb-payment-methods tbody tr.gb-row-editing > td {
    background-color: var(--kt-warning-light);
}

.gb-payment-methods tbody tr.cursor-pointer {
    cursor: pointer;
}

/* ---- Sales reservations (Request/SalesInvoices) ----
   Lifted out of the <style> block in Request/SalesInvoices.razor. Same reasoning as the blocks
   above: the selectors reach into BlazoredTypeahead's internals and Bootstrap's .input-group,
   which CSS isolation cannot scope.

   Everything here was already prefixed .sales-reservations-form / .sales-reservations-grid
   except .custom-is-invalid, which was global; it is scoped to the form now so it cannot collide
   with another page defining the same class. #dc3545 became --kt-danger so it follows the theme
   into dark mode. */

/* حقول الإدخال و Typeahead */
.sales-reservations-form .custom-is-invalid input.form-control,
.sales-reservations-form .custom-is-invalid .blazored-typeahead__input {
    border-color: var(--kt-danger) !important;
}

.sales-reservations-form .input-group:has(> .blazored-typeahead) {
    align-items: stretch !important;
    overflow: visible !important;
    position: relative;
    width: 100%;
    z-index: 1;
}

.sales-reservations-form .input-group:has(> .blazored-typeahead):focus-within {
    z-index: 3000;
}

.sales-reservations-form .input-group > .blazored-typeahead {
    flex: 1 1 auto !important;
    width: 1% !important;
    min-width: 0 !important;
    position: relative !important;
    z-index: 1;
}

.sales-reservations-form .input-group > .blazored-typeahead:focus-within {
    z-index: 4000;
}

.sales-reservations-form .input-group > .blazored-typeahead .blazored-typeahead__controls,
.sales-reservations-form .input-group > .blazored-typeahead .blazored-typeahead__input,
.sales-reservations-form .input-group > .blazored-typeahead .blazored-typeahead__input input,
.sales-reservations-form .input-group > .blazored-typeahead .blazored-typeahead__input-mask,
.sales-reservations-form .input-group > .blazored-typeahead .blazored-typeahead__input-mask-wrapper {
    width: 100% !important;
    min-width: 0 !important;
}

.sales-reservations-form .input-group > .blazored-typeahead .blazored-typeahead__results {
    position: absolute !important;
    inset-inline: 0 !important;
    top: calc(100% + 2px) !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    max-height: 16rem !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    z-index: 5000 !important;
    direction: rtl;
    text-align: start;
    border: 1px solid var(--kt-border-color, #e1e3ea) !important;
    border-radius: .475rem !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .12) !important;
    padding: .35rem 0 !important;
}

.sales-reservations-form .input-group > .blazored-typeahead .blazored-typeahead__results,
.sales-reservations-form .input-group > .blazored-typeahead .blazored-typeahead__result {
    background-color: #fff !important;
}

.sales-reservations-form .input-group > .blazored-typeahead .blazored-typeahead__result,
.sales-reservations-form .input-group > .blazored-typeahead .blazored-typeahead__notfound,
.sales-reservations-form .input-group > .blazored-typeahead .blazored-typeahead__results-header,
.sales-reservations-form .input-group > .blazored-typeahead .blazored-typeahead__results-footer {
    margin: 0 .25rem !important;
    padding: .55rem .85rem !important;
    color: var(--kt-text-gray-700, #3f4254) !important;
    border: 0 !important;
    border-radius: .35rem;
    direction: rtl;
    text-align: start;
}

.sales-reservations-form .input-group > .blazored-typeahead .blazored-typeahead__result {
    cursor: pointer;
    user-select: none;
}

.sales-reservations-form .input-group > .blazored-typeahead .blazored-typeahead__active-item,
.sales-reservations-form .input-group > .blazored-typeahead .blazored-typeahead__selected-item-highlighted,
.sales-reservations-form .input-group > .blazored-typeahead .blazored-typeahead__result-selected,
.sales-reservations-form .input-group > .blazored-typeahead .blazored-typeahead__result-hover,
.sales-reservations-form .input-group > .blazored-typeahead .blazored-typeahead__result:hover,
.sales-reservations-form .input-group > .blazored-typeahead .blazored-typeahead__result:focus {
    background-color: var(--kt-primary, #0d6efd) !important;
    border-color: var(--kt-primary, #0d6efd) !important;
    color: #fff !important;
}

.sales-reservations-grid {
    clear: both;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

    .sales-reservations-grid .table-responsive {
        width: 100%;
        max-width: 100%;
        overflow-x: auto !important;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        padding-bottom: .5rem;
    }

    .sales-reservations-grid table {
        width: max-content;
        min-width: 1780px;
        margin-bottom: .25rem;
    }

    .sales-reservations-grid th,
    .sales-reservations-grid td,
    .sales-reservations-grid td p {
        white-space: nowrap;
    }

    .sales-reservations-grid .sticky-tableData {
        position: sticky;
        left: 0;
        z-index: 2;
        min-width: 250px;
        box-shadow: 8px 0 12px rgba(0, 0, 0, .04);
    }

/* The ticket-notch edge on the payment panel.

   style.bundle draws it with two hardcoded colours:

     .customZigzagCard:after { background-image:
         linear-gradient(324deg, rgb(245 248 250) 16px, #ffffff 0),
         linear-gradient(264deg, transparent 16px, #ffffff 0); }

   so on a dark page the card went dark and its notched edge stayed white - two bright strips
   across the invoice form. The bundle is generated and must not be hand-edited, so the dark
   values are re-pointed here at the same tokens the card itself uses. The class is shared with
   WorkFlow/NewInvoice, which gets the same fix for free. */
[data-theme="dark"] .customZigzagCard::after {
    background-image:
        linear-gradient(324deg, var(--kt-body-bg, #1e1e2d) 16px, var(--kt-card-bg, #1e1e2d) 0),
        linear-gradient(264deg, transparent 16px, var(--kt-card-bg, #1e1e2d) 0);
}