/* ============================================================
   Membership Management System – app.css
   Custom styles layered on top of Bootstrap 5
   ============================================================ */

/* ── Variables ─────────────────────────────────────────────── */
:root {
    --primary:       #4f46e5;
    --primary-dark:  #4338ca;
    --primary-light: #ede9fe;
    --sidebar-bg:    #1a1a2e;
    --sidebar-hover: #16213e;
    --sidebar-width: 260px;
    --top-nav-h:     60px;
    --radius:        12px;
    --shadow:        0 2px 15px rgba(0,0,0,0.08);
    --shadow-md:     0 4px 24px rgba(0,0,0,0.12);

    /* ── Baseline design tokens (added — non-breaking, additive) ──────── */
    /* Semantic colours */
    --success:        #16a34a;  --success-bg: #dcfce7;  --success-fg: #166534;
    --danger:         #dc2626;  --danger-bg:  #fee2e2;  --danger-fg:  #991b1b;
    --warning:        #d97706;  --warning-bg: #fef9c3;  --warning-fg: #854d0e;
    --info:           #0284c7;  --info-bg:    #e0f2fe;  --info-fg:    #075985;
    /* Surfaces & text */
    --surface:        #ffffff;
    --surface-2:      #f8fafc;
    --bg:             #f3f4f6;
    --border:         #e5e7eb;
    --border-strong:  #d1d5db;
    --text:           #1f2937;
    --text-muted:     #6b7280;
    --text-subtle:    #94a3b8;
    /* Radius scale */
    --radius-sm:      8px;
    --radius-lg:      16px;
    --radius-pill:    999px;
    /* Spacing scale (4px base) */
    --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
    --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
    /* Type scale */
    --fs-xs: .72rem; --fs-sm: .8rem; --fs-base: .9rem;
    --fs-md: 1rem;   --fs-lg: 1.15rem; --fs-xl: 1.4rem; --fs-2xl: 1.75rem;
    /* Elevation + motion */
    --shadow-sm:      0 1px 2px rgba(0,0,0,.06);
    --shadow-lg:      0 12px 32px rgba(0,0,0,.16);
    --ring:           0 0 0 3px rgba(79,70,229,.30);
    --transition:     .18s cubic-bezier(.4,0,.2,1);
}

/* ── Base ───────────────────────────────────────────────────── */
*,
*::before,
*::after { box-sizing: border-box; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size:   0.9rem;
    color:       #1f2937;
    background:  #f3f4f6;
}

a { text-decoration: none; }

/* ── Layout Wrapper ─────────────────────────────────────────── */
.wrapper {
    display:    flex;
    min-height: 100vh;
    overflow-x: hidden;
}

/* ── Sidebar ────────────────────────────────────────────────── */
.sidebar {
    width:          var(--sidebar-width);
    min-height:     100vh;
    background:     var(--sidebar-bg);
    display:        flex;
    flex-direction: column;
    flex-shrink:    0;
    position:       relative;
    z-index:        100;
    transition:     width .3s ease, transform .3s ease;
}

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

.sidebar-brand .brand-icon {
    width:           36px;
    height:          36px;
    border-radius:   10px;
    background:      linear-gradient(135deg, var(--primary), #7c3aed);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       16px;
    color:           #fff;
    flex-shrink:     0;
}

.sidebar .nav-section {
    padding:     16px 12px 4px;
    font-size:   0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .1em;
    color:       rgba(255,255,255,0.3);
}

.sidebar .nav-link {
    color:         rgba(255,255,255,0.65);
    padding:       9px 14px;
    border-radius: 8px;
    margin:        2px 8px;
    display:       flex;
    align-items:   center;
    gap:           10px;
    font-size:     0.86rem;
    font-weight:   500;
    transition:    all .18s ease;
    white-space:   nowrap;
    overflow:      hidden;
}

.sidebar .nav-link:hover {
    background: var(--sidebar-hover);
    color:      #fff;
    transform:  translateX(2px);
}

.sidebar .nav-link.active {
    background: linear-gradient(135deg, rgba(79,70,229,0.35), rgba(124,58,237,0.25));
    color:      #fff;
    border-left: 3px solid var(--primary);
}

.sidebar .nav-link i {
    width:     18px;
    font-size: 0.88rem;
    flex-shrink: 0;
    text-align: center;
}

.sidebar-footer {
    margin-top:    auto;
    padding:       16px;
    border-top:    1px solid rgba(255,255,255,0.06);
    font-size:     0.82rem;
    color:         rgba(255,255,255,0.5);
}

.sidebar-footer .user-info {
    display:     flex;
    align-items: center;
    gap:         10px;
}

.sidebar-footer .user-avatar {
    width:           34px;
    height:          34px;
    border-radius:   50%;
    background:      linear-gradient(135deg, var(--primary), #7c3aed);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       0.85rem;
    font-weight:     700;
    color:           #fff;
    flex-shrink:     0;
}

/* ── Top Navbar ─────────────────────────────────────────────── */
.top-navbar {
    height:       var(--top-nav-h);
    background:   #fff;
    border-bottom: 1px solid #e5e7eb;
    box-shadow:   0 1px 4px rgba(0,0,0,0.05);
    display:      flex;
    align-items:  center;
    padding:      0 20px;
    gap:          12px;
    position:     sticky;
    top:          0;
    z-index:      50;
}

.top-navbar .page-title {
    font-size:   1rem;
    font-weight: 600;
    color:       #1f2937;
}

.top-navbar .notification-btn {
    position: relative;
    width:    36px;
    height:   36px;
    display:  flex;
    align-items:     center;
    justify-content: center;
    border-radius:   50%;
    background:      #f3f4f6;
    color:           #6b7280;
    border:          none;
    transition:      all .2s;
}

.top-navbar .notification-btn:hover { background: var(--primary-light); color: var(--primary); }

.notification-badge {
    position:   absolute;
    top:        -2px;
    right:      -2px;
    width:      16px;
    height:     16px;
    background: #dc2626;
    border-radius: 50%;
    font-size:  0.6rem;
    font-weight: 700;
    color:      #fff;
    display:    flex;
    align-items:     center;
    justify-content: center;
    border:     2px solid #fff;
}

/* ── Main Content ───────────────────────────────────────────── */
.main-content {
    flex:       1;
    min-width:  0;
    display:    flex;
    flex-direction: column;
    background: #f3f4f6;
    min-height: 100vh;
}

/* ── Cards ──────────────────────────────────────────────────── */
.card {
    border-radius: var(--radius) !important;
    box-shadow:    var(--shadow);
}

.stat-card .icon {
    width:           52px;
    height:          52px;
    border-radius:   12px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       20px;
    flex-shrink:     0;
}

/* ── Tables ─────────────────────────────────────────────────── */
.table > :not(caption) > * > * { padding: .65rem .75rem; }
.table thead th {
    font-size:   0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color:       #6b7280;
    border-bottom: 1px solid #e5e7eb;
}
.table-hover > tbody > tr:hover { background: #f9fafb; }

/* ── Status Badges ──────────────────────────────────────────── */
.badge-active   { background: #dcfce7 !important; color: #166534 !important; }
.badge-expired  { background: #fee2e2 !important; color: #991b1b !important; }
.badge-pending  { background: #fef9c3 !important; color: #854d0e !important; }

/* ── Forms ──────────────────────────────────────────────────── */
.form-control:focus,
.form-select:focus {
    border-color: var(--primary);
    box-shadow:   0 0 0 3px rgba(79,70,229,0.12);
}

/* ── Buttons ────────────────────────────────────────────────── */
.btn {
    border-radius: 8px;
    font-weight:   500;
    font-size:     0.875rem;
    transition:    all .2s;
}
.btn-xs { padding: .2rem .55rem; font-size: .75rem; }

.btn[style*="background:#4f46e5"]:hover {
    background: var(--primary-dark) !important;
    transform:  translateY(-1px);
    box-shadow: 0 4px 12px rgba(79,70,229,0.35);
}

/* ── Member Cards ───────────────────────────────────────────── */
.member-card {
    transition: box-shadow .2s, transform .2s;
}
.member-card:hover {
    box-shadow: 0 8px 25px rgba(79,70,229,0.15) !important;
    transform:  translateY(-3px);
}

/* ── Notifications ──────────────────────────────────────────── */
.notification-item { transition: background .15s; }
.notification-item:hover { background: #f9fafb; }

/* ── Calendar ───────────────────────────────────────────────── */
.fc .fc-button-primary {
    background:    var(--primary) !important;
    border-color:  var(--primary) !important;
    border-radius: 6px !important;
    font-size:     0.82rem !important;
}
.fc .fc-button-primary:hover { background: var(--primary-dark) !important; }
.fc .fc-button-active         { background: #312e81 !important; }
.fc .fc-toolbar-title         { font-size: 1rem !important; font-weight: 700; }
.fc .fc-daygrid-event         { border-radius: 4px !important; font-size: 0.75rem; }

/* ── Sidebar mobile ─────────────────────────────────────────── */
@media (max-width: 991.98px) {
    /* The sidebar is fixed off-screen on mobile */
    .sidebar {
        position:   fixed !important;
        top:        0 !important;
        left:       0 !important;
        height:     100% !important;
        transform:  translateX(-100%) !important;
        transition: transform .28s cubic-bezier(.4,0,.2,1) !important;
        z-index:    1050 !important;
        box-shadow: none;
    }
    .sidebar.show {
        transform:  translateX(0) !important;
        box-shadow: 4px 0 28px rgba(0,0,0,0.35) !important;
    }
    .sidebar-overlay {
        display:    none;
        position:   fixed;
        inset:      0;
        background: rgba(0,0,0,0.45);
        z-index:    1040;
        backdrop-filter: blur(2px);
    }
    .sidebar-overlay.show { display: block; }

    /* Main content fills full width */
    .main-content { margin-left: 0 !important; }

    /* Page padding reduced */
    .page-content { padding: 16px 14px 100px !important; }

    /* Tables scroll horizontally */
    .table-container,
    .card-body .table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* Stat cards stack nicely */
    .row.g-3 > [class*="col-"] { margin-bottom: 0; }

    /* Reduce hero padding on mobile */
    .profile-hero { padding: 24px 20px !important; }
}

/* ── Global table responsiveness ─────────────────────────────── */
.card-body { overflow-x: auto; }
/* But not for special card bodies like chat */
.chat-shell .card-body { overflow-x: visible; }

/* ── Mobile bottom navigation ───────────────────────────────── */
/* All mobile-only nav elements are hidden on desktop by default.
   The media query below enables them on small screens.  Without
   these rules the drawer and backdrop would render as plain block
   elements and their content would appear directly in the page body. */
.mob-tab-bar,
.mob-drawer,
.mob-drawer-backdrop {
    display: none;
}
@media (max-width: 991.98px) {
    /* Tab bar -------------------------------------------------------- */
    .mob-tab-bar {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1040;
        background: #fff;
        border-top: 1px solid #e5e7eb;
        box-shadow: 0 -2px 16px rgba(0,0,0,.10);
        padding-bottom: env(safe-area-inset-bottom, 0px);
        -webkit-tap-highlight-color: transparent;
        will-change: transform;
        transform: translateZ(0);
    }
    .mob-tab-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 9px 2px 7px;
        color: #94a3b8;
        text-decoration: none;
        font-size: .6rem;
        font-weight: 600;
        letter-spacing: .01em;
        gap: 3px;
        position: relative;
        cursor: pointer;
        background: none;
        border: none;
        outline: none;
        transition: color .18s ease;
    }
    .mob-tab-item i { font-size: 1.15rem; line-height: 1; }
    .mob-tab-item.active { color: #4f46e5; }
    .mob-tab-item.active::before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 28px;
        height: 3px;
        background: #4f46e5;
        border-radius: 0 0 3px 3px;
    }
    .mob-tab-item:active { opacity: .7; }

    /* Unread badge */
    .mob-tab-badge {
        position: absolute;
        top: 7px;
        left: calc(50% + 4px);
        background: #dc2626;
        color: #fff;
        font-size: .58rem;
        font-weight: 700;
        border-radius: 10px;
        padding: 1px 5px;
        min-width: 16px;
        text-align: center;
        border: 2px solid #fff;
        line-height: 1.4;
        pointer-events: none;
    }

    /* Drawer overlay ------------------------------------------------- */
    .mob-drawer-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 1041;
        background: rgba(0,0,0,.45);
        -webkit-tap-highlight-color: transparent;
    }
    .mob-drawer-backdrop.show { display: block; }

    /* Slide-up drawer ------------------------------------------------ */
    .mob-drawer {
        display: block; /* override the desktop display:none */
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1042;
        background: #fff;
        border-radius: 20px 20px 0 0;
        box-shadow: 0 -8px 32px rgba(0,0,0,.18);
        transform: translateY(100%);
        transition: transform .32s cubic-bezier(.4,0,.2,1);
        will-change: transform;
        max-height: 75vh;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
    }
    .mob-drawer.open { transform: translateY(0); }

    /* Drag handle */
    .mob-drawer-handle {
        width: 36px;
        height: 4px;
        background: #d1d5db;
        border-radius: 2px;
        margin: 12px auto 8px;
    }

    /* Drawer title */
    .mob-drawer-title {
        font-size: .72rem;
        font-weight: 700;
        color: #9ca3af;
        text-transform: uppercase;
        letter-spacing: .07em;
        padding: 4px 20px 8px;
    }

    /* Drawer nav items */
    .mob-drawer-item {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 12px 20px;
        color: #374151;
        text-decoration: none;
        font-size: .9rem;
        font-weight: 500;
        transition: background .15s;
        border-radius: 10px;
        margin: 1px 8px;
    }
    .mob-drawer-item:active,
    .mob-drawer-item:hover { background: #f5f3ff; color: #4f46e5; }
    .mob-drawer-item.active { color: #4f46e5; background: #eef2ff; font-weight: 600; }
    .mob-drawer-item i {
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        background: #f3f4f6;
        font-size: .9rem;
        flex-shrink: 0;
        transition: background .15s, color .15s;
    }
    .mob-drawer-item.active i { background: #4f46e5; color: #fff; }

    /* Drawer section divider */
    .mob-drawer-divider {
        height: 1px;
        background: #f3f4f6;
        margin: 8px 20px;
    }

    /* Keep page content from being hidden behind tab bar */
    .page-content { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
}

/* Legacy class kept for backward compatibility — hidden on all screens now */
.mobile-bottom-nav { display: none !important; }

/* ── Scrollbar (webkit) ─────────────────────────────────────── */
::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #c7d2fe; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--primary); }

/* ── Toast ──────────────────────────────────────────────────── */
.toast-container { z-index: 9999; }

/* ── Loading spinner overlay ───────────────────────────────── */
.page-loader {
    position:   fixed;
    inset:      0;
    background: rgba(255,255,255,0.7);
    display:    flex;
    align-items:     center;
    justify-content: center;
    z-index:    9998;
}

/* ── Print styles ───────────────────────────────────────────── */
@media print {
    .sidebar, .top-navbar, .btn, .no-print { display: none !important; }
    .main-content { margin: 0; padding: 0; }
    .card { box-shadow: none !important; border: 1px solid #ddd !important; }
    body { background: #fff; font-size: 11pt; }
}

/* ── Utility ────────────────────────────────────────────────── */
.min-width-0   { min-width: 0; }
.cursor-pointer { cursor: pointer; }
.font-monospace { font-family: 'Courier New', Courier, monospace; }
.text-truncate  { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.border-dashed  { border-style: dashed !important; }

/* Bootstrap subtle color backfill (for older BS5 versions) */
.bg-success-subtle { background-color: #dcfce7 !important; }
.bg-danger-subtle  { background-color: #fee2e2 !important; }
.bg-warning-subtle { background-color: #fef9c3 !important; }
.bg-primary-subtle { background-color: #ede9fe !important; }
.bg-info-subtle    { background-color: #e0f2fe !important; }
.text-success      { color: #166534 !important; }
.text-danger       { color: #991b1b !important; }
.text-warning      { color: #854d0e !important; }
.text-primary      { color: #4f46e5 !important; }
.text-info         { color: #0284c7 !important; }

/* ============================================================
   Global polish & accessibility layer (added)
   Subtle, additive refinements — no structural overrides.
   ============================================================ */

/* ── Accessibility: visible keyboard focus everywhere ──────────── */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.nav-link:focus-visible,
.cp-nav-link:focus-visible,
.page-link:focus-visible,
[tabindex]:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    box-shadow: var(--ring) !important;
    border-radius: var(--radius-sm);
}
.btn:focus:not(:focus-visible) { box-shadow: none; }

/* ── Buttons: consistent micro-interactions (not inline-hack dependent) */
.btn { letter-spacing: .005em; }
.btn:hover  { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary,
.btn-success,
.btn-danger,
.btn-warning,
.btn-info,
.btn-dark { box-shadow: var(--shadow-sm); }
.btn-primary:hover { box-shadow: 0 4px 14px rgba(79,70,229,.32); }
.btn-success:hover { box-shadow: 0 4px 14px rgba(22,163,74,.30); }
.btn-danger:hover  { box-shadow: 0 4px 14px rgba(220,38,38,.28); }
.btn-outline-secondary:hover { color: var(--text); }
.btn:disabled, .btn.disabled { opacity: .55; transform: none !important; box-shadow: none !important; }

/* ── Cards: unified elevation + optional hover lift ────────────── */
.card { border: 1px solid var(--border); transition: box-shadow var(--transition), transform var(--transition); }
.cp-card {
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
    transition: box-shadow var(--transition), transform var(--transition);
}
.card-hover:hover,
.card.is-clickable:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

/* ── Tables: readability ───────────────────────────────────────── */
.table > :not(caption) > * > * { vertical-align: middle; }
.table-hover > tbody > tr { transition: background var(--transition); }
.table thead th { white-space: nowrap; }

/* ── Forms: clearer labels & help text ─────────────────────────── */
.form-label { font-weight: 600; font-size: var(--fs-sm); color: var(--text); margin-bottom: .3rem; }
.form-text  { color: var(--text-muted); }
.input-group-text { background: var(--surface-2); border-color: var(--border); }

/* ── Badges: consistent pill shape ─────────────────────────────── */
.badge { font-weight: 600; letter-spacing: .02em; padding: .4em .7em; }
.badge.rounded-pill { padding: .42em .8em; }

/* ── Reusable empty / loading states ───────────────────────────── */
.ui-empty {
    text-align: center; padding: var(--space-10) var(--space-6);
    color: var(--text-muted);
}
.ui-empty .ui-empty-icon {
    width: 64px; height: 64px; border-radius: 50%;
    background: var(--surface-2); color: var(--text-subtle);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; margin: 0 auto var(--space-4);
}
.ui-empty h6 { color: var(--text); font-weight: 700; margin-bottom: .25rem; }
.ui-skel {
    background: linear-gradient(90deg,#eef0f3 25%,#f6f7f9 37%,#eef0f3 63%);
    background-size: 400% 100%;
    animation: uiShimmer 1.3s ease infinite;
    border-radius: var(--radius-sm); min-height: 14px;
}
@keyframes uiShimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* ── Tile hover (replaces inline onmouseover opacity/bg hacks) ──── */
.qa-tile { transition: transform var(--transition), box-shadow var(--transition), filter var(--transition); }
.qa-tile:hover { transform: translateY(-2px); filter: brightness(.97); box-shadow: var(--shadow-sm); }
.tile-hover { transition: background var(--transition), border-color var(--transition); }
.tile-hover:hover { background: var(--surface-2) !important; border-color: var(--border-strong) !important; }

/* ── Refined scrollbars (desktop) ──────────────────────────────── */
@media (pointer: fine) {
    * { scrollbar-width: thin; scrollbar-color: #c7ccd6 transparent; }
    *::-webkit-scrollbar { width: 9px; height: 9px; }
    *::-webkit-scrollbar-thumb { background: #c7ccd6; border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
    *::-webkit-scrollbar-thumb:hover { background: #a8b0bd; background-clip: content-box; }
    *::-webkit-scrollbar-track { background: transparent; }
}

/* ── Larger touch targets on small screens ─────────────────────── */
@media (max-width: 575.98px) {
    .btn { padding-top: .5rem; padding-bottom: .5rem; }
    .btn-sm { padding-top: .4rem; padding-bottom: .4rem; }
    .table > :not(caption) > * > * { padding: .7rem .6rem; }
}

/* ── Respect reduced-motion preference ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .btn:hover, .card-hover:hover, .card.is-clickable:hover { transform: none; }
}