/* ==========================================================
   Trestleboard — subconjunto para telas de autenticação/utilitárias
   (login, primeiro acesso, recuperar/nova senha, manutenção)

   Copiado de views/index.ejs (tokens + classes .tb-*), só tema
   claro — estas páginas não têm toggle de modo escuro, então o
   bloco body.dark-mode do dashboard foi deliberadamente omitido.
   Fonte de verdade continua sendo views/index.ejs; se os tokens
   mudarem lá, replicar aqui também.
   ========================================================== */

:root {
    --tb-paper: #EFEAE0;
    --tb-paper-2: #E4DDCC;
    --tb-line: #C9BFA8;
    --tb-ink: #1E2530;
    --tb-ink-soft: #4B5563;
    --tb-regalia: #223759;
    --tb-link: #223759;
    --tb-brass: #6E4E1A;
    --tb-brass-surface: #B4894A;
    --tb-brass-tint: #F1E4C8;
    --tb-verdigris: #33544A;
    --tb-verdigris-surface: #6E8C7C;
    --tb-verdigris-tint: #DCE7E0;
    --tb-garnet: #7A3128;
    --tb-garnet-surface: #B5453A;
    --tb-garnet-tint: #F5DEDA;
    --tb-amber: #8A6A00;
    --tb-amber-surface: #C9A227;
    --tb-on-dark: #FBF8F1;
    /* Ícones sobre a faixa --tb-regalia (fundo azul bem escuro): --tb-brass
       é marrom escuro demais e some contra esse fundo. */
    --tb-icon-on-regalia: #E7C287;
}

body {
    font-family: 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
}

/* Mesmo fundo do welcome.ejs (navy + textura carbon-fibre) — continuidade
   visual ao sair da tela de boas-vindas pra qualquer uma destas páginas. */
.tb-bg-pattern {
    background-color: #1e3a8a;
    background-image: url("https://www.transparenttextures.com/patterns/carbon-fibre.png");
}

@keyframes tb-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

.tb-animate-shake {
    animation: tb-shake .4s ease-in-out;
}

.tb-display {
    font-family: 'Cinzel', serif;
}

.tb-mono {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
}

.tb-link {
    color: var(--tb-link);
}

/* A "prancha" — folha do trestleboard pousada sobre o fundo escuro */
.tb-sheet {
    position: relative;
    background: var(--tb-paper);
    border: 1px solid var(--tb-line);
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 16px 32px -16px rgba(20, 25, 33, .35);
    padding: 1.75rem;
    color: var(--tb-ink);
}

@media (min-width: 768px) {
    .tb-sheet {
        padding: 2.5rem;
    }
}

/* Marcas de registro nos cantos, como uma prancheta de desenho técnico */
.tb-corner {
    position: absolute;
    width: 16px;
    height: 16px;
    border-color: var(--tb-brass-surface);
    opacity: .75;
    pointer-events: none;
}

.tb-corner-tl {
    top: 10px;
    left: 10px;
    border-top: 2px solid;
    border-left: 2px solid;
}

.tb-corner-tr {
    top: 10px;
    right: 10px;
    border-top: 2px solid;
    border-right: 2px solid;
}

.tb-corner-bl {
    bottom: 10px;
    left: 10px;
    border-bottom: 2px solid;
    border-left: 2px solid;
}

.tb-corner-br {
    bottom: 10px;
    right: 10px;
    border-bottom: 2px solid;
    border-right: 2px solid;
}

/* Divisor em arco de compasso — assinatura visual do sistema (o SVG vai inline no HTML) */
.tb-arc {
    display: block;
    width: 100%;
    height: 24px;
    color: var(--tb-line);
    margin: 1.5rem 0;
}

/* Blocos com talhe de pedra lavrada (ashlar) — usado no status da manutenção */
.tb-ashlar {
    background: var(--tb-paper);
    border: 1px solid var(--tb-line);
    border-radius: 8px;
    box-shadow:
        inset 2px 2px 0 rgba(255, 255, 255, .5),
        inset -2px -2px 0 rgba(0, 0, 0, .06),
        0 6px 16px -8px rgba(30, 37, 48, .3);
}

/* Selo circular de ícone */
.tb-seal {
    width: 3rem;
    height: 3rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Placa de pedra fundamental — tag/eyebrow do cabeçalho */
.tb-plate {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: var(--tb-regalia);
    color: var(--tb-on-dark);
    border: 1px solid var(--tb-brass-surface);
    border-radius: 4px;
    padding: .35rem 1rem;
}

/* Campo de formulário padrão */
.tb-input {
    width: 100%;
    background: var(--tb-paper);
    border: 1px solid var(--tb-line);
    color: var(--tb-ink);
    border-radius: .5rem;
    padding: .75rem 1rem;
    font-size: 1rem;
}

.tb-input:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--tb-brass-tint);
    border-color: var(--tb-brass-surface);
}

.tb-input:-webkit-autofill,
.tb-input:-webkit-autofill:hover,
.tb-input:-webkit-autofill:focus,
.tb-input:-webkit-autofill:active {
    -webkit-text-fill-color: var(--tb-ink);
    -webkit-box-shadow: 0 0 0px 1000px var(--tb-paper) inset;
    box-shadow: 0 0 0px 1000px var(--tb-paper) inset;
    caret-color: var(--tb-ink);
    transition: background-color 5000s ease-in-out 0s;
}

.tb-input::placeholder {
    color: var(--tb-ink-soft);
    opacity: .8;
}