/**
 * 360 Prayer — Main Stylesheet
 *
 * Mobile-first responsive design.
 * Color palette derived from prototype (sage green).
 *
 * @package Prayer360
 */

/* ═══════════════════════════════════════
   CSS Custom Properties (Design Tokens)
   ═══════════════════════════════════════ */
:root {
    /* Primary (Green — matches prototype #28AF60) */
    --color-primary:        #28AF60;
    --color-primary-light:  #33C46F;
    --color-primary-dark:   #1F8F4E;
    --color-primary-50:     #EEFBF3;
    --color-primary-100:    #D0F4DE;
    --color-primary-200:    #A8E8BF;

    /* Accent */
    --color-accent:         #D4A843;
    --color-accent-light:   #E5C36A;

    /* Neutrals */
    --color-white:          #FFFFFF;
    --color-gray-50:        #F8FAF9;
    --color-gray-100:       #F1F5F3;
    --color-gray-200:       #E2E8E4;
    --color-gray-300:       #C5CFC8;
    --color-gray-400:       #94A39A;
    --color-gray-500:       #6B7D73;
    --color-gray-600:       #4A5A51;
    --color-gray-700:       #344039;
    --color-gray-800:       #1E2822;
    --color-gray-900:       #111916;

    /* Semantic */
    --color-success:        #22C55E;
    --color-success-bg:     #F0FDF4;
    --color-warning:        #EAB308;
    --color-warning-bg:     #FEFCE8;
    --color-danger:         #EF4444;
    --color-danger-bg:      #FEF2F2;
    --color-info:           #3B82F6;
    --color-info-bg:        #EFF6FF;

    /* Typography */
    --font-family:          'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-size-xs:         0.75rem;
    --font-size-sm:         0.875rem;
    --font-size-base:       1rem;
    --font-size-lg:         1.125rem;
    --font-size-xl:         1.25rem;
    --font-size-2xl:        1.5rem;
    --font-size-3xl:        1.875rem;
    --font-size-4xl:        2.25rem;

    /* Spacing */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.25rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;

    /* Borders & Radius */
    --radius-sm:   0.375rem;
    --radius-md:   0.5rem;
    --radius-lg:   0.75rem;
    --radius-xl:   1rem;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm:   0 1px 2px rgba(0,0,0,0.06);
    --shadow-md:   0 4px 6px -1px rgba(0,0,0,0.08), 0 2px 4px -1px rgba(0,0,0,0.04);
    --shadow-lg:   0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -2px rgba(0,0,0,0.04);
    --shadow-xl:   0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 350ms ease;

    /* Layout */
    --header-height: 64px;
    --container-max:  1200px;
    --container-narrow: 900px;
}

/* ═══════════════════════════════════════
   Reset & Base
   ═══════════════════════════════════════ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: 1.6;
    color: var(--color-gray-800);
    background-color: var(--color-gray-50);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-primary); text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: var(--color-primary-light); }
button { cursor: pointer; font-family: inherit; }
input, select, textarea { font-family: inherit; font-size: inherit; }

h1, h2, h3, h4, h5, h6 {
    color: var(--color-gray-900);
    line-height: 1.3;
    font-weight: 600;
}

.site-main { flex: 1; }

/* ═══════════════════════════════════════
   Layout: Container
   ═══════════════════════════════════════ */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding-left: var(--space-4);
    padding-right: var(--space-4);
}

.container--narrow {
    max-width: var(--container-narrow);
}

/* ═══════════════════════════════════════
   Header
   ═══════════════════════════════════════ */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--color-white);
    border-bottom: 1px solid var(--color-gray-200);
    height: var(--header-height);
}

.header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-height);
    gap: var(--space-4);
}

.header__logo {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: #171D4F;
    font-weight: 700;
    font-size: var(--font-size-lg);
    white-space: nowrap;
    flex-shrink: 0;
}

.header__logo:hover { color: #171D4F; }

.header__logo-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    background: var(--color-primary);
    border-radius: 50%;
}

.header__logo-icon svg {
    display: block;
    width: 16px;
    height: 16px;
}

.header__logo-text {
    font-size: var(--font-size-lg);
    letter-spacing: -0.01em;
}

.header__logo .custom-logo {
    height: 36px;
    width: auto;
}

/* Desktop Nav */
.header__nav {
    display: none;
    align-items: center;
    gap: var(--space-6);
}

.nav-link {
    color: var(--color-gray-600);
    font-size: var(--font-size-sm);
    font-weight: 500;
    padding: var(--space-2) 0;
    position: relative;
    transition: color var(--transition-fast);
}

.nav-link:hover,
.nav-link--active {
    color: var(--color-primary);
}

.nav-link--active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--color-primary);
    border-radius: 1px;
}

/* Header Actions */
.header__actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-shrink: 0;
}

/* User Menu */
.header__user { position: relative; }

.header__user-btn {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    background: none;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-full);
    padding: var(--space-1) var(--space-3) var(--space-1) var(--space-1);
    color: var(--color-gray-700);
    transition: all var(--transition-fast);
}

.header__user-btn:hover {
    border-color: var(--color-gray-300);
    background: var(--color-gray-50);
}

.header__avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: var(--font-size-sm);
    text-transform: uppercase;
}

.header__username {
    display: none;
    font-size: var(--font-size-sm);
    font-weight: 500;
}

.icon--chevron {
    transition: transform var(--transition-fast);
}

.header__user-btn[aria-expanded="true"] .icon--chevron {
    transform: rotate(180deg);
}

/* Dropdown */
.header__dropdown {
    display: none;
    position: absolute;
    top: calc(100% + var(--space-2));
    right: 0;
    min-width: 200px;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--space-2);
    z-index: 110;
}

.header__dropdown.is-open { display: block; }

.dropdown__item {
    display: block;
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    color: var(--color-gray-700);
    font-size: var(--font-size-sm);
    text-align: left;
    background: none;
    border: none;
    transition: background var(--transition-fast);
}

.dropdown__item:hover {
    background: var(--color-gray-100);
    color: var(--color-gray-900);
}

.dropdown__item--logout { color: var(--color-danger); }
.dropdown__item--logout:hover { background: var(--color-danger-bg); color: var(--color-danger); }

.dropdown__divider {
    height: 1px;
    background: var(--color-gray-200);
    margin: var(--space-2) var(--space-3);
}

/* Hamburger */
.header__hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    padding: 6px;
}

.header__hamburger span {
    display: block;
    height: 2px;
    background: var(--color-gray-700);
    border-radius: 2px;
    transition: all var(--transition-base);
}

.header__hamburger.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.header__hamburger.is-active span:nth-child(2) { opacity: 0; }
.header__hamburger.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile Nav */
.mobile-nav {
    display: none;
    position: absolute;
    top: var(--header-height);
    left: 0;
    right: 0;
    background: var(--color-white);
    border-bottom: 1px solid var(--color-gray-200);
    box-shadow: var(--shadow-lg);
    max-height: calc(100vh - var(--header-height));
    overflow-y: auto;
}

.mobile-nav.is-open { display: block; }

.mobile-nav__inner {
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.mobile-nav__link {
    display: block;
    padding: var(--space-3) var(--space-4);
    color: var(--color-gray-700);
    font-size: var(--font-size-base);
    font-weight: 500;
    border-radius: var(--radius-md);
    background: none;
    border: none;
    text-align: left;
    width: 100%;
    transition: background var(--transition-fast);
}

.mobile-nav__link:hover { background: var(--color-gray-100); color: var(--color-primary); }
.mobile-nav__link--logout { color: var(--color-danger); }
.mobile-nav__link--signup { color: var(--color-primary); font-weight: 600; }

.mobile-nav__divider {
    height: 1px;
    background: var(--color-gray-200);
    margin: var(--space-2) 0;
}

/* ═══════════════════════════════════════
   Buttons
   ═══════════════════════════════════════ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    font-size: var(--font-size-sm);
    font-weight: 600;
    border-radius: var(--radius-md);
    border: 2px solid transparent;
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
    text-align: center;
    line-height: 1.4;
}

.btn--primary {
    background: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}

.btn--primary:hover {
    background: var(--color-primary-light);
    border-color: var(--color-primary-light);
    color: var(--color-white);
}

.btn--outline {
    background: transparent;
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.btn--outline:hover {
    background: var(--color-primary);
    color: var(--color-white);
}

.btn--outline-light {
    background: transparent;
    color: var(--color-white);
    border-color: rgba(255,255,255,0.6);
}

.btn--outline-light:hover {
    background: rgba(255,255,255,0.15);
    border-color: var(--color-white);
    color: var(--color-white);
}

/* Neutral / secondary button — filled light grey, lower visual weight than primary.
   Used for the admin "Review" link on approval cards so it reads as a real
   button (not a text link) while still deferring to the Approve primary CTA. */
.btn--secondary {
    background: var(--color-gray-100);
    color: var(--color-gray-700);
    border-color: var(--color-gray-200);
}
.btn--secondary:hover {
    background: var(--color-gray-200);
    border-color: var(--color-gray-300);
    color: var(--color-gray-900);
}

.btn--danger {
    background: var(--color-danger);
    color: var(--color-white);
    border-color: var(--color-danger);
}

.btn--danger:hover {
    background: #DC2626;
    border-color: #DC2626;
    color: var(--color-white);
}

.btn--ghost {
    background: transparent;
    color: var(--color-gray-600);
    border-color: transparent;
}

.btn--ghost:hover {
    background: var(--color-gray-100);
    color: var(--color-gray-800);
}

.btn--sm  { padding: var(--space-2) var(--space-3); font-size: var(--font-size-xs); }
.btn--lg  { padding: var(--space-4) var(--space-8); font-size: var(--font-size-base); }

.btn--disabled,
.btn:disabled {
    opacity: 0.5;
    pointer-events: none;
}

.btn--block { width: 100%; }

.btn--loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

.btn--loading::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ═══════════════════════════════════════
   Forms
   ═══════════════════════════════════════ */
.form-group {
    margin-bottom: var(--space-5);
}

.form-label {
    display: block;
    margin-bottom: var(--space-2);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-gray-700);
}

.form-label--required::after {
    content: ' *';
    color: var(--color-danger);
}

.form-hint {
    display: block;
    margin-top: var(--space-1);
    font-size: var(--font-size-xs);
    color: var(--color-gray-500);
}

.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    font-size: var(--font-size-base);
    color: var(--color-gray-800);
    background: var(--color-white);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    outline: none;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-50);
}

.form-input.is-error,
.form-select.is-error,
.form-textarea.is-error {
    border-color: var(--color-danger);
    box-shadow: 0 0 0 3px var(--color-danger-bg);
}

.form-textarea { resize: vertical; min-height: 100px; }

/* Location autocomplete suggestions */
.form-group { position: relative; }

.location-suggestions {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 100;
    max-height: 200px;
    overflow-y: auto;
    background: var(--color-white);
    border: 1px solid var(--color-gray-300);
    border-top: none;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    list-style: none;
    padding: 0;
    margin: 0;
}

.location-suggestion-item {
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-sm);
    color: var(--color-gray-700);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.location-suggestion-item:hover {
    background: var(--color-primary-50);
    color: var(--color-primary);
}

.form-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236B7D73'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 40px;
}

.form-hint {
    display: block;
    margin-top: var(--space-1);
    font-size: var(--font-size-xs);
    color: var(--color-gray-400);
}

.form-error {
    display: block;
    margin-top: var(--space-1);
    font-size: var(--font-size-xs);
    color: var(--color-danger);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
}

/* ═══════════════════════════════════════
   Cards
   ═══════════════════════════════════════ */
.card {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    box-shadow: var(--shadow-sm);
}

.card--hover {
    transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.card--hover:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

/* ═══════════════════════════════════════
   Badges
   ═══════════════════════════════════════ */
.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    font-size: var(--font-size-xs);
    font-weight: 500;
    border-radius: var(--radius-full);
    line-height: 1;
}

.badge--open {
    background: var(--color-success-bg);
    color: #16A34A;
}

.badge--closed {
    background: var(--color-warning-bg);
    color: #CA8A04;
}

/* "Joined" member-state badge shown on group cards & map info windows */
.badge--joined {
    background: #DCFCE7;
    color: #15803D;
    font-weight: 600;
}

/* "Request Pending" badge shown on closed-group cards when the current user
   has requested to join but a facilitator hasn't approved yet. Amber tone
   matches the existing pending-state visual language. */
.badge--request-pending {
    background: #FEF3C7;
    color: #92400E;
    font-weight: 600;
}

/* "Inactive" badge — admin-set state where the group no longer accepts new
   join requests. Neutral grey so it reads as an administrative flag rather
   than a positive/negative status. */
.badge--inactive {
    background: #E5E7EB;
    color: #374151;
    font-weight: 600;
}

/* Pending request rows (facilitator sidebar) — includes the "why I want to
   join" reason quote underneath the member row. */
.pending-requests-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.pending-request {
    padding: var(--space-3);
    background: var(--color-gray-50);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-gray-100);
}

.pending-request__header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.pending-request__reason {
    margin: var(--space-3) 0 0;
    padding: var(--space-2) var(--space-3);
    background: var(--color-white);
    border-left: 3px solid var(--color-primary);
    border-radius: var(--radius-sm, 4px);
    font-size: var(--font-size-sm);
    color: var(--color-gray-700);
}

.pending-request__reason p {
    margin: var(--space-1) 0 0;
    line-height: 1.5;
    white-space: pre-wrap;
}

.pending-request__reason-label {
    font-size: var(--font-size-xs);
    color: var(--color-gray-500);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ═══════════════════════════════════════
   Prayer Journal Tab
   ═══════════════════════════════════════ */
.prayer-journal-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.prayer-journal-entry {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
}

.prayer-journal-entry__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
    flex-wrap: wrap;
}

.prayer-journal-entry__date-block {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.prayer-journal-entry__date {
    font-weight: 600;
    font-size: var(--font-size-sm);
    color: var(--color-gray-900);
}

.prayer-journal-entry__time {
    font-size: var(--font-size-xs);
    color: var(--color-gray-500);
}

.prayer-journal-entry__meta {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    font-size: var(--font-size-xs);
    color: var(--color-gray-600);
}

.prayer-journal-entry__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.prayer-journal-entry__meta-item--total {
    color: var(--color-primary);
}

.prayer-journal-entry__content {
    color: var(--color-gray-700);
    line-height: 1.6;
    font-size: var(--font-size-sm);
}

.prayer-journal-entry__content--empty {
    color: var(--color-gray-400);
}

.journal-edit-form {
    margin-top: var(--space-2);
}

/* Live "total prayer time" row in the Log Prayer modal. */
.prayer-total-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: var(--space-2) var(--space-3);
    background: var(--color-primary-50, #ECFDF5);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-4);
}

.prayer-total-row__label {
    font-size: var(--font-size-sm);
    color: var(--color-gray-700);
}

.prayer-total-row__value {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-primary);
}

.meeting-type {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--font-size-xs);
    color: var(--color-gray-500);
    text-transform: capitalize;
}

.facilitator-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--font-size-xs);
    color: var(--color-gray-500);
}

/* ═══════════════════════════════════════
   Hero Section (Homepage)
   ═══════════════════════════════════════ */
.hero {
    position: relative;
    padding: var(--space-16) 0 var(--space-20);
    background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 50%, var(--color-primary-light) 100%);
    color: var(--color-white);
    text-align: center;
    overflow: hidden;
}

.hero__bg {
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Ccircle cx='40' cy='40' r='1.5' fill='rgba(255,255,255,0.06)'/%3E%3C/svg%3E");
    pointer-events: none;
}

.hero__content {
    position: relative;
    max-width: 640px;
    margin: 0 auto;
}

.hero__title {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    color: var(--color-white);
    margin-bottom: var(--space-4);
    line-height: 1.2;
}

.hero__title .hero__title-accent {
    color: #ffffff;
    font-style: normal;
    display: block;
}

.hero__subtitle {
    font-size: var(--font-size-lg);
    color: rgba(255,255,255,0.85);
    margin-bottom: var(--space-8);
    line-height: 1.6;
}

.hero__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    align-items: center;
}

/* ═══════════════════════════════════════
   Home Stats
   ═══════════════════════════════════════ */
.home-stats {
    margin-top: -2.5rem;
    position: relative;
    z-index: 10;
    padding-bottom: var(--space-8);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
}

.stat-card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: var(--space-6) var(--space-4);
    text-align: center;
    box-shadow: var(--shadow-md);
}

.stat-card__number {
    display: block;
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1;
    margin-bottom: var(--space-2);
}

.stat-card__label {
    font-size: var(--font-size-xs);
    color: var(--color-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ═══════════════════════════════════════
   Home Sections
   ═══════════════════════════════════════ */
.home-section {
    padding: var(--space-16) 0;
}

.section-title {
    text-align: center;
    font-size: var(--font-size-2xl);
    margin-bottom: var(--space-2);
}

.section-subtitle {
    text-align: center;
    color: var(--color-gray-500);
    margin-bottom: var(--space-10);
}

.section-cta {
    text-align: center;
    margin-top: var(--space-8);
}

/* How It Works */
.steps-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
}

.step-card {
    text-align: center;
    padding: var(--space-6);
}

.step-card__icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--color-primary-50);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-4);
}

.step-card__title {
    font-size: var(--font-size-lg);
    margin-bottom: var(--space-2);
}

.step-card__text {
    color: var(--color-gray-500);
    font-size: var(--font-size-sm);
    line-height: 1.6;
}

/* Groups Grid */
.groups-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
}

/* ═══════════════════════════════════════
   Group Card
   ═══════════════════════════════════════ */
.group-card {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.group-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.group-card__header {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.group-card__title {
    font-size: var(--font-size-lg);
    font-weight: 600;
}

.group-card__title a {
    color: var(--color-gray-900);
}

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

.group-card__badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.group-card__body { flex: 1; }

.group-card__desc {
    color: var(--color-gray-500);
    font-size: var(--font-size-sm);
    line-height: 1.5;
    margin-bottom: var(--space-3);
}

.group-card__meta {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.group-card__location,
.group-card__members {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-xs);
    color: var(--color-gray-500);
}

.group-card__location svg,
.group-card__members svg {
    flex-shrink: 0;
    opacity: 0.6;
}

.group-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-gray-100);
    flex-wrap: wrap;
}

/* ═══════════════════════════════════════
   Home CTA
   ═══════════════════════════════════════ */
.home-cta {
    padding: var(--space-16) 0;
    background: var(--color-primary-50);
    text-align: center;
}

.home-cta__content h2 {
    font-size: var(--font-size-2xl);
    margin-bottom: var(--space-3);
}

.home-cta__content p {
    color: var(--color-gray-500);
    margin-bottom: var(--space-6);
}

/* ═══════════════════════════════════════
   Page Sections (Generic)
   ═══════════════════════════════════════ */
.page-section {
    padding: var(--space-10) 0;
}

.page-header {
    margin-bottom: var(--space-8);
}

.page-header__title {
    font-size: var(--font-size-2xl);
    margin-bottom: var(--space-2);
}

.page-header__subtitle {
    color: var(--color-gray-500);
}

/* ═══════════════════════════════════════
   Auth Pages (Login / Signup / Forgot PW)
   ═══════════════════════════════════════ */
.auth-page {
    padding: var(--space-10) 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - var(--header-height) - 200px);
}

.auth-card {
    width: 100%;
    max-width: 440px;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    box-shadow: var(--shadow-md);
}

.auth-card__header {
    text-align: center;
    margin-bottom: var(--space-8);
}

.auth-card__icon {
    font-size: 2rem;
    margin-bottom: var(--space-3);
}

.auth-card__title {
    font-size: var(--font-size-xl);
    margin-bottom: var(--space-2);
}

.auth-card__subtitle {
    color: var(--color-gray-500);
    font-size: var(--font-size-sm);
}

.auth-card__footer {
    text-align: center;
    margin-top: var(--space-6);
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
}

.auth-card__footer a {
    font-weight: 500;
}

/* Signup two-column layout */
.auth-card--signup {
    max-width: 820px;
}

.signup-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 var(--space-8);
}

.signup-col .form-section-title {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-gray-700);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--color-gray-200);
}

@media (max-width: 640px) {
    .auth-card--signup {
        max-width: 440px;
    }
    .signup-columns {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .signup-col + .signup-col .form-section-title {
        margin-top: var(--space-4);
    }
}

/* ═══════════════════════════════════════
   Dashboard
   ═══════════════════════════════════════ */
.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
}

.dashboard-card {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
}

.dashboard-card__title {
    font-size: var(--font-size-lg);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-gray-100);
}

/* Prayer Stats */
.prayer-stat {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) 0;
}

.prayer-stat__icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    background: var(--color-primary-50);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.prayer-stat__value {
    display: block;
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-gray-900);
    line-height: 1;
    /* Keep duration strings ("0 mins", "1h 15m") on a single line on narrow viewports. */
    white-space: nowrap;
}

.prayer-stat__label {
    font-size: var(--font-size-xs);
    color: var(--color-gray-500);
    margin-top: var(--space-1);
}

/* My Groups List */
.my-groups-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.my-group-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    background: var(--color-gray-50);
    border-radius: var(--radius-md);
    gap: var(--space-3);
}

.my-group-item__name {
    font-weight: 500;
    font-size: var(--font-size-sm);
    color: var(--color-gray-800);
}

.my-group-item__meta {
    font-size: var(--font-size-xs);
    color: var(--color-gray-400);
}

/* ═══════════════════════════════════════
   Groups Archive (List + Map View)
   ═══════════════════════════════════════ */
.groups-archive {
    padding: var(--space-8) 0;
}

.groups-toolbar {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.groups-toolbar__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
}

/* Filters Show/Hide button — keeps the map front-and-centre (2026-05). */
.filters-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--color-white);
    color: var(--color-gray-700);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}
.filters-toggle-btn:hover {
    background: var(--color-gray-100);
    border-color: var(--color-gray-400);
}
.filters-toggle-btn[aria-expanded="true"] {
    background: var(--color-primary-50, #ECFDF5);
    color: var(--color-primary);
    border-color: var(--color-primary);
}

/* Hides the filters block while keeping it in the DOM. */
.groups-filters.is-hidden {
    display: none;
}

/* Desktop (>=1024px): filters are always visible — toggle button is hidden.
   The is-hidden class is still toggled by JS but desktop overrides it.
   Client feedback 2026-05: toggle feature applies on mobile only. */
@media (min-width: 1024px) {
    .filters-toggle-btn {
        display: none !important;
    }
    .groups-filters,
    .groups-filters.is-hidden {
        display: grid !important;
    }
}

/* Inline radio row used on the Create Group "affiliation" question (2026-05). */
.form-radio-row {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-top: var(--space-2);
}
.form-radio {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: var(--font-size-sm);
    transition: all var(--transition-fast);
}
.form-radio:hover {
    background: var(--color-gray-50);
    border-color: var(--color-gray-400);
}
.form-radio input[type="radio"]:checked + span {
    color: var(--color-primary);
    font-weight: 600;
}
.form-radio:has(input[type="radio"]:checked) {
    background: var(--color-primary-50, #ECFDF5);
    border-color: var(--color-primary);
}

.groups-search {
    position: relative;
    flex: 1;
    max-width: 400px;
}

.groups-search__input {
    width: 100%;
    padding: var(--space-3) var(--space-4) var(--space-3) 40px;
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    background: var(--color-white);
    outline: none;
    transition: border-color var(--transition-fast);
}

.groups-search__input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-50);
}

.groups-search__icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-gray-400);
    pointer-events: none;
}

/* View Toggle */
.view-toggle {
    display: flex;
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.view-toggle__btn {
    padding: var(--space-2) var(--space-3);
    background: var(--color-white);
    border: none;
    color: var(--color-gray-500);
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--font-size-sm);
    transition: all var(--transition-fast);
}

.view-toggle__btn + .view-toggle__btn {
    border-left: 1px solid var(--color-gray-300);
}

.view-toggle__btn.is-active,
.view-toggle__btn:hover {
    background: var(--color-primary);
    color: var(--color-white);
}

/* Filters */
.groups-filters {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
}

.groups-filters .form-select {
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-sm);
    border-radius: var(--radius-md);
}

/* Group List */
.groups-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
}

/* Map Container */
.groups-map {
    width: 100%;
    /* Map is the default landing view as of 2026-05 — taller default so it
       feels front-and-centre on mobile too. Desktop overrides further down. */
    height: 60vh;
    min-height: 360px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-gray-200);
    overflow: hidden;
    display: none;
}

.groups-map.is-active { display: block; }

.groups-map__canvas {
    width: 100%;
    height: 100%;
    /* Hint to the browser to compose the map on its own layer for smoother
       panning on mobile (client feedback 2026-05). */
    will-change: transform;
    transform: translateZ(0);
}

/* Results Info */
.groups-results {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-4);
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
}

/* Pagination */
.groups-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    margin-top: var(--space-8);
}

.groups-pagination__btn {
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-md);
    background: var(--color-white);
    color: var(--color-gray-600);
    font-size: var(--font-size-sm);
    transition: all var(--transition-fast);
}

.groups-pagination__btn:hover,
.groups-pagination__btn.is-active {
    background: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}

.groups-pagination__btn:disabled {
    opacity: 0.4;
    pointer-events: none;
}

/* ═══════════════════════════════════════
   Single Group Page
   ═══════════════════════════════════════ */
.group-hero {
    background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
    color: var(--color-white);
    padding: var(--space-10) 0;
}

.group-hero__title {
    font-size: var(--font-size-2xl);
    color: var(--color-white);
    margin-bottom: var(--space-3);
}

.group-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    font-size: var(--font-size-sm);
    opacity: 0.85;
    margin-bottom: var(--space-4);
}

/* ─── Group Page V2 (Back bar, header, stats) ─── */
.group-back-bar {
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-gray-200);
}

.group-back-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s;
}

.group-back-link:hover {
    color: var(--color-primary);
}

.group-header-v2 {
    padding: var(--space-6) 0 var(--space-4);
}

.group-header-v2__top {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-bottom: var(--space-2);
}

.group-header-v2__title {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-gray-900);
    margin: 0;
}

.group-header-v2__desc {
    color: var(--color-gray-500);
    font-size: var(--font-size-sm);
    line-height: 1.6;
    margin-bottom: var(--space-3);
    max-width: 600px;
}

.group-header-v2__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    margin-bottom: var(--space-3);
}

.group-header-v2__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.group-header-v2__meta-item svg {
    opacity: 0.6;
    flex-shrink: 0;
}

.group-header-v2__online-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-size-sm);
    color: var(--color-primary);
    text-decoration: none;
    margin-bottom: var(--space-4);
}

.group-header-v2__online-link:hover {
    text-decoration: underline;
}

.group-header-v2__actions {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: var(--space-4);
}

.group-log-prayer-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-2);
}

/* ─── Stats Tab V2 ─── */
.stats-summary-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.stats-summary-card {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    padding: var(--space-6) var(--space-5);
    text-align: center;
}

.stats-summary-card__value {
    display: block;
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: var(--space-1);
}

.stats-summary-card__label {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
}

/* Monthly Prayer Card */
.monthly-prayer-card {
    margin-bottom: var(--space-4);
}

.monthly-prayer-card__header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
    font-size: var(--font-size-base);
}

.monthly-prayer-card__header svg {
    color: var(--color-gray-400);
}

.monthly-prayer-card__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    margin-bottom: var(--space-3);
}

.monthly-prayer-card__period {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--color-gray-500);
    margin-bottom: var(--space-1);
}

.monthly-prayer-card__time {
    display: block;
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-gray-900);
}

.monthly-prayer-card__growth {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--font-size-sm);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-gray-100);
}

.monthly-prayer-card__growth--positive {
    color: var(--color-success);
}

.monthly-prayer-card__growth--negative {
    color: var(--color-danger);
}

/* My Prayer Times */
.my-prayer-times-card {
    margin-bottom: var(--space-4);
}

.my-prayer-times-card__title {
    font-size: var(--font-size-base);
    font-weight: 600;
    margin-bottom: var(--space-4);
}

.prayer-times-list {
    display: flex;
    flex-direction: column;
}

.prayer-time-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-gray-100);
}

.prayer-time-item:last-child {
    border-bottom: none;
}

.prayer-time-item__left {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.prayer-time-item__icon {
    color: var(--color-primary);
    flex-shrink: 0;
}

.prayer-time-item__duration {
    font-weight: 600;
    font-size: var(--font-size-sm);
    color: var(--color-gray-900);
}

.prayer-time-item__category {
    display: inline-block;
    padding: 2px 8px;
    font-size: var(--font-size-xs);
    background: var(--color-gray-100);
    color: var(--color-gray-600);
    border-radius: 999px;
}

.prayer-time-item__right {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.prayer-time-item__date {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
}

.prayer-time-item__toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: var(--color-gray-400);
    transition: color 0.2s;
}

.prayer-time-item__toggle:hover {
    color: var(--color-gray-700);
}

.prayer-time-item__notes {
    width: 100%;
    padding: var(--space-2) 0 0;
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    line-height: 1.5;
}

/* ─── Log Prayer Modal ─── */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
}

.modal-content {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    overflow-y: auto;
    padding: var(--space-6);
    position: relative;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-5);
}

.modal-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin: 0;
}

.modal-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--color-gray-400);
    padding: 4px 8px;
    line-height: 1;
    transition: color 0.2s;
}

.modal-close:hover {
    color: var(--color-gray-700);
}

/* Invite-link modal (2026-05): link input + copy button on one row, action
   buttons below. Layout collapses to stacked on mobile. */
.invite-link-row {
    display: flex;
    align-items: stretch;
    gap: var(--space-2);
}
.invite-link-row .form-input {
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--font-size-sm);
    font-family: var(--font-mono, ui-monospace, monospace);
    background: var(--color-gray-50, #F9FAFB);
}
.invite-link-row .btn {
    flex: 0 0 auto;
    white-space: nowrap;
}
.invite-actions {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-top: var(--space-4);
}
@media (max-width: 480px) {
    .invite-link-row {
        flex-direction: column;
    }
    .invite-link-row .btn {
        width: 100%;
    }
}

@media (max-width: 600px) {
    .stats-summary-row {
        grid-template-columns: 1fr;
    }
    .monthly-prayer-card__grid {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }
    .group-header-v2__title {
        font-size: var(--font-size-xl);
    }
    .modal-content {
        padding: var(--space-4);
    }
}

.group-content {
    padding: var(--space-8) 0;
}

.group-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
}

/* Full-width variant — used on the Updates tab when there's no sidebar
   content to render (e.g. no pending requests for facilitators, or
   the viewer is a regular member). Keeps the post-update form + feed
   spanning the full container at every breakpoint. Client feedback 2026-05. */
.group-layout--full,
.group-layout--full.group-layout {
    grid-template-columns: 1fr !important;
}
.group-layout--full .group-sidebar {
    display: none;
}

.group-sidebar .card {
    margin-bottom: var(--space-4);
}

/* Members List */
.members-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.member-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) 0;
}

.member-item__avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-primary-100);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: var(--font-size-sm);
    flex-shrink: 0;
}

.member-item__name {
    font-size: var(--font-size-sm);
    font-weight: 500;
}

.member-item__role {
    font-size: var(--font-size-xs);
    color: var(--color-gray-400);
}

/* Group Updates Feed */
.updates-feed {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.update-card {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
}

.update-card__header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.update-card__content {
    font-size: var(--font-size-sm);
    line-height: 1.6;
    color: var(--color-gray-700);
    margin-bottom: var(--space-3);
}

.update-card__date {
    font-size: var(--font-size-xs);
    color: var(--color-gray-400);
}

/* Reactions */
.reactions {
    display: flex;
    gap: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-gray-100);
}

.reaction-btn {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-full);
    background: var(--color-white);
    color: var(--color-gray-500);
    font-size: var(--font-size-xs);
    transition: all var(--transition-fast);
}

.reaction-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.reaction-btn.is-active {
    background: var(--color-primary-50);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* ═══════════════════════════════════════
   Prayer Log
   ═══════════════════════════════════════ */
.prayer-log-form {
    max-width: 600px;
}

.duration-picker {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.duration-picker__option {
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-full);
    background: var(--color-white);
    color: var(--color-gray-600);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.duration-picker__option:hover,
.duration-picker__option.is-selected {
    background: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}

.category-chips {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.category-chip {
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-full);
    background: var(--color-white);
    color: var(--color-gray-600);
    font-size: var(--font-size-xs);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.category-chip:hover,
.category-chip.is-selected {
    background: var(--color-primary-50);
    color: var(--color-primary);
    border-color: var(--color-primary);
}

/* ═══════════════════════════════════════
   Profile Page
   ═══════════════════════════════════════ */
/* ─── Profile Page v2 ─── */
.profile-page-title {
    text-align: center;
    font-size: var(--font-size-xl);
    font-weight: 600;
    margin-bottom: var(--space-6);
}

.profile-card {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    padding: var(--space-8) var(--space-6);
    text-align: center;
    margin-bottom: var(--space-4);
}

.profile-card__avatar-wrap {
    position: relative;
    display: inline-block;
    margin-bottom: var(--space-3);
}

.profile-card__avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--color-primary-50, #e8f5e9);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-2xl);
    font-weight: 700;
    border: 3px solid var(--color-primary-100, #c8e6c9);
}

.profile-card__camera-icon {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--color-white);
}

.profile-card__name {
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin-bottom: var(--space-1);
}

.profile-card__role {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 500;
}

.profile-card__role--member {
    background: var(--color-success-bg, #dcfce7);
    color: #16A34A;
}

.profile-card__role--facilitator {
    background: #dbeafe;
    color: #2563eb;
}

.profile-card__role--admin {
    background: #ede9fe;
    color: #7c3aed;
}

/* Contact & Location Card */
.profile-contact-card {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    padding: var(--space-5) var(--space-6);
    margin-bottom: var(--space-4);
}

.profile-contact__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-4);
}

.profile-contact__heading {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: 600;
    font-size: var(--font-size-sm);
    color: var(--color-gray-700);
}

.profile-contact__heading svg {
    color: var(--color-gray-400);
}

.profile-contact__edit-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    background: none;
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-md);
    padding: var(--space-1) var(--space-3);
    font-size: var(--font-size-xs);
    color: var(--color-gray-600);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.profile-contact__edit-btn:hover {
    border-color: var(--color-gray-400);
    color: var(--color-gray-800);
}

.profile-contact__actions {
    display: flex;
    gap: var(--space-2);
}

.profile-contact__cancel-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    background: none;
    border: none;
    padding: var(--space-1) var(--space-3);
    font-size: var(--font-size-xs);
    color: var(--color-gray-500);
    cursor: pointer;
}

.profile-contact__cancel-btn:hover {
    color: var(--color-gray-700);
}

.profile-contact__save-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    background: var(--color-primary);
    border: none;
    border-radius: var(--radius-md);
    padding: var(--space-1) var(--space-3);
    font-size: var(--font-size-xs);
    color: var(--color-white);
    font-weight: 500;
    cursor: pointer;
    transition: background var(--transition-fast);
}

.profile-contact__save-btn:hover {
    background: var(--color-primary-dark, #388e3c);
}

.profile-contact__info {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.profile-contact__row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
}

.profile-contact__row svg {
    color: var(--color-gray-400);
    flex-shrink: 0;
}

/* Profile Action Buttons */
.profile-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: 100%;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-gray-700);
    text-decoration: none;
    cursor: pointer;
    transition: all var(--transition-fast);
    margin-bottom: var(--space-3);
}

.profile-action-btn:hover {
    background: var(--color-gray-50);
    border-color: var(--color-gray-300);
}

.profile-action-btn svg {
    color: var(--color-gray-400);
}

.profile-action-btn--signout {
    color: var(--color-primary);
    border-color: var(--color-primary-100, #c8e6c9);
}

.profile-action-btn--signout svg {
    color: var(--color-primary);
}

.profile-action-btn--signout:hover {
    background: var(--color-primary-50, #e8f5e9);
}

/* Legacy compat */
.profile-header {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    margin-bottom: var(--space-8);
}

.profile-header__avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-2xl);
    font-weight: 700;
    flex-shrink: 0;
}

.profile-header__name {
    font-size: var(--font-size-xl);
    margin-bottom: var(--space-1);
}

.profile-header__email {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
}

/* ═══════════════════════════════════════
   Admin Dashboard
   ═══════════════════════════════════════ */
.admin-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--color-gray-200);
    margin-bottom: var(--space-6);
    overflow-x: auto;
}

.admin-tab {
    padding: var(--space-3) var(--space-5);
    background: none;
    border: none;
    color: var(--color-gray-500);
    font-size: var(--font-size-sm);
    font-weight: 500;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all var(--transition-fast);
}

.admin-tab:hover { color: var(--color-gray-700); }

.admin-tab.is-active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

.admin-panel { display: none; }
.admin-panel.is-active { display: block; }

/* ─── Admin Dashboard v2 ─── */
.admin-page-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-size: var(--font-size-xl);
    font-weight: 600;
    margin-bottom: var(--space-6);
}

.admin-page-title svg {
    color: var(--color-primary);
}

.admin-tabs-v2 {
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-5);
    justify-content: center;
}

.admin-tab-v2 {
    padding: var(--space-2) var(--space-5);
    background: none;
    border: 1.5px solid var(--color-gray-300);
    border-radius: var(--radius-full);
    color: var(--color-gray-500);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.admin-tab-v2:hover {
    border-color: var(--color-gray-400);
    color: var(--color-gray-700);
}

.admin-tab-v2.is-active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

/* Admin Search */
.admin-search-wrap {
    position: relative;
    margin-bottom: var(--space-4);
}

.admin-search-icon {
    position: absolute;
    left: var(--space-3);
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-gray-400);
    pointer-events: none;
}

.admin-search-input {
    width: 100%;
    padding: var(--space-3) var(--space-3) var(--space-3) var(--space-8);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    background: var(--color-white);
    color: var(--color-gray-700);
    outline: none;
    transition: border-color var(--transition-fast);
}

.admin-search-input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
}

.admin-search-input::placeholder {
    color: var(--color-gray-400);
}

/* Admin List */
.admin-list {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.admin-list-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    border-bottom: 1px solid var(--color-gray-100);
    transition: background var(--transition-fast);
}

.admin-list-item:last-child {
    border-bottom: none;
}

.admin-list-item:hover {
    background: var(--color-gray-50);
}

.admin-list-item--link {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.admin-list-item__avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-gray-100);
    color: var(--color-gray-500);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-sm);
    font-weight: 600;
    flex-shrink: 0;
}

.admin-list-item__content {
    flex: 1;
    min-width: 0;
}

.admin-list-item__name {
    display: block;
    font-weight: 600;
    font-size: var(--font-size-sm);
    color: var(--color-gray-800);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-list-item__meta {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--color-gray-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}

.admin-list-item__badge {
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
}

.admin-list-item__badge--member {
    background: var(--color-success-bg, #dcfce7);
    color: #16A34A;
}

.admin-list-item__badge--facilitator {
    background: #dbeafe;
    color: #2563eb;
}

.admin-list-item__badge--admin {
    background: #ede9fe;
    color: #7c3aed;
}

.admin-list-item__badge--declined {
    background: #fef2f2;
    color: #dc2626;
}

.admin-list-item__badge--pending {
    background: #fffbeb;
    color: #d97706;
}

.admin-list-item__arrow {
    color: var(--color-gray-300);
    flex-shrink: 0;
}

/* Admin Pending Section */
.admin-pending-section {
    margin-bottom: var(--space-5);
}

.admin-pending-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-base);
    font-weight: 600;
    margin-bottom: var(--space-3);
}

/* Admin Export List */
.admin-export-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.admin-export-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
}

.admin-export-item__desc {
    font-size: var(--font-size-xs);
    color: var(--color-gray-500);
    margin-top: var(--space-1);
}

/* Data Table */
.data-table-wrap {
    overflow-x: auto;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}

.data-table th {
    text-align: left;
    padding: var(--space-3) var(--space-4);
    background: var(--color-gray-50);
    color: var(--color-gray-600);
    font-weight: 600;
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 2px solid var(--color-gray-200);
    white-space: nowrap;
}

.data-table td {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-gray-100);
    color: var(--color-gray-700);
}

.data-table tr:hover td {
    background: var(--color-gray-50);
}

/* ═══════════════════════════════════════
   404 Page
   ═══════════════════════════════════════ */
.page-404 {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - var(--header-height) - 200px);
    text-align: center;
}

.error-content__code {
    display: block;
    font-size: 6rem;
    font-weight: 800;
    color: var(--color-primary-100);
    line-height: 1;
    margin-bottom: var(--space-4);
}

.error-content__title {
    font-size: var(--font-size-2xl);
    margin-bottom: var(--space-3);
}

.error-content__text {
    color: var(--color-gray-500);
    margin-bottom: var(--space-6);
}

.error-content__actions {
    display: flex;
    gap: var(--space-3);
    justify-content: center;
    flex-wrap: wrap;
}

/* ═══════════════════════════════════════
   Toast Notifications
   ═══════════════════════════════════════ */
.toast-container {
    position: fixed;
    bottom: var(--space-6);
    right: var(--space-4);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    pointer-events: none;
}

.toast {
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    font-size: var(--font-size-sm);
    font-weight: 500;
    pointer-events: auto;
    animation: toastIn 0.3s ease-out;
    max-width: 360px;
}

.toast--success { background: var(--color-primary); color: var(--color-white); }
.toast--error   { background: var(--color-danger); color: var(--color-white); }
.toast--info    { background: var(--color-info); color: var(--color-white); }
.toast--warning { background: var(--color-warning); color: var(--color-gray-900); }

.toast.is-leaving { animation: toastOut 0.3s ease-in forwards; }

@keyframes toastIn {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes toastOut {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(20px); }
}

/* ═══════════════════════════════════════
   Empty State
   ═══════════════════════════════════════ */
.empty-state {
    text-align: center;
    padding: var(--space-12) var(--space-4);
    color: var(--color-gray-500);
}

.empty-state p {
    margin-bottom: var(--space-4);
}

/* ═══════════════════════════════════════
   Loading Spinner
   ═══════════════════════════════════════ */
.spinner {
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 3px solid var(--color-gray-200);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

.loading-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-10);
}

/* ═══════════════════════════════════════
   Footer
   ═══════════════════════════════════════ */
.site-footer {
    background: var(--color-gray-800);
    color: var(--color-gray-300);
    padding: var(--space-12) 0 var(--space-6);
}

.footer__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
    margin-bottom: var(--space-8);
}

.footer__logo {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-white);
    font-weight: 700;
    font-size: var(--font-size-lg);
}

.footer__logo:hover { color: var(--color-white); }

.footer__logo-icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    line-height: 1;
}

.footer__logo-icon svg {
    display: block;
}

.footer__tagline {
    margin-top: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--color-gray-400);
}

.footer__links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
}

.footer__heading {
    color: var(--color-white);
    font-size: var(--font-size-sm);
    font-weight: 600;
    margin-bottom: var(--space-3);
}

.footer__col a {
    display: block;
    color: var(--color-gray-400);
    font-size: var(--font-size-sm);
    padding: var(--space-1) 0;
    transition: color var(--transition-fast);
}

.footer__col a:hover { color: var(--color-white); }

.footer__bottom {
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-gray-700);
    font-size: var(--font-size-xs);
    color: var(--color-gray-500);
    text-align: center;
}

/* ═══════════════════════════════════════
   Utilities
   ═══════════════════════════════════════ */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

.text-center { text-align: center; }
.text-right  { text-align: right; }
.text-muted  { color: var(--color-gray-500); }
.text-sm     { font-size: var(--font-size-sm); }
.text-xs     { font-size: var(--font-size-xs); }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }

/* ═══════════════════════════════════════
   Responsive: Tablet (768px+)
   ═══════════════════════════════════════ */
@media (min-width: 768px) {
    .container {
        padding-left: var(--space-6);
        padding-right: var(--space-6);
    }

    .hero__title { font-size: var(--font-size-4xl); }

    .hero__actions {
        flex-direction: row;
        justify-content: center;
    }

    .stats-grid { gap: var(--space-6); }
    .stat-card__number { font-size: var(--font-size-3xl); }

    .steps-grid { grid-template-columns: repeat(3, 1fr); }

    .groups-grid,
    .groups-list {
        grid-template-columns: repeat(2, 1fr);
    }

    .groups-filters {
        grid-template-columns: repeat(2, 1fr);
    }

    .form-row { grid-template-columns: 1fr 1fr; }

    .dashboard-grid { grid-template-columns: repeat(2, 1fr); }

    .group-layout { grid-template-columns: 2fr 1fr; }

    .groups-map { height: 500px; }

    .header__username { display: inline; }

    .footer__inner {
        grid-template-columns: 1.5fr 1fr;
    }

    .auth-card { padding: var(--space-10); }
}

/* ═══════════════════════════════════════
   Responsive: Desktop (1024px+)
   ═══════════════════════════════════════ */
@media (min-width: 1024px) {
    .header__nav { display: flex; }
    .header__hamburger { display: none; }

    .hero { padding: var(--space-20) 0; }
    .hero__title { font-size: 3rem; }

    .groups-grid,
    .groups-list {
        grid-template-columns: repeat(3, 1fr);
    }

    .groups-filters {
        grid-template-columns: repeat(4, 1fr);
    }

    .groups-map { height: 600px; }

    .toast-container {
        bottom: var(--space-8);
        right: var(--space-8);
    }
}

/* ═══════════════════════════════════════
   Responsive: Large Desktop (1280px+)
   ═══════════════════════════════════════ */
@media (min-width: 1280px) {
    .groups-filters {
        grid-template-columns: repeat(5, 1fr);
    }
}

/* ═══════════════════════════════════════
   Group Statistics (Facilitator)
   ═══════════════════════════════════════ */
.group-stats-card {
    background: linear-gradient(135deg, var(--color-gray-50), #fff);
}

.stats-section {
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-gray-100);
}

.stats-section:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.stats-section__title {
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-gray-500);
    margin-bottom: var(--space-3);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2);
}

.stat-item {
    text-align: center;
    padding: var(--space-2);
    background: white;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-gray-100);
}

.stat-item__value {
    display: block;
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-primary);
}

.stat-item__label {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--color-gray-500);
    margin-top: 2px;
}

.stats-insights {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.insight-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-2) var(--space-3);
    background: white;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-gray-100);
    font-size: var(--font-size-sm);
}

.insight-item__label {
    color: var(--color-gray-600);
}

.insight-item__value {
    font-weight: 600;
    color: var(--color-gray-800);
}

.insight--positive {
    color: var(--color-success) !important;
}

.insight--negative {
    color: var(--color-danger) !important;
}

/* Monthly Trend Chart */
.monthly-trend {
    display: flex;
    align-items: flex-end;
    gap: var(--space-2);
    height: 100px;
    padding-top: var(--space-2);
}

.trend-bar {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}

.trend-bar__fill {
    width: 100%;
    background: var(--color-primary);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    min-height: 4px;
    transition: height 0.3s ease;
    margin-top: auto;
}

.trend-bar__label {
    font-size: 10px;
    color: var(--color-gray-500);
    margin-top: var(--space-1);
    text-align: center;
}

/* ═══════════════════════════════════════
   Update Card Edit/Delete Actions
   ═══════════════════════════════════════ */
.update-card__actions {
    display: flex;
    gap: var(--space-1);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.update-card:hover .update-card__actions {
    opacity: 1;
}

.update-card__actions .btn--ghost {
    padding: var(--space-1);
    color: var(--color-gray-400);
}

.update-card__actions .btn--ghost:hover {
    color: var(--color-primary);
}

.update-card__actions .update-delete-btn:hover {
    color: var(--color-danger);
}

.update-edit-form {
    margin-top: var(--space-2);
}

.update-edit-textarea {
    font-size: var(--font-size-sm);
    min-height: 60px;
}

/* ═══════════════════════════════════════
   Bottom Navigation Bar
   ═══════════════════════════════════════ */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: var(--color-white);
    border-top: 1px solid var(--color-gray-200);
    box-shadow: 0 -2px 10px rgba(0,0,0,0.06);
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 64px;
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.bottom-nav__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: var(--space-2) var(--space-3);
    color: var(--color-gray-400);
    text-decoration: none;
    font-size: 11px;
    font-weight: 500;
    transition: color var(--transition-fast);
    min-width: 56px;
    -webkit-tap-highlight-color: transparent;
}

.bottom-nav__item:hover,
.bottom-nav__item.is-active {
    color: var(--color-primary);
}

.bottom-nav__item.is-active {
    font-weight: 600;
}

.bottom-nav__icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bottom-nav__icon svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Pad body bottom when bottom nav is shown */
body.has-bottom-nav {
    padding-bottom: 80px;
}

body.has-bottom-nav .site-main {
    padding-bottom: var(--space-4);
}

/* Hide bottom-nav on desktop — the header top-nav covers navigation there. */
@media (min-width: 1024px) {
    .bottom-nav {
        display: none !important;
    }
    body.has-bottom-nav {
        padding-bottom: 0;
    }
    body.has-bottom-nav .site-main {
        padding-bottom: var(--space-8);
    }
}

/* ═══════════════════════════════════════
   Group Approval Section (Dashboard)
   ═══════════════════════════════════════ */
/* Dashboard quick-action buttons row (Log Prayer / Find Groups / Create Group).
   On desktop: natural width, left-aligned. On narrow mobile: equal-width 3-col
   grid so all three stay on one line (client feedback 2026-04-23). */
.dashboard-quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-8);
}

@media (max-width: 600px) {
    .dashboard-quick-actions {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-2);
    }
    .dashboard-quick-actions .btn {
        width: 100%;
        padding-left: var(--space-2);
        padding-right: var(--space-2);
        font-size: var(--font-size-xs);
    }
}

.dashboard-approval-section {
    background: #FFFBEB;
    border: 1px solid #FCD34D;
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    margin-bottom: var(--space-8);
}

/* Tighter padding on narrow screens so the inner approval card has more
   horizontal room for the 3-button action row. */
@media (max-width: 600px) {
    .dashboard-approval-section {
        padding: var(--space-4) var(--space-3);
    }
    .approval-card {
        padding: var(--space-3);
    }
}

.dashboard-approval-section__title {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--color-gray-800);
    margin-bottom: var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.approval-cards {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.approval-card {
    /* Light-grey card background (client feedback 2026-04-23) — distinguishes the
       inner content from the yellow dashboard-approval-section wrapper. */
    background: var(--color-gray-50);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    transition: opacity var(--transition-base);
}

.approval-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-2);
}

.approval-card__title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-gray-800);
}

.approval-card__desc {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    margin-bottom: var(--space-2);
}

.approval-card__meta {
    font-size: var(--font-size-xs);
    color: var(--color-gray-400);
    margin-bottom: var(--space-3);
}

.approval-card__actions {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    align-items: center;
    /* Extra breathing room above the button row (client feedback 2026-04-23). */
    margin-top: var(--space-4);
}

/* Narrow viewports: Review / Approve / Decline sit on a single line as
   equal-width peers (3-column grid). "Review" uses .btn--secondary so it
   reads as a real button (light grey fill) rather than an invisible text
   link. Tight padding on .btn--sm keeps all three labels on one line down
   to ~340 px device width. */
@media (max-width: 600px) {
    .approval-card__actions {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-2);
    }
    .approval-card__actions .btn {
        width: 100%;
        /* Allow shrink for narrow labels without pushing to new row. */
        padding-left: var(--space-2);
        padding-right: var(--space-2);
    }
}

/* Badges */
.badge--pending {
    background: #FEF3C7;
    color: #92400E;
    font-size: var(--font-size-xs);
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-weight: 600;
}

.badge--warning {
    background: #F59E0B;
    color: white;
    font-size: var(--font-size-xs);
    padding: 2px 10px;
    border-radius: var(--radius-full);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    min-width: 24px;
    justify-content: center;
}

.badge--sm {
    font-size: 10px;
    padding: 1px 6px;
}

.btn--danger {
    background: var(--color-danger);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-4);
    font-weight: 500;
    cursor: pointer;
}

.btn--danger:hover {
    background: #DC2626;
}

/* Pending group item on dashboard */
.my-group-item--pending {
    opacity: 0.75;
    border-left: 3px solid #F59E0B;
    padding-left: var(--space-3);
}

/* ═══════════════════════════════════════
   Group Detail Tabs
   ═══════════════════════════════════════ */
.group-tabs {
    display: flex;
    border-bottom: 2px solid var(--color-gray-200);
    margin-bottom: var(--space-6);
    gap: 0;
}

.group-tabs__tab {
    padding: var(--space-3) var(--space-6);
    font-weight: 600;
    font-size: var(--font-size-sm);
    color: var(--color-gray-400);
    cursor: pointer;
    border: none;
    background: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.group-tabs__tab:hover {
    color: var(--color-gray-600);
}

.group-tabs__tab.is-active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

.group-tab-panel {
    display: none;
}

.group-tab-panel.is-active {
    display: block;
}

.stats-tab-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-5);
}

/* ═══════════════════════════════════════
   Spinner
   ═══════════════════════════════════════ */
.spinner {
    display: inline-block;
    width: 32px;
    height: 32px;
    border: 3px solid var(--color-gray-200);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ═══════════════════════════════════════
   Status Banners (Pending / Declined)
   ═══════════════════════════════════════ */
.status-banner {
    padding: var(--space-4) 0;
    font-size: var(--font-size-sm);
}
.status-banner--warning {
    background: #fef9e7;
    border-bottom: 2px solid #f39c12;
    color: #7d6608;
}
.status-banner--danger {
    background: #fdecea;
    border-bottom: 2px solid #e74c3c;
    color: #922b21;
}
.status-banner__content {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    flex-wrap: wrap;
}
.status-banner__content > svg {
    flex-shrink: 0;
    margin-top: 2px;
}
.status-banner__text {
    flex: 1;
    min-width: 200px;
}
.status-banner__text strong {
    display: block;
    margin-bottom: var(--space-1);
    font-size: var(--font-size-base);
}
.status-banner__text p {
    margin: 0;
    line-height: 1.5;
}
.status-banner__actions {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════
   Profile Avatar Upload
   ═══════════════════════════════════════ */
.profile-card__avatar-wrap {
    position: relative;
    cursor: pointer;
}

.profile-card__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

.profile-card__camera-icon {
    cursor: pointer;
    transition: transform var(--transition-fast), background var(--transition-fast);
}

.profile-card__avatar-wrap:hover .profile-card__camera-icon {
    transform: scale(1.08);
    background: var(--color-primary-600, var(--color-primary));
}

.profile-card__avatar-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
}

/* Inline avatar image variants used in header & lists */
.header__avatar img,
.admin-list-item__avatar img,
.member-item__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

/* ═══════════════════════════════════════
   Growth Indicator — Flat / New states
   ═══════════════════════════════════════ */
.monthly-prayer-card__growth--flat {
    color: var(--color-gray-500);
}

.monthly-prayer-card__growth--new {
    color: var(--color-primary);
    font-weight: 600;
}

/* ═══════════════════════════════════════
   Admin User Detail View
   ═══════════════════════════════════════ */
.admin-user-detail {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.admin-user-detail__back {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-gray-600);
    font-size: var(--font-size-sm);
    text-decoration: none;
    margin-bottom: var(--space-2);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}
.admin-user-detail__back:hover { color: var(--color-primary); }

.admin-user-detail__header {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5);
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    flex-wrap: wrap;
}

/* Body grows to fill available space so the action button can dock to the
   right edge of the card (client feedback 2026-04-29: button/tag/text
   alignment was inconsistent — body wasn't claiming the leftover width). */
.admin-user-detail__header-body {
    flex: 1 1 auto;
    min-width: 0; /* Allow long emails to truncate instead of breaking layout. */
}

/* Push the toggle button to the right edge of the header card. */
.admin-user-detail__header-actions {
    margin-left: auto;
    flex-shrink: 0;
}

.admin-user-detail__avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xl);
    font-weight: 700;
    overflow: hidden;
    flex-shrink: 0;
}

.admin-user-detail__name {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-gray-900);
    margin: 0 0 var(--space-1);
    line-height: 1.2;
}

.admin-user-detail__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-gray-600);
    font-size: var(--font-size-sm);
}

.admin-user-detail__section {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
}

.admin-user-detail__section-title {
    font-size: var(--font-size-base);
    font-weight: 600;
    margin: 0 0 var(--space-4);
    color: var(--color-gray-900);
}

.admin-user-detail__kv {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: var(--space-2) var(--space-4);
    font-size: var(--font-size-sm);
}

.admin-user-detail__kv dt {
    color: var(--color-gray-500);
    font-weight: 500;
}

.admin-user-detail__kv dd {
    margin: 0;
    color: var(--color-gray-900);
}

.admin-user-detail__groups {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.admin-user-group-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--color-gray-50);
    border-radius: var(--radius-md);
    flex-wrap: wrap;
}

.admin-user-group-row__meta {
    font-size: var(--font-size-xs);
    color: var(--color-gray-500);
}

.admin-user-group-row__actions {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

/* Expanded approval-card (adds requester email + full location block) */
.approval-card__requester {
    background: var(--color-gray-50);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    margin-top: var(--space-3);
    font-size: var(--font-size-sm);
}

.approval-card__requester-row {
    display: flex;
    gap: var(--space-2);
    color: var(--color-gray-700);
    margin-bottom: var(--space-1);
}

.approval-card__requester-row:last-child { margin-bottom: 0; }

.approval-card__requester-label {
    color: var(--color-gray-500);
    min-width: 80px;
    font-weight: 500;
}

/* Approve action polish: Decline becomes outline-danger for safer emphasis */
.btn--danger-outline {
    background: transparent;
    border-color: #DC2626;
    color: #DC2626;
}
.btn--danger-outline:hover {
    background: #DC2626;
    color: var(--color-white);
}

@media (max-width: 600px) {
    .admin-user-detail__kv {
        grid-template-columns: 1fr;
        gap: var(--space-1);
    }
    .admin-user-detail__kv dt {
        margin-top: var(--space-2);
    }
    .approval-card__requester-label {
        min-width: 70px;
    }
    /* Drop the role-toggle button onto its own full-width row at narrow widths
       so the avatar / name / email don't get squeezed. */
    .admin-user-detail__header-actions {
        flex-basis: 100%;
        margin-left: 0;
        margin-top: var(--space-3);
    }
    .admin-user-detail__header-actions .btn {
        width: 100%;
    }
}

/* ═══════════════════════════════════════
   Print
   ═══════════════════════════════════════ */
@media print {
    .site-header,
    .site-footer,
    .toast-container,
    .bottom-nav,
    .btn { display: none !important; }

    body { background: white; color: black; }
}