/*
 * Arquivo: cliente_style.css
 * Descrição: Tema Branco/Azul para a Área do Cliente + Logo Personalizado.
 */

/* -------------------
 * Variáveis de Cor
 * ------------------- */
:root {
    --cor-azul-principal: #007bff;
    --cor-azul-hover: #0056b3;
    --cor-fundo: #f4f7fa;
    --cor-card-fundo: #ffffff;
    --cor-texto-principal: #333;
    --cor-texto-secundario: #777;
    --cor-borda: #e9ecef;
    --cor-sucesso: #28a745;
    --cor-aviso: #ffc107;
    --cor-erro: #dc3545;
}

/* -------------------
 * Reset e Padrões Globais
 * ------------------- */
* { margin: 0; padding: 0; box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
body { background-color: var(--cor-fundo); color: var(--cor-texto-principal); line-height: 1.6; }
a { color: var(--cor-azul-principal); text-decoration: none; transition: color 0.3s ease; }
a:hover { color: var(--cor-azul-hover); }

/* -------------------
 * ESTILOS DO LOGOTIPO (SaverHost + Nuvem)
 * ------------------- */
.login-logo, .top-nav-logo {
    color: inherit;
    display: flex;
    align-items: center;
    justify-content: center; /* Para o login */
    text-decoration: none !important; /* Remove sublinhado do link */
}

/* Ícone da Nuvem (Azul Original) */
.login-logo i, .top-nav-logo i {
    color: var(--cor-azul-principal);
    margin-right: 8px;
    font-size: 1.2em;
    display: inline-block !important; /* Força a exibição */
}

/* Parte "Saver" - Vermelho */
.logo-saver {
    color: #e50914;
    font-weight: 800;
}

/* Parte "Host" - Preto */
.logo-host {
    color: #222222;
    font-weight: 800;
}

/* -------------------
 * Layout (Menu Superior)
 * ------------------- */
.top-nav {
    display: flex; justify-content: space-between; align-items: center;
    background-color: var(--cor-card-fundo); border-bottom: 1px solid var(--cor-borda);
    padding: 15px 30px; height: 70px;
}
.top-nav-logo { justify-content: flex-start; font-size: 24px; } /* Ajuste para o header */

.top-nav-links { display: flex; gap: 25px; }
.top-nav-links a { color: var(--cor-texto-secundario); font-weight: 600; padding-bottom: 5px; border-bottom: 2px solid transparent; }
.top-nav-links a.active, .top-nav-links a:hover { color: var(--cor-azul-principal); border-bottom-color: var(--cor-azul-principal); }

.top-nav-user { display: flex; align-items: center; gap: 20px; }
.top-nav-user a { color: var(--cor-texto-secundario); font-size: 20px; position: relative; }
.top-nav-user .user-avatar { width: 40px; height: 40px; border-radius: 50%; background-color: var(--cor-borda); display: flex; align-items: center; justify-content: center; font-weight: 600; color: var(--cor-azul-principal); }

/* -------------------
 * Conteúdo Principal
 * ------------------- */
.client-main-wrapper { padding: 30px; }
.client-greeting { font-size: 28px; font-weight: 300; margin-bottom: 30px; }
.client-greeting strong { font-weight: 600; }

/* -------------------
 * Cards e Botões
 * ------------------- */
.card { background-color: var(--cor-card-fundo); border: none; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); padding: 25px; margin-bottom: 20px; }
.card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid var(--cor-borda); }
.card-header h3 { margin: 0; font-size: 20px; }

.btn { display: inline-block; padding: 10px 20px; font-size: 14px; font-weight: 600; text-align: center; cursor: pointer; border: none; border-radius: 6px; transition: all 0.3s ease; }
.btn-primary { background-color: var(--cor-azul-principal); color: white; }
.btn-primary:hover { background-color: var(--cor-azul-hover); }
.btn-secondary { background-color: var(--cor-fundo); color: var(--cor-texto-principal); border: 1px solid var(--cor-borda); }
.btn-secondary:hover { background-color: var(--cor-borda); }
.btn-success { background-color: var(--cor-sucesso); color: white; }
.btn-success:hover { background-color: #218838; }
.btn-danger { background-color: var(--cor-erro); color: white; }
.btn-sm { padding: 5px 10px; font-size: 12px; }
.btn-group { display: flex; gap: 10px; }
.btn-full { width: 100%; }

/* -------------------
 * Grid do Dashboard
 * ------------------- */
.dashboard-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 30px; }
@media (max-width: 992px) { .dashboard-grid { grid-template-columns: 1fr; } }

/* -------------------
 * Listas
 * ------------------- */
.instance-list, .ticket-list, .update-list { list-style: none; padding: 0; }
.list-item { display: flex; justify-content: space-between; align-items: center; padding: 15px 0; border-bottom: 1px solid var(--cor-borda); }
.list-item:last-child { border-bottom: none; padding-bottom: 0; }
.list-item:first-child { padding-top: 0; }
.list-item-content { display: flex; align-items: center; gap: 15px; }
.list-item-icon { font-size: 24px; color: var(--cor-azul-principal); background-color: #e7f3ff; padding: 10px; border-radius: 8px; }
.list-item-info { display: flex; flex-direction: column; }
.list-item-info strong { font-size: 16px; color: var(--cor-texto-principal); }
.list-item-info small { font-size: 14px; color: var(--cor-texto-secundario); }
.list-item-status { padding: 4px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; background-color: #e4f8e9; color: var(--cor-sucesso); }

/* -------------------
 * Login e Chat
 * ------------------- */
.login-wrapper { display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 20px; background-color: var(--cor-fundo); }
.login-box { width: 100%; max-width: 420px; background-color: var(--cor-card-fundo); padding: 40px; border-radius: 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); }
.login-logo { font-size: 32px; margin-bottom: 30px; } /* Tamanho maior para o login */
.login-title { text-align: center; font-size: 20px; color: var(--cor-texto-secundario); margin-bottom: 30px; }
.form-group { margin-bottom: 20px; }
.form-group label { display: block; margin-bottom: 8px; font-weight: 600; color: var(--cor-texto-secundario); }
.form-control { width: 100%; padding: 12px 15px; background-color: var(--cor-fundo); border: 1px solid var(--cor-borda); border-radius: 6px; color: var(--cor-texto-principal); font-size: 16px; }
.form-control:focus { outline: none; border-color: var(--cor-azul-principal); background-color: white; }

/* Chat */
.ticket-chat { background-color: #f8f9fa; border: 1px solid var(--cor-borda); border-radius: 8px; padding: 20px; max-height: 500px; overflow-y: auto; margin-bottom: 20px; }
.ticket-message { margin-bottom: 20px; display: flex; flex-direction: column; }
.ticket-message.is-client { align-items: flex-end; }
.ticket-message.is-client .msg-bubble { background-color: #e7f3ff; border: 1px solid #b6dfff; border-radius: 15px 15px 0 15px; color: #004085; }
.ticket-message.is-admin { align-items: flex-start; }
.ticket-message.is-admin .msg-bubble { background-color: #ffffff; border: 1px solid #e9ecef; border-radius: 15px 15px 15px 0; color: #333; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
.msg-bubble { padding: 15px; max-width: 80%; position: relative; line-height: 1.5; }
.msg-meta { font-size: 11px; color: #999; margin-top: 5px; }