:root {
  --primary: #009040;
  --primary-rgb: 0, 144, 64;
  --secondary: #00732e;
  --secondary-rgb: 0, 115, 46;
  --gradient: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
}

html,
body {
  width: 100%;
  max-width: 100%;
}

html {
  scroll-behavior: smooth;
}

/* Scrollbar fina em todo o projeto (sem a trilha clara padrão do navegador). Cor neutra, serve tanto pro
   fundo claro quanto escuro do conteúdo; a sidebar (fundo verde fixo, sem variar com o tema) sobrescreve
   pra um tom claro/translúcido próprio logo abaixo. */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(100, 116, 139, 0.45) transparent;
}
*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, 0.45);
  border-radius: 999px;
}
*::-webkit-scrollbar-thumb:hover {
  background: rgba(100, 116, 139, 0.65);
}
html[data-bs-theme="dark"] {
  scrollbar-color: rgba(148, 163, 184, 0.35) transparent;
}
html[data-bs-theme="dark"] *::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.35);
}
html[data-bs-theme="dark"] *::-webkit-scrollbar-thumb:hover {
  background: rgba(148, 163, 184, 0.55);
}

body {
  font-family: "Inter", system-ui, sans-serif;
  background: #f8fafc;
  overflow-x: hidden;
}

.alert-success {
  transition: opacity 0.5s ease;
}
.alert-success.is-auto-dismissing {
  opacity: 0;
}

/* Tabelas de controle de acesso (Usuários / Perfis) */
.access-users-table thead th,
.access-roles-table thead th {
  color: #000000;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-bottom-width: 1px;
}
.access-users-table tbody td,
.access-users-table thead th,
.access-roles-table tbody td,
.access-roles-table thead th {
  padding-top: 1rem;
  padding-bottom: 1rem;
  vertical-align: middle;
}

/* Listagem em card no mobile (< 768px) pras telas de Usuários/Perfis — evita o scroll horizontal
   da tabela, que fica apertada demais com várias colunas numa tela pequena. */
.access-mobile-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.access-mobile-card {
  border: 1px solid #e5eaf2;
  border-radius: 14px;
  padding: 1rem;
}
.access-mobile-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.access-mobile-card-title {
  font-weight: 600;
  color: #0f172a;
}
.access-mobile-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-top: 0.75rem;
}
.access-mobile-field {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.access-mobile-field-label {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #64748b;
}
.access-mobile-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid #eef2f7;
}
.access-mobile-card-actions .btn {
  flex: 1 1 auto;
}

.access-role-badge,
.access-role-chip {
  background: rgba(13, 202, 240, 0.18);
  color: #0b7285;
  border: 1px solid rgba(13, 202, 240, 0.28);
  font-weight: 600;
}
.access-role-badge {
  margin-right: 0.35rem;
  margin-bottom: 0.2rem;
}
.access-role-badge-muted {
  background: rgba(108, 117, 125, 0.12);
  color: #6c757d;
  border-color: rgba(108, 117, 125, 0.18);
}
.access-role-chip {
  padding: 0.55rem 0.85rem;
}

.access-status-badge {
  min-width: 76px;
  font-weight: 700;
}
.access-status-badge-active {
  background: rgba(25, 135, 84, 0.14);
  color: #198754;
  border: 1px solid rgba(25, 135, 84, 0.2);
}
.access-status-badge-inactive {
  background: rgba(108, 117, 125, 0.14);
  color: #6c757d;
  border: 1px solid rgba(108, 117, 125, 0.2);
}

.small-email-link {
  color: #495057 !important;
}

body.sidebar-overlay-open::after {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 999;
}

*, *::before, *::after {
  box-sizing: border-box;
}

.login-bg {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
}

.login-video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 120%;
  object-fit: cover;
  z-index: -2;
}

.login-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #00732e;
  z-index: -1;
  opacity: 0.8;
}

.glass-card {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 24px;
  color: #ffffff;
}

.login-vh {
  min-height: 100vh;
  min-height: 100dvh;
  position: relative;
  z-index: 2;
}

.login-card {
  width: 100%;
  max-width: 460px;
}

.login-card-flip {
  perspective: 1600px;
  min-height: 620px;
}

.login-card-inner {
  position: relative;
  width: 100%;
  min-height: 620px;
  transform-style: preserve-3d;
  transition: transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

.login-card-flip.is-flipped .login-card-inner {
  transform: rotateY(180deg);
}

.login-card-face {
  position: absolute;
  inset: 0;
  width: 100%;
  min-height: 620px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  flex-direction: column;
}

.login-card-front {
  z-index: 2;
}

.login-card-back {
  transform: rotateY(180deg);
}

.login-secondary-link {
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
}

.login-secondary-link:hover,
.login-secondary-link:focus {
  color: #ffffff;
  text-decoration: underline;
}

.login-footer-spacer {
  margin-top: 3rem;
}

.login-footer {
  margin-top: auto;
  padding-top: 1.75rem;
}

@media (max-width: 575.98px) {
  .login-card-flip,
  .login-card-inner,
  .login-card-face {
    min-height: 600px;
  }
}

.login-validation-summary {
  color: #ff8a8a;
}
.login-validation-summary ul {
  margin: 0;
  padding-left: 1.1rem;
}

.login-input-group {
  border-radius: 8px;
  overflow: hidden;
  --login-input-surface: rgba(255, 255, 255, 0.14);
  --login-input-border: rgba(255, 255, 255, 0.18);
  background: var(--login-input-surface);
  border: 1px solid var(--login-input-border);
}
.login-input-group:focus-within {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.28);
}
.login-input-group:focus-within .login-input-icon {
  border-color: rgba(255, 255, 255, 0.28);
}

.login-input-icon {
  background: transparent !important;
  border: 0;
  border-right: 1px solid var(--login-input-border);
  color: rgba(255, 255, 255, 0.78);
  padding-inline: 1rem;
}

.login-password-toggle {
  border-left: 0;
  cursor: pointer;
}
.login-password-toggle:hover,
.login-password-toggle:focus {
  background-color: rgba(255, 255, 255, 0.08);
  box-shadow: none;
}

.input-modern {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff;
  caret-color: #ffffff;
}
.input-modern::placeholder {
  color: rgba(255, 255, 255, 0.58);
}
.input-modern:focus {
  background: transparent !important;
  background-color: transparent !important;
  border-color: transparent !important;
  color: #ffffff !important;
  box-shadow: none;
}
.input-modern:-webkit-autofill,
.input-modern:-webkit-autofill:hover,
.input-modern:-webkit-autofill:focus,
.input-modern:-webkit-autofill:active {
  background-color: transparent !important;
  -webkit-text-fill-color: #ffffff !important;
  caret-color: #ffffff;
  box-shadow: inset 0 0 0 1000px transparent !important;
  -webkit-box-shadow: inset 0 0 0 1000px transparent !important;
  border-left: 0 !important;
  transition: background-color 99999s ease-out 0s;
}

.logo-gradient {
  background: linear-gradient(135deg, #009040 0%, #00732e 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background: var(--gradient);
}

.sidebar .logo-gradient {
  background: transparent !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
}

.sidebar {
  width: 280px;
  height: 100vh;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  background: var(--gradient);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  position: fixed;
  z-index: 1000;
  overflow: hidden;
}

/* Logo + botão de abrir/fechar: fixo no topo, fora da área que rola. */
.sidebar-brand-row-wrapper {
  flex-shrink: 0;
}

/* Lista de navegação rola sozinha (submenu Call Center/Acesso expandido pode ser mais alto que a tela);
   logo (acima) e rodapé (alternar modo claro/escuro, abaixo) ficam de fora do flex-grow, sempre visíveis.
   Cor da scrollbar própria (branco translúcido) porque o fundo da sidebar é sempre o verde do tema, não
   muda com claro/escuro como o resto da scrollbar global. */
.sidebar-nav-scroll {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}
.sidebar-nav-scroll::-webkit-scrollbar {
  width: 6px;
}
.sidebar-nav-scroll::-webkit-scrollbar-track {
  background: transparent;
}
.sidebar-nav-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.25);
  border-radius: 999px;
}
.sidebar-nav-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.4);
}
.sidebar.collapsed {
  width: 80px;
}
.sidebar.collapsed .nav-link {
  padding: 14px 12px;
  justify-content: center;
}
.sidebar.collapsed .nav-link span,
.sidebar.collapsed .submenu-arrow,
.sidebar.collapsed .submenu {
  display: none;
}
.sidebar.collapsed h4 {
  display: none;
}
.sidebar.collapsed .d-flex {
  flex-direction: column;
  align-items: center;
}

.sidebar-close-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
}

body.sidebar-mobile {
  overflow-x: hidden;
}

.nav-link {
  color: rgba(255, 255, 255, 0.9);
  padding: 14px 20px;
  border-radius: 12px;
  margin-bottom: 4px;
  transition: all 0.3s ease;
}
.nav-link:hover, .nav-link.active {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  transform: translateX(4px);
}
.nav-link i {
  width: 24px;
}

.sidebar .submenu-toggle,
.sidebar .submenu-toggle:hover,
.sidebar .submenu-toggle:focus,
.sidebar .submenu-toggle.active,
.sidebar .submenu-toggle.open {
  color: #ffffff;
}

.sidebar-submenu-group .submenu {
  display: none;
  margin: 0 0 0.45rem 0.8rem;
  padding-left: 0.65rem;
  border-left: 1px solid rgba(255, 255, 255, 0.16);
}

.sidebar-submenu-group .submenu.submenu-open {
  display: block;
}

.submenu-link {
  padding-block: 0.8rem;
  font-size: 0.96rem;
}

.submenu-arrow {
  transition: transform 0.3s ease;
}

.submenu-toggle.open .submenu-arrow {
  transform: rotate(180deg);
}

.main-content {
  margin-left: 280px;
  transition: all 0.4s ease;
  min-width: 0;
  max-width: calc(100% - 280px);
}
.main-content.expanded {
  margin-left: 80px;
  max-width: calc(100% - 80px);
}
.main-content.no-sidebar {
  margin-left: 0;
  max-width: 100%;
}

.global-page-loading {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.28);
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, visibility 0.18s ease;
}
.global-page-loading.is-visible {
  opacity: 1;
  visibility: visible;
}
.global-page-loading__content {
  min-width: 240px;
  padding: 1rem 1.25rem;
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 24px 54px rgba(15, 23, 42, 0.22);
  text-align: center;
}

a.is-nav-loading {
  pointer-events: none;
  opacity: 0.7;
}

button.is-button-loading,
input.is-button-loading {
  pointer-events: none;
  opacity: 0.85;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.topbar-wrap {
  position: relative;
}

.topbar-project-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.2rem;
  font-weight: 600;
  padding: 0.5rem 1.25rem;
  white-space: nowrap;
  background-color: var(--primary);
  color: #ffffff;
  border: none;
}

.jconfirm-buttons .btn-danger {
  background: #ef4444;
  border: none;
  color: #ffffff;
  font-weight: 600;
  transition: all 0.3s ease;
}
.jconfirm-buttons .btn-danger:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(var(--primary-rgb), 0.3);
}
.jconfirm-buttons .btn-success {
  background: #22c55e;
  border: none;
  color: #ffffff;
  font-weight: 600;
  transition: all 0.3s ease;
}
.jconfirm-buttons .btn-success:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(var(--primary-rgb), 0.3);
}
.jconfirm-buttons .btn-secondary {
  background: linear-gradient(90deg, #ccc 0%, #fff 100%);
  border: none;
  color: var(--primary);
  font-weight: 600;
  transition: all 0.3s ease;
}
.jconfirm-buttons .btn-secondary:hover {
  color: var(--primary);
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(var(--primary-rgb), 0.3);
  background: linear-gradient(90deg, #ccc 0%, #fff 100%);
}

@media (max-width: 991.98px) {
  .sidebar {
    transform: translateX(-100%);
    left: 0;
    top: 0;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.22);
  }
  .topbar-actions {
    padding-top: 5px;
    border-top: solid 1px #ccc;
    width: 100%;
  }
  .sidebar.mobile-open {
    transform: translateX(0);
  }
  .sidebar-brand-row {
    margin-bottom: 2rem !important;
  }
  .sidebar-close-btn {
    display: inline-flex;
  }
  .main-content,
  .main-content.expanded {
    margin-left: 0;
    max-width: 100%;
  }
  .topbar-wrap {
    gap: 0.75rem;
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .topbar-title-group {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    flex: 1 1 100%;
  }
  .topbar-title {
    font-size: 1rem;
    line-height: 1.15;
  }
  .topbar-project-badge {
    position: static;
    transform: none;
    order: 2;
    flex: 1 1 100%;
    text-align: center;
    font-size: 1.05rem;
  }
  .topbar-new-user,
  .topbar-user-btn {
    min-height: 42px;
  }
  .topbar-new-user {
    padding-inline: 0.9rem;
    white-space: nowrap;
    font-size: 0.88rem;
  }
  .topbar-user-label {
    display: inline-flex;
    align-items: center;
    font-size: 0.88rem;
    line-height: 1;
  }
}
@media (max-width: 420px) {
  .topbar-new-user {
    width: auto;
    padding-inline: 0.9rem;
  }
  .topbar-new-user span,
  .topbar-user-label {
    font-size: 0.8rem;
  }
}
.btn:not(.btn-link):not(.btn-close) {
  font-weight: 600;
  transition: all 0.3s ease;
}
.btn:not(.btn-link):not(.btn-close):hover {
  transform: translateY(-2px);
}
.btn:not(.btn-link):not(.btn-close):focus-visible {
  box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.18);
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 12px 24px rgba(var(--primary-rgb), 0.22);
}
.btn-primary:hover, .btn-primary:active, .btn-primary.active, .btn-primary:focus-visible {
  box-shadow: 0 16px 30px rgba(var(--primary-rgb), 0.28);
  color: #ffffff;
}

.bg-primary {
  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%) !important;
  color: #ffffff;
}

.btn-secondary {
  background: linear-gradient(135deg, #64748b 0%, #334155 100%);
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 12px 24px rgba(51, 65, 85, 0.22);
}
.btn-secondary:hover, .btn-secondary:active, .btn-secondary.active, .btn-secondary:focus-visible {
  box-shadow: 0 16px 30px rgba(51, 65, 85, 0.28);
  color: #ffffff;
}

.bg-secondary {
  background: linear-gradient(135deg, #64748b 0%, #334155 100%) !important;
  color: #ffffff;
}

.btn-success {
  background: linear-gradient(135deg, #22c55e 0%, #15803d 100%);
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 12px 24px rgba(21, 128, 61, 0.22);
}
.btn-success:hover, .btn-success:active, .btn-success.active, .btn-success:focus-visible {
  box-shadow: 0 16px 30px rgba(21, 128, 61, 0.28);
  color: #ffffff;
}

.bg-success {
  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%) !important;
  color: #ffffff;
}

.btn-danger {
  background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 12px 24px rgba(185, 28, 28, 0.22);
}
.btn-danger:hover, .btn-danger:active, .btn-danger.active, .btn-danger:focus-visible {
  box-shadow: 0 16px 30px rgba(185, 28, 28, 0.28);
  color: #ffffff;
}

.bg-danger {
  background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%) !important;
  color: #ffffff;
}

.btn-warning {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  border-color: transparent;
  color: #3b2f05;
  box-shadow: 0 12px 24px rgba(245, 158, 11, 0.22);
}
.btn-warning:hover, .btn-warning:active, .btn-warning.active, .btn-warning:focus-visible {
  box-shadow: 0 16px 30px rgba(245, 158, 11, 0.28);
  color: #3b2f05;
}

.bg-warning {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important;
  color: #3b2f05;
}

.btn-info {
  background: linear-gradient(135deg, #38bdf8 0%, #0284c7 100%);
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 12px 24px rgba(2, 132, 199, 0.22);
}
.btn-info:hover, .btn-info:active, .btn-info.active, .btn-info:focus-visible {
  box-shadow: 0 16px 30px rgba(2, 132, 199, 0.28);
  color: #ffffff;
}

.bg-info {
  background: linear-gradient(135deg, #38bdf8 0%, #0284c7 100%) !important;
  color: #ffffff;
}

.btn-light {
  background: linear-gradient(135deg, #f8fafc 0%, #cbd5e1 100%);
  border-color: transparent;
  color: #0f172a;
  box-shadow: 0 12px 24px rgba(203, 213, 225, 0.22);
}
.btn-light:hover, .btn-light:active, .btn-light.active, .btn-light:focus-visible {
  box-shadow: 0 16px 30px rgba(203, 213, 225, 0.28);
  color: #0f172a;
}

.bg-light {
  background: linear-gradient(135deg, #f8fafc 0%, #cbd5e1 100%) !important;
  color: #0f172a;
}

.btn-dark {
  background: linear-gradient(135deg, #334155 0%, #0f172a 100%);
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.22);
}
.btn-dark:hover, .btn-dark:active, .btn-dark.active, .btn-dark:focus-visible {
  box-shadow: 0 16px 30px rgba(15, 23, 42, 0.28);
  color: #ffffff;
}

.bg-dark {
  background: linear-gradient(135deg, #334155 0%, #0f172a 100%) !important;
  color: #ffffff;
}

.bg-gradient-dark {
  background: linear-gradient(135deg, #1e2937 0%, var(--primary) 100%) !important;
  color: #ffffff;
}

.btn-gradient {
  background: var(--gradient);
  border: none;
  color: #ffffff;
  font-weight: 600;
  transition: all 0.3s ease;
}
.btn-gradient:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(var(--primary-rgb), 0.3);
}

.btn-gradient-white {
  background: linear-gradient(90deg, #ccc 0%, #fff 100%);
  border: none;
  color: var(--primary);
  font-weight: 600;
  transition: all 0.3s ease;
}
.btn-gradient-white:hover {
  color: var(--primary);
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(var(--primary-rgb), 0.3);
  background: linear-gradient(90deg, #ccc 0%, #fff 100%);
}

.shadow-modern {
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.projects-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
  max-width: 1100px;
  margin: 0 auto 2rem;
  padding: 0 1rem;
}

.project-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 1rem;
  text-align: left;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  border-top: 4px solid var(--card-color, var(--primary));
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  cursor: pointer;
}

.project-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.08);
}

.project-card.active {
  transform: translateY(-8px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
  border-top-width: 5px;
}

.project-card .logo {
  width: 72px;
  height: 72px;
  padding: 6px;
  border-radius: 50%;
  background: var(--card-color, var(--primary));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex: 0 0 auto;
}

.project-card .logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.project-card .project-name {
  font-weight: 600;
  margin-left: 12px;
}

.project-card .project-footer {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Topbar brand badge to mirror project logo style */
.brand-badge {
  width: 48px;
  height: 48px;
  padding: 6px;
  border-radius: 50%;
  background: var(--card-color, var(--primary));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.brand-badge img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.bike-page {
  background: #f5f7fb;
}

.bike-page-content {
  display: block;
  min-width: 0;
  max-width: 100%;
}
.bike-page-content > * + * {
  margin-top: 1.25rem;
}

.bike-search-row {
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  min-width: 0;
}

.bike-search-filter {
  min-width: 0;
}

.bike-search-filter-select {
  min-height: 60px;
  border-radius: 10px;
  border: 1px solid #dce3ee;
  background: #ffffff;
  padding: 0.9rem 1rem;
  color: #0f172a;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%2364788b' d='M0 0h10L5 6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 0.75rem auto;
  padding-right: 2.5rem;
}

.bike-search {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  background: #ffffff;
  border: 1px solid #dce3ee;
  border-radius: 10px;
  overflow: hidden;
  min-height: 60px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
  max-width: 100%;
}

.bike-search-icon {
  color: #64748b;
  padding: 0 1rem 0 1.2rem;
  font-size: 1.05rem;
}

.bike-search-input {
  border: 0;
  box-shadow: none !important;
  padding: 1rem 1rem 1rem 0;
  color: #0f172a;
}
.bike-search-input::placeholder {
  color: #94a3b8;
}

.bike-search-btn {
  min-height: 60px;
  padding-inline: 1.25rem;
  border-radius: 10px;
}

.bike-summary-card,
.bike-actions-card,
.bike-history-card {
  background: #ffffff;
  border: 1px solid #e5eaf2;
  border-radius: 14px;
  padding: 1.25rem;
  max-width: 100%;
}

.bike-summary-card {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  min-width: 0;
}

.bike-summary-main {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
}

.bike-avatar {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: rgba(var(--primary-rgb), 0.12);
  color: var(--primary);
  display: grid;
  place-items: center;
  font-size: 1.9rem;
}

.bike-number {
  font-size: clamp(1.8rem, 2.5vw, 2.5rem);
  line-height: 1;
  font-weight: 700;
  color: #0f172a;
}

.bike-meta {
  color: #64748b;
  margin-top: 0.35rem;
}

.bike-info-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border: 1px solid #e8edf4;
  border-radius: 12px;
  overflow: hidden;
  min-width: 0;
}

.bike-info-item {
  padding: 1rem;
  border-right: 1px solid #e8edf4;
  min-width: 0;
}
.bike-info-item:last-child {
  border-right: 0;
}
.bike-info-item span {
  display: block;
  color: #64748b;
  font-size: 0.9rem;
  margin-bottom: 0.4rem;
}
.bike-info-item strong {
  color: #0f172a;
  font-size: 0.98rem;
}

.status-chip {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0.2rem 0.75rem;
  border-radius: 999px;
  background: #d7f5dc;
  color: #188a37;
  font-size: 0.88rem;
}

.section-heading {
  font-size: 1.05rem;
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 1rem;
}

.bike-actions-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 0.9rem;
  min-width: 0;
}

.bike-action-card {
  min-height: 92px;
  border: 0;
  border-radius: 8px;
  color: #ffffff;
  font-weight: 600;
  padding: 1rem 0.75rem;
  display: grid;
  gap: 0.45rem;
  place-items: center;
  text-align: center;
  box-shadow: 0 10px 18px rgba(15, 23, 42, 0.12);
}
.bike-action-card i {
  font-size: 1.35rem;
}

.bike-action-card.orange {
  background: linear-gradient(135deg, #ff6b00, #ff8a1f);
}

.bike-action-card.green {
  background: linear-gradient(135deg, #0e8f3a, #22c55e);
}

.bike-action-card.red {
  background: linear-gradient(135deg, #f31212, #ff4040);
}

.bike-action-card.blue {
  background: linear-gradient(135deg, #1256c9, #1f7aff);
}

.bike-action-card.purple {
  background: linear-gradient(135deg, #9f5de3, #b77df0);
}

.bike-action-card.amber {
  background: linear-gradient(135deg, #f59e0b, #fbbf24);
}

.bike-action-card.royal {
  background: linear-gradient(135deg, #0c5cb9, #1473e6);
}

.bike-action-card.slate {
  background: linear-gradient(135deg, #64748b, #7b8797);
}

.bike-services-card {
  margin-top: 1rem;
  border: 1px solid #e8edf4;
  border-radius: 12px;
  padding: 1.15rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.bike-services-title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: #0f172a;
  font-weight: 600;
  margin-bottom: 0.3rem;
}
.bike-services-title i {
  color: var(--primary);
  font-size: 1.2rem;
}

.bike-services-copy p {
  margin: 0;
  color: #64748b;
}

.bike-services-btn {
  white-space: nowrap;
}

.bike-history-header,
.bike-history-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-width: 0;
}

.bike-history-table {
  margin-bottom: 0;
  min-width: 0;
}
.bike-history-table thead th {
  color: #64748b;
  font-size: 0.92rem;
  font-weight: 500;
  border-bottom: 1px solid #e8edf4;
}
.bike-history-table tbody td {
  color: #334155;
  border-top: 1px solid #eef2f7;
  font-size: 0.95rem;
}

.bike-pagination {
  gap: 0.6rem;
  margin-top: 10px;
}
.bike-pagination .page-link {
  border-radius: 8px;
  border: 1px solid #e5eaf2;
  color: #334155;
  min-width: 40px;
  text-align: center;
}
.bike-pagination .page-link.active {
  background: var(--gradient);
  color: #ffffff;
  border-color: transparent;
}

.bike-tabs {
  border-bottom: 1px solid #e5eaf2;
  gap: 0.75rem;
}
.bike-tabs .nav-link {
  color: #64748b;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  padding: 0.9rem 0.2rem;
  margin-bottom: -1px;
  font-weight: 600;
}
.bike-tabs .nav-link.active {
  color: var(--primary);
  background: transparent;
  border-bottom-color: var(--primary);
  transform: none;
}

.bike-list-card {
  margin-top: 1rem;
  border: 1px solid #e8edf4;
  border-radius: 12px;
  padding: 1rem;
}

.bike-item-table thead th {
  border-top: 0;
  background: #fafbfc;
}

.bike-radio {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.8px solid #c5cdd8;
  display: inline-block;
}

.bike-plus-btn {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.qty-control {
  display: inline-flex;
  align-items: center;
  border: 1px solid #e5eaf2;
  border-radius: 8px;
  overflow: hidden;
}
.qty-control button {
  border: 0;
  background: #fff;
  width: 34px;
  height: 34px;
  color: #334155;
}
.qty-control span {
  min-width: 34px;
  text-align: center;
  border-left: 1px solid #e5eaf2;
  border-right: 1px solid #e5eaf2;
  line-height: 34px;
  background: #fff;
}

.bike-summary-panel {
  margin-top: 1rem;
  border-top: 1px solid #e8edf4;
  padding-top: 1rem;
}

.bike-summary-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.summary-metric {
  background: #f8fafc;
  border: 1px solid #e8edf4;
  border-radius: 12px;
  padding: 1rem;
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.summary-metric small {
  display: block;
  color: #64748b;
  margin-bottom: 0.15rem;
}
.summary-metric strong {
  font-size: 1.6rem;
  line-height: 1;
  color: #0f172a;
}

.summary-metric-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(var(--primary-rgb), 0.12);
  color: var(--primary);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.bike-info-box {
  margin-top: 1rem;
  border: 1px solid #d9e7f8;
  background: #f3f8ff;
  color: #3161a6;
  border-radius: 12px;
  padding: 0.9rem 1rem;
}

.bike-actions-card-inner {
  border: 0;
  border-radius: 12px;
  padding: 0;
}

.bike-footer-actions {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  padding-top: 0.5rem;
}

.bike-ellipsis {
  display: inline-flex;
  align-items: center;
  color: #94a3b8;
  padding: 0 0.15rem;
}

@media (max-width: 1199.98px) {
  .bike-summary-card {
    grid-template-columns: 1fr;
  }
  .bike-info-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bike-actions-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 767.98px) {
  .bike-page .p-4 {
    padding-inline: 1rem !important;
  }
  .bike-page .main-content,
  .bike-page .navbar,
  .bike-page-content,
  .bike-summary-card,
  .bike-actions-card,
  .bike-history-card {
    max-width: 100%;
  }
  .bike-summary-metrics {
    grid-template-columns: 1fr;
  }
  .bike-footer-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .bike-search-row {
    grid-template-columns: 1fr;
  }
  .bike-search-btn {
    width: 100%;
  }
  .bike-info-grid {
    grid-template-columns: 1fr;
  }
  .bike-info-item {
    border-right: 0;
    border-bottom: 1px solid #e8edf4;
  }
  .bike-info-item:last-child {
    border-bottom: 0;
  }
  .bike-actions-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bike-action-card:nth-child(n+3) {
    display: none;
  }
  .bike-services-card,
  .bike-history-header,
  .bike-history-footer {
    flex-direction: column;
    align-items: stretch;
  }
  .bike-history-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

.filter-collapse-toggle {
  display: inline-flex;
  align-items: center;
}

.filter-collapse-chevron {
  transition: transform 0.22s ease;
}

.filter-collapse-toggle.is-open .filter-collapse-chevron {
  transform: rotate(180deg);
}

/* Tela "Permissões por projeto": um card por projeto, faixa de cor só visual (--project-accent). */
.user-project-card {
  position: relative;
  border-top: 4px solid var(--project-accent, var(--bs-success));
  scroll-margin-top: 90px;
}

.user-project-nav {
  position: sticky;
  top: 1rem;
}

.user-project-nav-link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.75rem;
  border-radius: 10px;
  color: #495057;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.15s ease;
}
.user-project-nav-link:hover {
  background: rgba(0, 0, 0, 0.04);
  color: #212529;
}
.user-project-nav-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--project-accent, var(--bs-success));
  flex-shrink: 0;
}

/* ============================================================
   Modo escuro (data-bs-theme="dark" no <html>, ver _Layout.cshtml)
   Componentes nativos do Bootstrap (.card, .table, .modal, .dropdown-menu,
   .form-control, .alert etc.) já se adaptam sozinhos — aqui só cobrimos
   o que este arquivo define com cor fixa.
   ============================================================ */
.sidebar-footer {
  flex-shrink: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding: 1rem 1.5rem;
}

.theme-toggle-btn {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  background: rgba(255, 255, 255, 0.12);
  border: 0;
  border-radius: 12px;
  color: #ffffff;
  padding: 0.65rem 0.9rem;
  font-weight: 600;
  font-size: 0.92rem;
  transition: background-color 0.2s ease;
}
.theme-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}
.theme-toggle-icon {
  width: 20px;
  text-align: center;
}
.theme-toggle-icon-light,
.theme-toggle-label-light {
  display: none;
}
html[data-bs-theme="dark"] .theme-toggle-icon-dark,
html[data-bs-theme="dark"] .theme-toggle-label-dark {
  display: none;
}
html[data-bs-theme="dark"] .theme-toggle-icon-light,
html[data-bs-theme="dark"] .theme-toggle-label-light {
  display: inline-block;
}
.sidebar.collapsed .theme-toggle-label {
  display: none;
}
.sidebar.collapsed .theme-toggle-btn {
  justify-content: center;
}

html[data-bs-theme="dark"] body {
  background: #0b1220;
  color: #e2e8f0;
}

/* Cores "puras" (sidebar, badge do projeto, botões semânticos, ações da bicicleta) ficam
   menos saturadas/brilhantes no escuro — mesma identidade de cor, sem cansar a vista. */
html[data-bs-theme="dark"] .sidebar,
html[data-bs-theme="dark"] .topbar-project-badge,
html[data-bs-theme="dark"] .bike-action-card,
html[data-bs-theme="dark"] .btn-primary,
html[data-bs-theme="dark"] .bg-primary,
html[data-bs-theme="dark"] .btn-success,
html[data-bs-theme="dark"] .bg-success,
html[data-bs-theme="dark"] .btn-danger,
html[data-bs-theme="dark"] .bg-danger,
html[data-bs-theme="dark"] .btn-warning,
html[data-bs-theme="dark"] .bg-warning,
html[data-bs-theme="dark"] .btn-info,
html[data-bs-theme="dark"] .bg-info,
html[data-bs-theme="dark"] .bike-pagination .page-link.active {
  filter: saturate(0.7) brightness(0.86);
}

html[data-bs-theme="dark"] .bg-white {
  background-color: #111a2e !important;
}
html[data-bs-theme="dark"] .text-dark {
  color: #e2e8f0 !important;
}
html[data-bs-theme="dark"] .bg-light {
  background: #1e293b !important;
  color: #e2e8f0;
}

html[data-bs-theme="dark"] .global-page-loading__content {
  background: #1e293b;
  color: #e2e8f0;
}

html[data-bs-theme="dark"] .small-email-link {
  color: #94a3b8 !important;
}
html[data-bs-theme="dark"] .access-role-badge-muted {
  background: rgba(148, 163, 184, 0.16);
  color: #cbd5e1;
  border-color: rgba(148, 163, 184, 0.24);
}

/* Cabeçalhos das tabelas de Usuários/Perfis tinham cor de texto fixa (preto) — some no fundo escuro. */
html[data-bs-theme="dark"] .access-users-table thead th,
html[data-bs-theme="dark"] .access-roles-table thead th {
  color: #cbd5e1;
}
html[data-bs-theme="dark"] .access-role-badge,
html[data-bs-theme="dark"] .access-role-chip {
  background: rgba(56, 189, 248, 0.16);
  color: #7dd3fc;
  border-color: rgba(56, 189, 248, 0.32);
}
html[data-bs-theme="dark"] .access-status-badge-active {
  background: rgba(34, 197, 94, 0.16);
  color: #4ade80;
  border-color: rgba(34, 197, 94, 0.32);
}
html[data-bs-theme="dark"] .access-status-badge-inactive {
  background: rgba(148, 163, 184, 0.16);
  color: #cbd5e1;
  border-color: rgba(148, 163, 184, 0.28);
}

html[data-bs-theme="dark"] .access-mobile-card {
  border-color: #334155;
  background: #1e293b;
}
html[data-bs-theme="dark"] .access-mobile-card-title {
  color: #e2e8f0;
}
html[data-bs-theme="dark"] .access-mobile-field-label {
  color: #94a3b8;
}
html[data-bs-theme="dark"] .access-mobile-card-actions {
  border-top-color: #334155;
}

html[data-bs-theme="dark"] .project-card {
  background: #1e293b;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

html[data-bs-theme="dark"] .user-project-nav-link {
  color: #cbd5e1;
}
html[data-bs-theme="dark"] .user-project-nav-link:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #f1f5f9;
}

/* Telas de Bicicletas / Produtos e Serviços */
html[data-bs-theme="dark"] .bike-page {
  background: #0b1220;
}
html[data-bs-theme="dark"] .bike-search,
html[data-bs-theme="dark"] .bike-summary-card,
html[data-bs-theme="dark"] .bike-actions-card,
html[data-bs-theme="dark"] .bike-history-card,
html[data-bs-theme="dark"] .bike-list-card,
html[data-bs-theme="dark"] .bike-services-card,
html[data-bs-theme="dark"] .summary-metric,
html[data-bs-theme="dark"] .qty-control,
html[data-bs-theme="dark"] .qty-control button,
html[data-bs-theme="dark"] .qty-control span,
html[data-bs-theme="dark"] .bike-pagination .page-link {
  background: #1e293b;
  border-color: #334155;
  color: #e2e8f0;
}
/* background-color (não o shorthand) pra não apagar o background-image/position/size da setinha do select. */
html[data-bs-theme="dark"] .bike-search-filter-select {
  background-color: #1e293b;
  border-color: #334155;
  color: #e2e8f0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%2394a3b8' d='M0 0h10L5 6z'/%3E%3C/svg%3E");
}
html[data-bs-theme="dark"] .bike-search-input,
html[data-bs-theme="dark"] .bike-number,
html[data-bs-theme="dark"] .section-heading,
html[data-bs-theme="dark"] .bike-info-item strong,
html[data-bs-theme="dark"] .bike-services-title,
html[data-bs-theme="dark"] .summary-metric strong {
  color: #e2e8f0;
}
html[data-bs-theme="dark"] .bike-meta,
html[data-bs-theme="dark"] .bike-info-item span,
html[data-bs-theme="dark"] .bike-services-copy p,
html[data-bs-theme="dark"] .bike-search-icon,
html[data-bs-theme="dark"] .bike-pagination .page-link {
  color: #94a3b8;
}
html[data-bs-theme="dark"] .bike-info-grid,
html[data-bs-theme="dark"] .bike-info-item {
  border-color: #334155;
}
html[data-bs-theme="dark"] .bike-history-table thead th,
html[data-bs-theme="dark"] .bike-item-table thead th {
  border-color: #334155;
  color: #94a3b8;
  background: #16213a;
}
html[data-bs-theme="dark"] .bike-history-table tbody td {
  border-color: #263548;
  color: #cbd5e1;
}
html[data-bs-theme="dark"] .bike-tabs {
  border-color: #334155;
}
html[data-bs-theme="dark"] .bike-tabs .nav-link {
  color: #94a3b8;
}
html[data-bs-theme="dark"] .status-chip {
  background: rgba(34, 197, 94, 0.18);
  color: #4ade80;
}
html[data-bs-theme="dark"] .bike-info-box {
  background: rgba(56, 189, 248, 0.1);
  border-color: rgba(56, 189, 248, 0.24);
  color: #7dd3fc;
}
html[data-bs-theme="dark"] .bike-summary-panel {
  border-color: #334155;
}

/* Telas de Call Center (busca de cliente + dashboard do usuário) */
.callcenter-page,
.callcenter-dashboard-page {
  background: #f5f7fb;
}

.callcenter-content,
.callcenter-dashboard-content {
  display: grid;
  gap: 1.25rem;
  min-width: 0;
}

.callcenter-panel {
  min-width: 0;
  padding: 1.25rem;
  background: #ffffff;
  border: 1px solid #e5eaf2;
  border-radius: 14px;
}

.callcenter-panel-heading,
.callcenter-results-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.1rem;
}
.callcenter-panel-heading h2,
.callcenter-results-heading h2 {
  margin: 0;
  color: #263548;
  font-size: 1rem;
  font-weight: 700;
}
.callcenter-panel-heading p,
.callcenter-results-heading p {
  margin: 0.25rem 0 0;
  color: #718096;
  font-size: 0.875rem;
}

.callcenter-filter-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem 1.25rem;
}

.callcenter-field {
  min-width: 0;
}
.callcenter-field .form-label {
  margin-bottom: 0.4rem;
  color: #435166;
  font-size: 0.875rem;
  font-weight: 600;
}
.callcenter-field .form-control {
  min-height: 44px;
  border-color: #dce3ee;
  border-radius: 8px;
}

.callcenter-filter-actions {
  display: flex;
  grid-column: 1/-1;
  justify-content: flex-end;
  gap: 0.65rem;
  padding-top: 0.25rem;
}

.callcenter-results-count {
  flex: 0 0 auto;
  color: #718096;
  font-size: 0.875rem;
  white-space: nowrap;
}

/* Filtro "Tipos de problema" de Ocorrências Abertas: dropdown com checkboxes em vez de <select multiple>. */
.callcenter-problem-filter-menu {
  max-height: 280px;
  overflow-y: auto;
}
.callcenter-problem-filter-menu .form-check {
  padding-left: 1.75rem;
}
.callcenter-problem-filter-menu .form-check-label {
  cursor: pointer;
}

/* Logo da Certta (Selfies Pendentes): texto azul-marinho sem contraste no fundo escuro das linhas da tabela
   em modo escuro - invert+hue-rotate é o truque padrão pra clarear sem perder a cor verde da marca. */
.certta-logo-icon {
  height: 28px;
  width: auto;
}
html[data-bs-theme="dark"] .certta-logo-icon {
  filter: invert(1) hue-rotate(180deg);
}

.callcenter-table {
  min-width: 760px;
}
.callcenter-table thead th {
  color: #64748b;
  font-size: 0.92rem;
  font-weight: 500;
  border-bottom: 1px solid #e8edf4;
  white-space: nowrap;
}
.callcenter-table tbody td {
  color: #344256;
  vertical-align: middle;
}

.callcenter-customer-name {
  min-width: 170px;
  font-weight: 650;
}

.callcenter-customer-email {
  color: #64748b;
  overflow-wrap: anywhere;
}

.callcenter-row-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.35rem;
  white-space: nowrap;
}

.callcenter-empty-state {
  padding: 2.5rem 1rem !important;
  color: #718096 !important;
  text-align: center;
}

.dashboard-user-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem;
  background: #ffffff;
  border: 1px solid #e5eaf2;
  border-radius: 14px;
}

.dashboard-user-avatar {
  display: grid;
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  color: #ffffff;
  font-size: 1rem;
  font-weight: 700;
  place-items: center;
  background: var(--gradient);
  border-radius: 50%;
}

.dashboard-user-details {
  flex: 1;
  min-width: 0;
}
.dashboard-user-details h1 {
  margin: 0.2rem 0;
  color: #263548;
  font-size: 1.15rem;
  font-weight: 700;
}
.dashboard-user-details p {
  margin: 0;
  color: #718096;
  font-size: 0.875rem;
}
.dashboard-user-details p span {
  margin: 0 0.35rem;
  color: #a5b0c0;
}

.dashboard-user-label {
  color: var(--primary);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* Modal "Dados do Cliente" (ver _ClientDetailsModal.cshtml). */
.client-details-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 1.25rem;
  text-align: center;
}
.client-details-avatar {
  display: grid;
  width: 72px;
  height: 72px;
  margin-bottom: 0.25rem;
  color: #a5b0c0;
  font-size: 1.75rem;
  place-items: center;
  background: #eef2f7;
  border-radius: 50%;
}
.client-details-name {
  margin: 0;
  color: #263548;
  font-size: 1.1rem;
  font-weight: 700;
}
.client-details-id {
  margin: 0;
  color: #718096;
  font-size: 0.8rem;
}
.client-details-section-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 1.25rem 0 0.75rem;
  padding-bottom: 0.5rem;
  color: var(--primary);
  font-size: 0.85rem;
  font-weight: 700;
  border-bottom: 1px solid #e5eaf2;
}
.client-details-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem 1.5rem;
}
.client-details-field-label {
  display: block;
  color: #718096;
  font-size: 0.75rem;
}
.client-details-field-value {
  display: block;
  color: #263548;
  font-size: 0.9rem;
  font-weight: 600;
  word-break: break-word;
}
.client-details-address p {
  margin: 0 0 0.2rem;
  color: #263548;
  font-size: 0.9rem;
}
.client-details-street {
  font-weight: 600;
}

html[data-bs-theme="dark"] .client-details-avatar {
  color: #7c8aa0;
  background: #27354a;
}
html[data-bs-theme="dark"] .client-details-name {
  color: #f1f5f9;
}
html[data-bs-theme="dark"] .client-details-field-value,
html[data-bs-theme="dark"] .client-details-address p {
  color: #e2e8f0;
}
html[data-bs-theme="dark"] .client-details-section-title {
  border-bottom-color: #2d3a4f;
}

.dashboard-panel {
  overflow: hidden;
  background: #ffffff;
  border: 1px solid #e5eaf2;
  border-radius: 14px;
}

.dashboard-panel-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.25rem 1rem;
}
.dashboard-panel-heading h2 {
  margin: 0;
  color: #263548;
  font-size: 1rem;
  font-weight: 700;
}
.dashboard-panel-heading p {
  margin: 0.25rem 0 0;
  color: #718096;
  font-size: 0.875rem;
}

.dashboard-tabs {
  flex-wrap: nowrap;
  padding: 0 1.25rem;
  overflow-x: auto;
  overflow-y: hidden;
}

.dashboard-tab-content {
  padding: 1.25rem;
}

.dashboard-table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.dashboard-table-toolbar h3 {
  margin: 0;
  color: #263548;
  font-size: 0.95rem;
  font-weight: 700;
}
.dashboard-date-filter {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.dashboard-date-filter-field {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  color: #435166;
  font-size: 0.82rem;
  font-weight: 600;
}
.dashboard-date-filter-field input[type="date"] {
  width: auto;
}

.dashboard-table {
  min-width: 800px;
  overflow: hidden;
  border: 1px solid #e0e7ef;
  border-radius: 8px;
}
.dashboard-table thead th {
  padding: 0.72rem 0.75rem;
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
  background: var(--primary);
  color: #ffffff;
  border: 0;
}
.dashboard-sort-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: inherit;
  text-decoration: none;
}
.dashboard-sort-link:hover {
  text-decoration: underline;
}
.dashboard-sort-icon {
  font-size: 0.7rem;
  opacity: 0.6;
}
.dashboard-sort-link-active .dashboard-sort-icon {
  opacity: 1;
}
.dashboard-edit-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  margin-left: 0.35rem;
  border: 0;
  border-radius: 0.35rem;
  background: transparent;
  color: #5a6b85;
  font-size: 0.8rem;
  cursor: pointer;
}

/* Protocolo + ícones de ação (Ocorrências Abertas): nunca quebra linha - só essa coluna encolhe pro
   conteúdo (width: 1%), sobrando espaço pras outras colunas quebrarem à vontade. */
#openOccurrencesTable td[data-label="Protocolo"] {
  width: 1%;
  white-space: nowrap;
}
.dashboard-edit-icon:hover {
  background: #e7edf3;
  color: #1f2a3a;
}
.dashboard-edit-icon:focus-visible {
  outline: 2px solid #1d5fa8;
  outline-offset: 2px;
}
.dashboard-table tbody td {
  padding: 0.68rem 0.75rem;
  color: #344256;
  font-size: 0.86rem;
  border-color: #e7edf3;
}
/* Sem isso, table-layout:auto prefere encolher essas colunas (quebrando "Em aberto" ou empilhando os ícones)
   em vez de deixar a tabela rolar na horizontal — só a coluna de texto longo (.dashboard-cell-text) deve ceder. */
.dashboard-table tbody td[data-label="Código"] {
  white-space: nowrap;
}
/* Valores monetários (ToString("C")): "R$" e o número têm um espaço entre si, que quebra linha sozinho
   quando a coluna aperta. */
.dashboard-table tbody td.dashboard-currency {
  white-space: nowrap;
}
/* Texto potencialmente longo (ex.: Passe.Motivo, até 5000 caracteres): quebra normal, corta em 3 linhas e o botão "+" expande.
   O botão só aparece quando o texto passa de 3 linhas (callcenter-dashboard.js). */
.dashboard-cell-text {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  max-width: 320px;
}
.dashboard-cell-text-body {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.dashboard-cell-text.is-expanded .dashboard-cell-text-body {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
}
.dashboard-toggle {
  position: relative;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  padding: 0;
  color: #ffffff;
  background: #1d5fa8;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
/* O "+" é desenhado (duas barras centralizadas) em vez de caractere, para ficar exatamente no centro do círculo;
   expandido, a barra vertical some e sobra o "−". */
.dashboard-toggle::before,
.dashboard-toggle::after {
  position: absolute;
  top: 50%;
  left: 50%;
  content: "";
  background: currentColor;
  border-radius: 1px;
  transform: translate(-50%, -50%);
}
.dashboard-toggle::before {
  width: 10px;
  height: 2px;
}
.dashboard-toggle::after {
  width: 2px;
  height: 10px;
}
.dashboard-toggle[aria-expanded="true"]::after {
  display: none;
}

/* Linha de detalhes da viagem (aberta pelo "+" da coluna Detalhes). */
.dashboard-table tbody tr.dashboard-journey-details > td {
  padding: 0.6rem 1rem 0.9rem 2.5rem;
  background: #f6f9fc;
}
.dashboard-details-table {
  border-collapse: collapse;
}
.dashboard-table .dashboard-details-table tbody td {
  padding: 0.25rem 1.5rem 0.25rem 0;
  font-size: 0.84rem;
  border: 0;
}
.dashboard-journey-details-empty {
  color: #718096;
  font-size: 0.84rem;
}
html[data-bs-theme="dark"] .dashboard-table tbody tr.dashboard-journey-details > td {
  background: #162235;
}
html[data-bs-theme="dark"] .dashboard-journey-details-empty {
  color: #94a3b8;
}

/* Badge de tipo de transação (TipoTransacaoUtilizacao) nos detalhes da Viagem*/
.dashboard-status.journey-type-pickup {
  color: #1d5fa8;
  background: #d9e9fb;
}
.dashboard-status.journey-type-return {
  color: #197044;
  background: #d7f2e1;
}
.dashboard-status.journey-type-cancel {
  color: #b3261e;
  background: #fbdcd8;
}
.dashboard-status.journey-type-attempt {
  color: #8a6400;
  background: #fbecb0;
}
.dashboard-status.journey-type-tech-return {
  color: #6a3fa0;
  background: #e8daf7;
}
.dashboard-status.journey-type-request {
  color: #0f7c86;
  background: #cdf1f3;
}
.dashboard-status.journey-type-tech-area {
  color: #b0266f;
  background: #f9d7ea;
}
.dashboard-status.journey-type-tech-pickup {
  color: #9a4a0a;
  background: #fbdcb8;
}
.dashboard-status.journey-type-default {
  color: #5b6677;
  background: #eef1f5;
}
html[data-bs-theme="dark"] .dashboard-status.journey-type-pickup {
  color: #8ab4e8;
  background: #142f4d;
}
html[data-bs-theme="dark"] .dashboard-status.journey-type-return {
  color: #7fd9ae;
  background: #123524;
}
html[data-bs-theme="dark"] .dashboard-status.journey-type-cancel {
  color: #f4a6a0;
  background: #3b1b1a;
}
html[data-bs-theme="dark"] .dashboard-status.journey-type-attempt {
  color: #e8c65e;
  background: #3c2f0c;
}
html[data-bs-theme="dark"] .dashboard-status.journey-type-tech-return {
  color: #cba8ee;
  background: #2e1f3d;
}
html[data-bs-theme="dark"] .dashboard-status.journey-type-request {
  color: #6fd9e0;
  background: #0d3338;
}
html[data-bs-theme="dark"] .dashboard-status.journey-type-tech-area {
  color: #ec97cb;
  background: #3a1830;
}
html[data-bs-theme="dark"] .dashboard-status.journey-type-tech-pickup {
  color: #e8a35c;
  background: #3d2410;
}
html[data-bs-theme="dark"] .dashboard-status.journey-type-default {
  color: #b6c0cf;
  background: #263548;
}

/* "Ver Mapa" da aba Viagens (botão com cara de link) e o modal do mapa. */
.dashboard-map-link {
  padding: 0;
  font-size: 0.84rem;
  color: #1d5fa8;
  white-space: nowrap;
  background: none;
  border: 0;
  cursor: pointer;
}
.dashboard-map-link:hover {
  text-decoration: underline;
}
.dashboard-map-link:focus-visible {
  outline: 2px solid #1d5fa8;
  outline-offset: 2px;
}
.journey-map-state {
  padding: 3rem 1rem;
  color: #718096;
  text-align: center;
}
.journey-map-canvas {
  width: 100%;
  height: 500px;
  overflow: hidden;
  border: 1px solid #e0e7ef;
  border-radius: 8px;
}
.journey-map-legend {
  display: flex;
  gap: 1.25rem;
  margin-top: 0.75rem;
  color: #4a5568;
  font-size: 0.84rem;
}
.journey-map-legend-line {
  display: inline-block;
  width: 22px;
  height: 4px;
  margin-right: 0.3rem;
  vertical-align: middle;
  background: #1d5fa8;
  border-radius: 2px;
}
.journey-map-legend-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 0.3rem;
  vertical-align: middle;
  border-radius: 50%;
}
.journey-map-legend-pickup {
  background: #2e9e5b;
}
.journey-map-legend-return {
  background: #d64545;
}
/* Conteúdo da InfoWindow do Google Maps (clique num marcador de retirada/devolução): fica sempre com as cores do
   modo claro, sem variante escura de propósito - é um <div> do Google sobre fundo branco dele, fora do nosso
   controle de layout, e não deve herdar a cor de texto clara do modo escuro do site (ficaria ilegível). */
.journey-map-info {
  color: #263548;
}
.journey-map-info strong {
  color: #1d2733;
}
html[data-bs-theme="dark"] .dashboard-map-link {
  color: #6cb2f2;
}
html[data-bs-theme="dark"] .journey-map-canvas {
  border-color: #334155;
}
html[data-bs-theme="dark"] .journey-map-legend,
html[data-bs-theme="dark"] .journey-map-state {
  color: #94a3b8;
}
.dashboard-toggle:hover {
  background: #174c86;
}
.dashboard-toggle:focus-visible {
  outline: 2px solid #1d5fa8;
  outline-offset: 2px;
}
html[data-bs-theme="dark"] .dashboard-toggle {
  color: #0b1d33;
  background: #6cb2f2;
}
html[data-bs-theme="dark"] .dashboard-toggle:hover {
  background: #8cc4f6;
}
html[data-bs-theme="dark"] .dashboard-toggle:focus-visible {
  outline-color: #6cb2f2;
}
html[data-bs-theme="dark"] .dashboard-edit-icon {
  color: #94a3b8;
}
html[data-bs-theme="dark"] .dashboard-edit-icon:hover {
  background: #334155;
  color: #e2e8f0;
}
html[data-bs-theme="dark"] .dashboard-edit-icon:focus-visible {
  outline-color: #6cb2f2;
}

/* Linha de detalhe expansível (coluna "Detalhes" - ver callcenter-open-occurrences.js). */
.occurrence-detail-toggle i {
  transition: transform 0.2s ease-in-out;
}
.occurrence-detail-toggle[aria-expanded="true"] i {
  transform: rotate(180deg);
}
.occurrence-detail-row td {
  background: #f8fafc;
  border-top: 0;
}
.occurrence-detail-label {
  display: block;
  color: #718096;
  font-size: 0.75rem;
}
.occurrence-detail-value {
  display: block;
  color: #263548;
  font-size: 0.9rem;
  font-weight: 600;
  word-break: break-word;
}
html[data-bs-theme="dark"] .occurrence-detail-row td {
  /* Cinza neutro (sem puxar pro azul do resto do tema escuro), só um pouco mais claro que o fundo do
     card (#1e293b) pra ler como continuação da linha, não como um painel à parte. */
  background: #2a2f38;
}
html[data-bs-theme="dark"] .occurrence-detail-value {
  color: #e2e8f0;
}

.dashboard-status {
  display: inline-flex;
  white-space: nowrap;
  padding: 0.2rem 0.5rem;
  font-size: 0.76rem;
  font-weight: 600;
  border-radius: 999px;
}
.dashboard-status.status-closed,
.dashboard-status.status-active {
  color: #197044;
  background: #e7f7ed;
}
.dashboard-status.status-cancelled,
.dashboard-status.status-blocked {
  color: #b3261e;
  background: #fdecea;
}
.dashboard-status.status-open {
  color: #1d5fa8;
  background: #e6f0fb;
}
.dashboard-status.status-warning {
  color: #8a6400;
  background: #fff4d6;
}
.dashboard-status.status-inactive,
.dashboard-status.status-default {
  color: #5b6677;
  background: #eef1f5;
}

.dashboard-status.status-released {
  color: #197044;
  background: #e7f7ed;
}
.imei-block-user {
  margin: 0 0 1rem;
  color: #435166;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.imei-block-state {
  padding: 3rem 1rem;
  color: #718096;
  text-align: center;
}
.imei-block-status-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
}
.imei-block-label {
  color: #435166;
  font-weight: 600;
}
.imei-block-tip {
  display: inline-block;
}
.imei-block-grid {
  position: relative;
  min-height: 5rem;
}
.imei-block-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 8px;
}
html[data-bs-theme="dark"] .imei-block-overlay {
  background: rgba(22, 34, 53, 0.7);
}
.imei-block-form {
  margin-bottom: 1rem;
}
.imei-block-input {
  display: flex;
  gap: 0.5rem;
}
.imei-block-input .form-control {
  flex: 1;
  min-width: 0;
}
html[data-bs-theme="dark"] .dashboard-status.status-blocked,
html[data-bs-theme="dark"] .dashboard-status.status-cancelled {
  color: #f4a6a0;
  background: #3b1b1a;
}
html[data-bs-theme="dark"] .dashboard-status.status-released,
html[data-bs-theme="dark"] .dashboard-status.status-active,
html[data-bs-theme="dark"] .dashboard-status.status-closed {
  color: #7fd9ae;
  background: #123524;
}
html[data-bs-theme="dark"] .dashboard-status.status-open {
  color: #8ab4e8;
  background: #142f4d;
}
html[data-bs-theme="dark"] .dashboard-status.status-warning {
  color: #e8c65e;
  background: #3c2f0c;
}
html[data-bs-theme="dark"] .dashboard-status.status-inactive,
html[data-bs-theme="dark"] .dashboard-status.status-default {
  color: #b6c0cf;
  background: #263548;
}
html[data-bs-theme="dark"] .imei-block-user,
html[data-bs-theme="dark"] .imei-block-label {
  color: #e2e8f0;
}
html[data-bs-theme="dark"] .imei-block-state {
  color: #94a3b8;
}

/* Modal "Documentação do usuário" (ícone de documentação na busca de clientes). */
.user-doc-user {
  margin: 0 0 1rem;
  color: #435166;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.user-doc-state {
  padding: 3rem 1rem;
  color: #718096;
  text-align: center;
}
.user-doc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.user-doc-card {
  min-width: 0;
  padding: 1rem 1.1rem;
  border: 1px solid #e5eaf2;
  border-radius: 10px;
}
.user-doc-wide {
  grid-column: 1 / -1;
}
.user-doc-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}
.user-doc-card-title {
  margin: 0;
  color: #263548;
  font-size: 0.95rem;
  font-weight: 700;
}
.user-doc-meta {
  margin: 0 0 0.75rem;
  color: #718096;
  font-size: 0.85rem;
  overflow-wrap: anywhere;
}
.user-doc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.user-doc-tip {
  display: inline-block;
}
.user-doc-tip-block {
  display: block;
}
.user-doc-body {
  position: relative;
}
.user-doc-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 8px;
}
html[data-bs-theme="dark"] .user-doc-overlay {
  background: rgba(22, 34, 53, 0.7);
}
.user-doc-note {
  margin: 0;
  color: #8290a3;
  font-size: 0.8rem;
}
.user-doc-observation {
  margin-bottom: 0.75rem;
}
.user-doc-upload {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}
.user-doc-upload .user-doc-tip-block {
  flex: 1;
  min-width: 0;
}
.user-doc-files {
  margin-top: 1rem;
}
.user-doc-files .dashboard-table {
  min-width: 0;
}
.user-doc-files .dashboard-empty-tab {
  min-height: 140px;
}
html[data-bs-theme="dark"] .user-doc-user,
html[data-bs-theme="dark"] .user-doc-card-title {
  color: #e2e8f0;
}
html[data-bs-theme="dark"] .user-doc-state,
html[data-bs-theme="dark"] .user-doc-meta,
html[data-bs-theme="dark"] .user-doc-note {
  color: #94a3b8;
}
html[data-bs-theme="dark"] .user-doc-card {
  border-color: #334155;
}
@media (max-width: 767.98px) {
  .user-doc-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .user-doc-upload {
    flex-direction: column;
  }
  .user-doc-upload .btn {
    width: 100%;
  }
  .user-doc-actions .user-doc-tip {
    flex: 1 1 100%;
  }
  .user-doc-actions .btn {
    width: 100%;
  }
}

.dashboard-pagination-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  flex-wrap: wrap;
  margin-top: 1.25rem;
}
.dashboard-pagination {
  display: flex;
  justify-content: center;
  gap: 0.35rem;
}
.dashboard-pagination-size {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.dashboard-pagination-size label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  color: #718096;
  font-size: 0.8rem;
  white-space: nowrap;
}
.dashboard-pagination-size select {
  width: auto;
  min-width: 4.5rem;
}
.dashboard-pagination a {
  display: grid;
  min-width: 30px;
  height: 30px;
  padding: 0 0.35rem;
  color: #527b9c;
  font-size: 0.8rem;
  font-weight: 700;
  place-items: center;
  background: #ffffff;
  border: 1px solid #b8c9d7;
  border-radius: 5px;
  text-decoration: none;
  white-space: nowrap;
}
.dashboard-pagination a.active,
.dashboard-pagination a:hover {
  color: #ffffff;
  background: var(--primary);
  border-color: var(--primary);
}
.dashboard-pagination span {
  display: grid;
  min-width: 30px;
  height: 30px;
  padding: 0 0.35rem;
  font-size: 0.8rem;
  place-items: center;
  white-space: nowrap;
}
.dashboard-pagination span.disabled {
  color: #b2bdca;
  background: #f1f4f8;
  border: 1px solid #dbe3ec;
  border-radius: 5px;
  cursor: not-allowed;
}
.dashboard-pagination span.gap {
  color: #8290a3;
}
.dashboard-pagination-summary {
  margin: 0.6rem 0 0;
  color: #718096;
  font-size: 0.8rem;
  text-align: center;
}

.dashboard-empty-tab {
  display: grid;
  min-height: 250px;
  color: #8290a3;
  text-align: center;
  place-content: center;
}
.dashboard-empty-tab i {
  margin-bottom: 0.75rem;
  font-size: 1.7rem;
  color: #b2bdca;
}
.dashboard-empty-tab p {
  margin: 0;
}

/* Botão de linha dos cartões mobile ("Ver mais"): só existe no mobile, onde as colunas secundárias ficam escondidas. */
.dashboard-card-toggle-cell {
  display: none;
}
.dashboard-card-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0;
  color: #1d5fa8;
  font-size: 0.84rem;
  font-weight: 600;
  background: none;
  border: 0;
  cursor: pointer;
}
.dashboard-card-toggle i {
  font-size: 0.7rem;
  transition: transform 0.2s ease-in-out;
}
.dashboard-card-toggle[aria-expanded="true"] i {
  transform: rotate(180deg);
}
.dashboard-card-toggle:focus-visible {
  outline: 2px solid #1d5fa8;
  outline-offset: 2px;
}

@media (max-width: 991.98px) {
  .callcenter-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Mobile: as tabelas do Call Center (.table-cards) viram uma lista de cartões, um por linha. Cada célula mostra o próprio
   rótulo (data-label); as colunas secundárias (.dashboard-secondary) ficam recolhidas atrás do "Ver mais" de cada cartão. */
@media (max-width: 767.98px) {
  .table-cards {
    min-width: 0;
    border: 0;
  }
  .table-cards,
  .table-cards > tbody {
    display: block;
    width: 100%;
  }
  .table-cards > thead {
    display: none;
  }
  .table-cards > tbody > tr:not([hidden]) {
    display: block;
    margin-bottom: 0.75rem;
    padding: 0.3rem 0.85rem;
    background: #ffffff;
    border: 1px solid #e0e7ef;
    border-radius: 10px;
  }
  .table-cards > tbody > tr > td {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    min-width: 0;
    padding: 0.4rem 0;
    overflow-wrap: anywhere;
    background: transparent;
    border: 0;
    box-shadow: none;
  }
  .table-cards > tbody > tr > td + td {
    border-top: 1px solid #eef2f7;
  }
  .table-cards > tbody > tr > td[data-label]::before {
    flex: 0 0 5.5rem;
    padding-top: 0.12rem;
    color: #8290a3;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    content: attr(data-label);
  }
  .table-cards > tbody > tr > td.dashboard-secondary {
    display: none;
  }
  .table-cards > tbody > tr.is-open > td.dashboard-secondary {
    display: flex;
  }
  .table-cards > tbody > tr > td.dashboard-card-toggle-cell {
    display: block;
  }
  .table-cards .dashboard-cell-text {
    flex: 1;
    min-width: 0;
    max-width: none;
  }
  .table-cards .callcenter-customer-name {
    min-width: 0;
  }
  .table-cards .callcenter-row-actions {
    justify-content: flex-start;
  }
  .table-cards > tbody > tr > td.callcenter-empty-state {
    display: block;
  }
  .table-cards > tbody > tr > td.dashboard-no-map {
    display: none;
  }

  /* Detalhes da viagem: a linha expansível vira o rodapé do cartão da própria viagem. */
  .table-cards > tbody > tr:has(+ tr.dashboard-journey-details:not([hidden])) {
    margin-bottom: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
  }
  .table-cards > tbody > tr.dashboard-journey-details:not([hidden]) {
    padding: 0.5rem 0.85rem 0.6rem;
    background: #f6f9fc;
    border-top: 0;
    border-radius: 0 0 10px 10px;
  }
  .table-cards > tbody > tr.dashboard-journey-details > td {
    display: block;
    padding: 0;
  }
  .table-cards .dashboard-details-table,
  .table-cards .dashboard-details-table tbody {
    display: block;
    width: 100%;
  }
  .table-cards .dashboard-details-table tbody tr {
    display: block;
    padding: 0.35rem 0;
  }
  .table-cards .dashboard-details-table tbody tr + tr {
    border-top: 1px solid #e7edf3;
  }
  .table-cards .dashboard-details-table tbody td {
    display: block;
    padding: 0.05rem 0;
  }

  .dashboard-panel-heading {
    padding: 1rem 1rem 0.75rem;
  }
  .dashboard-tabs {
    padding: 0 1rem;
  }
  .dashboard-tabs .nav-link {
    white-space: nowrap;
  }
  .dashboard-tab-content {
    padding: 1rem;
  }
  .dashboard-pagination-bar {
    flex-direction: column;
    margin-top: 1rem;
  }
  .dashboard-pagination {
    flex-wrap: wrap;
  }
  .dashboard-pagination a,
  .dashboard-pagination span {
    min-width: 36px;
    height: 36px;
  }
  .journey-map-canvas {
    height: min(500px, 60vh);
  }
  .journey-map-legend {
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
  }
}

@media (max-width: 575.98px) {
  .callcenter-panel {
    padding: 1rem;
  }
  .callcenter-filter-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .callcenter-filter-actions .btn {
    flex: 1;
  }
  .dashboard-user-card {
    flex-wrap: wrap;
    padding: 1rem;
  }
  .dashboard-user-card .btn {
    width: 100%;
  }
  .dashboard-user-details p {
    overflow-wrap: anywhere;
  }
  .dashboard-table-toolbar {
    flex-wrap: wrap;
  }
}

html[data-bs-theme="dark"] .callcenter-page,
html[data-bs-theme="dark"] .callcenter-dashboard-page {
  background: #0b1220;
}
html[data-bs-theme="dark"] .callcenter-panel,
html[data-bs-theme="dark"] .dashboard-user-card,
html[data-bs-theme="dark"] .dashboard-panel {
  background: #1e293b;
  border-color: #334155;
}
html[data-bs-theme="dark"] .callcenter-panel-heading h2,
html[data-bs-theme="dark"] .callcenter-results-heading h2,
html[data-bs-theme="dark"] .callcenter-field .form-label,
html[data-bs-theme="dark"] .callcenter-customer-name,
html[data-bs-theme="dark"] .dashboard-user-details h1,
html[data-bs-theme="dark"] .dashboard-panel-heading h2,
html[data-bs-theme="dark"] .dashboard-table-toolbar h3 {
  color: #e2e8f0;
}
html[data-bs-theme="dark"] .dashboard-date-filter-field {
  color: #cbd5e1;
}
html[data-bs-theme="dark"] .callcenter-panel-heading p,
html[data-bs-theme="dark"] .callcenter-results-heading p,
html[data-bs-theme="dark"] .callcenter-results-count,
html[data-bs-theme="dark"] .callcenter-customer-email,
html[data-bs-theme="dark"] .callcenter-empty-state,
html[data-bs-theme="dark"] .dashboard-user-details p,
html[data-bs-theme="dark"] .dashboard-panel-heading p,
html[data-bs-theme="dark"] .dashboard-empty-tab {
  color: #94a3b8;
}
html[data-bs-theme="dark"] .callcenter-field .form-control {
  background-color: #16213a;
  border-color: #334155;
  color: #e2e8f0;
}
html[data-bs-theme="dark"] .callcenter-table thead th,
html[data-bs-theme="dark"] .dashboard-table {
  border-color: #334155;
}
html[data-bs-theme="dark"] .callcenter-table tbody td,
html[data-bs-theme="dark"] .dashboard-table tbody td {
  color: #cbd5e1;
  border-color: #263548;
}
html[data-bs-theme="dark"] .dashboard-pagination a {
  background: #1e293b;
  border-color: #334155;
  color: #94a3b8;
}
html[data-bs-theme="dark"] .dashboard-pagination a.active,
html[data-bs-theme="dark"] .dashboard-pagination a:hover {
  color: #ffffff;
  background: var(--primary);
  border-color: var(--primary);
}
html[data-bs-theme="dark"] .dashboard-pagination span.disabled {
  background: #16213a;
  border-color: #334155;
  color: #475569;
}
html[data-bs-theme="dark"] .dashboard-pagination-summary {
  color: #94a3b8;
}
html[data-bs-theme="dark"] .dashboard-pagination-size label {
  color: #94a3b8;
}
html[data-bs-theme="dark"] .dashboard-card-toggle {
  color: #6cb2f2;
}
html[data-bs-theme="dark"] .dashboard-card-toggle:focus-visible {
  outline-color: #6cb2f2;
}
@media (max-width: 767.98px) {
  html[data-bs-theme="dark"] .table-cards > tbody > tr:not([hidden]) {
    background: #162235;
    border-color: #334155;
  }
  html[data-bs-theme="dark"] .table-cards > tbody > tr.dashboard-journey-details:not([hidden]) {
    background: #162235;
  }
  html[data-bs-theme="dark"] .table-cards > tbody > tr > td + td {
    border-top-color: #263548;
  }
  html[data-bs-theme="dark"] .table-cards > tbody > tr > td[data-label]::before {
    color: #94a3b8;
  }
  html[data-bs-theme="dark"] .table-cards .dashboard-details-table tbody tr + tr {
    border-top-color: #263548;
  }
}

/* Indicadores > Jornada longa: ações Bloquear IMEI / Bloquear BU como ícones (ver indicators-long-journey.js). */
.indicator-block-icon,
.indicator-blocked-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.4rem;
  font-size: 0.95rem;
}
.indicator-block-icon {
  border: 1px solid #dc3545;
  background: transparent;
  color: #dc3545;
  cursor: pointer;
  transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}
.indicator-block-icon:hover:not(:disabled) {
  background: #dc3545;
  color: #ffffff;
}
.indicator-block-icon:focus-visible {
  outline: 2px solid #1d5fa8;
  outline-offset: 2px;
}
.indicator-block-icon:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.indicator-blocked-icon {
  background: #fde8ea;
  color: #b42332;
}
.dashboard-table tbody td[data-label="Bloquear IMEI"],
.dashboard-table tbody td[data-label="Bloquear BU"] {
  text-align: center;
  white-space: nowrap;
}
html[data-bs-theme="dark"] .indicator-block-icon {
  border-color: #f07a85;
  color: #f07a85;
}
html[data-bs-theme="dark"] .indicator-block-icon:hover:not(:disabled) {
  background: #f07a85;
  color: #1e293b;
}
html[data-bs-theme="dark"] .indicator-block-icon:focus-visible {
  outline-color: #6cb2f2;
}
html[data-bs-theme="dark"] .indicator-blocked-icon {
  background: rgba(240, 122, 133, 0.18);
  color: #f07a85;
}

/* Indicadores > Emergenciais: quadro "Resumo por tipo" é estreito (coluna lateral), então não herda o
   min-width de 800px das tabelas grandes (.dashboard-table) — senão Estações/Alertas saem da tela e aparece rolagem. */
.dashboard-table.indicator-summary-table {
  min-width: 0;
  width: 100%;
}
.indicator-summary-table thead th:not(:first-child),
.indicator-summary-table td:not(:first-child) {
  width: 1%;
  white-space: nowrap;
}
.indicator-summary-table .dashboard-status {
  white-space: normal;
}

/* Indicadores > Jornada longa: Id Usuário como texto + ícones copiar / dados do cliente na mesma linha. */
.indicator-user-cell {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.indicator-user-cell .dashboard-edit-icon {
  margin-left: 0.15rem;
}