:root {
  /* Manter compatibilidade com cores antigas durante transição */
  --gray-border: var(--color-neutral-200);
  --font-family: var(--font-family-primary);
  --font-weight: var(--font-weight-normal);
  --font-style: normal;
  --font-size: var(--font-size-base);

  /* ===================================
       BOOTSTRAP THEME CUSTOMIZATION
       Customizar Bootstrap via CSS variables
       =================================== */

  /* ===================================
       BOOTSTRAP PRIMARY COLORS - VERDE BEBOP
       =================================== */

  /* Primary Colors - Verde Bebop */
  --bs-primary: #21fe33;
  --bs-primary-rgb: 33, 254, 51;

  /* Primary Button States */
  --bs-btn-primary-bg: #21fe33;
  --bs-btn-primary-border-color: #21fe33;
  --bs-btn-primary-color: #000000;
  --bs-btn-primary-hover-bg: #1ee62e;
  --bs-btn-primary-hover-border-color: #1ee62e;
  --bs-btn-primary-hover-color: #000000; /* Texto preto no hover */
  --bs-btn-primary-focus-bg: #1ee62e;
  --bs-btn-primary-focus-border-color: #1ee62e;
  --bs-btn-primary-focus-color: #000000; /* Texto preto no focus */
  --bs-btn-primary-active-bg: #1bd429;
  --bs-btn-primary-active-border-color: #1bd429;
  --bs-btn-primary-active-color: #000000; /* Texto preto no active */
  --bs-btn-primary-disabled-bg: #21fe33;
  --bs-btn-primary-disabled-border-color: #21fe33;
  --bs-btn-primary-disabled-color: #000000; /* Texto preto no disabled */

  /* Primary Text & Background */
  --bs-primary-text-emphasis: #21fe33;
  --bs-primary-bg-subtle: rgba(33, 254, 51, 0.1);
  --bs-primary-border-subtle: rgba(33, 254, 51, 0.2);

  /* ===================================
       BOOTSTRAP SUCCESS COLORS - VERDE BEBOP
       =================================== */

  /* Success Colors - Verde diferente do primary */
  --bs-success: #10b981; /* Verde mais escuro e diferente */
  --bs-success-rgb: 16, 185, 129;

  /* Success Button States */
  --bs-btn-success-bg: #10b981;
  --bs-btn-success-border-color: #10b981;
  --bs-btn-success-color: #000000;
  --bs-btn-success-hover-bg: #059669;
  --bs-btn-success-hover-border-color: #059669;
  --bs-btn-success-hover-color: #000000;

  /* Success Text & Background */
  --bs-success-text-emphasis: #10b981;
  --bs-success-bg-subtle: rgba(16, 185, 129, 0.1);
  --bs-success-border-subtle: rgba(16, 185, 129, 0.2);

  /* ===================================
       BOOTSTRAP SECONDARY & NEUTRAL COLORS
       =================================== */

  /* Secondary Colors - Cinza neutro elegante */
  --bs-secondary: #6c757d;
  --bs-secondary-rgb: 108, 117, 125;

  /* Secondary Button States */
  --bs-btn-secondary-bg: #6c757d;
  --bs-btn-secondary-border-color: #6c757d;
  --bs-btn-secondary-color: #ffffff;
  --bs-btn-secondary-hover-bg: #5a6268;
  --bs-btn-secondary-hover-border-color: #5a6268;
  --bs-btn-secondary-hover-color: #ffffff;
  --bs-btn-secondary-focus-bg: #5a6268;
  --bs-btn-secondary-focus-border-color: #5a6268;
  --bs-btn-secondary-focus-color: #ffffff;
  --bs-btn-secondary-active-bg: #545b62;
  --bs-btn-secondary-active-border-color: #545b62;
  --bs-btn-secondary-active-color: #ffffff;

  /* Secondary Text & Background */
  --bs-secondary-text-emphasis: #6c757d;
  --bs-secondary-bg-subtle: rgba(108, 117, 125, 0.1);
  --bs-secondary-border-subtle: rgba(108, 117, 125, 0.2);

  /* ===================================
       BOOTSTRAP SUCCESS COLORS - VERDE BEBOP
       =================================== */

  /* Success Colors - Verde diferente do primary */
  --bs-success: #10b981; /* Verde mais escuro e diferente */
  --bs-success-rgb: 16, 185, 129;

  /* Success Button States */
  --bs-btn-success-bg: #10b981;
  --bs-btn-success-border-color: #10b981;
  --bs-btn-success-color: #000000;
  --bs-btn-success-hover-bg: #059669;
  --bs-btn-success-hover-border-color: #059669;
  --bs-btn-success-hover-color: #000000;
  --bs-btn-success-focus-bg: #059669;
  --bs-btn-success-focus-border-color: #059669;
  --bs-btn-success-focus-color: #000000;
  --bs-btn-success-active-bg: #047857;
  --bs-btn-success-active-border-color: #047857;
  --bs-btn-success-active-color: #000000;

  /* Success Text & Background */
  --bs-success-text-emphasis: #10b981;
  --bs-success-bg-subtle: rgba(16, 185, 129, 0.1);
  --bs-success-border-subtle: rgba(16, 185, 129, 0.2);

  /* ===================================
       BOOTSTRAP WARNING COLORS - VERDE BEBOP SUAVE
       =================================== */

  /* Warning Colors - Amarelo padrão Bootstrap */
  --bs-warning: #ffc107; /* Amarelo padrão Bootstrap */
  --bs-warning-rgb: 255, 193, 7;

  /* Warning Button States */
  --bs-btn-warning-bg: #ffc107;
  --bs-btn-warning-border-color: #ffc107;
  --bs-btn-warning-color: #000000; /* Texto preto para contraste */
  --bs-btn-warning-hover-bg: #ffca2c;
  --bs-btn-warning-hover-border-color: #ffca2c;
  --bs-btn-warning-hover-color: #000000;
  --bs-btn-warning-focus-bg: #ffca2c;
  --bs-btn-warning-focus-border-color: #ffca2c;
  --bs-btn-warning-focus-color: #000000;
  --bs-btn-warning-active-bg: #ffcd39;
  --bs-btn-warning-active-border-color: #ffcd39;
  --bs-btn-warning-active-color: #000000;

  /* Warning Text & Background */
  --bs-warning-text-emphasis: #ffc107;
  --bs-warning-bg-subtle: rgba(255, 193, 7, 0.1);
  --bs-warning-border-subtle: rgba(255, 193, 7, 0.2);

  /* ===================================
       BOOTSTRAP DANGER COLORS - VERMELHO SUAVE
       =================================== */

  /* Danger Colors - Vermelho padrão Bootstrap */
  --bs-danger: #dc3545; /* Vermelho padrão Bootstrap */
  --bs-danger-rgb: 220, 53, 69;

  /* Danger Button States */
  --bs-btn-danger-bg: #dc3545;
  --bs-btn-danger-border-color: #dc3545;
  --bs-btn-danger-color: #ffffff;
  --bs-btn-danger-hover-bg: #bb2d3b;
  --bs-btn-danger-hover-border-color: #bb2d3b;
  --bs-btn-danger-hover-color: #ffffff;
  --bs-btn-danger-focus-bg: #bb2d3b;
  --bs-btn-danger-focus-border-color: #bb2d3b;
  --bs-btn-danger-focus-color: #ffffff;
  --bs-btn-danger-active-bg: #b02a37;
  --bs-btn-danger-active-border-color: #b02a37;
  --bs-btn-danger-active-color: #ffffff;

  /* Danger Text & Background */
  --bs-danger-text-emphasis: #dc3545;
  --bs-danger-bg-subtle: rgba(220, 53, 69, 0.1);
  --bs-danger-border-subtle: rgba(220, 53, 69, 0.2);

  /* ===================================
       BOOTSTRAP INFO COLORS - AZUL SUAVE
       =================================== */

  /* Info Colors - Azul suave, não muito vibrante */
  --bs-info: #3b82f6; /* Azul mais suave que o padrão */
  --bs-info-rgb: 59, 130, 246;

  /* Info Button States */
  --bs-btn-info-bg: #3b82f6;
  --bs-btn-info-border-color: #3b82f6;
  --bs-btn-info-color: #ffffff;
  --bs-btn-info-hover-bg: #2563eb;
  --bs-btn-info-hover-border-color: #2563eb;
  --bs-btn-info-hover-color: #ffffff;
  --bs-btn-info-focus-bg: #2563eb;
  --bs-btn-info-focus-border-color: #2563eb;
  --bs-btn-info-focus-color: #ffffff;
  --bs-btn-info-active-bg: #1d4ed8;
  --bs-btn-info-active-border-color: #1d4ed8;
  --bs-btn-info-active-color: #ffffff;

  /* Info Text & Background */
  --bs-info-text-emphasis: #3b82f6;
  --bs-info-bg-subtle: rgba(59, 130, 246, 0.1);
  --bs-info-border-subtle: rgba(59, 130, 246, 0.2);

  /* ===================================
       BOOTSTRAP LIGHT & DARK COLORS
       =================================== */

  /* Light Colors - Branco suave */
  --bs-light: #f8f9fa;
  --bs-light-rgb: 248, 249, 250;

  /* Light Button States */
  --bs-btn-light-bg: #f8f9fa;
  --bs-btn-light-border-color: #f8f9fa;
  --bs-btn-light-color: #000000; /* Texto preto para contraste */
  --bs-btn-light-hover-bg: #e9ecef;
  --bs-btn-light-hover-border-color: #e9ecef;
  --bs-btn-light-hover-color: #000000;
  --bs-btn-light-focus-bg: #e9ecef;
  --bs-btn-light-focus-border-color: #e9ecef;
  --bs-btn-light-focus-color: #000000;
  --bs-btn-light-active-bg: #dee2e6;
  --bs-btn-light-active-border-color: #dee2e6;
  --bs-btn-light-active-color: #000000;

  /* Light Text & Background */
  --bs-light-text-emphasis: #f8f9fa;
  --bs-light-bg-subtle: rgba(248, 249, 250, 0.1);
  --bs-light-border-subtle: rgba(248, 249, 250, 0.2);

  /* Dark Colors - Preto elegante */
  --bs-dark: #212529;
  --bs-dark-rgb: 33, 37, 41;

  /* Dark Button States */
  --bs-btn-dark-bg: #212529;
  --bs-btn-dark-border-color: #212529;
  --bs-btn-dark-color: #ffffff;
  --bs-btn-dark-hover-bg: #1a1d20;
  --bs-btn-dark-hover-border-color: #1a1d20;
  --bs-btn-dark-hover-color: #ffffff;
  --bs-btn-dark-focus-bg: #1a1d20;
  --bs-btn-dark-focus-border-color: #1a1d20;
  --bs-btn-dark-focus-color: #ffffff;
  --bs-btn-dark-active-bg: #141618;
  --bs-btn-dark-active-border-color: #141618;
  --bs-btn-dark-active-color: #ffffff;

  /* Dark Text & Background */
  --bs-dark-text-emphasis: #212529;
  --bs-dark-bg-subtle: rgba(33, 37, 41, 0.1);
  --bs-dark-border-subtle: rgba(33, 37, 41, 0.2);

  /* ===================================
       BOOTSTRAP BUTTON CUSTOMIZATIONS
       =================================== */

  /* Button customizations */
  --bs-btn-border-radius: 0.5rem;
  --bs-btn-font-weight: 500;

  /* Focus states */
  --bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(33, 254, 51, 0.25);

  /* ===================================
       BOOTSTRAP 5.2.3 COMPATIBILITY
       CSS Variables não suportadas, usando CSS customizado
       =================================== */

  /* Primary Colors - Verde Bebop */
  --bs-primary: #21fe33;
  --bs-primary-rgb: 33, 254, 51;

  /* Success Colors - Verde diferente do primary */
  --bs-success: #10b981;
  --bs-success-rgb: 16, 185, 129;

  /* Warning Colors - Amarelo padrão Bootstrap */
  --bs-warning: #ffc107;
  --bs-warning-rgb: 255, 193, 7;

  /* Danger Colors - Vermelho padrão Bootstrap */
  --bs-danger: #dc3545;
  --bs-danger-rgb: 220, 53, 69;

  /* Info Colors - Azul Suave */
  --bs-info: #3b82f6;
  --bs-info-rgb: 59, 130, 246;

  /* Secondary Colors */
  --bs-secondary: #6c757d;
  --bs-secondary-rgb: 108, 117, 125;

  /* Light & Dark */
  --bs-light: #f8f9fa;
  --bs-light-rgb: 248, 249, 250;
  --bs-dark: #212529;
  --bs-dark-rgb: 33, 37, 41;

  /* ===================================
       BOOTSTRAP OUTLINE BUTTON STATES
       =================================== */

  /* Primary Outline */
  --bs-btn-outline-primary-color: #21fe33;
  --bs-btn-outline-primary-border-color: #21fe33;
  --bs-btn-outline-primary-hover-color: #ffffff;
  --bs-btn-outline-primary-hover-bg: #21fe33;
  --bs-btn-outline-primary-hover-border-color: #21fe33;
  --bs-btn-outline-primary-focus-color: #ffffff;
  --bs-btn-outline-primary-focus-bg: #21fe33;
  --bs-btn-outline-primary-focus-border-color: #21fe33;
  --bs-btn-outline-primary-active-color: #ffffff;
  --bs-btn-outline-primary-active-bg: #1bd429;
  --bs-btn-outline-primary-active-border-color: #1bd429;

  /* Secondary Outline */
  --bs-btn-outline-secondary-color: #6c757d;
  --bs-btn-outline-secondary-border-color: #6c757d;
  --bs-btn-outline-secondary-hover-color: #ffffff;
  --bs-btn-outline-secondary-hover-bg: #6c757d;
  --bs-btn-outline-secondary-hover-border-color: #6c757d;
  --bs-btn-outline-secondary-focus-color: #ffffff;
  --bs-btn-outline-secondary-focus-bg: #6c757d;
  --bs-btn-outline-secondary-focus-border-color: #6c757d;
  --bs-btn-outline-secondary-active-color: #ffffff;
  --bs-btn-outline-secondary-active-bg: #545b62;
  --bs-btn-outline-secondary-active-border-color: #545b62;

  /* Success Outline */
  --bs-btn-outline-success-color: #21fe33;
  --bs-btn-outline-success-border-color: #21fe33;
  --bs-btn-outline-success-hover-color: #ffffff;
  --bs-btn-outline-success-hover-bg: #21fe33;
  --bs-btn-outline-success-hover-border-color: #21fe33;
  --bs-btn-outline-success-focus-color: #ffffff;
  --bs-btn-outline-success-focus-bg: #21fe33;
  --bs-btn-outline-success-focus-border-color: #21fe33;
  --bs-btn-outline-success-active-color: #ffffff;
  --bs-btn-outline-success-active-bg: #1bd429;
  --bs-btn-outline-success-active-border-color: #1bd429;

  /* Warning Outline */
  --bs-btn-outline-warning-color: #4ade80;
  --bs-btn-outline-warning-border-color: #4ade80;
  --bs-btn-outline-warning-hover-color: #000000;
  --bs-btn-outline-warning-hover-bg: #4ade80;
  --bs-btn-outline-warning-hover-border-color: #4ade80;
  --bs-btn-outline-warning-focus-color: #000000;
  --bs-btn-outline-warning-focus-bg: #4ade80;
  --bs-btn-outline-warning-focus-border-color: #4ade80;
  --bs-btn-outline-warning-active-color: #000000;
  --bs-btn-outline-warning-active-bg: #16a34a;
  --bs-btn-outline-warning-active-border-color: #16a34a;

  /* Danger Outline */
  --bs-btn-outline-danger-color: #ef4444;
  --bs-btn-outline-danger-border-color: #ef4444;
  --bs-btn-outline-danger-hover-color: #ffffff;
  --bs-btn-outline-danger-hover-bg: #ef4444;
  --bs-btn-outline-danger-hover-border-color: #ef4444;
  --bs-btn-outline-danger-focus-color: #ffffff;
  --bs-btn-outline-danger-focus-bg: #ef4444;
  --bs-btn-outline-danger-focus-border-color: #ef4444;
  --bs-btn-outline-danger-active-color: #ffffff;
  --bs-btn-outline-danger-active-bg: #b91c1c;
  --bs-btn-outline-danger-active-border-color: #b91c1c;

  /* Info Outline */
  --bs-btn-outline-info-color: #3b82f6;
  --bs-btn-outline-info-border-color: #3b82f6;
  --bs-btn-outline-info-hover-color: #ffffff;
  --bs-btn-outline-info-hover-bg: #3b82f6;
  --bs-btn-outline-info-hover-border-color: #3b82f6;
  --bs-btn-outline-info-focus-color: #ffffff;
  --bs-btn-outline-info-focus-bg: #3b82f6;
  --bs-btn-outline-info-focus-border-color: #3b82f6;
  --bs-btn-outline-info-active-color: #ffffff;
  --bs-btn-outline-info-active-bg: #1d4ed8;
  --bs-btn-outline-info-active-border-color: #1d4ed8;

  /* Light Outline */
  --bs-btn-outline-light-color: #f8f9fa;
  --bs-btn-outline-light-border-color: #f8f9fa;
  --bs-btn-outline-light-hover-color: #000000;
  --bs-btn-outline-light-hover-bg: #f8f9fa;
  --bs-btn-outline-light-hover-border-color: #f8f9fa;
  --bs-btn-outline-light-focus-color: #000000;
  --bs-btn-outline-light-focus-bg: #f8f9fa;
  --bs-btn-outline-light-focus-border-color: #f8f9fa;
  --bs-btn-outline-light-active-color: #000000;
  --bs-btn-outline-light-active-bg: #dee2e6;
  --bs-btn-outline-light-active-border-color: #dee2e6;

  /* Dark Outline */
  --bs-btn-outline-dark-color: #212529;
  --bs-btn-outline-dark-border-color: #212529;
  --bs-btn-outline-dark-hover-color: #ffffff;
  --bs-btn-outline-dark-hover-bg: #212529;
  --bs-btn-outline-dark-hover-border-color: #212529;
  --bs-btn-outline-dark-focus-color: #ffffff;
  --bs-btn-outline-dark-focus-bg: #212529;
  --bs-btn-outline-dark-focus-border-color: #212529;
  --bs-btn-outline-dark-active-color: #ffffff;
  --bs-btn-outline-dark-active-bg: #141618;
  --bs-btn-outline-dark-active-border-color: #141618;

  /* ===================================
       BOOTSTRAP COMPONENT COLORS
       =================================== */

  /* Link colors */
  --bs-link-color: #21fe33;
  --bs-link-hover-color: #1ee62e;
  --bs-link-hover-color-rgb: 30, 230, 46;

  /* Form control focus */
  --bs-form-control-focus-border-color: #21fe33;
  --bs-form-control-focus-box-shadow: 0 0 0 0.25rem rgba(33, 254, 51, 0.25);

  /* Progress bars */
  --bs-progress-bar-bg: #21fe33;

  /* Spinners */
  --bs-spinner-border-color: #21fe33;

  /* Radzen colors - usando novo sistema */
  --rz-primary: var(--color-primary-600) !important;
  --rz-secondary: var(--color-secondary-600);
  --rz-success: var(--color-success-600);
  --rz-info: var(--color-info-600);
  --rz-warning: var(--color-warning-600);
  --rz-danger: var(--color-error-600);
}

body {
  background-color: var(--color-neutral-50) !important;
}

.text-custom-primary {
  --bs-text-opacity: 1;
  color: var(--color-primary-500) !important;
}

/* ===================================
   BOTÕES - REMOVIDO CSS CUSTOMIZADO
   =================================== 
   
   ❌ REMOVIDO: Classes .btn-custom-* que causavam confusão
   ✅ AGORA: Use sempre classes Bootstrap padrão:
   
   - <button class="btn btn-primary"> (verde Bebop)
   - <button class="btn btn-outline-primary"> (verde Bebop)
   - <button class="btn btn-success"> (verde Bebop)
   
   As cores são aplicadas via CSS Variables em :root
   =================================== */
/* tabs tela configuracoes */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  color: var(--bs-white);
  background-color: var(--color-primary-500) !important;
}

.nav .nav-link {
  color: var(--color-primary-500);
}

body {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-normal);
  font-style: normal;
  font-size: var(--font-size-base);
  background-color: var(--color-neutral-50);
}

h1,
h2,
h3,
h4,
h5 {
  font-weight: bold;
}

nav.bg-theme {
  background-color: var(--color-primary-600) !important;
  height: 4.688rem;
}

.navbar-brand img {
  height: 2.5rem;
}

.nav-item a {
  color: var(--bs-white);
  text-decoration: none;
}

.nav-item .dropdown-item {
  color: var(--bs-dark);
}

.nav-item i {
  font-size: 18px;
  cursor: pointer;
}

.nav-item i.emp,
.nav-item span {
  color: var(--bs-white);
}

.navbar-dark .navbar-nav .nav-link {
  color: var(--bs-white);
}

.navbar-dark .navbar-nav .nav-link:hover {
  opacity: 0.7;
}

.navbar-dark .navbar-nav .nav-link.active {
  font-weight: bold;
}

@media only screen and (max-width: 767px) {
  .navbar-dark .navbar-nav {
    font-size: 1.125rem;
  }
}

@media (max-width: 991.98px) {
  .offcanvas-collapse {
    position: fixed;
    top: 4.688rem; /* Height of navbar */
    bottom: 0;
    left: 100%;
    width: 100%;
    padding-right: 1rem;
    padding-left: 1rem;
    overflow-y: auto;
    visibility: hidden;
    background-color: var(--color-primary-500);
    transition: transform 0.3s ease-in-out, visibility 0.3s ease-in-out;
  }

  .offcanvas-collapse.open {
    visibility: visible;
    transform: translateX(-100%);
  }
}

.nav-scroller {
  position: relative;
  z-index: 2;
  height: 2.75rem;
  overflow-y: hidden;
}

.nav-scroller .nav {
  display: flex;
  flex-wrap: nowrap;
  padding-bottom: 1rem;
  margin-top: -1px;
  overflow-x: auto;
  color: rgba(255, 255, 255, 0.75);
  text-align: center;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

.nav-underline .nav-link {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 0.875rem;
  color: #6c757d;
}

.nav-underline .nav-link:hover {
  color: #007bff;
}

.nav-underline .active {
  font-weight: 500;
  color: #343a40;
}

.content {
  margin-top: 10px;
  padding: 0px 20px 0px 20px;
}

/* telas que usam lista */
.list-actions {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}

.fab {
  bottom: 20px;
  right: 20px;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  background: linear-gradient(135deg, #21fe33 0%, #1ee62e 100%);
  border: none;
  border-radius: 50%;
  color: white;
  transition: all 0.3s ease;
}

.fab:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 15px rgba(33, 254, 51, 0.4);
  background: linear-gradient(135deg, #1ee62e 0%, #1bd429 100%);
}

.fab:active {
  transform: scale(0.95);
}

.fab i {
  font-size: 1.5rem;
}

.subnav {
  position: fixed;
  top: 75px;
  left: 0;
  right: 0;
  z-index: 1020;
}

.content-subnav {
  padding-top: 140px;
}

.form-subnav {
  width: 50%;
}

@media only screen and (max-width: 767px) {
  .form-subnav {
    width: 100%;
  }
}

.table th {
  font-size: 0.9rem;
}

.rz-form-field-label {
  font-size: 0.85rem !important;
}

.blazor-error-boundary {
  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=)
      no-repeat 1rem/1.8rem,
    #b32121;
  padding: 1rem 1rem 1rem 3.7rem;
  color: white;
}

.blazor-error-boundary::after {
  content: "An error has occurred.";
}

.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Esmaecimento */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999; /* Ficar acima de tudo */
}

/* ===================================
   BOOTSTRAP 5.2.3 CUSTOMIZATION
   CSS customizado para sobrescrever cores padrão
   =================================== */

/* Primary Buttons - Verde Bebop */
.btn-primary {
  background-color: #21fe33 !important;
  border-color: #21fe33 !important;
  color: #000 !important;
}

.btn-primary:hover {
  background-color: #1ee62e !important;
  border-color: #1ee62e !important;
  color: #000000 !important;
}

.btn-primary:focus {
  background-color: #1ee62e !important;
  border-color: #1ee62e !important;
  color: #000000 !important;
  box-shadow: 0 0 0 0.25rem rgba(33, 254, 51, 0.25) !important;
}

/* ===================================
   UTILITÁRIOS DE GRID (apoio a badges)
   =================================== */
/* Evita que elementos dentro de células grid estiquem a largura */
.bebop-grid-self-start {
  justify-self: start;
  width: fit-content;
}

/* Item da grid de tabela (celular/desktop) iniciado na coluna de conteúdo */
.bebop-grid-cell-start {
  grid-column: 2;
  justify-self: start;
  align-self: start;
}

/* Garantir que badges dentro do contêiner não estiquem */
.bebop-grid-cell-start > .badge {
  width: fit-content;
}

.btn-primary:active,
.btn-primary.active {
  background-color: #1bd429 !important;
  border-color: #1bd429 !important;
  color: #000000 !important;
}

/* Success Buttons - Verde Bebop */
.btn-success {
  background-color: #21fe33 !important;
  border-color: #21fe33 !important;
  color: #000000 !important;
}

.btn-success:hover {
  background-color: #1ee62e !important;
  border-color: #1ee62e !important;
  color: #000000 !important;
}

.btn-success:focus {
  background-color: #1ee62e !important;
  border-color: #1ee62e !important;
  color: #000000 !important;
  box-shadow: 0 0 0 0.25rem rgba(33, 254, 51, 0.25) !important;
}

.btn-success:active,
.btn-success.active {
  background-color: #1bd429 !important;
  border-color: #1bd429 !important;
  color: #000000 !important;
}

/* Warning Buttons - Amarelo (Bootstrap-like) */
.btn-warning {
  background-color: #ffc107 !important;
  border-color: #ffc107 !important;
  color: #000000 !important;
}

.btn-warning:hover {
  background-color: #ffca2c !important;
  border-color: #ffca2c !important;
  color: #000000 !important;
}

.btn-warning:focus {
  background-color: #ffca2c !important;
  border-color: #ffca2c !important;
  color: #000000 !important;
  box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.25) !important;
}

.btn-warning:active,
.btn-warning.active {
  background-color: #ffcd39 !important;
  border-color: #ffcd39 !important;
  color: #000000 !important;
}

/* Danger Buttons - Vermelho Suave */
.btn-danger {
  background-color: #ef4444 !important;
  border-color: #ef4444 !important;
  color: #ffffff !important;
}

.btn-danger:hover {
  background-color: #dc2626 !important;
  border-color: #dc2626 !important;
  color: #ffffff !important;
}

.btn-danger:focus {
  background-color: #dc2626 !important;
  border-color: #dc2626 !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 0.25rem rgba(239, 68, 68, 0.25) !important;
}

.btn-danger:active,
.btn-danger.active {
  background-color: #b91c1c !important;
  border-color: #b91c1c !important;
  color: #ffffff !important;
}

/* Info Buttons - Azul Suave */
.btn-info {
  background-color: #3b82f6 !important;
  border-color: #3b82f6 !important;
  color: #ffffff !important;
}

.btn-info:hover {
  background-color: #2563eb !important;
  border-color: #2563eb !important;
  color: #ffffff !important;
}

.btn-info:focus {
  background-color: #2563eb !important;
  border-color: #2563eb !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 0.25rem rgba(59, 130, 246, 0.25) !important;
}

.btn-info:active,
.btn-info.active {
  background-color: #1d4ed8 !important;
  border-color: #1d4ed8 !important;
  color: #ffffff !important;
}

/* Outline Buttons */
.btn-outline-primary {
  color: #21fe33 !important;
  border-color: #21fe33 !important;
  background-color: transparent !important;
}

.btn-outline-primary:hover {
  color: #ffffff !important;
  background-color: #21fe33 !important;
  border-color: #21fe33 !important;
}

.btn-outline-success {
  color: #21fe33 !important;
  border-color: #21fe33 !important;
  background-color: transparent !important;
}

.btn-outline-success:hover {
  color: #ffffff !important;
  background-color: #21fe33 !important;
  border-color: #21fe33 !important;
}

.btn-outline-warning {
  color: #ffc107 !important;
  border-color: #ffc107 !important;
  background-color: transparent !important;
}

.btn-outline-warning:hover {
  color: #000000 !important;
  background-color: #ffc107 !important;
  border-color: #ffc107 !important;
}

.btn-outline-danger {
  color: #ef4444 !important;
  border-color: #ef4444 !important;
  background-color: transparent !important;
}

.btn-outline-danger:hover {
  color: #ffffff !important;
  background-color: #ef4444 !important;
  border-color: #ef4444 !important;
}

.btn-outline-info {
  color: #3b82f6 !important;
  border-color: #3b82f6 !important;
  background-color: transparent !important;
}

.btn-outline-info:hover {
  color: #ffffff !important;
  background-color: #3b82f6 !important;
  border-color: #3b82f6 !important;
}

.btn-outline-dark {
  color: #212529 !important;
  border-color: #212529 !important;
  background-color: transparent !important;
}

.btn-outline-dark:hover {
  color: #ffffff !important;
  background-color: #212529 !important;
  border-color: #212529 !important;
}

.btn-outline-dark:focus {
  color: #ffffff !important;
  background-color: #212529 !important;
  border-color: #212529 !important;
  box-shadow: 0 0 0 0.25rem rgba(33, 37, 41, 0.25) !important;
}

.btn-outline-dark:active,
.btn-outline-dark.active {
  color: #ffffff !important;
  background-color: #141618 !important;
  border-color: #141618 !important;
}

/* Text Colors */
.text-primary {
  color: #21fe33 !important;
}

.text-success {
  color: #21fe33 !important;
}

.text-warning {
  color: #4ade80 !important;
}

.text-danger {
  color: #ef4444 !important;
}

.text-info {
  color: #3b82f6 !important;
}

/* Background Colors */
.bg-primary {
  background-color: #21fe33 !important;
}

.bg-success {
  background-color: #21fe33 !important;
}

.bg-warning {
  background-color: #ffc107 !important;
  color: #000000 !important;
}

.bg-danger {
  background-color: #ef4444 !important;
}

.bg-info {
  background-color: #3b82f6 !important;
}

/* Form Controls Focus */
.form-control:focus,
.form-select:focus {
  border-color: #21fe33 !important;
  box-shadow: 0 0 0 0.25rem rgba(33, 254, 51, 0.25) !important;
}

/* Links */
.link-primary {
  color: #21fe33 !important;
}

.link-primary:hover {
  color: #1ee62e !important;
}

/* ===================================
   BEBOP MODERNIZAÇÃO - FASE 1
   Telas de CRUD - Layout Moderno
   =================================== */

.bebop-page-subtitle {
  color: var(--color-neutral-600, #6b7280);
  font-size: 1rem;
  margin-bottom: 0;
}

/* Grid moderno para cards */
.bebop-fornecedores-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 24px;
  padding: 0;
}

/* Cards modernos */
.bebop-fornecedor-card {
  background: white;
  border-radius: 16px;
  padding: 24px;
  border: 1px solid var(--color-neutral-200, #e5e7eb);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.bebop-fornecedor-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(33, 254, 51, 0.15), 0 3px 6px rgba(0, 0, 0, 0.1);
  border-color: var(--color-primary-300, rgba(33, 254, 51, 0.3));
}

/* Barra verde sutil no topo do card */
.bebop-fornecedor-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--color-primary-500, #21fe33),
    var(--color-primary-400, rgba(33, 254, 51, 0.8))
  );
  opacity: 0;
  transition: opacity 0.3s ease;
}

.bebop-fornecedor-card:hover::before {
  opacity: 1;
}

/* Header do card com avatar */
.bebop-card-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.bebop-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(
    135deg,
    var(--color-primary-500, #21fe33),
    var(--color-primary-600, rgba(33, 254, 51, 0.9))
  );
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
  margin-right: 16px;
  flex-shrink: 0;
  text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(33, 254, 51, 0.3);
}

/* Conteúdo do card */
.bebop-card-content {
  flex: 1;
}

.bebop-card-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-neutral-900, #111827);
  margin-bottom: 4px;
  line-height: 1.3;
}

.bebop-card-subtitle {
  color: var(--color-neutral-600, #6b7280);
  font-size: 0.95rem;
  margin-bottom: 8px;
}

.bebop-card-email {
  color: var(--color-neutral-500, #9ca3af);
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Status badge moderno */
.bebop-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 12px;
}

.bebop-status-ativo {
  background: rgba(33, 254, 51, 0.1);
  color: var(--color-primary-700, rgba(33, 254, 51, 0.8));
  border: 1px solid var(--color-primary-200, rgba(33, 254, 51, 0.2));
}

.bebop-status-inativo {
  background: rgba(156, 163, 175, 0.1);
  color: var(--color-neutral-700, #374151);
  border: 1px solid var(--color-neutral-300, #d1d5db);
}

.bebop-status-pendente {
  background: rgba(245, 158, 11, 0.1);
  color: var(--color-warning-700, #a16207);
  border: 1px solid var(--color-warning-300, #fcd34d);
}

/* Ações do card */
.bebop-card-actions {
  display: flex;
  gap: 8px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--color-neutral-100, #f3f4f6);
}

.bebop-action-btn {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--color-neutral-200, #e5e7eb);
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  cursor: pointer;
  font-size: 16px;
}

.bebop-action-btn:hover {
  background: var(--color-primary-50, rgba(33, 254, 51, 0.05));
  border-color: var(--color-primary-300, rgba(33, 254, 51, 0.3));
  transform: scale(1.05);
}

.bebop-action-btn.danger:hover {
  background: rgba(239, 68, 68, 0.05);
  border-color: rgba(239, 68, 68, 0.3);
  color: #dc2626;
}

/* Skeleton Loading */
.bebop-skeleton-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 24px;
  padding: 0;
}

.bebop-skeleton-card {
  background: white;
  border-radius: 16px;
  padding: 24px;
  border: 1px solid var(--color-neutral-200, #e5e7eb);
  animation: bebop-skeleton-pulse 1.5s ease-in-out infinite alternate;
}

.bebop-skeleton-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.bebop-skeleton-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-neutral-200, #e5e7eb);
  margin-right: 16px;
  flex-shrink: 0;
}

.bebop-skeleton-content {
  flex: 1;
}

.bebop-skeleton-line {
  height: 14px;
  background: linear-gradient(
    90deg,
    var(--color-neutral-200, #e5e7eb) 25%,
    var(--color-neutral-100, #f3f4f6) 50%,
    var(--color-neutral-200, #e5e7eb) 75%
  );
  background-size: 200% 100%;
  animation: bebop-skeleton-shimmer 1.5s infinite;
  border-radius: 8px;
  margin-bottom: 10px;
}

.bebop-skeleton-line.large {
  width: 80%;
  height: 18px;
}

.bebop-skeleton-line.medium {
  width: 60%;
}

.bebop-skeleton-line.small {
  width: 40%;
}

.bebop-skeleton-actions {
  display: flex;
  gap: 8px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--color-neutral-100, #f3f4f6);
}

.bebop-skeleton-action {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--color-neutral-200, #e5e7eb);
}

/* Animações do Skeleton */
@keyframes bebop-skeleton-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

@keyframes bebop-skeleton-pulse {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0.7;
  }
}

/* Skeleton Loading para Tabelas */
.bebop-table-skeleton-container {
  background: white;
  border-radius: 16px;
  border: 1px solid var(--color-neutral-200, #e5e7eb);
  overflow: hidden;
  animation: bebop-skeleton-pulse 1.5s ease-in-out infinite alternate;
}

.bebop-table-skeleton-header {
  background: var(--color-neutral-50, #f9fafb);
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-neutral-200, #e5e7eb);
}

.bebop-table-skeleton-header-row {
  display: grid;
  grid-template-columns: 2fr 2fr 1fr 1fr 1fr 1fr;
  gap: 20px;
  align-items: center;
}

.bebop-table-skeleton-header-cell {
  height: 16px;
  background: var(--color-neutral-200, #e5e7eb);
  border-radius: 6px;
  animation: bebop-skeleton-shimmer 1.5s infinite;
}

.bebop-table-skeleton-body {
  padding: 0;
}

.bebop-table-skeleton-row {
  display: grid;
  grid-template-columns: 2fr 2fr 1fr 1fr 1fr 1fr;
  gap: 20px;
  padding: 20px;
  align-items: center;
  border-bottom: 1px solid var(--color-neutral-100, #f3f4f6);
}

.bebop-table-skeleton-row:last-child {
  border-bottom: none;
}

.bebop-table-skeleton-cell {
  height: 14px;
  background: var(--color-neutral-200, #e5e7eb);
  border-radius: 6px;
  animation: bebop-skeleton-shimmer 1.5s infinite;
}

.bebop-table-skeleton-cell.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-neutral-200, #e5e7eb);
}

.bebop-table-skeleton-cell.title {
  width: 80%;
}

.bebop-table-skeleton-cell.subtitle {
  width: 60%;
}

.bebop-table-skeleton-cell.badge {
  width: 80px;
  height: 24px;
  border-radius: 12px;
}

.bebop-table-skeleton-cell.actions {
  display: flex;
  gap: 8px;
}

.bebop-table-skeleton-cell.action-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--color-neutral-200, #e5e7eb);
}

/* ===================================
   BEBOP TABELA MODERNA
   =================================== */

/* Controles integrados (busca + filtros) */
.bebop-controls-section {
  background: white;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 24px;
  border: 1px solid var(--color-neutral-200, #e5e7eb);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.bebop-search-bar {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.bebop-search-input {
  flex: 1;
  min-width: 250px;
  padding: 12px 16px;
  border: 1px solid var(--color-neutral-300, #d1d5db);
  border-radius: 8px;
  font-size: 14px;
  transition: border-color 0.2s ease;
}

.bebop-search-input:focus {
  outline: none;
  border-color: var(--color-primary-500, #21fe33);
  box-shadow: 0 0 0 3px rgba(33, 254, 51, 0.1);
}

.bebop-filter-btn {
  padding: 12px 16px;
  border: 1px solid var(--color-neutral-300, #d1d5db);
  border-radius: 8px;
  background: white;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.bebop-filter-btn:hover {
  background: var(--color-neutral-50, #f9fafb);
  border-color: var(--color-primary-300, rgba(33, 254, 51, 0.3));
}

/* Filtros em linha */
.bebop-filters-row {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 16px;
}

.bebop-filter-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bebop-filter-dropdown {
  min-width: 200px;
  padding: 10px 14px;
  border: 1px solid var(--color-neutral-300, #d1d5db);
  border-radius: 8px;
  font-size: 14px;
  transition: all 0.2s ease;
  background-color: white;
}

.bebop-filter-dropdown:focus {
  border-color: var(--color-primary-500, #21fe33);
  box-shadow: 0 0 0 3px rgba(33, 254, 51, 0.1);
  outline: none;
}

/* Filtros expandidos */
.bebop-filters-expanded {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--color-neutral-200, #e5e7eb);
}

.bebop-filters-expanded .form-label {
  font-size: 13px;
  color: var(--color-neutral-600, #6b7280);
  margin-bottom: 8px;
}

.bebop-filters-expanded .form-select {
  background-color: white;
  border: 1px solid var(--color-neutral-300, #d1d5db);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 14px;
  transition: all 0.2s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.bebop-filters-expanded .form-select:focus {
  border-color: var(--color-primary-500, #21fe33);
  box-shadow: 0 0 0 3px rgba(33, 254, 51, 0.1);
  outline: none;
}

.bebop-filters-expanded .btn-outline-secondary {
  border: 1px solid var(--color-neutral-300, #d1d5db);
  color: var(--color-neutral-700, #374151);
  background: white;
  transition: all 0.2s ease;
  font-weight: 500;
}

.bebop-filters-expanded .btn-outline-secondary:hover {
  background: var(--color-neutral-50, #f9fafb);
  border-color: var(--color-neutral-400, #9ca3af);
  color: var(--color-neutral-800, #1f2937);
}

.bebop-filters-expanded .btn-outline-secondary:active {
  background: var(--color-neutral-100, #f3f4f6);
  transform: translateY(1px);
}

.bebop-view-switcher {
  display: flex;
  background: var(--color-neutral-100, #f3f4f6);
  border-radius: 6px;
  padding: 3px;
}

.bebop-view-btn {
  padding: 8px 12px;
  border: none;
  background: transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--color-neutral-600, #6b7280);
}

.bebop-view-btn.active {
  background: white;
  color: var(--color-primary-600, rgba(33, 254, 51, 0.9));
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Container da tabela */
.bebop-table-container {
  background: white;
  border-radius: 12px;
  border: 1px solid var(--color-neutral-200, #e5e7eb);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* Tabela moderna */
.bebop-table {
  width: 100%;
  border-collapse: collapse;
}

.bebop-table thead {
  background: var(--color-neutral-50, #f9fafb);
}

.bebop-table th {
  padding: 16px 20px;
  text-align: left;
  font-weight: 600;
  color: var(--color-neutral-700, #374151);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--color-neutral-200, #e5e7eb);
  position: relative;
}

.bebop-table th.sortable {
  cursor: pointer;
  user-select: none;
  transition: color 0.2s ease;
}

.bebop-table th.sortable:hover {
  color: var(--color-primary-600, rgba(33, 254, 51, 0.9));
}

.bebop-table th.sortable::after {
  content: "↕";
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.5;
  font-size: 12px;
}

.bebop-table-row {
  transition: all 0.2s ease;
  border-bottom: 1px solid var(--color-neutral-100, #f3f4f6);
}

.bebop-table-row:hover {
  background: var(--color-primary-25, rgba(33, 254, 51, 0.02));
}

.bebop-table-row:last-child {
  border-bottom: none;
}

.bebop-table td {
  padding: 16px 20px;
  vertical-align: middle;
  max-width: 90vw;
}

/* Célula principal com avatar */
.bebop-cell-main {
  display: flex;
  align-items: center;
  gap: 12px;
}

.bebop-cell-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(
    135deg,
    var(--color-primary-500, #21fe33),
    var(--color-primary-600, rgba(33, 254, 51, 0.9))
  );
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
  text-transform: uppercase;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(33, 254, 51, 0.3);
}

.bebop-cell-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.bebop-cell-avatar-placeholder {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--color-neutral-100, #f3f4f6);
  color: var(--color-neutral-500, #9ca3af);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.bebop-cell-content {
  flex: 1;
  min-width: 0;
}

.bebop-cell-title {
  font-weight: 600;
  color: var(--color-neutral-900, #111827);
  margin-bottom: 2px;
  font-size: 14px;
}

.bebop-cell-subtitle {
  color: var(--color-neutral-500, #9ca3af);
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Status badge na tabela */
.bebop-status-badge-table {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  /* Evita que o badge estique em containers flex/GRID */
  width: fit-content;
  align-self: flex-start;
}

/* Cores específicas para badges de status em tabelas */
.bebop-status-badge-table.bebop-status-ativo {
  background: rgba(33, 254, 51, 0.1);
  color: var(--color-primary-700, rgba(33, 254, 51, 0.8));
  border: 1px solid var(--color-primary-200, rgba(33, 254, 51, 0.2));
}

.bebop-status-badge-table.bebop-status-inativo {
  background: rgba(156, 163, 175, 0.1);
  color: var(--color-neutral-700, #374151);
  border: 1px solid var(--color-neutral-300, #d1d5db);
}

.bebop-status-badge-table.bebop-status-pendente {
  background: rgba(245, 158, 11, 0.1);
  color: var(--color-warning-700, #a16207);
  border: 1px solid var(--color-warning-300, #fcd34d);
}

/* Ações inline na tabela */
.bebop-actions-inline {
  display: flex;
  gap: 4px;
}

.bebop-action-btn-table {
  min-width: 32px;
  height: 32px;
  border-radius: 6px;
  border: 1px solid var(--color-neutral-200, #e5e7eb);
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  cursor: pointer;
  font-size: 14px;
  color: var(--color-neutral-600, #6b7280);
}

.bebop-action-btn-table:hover {
  background: var(--color-primary-50, rgba(33, 254, 51, 0.05));
  border-color: var(--color-primary-300, rgba(33, 254, 51, 0.3));
  color: var(--color-primary-600, rgba(33, 254, 51, 0.9));
  transform: scale(1.05);
}

.bebop-action-btn-table.danger:hover {
  background: rgba(239, 68, 68, 0.05);
  border-color: rgba(239, 68, 68, 0.3);
  color: #dc2626;
}

/* Data na tabela */
.bebop-cell-date {
  color: var(--color-neutral-500, #9ca3af);
  font-size: 13px;
  white-space: nowrap;
}

/* ===================================
   MOBILE SEARCH TOGGLE
   =================================== */

/* Removido: Agora usando classes Bootstrap padrão */

/* Animação slideDown */
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsividade da tabela */
@media (max-width: 1650px) {
  /* Ajustar container principal para alinhamento edge-to-edge */
  .content.mb-4 .container-fluid {
    padding-left: 0;
    padding-right: 0;
  }

  /* Ajustar row para alinhamento perfeito */
  .content.mb-4 .container-fluid .row.mb-2 {
    margin-left: 16px;
    margin-right: 16px;
  }

  /* Ajustar subtitle para mobile */
  .bebop-page-subtitle {
    font-size: 0.85rem;
    line-height: normal;
    text-align: left !important;
    margin-bottom: 0;
    margin-left: 0;
  }

  /* Controlar visibilidade do card de busca */
  .bebop-controls-section.bebop-mobile-search-hidden {
    display: none;
  }

  .bebop-controls-section.bebop-mobile-search-visible {
    display: block;
    animation: slideDown 0.3s ease-out;
  }

  .bebop-controls-section {
    padding: 16px;
  }

  .bebop-search-input {
    min-width: auto;
  }

  /* Ajustar filtros para mobile */
  .bebop-filters-row {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .bebop-filter-group {
    width: 100%;
  }

  .bebop-filter-dropdown {
    min-width: auto;
    width: 100%;
  }

  /* ===================================
       TABELA RESPONSIVA - TÉCNICA CARD
       =================================== */

  /* Esconder header da tabela */
  .bebop-table thead {
    display: none;
  }

  /* Transformar cada linha em um card */
  .bebop-table-row {
    display: block;
    background: white;
    border: 1px solid var(--color-neutral-200, #e5e7eb);
    border-radius: 12px;
    margin-bottom: 16px;
    padding: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  }

  .bebop-table-row:hover {
    background: white;
    transform: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  }

  /* Transformar cada célula em um grid */
  .bebop-table td {
    display: grid;
    grid-template-columns: 100px 1fr;
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-neutral-100, #f3f4f6);
    gap: 12px;
    align-items: center;
  }

  .bebop-table td:last-child {
    border-bottom: none;
  }

  /* Adicionar labels usando data-cell */
  .bebop-table td::before {
    content: attr(data-cell) ":";
    font-weight: 600;
    color: var(--color-neutral-700, #374151);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  /* Primeira célula sem padding top */
  .bebop-table td:first-child {
    padding-top: 16px;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
  }

  /* Última célula sem padding bottom */
  .bebop-table td:last-child {
    padding-bottom: 16px;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
  }

  /* Ajustar célula principal (fornecedor) - layout vertical */
  .bebop-table td[data-cell="Fornecedor"] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }

  .bebop-table td[data-cell="Fornecedor"]::before {
    align-self: flex-start;
  }

  /* Ajustar célula principal (administrador) - layout vertical */
  .bebop-table td[data-cell="Administrador"] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }

  .bebop-table td[data-cell="Administrador"]::before {
    align-self: flex-start;
  }

  /* Ajustar célula principal (veículo) - layout vertical */
  .bebop-table td[data-cell="Veículo"] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }

  .bebop-table td[data-cell="Veículo"]::before {
    align-self: flex-start;
  }

  /* Ajustar célula de preço */
  .bebop-table td[data-cell="Preço"] {
    align-items: center;
  }

  /* Ajustar célula de detalhes */
  .bebop-table td[data-cell="Detalhes"] {
    align-items: center;
  }

  /* Ajustar célula de categoria */
  .bebop-table td[data-cell="Categoria"] {
    align-items: center;
  }

  /* Ajustar célula de nome da categoria */
  .bebop-table td[data-cell="Nome da Categoria"] {
    align-items: center;
  }

  /* Ajustar célula de nome da marcas */
  .bebop-table td[data-cell="Nome da Marca"] {
    align-items: center;
  }

  /* Estilos para logotipo das marcas */
  .bebop-logo-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 6px;
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    overflow: hidden;
    flex-shrink: 0;
  }

  .bebop-logo-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 4px;
  }

  /* Ajustar célula de modelos */
  .bebop-table td[data-cell="Modelo"] {
    align-items: center;
  }

  /* Ajustar célula de marcas */
  .bebop-table td[data-cell="Marca"] {
    align-items: center;
  }

  /* Ajustar célula de combustível */
  .bebop-table td[data-cell="Combustível"] {
    align-items: center;
  }

  .bebop-cell-main {
    width: 100%;
  }

  /* Ajustar células de status */
  .bebop-table td[data-cell="Status"] {
    align-items: center;
  }

  /* Ajustar células de tipo (administrador) */
  .bebop-table td[data-cell="Tipo"] {
    align-items: center;
  }

  .bebop-status-badge-table {
    grid-column: 2;
    justify-self: start;
  }

  /* Ajustar célula de data */
  .bebop-table td[data-cell="Cadastro"] .bebop-cell-date {
    grid-column: 2;
  }

  /* Ajustar células de ações */
  .bebop-table td[data-cell="Ações"] {
    grid-template-columns: 100px 1fr;
  }

  .bebop-actions-inline {
    grid-column: 2;
    justify-content: flex-start;
  }

  .bebop-action-btn-table {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }

  /* Ajustar avatares */
  .bebop-cell-avatar {
    width: 36px;
    height: 36px;
    font-size: 14px;
  }

  .bebop-cell-title {
    font-size: 14px;
  }

  .bebop-cell-subtitle {
    font-size: 12px;
  }
}

@media (max-width: 768px) {
  .bebop-search-bar {
    flex-direction: column;
    align-items: stretch;
  }
}

/* Responsividade mobile cards */
@media (max-width: 1650px) {
  .bebop-page-header {
    margin: -20px -15px 24px -15px;
    padding: 24px 20px 20px 20px;
  }

  .bebop-page-title {
    font-size: 1.75rem;
  }

  .bebop-fornecedores-grid,
  .bebop-skeleton-container {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .bebop-fornecedor-card,
  .bebop-skeleton-card {
    padding: 20px;
    border-radius: 12px;
  }

  .bebop-avatar {
    width: 48px;
    height: 48px;
    font-size: 20px;
  }

  .bebop-card-title {
    font-size: 1.1rem;
  }

  .bebop-action-btn {
    width: 44px;
    height: 44px;
    font-size: 18px;
  }

  /* Filtros responsivos */
  .bebop-filters-expanded .row {
    margin: 0;
  }

  .bebop-filters-expanded .col-md-4,
  .bebop-filters-expanded .col-md-2 {
    padding: 0 8px;
    margin-bottom: 16px;
  }

  .bebop-filters-expanded .form-select {
    font-size: 16px; /* Evita zoom no iOS */
  }
}

/* ===================================
   MODAL WRAPPER ENHANCEMENTS
   =================================== */

/* Transfer Modal Wrapper */
.transfer-modal-wrapper.rz-dialog {
  border-radius: 20px !important;
  overflow: hidden !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;
  border: none !important;
  padding: 0 !important;
  animation: modalFadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  max-height: 90vh;
}

.transfer-modal-wrapper .rz-dialog-content {
  padding: 0 !important;
  border-radius: 20px !important;
  overflow: hidden !important;
}

.transfer-modal-wrapper .rz-dialog-titlebar {
  display: none !important;
}

/* Enhanced Dialog Backdrop */
.rz-dialog-mask {
  background: rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: backdropFadeIn 0.3s ease !important;
}

/* Modal Animations */
@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes backdropFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Close Button Enhancement */
.transfer-modal-wrapper .rz-dialog-titlebar-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  border: 2px solid rgba(255, 255, 255, 0.3);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 10;
}

.transfer-modal-wrapper .rz-dialog-titlebar-close:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: rotate(90deg) scale(1.1);
  border-color: rgba(255, 255, 255, 0.5);
}

.transfer-modal-wrapper .rz-dialog-titlebar-close:active {
  transform: rotate(90deg) scale(0.95);
}

/* Responsive Modal */
@media (max-width: 1650px) {
  .transfer-modal-wrapper.rz-dialog {
    width: 95vw !important;
    max-width: 95vw !important;
    margin: 1rem !important;
  }
}

@media (max-width: 576px) {
  .transfer-modal-wrapper.rz-dialog {
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    border-radius: 0 !important;
    max-height: 100vh;
  }

  .transfer-modal-wrapper .rz-dialog-content {
    border-radius: 0 !important;
  }
}