/* ChangeProductPrice owns its composition; the shared Kendo widgets keep their behavior. */
.change-price-page { min-width: 0; }
.change-price-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.change-price-header h1 { margin: 0; font-size: 24px; font-weight: 600; line-height: 1.35; letter-spacing: -.6px; }
.change-price-header p { margin: 6px 0 0; color: var(--mkp-muted-foreground); line-height: 1.5; }
.change-price-header > .btn, .change-price-header > div:last-child > .btn { flex-shrink: 0; white-space: nowrap; }
.change-price-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 10px; font-size: 13px; }
.change-price-card { border: 1px solid var(--mkp-border); border-radius: var(--mkp-radius-lg); box-shadow: var(--mkp-shadow); min-width: 0; }
.change-price-card > .card-body { padding: 20px; }
.change-price-section-heading { padding: 20px; }
.change-price-section-heading h2 { margin: 0; font-size: 16px; line-height: 1.5; font-weight: 600; letter-spacing: -.2px; }
.change-price-section-heading p, .change-price-modal-hint { margin: 4px 0 0; color: var(--mkp-muted-foreground); line-height: 1.5; }
.change-price-divider { border-top: 1px solid var(--mkp-border); margin-top: 8px; }
.change-price-create > .card, .change-price-create > .change-price-header { max-width: 800px; }
.change-price-status { display: inline-flex; align-items: center; min-height: 28px; margin-top: 4px; border: 1px solid var(--mkp-border); padding: 4px 10px; font-weight: 500; }
.change-price-page .row > *, #productModal .change-price-filters > * { min-width: 0; }
.change-price-page .flex-fill { min-width: 0; }
.change-price-grid { min-width: 0; }
/* Leave the product name flexible, with readable fixed widths for working codes
   and money. Both split tables share a minimum; only Kendo's viewport scrolls. */
.change-price-page #gridProducts :is(.k-grid-table, .k-grid-header-table) { min-width: 980px; }
#productModal #gridProductsSearch .k-grid-table { min-width: 740px; }
.change-price-page #Grid :is(.k-grid-table, .k-grid-header-table) { min-width: 960px; }
/* The shared fallback reserves 200px for every unspecified column. Here the
   only unspecified column is the name, which must take the remaining space.
   A user-resized column acquires an inline width and is left untouched. */
.change-price-page :is(#Grid, #gridProducts) :is(.k-grid-header-table, .k-grid-table) > colgroup > col:not([style*="width"]) { width: auto; }
.change-price-page #gridProducts td:nth-child(-n+2),
#productModal #gridProductsSearch td:nth-child(-n+2) { white-space: nowrap; overflow-wrap: normal; word-break: normal; font-variant-numeric: tabular-nums; }
.change-price-page #gridProducts .k-column-title,
#productModal #gridProductsSearch .k-column-title,
.change-price-page #Grid .k-column-title { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: normal; word-break: normal; }
.change-price-page #gridProducts td:nth-last-child(-n+3),
#productModal #gridProductsSearch td:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
#productModal .change-price-modal-hint { margin: 0 0 20px; }
#productModal .change-price-filters .form-label { display: block; }
#productModal .change-price-filters .select2-container { width: 100% !important; }
.change-price-empty { padding: 24px 16px; text-align: center; white-space: normal; }
.change-price-empty strong { display: block; font-size: 14px; font-weight: 600; color: var(--mkp-foreground); }
.change-price-empty p { margin: 6px 0 0; color: var(--mkp-muted-foreground); }
/* Keep the approved heading / summary / products hierarchy, but give the
   working table the first fold. Read-only controls retain their form names. */
.change-price-edit .change-price-header { margin-bottom: 8px; }
.change-price-edit .change-price-back { margin-bottom: 4px; }
.change-price-edit .change-price-header p { margin-top: 2px; }
.change-price-summary > .change-price-section-heading,
.change-price-products > .change-price-section-heading,
.change-price-index .change-price-section-heading { padding: 12px 16px; }
.change-price-summary > .change-price-section-heading,
.change-price-products > .change-price-section-heading { padding-block: 8px; }
.change-price-summary > .card-body { padding: 0 16px 8px; }
.change-price-summary-fields { display: grid; grid-template-columns: 100px minmax(240px, 2fr) 65px minmax(110px, 1fr) 100px 90px; gap: 12px 16px; align-items: start; }
.change-price-summary-fields > div { min-width: 0; }
.change-price-summary-fields .form-label { margin-bottom: 4px; color: var(--mkp-muted-foreground); }
.change-price-summary-fields .form-control[readonly] { min-height: 26px; height: 26px; padding: 2px 0; border-color: transparent; border-radius: 0; background: transparent; box-shadow: none; }
.change-price-summary-fields .form-control[readonly]:focus { border-color: var(--mkp-ring-color); box-shadow: var(--mkp-ring); }
.change-price-summary-fields .change-price-status { margin: 0; min-height: 26px; padding: 3px 8px; }
.change-price-summary-fields:has(#btnUpdatePrices) { grid-template-columns: 100px minmax(240px, 2fr) 65px minmax(110px, 1fr); }
.change-price-summary-fields:has(#btnUpdatePrices) .change-price-summary-value { grid-column: span 3; max-width: 420px; }
.change-price-products > .card-body { padding: 0 8px 8px; }
.change-price-products #gridProducts .k-grid-table > tbody > tr > td { padding-block: 5px; }
.change-price-index .change-price-card > .card-body { padding: 0 12px 12px; }
.change-price-index #Grid .k-grid-table > tbody > tr > td { padding: 4px 8px; }
.change-price-index #Grid th { color: var(--mkp-foreground); }
.change-price-index #Grid td:nth-child(4) .badge { padding: 0; border: 0; border-radius: 0; font-size: 14px; font-weight: 400; color: var(--mkp-foreground) !important; background: transparent !important; }
.change-price-index #Grid td:nth-child(7) .badge { font-size: 13px; gap: 5px; }
.change-price-index #Grid td:nth-child(7) .badge::before { font-family: FontAwesome; font-weight: normal; }
.change-price-index #Grid td:nth-child(7) .badge[data-value="0"]::before { content: "\f017"; }
.change-price-index #Grid td:nth-child(7) .badge[data-value="1"]::before { content: "\f058"; }
.change-price-index #Grid td:nth-child(7) .badge[data-value="2"]::before { content: "\f0e2"; }
@media (max-width: 1199.98px) {
    .change-price-summary-fields,
    .change-price-summary-fields:has(#btnUpdatePrices) { grid-template-columns: 100px minmax(180px, 1fr) minmax(100px, 1fr); }
    .change-price-summary-fields:has(#btnUpdatePrices) .change-price-summary-value { grid-column: span 2; }
}
@media (max-width: 767.98px) {
    .change-price-header { flex-wrap: wrap; align-items: flex-start; gap: 16px; }
    .change-price-header h1 { font-size: 22px; }
    .change-price-card > .card-body, .change-price-section-heading { padding: 16px; }
    #productModal .modal-body { padding: 16px; }
    #productModal #btnProductsSearch { width: 100%; }
    .change-price-summary-fields,
    .change-price-summary-fields:has(#btnUpdatePrices) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .change-price-summary-name { grid-column: 1 / -1; grid-row: 1; }
    .change-price-summary-fields:has(#btnUpdatePrices) .change-price-summary-value { grid-column: 1 / -1; }
    .change-price-products > .card-body { padding: 0 8px 8px; }
}