/* ============================================================
   Na Vitrine Tech — Corporate Professional Theme v1.0
   ============================================================
   Arquivo CSS overlay: sobrescreve o visual sem mexer no HTML.
   Basta importar APÓS o Bootstrap e o app.css.
   ============================================================ */

/* ---------- CSS Variables (Design Tokens) ---------- */
:root {
  /* Cores principais */
  --nv-primary: #6D28D9;        /* roxo da marca */
  --nv-primary-light: #EDE9FE;  /* roxo claro (hover, bg) */
  --nv-primary-dark: #5B21B6;   /* roxo escuro (active) */
  --nv-accent: #0D9488;         /* teal para ações */
  --nv-accent-light: #CCFBF1;

  /* Superfícies */
  --nv-bg: #F4F6F9;
  --nv-card: #FFFFFF;
  --nv-border: #E2E8F0;
  --nv-border-light: #F1F5F9;

  /* Texto */
  --nv-text: #1E293B;
  --nv-text-secondary: #64748B;
  --nv-text-muted: #94A3B8;

  /* Status */
  --nv-success: #10B981;
  --nv-success-bg: #ECFDF5;
  --nv-warning: #F59E0B;
  --nv-warning-bg: #FFFBEB;
  --nv-danger: #EF4444;
  --nv-danger-bg: #FEF2F2;
  --nv-info: #3B82F6;
  --nv-info-bg: #EFF6FF;

  /* Sidebar */
  --sidebar-bg: #0F172A;
  --sidebar-text: #CBD5E1;
  --sidebar-hover: #1E293B;
  --sidebar-active-bg: var(--nv-primary);
  --sidebar-active-text: #FFFFFF;
  --sidebar-section: #475569;
  --sidebar-bd: rgba(255,255,255,0.06);

  /* Tipografia */
  --nv-font: 'Segoe UI', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --nv-radius: 10px;
  --nv-radius-sm: 6px;
  --nv-radius-lg: 14px;
  --nv-shadow-sm: 0 1px 3px rgba(0,0,0,0.04);
  --nv-shadow: 0 2px 8px rgba(0,0,0,0.06);
  --nv-shadow-lg: 0 8px 24px rgba(0,0,0,0.08);
  --nv-transition: all 0.2s ease;
}


/* ============================================================
   GLOBAL
   ============================================================ */
body {
  background: var(--nv-bg) !important;
  font-family: var(--nv-font) !important;
  color: var(--nv-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* ============================================================
   HEADER / NAVBAR
   ============================================================ */
.navbar.bg-header-light {
  background: var(--nv-card) !important;
  border-bottom: 1px solid var(--nv-border) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.03) !important;
}

/* Em telas sem sidebar (mobile), header claro e limpo */
@media (max-width: 991.98px) {
  .navbar.bg-header-light {
    background: var(--nv-card) !important;
    border-bottom: 1px solid var(--nv-border) !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
  }
  /* Logo maior no mobile */
  .navbar.bg-header-light .navbar-brand img {
    height: 52px !important;
  }
}

/* Em desktop com sidebar, o header se integra melhor */
@media (min-width: 992px) {
  .navbar.bg-header-light {
    background: var(--nv-bg) !important;
    border-bottom: 1px solid var(--nv-border) !important;
    box-shadow: none !important;
  }
}

.navbar.bg-header-light .navbar-brand span {
  color: var(--nv-text-secondary) !important;
  font-weight: 500 !important;
  font-size: 1.1rem !important;
}

/* Dropdown do usuário */
.navbar.bg-header-light .dropdown-toggle {
  font-weight: 600 !important;
  color: var(--nv-text) !important;
  border-radius: var(--nv-radius) !important;
  padding: 6px 14px !important;
  transition: var(--nv-transition);
}
.navbar.bg-header-light .dropdown-toggle:hover {
  background: var(--nv-bg) !important;
}

.navbar.bg-header-light .dropdown-menu {
  border: 1px solid var(--nv-border) !important;
  border-radius: var(--nv-radius) !important;
  box-shadow: var(--nv-shadow-lg) !important;
  padding: 6px !important;
  margin-top: 8px !important;
  animation: nv-dropdown-in 0.15s ease-out;
}

@keyframes nv-dropdown-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.navbar.bg-header-light .dropdown-item {
  border-radius: var(--nv-radius-sm) !important;
  padding: 8px 14px !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: var(--nv-text) !important;
  transition: var(--nv-transition);
}
.navbar.bg-header-light .dropdown-item:hover,
.navbar.bg-header-light .dropdown-item:focus {
  background: var(--nv-primary-light) !important;
  color: var(--nv-primary) !important;
}

/* Botão do sino */
.bell-btn {
  border-radius: var(--nv-radius) !important;
  border: 1px solid var(--nv-border) !important;
  transition: var(--nv-transition);
}
.bell-btn:hover {
  background: var(--nv-bg) !important;
  border-color: var(--nv-primary-light) !important;
}
.bell-dot {
  background: var(--nv-danger) !important;
  box-shadow: 0 0 0 2px var(--nv-card);
}

/* Botão mobile sidebar */
.btn-open-sidebar {
  border-radius: var(--nv-radius) !important;
  border-color: var(--nv-border) !important;
  transition: var(--nv-transition);
}
.btn-open-sidebar:hover {
  background: var(--nv-bg) !important;
}


/* ============================================================
   SIDEBAR
   ============================================================ */
.app-sidebar {
  background: var(--sidebar-bg) !important;
  border-right: none !important;
  box-shadow: 1px 0 12px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
}

/* Nav scrollável, footer fixo no fundo */
.app-sidebar > nav.side-nav {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-top: 0.75rem !important;
  padding-bottom: 0.5rem;
}

.app-sidebar > .side-bottom {
  flex-shrink: 0;
}

.side-section {
  color: #94A3B8 !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding: 1.1rem 1.2rem 0.4rem !important;
}

.side-nav a {
  color: var(--sidebar-text) !important;
  border-radius: 8px !important;
  padding: 0.6rem 1rem !important;
  margin: 1px 0.6rem !important;
  font-size: 0.875rem !important;
  font-weight: 400 !important;
  transition: var(--nv-transition);
}.side-nav a i {
  font-size: 1.05rem;
  width: 22px;
  text-align: center;
  opacity: 0.75;
  transition: var(--nv-transition);
}
.side-nav a:hover {
  background: var(--sidebar-hover) !important;
  color: #F1F5F9 !important;
}
.side-nav a:hover i {
  opacity: 1;
}
.side-nav a.active {
  background: var(--sidebar-active-bg) !important;
  color: var(--sidebar-active-text) !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 8px rgba(109, 40, 217, 0.3);
}
.side-nav a.active i {
  opacity: 1;
}

/* Rodapé da sidebar */
.side-bottom {
  border-top: 1px solid var(--sidebar-bd) !important;
  background: rgba(0,0,0,0.15);
  padding: 0.85rem 1.2rem !important;
}
.side-bottom .fw-semibold {
  color: #E2E8F0 !important;
  font-size: 0.85rem !important;
}
.side-bottom .text-muted,
.side-bottom .small {
  color: var(--sidebar-section) !important;
  font-size: 0.75rem !important;
}
.side-bottom i.bi-person-badge {
  color: var(--sidebar-text) !important;
  font-size: 1.1rem;
}

/* Backdrop mobile */
.sidebar-backdrop {
  backdrop-filter: blur(2px);
}


/* ============================================================
   ESTABLISHMENT SWITCHER
   ============================================================ */
.switcher-surface {
  background: var(--nv-card) !important;
  border: 1px solid var(--nv-border) !important;
  border-radius: var(--nv-radius-lg) !important;
  box-shadow: var(--nv-shadow-sm) !important;
}
.tenant-chip {
  background: var(--nv-success-bg) !important;
  border: 1px solid #BBF7D0 !important;
  border-radius: 9999px !important;
  padding: 0.4rem 0.9rem !important;
  font-weight: 700 !important;
  font-size: 0.8rem !important;
  color: #166534 !important;
}
.tenant-dot.bg-success {
  background: var(--nv-success) !important;
}
.chip-empty {
  background: var(--nv-bg) !important;
  border-color: var(--nv-border) !important;
}


/* ============================================================
   CARDS
   ============================================================ */
.card {
  border: 1px solid var(--nv-border) !important;
  border-radius: var(--nv-radius-lg) !important;
  box-shadow: var(--nv-shadow-sm) !important;
  transition: box-shadow 0.2s ease;
}
.card:hover {
  box-shadow: var(--nv-shadow) !important;
}
.card-header {
  background: var(--nv-card) !important;
  border-bottom: 1px solid var(--nv-border) !important;
  padding: 1rem 1.5rem !important;
}
/* Preservar card-headers com fundo colorido */
/* .card-header.bg-dark {
  background: #1E293B !important;
  color: #fff !important;
}
.card-header.bg-success {
  background: #065F46 !important;
  color: #fff !important;
}
.card-header.bg-danger {
  background: #991B1B !important;
  color: #fff !important;
}
.card-header.bg-warning {
  background: #92400E !important;
  color: #fff !important;
}
.card-header.bg-light {
  background: #F8FAFC !important;
}
.card-header.bg-success-subtle {
  background: #d1fae5 !important;
}
.card-header.bg-danger-subtle {
  background: #fee2e2 !important;
}
.card-header.bg-warning-subtle {
  background: #fef3c7 !important;
}
.card-header.bg-secondary-subtle {
  background: #f1f5f9 !important;
}
.card-header.bg-info-subtle {
  background: #dbeafe !important;
}
.card-header.bg-transparent {
  background: transparent !important;
  border-bottom: none !important;
} */
.card-header h5,
.card-header .mb-0 {
  font-weight: 700 !important;
  font-size: 1.05rem !important;
  color: var(--nv-text) !important;
}
.card-body {
  padding: 1.5rem !important;
}


/* ============================================================
   TABLES
   ============================================================ */
.table {
  font-size: 0.875rem !important;
}
.table thead th {
  background: #F8FAFC !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  color: var(--nv-text-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  padding: 0.75rem 1rem !important;
  border-bottom: 2px solid var(--nv-border) !important;
  white-space: nowrap;
}
/* Preservar thead com cores específicas */
.table-success th, thead.table-success th {
  background: #d1fae5 !important;
  color: #065F46 !important;
}
.table-danger th, thead.table-danger th {
  background: #fee2e2 !important;
  color: #991B1B !important;
}
.table-warning th, thead.table-warning th {
  background: #fef3c7 !important;
  color: #92400E !important;
}
.table-secondary th, thead.table-secondary th {
  background: #f1f5f9 !important;
  color: #475569 !important;
}
.table-dark th, thead.table-dark th {
  background: #1E293B !important;
  color: #E2E8F0 !important;
}
.table tbody tr.table-danger td {
  background: #fee2e2 !important;
}
.table tbody tr.table-warning td {
  background: #fef3c7 !important;
}
.table tbody tr.table-success td {
  background: #d1fae5 !important;
}
.table tbody td {
  padding: 0.8rem 1rem !important;
  vertical-align: middle !important;
  color: var(--nv-text) !important;
  border-bottom: 1px solid var(--nv-border-light) !important;
}
.table-hover tbody tr:hover {
  background: #F8FAFC !important;
}
.table-bordered {
  border: 1px solid var(--nv-border) !important;
}
.table-bordered th,
.table-bordered td {
  border-color: var(--nv-border-light) !important;
}

/* Sortable headers */
th.sortable {
  cursor: pointer;
  transition: color 0.15s ease;
}
th.sortable:hover {
  color: var(--nv-primary) !important;
}
th.sortable.sorted-asc::after { color: var(--nv-primary) !important; }
th.sortable.sorted-desc::after { color: var(--nv-primary) !important; }


/* ============================================================
   FORMS
   ============================================================ */
.form-control,
.form-select {
  border: 1px solid var(--nv-border) !important;
  border-radius: var(--nv-radius) !important;
  padding: 0.6rem 0.9rem !important;
  font-size: 0.875rem !important;
  color: var(--nv-text) !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-control:focus,
.form-select:focus {
  border-color: var(--nv-primary) !important;
  box-shadow: 0 0 0 3px var(--nv-primary-light) !important;
  outline: none !important;
}
.form-control.is-invalid {
  border-color: var(--nv-danger) !important;
  box-shadow: 0 0 0 3px var(--nv-danger-bg) !important;
}
.form-control.form-control-sm,
.form-select.form-select-sm {
  padding: 0.45rem 0.7rem !important;
  font-size: 0.8rem !important;
  border-radius: var(--nv-radius-sm) !important;
}

.form-label {
  font-weight: 600 !important;
  font-size: 0.8rem !important;
  color: var(--nv-text) !important;
  letter-spacing: 0.01em;
  margin-bottom: 0.35rem !important;
}
.form-text {
  font-size: 0.75rem !important;
  color: var(--nv-text-muted) !important;
}

.input-group-text {
  background: #F8FAFC !important;
  border: 1px solid var(--nv-border) !important;
  border-radius: var(--nv-radius) !important;
  font-size: 0.85rem !important;
  color: var(--nv-text-secondary) !important;
  font-weight: 500;
}


/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  border-radius: var(--nv-radius) !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  padding: 0.5rem 1.15rem !important;
  transition: var(--nv-transition);
  letter-spacing: 0.01em;
}

/* Primário (sucesso / ações positivas) — exceto btn-circle */
.btn-success:not(.btn-circle) {
  background: var(--nv-primary) !important;
  border-color: var(--nv-primary) !important;
  color: #FFF !important;
  box-shadow: 0 2px 6px rgba(109, 40, 217, 0.25);
}
.btn-success:not(.btn-circle):hover,
.btn-success:not(.btn-circle):focus {
  background: var(--nv-primary-dark) !important;
  border-color: var(--nv-primary-dark) !important;
  box-shadow: 0 4px 12px rgba(109, 40, 217, 0.35);
  transform: translateY(-1px);
}

.btn-primary:not(.btn-circle) {
  background: var(--nv-primary) !important;
  border-color: var(--nv-primary) !important;
}
.btn-primary:not(.btn-circle):hover {
  background: var(--nv-primary-dark) !important;
  border-color: var(--nv-primary-dark) !important;
}

.btn-dark {
  background: #1E293B !important;
  border-color: #1E293B !important;
  border-radius: var(--nv-radius) !important;
}
.btn-dark:hover {
  background: #0F172A !important;
}

.btn-outline-dark {
  border-color: var(--nv-border) !important;
  color: var(--nv-text-secondary) !important;
  background: var(--nv-card) !important;
}
.btn-outline-dark:hover {
  background: var(--nv-bg) !important;
  color: var(--nv-text) !important;
  border-color: var(--nv-text-muted) !important;
}

.btn-outline-success:not(.btn-circle) {
  border-color: var(--nv-primary) !important;
  color: var(--nv-primary) !important;
}
.btn-outline-success:not(.btn-circle):hover {
  background: var(--nv-primary-light) !important;
  color: var(--nv-primary-dark) !important;
}

.btn-outline-danger:not(.btn-circle) {
  border-color: var(--nv-border) !important;
  color: var(--nv-danger) !important;
}
.btn-outline-danger:not(.btn-circle):hover {
  background: var(--nv-danger-bg) !important;
  border-color: var(--nv-danger) !important;
}

.btn-warning:not(.btn-circle) {
  background: #FEF3C7 !important;
  border-color: #FDE68A !important;
  color: #92400E !important;
}
.btn-warning:not(.btn-circle):hover {
  background: #FDE68A !important;
}

.btn-danger:not(.btn-circle) {
  background: var(--nv-danger) !important;
  border-color: var(--nv-danger) !important;
}
.btn-danger:not(.btn-circle):hover {
  background: #DC2626 !important;
  transform: translateY(-1px);
}

/* Botões circulares (ações da tabela) */
.btn-circle {
  width: 34px !important;
  height: 34px !important;
  border-radius: var(--nv-radius) !important;
  border: 1px solid var(--nv-border) !important;
  transition: var(--nv-transition);
  background: var(--nv-card) !important;
}

/* Visualizar (olho) - azul */
.btn-circle.btn-primary {
  color: var(--nv-info) !important;
  border-color: var(--nv-border) !important;
  background: var(--nv-card) !important;
  box-shadow: none !important;
}
.btn-circle.btn-primary:hover {
  background: var(--nv-info-bg) !important;
  border-color: var(--nv-info) !important;
  color: var(--nv-info) !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Editar (lápis) - amarelo/amber */
.btn-circle.btn-warning {
  color: #D97706 !important;
  border-color: var(--nv-border) !important;
  background: var(--nv-card) !important;
}
.btn-circle.btn-warning:hover {
  background: var(--nv-warning-bg) !important;
  border-color: var(--nv-warning) !important;
  color: #B45309 !important;
}

/* Imprimir (impressora) - verde/teal */
.btn-circle.btn-success,
.btn-circle.btn-info {
  color: var(--nv-accent) !important;
  border-color: var(--nv-border) !important;
  background: var(--nv-card) !important;
  box-shadow: none !important;
}
.btn-circle.btn-success:hover,
.btn-circle.btn-info:hover {
  background: var(--nv-accent-light) !important;
  border-color: var(--nv-accent) !important;
  color: #0F766E !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Excluir / Deletar (lixeira) - vermelho */
.btn-circle.btn-danger {
  color: var(--nv-danger) !important;
  border-color: var(--nv-border) !important;
  background: var(--nv-card) !important;
}
.btn-circle.btn-danger:hover {
  background: var(--nv-danger-bg) !important;
  border-color: var(--nv-danger) !important;
  transform: none !important;
}

/* Inativar / Cancelar (proibido) - cinza */
.btn-circle.btn-secondary,
.btn-circle.btn-outline-secondary {
  color: var(--nv-text-muted) !important;
  border-color: var(--nv-border) !important;
  background: var(--nv-card) !important;
}
.btn-circle.btn-secondary:hover,
.btn-circle.btn-outline-secondary:hover {
  background: #F1F5F9 !important;
  border-color: var(--nv-text-muted) !important;
  color: var(--nv-text-secondary) !important;
}

/* Botão inativar genérico (outline-danger circle) */
.btn-circle.btn-outline-danger {
  color: var(--nv-danger) !important;
  border-color: var(--nv-border) !important;
  background: var(--nv-card) !important;
}
.btn-circle.btn-outline-danger:hover {
  background: var(--nv-danger-bg) !important;
  border-color: var(--nv-danger) !important;
  color: var(--nv-danger) !important;
}

/* Link / Copiar (corrente) - roxo */
.btn-circle.btn-link,
.btn-circle[title*="Link"],
.btn-circle[title*="link"],
.btn-circle[title*="Copiar"],
.btn-circle[title*="copiar"] {
  color: var(--nv-primary) !important;
  border-color: var(--nv-border) !important;
  background: var(--nv-card) !important;
}
.btn-circle.btn-link:hover {
  background: var(--nv-primary-light) !important;
  border-color: var(--nv-primary) !important;
}

/* Override final: Bootstrap tenta colocar cor branca no hover de outline/solid buttons.
   Para btn-circle, SEMPRE manter background claro e cor visível. */
.btn.btn-circle:hover,
.btn.btn-circle:focus,
.btn.btn-circle:active {
  background-color: var(--nv-bg) !important;
}
.btn.btn-circle.btn-danger:hover { color: var(--nv-danger) !important; background: var(--nv-danger-bg) !important; }
.btn.btn-circle.btn-primary:hover { color: var(--nv-info) !important; background: var(--nv-info-bg) !important; }
.btn.btn-circle.btn-success:hover,
.btn.btn-circle.btn-info:hover { color: var(--nv-accent) !important; background: var(--nv-accent-light) !important; }
.btn.btn-circle.btn-warning:hover { color: #B45309 !important; background: var(--nv-warning-bg) !important; }
.btn.btn-circle.btn-secondary:hover { color: var(--nv-text-secondary) !important; background: #F1F5F9 !important; }
.btn.btn-circle.btn-outline-danger:hover { color: var(--nv-danger) !important; background: var(--nv-danger-bg) !important; }
.btn.btn-circle.btn-outline-secondary:hover { color: var(--nv-text-secondary) !important; background: #F1F5F9 !important; }

.btn-sm {
  padding: 0.38rem 0.85rem !important;
  font-size: 0.8rem !important;
}


/* ============================================================
   BADGES
   ============================================================ */
.badge {
  font-weight: 600 !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.04em !important;
  padding: 0.3em 0.7em !important;
  border-radius: var(--nv-radius-sm) !important;
  text-transform: uppercase;
}
.badge.bg-success {
  background: var(--nv-success-bg) !important;
  color: #065F46 !important;
}
.badge.bg-secondary {
  background: #F1F5F9 !important;
  color: var(--nv-text-muted) !important;
}
.badge.bg-danger {
  background: var(--nv-danger-bg) !important;
  color: var(--nv-danger) !important;
}
.badge.bg-warning {
  background: var(--nv-warning-bg) !important;
  color: #92400E !important;
}
.badge.bg-info {
  background: var(--nv-info-bg) !important;
  color: #1E40AF !important;
}


/* ============================================================
   ALERTS
   ============================================================ */
.alert {
  border-radius: var(--nv-radius) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  border-width: 1px !important;
}
.alert-success {
  background: var(--nv-success-bg) !important;
  border-color: #A7F3D0 !important;
  color: #065F46 !important;
}
.alert-danger {
  background: var(--nv-danger-bg) !important;
  border-color: #FECACA !important;
  color: #991B1B !important;
}
.alert-warning {
  background: var(--nv-warning-bg) !important;
  border-color: #FDE68A !important;
  color: #92400E !important;
}
.alert-info {
  background: var(--nv-info-bg) !important;
  border-color: #BFDBFE !important;
  color: #1E40AF !important;
}


/* ============================================================
   TABS (aba produtos: Dados / Ingredientes / Nutricional)
   ============================================================ */
.nav-tabs {
  border-bottom: 2px solid var(--nv-border) !important;
}
.nav-tabs .nav-link {
  color: var(--nv-text-secondary) !important;
  font-weight: 500 !important;
  font-size: 0.875rem !important;
  border: none !important;
  padding: 0.65rem 1.2rem !important;
  margin-bottom: -2px;
  transition: var(--nv-transition);
  border-radius: 0 !important;
}
.nav-tabs .nav-link:hover {
  color: var(--nv-primary) !important;
  background: transparent !important;
  border-bottom: 2px solid var(--nv-primary-light) !important;
}
.nav-tabs .nav-link.active {
  color: var(--nv-primary) !important;
  font-weight: 700 !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid var(--nv-primary) !important;
}


/* ============================================================
   PAGINATION
   ============================================================ */
.pagination .page-link {
  border-radius: var(--nv-radius-sm) !important;
  border: 1px solid var(--nv-border) !important;
  color: var(--nv-text-secondary) !important;
  font-size: 0.8rem !important;
  font-weight: 500 !important;
  margin: 0 2px !important;
  padding: 0.4rem 0.75rem !important;
  transition: var(--nv-transition);
}
.pagination .page-link:hover {
  background: var(--nv-primary-light) !important;
  color: var(--nv-primary) !important;
  border-color: var(--nv-primary-light) !important;
}
.pagination .active .page-link {
  background: var(--nv-primary) !important;
  border-color: var(--nv-primary) !important;
  color: #FFF !important;
}


/* ============================================================
   MODALS
   ============================================================ */
.modal-content {
  border: none !important;
  border-radius: var(--nv-radius-lg) !important;
  box-shadow: var(--nv-shadow-lg) !important;
  overflow: hidden;
}
.modal-header {
  background: var(--nv-card) !important;
  border-bottom: 1px solid var(--nv-border) !important;
  padding: 1.1rem 1.5rem !important;
}
.modal-header .modal-title,
.modal-header h5,
.modal-header strong {
  color: var(--nv-text) !important;
}
.modal-body {
  padding: 1.5rem !important;
  color: var(--nv-text) !important;
}
.modal-body p,
.modal-body label,
.modal-body strong {
  color: var(--nv-text) !important;
}
.modal-footer {
  border-top: 1px solid var(--nv-border) !important;
  padding: 1rem 1.5rem !important;
}


/* ============================================================
   FOOTER
   ============================================================ */
footer.bg-light {
  background: var(--nv-card) !important;
  border-top: 1px solid var(--nv-border) !important;
  box-shadow: none !important;
}
footer .text-dark,
footer small.text-dark {
  color: var(--nv-text-secondary) !important;
  font-size: 0.8rem !important;
}
footer strong.text-dark {
  color: var(--nv-text) !important;
}


/* ============================================================
   LOADER / SPINNER
   ============================================================ */
.custom-spinner {
  border-color: var(--nv-primary-light) !important;
  border-top-color: var(--nv-primary) !important;
}


/* ============================================================
   MISC UTILITIES
   ============================================================ */

/* Stats cards do dashboard */
.bg-white.border.rounded.shadow-sm {
  border-radius: var(--nv-radius-lg) !important;
  border-color: var(--nv-border) !important;
  transition: var(--nv-transition);
}
.bg-white.border.rounded.shadow-sm:hover {
  box-shadow: var(--nv-shadow) !important;
}

/* List groups (modal de troca de estabelecimento) */
.list-group-item {
  border-color: var(--nv-border-light) !important;
  transition: var(--nv-transition);
}
.list-group-item:hover,
.list-group-item-action:hover {
  background: var(--nv-primary-light) !important;
  color: var(--nv-primary) !important;
}

/* Tom Select styling */
.ts-wrapper .ts-control {
  border: 1px solid var(--nv-border) !important;
  border-radius: var(--nv-radius) !important;
  padding: 0.5rem 0.75rem !important;
}
.ts-wrapper .ts-control:focus,
.ts-wrapper.focus .ts-control {
  border-color: var(--nv-primary) !important;
  box-shadow: 0 0 0 3px var(--nv-primary-light) !important;
}
/* Tom Select dropdown deve ficar acima de tudo */
.ts-wrapper .ts-dropdown {
  z-index: 1060 !important;
  border: 1px solid var(--nv-border) !important;
  border-radius: var(--nv-radius) !important;
  box-shadow: var(--nv-shadow-lg) !important;
}
.ts-wrapper .ts-dropdown .option:hover,
.ts-wrapper .ts-dropdown .active {
  background: var(--nv-primary-light) !important;
  color: var(--nv-primary) !important;
}

/* Idle dimmer */
#idle-dimmer .content {
  border-radius: var(--nv-radius-lg) !important;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(4px);
}


/* ============================================================
   RESPONSIVIDADE — TABLET (768-991px)
   ============================================================ */
@media (min-width: 768px) and (max-width: 991.98px) {
  .card-body {
    padding: 1.25rem !important;
  }
  .table thead th {
    font-size: 0.65rem !important;
    padding: 0.6rem 0.7rem !important;
  }
  .table tbody td {
    font-size: 0.8rem !important;
    padding: 0.65rem 0.7rem !important;
  }
}


/* ============================================================
   RESPONSIVIDADE — MOBILE (< 768px)
   ============================================================ */
@media (max-width: 767.98px) {
  .card-header {
    padding: 0.85rem 1rem !important;
  }
  .card-body {
    padding: 1rem !important;
  }
  .card-header h5,
  .card-header .mb-0 {
    font-size: 0.95rem !important;
  }

  /* Tabelas empilháveis */
  .table-responsive {
    border-radius: var(--nv-radius) !important;
    border: 1px solid var(--nv-border) !important;
  }
  .table thead th {
    font-size: 0.6rem !important;
    padding: 0.55rem 0.5rem !important;
  }
  .table tbody td {
    font-size: 0.78rem !important;
    padding: 0.55rem 0.5rem !important;
  }

  /* Botões */
  .btn {
    font-size: 0.8rem !important;
    padding: 0.45rem 0.9rem !important;
  }
  .btn-circle {
    width: 30px !important;
    height: 30px !important;
  }
  .btn-circle i {
    font-size: 0.85rem !important;
  }

  /* Stats do dashboard */
  .row.g-3 > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
  }

  /* Footer */
  footer .container {
    font-size: 0.75rem !important;
  }

  /* Switcher compacto */
  .switcher-surface {
    border-radius: var(--nv-radius) !important;
    margin-left: 0.5rem !important;
    margin-right: 0.5rem !important;
  }
  .switcher-surface .container {
    padding: 0.65rem 0.8rem !important;
  }
  .tenant-chip {
    font-size: 0.7rem !important;
    padding: 0.3rem 0.65rem !important;
  }

  /* Formulários em coluna no mobile */
  .row.g-3 {
    --bs-gutter-y: 0.75rem;
  }

  /* Alert info no mobile */
  .alert {
    font-size: 0.8rem !important;
    padding: 0.7rem 0.9rem !important;
  }
}

/* ============================================================
   MOBILE < 576px — Ajustes finos
   ============================================================ */
@media (max-width: 575.98px) {
  /* Header: manter logo visível e boa no mobile xs */
  .navbar.bg-header-light .navbar-brand span {
    display: none !important;
  }
  .navbar.bg-header-light .navbar-brand img {
    height: 48px !important;
  }

  /* Container principal sem margem lateral excessiva */
  main.container {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  /* Botões de ação empilhados */
  td .d-inline,
  td .d-inline-flex {
    display: flex !important;
    flex-wrap: wrap;
    gap: 3px;
  }

  /* Cards de estatísticas */
  .bg-white.border.rounded.shadow-sm {
    padding: 0.85rem !important;
  }
  .bg-white.border.rounded.shadow-sm .fw-bold.fs-5 {
    font-size: 1.25rem !important;
  }

  /* Form controls menores */
  .form-control,
  .form-select {
    font-size: 0.8rem !important;
    padding: 0.5rem 0.7rem !important;
  }

  /* Dropdown user mais compacto */
  .navbar.bg-header-light .dropdown-toggle {
    font-size: 0.8rem !important;
    padding: 5px 10px !important;
  }

  /* Dashboard: linha de filtros de data deve quebrar */
  .d-flex.align-items-center.gap-2,
  .d-flex.gap-2,
  .d-flex.justify-content-between {
    flex-wrap: wrap !important;
  }

  /* Inputs de data menores */
  input[type="date"] {
    font-size: 0.75rem !important;
    padding: 0.35rem 0.5rem !important;
    min-width: 0 !important;
    width: auto !important;
  }

  /* Botão Filtrar não ser cortado */
  .btn-dark,
  .btn[type="submit"] {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }

  /* H3/H4 de título de página menor */
  h3, .h3 {
    font-size: 1.15rem !important;
  }
  h4, .h4 {
    font-size: 1rem !important;
  }
}


/* ============================================================
   SCROLL CUSTOMIZADO (sidebar)
   ============================================================ */
.app-sidebar::-webkit-scrollbar {
  width: 4px;
}
.app-sidebar::-webkit-scrollbar-track {
  background: transparent;
}
.app-sidebar::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.1);
  border-radius: 4px;
}
.app-sidebar::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.2);
}

/* Scrollbar no nav interno da sidebar */
.app-sidebar > nav.side-nav::-webkit-scrollbar {
  width: 3px;
}
.app-sidebar > nav.side-nav::-webkit-scrollbar-track {
  background: transparent;
}
.app-sidebar > nav.side-nav::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.15);
  border-radius: 3px;
}


/* ============================================================
   TRANSIÇÃO DE PÁGINA (suave)
   ============================================================ */
main.container {
  animation: nv-fade-in 0.25s ease-out;
}
@keyframes nv-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}


/* ============================================================
   AUTH PAGES (login, register, 2FA, etc.)
   ============================================================ */
@media (max-width: 639px) {
  /* Container externo - respiro e centralização */
  .min-h-screen.flex.flex-col {
    padding: 1.5rem 1rem !important;
    justify-content: center !important;
  }

  /* Card do formulário */
  .min-h-screen > div.w-full {
    width: 100% !important;
    border-radius: 14px !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important;
  }
}


/* ============================================================
   PRINT (impressão de etiquetas)
   ============================================================ */
@media print {
  .navbar, .app-sidebar, .sidebar-backdrop,
  #estab-switcher, footer, #idle-dimmer,
  .btn-open-sidebar { display: none !important; }
  body {
    padding: 0 !important;
    background: #fff !important;
  }
  main.container {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
}