/* ============================================================
   KOAF ChurchPro™ — Main Stylesheet
   Premium Church Management Platform
   Colors: Royal Blue #1e3a8a | Gold #f59e0b | Purple #7c3aed
   ============================================================ */

:root {
  --primary:        #1e3a8a;
  --primary-light:  #2563eb;
  --primary-dark:   #1e2d6b;
  --gold:           #f59e0b;
  --gold-light:     #fbbf24;
  --purple:         #7c3aed;
  --purple-light:   #8b5cf6;
  --success:        #10b981;
  --danger:         #ef4444;
  --warning:        #f59e0b;
  --info:           #06b6d4;
  --light:          #f8fafc;
  --dark:           #0f172a;
  --gray:           #64748b;
  --gray-light:     #e2e8f0;
  --white:          #ffffff;

  --sidebar-width:  260px;
  --header-height:  64px;
  --radius:         12px;
  --radius-sm:      8px;
  --radius-lg:      16px;
  --shadow:         0 4px 24px rgba(30,58,138,.10);
  --shadow-sm:      0 2px 8px rgba(30,58,138,.08);
  --shadow-lg:      0 8px 40px rgba(30,58,138,.15);

  --font:           'Inter', 'Segoe UI', system-ui, sans-serif;
  --transition:     0.22s cubic-bezier(.4,0,.2,1);
}

/* Reset & Base */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  background: var(--light);
  color: var(--dark);
  line-height: 1.6;
  min-height: 100vh;
}
a { color: var(--primary); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--primary-light); }
img { max-width: 100%; height: auto; }

/* ============================================================
   PUBLIC WEBSITE — Navigation
   ============================================================ */
.public-nav {
  background: var(--white);
  border-bottom: 3px solid var(--gold);
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 0;
  z-index: 1000;
}
.public-nav .nav-brand {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--primary);
  display: flex;
  align-items: center;
  gap: 10px;
}
.public-nav .nav-brand .brand-icon {
  width: 40px; height: 40px;
  background: linear-gradient(135deg, var(--primary), var(--purple));
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: var(--white);
  font-size: 1.2rem;
}
.public-nav .nav-link {
  color: var(--dark) !important;
  font-weight: 500;
  padding: 8px 14px !important;
  border-radius: var(--radius-sm);
  transition: all var(--transition);
}
.public-nav .nav-link:hover,
.public-nav .nav-link.active {
  color: var(--primary) !important;
  background: rgba(30,58,138,.08);
}
.btn-nav-login {
  background: var(--primary);
  color: var(--white) !important;
  border-radius: 50px;
  padding: 8px 22px !important;
  font-weight: 600;
}
.btn-nav-login:hover {
  background: var(--primary-dark) !important;
  color: var(--white) !important;
}

/* ============================================================
   PUBLIC WEBSITE — Hero
   ============================================================ */
.hero-section {
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 50%, var(--purple) 100%);
  color: var(--white);
  padding: 100px 0 80px;
  position: relative;
  overflow: hidden;
}
.hero-section::before {
  content: '';
  position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.hero-badge {
  display: inline-block;
  background: rgba(245,158,11,.2);
  border: 1px solid var(--gold);
  color: var(--gold);
  padding: 6px 16px;
  border-radius: 50px;
  font-size: .85rem;
  font-weight: 600;
  margin-bottom: 20px;
  letter-spacing: 0.5px;
}
.hero-title {
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  font-weight: 900;
  line-height: 1.15;
  margin-bottom: 20px;
}
.hero-title span { color: var(--gold); }
.hero-subtitle {
  font-size: 1.15rem;
  opacity: .85;
  margin-bottom: 36px;
  max-width: 520px;
}
.hero-tagline {
  font-size: 1rem;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.hero-buttons { display: flex; gap: 14px; flex-wrap: wrap; }
.btn-hero-primary {
  background: var(--gold);
  color: var(--dark);
  border: none;
  padding: 14px 30px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: all var(--transition);
  display: inline-flex; align-items: center; gap: 8px;
}
.btn-hero-primary:hover { background: var(--gold-light); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(245,158,11,.4); }
.btn-hero-outline {
  background: transparent;
  color: var(--white);
  border: 2px solid rgba(255,255,255,.5);
  padding: 14px 30px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: all var(--transition);
  display: inline-flex; align-items: center; gap: 8px;
}
.btn-hero-outline:hover { background: rgba(255,255,255,.1); border-color: var(--white); }

/* Stats Bar */
.hero-stats {
  display: flex; gap: 32px; flex-wrap: wrap;
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,.15);
}
.hero-stat { text-align: center; }
.hero-stat .stat-number {
  font-size: 2rem; font-weight: 900; color: var(--gold); display: block;
}
.hero-stat .stat-label { font-size: .8rem; opacity: .7; text-transform: uppercase; letter-spacing: 1px; }

/* Live Badge */
.live-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--danger); color: var(--white);
  padding: 6px 16px; border-radius: 50px;
  font-weight: 700; font-size: .85rem; animation: pulse 2s infinite;
}
.live-badge::before { content: '●'; font-size: 10px; }

@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.6} }

/* ============================================================
   PUBLIC WEBSITE — Sections
   ============================================================ */
.section { padding: 80px 0; }
.section-alt { background: var(--white); }
.section-title {
  font-size: 2rem; font-weight: 800; color: var(--primary); margin-bottom: 12px;
}
.section-subtitle { color: var(--gray); font-size: 1.05rem; margin-bottom: 48px; }
.section-badge {
  display: inline-block; background: rgba(30,58,138,.08);
  color: var(--primary); padding: 4px 14px; border-radius: 50px;
  font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
  margin-bottom: 12px;
}

/* Feature Cards */
.feature-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gray-light);
  transition: all var(--transition);
  height: 100%;
}
.feature-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--primary);
}
.feature-icon {
  width: 60px; height: 60px;
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  color: var(--white); font-size: 1.5rem; margin-bottom: 20px;
}
.feature-icon.gold { background: linear-gradient(135deg, var(--gold), var(--gold-light)); }
.feature-icon.purple { background: linear-gradient(135deg, var(--purple), var(--purple-light)); }
.feature-icon.green { background: linear-gradient(135deg, #059669, var(--success)); }
.feature-title { font-size: 1.1rem; font-weight: 700; color: var(--dark); margin-bottom: 10px; }
.feature-desc { color: var(--gray); font-size: .9rem; line-height: 1.6; }

/* Modules Grid */
.module-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 24px;
  border: 2px solid var(--gray-light);
  text-align: center;
  transition: all var(--transition);
  cursor: default;
}
.module-card:hover {
  border-color: var(--primary);
  background: rgba(30,58,138,.03);
  transform: translateY(-3px);
}
.module-card .module-icon { font-size: 2rem; margin-bottom: 12px; display: block; }
.module-card .module-name { font-weight: 700; font-size: .9rem; color: var(--dark); }

/* Testimonials */
.testimonial-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow-sm);
  border-left: 4px solid var(--gold);
}
.testimonial-text { font-style: italic; color: var(--gray); margin-bottom: 16px; line-height: 1.7; }
.testimonial-author { font-weight: 700; color: var(--dark); }
.testimonial-role { font-size: .85rem; color: var(--gray); }

/* Watch Live Section */
.watch-live-card {
  background: linear-gradient(135deg, var(--dark), var(--primary-dark));
  border-radius: var(--radius-lg);
  padding: 40px;
  color: var(--white);
  text-align: center;
}
.watch-live-card h3 { font-size: 1.8rem; font-weight: 800; margin-bottom: 12px; }

/* Give Online */
.give-card {
  background: linear-gradient(135deg, var(--gold), #d97706);
  border-radius: var(--radius-lg);
  padding: 40px;
  color: var(--dark);
  text-align: center;
}
.give-card h3 { font-size: 1.8rem; font-weight: 800; margin-bottom: 12px; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn-primary-custom {
  background: var(--primary); color: var(--white); border: none;
  padding: 12px 28px; border-radius: 50px; font-weight: 600;
  transition: all var(--transition); display: inline-flex; align-items: center; gap: 8px;
  cursor: pointer; font-size: .95rem;
}
.btn-primary-custom:hover { background: var(--primary-dark); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(30,58,138,.35); color: var(--white); }

.btn-gold { background: var(--gold); color: var(--dark); border: none; padding: 12px 28px; border-radius: 50px; font-weight: 700; transition: all var(--transition); display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.btn-gold:hover { background: var(--gold-light); transform: translateY(-2px); }

.btn-outline-primary-custom {
  background: transparent; color: var(--primary); border: 2px solid var(--primary);
  padding: 10px 24px; border-radius: 50px; font-weight: 600;
  transition: all var(--transition); display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
}
.btn-outline-primary-custom:hover { background: var(--primary); color: var(--white); }

/* WhatsApp Float */
.whatsapp-float {
  position: fixed; bottom: 24px; right: 24px; z-index: 9999;
  background: #25D366; color: var(--white);
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; box-shadow: 0 4px 20px rgba(37,211,102,.4);
  transition: all var(--transition); text-decoration: none;
}
.whatsapp-float:hover { transform: scale(1.1); color: var(--white); box-shadow: 0 8px 30px rgba(37,211,102,.5); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--dark);
  color: rgba(255,255,255,.75);
  padding: 60px 0 24px;
}
.footer-brand { font-size: 1.4rem; font-weight: 800; color: var(--white); margin-bottom: 12px; }
.footer-desc { font-size: .9rem; line-height: 1.7; margin-bottom: 24px; }
.footer-heading { font-size: 1rem; font-weight: 700; color: var(--white); margin-bottom: 16px; }
.footer-link { color: rgba(255,255,255,.65); display: block; margin-bottom: 8px; font-size: .9rem; transition: color var(--transition); }
.footer-link:hover { color: var(--gold); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.1);
  margin-top: 48px; padding-top: 24px;
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
}
.footer-bottom p { margin: 0; font-size: .85rem; }

/* ============================================================
   AUTH PAGES
   ============================================================ */
.auth-wrapper {
  min-height: 100vh;
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 50%, var(--purple) 100%);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.auth-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 48px 40px;
  width: 100%; max-width: 460px;
  box-shadow: var(--shadow-lg);
}
.auth-logo {
  text-align: center; margin-bottom: 32px;
}
.auth-logo .logo-icon {
  width: 64px; height: 64px;
  background: linear-gradient(135deg, var(--primary), var(--purple));
  border-radius: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.8rem; color: var(--white); margin-bottom: 12px;
}
.auth-logo h2 { font-size: 1.5rem; font-weight: 800; color: var(--primary); margin-bottom: 4px; }
.auth-logo p { color: var(--gray); font-size: .9rem; }
.auth-form label { font-weight: 600; color: var(--dark); font-size: .9rem; margin-bottom: 6px; display: block; }
.auth-form .form-control {
  border: 2px solid var(--gray-light);
  border-radius: var(--radius-sm);
  padding: 12px 16px; font-size: .95rem;
  transition: all var(--transition);
  width: 100%;
}
.auth-form .form-control:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(30,58,138,.1);
  outline: none;
}
.btn-auth {
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  color: var(--white); border: none;
  width: 100%; padding: 14px;
  border-radius: 50px; font-size: 1rem; font-weight: 700;
  cursor: pointer; transition: all var(--transition);
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.btn-auth:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(30,58,138,.4); }
.auth-divider { text-align: center; color: var(--gray); font-size: .85rem; margin: 20px 0; position: relative; }
.auth-divider::before, .auth-divider::after {
  content: ''; position: absolute; top: 50%; width: 42%; height: 1px; background: var(--gray-light);
}
.auth-divider::before { left: 0; }
.auth-divider::after { right: 0; }
.demo-logins { background: var(--light); border-radius: var(--radius); padding: 16px; margin-top: 20px; }
.demo-logins h6 { font-weight: 700; font-size: .8rem; color: var(--gray); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; }
.demo-login-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 0; border-bottom: 1px solid var(--gray-light); font-size: .82rem;
  cursor: pointer; transition: all var(--transition);
}
.demo-login-item:last-child { border-bottom: none; }
.demo-login-item:hover { color: var(--primary); }
.demo-login-item .role-badge {
  background: rgba(30,58,138,.1); color: var(--primary);
  padding: 2px 8px; border-radius: 50px; font-size: .7rem; font-weight: 700;
}

/* ============================================================
   DASHBOARD LAYOUT
   ============================================================ */
.app-wrapper { display: flex; min-height: 100vh; }

/* Sidebar */
.app-sidebar {
  width: var(--sidebar-width);
  background: linear-gradient(180deg, var(--primary-dark) 0%, var(--primary) 100%);
  position: fixed; top: 0; left: 0; height: 100vh;
  overflow-y: auto; z-index: 100;
  transition: transform var(--transition);
  display: flex; flex-direction: column;
}
.app-sidebar::-webkit-scrollbar { width: 4px; }
.app-sidebar::-webkit-scrollbar-track { background: transparent; }
.app-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); border-radius: 2px; }

.sidebar-brand {
  padding: 20px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.sidebar-brand .brand-name {
  font-size: 1.1rem; font-weight: 800; color: var(--white);
  display: flex; align-items: center; gap: 10px;
}
.sidebar-brand .brand-icon {
  width: 36px; height: 36px;
  background: rgba(255,255,255,.15);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
}
.sidebar-brand .brand-tagline { font-size: .7rem; color: rgba(255,255,255,.5); margin-top: 2px; letter-spacing: .5px; }

.sidebar-user {
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255,255,255,.1);
  display: flex; align-items: center; gap: 12px;
}
.sidebar-user .user-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.2);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: var(--white); font-size: 1rem; flex-shrink: 0;
  overflow: hidden;
}
.sidebar-user .user-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sidebar-user .user-name { font-weight: 600; color: var(--white); font-size: .9rem; }
.sidebar-user .user-role { font-size: .7rem; color: var(--gold); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }

.sidebar-nav { flex: 1; padding: 12px 0; }
.nav-section-label {
  padding: 10px 20px 4px;
  font-size: .65rem; font-weight: 700;
  color: rgba(255,255,255,.35); text-transform: uppercase; letter-spacing: 1.5px;
}
.sidebar-nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 20px; color: rgba(255,255,255,.75);
  font-size: .875rem; font-weight: 500;
  transition: all var(--transition); border-left: 3px solid transparent;
  text-decoration: none; position: relative;
}
.sidebar-nav a:hover {
  color: var(--white);
  background: rgba(255,255,255,.08);
  border-left-color: rgba(255,255,255,.3);
}
.sidebar-nav a.active {
  color: var(--white);
  background: rgba(255,255,255,.12);
  border-left-color: var(--gold);
  font-weight: 700;
}
.sidebar-nav a i { width: 18px; text-align: center; flex-shrink: 0; }
.sidebar-nav .nav-badge {
  margin-left: auto;
  background: var(--danger); color: var(--white);
  padding: 2px 7px; border-radius: 50px; font-size: .65rem; font-weight: 700;
}
.sidebar-nav .nav-badge.gold { background: var(--gold); color: var(--dark); }

.sidebar-footer {
  padding: 16px 20px;
  border-top: 1px solid rgba(255,255,255,.1);
}
.sidebar-footer a {
  display: flex; align-items: center; gap: 10px;
  color: rgba(255,255,255,.6); font-size: .85rem;
  padding: 8px 0; transition: color var(--transition);
  text-decoration: none;
}
.sidebar-footer a:hover { color: var(--white); }

/* Main Content */
.app-main {
  margin-left: var(--sidebar-width);
  flex: 1; min-height: 100vh;
  display: flex; flex-direction: column;
}

/* Top Header */
.app-header {
  background: var(--white);
  border-bottom: 1px solid var(--gray-light);
  padding: 0 24px;
  height: var(--header-height);
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 99;
  box-shadow: var(--shadow-sm);
}
.app-header .page-title { font-size: 1.1rem; font-weight: 700; color: var(--dark); }
.app-header .header-actions { display: flex; align-items: center; gap: 12px; }

.header-btn {
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--light); border: 1px solid var(--gray-light);
  color: var(--gray); cursor: pointer; transition: all var(--transition);
  position: relative; text-decoration: none;
}
.header-btn:hover { background: rgba(30,58,138,.08); color: var(--primary); border-color: var(--primary); }
.header-btn .notif-dot {
  position: absolute; top: 4px; right: 4px;
  width: 8px; height: 8px; background: var(--danger); border-radius: 50%; border: 2px solid var(--white);
}

/* Content Area */
.app-content { flex: 1; padding: 24px; }

/* Page Header */
.page-header {
  margin-bottom: 24px;
  display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 16px;
}
.page-header h1 { font-size: 1.6rem; font-weight: 800; color: var(--dark); margin-bottom: 4px; }
.page-header .breadcrumb-custom { font-size: .85rem; color: var(--gray); }
.page-header .breadcrumb-custom a { color: var(--primary); }

/* ============================================================
   DASHBOARD STATS CARDS
   ============================================================ */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-bottom: 28px;
}
.stat-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gray-light);
  display: flex; align-items: center; gap: 20px;
  transition: all var(--transition);
  position: relative; overflow: hidden;
}
.stat-card::after {
  content: ''; position: absolute; right: -20px; top: -20px;
  width: 80px; height: 80px; border-radius: 50%;
  background: currentColor; opacity: .04;
}
.stat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.stat-card-icon {
  width: 56px; height: 56px; border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; flex-shrink: 0;
}
.stat-card-icon.blue { background: rgba(30,58,138,.1); color: var(--primary); }
.stat-card-icon.gold { background: rgba(245,158,11,.12); color: var(--gold); }
.stat-card-icon.purple { background: rgba(124,58,237,.1); color: var(--purple); }
.stat-card-icon.green { background: rgba(16,185,129,.1); color: var(--success); }
.stat-card-icon.red { background: rgba(239,68,68,.1); color: var(--danger); }
.stat-card-icon.cyan { background: rgba(6,182,212,.1); color: var(--info); }

.stat-card-info { flex: 1; }
.stat-card-value { font-size: 2rem; font-weight: 900; color: var(--dark); line-height: 1; }
.stat-card-label { font-size: .82rem; color: var(--gray); margin-top: 4px; font-weight: 500; }
.stat-card-change {
  font-size: .78rem; font-weight: 700; margin-top: 6px;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 50px;
}
.stat-card-change.up { background: rgba(16,185,129,.1); color: var(--success); }
.stat-card-change.down { background: rgba(239,68,68,.1); color: var(--danger); }

/* ============================================================
   CONTENT CARDS
   ============================================================ */
.content-card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gray-light);
  overflow: hidden;
  margin-bottom: 24px;
}
.content-card-header {
  padding: 18px 24px;
  border-bottom: 1px solid var(--gray-light);
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
}
.content-card-title { font-size: 1rem; font-weight: 700; color: var(--dark); display: flex; align-items: center; gap: 8px; }
.content-card-title i { color: var(--primary); }
.content-card-body { padding: 20px 24px; }

/* ============================================================
   TABLES
   ============================================================ */
.table-custom { width: 100%; border-collapse: collapse; font-size: .9rem; }
.table-custom th {
  background: var(--light);
  padding: 12px 16px;
  text-align: left; font-weight: 700; color: var(--gray);
  font-size: .78rem; text-transform: uppercase; letter-spacing: .5px;
  border-bottom: 2px solid var(--gray-light);
}
.table-custom td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--gray-light);
  vertical-align: middle;
  color: var(--dark);
}
.table-custom tr:last-child td { border-bottom: none; }
.table-custom tr:hover td { background: rgba(30,58,138,.02); }
.table-custom .member-name { font-weight: 600; color: var(--dark); }
.table-custom .member-id { font-size: .78rem; color: var(--gray); }

/* ============================================================
   BADGES / STATUS
   ============================================================ */
.status-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 12px; border-radius: 50px;
  font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
}
.status-badge::before { content: '●'; font-size: 8px; }
.status-active    { background: rgba(16,185,129,.1);  color: #047857; }
.status-inactive  { background: rgba(100,116,139,.1); color: var(--gray); }
.status-pending   { background: rgba(245,158,11,.1);  color: #92400e; }
.status-verified  { background: rgba(16,185,129,.1);  color: #047857; }
.status-rejected  { background: rgba(239,68,68,.1);   color: #b91c1c; }
.status-live      { background: rgba(239,68,68,.1);   color: #b91c1c; animation: pulse 2s infinite; }
.status-upcoming  { background: rgba(6,182,212,.1);   color: #0e7490; }
.status-ended     { background: rgba(100,116,139,.1); color: var(--gray); }
.status-open      { background: rgba(239,68,68,.1);   color: #b91c1c; }
.status-resolved  { background: rgba(16,185,129,.1);  color: #047857; }
.status-member    { background: rgba(30,58,138,.1);   color: var(--primary); }
.status-visitor   { background: rgba(124,58,237,.1);  color: var(--purple); }
.status-published { background: rgba(16,185,129,.1);  color: #047857; }
.status-new       { background: rgba(245,158,11,.1);  color: #92400e; }

/* Role Badge */
.role-chip {
  display: inline-block; padding: 3px 10px; border-radius: 50px;
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
}
.role-super_admin    { background: #fef3c7; color: #92400e; }
.role-church_admin   { background: #dbeafe; color: #1e40af; }
.role-senior_pastor  { background: #f3e8ff; color: #6b21a8; }
.role-associate_pastor { background: #ede9fe; color: #5b21b6; }
.role-finance_officer { background: #d1fae5; color: #065f46; }
.role-welfare_officer { background: #fee2e2; color: #991b1b; }
.role-department_leader { background: #dbeafe; color: #1e40af; }
.role-volunteer      { background: #fce7f3; color: #9d174d; }
.role-member         { background: #f1f5f9; color: #475569; }
.role-visitor        { background: #f0fdf4; color: #166534; }

/* ============================================================
   FORMS
   ============================================================ */
.form-label-custom { font-weight: 600; color: var(--dark); font-size: .875rem; margin-bottom: 6px; display: block; }
.form-label-custom span { color: var(--danger); }
.form-control-custom {
  border: 2px solid var(--gray-light);
  border-radius: var(--radius-sm);
  padding: 10px 14px; font-size: .9rem;
  width: 100%; transition: all var(--transition);
  background: var(--white); color: var(--dark);
}
.form-control-custom:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(30,58,138,.1);
  outline: none;
}
.form-group { margin-bottom: 20px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 768px) { .form-row { grid-template-columns: 1fr; } }
.form-hint { font-size: .78rem; color: var(--gray); margin-top: 4px; }

/* ============================================================
   MEMBER PASSPORT / QR
   ============================================================ */
.passport-card {
  background: linear-gradient(135deg, var(--primary-dark), var(--primary));
  border-radius: var(--radius-lg);
  padding: 28px;
  color: var(--white);
  max-width: 340px;
  position: relative;
  overflow: hidden;
}
.passport-card::before {
  content: '';
  position: absolute; top: -30px; right: -30px;
  width: 120px; height: 120px; border-radius: 50%;
  background: rgba(245,158,11,.15);
}
.passport-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 24px; }
.passport-logo { font-size: .9rem; font-weight: 800; }
.passport-type { font-size: .65rem; text-transform: uppercase; letter-spacing: 2px; color: var(--gold); }
.passport-avatar {
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(255,255,255,.15); border: 3px solid var(--gold);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; font-weight: 800; margin-bottom: 12px;
}
.passport-name { font-size: 1.2rem; font-weight: 800; margin-bottom: 2px; }
.passport-id-code { font-size: .75rem; color: var(--gold); font-weight: 700; letter-spacing: 1px; margin-bottom: 20px; }
.passport-field { margin-bottom: 10px; }
.passport-field .label { font-size: .65rem; color: rgba(255,255,255,.5); text-transform: uppercase; letter-spacing: 1px; }
.passport-field .value { font-size: .85rem; font-weight: 600; }
.passport-qr {
  background: var(--white); border-radius: var(--radius-sm);
  padding: 12px; display: inline-flex;
  margin-top: 16px;
}

/* ============================================================
   ALERTS & FLASH MESSAGES
   ============================================================ */
.flash-message {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 20px; border-radius: var(--radius-sm);
  margin-bottom: 20px; font-size: .9rem; font-weight: 500;
  animation: slideDown .3s ease;
}
@keyframes slideDown { from{transform:translateY(-10px);opacity:0} to{transform:translateY(0);opacity:1} }
.flash-success { background: #d1fae5; color: #065f46; border-left: 4px solid var(--success); }
.flash-error   { background: #fee2e2; color: #991b1b; border-left: 4px solid var(--danger); }
.flash-warning { background: #fef3c7; color: #92400e; border-left: 4px solid var(--warning); }
.flash-info    { background: #dbeafe; color: #1e40af; border-left: 4px solid var(--info); }

/* ============================================================
   ATTENDANCE DASHBOARD
   ============================================================ */
.attendance-ring { position: relative; display: inline-flex; }
.attendance-ring svg { transform: rotate(-90deg); }
.attendance-pct {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-weight: 900; font-size: 1.4rem; color: var(--primary);
}
.attendance-pct small { font-size: .65rem; font-weight: 500; color: var(--gray); }

.check-in-card {
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  border-radius: var(--radius-lg); padding: 32px;
  color: var(--white); text-align: center;
}
.btn-checkin {
  background: var(--white); color: var(--primary);
  border: none; padding: 14px 32px; border-radius: 50px;
  font-size: 1.1rem; font-weight: 800; cursor: pointer;
  transition: all var(--transition); display: inline-flex; align-items: center; gap: 10px;
}
.btn-checkin:hover { transform: scale(1.05); box-shadow: 0 8px 24px rgba(0,0,0,.2); }

/* ============================================================
   LIVE STREAM EMBED
   ============================================================ */
.stream-embed {
  position: relative; padding-bottom: 56.25%;
  height: 0; border-radius: var(--radius); overflow: hidden; background: var(--dark);
}
.stream-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }
.stream-overlay {
  background: rgba(0,0,0,.85); border-radius: var(--radius);
  padding: 40px; text-align: center; color: var(--white);
}
.stream-overlay i { font-size: 3rem; margin-bottom: 16px; color: var(--gold); }

/* ============================================================
   GIVING / FINANCE
   ============================================================ */
.giving-category-card {
  border: 2px solid var(--gray-light); border-radius: var(--radius);
  padding: 20px; cursor: pointer; transition: all var(--transition);
  text-align: center;
}
.giving-category-card:hover,
.giving-category-card.selected {
  border-color: var(--primary); background: rgba(30,58,138,.04);
}
.giving-category-card i { font-size: 1.8rem; color: var(--primary); margin-bottom: 10px; display: block; }
.giving-category-card .cat-name { font-weight: 700; font-size: .9rem; }
.giving-category-card .cat-desc { font-size: .78rem; color: var(--gray); margin-top: 4px; }

.finance-stat-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px;
}
.finance-stat {
  background: var(--light); border-radius: var(--radius-sm);
  padding: 16px; text-align: center;
}
.finance-stat .amount { font-size: 1.4rem; font-weight: 900; color: var(--primary); }
.finance-stat .label { font-size: .78rem; color: var(--gray); margin-top: 4px; }

/* ============================================================
   PRAYER REQUESTS
   ============================================================ */
.prayer-card {
  background: var(--white);
  border: 1px solid var(--gray-light); border-radius: var(--radius);
  padding: 20px; margin-bottom: 16px; transition: all var(--transition);
  border-left: 4px solid var(--primary);
}
.prayer-card:hover { box-shadow: var(--shadow-sm); }
.prayer-card .prayer-category {
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1px; color: var(--primary); margin-bottom: 8px;
}
.prayer-card .prayer-subject { font-size: 1rem; font-weight: 700; color: var(--dark); margin-bottom: 8px; }
.prayer-card .prayer-desc { font-size: .88rem; color: var(--gray); line-height: 1.6; }
.prayer-card .prayer-footer {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 14px; font-size: .78rem; color: var(--gray);
}
.prayer-card.confidential { border-left-color: var(--purple); }
.prayer-card.urgent { border-left-color: var(--danger); }
.prayer-card.answered { border-left-color: var(--success); }

/* ============================================================
   RESPONSIVE — Mobile
   ============================================================ */
.sidebar-toggle {
  display: none;
  background: none; border: none;
  font-size: 1.3rem; color: var(--dark); cursor: pointer;
  padding: 4px; border-radius: 6px;
}

@media (max-width: 992px) {
  .app-sidebar {
    transform: translateX(-100%);
  }
  .app-sidebar.open {
    transform: translateX(0);
  }
  .app-main {
    margin-left: 0;
  }
  .sidebar-toggle { display: flex; }
  .sidebar-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,.5); z-index: 99;
  }
  .sidebar-overlay.open { display: block; }
}
@media (max-width: 576px) {
  .hero-section { padding: 60px 0 50px; }
  .hero-title { font-size: 2rem; }
  .auth-card { padding: 32px 24px; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .app-content { padding: 16px; }
  .content-card-body { padding: 16px; }
}

/* ============================================================
   UTILITY
   ============================================================ */
.text-primary-custom { color: var(--primary) !important; }
.text-gold { color: var(--gold) !important; }
.text-purple { color: var(--purple) !important; }
.text-muted-custom { color: var(--gray) !important; }
.bg-primary-custom { background: var(--primary) !important; }
.bg-light-custom { background: var(--light) !important; }
.fw-900 { font-weight: 900 !important; }
.gap-2 { gap: 8px; }
.mt-1 { margin-top: 4px; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 16px; } .mt-4 { margin-top: 24px; }
.mb-1 { margin-bottom: 4px; } .mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 16px; } .mb-4 { margin-bottom: 24px; }

/* Spinner */
.spinner {
  width: 32px; height: 32px; border-radius: 50%;
  border: 3px solid var(--gray-light);
  border-top-color: var(--primary);
  animation: spin .7s linear infinite; display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Tooltip */
[data-tooltip] { position: relative; cursor: help; }
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute; bottom: calc(100% + 6px); left: 50%;
  transform: translateX(-50%);
  background: var(--dark); color: var(--white);
  padding: 4px 10px; border-radius: 6px; font-size: .75rem;
  white-space: nowrap; pointer-events: none; opacity: 0;
  transition: opacity var(--transition);
}
[data-tooltip]:hover::after { opacity: 1; }

/* Member Journey Progress */
.journey-step { display: flex; align-items: center; gap: 8px; padding: 10px 0; }
.journey-step .step-dot {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem; font-weight: 700; flex-shrink: 0;
}
.step-dot.done { background: var(--success); color: var(--white); }
.step-dot.current { background: var(--primary); color: var(--white); border: 3px solid rgba(30,58,138,.3); }
.step-dot.todo { background: var(--gray-light); color: var(--gray); }
.journey-step .step-label { font-size: .875rem; color: var(--dark); }
.journey-step .step-label.done { text-decoration: line-through; color: var(--gray); }

/* Empty State */
.empty-state { text-align: center; padding: 60px 20px; }
.empty-state i { font-size: 3rem; color: var(--gray-light); margin-bottom: 16px; display: block; }
.empty-state h5 { font-size: 1rem; font-weight: 700; color: var(--gray); margin-bottom: 8px; }
.empty-state p { font-size: .875rem; color: var(--gray); }

/* Avatar Initials */
.avatar-initials {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; font-weight: 700; color: var(--white);
  background: linear-gradient(135deg, var(--primary), var(--purple));
}
.avatar-sm { width: 32px; height: 32px; font-size: .75rem; }
.avatar-md { width: 44px; height: 44px; font-size: .95rem; }
.avatar-lg { width: 60px; height: 60px; font-size: 1.2rem; }
.avatar-xl { width: 80px; height: 80px; font-size: 1.5rem; }

/* Chart Container */
.chart-container { position: relative; }

/* Tabs */
.tabs-custom { border-bottom: 2px solid var(--gray-light); margin-bottom: 20px; display: flex; gap: 4px; }
.tabs-custom .tab-link {
  padding: 10px 20px; border: none; background: none;
  color: var(--gray); font-weight: 600; font-size: .9rem;
  cursor: pointer; border-bottom: 2px solid transparent;
  margin-bottom: -2px; transition: all var(--transition);
}
.tabs-custom .tab-link:hover { color: var(--primary); }
.tabs-custom .tab-link.active { color: var(--primary); border-bottom-color: var(--primary); }
.tab-pane { display: none; }
.tab-pane.active { display: block; }

/* Pagination */
.pagination-custom { display: flex; gap: 6px; justify-content: center; margin-top: 20px; flex-wrap: wrap; }
.pagination-custom a, .pagination-custom span {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--radius-sm);
  font-size: .85rem; font-weight: 600; transition: all var(--transition);
  border: 1px solid var(--gray-light); color: var(--gray); text-decoration: none;
}
.pagination-custom a:hover { background: var(--primary); color: var(--white); border-color: var(--primary); }
.pagination-custom span.current { background: var(--primary); color: var(--white); border-color: var(--primary); }

/* Print */
@media print {
  .app-sidebar, .app-header, .no-print { display: none !important; }
  .app-main { margin-left: 0 !important; }
  body { background: white !important; }
}

/* ============================================================
   KOAF ChurchPro Emergency Layout Repair - added by ChatGPT
   Fixes missing CSS symptoms, spacing, headers and cards.
   ============================================================ */
body{background:#f4f7fb!important;color:#0f172a!important;font-family:Inter,'Segoe UI',system-ui,sans-serif!important} 
.public-nav{background:#fff!important;border-bottom:1px solid #e5e7eb!important;box-shadow:0 4px 18px rgba(15,23,42,.06)!important;padding:12px 0!important}.public-nav .container{display:flex;align-items:center;gap:20px}.navbar-collapse{align-items:center}.nav-brand{font-size:1.25rem!important;font-weight:900!important;color:#1e3a8a!important}.brand-icon{display:inline-flex!important;width:42px!important;height:42px!important;border-radius:12px!important;background:linear-gradient(135deg,#1e3a8a,#7c3aed)!important;color:#fff!important;align-items:center!important;justify-content:center!important;margin-right:8px}.public-nav .nav-link{color:#111827!important;font-weight:600!important;padding:10px 13px!important;border-radius:10px!important}.public-nav .nav-link:hover,.public-nav .nav-link.active{background:#eef4ff!important;color:#1e3a8a!important}.btn-nav-login{background:#1e3a8a!important;color:#fff!important;border-radius:999px!important;padding:10px 20px!important}.hero-section,section[style*="linear-gradient"]{background:linear-gradient(135deg,#111c3b 0%,#1e3a8a 52%,#7c3aed 100%)!important;color:#fff!important}.hero-section *,.hero-section p,.hero-section h1,.hero-section h2,section[style*="linear-gradient"] *{color:inherit}.hero-badge{background:rgba(245,158,11,.18)!important;border:1px solid #f59e0b!important;color:#fbbf24!important;border-radius:999px!important;padding:7px 16px!important;font-weight:800!important}.section{padding:80px 0!important}.section-alt{background:#fff!important}.section-title{font-size:clamp(1.8rem,3vw,2.6rem)!important;font-weight:900!important;color:#1e3a8a!important}.section-subtitle{color:#64748b!important;max-width:700px;margin-left:auto;margin-right:auto}.module-card,.feature-card,.event-card,.sermon-card,.content-card{background:#fff!important;border:1px solid #e5e7eb!important;border-radius:18px!important;box-shadow:0 10px 30px rgba(15,23,42,.08)!important;padding:24px!important;height:100%}.btn-primary-custom,.btn-gold,.btn-auth{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;border:none!important;border-radius:999px!important;font-weight:800!important;text-decoration:none!important;cursor:pointer!important}.btn-primary-custom,.btn-auth{background:linear-gradient(135deg,#1e3a8a,#2563eb)!important;color:#fff!important;padding:12px 24px!important}.btn-gold{background:linear-gradient(135deg,#f59e0b,#fbbf24)!important;color:#111827!important;padding:12px 24px!important}.btn-outline-primary-custom{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;border:1px solid #1e3a8a!important;color:#1e3a8a!important;background:#fff!important;border-radius:999px!important;font-weight:800!important;text-decoration:none!important;padding:11px 22px!important}.auth-wrapper{min-height:100vh!important;display:flex!important;align-items:center!important;justify-content:center!important;background:linear-gradient(135deg,#111c3b,#1e3a8a,#7c3aed)!important;padding:24px!important}.auth-card{background:#fff!important;border-radius:24px!important;box-shadow:0 24px 80px rgba(0,0,0,.25)!important;padding:34px!important}.auth-logo{text-align:center!important;margin-bottom:24px!important}.auth-logo .logo-icon{width:64px!important;height:64px!important;margin:0 auto 14px!important;display:flex!important;align-items:center!important;justify-content:center!important;background:linear-gradient(135deg,#1e3a8a,#7c3aed)!important;color:#fff!important;border-radius:18px!important;font-size:1.8rem!important}.auth-form label{font-weight:800!important;margin-bottom:8px!important;color:#0f172a!important}.auth-form .form-control,.auth-form .input-group-text{height:48px!important;border-color:#d1d5db!important}.demo-logins{background:#f8fafc!important;border:1px solid #e5e7eb!important;border-radius:16px!important;padding:16px!important}.demo-login-item{display:flex!important;justify-content:space-between!important;gap:8px!important;align-items:center!important;padding:10px 12px!important;border-radius:10px!important;cursor:pointer!important;background:#fff!important;margin-bottom:8px!important;border:1px solid #e5e7eb!important}.demo-login-item:hover{background:#eef4ff!important;border-color:#1e3a8a!important}.footer{background:#0f1f55!important;color:#fff!important;padding:48px 0 20px!important}.footer a,.footer-link{color:#dbeafe!important}.app-layout{min-height:100vh!important;background:#f4f7fb!important}.app-main{padding:24px!important}.stat-card{background:#fff!important;border-radius:18px!important;padding:24px!important;box-shadow:0 10px 25px rgba(15,23,42,.08)!important;border:1px solid #e5e7eb!important}.flash-message{border-radius:14px!important;padding:14px 16px!important;margin-bottom:16px!important}.flash-error{background:#fee2e2!important;color:#991b1b!important;border-left:4px solid #ef4444!important}.flash-success{background:#dcfce7!important;color:#166534!important;border-left:4px solid #22c55e!important}@media(max-width:991px){.public-nav .container{display:block}.navbar-nav{padding-top:14px}.hero-section{padding:64px 0!important}.section{padding:56px 0!important}.auth-card{padding:26px 20px!important}.demo-login-item{display:block!important}}

/* ============================================================
   KOAF CHURCHPRO PUBLIC LAYOUT FINAL REPAIR
   Fixes spacing, washed-out hero text, card arrangement and mobile layout.
   ============================================================ */
body{overflow-x:hidden;background:#f5f7fb!important;color:#0f172a!important;}
.public-nav{min-height:74px!important;border-bottom:1px solid #e5e7eb!important;}
.public-nav .container{display:flex;align-items:center;}
.public-nav .navbar-collapse{align-items:center;}
.public-nav .navbar-nav{align-items:center;}
.public-nav .nav-link{white-space:nowrap;}
section[style*="linear-gradient"],.hero-section,.page-hero{
  color:#fff!important;
  min-height:auto!important;
  padding:72px 0!important;
  background:linear-gradient(135deg,#132451 0%,#1e3a8a 48%,#6d28d9 100%)!important;
}
section[style*="linear-gradient"] h1,
section[style*="linear-gradient"] h2,
section[style*="linear-gradient"] h3,
section[style*="linear-gradient"] p,
section[style*="linear-gradient"] span,
.hero-section h1,.hero-section h2,.hero-section p,.hero-section span,
.page-hero h1,.page-hero h2,.page-hero p,.page-hero span{
  color:#fff!important;opacity:1!important;text-shadow:none!important;
}
.hero-badge{display:inline-flex!important;align-items:center;gap:6px;background:rgba(245,158,11,.16)!important;color:#fbbf24!important;border:1px solid #f59e0b!important;border-radius:999px!important;padding:7px 16px!important;font-weight:800!important;}
.section{padding:70px 0!important;}
.container{max-width:1180px!important;}
.row{--bs-gutter-x:1.5rem;--bs-gutter-y:1.5rem;}
.feature-card,.event-card,.content-card,.module-card,.sermon-card{
  height:100%;background:#fff!important;border:1px solid #e5e7eb!important;border-radius:18px!important;box-shadow:0 12px 35px rgba(15,23,42,.08)!important;padding:24px!important;color:#0f172a!important;
}
.feature-card h1,.feature-card h2,.feature-card h3,.feature-card h4,.feature-card h5,.feature-card h6,
.event-card h1,.event-card h2,.event-card h3,.event-card h4,.event-card h5,.event-card h6,
.content-card h1,.content-card h2,.content-card h3,.content-card h4,.content-card h5,.content-card h6,
.module-card h1,.module-card h2,.module-card h3,.module-card h4,.module-card h5,.module-card h6,
.sermon-card h1,.sermon-card h2,.sermon-card h3,.sermon-card h4,.sermon-card h5,.sermon-card h6{color:#0f172a!important;}
.feature-card p,.event-card p,.content-card p,.module-card p,.sermon-card p{color:#475569!important;}
input,textarea,select,.form-control,.form-select{border:1px solid #dbe4f0!important;border-radius:12px!important;padding:12px 14px!important;background:#fff!important;color:#0f172a!important;}
.btn-primary-custom,.btn-auth,.btn-hero-primary,.btn-nav-login{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;text-decoration:none!important;border:none!important;}
.btn-primary-custom,.btn-auth{background:linear-gradient(135deg,#1e3a8a,#2563eb)!important;color:#fff!important;border-radius:999px!important;padding:12px 24px!important;font-weight:800!important;}
.btn-gold,.btn-hero-primary{background:linear-gradient(135deg,#f59e0b,#fbbf24)!important;color:#111827!important;border-radius:999px!important;padding:12px 24px!important;font-weight:800!important;}
.auth-wrapper{min-height:100vh!important;display:flex!important;align-items:center!important;justify-content:center!important;padding:28px!important;background:linear-gradient(135deg,#132451,#1e3a8a,#7c3aed)!important;}
.auth-card{width:100%!important;max-width:520px!important;background:#fff!important;border-radius:24px!important;padding:34px!important;box-shadow:0 24px 80px rgba(0,0,0,.25)!important;color:#0f172a!important;}
.auth-card h1,.auth-card h2,.auth-card h3,.auth-card p,.auth-card label{color:#0f172a!important;}
.demo-login-item{display:flex!important;justify-content:space-between!important;align-items:center!important;padding:12px 14px!important;border-radius:12px!important;border:1px solid #e5e7eb!important;background:#fff!important;margin-bottom:8px!important;color:#0f172a!important;}
.public-footer,footer{background:#0b1d55!important;color:#fff!important;}
.public-footer a,footer a{color:#fff!important;opacity:.9;}
.stream-embed{position:relative;width:100%;padding-top:56.25%;background:#071126;border-radius:14px;overflow:hidden;}
.stream-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.empty-state{background:#fff;border:1px solid #e5e7eb;border-radius:18px;padding:40px;text-align:center;color:#475569;}
.pagination-custom{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap;}
.pagination-custom a,.pagination-custom span{padding:8px 12px;border-radius:10px;border:1px solid #dbe4f0;background:#fff;color:#1e3a8a;text-decoration:none;font-weight:700;}
.pagination-custom .current{background:#1e3a8a;color:#fff;}
@media(max-width:991px){
  .public-nav .navbar-collapse{padding-top:14px;}
  .public-nav .navbar-nav{align-items:stretch!important;gap:4px!important;}
  .public-nav .nav-link{padding:10px 12px!important;}
  section[style*="linear-gradient"],.hero-section,.page-hero{padding:52px 0!important;text-align:center;}
  .section{padding:52px 0!important;}
  .auth-card{padding:24px!important;}
}
@media(max-width:576px){
  .public-nav .nav-brand{font-size:1rem!important;}
  .public-nav .nav-brand .brand-icon,.brand-icon{width:36px!important;height:36px!important;}
  h1{font-size:2rem!important;}
  .feature-card,.event-card,.content-card,.module-card,.sermon-card{padding:18px!important;}
}


/* ============================================================
   KOAF CHURCHPRO FINAL UI POLISH PATCH
   Purpose: clean arrangement, fixed widths, balanced spacing, readable text.
   ============================================================ */
html,body{width:100%;max-width:100%;overflow-x:hidden!important;background:#f5f7fb!important;color:#0f172a!important;}
body{font-family:Inter,'Segoe UI',system-ui,sans-serif!important;font-size:16px!important;line-height:1.55!important;}
.container{width:min(100% - 32px,1180px)!important;margin-inline:auto!important;padding-left:0!important;padding-right:0!important;}
.public-nav{height:auto!important;min-height:76px!important;background:#fff!important;border-bottom:1px solid #e5e7eb!important;box-shadow:0 8px 28px rgba(15,23,42,.06)!important;padding:0!important;}
.public-nav>.container{min-height:76px!important;display:flex!important;align-items:center!important;}
.public-nav .nav-brand{display:flex!important;align-items:center!important;gap:10px!important;font-size:1.22rem!important;font-weight:900!important;color:#12347f!important;line-height:1!important;}
.public-nav .brand-icon{flex:0 0 auto!important;width:44px!important;height:44px!important;border-radius:13px!important;background:linear-gradient(135deg,#1e3a8a,#7c3aed)!important;box-shadow:0 8px 20px rgba(30,58,138,.22)!important;}
.public-nav .navbar-collapse{justify-content:flex-end!important;align-items:center!important;}
.public-nav .navbar-nav{align-items:center!important;gap:5px!important;}
.public-nav .nav-link{font-size:.95rem!important;font-weight:800!important;color:#0f172a!important;padding:10px 13px!important;border-radius:12px!important;line-height:1!important;}
.public-nav .nav-link:hover,.public-nav .nav-link.active{background:#eef4ff!important;color:#1e3a8a!important;}
.btn-nav-login{background:#173783!important;color:#fff!important;border-radius:999px!important;padding:12px 22px!important;display:inline-flex!important;align-items:center!important;gap:7px!important;}
.announcement-bar{background:#1e3a8a!important;color:#fff!important;}
.announcement-bar *{color:inherit!important;}
.hero-section,.page-hero,section[style*="linear-gradient"]{background:linear-gradient(135deg,#142759 0%,#1e3a8a 50%,#6d28d9 100%)!important;color:#fff!important;padding:72px 0!important;min-height:0!important;}
.hero-section .container,.page-hero .container,section[style*="linear-gradient"] .container{position:relative;z-index:2!important;}
.hero-section h1,.hero-section h2,.hero-section h3,.hero-section p,.hero-section span,.page-hero h1,.page-hero h2,.page-hero p,.page-hero span,section[style*="linear-gradient"] h1,section[style*="linear-gradient"] h2,section[style*="linear-gradient"] h3,section[style*="linear-gradient"] p,section[style*="linear-gradient"] span{color:#fff!important;opacity:1!important;text-shadow:none!important;}
.hero-badge{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:7px!important;border:1px solid #f59e0b!important;background:rgba(245,158,11,.16)!important;color:#fbbf24!important;border-radius:999px!important;padding:8px 18px!important;font-weight:900!important;line-height:1!important;}
.hero-title,h1{letter-spacing:-.03em!important;}
.section{padding:72px 0!important;}
.section-title{color:#12347f!important;font-weight:950!important;text-align:center!important;letter-spacing:-.025em!important;}
.section-subtitle{max-width:720px!important;margin:0 auto 42px!important;text-align:center!important;color:#64748b!important;}
.row{--bs-gutter-x:1.5rem!important;--bs-gutter-y:1.5rem!important;}
.feature-card,.event-card,.sermon-card,.content-card,.module-card,.ministry-card,.prayer-card{background:#fff!important;border:1px solid #e5e7eb!important;border-radius:20px!important;box-shadow:0 14px 35px rgba(15,23,42,.08)!important;padding:24px!important;color:#0f172a!important;height:100%!important;overflow:hidden!important;}
.feature-card h1,.feature-card h2,.feature-card h3,.feature-card h4,.feature-card h5,.feature-card h6,.event-card h1,.event-card h2,.event-card h3,.event-card h4,.event-card h5,.event-card h6,.content-card h1,.content-card h2,.content-card h3,.content-card h4,.content-card h5,.content-card h6,.module-card h1,.module-card h2,.module-card h3,.module-card h4,.module-card h5,.module-card h6{color:#0f172a!important;}
.feature-card p,.event-card p,.content-card p,.module-card p,.sermon-card p{color:#475569!important;}
.btn-primary-custom,.btn-auth,.btn-gold,.btn-outline-primary-custom,.btn-hero-primary,.btn-hero-outline{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;border-radius:999px!important;font-weight:900!important;text-decoration:none!important;line-height:1.1!important;min-height:44px!important;}
.btn-primary-custom,.btn-auth{background:linear-gradient(135deg,#1e3a8a,#2563eb)!important;color:#fff!important;border:none!important;padding:12px 24px!important;}
.btn-gold,.btn-hero-primary{background:linear-gradient(135deg,#f59e0b,#fbbf24)!important;color:#111827!important;border:none!important;padding:12px 24px!important;}
.btn-outline-primary-custom,.btn-hero-outline{background:#fff!important;border:1px solid #1e3a8a!important;color:#1e3a8a!important;padding:11px 22px!important;}
input,select,textarea,.form-control,.form-select{width:100%!important;min-height:48px!important;border:1px solid #dbe4f0!important;border-radius:13px!important;background:#fff!important;color:#0f172a!important;padding:12px 14px!important;box-shadow:none!important;}
textarea{min-height:140px!important;resize:vertical!important;}
label{font-weight:700!important;color:#0f172a!important;margin-bottom:6px!important;}
.auth-wrapper{min-height:100vh!important;display:flex!important;align-items:center!important;justify-content:center!important;background:linear-gradient(135deg,#142759 0%,#1e3a8a 50%,#7c3aed 100%)!important;padding:32px 16px!important;}
.auth-card{width:100%!important;max-width:520px!important;background:#fff!important;color:#0f172a!important;border-radius:26px!important;padding:36px!important;box-shadow:0 30px 90px rgba(0,0,0,.28)!important;}
.auth-logo{text-align:center!important;margin-bottom:24px!important;}
.auth-logo .logo-icon{width:66px!important;height:66px!important;margin:0 auto 14px!important;border-radius:18px!important;background:linear-gradient(135deg,#1e3a8a,#7c3aed)!important;color:#fff!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:1.8rem!important;}
.auth-card h2{font-size:2rem!important;font-weight:900!important;letter-spacing:-.03em!important;text-align:center!important;color:#0f172a!important;}
.auth-card p,.auth-card label{color:#0f172a!important;}
.auth-form .input-group{border-radius:13px!important;overflow:hidden!important;}
.auth-form .input-group-text{min-height:48px!important;border-color:#dbe4f0!important;background:#f8fafc!important;color:#1e3a8a!important;}
.auth-form .btn-auth{width:auto!important;padding-left:26px!important;padding-right:26px!important;margin-top:4px!important;}
.demo-logins{background:#f8fafc!important;border:1px solid #e5e7eb!important;border-radius:18px!important;padding:16px!important;margin-top:10px!important;}
.demo-login-item{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;background:#fff!important;color:#0f172a!important;border:1px solid #e5e7eb!important;border-radius:13px!important;padding:12px 14px!important;margin:0 0 9px!important;cursor:pointer!important;transition:.2s ease!important;}
.demo-login-item:hover{background:#eef4ff!important;border-color:#1e3a8a!important;transform:translateY(-1px)!important;}
.demo-login-item .role-badge{font-size:.86rem!important;color:#334155!important;word-break:break-all!important;}
.site-footer,footer{background:#0b1d55!important;color:#fff!important;padding:48px 0 22px!important;}
.site-footer *,.site-footer a,footer *{color:#fff!important;}
.footer-link{display:block!important;opacity:.86!important;margin-bottom:8px!important;text-decoration:none!important;}
.whatsapp-float{position:fixed!important;right:18px!important;bottom:18px!important;z-index:999!important;}
.empty-state{background:#fff!important;border:1px solid #e5e7eb!important;border-radius:20px!important;padding:42px!important;text-align:center!important;color:#64748b!important;}
.stream-embed{position:relative!important;width:100%!important;padding-top:56.25%!important;background:#071126!important;border-radius:16px!important;overflow:hidden!important;}
.stream-embed iframe{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;border:0!important;}
@media(max-width:991px){.public-nav>.container{display:block!important;padding-top:10px!important;padding-bottom:10px!important}.public-nav .navbar-nav{align-items:stretch!important;padding-top:12px!important}.btn-nav-login{justify-content:center!important;margin-top:8px!important}.hero-section,.page-hero,section[style*="linear-gradient"]{padding:52px 0!important;text-align:center!important}.section{padding:54px 0!important}.auth-card{padding:28px 20px!important}.demo-login-item{align-items:flex-start!important;flex-direction:column!important}}
@media(max-width:576px){.container{width:min(100% - 22px,1180px)!important}.public-nav .nav-brand{font-size:1.05rem!important}.hero-section,.page-hero,section[style*="linear-gradient"]{padding:42px 0!important}h1,.hero-title{font-size:2rem!important}.feature-card,.event-card,.sermon-card,.content-card,.module-card{padding:18px!important}.auth-card{border-radius:22px!important}.auth-card h2{font-size:1.65rem!important}}