/**
 * #9134 — Canonical DataTable toolbar CSS for DMS-side admin views.
 * Mirror of termont2's wcp-dt-dashboard.css toolbar canon (#9130).
 *
 * Layout:  [Length] [⚙ Columns]                         [🔍  BIG Search]
 *          /  table  /                                   info / paginate
 *
 * Pagination flat-border (no double-thick lines between consecutive buttons).
 *
 * @author  Olivier RAVEAU - Oliv.Ai
 * @since   2026-05-09
 */

.wcp-dt-toolbar {
    margin-bottom: 8px !important;
    flex-wrap: nowrap;
    gap: 6px;
}
.wcp-dt-toolbar > [class*="col"] { padding: 0 4px; }

/* Compact length menu */
.wcp-dt-length-wrap .dataTables_length { display: inline-block; }
.wcp-dt-length-wrap .dataTables_length label { margin: 0; font-size: 0; }
.wcp-dt-length-wrap .dataTables_length select {
    height: 38px;
    padding: 4px 28px 4px 10px;
    font-size: 13px;
    border-radius: 6px;
    border: 1px solid #ced4da;
    background-color: #fff;
}

/* Columns + export buttons */
.wcp-dt-cols-wrap .dt-buttons { margin: 0; }
.wcp-dt-cols-wrap .dt-button {
    height: 38px;
    padding: 0 14px;
    font-size: 13px;
    border-radius: 6px;
    border: 1px solid #ced4da;
    background: #fff;
    color: #212529;
}
.wcp-dt-cols-wrap .dt-button:hover {
    background: #f8f9fa;
    border-color: #adb5bd;
}

/* BIG Google-bar search */
.wcp-dt-toolbar .wcp-dt-search-wrap .dataTables_filter { float: none !important; text-align: right !important; }
.wcp-dt-toolbar .wcp-dt-search-wrap .dataTables_filter label { display: inline-block !important; margin: 0 !important; }
.wcp-dt-toolbar .wcp-dt-search-wrap input[type="search"] {
    width: 360px !important;
    max-width: 100% !important;
    height: 44px !important;
    font-size: 16px !important;
    padding: 0 16px 0 44px !important;
    background: #fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23495057" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>') no-repeat 14px center !important;
    background-size: 18px 18px !important;
    border: 1px solid #ced4da !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 2px rgba(0,0,0,.04) !important;
    transition: box-shadow .15s ease, border-color .15s ease !important;
}
.wcp-dt-toolbar .wcp-dt-search-wrap input[type="search"]:focus {
    border-color: #003366 !important;
    box-shadow: 0 0 0 3px rgba(0,51,102,.15) !important;
    outline: none !important;
}
.wcp-dt-toolbar .wcp-dt-search-wrap input[type="search"]::placeholder { color: #6c757d !important; }

/* #11615 — Pagination block REMOVED 2026-06-20.
 * Was: globally-scoped .dataTables_paginate .paginate_button rules added 2026-05-09 (#9134 commit 58e3e6d572)
 * that injected `border: 1px solid #dee2e6 !important` on every DT pagination across the saas-core.
 * Sergey: "we never had borders on DT" — revert to default Metronic 8 styling.
 * Metronic's .page-link cascade in style.bundle.css owns pagination visuals now.
 * If a future module wants flat-border style back, scope it under .wcp-dt-toolbar (not global). */

/* Mobile (≤768px) */
@media (max-width: 768px) {
    .wcp-dt-toolbar { flex-wrap: wrap; }
    .wcp-dt-search-wrap { width: 100%; margin-top: 6px; }
    .wcp-dt-search-wrap input[type="search"] { width: 100% !important; }
}