/* ================================================================
   Grain Coast Digital Platform — Admin Portal & Auth CSS
   Global Methodist Church — Grain Coast Annual Conference
   Design: Clean · Minimal · Precise
   ================================================================ */

/* ── Design Tokens ── */
:root {
  --gmc-blue:       #1F3B73;
  --gmc-blue-dark:  #152B56;
  --gmc-blue-mid:   #2B5BA8;
  --gmc-blue-light: #EEF2FA;
  --gmc-blue-ghost: rgba(31, 59, 115, 0.06);

  --gmc-white:      #FFFFFF;
  --gmc-surface:    #F7F9FC;
  --gmc-border:     #E4E9F2;
  --gmc-text:       #1A2332;
  --gmc-text-muted: #64748B;
  --gmc-gray-soft:  rgba(100, 116, 139, 0.07);

  /* Keep legacy names for backward compat */
  --gmc-black:      #1A2332;
  --gmc-gray:       #F7F9FC;
  --gmc-gray-mid:   #64748B;
  --gmc-gray-border:#E4E9F2;

  --sidebar-w:      264px;
  --sidebar-bg:     #152B56;
  --topbar-h:       60px;

  --shadow-xs:  0 1px 2px rgba(0,0,0,.05);
  --shadow-sm:  0 1px 4px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md:  0 4px 16px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04);
  --shadow-lg:  0 12px 40px rgba(0,0,0,.1), 0 4px 10px rgba(0,0,0,.05);

  --radius-sm:  6px;
  --radius:     10px;
  --radius-lg:  16px;

  --t-fast: 130ms ease;
  --t-base: 200ms ease;

  --bs-primary:     #1F3B73;
  --bs-primary-rgb: 31, 59, 115;
  --bs-border-color: #E4E9F2;
  --bs-border-radius: 10px;
}

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

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 0.9rem;
  background-color: var(--gmc-surface);
  color: var(--gmc-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ═══ Sidebar Layout ═══ */
body.gmc-has-sidebar { padding-left: var(--sidebar-w); min-height: 100vh; }

.gmc-sidebar {
  position: fixed; top: 0; left: 0;
  width: var(--sidebar-w); height: 100vh;
  background: var(--sidebar-bg);
  display: flex; flex-direction: column;
  z-index: 1040; overflow: hidden;
  transition: transform var(--t-base);
  box-shadow: 2px 0 16px rgba(0,0,0,.12);
}
.gmc-sidebar-scroll {
  display: flex; flex-direction: column; height: 100%;
  overflow-y: auto; scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.12) transparent;
}
.gmc-sidebar-scroll::-webkit-scrollbar { width: 4px; }
.gmc-sidebar-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 4px; }

.sidebar-brand {
  padding: 1.125rem 1.25rem; border-bottom: 1px solid rgba(255,255,255,.08);
  display: flex; align-items: center; gap: 0.75rem;
  text-decoration: none; flex-shrink: 0;
}
.sidebar-brand img {
  width: 38px; height: 38px; border-radius: var(--radius-sm);
  object-fit: contain; background: rgba(255,255,255,.1); padding: 4px; flex-shrink: 0;
}
.sidebar-brand-text .name { color: #fff; font-weight: 700; font-size: 0.82rem; line-height: 1.25; }
.sidebar-brand-text .sub  { color: rgba(255,255,255,.45); font-size: 0.7rem; line-height: 1.25; }

.sidebar-nav { flex: 1; padding: 0.75rem 0.75rem 0; }
.sidebar-section-label {
  color: rgba(255,255,255,.3); font-size: 0.67rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1.2px; padding: 1rem 0.625rem 0.35rem; user-select: none;
}
.sidebar-link {
  display: flex; align-items: center; gap: 0.7rem; padding: 0.575rem 0.875rem;
  border-radius: var(--radius-sm); color: rgba(255,255,255,.65);
  font-size: 0.85rem; font-weight: 500; text-decoration: none;
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
  margin-bottom: 1px; position: relative;
}
.sidebar-link i { font-size: 0.975rem; width: 18px; text-align: center; flex-shrink: 0; opacity: .8; transition: opacity var(--t-fast); }
.sidebar-link:hover { background: rgba(255,255,255,.07); color: rgba(255,255,255,.9); transform: translateX(2px); }
.sidebar-link:hover i { opacity: 1; }
.sidebar-link.active { background: rgba(255,255,255,.12); color: #fff; }
.sidebar-link.active i { opacity: 1; }
.sidebar-link.active::before {
  content: ''; position: absolute; left: 0; top: 20%; bottom: 20%;
  width: 3px; background: rgba(255,255,255,.6); border-radius: 0 3px 3px 0;
}

.sidebar-footer { padding: 0.75rem; border-top: 1px solid rgba(255,255,255,.08); flex-shrink: 0; }
.sidebar-user-btn {
  display: flex; align-items: center; gap: 0.625rem; width: 100%;
  padding: 0.575rem 0.75rem; background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius-sm);
  cursor: pointer; text-align: left; transition: background var(--t-fast);
}
.sidebar-user-btn:hover { background: rgba(255,255,255,.1); }
.sidebar-user-avatar {
  width: 30px; height: 30px; background: var(--gmc-blue-mid); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; color: #fff; font-size: .8rem; flex-shrink: 0;
}
.sidebar-user-info .user-name {
  color: rgba(255,255,255,.88); font-weight: 600; font-size: 0.78rem; line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 148px;
}
.sidebar-user-info .user-role {
  color: rgba(255,255,255,.4); font-size: 0.67rem; line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 148px;
}

.sidebar-overlay {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45);
  z-index: 1039; backdrop-filter: blur(2px);
}

/* ═══ Topbar ═══ */
.gmc-topbar {
  height: var(--topbar-h); background: var(--gmc-white);
  border-bottom: 1px solid var(--gmc-border);
  display: flex; align-items: center; padding: 0 1.5rem; gap: .75rem;
  position: sticky; top: 0; z-index: 100; box-shadow: var(--shadow-xs);
}
.topbar-toggle {
  display: none; background: none; border: none; padding: .4rem .5rem;
  border-radius: var(--radius-sm); color: var(--gmc-text-muted);
  cursor: pointer; font-size: 1.2rem; line-height: 1;
  transition: background var(--t-fast), color var(--t-fast);
}
.topbar-toggle:hover { background: var(--gmc-blue-ghost); color: var(--gmc-blue); }
.topbar-spacer { flex: 1; }
.topbar-actions { display: flex; align-items: center; gap: .375rem; }
.topbar-date { font-size: .78rem; color: var(--gmc-text-muted); padding: .25rem .625rem; }
.topbar-icon-btn {
  width: 34px; height: 34px; border: none; background: none; border-radius: var(--radius-sm);
  color: var(--gmc-text-muted); display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: .95rem; text-decoration: none;
  transition: background var(--t-fast), color var(--t-fast);
}
.topbar-icon-btn:hover { background: var(--gmc-blue-ghost); color: var(--gmc-blue); }

/* ═══ Cards ═══ */
.card { background: var(--gmc-white); border: 1px solid var(--gmc-border); border-radius: var(--radius); box-shadow: var(--shadow-xs); }
.card-header { background: transparent; border-bottom: 1px solid var(--gmc-border); padding: .875rem 1.25rem; font-weight: 600; font-size: .875rem; border-radius: var(--radius) var(--radius) 0 0 !important; color: var(--gmc-text); }
.card-body   { padding: 1.25rem; }
.card-footer { background: var(--gmc-surface); border-top: 1px solid var(--gmc-border); padding: .875rem 1.25rem; }

.stat-card { transition: transform var(--t-base), box-shadow var(--t-base), border-left-color var(--t-base); border-left: 3px solid transparent !important; }
.stat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md) !important; border-left-color: var(--gmc-blue) !important; }
.stat-icon { width: 48px; height: 48px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; }

/* ═══ Buttons ═══ */
.btn {
  font-weight: 500; font-size: .855rem; border-radius: var(--radius-sm);
  padding: .45rem 1rem; line-height: 1.5; transition: all var(--t-base);
  display: inline-flex; align-items: center; gap: .35rem;
  white-space: nowrap; cursor: pointer; position: relative;
}
.btn:focus-visible { outline: 2px solid var(--gmc-blue-mid); outline-offset: 2px; }
.btn:active:not([disabled]):not([aria-busy="true"]) { transform: translateY(1px) !important; box-shadow: none !important; }

.btn-primary, .btn-gmc-primary { background-color: var(--gmc-blue); border-color: var(--gmc-blue); color: #fff; }
.btn-primary:hover, .btn-gmc-primary:hover { background-color: var(--gmc-blue-dark); border-color: var(--gmc-blue-dark); color: #fff; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(31,59,115,.28); }

.btn-outline-primary { color: var(--gmc-blue); border-color: var(--gmc-blue); background: transparent; }
.btn-outline-primary:hover { background-color: var(--gmc-blue); border-color: var(--gmc-blue); color: #fff; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(31,59,115,.2); }

.btn-outline-secondary:hover { transform: translateY(-1px); }
.btn-danger:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(220,53,69,.25); }
.btn-outline-danger:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(220,53,69,.2); }
.btn-success:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(25,135,84,.25); }
.btn-warning:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(255,193,7,.25); }

.btn-gold, .btn-accent { background: #C9A227; color: #fff; border: none; font-weight: 600; }
.btn-gold:hover, .btn-accent:hover { background: #A8881C; color: #fff; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(201,162,39,.3); }

.btn[aria-busy="true"] { opacity: .72; pointer-events: none; }

/* ═══ Auth ═══ */
.auth-wrapper {
  min-height: 100vh;
  background: linear-gradient(145deg, var(--gmc-blue-dark) 0%, var(--gmc-blue) 55%, #1e4a70 100%);
  display: flex; align-items: center; justify-content: center;
  padding: 2rem 1rem; position: relative; overflow: hidden;
}
.auth-wrapper::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(ellipse at 15% 85%, rgba(255,255,255,.05) 0%, transparent 55%),
                    radial-gradient(ellipse at 85% 15%, rgba(255,255,255,.04) 0%, transparent 50%);
}
.auth-card { width: 100%; max-width: 420px; background: var(--gmc-white); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; position: relative; z-index: 1; }
.auth-card-wide { max-width: 680px; }
.auth-card-header { padding: 2rem 2rem 1.5rem; text-align: center; border-bottom: 1px solid var(--gmc-border); }
.auth-logo-img { width: 76px; height: 76px; object-fit: contain; border-radius: var(--radius); background: var(--gmc-blue-ghost); padding: 6px; margin: 0 auto 1rem; display: block; }
.auth-card-header h1 { font-size: 1.2rem; font-weight: 700; color: var(--gmc-text); margin: 0 0 .25rem; }
.auth-card-header p  { font-size: .8rem; color: var(--gmc-text-muted); margin: 0; }
.auth-card-body   { padding: 1.75rem 2rem; }
.auth-card-footer { padding: 1.125rem 2rem; background: var(--gmc-surface); border-top: 1px solid var(--gmc-border); text-align: center; font-size: .82rem; color: var(--gmc-text-muted); }
.auth-card-footer a { color: var(--gmc-blue); font-weight: 600; text-decoration: none; }
.auth-card-footer a:hover { text-decoration: underline; }

.otp-input { letter-spacing: 14px; font-size: 2.25rem; font-weight: 700; text-align: center; border: 2px solid var(--gmc-border); border-radius: var(--radius); padding: .875rem; transition: border-color var(--t-base), box-shadow var(--t-base); width: 100%; }
.otp-input:focus { border-color: var(--gmc-blue); box-shadow: 0 0 0 3px rgba(31,59,115,.12); outline: none; }

/* ═══ Tables ═══ */
.table > :not(caption) > * > * { padding: .7rem 1rem; vertical-align: middle; }
.table thead th { background: var(--gmc-surface); color: var(--gmc-text-muted); font-weight: 600; font-size: .75rem; text-transform: uppercase; letter-spacing: .6px; border-bottom: 1px solid var(--gmc-border) !important; padding-top: .875rem; padding-bottom: .875rem; white-space: nowrap; }
.table-hover > tbody > tr:hover > * { background-color: var(--gmc-blue-ghost); }
.table-hover > tbody > tr { transition: background var(--t-fast); }

/* ═══ Forms ═══ */
.form-control, .form-select { border-color: var(--gmc-border); border-radius: var(--radius-sm); font-size: .875rem; padding: .45rem .875rem; color: var(--gmc-text); background-color: var(--gmc-white); transition: border-color var(--t-base), box-shadow var(--t-base); }
.form-control:focus, .form-select:focus { border-color: var(--gmc-blue-mid); box-shadow: 0 0 0 3px rgba(43,91,168,.12); outline: none; }
.form-control::placeholder { color: #9CA3AF; }
.form-label { font-size: .8rem; font-weight: 600; color: var(--gmc-text); margin-bottom: .35rem; }
.form-text  { font-size: .78rem; color: var(--gmc-text-muted); }
.is-invalid { border-color: #EF4444 !important; }
.is-invalid:focus { box-shadow: 0 0 0 3px rgba(239,68,68,.12) !important; }

/* ═══ Badges ═══ */
.badge { font-weight: 600; font-size: .7rem; border-radius: 20px; padding: .3em .75em; letter-spacing: .2px; }
.bg-primary-subtle  { background-color: var(--gmc-blue-light) !important; }
.text-primary       { color: var(--gmc-blue) !important; }
.badge.bg-secondary { background-color: var(--gmc-blue-mid) !important; }
.badge.bg-primary   { background-color: var(--gmc-blue) !important; }

/* ═══ Alerts ═══ */
.alert { border-radius: var(--radius-sm); font-size: .855rem; border: none; border-left: 3px solid transparent; }
.alert-danger  { background: #FEF2F2; color: #991B1B; border-left-color: #EF4444; }
.alert-success { background: #F0FDF4; color: #166534; border-left-color: #22C55E; }
.alert-warning { background: #FFFBEB; color: #92400E; border-left-color: #F59E0B; }
.alert-info    { background: #EFF6FF; color: #1E40AF; border-left-color: #3B82F6; }

/* ═══ Dropdowns ═══ */
.dropdown-menu { border: 1px solid var(--gmc-border); border-radius: var(--radius); box-shadow: var(--shadow-md); font-size: .855rem; padding: .375rem; }
.dropdown-item { border-radius: var(--radius-sm); padding: .475rem .875rem; color: var(--gmc-text); transition: background var(--t-fast), color var(--t-fast); }
.dropdown-item:hover { background: var(--gmc-blue-ghost); color: var(--gmc-blue); }
.dropdown-item.active, .dropdown-item:active { background: var(--gmc-blue-light); color: var(--gmc-blue); }
.dropdown-item.text-danger:hover { background: #FEF2F2; color: #DC2626 !important; }
.dropdown-divider { border-color: var(--gmc-border); margin: .3rem 0; }

/* ═══ Progress ═══ */
.progress { background: var(--gmc-blue-light); border-radius: 20px; height: 6px; }
.progress-bar.bg-primary { background-color: var(--gmc-blue) !important; }

/* ═══ List Group ═══ */
.list-group-item { border-color: var(--gmc-border); font-size: .875rem; padding: .875rem 1.125rem; }
.list-group-item.active { background-color: var(--gmc-blue); border-color: var(--gmc-blue); }

/* ═══ Pagination ═══ */
.page-link { color: var(--gmc-blue); border-color: var(--gmc-border); font-size: .855rem; border-radius: var(--radius-sm) !important; margin: 0 2px; padding: .4rem .8rem; transition: all var(--t-fast); }
.page-link:hover { background: var(--gmc-blue-light); border-color: var(--gmc-blue); color: var(--gmc-blue); }
.page-item.active .page-link { background-color: var(--gmc-blue); border-color: var(--gmc-blue); }

/* ═══ Spinner ═══ */
.spinner { display: inline-block; width: 1em; height: 1em; border: 2px solid rgba(255,255,255,.3); border-top-color: #fff; border-radius: 50%; animation: spin .65s linear infinite; vertical-align: middle; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ═══ Links ═══ */
a { color: var(--gmc-blue); }
a:hover { color: var(--gmc-blue-mid); }

/* ═══ Utility ═══ */
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.btn-check:checked + .btn-outline-warning { background-color: #F59E0B; border-color: #F59E0B; color: #fff; }
.btn-check:checked + .btn-outline-danger  { background-color: #DC3545; border-color: #DC3545; color: #fff; }

/* ═══ Responsive ═══ */
@media (max-width: 991.98px) {
  body.gmc-has-sidebar { padding-left: 0; }
  .gmc-sidebar { transform: translateX(calc(-1 * var(--sidebar-w))); box-shadow: none; }
  .gmc-sidebar.open { transform: translateX(0); box-shadow: 4px 0 30px rgba(0,0,0,.2); }
  .sidebar-overlay.open { display: block; }
  .topbar-toggle { display: flex; }
}
@media (max-width: 575.98px) {
  .auth-card-header { padding: 1.5rem 1.25rem 1.25rem; }
  .auth-card-body   { padding: 1.25rem 1.25rem; }
  .auth-card-footer { padding: 1rem 1.25rem; }
}