/* ============================================================================
 * datatable-columns.css
 *
 * Shared column-sizing and filter-input rules for jQuery DataTables across
 * the BatBallPerf web app.
 *
 * Goals:
 *   - Variable column widths via "size bucket" classes (xs/sm/md/lg/xl).
 *   - Body cells truncate with ellipsis + native tooltip via .dt-truncate.
 *   - Header filter inputs always fill their column header (the previous
 *     "fixed-width input" problem was caused by inputs falling back to the
 *     browser-default ~150px when no width was specified).
 *
 * Apply size buckets through DataTables `columnDefs`:
 *     columnDefs: [
 *         { targets: ['status:name'],     className: 'dt-col-xs' },
 *         { targets: ['serialNumber:name'], className: 'dt-col-sm' },
 *         { targets: ['modelName:name'],  className: 'dt-col-lg dt-truncate-col',
 *           render: window.bbp.dtRender.ellipsis() }
 *     ]
 *
 * Notes:
 *   - These rules intentionally use moderate specificity (table.dataTable ...)
 *     so they win against SmartAdmin's bundle without needing !important.
 *   - Works with scrollX: true; DataTables clones the thead but the inline
 *     class names on each <th> are preserved on the clone.
 * ========================================================================== */

/* ---- Column size buckets ------------------------------------------------- */
table.dataTable th.dt-col-xs,
table.dataTable td.dt-col-xs { min-width: 60px;  max-width: 90px;  }

table.dataTable th.dt-col-sm,
table.dataTable td.dt-col-sm { min-width: 90px;  max-width: 130px; }

table.dataTable th.dt-col-md,
table.dataTable td.dt-col-md { min-width: 130px; max-width: 200px; }

table.dataTable th.dt-col-lg,
table.dataTable td.dt-col-lg { min-width: 180px; max-width: 320px; }

table.dataTable th.dt-col-xl,
table.dataTable td.dt-col-xl { min-width: 240px; max-width: 480px; }

/* ---- Cell truncation (ellipsis + native browser tooltip via title) ------- */
table.dataTable td.dt-truncate-col {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* Body cells need an explicit max-width to actually truncate; pair with
       a dt-col-* bucket above. */
    max-width: 0;
}

/* The render helper wraps content in <span class="dt-truncate"> so a cell
   without a bucket still gets a sane default truncation. */
.dt-truncate {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- Filter row in <thead> ---------------------------------------------- */
/* Use a dedicated <tr class="dt-filter-row"> for filter inputs together with
   `orderCellsTop: true` so the sort listeners stay on the title row above. */
table.dataTable thead tr.dt-filter-row th {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    /* Allow header cell to shrink narrower than its intrinsic content width
       (otherwise a long placeholder forces the column wide). */
    min-width: 0;
    vertical-align: top;
    /* Filter cells should not be sortable visually. */
    cursor: default;
}

table.dataTable thead tr.dt-filter-row .form-label-group {
    width: 100%;
    min-width: 0;
    margin-bottom: 0;
}

/* Filter row: do not use the global floating-label pattern (transparent
   placeholder + label on top). That pattern breaks here because we raise
   the input above the label for clickability, which hides the label behind
   an opaque input. Use normal visible placeholders instead; keep <label>
   in the markup for screen readers only. */
table.dataTable thead tr.dt-filter-row .form-label-group > label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    pointer-events: none;
}

table.dataTable thead tr.dt-filter-row .form-label-group > input,
table.dataTable thead tr.dt-filter-row > th > input {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
    line-height: 1.2;
    position: relative;
}

/* Undo floating-labels.css transparent placeholders inside filter cells */
table.dataTable thead tr.dt-filter-row .form-label-group input::placeholder {
    color: #6c757d;
    opacity: 1;
}

table.dataTable thead tr.dt-filter-row .form-label-group input::-webkit-input-placeholder {
    color: #6c757d;
    opacity: 1;
}

table.dataTable thead tr.dt-filter-row .form-label-group input::-moz-placeholder {
    color: #6c757d;
    opacity: 1;
}

table.dataTable thead tr.dt-filter-row .form-label-group input:-ms-input-placeholder {
    color: #6c757d;
}

table.dataTable thead tr.dt-filter-row .form-label-group input::-ms-input-placeholder {
    color: #6c757d;
}

/* No extra top padding when typing — we are not showing a floating label */
table.dataTable thead tr.dt-filter-row .form-label-group input:not(:placeholder-shown) {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

/* Disable text selection on the filter row so click-into-input feels right
   when the user clicks the header cell itself. */
table.dataTable thead tr.dt-filter-row { user-select: none; }
table.dataTable thead tr.dt-filter-row input { user-select: text; }