/**
 * BardPOS-style back-office tables & list pages
 * UI only — blue accents (replaces yellow). Applies to core app + modules.
 */

/* ── List page shell ─────────────────────────────────────── */
#scrollable-container section.content {
    padding-top: 0.25rem;
}

#scrollable-container section.content-header {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0.25rem 0 0.75rem !important;
    margin: 0 0 0.5rem !important;
}

#scrollable-container section.content-header h1,
#scrollable-container section.content-header .h1 {
    font-size: 1.45rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    line-height: 1.25 !important;
    margin: 0 !important;
}

#scrollable-container section.content-header h1 small,
#scrollable-container section.content-header .h1 small {
    display: block !important;
    font-size: 0.88rem !important;
    font-weight: 400 !important;
    color: #94a3b8 !important;
    margin-top: 0.2rem !important;
    line-height: 1.35 !important;
}

/* White card containers for list areas */
#scrollable-container .nav-tabs-custom,
#scrollable-container section.content > .box,
#scrollable-container .box.box-solid,
#scrollable-container .box.box-primary {
    background: #ffffff !important;
    border: none !important;
    border-radius: 14px !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 4px 16px rgba(15, 23, 42, 0.04) !important;
    overflow: hidden;
}

#scrollable-container .nav-tabs-custom > .nav-tabs {
    border-bottom: 1px solid #eef1f4 !important;
    background: #fafbfc !important;
    padding: 0.35rem 0.75rem 0 !important;
}

#scrollable-container .nav-tabs-custom > .nav-tabs > li > a {
    border-radius: 8px 8px 0 0 !important;
    color: #64748b !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    border: none !important;
    margin-right: 4px !important;
}

#scrollable-container .nav-tabs-custom > .nav-tabs > li.active > a,
#scrollable-container .nav-tabs-custom > .nav-tabs > li.active > a:hover,
#scrollable-container .nav-tabs-custom > .nav-tabs > li.active > a:focus {
    background: #ffffff !important;
    color: #2563eb !important;
    border: none !important;
    box-shadow: inset 0 -2px 0 #2563eb;
}

#scrollable-container .nav-tabs-custom > .tab-content {
    padding: 1rem 1.15rem 1.15rem !important;
}

#scrollable-container .box-header {
    background: #fafbfc !important;
    border-bottom: 1px solid #eef1f4 !important;
    padding: 0.85rem 1.15rem !important;
}

#scrollable-container .box-body {
    padding: 1rem 1.15rem !important;
}

/* Filter panels */
#scrollable-container .box.box-solid > .box-header.with-border,
#scrollable-container .box.filter-box .box-header {
    background: #f8fafc !important;
}

/* ── DataTables wrapper (toolbar + table card) ─────────── */
#scrollable-container .dataTables_wrapper {
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 4px 16px rgba(15, 23, 42, 0.04);
    padding: 1rem 1.15rem 0.85rem;
}

#scrollable-container .nav-tabs-custom .dataTables_wrapper,
#scrollable-container .box-body .dataTables_wrapper,
#scrollable-container .bard-widgets-grid .dataTables_wrapper,
#scrollable-container .bard-dashboard-body .dataTables_wrapper,
#scrollable-container .tw-bg-white .dataTables_wrapper {
    box-shadow: none;
    border-radius: 0;
    padding: 0.5rem 0 0;
    background: transparent;
}

/* Tables not wrapped by DataTables init */
#scrollable-container section.content .box-body > .table-responsive,
#scrollable-container section.content .tab-content > .table-responsive {
    background: #ffffff;
    border-radius: 12px;
    padding: 0.75rem;
}

#scrollable-container .dataTables_wrapper .row:first-child {
    margin-bottom: 0.85rem !important;
    align-items: center;
}

#scrollable-container .dataTables_length label,
#scrollable-container .dataTables_filter label,
#scrollable-container .dataTables_info {
    font-size: 0.82rem !important;
    color: #64748b !important;
    font-weight: 500 !important;
}

#scrollable-container .dataTables_length select,
#scrollable-container .dataTables_filter input {
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 0.35rem 0.6rem !important;
    min-height: 34px;
    font-size: 0.82rem !important;
    color: #334155 !important;
    background: #fff !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

#scrollable-container .dataTables_filter input {
    min-width: 180px;
    margin-left: 0.35rem !important;
}

#scrollable-container .dataTables_filter input:focus,
#scrollable-container .dataTables_length select:focus {
    border-color: #2563eb !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important;
}

/* Export / column visibility buttons */
#scrollable-container .dt-buttons,
#scrollable-container .dt-buttons.btn-group {
    display: inline-flex !important;
    flex-wrap: wrap;
    gap: 0.35rem;
}

#scrollable-container .dt-buttons .dt-button,
#scrollable-container .dt-buttons .btn,
#scrollable-container .dt-buttons a.btn,
#scrollable-container .dt-button {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #334155 !important;
    border-radius: 7px !important;
    font-size: 0.76rem !important;
    font-weight: 600 !important;
    padding: 0.4rem 0.7rem !important;
    margin: 0 !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
    line-height: 1.3 !important;
}

#scrollable-container .dt-buttons .dt-button:hover,
#scrollable-container .dt-buttons .btn:hover,
#scrollable-container .dt-buttons a.btn:hover {
    background: #f8fafc !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}

#scrollable-container ul.dt-button-collection {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12) !important;
    padding: 0.35rem !important;
}

#scrollable-container ul.dt-button-collection .dt-button {
    border: none !important;
    box-shadow: none !important;
    width: 100%;
    text-align: left;
    border-radius: 6px !important;
}

/* ── Table core ─────────────────────────────────────────── */
#scrollable-container .table {
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    width: 100% !important;
    margin-bottom: 0.5rem !important;
    background: #ffffff;
    table-layout: auto;
}

#scrollable-container .table-bordered {
    border: none !important;
}

#scrollable-container .table-bordered > thead > tr > th,
#scrollable-container .table-bordered > thead > tr > td,
#scrollable-container .table-bordered > tbody > tr > th,
#scrollable-container .table-bordered > tbody > tr > td,
#scrollable-container .table-bordered > tfoot > tr > th,
#scrollable-container .table-bordered > tfoot > tr > td {
    border-left: none !important;
    border-right: none !important;
}

#scrollable-container .table > thead > tr > th,
#scrollable-container .table > thead > tr > td,
#scrollable-container table.dataTable thead th,
#scrollable-container table.dataTable thead td {
    background: #eef2f7 !important;
    color: #475569 !important;
    font-weight: 700 !important;
    font-size: 0.72rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    border-top: none !important;
    border-bottom: 1px solid #dde3ea !important;
    padding: 0.65rem 0.85rem !important;
    vertical-align: middle !important;
    white-space: nowrap;
    box-sizing: border-box !important;
}

/* Sortable headers — room for Bootstrap glyph sort icon (needs padding-right ≥ 30px) */
#scrollable-container table.dataTable thead > tr > th.sorting,
#scrollable-container table.dataTable thead > tr > th.sorting_asc,
#scrollable-container table.dataTable thead > tr > th.sorting_desc,
#scrollable-container table.dataTable thead > tr > td.sorting,
#scrollable-container table.dataTable thead > tr > td.sorting_asc,
#scrollable-container table.dataTable thead > tr > td.sorting_desc,
#scrollable-container .table > thead > tr > th.sorting,
#scrollable-container .table > thead > tr > th.sorting_asc,
#scrollable-container .table > thead > tr > th.sorting_desc {
    cursor: pointer;
    position: relative !important;
    padding-right: 2rem !important;
    background-image: none !important;
}

#scrollable-container table.dataTable thead .sorting:after,
#scrollable-container table.dataTable thead .sorting_asc:after,
#scrollable-container table.dataTable thead .sorting_desc:after,
#scrollable-container table.dataTable thead .sorting_asc_disabled:after,
#scrollable-container table.dataTable thead .sorting_desc_disabled:after {
    top: 50% !important;
    bottom: auto !important;
    right: 0.6rem !important;
    transform: translateY(-50%);
    opacity: 0.45;
}

#scrollable-container table.dataTable thead .sorting_asc:after,
#scrollable-container table.dataTable thead .sorting_desc:after {
    opacity: 0.75;
}

#scrollable-container .table > tbody > tr > td,
#scrollable-container table.dataTable tbody td,
#scrollable-container table.dataTable tbody th {
    padding: 0.65rem 0.85rem !important;
    vertical-align: middle !important;
    color: #1e293b !important;
    font-size: 0.84rem !important;
    border-top: none !important;
    border-bottom: 1px solid #eef1f4 !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
    white-space: normal;
    word-break: break-word;
}

/* Checkbox column — only when the first cell actually contains a checkbox */
#scrollable-container table.dataTable thead > tr > th:first-child:has(input[type="checkbox"]),
#scrollable-container table.dataTable tbody > tr > td:first-child:has(input[type="checkbox"]) {
    width: 2.75rem;
    min-width: 2.75rem;
    max-width: 3.25rem;
    text-align: center;
    padding-left: 0.45rem !important;
    padding-right: 0.45rem !important;
    white-space: nowrap;
}

/* Action / dropdown columns — prevent buttons spilling into neighbours */
#scrollable-container table.dataTable tbody > tr > td:has(.btn-group),
#scrollable-container table.dataTable tbody > tr > td:has(> .dropdown),
#scrollable-container table.dataTable tbody > tr > td:has(.btn-group-vertical) {
    min-width: 7.5rem;
    width: 7.5rem;
    white-space: nowrap;
    overflow: visible;
    word-break: normal;
}

#scrollable-container table.dataTable tbody > tr > td .btn-group,
#scrollable-container table.dataTable tbody > tr > td .dropdown {
    display: inline-flex;
    flex-wrap: nowrap;
    vertical-align: middle;
}

#scrollable-container .table-striped > tbody > tr:nth-of-type(odd) > td,
#scrollable-container .table-striped > tbody > tr:nth-of-type(odd) > th {
    background: #ffffff !important;
}

#scrollable-container .table-striped > tbody > tr:nth-of-type(even) > td,
#scrollable-container .table-striped > tbody > tr:nth-of-type(even) > th {
    background: #fafbfc !important;
}

#scrollable-container .table > tbody > tr:hover > td {
    background: #f0f7ff !important;
}

#scrollable-container .table > tfoot > tr > td,
#scrollable-container .table > tfoot > tr > th {
    background: #fafbfc !important;
    border-top: 1px solid #eef1f4 !important;
    border-bottom: none !important;
    padding: 0.75rem 0.85rem !important;
}

/* Checkbox column */
#scrollable-container .table input[type="checkbox"] {
    width: 15px;
    height: 15px;
    accent-color: #2563eb;
}

/* Action dropdown / ellipsis */
#scrollable-container .table .btn-group .dropdown-toggle,
#scrollable-container .table .dropdown-toggle {
    border: 1px solid #e2e8f0 !important;
    background: #fff !important;
    border-radius: 6px !important;
    color: #475569 !important;
    padding: 0.25rem 0.5rem !important;
    box-shadow: none !important;
}

/* Info tooltips in headers/cells — blue not yellow */
#scrollable-container .table .fa-info-circle.text-info,
#scrollable-container .table .fa-info-circle.text-warning,
#scrollable-container .table .text-info.fa {
    color: #2563eb !important;
}

/* ── Pagination ─────────────────────────────────────────── */
#scrollable-container .dataTables_wrapper .dataTables_paginate {
    margin-top: 0.65rem !important;
    padding-top: 0 !important;
}

#scrollable-container .dataTables_wrapper .dataTables_paginate .paginate_button {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 7px !important;
    color: #475569 !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    margin: 0 0.15rem !important;
    padding: 0.3rem 0.65rem !important;
    min-width: 2rem;
    box-shadow: none !important;
}

#scrollable-container .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}

#scrollable-container .dataTables_wrapper .dataTables_paginate .paginate_button.current,
#scrollable-container .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: #2563eb !important;
    border-color: #2563eb !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.28) !important;
}

#scrollable-container .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
#scrollable-container .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    background: #f8fafc !important;
    color: #cbd5e1 !important;
    border-color: #eef1f4 !important;
}

/* ── Primary actions (blue instead of yellow) ───────────── */
#scrollable-container section.content .btn-warning,
#scrollable-container section.content input.btn-warning,
#scrollable-container section.content button.btn-warning {
    background: #2563eb !important;
    border-color: #2563eb !important;
    color: #ffffff !important;
}

#scrollable-container section.content .btn-warning:hover,
#scrollable-container section.content input.btn-warning:hover,
#scrollable-container section.content button.btn-warning:hover {
    background: #1d4ed8 !important;
    border-color: #1d4ed8 !important;
    color: #ffffff !important;
}

#scrollable-container .tw-dw-btn-warning,
#scrollable-container input.tw-dw-btn-warning,
#scrollable-container button.tw-dw-btn-warning {
    background-color: #2563eb !important;
    border-color: #2563eb !important;
    color: #ffffff !important;
    --tw-bg-opacity: 1;
}

#scrollable-container .tw-dw-btn-outline.tw-dw-btn-warning {
    background: transparent !important;
    color: #2563eb !important;
    border-color: #93c5fd !important;
}

#scrollable-container .tw-dw-btn-outline.tw-dw-btn-warning:hover {
    background: #eff6ff !important;
    border-color: #2563eb !important;
    color: #1d4ed8 !important;
}

#scrollable-container .tw-dw-btn-primary,
#scrollable-container button.tw-dw-btn-primary,
#scrollable-container input.tw-dw-btn-primary {
    background-color: #2563eb !important;
    border-color: #2563eb !important;
    color: #ffffff !important;
}

#scrollable-container .tw-dw-btn-outline.tw-dw-btn-primary {
    color: #2563eb !important;
    border-color: #93c5fd !important;
}

#scrollable-container .tw-dw-btn-outline.tw-dw-btn-primary:hover {
    background: #eff6ff !important;
}

/* Header CTA buttons (Add, Download Excel, etc.) */
#scrollable-container section.content a[class*="tw-from-indigo"],
#scrollable-container section.content a[class*="tw-to-blue"],
#scrollable-container section.content .tw-dw-btn[class*="tw-bg-gradient"] {
    background: #2563eb !important;
    background-image: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
    border: none !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    padding: 0.45rem 0.9rem !important;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.22) !important;
}

#scrollable-container section.content a[class*="tw-from-indigo"]:hover,
#scrollable-container section.content a[class*="tw-to-blue"]:hover {
    background: #1d4ed8 !important;
    background-image: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    color: #ffffff !important;
}

/* Outline / secondary header buttons */
#scrollable-container section.content .btn-default,
#scrollable-container section.content .btn-app,
#scrollable-container section.content .tw-dw-btn-outline:not(.tw-dw-btn-error):not(.tw-dw-btn-neutral) {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #334155 !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

/* Bulk action row under table */
#scrollable-container table tfoot .tw-dw-btn,
#scrollable-container table tfoot .btn,
#scrollable-container table tfoot input[type="submit"],
#scrollable-container table tfoot button {
    border-radius: 7px !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    padding: 0.35rem 0.75rem !important;
    margin: 0.15rem 0.25rem 0.15rem 0 !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05) !important;
}

#scrollable-container table tfoot .tw-dw-btn-neutral,
#scrollable-container table tfoot .tw-dw-btn-accent,
#scrollable-container table tfoot .btn-default {
    background: #1a233a !important;
    border-color: #1a233a !important;
    color: #ffffff !important;
}

#scrollable-container table tfoot .tw-dw-btn-neutral:hover,
#scrollable-container table tfoot .tw-dw-btn-accent:hover {
    background: #243049 !important;
    border-color: #243049 !important;
}

#scrollable-container table tfoot .tw-dw-btn-error,
#scrollable-container table tfoot .btn-danger {
    background: #ffffff !important;
    border: 1px solid #fecaca !important;
    color: #dc2626 !important;
}

#scrollable-container table tfoot .tw-dw-btn-error:hover,
#scrollable-container table tfoot .btn-danger:hover {
    background: #fef2f2 !important;
    border-color: #f87171 !important;
}

/* ── Module tables (same layout hook) ───────────────────── */
#scrollable-container .module-content .table,
#scrollable-container [class*="module"] .dataTables_wrapper,
#scrollable-container .content-wrapper .table {
    /* inherits rules above via #scrollable-container */
}

/* Responsive table scroll */
#scrollable-container .table-responsive {
    border: none !important;
    border-radius: 10px;
    margin-bottom: 0;
}

/* ── Full-width DataTables (scrollX / scrollY) ─────────── */
#scrollable-container section.content,
#scrollable-container section.content > .row,
#scrollable-container section.content > .row > [class*="col-"],
#scrollable-container .nav-tabs-custom,
#scrollable-container .nav-tabs-custom > .tab-content,
#scrollable-container .nav-tabs-custom .tab-pane {
    width: 100%;
    max-width: 100%;
}

#scrollable-container .dataTables_wrapper {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

#scrollable-container .dataTables_wrapper .dataTables_scroll {
    width: 100% !important;
}

#scrollable-container .dataTables_wrapper .dataTables_scrollHead,
#scrollable-container .dataTables_wrapper .dataTables_scrollBody,
#scrollable-container .dataTables_wrapper .dataTables_scrollFoot {
    width: 100% !important;
}

/* ScrollX / scrollY — let DataTables set column widths; keep header/body in sync */
#scrollable-container .dataTables_wrapper .dataTables_scroll {
    width: 100% !important;
    overflow: visible;
}

#scrollable-container .dataTables_wrapper .dataTables_scrollHead {
    overflow: hidden !important;
    width: 100% !important;
}

#scrollable-container .dataTables_wrapper .dataTables_scrollBody {
    overflow: auto !important;
    width: 100% !important;
    -webkit-overflow-scrolling: touch;
}

/* Reserve scrollbar gutter when vertical scroll is active */
#scrollable-container .dataTables_wrapper .dataTables_scrollBody::-webkit-scrollbar {
    height: 10px;
    width: 10px;
}

#scrollable-container .dataTables_scrollHeadInner,
#scrollable-container .dataTables_scrollFootInner {
    box-sizing: border-box !important;
    padding-right: 0 !important;
    margin-right: 0 !important;
}

#scrollable-container .dataTables_scrollHeadInner table,
#scrollable-container .dataTables_scrollBody table.dataTable,
#scrollable-container .dataTables_scrollFootInner table,
#scrollable-container .dataTables_scrollHead table.dataTable,
#scrollable-container .dataTables_scrollBody table,
#scrollable-container .dataTables_scrollFoot table {
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    table-layout: auto !important;
}

#scrollable-container .dataTables_scrollHead .table > thead > tr > th,
#scrollable-container .dataTables_scrollHead .table > thead > tr > td,
#scrollable-container .dataTables_scrollHeadInner .table > thead > tr > th,
#scrollable-container .dataTables_scrollHeadInner .table > thead > tr > td,
#scrollable-container .dataTables_scrollBody .table > tbody > tr > td,
#scrollable-container .dataTables_scrollBody .table > tbody > tr > th {
    box-sizing: border-box !important;
}

@media (max-width: 767px) {
    #scrollable-container .dataTables_wrapper {
        padding: 0.75rem 0.65rem;
    }

    #scrollable-container .dt-buttons {
        margin-bottom: 0.5rem;
    }

    #scrollable-container .dataTables_filter input {
        min-width: 120px;
    }
}