/*
 * Identidade visual DICAL Locações — preto dominante, amarelo como destaque.
 * Amarelo #F1CA10 extraído do logo oficial.
 */
:root {
    --dical-preto: #111111;
    --dical-preto-suave: #1f1f1f;
    --dical-amarelo: #f1ca10;
    --dical-amarelo-escuro: #d3b00b;
    --dical-cinza-fundo: #f5f5f5;
}

body {
    background-color: var(--dical-cinza-fundo);
    -webkit-tap-highlight-color: transparent;
}

/* ---------- Barra de navegação ---------- */
.navbar-dical {
    background-color: var(--dical-preto);
}

.navbar-dical .navbar-brand img {
    height: 30px;
}

.navbar-dical .nav-link {
    color: rgba(255, 255, 255, .75);
    font-weight: 500;
}

.navbar-dical .nav-link:hover,
.navbar-dical .nav-link:focus {
    color: #fff;
}

.navbar-dical .nav-link.active {
    color: var(--dical-amarelo);
}

/*
 * O menu inteiro pede ~1.220 px com os ícones. De 1.400 px para cima cabe; entre
 * 1.200 e 1.400 (o notebook comum de 1.366) os ícones do alto saem e ele cabe em
 * ~1.040; abaixo de 1.200 vira o botão do celular (navbar-expand-xl). No menu
 * recolhido os ícones continuam: um embaixo do outro, espaço não falta.
 */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .navbar-dical #menuPrincipal > .navbar-nav > li > .nav-link > .bi {
        display: none;
    }
}

/* A página aberta, dentro de um submenu: o amarelo da marca, não o azul do Bootstrap. */
.navbar-dical .dropdown-item.active,
.navbar-dical .dropdown-item:active {
    background-color: var(--dical-amarelo);
    color: var(--dical-preto);
}

.navbar-dical .nav-link.disabled {
    color: rgba(255, 255, 255, .35);
}

.navbar-dical .navbar-toggler {
    border-color: rgba(255, 255, 255, .3);
}

.navbar-dical .navbar-toggler:focus {
    box-shadow: 0 0 0 .2rem rgba(241, 202, 16, .35);
}

.navbar-dical .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ---------- Botões ---------- */
.btn-primary {
    --bs-btn-color: var(--dical-preto);
    --bs-btn-bg: var(--dical-amarelo);
    --bs-btn-border-color: var(--dical-amarelo);
    --bs-btn-hover-color: var(--dical-preto);
    --bs-btn-hover-bg: var(--dical-amarelo-escuro);
    --bs-btn-hover-border-color: var(--dical-amarelo-escuro);
    --bs-btn-focus-shadow-rgb: 241, 202, 16;
    --bs-btn-active-color: var(--dical-preto);
    --bs-btn-active-bg: var(--dical-amarelo-escuro);
    --bs-btn-active-border-color: var(--dical-amarelo-escuro);
    --bs-btn-disabled-color: var(--dical-preto);
    --bs-btn-disabled-bg: var(--dical-amarelo);
    --bs-btn-disabled-border-color: var(--dical-amarelo);
    font-weight: 600;
}

.btn-dark {
    --bs-btn-bg: var(--dical-preto);
    --bs-btn-border-color: var(--dical-preto);
    --bs-btn-hover-bg: var(--dical-preto-suave);
    --bs-btn-hover-border-color: var(--dical-preto-suave);
}

/* ---------- Formulários ---------- */
.form-control:focus,
.form-select:focus {
    border-color: var(--dical-amarelo);
    box-shadow: 0 0 0 .25rem rgba(241, 202, 16, .25);
}

.form-label {
    font-weight: 500;
}

/* Evita o zoom automático do iOS ao focar um campo. */
@media (max-width: 767.98px) {
    .form-control,
    .form-select {
        font-size: 16px;
    }
}

/* ---------- Cartões e títulos ---------- */
.card {
    border: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}

.card-titulo {
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #6c757d;
}

.pagina-titulo {
    font-weight: 700;
    color: var(--dical-preto);
}

/* ---------- Auxiliares ---------- */
a {
    color: var(--dical-preto);
}

a:hover {
    color: var(--dical-amarelo-escuro);
}

.texto-amarelo {
    color: var(--dical-amarelo);
}

.borda-destaque {
    border-left: 4px solid var(--dical-amarelo);
}

/* ---------- Quadro de oportunidades ---------- */
/*
 * As colunas dividem a largura da página e só rolam na horizontal quando não
 * cabem no mínimo — no computador as cinco ficam à vista; no celular cabe uma
 * coluna e meia, e a metade que aparece avisa que há mais para o lado.
 */
.quadro {
    display: flex;
    gap: .75rem;
    overflow-x: auto;
    padding-bottom: .5rem;
    align-items: flex-start;
}

.quadro-coluna {
    flex: 1 1 0;
    min-width: 13rem;
    background: #ebebeb;
    border-radius: .5rem;
    padding: .5rem;
}

.quadro-lista {
    min-height: 4rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.quadro-cartao {
    background: #fff;
    border-radius: .375rem;
    padding: .6rem .7rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
    cursor: grab;
}

.quadro-cartao.sortable-chosen {
    cursor: grabbing;
}

.quadro-cartao.atrasado {
    border-left: 4px solid var(--bs-danger);
}

.quadro-cartao.hoje {
    border-left: 4px solid var(--dical-amarelo);
}