/* =====================================================================
 * MoversBoard — DataTables theme
 *
 * Restyles DataTables (vendor/datatables/<version>/css/dataTables…) to
 * match the rest of the app: yellow accent, Inter font, soft borders,
 * dark-grey hover. This file is intentionally NOT scoped to a specific
 * DataTables version — it overrides class names that have been stable
 * since DataTables 1.x and continue to apply in 2.x.
 *
 * Load order (in index.php):
 *   1. vendor/datatables/<version>/css/dataTables.dataTables.min.css
 *   2. css/views/datatable-theme.css   ← this file
 *
 * To upgrade DataTables, only the version in step 1 changes; this file
 * keeps working as-is.
 * ===================================================================== */

/* Wrapper that DataTables generates around the table — kill the default
   margins so the table sits flush against our existing card style. */
.dt-container {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--text-primary);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}

/* Hide the parts of DataTables we don't use — we have our own search,
   pagination ("Load More"), and results bar in the filter panel. */
.dt-container .dt-search,
.dt-container .dt-length,
.dt-container .dt-info,
.dt-container .dt-paging { display: none !important; }

/* Add a thin scroll wrapper for narrow screens so the table can scroll
   horizontally without breaking layout. */
.dt-container .dt-scroll,
.dt-container .dt-layout-row {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ─── Table base ─────────────────────────────────────────────────────── */
table.dataTable.dt-movers {
    width: 100% !important;
    border-collapse: collapse !important;
    border-spacing: 0;
    margin: 0 !important;
    font-size: 13px;
    background: var(--surface);
}

/* ─── Header ─────────────────────────────────────────────────────────── */
table.dataTable.dt-movers thead th {
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 11px 12px;
    text-align: left;
    white-space: nowrap;
    vertical-align: middle;
}

/* DataTables sort arrows — replace the default with our look */
table.dataTable.dt-movers thead th.dt-orderable-asc,
table.dataTable.dt-movers thead th.dt-orderable-desc {
    cursor: pointer;
    user-select: none;
    transition: color var(--transition);
    position: relative;
}
table.dataTable.dt-movers thead th.dt-orderable-asc:hover,
table.dataTable.dt-movers thead th.dt-orderable-desc:hover {
    color: var(--text-primary);
}

/* Override the bundled SVG arrows with our existing arrow style */
table.dataTable.dt-movers thead th .dt-column-order::before,
table.dataTable.dt-movers thead th .dt-column-order::after {
    display: none !important;
}
table.dataTable.dt-movers thead th .dt-column-order {
    width: auto;
    height: auto;
    margin-left: 4px;
    font-size: 9px;
    opacity: 0.5;
    transition: opacity var(--transition), color var(--transition);
}
table.dataTable.dt-movers thead th .dt-column-order::before {
    content: '⇅' !important;
    display: inline !important;
    position: static !important;
    line-height: 1 !important;
    color: inherit !important;
    opacity: 1 !important;
}
table.dataTable.dt-movers thead th.dt-ordering-asc .dt-column-order::before {
    content: '▲' !important;
    color: #b88800 !important;
    opacity: 1 !important;
}
table.dataTable.dt-movers thead th.dt-ordering-desc .dt-column-order::before {
    content: '▼' !important;
    color: #b91c1c !important;
    opacity: 1 !important;
}
table.dataTable.dt-movers thead th.dt-orderable-asc:hover .dt-column-order,
table.dataTable.dt-movers thead th.dt-orderable-desc:hover .dt-column-order {
    opacity: 1;
}
table.dataTable.dt-movers thead th.dt-ordering-asc,
table.dataTable.dt-movers thead th.dt-ordering-desc {
    color: var(--text-primary);
}

/* Non-orderable columns (checkbox, actions) — kill cursor/arrow */
table.dataTable.dt-movers thead th.dt-orderable-none {
    cursor: default;
}
table.dataTable.dt-movers thead th.dt-orderable-none .dt-column-order {
    display: none !important;
}

/* ─── Body cells ─────────────────────────────────────────────────────── */
table.dataTable.dt-movers tbody td {
    border-bottom: 1px solid var(--border-light);
    padding: 10px 12px;
    color: var(--text-primary);
    font-size: 13px;
    vertical-align: middle;
    background: transparent;
}
table.dataTable.dt-movers tbody tr:last-child td { border-bottom: none; }

/* Row hover + selection state (mirrors our other table views) */
table.dataTable.dt-movers tbody tr {
    cursor: pointer;
    transition: background var(--transition);
}
table.dataTable.dt-movers tbody tr:hover { background: var(--bg); }

table.dataTable.dt-movers tbody tr.is-selected,
table.dataTable.dt-movers tbody tr.is-selected td { background: var(--accent-light); }
table.dataTable.dt-movers tbody tr.is-selected:hover,
table.dataTable.dt-movers tbody tr.is-selected:hover td { background: #fff3c5; }

/* Force DataTables' default odd/even striping off — our hover model is enough */
table.dataTable.dt-movers tbody tr.odd,
table.dataTable.dt-movers tbody tr.even { background: transparent; }

/* ─── Cell helpers ───────────────────────────────────────────────────── */

/* Checkbox column (first cell) */
table.dataTable.dt-movers th.dt-check,
table.dataTable.dt-movers td.dt-check {
    width: 34px;
    text-align: center;
    padding-left: 8px;
    padding-right: 8px;
}
table.dataTable.dt-movers .dt-check input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
    cursor: pointer;
    margin: 0;
    vertical-align: middle;
}

/* Inline pills inherit our existing classes — keep them flat in the cell */
table.dataTable.dt-movers .job-card-status.jb-status-pill,
table.dataTable.dt-movers .job-type-badge.jb-type-pill {
    position: static;
    border-radius: 4px;
    font-size: 10px;
    padding: 2px 6px;
    display: inline-block;
}

/* Numeric / muted cell helpers */
table.dataTable.dt-movers td.dt-num    { font-variant-numeric: tabular-nums; font-weight: 700; }
table.dataTable.dt-movers td.dt-muted  { color: var(--text-secondary); font-size: 12px; }

/* Empty state — DataTables shows this row when there are zero rows
   (we typically swap the host empty state out before that, but just in
   case) */
table.dataTable.dt-movers td.dt-empty {
    text-align: center;
    color: var(--text-muted);
    padding: 28px 12px;
    font-size: 13px;
    font-style: italic;
}

/* ─── Mobile horizontal scroll ───────────────────────────────────────── */
.datatable-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
table.dataTable.dt-movers { min-width: 860px; }
table.dataTable.dt-movers.dt-trucks { min-width: 794px; }