/*
 * ecommerce-pro admin UI overrides.
 *
 * Loaded globally on every Botble admin page (see EcommerceProServiceProvider
 * ::boot → Assets::addStylesDirectly). Mirrors the visual language used across
 * ecommerce-pro's data-synchronize UI (unified-select, mi-btn, SVG checkbox/radio)
 * and pushes it onto core Botble form controls so both ecosystems render the
 * same way.
 *
 * Everything here is additive and uses !important to win against Bootstrap /
 * Tabler defaults. Frontend theme is NOT affected — the file is enqueued on
 * the admin master layout only.
 *
 * STRUCTURE
 *   0. Tokens                 — CSS custom properties driving colors / sizes
 *   1. Tables                 — selection highlight
 *   2. Form controls          — checkbox, radio, input, select, textarea
 *   3. Dropdowns              — Select2 + .si-platform-select + unified-select
 *                               (three dropdown engines, one visual language)
 *   4. Buttons                — Bootstrap .btn variant remap
 *   5. Layout                 — page gutters
 *   6. Custom widget scoping  — ecommerce-pro-specific wrapper classes
 *   7. Per-page overrides     — body.admin-page-<route-slug>
 *
 * TO UPDATE:
 *   edit this file, then copy to
 *   public/vendor/core/plugins/ecommerce-pro/css/admin-overrides.css
 *   (file-mtime query string on the <link> forces cache refresh).
 */

/* ==========================================================================
 * 0. Tokens — single source of truth for dropdown/form palette
 * ========================================================================== */
:root {
    /* Neutral surface + borders */
    --eco-surface: #fff;
    --eco-border: #dce1e7;
    --eco-border-focus: #97a1ac;
    --eco-divider: #eef1f4;

    /* Text */
    --eco-text: #495569;
    --eco-text-muted: #8e98a6;
    --eco-arrow: #7d8997;

    /* Interaction */
    --eco-hover: #f7f9fb;
    --eco-selected: #f3f6f9;

    /* Accent */
    --eco-accent: #1971c2;
    --eco-accent-bg: rgba(25, 113, 194, 0.08);
    --eco-danger: #e03131;
    --eco-success: #22c55e;

    /* Shape */
    --eco-radius: 8px;
    --eco-radius-sm: 6px;
    --eco-menu-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
    --eco-menu-z: 2000;
}

/* ==========================================================================
 * Selection highlight on admin tables
 * ========================================================================== */
table.table tbody tr.s3-row-selected,
table.dataTable tbody tr.s3-row-selected,
table tbody tr.s3-row-selected,
table.table tbody tr.selected,
table.dataTable tbody tr.selected,
table tbody tr.selected {
    background-color: #F2F3F5 !important;
    background-image: none !important;
    box-shadow:
        inset 3px 0 0 #4468f2,
        inset 0 -1px 0 rgba(255, 255, 255, 0.85) !important;
}

table.table tbody tr.s3-row-selected > td,
table.table tbody tr.s3-row-selected > th,
table.dataTable tbody tr.s3-row-selected > td,
table.dataTable tbody tr.s3-row-selected > th,
table tbody tr.s3-row-selected > td,
table tbody tr.s3-row-selected > th,
table.table tbody tr.selected > td,
table.table tbody tr.selected > th,
table.dataTable tbody tr.selected > td,
table.dataTable tbody tr.selected > th,
table tbody tr.selected > td,
table tbody tr.selected > th {
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    color: #1f2937 !important;
    --bs-table-accent-bg: transparent !important;
    --bs-table-bg-state: transparent !important;
}

table.table tbody tr.s3-row-selected > td a:not(.btn),
table.table tbody tr.s3-row-selected > th a:not(.btn),
table.dataTable tbody tr.s3-row-selected > td a:not(.btn),
table.dataTable tbody tr.s3-row-selected > th a:not(.btn),
table tbody tr.s3-row-selected > td a:not(.btn),
table tbody tr.s3-row-selected > th a:not(.btn),
table.table tbody tr.selected > td a:not(.btn),
table.table tbody tr.selected > th a:not(.btn),
table.dataTable tbody tr.selected > td a:not(.btn),
table.dataTable tbody tr.selected > th a:not(.btn),
table tbody tr.selected > td a:not(.btn),
table tbody tr.selected > th a:not(.btn) {
    color: #1d4ed8 !important;
}

/* ----- Dark-mode variant for selection highlight -----
 * Light mode selection (#F2F3F5 + #1f2937 text) glares on dark cards.
 * Swap to a gray-700 tint (#374151) against the gray-800 card bg, with
 * light text and a lighter link color. Indicator bar stays indigo —
 * it reads fine on both backgrounds. */
[data-bs-theme="dark"] table.table tbody tr.s3-row-selected,
[data-bs-theme="dark"] table.dataTable tbody tr.s3-row-selected,
[data-bs-theme="dark"] table tbody tr.s3-row-selected,
[data-bs-theme="dark"] table.table tbody tr.selected,
[data-bs-theme="dark"] table.dataTable tbody tr.selected,
[data-bs-theme="dark"] table tbody tr.selected {
    background-color: #374151 !important;
    box-shadow:
        inset 3px 0 0 #4468f2,
        inset 0 -1px 0 rgba(0, 0, 0, 0.35) !important;
}

[data-bs-theme="dark"] table.table tbody tr.s3-row-selected > td,
[data-bs-theme="dark"] table.table tbody tr.s3-row-selected > th,
[data-bs-theme="dark"] table.dataTable tbody tr.s3-row-selected > td,
[data-bs-theme="dark"] table.dataTable tbody tr.s3-row-selected > th,
[data-bs-theme="dark"] table tbody tr.s3-row-selected > td,
[data-bs-theme="dark"] table tbody tr.s3-row-selected > th,
[data-bs-theme="dark"] table.table tbody tr.selected > td,
[data-bs-theme="dark"] table.table tbody tr.selected > th,
[data-bs-theme="dark"] table.dataTable tbody tr.selected > td,
[data-bs-theme="dark"] table.dataTable tbody tr.selected > th,
[data-bs-theme="dark"] table tbody tr.selected > td,
[data-bs-theme="dark"] table tbody tr.selected > th {
    color: #f3f4f6 !important;
}

[data-bs-theme="dark"] table.table tbody tr.s3-row-selected > td a:not(.btn),
[data-bs-theme="dark"] table.table tbody tr.s3-row-selected > th a:not(.btn),
[data-bs-theme="dark"] table.dataTable tbody tr.s3-row-selected > td a:not(.btn),
[data-bs-theme="dark"] table.dataTable tbody tr.s3-row-selected > th a:not(.btn),
[data-bs-theme="dark"] table tbody tr.s3-row-selected > td a:not(.btn),
[data-bs-theme="dark"] table tbody tr.s3-row-selected > th a:not(.btn),
[data-bs-theme="dark"] table.table tbody tr.selected > td a:not(.btn),
[data-bs-theme="dark"] table.table tbody tr.selected > th a:not(.btn),
[data-bs-theme="dark"] table.dataTable tbody tr.selected > td a:not(.btn),
[data-bs-theme="dark"] table.dataTable tbody tr.selected > th a:not(.btn),
[data-bs-theme="dark"] table tbody tr.selected > td a:not(.btn),
[data-bs-theme="dark"] table tbody tr.selected > th a:not(.btn) {
    color: #93c5fd !important;
}

/* ==========================================================================
 * Checkbox (SVG-based)
 * ========================================================================== */
input[type=checkbox]:not(.custom-control-input):not(#skip-errors) {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-color: transparent !important;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='20' height='20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.625 2.5A3.125 3.125 0 0 0 2.5 5.625v8.75A3.125 3.125 0 0 0 5.625 17.5h8.75a3.125 3.125 0 0 0 3.125-3.125v-8.75A3.125 3.125 0 0 0 14.375 2.5h-8.75ZM3.75 5.625A1.875 1.875 0 0 1 5.625 3.75h8.75a1.875 1.875 0 0 1 1.875 1.875v8.75a1.875 1.875 0 0 1-1.875 1.875h-8.75a1.875 1.875 0 0 1-1.875-1.875v-8.75Z' fill='%2397A1AC'/%3E%3C/svg%3E") !important;
    background-position: 50% !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    border: 0 !important;
    box-shadow: none !important;
    cursor: pointer !important;
    flex-basis: 20px !important;
    flex-shrink: 0;
    height: 20px !important;
    margin: 0 !important;
    max-width: 20px !important;
    min-width: 20px !important;
    outline: none !important;
    transition: background-color .2s ease !important;
    width: 20px !important;
}

input[type=checkbox]:not(.custom-control-input):not(#skip-errors):checked {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='20' height='20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.625 2.5A3.125 3.125 0 0 0 2.5 5.625v8.75A3.125 3.125 0 0 0 5.625 17.5h8.75a3.125 3.125 0 0 0 3.125-3.125v-8.75A3.125 3.125 0 0 0 14.375 2.5h-8.75ZM3.75 5.625A1.875 1.875 0 0 1 5.625 3.75h8.75a1.875 1.875 0 0 1 1.875 1.875v8.75a1.875 1.875 0 0 1-1.875 1.875h-8.75a1.875 1.875 0 0 1-1.875-1.875v-8.75Zm9.818 2.943a.626.626 0 1 0-.886-.885L8.75 11.616l-1.433-1.434a.626.626 0 1 0-.885.886l1.875 1.875a.625.625 0 0 0 .886 0l4.375-4.375Z' fill='%2397A1AC'/%3E%3C/svg%3E") !important;
}

input[type=checkbox]:not(.custom-control-input):not(#skip-errors):focus,
input[type=checkbox]:not(.custom-control-input):not(#skip-errors):focus-visible {
    box-shadow: none !important;
    outline: none !important;
}

input[type=checkbox]:not(.custom-control-input):not(#skip-errors):disabled {
    cursor: not-allowed !important;
    opacity: .6 !important;
}

/* ==========================================================================
 * Radio (SVG-based)
 * ========================================================================== */
input[type=radio]:not([data-bb-toggle=import-mode-radio]):not(.visually-hidden):not([hidden]) {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-color: transparent !important;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2Zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8Z' fill='%2397A1AC'/%3E%3C/svg%3E") !important;
    background-position: 50% !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    border: 0 !important;
    border-radius: 50% !important;
    box-shadow: none !important;
    cursor: pointer !important;
    flex-shrink: 0;
    height: 20px !important;
    margin: 0 !important;
    width: 20px !important;
}

input[type=radio]:not([data-bb-toggle=import-mode-radio]):not(.visually-hidden):not([hidden]):checked {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2Zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8Z' fill='%2397A1AC'/%3E%3Cpath d='M12 17a5 5 0 1 0 0-10 5 5 0 0 0 0 10Z' fill='%2397A1AC'/%3E%3C/svg%3E") !important;
}

input[type=radio]:not([data-bb-toggle=import-mode-radio]):not(.visually-hidden):not([hidden]):focus,
input[type=radio]:not([data-bb-toggle=import-mode-radio]):not(.visually-hidden):not([hidden]):focus-visible {
    box-shadow: none !important;
    outline: none !important;
}

input[type=radio]:not([data-bb-toggle=import-mode-radio]):not(.visually-hidden):not([hidden]):disabled {
    cursor: not-allowed !important;
    opacity: .6 !important;
}

/* ==========================================================================
 * Text inputs + native selects + textareas (.form-control / .form-select)
 * ========================================================================== */
/* SCOPED to `main` to avoid overriding Tabler's topbar search input
 * (header.navbar uses .input-group-flat with transparent input on dark bg).
 * Restored 2026-04-21 after the unscoped global rule broke topbar look. */
main .form-control:not(.form-control-sm):not([type=color]):not([type=file]):not([type=range]),
main .form-select:not(.form-select-sm),
main textarea.form-control {
    background-color: #fff !important;
    border: 1px solid #dce1e7 !important;
    border-radius: 8px !important;
    color: #495569 !important;
    box-shadow: none !important;
}

main .form-control:not(.form-control-sm):not([type=color]):not([type=file]):not([type=range]):focus,
main .form-control:not(.form-control-sm):not([type=color]):not([type=file]):not([type=range]):focus-visible,
main .form-select:not(.form-select-sm):focus,
main .form-select:not(.form-select-sm):focus-visible,
main textarea.form-control:focus,
main textarea.form-control:focus-visible {
    background-color: #fff !important;
    border-color: #97a1ac !important;
    box-shadow: none !important;
    outline: none !important;
}

main .form-control-sm,
main .form-select-sm {
    border: 1px solid #dce1e7 !important;
    border-radius: 6px !important;
    color: #495569 !important;
    box-shadow: none !important;
}

main .form-control-sm:focus,
main .form-select-sm:focus {
    border-color: #97a1ac !important;
    box-shadow: none !important;
    outline: none !important;
}

main .form-control::placeholder,
main textarea.form-control::placeholder {
    color: #8e98a6 !important;
    opacity: 1 !important;
}

/* ==========================================================================
 * Input groups — restore Tabler/Bootstrap corner & overlap behavior that
 * gets stomped by the blanket `.form-control { border-radius: 8px !important }`
 * above. Without these, prefixes/suffixes ("Lei", addons) render as separate
 * pill + input with overlapping/cut-off borders. Seen on product edit price,
 * cross-sale price, cost-per-item — any field with an input-group currency
 * prefix or keyboard-shortcut suffix.
 * ========================================================================== */
main .input-group > .form-control:not(:first-child):not(:last-child),
.modal .input-group > .form-control:not(:first-child):not(:last-child),
main .input-group > .form-select:not(:first-child):not(:last-child),
.modal .input-group > .form-select:not(:first-child):not(:last-child) {
    border-radius: 0 !important;
}
main .input-group > .form-control:first-child,
.modal .input-group > .form-control:first-child,
main .input-group > .form-select:first-child,
.modal .input-group > .form-select:first-child {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}
main .input-group > .form-control:last-child:not(:first-child),
.modal .input-group > .form-control:last-child:not(:first-child),
main .input-group > .form-select:last-child:not(:first-child),
.modal .input-group > .form-select:last-child:not(:first-child) {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}
main .input-group > .input-group-text:first-child,
.modal .input-group > .input-group-text:first-child {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}
main .input-group > .input-group-text:last-child:not(:first-child),
.modal .input-group > .input-group-text:last-child:not(:first-child) {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

/* Tabler `.input-group-flat` variant — scoped to main + .modal, ca să prinda
 * și formularul de variație care se randează într-un Bootstrap modal
 * (#edit-product-variation-modal). Topbar search-ul (header.navbar
 * .input-group-flat) ramane cu Tabler natural styling (input transparent pe
 * topbar dark). Restored 2026-04-21 / extins .modal 2026-05-26. */
main .input-group-flat,
.modal .input-group-flat {
    background: #fff !important;
    border: 1px solid #dce1e7 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}
main .input-group-flat:focus-within,
.modal .input-group-flat:focus-within {
    border-color: #97a1ac !important;
}
main .input-group-flat > .input-group-text,
.modal .input-group-flat > .input-group-text {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
main .input-group-flat > .form-control:not(.form-control-sm):not([type=color]):not([type=file]):not([type=range]),
.modal .input-group-flat > .form-control:not(.form-control-sm):not([type=color]):not([type=file]):not([type=range]),
main .input-group-flat > .form-select:not(.form-select-sm),
.modal .input-group-flat > .form-select:not(.form-select-sm),
main .input-group-flat > textarea.form-control,
.modal .input-group-flat > textarea.form-control {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding-left: 4px !important;
    margin: 0 !important;
}

/* ==========================================================================
 * Form check (checkbox + label) — Bootstrap's legacy float-based layout
 * relies on negative margin-left on .form-check-input to pull it back into
 * the label's padding-left. Our 20x20 SVG checkbox override kills the default
 * width/margin, so checkbox ends up overlapping the label text.
 * Switch to flex + gap — same visual intent, zero overlap math.
 * ========================================================================== */
.form-check:not(.form-switch):not(.form-check-inline) {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding-left: 0 !important;
    min-height: auto !important;
}
.form-check:not(.form-switch) > .form-check-input {
    float: none !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
}
.form-check:not(.form-switch) > .form-check-label {
    margin: 0 !important;
    line-height: 1.4 !important;
    cursor: pointer !important;
}

/* ==========================================================================
 * 3. DROPDOWNS — GLOBAL (unified visual language across all engines)
 *
 * Three dropdown "engines" coexist on Botble admin:
 *   a) Select2          — most admin form selects (auto-upgraded from .form-select)
 *   b) .si-platform-select — custom widget used by Stage 1 "From URL" Format picker
 *   c) .existing-unified-select — custom widget used by Stage 1 "Existing files" row
 *                                 (the one the user picked as the reference look)
 *
 * All three share the same palette via the --eco-* tokens above. Edit tokens
 * once, every dropdown variant updates. Wrappers get position:relative so
 * their absolutely-positioned menus anchor to the trigger, not to the card.
 * ========================================================================== */

/* ----- Wrappers: anchor absolute menus ----- */
.si-platform-select,
.existing-unified-select {
    position: relative !important;
}

/* ----- Triggers (closed state) -----
 * height (not min-height) matches Bootstrap's .form-select formula so the
 * trigger doesn't jump from 35px (native select) to 47+px (Select2 wrapper
 * with its own inner padding) after auto-upgrade. 1.5em line-height at
 * 14px font = 21px, + 0.75rem vertical padding (12px), + 2px border = 35px. */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple,
.si-platform-select .si-select-trigger,
.existing-unified-select .existing-unified-select-trigger {
    align-items: center !important;
    background: var(--eco-surface) !important;
    border: 1px solid var(--eco-border) !important;
    border-radius: var(--eco-radius) !important;
    color: var(--eco-text) !important;
    display: flex !important;
    gap: 8px !important;
    justify-content: space-between !important;
    /* Match Bootstrap .form-control / .form-select default height (40px)
     * so a Select2 trigger sits next to an <input class="form-control"> at
     * exactly the same height — no vertical misalignment when they appear
     * in the same row (e.g. Default Values Field Name + Default Value). */
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 0.75rem !important;
    text-align: left !important;
    width: 100% !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    box-shadow: none !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
}

/* Multi-select needs vertical padding back since chips grow height */
.select2-container--default .select2-selection--multiple {
    height: auto !important;
    min-height: 40px !important;
    padding: 0.25rem 0.75rem !important;
}

/* Select2 inner rendered text needs its own line-height shim */
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--eco-text) !important;
    line-height: 38px !important;
    padding: 0 !important;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder,
.si-platform-select .si-select-trigger[aria-placeholder] .si-select-text:empty::before,
.existing-unified-select .existing-unified-select-trigger[aria-placeholder] .existing-unified-select-text:empty::before {
    color: var(--eco-text-muted) !important;
}

/* Arrow glyph — unified chevron across all engines.
 *
 * Select2 ships with a CSS-triangle arrow (the <b> child inside
 * .select2-selection__arrow) that doesn't match the SVG chevron the custom
 * widgets already render. Hide the triangle and paint the same chevron as
 * an SVG background-image on the arrow container so every dropdown gets
 * the same "down caret" glyph. Using a single `color: currentColor` SVG
 * doesn't work as a background (CSS can't pipe color into a data URL
 * background), so the chevron is baked with the --eco-arrow hex. */
.select2-container--default .select2-selection--single .select2-selection__arrow,
.select2-container--default .select2-selection--multiple .select2-selection__arrow,
.select2-container--default .select2-selection__arrow {
    display: block !important;       /* beat Bootstrap .form-select's display:none */
    position: absolute !important;
    height: 100% !important;
    top: 0 !important;
    right: 8px !important;
    width: 20px !important;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' width='14' height='14'%3E%3Cpath d='M2 5L7 10L12 5' fill='none' stroke='%237d8997' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: 14px 14px !important;
    background-color: transparent !important;
    pointer-events: none !important;
    transition: transform 0.15s ease !important;
}

/* Kill Select2's default CSS triangle */
.select2-container--default .select2-selection__arrow b {
    display: none !important;
}

.si-platform-select .si-select-arrow,
.existing-unified-select .existing-unified-select-arrow {
    color: var(--eco-arrow) !important;
    flex-shrink: 0;
    transition: transform 0.15s ease !important;
}

/* Flip chevron 180° when dropdown is open (same as the trigger flattens
 * its bottom border) — subtle affordance that the menu is live. */
.select2-container--open .select2-selection__arrow,
.si-platform-select.is-open .si-select-arrow,
.si-platform-select .si-select-trigger[aria-expanded="true"] .si-select-arrow,
.existing-unified-select.is-open .existing-unified-select-arrow,
.existing-unified-select .existing-unified-select-trigger[aria-expanded="true"] .existing-unified-select-arrow {
    transform: rotate(180deg) !important;
}

/* ----- Triggers — flat bottom DOAR cand --open (menu efectiv deschis) ----- */
/* NOTA: --focus persista pe container dupa close (bug select2 cunoscut),
   deci NU includem --focus in selectorul de flat-bottom — altfel
   trigger-ul ramane "taiat in partea de jos" dupa close.
   Plus border-bottom: transparent ca sa nu avem linie dubla cu menu-ul. */
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple,
.si-platform-select.is-open .si-select-trigger,
.si-platform-select .si-select-trigger[aria-expanded="true"],
.existing-unified-select.is-open .existing-unified-select-trigger,
.existing-unified-select .existing-unified-select-trigger[aria-expanded="true"] {
    border-color: var(--eco-border-focus) !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-bottom-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}
/* Focus-only (fara open): doar schimbare border color, NU flat-bottom */
.select2-container--default.select2-container--focus:not(.select2-container--open) .select2-selection--single,
.select2-container--default.select2-container--focus:not(.select2-container--open) .select2-selection--multiple {
    border-color: var(--eco-border-focus) !important;
    box-shadow: none !important;
    outline: none !important;
}

/* ----- Menus (absolute overlay below trigger) ----- */
.select2-container--default .select2-dropdown,
.si-platform-select .si-select-menu,
.existing-unified-select .existing-unified-select-menu {
    background: var(--eco-surface) !important;
    border: 1px solid var(--eco-border-focus) !important;
    border-top: 0 !important;
    border-radius: 0 0 var(--eco-radius) var(--eco-radius) !important;
    box-shadow: var(--eco-menu-shadow) !important;
    overflow: hidden !important;
}

/* For si-/existing-unified menus: position-glue directly under the trigger */
.si-platform-select .si-select-menu,
.existing-unified-select .existing-unified-select-menu {
    left: 0 !important;
    right: 0 !important;
    top: 100% !important;
    margin-top: 0 !important;
    max-height: 300px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    position: absolute !important;
    z-index: var(--eco-menu-z) !important;
}

/* Select2 appends to <body>, so we only need the z-index bump. Must beat
 * Botble admin footer + any sticky page-body chrome (observed clipping the
 * dropdown on /admin/.../mapping-stage-2 Default Values section).
 *
 * Bootstrap modal: backdrop=1050, modal=1055. Select2 closed (default) trebuie
 * sub modal (1040), iar dropdown-ul deschis (--open) peste modal (1056+).
 * Anterior 99999 era prea agresiv — pill-urile select2 multi-select apareau
 * peste modalul global-search (raportat 2026-05-07). */
.select2-container {
    z-index: 1040 !important;
}
.select2-container--open {
    z-index: 1056 !important;
}
.select2-container--default .select2-dropdown {
    z-index: 1056 !important;
}
.select2-container--default .select2-dropdown--below {
    border-top: 1px solid var(--eco-border-focus) !important;
}

/* ----- Options ----- */
.select2-container--default .select2-results__option,
.si-platform-select .si-select-option,
.existing-unified-select .existing-unified-select-option {
    background: var(--eco-surface) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--eco-divider) !important;
    color: var(--eco-text) !important;
    cursor: pointer !important;
    display: block !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    overflow: hidden !important;
    padding: 0.5rem 0.75rem !important;
    text-align: left !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    width: 100% !important;
}

.select2-container--default .select2-results__option:last-child,
.si-platform-select .si-select-option:last-child,
.existing-unified-select .existing-unified-select-option:last-child {
    border-bottom: 0 !important;
}

/* Hover — same soft neutral across all engines */
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable,
.select2-container--default .select2-results__option--highlighted,
.si-platform-select .si-select-option:hover,
.existing-unified-select .existing-unified-select-option:hover {
    background: var(--eco-hover) !important;
    color: var(--eco-text) !important;
}

/* Selected item — slightly darker than hover */
.select2-container--default .select2-results__option--selected,
.select2-container--default .select2-results__option[aria-selected=true],
.si-platform-select .si-select-option.is-selected,
.si-platform-select .si-select-option[aria-selected="true"],
.existing-unified-select .existing-unified-select-option.is-selected,
.existing-unified-select .existing-unified-select-option[aria-selected="true"] {
    background: var(--eco-selected) !important;
    color: var(--eco-text) !important;
    font-weight: 500 !important;
}

/* ----- Select2-specific extras ----- */
.select2-container--default .select2-search--dropdown .select2-search__field {
    background: var(--eco-surface) !important;
    border: 1px solid var(--eco-border) !important;
    border-radius: var(--eco-radius-sm) !important;
    color: var(--eco-text) !important;
    padding: 0.375rem 0.75rem !important;
    box-shadow: none !important;
    outline: none !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--eco-border-focus) !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: var(--eco-selected) !important;
    border: 1px solid var(--eco-border) !important;
    border-radius: 4px !important;
    color: var(--eco-text) !important;
    margin-top: 4px !important;
    padding: 0 6px !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--eco-arrow) !important;
    margin-right: 4px !important;
}

/* Multi-select container: NU folosim display:flex (mostenit de la regula
 * generala line 399-408 pentru single + multi + custom widgets).
 *
 * Cu display:flex pe parent, UL .select2-selection__rendered + search
 * field .select2-search--inline se asaza ca 2 flex items pe aceeasi linie,
 * fiecare cu ~50% din lațime → chips-urile au max-width 50% iar restul
 * spațiu pare gol în dreapta.
 *
 * Cu display:block, UL ia full width natural, chips wrap normal,
 * search input se așază pe rândul următor după chips. Single select
 * NU are UL — folosește direct rendered text — deci pastreaza display:flex. */
.select2-container--default .select2-selection--multiple {
    display: block !important;
}

/* ==========================================================================
 * Buttons (map Bootstrap .btn variants to ecommerce-pro palette)
 * ========================================================================== */
.btn.btn-primary {
    background: #4299e1 !important;
    border: none !important;
    border-radius: 6px !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    min-height: 34px !important;
    padding: 0 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    box-shadow: none !important;
}

.btn.btn-primary:hover,
.btn.btn-primary:focus {
    background: #67ace6 !important;
    border-color: transparent !important;
    color: #fff !important;
}

.btn.btn-outline-primary,
.btn.btn-outline-info {
    background: transparent !important;
    border: 1px solid #1971c2 !important;
    border-radius: 4px !important;
    color: #1971c2 !important;
    font-size: 13px !important;
    padding: 4px 12px !important;
    box-shadow: none !important;
}

.btn.btn-outline-primary:hover,
.btn.btn-outline-primary:focus,
.btn.btn-outline-info:hover,
.btn.btn-outline-info:focus {
    background: rgba(25, 113, 194, 0.08) !important;
    color: #1971c2 !important;
    border-color: #1971c2 !important;
}

/* outline-secondary = neutral gray (breadcrumb / Save / Cancel intent)
 * Kept distinct from outline-primary so forms can pair a neutral action
 * (Back, Save draft) with a blue CTA (Continue, Publish) and the
 * hierarchy stays visible. */
.btn.btn-outline-secondary {
    background: transparent !important;
    border: 1px solid var(--eco-border) !important;
    border-radius: 4px !important;
    color: var(--eco-text) !important;
    font-size: 13px !important;
    padding: 4px 12px !important;
    box-shadow: none !important;
}
.btn.btn-outline-secondary:hover,
.btn.btn-outline-secondary:focus {
    background: var(--eco-hover) !important;
    color: var(--eco-text) !important;
    border-color: var(--eco-border-focus) !important;
}

/* btn-secondary (solid neutral) — paired with btn-primary CTA where we
 * want a non-destructive secondary action (Add row, Cancel) at the same
 * visual height. Without this rule it inherits Bootstrap defaults
 * (no min-height, smaller padding) and ends up shorter than a sibling
 * .btn-primary, breaking the action-row alignment. Same dimensional
 * tokens as .btn-primary; only color/bg differ. */
.btn.btn-secondary {
    background: var(--eco-hover) !important;
    border: 1px solid var(--eco-border) !important;
    border-radius: 6px !important;
    color: var(--eco-text) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    min-height: 34px !important;
    padding: 0 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    box-shadow: none !important;
}

.btn.btn-secondary:hover,
.btn.btn-secondary:focus {
    background: var(--eco-border) !important;
    color: var(--eco-text) !important;
    border-color: var(--eco-border-focus) !important;
}

.btn.btn-outline-danger,
.btn.btn-danger {
    background: transparent !important;
    border: 1px solid #e03131 !important;
    border-radius: 4px !important;
    color: #e03131 !important;
    font-size: 13px !important;
    padding: 4px 12px !important;
    box-shadow: none !important;
}

.btn.btn-outline-danger:hover,
.btn.btn-outline-danger:focus,
.btn.btn-danger:hover,
.btn.btn-danger:focus {
    background: rgba(224, 49, 49, 0.08) !important;
    color: #e03131 !important;
    border-color: #e03131 !important;
}

.btn.btn-success {
    background: #22c55e !important;
    border: none !important;
    border-radius: 6px !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    min-height: 34px !important;
    padding: 0 16px !important;
    box-shadow: none !important;
}

.btn.btn-success:hover,
.btn.btn-success:focus {
    background: #4ade80 !important;
    color: #fff !important;
    border-color: transparent !important;
}

.btn.btn-icon,
.btn.btn-kebab {
    background: #fff !important;
    border: 1px solid #dce1e7 !important;
    border-radius: 6px !important;
    color: #7d8997 !important;
    font-size: 16px !important;
    min-height: 28px !important;
    height: 28px !important;
    width: 28px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
}

.btn.btn-icon:hover,
.btn.btn-kebab:hover {
    background: #f7f9fb !important;
    border-color: #97a1ac !important;
    color: #495569 !important;
}

/* Compound: btn-icon + color variants must keep 28x28 dimensions.
 * Without these, the color-variant rules above (.btn-primary / .btn-success
 * set min-height:34px) win and force the icon button to 34px tall, 28px wide
 * — breaking the square shape. Seen on /admin/ecommerce/products operations
 * column (edit/view/delete icons). */
.btn.btn-icon.btn-primary,
.btn.btn-icon.btn-success,
.btn.btn-icon.btn-info,
.btn.btn-icon.btn-danger,
.btn.btn-icon.btn-warning,
.btn.btn-kebab.btn-primary,
.btn.btn-kebab.btn-success {
    min-height: 28px !important;
    height: 28px !important;
    width: 28px !important;
    padding: 0 !important;
    border-radius: 6px !important;
}

/* ==========================================================================
 * Size variants — preserve Bootstrap .btn-sm / .btn-lg hierarchy
 * The .btn.btn-primary / .btn-success rules above set min-height:34px, which
 * swallows Bootstrap's size differentiation. These compound rules restore it:
 *   btn-sm  → 28px (compact, font 12px)
 *   btn     → 34px (default)
 *   btn-lg  → 44px (prominent, font 16px)
 * ========================================================================== */
.btn.btn-primary.btn-sm,
.btn.btn-success.btn-sm,
.btn.btn-secondary.btn-sm {
    min-height: 28px !important;
    font-size: 12px !important;
    padding: 0 10px !important;
    border-radius: 4px !important;
}

.btn.btn-primary.btn-lg,
.btn.btn-success.btn-lg,
.btn.btn-secondary.btn-lg {
    min-height: 44px !important;
    font-size: 16px !important;
    padding: 0 20px !important;
    border-radius: 8px !important;
}

.btn.btn-outline-primary.btn-sm,
.btn.btn-outline-secondary.btn-sm,
.btn.btn-outline-info.btn-sm,
.btn.btn-outline-danger.btn-sm,
.btn.btn-danger.btn-sm {
    font-size: 12px !important;
    padding: 2px 8px !important;
}

.btn.btn-outline-primary.btn-lg,
.btn.btn-outline-secondary.btn-lg,
.btn.btn-outline-info.btn-lg,
.btn.btn-outline-danger.btn-lg,
.btn.btn-danger.btn-lg {
    font-size: 16px !important;
    padding: 8px 20px !important;
    border-radius: 8px !important;
}

/* ==========================================================================
 * Page-level horizontal gutters (responsive)
 *
 * Botble/Tabler default: .container-xl caps width at ~1320px and centers it.
 * On wide screens the tables/forms looked cramped, so we widen the container
 * and use symmetric side margins instead of max-width. Breakpoints step the
 * gutter down so narrow viewports don't lose too much of their usable width.
 *
 *   ≥1600px  → 80px each side   (wide desktop — the original intent)
 *   ≥1280px  → 40px each side   (standard laptop 1366/1440)
 *   ≥ 992px  → 20px each side   (small laptop / tablet landscape)
 *   <  992px → 12px each side   (tablet portrait / mobile)
 * ========================================================================== */
main.page-body > .container-fluid,
main.page-body > .page-wrapper > .container-fluid,
main.page-body .page-header > .container-fluid,
main.page-body .page-body > .container-fluid,
main.page-body .container-xl {
    max-width: none !important;
    width: auto !important;
    margin-left: 12px !important;
    margin-right: 12px !important;
}

@media (min-width: 992px) {
    main.page-body > .container-fluid,
    main.page-body > .page-wrapper > .container-fluid,
    main.page-body .page-header > .container-fluid,
    main.page-body .page-body > .container-fluid,
    main.page-body .container-xl {
        margin-left: 20px !important;
        margin-right: 20px !important;
    }
}

@media (min-width: 1280px) {
    main.page-body > .container-fluid,
    main.page-body > .page-wrapper > .container-fluid,
    main.page-body .page-header > .container-fluid,
    main.page-body .page-body > .container-fluid,
    main.page-body .container-xl {
        margin-left: 40px !important;
        margin-right: 40px !important;
    }
}

@media (min-width: 1600px) {
    main.page-body > .container-fluid,
    main.page-body > .page-wrapper > .container-fluid,
    main.page-body .page-header > .container-fluid,
    main.page-body .page-body > .container-fluid,
    main.page-body .container-xl {
        margin-left: 80px !important;
        margin-right: 80px !important;
    }
}

/* ==========================================================================
 * 5b. Panel section item icons (card-style rounded square around SVG)
 *
 * Botble's /admin/settings wraps each entry icon in a rounded light-gray
 * square (40x40, #f9fafb bg, 8px radius, 20x20 SVG inside at #9ca3af).
 * The styling is scoped to Botble's built-in PanelSection views via the
 * parent class .panel-section-item. Other admin pages that use the same
 * .panel-section-item-icon wrapper (ecommerce-pro /admin/…/new-import
 * and /new-export) render icons bare because they omit the parent class.
 *
 * Apply the card-style box globally to .panel-section-item-icon so every
 * admin landing page with that wrapper renders consistently, without
 * touching blade templates.
 * ========================================================================== */
.panel-section-item-icon {
    /* Mirror Botble's scoped rule (.panel-section .panel-section-item
     * .panel-section-item-icon) — uses theme tokens so light/dark both work. */
    background-color: var(--bb-body-bg, #f9fafb) !important;
    border-radius: var(--bb-card-border-radius, 8px) !important;
    width: 40px !important;
    height: 40px !important;
    padding: 4px !important;
    flex-shrink: 0;
}

.panel-section-item-icon svg,
.panel-section-item-icon i {
    width: 20px !important;
    height: 20px !important;
    color: var(--bb-icon-color, #9ca3af) !important;
    stroke: currentColor;
}

/* ==========================================================================
 * 6. CUSTOM WIDGET SCOPING
 * (kept empty — .si-platform-select / .existing-unified-select rules now
 *  live under section 3 "Dropdowns — GLOBAL". Add new widget wrappers here
 *  if they need scope-specific tweaks that can't be expressed via tokens.)
 * ========================================================================== */

/* ==========================================================================
 * 6b. DARK-MODE VARIANTS for inputs, selects, Select2, custom dropdowns
 *
 * Sections 2c (text inputs) and 3 (dropdowns) lock bg to #fff + light border
 * + dark text. Those values glare on dark admin chrome when the user toggles
 * dark mode (stored as body[data-bs-theme="dark"]). The rules below swap to
 * a dark surface / dark border / light text palette while preserving the
 * same 8px radius / 35px height / focus behavior.
 *
 * Token mapping (Botble dark):
 *   --bb-bg-surface         = #1f2937   (card bg — our trigger/input bg)
 *   --bb-border-color       = #374151   (subtle dark border)
 *   text                    = #f3f4f6   (near-white body text)
 *   placeholder             = #9ca3af   (gray-400)
 *   focus border            = #6b7280   (gray-500 — slightly lighter)
 *
 * Menu (open state) uses a slightly lighter surface so it sits above the
 * trigger without blending into it.
 * ========================================================================== */

/* --- Inputs / selects / textareas --- */
[data-bs-theme="dark"] .form-control:not(.form-control-sm):not([type=color]):not([type=file]):not([type=range]),
[data-bs-theme="dark"] .form-select:not(.form-select-sm),
[data-bs-theme="dark"] textarea.form-control,
[data-bs-theme="dark"] .form-control-sm,
[data-bs-theme="dark"] .form-select-sm {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
    color: #f3f4f6 !important;
}

[data-bs-theme="dark"] .form-control:not(.form-control-sm):not([type=color]):not([type=file]):not([type=range]):focus,
[data-bs-theme="dark"] .form-select:not(.form-select-sm):focus,
[data-bs-theme="dark"] textarea.form-control:focus,
[data-bs-theme="dark"] .form-control-sm:focus,
[data-bs-theme="dark"] .form-select-sm:focus {
    background-color: #1f2937 !important;
    border-color: #6b7280 !important;
    color: #f3f4f6 !important;
}

[data-bs-theme="dark"] .form-control::placeholder,
[data-bs-theme="dark"] textarea.form-control::placeholder {
    color: #9ca3af !important;
}

/* --- Dropdown triggers (Select2 + custom widgets) --- */
[data-bs-theme="dark"] .select2-container--default .select2-selection--single,
[data-bs-theme="dark"] .select2-container--default .select2-selection--multiple,
[data-bs-theme="dark"] .si-platform-select .si-select-trigger,
[data-bs-theme="dark"] .existing-unified-select .existing-unified-select-trigger {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
    color: #f3f4f6 !important;
}

[data-bs-theme="dark"] .select2-container--default.select2-container--focus .select2-selection--single,
[data-bs-theme="dark"] .select2-container--default.select2-container--focus .select2-selection--multiple,
[data-bs-theme="dark"] .select2-container--default.select2-container--open .select2-selection--single,
[data-bs-theme="dark"] .select2-container--default.select2-container--open .select2-selection--multiple,
[data-bs-theme="dark"] .si-platform-select.is-open .si-select-trigger,
[data-bs-theme="dark"] .existing-unified-select.is-open .existing-unified-select-trigger {
    border-color: #6b7280 !important;
}

[data-bs-theme="dark"] .select2-container--default .select2-selection__rendered,
[data-bs-theme="dark"] .select2-container--default .select2-selection__placeholder {
    color: #f3f4f6 !important;
}

[data-bs-theme="dark"] .select2-container--default .select2-selection__placeholder {
    color: #9ca3af !important;
}

/* --- Dropdown menus (opened) --- */
[data-bs-theme="dark"] .select2-container--default .select2-dropdown,
[data-bs-theme="dark"] .si-platform-select .si-select-menu,
[data-bs-theme="dark"] .existing-unified-select .existing-unified-select-menu {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
    color: #f3f4f6 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

[data-bs-theme="dark"] .select2-container--default .select2-results__option,
[data-bs-theme="dark"] .si-platform-select .si-select-item,
[data-bs-theme="dark"] .existing-unified-select .existing-unified-select-item {
    color: #f3f4f6 !important;
}

[data-bs-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected],
[data-bs-theme="dark"] .select2-container--default .select2-results__option--highlighted,
[data-bs-theme="dark"] .si-platform-select .si-select-item:hover,
[data-bs-theme="dark"] .existing-unified-select .existing-unified-select-item:hover {
    background-color: #374151 !important;
    color: #f3f4f6 !important;
}

[data-bs-theme="dark"] .select2-container--default .select2-results__option[aria-selected="true"],
[data-bs-theme="dark"] .si-platform-select .si-select-item.is-selected,
[data-bs-theme="dark"] .existing-unified-select .existing-unified-select-item.is-selected {
    background-color: #4b5563 !important;
    color: #f3f4f6 !important;
}

/* --- Search field inside Select2 dropdown --- */
[data-bs-theme="dark"] .select2-container--default .select2-search--dropdown .select2-search__field {
    background-color: #111827 !important;
    border-color: #374151 !important;
    color: #f3f4f6 !important;
}

/* ==========================================================================
 * 7. PER-PAGE OVERRIDES
 * Scoped via body.admin-page-<route-slug> injected by the service provider
 * from location.pathname. Add blocks below as new exceptions come up.
 * ========================================================================== */

/* ----- /admin/login -----
 * Revert inputs to Botble/Bootstrap defaults, but kill the blue focus glow
 * so the field just gets a subtle border change on focus instead.
 *
 * Selector specificity note: the base .form-control block uses four :not()
 * pseudos which count toward specificity (each :not argument adds its own
 * class weight). To beat that the override must match the same :not chain
 * and add body.admin-page-login on top — otherwise the base rule wins and
 * the revert never lands on the login page. */
body.admin-page-login .form-control:not(.form-control-sm):not([type=color]):not([type=file]):not([type=range]),
body.admin-page-login .form-select:not(.form-select-sm),
body.admin-page-login textarea.form-control,
body.admin-page-login input[type=text],
body.admin-page-login input[type=email],
body.admin-page-login input[type=password] {
    background-color: #fff !important;
    color: #212529 !important;
    border: 1px solid #dadce0 !important;
    border-radius: 0.375rem !important;
    padding: 0.375rem 0.75rem !important;
}

body.admin-page-login .form-control:not(.form-control-sm):not([type=color]):not([type=file]):not([type=range]):focus,
body.admin-page-login .form-control:not(.form-control-sm):not([type=color]):not([type=file]):not([type=range]):focus-visible,
body.admin-page-login .form-select:not(.form-select-sm):focus,
body.admin-page-login .form-select:not(.form-select-sm):focus-visible,
body.admin-page-login textarea.form-control:focus,
body.admin-page-login textarea.form-control:focus-visible,
body.admin-page-login input[type=text]:focus,
body.admin-page-login input[type=email]:focus,
body.admin-page-login input[type=password]:focus,
body.admin-page-login input[type=text]:focus-visible,
body.admin-page-login input[type=email]:focus-visible,
body.admin-page-login input[type=password]:focus-visible {
    box-shadow: none !important;
    border-color: #86b7fe !important;
    outline: none !important;
}

/* ==========================================================================
 * Unified dropdown style — the visual language set by Stage 2 "Manage
 * filtering options" Element/Rule selectors. Those dropdowns were hand-styled
 * with inline CSS and became the de-facto reference; user asked (2026-04-20)
 * to promote that look as the canonical dropdown across admin — DataTables
 * footer page-size, Stage 2 saved-templates trigger, Scheduled Imports
 * filters, etc. Apply `.eco-dropdown` to any new dropdown; auto-apply rules
 * below cover the common existing instances.
 *
 * Tokens (from Element/Rule):
 *   border:        1px solid #E5E7EB
 *   border-radius: 8px
 *   color:         #242728
 *   font-size:     13px (tighter than Bootstrap default for dense surfaces)
 *   min-height:    40px (vs Bootstrap ~38px, still compact in toolbars)
 *   padding:       10px 32px 10px 12px (right room for chevron SVG)
 *   focus border:  #97a1ac (neutral gray, NO blue stroke per project rule)
 * ========================================================================== */
.eco-dropdown,
select.eco-dropdown,
button.eco-dropdown,
.eco-dropdown-trigger {
    background-color: #fff !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 8px !important;
    color: #242728 !important;
    font-size: 13px !important;
    min-height: 40px !important;
    padding: 8px 32px 8px 12px !important;
    box-shadow: none !important;
    outline: none !important;
    line-height: 1.4 !important;
}

.eco-dropdown:focus,
.eco-dropdown:focus-visible,
select.eco-dropdown:focus,
button.eco-dropdown:focus,
.eco-dropdown-trigger:focus {
    border-color: #97a1ac !important;
    box-shadow: none !important;
    outline: none !important;
}

.eco-dropdown:hover:not(:focus),
.eco-dropdown-trigger:hover:not(:focus) {
    border-color: #c5ccd3 !important;
}

/* DataTables footer page-size selector — Select2-wrapped. The actual
 * visual is the .select2-selection inside .dt-length-style. Target its
 * visible surface to match the Element/Rule look. Admin-overrides.css
 * already has general Select2 styling earlier in this file; these rules
 * specialize for the DataTables length selector specifically so we don't
 * affect other Select2 instances (filters, taxonomy pickers, etc.). */
.dt-length-style .select2-container--default .select2-selection--single,
.dataTables_length .select2-container--default .select2-selection--single {
    background-color: #fff !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 8px !important;
    min-height: 40px !important;
    height: 40px !important;
}
.dt-length-style .select2-container--default .select2-selection--single .select2-selection__rendered,
.dataTables_length .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 38px !important;
    padding-left: 12px !important;
    padding-right: 32px !important;
    color: #242728 !important;
    font-size: 13px !important;
}
.dt-length-style .select2-container--default.select2-container--focus .select2-selection--single,
.dt-length-style .select2-container--default.select2-container--open .select2-selection--single,
.dataTables_length .select2-container--default.select2-container--focus .select2-selection--single,
.dataTables_length .select2-container--default.select2-container--open .select2-selection--single {
    border-color: #97a1ac !important;
}

/* Stage 2 saved-templates trigger — the `.si-select-trigger` button
 * inside `#stage2-template-wrap`. User also asked for dynamic width
 * based on the selected template name; set width:auto + min-width so
 * the button hugs its label but still looks balanced when "— Load
 * Template —" placeholder is shown. The max-width cap keeps it from
 * stretching absurdly when a user saves a template with a very long name. */
#stage2-template-wrap {
    width: auto !important;
    min-width: 220px !important;
    max-width: 420px !important;
    display: inline-block !important;
}
#stage2-template-trigger {
    background-color: #fff !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 8px !important;
    color: #242728 !important;
    font-size: 13px !important;
    min-height: 40px !important;
    height: 40px !important;
    padding: 6px 32px 6px 12px !important;
    box-shadow: none !important;
}
#stage2-template-trigger:hover {
    border-color: #c5ccd3 !important;
}
#stage2-template-trigger:focus,
#stage2-template-wrap.is-open #stage2-template-trigger {
    border-color: #97a1ac !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Scheduled Imports toolbar — clamp the Select2 span that the admin
 * auto-upgrade injects next to `<select class="form-select">`. Without
 * this, the Select2 container inherits `width:100%` (its inline default)
 * and stretches to fill the rest of the .d-flex toolbar, pushing the
 * buttons to the next row. `.scheduled-status-wrap` is a 180px box
 * around the native select so both the hidden <select> and the visible
 * Select2 stay the same width. */
.scheduled-status-wrap .select2-container,
.scheduled-status-wrap .select2 {
    width: 100% !important;
    max-width: 180px !important;
}
.scheduled-imports-toolbar .select2-container--default .select2-selection--single {
    border: 1px solid #E5E7EB !important;
    border-radius: 8px !important;
    height: 40px !important;
    min-height: 40px !important;
}
.scheduled-imports-toolbar .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 38px !important;
    padding-left: 12px !important;
    padding-right: 32px !important;
    color: #242728 !important;
    font-size: 13px !important;
}

/* Stage 2 Apply button — 'Applied' success state. When the JS appends
 * class `is-applied`, the button picks up the green check + subtle
 * green tint for ~1.8s so the user gets an unambiguous confirmation
 * beyond just the spinner vanishing. */
#stage2-apply-template-btn.is-applied {
    border-color: #86efac !important;
    background-color: #f0fdf4 !important;
    color: #166534 !important;
}
#stage2-apply-template-btn.is-loading {
    pointer-events: none !important;
    opacity: 0.8 !important;
}

/* ==========================================================================
 * .si-select-* — custom Botble dropdown family (global implementation).
 *
 * Canonicalizes the design documented at
 * public/dropdown-components-reference/si-select.html. Used live in 2 places:
 *   - importer.blade.php:534-552 — URL format selector (Stage 1 From URL tab)
 *   - import.blade.php:91-103    — Stage 2 saved templates loader
 *
 * The derived family .stage2-template-* (see block below this one) uses the
 * same wrapper + trigger but its own menu + option naming — a historical
 * inconsistency we keep styled centrally until a future unification.
 *
 * Every rule uses !important because the live markup has inline styles with
 * older values (border-radius:6px, box-shadow present, border #dce1e7)
 * that pre-date the canonical spec. Without !important the centralized
 * styles would be ignored.
 *
 * Spec (from the Element/Rule reference + live inspection 2026-04-20):
 *   - Trigger height 40px, radius 6px (closed) / 8px 8px 0 0 (open down)
 *     / 0 0 8px 8px (open up)
 *   - Border #dce1e7 (closed) → #97a1ac (open)
 *   - Menu positioned directly below/above trigger (no gap), radius
 *     mirrors trigger inverted, no top-border (down) or no bottom-border (up)
 *   - No box-shadow on menu (clean look, stays inside admin surfaces)
 *   - Options: padding .5rem .75rem, font 14px #495569 weight 500,
 *     border-bottom 1px solid #eef1f4 between rows (last row has none)
 *   - Selected: background #f3f6f9, keeps border-bottom below (to match live
 *     Stage 1 — the "cu separator sub selecție" variant A confirmed by user)
 * ========================================================================== */

/* ==========================================================================
 * REFACTOR 2026-04-21: ID-based per-instance rules eliminate prin
 * attribute selectors `data-si-select="wrap|trigger|menu|opt|arrow"`. Orice
 * markup care adopta acest contract beneficiaza automat de styling — fara
 * a fi nevoie sa modificam CSS pentru fiecare instanta noua.
 *
 * Class-based selectors raman ca FALLBACK pentru markup vechi care nu
 * are inca data-attrs (e.g. .si-select-option, .stage2-template-opt,
 * .s3-preset-opt) — astfel zero regresie + migration smooth.
 *
 * Naming convention pentru data-attrs:
 *   data-si-select="wrap"    on outer container (was .si-platform-select)
 *   data-si-select="trigger" on the open/close button
 *   data-si-select="menu"    on the dropdown menu div
 *   data-si-select="opt"     on each option button inside menu
 *   data-si-select="arrow"   on the chevron SVG
 *
 * Modifiers (state classes) sit on the wrapper:
 *   .is-open      — menu is currently visible
 *   .is-upward    — menu opens above trigger (default is downward)
 * ========================================================================== */

/* Wrapper */
:is(.si-platform-select, [data-si-select="wrap"]) {
    position: relative !important;
}

/* Trigger — closed state */
:is(.si-select-trigger, [data-si-select="trigger"]) {
    height: 40px !important;
    min-height: 40px !important;
    padding: 0.5625rem 0.75rem !important;
    background: #fff !important;
    color: #495569 !important;
    border: 1px solid #dce1e7 !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    text-align: left !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    cursor: pointer !important;
    box-shadow: none !important;
    transition: border-color 0.15s ease, border-radius 0.15s ease !important;
}

:is(.si-select-trigger, [data-si-select="trigger"]):hover:not([aria-expanded="true"]) {
    border-color: #c5ccd3 !important;
}

/* Trigger — open state (downward menu): rounded TOP only, strong border */
:is(.si-platform-select, [data-si-select="wrap"]).is-open > :is(.si-select-trigger, [data-si-select="trigger"]),
:is(.si-select-trigger, [data-si-select="trigger"])[aria-expanded="true"] {
    border-color: #97a1ac !important;
    border-radius: 8px 8px 0 0 !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Trigger — open state (upward menu): rounded BOTTOM only */
:is(.si-platform-select, [data-si-select="wrap"]).is-upward.is-open > :is(.si-select-trigger, [data-si-select="trigger"]) {
    border-radius: 0 0 8px 8px !important;
}

/* Trigger inner text — ellipsis on overflow */
:is(.si-select-trigger, [data-si-select="trigger"]) .si-select-text,
:is(.si-select-trigger, [data-si-select="trigger"]) > span:first-of-type {
    flex: 1 1 auto !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* Chevron — rotates 180° when wrapper is open */
:is(.si-select-arrow, .stage2-template-arrow, .s3-preset-load-arrow, [data-si-select="arrow"]) {
    flex-shrink: 0 !important;
    transition: transform 0.2s ease !important;
}

:is(.si-platform-select, [data-si-select="wrap"]).is-open
    :is(.si-select-arrow, .stage2-template-arrow, .s3-preset-load-arrow, [data-si-select="arrow"]) {
    transform: rotate(180deg) !important;
}

/* Menu — downward variant: directly below trigger, no gap, no top border,
 * radius bottom-corners only. Generic via attribute selector — works for
 * Stage 1 (.si-select-menu canonical), Stage 2 (#stage2-template-menu derived),
 * Stage 3 (#s3-preset-load-menu derived) si ORICE alta instanta viitoare
 * cu data-si-select="menu". */
:is(.si-platform-select, [data-si-select="wrap"]) :is(.si-select-menu, [data-si-select="menu"]),
:is(.si-select-menu, [data-si-select="menu"]) {
    position: absolute !important;
    top: 100% !important;
    bottom: auto !important;
    left: 0 !important;
    right: 0 !important;
    background: #fff !important;
    border: 0 solid #97a1ac !important;
    border-width: 0 1px 1px 1px !important;
    border-radius: 0 0 8px 8px !important;
    box-shadow: none !important;
    z-index: 2000 !important;
    max-height: 300px !important;
    overflow-y: auto !important;
    padding: 0 !important;
}

/* Menu — upward variant: above trigger, no bottom border, radius top only */
:is(.si-platform-select, [data-si-select="wrap"]).is-upward :is(.si-select-menu, [data-si-select="menu"]) {
    top: auto !important;
    bottom: 100% !important;
    border-width: 1px 1px 0 1px !important;
    border-radius: 8px 8px 0 0 !important;
}

/* Options — the rows inside the menu. Each row has a subtle bottom divider
 * (#eef1f4) between itself and the next; the LAST row drops the divider so
 * the menu's own bottom border handles the closing edge. */
:is(.si-select-option, .stage2-template-opt, .s3-preset-opt, [data-si-select="opt"]) {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    border: 0 !important;
    border-bottom: 1px solid #eef1f4 !important;
    background: transparent !important;
    color: #495569 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    padding: 0.5rem 0.75rem !important;
    cursor: pointer !important;
    transition: background-color 0.15s ease !important;
}

:is(.si-select-option, .stage2-template-opt, .s3-preset-opt, [data-si-select="opt"]):last-child {
    border-bottom: 0 !important;
}

:is(.si-select-option, .stage2-template-opt, .s3-preset-opt, [data-si-select="opt"]):hover {
    background: #f3f4f6 !important;
}

:is(.si-select-option, .stage2-template-opt, .s3-preset-opt, [data-si-select="opt"]).is-selected {
    background: #f3f6f9 !important;
    color: #495569 !important;
    font-weight: 500 !important;
}

/* ==========================================================================
 * Bootstrap .dropdown-menu visual consistency — applies to dropdowns INSIDE
 * the main admin content area (Bulk Actions on orders page, table row
 * actions, the kebab menus in manage-imports, etc). EXPLICITLY scoped to
 * `main` to AVOID overriding the Tabler sidebar's submenu styling
 * (aside.navbar-vertical .dropdown-menu) — restored 2026-04-21 after the
 * unscoped global rule from b06d27b0 inadvertently re-styled the sidebar
 * expanders, breaking Tabler look.
 *
 * Previously the targeted menus:
 *   - had width independent of parent button → Bulk Actions floated wider
 *   - used default Bootstrap border-radius (4px) and gray shadow
 *     inconsistent with .eco-dropdown (8px) and card components
 * Uniformize to match the canonical Element/Rule look — but ONLY in main.
 * ========================================================================== */
main .dropdown-menu {
    border: 1px solid #E5E7EB !important;
    border-radius: 8px !important;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08) !important;
    padding: 6px 0 !important;
    font-size: 13px !important;
    color: #242728 !important;
    min-width: 160px !important;
}
main .dropdown-menu .dropdown-item {
    padding: 8px 14px !important;
    color: #242728 !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    border-radius: 0 !important;
}
main .dropdown-menu .dropdown-item:hover,
main .dropdown-menu .dropdown-item:focus {
    background-color: #f3f4f6 !important;
    color: #1f2937 !important;
    outline: none !important;
}
main .dropdown-menu .dropdown-item.text-danger:hover,
main .dropdown-menu .dropdown-item.text-danger:focus {
    background-color: #fef2f2 !important;
    color: #b91c1c !important;
}
main .dropdown-menu .dropdown-item.active,
main .dropdown-menu .dropdown-item:active {
    background-color: #1f2937 !important;
    color: #fff !important;
}
main .dropdown-menu .dropdown-divider {
    margin: 6px 0 !important;
    border-top-color: #eef1f4 !important;
}
main .dropdown-menu .dropdown-submenu {
    position: relative;
}
main .dropdown-menu .dropdown-submenu > .dropdown-item::after {
    content: '';
    position: absolute;
    right: 12px;
    top: 50%;
    width: 6px;
    height: 6px;
    border-right: 2px solid #9ca3af;
    border-top: 2px solid #9ca3af;
    transform: translateY(-50%) rotate(45deg);
}

/* ==========================================================================
 * Select2 — sm size variant (height match cu .form-control-sm = 32px)
 *
 * Pe paginile cu filtre (manage-imports history/schedules etc.) inputurile
 * folosesc .form-control-sm (32px), dar Select2 randa la 40px implicit.
 * Cand source-ul <select> are .form-select-sm, force select2 sa se
 * shrink la 32px ca sa fie aliniat cu restul.
 * ========================================================================== */
select.form-select-sm + .select2-container .select2-selection--single,
select.form-select-sm + .select2-container .select2-selection--multiple,
select.form-select-sm + .select2-container.select2-container--default .select2-selection {
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 0.5rem !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
}
select.form-select-sm + .select2-container .select2-selection--single .select2-selection__rendered {
    line-height: 30px !important;
    font-size: 13px !important;
}
select.form-select-sm + .select2-container .select2-selection--single .select2-selection__arrow {
    height: 32px !important;
}

/* ==========================================================================
 * Admin tables — font size 12px pe celule (era 14px default)
 * ========================================================================== */
main table.table tbody td,
main table.table tbody td a,
main table.dataTable tbody td,
main table.dataTable tbody td a {
    font-size: 12px !important;
}

/* ==========================================================================
 * Color picker (Spectrum .sp-replacer) — modern pill design
 *
 * Default Spectrum trigger: mic 49x30, swatch tiny + ▼ caracter ASCII.
 * Restyle in pill clean cu swatch + hex value + chevron SVG, full-width
 * ca form-control (40px height, var(--eco-border), var(--eco-radius)).
 * ========================================================================== */
.sp-replacer {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 0 12px !important;
    height: 40px !important;
    width: 140px !important;
    min-width: 140px !important;
    max-width: 140px !important;
    background: var(--eco-surface, #fff) !important;
    border: 1px solid var(--eco-border, #dce1e7) !important;
    border-radius: var(--eco-radius, 8px) !important;
    box-shadow: none !important;
    cursor: pointer !important;
    transition: border-color .15s, background .15s !important;
}
.sp-replacer:hover {
    border-color: var(--eco-border-focus, #97a1ac) !important;
    background: var(--eco-hover, #f7f9fb) !important;
}
.sp-replacer.sp-active {
    border-color: var(--eco-accent, #1971c2) !important;
    box-shadow: 0 0 0 3px var(--eco-accent-bg, rgba(25, 113, 194, 0.12)) !important;
}

/* Swatch (color preview) — disc rotund */
.sp-replacer .sp-preview {
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06) !important;
}
.sp-replacer .sp-preview .sp-preview-inner {
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    border: none !important;
}

/* HEX value (we inject via ::after using attr(...) — fallback la "Color") */
.sp-replacer::after {
    content: attr(data-color-hex);
    flex: 1;
    font-size: 13px;
    font-weight: 500;
    color: var(--eco-text, #495569);
    font-family: 'SFMono-Regular', Menlo, Monaco, Consolas, monospace;
    letter-spacing: -0.01em;
    text-transform: uppercase;
}
.sp-replacer:not([data-color-hex])::after,
.sp-replacer[data-color-hex=""]::after {
    content: "Color";
    color: var(--eco-text-muted, #8e98a6);
    font-family: inherit;
    text-transform: none;
}

/* Inlocuim caracterul ASCII ▼ cu un SVG chevron */
.sp-replacer .sp-dd {
    width: 14px !important;
    height: 14px !important;
    color: transparent !important;
    flex-shrink: 0 !important;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' width='14' height='14'%3E%3Cpath d='M2 5L7 10L12 5' fill='none' stroke='%237d8997' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 14px 14px !important;
    padding: 0 !important;
    line-height: 1 !important;
    font-size: 0 !important;
}

/* ==========================================================================
 * Aragold brand color popover (custom palette)
 *
 * Click pe .sp-replacer NU mai deschide Spectrum default — afisam in schimb
 * un popover propriu cu paleta brand (12 culori) + buton "Custom" pentru
 * fallback la Spectrum cand utilizatorul vrea o culoare in afara paletei.
 *
 * Pattern: shadcn/Linear/Radix — palette-first, custom-second.
 * ========================================================================== */
.ara-color-popover {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1080;
    min-width: 320px;
    padding: 16px;
    background: #fff;
    border: 1px solid var(--eco-border, #e3e6ea);
    border-radius: var(--eco-radius, 8px);
    box-shadow: 0 8px 24px -8px rgba(15, 23, 42, 0.18), 0 4px 12px -6px rgba(15, 23, 42, 0.12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity .14s ease, transform .14s ease, visibility .14s ease;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}
.ara-color-popover.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.ara-color-popover__title {
    font-size: 11px;
    font-weight: 600;
    color: var(--eco-text-muted, #8e98a6);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 10px;
}

.ara-color-popover__grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}

.ara-color-swatch {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease;
}
.ara-color-swatch:hover {
    transform: scale(1.08);
}
.ara-color-swatch:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--eco-accent, #1971c2);
}
.ara-color-swatch__chip {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 1px solid rgba(15, 23, 42, 0.10);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.ara-color-popover__custom {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 36px;
    padding: 0 12px;
    background: var(--eco-surface-muted, #f5f7fa);
    border: 1px solid var(--eco-border, #e3e6ea);
    border-radius: 6px;
    color: var(--eco-text, #495569);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease;
}
.ara-color-popover__custom:hover {
    background: #eef1f5;
    border-color: var(--eco-border-focus, #c3c9d1);
    color: var(--eco-text-strong, #2c3a4a);
}
.ara-color-popover__custom svg {
    flex-shrink: 0;
    color: var(--eco-text-muted, #8e98a6);
}

/* ==========================================================================
 * Theme Options Styles — grupare campuri color in sub-cards
 *
 * Pagina /admin/theme/options/opt-text-subsection-styles. Campurile color
 * (primary, secondary, header_*, footer_*) sunt grupate vizual prin JS in
 * 6 sub-cards. Fiecare sub-card are fundal #F2F2F2 + colturi rotunde +
 * grid responsive (auto-fit minmax 220px).
 * ========================================================================== */
.ara-color-group {
    background: #F2F2F2;
    border-radius: 8px;
    padding: 18px 18px 14px;
    margin-bottom: 16px;
}
.ara-color-group__title {
    font-size: 13px;
    font-weight: 600;
    color: #2A2826;
    margin: 0 0 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid #E5E7EB;
    letter-spacing: 0.01em;
}
/* Auto-fit grid pe TOATE sub-cards — densitate uniforma 200px+, packing dens.
 * Logica pair-by-relation se pastreaza prin ordinea field-urilor in FIELD_GROUPS
 * (BG -> Text -> Hover -> Border etc); auto-fit aseaza perechile vizual adiacent. */
.ara-color-group__fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-auto-rows: min-content;
    align-items: start;
    gap: 12px;
}


/* Mini-card pill treatment generalizat pentru TOATE field-urile color din grup.
 * Wrapper devine container alb cu border + label inline mic deasupra pill-ului.
 * Inner .sp-replacer renunta la propriul background/border ca sa se integreze in pill. */
.ara-color-group__fields > .mb-3.position-relative:has(.sp-replacer) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 8px 8px 4px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    width: 100%;
    max-width: 200px;
    align-self: start;
    transition: border-color .18s, box-shadow .18s, background .18s;
}
/* Mini-card cu pill ACTIV (selectat curent in grup): shadow finut auriu, fara border.
 * Indica vizual ce field e tinta paletei brand inline. */
.ara-color-group__fields > .mb-3.position-relative:has(.sp-replacer.is-active) {
    box-shadow: 0 2px 6px rgba(189, 132, 76, 0.18), 0 0 0 1.5px rgba(189, 132, 76, 0.35);
}
.ara-color-group__fields > .mb-3.position-relative:has(.sp-replacer.is-active) > label {
    color: #8B5E2E;
}
.ara-color-group__fields > .mb-3.position-relative:has(.sp-replacer) > label {
    order: 1;
    margin: 0;
    padding: 0 0 8px;
    font-size: 10px;
    font-weight: 500;
    color: #010f1c;
    width: 100%;
    border-bottom: 1px solid #e5e7eb;
}
.ara-color-group__fields > .mb-3.position-relative:has(.sp-replacer) > .mb-3 {
    order: 2;
    margin: 0;
    width: 100%;
}
.ara-color-group__fields > .mb-3.position-relative:has(.sp-replacer) .sp-replacer {
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
}
@media (max-width: 600px) {
    .ara-color-group__fields {
        grid-template-columns: 1fr;
    }
    .ara-color-group__fields > .mb-3.position-relative:has(.sp-replacer) {
        max-width: 100%;
    }
}
/* Reset margine inferioara pe form-group-urile interne (grid gap o gestioneaza) */
.ara-color-group__fields > .form-group,
.ara-color-group__fields > .mb-3,
.ara-color-group__fields > [class*="form-group"] {
    margin-bottom: 0;
}
/* Help text-urile ("This option is only applied for header style 1") raman vizibile sub fiecare camp */
.ara-color-group__fields .form-text,
.ara-color-group__fields small {
    display: block;
    margin-top: 4px;
}

/* === Row pentru perechi de sub-cards side-by-side === */
.ara-color-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}
.ara-color-row > .ara-color-group {
    margin-bottom: 0;
}
/* In sub-cards paired, fielduri stack 1-col (latime redusa) */
.ara-color-row .ara-color-group__fields {
    grid-template-columns: 1fr;
}
@media (max-width: 900px) {
    .ara-color-row {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
 * Paleta brand inline per sub-card + layout 2-col (fields stanga, paleta dreapta)
 * ========================================================================== */
.ara-color-group__layout {
    display: grid;
    grid-template-columns: 1fr 432px;
    gap: 24px;
    align-items: start;
}
@media (max-width: 1100px) {
    .ara-color-group__layout {
        grid-template-columns: 1fr;
    }
}

/* Card-ul cu paleta — replicare design popover, dar inline */
.ara-palette-inline {
    position: relative;
    background: #fff;
    border: 1px solid var(--eco-border, #e3e6ea);
    border-radius: var(--eco-radius, 8px);
    padding: 16px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

/* X close — top-right al cardului alb, rounded SQUARE, doar in picker mode */
.ara-palette-inline__close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 6px;
    color: var(--eco-text-muted, #8e98a6);
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    transition: background .12s, color .12s;
    z-index: 2;
}
.ara-palette-inline.is-picker-mode .ara-palette-inline__close {
    display: inline-flex;
}
.ara-palette-inline__close:hover {
    background: #f2f2f2;
    color: var(--eco-text, #495569);
}
.ara-palette-inline__title {
    font-size: 11px;
    font-weight: 600;
    color: var(--eco-text-muted, #8e98a6);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 12px;
    text-align: center;
}
.ara-palette-inline__grid {
    display: grid;
    grid-template-columns: repeat(6, 32px);
    gap: 10px;
    justify-content: center;
    margin-bottom: 14px;
}
.ara-palette-inline__swatch {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    transition: transform .12s ease;
}
.ara-palette-inline__swatch:hover {
    transform: scale(1.1);
}
.ara-palette-inline__swatch:focus {
    outline: none;
    box-shadow: none;
}
/* Focus state foloseste acelasi halo discret ca .is-current — nu mai
 * adaugam ring auriu in jurul swatch-ului (rounded-square) ci shadow
 * circular pe chip. */
.ara-palette-inline__swatch:focus .ara-palette-inline__chip {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
}
.ara-palette-inline__chip {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    /* Border real cu box-sizing: border-box — Chrome/Safari anti-aliaseaza
     * border-radius:50% mai crisp decat box-shadow inset (care arata
     * pixelat pe rim-ul chip-urilor light). */
    border: 2px solid #E5E7EB;
    box-sizing: border-box;
}
/* Swatch a carui culoare match-uieste valoarea curenta a chenarului
 * activ — shadow auriu soft pe CHIP (border-radius:50%) ca glow-ul sa fie
 * circular, nu rounded-square ca shadow-ul de pe button (border-radius:8px). */
.ara-palette-inline__swatch.is-current .ara-palette-inline__chip {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
}
.ara-palette-inline__custom {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    /* Same width as swatches grid: 6 swatches × 32px + 5 gaps × 10px = 242px */
    width: 242px;
    margin: 0 auto;
    height: 36px;
    padding: 0 12px;
    background: #f5f7fa;
    border: 1px solid var(--eco-border, #e3e6ea);
    border-radius: 6px;
    color: var(--eco-text, #495569);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background .12s, border-color .12s;
}
.ara-palette-inline__custom:hover {
    background: #eef1f5;
    border-color: var(--eco-border-focus, #c3c9d1);
}
.ara-palette-inline__custom svg {
    color: var(--eco-text-muted, #8e98a6);
}

/* Buton .sp-replacer ACTIV in sub-card → border evidentiat */
.ara-color-group .sp-replacer.is-active {
    border-color: var(--eco-accent, #c9a961) !important;
    box-shadow: 0 0 0 2px rgba(201, 169, 97, 0.18) !important;
}

/* ==========================================================================
 * Custom HSV color picker (inline, replaces palette grid când .is-picker-mode)
 * ========================================================================== */
.ara-palette-inline.is-picker-mode .ara-palette-inline__title,
.ara-palette-inline.is-picker-mode .ara-palette-inline__grid,
.ara-palette-inline.is-picker-mode .ara-palette-inline__custom {
    display: none;
}
.ara-palette-inline:not(.is-picker-mode) .ara-picker {
    display: none;
}
.ara-picker {
    position: relative;
    width: 242px;
    margin: 0 auto;
}

/* SV pad: saturation/value 2D area cu gradient layered */
.ara-picker__sv {
    position: relative;
    width: 100%;
    height: 80px;
    background:
        linear-gradient(to top, #000, transparent),
        linear-gradient(to right, #fff, var(--ara-picker-hue, #f00));
    border-radius: 6px;
    cursor: crosshair;
    user-select: none;
    border: 1.5px solid #F2F2F2;
}
.ara-picker__sv-cursor {
    position: absolute;
    width: 14px;
    height: 14px;
    border: 2px solid #fff;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Hue slider — bara cu gradient curcubeu */
.ara-picker__hue {
    position: relative;
    width: 100%;
    height: 14px;
    margin-top: 12px;
    background: linear-gradient(to right,
        #f00 0%, #ff0 16.66%, #0f0 33.33%,
        #0ff 50%, #00f 66.66%, #f0f 83.33%, #f00 100%);
    border-radius: 7px;
    cursor: pointer;
    user-select: none;
    border: 1.5px solid #F2F2F2;
}
.ara-picker__hue-cursor {
    position: absolute;
    top: -3px;
    width: 18px;
    height: 18px;
    border: 2px solid #fff;
    border-radius: 50%;
    transform: translateX(-50%);
    pointer-events: none;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.25);
}

/* Hex input + Back button row — input extends full width to the left
 * (aligned with SV pad left edge), back button compact on the right */
.ara-picker__row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
}
.ara-picker__hex {
    flex: 1;
    height: 32px;
    padding: 0 10px;
    background: #fff;
    border: 1px solid var(--eco-border, #e3e6ea);
    border-radius: 5px;
    color: var(--eco-text, #495569);
    font-family: 'SFMono-Regular', Menlo, Monaco, Consolas, monospace;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    outline: none;
    transition: border-color .12s;
}
.ara-picker__hex:focus {
    border-color: var(--eco-accent, #c9a961);
    box-shadow: 0 0 0 2px rgba(201, 169, 97, 0.18);
}
.ara-picker__back {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    padding: 0;
    background: #f5f7fa;
    border: 1px solid var(--eco-border, #e3e6ea);
    border-radius: 5px;
    color: var(--eco-text-muted, #8e98a6);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .12s, border-color .12s, color .12s;
}
.ara-picker__back:hover {
    background: #eef1f5;
    border-color: var(--eco-border-focus, #c3c9d1);
    color: var(--eco-text, #495569);
}

/* Old .ara-picker__cancel removed — replaced by .ara-palette-inline__close
 * which is positioned at top-right of the white card (not inside picker). */

/* Description text under each sub-card title */
.ara-color-group__desc {
    font-size: 12px;
    color: var(--eco-text-muted, #8e98a6);
    line-height: 1.4;
    margin: -8px 0 14px;
}
.ara-color-group__desc strong {
    color: var(--eco-text, #495569);
    font-weight: 600;
}

/* Checkbox containers (Botble ToggleField) — flex row pe O LINIE:
 * checkbox stanga, label dreapta. Se aplica indiferent unde e plasat
 * (in grid direct sau wrapped in .ara-checkbox-stack). */
.ara-fullwidth-checkbox {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 10px;
    margin: 0 !important;
    padding: 0 !important;
}
.ara-fullwidth-checkbox > * {
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 auto;
    width: auto !important;
}
.ara-fullwidth-checkbox label {
    cursor: pointer;
    font-weight: 500;
    color: var(--eco-text, #495569);
}
.ara-fullwidth-checkbox .form-check,
.ara-fullwidth-checkbox .form-switch {
    flex-shrink: 0;
    padding-left: 0 !important;
    margin-left: 0 !important;
}
.ara-fullwidth-checkbox .form-check-input,
.ara-fullwidth-checkbox input[type="checkbox"] {
    margin: 0 !important;
    float: none !important;
    position: static !important;
}

/* Pozitia in grid: single checkbox sau stack — col 2, top-aligned */
.ara-color-group__fields > .ara-fullwidth-checkbox,
.ara-color-group__fields > .ara-checkbox-stack {
    grid-column: 2;
    align-self: start;
}

/* Stack — checkboxes una sub alta cu 10px gap */
.ara-color-group__fields > .ara-checkbox-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ==========================================================================
 * 13. Modal form fields — extends `main .form-*` scoping to modals
 * ==========================================================================
 * Bug 2026-04-30: shortcode edit modal (#shortcode-modal) renders OUTSIDE
 * <main> (Bootstrap modals teleport to <body>), so the `main .form-control` /
 * `main .form-select` rules above (section 5) don't apply. Selects looked
 * native-Tabler instead of admin-overrides Aragold style.
 *
 * Solution: duplicate the dimensional/visual rules with `.modal` selector
 * scope. We DON'T use :is(main, .modal) because that increases specificity
 * across the whole rule and could regress topbar fixes from 2026-04-21.
 * Pure additive .modal scope keeps changes idempotent.
 * ========================================================================== */

.modal .form-control:not(.form-control-sm):not([type=color]):not([type=file]):not([type=range]),
.modal .form-select:not(.form-select-sm),
.modal textarea.form-control {
    background-color: #fff !important;
    border: 1px solid #dce1e7 !important;
    border-radius: 8px !important;
    color: #495569 !important;
    box-shadow: none !important;
    font-size: 14px !important;
    min-height: 38px !important;
    padding: 8px 12px !important;
}

.modal .form-control:not(.form-control-sm):focus,
.modal .form-control:not(.form-control-sm):focus-visible,
.modal .form-select:not(.form-select-sm):focus,
.modal .form-select:not(.form-select-sm):focus-visible,
.modal textarea.form-control:focus {
    border-color: #97a1ac !important;
    box-shadow: none !important;
    outline: 0 !important;
}

.modal .form-control-sm,
.modal .form-select-sm {
    background-color: #fff !important;
    border: 1px solid #dce1e7 !important;
    border-radius: 6px !important;
    color: #495569 !important;
    font-size: 13px !important;
    min-height: 30px !important;
    padding: 4px 8px !important;
}

.modal .form-control::placeholder {
    color: #97a1ac !important;
    opacity: 1 !important;
}

/* ==========================================================================
 * 14. Sticky form-actions header on scroll
 * ==========================================================================
 * Bug 2026-04-30: pe orice admin/edit, dupa scroll un <header id="form-actions"
 * class="position-fixed top-0 w-100"> se afiseaza cu butoanele Save/Save&Exit.
 * Botble-default e o bara fara background, deci pare ca "publish-card s-a
 * deformat in chenar full-width". User intuitia: ar trebui sa para un card
 * floating elegant.
 *
 * Solutia: bg alb subtil + shadow inferior + container max-width centrat.
 * ========================================================================== */
header#form-actions {
    background: rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: blur(8px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(8px) saturate(140%) !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08), 0 1px 0 rgba(15, 23, 42, 0.05) !important;
    border-bottom: 1px solid #e5e7eb !important;
}
header#form-actions .navbar {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    min-height: auto !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}
header#form-actions .page-pretitle {
    color: #6b7280 !important;
    font-size: 13px !important;
}
header#form-actions .btn-list {
    gap: 8px !important;
}

/* ==========================================================================
 * 15. Simple Slider shortcode modal — shape_1..5 layout 2/2/1
 * ==========================================================================
 * Bug 2026-04-30: shape_1..shape_5 MediaImageField (5 image upload slots din
 * shortcodes-simple-slider.php:91-97) se afisau stacked vertical. User vrea
 * 2 pe rand cu a 5-a singura pe ultimul rand la latimea unei coloane.
 *
 * Solutia: target wrapper .mb-3 care contine .image-box-shape_N via :has().
 * Layout 2x2 + ultimul rand cu 1 element. Spacing 16px gap. CSS-only,
 * fara modificari PHP.
 * ========================================================================== */
.shortcode-modal .mb-3:has(.image-box-shape_1),
.shortcode-modal .mb-3:has(.image-box-shape_2),
.shortcode-modal .mb-3:has(.image-box-shape_3),
.shortcode-modal .mb-3:has(.image-box-shape_4),
.shortcode-modal .mb-3:has(.image-box-shape_5),
.shortcode-modal .mb-3:has(.image-box-image_1),
.shortcode-modal .mb-3:has(.image-box-image_2),
.shortcode-modal .mb-3:has(.image-box-image_3),
.shortcode-modal .mb-3:has(.image-box-image_4),
.shortcode-modal .mb-3:has(.image-box-image_5) {
    float: left;
    width: calc(50% - 8px);
    box-sizing: border-box;
    clear: none;
}
.shortcode-modal .mb-3:has(.image-box-shape_1),
.shortcode-modal .mb-3:has(.image-box-shape_3),
.shortcode-modal .mb-3:has(.image-box-shape_5),
.shortcode-modal .mb-3:has(.image-box-image_1),
.shortcode-modal .mb-3:has(.image-box-image_3),
.shortcode-modal .mb-3:has(.image-box-image_5) {
    margin-right: 16px;
    clear: left;
}
/* Spacer post-ultimul image-box ca floats sa nu strapunga campurile urmatoare. */
.shortcode-modal .mb-3:has(.image-box-shape_5) ~ .mb-3,
.shortcode-modal .mb-3:has(.image-box-image_5) ~ .mb-3 {
    clear: both;
}

/* === Product edit — OnOff toggles: checkbox stanga + titlu dreapta pe acelasi rand === */
/* Aplica pentru meta-box-uri care contin .form-switch (is_featured,
   is_best_seller, is_top_seller). Layout cu CSS grid:
     [switch] [titlu]
     [helper helper]
   card-body are display:contents sa-si "spargem" copiii in grid-ul card-ului. */
.card.meta-boxes:has(> .card-body .form-switch) {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "switch header"
        "hint   hint";
    align-items: center;
    column-gap: 8px;
}
.card.meta-boxes:has(> .card-body .form-switch) > .card-header {
    grid-area: header;
    padding-left: 0;
    border-bottom: none; /* separator mutat pe row 2 (hint border-top) */
}
.card.meta-boxes:has(> .card-body .form-switch) > .card-body {
    display: contents;
}
.card.meta-boxes:has(> .card-body .form-switch) > .card-body > .form-switch {
    grid-area: switch;
    margin: 0 0 0 16px;
    padding: 0;
    align-self: center;
}
.card.meta-boxes:has(> .card-body .form-switch) > .card-body > .form-hint {
    grid-area: hint;
    margin: 0;
    padding: 16px 16px 16px 16px;
    border-top: 1px solid rgba(4, 32, 69, 0.1); /* separator continuu full-width */
}

/* === Input-group: btn-icon mismatch (28px) vs form-control (40px) === */
/* Regula de mai sus .btn.btn-icon foloseste !important pentru 28x28
   (uniform standard admin), insa in input-group cu .form-control 40px asta
   creeaza mismatch vizual. Override cu !important specific pentru context
   .input-group: stretch height pana la nivelul input-ului + gap 6px ca
   butoanele sa fie respirate, nu lipite de input. */
.input-group:has(.btn.btn-icon) {
    gap: 6px;
}
.input-group .btn.btn-icon {
    width: auto !important;
    height: auto !important;
    min-width: 40px !important;
    min-height: 40px !important;
    align-self: stretch;
    border-radius: 6px !important; /* match Botble standard btn-icon radius */
}
/* Bootstrap input-group leaga border-radius (right=0 pentru input cand are
   buton dupa). Cu gap, input devine standalone — restauram radius full. */
.input-group:has(.btn.btn-icon) > .form-control {
    border-radius: 8px !important;
}
/* Cand input-group e folosit doar ca layout wrapper (cu gap + butoane
   standalone), nu mai trebuie shadow/border ca element compus. Botble
   core aplica box-shadow + border-radius pe .input-group ⇒ in noul
   layout creeaza un chenar gri vizibil care inconjura toate 3
   elementele. Eliminam doar pe contextul cu gap. */
.input-group:has(.btn.btn-icon) {
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
}
/* Spatiu intre input-group si form-hint (descriere). Bootstrap nu pune
   default margin-top, dar UI-ul Botble e mai aerat cand exista 8px. */
.card.meta-boxes > .card-body > .input-group + .form-hint,
.card.meta-boxes > .card-body > .input-group + .invalid-feedback + .form-hint,
.card.meta-boxes > .card-body > .input-group ~ .form-hint {
    margin-top: 8px;
}

/* === Categorii widget (tree-categories-list) — font la fel ca form-hint === */
/* Default Botble: form-check-label 14px / 400 / text-primary. Pentru lista
   lunga de categorii pe edit-product (107+ items in nested tree), font-ul
   greu face widget-ul vizual aglomerat. Reducem la 12.25px / 400 / muted
   (acelasi stil ca .form-hint description) ⇒ scan mai rapid. */
[class*="tree-categories-list"] .form-check-label {
    font-size: 0.875em;
    color: var(--tblr-form-hint-color, rgb(108, 122, 145));
}

/* Suprima scrollbar-ul orizontal — Botble seteaza overflow:auto pe list,
   ceea ce produce flicker pe expand/collapse cand sub-trees adauga
   indent (ms-3) si schimba latimea calculata. Pastram doar scrollul
   vertical. */
[class*="tree-categories-list"] {
    overflow-x: hidden !important;
}

/* === Categorii widget — collapsible tree (chevron expand/collapse) === */
/* Markup augmentat de admin-categories-collapsible-tree.js:
   <li class="eco-tree-li-has-children eco-tree-collapsed">
     <label class="form-check">checkbox + text</label>
     <button class="eco-tree-toggle">chevron SVG</button>
     <ul>nested copii</ul>
   </li>
*/
[class*="tree-categories-list"] li.eco-tree-li-has-children {
    position: relative;
}
[class*="tree-categories-list"] li.eco-tree-li-has-children > label.form-check {
    padding-right: 28px; /* spatiu pentru chevron-ul absolut */
}
[class*="tree-categories-list"] .eco-tree-toggle {
    position: absolute;
    top: 0;
    right: 0;
    width: 24px;
    height: 24px;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--tblr-form-hint-color, rgb(108, 122, 145));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.15s ease, color 0.15s ease;
    transform: rotate(90deg); /* default: expanded → chevron pointing down */
}
[class*="tree-categories-list"] .eco-tree-toggle:hover {
    color: var(--tblr-primary, #066fd1);
}
[class*="tree-categories-list"] li.eco-tree-collapsed > .eco-tree-toggle {
    transform: rotate(0deg); /* collapsed → chevron pointing right */
}
[class*="tree-categories-list"] li.eco-tree-collapsed > ul {
    display: none;
}

/* === Disable .is-valid green checkmark + border (Parsley.js noise) === */
/* Botble + Parsley.js aplica .is-valid pe orice input cu valoare validata
   ⇒ bordura verde + bifa SVG green inline. UX-ul devine "screen full of
   green checkmarks" care nu adauga valoare. Eliminam global pe admin.
   PASTRAM .is-invalid (rosu) — utile pentru erori reale. */
.form-control.is-valid,
.was-validated .form-control:valid,
.form-select.is-valid,
.was-validated .form-select:valid,
.form-check-input.is-valid,
.was-validated .form-check-input:valid {
    background-image: none !important;
    border-color: var(--tblr-border-color, #dadfe5) !important;
    padding-right: 0.75rem !important;
}
.form-control.is-valid:focus,
.was-validated .form-control:valid:focus,
.form-select.is-valid:focus,
.was-validated .form-select:valid:focus {
    border-color: var(--tblr-primary, #066fd1) !important;
    box-shadow: var(--tblr-input-focus-box-shadow, 0 0 0 0.25rem rgba(32,107,196,.25)) !important;
}
.input-group:has(.is-valid),
.input-group:has(.is-valid) .form-control {
    border-color: var(--tblr-border-color, #dadfe5) !important;
}

/* === Slide item inline edit — styling consistent === */
/* Sectiunea de optiuni inline NU are hover overlay si NU are background gri.
   Ramane neutra (white pe tema light) — identica cu restul paginii de edit. */
tr.aragold-inline-edit-row,
tr.aragold-inline-edit-row:hover,
tr.aragold-inline-edit-expanded,
tr.aragold-inline-edit-expanded:hover {
    background-color: transparent !important;
    cursor: default;
}
tr.aragold-inline-edit-row > td,
tr.aragold-inline-edit-row:hover > td,
tr.aragold-inline-edit-expanded > td,
tr.aragold-inline-edit-expanded:hover > td {
    background: transparent !important;
    --tblr-table-bg-state: transparent !important;
    --tblr-table-accent-bg: transparent !important;
}
/* Anuleaza si hover-ul DataTables pe randurile editate (DataTables aplica
   adesea propriile :hover prin classe + bg-state vars). */
table.dataTable tr.aragold-inline-edit-row > td,
table.dataTable tr.aragold-inline-edit-row:hover > td,
table.dataTable tr.aragold-inline-edit-expanded > td,
table.dataTable tr.aragold-inline-edit-expanded:hover > td {
    background-color: transparent !important;
    box-shadow: none !important;
}

/* ==========================================================================
 * Disable Botble's sticky top action header that appears on scroll.
 * Source: `platform/core/base/resources/views/forms/partials/form-actions.blade.php`
 * + `Botble.handleWayPoint()` in core.js — when user scrolls past the Publish
 * card, a hidden `<header id="form-actions" class="top-0 w-100 position-fixed
 * end-0 z-1000">` slides in with cloned Save / Save & Exit buttons.
 *
 * Cerere user 2026-05-09: comportamentul mută butoanele într-o bară full-width
 * la scroll și le repoziționează la stânga, ceea ce dă impresia că butoanele
 * "sar" — neacceptat. Sidebar-ul Publish ramane scrollable împreună cu
 * conținutul (utilizatorul scrolează înapoi la sidebar pentru save).
 * ========================================================================== */
header#form-actions.position-fixed {
    display: none !important;
}

/* ==========================================================================
 * Gift / Promotion edit page — filters strip wrapper
 * (categoriile folosesc Botble standard `.select-search-full` Select2,
 * fara CSS custom — patternul Status / restul admin form-urilor.)
 * ========================================================================== */
.gift-products-filters {
    background: #f8f9fa;
    border: 1px solid var(--eco-divider, #eef1f4);
    border-radius: var(--eco-radius, 8px);
    padding: 16px;
}

/* Ensure aragold-section-header e vizibil + styled */
.aragold-section-header {
    margin-top: 24px;
    margin-bottom: 12px;
}
.aragold-section-header h6 {
    color: var(--tblr-secondary, #6c757d);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
}