/* Shared visual theme for MembershipPortal (admin + member).
   Single source of truth for brand color, cards, tables, and the
   page-header pattern used across the app, replacing scattered
   per-page inline <style> blocks. */

:root {
    --brand-color: #198754;
    --brand-color-dark: #146c43;
    --brand-color-light: #d1e7dd;
    --surface: #ffffff;
    --page-bg: #f5f7f6;
    --text-muted: #6c757d;
    --radius: 10px;
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
}

body {
    background-color: var(--page-bg);
}

/* Buttons */
.btn-primary,
.btn-success {
    background-color: var(--brand-color);
    border-color: var(--brand-color);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-success:hover,
.btn-success:focus {
    background-color: var(--brand-color-dark);
    border-color: var(--brand-color-dark);
}

.btn-outline-primary,
.btn-outline-success {
    color: var(--brand-color);
    border-color: var(--brand-color);
}

.btn-outline-primary:hover,
.btn-outline-success:hover {
    background-color: var(--brand-color);
    border-color: var(--brand-color);
}

/* Page header pattern: a title + optional action button, used at the
   top of most admin/member pages instead of ad-hoc markup per page. */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: 1.5rem;
}

.page-header h1,
.page-header h2,
.page-header h3 {
    margin: 0;
    font-weight: 600;
}

/* Cards */
.card {
    border: none;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.card-header {
    background-color: var(--surface);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    font-weight: 600;
}

/* Tables */
.table thead th {
    background-color: var(--brand-color-light);
    color: #0f3d28;
    font-weight: 600;
    border-bottom: none;
}

.table-hover tbody tr:hover {
    background-color: rgba(25, 135, 84, 0.06);
}

/* Navbars */
.navbar-brand {
    font-weight: 700;
}

nav.navbar.bg-dark {
    background-color: #14251d !important;
}

/* Admin left sidebar layout */
.admin-shell {
    display: flex;
    min-height: 100vh;
    align-items: stretch;
}

.admin-sidebar {
    width: 260px;
    flex-shrink: 0;
    background-color: #14251d;
    color: #fff;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.admin-sidebar .sidebar-brand {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 1rem;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.admin-sidebar .sidebar-brand img {
    width: 32px;
    height: 32px;
}

.admin-sidebar .nav-section-title {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .65rem 1rem;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    cursor: pointer;
}

.admin-sidebar .nav-section-title:hover,
.admin-sidebar .sidebar-link:hover {
    background-color: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.admin-sidebar .sidebar-link {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem 1rem .5rem 2.5rem;
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    font-size: .92rem;
}

.admin-sidebar .sidebar-link.active {
    background-color: var(--brand-color);
    color: #fff;
}

.admin-sidebar .nav-section-title .bi-chevron-down {
    margin-left: auto;
    transition: transform .2s ease;
}

.admin-sidebar .nav-section-title[aria-expanded="true"] .bi-chevron-down {
    transform: rotate(180deg);
}

.admin-main {
    flex: 1 1 auto;
    min-width: 0;
}

.admin-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .75rem 1.25rem;
    background-color: var(--surface);
    box-shadow: var(--shadow-sm);
}

@media (max-width: 991.98px) {
    .admin-sidebar.static {
        display: none;
    }
}

/* Alerts */
.alert {
    border-radius: var(--radius);
}

/* Auth pages (Login/Register/AccessDenied) */
.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: stretch;
    background-color: var(--page-bg);
}

/* Full-page image background for single-card auth pages (e.g. AccessDenied) */
.auth-backdrop {
    min-height: 100vh;
    display: flex;
    align-items: center;
    background-color: var(--page-bg);
    background-image: url('/images/background.jpeg');
    background-size: cover;
    background-position: center;
}

/* Left visual panel for split-screen login pages. The background image is
   scaled/cropped to fill just this panel (not the full page width), so it
   never looks stretched or over-zoomed regardless of screen size. */
.auth-visual {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: linear-gradient(rgba(20, 37, 29, 0.55), rgba(20, 37, 29, 0.55)), url('/images/background.jpeg');
    background-size: cover;
    background-position: center;
}

.auth-card {
    max-width: 450px;
    width: 100%;
    background: var(--surface);
    padding: 2rem;
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
}

.auth-brand {
    text-align: center;
    padding: 2rem;
    color: #fff;
}

.auth-brand img {
    width: 96px;
    height: 96px;
    object-fit: contain;
    margin-bottom: 1rem;
}