/*
 * ═══════════════════════════════════════════════════════════════════
 *  NhaBex — Global Design Tokens & Component Styles
 *  css/nhabex-theme.k.css
 *
 *  Ficheiro GLOBAL partilhado por /office e /commercial.
 *  Carregado APÓS Bootstrap 5 e style.k.css.
 *  Usa variáveis CSS (--nb-*) como fonte única de verdade para:
 *    cores · tipografia · espaçamento · ícones · sombras · raios
 * ═══════════════════════════════════════════════════════════════════
 */

/* ─── 1. DESIGN TOKENS ──────────────────────────────────────────── */
:root {

  /* ── Marca NhaBex (Manual de Marca: #02A586) ── */
  --nb-green:          #02A586;
  --nb-green-dark:     #028a6f;
  --nb-green-hover:    #03b894;
  --nb-green-light:    #a0e0cf;
  --nb-green-10:       rgba(2, 165, 134, 0.10);

  /* ── Paleta neutra ── */
  --nb-dark:           #1e293b;   /* títulos, texto pesado      */
  --nb-text:           #374151;   /* corpo de texto padrão      */
  --nb-text-muted:     #6b7280;   /* texto secundário           */
  --nb-text-light:     #9ca3af;   /* placeholder, desativado    */
  --nb-border:         #e5e7eb;   /* bordas padrão              */
  --nb-border-light:   #f1f5f9;   /* separadores suaves         */
  --nb-bg:             #f0f2f5;   /* fundo da página            */
  --nb-bg-card:        #ffffff;   /* fundo de cards             */
  --nb-bg-hover:       #f9fafb;   /* hover de linhas/itens      */
  --nb-bg-header:      #f8fafc;   /* cabeçalhos de tabelas      */
  --nb-bg-soft:        #f9fafb;   /* fundo subtil (stats, headers) */

  /* ── Cores semânticas ── */
  --nb-blue:           #3498db;
  --nb-blue-dark:      #2980b9;
  --nb-blue-light:     #e8f4fb;

  --nb-orange:         #f39c12;
  --nb-orange-dark:    #d68910;
  --nb-orange-light:   #fef3cd;

  --nb-red:            #e74c3c;
  --nb-red-dark:       #c0392b;
  --nb-red-light:      #fde8e8;

  --nb-yellow:         #f59e0b;
  --nb-yellow-light:   #fef9c3;

  --nb-purple:         #8b5cf6;
  --nb-purple-light:   #f0ebff;

  --nb-priority:       #cc108f;

  /* ── Tipografia (Manual de Marca: Roboto) ── */
  --nb-font:           "Roboto", "Segoe UI", system-ui, -apple-system, sans-serif;

  --nb-fs-xs:          0.6875rem;  /* 11px  — labels, badges          */
  --nb-fs-sm:          0.75rem;    /* 12px  — meta, paginação         */
  --nb-fs-base:        0.875rem;   /* 14px  — corpo padrão            */
  --nb-fs-md:          0.9375rem;  /* 15px  — texto ligeiramente maior */
  --nb-fs-lg:          1rem;       /* 16px  — sub-títulos, nav        */
  --nb-fs-xl:          1.125rem;   /* 18px  — h5 / section title      */
  --nb-fs-2xl:         1.25rem;    /* 20px  — h4                      */
  --nb-fs-3xl:         1.5rem;     /* 24px  — KPI values              */

  --nb-fw-light:       300;
  --nb-fw-regular:     400;
  --nb-fw-medium:      500;
  --nb-fw-semibold:    600;
  --nb-fw-bold:        700;

  /* ── Ícones ── */
  --nb-icon-xs:        0.75rem;    /* 12px — badges, chips       */
  --nb-icon-sm:        0.8125rem;  /* 13px — sub-nav links       */
  --nb-icon-base:      0.9375rem;  /* 15px — ações em tabelas    */
  --nb-icon-md:        1.0625rem;  /* 17px — brand icon, modais  */
  --nb-icon-lg:        1.25rem;    /* 20px — chart header        */
  --nb-icon-xl:        1.5rem;     /* 24px — KPI cards           */
  --nb-icon-2xl:       2rem;       /* 32px — empty states        */

  /* ── Espaçamento & Forma ── */
  --nb-radius-sm:      4px;
  --nb-radius:         8px;
  --nb-radius-md:      10px;
  --nb-radius-lg:      12px;
  --nb-radius-xl:      16px;
  --nb-radius-pill:    999px;

  /* ── Sombras ── */
  --nb-shadow-xs:      0 1px 2px rgba(0, 0, 0, 0.05);
  --nb-shadow-sm:      0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --nb-shadow:         0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
  --nb-shadow-md:      0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);

  /* ── Layout ── */
  --nb-sidebar-w:      240px;
  --nb-header-h:       56px;
}


/* ─── 1b. DARK MODE TOKENS ───────────────────────────────────────── */
/* Moved to section D1 — [data-bs-theme="dark"] (line ~1280+)       */
/* The toggle sets data-bs-theme="dark" on <html>.                  */


/* ─── 2. TIPOGRAFIA BASE ─────────────────────────────────────────── */

/* Aplicar fonte apenas nos elementos — NÃO em ::before/::after
   para não quebrar ícones Font Awesome (que usam pseudo-elementos) */
* {
  font-family: var(--nb-font);
}

body {
  font-size: var(--nb-fs-base);
  color: var(--nb-text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, .h1 {
  font-size: var(--nb-fs-3xl);
  font-weight: var(--nb-fw-bold);
  color: var(--nb-dark);
  line-height: 1.25;
  margin-bottom: 0.5rem;
}
h2, .h2 {
  font-size: var(--nb-fs-2xl);
  font-weight: var(--nb-fw-semibold);
  color: var(--nb-dark);
  line-height: 1.3;
}
h3, .h3 {
  font-size: var(--nb-fs-xl);
  font-weight: var(--nb-fw-semibold);
  color: var(--nb-dark);
  line-height: 1.35;
}
h4, .h4 {
  font-size: var(--nb-fs-lg);
  font-weight: var(--nb-fw-semibold);
  color: var(--nb-dark);
}
h5, .h5 {
  font-size: var(--nb-fs-md);
  font-weight: var(--nb-fw-semibold);
  color: var(--nb-dark);
}
h6, .h6 {
  font-size: var(--nb-fs-base);
  font-weight: var(--nb-fw-semibold);
  color: var(--nb-dark);
}

p { font-size: var(--nb-fs-base); color: var(--nb-text); margin-bottom: 0.75rem; }
small, .text-sm  { font-size: var(--nb-fs-sm) !important; }
.text-xs         { font-size: var(--nb-fs-xs) !important; }
.text-muted      { color: var(--nb-text-muted) !important; }
.text-nb-green   { color: var(--nb-green) !important; }

a {
  color: var(--nb-green);
  text-decoration: none;
  transition: color 0.15s ease;
}
a:hover { color: var(--nb-green-dark); }


/* ─── 3. ÍCONES — TAMANHOS PADRÃO ───────────────────────────────── */

/* Ícone de brand no sub-nav (aside) */
aside.navbar .navbar-brand i[class*="fa-"] {
  font-size: var(--nb-icon-md);
  color: var(--nb-green);
  margin-right: 7px;
  vertical-align: middle;
}

/* Ícones em links do sub-nav */
aside.navbar .nav > li > a > i[class*="fa-"] {
  font-size: var(--nb-icon-sm);
  margin-right: 5px;
  vertical-align: middle;
}

/* Ícones de ação em células de tabela */
.table td a i[class*="fa-"],
.table td i[class*="fa-"] {
  font-size: var(--nb-icon-base);
  vertical-align: middle;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.table td a:hover i[class*="fa-"] { transform: scale(1.18); }

/* Ícones em KPI cards */
.kpi-icon i[class*="fa-"]  { font-size: var(--nb-icon-xl); }

/* Ícones em chart headers */
.chart-icon,
.chart-header i[class*="fa-"] { font-size: var(--nb-icon-lg) !important; }

/* Ícones em section labels */
.dash-section-label i[class*="fa-"] { font-size: var(--nb-icon-sm); }

/* Ícones de grupos do sidebar */
.section-icon { font-size: var(--nb-icon-md); }
.nav-subitems > li > a i[class*="fa-"] {
  font-size: var(--nb-icon-sm);
  width: 16px;
  text-align: center;
  opacity: 0.75;
  margin-right: 6px;
}

/* Ícones em modais */
.modal-header h4 i[class*="fa-"],
.modal-header h5 i[class*="fa-"] {
  font-size: var(--nb-icon-md);
  color: var(--nb-green);
  margin-right: 6px;
}

/* Ícones em botões */
.btn i[class*="fa-"] {
  font-size: var(--nb-icon-sm);
  margin-right: 4px;
  vertical-align: middle;
}
.btn-sm i[class*="fa-"] { font-size: var(--nb-icon-xs); }


/* ─── 4. CARDS ───────────────────────────────────────────────────── */

.card {
  background: var(--nb-bg-card);
  border: 1px solid var(--nb-border);
  border-radius: var(--nb-radius-lg);
  box-shadow: var(--nb-shadow-sm);
}
.card .card-header {
  background: var(--nb-bg-header);
  border-bottom: 1px solid var(--nb-border);
  font-size: var(--nb-fs-sm);
  font-weight: var(--nb-fw-semibold);
  color: var(--nb-text-muted);
  padding: 10px 16px;
}
.card .card-body { padding: 16px; }


/* ─── 5. TABELAS ─────────────────────────────────────────────────── */

.table {
  font-size: var(--nb-fs-sm);
  color: var(--nb-text);
}
.table thead th {
  font-size: var(--nb-fs-xs);
  font-weight: var(--nb-fw-semibold);
  color: var(--nb-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--nb-bg-header);
  border-bottom: 2px solid var(--nb-border);
  padding: 10px 12px;
  white-space: nowrap;
}
.table tbody td {
  font-size: var(--nb-fs-sm);
  color: var(--nb-text);
  padding: 10px 12px;
  vertical-align: middle;
  border-color: var(--nb-border-light);
}
.table tbody tr:hover { background-color: var(--nb-bg-hover); }

/* Links de ação em tabelas */
.table td a {
  color: var(--nb-text-muted);
  margin: 0 4px;
  transition: color 0.15s;
}
.table td a:hover { color: var(--nb-green); }


/* ─── 6. BOTÕES ──────────────────────────────────────────────────── */

.btn {
  font-size: var(--nb-fs-base);
  font-weight: var(--nb-fw-medium);
  border-radius: var(--nb-radius);
  padding: 7px 16px;
  line-height: 1.4;
  letter-spacing: 0.01em;
  transition: background-color 0.18s ease, border-color 0.18s ease,
              box-shadow 0.18s ease, transform 0.12s ease;
}
.btn:active { transform: scale(0.98); }
.btn-sm { font-size: var(--nb-fs-sm); padding: 4px 10px; }
.btn-lg { font-size: var(--nb-fs-md); padding: 10px 22px; }

.btn-primary {
  background-color: var(--nb-green);
  border-color: var(--nb-green);
  color: #fff;
}
.btn-primary:hover, .btn-primary:focus {
  background-color: var(--nb-green-dark);
  border-color: var(--nb-green-dark);
  color: #fff;
  box-shadow: 0 0 0 3px var(--nb-green-10);
}

.btn-success {
  background-color: var(--nb-green);
  border-color: var(--nb-green);
  color: #fff;
}
.btn-success:hover, .btn-success:focus {
  background-color: var(--nb-green-dark);
  border-color: var(--nb-green-dark);
  color: #fff;
}

.btn-danger {
  background-color: var(--nb-red);
  border-color: var(--nb-red);
  color: #fff;
}
.btn-danger:hover { background-color: var(--nb-red-dark); border-color: var(--nb-red-dark); color: #fff; }

.btn-info {
  background-color: var(--nb-blue);
  border-color: var(--nb-blue);
  color: #fff;
}
.btn-info:hover { background-color: var(--nb-blue-dark); border-color: var(--nb-blue-dark); color: #fff; }

.btn-warning {
  background-color: var(--nb-orange);
  border-color: var(--nb-orange);
  color: #fff;
}
.btn-warning:hover { background-color: var(--nb-orange-dark); border-color: var(--nb-orange-dark); color: #fff; }

.btn-default {
  background-color: var(--nb-bg-card);
  border: 1px solid var(--nb-border);
  color: var(--nb-text);
}
.btn-default:hover, .btn-default:focus {
  background-color: var(--nb-bg-hover);
  border-color: var(--nb-text-light);
  color: var(--nb-dark);
}


/* Alias: .btn-error = .btn-danger (usado em commercial) */
.btn-error {
  background-color: var(--nb-red);
  border-color: var(--nb-red);
  color: #fff;
}
.btn-error:hover { background-color: var(--nb-red-dark); border-color: var(--nb-red-dark); color: #fff; }


/* ─── 7. BADGES / LABELS ─────────────────────────────────────────── */

 .label {
  font-size: var(--nb-fs-xs);
  font-weight: var(--nb-fw-semibold);
  padding: 3px 8px;
  border-radius: var(--nb-radius-sm);
  letter-spacing: 0.03em;
  display: inline-block;
}

.badge{
  font-size: 7px;
  font-weight: var(--nb-fw-semibold);
  padding: 2px 4px;
  border-radius: var(--nb-radius-sm);
  letter-spacing: 0.03em;
  display: inline-block;
}

.badge-primary, .label-primary { background-color: var(--nb-green);  color: #fff; }
.badge-success, .label-success { background-color: #22c55e;           color: #fff; }
.badge-danger,  .label-danger  { background-color: var(--nb-red);     color: #fff; }
.badge-warning, .label-warning { background-color: var(--nb-orange);  color: #fff; }
.badge-info,    .label-info    { background-color: var(--nb-blue);    color: #fff; }
.badge-default, .label-default { background-color: var(--nb-border);  color: var(--nb-text); }

/* Badge sizes */
.badge-sm, .label-sm { font-size: 0.6rem; padding: 2px 6px; }
.badge-lg, .label-lg { font-size: var(--nb-fs-sm); padding: 4px 10px; }


/* ─── 8. FORMULÁRIOS ─────────────────────────────────────────────── */

.form-control, .form-select {
  font-size: var(--nb-fs-base);
  color: var(--nb-text);
  border: 1px solid var(--nb-border);
  border-radius: var(--nb-radius);
  padding: 8px 12px;
  background-color: var(--nb-bg-card);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-control:focus, .form-select:focus {
  border-color: var(--nb-green);
  box-shadow: 0 0 0 3px var(--nb-green-10);
  outline: none;
}
.form-control::placeholder { color: var(--nb-text-light); }

label, .control-label {
  font-size: var(--nb-fs-xs);
  font-weight: var(--nb-fw-semibold);
  color: var(--nb-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 5px;
  display: block;
}
.form-group { margin-bottom: 16px; }


/* ─── 9. MODAIS ──────────────────────────────────────────────────── */

.modal-content {
  border-radius: var(--nb-radius-lg);
  border: none;
  box-shadow: var(--nb-shadow-md);
}
.modal-header {
  background: var(--nb-bg-header);
  border-bottom: 1px solid var(--nb-border);
  padding: 16px 20px;
  align-items: center;
}
.modal-header h4,
.modal-header h5 {
  font-size: var(--nb-fs-lg);
  font-weight: var(--nb-fw-semibold);
  color: var(--nb-dark);
  margin: 0;
}
.modal-body {
  padding: 20px;
  font-size: var(--nb-fs-base);
  color: var(--nb-text);
}
.modal-body label {
  font-size: var(--nb-fs-base);
  font-weight: var(--nb-fw-medium);
  color: var(--nb-text);
}
.modal-body .form-control {
  font-size: var(--nb-fs-base);
}
.modal-footer {
  background: var(--nb-bg-header);
  border-top: 1px solid var(--nb-border);
  padding: 12px 20px;
  gap: 8px;
}

/* Close button padrão para modais */
.btn-close-modal {
  padding: 8px 20px;
  background: var(--nb-bg-card);
  color: var(--nb-text-muted);
  border: 1px solid var(--nb-border);
  border-radius: var(--nb-radius);
  font-size: var(--nb-fs-base);
  font-weight: var(--nb-fw-medium);
  cursor: pointer;
  transition: all 0.15s ease;
}
.btn-close-modal:hover {
  background: var(--nb-bg-hover);
  border-color: var(--nb-text-light);
}

/* Modais empilhados (stacked) — z-index elevado */
.modal-stacked { z-index: 1060; }

/* ── Tabs dentro de modais ── */
.modal-body .nav-tabs {
  border-bottom: 2px solid var(--nb-border);
  gap: 0;
  flex-wrap: wrap;
  margin-bottom: 0;
}
.modal-body .nav-tabs .nav-item {
  margin-bottom: -2px;
}
.modal-body .nav-tabs .nav-link {
  font-size: var(--nb-fs-sm);
  font-weight: var(--nb-fw-medium);
  color: var(--nb-text-muted);
  padding: 10px 16px;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.modal-body .nav-tabs .nav-link:hover {
  color: var(--nb-green);
  border-bottom-color: rgba(60, 189, 161, 0.3);
}
.modal-body .nav-tabs .nav-link.active,
.modal-body .nav-tabs li.active > a {
  color: var(--nb-green);
  border-bottom-color: var(--nb-green);
  background: transparent;
  font-weight: var(--nb-fw-semibold);
}
.modal-body .tab-content {
  padding-top: 20px;
}
.modal-body .tab-content > .tab-pane > br:first-child {
  display: none;
}

/* ── Button container dentro de modais ── */
.modal .button-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  padding-top: 16px;
  margin-top: 20px;
  border-top: 1px solid var(--nb-border);
}

/* ── Checkboxes modernos dentro de modais ── */
.modal-body .form-check {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 0;
  margin-bottom: 6px;
}
.modal-body .form-check-input {
  width: 16px;
  height: 16px;
  margin: 0;
  border: 1.5px solid var(--nb-border);
  border-radius: var(--nb-radius-sm);
  cursor: pointer;
  accent-color: var(--nb-green);
  flex-shrink: 0;
}
.modal-body .form-check-input:checked {
  background-color: var(--nb-green);
  border-color: var(--nb-green);
}
.modal-body .form-check-label {
  font-size: var(--nb-fs-base);
  font-weight: var(--nb-fw-medium);
  color: var(--nb-text);
  cursor: pointer;
  margin: 0;
  text-transform: none;
  letter-spacing: normal;
}

/* ── Grelha de serviços/checkboxes dentro de modais ── */
.modal-body .chk-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 24px;
  margin-top: 8px;
}
.modal-body .chk-grid .form-check {
  margin-bottom: 0;
}

/* ── Form labels dentro de modais (override do global) ── */
.modal-body .form-group > label.control-label {
  font-size: var(--nb-fs-xs);
  font-weight: var(--nb-fw-semibold);
  color: var(--nb-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}

/* ── Checkbox inline dentro de modais ── */
.modal-body .form-check-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 16px;
  margin-bottom: 8px;
}
.modal-body .form-check-inline .form-check-input {
  margin: 0;
}


/* ─── 10. SUB-NAV (aside.navbar) ─────────────────────────────────── */

aside.navbar.navbar-default .navbar-brand .sub-title {
  font-size: var(--nb-fs-md);
  font-weight: var(--nb-fw-semibold);
  color: var(--nb-dark);
  vertical-align: middle;
}

aside.navbar.navbar-default .nav > li > a {
  font-size: var(--nb-fs-sm);
  font-weight: var(--nb-fw-medium);
  color: var(--nb-text);
  padding: 6px 14px;
  border-radius: var(--nb-radius-sm);
  transition: background 0.15s ease, color 0.15s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}
aside.navbar.navbar-default .nav > li > a:hover {
  background: var(--nb-green-light);
  color: var(--nb-green-dark);
}


/* ─── 11. PAGINAÇÃO ──────────────────────────────────────────────── */

.pagination .page-link {
  font-size: var(--nb-fs-sm);
  color: var(--nb-text);
  border-color: var(--nb-border);
  padding: 5px 11px;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.pagination .page-link:hover {
  background: var(--nb-green-light);
  color: var(--nb-green-dark);
  border-color: var(--nb-green);
}
.pagination .page-item.active .page-link {
  background-color: var(--nb-green);
  border-color: var(--nb-green);
  color: #fff;
  font-weight: var(--nb-fw-semibold);
}
.pagination .page-item.disabled .page-link {
  color: var(--nb-text-light);
  background: transparent;
}


/* ─── 12. DATATABLES ─────────────────────────────────────────────── */

div.dataTables_wrapper .dataTables_length select,
div.dataTables_wrapper .dataTables_filter input {
  font-size: var(--nb-fs-sm);
  color: var(--nb-text);
  border: 1px solid var(--nb-border);
  border-radius: var(--nb-radius-sm);
  padding: 4px 8px;
}
div.dataTables_wrapper .dataTables_info,
div.dataTables_wrapper .dataTables_length,
div.dataTables_wrapper .dataTables_filter {
  font-size: var(--nb-fs-sm);
  color: var(--nb-text-muted);
}
div.dataTables_wrapper .dataTables_paginate .paginate_button {
  font-size: var(--nb-fs-sm) !important;
  border-radius: var(--nb-radius-sm) !important;
  padding: 4px 9px !important;
  color: var(--nb-text) !important;
}
div.dataTables_wrapper .dataTables_paginate .paginate_button.current,
div.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--nb-green) !important;
  border-color: var(--nb-green) !important;
  color: #fff !important;
  font-weight: var(--nb-fw-semibold) !important;
}
div.dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.disabled):not(.current) {
  background: var(--nb-green-light) !important;
  color: var(--nb-green-dark) !important;
  border-color: var(--nb-green) !important;
}
div.dataTables_wrapper .dt-buttons .btn {
  font-size: var(--nb-fs-xs) !important;
  padding: 4px 10px !important;
  border-radius: var(--nb-radius-sm) !important;
}


/* ─── 13. ALERTAS / TOASTS ───────────────────────────────────────── */

.alert {
  font-size: var(--nb-fs-sm);
  border-radius: var(--nb-radius);
  padding: 10px 16px;
  border-width: 1px;
}
.alert-success {
  background: var(--nb-bg-card);
  color: var(--nb-green-dark);
  border-color: var(--nb-green);
  border-left: 4px solid var(--nb-green);
}
.alert-danger, .alert-error {
  background: var(--nb-bg-card);
  color: var(--nb-red-dark);
  border-color: var(--nb-red);
  border-left: 4px solid var(--nb-red);
}
.alert-warning {
  background: var(--nb-bg-card);
  color: var(--nb-orange-dark);
  border-color: var(--nb-orange);
  border-left: 4px solid var(--nb-orange);
}
.alert-info {
  background: var(--nb-bg-card);
  color: var(--nb-blue-dark);
  border-color: var(--nb-blue);
  border-left: 4px solid var(--nb-blue);
}


/* ─── 14. BOTÕES OUTLINE ─────────────────────────────────────────── */

.btn-outline-primary {
  color: var(--nb-green);
  border-color: var(--nb-green);
  background: transparent;
}
.btn-outline-primary:hover {
  background: var(--nb-green);
  color: #fff;
}

.btn-outline-danger {
  color: var(--nb-red);
  border-color: var(--nb-red);
  background: transparent;
}
.btn-outline-danger:hover {
  background: var(--nb-red);
  color: #fff;
}

.btn-outline-info {
  color: var(--nb-blue);
  border-color: var(--nb-blue);
  background: transparent;
}
.btn-outline-info:hover {
  background: var(--nb-blue);
  color: #fff;
}


/* ─── 15. CLASSES UTILITÁRIAS ────────────────────────────────────── */

/* Cores de texto */
.nb-green   { color: var(--nb-green)      !important; }
.nb-red     { color: var(--nb-red)        !important; }
.nb-blue    { color: var(--nb-blue)       !important; }
.nb-orange  { color: var(--nb-orange)     !important; }
.nb-muted   { color: var(--nb-text-muted) !important; }
.nb-dark    { color: var(--nb-dark)       !important; }

/* Fundos suaves */
.nb-bg-green  { background-color: var(--nb-green-light)  !important; }
.nb-bg-red    { background-color: var(--nb-red-light)    !important; }
.nb-bg-blue   { background-color: var(--nb-blue-light)   !important; }
.nb-bg-orange { background-color: var(--nb-orange-light) !important; }

/* Tamanhos de fonte */
.fs-xs   { font-size: var(--nb-fs-xs)   !important; }
.fs-sm   { font-size: var(--nb-fs-sm)   !important; }
.fs-base { font-size: var(--nb-fs-base) !important; }
.fs-md   { font-size: var(--nb-fs-md)   !important; }
.fs-lg   { font-size: var(--nb-fs-lg)   !important; }

/* Pesos de fonte */
.fw-regular  { font-weight: var(--nb-fw-regular)  !important; }
.fw-medium   { font-weight: var(--nb-fw-medium)   !important; }
.fw-semibold { font-weight: var(--nb-fw-semibold) !important; }
.fw-bold     { font-weight: var(--nb-fw-bold)     !important; }

/* Tamanhos de ícone */
.icon-xs   { font-size: var(--nb-icon-xs)   !important; }
.icon-sm   { font-size: var(--nb-icon-sm)   !important; }
.icon-base { font-size: var(--nb-icon-base) !important; }
.icon-md   { font-size: var(--nb-icon-md)   !important; }
.icon-lg   { font-size: var(--nb-icon-lg)   !important; }
.icon-xl   { font-size: var(--nb-icon-xl)   !important; }


/* ─── 15. USER CARDS ─────────────────────────────────────────────── */

/* Card container */
.user-card {
  border-radius: var(--nb-radius-lg);
  overflow: hidden;
  background: var(--nb-bg-card);
  border: 1px solid var(--nb-border);
  box-shadow: var(--nb-shadow-sm);
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.user-card:hover {
  box-shadow: var(--nb-shadow-md);
  transform: translateY(-3px);
}

/* Cover gradient by status */
.user-card-cover {
  height: 64px;
  background: linear-gradient(135deg, var(--nb-green), var(--nb-green-dark));
  flex-shrink: 0;
}
.user-card.inactive .user-card-cover {
  background: linear-gradient(135deg, var(--nb-orange), var(--nb-orange-dark));
}
.user-card.deleted .user-card-cover {
  background: linear-gradient(135deg, var(--nb-red), var(--nb-red-dark));
}

/* Body */
.user-card-body {
  flex: 1;
  padding: 0 14px 12px;
  text-align: center;
}

/* Avatar */
.user-avatar-wrap {
  position: relative;
  display: inline-block;
  margin-top: -30px;
  margin-bottom: 8px;
}
.user-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 3px solid #fff;
  object-fit: cover;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  background: var(--nb-border);
}

/* Status dot */
.user-status-dot {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: var(--nb-text-light);
}
.user-status-dot.active   { background: var(--nb-green); }
.user-status-dot.inactive { background: var(--nb-orange); }
.user-status-dot.deleted  { background: var(--nb-red); }

/* Name & email */
.user-name {
  font-size: var(--nb-fs-base);
  font-weight: var(--nb-fw-semibold);
  color: var(--nb-dark);
  margin: 0 0 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-email {
  font-size: var(--nb-fs-xs);
  color: var(--nb-text-muted);
  margin: 0 0 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Level badge */
.user-level-badge {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: var(--nb-fw-bold);
  padding: 2px 9px;
  border-radius: var(--nb-radius-pill);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.user-level-badge.level-1 { background: var(--nb-red-light);    color: var(--nb-red-dark); }
.user-level-badge.level-2 { background: var(--nb-blue-light);   color: var(--nb-blue-dark); }
.user-level-badge.level-3 { background: var(--nb-green-light);  color: var(--nb-green-dark); }

/* Footer — actions HORIZONTAL */
.user-card-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 14px;
  border-top: 1px solid var(--nb-border-light);
  background: var(--nb-bg-header);
  flex-shrink: 0;
}

/* Action buttons */
.uc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--nb-radius);
  color: var(--nb-text-muted);
  background: var(--nb-bg-card);
  border: 1px solid var(--nb-border);
  font-size: var(--nb-icon-sm);
  text-decoration: none;
  transition: all 0.15s ease;
  flex-shrink: 0;
}
.uc-btn:hover { background: var(--nb-green); color: #fff; border-color: var(--nb-green); }
.uc-btn.danger:hover { background: var(--nb-red); color: #fff; border-color: var(--nb-red); }

/* DataTable — user cell */
.dt-user-cell .user-level-badge { margin-top: 3px; }

/* Grid gap */
#users-cards-row { --bs-gutter-x: 1rem; --bs-gutter-y: 1rem; }


/* ─── 18. GLOBAL TRANSITIONS ────────────────────────────────────── */

/* Transições suaves em componentes interativos */
.card,
.btn,
.badge,
.label,
.form-control,
.form-select {
  transition: all 0.2s ease;
}

/* Cursor pointer em elementos clicáveis */
.cursor-pointer { cursor: pointer !important; }
.cursor-default { cursor: default !important; }

/* Truncate text */
.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Section title — para títulos de secção em páginas */
.section-title {
  font-size: var(--nb-fs-lg);
  font-weight: var(--nb-fw-semibold);
  color: var(--nb-dark);
  margin-bottom: 1rem;
}

/* Divider */
.nb-divider {
  border: none;
  border-top: 1px solid var(--nb-border);
  margin: 1rem 0;
}

/* Status indicators */
.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
}
.status-dot.active   { background: var(--nb-green); }
.status-dot.inactive { background: var(--nb-orange); }
.status-dot.error    { background: var(--nb-red); }

/* Empty state */
.empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--nb-text-light);
}
.empty-state i {
  font-size: var(--nb-icon-2xl);
  margin-bottom: 1rem;
  opacity: 0.5;
}
.empty-state p {
  font-size: var(--nb-fs-base);
  color: var(--nb-text-muted);
}


/* ─── 16. PAGE TABS (card-level nav-tabs) ────────────────────────── */

/* Card variant for tabbed pages (no inner padding, no border) */
.card-tabs {
  padding: 0;
  border: none;
}
.card-tabs > .card-header {
  padding: 0;
  min-height: 40px;
}

/* Tab icon spacing inside nav-tabs */
.nav-tabs .nav-link i[class*="fa-"] {
  margin-right: 8px;
  font-size: var(--nb-icon-sm);
}


/* ─── 17. CONFIG-APIS / API INTEGRATION ──────────────────────────── */

/* Action icons in tables */
.icon-style { cursor: pointer; margin: 0 5px; }
.icon-cursor { cursor: pointer; }

/* Variable dropdown */
#varDropdown { max-height: 320px; overflow-y: auto; }
#varDropdown .dropdown-item { font-family: monospace; font-size: var(--nb-fs-sm); }

/* HTTP Method Badges */
.method-badge {
  padding: 3px 8px;
  border-radius: var(--nb-radius-sm);
  font-size: var(--nb-fs-xs);
  font-weight: var(--nb-fw-bold);
  color: #fff;
  font-family: monospace;
  display: inline-block;
  min-width: 52px;
  text-align: center;
}
.method-get    { background: var(--nb-green); }
.method-post   { background: var(--nb-blue); }
.method-put    { background: var(--nb-orange); }
.method-delete { background: var(--nb-red); }

/* ── Test Result Panel (Postman-like) ── */
.test-panel {
  margin-top: 20px;
  border: 1px solid var(--nb-border);
  border-radius: var(--nb-radius);
  display: none;
  background: var(--nb-bg-card);
  overflow: hidden;
}

/* Request bar */
.tp-request-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--nb-bg-header);
  border-bottom: 1px solid var(--nb-border);
}
.tp-url {
  flex: 1;
  font-family: monospace;
  font-size: var(--nb-fs-sm);
  color: var(--nb-text);
  background: var(--nb-bg-card);
  border: 1px solid var(--nb-border);
  border-radius: var(--nb-radius-sm);
  padding: 6px 10px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.tp-send-btn { min-width: 80px; font-weight: var(--nb-fw-semibold); }

/* Tabs inside test panel */
.tp-tabs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  border-bottom: 1px solid var(--nb-border);
  background: var(--nb-bg-header);
}
.tp-tabs li { cursor: pointer; }
.tp-tabs li a {
  display: block;
  padding: 7px 14px;
  font-size: var(--nb-fs-sm);
  color: var(--nb-text-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.tp-tabs li.active a {
  color: var(--nb-dark);
  font-weight: var(--nb-fw-semibold);
  border-bottom-color: var(--nb-blue);
}
.tp-tabs li:hover a { color: var(--nb-dark); }
.tp-tab-count {
  font-size: 10px;
  background: var(--nb-border);
  color: var(--nb-text-muted);
  border-radius: var(--nb-radius-pill);
  padding: 1px 6px;
  margin-left: 4px;
}
.tp-tab-content { display: none; max-height: 250px; overflow: auto; }
.tp-tab-content.active { display: block; }

/* Code blocks */
.tp-code {
  background: #1e1e1e;
  color: #d4d4d4;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: var(--nb-fs-sm);
  line-height: 1.5;
  padding: 12px;
  margin: 0;
  border: none;
  border-radius: 0;
  white-space: pre-wrap;
  word-break: break-word;
}
.tp-code-lg { min-height: 100px; max-height: 300px; }

/* Editable code fields (textarea variant) */
.tp-editable {
  display: block;
  width: 100%;
  resize: vertical;
  outline: none;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.tp-editable:focus {
  box-shadow: inset 0 0 0 1px var(--nb-blue);
}

/* Response status bar */
.tp-response-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  background: var(--nb-bg-header);
  border-top: 2px solid var(--nb-border);
  border-bottom: 1px solid var(--nb-border);
}
.tp-status-badge {
  font-size: var(--nb-fs-xs);
  font-weight: var(--nb-fw-bold);
  font-family: monospace;
  padding: 2px 8px;
  border-radius: var(--nb-radius-sm);
}
.tp-status-badge.s-ok   { background: var(--nb-green-light); color: var(--nb-green-dark); }
.tp-status-badge.s-err  { background: var(--nb-red-light);   color: var(--nb-red-dark); }
.tp-status-badge.s-warn { background: var(--nb-orange-light); color: var(--nb-orange-dark); }
.tp-meta {
  font-size: var(--nb-fs-xs);
  color: var(--nb-text-muted);
  font-family: monospace;
}
.tp-body-toolbar {
  display: flex;
  align-items: center;
  padding: 4px 12px;
  background: var(--nb-bg-header);
  border-bottom: 1px solid var(--nb-border);
}

/* Section divider */
.section-divider {
  border-top: 1px solid var(--nb-border);
  margin: 20px 0;
  padding-top: 15px;
}

/* URL truncate in table */
.url-cell {
  max-width: 260px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Test error */
.tp-error {
  display: none;
  padding: 8px 12px;
  color: var(--nb-red);
  font-size: var(--nb-fs-sm);
  background: var(--nb-red-light);
  border-top: 1px solid var(--nb-red-light);
}

/* History detail modal (SweetAlert) */
.hist-detail-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding: 10px;
  background: var(--nb-bg-header);
  border-radius: var(--nb-radius);
}
.hist-detail-meta {
  display: flex;
  gap: 20px;
  margin-bottom: 12px;
  font-size: var(--nb-fs-sm);
  color: var(--nb-text-muted);
}
.hist-detail-columns { display: flex; gap: 12px; }
.hist-detail-columns > div { flex: 1; }
.hist-detail-columns label {
  font-size: var(--nb-fs-xs);
  font-weight: var(--nb-fw-semibold);
  text-transform: uppercase;
  color: var(--nb-text-muted);
}
.hist-detail-columns pre {
  text-align: left;
  max-height: 220px;
  overflow: auto;
  background: var(--nb-bg-header);
  padding: 10px;
  border-radius: var(--nb-radius-sm);
  font-size: var(--nb-fs-xs);
  margin: 4px 0 0;
}


/* ═══════════════════════════════════════════════════════════════════
 *  DARK MODE — [data-bs-theme="dark"]
 *  Compatible with Bootstrap 5.3.3 built-in dark mode.
 *  Overrides all --nb-* tokens for a dark color scheme.
 * ═══════════════════════════════════════════════════════════════════ */

/* ─── D1. DARK TOKENS ─────────────────────────────────────────────── */
[data-bs-theme="dark"] {

  /* ── Paleta neutra invertida ── */
  --nb-dark:           #f1f5f9;
  --nb-text:           #cbd5e1;
  --nb-text-muted:     #94a3b8;
  --nb-text-light:     #64748b;
  --nb-border:         #334155;
  --nb-border-light:   #1e293b;
  --nb-bg:             #0f172a;
  --nb-bg-card:        #1e293b;
  --nb-bg-hover:       #334155;
  --nb-bg-header:      #162032;
  --nb-bg-soft:        #172335;

  /* ── Marca NhaBex — mais luminosa no dark ── */
  --nb-green:          #4fd1b5;
  --nb-green-dark:     #02A586;
  --nb-green-hover:    #45c7ab;
  --nb-green-light:    rgba(79, 209, 181, 0.12);
  --nb-green-10:       rgba(79, 209, 181, 0.10);

  /* ── Cores semânticas — ajustadas para contraste ── */
  --nb-blue:           #60a5fa;
  --nb-blue-dark:      #3b82f6;
  --nb-blue-light:     rgba(96, 165, 250, 0.12);

  --nb-orange:         #fbbf24;
  --nb-orange-dark:    #f59e0b;
  --nb-orange-light:   rgba(251, 191, 36, 0.12);

  --nb-red:            #f87171;
  --nb-red-dark:       #ef4444;
  --nb-red-light:      rgba(248, 113, 113, 0.12);

  --nb-yellow:         #fbbf24;
  --nb-yellow-light:   rgba(251, 191, 36, 0.12);

  --nb-purple:         #a78bfa;
  --nb-purple-light:   rgba(167, 139, 250, 0.12);

  /* ── Sombras mais intensas ── */
  --nb-shadow-xs:      0 1px 2px rgba(0, 0, 0, 0.25);
  --nb-shadow-sm:      0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
  --nb-shadow:         0 4px 6px -1px rgba(0, 0, 0, 0.35), 0 2px 4px -1px rgba(0, 0, 0, 0.25);
  --nb-shadow-md:      0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.25);

  color-scheme: dark;
}


/* ─── D2. BODY & LAYOUT ───────────────────────────────────────────── */

[data-bs-theme="dark"] body {
  background-color: var(--nb-bg);
  color: var(--nb-text);
}


/* ─── D3. SIDEBAR (nav.navbar) ────────────────────────────────────── */

[data-bs-theme="dark"] nav.navbar.navbar-default {
  background: linear-gradient(180deg, #1a3a32 0%, #0f2a22 100%);
  border-color: var(--nb-border);
}
[data-bs-theme="dark"] nav.navbar .sidebar-logo {
  color: #e2e8f0;
}
[data-bs-theme="dark"] nav.navbar .nav-group-toggle {
  color: var(--nb-text-muted);
}
[data-bs-theme="dark"] nav.navbar .nav-subitems > li > a {
  color: rgba(255, 255, 255, 0.7);
}
[data-bs-theme="dark"] nav.navbar .nav-subitems > li > a:hover,
[data-bs-theme="dark"] nav.navbar .nav-subitems > li > a.active {
  color: #fff;
  background: rgba(79, 209, 181, 0.15);
}
[data-bs-theme="dark"] .sidebar-lang-row {
  border-top-color: rgba(255, 255, 255, 0.08);
}
[data-bs-theme="dark"] .sidebar-lang-opt {
  color: rgba(255, 255, 255, 0.4);
}
[data-bs-theme="dark"] .sidebar-lang-opt:hover,
[data-bs-theme="dark"] .sidebar-lang-opt.active {
  color: var(--nb-green);
  background: rgba(79, 209, 181, 0.12);
}


/* ─── D4. HEADER (header.navbar) ──────────────────────────────────── */

[data-bs-theme="dark"] header.navbar.navbar-default {
  background-color: var(--nb-bg-card);
  border-bottom-color: var(--nb-border);
}
[data-bs-theme="dark"] header.navbar .header-company-toggle {
  color: var(--nb-text);
}
[data-bs-theme="dark"] header.navbar .navbar-right > li > a {
  color: var(--nb-text-muted);
}
[data-bs-theme="dark"] header.navbar .navbar-right > li > a:hover {
  color: var(--nb-green);
}


/* ─── D5. SUB-NAV (aside.navbar) ──────────────────────────────────── */

[data-bs-theme="dark"] aside.navbar.navbar-default {
  background-color: var(--nb-bg-card);
  border-bottom-color: var(--nb-border);
}
[data-bs-theme="dark"] aside.navbar.navbar-default .navbar-brand .sub-title {
  color: var(--nb-dark);
}


/* ─── D6. DROPDOWN MENUS ──────────────────────────────────────────── */

[data-bs-theme="dark"] .dropdown-menu {
  background-color: var(--nb-bg-card);
  border-color: var(--nb-border);
  box-shadow: var(--nb-shadow-md);
}
[data-bs-theme="dark"] .dropdown-item {
  color: var(--nb-text);
}
[data-bs-theme="dark"] .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-item:focus {
  background-color: var(--nb-bg-hover);
  color: var(--nb-dark);
}
[data-bs-theme="dark"] .dropdown-item.active {
  background-color: var(--nb-green);
  color: #fff;
}
[data-bs-theme="dark"] .dropdown-divider {
  border-color: var(--nb-border);
}
[data-bs-theme="dark"] .dropdown-header-user {
  border-bottom-color: var(--nb-border);
}
[data-bs-theme="dark"] .dropdown-header-name {
  color: var(--nb-dark);
}
[data-bs-theme="dark"] .dropdown-header-company {
  color: var(--nb-text-muted);
}


/* ─── D7. FORM CONTROLS ──────────────────────────────────────────── */

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
  background-color: var(--nb-bg);
  color: var(--nb-text);
  border-color: var(--nb-border);
}
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
  background-color: var(--nb-bg);
  color: var(--nb-text);
  border-color: var(--nb-green);
}
[data-bs-theme="dark"] .form-control::placeholder {
  color: var(--nb-text-light);
}
[data-bs-theme="dark"] .form-control:disabled,
[data-bs-theme="dark"] .form-control[readonly] {
  background-color: var(--nb-bg-hover);
  color: var(--nb-text-muted);
}


/* ─── D8. BUTTONS ─────────────────────────────────────────────────── */

[data-bs-theme="dark"] .btn-default {
  background-color: var(--nb-bg-card);
  border-color: var(--nb-border);
  color: var(--nb-text);
}
[data-bs-theme="dark"] .btn-default:hover,
[data-bs-theme="dark"] .btn-default:focus {
  background-color: var(--nb-bg-hover);
  border-color: var(--nb-text-light);
  color: var(--nb-dark);
}
[data-bs-theme="dark"] .btn-close-modal {
  background: var(--nb-bg-card);
  color: var(--nb-text-muted);
  border-color: var(--nb-border);
}
[data-bs-theme="dark"] .btn-close-modal:hover {
  background: var(--nb-bg-hover);
}
[data-bs-theme="dark"] .btn-outline-primary {
  color: var(--nb-green);
  border-color: var(--nb-green);
}
[data-bs-theme="dark"] .btn-outline-danger {
  color: var(--nb-red);
  border-color: var(--nb-red);
}
[data-bs-theme="dark"] .btn-outline-info {
  color: var(--nb-blue);
  border-color: var(--nb-blue);
}


/* ─── D9. MODALS ──────────────────────────────────────────────────── */

[data-bs-theme="dark"] .modal-content {
  background-color: var(--nb-bg-card);
  border-color: var(--nb-border);
}
[data-bs-theme="dark"] .modal-header {
  background: var(--nb-bg-header);
  border-bottom-color: var(--nb-border);
}
[data-bs-theme="dark"] .modal-footer {
  background: var(--nb-bg-header);
  border-top-color: var(--nb-border);
}
[data-bs-theme="dark"] .modal-body {
  color: var(--nb-text);
}
[data-bs-theme="dark"] .modal-body .nav-tabs {
  border-bottom-color: var(--nb-border);
}
[data-bs-theme="dark"] .modal-body .nav-tabs .nav-link {
  color: var(--nb-text-muted);
}
[data-bs-theme="dark"] .modal-body .nav-tabs .nav-link.active,
[data-bs-theme="dark"] .modal-body .nav-tabs li.active > a {
  color: var(--nb-green);
  border-bottom-color: var(--nb-green);
}
[data-bs-theme="dark"] .modal .button-container {
  border-top-color: var(--nb-border);
}
[data-bs-theme="dark"] .modal-body .form-check-input {
  border-color: var(--nb-border);
  background-color: var(--nb-bg);
}
[data-bs-theme="dark"] .modal-body .form-check-label {
  color: var(--nb-text);
}
[data-bs-theme="dark"] .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}
[data-bs-theme="dark"] .modal-body .bg-light,
[data-bs-theme="dark"] .modal-body pre.bg-light {
  background-color: var(--nb-bg) !important;
  color: var(--nb-text);
  border-color: var(--nb-border) !important;
}
[data-bs-theme="dark"] .modal-body .border {
  border-color: var(--nb-border) !important;
}
[data-bs-theme="dark"] .modal-body code {
  color: var(--nb-green);
  background-color: var(--nb-bg);
}
[data-bs-theme="dark"] .modal-body .text-muted {
  color: var(--nb-text-muted) !important;
}


/* ─── D10. DATATABLES ─────────────────────────────────────────────── */

[data-bs-theme="dark"] table.dataTable tbody tr {
  background-color: var(--nb-bg-card);
}
[data-bs-theme="dark"] table.dataTable tbody tr:hover {
  background-color: var(--nb-bg-hover) !important;
}
[data-bs-theme="dark"] table.dataTable.stripe tbody tr.odd,
[data-bs-theme="dark"] table.dataTable tbody tr.odd {
  background-color: var(--nb-bg);
}
[data-bs-theme="dark"] div.dataTables_wrapper .dataTables_length select,
[data-bs-theme="dark"] div.dataTables_wrapper .dataTables_filter input {
  background-color: var(--nb-bg);
  color: var(--nb-text);
  border-color: var(--nb-border);
}
[data-bs-theme="dark"] div.dataTables_wrapper .dataTables_paginate .paginate_button {
  color: var(--nb-text) !important;
}
[data-bs-theme="dark"] div.dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.disabled):not(.current) {
  background: var(--nb-green-light) !important;
  color: var(--nb-green) !important;
  border-color: transparent !important;
}
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_processing {
  background-color: var(--nb-bg-card);
  color: var(--nb-text);
}


/* ─── D11. CARDS ──────────────────────────────────────────────────── */

[data-bs-theme="dark"] .card {
  background: var(--nb-bg-card);
  border-color: var(--nb-border);
}
[data-bs-theme="dark"] .card .card-header {
  background: var(--nb-bg-header);
  border-bottom-color: var(--nb-border);
}


/* ─── D12. USER CARDS ─────────────────────────────────────────────── */

[data-bs-theme="dark"] .user-card {
  background: var(--nb-bg-card);
  border-color: var(--nb-border);
}
[data-bs-theme="dark"] .user-avatar {
  border-color: var(--nb-bg-card);
}
[data-bs-theme="dark"] .user-status-dot {
  border-color: var(--nb-bg-card);
}
[data-bs-theme="dark"] .user-card-footer {
  background: var(--nb-bg-header);
  border-top-color: var(--nb-border);
}
[data-bs-theme="dark"] .uc-btn {
  background: var(--nb-bg-card);
  border-color: var(--nb-border);
  color: var(--nb-text-muted);
}


/* ─── D13. ALERTS ─────────────────────────────────────────────────── */

[data-bs-theme="dark"] .alert-success {
  background: var(--nb-bg-card);
  color: var(--nb-green);
  border-color: rgba(79, 209, 181, 0.25);
  border-left: 4px solid var(--nb-green);
}
[data-bs-theme="dark"] .alert-danger,
[data-bs-theme="dark"] .alert-error {
  background: var(--nb-bg-card);
  color: var(--nb-red);
  border-color: rgba(248, 113, 113, 0.25);
  border-left: 4px solid var(--nb-red);
}
[data-bs-theme="dark"] .alert-warning {
  background: var(--nb-bg-card);
  color: var(--nb-orange);
  border-color: rgba(251, 191, 36, 0.25);
  border-left: 4px solid var(--nb-orange);
}
[data-bs-theme="dark"] .alert-info {
  background: var(--nb-bg-card);
  color: var(--nb-blue);
  border-color: rgba(96, 165, 250, 0.25);
  border-left: 4px solid var(--nb-blue);
}


/* ─── D14. PAGINATION ─────────────────────────────────────────────── */

[data-bs-theme="dark"] .pagination .page-link {
  background-color: var(--nb-bg-card);
  color: var(--nb-text);
  border-color: var(--nb-border);
}
[data-bs-theme="dark"] .pagination .page-link:hover {
  background: var(--nb-green-light);
  color: var(--nb-green);
  border-color: var(--nb-green);
}
[data-bs-theme="dark"] .pagination .page-item.disabled .page-link {
  background-color: var(--nb-bg);
  color: var(--nb-text-light);
  border-color: var(--nb-border);
}


/* ─── D15. BADGES & LABELS ────────────────────────────────────────── */

[data-bs-theme="dark"] .badge-default,
[data-bs-theme="dark"] .label-default {
  background-color: var(--nb-border);
  color: var(--nb-text);
}


/* ─── D16. CODE BLOCKS (tp-*) ─────────────────────────────────────── */

[data-bs-theme="dark"] .tp-code {
  background: #0d1117;
  color: #c9d1d9;
}
[data-bs-theme="dark"] .tp-request-bar,
[data-bs-theme="dark"] .tp-response-bar,
[data-bs-theme="dark"] .tp-body-toolbar,
[data-bs-theme="dark"] .tp-tabs {
  background: var(--nb-bg-header);
  border-color: var(--nb-border);
}
[data-bs-theme="dark"] .tp-url {
  background: var(--nb-bg);
  color: var(--nb-text);
  border-color: var(--nb-border);
}
[data-bs-theme="dark"] .tp-tabs li a {
  color: var(--nb-text-muted);
}
[data-bs-theme="dark"] .tp-tabs li.active a {
  color: var(--nb-dark);
}
[data-bs-theme="dark"] .tp-tab-count {
  background: var(--nb-border);
  color: var(--nb-text-muted);
}


/* ─── D17. BOOTSTRAP SELECT ───────────────────────────────────────── */

[data-bs-theme="dark"] .bootstrap-select .dropdown-toggle {
  background-color: var(--nb-bg) !important;
  border-color: var(--nb-border) !important;
  color: var(--nb-text) !important;
}
[data-bs-theme="dark"] .bootstrap-select .dropdown-menu {
  background-color: var(--nb-bg-card);
}
[data-bs-theme="dark"] .bootstrap-select .dropdown-menu .inner li a {
  color: var(--nb-text);
}
[data-bs-theme="dark"] .bootstrap-select .dropdown-menu .inner li a:hover,
[data-bs-theme="dark"] .bootstrap-select .dropdown-menu .inner li.selected a {
  background-color: var(--nb-bg-hover);
  color: var(--nb-dark);
}


/* ─── D18. LOADER ─────────────────────────────────────────────────── */

[data-bs-theme="dark"] #spin-loader i {
  color: var(--nb-green);
}


/* ─── D19. SCROLLBARS ─────────────────────────────────────────────── */

[data-bs-theme="dark"] ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
[data-bs-theme="dark"] ::-webkit-scrollbar-track {
  background: var(--nb-bg);
}
[data-bs-theme="dark"] ::-webkit-scrollbar-thumb {
  background: var(--nb-border);
  border-radius: 4px;
}
[data-bs-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: var(--nb-text-light);
}


/* ─── D20. MISC DARK OVERRIDES ────────────────────────────────────── */

[data-bs-theme="dark"] .nb-divider {
  border-top-color: var(--nb-border);
}
[data-bs-theme="dark"] .section-divider {
  border-top-color: var(--nb-border);
}
[data-bs-theme="dark"] .empty-state {
  color: var(--nb-text-light);
}
[data-bs-theme="dark"] .hist-detail-bar {
  background: var(--nb-bg-header);
}
[data-bs-theme="dark"] .hist-detail-columns pre {
  background: var(--nb-bg);
}
[data-bs-theme="dark"] .test-panel {
  background: var(--nb-bg-card);
  border-color: var(--nb-border);
}
[data-bs-theme="dark"] .tp-error {
  background: var(--nb-red-light);
  color: var(--nb-red);
}
[data-bs-theme="dark"] .datepicker {
  background: var(--nb-bg-card);
  border-color: var(--nb-border);
  color: var(--nb-text);
}
[data-bs-theme="dark"] .datepicker table tr td,
[data-bs-theme="dark"] .datepicker table tr th {
  color: var(--nb-text);
}
[data-bs-theme="dark"] .datepicker table tr td.active,
[data-bs-theme="dark"] .datepicker table tr td.active:hover {
  background-color: var(--nb-green) !important;
  color: #fff !important;
}
[data-bs-theme="dark"] .ui-widget-content {
  background: var(--nb-bg-card);
  color: var(--nb-text);
  border-color: var(--nb-border);
}
[data-bs-theme="dark"] .ui-widget-header {
  background: var(--nb-bg-header);
  color: var(--nb-dark);
  border-color: var(--nb-border);
}
[data-bs-theme="dark"] .ui-state-active,
[data-bs-theme="dark"] .ui-state-active a {
  background: var(--nb-green) !important;
  color: #fff !important;
}
[data-bs-theme="dark"] .nav-tabs {
  border-bottom-color: var(--nb-border);
}
[data-bs-theme="dark"] .nav-tabs .nav-link {
  color: var(--nb-text-muted);
}
[data-bs-theme="dark"] .nav-tabs .nav-link:hover {
  border-color: var(--nb-border) var(--nb-border) transparent;
  color: var(--nb-text);
}
[data-bs-theme="dark"] .nav-tabs .nav-link.active {
  background-color: var(--nb-bg-card);
  border-color: var(--nb-border) var(--nb-border) var(--nb-bg-card);
  color: var(--nb-dark);
}
/* Bootstrap table variables — force dark backgrounds */
[data-bs-theme="dark"] .table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--nb-text);
  --bs-table-striped-bg: rgba(255, 255, 255, 0.03);
  --bs-table-striped-color: var(--nb-text);
  --bs-table-hover-bg: var(--nb-bg-hover);
  --bs-table-hover-color: var(--nb-text);
  --bs-table-border-color: var(--nb-border);
  color: var(--nb-text);
}
[data-bs-theme="dark"] .table > thead > tr > th {
  background-color: var(--nb-bg-header);
  color: var(--nb-text-muted);
  border-bottom-color: var(--nb-border);
}
[data-bs-theme="dark"] .table > tbody > tr > td {
  border-bottom-color: var(--nb-border);
}
[data-bs-theme="dark"] .table-bordered,
[data-bs-theme="dark"] .table-bordered th,
[data-bs-theme="dark"] .table-bordered td {
  border-color: var(--nb-border);
}
[data-bs-theme="dark"] .swal2-icon.swal2-success .swal2-success-fix {
  background-color: var(--nb-bg-card) !important;
}