/* Reset Básico e Fontes */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: #f4f7f6;
    margin: 0;
    padding: 0;
    padding-top: 110px;
    /* Espaço para o header fixo */
    color: #333;
}

.container {
    width: 95%;
    max-width: 1200px;
    margin: 15px auto;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* Cabeçalho e Navegação - ALTERADO PARA VERMELHO COM LOGO */
header {
    background-color: #dcdcdc;
    /* branco para destaque */
    color: white;
    padding: 15px 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    box-sizing: border-box;
}

header .logo-container {
    /* NOVO: Para o logo e o texto "Assistência Técnica" */
    display: flex;
    align-items: center;

}

header .logo-container img {
    /* NOVO: Estilo para a imagem do logo */
    height: 80px;
    /* Ajuste o tamanho da logo conforme necessário */
    margin-right: 10px;
    /* Espaço entre a logo e o texto */
}

header .logo-container span {
    /* NOVO: Estilo para o texto "Assistência Técnica" */
    font-size: 1rem;
    /* Tamanho da fonte do "Assistência Técnica" */
    font-weight: 400;
    /* Peso da fonte */
    color: black;
    /* Cor do texto */
}

/* Ajuste para os links de navegação no header */
header nav a {
    color: black;
    text-decoration: none;
    padding: 8px 15px;
    border-radius: 4px;
    transition: background-color 0.3s;
}

header nav a:hover,
header nav a.active {
    background-color: #c0c0c0;
    /* Um cinza mais claro no hover */
}

/* Títulos */
h1,
h2 {
    color: #1e3a5f;
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 10px;
}

/* Formulários */
.form-os {
    display: grid;
    grid-gap: 20px;
}

fieldset {
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 20px;
    margin-bottom: 20px;
}

legend {
    font-size: 1.2rem;
    font-weight: bold;
    color: #1e3a5f;
    padding: 0 10px;
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-group label {
    margin-bottom: 5px;
    font-weight: 600;
}

.form-group input[type="text"],
.form-group input[type="date"],
.form-group input[type="number"],
.form-group input[type="tel"],
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    /* Importante para o padding não quebrar o layout */
    font-size: 1rem;
}

.form-group textarea {
    min-height: 100px;
    resize: vertical;
}

/* Layout em Grid para campos lado a lado */
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-gap: 20px;
}

.form-radio-group {
    display: flex;
    gap: 20px;
    align-items: center;
}

.form-radio-group label {
    font-weight: normal;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Botões */
.btn {
    padding: 12px 20px;
    font-size: 1rem;
    font-weight: bold;
    text-decoration: none;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s, box-shadow 0.3s;
}

.btn-primary {
    background-color: #1e3a5f;
    color: white;
}

.btn-primary:hover {
    background-color: #3e5a7f;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.btn-secondary {
    background-color: #6c757d;
    color: white;
}

.btn-secondary:hover {
    background-color: #5a6268;
}

/* Tabelas (Página de Consulta) */
.table-os {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.table-os th,
.table-os td {
    border: 1px solid #ddd;
    padding: 12px;
    text-align: left;

}

.table-os th {
    background-color: #f8f9fa;
    color: #333;
    font-weight: 600;

}

.table-os tr:nth-child(even) {
    background-color: #fdfdfd;
}

.table-os tr:hover {
    background-color: #f1f1f1;
}

.table-os .action-link {
    display: inline-block;
    padding: 6px 15px;
    /* Ajustei para ficar mais bonito */
    background-color: #1e3a5f;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    font-size: 0.9rem;
    transition: background-color 0.3s;

    /* 👇 GARANTE QUE O TEXTO DO BOTÃO FIQUE EM UMA LINHA 👇 */
    white-space: nowrap;

}

.table-os .action-link:hover {
    background-color: #3e5a7f;
}

/* Detalhes da OS (ver_os.php) */
.os-details {
    line-height: 1.8;
}

.os-details strong {
    color: #1e3a5f;
    min-width: 150px;
    display: inline-block;
}

/* ==========================================================================
   CORES DOS STATUS (Baseado na Planilha)
   ========================================================================== */

/* Configuração base da etiqueta */
.status-badge {
    padding: 5px 12px;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: bold;
    color: white;
    /* Cor do texto padrão (branco) */
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    white-space: nowrap;
}

/* Verde (Claro) */
.status-aberto {
    background-color: #00b050;
}

/* Azul (Claro) */
.status-em-análise {
    background-color: #00b0f0;
}

/* Laranja (Dourado) */
.status-aprovado {
    background-color: #ffc000;
    color: #333;
    /* Texto escuro para legibilidade */
}

/* Amarelo */
.status-recusado {
    background-color: #c00000;
    color: #FFF;
    /* Texto escuro para legibilidade */

}

/* Verde (Musgo) */
.status-lente-enviada {
    background-color: #92d050;
    color: #333;
    /* Texto escuro para legibilidade */
}

/* Vermelho (Brilhante) */
.status-concluido {
    background-color: #00CC00;
}

/* Rosa (Magenta) */
.status-em-reparo {
    background-color: #ff00ff;
}

/* Azul (Escuro) */
.status-pronto-para-retirada {
    background-color: #0070c0;
}

/* Cinza */
.status-finalizado {
    background-color: #00CC00;
}

/* Preto */
.status-cancelado {
    background-color: #000000;
}

/* Roxo */
.status-cortesia {
    background-color: #7030a0;
}

/* Verde (Pistache) */
.status-recebido {
    background-color: #c6e0b4;
    color: #333;
    /* Texto escuro para legibilidade */
}

/* Vermelho (Escuro) */
.status-garantia-negada {
    background-color: #c00000;
}

/* Laranja (Salmão) */
.status-fora-de-colecao {
    background-color: #f8cbad;
    color: #333;
    /* Texto escuro para legibilidade */
}

/* verde (Salmão) */
.status-troca-autorizada {
    background-color: #c65911;
    color: #fff;
    /* Texto branco para legibilidade */
}

/* verde (Salmão) */
.status-aguardando-pagamento {
    background-color: #a9d08e;
    color: #333;
    /* Texto escuro para legibilidade */
}

/* Status: Em Andamento */
.status-em-andamento {
    background-color: #17a2b8;
    /* Azul Turquesa (Info) */
    color: white;
}

/* Status: Aguardando dev do acessório */
.status-aguardando-dev-do-acessorio {
    background-color: #fd7e14;
    /* Laranja queimado (Destaque) */
    color: white;
}


/* DESTAQUE PARA CAMPOS OBRIGATÓRIOS (NOVO)      */
/* ============================================= */

/* Esta regra CSS seleciona automaticamente 
  qualquer input, textarea ou select que tenha 
  o atributo 'required' que acabamos de adicionar.
*/
input:required,
textarea:required,
select:required {
    background-color: #ffffe0;
    /* Um amarelo-claro (lightyellow) */
    border-color: #e6db55;
    /* Uma borda amarela mais escura */
}

/* Opcional: Melhora o visual quando o campo está focado */
input:required:focus,
textarea:required:focus,
select:required:focus {
    background-color: #fff;
    border-color: #d93333;
    /* Cor vermelha principal do site */
}

/* ============================================= */
/* CÓDIGO DE RESPONSIVIDADE                      */
/* ============================================= */

/* 1. Wrapper da Tabela (do Passo 2) */
/* Isso aplica um scroll horizontal APENAS se a tabela for 
   maior que a tela, funcionando em desktop e mobile. */
.table-responsive-wrapper {
    width: 100%;
    overflow-x: auto;
    border: 1px solid #ddd;
    border-radius: 5px;
}

/* 2. O "Cérebro" - Media Query */
/* Estas regras SÓ aplicam em telas com 768px ou menos */
@media (max-width: 768px) {

    /* Ajusta o contêiner principal para usar mais tela */
    .container {
        width: 95%;
        padding: 10px;
    }

    /* Força o Cabeçalho a empilhar (logo em cima, menu embaixo) */
    header {
        flex-direction: column;
        gap: 15px;
    }

    header nav {
        flex-direction: column;
        /* Empilha os links */
        width: 100%;
        gap: 5px;
    }

    header nav a {
        text-align: center;
        padding: 10px;
        /* Aumenta área de toque */
    }

    /* Esta é a regra principal para os formulários */
    /* Força o grid (de 2 ou 3 colunas) a virar 1 coluna */
    .form-grid {
        grid-template-columns: 1fr !important;
    }

    /* Empilha os filtros de busca no index.php */
    .form-os {
        flex-direction: column;
    }

    /* Ajusta o título para telas pequenas */
    h1 {
        font-size: 1.5rem;
    }

    /* Garante que a tabela não tenha margem estranha */
    .table-responsive-wrapper {
        margin-top: 20px;
    }
}

/* ============================================= */
/* CORREÇÕES DE LAYOUT (RELATÓRIO FISCAL)        */
/* ============================================= */

/* 1. Alinha Título e Botão Voltar na mesma linha */
.dashboard-header {
    display: flex;
    justify-content: space-between;
    /* Título na esq, Botão na dir */
    align-items: center;
    /* Centraliza verticalmente */
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

.dashboard-header h1 {
    margin: 0;
    /* Remove margem padrão para alinhar perfeito */
    font-size: 1.5rem;
}

/* 2. Ajuste Fino da Tabela */
.table-os th,
.table-os td {
    vertical-align: middle !important;
    /* Centraliza conteúdo se a linha for alta */
}

/* Colunas de valores financeiros mais largas para não quebrar linha */
.col-financeiro {
    width: 15%;
    min-width: 140px;
}

/* 3. Badge de Status Fiscal (Correção de proporção) */
.badge-fiscal {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: bold;
    text-align: center;
    line-height: 1.2;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
    white-space: nowrap;
    /* Evita quebra de texto feia */
}

/* ============================================= */
/* CONFIGURAÇÃO DE IMPRESSÃO (CORREÇÃO)          */
/* ============================================= */

/* 1. ESCONDER O CABEÇALHO DE IMPRESSÃO NA TELA NORMAL (Crucial) */
.print-only-header {
    display: none !important;
    /* <--- ISSO GARANTE QUE A LOGO EXTRA NÃO APAREÇA NA TELA */
}

/* 2. REGRAS PARA QUANDO FOR IMPRIMIR */
@media print {

    /* Esconde a interface do sistema (menus, botões, filtros) */
    .no-print,
    header,
    /* Esconde o header padrão do site */
    .dashboard-header,
    /* Esconde o título da página web e botões */
    .filter-container,
    .btn-icon,
    footer {
        display: none !important;
    }

    /* Configuração da Página */
    @page {
        size: landscape;
        /* Paisagem */
        margin: 1cm;
    }

    body {
        background-color: white;
        font-size: 12pt;
    }

    .container {
        width: 100%;
        max-width: none;
        box-shadow: none;
        margin: 0;
        padding: 0;
        border: none;
    }

    /* MOSTRA O CABEÇALHO DE IMPRESSÃO (Aparece só no papel) */
    .print-only-header {
        display: flex !important;
        /* <--- AQUI ELE FICA VISÍVEL */
        align-items: center;
        border-bottom: 2px solid #333;
        padding-bottom: 10px;
        margin-bottom: 20px;
        width: 100%;
    }

    .print-only-header img {
        height: 60px;
        /* Ajuste o tamanho da logo de impressão aqui */
        margin-right: 20px;
    }

    .print-only-header .print-info h2 {
        margin: 0;
        color: #000;
        font-size: 1.6rem;
    }

    .print-only-header .print-info p {
        margin: 2px 0;
        color: #333;
    }

    /* Tabela de Impressão */
    .table-responsive-wrapper {
        border: none;
        overflow: visible;
    }

    .table-fiscal {
        border: 1px solid #000;
        width: 100%;
    }

    .table-fiscal th,
    .table-fiscal td {
        border: 1px solid #000;
        color: #000;
        padding: 6px;
        font-size: 10pt;
    }

    /* Força impressão de cores de fundo */
    .table-fiscal td,
    .badge-fiscal,
    th {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Esconde a coluna de ação no papel */
    .col-acao {
        display: none;
    }
}

/* ============================================= */
/* CORREÇÃO: FILTROS ALINHADOS NA HORIZONTAL     */
/* ============================================= */

/* 1. Força o container a ser flexível horizontalmente */
.filter-container {
    display: flex;
    flex-direction: row;
    /* Garante direção linha */
    align-items: flex-end;
    /* Alinha o botão com a base dos inputs */
    gap: 15px;
    /* Espaço entre os campos */
    flex-wrap: wrap;
    /* Permite quebrar linha só se a tela for minúscula (celular) */
}

/* 2. Anula a largura de 100% dos formulários globais APENAS dentro do filtro */
.filter-container .form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
    /* Remove margem inferior que atrapalha o alinhamento */
    width: auto;
    /* Ocupa apenas o espaço necessário */
    flex: 0 1 auto;
    /* Não estica desnecessariamente */
}

/* 3. Define tamanho fixo confortável para os selects e inputs do filtro */
.filter-container select,
.filter-container input {
    width: 200px !important;
    /* Força um tamanho padrão, ignorando o 100% global */
    max-width: 100%;
}

/* 4. Ajuste fino do botão para alinhar altura com os inputs */
.filter-container button.btn-filtrar {
    height: 42px;
    /* Altura visualmente igual aos inputs */
    margin-bottom: 0;
    white-space: nowrap;
    /* Impede que o texto "Atualizar" quebre */
}

/* --- LARGURAS DAS COLUNAS (Atualizado) --- */
.col-id {
    width: 50px;
}

.col-data {
    width: 90px;
}

/* NOVA COLUNA: Largura para data (dd/mm/aaaa) */
.col-loja {
    width: 90px;
}

/* Reduzi um pouco para caber a data */
.col-fornecedor {
    width: 90px;
}

.col-saida,
.col-entrada {
    width: 18%;
}

.col-diferenca {
    width: 15%;
}

.col-status {
    width: 130px;
}

.col-acao {
    width: 60px;
    text-align: center;
}

/* Permitir quebra de linha em colunas específicas */
.table-fiscal td:nth-child(5),
/* Saída (índice mudou pq entrou data) */
.table-fiscal td:nth-child(6),
/* Entrada */
.table-fiscal td:nth-child(8)

/* Status */
    {
    white-space: normal;
}