/* Overrides do django-unfold pra paleta SALT.
   Primária #004066 e texto #4f4c4d já vão via UNFOLD["COLORS"]; aqui ficam
   o accent secundário (#47a5af) e os tokens de destaque que o index.html
   e o najila-index.js usam (antigo #47bac1 do jet). */

:root {
    --salt-primary: #004066;
    --salt-secondary: #47a5af;
    --salt-text: #4f4c4d;
    --salt-bg: #F5F7FA;
}

/* Accent secundário (teal) nos links e destaques do dashboard custom. */
.salt-accent,
.salt-accent a,
a.salt-accent {
    color: var(--salt-secondary);
}

.salt-accent:hover,
.salt-accent a:hover,
a.salt-accent:hover {
    color: var(--salt-primary);
}

.salt-btn {
    display: inline-block;
    padding: 6px 14px;
    background: var(--salt-secondary);
    color: #fff !important;
    border-radius: 6px;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.salt-btn:hover {
    background: var(--salt-primary);
}

/* Dashboard custom: tabelas de tarefas/aniversariantes/documentos */
.salt-dashboard-card {
    background: #fff;
    border: 1px solid rgb(var(--color-base-200, 215 222 231));
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
}

.dark .salt-dashboard-card {
    background: rgb(var(--color-base-900, 26 29 36));
    border-color: rgb(var(--color-base-800, 43 47 57));
}

.salt-dashboard-card h2 {
    color: var(--salt-primary);
    font-size: 1.1rem;
    margin: 0 0 12px;
}

.dark .salt-dashboard-card h2 {
    color: var(--salt-secondary);
}

/* Related-widget-wrapper: unfold seta img{display:block} globalmente, o que
   quebra o layout dos 4 botões (change/add/delete/view) em selects de FK sem
   autocomplete_fields. Força linha com ícones inline. */
.related-widget-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

/* Autocomplete (Select2) FK/M2M: o <select> oculto fica com min-w-20 do unfold,
   o que colapsa o container do Select2 a ~50px. Damos largura útil. */
.related-widget-wrapper .select2-container--admin-autocomplete {
    min-width: 320px;
    flex: 1 1 320px;
}

.related-widget-wrapper > select {
    margin-right: 4px;
}

.related-widget-wrapper-link img {
    display: inline-block !important;
    width: 18px;
    height: 18px;
    vertical-align: middle;
}

/* Sidebar item ativo no modo escuro: unfold usa text-primary-500 que na nossa
   paleta é #004066 (navy escuro) sobre white/[.06] — quase invisível.
   Forçamos um tom claro pra ficar legível. */
.dark aside a.active,
.dark nav a.active {
    color: rgb(var(--color-base-100, 235 239 244)) !important;
    background-color: rgba(255, 255, 255, 0.12) !important;
}

/* Checkbox + label do unfold renderiza como `flex flex-row` sem alignment
   nem gap, fazendo o input ser esticado verticalmente (align stretch) e
   ficar deslocado em relação ao label (mais visível em
   /admin/auth/user/<id>/change/, seção Permissões). */
.flex.flex-row > input[type="checkbox"] + .flex.flex-col {
    margin-left: 8px;
}

.flex.flex-row > input[type="checkbox"] {
    align-self: flex-start;
    margin-top: 4px;
    flex-shrink: 0;
}

/* Observação de destaque na listagem de Projeto (descricao_obs). Inline
   #fff4c5 anterior ficava ilegível no dark com texto claro do unfold. */
.salt-obs-destaque {
    padding: 5px;
    border-radius: 2px;
    background: #fff4c5;
    color: var(--salt-text);
}

.dark .salt-obs-destaque {
    background: #3a2e08;
    color: rgb(var(--color-base-100, 235 239 244));
}

/* Soma de esforço flutuante (change_form) */
#soma-esforco {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: var(--salt-primary);
    color: #fff;
    padding: 10px 16px;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    font-weight: 600;
}