/* ============================================================
   list-theme.css — app-wide restyle of DataTables list pages
   (products, contacts, sells, purchases, expenses, reports…).
   CSS-only. Themes the shared DataTables/select2 markup so every
   list page matches the dashboard's clean card aesthetic.
   Loaded globally from layouts/partials/css.blade.php.
   Tokens kept in sync with dashboard-v2.css.
   ============================================================ */
:root {
    --lt-accent: #FF9F43;
    --lt-accent-soft: rgba(255, 159, 67, 0.15);
    --lt-ink: #212B36;
    --lt-muted: #67748E;
    --lt-border: #E8EBED;
    --lt-row: #F1F5F9;
    --lt-head-bg: #F8FAFC;
    --lt-hover: #FFF7ED;
}

/* ---------- table ---------- */
.dataTables_wrapper table.table {
    border: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0;
    width: 100% !important;
}
.dataTables_wrapper table.table thead th {
    background: var(--lt-head-bg) !important;
    color: #475569 !important;
    font-size: 11.5px !important;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 700 !important;
    border: 0 !important;
    border-bottom: 1px solid var(--lt-border) !important;
    padding: 11px 12px !important;
    white-space: nowrap;
    vertical-align: middle;
}
.dataTables_wrapper table.table tbody td {
    border: 0 !important;
    border-bottom: 1px solid var(--lt-row) !important;
    padding: 11px 12px !important;
    font-size: 13px !important;
    color: #334155 !important;
    vertical-align: middle !important;
}
.dataTables_wrapper table.table.table-striped tbody tr:nth-of-type(odd) {
    background: #FCFCFD !important;
}
.dataTables_wrapper table.table tbody tr:hover {
    background: var(--lt-hover) !important;
}
.dataTables_wrapper table.table tfoot td,
.dataTables_wrapper table.table tfoot th {
    border-top: 1px solid var(--lt-border) !important;
    background: var(--lt-head-bg) !important;
    font-weight: 700;
}
/* product/contact thumbnails inside tables */
.dataTables_wrapper table.table td img {
    border-radius: 8px;
    border: 1px solid var(--lt-border);
    object-fit: cover;
    max-width: 44px;
    height: auto;
}
/* empty-state cell */
.dataTables_wrapper table.table td.dataTables_empty {
    padding: 34px 12px !important;
    color: #94A3B8 !important;
    font-size: 13px;
    font-style: normal;
    text-align: center;
}

/* ---------- export / column-visibility buttons (.dt-buttons) ---------- */
.dt-buttons {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
}
.dt-buttons .dt-button,
.dt-buttons .btn,
.dt-buttons > .tw-dw-btn {
    background: #fff !important;
    border: 1px solid var(--lt-border) !important;
    color: #475569 !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 6px 12px !important;
    height: auto !important;
    min-height: 0 !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    box-shadow: none !important;
    text-transform: none !important;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.dt-buttons .dt-button:hover,
.dt-buttons .btn:hover,
.dt-buttons > .tw-dw-btn:hover,
.dt-buttons .dt-button.active {
    background: var(--lt-ink) !important;
    border-color: var(--lt-ink) !important;
    color: #fff !important;
}

/* ---------- length select + search box ---------- */
.dataTables_length select,
.dataTables_filter input {
    border: 1px solid var(--lt-border) !important;
    border-radius: 8px !important;
    padding: 6px 10px !important;
    height: 34px;
    font-size: 13px;
    box-shadow: none !important;
    background-color: #fff !important;
}
.dataTables_filter input:focus,
.dataTables_length select:focus {
    border-color: var(--lt-accent) !important;
    box-shadow: 0 0 0 3px var(--lt-accent-soft) !important;
    outline: none !important;
}
.dataTables_filter label,
.dataTables_length label {
    font-weight: 600;
    color: var(--lt-muted);
    font-size: 13px;
}
.dataTables_info {
    color: var(--lt-muted);
    font-size: 12.5px;
    padding-top: 10px !important;
}

/* ---------- pagination ---------- */
.dataTables_paginate .paginate_button {
    border-radius: 8px !important;
    margin: 0 2px !important;
    padding: 5px 11px !important;
    border: 1px solid var(--lt-border) !important;
    background: #fff !important;
    color: #475569 !important;
}
.dataTables_paginate .paginate_button.current,
.dataTables_paginate .paginate_button.current:hover {
    background: var(--lt-ink) !important;
    border-color: var(--lt-ink) !important;
    color: #fff !important;
}
.dataTables_paginate .paginate_button:hover {
    background: #F1F5F9 !important;
    color: var(--lt-ink) !important;
    border-color: var(--lt-border) !important;
}
.dataTables_paginate .paginate_button.disabled,
.dataTables_paginate .paginate_button.disabled:hover {
    background: #fff !important;
    color: #CBD5E1 !important;
    border-color: var(--lt-border) !important;
    cursor: default;
}
/* hide the empty ellipsis spans that render as bare boxes */
.dataTables_paginate span .ellipsis {
    border: 0 !important;
    background: transparent !important;
}

/* ---------- select2 single/multi to match the inputs ---------- */
.select2-container .select2-selection--single {
    height: 34px !important;
    border-radius: 8px !important;
    border: 1px solid var(--lt-border) !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 32px !important;
    padding-left: 12px !important;
    color: #334155;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 32px !important;
}
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default .select2-selection--multiple {
    border-radius: 8px !important;
    border: 1px solid var(--lt-border) !important;
}

/* ============================================================
   Track 2 — button hierarchy on list pages
   ============================================================ */

/* Primary action buttons (+Add / Download) — the gradient "pill" appears on
   ~35 index pages and ONLY ever on `.tw-dw-btn`. Flatten it to one solid,
   theme-coloured 8px button so every list page has a consistent primary
   action. `var(--theme-700)` is the business's own header theme colour, so
   the button automatically matches whatever skin the business picked. */
.tw-dw-btn.tw-bg-gradient-to-r {
    background-image: none !important;
    background-color: var(--theme-700, #1B6FC2) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08) !important;
}
.tw-dw-btn.tw-bg-gradient-to-r:hover {
    filter: brightness(0.94);
    color: #fff !important;
}

/* Bulk-action buttons (products list). daisyUI semantic colour classes are
   used app-wide (tw-dw-btn-neutral is in 105 files), so we do NOT override
   those globally — we scope to the product bulk buttons' own selectors.
   Keep the destructive action (Delete) red; make the rest one neutral grey. */
#delete-selected {
    border-radius: 8px !important;
}
.update_product_location,
#deactivate-selected {
    border-radius: 8px !important;
    color: #475569 !important;
    border-color: #CBD5E1 !important;
    background: #fff !important;
}
.update_product_location:hover,
#deactivate-selected:hover {
    background: #F1F5F9 !important;
    color: var(--lt-ink) !important;
    border-color: #CBD5E1 !important;
}

/* ---------- scope guard ----------
   The dashboard's own legacy tables live inside `.dp-legacy` / `.dash-card`
   and already carry their own matching theme in dashboard-v2.css. These
   global rules are visually identical, so there is no conflict; this block
   documents that overlap intentionally. */