/* NexifyERP - Professional Form Styling */
/* Consistent form styling across all modules */

/* ==================== Numeric alignment ==================== */
/* Every numeric input is right-aligned by default so digits line up
   Excel-style. Override with `class="... text-left"` for the rare
   number field that should stay left (barcodes, IMEI, etc.). */
input[type="number"] {
    text-align: right;
}

/* ==================== Form Inputs ==================== */
.form-input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="tel"],
input[type="url"],
input[type="search"],
textarea,
select {
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.5;
    height: 2.5rem; /* 40px - consistent height for all inputs */
    color: #374151;
    background-color: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

/* Textarea needs auto height */
textarea {
    height: auto;
    padding: 0.75rem 1rem !important; /* Explicit padding for textarea */
}

/* Focus State */
.form-input:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="datetime-local"]:focus,
input[type="time"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Disabled State */
.form-input:disabled,
input[type="text"]:disabled,
input[type="email"]:disabled,
input[type="password"]:disabled,
input[type="number"]:disabled,
input[type="date"]:disabled,
input[type="datetime-local"]:disabled,
input[type="time"]:disabled,
textarea:disabled,
select:disabled {
    background-color: #f9fafb;
    border-color: #e5e7eb;
    color: #9ca3af;
    cursor: not-allowed;
}

/* ==================== Textarea ==================== */
textarea {
    min-height: 80px;
    resize: vertical;
    padding: 0.75rem 1rem !important; /* Explicit left/right padding */
}

/* ==================== Select Dropdown ==================== */
select {
    /* Match exact height with inputs */
    height: 2.5rem; /* 40px */
    padding: 0.5rem 2.5rem 0.5rem 1rem !important; /* top right bottom left - explicit padding */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

select::-ms-expand {
    display: none;
}

/* Multiple select */
select[multiple] {
    height: auto;
    min-height: 5rem;
    padding: 0.75rem 1rem !important; /* Consistent padding for multiple select */
    background-image: none;
}

/* Select option padding */
select option {
    padding: 0.5rem 1rem; /* Padding for dropdown options */
}

/* ==================== Checkbox & Radio ==================== */
input[type="checkbox"],
input[type="radio"] {
    width: 1rem;
    height: 1rem;
    border: 1px solid #d1d5db;
    border-radius: 0.25rem;
    color: #3b82f6;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
}

input[type="radio"] {
    border-radius: 50%;
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
    background-color: #3b82f6;
    border-color: #3b82f6;
}

input[type="checkbox"]:focus,
input[type="radio"]:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* ==================== Form Labels ==================== */
.form-label,
label {
    display: inline-block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: 0.375rem;
}

/* ==================== Input with Icon ==================== */
.input-icon-wrapper {
    position: relative;
}

.input-icon-wrapper .icon-left {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    pointer-events: none;
}

.input-icon-wrapper .icon-right {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    pointer-events: none;
}

.input-icon-wrapper.has-icon-left input {
    padding-left: 2.5rem;
}

.input-icon-wrapper.has-icon-right input {
    padding-right: 2.5rem;
}

/* ==================== Error State ==================== */
.form-input.error,
input.error,
textarea.error,
select.error {
    border-color: #ef4444;
}

.form-input.error:focus,
input.error:focus,
textarea.error:focus,
select.error:focus {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.form-error,
.error-message {
    color: #ef4444;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

/* ==================== Success State ==================== */
.form-input.success,
input.success,
textarea.success,
select.success {
    border-color: #10b981;
}

.form-input.success:focus,
input.success:focus,
textarea.success:focus,
select.success:focus {
    border-color: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

/* ==================== Form Groups ==================== */
.form-group {
    margin-bottom: 1rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
}

/* ==================== Input Sizes ==================== */
.form-input-sm,
input.form-input-sm,
select.form-input-sm,
textarea.form-input-sm {
    padding: 0.375rem 0.625rem;
    font-size: 0.8125rem;
    height: 2rem; /* 32px */
}

textarea.form-input-sm {
    height: auto;
    padding: 0.5rem 0.75rem !important; /* Proper padding for small textarea */
}

select.form-input-sm {
    padding: 0.375rem 2.25rem 0.375rem 0.875rem !important; /* More left padding */
}

select.form-input-sm option {
    padding: 0.375rem 0.875rem;
}

.form-input-lg,
input.form-input-lg,
select.form-input-lg,
textarea.form-input-lg {
    padding: 0.625rem 0.875rem;
    font-size: 1rem;
    height: 3rem; /* 48px */
}

textarea.form-input-lg {
    height: auto;
    padding: 0.875rem 1.125rem !important; /* Proper padding for large textarea */
}

select.form-input-lg {
    padding: 0.625rem 2.75rem 0.625rem 1.125rem !important; /* More left padding */
}

select.form-input-lg option {
    padding: 0.625rem 1.125rem;
}

/* ==================== Read-only State ==================== */
.form-input:read-only,
input:read-only,
textarea:read-only {
    background-color: #f9fafb;
    cursor: default;
}

/* ==================== Required Field Indicator ==================== */
.required,
label .required {
    color: #ef4444;
    margin-left: 0.125rem;
}

/* ==================== Help Text ==================== */
.form-help,
.help-text {
    color: #6b7280;
    font-size: 0.8125rem;
    margin-top: 0.25rem;
}

/* ==================== File Input ==================== */
input[type="file"] {
    padding: 0.375rem 0.5rem;
    font-size: 0.875rem;
    cursor: pointer;
}

input[type="file"]::-webkit-file-upload-button {
    padding: 0.375rem 0.75rem;
    margin-right: 0.75rem;
    background-color: #f3f4f6;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out;
}

input[type="file"]::-webkit-file-upload-button:hover {
    background-color: #e5e7eb;
}

/* ==================== Search Input ==================== */
input[type="search"] {
    padding-right: 2.5rem;
}

input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

/* ==================== Form Buttons ==================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.5;
    border-radius: 0.375rem;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-primary {
    background-color: #3b82f6;
    color: #ffffff;
}

.btn-primary:hover:not(:disabled) {
    background-color: #2563eb;
}

.btn-secondary {
    background-color: #6b7280;
    color: #ffffff;
}

.btn-secondary:hover:not(:disabled) {
    background-color: #4b5563;
}

.btn-success {
    background-color: #10b981;
    color: #ffffff;
}

.btn-success:hover:not(:disabled) {
    background-color: #059669;
}

.btn-danger {
    background-color: #ef4444;
    color: #ffffff;
}

.btn-danger:hover:not(:disabled) {
    background-color: #dc2626;
}

.btn-outline {
    background-color: transparent;
    border: 1px solid #d1d5db;
    color: #374151;
}

.btn-outline:hover:not(:disabled) {
    background-color: #f9fafb;
}

/* ==================== Select2 ==================== */
/* Single Select */
.select2-container--default .select2-selection--single {
    background-color: #fff;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    /* 40px to match `.form-input` (2.5rem) above and <x-btn size="field">, so a
       filter row of date inputs + a select2 + a Submit button lines up. Was
       38px, which left select2 sitting 2px short of its neighbours. */
    height: 40px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #374151;
    line-height: 38px;   /* height (40px) minus the 1px border top+bottom */
    padding-left: 12px;
    padding-right: 32px;
}

.select2-container--default .select2-selection--single .select2-selection__clear {
    position: absolute;
    top: 50%;
    right: 28px;
    transform: translateY(-50%);
    margin: 0;
    padding: 0;
    line-height: 1;
    font-size: 16px;
    color: #6b7280;
    float: none;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 50%;
    height: 20px;
    transform: translateY(-50%);
}

/* ==================== yajra datatable issue ==================== */
table.dataTable th.text-center,
table.dataTable td.text-center {
    text-align: center !important;
}

table.dataTable th.text-right,
table.dataTable td.text-right {
    text-align: right !important;
}

/* ==================== Responsive Design ==================== */
@media (max-width: 640px) {
    .form-input,
    input,
    textarea,
    select {
        font-size: 1rem; /* Prevents zoom on iOS */
    }
}
/* ==================== modal ==================== */
.modal-content {
    background: white;
    border-radius: 0.75rem;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    max-width: 100%;
    min-width: 35rem;
    padding: 1.5rem;
}

/* ==================== File Inputs ==================== */
/* Style native file input so the "Choose File" button reads as part of the
   same bordered container. Matches the phone-input "+880" badge pattern —
   gray-50 background on the left, single vertical divider, one border around
   the whole thing. Values track .form-input above so every field on a form
   sits at the same height (2.5rem) and uses the same border color/radius. */
input[type="file"] {
    width: 100%;
    height: 2.5rem;
    padding: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: #374151;
    background-color: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    overflow: hidden;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
input[type="file"]:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
input[type="file"]:disabled {
    background-color: #f9fafb;
    color: #9ca3af;
    cursor: not-allowed;
}
input[type="file"]::file-selector-button {
    height: 100%;
    padding: 0 1rem;
    margin-right: 0.75rem;
    font-size: 0.875rem;
    color: #374151;
    background-color: #f9fafb;
    border: 0;
    border-right: 1px solid #d1d5db;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out;
}
input[type="file"]::file-selector-button:hover {
    background-color: #f3f4f6;
}

/* ==================== Mobile list-page ergonomics ==================== *
 * Two rules only, both gated behind max-width: 767px — desktop layout
 * is literally unreachable and unchanged.
 *
 * 1. Filter forms collapse behind a toggle button (mobile-list.js injects
 *    the button and manages the `.mobile-filter-collapsed` class).
 * 2. Tables become horizontally scrollable containers on narrow screens
 *    without any HTML change — merchant finger-scrolls to see wide columns.
 */
.mobile-filter-toggle { display: none; }

/* ==================== DataTables toolbar (all viewports) ====================
   Length dropdown + search input on ONE compact row. Without these overrides,
   the global `select { width: 100%; height: 2.5rem }` at the top of this file
   stretches the length dropdown to fill its <label>, which forces the "Show"
   and "entries" text nodes to wrap onto separate lines — creating the tall
   stacked-vertical toolbar. These rules pin the length select to 70px and
   the filter input to a compact height so both stay inline.

   Previously scoped to @media (max-width: 767px) — moved to top-level because
   desktop suffered the same stacking bug. Nothing here is mobile-only. */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    text-align: left !important;
    margin: 0 0 8px 0 !important;
    padding: 0;
}
.dataTables_wrapper .dataTables_length { float: left !important;  width: auto !important; }
.dataTables_wrapper .dataTables_filter { float: right !important; width: auto !important; }
.dataTables_wrapper .dataTables_filter label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    font-size: 0.75rem;
    line-height: 30px;
    color: #6b7280;
}
.dataTables_wrapper .dataTables_length label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    font-size: 0;
    line-height: 30px;
    color: #6b7280;
}
.dataTables_wrapper .dataTables_length label::before {
    content: 'Show';
    font-size: 0.75rem;
}
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_length option,
.dataTables_wrapper .dataTables_filter input {
    height: 30px !important;
    padding: 4px 8px !important;
    font-size: 0.75rem !important;
    line-height: 1 !important;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: #fff;
    vertical-align: middle;
    box-sizing: border-box;
}
.dataTables_wrapper .dataTables_length select {
    width: 70px !important;
    min-width: 70px !important;
    margin-left: 4px;
}
.dataTables_wrapper .dataTables_filter input {
    width: 130px !important;
    margin-left: 4px;
}
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate { clear: both; }

@media (max-width: 767px) {
    .mobile-filter-toggle {
        display: flex;
        width: 100%;
        justify-content: space-between;
        align-items: center;
        padding: 10px 14px;
        background: #f3f4f6;
        border: 1px solid #d1d5db;
        border-radius: 6px;
        margin-bottom: 12px;
        font-weight: 500;
        color: #374151;
        cursor: pointer;
        font-size: 0.875rem;
    }
    .mobile-filter-toggle .mft-badge {
        background: #3b82f6; color: #fff;
        padding: 2px 8px; border-radius: 10px;
        font-size: 0.75rem; min-width: 22px; text-align: center;
        display: inline-block;
    }
    .mobile-filter-collapsed { display: none !important; }

    /* Table horizontal scroll on mobile. display:block converts the table
       into a scrollable container while preserving all cell/row semantics
       for merchant reading. nowrap keeps rows on one line so the horizontal
       scroll is meaningful (not visually collapsed).
       :not(.dataTable) — DataTables handles its own overflow via the
       Responsive plugin (column hiding + expander rows). Applying
       display:block on a DataTable would break its column layout and
       leave empty width on narrow screens. */
    table:not(.dataTable) {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }
    /* When the page already wraps its table in an .overflow-x-auto div,
       let the wrapper handle horizontal scroll and keep the table in
       native table-layout. Otherwise we'd get two nested scroll containers
       and mobile finger-scroll behaves unpredictably. */
    .overflow-x-auto > table:not(.dataTable) {
        display: table;
        white-space: normal;
    }
    .dataTables_wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* --------------------------------------------------------------
       Block A: page header (title + primary action) stacks vertically.
       Uses :has(h1) — descendant, not direct child — to catch all
       header variants across 66 list pages:
         • Variant A: <div class="flex justify-between"><h1>..</h1><a/></div>
         • Variant B: <div class="flex justify-between"><div><h1/><p/></div><a/></div>
         • Variant C: <div class="flex items-center justify-between">..<div><h1/></div>..</div>
       Safe against inner-card headers with <h2> — those don't match.
       Verified no list page has more than one <h1>.
       -------------------------------------------------------------- */
    /* Header stays HORIZONTAL on mobile — button remains to the right
       of the title. Title flex-shrinks (min-w-0 + ellipsis) so it can't
       push the button off-screen; button gets compact padding + smaller
       font, flex-shrink:0 so it never squishes. Applies to all three
       header variants — direct h1, wrapped h1, and alt-class-order. */
    .flex.justify-between:has(h1) {
        align-items: center;
        gap: 0.5rem;
        /* NO flex-direction change — row layout preserved */
    }
    /* Title container — flexes, shrinkable. Direct h1 OR wrapping div. */
    .flex.justify-between:has(h1) > h1,
    .flex.justify-between:has(h1) > div:has(> h1) {
        flex: 1 1 auto;
        min-width: 0;
    }
    .flex.justify-between:has(h1) h1 {
        font-size: 1rem;
        line-height: 1.5rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    /* Action button — compact, never shrinks. Covers direct child + wrapped
       button patterns (Variants A/B/C).

       Variant D — button wrapped in its own <form> (POST actions like
       Post / Delete / Approve that need a CSRF form). Those sit one level
       deeper than the selectors above reach, so without these two rules they
       kept their full desktop padding while their neighbours shrank, and the
       toolbar rendered with visibly mismatched button heights on mobile.
       Affects vouchers/show, journal-entries/show, purchase-returns/show. */
    .flex.justify-between:has(h1) > a,
    .flex.justify-between:has(h1) > button,
    .flex.justify-between:has(h1) > div > a.btn,
    .flex.justify-between:has(h1) > div > button.btn,
    .flex.justify-between:has(h1) > div > a[class*="bg-"],
    .flex.justify-between:has(h1) > div > button[class*="bg-"],
    .flex.justify-between:has(h1) > div > form > a[class*="bg-"],
    .flex.justify-between:has(h1) > div > form > button[class*="bg-"] {
        flex-shrink: 0;
        padding: 6px 10px !important;
        font-size: 0.75rem !important;
        white-space: nowrap;
        display: inline-flex;
        align-items: center;
    }

    /* Block B: DataTables toolbar rules moved to top-level (line ~522)
       so they apply on desktop too. See the "DataTables toolbar (all
       viewports)" section above the mobile media query. */

    /* Pagination compact on mobile. Buttons shrink, "Previous"/"Next"
       text collapsed to ‹ / › arrows to fit more page numbers in a row.
       Container already centers by DataTables default. */
    .dataTables_wrapper .dataTables_paginate {
        padding: 8px 0 !important;
        font-size: 0.75rem !important;
    }
    .dataTables_wrapper .dataTables_paginate .paginate_button {
        padding: 4px 10px !important;
        font-size: 0.75rem !important;
        margin: 2px !important;
        min-width: 28px;
        text-align: center;
    }
    /* Replace "Previous" and "Next" with arrow glyphs on mobile — saves
       ~120px of width so more numeric page buttons fit on one row. */
    .dataTables_wrapper .dataTables_paginate .paginate_button.previous,
    .dataTables_wrapper .dataTables_paginate .paginate_button.next {
        font-size: 0 !important;
        padding: 4px 10px !important;
    }
    .dataTables_wrapper .dataTables_paginate .paginate_button.previous::before {
        content: '‹';
        font-size: 1.1rem;
        line-height: 1;
    }
    .dataTables_wrapper .dataTables_paginate .paginate_button.next::before {
        content: '›';
        font-size: 1.1rem;
        line-height: 1;
    }
    /* Info row (Showing X of Y): smaller on mobile */
    .dataTables_wrapper .dataTables_info {
        font-size: 0.7rem !important;
        padding: 6px 0 !important;
    }
}

/* ==================== ERPNext-style List Toolbar ==================== */
/* Shared height token — one number governs every toolbar control so the
   search input, filter button, sort button and direction toggle line up
   perfectly. Change --toolbar-h once, everything resizes together. */
:root { --toolbar-h: 2rem; }

/* Toolbar row that wraps <x-list-filters> + <x-list-sort> side-by-side. */
.list-toolbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

/* Compact 32px control used ONLY on list-page toolbars.
   Kept separate from .form-input (40px) so create/edit forms stay dense. */
.filter-input {
    height: var(--toolbar-h, 2rem) !important;
    box-sizing: border-box;
    padding: 0.375rem 0.625rem;
    font-size: 0.8125rem;
    line-height: 1.25;
    color: #374151;
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 0.375rem;
    transition: border-color 0.15s, box-shadow 0.15s;
    width: 100%;
}
.filter-input:hover  { border-color: #d1d5db; }
.filter-input:focus  { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 1px #3b82f6; }
.filter-input::placeholder { color: #9ca3af; }

/* Override the global 40px select rule for select.filter-input.
   !important is needed because the base `select` rule uses it. */
select.filter-input {
    height: var(--toolbar-h) !important;
    padding: 0.25rem 1.75rem 0.25rem 0.625rem !important;
    background-position: right 0.375rem center !important;
    background-size: 1.25em 1.25em !important;
}

.filter-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    flex: 1 1 320px;
    min-width: 0;
}

.filter-search-wrap {
    position: relative;
    flex: 1 1 240px;
    min-width: 0;
}
.filter-search-wrap .filter-search-icon {
    position: absolute;
    left: 0.625rem;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    font-size: 0.75rem;
    pointer-events: none;
}
.filter-search-wrap .filter-input { padding-left: 1.875rem; }

/* Every button in the toolbar shares this base — search, filter, sort, dir toggle. */
.filter-toggle-btn,
.sort-toggle-btn,
.sort-dir-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    height: var(--toolbar-h, 2rem) !important;
    box-sizing: border-box;
    line-height: 1;
    padding: 0 0.75rem;
    font-size: 0.8125rem;
    color: #374151;
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 0.375rem;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.15s, background-color 0.15s;
}
.filter-toggle-btn:hover,
.sort-toggle-btn:hover,
.sort-dir-btn:hover { border-color: #d1d5db; background-color: #f9fafb; }
.filter-toggle-btn.has-active { border-color: #3b82f6; color: #1d4ed8; background-color: #eff6ff; }
.filter-toggle-btn .filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.125rem;
    height: 1.125rem;
    padding: 0 0.25rem;
    font-size: 0.6875rem;
    font-weight: 600;
    color: #ffffff;
    background-color: #3b82f6;
    border-radius: 0.5625rem;
}

/* Select2 inside a filter row — must match --toolbar-h so it aligns with
   the neighbouring native <select>s. Scoped tight so it can't leak into the
   general Select2 usage (form pickers etc.) covered by select2-custom.css. */
.filter-row .select2-container--default .select2-selection--single {
    height: var(--toolbar-h, 2rem) !important;
    min-height: var(--toolbar-h, 2rem) !important;
    padding: 0 0.5rem !important;
    border-color: #e5e7eb !important;
    border-radius: 0.375rem !important;
    font-size: 0.8125rem !important;
    display: flex !important;
    align-items: center !important;
}
.filter-row .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 1.25 !important;
    padding: 0 !important;
    color: #374151;
    flex: 1 1 auto;
}
.filter-row .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #9ca3af;
    line-height: 1.25 !important;
}
.filter-row .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100% !important;
    top: 0 !important;
    transform: none !important;   /* neutralises an earlier rule's translateY(-50%) */
    right: 0.25rem;
    width: 1.25rem;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.filter-row .select2-container--default .select2-selection--single .select2-selection__arrow b {
    /* Default Select2 uses position:absolute + negative margins to center the
       triangle glyph. Flex-centering the parent is more reliable across
       heights, so drop the absolute positioning entirely. */
    position: static !important;
    margin: 0 !important;
    top: auto !important;
    left: auto !important;
}
.filter-row .select2-container--default .select2-selection--single .select2-selection__clear {
    line-height: 1 !important;
    margin-right: 0.25rem;
}

/* Search input inside the Select2 dropdown — must match --toolbar-h so the
   whole filter panel feels consistent. Scoped to .filter-dropdown so it
   only applies to Select2 popups opened from filter rows. */
.filter-dropdown .select2-container--default .select2-search--dropdown .select2-search__field {
    height: var(--toolbar-h, 2rem) !important;
    padding: 0.25rem 0.5rem !important;
    font-size: 0.8125rem !important;
    line-height: 1.25 !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 0.375rem !important;
    box-sizing: border-box !important;
}

/* Sort control — the direction icon is a distinct clickable segment. */
.sort-control { display: inline-flex; }
.sort-dir-btn {
    padding: 0 0.5rem;
    border-right: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    color: #6b7280;
}
.sort-toggle-btn.has-sort-dir {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* Dropdown panel */
.filter-dropdown-wrap { position: relative; }
.filter-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    width: min(28rem, calc(100vw - 2rem));
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.15), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    padding: 0.75rem;
    z-index: 40;
}
.filter-dropdown[hidden] { display: none; }

.filter-dropdown-header {
    display: none;                 /* mobile only */
    align-items: center;
    justify-content: space-between;
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid #f3f4f6;
    font-size: 0.875rem;
    font-weight: 600;
    color: #111827;
}
.filter-dropdown-header .filter-dropdown-close {
    padding: 0.25rem;
    color: #6b7280;
    background: transparent;
    border: 0;
    cursor: pointer;
}

.filter-empty-state {
    padding: 0.75rem 0.25rem;
    font-size: 0.8125rem;
    color: #6b7280;
    text-align: center;
}

.filter-rows { display: flex; flex-direction: column; gap: 0.5rem; }

.filter-row {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1.4fr) auto;
    gap: 0.375rem;
    align-items: center;
    padding: 0.5rem;
    background-color: #f9fafb;
    border: 1px solid #f3f4f6;
    border-radius: 0.375rem;
}
.filter-row .filter-row-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    color: #9ca3af;
    background: transparent;
    border: 0;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: color 0.15s, background-color 0.15s;
}
.filter-row .filter-row-remove:hover { color: #dc2626; background-color: #fef2f2; }

.filter-dropdown-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding-top: 0.75rem;
    margin-top: 0.75rem;
    border-top: 1px solid #f3f4f6;
}
.filter-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.8125rem;
    color: #2563eb;
    background: transparent;
    border: 0;
    cursor: pointer;
}
.filter-add-btn:hover { text-decoration: underline; }
.filter-add-btn:disabled { color: #9ca3af; cursor: not-allowed; text-decoration: none; }
.filter-footer-actions { display: flex; gap: 0.375rem; }
.filter-btn-clear,
.filter-btn-apply {
    height: 2rem;
    padding: 0 0.875rem;
    font-size: 0.8125rem;
    font-weight: 500;
    border-radius: 0.375rem;
    cursor: pointer;
    border: 1px solid transparent;
}
.filter-btn-clear {
    color: #374151;
    background-color: #f3f4f6;
    border-color: #f3f4f6;
}
.filter-btn-clear:hover { background-color: #e5e7eb; border-color: #e5e7eb; }
.filter-btn-apply {
    color: #ffffff;
    background-color: #111827;
    border-color: #111827;
}
.filter-btn-apply:hover { background-color: #000000; border-color: #000000; }

.filter-dropdown-backdrop {
    display: none;                 /* mobile only */
    position: fixed;
    inset: 0;
    background-color: rgba(17, 24, 39, 0.35);
    z-index: 39;
}
.filter-dropdown-backdrop[hidden] { display: none !important; }

/* Footer row layout — length + info sit together on the left, pagination on
   the right. Every property is !important because the wrapper-level
   `.dataTables_wrapper .dataTables_length/info/paginate` rules have higher
   raw specificity (0,2,0) than `.dt-footer-row > *` (0,1,1) and would
   otherwise re-apply float/clear/text-align and break the row. */
.dt-footer-row,
.dataTables_wrapper .dt-footer-row {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    margin-top: 0.75rem !important;
    text-align: left !important;
    width: 100% !important;
}
.dt-footer-row .dataTables_length,
.dt-footer-row .dataTables_info,
.dt-footer-row .dataTables_paginate,
.dataTables_wrapper .dt-footer-row .dataTables_length,
.dataTables_wrapper .dt-footer-row .dataTables_info,
.dataTables_wrapper .dt-footer-row .dataTables_paginate {
    float: none !important;
    clear: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    text-align: left !important;
    display: inline-flex !important;
    align-items: center !important;
}
.dt-footer-row .dataTables_paginate,
.dataTables_wrapper .dt-footer-row .dataTables_paginate {
    margin-left: auto !important;
}

/* Sort dropdown — single-select list of fields, ✓ marks the current one. */
.sort-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    width: min(16rem, calc(100vw - 2rem));
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.15), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    padding: 0.25rem;
    z-index: 40;
    max-height: 60vh;
    overflow-y: auto;
}
.sort-dropdown[hidden] { display: none; }
.sort-dropdown-header {
    padding: 0.375rem 0.625rem;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280;
}
.sort-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.5rem 0.625rem;
    font-size: 0.8125rem;
    color: #374151;
    background: transparent;
    border: 0;
    border-radius: 0.25rem;
    cursor: pointer;
    text-align: left;
}
.sort-option:hover { background-color: #f3f4f6; }
.sort-option.is-current { color: #1d4ed8; font-weight: 500; }
.sort-option .sort-option-check { color: #2563eb; font-size: 0.75rem; }

@media (max-width: 640px) {
    /* Toolbar reflows: search claims its own row (100% wide), filter + sort
       share the row below. `display: contents` on .filter-bar dissolves its
       wrapper so its children participate directly in .list-toolbar's flex
       layout — otherwise sort would be pushed onto a third row. */
    .list-toolbar .filter-search-wrap {
        flex: 1 1 100% !important;
    }
    .list-toolbar > .filter-bar {
        display: contents;
    }

    .filter-row {
        grid-template-columns: 1fr 1fr auto;
    }
    .filter-row .filter-row-value { grid-column: 1 / -1; }

    .filter-dropdown {
        position: fixed;
        inset: auto 0.75rem 0.75rem 0.75rem;
        top: auto;
        right: 0.75rem;
        width: auto;
        max-height: 82vh;
        overflow-y: auto;
    }
    .filter-dropdown-header { display: flex; }
    .filter-dropdown-backdrop:not([hidden]) { display: block; }
    .filter-dropdown .filter-input,
    .filter-dropdown select.filter-input,
    .filter-dropdown .filter-row-remove { min-height: 2.25rem; }
    .filter-dropdown .filter-btn-clear,
    .filter-dropdown .filter-btn-apply { height: 2.25rem; }

    /* Sort dropdown becomes a bottom-anchored sheet on narrow screens,
       matching the filter dropdown pattern — never crops off-viewport. */
    .sort-dropdown {
        position: fixed;
        inset: auto 0.75rem 0.75rem 0.75rem;
        top: auto;
        right: 0.75rem;
        left: 0.75rem;
        width: auto;
        max-height: 60vh;
    }
    .sort-dropdown .sort-option { min-height: 2.25rem; }
}
/* ================================================================
   Image Cropper Modal (partials/image-cropper-modal.blade.php)
   Matches the existing chalika-modal-* visual system. Cropper.js
   ships its own crop-box + zoom-handle styles via the lazily-loaded
   cropper.min.css — we only style the modal chrome + sidebar.
   ================================================================ */
.chalika-cropper-overlay {
    position: fixed; inset: 0; z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    padding: 1rem;
}
.chalika-cropper-overlay.hidden { display: none; }
.chalika-cropper-backdrop {
    position: absolute; inset: 0;
    background: rgba(0, 0, 0, 0.55);
}
.chalika-cropper-shell {
    position: relative;
    background: #fff;
    border-radius: 0.75rem;
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
    width: 100%; max-width: 900px; max-height: 90vh;
    display: flex; flex-direction: column;
    overflow: hidden;
}
.chalika-cropper-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.9rem 1.25rem; border-bottom: 1px solid #e5e7eb;
}
.chalika-cropper-title { font-size: 1.125rem; font-weight: 600; color: #1f2937; margin: 0; }
.chalika-cropper-close {
    background: transparent; border: 0; cursor: pointer;
    width: 2rem; height: 2rem; border-radius: 0.375rem;
    color: #6b7280; display: inline-flex; align-items: center; justify-content: center;
}
.chalika-cropper-close:hover { background: #f3f4f6; color: #111827; }

.chalika-cropper-body {
    display: grid; grid-template-columns: 1fr 220px; gap: 1rem;
    padding: 1rem; min-height: 0; overflow: hidden;
}
.chalika-cropper-canvas-wrap {
    background: #111827; border-radius: 0.5rem;
    min-height: 320px; max-height: 60vh; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}
.chalika-cropper-canvas-wrap img { max-width: 100%; display: block; }

.chalika-cropper-sidebar {
    display: flex; flex-direction: column; gap: 0.75rem;
}
.chalika-cropper-preview-label {
    font-size: 0.75rem; font-weight: 600; color: #6b7280;
    text-transform: uppercase; letter-spacing: 0.05em;
}
/* Cropper.js writes into whatever element you pass as `preview`.
   Force a fixed square so the merchant sees the exact 1:1 result. */
.chalika-cropper-preview {
    width: 180px; height: 180px;
    border: 1px solid #e5e7eb; border-radius: 0.5rem;
    background: #f9fafb; overflow: hidden;
}
.chalika-cropper-zoom-row {
    display: flex; align-items: center; gap: 0.5rem;
}
.chalika-cropper-icon-btn {
    background: #f3f4f6; border: 0; cursor: pointer;
    width: 2rem; height: 2rem; border-radius: 0.375rem;
    color: #374151; display: inline-flex; align-items: center; justify-content: center;
}
.chalika-cropper-icon-btn:hover { background: #e5e7eb; }
.chalika-cropper-zoom-slider { flex: 1; }
.chalika-cropper-hint {
    font-size: 0.75rem; color: #6b7280; line-height: 1.4;
}

.chalika-cropper-footer {
    display: flex; justify-content: flex-end; gap: 0.5rem;
    padding: 0.9rem 1.25rem; border-top: 1px solid #e5e7eb;
    background: #fafafa;
}
.chalika-cropper-btn {
    padding: 0.5rem 1rem; border-radius: 0.5rem;
    font-size: 0.875rem; font-weight: 500; cursor: pointer; border: 0;
    transition: background-color 0.15s ease, opacity 0.15s ease;
}
.chalika-cropper-btn-cancel { background: #e5e7eb; color: #374151; }
.chalika-cropper-btn-cancel:hover { background: #d1d5db; }
.chalika-cropper-btn-reset  { background: #fed7aa; color: #9a3412; }
.chalika-cropper-btn-reset:hover { background: #fdba74; }
.chalika-cropper-btn-apply  { background: #2563eb; color: #fff; }
.chalika-cropper-btn-apply:hover { background: #1d4ed8; }
.chalika-cropper-btn:disabled { opacity: 0.55; cursor: not-allowed; }

@media (max-width: 640px) {
    .chalika-cropper-shell { max-width: 100%; max-height: 100vh; border-radius: 0; }
    .chalika-cropper-body { grid-template-columns: 1fr; }
    .chalika-cropper-sidebar { flex-direction: row; align-items: center; flex-wrap: wrap; }
    .chalika-cropper-preview { width: 96px; height: 96px; }
}