/* ================================
   SMBT DataTables — Modern UI
   Use with DataTables DOM:
   '<"smbt-dt-top"Bf>rt<"smbt-dt-bottom"lip>'
   Scope: wrap your table in a container with class .smbt-dt-modern
   ================================ */

.smbt-dt-modern{
  --bg: #ffffff;
  --card: #ffffff;
  --text: #0f172a;
  --muted: #64748b;
  --border: #e2e8f0;
  --rowA: #ffffff;
  --rowB: #f8fafc;
  --hover: #eef2ff;
  --headText: #ffffff;
  --primary: #4f46e5;
  --primary2:#4338ca;
  --shadow: 0 10px 25px rgba(2,6,23,.08);
  color: var(--text);
}

/* Card wrapper */
.smbt-dt-modern .dataTables_wrapper{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  box-shadow: var(--shadow);
}

/* -------------------------------
   TOP: buttons (left) + search (right)
   ------------------------------- */
.smbt-dt-modern .smbt-dt-top{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin:0 0 10px 0;
  width: 100%;
}

.smbt-dt-modern .smbt-dt-top .dt-buttons{
  order:1;
  display:inline-flex;
  gap:8px;
  flex-wrap:wrap;
  flex: 0 0 auto;
}

.smbt-dt-modern .smbt-dt-top .dataTables_filter{
  order:2;
  margin-left:auto;
  float:none !important;
  text-align:right !important;
  flex: 1 1 auto;
  display:flex;
  justify-content:flex-end;
}

.smbt-dt-modern .smbt-dt-top .dataTables_filter label{
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:flex-end;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  margin: 0;
  width: 100%;
}

/* -------------------------------
   BOTTOM: length (left) + paginate (right)
   (info stays in the middle when present)
   ------------------------------- */
.smbt-dt-modern .smbt-dt-bottom{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-top:10px;
  width: 100%;
}

.smbt-dt-modern .smbt-dt-bottom .dataTables_length{
  order:1;
  float:none !important;
  flex: 0 0 auto;
}

.smbt-dt-modern .smbt-dt-bottom .dataTables_info{
  order:2;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  padding: 0;
  flex: 1 1 auto;
  text-align: center;
}

.smbt-dt-modern .smbt-dt-bottom .dataTables_paginate{
  order:3;
  margin-left:auto;
  float:none !important;
  text-align:right !important;
  padding: 0;
  flex: 1 1 auto;
  display:flex;
  justify-content:flex-end;
}

/* Keep controls tidy */
.smbt-dt-modern .dataTables_wrapper .dataTables_length,
.smbt-dt-modern .dataTables_wrapper .dataTables_filter,
.smbt-dt-modern .dataTables_wrapper .dataTables_info,
.smbt-dt-modern .dataTables_wrapper .dataTables_paginate{
  margin: 0;
}

.smbt-dt-modern .dataTables_wrapper .dataTables_length label{
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

/* Inputs */
.smbt-dt-modern .dataTables_wrapper .dataTables_filter input,
.smbt-dt-modern .dataTables_wrapper .dataTables_length select{
  height: 38px;
  line-height: 38px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  color: var(--text);
  outline: none;
  transition: box-shadow .15s, border-color .15s;
}

.smbt-dt-modern .dataTables_wrapper .dataTables_filter input:focus,
.smbt-dt-modern .dataTables_wrapper .dataTables_length select:focus{
  border-color: rgba(79,70,229,.45);
  box-shadow: 0 0 0 4px rgba(79,70,229,.15);
}

/* Table */
.smbt-dt-modern table.dataTable{
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0;
  margin-top: 8px !important;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

/* Header */
.smbt-dt-modern table.dataTable thead th{
  background: linear-gradient(180deg, #0b1220 0%, #111827 100%);
  color: var(--headText);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 800;
  padding: 12px 14px !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}

/* Body cells */
.smbt-dt-modern table.dataTable tbody td{
  padding: 12px 14px !important;
  font-size: 14px;
  border-bottom: 1px solid var(--border) !important;
  vertical-align: middle;
}

/* Zebra */
.smbt-dt-modern table.dataTable tbody tr:nth-child(odd){ background: var(--rowA) !important; }
.smbt-dt-modern table.dataTable tbody tr:nth-child(even){ background: var(--rowB) !important; }

/* Hover */
.smbt-dt-modern table.dataTable tbody tr:hover{ background: var(--hover) !important; }

/* Sorting icons */
.smbt-dt-modern table.dataTable thead .sorting:after,
.smbt-dt-modern table.dataTable thead .sorting_asc:after,
.smbt-dt-modern table.dataTable thead .sorting_desc:after{ opacity: .65; }

/* Export buttons */
.smbt-dt-modern .dt-buttons .dt-button{
  border: 1px solid rgba(79,70,229,.25) !important;
  background: rgba(79,70,229,.10) !important;
  color: var(--primary2) !important;
  border-radius: 12px !important;
  padding: 8px 10px !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  box-shadow: none !important;
  transition: background .15s, transform .08s, border-color .15s;
}

.smbt-dt-modern .dt-buttons .dt-button:hover{
  background: rgba(79,70,229,.16) !important;
  border-color: rgba(79,70,229,.35) !important;
  transform: translateY(-1px);
}

/* Pagination */
.smbt-dt-modern .dataTables_wrapper .dataTables_paginate .paginate_button{
  border: 1px solid var(--border) !important;
  background: #fff !important;
  color: var(--text) !important;
  border-radius: 10px !important;
  padding: 7px 11px !important;
  margin-left: 6px !important;
  font-weight: 700;
  transition: transform .08s, background .15s, border-color .15s;
}

.smbt-dt-modern .dataTables_wrapper .dataTables_paginate .paginate_button:hover{
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  transform: translateY(-1px);
}

.smbt-dt-modern .dataTables_wrapper .dataTables_paginate .paginate_button.current{
  background: rgba(79,70,229,.12) !important;
  border-color: rgba(79,70,229,.35) !important;
  color: var(--primary2) !important;
}

.smbt-dt-modern .dataTables_wrapper .dataTables_paginate .paginate_button.disabled{
  opacity: .45;
}

/* Mobile tweaks */
@media (max-width: 640px){
  .smbt-dt-modern .dataTables_wrapper{
    padding: 10px;
    border-radius: 12px;
  }
  .smbt-dt-modern table.dataTable thead th,
  .smbt-dt-modern table.dataTable tbody td{
    padding: 10px 10px !important;
    font-size: 13px;
  }
}

/* ================================
   SMBT Form Controls — Modern UI
   Scope: wrap your filters + table in .smbt-dt-modern
   (so we don't change global WP selects)
   ================================ */

/* Labels / headings in filter blocks */
.smbt-dt-modern label{
  color: var(--text);
  font-weight: 800;
}

/* Base controls (selects + inputs) */
.smbt-dt-modern select,
.smbt-dt-modern input[type="text"],
.smbt-dt-modern input[type="number"],
.smbt-dt-modern input[type="email"],
.smbt-dt-modern input[type="tel"],
.smbt-dt-modern input[type="date"],
.smbt-dt-modern input[type="datetime-local"]{
  height: 42px;
  line-height: 42px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  color: var(--text);
  outline: none;
  transition: box-shadow .15s, border-color .15s, transform .08s;
}

.smbt-dt-modern select:focus,
.smbt-dt-modern input[type="text"]:focus,
.smbt-dt-modern input[type="number"]:focus,
.smbt-dt-modern input[type="email"]:focus,
.smbt-dt-modern input[type="tel"]:focus,
.smbt-dt-modern input[type="date"]:focus,
.smbt-dt-modern input[type="datetime-local"]:focus{
  border-color: rgba(79,70,229,.45);
  box-shadow: 0 0 0 4px rgba(79,70,229,.15);
}

.smbt-dt-modern select:hover,
.smbt-dt-modern input[type="text"]:hover,
.smbt-dt-modern input[type="number"]:hover,
.smbt-dt-modern input[type="email"]:hover,
.smbt-dt-modern input[type="tel"]:hover,
.smbt-dt-modern input[type="date"]:hover,
.smbt-dt-modern input[type="datetime-local"]:hover{
  border-color: #cbd5e1;
}

/* Make selects look nicer (custom arrow) */
.smbt-dt-modern select{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 38px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

/* Optional: give filter blocks a subtle card look if they are inside the wrapper */
.smbt-dt-modern .smbt-filters-card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 10px 25px rgba(2,6,23,.06);
}

/* Tighten spacing for typical WP filter rows */
.smbt-dt-modern .smbt-filters-row{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}

/* If your toggle uses an input+label, keep it aligned */
.smbt-dt-modern .smbt-toggle{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* Small helper text */
.smbt-dt-modern .smbt-mini{
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}