/* Global DataTable Styling for All Templates */

/* Target DataTable dynamically created rows */
#data tbody tr td {
    line-height: 2.0 !important;
    padding: 0.25rem 0.5rem !important;
}

#data thead tr th {
    line-height: 1.2 !important;
    padding: 0.5rem 0.75rem !important;
}

/* More height for dt_group class */
.dt_group {
    line-height: 1.4 !important;
    padding: 0.75rem 1rem !important;
}

/* ID column should have more width to prevent overlap */
#data th:nth-child(2),
#data td:nth-child(2) {
    min-width: 80px !important;
    width: 80px !important;
    white-space: nowrap !important;
}

/* Target all table rows globally */
.table td, .table th {
    line-height: 2.0 !important;
    padding: 0.25rem 0.5rem !important;
}

/* Force styling on DataTable rows after they're created */
#data tbody tr {
    line-height: 2.0 !important;
}

#data thead tr {
    line-height: 1.2 !important;
}

/* Make it even more compact for mobile */
@media (max-width: 768px) {
    #data tbody tr td {
        line-height: 2.0 !important;
        padding: 0.2rem 0.4rem !important;
    }
    
    #data thead tr th {
        line-height: 1.1 !important;
        padding: 0.35rem 0.5rem !important;
    }

    .table td, .table th {
        line-height: 2.0 !important;
        padding: 0.2rem 0.4rem !important;
    }
}

/* Additional DataTable optimizations */
.table-responsive {
    font-size: 0.875rem;
}

.table-compact tbody tr:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.table-compact.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, 0.02);
}

.table-compact .action-buttons {
    white-space: nowrap;
    min-width: 120px;
}

.table-compact .status-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 0.5rem;
}

.status-active { background-color: #28a745; }
.status-inactive { background-color: #6c757d; }
.status-pending { background-color: #ffc107; }
.status-error { background-color: #dc3545; }

/* --------------------------------------------------------------------------
   DataTables: professional sort icons (stroke chevrons, not ▲/▼ text)
   -------------------------------------------------------------------------- */
/* SVG data URIs: 10×6 viewBox, round caps */
table.dataTable {
    --dt-chevron-up-muted: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 5L5 1L9 5' fill='none' stroke='%2394a3b8' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --dt-chevron-down-muted: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1L5 5L9 1' fill='none' stroke='%2394a3b8' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --dt-chevron-up-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 5L5 1L9 5' fill='none' stroke='%230d6efd' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --dt-chevron-down-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1L5 5L9 1' fill='none' stroke='%230d6efd' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

[data-bs-theme="dark"] table.dataTable,
[data-theme-mode="dark"] table.dataTable {
    --dt-chevron-up-muted: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 5L5 1L9 5' fill='none' stroke='%2394a3b8' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --dt-chevron-down-muted: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1L5 5L9 1' fill='none' stroke='%2394a3b8' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --dt-chevron-up-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 5L5 1L9 5' fill='none' stroke='%236ea8fe' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --dt-chevron-down-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1L5 5L9 1' fill='none' stroke='%236ea8fe' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

table.dataTable thead > tr > th.sorting,
table.dataTable thead > tr > th.sorting_asc,
table.dataTable thead > tr > th.sorting_desc,
table.dataTable thead > tr > th.sorting_asc_disabled,
table.dataTable thead > tr > th.sorting_desc_disabled,
table.dataTable thead > tr > td.sorting,
table.dataTable thead > tr > td.sorting_asc,
table.dataTable thead > tr > td.sorting_desc,
table.dataTable thead > tr > td.sorting_asc_disabled,
table.dataTable thead > tr > td.sorting_desc_disabled {
    cursor: pointer;
    position: relative;
    padding-right: 1.65rem !important;
    user-select: none;
    vertical-align: middle;
}

[dir="rtl"] table.dataTable thead > tr > th.sorting,
[dir="rtl"] table.dataTable thead > tr > th.sorting_asc,
[dir="rtl"] table.dataTable thead > tr > th.sorting_desc,
[dir="rtl"] table.dataTable thead > tr > th.sorting_asc_disabled,
[dir="rtl"] table.dataTable thead > tr > th.sorting_desc_disabled,
[dir="rtl"] table.dataTable thead > tr > td.sorting,
[dir="rtl"] table.dataTable thead > tr > td.sorting_asc,
[dir="rtl"] table.dataTable thead > tr > td.sorting_desc,
[dir="rtl"] table.dataTable thead > tr > td.sorting_asc_disabled,
[dir="rtl"] table.dataTable thead > tr > td.sorting_desc_disabled {
    padding-right: 0.75rem !important;
    padding-left: 1.65rem !important;
}

[dir="rtl"] table.dataTable thead > tr > th.sorting:before,
[dir="rtl"] table.dataTable thead > tr > th.sorting:after,
[dir="rtl"] table.dataTable thead > tr > th.sorting_asc:before,
[dir="rtl"] table.dataTable thead > tr > th.sorting_asc:after,
[dir="rtl"] table.dataTable thead > tr > th.sorting_desc:before,
[dir="rtl"] table.dataTable thead > tr > th.sorting_desc:after,
[dir="rtl"] table.dataTable thead > tr > th.sorting_asc_disabled:before,
[dir="rtl"] table.dataTable thead > tr > th.sorting_asc_disabled:after,
[dir="rtl"] table.dataTable thead > tr > th.sorting_desc_disabled:before,
[dir="rtl"] table.dataTable thead > tr > th.sorting_desc_disabled:after,
[dir="rtl"] table.dataTable thead > tr > td.sorting:before,
[dir="rtl"] table.dataTable thead > tr > td.sorting:after,
[dir="rtl"] table.dataTable thead > tr > td.sorting_asc:before,
[dir="rtl"] table.dataTable thead > tr > td.sorting_asc:after,
[dir="rtl"] table.dataTable thead > tr > td.sorting_desc:before,
[dir="rtl"] table.dataTable thead > tr > td.sorting_desc:after,
[dir="rtl"] table.dataTable thead > tr > td.sorting_asc_disabled:before,
[dir="rtl"] table.dataTable thead > tr > td.sorting_asc_disabled:after,
[dir="rtl"] table.dataTable thead > tr > td.sorting_desc_disabled:before,
[dir="rtl"] table.dataTable thead > tr > td.sorting_desc_disabled:after {
    right: auto;
    left: 0.55rem;
}

table.dataTable thead > tr > th.sorting:before,
table.dataTable thead > tr > th.sorting:after,
table.dataTable thead > tr > th.sorting_asc:before,
table.dataTable thead > tr > th.sorting_asc:after,
table.dataTable thead > tr > th.sorting_desc:before,
table.dataTable thead > tr > th.sorting_desc:after,
table.dataTable thead > tr > th.sorting_asc_disabled:before,
table.dataTable thead > tr > th.sorting_asc_disabled:after,
table.dataTable thead > tr > th.sorting_desc_disabled:before,
table.dataTable thead > tr > th.sorting_desc_disabled:after,
table.dataTable thead > tr > td.sorting:before,
table.dataTable thead > tr > td.sorting:after,
table.dataTable thead > tr > td.sorting_asc:before,
table.dataTable thead > tr > td.sorting_asc:after,
table.dataTable thead > tr > td.sorting_desc:before,
table.dataTable thead > tr > td.sorting_desc:after,
table.dataTable thead > tr > td.sorting_asc_disabled:before,
table.dataTable thead > tr > td.sorting_asc_disabled:after,
table.dataTable thead > tr > td.sorting_desc_disabled:before,
table.dataTable thead > tr > td.sorting_desc_disabled:after {
    content: "" !important;
    position: absolute;
    right: 0.55rem;
    display: block !important;
    width: 10px;
    height: 6px;
    margin: 0;
    padding: 0;
    line-height: 0;
    font-size: 0 !important;
    opacity: 1 !important;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 10px 6px;
    border: none !important;
    box-shadow: none !important;
    pointer-events: none;
}

table.dataTable thead > tr > th.sorting:before,
table.dataTable thead > tr > th.sorting_asc:before,
table.dataTable thead > tr > th.sorting_desc:before,
table.dataTable thead > tr > th.sorting_asc_disabled:before,
table.dataTable thead > tr > th.sorting_desc_disabled:before,
table.dataTable thead > tr > td.sorting:before,
table.dataTable thead > tr > td.sorting_asc:before,
table.dataTable thead > tr > td.sorting_desc:before,
table.dataTable thead > tr > td.sorting_asc_disabled:before,
table.dataTable thead > tr > td.sorting_desc_disabled:before {
    bottom: calc(50% + 2px);
}

table.dataTable thead > tr > th.sorting:after,
table.dataTable thead > tr > th.sorting_asc:after,
table.dataTable thead > tr > th.sorting_desc:after,
table.dataTable thead > tr > th.sorting_asc_disabled:after,
table.dataTable thead > tr > th.sorting_desc_disabled:after,
table.dataTable thead > tr > td.sorting:after,
table.dataTable thead > tr > td.sorting_asc:after,
table.dataTable thead > tr > td.sorting_desc:after,
table.dataTable thead > tr > td.sorting_asc_disabled:after,
table.dataTable thead > tr > td.sorting_desc_disabled:after {
    top: calc(50% + 2px);
}

/* Default: both chevrons visible, muted */
table.dataTable thead > tr > th.sorting:before,
table.dataTable thead > tr > td.sorting:before {
    background-image: var(--dt-chevron-up-muted);
    opacity: 0.85 !important;
}
table.dataTable thead > tr > th.sorting:after,
table.dataTable thead > tr > td.sorting:after {
    background-image: var(--dt-chevron-down-muted);
    opacity: 0.85 !important;
}

/* Sorted ascending */
table.dataTable thead > tr > th.sorting_asc:before,
table.dataTable thead > tr > td.sorting_asc:before {
    background-image: var(--dt-chevron-up-active);
    opacity: 1 !important;
}
table.dataTable thead > tr > th.sorting_asc:after,
table.dataTable thead > tr > td.sorting_asc:after {
    background-image: var(--dt-chevron-down-muted);
    opacity: 0.35 !important;
}

/* Sorted descending */
table.dataTable thead > tr > th.sorting_desc:before,
table.dataTable thead > tr > td.sorting_desc:before {
    background-image: var(--dt-chevron-up-muted);
    opacity: 0.35 !important;
}
table.dataTable thead > tr > th.sorting_desc:after,
table.dataTable thead > tr > td.sorting_desc:after {
    background-image: var(--dt-chevron-down-active);
    opacity: 1 !important;
}

/* Disabled sort direction hints (match Bootstrap 5 DataTables behaviour) */
table.dataTable thead > tr > th.sorting_asc_disabled:before,
table.dataTable thead > tr > td.sorting_asc_disabled:before,
table.dataTable thead > tr > th.sorting_desc_disabled:after,
table.dataTable thead > tr > td.sorting_desc_disabled:after {
    display: none !important;
}

table.dataTable thead > tr > th.sorting_asc_disabled:after,
table.dataTable thead > tr > td.sorting_asc_disabled:after {
    background-image: var(--dt-chevron-down-muted);
    opacity: 0.55 !important;
}
table.dataTable thead > tr > th.sorting_desc_disabled:before,
table.dataTable thead > tr > td.sorting_desc_disabled:before {
    background-image: var(--dt-chevron-up-muted);
    opacity: 0.55 !important;
}

/* Non-sortable column */
table.dataTable thead > tr > th.sorting_disabled,
table.dataTable thead > tr > td.sorting_disabled {
    cursor: default;
    padding-right: 0.75rem !important;
}
table.dataTable thead > tr > th.sorting_disabled:before,
table.dataTable thead > tr > th.sorting_disabled:after,
table.dataTable thead > tr > td.sorting_disabled:before,
table.dataTable thead > tr > td.sorting_disabled:after {
    display: none !important;
    content: none !important;
}

/* Hover: slight emphasis on sortable headers */
table.dataTable thead > tr > th.sorting:hover:before,
table.dataTable thead > tr > th.sorting:hover:after,
table.dataTable thead > tr > td.sorting:hover:before,
table.dataTable thead > tr > td.sorting:hover:after {
    filter: brightness(0.85);
}

[data-bs-theme="dark"] table.dataTable thead > tr > th.sorting:hover:before,
[data-bs-theme="dark"] table.dataTable thead > tr > th.sorting:hover:after,
[data-theme-mode="dark"] table.dataTable thead > tr > th.sorting:hover:before,
[data-theme-mode="dark"] table.dataTable thead > tr > th.sorting:hover:after,
[data-bs-theme="dark"] table.dataTable thead > tr > td.sorting:hover:before,
[data-bs-theme="dark"] table.dataTable thead > tr > td.sorting:hover:after,
[data-theme-mode="dark"] table.dataTable thead > tr > td.sorting:hover:before,
[data-theme-mode="dark"] table.dataTable thead > tr > td.sorting:hover:after {
    filter: brightness(1.15);
}

/* Analytics / compact thead: dash partial uses padding shorthand !important — restore space for chevrons */
.dash-analytics-card #data.table-dash-analytics thead > tr > th.sorting,
.dash-analytics-card #data.table-dash-analytics thead > tr > th.sorting_asc,
.dash-analytics-card #data.table-dash-analytics thead > tr > th.sorting_desc,
.dash-analytics-card #data.table-dash-analytics thead > tr > th.sorting_asc_disabled,
.dash-analytics-card #data.table-dash-analytics thead > tr > th.sorting_desc_disabled,
.dash-analytics-card #data-triggers.table-dash-analytics thead > tr > th.sorting,
.dash-analytics-card #data-triggers.table-dash-analytics thead > tr > th.sorting_asc,
.dash-analytics-card #data-triggers.table-dash-analytics thead > tr > th.sorting_desc,
.dash-analytics-card #data-triggers.table-dash-analytics thead > tr > th.sorting_asc_disabled,
.dash-analytics-card #data-triggers.table-dash-analytics thead > tr > th.sorting_desc_disabled,
.dash-analytics-card #data-split-tests.table-dash-analytics thead > tr > th.sorting,
.dash-analytics-card #data-split-tests.table-dash-analytics thead > tr > th.sorting_asc,
.dash-analytics-card #data-split-tests.table-dash-analytics thead > tr > th.sorting_desc,
.dash-analytics-card #data-split-tests.table-dash-analytics thead > tr > th.sorting_asc_disabled,
.dash-analytics-card #data-split-tests.table-dash-analytics thead > tr > th.sorting_desc_disabled {
    padding-top: 0.4rem !important;
    padding-bottom: 0.4rem !important;
    padding-left: 0.45rem !important;
    padding-right: 1.65rem !important;
}