/* public_html/css/style.css */
:root { 
    --cor-principal: #ca0000; 
    --cor-principal-light: rgba(202, 0, 0, 0.1);
    --cor-hover: #a30000; 
    --cor-foco-sombra: rgba(202, 0, 0, 0.25);
    --bg-body: #f8f8f8;
    --text-dark: #2c3e50;
    --text-muted: #626262;
    --logo-padding: 20px; 
    --logo-height: 20px; 
}

html, body { height: 100%; margin: 0; overflow: hidden; }
body { font-family: 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; background-color: var(--bg-body); color: var(--text-dark); }

/* Login */
#login-screen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; background-image: url('../assets/fundo.jpg'); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; padding: 20px; overflow-y: auto; }
.login-card-container { display: flex; width: 900px; max-width: 100%; background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 15px 35px rgba(0,0,0,0.2); min-height: 500px; }
.login-brand-side { width: 50%; background: linear-gradient(135deg, #ca0000 0%, #7c0000 100%); display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 40px; color: white; text-align: center; }
.login-brand-side img { max-width: 180px; margin-bottom: 20px; filter: brightness(0) invert(1); }
.brand-text { font-size: 1.2rem; font-weight: 300; opacity: 0.9; line-height: 1.5; }
.login-form-side { width: 50%; padding: 50px; display: flex; flex-direction: column; justify-content: center; }
.login-header-title { font-size: 1.8rem; font-weight: 700; color: #333; margin-bottom: 5px; }
.login-header-desc { font-size: 1rem; color: #6c757d; margin-bottom: 30px; }
.form-label-custom { font-size: 0.9rem; font-weight: 600; color: #555; margin-bottom: 5px; }
.btn-login-custom { background-color: var(--cor-principal); border: none; padding: 12px; font-size: 1.1rem; font-weight: 600; transition: all 0.3s; }
.btn-login-custom:hover { background-color: var(--cor-hover); transform: translateY(-2px); }

/* IMPLEMENTAÇÃO PADRÃO DE CLIQUE / FOCO */
.btn-login-custom:focus-visible {
    box-shadow: 0 0 0 3px var(--cor-principal-light);
}

@media (max-width: 768px) { .login-card-container { flex-direction: column; height: auto; } .login-brand-side, .login-form-side { width: 100%; padding: 30px; } html, body { overflow: auto; height: auto; } #app-content { height: auto !important; } }

/* Layout */
#app-content { height: 100%; }
.sidebar { height: 100%; background: #ffffff; border-right: 1px solid #ebebeb; color: var(--text-dark); overflow-y: auto; padding: 0; box-shadow: 2px 0 10px rgba(0,0,0,0.01); z-index: 10; }

.sidebar .logo-area { 
    padding: var(--logo-padding); 
    text-align: center; 
    border-bottom: 1px solid #f0f0f0; 
    margin-bottom: 10px; 
    display: flex; align-items: center; justify-content: center;
}
.sidebar .logo-area img { 
    max-height: var(--logo-height); width: auto;
    filter: brightness(0) saturate(100%) invert(14%) sepia(94%) saturate(6639%) hue-rotate(355deg) brightness(93%) contrast(114%);
}

.sidebar a { color: #626262; text-decoration: none; padding: 12px 25px; display: flex; align-items: center; gap: 12px; font-weight: 500; transition: 0.2s; border-right: 3px solid transparent; }
.sidebar a:hover { color: var(--cor-principal); background-color: #fcfcfc; }
.sidebar a.active { color: var(--cor-principal); background-color: #fff5f5; border-right-color: var(--cor-principal); font-weight: 600; }
.sidebar a i { font-size: 1.2rem; }

.col-conteudo { height: 100%; display: flex; flex-direction: column; background-color: var(--bg-body); }
.scroll-area { flex-grow: 1; overflow-y: auto; padding: 2rem; }
.topbar { height: 60px; background-color: #fff; display: flex; align-items: center; justify-content: flex-end; padding: 0 40px; box-shadow: 0 2px 10px 0 rgba(0,0,0,0.02); z-index: 5; flex-shrink: 0; }
.user-dropdown .dropdown-toggle { color: var(--text-dark); font-weight: 600; display: flex; align-items: center; gap: 10px; cursor: pointer; text-decoration: none; font-size: 0.95rem; }
.user-avatar-small { width: 32px; height: 32px; background: var(--cor-principal-light); color: var(--cor-principal); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; }

/* VX Cards */
.vx-card { background: #fff; border-radius: 10px; box-shadow: 0 4px 25px 0 rgba(0,0,0,0.05); border: none; margin-bottom: 24px; transition: all 0.3s ease-in-out; position: relative; overflow: hidden; }
.vx-card:hover { transform: translateY(-3px); box-shadow: 0 8px 30px rgba(0,0,0,0.08); }
.vx-card.no-hover:hover { transform: none; box-shadow: 0 4px 25px 0 rgba(0,0,0,0.05); }
.vx-card-body { padding: 1.5rem; }

.welcome-card { background: #fff; border-radius: 10px; padding: 20px 30px; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 4px 25px 0 rgba(0,0,0,0.03); margin-bottom: 30px; border-left: 5px solid var(--cor-principal); }
.welcome-text h2 { font-size: 1.2rem; font-weight: 400; margin: 0; color: #626262; }
.welcome-text h2 strong { font-weight: 700; color: var(--cor-principal); }
.welcome-date { font-size: 0.9rem; color: #a0a0a0; margin-top: 4px; }

.stat-icon { width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; margin-right: 15px; }
.stat-icon.primary { background: var(--cor-principal-light); color: var(--cor-principal); }
.stat-icon.success { background: rgba(40, 199, 111, 0.12); color: #28c76f; }
.stat-icon.warning { background: rgba(255, 159, 67, 0.12); color: #ff9f43; }
.stat-content h3 { font-size: 1.5rem; font-weight: 700; margin: 0; color: var(--text-dark); }
.stat-content p { font-size: 0.85rem; color: #626262; margin: 0; font-weight: 500; text-transform: uppercase; }

/* Tables & UI */
.table-modern { width: 100%; border-collapse: separate; border-spacing: 0 8px; }
.table-modern thead th { border: none; color: #b0b0b0; font-weight: 500; font-size: 0.85rem; padding: 10px 15px; text-transform: uppercase; }
.table-modern tbody tr { background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,0.02); transition: 0.2s; border-radius: 8px; }
.table-modern tbody tr td { border: none; padding: 15px; vertical-align: middle; color: var(--text-dark); font-size: 0.95rem; }
.table-modern tbody tr td:first-child { border-top-left-radius: 8px; border-bottom-left-radius: 8px; }
.table-modern tbody tr td:last-child { border-top-right-radius: 8px; border-bottom-right-radius: 8px; }
.table-modern tbody tr:hover { transform: scale(1.005); box-shadow: 0 5px 15px rgba(0,0,0,0.05); }

.progress-slim { height: 8px; border-radius: 4px; background: #eee; overflow: hidden; }
.progress-bar-custom { height: 100%; background: var(--cor-principal); border-radius: 4px; }
.footer-slim { background-color: #fff; border-top: 1px solid #f0f0f0; padding: 10px 40px; font-size: 11px; color: #a0a0a0; text-align: right; flex-shrink: 0; }

.alert-modern { border-radius: 8px; border: none; padding: 15px; display: flex; align-items: center; gap: 15px; font-size: 0.9rem; margin-bottom: 15px; }
.alert-modern.danger { background: rgba(234, 84, 85, 0.12); color: #ea5455; }
.alert-modern.warning { background: rgba(255, 159, 67, 0.12); color: #ff9f43; }
.alert-modern.info { background: rgba(0, 207, 232, 0.12); color: #00cfe8; }

.form-control { border: 1px solid #e0e0e0; padding: 10px 15px; border-radius: 6px; font-size: 0.9rem; background: #fafafa; }
.form-control:focus { border-color: var(--cor-principal); box-shadow: 0 0 0 3px var(--cor-principal-light); background: #fff; }
.btn-primary { background-color: var(--cor-principal); border: none; padding: 10px 20px; font-weight: 600; border-radius: 6px; box-shadow: 0 4px 10px rgba(202, 0, 0, 0.3); }
.btn-primary:hover { background-color: var(--cor-hover); transform: translateY(-1px); box-shadow: 0 6px 15px rgba(202, 0, 0, 0.4); }
.text-dark-custom { color: #0f172a !important; }
.text-primary { color: var(--cor-principal) !important; }

@media print { #login-screen, .sidebar, .topbar, .footer-slim { display: none !important; } #app-content, .scroll-area { height: auto !important; overflow: visible !important; display: block !important; } #area-impressao { display: block !important; position: absolute; left: 0; top: 0; width: 100%; padding: 20px; } }