/* Portal styles. Bootstrap (loaded in base.html) does most of the work; these add the look of
   the web dev repo (black top bar, outlined nav links) and the big phone-friendly buttons. */

/* --- Colors used across the portal. --brand is the blue of the Berati Ndan Mbetjet logo. --- */
:root {
    --brand: #1340bc;
    --brand-dark: #0e3191;
}

/* --- From the web dev repo's main.css (top bar now in the logo blue instead of black) --- */
body {
    font-family: Arial, sans-serif;
    background-color: white;
    margin-bottom: 75px;
}

.brand-bar {
    background-color: var(--brand);
}

.nav-link {
    border: 1px solid rgba(255, 255, 255, 0.45) !important;
    border-radius: 0.375rem;
    color: white !important;
}
.nav-link:hover { background-color: var(--brand-dark); }

/* Home icon and section menu (top left of the bar) */
.home-link { color: #fff; font-size: 1.5rem; line-height: 1; padding: 4px 6px; border-radius: 0.375rem; }
.home-link:hover { color: #fff; background-color: var(--brand-dark); }
.section-menu { color: #fff; border: 1px solid rgba(255, 255, 255, 0.45); }
.section-menu:hover, .section-menu:focus, .section-menu.show { color: #fff; background-color: var(--brand-dark); }
.dropdown-item.active, .dropdown-item:active { background-color: var(--brand); }
.dropdown-item { padding-top: 10px; padding-bottom: 10px; }   /* easier to tap on a phone */

/* Buttons and text in the logo blue (error pages) */
.btn-brand { background-color: var(--brand); border-color: var(--brand); color: #fff; }
.btn-brand:hover { background-color: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
.text-brand { color: var(--brand); }

@media screen and (max-width: 576px) {
    .hide-on-small { display: none; }
}

/* --- Language switch (SQ / EN) --- */
.lang button {
    padding: 4px 9px; font-size: 0.85rem; font-weight: 600; border-radius: 6px; margin-left: 4px;
    border: 1px solid #fff; background: transparent; color: #fff;
}
.lang button.active { background: #fff; color: var(--brand); }

/* --- Big buttons (home, resident, employee, admin pages): easy to tap on a phone --- */
.big-buttons { display: flex; flex-direction: column; gap: 16px; max-width: 480px; margin: 0 auto; }
.big-button {
    display: flex; align-items: center; gap: 16px; padding: 22px; border-radius: 16px;
    color: #fff; text-decoration: none; font-size: 1.35rem; font-weight: 600; cursor: pointer;
}
.big-button:hover { color: #fff; filter: brightness(1.08); }
.big-button .icon { font-size: 2.1rem; }
.big-button.disabled { opacity: 0.5; cursor: default; }
.big-button.resident { background: #2e86c1; }
.big-button.employee { background: #1f7a45; }
.big-button.admin { background: #7d3c98; }
[hidden] { display: none !important; }

/* --- Scan page --- */
.scan-help, .scan-private { margin: 0; color: #444; line-height: 1.4; }
.scan-private { font-size: 0.85rem; color: #666; }
.scan-status { margin: 0; padding: 12px 14px; border-radius: 10px; background: #f4f7f5; line-height: 1.4; }
.check-list { margin: 0; padding: 10px 14px 10px 32px; border-radius: 10px; background: #fff4d6; list-style: disc; }
.scan-preview { width: 100%; height: auto; margin-top: 8px; border-radius: 8px; background: #fff; }