/**
 * DELP Brand – Custom Theme Overrides
 * Paleta oficial:
 *   DELP RED      #CC0F10   (cor primária / destaque)
 *   DELP BLACK    #000000
 *   DELP WHITE    #FFFFFF
 *   DELP SOLID    #B0B0B0
 *   DELP MODERN   #EAE5DF
 *   DELP SUBSEA   #2362D3
 *   DELP INDUSTRIA #FF6B05
 *   DELP SERVIÇOS  #0B861D
 *   DELP MOORING   #213D75
 */

/* ── Cores primárias (light mode) ───────────────────────────────────────── */
:root,
[data-bs-theme=light] {
  --ds-primary:               #CC0F10;
  --ds-primary-rgb:           204, 15, 16;
  --ds-primary-lighter:       #fde8e8;
  --ds-primary-light:         #f5a0a0;
  --ds-primary-dark:          #8a0b0b;
  --ds-primary-darker:        #5c0707;
  --ds-primary-text-emphasis: #8a0b0b;
  --ds-primary-bg-subtle:     #fde8e8;
  --ds-primary-border-subtle: #f5a0a0;
  --ds-navbar-bg:             #ffffff;
}

/* ── Cores primárias (dark mode) ────────────────────────────────────────── */
[data-bs-theme=dark] {
  --ds-primary:               #CC0F10;
  --ds-primary-rgb:           204, 15, 16;
  --ds-primary-lighter:       #5c0707;
  --ds-primary-light:         #8a0b0b;
  --ds-primary-dark:          #f5a0a0;
  --ds-primary-darker:        #fde8e8;
  --ds-primary-text-emphasis: #f5a0a0;
  --ds-primary-bg-subtle:     #2d0404;
  --ds-primary-border-subtle: #8a0b0b;
  --ds-navbar-bg:             #1c252e;
}

/* ── Botões primários ────────────────────────────────────────────────────── */
.btn-primary {
  --ds-btn-bg:           #CC0F10;
  --ds-btn-border-color: #CC0F10;
  --ds-btn-hover-bg:              #a80d0e;
  --ds-btn-hover-border-color:    #a80d0e;
  --ds-btn-active-bg:             #8a0b0b;
  --ds-btn-active-border-color:   #8a0b0b;
}

.btn-outline-primary {
  --ds-btn-color:               #CC0F10;
  --ds-btn-border-color:        #CC0F10;
  --ds-btn-hover-bg:            #CC0F10;
  --ds-btn-hover-border-color:  #CC0F10;
}

/* ── Links ───────────────────────────────────────────────────────────────── */
a { color: #CC0F10; }
a:hover { color: #a80d0e; }

/* ── Logo na sidebar ─────────────────────────────────────────────────────── */
#miniSidebar .brand-logo {
  min-height: 60px;
  display: flex;
  align-items: center;
}

/* ── Ícone de toggle da sidebar ──────────────────────────────────────────── */
.sidebar-toggle:hover {
  color: #CC0F10 !important;
}

/* ── Cores de utilidade da paleta DELP (classes auxiliares) ─────────────── */
.bg-delp-red       { background-color: #CC0F10 !important; color: #fff !important; }
.bg-delp-subsea    { background-color: #2362D3 !important; color: #fff !important; }
.bg-delp-industria { background-color: #FF6B05 !important; color: #fff !important; }
.bg-delp-servicos  { background-color: #0B861D !important; color: #fff !important; }
.bg-delp-mooring   { background-color: #213D75 !important; color: #fff !important; }
.bg-delp-modern    { background-color: #EAE5DF !important; color: #000 !important; }
.text-delp-red     { color: #CC0F10 !important; }

/* ── Inputs: foco e borda ativa em DELP RED ─────────────────────────────── */
.form-control:focus,
.form-select:focus {
  border-color: #CC0F10 !important;
  box-shadow: 0 0 0 0.2rem rgba(204, 15, 16, 0.18) !important;
}

.input-group-text {
  border-color: var(--ds-gray-300);
}

.input-group .form-control:focus ~ .input-group-text,
.input-group:focus-within .input-group-text {
  border-color: #CC0F10;
}

/* ── Backdrop: sempre invisível por padrão (qualquer tamanho de tela) ──────── */
#sidebarBackdrop {
  display: none !important;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1054;
}

/* ── Topbar largura total no mobile (tema define 480px, precisamos 992px) ── */
@media (max-width: 991.98px) {
  .navbar-glass {
    width: 100% !important;
    left: 0 !important;
  }
}

/* ── Tom Select: integra com light/dark via variáveis Bootstrap ─────────── */
/*
 * Antes usava #fff e #212529 hard-coded, o que quebrava no tema escuro
 * (texto preto sobre fundo branco em página com fundo escuro, e pior:
 * input value herdava cor clara do body e ficava invisível sobre #fff).
 * Agora todas as cores vêm de var(--ds-*) que o Bootstrap troca automaticamente.
 */
.ts-wrapper.form-select {
  padding: 0 !important;
  height: auto !important;
}
.ts-control {
  border: 1px solid var(--ds-border-color, #dee2e6) !important;
  border-radius: var(--ds-border-radius, 0.375rem) !important;
  padding: 0.375rem 0.75rem !important;
  min-height: calc(1.5em + 0.75rem + 2px) !important;
  background-color: var(--ds-body-bg, #fff) !important;
  color: var(--ds-body-color, #212529) !important;
  box-shadow: none !important;
}
.ts-control input,
.ts-control input::placeholder {
  color: var(--ds-body-color, #212529) !important;
}
.ts-control .item {
  color: var(--ds-body-color, #212529) !important;
}
.ts-control:focus,
.ts-wrapper.focus .ts-control {
  border-color: #CC0F10 !important;
  box-shadow: 0 0 0 0.2rem rgba(204, 15, 16, 0.18) !important;
}
.ts-wrapper.disabled .ts-control,
.ts-wrapper.disabled .ts-control * {
  color: var(--ds-secondary-color, #6c757d) !important;
  background-color: var(--ds-secondary-bg, #e9ecef) !important;
}
.ts-dropdown {
  background-color: var(--ds-body-bg, #fff) !important;
  color: var(--ds-body-color, #212529) !important;
  border: 1px solid #CC0F10 !important;
  border-radius: var(--ds-border-radius, 0.375rem) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25) !important;
  z-index: 9999 !important;
}
.ts-dropdown .option {
  padding: 0.4rem 0.75rem !important;
  background-color: var(--ds-body-bg, #fff) !important;
  color: var(--ds-body-color, #212529) !important;
}
.ts-dropdown .option:hover,
.ts-dropdown .option.active {
  background-color: var(--ds-primary-bg-subtle, #fde8e8) !important;
  color: var(--ds-primary-text-emphasis, #CC0F10) !important;
}
.ts-dropdown .option.selected {
  background-color: #CC0F10 !important;
  color: #fff !important;
}
.ts-dropdown .no-results,
.ts-dropdown .optgroup-header {
  color: var(--ds-secondary-color, #6c757d) !important;
  background-color: var(--ds-tertiary-bg, #f8f9fa) !important;
}
.ts-dropdown-content {
  max-height: 260px !important;
  overflow-y: auto !important;
}
.ts-wrapper .dropdown-input {
  background: var(--ds-body-bg, #fff) !important;
  color: var(--ds-body-color, #212529) !important;
  border-bottom: 1px solid var(--ds-border-color, #dee2e6) !important;
  padding: 0.375rem 0.75rem !important;
}

/* ── Read-only displays: respeitam o tema (dark/light) ───────────────────── */
/*
 * Vários forms usam <div class="form-control bg-light"> como "campo"
 * read-only. No dark mode, bg-light continua claro mas o texto herda cor
 * clara do body → texto invisível. Forçamos cores que respondem ao tema.
 */
.form-control.bg-light {
  background-color: var(--ds-tertiary-bg, #f8f9fa) !important;
  color: var(--ds-body-color, #212529) !important;
  border-color: var(--ds-border-color, #dee2e6) !important;
}
.form-control[readonly]:not(.bg-body-tertiary):not(.bg-light) {
  background-color: var(--ds-tertiary-bg, #f8f9fa) !important;
  color: var(--ds-body-color, #212529) !important;
}

/* Inputs em geral: garantir contraste em dark mode */
[data-bs-theme=dark] .form-control,
[data-bs-theme=dark] .form-select,
[data-bs-theme=dark] textarea.form-control {
  background-color: var(--ds-body-bg) !important;
  color: var(--ds-body-color) !important;
  border-color: var(--ds-border-color) !important;
}
[data-bs-theme=dark] .form-control::placeholder,
[data-bs-theme=dark] .form-select::placeholder {
  color: var(--ds-secondary-color) !important;
  opacity: 0.7;
}
[data-bs-theme=dark] .form-control:disabled,
[data-bs-theme=dark] .form-select:disabled,
[data-bs-theme=dark] .form-control[readonly] {
  background-color: var(--ds-secondary-bg) !important;
  color: var(--ds-secondary-color) !important;
}

/* Input groups: prefix/suffix (R$, @, ícones) */
[data-bs-theme=dark] .input-group-text {
  background-color: var(--ds-secondary-bg) !important;
  color: var(--ds-body-color) !important;
  border-color: var(--ds-border-color) !important;
}

/* Form-text (helper texts abaixo dos inputs) */
[data-bs-theme=dark] .form-text {
  color: var(--ds-secondary-color) !important;
}

/* Labels — garantir legibilidade */
[data-bs-theme=dark] .form-label {
  color: var(--ds-body-color) !important;
}

/* Cards de form com fundo "light" — substituir bg-light por bg-body-tertiary */
[data-bs-theme=dark] .card.bg-light,
[data-bs-theme=dark] .alert.alert-light {
  background-color: var(--ds-tertiary-bg) !important;
  color: var(--ds-body-color) !important;
  border-color: var(--ds-border-color) !important;
}

/* Tabelas — header e bordas legíveis no dark */
[data-bs-theme=dark] .table-light,
[data-bs-theme=dark] thead.table-light th,
[data-bs-theme=dark] .table > :not(caption) > * > * {
  --ds-table-bg: transparent;
  background-color: transparent;
  color: var(--ds-body-color);
  border-color: var(--ds-border-color);
}

/* Modais — header/footer no tema escuro */
[data-bs-theme=dark] .modal-content {
  background-color: var(--ds-body-bg);
  color: var(--ds-body-color);
  border-color: var(--ds-border-color);
}
[data-bs-theme=dark] .modal-header,
[data-bs-theme=dark] .modal-footer {
  border-color: var(--ds-border-color);
}

/* Badges suaves (bg-*-subtle) — Bootstrap 5.3 já adapta, mas reforçamos */
[data-bs-theme=dark] .badge.bg-info-subtle { color: #6edff6 !important; }
[data-bs-theme=dark] .badge.bg-success-subtle { color: #75b798 !important; }
[data-bs-theme=dark] .badge.bg-warning-subtle { color: #ffda6a !important; }
[data-bs-theme=dark] .badge.bg-danger-subtle { color: #ea868f !important; }
[data-bs-theme=dark] .badge.bg-primary-subtle { color: #f5a0a0 !important; }

/* ──────────────────────────────────────────────────────────────────────────
   TEMA "CONTRAST" — Daltonismo Verde/Vermelho (deuteranopia / protanopia)
   ──────────────────────────────────────────────────────────────────────────
   Variação do tema CLARO (light), não "alto contraste" tradicional. Mantém
   todo o visual claro/branco do light — fundo, hierarquia, sombras, bordas
   — e troca APENAS as cores funcionais (verde, vermelho, amarelo, azul)
   pelas equivalentes da paleta Okabe-Ito, distinguíveis por pessoas com
   daltonismo verde-vermelho.

   Paleta Okabe-Ito (https://jfly.uni-koeln.de/color/):
     primary  #0072B2  azul forte    (substitui o vermelho DELP — ação/links)
     success  #009E73  verde-azulado (substitui o verde Bootstrap)
     danger   #D55E00  vermelho-alaranjado vibrante
     warning  #F0E442  amarelo claro (texto preto em cima)
     info     #56B4E9  azul céu

   Reforço não-cor (sutil): badges e textos semânticos ganham font-weight 600.
   O usuário sem daltonismo nem nota a diferença visual.
   Ativação: <html data-bs-theme="contrast">
────────────────────────────────────────────────────────────────────────── */

.theme-contrast {
  /* Cores funcionais Okabe-Ito */
  --bs-primary:           #0072B2;
  --bs-primary-rgb:       0, 114, 178;
  --bs-success:           #009E73;
  --bs-success-rgb:       0, 158, 115;
  --bs-danger:            #D55E00;
  --bs-danger-rgb:        213, 94, 0;
  --bs-warning:           #F0E442;
  --bs-warning-rgb:       240, 228, 66;
  --bs-info:              #56B4E9;
  --bs-info-rgb:          86, 180, 233;

  /* Variações "subtle" / "emphasis" */
  --bs-primary-bg-subtle:     #d6ebf6;
  --bs-primary-border-subtle: #abd6ed;
  --bs-primary-text-emphasis: #004d7a;
  --bs-success-bg-subtle:     #cceee2;
  --bs-success-border-subtle: #9addbf;
  --bs-success-text-emphasis: #00604a;
  --bs-danger-bg-subtle:      #f7dbcc;
  --bs-danger-border-subtle:  #efb799;
  --bs-danger-text-emphasis:  #8a3d00;
  --bs-warning-bg-subtle:     #fcf9d3;
  --bs-warning-border-subtle: #f8f3a8;
  --bs-warning-text-emphasis: #807821;
  --bs-info-bg-subtle:        #ddeffb;
  --bs-info-border-subtle:    #bbe0f7;
  --bs-info-text-emphasis:    #2c5d78;

  /* Links */
  --bs-link-color:        #0072B2;
  --bs-link-color-rgb:    0, 114, 178;
  --bs-link-hover-color:  #004d7a;
  --bs-link-hover-color-rgb: 0, 77, 122;

  /* DELP: vermelho #CC0F10 vira azul Okabe-Ito (mantém o contrato visual) */
  --ds-primary:               #0072B2;
  --ds-primary-rgb:           0, 114, 178;
  --ds-primary-lighter:       #d6ebf6;
  --ds-primary-light:         #abd6ed;
  --ds-primary-dark:          #004d7a;
  --ds-primary-darker:        #003150;
  --ds-primary-text-emphasis: #004d7a;
  --ds-primary-bg-subtle:     #d6ebf6;
  --ds-primary-border-subtle: #abd6ed;
}

/* Botão primário: azul Okabe-Ito */
.theme-contrast .btn-primary {
  --ds-btn-bg:                 #0072B2;
  --ds-btn-border-color:       #0072B2;
  --ds-btn-hover-bg:           #005a8c;
  --ds-btn-hover-border-color: #005a8c;
  --ds-btn-active-bg:          #004d7a;
  --ds-btn-active-border-color:#004d7a;
  background-color: #0072B2;
  border-color: #0072B2;
  color: #ffffff;
}
.theme-contrast .btn-outline-primary {
  --ds-btn-color:              #0072B2;
  --ds-btn-border-color:       #0072B2;
  --ds-btn-hover-bg:           #0072B2;
  --ds-btn-hover-border-color: #0072B2;
}
.theme-contrast .btn-success {
  background-color: #009E73; border-color: #009E73; color: #ffffff;
}
.theme-contrast .btn-danger {
  background-color: #D55E00; border-color: #D55E00; color: #ffffff;
}
.theme-contrast .btn-warning {
  background-color: #F0E442; border-color: #F0E442; color: #000000;
}

/* Foco do input vira azul Okabe-Ito (era vermelho DELP no light) */
.theme-contrast .form-control:focus,
.theme-contrast .form-select:focus {
  border-color: #0072B2 !important;
  box-shadow: 0 0 0 0.2rem rgba(0, 114, 178, 0.18) !important;
}
.theme-contrast .input-group .form-control:focus ~ .input-group-text,
.theme-contrast .input-group:focus-within .input-group-text {
  border-color: #0072B2;
}

/* Links e text-DELP: azul ao invés do vermelho */
.theme-contrast a            { color: #0072B2; }
.theme-contrast a:hover      { color: #004d7a; }
.theme-contrast .text-delp-red { color: #0072B2 !important; }

/* Sidebar: hover/active no azul (era vermelho DELP) */
.theme-contrast .sidebar-toggle:hover {
  color: #0072B2 !important;
}

/* Tom Select foco: azul Okabe-Ito */
.theme-contrast .ts-control:focus,
.theme-contrast .ts-wrapper.focus .ts-control {
  border-color: #0072B2 !important;
  box-shadow: 0 0 0 0.2rem rgba(0, 114, 178, 0.18) !important;
}

/* Reforço NÃO-COR (sutil): badges e textos semânticos em negrito */
.theme-contrast .badge { font-weight: 600; }
.theme-contrast .text-success,
.theme-contrast .text-danger,
.theme-contrast .text-warning { font-weight: 600; }

/* ── Mobile sidebar overlay ──────────────────────────────────────────────── */
@media (max-width: 991.98px) {

  /* Sidebar como drawer overlay quando aberta no mobile */
  html.expanded #miniSidebar {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 260px !important;
    height: 100vh !important;
    z-index: 1055 !important;
    overflow-y: auto !important;
    box-shadow: 4px 0 16px rgba(0,0,0,0.18) !important;
  }

  /* Mostrar backdrop somente quando sidebar aberta no mobile */
  html.expanded #sidebarBackdrop {
    display: block !important;
  }

  /* Garantir que fechado o backdrop fique oculto (reforço) */
  html.collapsed #sidebarBackdrop,
  html:not(.expanded) #sidebarBackdrop {
    display: none !important;
  }
}