/*
 * WorkBench brand component reskin.
 *
 * Restyles the shared Bootstrap 4 / Metronic ("kt-*") component classes that
 * the app's ~1,310 templates already use, so pages get the new design's look
 * without any per-template markup changes. This file only changes appearance
 * (color, radius, shadow, spacing) — it never renames or removes a class, so
 * existing JS (Metronic, DataTables, Select2, bootstrap-datepicker, jQuery
 * plugin init code) keeps working exactly as before.
 *
 * Load order: after all vendor CSS, so these rules win the cascade.
 */

/* ---------------------------------------------------------------------- */
/* Buttons                                                                 */
/* ---------------------------------------------------------------------- */

.btn {
  border-radius: var(--wb-radius-md);
  font-weight: 500;
  font-family: var(--wb-font);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
  box-shadow: none;
}
.btn:active {
  transform: scale(0.97);
}
.btn:focus {
  box-shadow: 0 0 0 3px var(--wb-green-lighter) !important;
}

.btn-primary,
.btn.btn-primary,
.btn-brand,
.btn.kt-btn.kt-btn--icon.btn-primary,
.btn-success,
.kt-bg-success {
  background-color: var(--wb-green) !important;
  border-color: var(--wb-green) !important;
  color: #fff !important;
}
/* Force white on every child too (icon, label text, wrapping spans) — some
   older templates put the visible label in a plain text node or span that
   picks up a stray color from elsewhere in the cascade instead of
   inheriting the button's own color. */
.btn-primary *,
.btn-brand *,
.btn-success *,
.kt-bg-success * {
  color: #fff !important;
}
.btn-primary:hover,
.btn-brand:hover,
.btn-success:hover,
.kt-bg-success:hover {
  background-color: var(--wb-green-dark) !important;
  border-color: var(--wb-green-dark) !important;
  box-shadow: var(--wb-shadow-md);
}

.btn-outline-primary,
.btn-outline-brand {
  color: var(--wb-filter-text) !important;
  border-color: var(--wb-filter-border) !important;
  background-color: transparent !important;
}
.btn-outline-primary:hover,
.btn-outline-brand:hover {
  background-color: var(--wb-table-row-hover) !important;
  color: var(--wb-filter-text) !important;
}

/* plain "ghost" action — icon + label, no fill, no border, subtle hover
   tint (the "Export" button style) */
.btn-ghost {
  background-color: transparent !important;
  border-color: transparent !important;
  color: var(--wb-table-text) !important;
}
.btn-ghost:hover {
  background-color: var(--wb-table-row-hover) !important;
}

.btn-secondary,
.btn-label-brand,
.btn.btn-clean {
  background-color: #f3f4f6 !important;
  border-color: #f3f4f6 !important;
  color: var(--wb-text) !important;
}
.btn-secondary:hover {
  background-color: #e5e7eb !important;
}

.btn-danger {
  background-color: var(--wb-danger) !important;
  border-color: var(--wb-danger) !important;
}

.btn-sm {
  border-radius: var(--wb-radius-sm);
}
.btn-lg {
  border-radius: var(--wb-radius-lg);
}

/* ---------------------------------------------------------------------- */
/* Cards / Metronic portlets                                              */
/* ---------------------------------------------------------------------- */

.card,
.kt-portlet {
  border-radius: var(--wb-radius-xl) !important;
  border: 1px solid var(--wb-border);
  box-shadow: var(--wb-shadow-sm);
  overflow: hidden;
}

.card-header,
.kt-portlet__head {
  background-color: var(--wb-surface) !important;
  border-bottom: 1px solid var(--wb-border) !important;
  font-family: var(--wb-font);
}

.kt-portlet__head-title,
.card-title {
  color: var(--wb-table-title) !important;
  font-weight: 600;
  font-size: 1.5rem;
}
.kt-portlet__head .sub,
.card-header .sub {
  color: var(--wb-table-subtle);
  font-size: 0.9375rem;
  font-weight: 400;
}

.kt-portlet__body,
.card-body {
  background-color: var(--wb-surface);
}

.kt-widget,
.kt-section,
.kt-widget24,
.kt-widget12 {
  border-radius: var(--wb-radius-lg);
}

/* ---------------------------------------------------------------------- */
/* Tables (plain Bootstrap tables, Metronic kt-datatable, jQuery DataTables) */
/* ---------------------------------------------------------------------- */

.table,
.kt-datatable__table,
table.dataTable {
  font-family: var(--wb-font);
  color: var(--wb-text);
}

.table thead th,
.kt-datatable__table .kt-datatable__head th,
table.dataTable thead th {
  border-bottom: 1px solid var(--wb-table-header-rule) !important;
  border-top: none !important;
  color: var(--wb-table-subtle);
  font-weight: 500;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  background-color: var(--wb-surface);
  padding: 0.85rem 1.5rem;
}

.table td,
.table th,
.kt-datatable__table td,
table.dataTable td {
  border-top: none !important;
  border-bottom: 1px solid var(--wb-table-row-rule) !important;
  padding: 26px 1.5rem;
  vertical-align: middle;
  color: var(--wb-table-text);
  font-size: 1rem;
}
.table td.num,
.table td.text-right,
.table td[class*="num"] {
  font-variant-numeric: tabular-nums;
}

.table tbody tr:last-child td,
.kt-datatable__table tbody tr:last-child td,
table.dataTable tbody tr:last-child td {
  border-bottom: none !important;
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: var(--wb-bg);
}

.table-hover tbody tr:hover,
.kt-datatable__row:hover,
table.dataTable tbody tr:hover {
  background-color: var(--wb-table-row-hover) !important;
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  border-radius: var(--wb-radius-sm) !important;
  font-family: var(--wb-font);
}

/* every page number gets the same rounded-square treatment, not just the
   current one — matches the pagination in the design preview */
.dataTables_wrapper .dataTables_paginate {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
  min-width: 2.75rem;
  height: 2.75rem;
  padding: 0 0.5rem !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--wb-border) !important;
  border-radius: var(--wb-radius-md) !important;
  background: var(--wb-surface) !important;
  color: var(--wb-table-text) !important;
  font-family: var(--wb-font);
  font-weight: 500;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--wb-table-row-hover) !important;
  border-color: var(--wb-pagination-active) !important;
  color: var(--wb-pagination-active) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--wb-pagination-active) !important;
  border-color: var(--wb-pagination-active) !important;
  color: #fff !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  background: var(--wb-surface) !important;
  border-color: var(--wb-border) !important;
  color: var(--wb-text-lighter) !important;
  cursor: default;
}

/* the hand-rolled server-side "Page X of Y" pill group used on the
   larger CRM/Survey list screens (m-btn-group--pill + btn-dark for the
   prev/next arrows) — same idea, softened out of Metronic's solid black */
.m-btn-group--pill .btn-dark {
  background: var(--wb-surface) !important;
  border: 1px solid var(--wb-border) !important;
  color: var(--wb-text) !important;
}
.m-btn-group--pill .btn-dark:hover {
  background: var(--wb-green-lighter) !important;
  border-color: var(--wb-green) !important;
  color: var(--wb-green-dark) !important;
}
.m-btn-group--pill .btn-dark.disabled {
  color: var(--wb-text-lighter) !important;
}

/* export toolbar (Copy / CSV / Excel / PDF / Print) — the Buttons extension
   ships with zero gap between adjacent buttons */
div.dt-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
div.dt-buttons .dt-button {
  margin: 0 !important;
}

/* ---------------------------------------------------------------------- */
/* Forms / inputs / select2 / bootstrap-select / datepicker                */
/* ---------------------------------------------------------------------- */

.form-control,
.kt-input,
select.form-control,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple,
.bootstrap-select > .dropdown-toggle {
  border: 1px solid var(--wb-border) !important;
  background-color: var(--wb-bg) !important;
  border-radius: var(--wb-radius-md) !important;
  color: var(--wb-text) !important;
  font-family: var(--wb-font);
  box-shadow: none !important;
}

.form-control:focus,
.select2-container--default.select2-container--focus .select2-selection--single {
  border-color: var(--wb-green) !important;
  background-color: #fff !important;
  box-shadow: 0 0 0 3px var(--wb-green-lighter) !important;
}

label {
  color: var(--wb-text);
  font-weight: 500;
}

.select2-dropdown,
.bootstrap-select .dropdown-menu,
.datepicker.dropdown-menu,
.bootstrap-datetimepicker-widget {
  border-radius: var(--wb-radius-md) !important;
  border: 1px solid var(--wb-border) !important;
  box-shadow: var(--wb-shadow-md) !important;
  font-family: var(--wb-font);
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.datepicker table tr td.active,
.datepicker table tr td.today {
  background-color: var(--wb-green) !important;
  color: #fff !important;
}

.datepicker table tr td:hover {
  background-color: var(--wb-green-lighter) !important;
}

/* Checkboxes / radios / switches (Bootstrap + Metronic kt-checkbox/kt-switch) */
.kt-checkbox > span,
.kt-radio > span {
  border-radius: var(--wb-radius-sm) !important;
}
.kt-checkbox > input:checked ~ span,
.kt-radio > input:checked ~ span {
  background-color: var(--wb-green) !important;
  border-color: var(--wb-green) !important;
}
.kt-switch.kt-switch--icon .kt-switch input:checked ~ span,
.custom-switch .custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--wb-green) !important;
  border-color: var(--wb-green) !important;
}
.custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--wb-green);
  border-color: var(--wb-green);
}

/* ---------------------------------------------------------------------- */
/* Badges / alerts                                                        */
/* ---------------------------------------------------------------------- */

.badge,
.kt-badge {
  border-radius: var(--wb-radius-pill);
  font-weight: 500;
  font-size: 0.8125rem;
  padding: 6px 14px;
  font-family: var(--wb-font);
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}
.badge-primary,
.badge-success,
.kt-badge--brand {
  background-color: var(--wb-pill-success-bg) !important;
  color: var(--wb-pill-success-text) !important;
}
.badge-primary::before,
.badge-success::before,
.kt-badge--brand::before {
  background-color: var(--wb-pill-success-dot) !important;
}
.badge-danger {
  background-color: var(--wb-pill-danger-bg) !important;
  color: var(--wb-pill-danger-text) !important;
}
.badge-danger::before {
  background-color: var(--wb-pill-danger-dot) !important;
}
.badge-warning {
  background-color: var(--wb-pill-warning-bg) !important;
  color: var(--wb-pill-warning-text) !important;
}
.badge-warning::before {
  background-color: var(--wb-pill-warning-dot) !important;
}
/* status dot — pure CSS, no markup change needed */
.badge-primary::before,
.badge-success::before,
.badge-danger::before,
.badge-warning::before,
.kt-badge--brand::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* neutral / "Draft"-style badge — outline only, no fill, no dot */
.badge-secondary,
.badge-light,
.badge-grey,
.kt-badge--grey,
.kt-badge--metal {
  background-color: transparent !important;
  color: var(--wb-pill-neutral-text) !important;
  border: 1px solid var(--wb-pill-neutral-border) !important;
}

.alert {
  border: none;
  border-radius: var(--wb-radius-md);
  font-family: var(--wb-font);
}
.alert-success {
  background-color: var(--wb-green-lighter);
  color: var(--wb-green-dark);
}
.alert-danger {
  background-color: rgba(255, 86, 48, 0.08);
  color: var(--wb-danger);
}
.alert-warning {
  background-color: rgba(255, 171, 0, 0.1);
  color: #b17600;
}

/* ---------------------------------------------------------------------- */
/* Modals (Bootstrap modal + sweetalert2)                                 */
/* ---------------------------------------------------------------------- */

.modal-content {
  border-radius: var(--wb-radius-2xl) !important;
  border: none;
  box-shadow: var(--wb-shadow-lg);
  font-family: var(--wb-font);
}
.modal-header {
  border-bottom: 1px solid var(--wb-border);
  border-top-left-radius: var(--wb-radius-2xl) !important;
  border-top-right-radius: var(--wb-radius-2xl) !important;
}
.modal-footer {
  border-top: 1px solid var(--wb-border);
}
.modal-backdrop.show {
  background-color: rgba(50, 59, 75, 0.6);
  opacity: 1;
}

.swal2-popup {
  border-radius: var(--wb-radius-2xl) !important;
  font-family: var(--wb-font) !important;
}
.swal2-confirm.swal2-styled {
  background-color: var(--wb-green) !important;
  border-radius: var(--wb-radius-md) !important;
}
.swal2-cancel.swal2-styled {
  background-color: #f3f4f6 !important;
  color: var(--wb-text) !important;
  border-radius: var(--wb-radius-md) !important;
}

/* ---------------------------------------------------------------------- */
/* Pagination / tabs / dropdowns                                          */
/* ---------------------------------------------------------------------- */

.pagination .page-link {
  border: none;
  border-radius: var(--wb-radius-sm);
  margin: 0 2px;
  color: var(--wb-text);
  font-family: var(--wb-font);
}
.pagination .page-item.active .page-link {
  background-color: var(--wb-green);
  color: #fff;
}

.nav-tabs {
  border-bottom: 1px solid var(--wb-border);
}
.nav-tabs .nav-link {
  border: none;
  color: var(--wb-text-light);
  font-family: var(--wb-font);
  font-weight: 500;
}
.nav-tabs .nav-link.active {
  color: var(--wb-green-dark);
  border-bottom: 2px solid var(--wb-green);
  background: transparent;
}

.dropdown-menu {
  border-radius: var(--wb-radius-md) !important;
  border: 1px solid var(--wb-border) !important;
  box-shadow: var(--wb-shadow-md) !important;
  font-family: var(--wb-font);
}
.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--wb-green-lighter) !important;
  color: var(--wb-green-dark) !important;
}

/* ---------------------------------------------------------------------- */
/* Toastr                                                                  */
/* ---------------------------------------------------------------------- */

#toast-container > div {
  border-radius: var(--wb-radius-md) !important;
  box-shadow: var(--wb-shadow-md) !important;
  font-family: var(--wb-font);
  opacity: 1 !important;
}
#toast-container > .toast-success {
  background-color: var(--wb-green) !important;
}