/* =========================================
   Base & Reset
   ========================================= */

body {
    background-color: var(--bg-body);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 16px; /* Ensure base size prevents zoom on mobile */
    color: var(--text-main);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

h2 {
    color: #000;
}

a {
    color: var(--primary-color);
}

a:hover {
    color: var(--primary-hover);
}

/* =========================================
   Layout: Header overrides (Bootstrap adds most of the styling)
   ========================================= */

.bg-header {
    background-color: var(--bg-header) !important;
}

.nav-logout-btn {
    border-color: rgba(255,255,255,0.5);
    color: rgba(255,255,255,0.8);
}
.nav-logout-btn:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

/* Active links in Bootstrap nav */
.navbar-dark .navbar-nav .nav-link.active {
    font-weight: 600;
    position: relative;
}

.navbar-dark .navbar-nav .nav-link.active::after {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 8px;
    right: 8px;
    height: 2px;
    background-color: currentColor;
    border-radius: 2px;
}

/* =========================================
   Layout
   ========================================= */

.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Custom max-width utilities not present in Bootstrap */
.max-width-500 {
    max-width: var(--container-width-sm) !important;
}
.max-width-1200 {
    max-width: var(--container-width-md) !important;
}