/* ================= LIGHT ================= */
:root {
  --bs-primary: #0000CC;
  --bs-primary-rgb: 0, 0, 204;
  --bs-secondary: #CD29C0;
  --bs-secondary-rgb: 205, 41, 192;
  --bs-cancel: #6c757d;
  --bs-cancel-rgb: 108, 117, 125;
  --bs-success: #198754;
  --bs-success-rgb: 25, 135, 84;
  --bs-danger: #dc3545;
  --bs-danger-rgb: 220, 53, 69;
  --bs-warning: #ffc107;
  --bs-warning-rgb: 255, 193, 7;
  --bs-info: #0dcaf0;
  --bs-info-rgb: 13, 202, 240;
  --bs-light: #f8f9fa;
  --bs-light-rgb: 248, 249, 250;
  --bs-dark: #212529;
  --bs-dark-rgb: 33, 37, 41;
  --bs-body-font-family: "Montserrat", Arial, sans-serif;
  --bs-body-font-size: 0.95rem;
  --bs-body-font-weight: 400;
  --bs-body-color: #212529;
  --bs-body-bg: #ffffff;
}

/* ================= LIGHT FIX ================= */
[data-bs-theme="light"] {
  --bs-primary: #0000CC;
  --bs-primary-rgb: 0, 0, 204;
  --bs-secondary: #CD29C0;
  --bs-secondary-rgb: 205, 41, 192;
  --bs-body-bg: #ffffff;
  --bs-body-color: #212529;
  --bs-link-color: #0000cc;
  --bs-link-hover-color: #002db3;
}


html, body { height: 100%; }

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
}

main {
  flex: 1;
  background: url("https://o.jobbol.com.br/assets/img/nav/picpoint.png") repeat !important;
  background-color: #ffffff !important;
}

.btn {
  font-weight: 500;
  border-radius: 0.375rem;
  transition: all 0.2s ease-in-out;
}

.btn-primary {
  color: #fff;
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

.btn-primary:hover {
  background-color: #002db3;
  border-color: #002db3;
}

.btn-primary:focus,
.btn-primary:active {
  background-color: #002699;
  border-color: #002699;
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

/* 🔹 Quando o botão tiver .active manual, ele volta ao normal */
.btn-primary.active {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
  color: #fff !important;
}

.btn-primary:disabled {
  background-color: #6a8be0;
  border-color: #6a8be0;
  opacity: 0.65;
}

.btn-outline-primary {
  color: var(--bs-primary);
  border-color: var(--bs-primary);
}

.btn-outline-primary:hover {
  color: #fff;
  background-color: var(--bs-primary);
}

.btn-outline-primary:focus,
.btn-outline-primary:active {
  background-color: #002db3;
  border-color: #002db3;
  color: #fff;
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

/* 🔹 Mantém o botão "normal" mesmo quando .active */
.btn-outline-primary.active {
  background-color: transparent !important;
  color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
}

.btn-outline-primary:disabled {
  color: #9ab5f2;
  border-color: #9ab5f2;
  opacity: 0.65;
}

.btn-secondary {
  color: #fff;
  background-color: var(--bs-secondary);
  border-color: var(--bs-secondary);
}

.btn-secondary:hover {
  background-color: #b324aa;
  border-color: #b324aa;
}

.btn-secondary:focus,
.btn-secondary:active {
  background-color: #991f92;
  border-color: #991f92;
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-secondary-rgb), 0.25);
}

/* 🔹 Reseta quando .active */
.btn-secondary.active {
  background-color: var(--bs-secondary) !important;
  border-color: var(--bs-secondary) !important;
  color: #fff !important;
}

.btn-secondary:disabled {
  background-color: #d66cd2;
  border-color: #d66cd2;
  opacity: 0.65;
}

.btn-outline-secondary {
  color: var(--bs-secondary);
  border-color: var(--bs-secondary);
}

.btn-outline-secondary:hover {
  color: #fff;
  background-color: var(--bs-secondary);
}

.btn-outline-secondary:focus,
.btn-outline-secondary:active {
  background-color: #b324aa;
  border-color: #b324aa;
  color: #fff;
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-secondary-rgb), 0.25);
}

/* 🔹 Reseta quando .active */
.btn-outline-secondary.active {
  background-color: transparent !important;
  color: var(--bs-secondary) !important;
  border-color: var(--bs-secondary) !important;
}

.btn-outline-secondary:disabled {
  color: #b57fb4;
  border-color: #b57fb4;
  opacity: 0.65;
}
.btn-cancel {
  color: #fff;
  background-color: var(--bs-cancel);
  border-color: var(--bs-cancel);
}
.btn-cancel:hover { background-color: #5c636a; }
.btn-cancel:focus, .btn-cancel:active {
  background-color: #51585e;
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-cancel-rgb), 0.25);
}

.btn-outline-cancel {
  color: var(--bs-cancel);
  border-color: var(--bs-cancel);
}
.btn-outline-cancel:hover { color: #fff; background-color: var(--bs-cancel); }

.form-control {
  border-radius: 0.375rem;
  font-size: 0.95rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.form-control:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
}

.card { border-radius: 0.5rem; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
.alert { border-radius: 0.375rem; font-size: 0.9rem; }

.notif-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #e5e5e5 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.notif-icon:hover { background-color: #f3f4f6; }
.notif-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 26px;
  height: 26px;
  font-size: 0.9rem;
  font-weight: 700;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background-color: #e03131;
  border: 2px solid #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
  z-index: 10;
}

@keyframes destaqueAviso {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(13,110,253, 0.6); }
  30% { transform: scale(1.02); box-shadow: 0 0 20px 6px rgba(13,110,253, 0.6); }
  60% { transform: scale(1); box-shadow: 0 0 12px 4px rgba(13,110,253, 0.4); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(13,110,253, 0); }
}
.card-destaque {
  animation: destaqueAviso 1s ease-in-out 0s 3;
  border: 2px solid var(--bs-primary);
  transition: all 0.3s ease;
  z-index: 2;
}

/* ================= DARK ================= */
[data-bs-theme="dark"] {
  color-scheme: dark;

  --bs-body-bg: #0f1116;
  --bs-body-color: #dee2e6;
  --bs-border-color: #2b2f36;
  --bs-card-bg: #1a1d23;
  --bs-card-border-color: #2c3139;
  --bs-input-bg: #181b21;
  --bs-input-border-color: #32373e;
  --bs-link-color: #7a91ff;
  --bs-link-hover-color: #9fb2ff;

  /* 🎨 Azul primário suavizado */
  --bs-primary: #2a3cff;
  --bs-primary-rgb: 42, 60, 255;

  /* 🎨 Rosa secundário levemente dessaturado */
  --bs-secondary: #c74fc1;
  --bs-secondary-rgb: 199, 79, 193;
}


[data-bs-theme="dark"] main {
  background: #0f1116 url("https://o.jobbol.com.br/assets/img/nav/picpoint-dark.png") repeat;
  background-blend-mode: overlay;
  background-color: #0f1116 !important;
}

[data-bs-theme="dark"] .card {
  background-color: var(--bs-card-bg);
  border-color: var(--bs-card-border-color);
  color: var(--bs-body-color);
}

[data-bs-theme="dark"] .form-control {
  background-color: var(--bs-input-bg);
  border-color: var(--bs-input-border-color);
  color: var(--bs-body-color);
}
[data-bs-theme="dark"] .form-control::placeholder { color: #a6acb3; }

[data-bs-theme="dark"] .btn-outline-primary { color: #aab4ff; border-color: #3c52ff; }
[data-bs-theme="dark"] .btn-outline-secondary { color: #f093e2; border-color: #d350c6; }

[data-bs-theme="dark"] header.navbar,
[data-bs-theme="dark"] .topbar {
  background-color: #181b21 !important;
  border-bottom: 1px solid #2b2f36 !important;
}
[data-bs-theme="dark"] footer {
  background-color: #181b21 !important;
  border-top: 1px solid #2b2f36 !important;
  color: #aaa !important;
}

[data-bs-theme="dark"] a { color: var(--bs-link-color); }
[data-bs-theme="dark"] a:hover { color: var(--bs-link-hover-color); }

[data-bs-theme="dark"] .bsb-sidebar-1 {
  background-color: #181b21 !important;
  border-color: #2b2f36 !important;
}
[data-bs-theme="dark"] .bsb-sidebar-1 .nav-link { color: #d2d5da; }
[data-bs-theme="dark"] .bsb-sidebar-1 .nav-link:hover { background-color: rgba(255,255,255,0.05); }
[data-bs-theme="dark"] .bsb-sidebar-1 .nav-link.active {
  background-color: rgba(0,0,204,0.15);
  color: #6688ff !important;
  font-weight: 600;
}




/* ================= LOGOS ================= */

/* Oculta a versão incorreta duplicada */
[data-bs-theme="dark"] .logo-light { display: none !important; }
[data-bs-theme="light"] .logo-dark { display: none !important; }

/* Padrão — ambas invisíveis até o tema definir */
.logo-light,
.logo-dark {
  display: none;
  height: auto;
  width: auto;
  transition: opacity 0.25s ease;
}

/* Exibição condicional conforme o tema */
[data-bs-theme="light"] .logo-light {
  display: inline-block !important;
}
[data-bs-theme="dark"] .logo-dark {
  display: inline-block !important;
}

/* Ajuste de tamanho por contexto */
.topbar .bsb-tpl-logo,
header .bsb-tpl-logo {
  max-height: 75px !important;
}
.bsb-sidebar-1 .bsb-tpl-logo {
  max-height: 32px !important;
}

/* ================= GERAIS ================= */

#formTema select {
  min-width: 160px;
}

#msgTema .alert {
  padding: 0.35rem 0.75rem;
  font-size: 0.875rem;
  margin-bottom: 0;
}

/* ================= ATENDIMENTO HEADER ================= */

/* Estilo base (modo claro) */
.atendimento-header {
  background-color: var(--bs-primary);
  color: #fff;
  padding: 0.75rem 1rem;
  border-bottom: none;
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}
.atendimento-header .btn-outline-primary {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.7);
}
.atendimento-header .btn-outline-primary:hover {
  background-color: #fff;
  color: var(--bs-primary);
  border-color: #fff;
}

/* Dark theme */
[data-bs-theme="dark"] .atendimento-header {
  background-color: #2a3cff;
  color: #fff;
}

.trumbowyg-box {
  border-radius: .5rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0,0,0,.08);
}
.trumbowyg-editor {
  min-height: 220px;
}

.ticket-mensagem p {
  margin-top: 0.25rem !important;
  margin-bottom: 0.25rem !important;
  line-height: 1.4;
}

.quadro-avisos p {
  margin-top: 0.25rem !important;
  margin-bottom: 0.25rem !important;
  line-height: 1.4;
}

.trumbowyg-box .trumbowyg-editor {
  line-height: 1.4 !important;
}

.trumbowyg-box .trumbowyg-editor[contenteditable="true"] p {
  margin-top: 0.25rem !important;
  margin-bottom: 0.25rem !important;
}


.trumbowyg-editor p{
  margin-top: 0.25rem !important;
  margin-bottom: 0.25rem !important;
  line-height: 1.4;
}

/* ================= FIX: Foco visual em botões ================= */
.btn:focus,
.btn:active,
.btn:focus:active {
  outline: none !important;
  box-shadow: none !important;
}

.input-group .btn:focus {
  z-index: 0 !important;
}

.btn:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 0.15rem rgba(var(--bs-primary-rgb), 0.25);
}

.modal-xxl {
    max-width: 95% !important;
}

.ts-optgroup-header {
    color: var(--bs-primary) !important;
    font-weight: 700;
}

.ts-dropdown .ts-option strong {
    color: var(--bs-secondary) !important;
}


/* =============================== */
/* Select2 – Integração Estilo Jobbol Office */
/* =============================== */

[data-bs-theme="dark"] .select2-container--default .select2-selection--single {
    background-color: var(--bs-input-bg) !important;
    border: 1px solid var(--bs-input-border-color) !important;
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #8d96a1 !important;
}

/* Seta do Select */
[data-bs-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--bs-body-color) transparent transparent transparent !important;
}

/* Dropdown */
[data-bs-theme="dark"] .select2-container--default .select2-dropdown {
    background-color: var(--bs-card-bg) !important;
    border-color: var(--bs-input-border-color) !important;
}

/* Opções */
[data-bs-theme="dark"] .select2-results__option {
    color: var(--bs-body-color) !important;
    padding: 6px 10px;
}

[data-bs-theme="dark"] .select2-results__option--highlighted {
    background-color: var(--bs-primary) !important;
    color: #fff !important;
}

[data-bs-theme="dark"] .select2-results__option--selected {
    background-color: rgba(var(--bs-primary-rgb), 0.25) !important;
    color: var(--bs-body-color) !important;
}

/* Bordas + focus */
[data-bs-theme="dark"] .select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--bs-primary) !important;
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25) !important;
}

/* Z-index fix para modal */
.select2-container--open {
    z-index: 2000 !important;
}

.tag-chip {
    display: inline-flex;
    align-items: center;
    background: #0d6efd;
    color: #fff;
    padding: 4px 10px;
    border-radius: 20px;
    margin: 3px;
    font-size: 0.85rem;
}

.tag-chip .remove-chip {
    margin-left: 8px;
    cursor: pointer;
    font-weight: bold;
}

.input-tag {
    min-width: 120px;
    outline: none;
    border: none;
    display: inline-block;
}

.swal-zoom-container {
    width: 100%;
    height: auto;
    overflow: hidden;
    text-align: center;
}

.swal-zoom-img {
    transition: transform 0.15s ease;
    cursor: zoom-in;
}

.container-95 {
    max-width: 95% !important;
    margin: 0 auto;
}

/* ================= SWEETALERT2 DARK MODE ================= */

[data-bs-theme="dark"] .swal2-popup {
    background: var(--bs-card-bg) !important;
    color: var(--bs-body-color) !important;
    border: 1px solid var(--bs-card-border-color) !important;
}

[data-bs-theme="dark"] .swal2-title,
[data-bs-theme="dark"] .swal2-html-container,
[data-bs-theme="dark"] .swal2-actions {
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .swal2-footer {
    border-top-color: var(--bs-border-color) !important;
    color: var(--bs-secondary-color) !important;
}

[data-bs-theme="dark"] .swal2-close {
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .swal2-close:hover {
    color: #fff !important;
}

[data-bs-theme="dark"] .swal2-input,
[data-bs-theme="dark"] .swal2-textarea,
[data-bs-theme="dark"] .swal2-select {
    background-color: var(--bs-input-bg) !important;
    color: var(--bs-body-color) !important;
    border-color: var(--bs-input-border-color) !important;
}

[data-bs-theme="dark"] .swal2-input::placeholder,
[data-bs-theme="dark"] .swal2-textarea::placeholder {
    color: #a6acb3 !important;
}

[data-bs-theme="dark"] .swal2-validation-message {
    background: var(--bs-tertiary-bg) !important;
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .swal2-timer-progress-bar {
    background: rgba(var(--bs-primary-rgb), 0.65) !important;
}

[data-bs-theme="dark"] .swal2-popup .alert-light,
[data-bs-theme="dark"] .swal2-popup .bg-light,
[data-bs-theme="dark"] .swal2-popup .bg-body-secondary {
    background-color: var(--bs-tertiary-bg) !important;
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .swal2-popup .border {
    border-color: var(--bs-border-color) !important;
}

[data-bs-theme="dark"] .swal2-popup pre,
[data-bs-theme="dark"] .swal2-popup code {
    background-color: var(--bs-tertiary-bg) !important;
    color: var(--bs-body-color) !important;
    border-color: var(--bs-border-color) !important;
}

[data-bs-theme="dark"] .swal2-popup .card {
    background-color: var(--bs-card-bg) !important;
    color: var(--bs-body-color) !important;
    border-color: var(--bs-card-border-color) !important;
}

[data-bs-theme="dark"] .swal2-popup .text-muted {
    color: var(--bs-secondary-color) !important;
}