/* ============================================================================
   DataTables — Bootstrap 5 / BS3-compat theming
   ----------------------------------------------------------------------------
   The app uses classic DataTables 1.x markup (dom: "lfrtip", .paginate_button,
   .dataTables_filter/length/info) with the stock `jquery.dataTables.css`, whose
   default control styling (gradient pagination boxes, bare inputs) clashes with
   Bootstrap 5. Rather than vendor the full DataTables-BS5 integration, this layer
   restyles the stock controls to match the app's BS3-compat look (14px, #ccc
   borders, 4px radii, #337ab7 primary).

   MUST load AFTER jquery.dataTables.css — it is bundled right after it in the
   ~/Content/themes/base/css StyleBundle so these same-specificity rules win.
   Benefactor only (the EmployeeDashboard bundle does not include DataTables).
   ============================================================================ */

/* ---- Wrapper spacing ---- */
.dataTables_wrapper {
    font-size: 14px;
    margin-bottom: 12px;
}

/* Queue tables (Tuition Applications/Requests/Assistances, Account Statement,
   Tuition Modifications) declare <table width="100%"> with per-column <th width="%">
   hints that intentionally sum past 100% -- there are enough columns that the table
   is meant to overflow and scroll horizontally in .table-responsive. With the default
   table-layout:auto, the browser only honors those percentage hints once it has an
   actual data row to measure against; with zero rows ("No data available") it falls
   back to sizing columns off the header text alone, leaving the table narrower than
   its container -- a gap beside every EMPTY queue (data-populated queues were
   unaffected, which is why this wasn't caught by earlier fixes). table-layout:fixed
   sizes columns from the header row's declared widths up front, independent of
   whether <tbody> has any rows. */
.table-responsive > table[width="100%"].dataTable {
    table-layout: fixed;
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
    padding-top: 8px;
}

/* ---- Search box -> form-control ---- */
.dataTables_wrapper .dataTables_filter input {
    display: inline-block;
    width: auto;
    height: 34px;
    margin-left: 6px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

/* DataTables' filter input is type="search". BS3's normalize.css hid the native
   clear-X via -webkit-appearance:none; BS5's bootstrap.css deliberately keeps it
   visible (just grayscale-styled), so this queue search box gained an X that
   BS3 never showed. */
.dataTables_wrapper .dataTables_filter input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

.dataTables_wrapper .dataTables_filter input:focus {
    border-color: #66afe9;
    outline: 0;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
}

/* ---- Page-length select -> form-select ---- */
.dataTables_wrapper .dataTables_length select {
    height: 34px;
    padding: 6px 24px 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* ---- Info text ---- */
.dataTables_wrapper .dataTables_info {
    color: #777;
    font-size: 14px;
}

/* ---- Pagination: intentionally NOT overridden ------------------------------
   A prior pass here restyled .paginate_button into solid bordered/blue-filled
   buttons, assuming that was the BS3 look. Checked every pre-migration CSS
   file: none contain a .paginate_button rule at all -- production pagination
   was always rendered by the stock jquery.dataTables.css gradient theme
   (already loaded earlier in this bundle), and visual comparison against the
   true baseline confirms it (plain-text Prev/Next, a light/outlined active
   page). Removed the override so that stock theme wins again. */

/* Every queue page sets DataTables "processing": true AND drives its own
   #spinner-wrapper-* overlay from ajax beforeSend/complete callbacks, so two
   loading indicators show at once (QA bug 65). The app-specific spinner is the
   one with the actual design (backdrop + spinner-border); hide DataTables' own
   built-in overlay globally instead of touching every queue view's JS config. */
div.dataTables_processing {
    display: none !important;
}

/* ---- Export / Buttons extension -> BS3 default button look ---- */
.dataTables_wrapper .dt-buttons {
    margin-bottom: 8px;
}

/* Only style buttons that DON'T carry a .btn color class. Export buttons are
   configured with className:'btn btn-primary'/'btn-success'; the generic
   .dataTables_wrapper .dt-button selector (specificity 0,2,0) was overriding
   those (0,1,0) and washing them to grey (QA bugs 10, 28, 53-60). */
.dataTables_wrapper .dt-button:not(.btn),
.dataTables_wrapper .dt-buttons .dt-button:not(.btn) {
    margin-right: 6px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #333;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: none;
}

.dataTables_wrapper .dt-button:not(.btn):hover,
.dataTables_wrapper .dt-buttons .dt-button:not(.btn):hover {
    color: #333;
    background: #e6e6e6;
    border-color: #adadad;
}

/* Keep the DataTables spacing on button-classed exports without touching color. */
.dataTables_wrapper .dt-button.btn,
.dataTables_wrapper .dt-buttons .dt-button.btn {
    margin-right: 6px;
}