/* Arquivo: css/admin_index.css */
@import 'base.css';

.login-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 20px;
}

.box {
    background: var(--box-bg);
    border-radius: 14px;
    width: 40%;        /* LARGURA: 40% da tela */
    height: 70vh;      /* ALTURA: 50vh */
    border: 1px solid var(--box-border);
    box-shadow: 0 30px 80px rgba(0,0,0,0.8);
    opacity: 0;
    overflow: hidden;  
    display: flex;
}

/* Lado Esquerdo: Formulário (75% da caixa) */
.form-side {
    flex: 0 0 75%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 2px;
    text-align: center;
    overflow-y: auto;
    position: relative;
}

/* Lado Direito: Imagem (25% da caixa) */
.image-side {
    flex: 0 0 25%;
    background: url('https://picsum.photos/800/800?random=1' ) center/cover no-repeat;
    position: relative;
}

.image-side::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(to left, var(--box-bg) 0%, transparent 50%);
}

/* Ajustes de tamanho para caber em 50vh */
.logo { font-size: 2.5rem; color: var(--primary-color); margin-bottom: 10px; }
.title { font-size: 1.5rem; font-weight: 700; margin-bottom: 5px; }
.subtitle { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 20px; }

.form-container { width: 100%; max-width: 320px; }

/* Input focus — fundo escuro */
.input-group input:focus { background: #1a1a2e; }
.input-group input:-webkit-autofill,
.input-group input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px #1a1a2e inset !important; -webkit-text-fill-color: var(--text-main) !important; }

/* Botão mostrar senha */
.btn-toggle-pass {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    background: none; border: none; color: var(--text-muted); cursor: pointer;
    padding: 4px 8px; font-size: 1rem; z-index: 2; line-height: 1;
    transition: color 0.2s;
}
.btn-toggle-pass:hover { color: var(--text-main); }

/* Lembrar-me */
.remember-row { display: flex; align-items: center; justify-content: flex-start; margin-bottom: 15px; }
.remember-label { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 0.85rem; color: var(--text-muted); user-select: none; }
.remember-label input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--primary-color); }

.btn-login { background: linear-gradient(135deg, var(--primary-color), var(--primary-hover)); margin-top: 5px; padding: 10px; }

/* Home icon top-right */
.home-link {
    position: absolute; top: 15px; right: 20px;
    color: var(--text-muted); font-size: 1.2rem;
    transition: color 0.2s; z-index: 2;
}
.home-link:hover { color: var(--primary-color); }

.alert {
    width: 100%; max-width: 320px;
    padding: 10px; border-radius: 8px; font-size: 0.85rem; margin-bottom: 15px;
    display: flex; align-items: center; gap: 10px; text-align: left;
}
.alert.error { background: rgba(231,76,60,0.15); color: var(--danger-color); border: 1px solid rgba(231,76,60,0.3); }

/* Responsividade */
@media (max-width: 1100px) {
    .box { width: 90%; }
}
@media (max-width: 768px) {
    .box { flex-direction: column; height: auto; min-height: 60vh; }
    .image-side { display: none; }
}