/* ============================================================
   CHT Imports - estilos base
   Tema escuro (cinza, estilo editor de código). Cor só é usada
   com significado (verde=sucesso, amarelo=atenção, vermelho=erro).
   ============================================================ */

:root {
    color-scheme: dark;

    --cor-fundo: #1e1e1e;
    --cor-superficie: #252526;
    --cor-superficie-alt: #2d2d2d;
    --cor-texto: #cccccc;
    --cor-texto-claro: #9a9a9a;
    --cor-borda: #3c3c3c;
    --cor-cabecalho: #181818;
    --cor-botao: #3a3d41;

    --cor-sucesso: #6bc46d;
    --cor-sucesso-fundo: #1e3320;
    --cor-atencao: #e0b866;
    --cor-atencao-fundo: #3a2f16;
    --cor-erro: #f37070;
    --cor-erro-fundo: #3a1f1f;
    --cor-laranja: #e0995a;
    --cor-laranja-fundo: #3a2814;
    --cor-azul: #6ca8e0;
    --cor-azul-fundo: #1c2e3d;

    --raio: 4px;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--cor-fundo);
    color: var(--cor-texto);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.4;
}

a {
    color: inherit;
}

h1, h2, h3 {
    margin: 0 0 1rem;
    font-weight: 600;
}

/* ---------- cabeçalho e menu ---------- */

.cabecalho {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--cor-cabecalho);
}

.topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    color: #fff;
}

.topo-marca {
    font-weight: 700;
    letter-spacing: 0.02em;
}

.topo-usuario {
    font-size: 0.85rem;
    color: #aaaaaa;
}

.topo-usuario a {
    color: #fff;
    text-decoration: underline;
}

/* ---------- layout (barra lateral + conteúdo) ---------- */

.layout {
    display: flex;
    align-items: stretch;
}

.menu {
    flex: 0 0 200px;
    display: flex;
    flex-direction: column;
    background: var(--cor-superficie);
    border-right: 1px solid var(--cor-borda);
    padding: 0.5rem 0;
}

.menu a {
    display: block;
    padding: 0.65rem 1.25rem;
    color: var(--cor-texto-claro);
    text-decoration: none;
    font-size: 0.92rem;
    border-left: 3px solid transparent;
}

.menu a:hover {
    background: var(--cor-fundo);
    color: var(--cor-texto);
}

.menu a.ativo {
    color: var(--cor-texto);
    font-weight: 600;
    border-left-color: var(--cor-sucesso);
    background: var(--cor-fundo);
}

/* ---------- conteúdo ---------- */

.conteudo {
    flex: 1;
    min-width: 0;
    padding: 1.25rem 1.75rem;
}

.card {
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    padding: 1rem;
    margin-bottom: 1rem;
}

.cabecalho-pagina {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

/* ---------- tabelas ---------- */

.tabela-wrap {
    overflow-x: auto;
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
}

table.tabela {
    width: 100%;
    border-collapse: collapse;
    min-width: 480px;
}

.tabela th,
.tabela td {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--cor-borda);
    text-align: left;
    white-space: nowrap;
}

.tabela th {
    background: var(--cor-superficie-alt);
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--cor-texto-claro);
    text-transform: uppercase;
}

.tabela tr:last-child td {
    border-bottom: none;
}

.tabela tr.linha-atencao td {
    background: var(--cor-atencao-fundo);
}

.tabela tr.linha-erro td {
    background: var(--cor-erro-fundo);
}

/* Tabela de produtos do Estoque: muita coluna e muito botão por
   linha — compacta tudo e libera quebra de linha pra caber por
   extenso, sem precisar rolar pro lado. */
#tabela-produtos th,
#tabela-produtos td {
    padding: 0.4rem 0.5rem;
    white-space: normal;
    font-size: 0.82rem;
}

#tabela-produtos .botao,
#tabela-produtos .botao-x {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
}

#tabela-produtos .selo {
    padding: 0.1rem 0.35rem;
    font-size: 0.7rem;
}

#tabela-produtos td form {
    display: inline-block;
}

.produto-thumb {
    width: 32px;
    height: 32px;
    object-fit: cover;
    border-radius: var(--raio);
    border: 1px solid var(--cor-borda);
    vertical-align: middle;
    margin-right: 0.5rem;
}

/* ---------- cards de produto (modo exibição) ---------- */

.grade-produtos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}

.card-produto {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    overflow: hidden;
}

.card-produto-tag {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 1;
}

.card-produto-foto {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    background: var(--cor-superficie-alt);
}

.card-produto-sem-foto {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cor-texto-claro);
    font-size: 0.85rem;
}

.card-produto-corpo {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.75rem;
}

.filtro-tabela {
    display: block;
    margin-bottom: 0.75rem;
    max-width: 320px;
    width: 100%;
    padding: 0.6rem 0.9rem 0.6rem 2.4rem;
    border: 1px solid var(--cor-borda);
    border-radius: 999px;
    font-size: 0.95rem;
    font-family: inherit;
    background-color: var(--cor-superficie-alt);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8a8a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 0.85rem center;
    background-size: 1rem;
    color: var(--cor-texto);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.filtro-tabela::placeholder {
    color: var(--cor-texto-claro);
}

.filtro-tabela:focus {
    outline: none;
    border-color: var(--cor-azul);
    box-shadow: 0 0 0 3px var(--cor-azul-fundo);
}

/* ---------- formulários ---------- */

form label {
    display: block;
    margin-top: 0.75rem;
    margin-bottom: 0.25rem;
    font-weight: 600;
    font-size: 0.9rem;
}

form input,
form select,
form textarea {
    width: 100%;
    padding: 0.55rem 0.6rem;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    font-size: 1rem;
    font-family: inherit;
    background: var(--cor-superficie-alt);
    color: var(--cor-texto);
}

form textarea {
    resize: vertical;
}

form input:focus,
form select:focus,
form textarea:focus {
    outline: 2px solid #6b6b6b;
    outline-offset: 1px;
}

.campo-linha {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.campo-linha > * {
    flex: 1;
    min-width: 160px;
}

/* ---------- botões ---------- */

.botao {
    display: inline-block;
    padding: 0.55rem 1.1rem;
    border-radius: var(--raio);
    border: 1px solid transparent;
    background: var(--cor-botao);
    color: #ffffff;
    font-size: 0.95rem;
    text-decoration: none;
    cursor: pointer;
}

.botao-sucesso {
    background: var(--cor-sucesso);
    color: #10240f;
}

.botao-perigo {
    background: var(--cor-erro);
    color: #2b0d0d;
}

.botao-azul {
    background: var(--cor-azul);
    color: #0d2033;
}

.botao-perigo-contorno {
    background: var(--cor-fundo);
    border-color: var(--cor-erro);
    color: var(--cor-erro);
}

.botao-laranja {
    background: var(--cor-laranja);
    color: #2b1a08;
}

.botao-contorno-sucesso {
    background: var(--cor-fundo);
    border-color: var(--cor-sucesso);
    color: var(--cor-sucesso);
}

.botao-contorno-azul {
    background: var(--cor-fundo);
    border-color: var(--cor-azul);
    color: var(--cor-azul);
}

.botao-contorno-atencao {
    background: var(--cor-fundo);
    border-color: var(--cor-atencao);
    color: var(--cor-atencao);
}

.botao-secundario {
    background: transparent;
    border-color: var(--cor-borda);
    color: var(--cor-texto);
}

/* ---------- selos de status ---------- */

.selo {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    border-radius: var(--raio);
    font-size: 0.8rem;
    font-weight: 600;
}

.selo-sucesso {
    background: var(--cor-sucesso-fundo);
    color: var(--cor-sucesso);
}

.selo-atencao {
    background: var(--cor-atencao-fundo);
    color: var(--cor-atencao);
}

.selo-erro {
    background: var(--cor-erro-fundo);
    color: var(--cor-erro);
}

.selo-laranja {
    background: var(--cor-laranja-fundo);
    color: var(--cor-laranja);
}

.selo-azul {
    background: var(--cor-azul-fundo);
    color: var(--cor-azul);
}

.selo-neutro {
    background: var(--cor-superficie-alt);
    color: var(--cor-texto-claro);
}

.selo-contorno-sucesso {
    background: transparent;
    color: var(--cor-sucesso);
    border: 1px solid var(--cor-sucesso);
}

.selo-contorno-erro {
    background: transparent;
    color: var(--cor-erro);
    border: 1px solid var(--cor-erro);
}

/* ---------- título de lote (sublinhado por qtd de peças) ---------- */

.titulo-lote-verde {
    text-decoration: underline;
    text-decoration-color: var(--cor-sucesso);
    text-decoration-thickness: 3px;
    text-underline-offset: 4px;
}

.titulo-lote-laranja {
    text-decoration: underline;
    text-decoration-color: var(--cor-laranja);
    text-decoration-thickness: 3px;
    text-underline-offset: 4px;
}

/* ---------- alertas ---------- */

.alerta {
    padding: 0.75rem 1rem;
    border-radius: var(--raio);
    margin-bottom: 1rem;
    font-size: 0.92rem;
}

.alerta-erro {
    background: var(--cor-erro-fundo);
    color: var(--cor-erro);
    border: 1px solid var(--cor-erro);
}

.alerta-sucesso {
    background: var(--cor-sucesso-fundo);
    color: var(--cor-sucesso);
    border: 1px solid var(--cor-sucesso);
}

.alerta-azul {
    background: var(--cor-azul-fundo);
    color: var(--cor-azul);
    border: 1px solid var(--cor-azul);
}

/* ---------- página de login ---------- */

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

.login-caixa {
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-radius: 8px;
    padding: 2rem;
    width: 100%;
    max-width: 360px;
}

.login-caixa h1 {
    font-size: 1.3rem;
    text-align: center;
}

.login-caixa .botao {
    width: 100%;
    margin-top: 1.25rem;
    text-align: center;
    border: none;
}

/* ---------- calendário (horários) ---------- */

.calendario-topo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.calendario-titulo {
    font-size: 1.15rem;
    margin-left: 0.5rem;
}

.calendario-grade {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background: var(--cor-borda);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    overflow: hidden;
}

.calendario-dia-semana {
    background: var(--cor-superficie-alt);
    padding: 0.5rem;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--cor-texto-claro);
    text-transform: uppercase;
}

.calendario-celula {
    background: var(--cor-superficie);
    min-height: 92px;
    padding: 0.35rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    text-decoration: none;
    color: var(--cor-texto);
}

.calendario-celula:hover {
    background: var(--cor-superficie-alt);
}

.calendario-celula-fora {
    opacity: 0.4;
}

.calendario-celula-selecionada {
    outline: 2px solid var(--cor-azul);
    outline-offset: -2px;
}

.calendario-numero {
    font-weight: 600;
    font-size: 0.85rem;
}

.calendario-numero-hoje {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--cor-azul);
    color: #0d2033;
}

.calendario-evento {
    display: block;
    border-radius: 3px;
    padding: 0.1rem 0.3rem;
    font-size: 0.7rem;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.calendario-evento-cliente {
    background: var(--cor-azul-fundo);
    color: var(--cor-azul);
}

.calendario-evento-concluido {
    background: var(--cor-fundo);
    color: var(--cor-texto-claro);
}

.calendario-evento-lote {
    background: var(--cor-laranja-fundo);
    color: var(--cor-laranja);
}

/* ---------- tarefas (linha interativa de largura total) ---------- */

.separador-dia {
    margin: 1.25rem 0 0.5rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid var(--cor-borda);
    color: var(--cor-texto-claro);
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.separador-dia:first-child {
    margin-top: 0;
}

.lista-tarefas {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.tarefa-linha {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 3.5rem;
    padding: 0.75rem 1.1rem;
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-left: 4px solid var(--cor-borda);
    border-radius: var(--raio);
    flex-wrap: wrap;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.tarefa-linha:hover {
    background: var(--cor-superficie-alt);
}

.tarefa-linha-baixa {
    border-left-color: var(--cor-sucesso);
}

.tarefa-linha-media {
    border-left-color: var(--cor-atencao);
}

.tarefa-linha-alta {
    border-left-color: var(--cor-erro);
}

.tarefa-linha-concluida {
    border-left-color: var(--cor-borda);
    opacity: 0.8;
}

.tarefa-linha-info {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
}

.tarefa-linha-nome {
    font-weight: 600;
    font-size: 0.98rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 260px;
}

.tarefa-linha-descricao {
    color: var(--cor-texto-claro);
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 380px;
}

.tarefa-linha-data {
    color: var(--cor-texto-claro);
    font-size: 0.78rem;
    white-space: nowrap;
}

.tarefa-linha-acoes {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .tarefa-linha-nome,
    .tarefa-linha-descricao {
        max-width: 100%;
        white-space: normal;
    }
}

/* ---------- listas compactas (com "x" pra remover) ---------- */

.lista-compacta {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.item-compacto {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.4rem 0.5rem 0.4rem 0.6rem;
    background: var(--cor-superficie-alt);
    border-left: 3px solid transparent;
    border-radius: var(--raio);
    font-size: 0.85rem;
}

.item-compacto-azul {
    border-left-color: var(--cor-azul);
}

.item-compacto-concluido {
    background: var(--cor-fundo);
    border-left-color: var(--cor-borda);
    color: var(--cor-texto-claro);
}

.item-compacto-texto {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.item-compacto form {
    flex-shrink: 0;
}

.botao-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--cor-texto-claro);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}

.botao-x:hover {
    background: var(--cor-erro-fundo);
    color: var(--cor-erro);
}

.botao-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--cor-texto-claro);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}

.botao-check:hover {
    background: var(--cor-sucesso-fundo);
    color: var(--cor-sucesso);
}

/* ---------- responsivo ---------- */

@media (max-width: 640px) {
    .topo {
        padding: 0.6rem 0.8rem;
    }

    .layout {
        flex-direction: column;
    }

    .menu {
        flex-direction: row;
        overflow-x: auto;
        white-space: nowrap;
        border-right: none;
        border-bottom: 1px solid var(--cor-borda);
        padding: 0;
    }

    .menu a {
        padding: 0.65rem 1rem;
        border-left: none;
        border-bottom: 3px solid transparent;
    }

    .menu a.ativo {
        border-left-color: transparent;
        border-bottom-color: var(--cor-sucesso);
    }

    .conteudo {
        padding: 0.75rem;
    }

    .tabela th,
    .tabela td {
        padding: 0.5rem;
        font-size: 0.9rem;
    }

    .calendario-dia-semana {
        font-size: 0.65rem;
        padding: 0.3rem 0.1rem;
    }

    .calendario-celula {
        min-height: 60px;
        padding: 0.2rem;
    }

    .calendario-evento {
        font-size: 0.6rem;
    }
}