:root {
  /* Primary Colors */
  --bs-primary: #3caacb;
  --bs-primary-rgb: 60, 170, 203;
  --bs-primary-dark: #2d8ba8;
  --bs-primary-light: #81c0df;
  --bs-primary-lighter: #add8ee;
  
  /* Secondary Colors */
  --bs-secondary: #bb92a9;
  --bs-secondary-rgb: 187, 146, 169;
  --bs-secondary-dark: #976e85;
  --bs-secondary-light: #f9e6f1;

  /* Size vars */
  --header-size: 76px;
  --footer-height: 0px;
  
  /* Success, danger, etc. can be customized similarly */
}

/* Light theme variables */
[data-bs-theme=light] {
  --bs-body-bg: #ffffff;
  --bs-body-color: #1f2937;
  --bs-body-color-rgb: 31, 41, 55;
  --bs-secondary-bg: #f3f4f6;
  --bs-tertiary-bg: #c6c7ca;
  --bs-disabled-color: #a7abae;
  --bs-emphasis-color: #111827;
  --bs-table-highlight: var(--bs-primary-light);
}

/* Dark theme variables */
[data-bs-theme=dark] {
  --bs-body-bg: #1f2937;
  --bs-body-color: #f3f4f6;
  --bs-body-color-rgb: 243, 244, 246;
  --bs-secondary-bg: #111827;
  --bs-tertiary-bg: #374151;
  --bs-disabled-color: #575f68;
  --bs-emphasis-color: #ffffff;
  --bs-table-highlight: var(--bs-primary-dark);
}

/* Custom button styles */
.btn-primary {
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: var(--bs-primary-dark);
  --bs-btn-hover-border-color: var(--bs-primary-dark);
  --bs-btn-active-bg: var(--bs-primary-dark);
  --bs-btn-active-border-color: var(--bs-primary-dark);
}

.btn-secondary {
  --bs-btn-bg: var(--bs-secondary);
  --bs-btn-border-color: var(--bs-secondary);
  --bs-btn-hover-bg: var(--bs-secondary-dark);
  --bs-btn-hover-border-color: var(--bs-secondary-dark);
  --bs-btn-active-bg: var(--bs-secondary-dark);
  --bs-btn-active-border-color: var(--bs-secondary-dark);
}

/* Custom card styles */
.card {
  --bs-card-border-width: 0;
}

/* Custom navbar styles */
body {
  padding-top: var(--header-size);
}

.btn-toogle {
  font-size: x-large;
}

.btn-header {
  font-size: small;
  height: 24px;
  padding-top: 2px;
  padding-bottom: 2px;
  padding-left: 10px;
  padding-right: 10px;
}

.navbar {
  background-color: var(--bs-secondary-bg);
  z-index: 200;
}

#navbarContent {
  font-size: small;
}

.navbar-nav .nav-link.active {
  color: var(--bs-primary);
  font-weight: 600;
}

/* .navbar {
  background-color: var(--bs-secondary-bg);
  position: fixed;
  top: 0px;
  z-index: 20;
  width: 100%;
}

.navbar-brand img {
  height: 60px;
  width: auto;
}

*/
.navbar {
    height: var(--header-size);
}

.header-buttons {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

.header-buttons select,
.header-buttons input {
  font-size: 11px;
}

.alert-info {
  border-color: var(--bs-primary-dark);
  background-color: var(--bs-primary-lighter);
  color: var(--bs-primary-dark);
}

/* Form styles */
.form-control:focus, .form-select:focus {
  border-color: var(--bs-primary-light);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

/* Table styles */
.table {
  --bs-table-hover-bg: rgba(var(--bs-primary-rgb), 0.05);
}

/* Badge styles */
.badge-role {
  background-color: transparent;
  border: 1px solid var(--bs-primary);
  color: var(--bs-body-color);
}

/* Override browser autofill styles */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px var(--bs-body-bg) inset !important;
    -webkit-text-fill-color: var(--bs-body-color) !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* For dark mode */
[data-bs-theme=dark] input:-webkit-autofill,
[data-bs-theme=dark] input:-webkit-autofill:hover, 
[data-bs-theme=dark] input:-webkit-autofill:focus,
[data-bs-theme=dark] input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px var(--bs-tertiary-bg) inset !important;
    -webkit-text-fill-color: var(--bs-body-color) !important;
}

/* Custom gradients */
[data-bs-theme=light] .bg-custom-gradient {
  background: linear-gradient(0deg, #ffffff, #e3e6e9, #d6dde4);
}

[data-bs-theme=dark] .bg-custom-gradient {
  background: linear-gradient(180deg, #212529, #272b30, #2e3236);
}

/* Add this to your existing CSS */
.container-card {
  background-color: var(--bs-secondary-bg);
  border: 1px solid var(--neutral-300);
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* ===== TOM SELECT CUSTOM ===== */
select.tom-select-custom {
  display: none;
}

.ts-wrapper {
    --ts-border-color: var(--bs-border-color);
    --ts-bg-color: var(--bs-body-bg);
    --ts-text-color: var(--bs-body-color);
    --ts-primary: var(--bs-primary);
    --ts-primary-light: var(--bs-primary-light);
    --ts-primary-rgb: var(--bs-primary-rgb);
    --ts-tertiary-bg: var(--bs-tertiary-bg);
    --ts-emphasis-color: var(--bs-emphasis-color);
    position: relative;
}

.ts-wrapper .ts-control {
    background: var(--ts-bg-color) !important;
    border: 1px solid var(--ts-border-color) !important;
    border-radius: 0.375rem !important;
    padding: 0.375rem 0.75rem !important;
    min-height: calc(1.5em + 0.75rem + 2px) !important;
    box-shadow: none !important;
    color: var(--ts-text-color) !important;
}

.ts-wrapper .ts-control > input {
    color: var(--ts-text-color) !important;
    background: transparent !important;
    width: 100%;
    border: none;
}

.ts-wrapper.focus .ts-control {
    border-color: var(--bs-primary-light) !important;
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25) !important;
    outline: none !important;
}

.ts-wrapper .ts-control > input:focus {
    box-shadow: none !important;
    outline: none !important;
}

.ts-wrapper .ts-control > input {
    box-shadow: none !important;
}

.ts-wrapper .ts-dropdown {
    background: var(--ts-bg-color) !important;
    border: 1px solid var(--ts-border-color) !important;
    border-radius: 0.375rem !important;
    margin-top: 0.25rem !important;
    position: absolute;
    width: 100%;
    z-index: 1000;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.ts-wrapper .ts-dropdown .option {
    padding: 0.5rem 1rem !important;
    color: var(--ts-text-color) !important;
}

.ts-wrapper .ts-dropdown .option:hover {
    background: var(--ts-tertiary-bg) !important;
    color: var(--ts-emphasis-color) !important;
}

.ts-wrapper .ts-dropdown .active {
    background: var(--ts-primary) !important;
    color: white !important;
}

.ts-wrapper.multi .ts-control > div {
    background: var(--ts-primary) !important;
    color: white !important;
    border-radius: 0.25rem !important;
    padding: 0.25rem 0.5rem !important;
    margin: 0.15rem !important;
}

.ts-wrapper.multi .ts-control > div .remove {
    border-left-color: rgba(255, 255, 255, 0.5) !important;
    color: white !important;
}

/* Dark theme adjustments */
[data-bs-theme=dark] .ts-wrapper .ts-control {
    border-color: #495057 !important;
}

/* ===== TOM SELECT ENHANCEMENTS ===== */
.ts-wrapper .ts-control {
    transition: all 0.15s ease-in-out;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.ts-wrapper.single .ts-control {
    padding: 0.375rem 2.25rem 0.375rem 0.75rem !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
}

[data-bs-theme=dark] .ts-wrapper.single .ts-control {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23dee2e6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.ts-wrapper .ts-dropdown {
    z-index: 1060 !important; /* Acima de modais */
}

/* Container para tabelas */
.table-viewport {
  height: calc(100vh - var(--header-size) - var(--footer-height));
  width: 100%;
  display: flex;
  overflow: scroll;
  flex-direction: column;
  background-color: var(--bs-secondary-bg);
  /* padding: 1rem; */
}

/* Cabeçalho fixo para tabelas */
.fixed-header-table thead {
  position: sticky;
    top: 0;
    background-color: var(--bs-body-bg);
    z-index: 20;
}

/* Primeira coluna fixa */
.fixed-first-column td:first-child,
.fixed-first-column th:first-child {
    position: sticky;
    left: 0;
    background-color: var(--bs-body-bg);
    box-shadow: 2px 0 5px rgba(0,0,0,0.1);
}

.fixed-first-column td:first-child {
  z-index: 15;
  left: 0;
  top: 0;
}

.fixed-first-column th:first-child {
  z-index: 25;
}