/* Layout base */
html, body, .sidebar { height: 100%; }
.sidebar { width: 260px; }
.card .material-icons { font-size: 28px; }

/* Página de Login */
.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f7fb;
}
.login-card {
    width: 100%;
    max-width: 420px;
    padding: 2rem;
    border: 1px solid #e6e8ef;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 6px 30px rgba(16,24,40,0.08);
}
.login-logo {
    width: clamp(100px, 6vw + 60px, 128px);
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.login-title {
    font-weight: 600;
    margin-top: .75rem;
}

/* Branding */
.brand-logo {
    width: clamp(88px, 6vw + 40px, 110px);
    height: auto;
}

/* Ensure brand pictures never explode sizes */
.sidebar picture, .sidebar img.brand-logo { max-width: 110px; }
.page-logo { width: 36px; height: auto; }

/* Small brand badge for sidebar
   Keep the logo visually balanced: approx 15% of viewport width or ~150px height (whichever is smaller) */
.brand-badge {
    display: block;
    height: auto;
    /* Prefer width by viewport but cap; keep aspect ratio */
    width: min(15vw, 220px);
    max-height: 150px;
    margin-left: auto;
    margin-right: auto;
}

/* Extra safety: any image in the sidebar header area stays within pleasant bounds */
.sidebar .mb-3 img { max-height: 150px; width: auto; }

@media (max-width: 992px) {
    .brand-badge { width: min(22vw, 180px); max-height: 120px; }
}

/* ------------------------------
   Header com logo (Files page)
   ------------------------------ */
.header {
    text-align: center;
    padding-top: 30px;
    padding-bottom: 20px;
}

.logo {
    display: block;
    margin: 40px auto 10px auto; /* centraliza e dá espaçamento */
    width: auto;
    height: 150px; /* altura ideal — pode ajustar entre 120px e 160px se necessário */
    max-width: 15%; /* limita o tamanho em telas grandes */
    object-fit: contain; /* mantém proporção da imagem */
    transition: all 0.3s ease;
}

.logo:hover {
    transform: scale(1.03);
    opacity: .95;
}

.titulo-sistema {
    font-family: "Segoe UI", sans-serif;
    font-weight: 600;
    color: #333;
    font-size: 24px;
    margin-top: 10px;
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .logo { height: 100px; max-width: 40%; }
    .titulo-sistema { font-size: 20px; }
}