/*!
 * hub-automation-tables.css - ONE table look for every automation console (.auto-page), Sample 1 (2026-10-06).
 * Loaded last so it wins over the older layers in hub-tables.css / data-tables.css / hub-money.css. Every rule is
 * scoped under .auto-page, so the rest of the hub does not change.
 *
 * The band: one panel above the table. Filters on the left, Export and rows-per-page on the right (the DataTables
 * toolbar is moved into it by attachBand() in datatables-enhanced.js). The bulk row shows only while a row is ticked.
 * The footer: "Showing x of y" left, pager right. Phones (< 576px): band controls go full width and stack.
 */
.auto-page { --ab-ink: #1e2a4a; --ab-mute: #6b7689; --ab-line: #e7eaf2; --ab-field: #d6dbeb; --ab-accent: #3a4aa6; --ab-accent-soft: #eef0fb; --ab-soft: #fafbfd; --ab-h: 36px; }

/* cell text is regular weight: the mobile number, name and details are not bold in the consoles */
.auto-page table.table tbody td .lapu,
.auto-page table.table tbody td .u-mobile,
.auto-page table.table tbody td .u-name,
.auto-page table.table tbody td .apb-nm { font-weight: 400 !important; }

/* the band */
.auto-page [data-dt-band] {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 12px;
    margin: 0 0 12px; padding: 10px 12px; background: var(--ab-soft); border: 1px solid var(--ab-line); border-radius: 10px;
}
.auto-page [data-dt-band] .auto-band-left,
.auto-page [data-dt-band] .auto-band-right { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.auto-page [data-dt-band] .auto-band-right { margin-left: auto; justify-content: flex-end; }
.auto-page [data-dt-band] .dt-filter-panel { margin: 0 !important; padding: 0; border: 0; }
.auto-page [data-dt-band] .dt-toolbar-left,
.auto-page [data-dt-band] .dt-toolbar-right { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* bulk row: hidden until a row is ticked (Bootstrap's d-flex is !important, so this has to be too) */
.auto-page .auto-bulk:not(.is-active) { display: none !important; }
.auto-page .auto-bulk.is-active { margin: 0 0 12px; padding: 8px 12px; background: var(--ab-accent-soft); border-radius: 10px; font-size: 12px; }

/* one control height, one radius, one border colour everywhere in the band and the bulk row */
.auto-page [data-dt-band] select,
.auto-page [data-dt-band] .form-select,
.auto-page [data-dt-band] .form-control,
.auto-page [data-dt-band] input[type="search"],
.auto-page [data-dt-band] input[type="text"],
.auto-page [data-dt-band] input[type="date"] {
    height: var(--ab-h); min-height: var(--ab-h); margin: 0; padding-top: 0; padding-bottom: 0;
    border: 1px solid var(--ab-field); border-radius: 8px; font-size: 13px; color: var(--ab-ink); box-shadow: none;
}
.auto-page [data-dt-band] .form-control:focus,
.auto-page [data-dt-band] .form-select:focus { border-color: var(--ab-accent); box-shadow: 0 0 0 3px rgba(84, 98, 194, .14); outline: 0; }
.auto-page [data-dt-band] .input-group-text { height: var(--ab-h); font-size: 13px; background: #fff; border-color: var(--ab-field); color: var(--ab-mute); border-radius: 8px 0 0 8px; }
.auto-page [data-dt-band] .input-group .form-control { border-radius: 0 8px 8px 0; }
.auto-page [data-dt-band] .btn { height: var(--ab-h); min-height: var(--ab-h); padding: 0 12px; border-radius: 8px; font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; }
.auto-page [data-dt-band] .dt-length label { margin: 0; font-size: 12px; font-weight: 500; color: var(--ab-mute); white-space: nowrap; }
.auto-page [data-dt-band] .dt-length select { min-width: 4.6rem; }
.auto-page [data-dt-band] .dt-search[style*="display: none"],
.auto-page [data-dt-band] .dt-search[style*="display:none"] { display: none !important; }
.auto-page .auto-bulk .form-select,
.auto-page .auto-bulk .form-control,
.auto-page .auto-bulk select { height: 32px; min-height: 32px; font-size: 12.5px; border-radius: 8px; }
.auto-page .auto-bulk .btn { height: 32px; min-height: 32px; font-size: 12.5px; border-radius: 8px; }

/* footer: count left, pager right, one line */
.auto-page div.dt-container .dt-footer { display: flex; flex-wrap: wrap; justify-content: space-between !important; align-items: center; gap: 10px; margin-top: 12px !important; }
.auto-page div.dt-container .dt-info-wrap { font-size: 12px; color: var(--ab-mute); }
.auto-page div.dt-container .dt-paginate { margin-left: auto; display: flex; justify-content: flex-end; }
.auto-page div.dt-container .pagination { margin: 0; gap: 4px; flex-wrap: wrap; justify-content: flex-end !important; }
.auto-page div.dt-container .pagination .page-link {
    min-width: 32px; height: 32px; padding: 0 9px; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--ab-line); border-radius: 8px !important; font-size: 12.5px; color: var(--ab-ink); background: #fff; box-shadow: none;
}
.auto-page div.dt-container .pagination .page-link:hover { background: var(--ab-accent-soft); color: var(--ab-accent); border-color: var(--ab-accent-soft); }
.auto-page div.dt-container .pagination .page-item.active .page-link { background: var(--ab-accent); border-color: var(--ab-accent); color: #fff; }
.auto-page div.dt-container .pagination .page-item.disabled .page-link { color: #b4bccc; background: var(--ab-soft); border-color: var(--ab-line); }

/* the band, tidied: search and filters on the left in one row, page size and export on the right, one height throughout */
.auto-page [data-dt-band] { gap: 12px; padding: 12px; border-radius: 12px; }
.auto-page [data-dt-band] .auto-band-left { gap: 10px; }
.auto-page [data-dt-band] .auto-band-right { gap: 10px; }
.auto-page [data-dt-band] .auto-band-left { flex: 1 1 auto; }
.auto-page [data-dt-band] .auto-band-right { flex: 0 0 auto; }
.auto-page [data-dt-band] .auto-band-left .input-group { width: 260px; max-width: 100%; }
.auto-page [data-dt-band] .auto-band-left select.form-select { width: auto; min-width: 140px; max-width: 170px; }
/* SIM consoles share one filter look (app/views/seller/automation/_sim_toolbar.php): one search width, one select width */
.auto-page [data-dt-band] .sim-search { width: 260px; max-width: 100%; }
.auto-page [data-dt-band] .sim-filter { width: auto; min-width: 140px; max-width: 170px; }
/* the State select (and the other filters) become direct flex items of the toolbar, not children of a wrapper */
.auto-page [data-dt-band] [data-filter-slot] { display: contents; }
/* from 1200px the whole band is one row: filters left, export and page size right */
@media (min-width: 1200px) {
    .auto-page [data-dt-band] { flex-wrap: nowrap; }
}
.auto-page [data-dt-band] .dt-length select { min-width: 84px; }
.auto-page [data-dt-band] .dt-buttons .btn { border-radius: 8px; }
.auto-page .auto-bulk { gap: 10px; border-radius: 12px; }

/* Action column fixed on the right; the other columns scroll sideways (same idea as Airtel PB) */
.auto-page table.auto-scroll { min-width: 980px; }
.auto-page th.auto-sticky-last,
.auto-page td.auto-sticky-last {
    position: sticky; right: 0; z-index: 2; background: #fff; white-space: nowrap;
    box-shadow: -10px 0 12px -12px rgba(16, 24, 40, .22);
}
.auto-page th.auto-sticky-last { background: var(--ab-soft); }
.auto-page tbody tr:hover td.auto-sticky-last { background: #f6f8fc; }

/* phones: the band stacks, every control takes the full width */
@media (max-width: 575.98px) {
    .auto-page [data-dt-band] { padding: 10px; }
    .auto-page [data-dt-band] .auto-band-left,
    .auto-page [data-dt-band] .auto-band-right,
    .auto-page [data-dt-band] .dt-toolbar-left,
    .auto-page [data-dt-band] .dt-toolbar-right { width: 100%; justify-content: flex-start; margin-left: 0; }
    .auto-page [data-dt-band] .form-control,
    .auto-page [data-dt-band] .form-select,
    .auto-page [data-dt-band] input[type="search"],
    .auto-page [data-dt-band] .input-group { width: 100% !important; min-width: 0 !important; }
    /* the SIM search keeps its icon and its field on one line (the rule above would push the field onto a second row) */
    .auto-page [data-dt-band] .sim-search { flex-wrap: nowrap; }
    .auto-page [data-dt-band] .sim-search > .form-control { flex: 1 1 auto; width: 1% !important; }
    /* the SIM selects sit two to a row, equal width (the State select included) */
    .auto-page [data-dt-band] .auto-band-left .sim-filter { width: auto !important; min-width: 0 !important; max-width: none !important; flex: 1 1 calc(50% - 4px) !important; }
    .auto-page div.dt-container .dt-footer { justify-content: center !important; }
    .auto-page div.dt-container .dt-paginate { margin-left: 0; width: 100%; justify-content: center; }
    .auto-page div.dt-container .pagination { justify-content: center !important; }
    .auto-page .w-input-xl, .auto-page .w-input-md, .auto-page .w-input-sm { width: 100% !important; min-width: 0 !important; }
    .auto-page .card-body { padding: 14px; }
}