/* =====================================================
   Dashboard REDESIGN layer  —  Step 1: Chrome
   Loaded AFTER dashboard-wz.css. Purely additive:
   remove the <link> in header.tpl to fully revert.

   Strategy: dashboard-wz.css consumes --wz-* variables
   everywhere, so we retune those tokens (blue accent,
   Inter font, softer surfaces) and the whole app follows.
   Then a focused set of overrides modernizes the chrome
   (sidebar, topbar, page header) without touching markup.
   Light / Dark / RTL all covered.
   ===================================================== */

/* =========================
   1. TOKEN RETUNE — LIGHT
   ========================= */
:root {
  /* Accent → prototype blue */
  --wz-primary: #2C7BE5;
  --wz-primary-dark: #1a68d1;
  --wz-primary-light: #e7f0fc;
  --wz-primary-rgb: 44, 123, 229;

  /* Typography → Inter (data-friendly) */
  --wz-font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Radii — slightly tighter buttons/inputs, generous cards */
  --wz-radius: 16px;
  --wz-radius-sm: 10px;

  /* Surfaces — soft, layered (prototype palette) */
  --wz-text: #1b2a41;
  --wz-text-secondary: #4a5568;
  --wz-text-muted: #76839b;
  --wz-bg: #ffffff;
  --wz-bg-soft: #f1f5fb;
  --wz-bg-gray: #f6f8fb;
  --wz-border: #eaeef4;
  --wz-shadow: 0 1px 3px rgba(18, 38, 63, .06), 0 1px 2px rgba(18, 38, 63, .04);
  --wz-shadow-lg: 0 12px 32px rgba(18, 38, 63, .12);
  --wz-card-bg: #ffffff;
  --wz-dropdown-bg: #ffffff;
  --wz-input-bg: #ffffff;
  --wz-input-border: #e2e8f0;
  --wz-modal-bg: #ffffff;

  /* App surface tone behind cards */
  --wz-app-bg: #f6f8fb;
}

/* =========================
   2. TOKEN RETUNE — DARK
   ========================= */
body[data-wz-theme="dark"] {
  --wz-primary-light: rgba(44, 123, 229, 0.20);
  --wz-text: #e7ecf3;
  --wz-text-secondary: #aab6c8;
  --wz-text-muted: #8d9bb3;
  --wz-bg: #0f1623;
  --wz-bg-soft: #141b28;
  --wz-bg-gray: #141b28;
  --wz-border: #243044;
  --wz-shadow: 0 1px 3px rgba(0, 0, 0, .4);
  --wz-shadow-lg: 0 12px 32px rgba(0, 0, 0, .5);
  --wz-card-bg: #18202f;
  --wz-dropdown-bg: #1d2636;
  --wz-input-bg: #141b28;
  --wz-input-border: #2b3a52;
  --wz-modal-bg: #18202f;
  --wz-app-bg: #0f1623;
}

/* =========================
   3. BASE TYPOGRAPHY POLISH
   ========================= */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv02", "cv03", "tnum";
  letter-spacing: -0.002em;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.header-title {
  letter-spacing: -0.01em;
}
/* tabular figures for stats/tables/numbers */
.h1, .h2, .display-1, .display-2, .display-3, .display-4,
table, .dataTable, .badge {
  font-variant-numeric: tabular-nums;
}

/* App surface tone (light + dark inherit from token) */
body[data-wz-theme="light"],
body[data-wz-theme="light"] .main-content {
  background-color: var(--wz-app-bg) !important;
}

/* =========================
   4. SIDEBAR — modern surface + pill nav (LIGHT)
   ========================= */
body[data-wz-theme="light"] .navbar-vertical.navbar-vibrant {
  background-image: none !important;
  background-color: var(--wz-card-bg) !important;   /* clean white surface */
  border-right: 1px solid var(--wz-border);
  box-shadow: none;
}

/* Pill-style nav items (theme-agnostic structure) */
.navbar-vertical.navbar-vibrant .navbar-nav .nav-link {
  border-radius: var(--wz-radius-sm) !important;
  margin: 1px 0.75rem;
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
  border-left: 0 !important;   /* drop the old 3px accent bar */
  border-right: 0 !important;
}
.navbar-vertical.navbar-vibrant .navbar-nav .nav-link i {
  width: 1.35rem;
  text-align: center;
}

/* Active / hover as soft tinted pills (LIGHT) */
body[data-wz-theme="light"] .navbar-vertical.navbar-vibrant .nav-link:hover {
  color: var(--wz-primary) !important;
  background-color: rgba(var(--wz-primary-rgb), 0.06);
}
body[data-wz-theme="light"] .navbar-vertical.navbar-vibrant .nav-link.active,
body[data-wz-theme="light"] .navbar-vertical.navbar-vibrant .nav-item.active > .nav-link {
  color: var(--wz-primary) !important;
  background-color: var(--wz-primary-light);
  border-left-color: transparent !important;
  font-weight: 600;
}

/* Sub-nav items keep their indent but join the pill rhythm */
body[data-wz-theme="light"] .navbar-vertical.navbar-vibrant .nav .nav-sm .nav-link {
  padding-left: 2.5rem;
  border-left: 0 !important;
}

/* Section headings a touch airier */
.navbar-vertical.navbar-vibrant .navbar-heading {
  font-size: 0.66rem;
  letter-spacing: 0.09em;
  margin-top: 0.35rem;
}

/* =========================
   5. SIDEBAR — DARK
   ========================= */
body[data-wz-theme="dark"] .navbar-vertical.navbar-vibrant {
  background-image: none !important;
  background-color: var(--wz-card-bg) !important;
  border-right: 1px solid var(--wz-border);
  box-shadow: none;
}
body[data-wz-theme="dark"] .navbar-vertical.navbar-vibrant .nav-link {
  color: var(--wz-text-secondary) !important;
}
body[data-wz-theme="dark"] .navbar-vertical.navbar-vibrant .nav-link:hover {
  color: #fff !important;
  background-color: rgba(var(--wz-primary-rgb), 0.14);
}
body[data-wz-theme="dark"] .navbar-vertical.navbar-vibrant .nav-link.active,
body[data-wz-theme="dark"] .navbar-vertical.navbar-vibrant .nav-item.active > .nav-link {
  color: #fff !important;
  background-color: rgba(var(--wz-primary-rgb), 0.24);
  border-left-color: transparent !important;
}

/* =========================
   6. SIDEBAR — RTL (use pill, drop side bars)
   ========================= */
[dir="rtl"] .navbar-vertical.navbar-vibrant .navbar-nav .nav-link {
  border-right: 0 !important;
  border-left: 0 !important;
}
[dir="rtl"] body[data-wz-theme="light"] .navbar-vertical.navbar-vibrant .nav-link.active,
[dir="rtl"] body[data-wz-theme="light"] .navbar-vertical.navbar-vibrant .nav-item.active > .nav-link,
[dir="rtl"] body[data-wz-theme="dark"] .navbar-vertical.navbar-vibrant .nav-link.active,
[dir="rtl"] body[data-wz-theme="dark"] .navbar-vertical.navbar-vibrant .nav-item.active > .nav-link {
  border-right-color: transparent !important;
  border-left-color: transparent !important;
}
[dir="rtl"] body[data-wz-theme="light"] .navbar-vertical.navbar-vibrant {
  border-left: 1px solid var(--wz-border);
  border-right: none;
}

/* =========================
   7. PAGE HEADER (frosted, sticky) — match new bg
   ========================= */
body[data-wz-theme="light"] .main-content .header {
  background: rgba(246, 248, 251, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--wz-border);
}
body[data-wz-theme="dark"] .main-content .header {
  background: rgba(15, 22, 35, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--wz-border);
}

/* =========================
   8. TOP BAR (#topbar) action row
   ========================= */
#topbar {
  /* Lift above the sticky .header (z-index:1000) so the avatar
     dropdown isn't painted underneath it */
  position: relative;
  z-index: 1031;
  padding-top: 0.85rem;
  padding-bottom: 0.25rem;
}
/* Safety net: keep the topbar's dropdown above the page header too */
#topbar .dropdown-menu {
  z-index: 1032;
}

/* =========================
   14. MOBILE NAV — off-canvas drawer + bottom tab bar (< md)
   The sidebar uses Bootstrap navbar-expand-md, so below 768px it
   collapses. We repurpose it as a slide-in drawer and add a bottom
   tab bar. Desktop (>= md) is untouched.
   ========================= */
.wz-scrim { display: none; }
.wz-bottom-nav { display: none; }

@media (max-width: 767.98px) {
  /* Sidebar → off-canvas drawer */
  .navbar-vertical.navbar-vibrant#sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    height: 100%;
    width: 278px;
    max-width: 84vw;
    transform: translateX(-100%);
    transition: transform .28s ease, box-shadow .28s ease;
    z-index: 1045;
    overflow-y: auto;
    box-shadow: none;
  }
  body.wz-drawer-open .navbar-vertical.navbar-vibrant#sidebar {
    transform: translateX(0);
    box-shadow: var(--wz-shadow-lg);
  }
  [dir="rtl"] .navbar-vertical.navbar-vibrant#sidebar {
    left: auto;
    right: 0;
    transform: translateX(100%);
  }
  [dir="rtl"] body.wz-drawer-open .navbar-vertical.navbar-vibrant#sidebar {
    transform: translateX(0);
  }

  /* Stack the drawer contents vertically and force the collapsed nav open */
  #sidebar .container-fluid {
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    height: auto;
  }
  #sidebar .navbar-collapse {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
  }
  #sidebar .navbar-toggler { display: none !important; }

  /* Scrim behind the drawer */
  .wz-scrim {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(10, 15, 25, .5);
    z-index: 1044;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
  }
  body.wz-drawer-open .wz-scrim {
    opacity: 1;
    visibility: visible;
  }

  /* Bottom tab bar */
  .wz-bottom-nav {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1040;
    background: var(--wz-card-bg);
    border-top: 1px solid var(--wz-border);
    box-shadow: 0 -2px 14px rgba(18, 38, 63, .06);
    padding: .4rem .25rem calc(.4rem + env(safe-area-inset-bottom));
    justify-content: space-around;
  }
  body[data-wz-theme="dark"] .wz-bottom-nav {
    box-shadow: 0 -2px 14px rgba(0, 0, 0, .4);
  }
  .wz-bottom-item {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .15rem;
    padding: .35rem .25rem;
    color: var(--wz-text-muted);
    font-size: .68rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    border-radius: var(--wz-radius-sm);
    cursor: pointer;
  }
  .wz-bottom-item i { font-size: 1.25rem; }
  .wz-bottom-item span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .wz-bottom-item:hover,
  .wz-bottom-item:focus,
  .wz-bottom-item.active {
    color: var(--wz-primary);
    text-decoration: none;
  }
  .wz-bottom-item:active {
    background: rgba(var(--wz-primary-rgb), .08);
  }

  /* Keep page content clear of the fixed bottom bar */
  .main-content {
    padding-bottom: 4.75rem !important;
  }
}

/* =========================
   15. COMMAND PALETTE (Ctrl/Cmd+K) + search pill
   ========================= */
.wz-search-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 40px;
  padding: 0 0.7rem;
  border-radius: var(--wz-radius-sm);
  border: 1px solid var(--wz-border);
  background: var(--wz-bg-gray);
  color: var(--wz-text-muted);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--wz-transition);
}
.wz-search-pill:hover {
  border-color: var(--wz-primary);
  color: var(--wz-text);
}
.wz-search-pill > span { margin-right: 0.5rem; }
.wz-search-pill kbd {
  font-size: 0.68rem;
  color: var(--wz-text-muted);
  background: var(--wz-card-bg);
  border: 1px solid var(--wz-border);
  border-radius: 6px;
  padding: 0.1rem 0.4rem;
}
@media (max-width: 991.98px) { .wz-search-pill { display: none; } }

/* Overlay */
.wz-cmdk {
  position: fixed;
  inset: 0;
  z-index: 1060;
  display: none;
}
.wz-cmdk.is-open { display: block; }
.wz-cmdk__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 15, 25, .45);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.wz-cmdk__panel {
  position: relative;
  width: calc(100% - 2rem);
  max-width: 560px;
  margin: 12vh auto 0;
  background: var(--wz-card-bg);
  border: 1px solid var(--wz-border);
  border-radius: var(--wz-radius);
  box-shadow: var(--wz-shadow-lg);
  overflow: hidden;
}
.wz-cmdk__search {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid var(--wz-border);
}
.wz-cmdk__search > i { color: var(--wz-text-muted); font-size: 1.15rem; }
.wz-cmdk__search input {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--wz-text);
  font-size: 1rem;
  font-weight: 500;
  outline: none;
}
.wz-cmdk__search kbd {
  font-size: 0.68rem;
  color: var(--wz-text-muted);
  border: 1px solid var(--wz-border);
  border-radius: 6px;
  padding: 0.1rem 0.4rem;
}
.wz-cmdk__results {
  list-style: none;
  margin: 0;
  padding: 0.4rem;
  max-height: 48vh;
  overflow-y: auto;
}
.wz-cmdk__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.7rem;
  border-radius: var(--wz-radius-sm);
  cursor: pointer;
}
.wz-cmdk__item > i {
  width: 1.25rem;
  text-align: center;
  color: var(--wz-text-muted);
  font-size: 1.05rem;
  flex: 0 0 1.25rem;
}
.wz-cmdk__item.active,
.wz-cmdk__item:hover { background: var(--wz-primary-light); }
.wz-cmdk__item.active > i,
.wz-cmdk__item:hover > i,
.wz-cmdk__item.active .wz-cmdk__label,
.wz-cmdk__item:hover .wz-cmdk__label { color: var(--wz-primary); }
.wz-cmdk__label {
  flex: 1;
  font-weight: 600;
  color: var(--wz-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wz-cmdk__path {
  font-size: 0.72rem;
  color: var(--wz-text-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: nowrap;
}
.wz-cmdk__empty {
  padding: 1.6rem 1.1rem;
  text-align: center;
  color: var(--wz-text-muted);
  font-size: 0.9rem;
}
@media (max-width: 575px) {
  .wz-cmdk__path { display: none; }
  .wz-cmdk__panel { margin-top: 8vh; }
}

/* =========================
   16. FORMS & MODALS POLISH
   ========================= */

/* ---- Modal header ---- */
.modal-header {
  align-items: center;
  padding: 1.1rem 1.35rem;
}
.modal-title {
  font-size: 1.05rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  letter-spacing: -0.01em;
}
.modal-title > i { color: var(--wz-primary); }

/* Close button → soft rounded control (BS4 default is a faint ×) */
.modal-header .close {
  opacity: 1;
  width: 34px;
  height: 34px;
  padding: 0;
  margin: -0.25rem -0.25rem -0.25rem auto;
  border-radius: 9px;
  color: var(--wz-text-muted);
  text-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: var(--wz-transition);
}
.modal-header .close:hover {
  background: var(--wz-bg-gray);
  color: var(--wz-text);
}
[dir="rtl"] .modal-header .close { margin: -0.25rem auto -0.25rem -0.25rem; }

/* ---- Modal body / footer ---- */
.modal-body { padding: 1.35rem; }
.modal-footer { padding: 1rem 1.35rem; }

/* Cancel buttons are styled btn-danger here — soften to a neutral ghost */
.modal-footer .btn-danger[data-dismiss="modal"] {
  background: transparent;
  border-color: var(--wz-border);
  color: var(--wz-text-secondary);
}
.modal-footer .btn-danger[data-dismiss="modal"]:hover,
.modal-footer .btn-danger[data-dismiss="modal"]:focus {
  background: var(--wz-bg-gray);
  border-color: var(--wz-input-border);
  color: var(--wz-text);
  box-shadow: none;
}

/* ---- Labels, inputs, help text ---- */
.form-group { margin-bottom: 1.1rem; }
.modal-body label,
.form-group > label {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--wz-text-secondary);
  margin-bottom: 0.4rem;
}
.form-group > label .la-info-circle {
  color: var(--wz-text-muted);
  font-size: 0.9rem;
}
.form-control {
  padding: 0.5rem 0.85rem;
}
.modal-body small.text-muted,
.form-group small.text-muted {
  font-size: 0.78rem;
}

/* File inputs (plain type=file as .form-control) */
input[type="file"].form-control {
  height: auto;
  padding: 0.4rem 0.6rem;
}
input[type="file"].form-control::file-selector-button {
  border: none;
  background: var(--wz-primary-light);
  color: var(--wz-primary);
  font-weight: 600;
  border-radius: 7px;
  padding: 0.35rem 0.8rem;
  margin-right: 0.8rem;
  cursor: pointer;
  transition: var(--wz-transition);
}
input[type="file"].form-control::file-selector-button:hover {
  filter: brightness(0.97);
}

/* Input group addons */
.input-group-text {
  background: var(--wz-bg-gray);
  border-color: var(--wz-input-border);
  color: var(--wz-text-secondary);
}

/* ---- bootstrap-select (selects are replaced by this widget at runtime) ---- */
.bootstrap-select > .dropdown-toggle.btn,
.bootstrap-select > button.dropdown-toggle {
  border: 1px solid var(--wz-input-border) !important;
  background: var(--wz-input-bg) !important;
  color: var(--wz-text) !important;
  border-radius: var(--wz-radius-sm) !important;
  padding: 0.5rem 0.85rem;
  font-weight: 500;
  box-shadow: none !important;
}
.bootstrap-select > .dropdown-toggle.btn:focus,
.bootstrap-select.show > .dropdown-toggle.btn {
  border-color: var(--wz-primary) !important;
  box-shadow: 0 0 0 0.2rem rgba(var(--wz-primary-rgb), 0.15) !important;
  outline: none !important;
}
.bootstrap-select .dropdown-menu li a.dropdown-item.active,
.bootstrap-select .dropdown-menu li a.dropdown-item:active,
.bootstrap-select .dropdown-menu li.selected > a.dropdown-item {
  background: var(--wz-primary) !important;
  color: #fff !important;
}
.bootstrap-select .bs-searchbox .form-control {
  border-radius: var(--wz-radius-sm);
}

/* ---- Mobile: dock modals to the bottom as sheets ---- */
@media (max-width: 575.98px) {
  system-modal .modal-dialog,
  .modal-dialog-centered {
    align-items: flex-end !important;
    min-height: 100% !important;
    margin: 0 !important;
    max-width: 100% !important;
  }
  .modal-content {
    border-radius: var(--wz-radius) var(--wz-radius) 0 0;
    max-height: 92vh;
  }
  .modal-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* slide up from the bottom instead of down from the top */
  system-modal.fade .modal-dialog { transform: translateY(60px); }
  system-modal.show .modal-dialog { transform: none; }
}

/* =========================
   17. DATA TABLES — modern styling
   ========================= */

/* ---- Toolbar: length + search ---- */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
  margin-bottom: 1rem;
}
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 500;
  color: var(--wz-text-secondary);
  margin: 0;
}
/* Native length select — was clipped (no padding). Give it room + a caret. */
.dataTables_wrapper .dataTables_length select {
  padding: 0.4rem 2rem 0.4rem 0.8rem !important;
  min-width: 4.75rem;
  height: auto;
  font-weight: 600;
  color: var(--wz-text);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2376839b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.65rem center;
}
.dataTables_wrapper .dataTables_filter input {
  min-width: 220px;
  padding: 0.45rem 0.85rem !important;
}

/* ---- Header row ---- */
table.dataTable thead th,
table.dataTable thead td {
  background: var(--wz-bg-gray);
  color: var(--wz-text-muted) !important;
  text-transform: uppercase;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  border-top: none !important;
  border-bottom: 1px solid var(--wz-border) !important;
  padding: 0.55rem 0.8rem;
  vertical-align: middle;
}
table.dataTable thead th:first-child { border-top-left-radius: var(--wz-radius-sm); }
table.dataTable thead th:last-child { border-top-right-radius: var(--wz-radius-sm); }

/* Sort glyphs: declutter the stock ↑↓, brand-tint the active direction */
table.dataTable thead th.sorting:before,
table.dataTable thead th.sorting:after,
table.dataTable thead th.sorting_asc:before,
table.dataTable thead th.sorting_asc:after,
table.dataTable thead th.sorting_desc:before,
table.dataTable thead th.sorting_desc:after {
  opacity: 0.25 !important;
  font-size: 0.85em;
  bottom: 0.75em;
}
table.dataTable thead th.sorting_asc:before,
table.dataTable thead th.sorting_desc:after {
  opacity: 1 !important;
  color: var(--wz-primary);
}

/* ---- Body rows ---- */
table.dataTable tbody td {
  padding: 0.55rem 0.8rem;
  vertical-align: middle;
  border-top: 1px solid var(--wz-border) !important;
  color: var(--wz-text);
  font-size: 0.85rem;
  line-height: 1.35;
}
table.dataTable tbody tr { transition: background-color 0.12s ease; }
table.dataTable tbody tr:hover { background-color: var(--wz-bg-soft); }
/* Selected rows use the custom class dtrow-selected */
table.dataTable tbody tr.dtrow-selected,
table.dataTable tbody tr.dtrow-selected td {
  background-color: var(--wz-primary-light) !important;
}

/* Event tags rendered as <code> → soft pill */
table.dataTable td code {
  background: var(--wz-primary-light);
  color: var(--wz-primary);
  padding: 0.15rem 0.5rem;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 600;
}

/* Status badges in cells → soft pills */
table.dataTable td .badge {
  padding: 0.32rem 0.65rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
}
table.dataTable td .badge.badge-primary { background: var(--wz-primary-light); color: var(--wz-primary); }
table.dataTable td .badge.badge-success { background: rgba(0, 176, 116, .14); color: #00a76d; }
table.dataTable td .badge.badge-danger  { background: rgba(229, 72, 77, .14);  color: #e5484d; }
table.dataTable td .badge.badge-warning { background: rgba(245, 166, 35, .16); color: #d98a13; }
table.dataTable td .badge.badge-info    { background: rgba(54, 179, 212, .14); color: #2aa7c9; }
body[data-wz-theme="dark"] table.dataTable td .badge.badge-success { color: #16c98a; }
body[data-wz-theme="dark"] table.dataTable td .badge.badge-danger  { color: #ff6b70; }
body[data-wz-theme="dark"] table.dataTable td .badge.badge-warning { color: #f5b54a; }
body[data-wz-theme="dark"] table.dataTable td .badge.badge-info    { color: #4fc3e3; }

/* ---- Action buttons (Options column) → soft icon buttons ---- */
.table-buttons .btn-group {
  display: inline-flex;
  gap: 0.3rem;
}
.table-buttons .btn-group > .btn {
  margin: 0 !important;
  border: none !important;
  border-radius: 8px !important;
  min-width: 29px;
  width: 29px;
  height: 29px;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.table-buttons .btn-group > .btn > i { font-size: 0.9rem; }
/* NOTE: dashboard-wz.css forces .btn-primary bg with !important, so these
   soft-icon overrides must also use !important to win. */
.table-buttons .btn.btn-secondary { background: var(--wz-bg-gray) !important; color: var(--wz-text-secondary) !important; }
.table-buttons .btn.btn-secondary:hover { background: var(--wz-text-muted) !important; color: #fff !important; }
.table-buttons .btn.btn-primary { background: var(--wz-primary-light) !important; color: var(--wz-primary) !important; }
.table-buttons .btn.btn-primary:hover { background: var(--wz-primary) !important; color: #fff !important; }
.table-buttons .btn.btn-danger { background: rgba(229, 72, 77, .13) !important; color: #e5484d !important; }
.table-buttons .btn.btn-danger:hover { background: #e5484d !important; color: #fff !important; }
.table-buttons .btn.btn-success { background: rgba(0, 176, 116, .13) !important; color: #00a76d !important; }
.table-buttons .btn.btn-success:hover { background: #00a76d !important; color: #fff !important; }
.table-buttons .btn.btn-warning { background: rgba(245, 166, 35, .15) !important; color: #d98a13 !important; }
.table-buttons .btn.btn-warning:hover { background: #f5a623 !important; color: #fff !important; }
.table-buttons .btn.btn-info { background: rgba(54, 179, 212, .13) !important; color: #2aa7c9 !important; }
.table-buttons .btn.btn-info:hover { background: #36b3d4 !important; color: #fff !important; }

/* ---- Pagination ---- */
.dataTables_wrapper .dataTables_paginate { margin-top: 1rem; }
.dataTables_wrapper .dataTables_paginate .paginate_button {
  border: 1px solid var(--wz-border) !important;
  border-radius: var(--wz-radius-sm) !important;
  margin-left: 0.3rem;
  min-width: 2.25rem;
  padding: 0.35rem 0.6rem !important;
  color: var(--wz-text-secondary) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
  opacity: 0.45;
}
.dataTables_wrapper .dataTables_info {
  color: var(--wz-text-muted);
  padding-top: 1rem;
}

/* =========================
   18. MOBILE — let Responsive collapse tables (no horizontal drag)
   Bootstrap's .table-responsive wrapper adds horizontal scroll that
   fights the DataTables Responsive plugin (documented conflict). On
   phones, drop the scroll so the plugin collapses lower-priority
   columns into the expandable (+) row we styled in section 13.
   ========================= */
@media (max-width: 767.98px) {
  .dt-responsive.table-responsive,
  .dataTables_wrapper .table-responsive,
  .dataTables_wrapper {
    overflow-x: visible !important;
  }
  table.dataTable {
    width: 100% !important;
    margin: 0 !important;
  }
  /* keep long values (URLs, tokens) from overflowing a visible cell */
  table.dataTable td,
  table.dataTable td .dtr-data {
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  /* make the + expander a clear, tappable target */
  table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control {
    padding-left: 2rem !important;
    cursor: pointer;
  }
}

/* =========================
   19. EMPTY STATES + LOADING SKELETONS
   ========================= */

/* ---- Empty table state ---- */
table.dataTable td.dataTables_empty {
  text-align: center !important;
  padding: 3rem 1rem 2.75rem !important;
  color: var(--wz-text-muted);
  font-size: 0.92rem;
  font-weight: 500;
}
table.dataTable td.dataTables_empty::before {
  content: "";
  display: block;
  width: 54px;
  height: 54px;
  margin: 0 auto 1rem;
  opacity: 0.65;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2376839b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='22 12 16 12 14 15 10 15 8 12 2 12'/%3E%3Cpath d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ---- Reusable shimmer skeleton ---- */
@keyframes wz-shimmer {
  0%   { background-position: -340px 0; }
  100% { background-position: 340px 0; }
}
.wz-skeleton {
  display: inline-block;
  height: 0.85rem;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--wz-border) 25%, var(--wz-bg-soft) 50%, var(--wz-border) 75%);
  background-size: 680px 100%;
  animation: wz-shimmer 1.3s infinite linear;
}

/* ---- Table loading skeleton (toggled by custom.run.js via .wz-loading) ---- */
.wz-tbl-skeleton {
  display: none;
  padding: 0.25rem 0;
}
.wz-tbl-skeleton .wz-sk-row {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 0.72rem 0.8rem;
  border-top: 1px solid var(--wz-border);
}
.dataTables_wrapper.wz-loading .wz-tbl-skeleton { display: block; }
.dataTables_wrapper.wz-loading table.dataTable tbody { display: none; }
.dataTables_wrapper.wz-loading .dataTables_processing { display: none !important; }
#topbar .btn {
  border-radius: var(--wz-radius-sm);
  font-weight: 600;
}

/* =========================
   9. CARD POLISH
   ========================= */
.card {
  border-radius: var(--wz-radius) !important;
  box-shadow: var(--wz-shadow);
  border: 1px solid var(--wz-border);
}
/* Calmer hover — lift, don't bloom */
.card:hover {
  box-shadow: 0 6px 20px rgba(18, 38, 63, .08);
}
body[data-wz-theme="dark"] .card:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, .45);
}

/* =========================
   10. BUTTON / BADGE RADIUS CONSISTENCY
   ========================= */
.btn {
  border-radius: var(--wz-radius-sm);
  font-weight: 600;
}
.btn-sm {
  border-radius: 8px;
}
.btn-primary:hover,
.btn-primary:focus {
  box-shadow: 0 4px 14px rgba(var(--wz-primary-rgb), 0.30) !important;
}
.badge {
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* =========================
   11. HOME — KPI / STAT CARDS
   ========================= */
.kpi-card .card-body {
  padding: 1.4rem 1.5rem;
}
/* icon chip */
.kpi-ic {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  margin-bottom: 1rem;
  line-height: 1;
}
.kpi-ic-primary { background: rgba(var(--wz-primary-rgb), .12); color: var(--wz-primary); }
.kpi-ic-info    { background: rgba(54, 179, 212, .13);          color: #2aa7c9; }
.kpi-ic-success { background: rgba(0, 176, 116, .13);           color: #00a76d; }
.kpi-ic-warning { background: rgba(245, 166, 35, .15);          color: #e0941a; }
.kpi-ic-danger  { background: rgba(229, 72, 77, .12);           color: #e5484d; }
body[data-wz-theme="dark"] .kpi-ic-info    { color: #4fc3e3; }
body[data-wz-theme="dark"] .kpi-ic-success { color: #16c98a; }
body[data-wz-theme="dark"] .kpi-ic-warning { color: #f5b54a; }
body[data-wz-theme="dark"] .kpi-ic-danger  { color: #ff6b70; }

.kpi-label {
  color: var(--wz-text-muted);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.4rem;
}
.kpi-value {
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.05;
  color: var(--wz-text);
  font-variant-numeric: tabular-nums;
}
.kpi-meta {
  font-size: 0.78rem;
  font-weight: 600;
  margin-top: 0.6rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--wz-text-muted);
}
.kpi-meta.up   { color: #00a76d; }
.kpi-meta.down { color: #e5484d; }
body[data-wz-theme="dark"] .kpi-meta.up   { color: #16c98a; }
body[data-wz-theme="dark"] .kpi-meta.down { color: #ff6b70; }

/* Chart card headers: tidy title + caption stacking */
.card-header-title {
  font-weight: 700;
  letter-spacing: -0.01em;
}
/* Balance / wallet cards: make the figure sing */
.card .card-text {
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* =========================
   12. TOPBAR ICON BUTTONS (theme toggle, future: notif/search)
   ========================= */
.wz-icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--wz-border);
  background: var(--wz-card-bg);
  color: var(--wz-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  line-height: 1;
  transition: var(--wz-transition);
  text-decoration: none;
  cursor: pointer;
}
.wz-icon-btn:hover,
.wz-icon-btn:focus {
  color: var(--wz-primary);
  border-color: var(--wz-primary);
  background: rgba(var(--wz-primary-rgb), 0.06);
  text-decoration: none;
}
.wz-icon-btn:active {
  transform: translateY(1px);
}

/* =========================
   13. RESPONSIVE TABLES (DataTables Responsive, dtr-inline)
   Style the built-in collapse so mobile rows read as clean cards.
   These dtr-* nodes only exist when the plugin collapses (small
   screens), so styling them globally is safe.
   ========================= */

/* The +/- expander → branded round control */
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before {
  background-color: var(--wz-primary) !important;
  border: none !important;
  box-shadow: 0 2px 6px rgba(var(--wz-primary-rgb), .35);
  color: #fff !important;
  top: 50% !important;
  transform: translateY(-50%);
  box-sizing: border-box;
  line-height: 1.1rem;
}
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td.dtr-control:before {
  background-color: var(--wz-text-muted) !important;
}

/* Tap-friendly parent rows on mobile */
@media (max-width: 767.98px) {
  table.dataTable.dtr-inline.collapsed > tbody > tr > td,
  table.dataTable.dtr-inline.collapsed > tbody > tr > th {
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
  }
  /* Expanded row reads as a soft card */
  table.dataTable > tbody > tr.child > td {
    background: var(--wz-bg-soft);
    border-radius: 0 0 var(--wz-radius-sm) var(--wz-radius-sm);
    padding: 0.25rem 1rem 0.5rem !important;
  }
  table.dataTable > tbody > tr.parent + tr.child {
    box-shadow: inset 0 1px 0 var(--wz-border);
  }
}

/* The label:value list inside an expanded row */
table.dataTable > tbody > tr.child ul.dtr-details {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
}
table.dataTable > tbody > tr.child ul.dtr-details > li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0.1rem;
  border-bottom: 1px solid var(--wz-border);
}
table.dataTable > tbody > tr.child ul.dtr-details > li:last-child {
  border-bottom: none;
}
table.dataTable > tbody > tr.child ul.dtr-details > li > .dtr-title {
  font-weight: 600;
  color: var(--wz-text-muted);
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  min-width: 38%;
  margin: 0;
}
table.dataTable > tbody > tr.child ul.dtr-details > li > .dtr-data {
  text-align: right;
  color: var(--wz-text);
  font-weight: 500;
  word-break: break-word;
}

/* ============================================================
   20. Overview graph cards + recent activity feed (redesign)
   ============================================================ */
.wz-graph-card .card-header { align-items: flex-start; }
.wz-card-sub { display:block; font-size:0.8rem; font-weight:500; color:var(--wz-text-muted); margin-top:0.15rem; }
.wz-graph { min-height: 290px; }
.wz-graph-loading { padding: 0.5rem 0; }
.wz-graph-empty { display:flex; align-items:center; justify-content:center; min-height:240px; color:var(--wz-text-muted); }
.wz-graph-empty i { font-size:2.4rem; opacity:0.5; }

/* ApexCharts theming nudges so parent-rendered charts match the surface */
.wz-graph .apexcharts-tooltip { border:1px solid var(--wz-border) !important; box-shadow:var(--wz-shadow-lg) !important; background:var(--wz-card-bg) !important; color:var(--wz-text) !important; }
.wz-graph .apexcharts-tooltip-title { background:var(--wz-bg-soft) !important; border-bottom:1px solid var(--wz-border) !important; font-weight:600; }
.wz-graph .apexcharts-legend-text { color:var(--wz-text-secondary) !important; }
.wz-graph .apexcharts-xaxistooltip, .wz-graph .apexcharts-yaxistooltip { background:var(--wz-card-bg) !important; border-color:var(--wz-border) !important; color:var(--wz-text) !important; }

/* Recent activity feed */
.wz-activity { display:flex; flex-direction:column; }
.wz-activity-item { display:flex; align-items:center; gap:0.9rem; padding:0.8rem 0; border-bottom:1px solid var(--wz-border); }
.wz-activity-item:first-child { padding-top:0.15rem; }
.wz-activity-item:last-child { border-bottom:0; padding-bottom:0.15rem; }
.wz-activity-ic { flex:0 0 40px; width:40px; height:40px; border-radius:12px; display:grid; place-items:center; font-size:1.15rem; }
.wz-activity-ic.wz-ch-whatsapp { background:rgba(0,176,116,.12); color:#00B074; }
.wz-activity-ic.wz-ch-sms { background:var(--wz-primary-light); color:var(--wz-primary); }
.wz-activity-ic.wz-ch-telegram { background:rgba(34,158,217,.12); color:#229ED9; }
.wz-activity-body { flex:1; min-width:0; }
.wz-activity-title { font-weight:600; font-size:0.9rem; color:var(--wz-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wz-activity-sub { font-size:0.8rem; color:var(--wz-text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wz-activity-meta { flex:0 0 auto; display:flex; flex-direction:column; align-items:flex-end; gap:0.3rem; text-align:right; }
.wz-activity-time { font-size:0.72rem; color:var(--wz-text-muted); white-space:nowrap; }
.wz-pill { font-size:0.7rem; font-weight:700; padding:0.2rem 0.55rem; border-radius:999px; line-height:1.2; white-space:nowrap; }
.wz-pill-ok { background:rgba(0,176,116,.12); color:#00926a; }
.wz-pill-pend { background:rgba(245,166,35,.14); color:#c77f04; }
.wz-pill-fail { background:rgba(229,72,77,.12); color:#d6383d; }
body[data-wz-theme="dark"] .wz-pill-ok { color:#34d399; }
body[data-wz-theme="dark"] .wz-pill-pend { color:#fbbf73; }
body[data-wz-theme="dark"] .wz-pill-fail { color:#f6878b; }
.wz-activity-empty { text-align:center; padding:2.5rem 1rem; color:var(--wz-text-muted); }
.wz-activity-empty i { font-size:2.4rem; opacity:0.5; display:block; margin-bottom:0.6rem; }
.wz-activity-empty p { margin:0; font-size:0.9rem; }

/* RTL: meta column flips to the other edge */
[dir="rtl"] .wz-activity-meta { align-items:flex-start; text-align:left; }

@media (max-width: 575.98px) {
  .wz-activity-meta { gap:0.2rem; }
  .wz-activity-sub { max-width:48vw; }
}