/* ============================================================
   Portal de Manutenção — THOR Máquinas e Montagens
   Identidade visual extraída de https://thor.com.br/
   (títulos vinho #470404, CTAs #9C0000, cabeçalho branco,
   acento secundário azul #5a99d4, fundos claros #F6F6F6)
   ============================================================ */

/* ---------- Variáveis da marca Thor + override das variáveis Bootstrap ---------- */
:root {
    /* Paleta Thor (site institucional) */
    --thor-vinho:        #470404;  /* títulos e textos fortes */
    --thor-vinho-vivo:   #9C0000;  /* primário: botões, links, destaques */
    --thor-vinho-hover:  #6D0000;  /* hover de botões/links */
    --thor-vinho-escuro: #5E0101;  /* faixas e fundos escuros de destaque */
    --thor-vinho-claro:  #F9F1F1;  /* fundo suave de hover/seleção */
    --thor-azul:         #5a99d4;  /* acento secundário (anel de CTA do site) */
    --thor-grafite:      #1e293b;  /* títulos e texto forte */
    --thor-slate:        #334155;  /* texto comum */
    --thor-claro:        #F6F6F6;  /* fundo suave de cards/áreas */
    --thor-cinza:        #D1D5DB;  /* bordas e divisores */
    --thor-escuro:       #111111;  /* rodapé e fundos escuros */

    /* Semáforo de manutenção (cores universais de sinalização) */
    --thor-verde:       #16a34a;
    --thor-ambar:       #f59e0b;
    --thor-vermelho:    #dc2626;

    /* Override Bootstrap */
    --bs-primary:          var(--thor-vinho-vivo);
    --bs-primary-rgb:      156, 0, 0;
    --bs-link-color:       var(--thor-vinho-vivo);
    --bs-link-hover-color: var(--thor-vinho-hover);
    --bs-body-color:       var(--thor-slate);
    --bs-border-color:     var(--thor-cinza);
    --bs-font-sans-serif:  -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                           'Oxygen-Sans', Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
}

/* ---------- Base ---------- */
body {
    background-color: var(--thor-claro);
    font-size: 16px;
    padding-top: 64px; /* espaço do cabeçalho fixo */
}

h1, h2, h3, h4, h5, h6 {
    color: var(--thor-vinho);
    font-weight: 700;
}

/* ---------- Cabeçalho fixo (branco, como o site) ---------- */
#cabecalho {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 64px;
    z-index: 1030;
    background-color: #fff;
    border-bottom: 3px solid var(--thor-vinho-vivo);
    box-shadow: 0 2px 6px rgba(17, 17, 17, 0.08);
}

#cabecalho .barra {
    height: 100%;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0 1.25rem;
}

#cabecalho .marca {
    color: var(--thor-vinho);
    font-weight: 700;
    font-size: 1.15rem;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    white-space: nowrap;
}

#cabecalho .marca img { height: 38px; }

#cabecalho .btn-menu {
    display: none; /* visível só no mobile */
    color: var(--thor-vinho);
    border-color: var(--thor-cinza);
}
#cabecalho .btn-menu:hover { background: var(--thor-vinho-claro); color: var(--thor-vinho); border-color: var(--thor-cinza); }

/* Seletor de cliente no cabeçalho */
#cabecalho .seletor-cliente {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
    color: var(--thor-slate);
    font-size: 0.875rem;
    white-space: nowrap;
}
#cabecalho .seletor-cliente select {
    max-width: 320px;
    font-size: 0.875rem;
    border-radius: 6px;
    border: 1px solid var(--thor-cinza);
    background-color: #fff;
    color: var(--thor-grafite);
    padding: 0.3rem 0.5rem;
}

/* Dropdown do usuário */
#cabecalho .dropdown-usuario .btn {
    color: var(--thor-slate);
    border-color: var(--thor-cinza);
    font-size: 0.9rem;
}
#cabecalho .dropdown-usuario .btn:hover {
    background: var(--thor-vinho-claro);
    color: var(--thor-vinho);
    border-color: var(--thor-cinza);
}

/* ---------- Sidebar ---------- */
#menu {
    position: fixed;
    top: 64px; left: 0; bottom: 0;
    width: 240px;
    z-index: 1020;
    background-color: #fff;
    border-right: 1px solid var(--thor-cinza);
    overflow-y: auto;
    padding: 1rem 0;
}

#menu .nav-link {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    color: var(--thor-slate);
    padding: 0.7rem 1.25rem;
    border-left: 3px solid transparent;
    font-size: 0.95rem;
}
#menu .nav-link i { font-size: 1.1rem; }
#menu .nav-link:hover { background: var(--thor-vinho-claro); color: var(--thor-vinho); }
#menu .nav-link.ativo {
    background: var(--thor-vinho-claro);
    color: var(--thor-vinho-vivo);
    border-left-color: var(--thor-vinho-vivo);
    font-weight: 600;
}

/* ---------- Conteúdo ---------- */
#conteudo {
    margin-left: 240px;
    padding: 1.5rem 1.75rem;
    min-height: calc(100vh - 64px - 60px); /* menos cabeçalho e rodapé */
}

#conteudo .titulo-pagina { margin-bottom: 1.25rem; }
#conteudo .subtitulo-cliente { color: var(--thor-slate); font-weight: 400; font-size: 1rem; }
#conteudo h1 { color: var(--thor-vinho); }

/* ---------- Cards ---------- */
.card {
    border: 1px solid var(--thor-cinza);
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(17, 17, 17, 0.05);
}
.card-header {
    background-color: var(--thor-claro);
    border-bottom: 1px solid var(--thor-cinza);
    font-weight: 700;
    color: var(--thor-vinho);
}

/* ---------- KPI cards (dashboard) ---------- */
.kpi-card { text-align: left; padding: 1.1rem 1.25rem; }
.kpi-card .kpi-valor {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--thor-vinho);
    line-height: 1.2;
}
.kpi-card .kpi-rotulo {
    font-size: 0.85rem;
    color: var(--thor-slate);
    margin-top: 0.2rem;
}
.kpi-card .kpi-icone {
    float: right;
    font-size: 1.9rem;
    color: var(--thor-vinho-vivo);
    opacity: 0.8;
}

/* ---------- Cards de máquina (dashboard) ---------- */
.card-maquina { cursor: pointer; transition: box-shadow 0.15s ease, transform 0.15s ease; }
.card-maquina:hover {
    box-shadow: 0 4px 12px rgba(156, 0, 0, 0.15);
    transform: translateY(-2px);
}
.card-maquina .nome-maquina { font-weight: 700; color: var(--thor-vinho); }
.card-maquina .setor-maquina { font-size: 0.85rem; color: var(--thor-slate); }

/* ---------- Cards de parâmetro (tela de máquina) ---------- */
.card-parametro .valor-parametro {
    font-size: 1.65rem;
    font-weight: 700;
    color: var(--thor-vinho);
}
.card-parametro .unidade-parametro { font-size: 0.9rem; color: var(--thor-slate); font-weight: 400; }
.card-parametro .endereco-parametro {
    font-size: 0.75rem;
    color: var(--thor-slate);
    font-family: Consolas, monospace;
    margin-top: 0.35rem;
}
.card-parametro .meta-parametro { font-size: 0.75rem; color: var(--thor-slate); }

/* ---------- Tabelas ---------- */
.table thead th {
    background-color: var(--thor-claro);
    color: var(--thor-vinho);
    font-weight: 700;
    font-size: 0.85rem;
    white-space: nowrap;
    border-bottom: 1px solid var(--thor-cinza);
}
.table td { vertical-align: middle; }
.table .linha-clicavel { cursor: pointer; }
.table .linha-clicavel:hover td { background-color: var(--thor-vinho-claro); }

/* ---------- Badges ---------- */
.badge { font-weight: 600; }

/* Semáforo de manutenção (fundo tint claro + texto escuro, hex exatos em pontos/bordas) */
.badge-sem-verde   { background: #dcfce7; color: #166534; border: 1px solid var(--thor-verde); }
.badge-sem-ambar   { background: #fef3c7; color: #92400e; border: 1px solid var(--thor-ambar); }
.badge-sem-vermelho{ background: #fee2e2; color: #b91c1c; border: 1px solid var(--thor-vermelho); }
.badge-sem-cinza   { background: #f3f4f6; color: #4b5563; border: 1px solid var(--thor-cinza); }

.ponto-sem-verde    { color: var(--thor-verde); }
.ponto-sem-ambar    { color: var(--thor-ambar); }
.ponto-sem-vermelho { color: var(--thor-vermelho); }
.ponto-sem-cinza    { color: #9ca3af; }

/* Badge de status de máquina */
.badge-status-online     { background: #dcfce7; color: #166534; }
.badge-status-offline    { background: #f3f4f6; color: #4b5563; }
.badge-status-emergencia { background: #fee2e2; color: #b91c1c; }

/* Badge de status de OS */
.badge-os-aberta      { background: #fef3c7; color: #92400e; }
.badge-os-em_execucao { background: #eaf3fa; color: #2c6ea3; border: 1px solid var(--thor-azul); }
.badge-os-concluida   { background: #dcfce7; color: #166534; }

/* Badge de tipo de OS */
.badge-tipo-corretiva  { background: #fee2e2; color: #b91c1c; }
.badge-tipo-preventiva { background: var(--thor-claro); color: var(--thor-slate); border: 1px solid var(--thor-cinza); }

/* Badge de nível de usuário */
.badge-nivel-admin      { background: var(--thor-vinho-vivo); color: #fff; }
.badge-nivel-manutencao { background: var(--thor-claro); color: var(--thor-slate); border: 1px solid var(--thor-cinza); }

/* ---------- Botões ---------- */
.btn-primary {
    --bs-btn-bg: var(--thor-vinho-vivo);
    --bs-btn-border-color: var(--thor-vinho-vivo);
    --bs-btn-hover-bg: var(--thor-vinho-hover);
    --bs-btn-hover-border-color: var(--thor-vinho-hover);
    --bs-btn-active-bg: var(--thor-vinho-hover);
    --bs-btn-active-border-color: var(--thor-vinho-hover);
}
.btn-outline-primary {
    --bs-btn-color: var(--thor-vinho-vivo);
    --bs-btn-border-color: var(--thor-vinho-vivo);
    --bs-btn-hover-bg: var(--thor-vinho-vivo);
    --bs-btn-hover-border-color: var(--thor-vinho-vivo);
    --bs-btn-active-bg: var(--thor-vinho-vivo);
    --bs-btn-active-border-color: var(--thor-vinho-vivo);
}

/* ---------- Filtros de período do gráfico ---------- */
.filtro-periodo .btn {
    --bs-btn-color: var(--thor-slate);
    --bs-btn-border-color: var(--thor-cinza);
    --bs-btn-hover-bg: var(--thor-vinho-claro);
    --bs-btn-hover-border-color: var(--thor-cinza);
    --bs-btn-active-bg: var(--thor-vinho-vivo);
    --bs-btn-active-border-color: var(--thor-vinho-vivo);
    --bs-btn-active-color: #fff;
    font-size: 0.85rem;
}

/* ---------- Gráfico ---------- */
.card-grafico canvas { max-height: 340px; }

/* ---------- Formulários ---------- */
.form-label { font-weight: 600; color: var(--thor-vinho); font-size: 0.9rem; }

/* ---------- Rodapé ---------- */
#rodape {
    margin-left: 240px;
    background-color: var(--thor-escuro);
    color: #9ca3af;
    font-size: 0.85rem;
    padding: 1rem 1.75rem;
}

/* ---------- Tela de login ---------- */
#conteudo.tela-login {
    margin-left: 0;
    padding: 0;
    min-height: calc(100vh - 60px);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--thor-claro);
}
.card-login {
    width: 100%;
    max-width: 420px;
    border-radius: 8px;
    border-top: 3px solid var(--thor-vinho-vivo);
}
.card-login .logo-login {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--thor-vinho);
    text-align: center;
}
.card-login .logo-login .thor { color: var(--thor-vinho-vivo); }

/* ---------- Toasts ---------- */
#area-toasts {
    position: fixed;
    top: 74px;
    right: 1rem;
    z-index: 2000;
}
.toast { border-radius: 8px; }

/* ---------- Modais ---------- */
.modal-content { border-radius: 8px; }
.modal-header { background-color: var(--thor-claro); }
.modal-header .modal-title { color: var(--thor-vinho); }

/* ---------- Estado vazio ---------- */
.estado-vazio {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--thor-slate);
}
.estado-vazio i { font-size: 3rem; color: var(--thor-cinza); }
.estado-vazio .titulo { font-weight: 700; color: var(--thor-vinho); margin-top: 0.75rem; }

/* ---------- Overlay do menu (mobile) ---------- */
#overlay-menu {
    display: none;
    position: fixed;
    inset: 64px 0 0 0;
    background: rgba(17, 17, 17, 0.45);
    z-index: 1015;
}
#overlay-menu.visivel { display: block; }

/* ============================================================
   Responsivo — breakpoint mobile (< 992px)
   ============================================================ */
@media (max-width: 991.98px) {
    #cabecalho .btn-menu { display: inline-block; }
    #cabecalho .seletor-cliente { margin-left: 0; flex: 1; }
    #cabecalho .seletor-cliente label { display: none; }
    #cabecalho .seletor-cliente select { max-width: 100%; flex: 1; }

    #menu {
        transform: translateX(-100%);
        transition: transform 0.2s ease;
        box-shadow: 4px 0 12px rgba(17,17,17,0.15);
    }
    #menu.aberto { transform: translateX(0); }

    #conteudo { margin-left: 0; padding: 1.25rem 1rem; }
    #rodape  { margin-left: 0; }
}