/* timetracker.heflo.com — estilos próprios sobre o Bootstrap 5.3 */

:root {
    --tt-brand: #4d8dff;   /* azul claro o bastante para contrastar no escuro */
    --tt-navbar: #12181f;
}

/* Se um dia o tema claro voltar, os tokens se ajustam sozinhos. */
[data-bs-theme="light"] {
    --tt-brand: #2a6ef5;
    --tt-navbar: #1c2733;
}

body {
    background-color: var(--bs-body-bg);
}

/* O card padrão do Bootstrap no escuro fica quase igual ao fundo; um degrau de
   luminosidade a mais separa os blocos sem precisar de borda forte. */
.card {
    background-color: var(--bs-secondary-bg);
}

/* ---------- Login ---------- */

.tt-login {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 1rem;
}

.tt-login-box {
    width: 100%;
    max-width: 380px;
    padding: 2rem;
    border-radius: .75rem;
    background-color: var(--bs-secondary-bg);
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .35);
}

.tt-login-icon {
    font-size: 2.5rem;
    color: var(--tt-brand);
}

/* ---------- Layout ---------- */

.tt-navbar {
    background-color: var(--tt-navbar);
}

.tt-navbar .navbar-brand,
.tt-navbar .nav-link {
    color: rgba(255, 255, 255, .85);
}

.tt-navbar .nav-link:hover,
.tt-navbar .nav-link.active {
    color: #fff;
}

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

.tt-navbar .navbar-toggler-icon {
    filter: invert(1);
}

/* ---------- Busca de WI (autocomplete) ---------- */

.tt-busca {
    position: relative;
}

.tt-sugestoes {
    position: absolute;
    z-index: 1055;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 320px;
    overflow-y: auto;
    margin-top: .125rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background-color: var(--bs-secondary-bg);
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .35);
}

.tt-sugestoes:empty {
    display: none;
}

.tt-sugestao {
    padding: .5rem .75rem;
    cursor: pointer;
    border-bottom: 1px solid var(--bs-border-color-translucent);
}

.tt-sugestao:last-child {
    border-bottom: 0;
}

.tt-sugestao:hover,
.tt-sugestao.ativa {
    background-color: var(--bs-tertiary-bg);
}

.tt-sugestao-wi {
    font-weight: 600;
    color: var(--tt-brand);
}

.tt-sugestao-meta {
    font-size: .8125rem;
    color: var(--bs-secondary-color);
}

/* WI escolhido, mostrado no lugar do campo de busca */
.tt-wi-escolhido {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-height: 38px;
    padding: .375rem .75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background-color: var(--bs-tertiary-bg);
}

/* ---------- Lista de apontamentos ---------- */

.tt-dia-cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .5rem .75rem;
    background-color: var(--bs-tertiary-bg);
    border-bottom: 1px solid var(--bs-border-color);
    font-size: .875rem;
}

.tt-lancamento {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .625rem .75rem;
    border-bottom: 1px solid var(--bs-border-color-translucent);
}

.tt-lancamento:last-child {
    border-bottom: 0;
}

.tt-lancamento-desc {
    flex: 1 1 auto;
    min-width: 0;
}

.tt-lancamento-wi {
    font-size: .8125rem;
    color: var(--tt-brand);
    text-decoration: none;
}

.tt-duracao {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.tt-vazio {
    padding: 2rem;
    text-align: center;
    color: var(--bs-secondary-color);
}

/* ---------- Edição inline do horário ---------- */

.tt-horario {
    padding: .125rem .375rem;
    border: 1px solid transparent;
    border-radius: var(--bs-border-radius-sm);
    background: none;
    white-space: nowrap;
    font-size: .875rem;
    color: var(--bs-secondary-color);
}

.tt-horario:hover {
    border-color: var(--bs-border-color);
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
}

.tt-horario-edicao {
    display: flex;
    align-items: center;
    gap: .25rem;
    white-space: nowrap;
}

.tt-horario-edicao input[type="time"] {
    width: 6.5rem;
    padding: .125rem .375rem;
    font-size: .875rem;
}

/* Enquanto salva, a linha inteira fica opaca */
.tt-lancamento.salvando {
    opacity: .5;
    pointer-events: none;
}

/* O textarea da descrição não deve crescer além do previsto */
#descricao {
    resize: vertical;
}

/* ---------- Campos de data e hora ---------- */

/* O input[type=time] segue o idioma do navegador: em pt-BR mostra "09:15",
   em en-US "09:15 AM", que é bem mais largo. A largura mínima cobre o pior
   caso para o texto não sair cortado. */
#data {
    min-width: 9.5rem;
}

#horaInicio,
#horaFim {
    min-width: 8.5rem;
}