/* =========================================================
   CHAMA LIVE — SHARED VISUAL EXPERIENCE
   ---------------------------------------------------------
   Applies to BOTH Admin Portal and Member Portal.

   Design principles:
   - No blank white-sheet pages
   - Strong visual hierarchy
   - Soft contextual backgrounds
   - Cards with depth
   - Responsive mobile-first behaviour
   - Touch-friendly controls
   - Reduced-motion support
========================================================= */

:root {
  --cl-page-bg: #eef4f3;
  --cl-surface: #ffffff;
  --cl-surface-soft: #f6faf9;
  --cl-surface-teal: #effaf8;

  --cl-border: #dfeae8;
  --cl-border-strong: #c9dedb;

  --cl-primary: #0f766e;
  --cl-primary-dark: #115e59;
  --cl-primary-soft: #ccfbf1;

  --cl-success: #10b981;
  --cl-success-soft: #ecfdf3;

  --cl-warning: #f59e0b;
  --cl-warning-soft: #fffaeb;

  --cl-danger: #dc2626;
  --cl-danger-soft: #fef2f2;

  --cl-info: #2563eb;
  --cl-info-soft: #eff6ff;

  --cl-text: #172033;
  --cl-text-strong: #101828;
  --cl-muted: #667085;

  --cl-shadow-sm:
    0 4px 16px rgba(15, 118, 110, .045);

  --cl-shadow:
    0 8px 28px rgba(15, 118, 110, .065);

  --cl-shadow-hover:
    0 14px 34px rgba(15, 118, 110, .11);

  --cl-radius:
    18px;

  --cl-radius-sm:
    12px;
}


/* =========================================================
   GLOBAL PAGE ATMOSPHERE
========================================================= */

body {
  background:
    radial-gradient(
      circle at 94% 3%,
      rgba(15, 118, 110, .075),
      transparent 24rem
    ),
    radial-gradient(
      circle at 4% 32%,
      rgba(16, 185, 129, .035),
      transparent 22rem
    ),
    var(--cl-page-bg);
}


/* =========================================================
   MAIN CONTENT ATMOSPHERE
========================================================= */

.main {
  position: relative;
  background:
    radial-gradient(
      circle at 8% 10%,
      rgba(15, 118, 110, .025),
      transparent 20rem
    );
}


/* =========================================================
   GLOBAL CARDS
========================================================= */

.card {
  border-color: var(--cl-border);
  background: rgba(255, 255, 255, .96);
  box-shadow: var(--cl-shadow-sm);
  border-radius: var(--cl-radius);
}

.card:hover {
  border-color: var(--cl-border-strong);
  box-shadow: var(--cl-shadow);
}


/* =========================================================
   DASHBOARD HEADER
========================================================= */

.dashboard-header {
  position: relative;
  overflow: hidden;

  border:
    1px solid var(--cl-border-strong);

  border-radius:
    22px;

  padding:
    26px 28px;

  background:
    linear-gradient(
      135deg,
      #effaf8 0%,
      #ffffff 72%
    );

  box-shadow:
    var(--cl-shadow);

  margin-bottom:
    20px;
}

.dashboard-header::after {
  content: "";

  position: absolute;

  width: 190px;
  height: 190px;

  right: -70px;
  top: -95px;

  border-radius: 50%;

  border:
    28px solid
    rgba(15, 118, 110, .055);

  pointer-events: none;
}

.dashboard-header h1,
.dashboard-header p,
.dashboard-header .eyebrow {
  position: relative;
  z-index: 1;
}


/* =========================================================
   ADMIN KPI CARDS
========================================================= */

.dashboard-metrics .metric-card {
  border:
    1px solid var(--cl-border);

  background:
    rgba(255,255,255,.97);

  box-shadow:
    var(--cl-shadow-sm);

  border-radius:
    18px;

  transition:
    transform .2s ease,
    box-shadow .2s ease,
    border-color .2s ease;
}

.dashboard-metrics .metric-card:hover {
  transform:
    translateY(-3px);

  border-color:
    var(--cl-border-strong);

  box-shadow:
    var(--cl-shadow-hover);
}


/* =========================================================
   ADMIN DASHBOARD SECTIONS
========================================================= */

.dashboard-section.card,
.member-status-card,
.activity-card,
.meetings-card {
  border-color:
    var(--cl-border);

  background:
    rgba(255,255,255,.97);

  box-shadow:
    var(--cl-shadow-sm);
}


/* =========================================================
   PROGRESS
========================================================= */

.progress-card .progress {
  background:
    #e5efed;
}

.progress-card .progress-bar {
  background:
    linear-gradient(
      90deg,
      #0f766e,
      #10b981
    );
}


/* =========================================================
   TABLES
========================================================= */

.member-status-table table thead th,
.activity-card table thead th,
.meetings-card table thead th {
  background:
    #f6faf9;
}

.member-status-table tr:hover,
.activity-card tr:hover,
.meetings-card tr:hover {
  background:
    #f7fbfa;
}


/* =========================================================
   BUTTONS / ACTIONS
========================================================= */

.quick-action,
.action-card,
.action-tile,
button.btn,
a.btn {
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease;
}

.quick-action:hover,
.action-card:hover,
.action-tile:hover {
  transform:
    translateY(-3px);

  box-shadow:
    var(--cl-shadow-hover);
}


/* =========================================================
   STATUS BADGES
========================================================= */

.status-badge {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    5px;

  min-height:
    28px;

  padding:
    5px 9px;

  border-radius:
    999px;

  background:
    #f2f4f7;

  color:
    #475467;

  font-size:
    11px;

  font-weight:
    750;

  white-space:
    nowrap;
}

.status-paid,
.status-active,
.status-approved,
.status-completed,
.status-success {
  background:
    var(--cl-success-soft);

  color:
    #047857;
}

.status-partial,
.status-pending,
.status-warning {
  background:
    var(--cl-warning-soft);

  color:
    #b45309;
}

.status-outstanding,
.status-rejected,
.status-danger {
  background:
    var(--cl-danger-soft);

  color:
    #b91c1c;
}


/* =========================================================
   LOADING SKELETONS
========================================================= */

.cl-skeleton {
  position: relative;
  overflow: hidden;

  background:
    #edf2f1;

  border-radius:
    9px;

  color:
    transparent !important;
}

.cl-skeleton::after {
  content: "";

  position: absolute;
  inset: 0;

  transform:
    translateX(-100%);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.65),
      transparent
    );

  animation:
    clSkeleton 1.25s infinite;
}

@keyframes clSkeleton {
  100% {
    transform:
      translateX(100%);
  }
}


/* =========================================================
   TOAST
========================================================= */

.cl-toast {
  position: fixed;

  right: 18px;
  bottom: 18px;

  z-index: 50000;

  max-width: 360px;

  padding:
    13px 16px;

  border:
    1px solid var(--cl-border);

  border-radius:
    13px;

  background:
    rgba(255,255,255,.98);

  box-shadow:
    0 16px 40px rgba(16,24,40,.16);

  color:
    var(--cl-text-strong);

  font-size:
    13px;

  font-weight:
    650;

  animation:
    clToastIn .22s ease;
}

@keyframes clToastIn {
  from {
    opacity: 0;
    transform:
      translateY(8px);
  }

  to {
    opacity: 1;
    transform:
      translateY(0);
  }
}


/* =========================================================
   MEMBER PORTAL
========================================================= */

.member-dashboard {
  position: relative;

  max-width:
    1240px;

  margin:
    0 auto;

  padding:
    28px 18px 60px;
}


/* =========================================================
   MEMBER HERO
========================================================= */

.member-hero {
  position: relative;
  overflow: hidden;

  margin-bottom:
    20px;

  padding:
    28px;

  border:
    1px solid var(--cl-border-strong);

  border-radius:
    22px;

  background:
    linear-gradient(
      135deg,
      #effaf8 0%,
      #ffffff 70%
    );

  box-shadow:
    var(--cl-shadow);
}

.member-hero::after {
  content: "";

  position: absolute;

  width:
    180px;

  height:
    180px;

  right:
    -60px;

  top:
    -80px;

  border:
    26px solid
    rgba(15,118,110,.05);

  border-radius:
    50%;

  pointer-events:
    none;
}

.member-hero h1,
.member-hero p {
  position: relative;
  z-index: 1;
}

.member-hero h1 {
  margin:
    0 0 7px;

  color:
    var(--cl-text-strong);

  font-size:
    clamp(24px, 4vw, 34px);

  letter-spacing:
    -.7px;
}

.member-hero p {
  margin:
    0;

  color:
    var(--cl-muted);

  font-size:
    14px;

  font-weight:
    600;
}


/* =========================================================
   MEMBER GRID
========================================================= */

.member-grid {
  display:
    grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap:
    18px;
}


/* =========================================================
   MEMBER CARDS
========================================================= */

.member-card {
  position: relative;
  overflow: hidden;

  padding:
    21px;

  border:
    1px solid var(--cl-border);

  border-radius:
    var(--cl-radius);

  background:
    rgba(255,255,255,.97);

  box-shadow:
    var(--cl-shadow-sm);

  transition:
    transform .2s ease,
    box-shadow .2s ease,
    border-color .2s ease;
}

.member-card:hover {
  transform:
    translateY(-2px);

  border-color:
    var(--cl-border-strong);

  box-shadow:
    var(--cl-shadow-hover);
}

.member-card::after {
  content: "";

  position: absolute;

  width:
    90px;

  height:
    90px;

  right:
    -35px;

  bottom:
    -40px;

  border-radius:
    50%;

  background:
    rgba(15,118,110,.035);

  pointer-events:
    none;
}

.member-card h2 {
  position:
    relative;

  z-index:
    1;

  margin:
    0 0 16px;

  color:
    var(--cl-text-strong);

  font-size:
    17px;

  letter-spacing:
    -.2px;
}

.member-card-wide {
  grid-column:
    1 / -1;
}


/* =========================================================
   MEMBER ACCOUNT / PROFILE
========================================================= */

.member-account-row {
  display:
    grid;

  grid-template-columns:
    repeat(4, minmax(0,1fr));

  gap:
    12px;
}

.member-account-item {
  padding:
    15px;

  border:
    1px solid var(--cl-border);

  border-radius:
    13px;

  background:
    var(--cl-surface-soft);

  transition:
    border-color .18s ease,
    background .18s ease,
    transform .18s ease;
}

.member-account-item:hover {
  border-color:
    var(--cl-border-strong);

  background:
    #f1f8f6;

  transform:
    translateY(-1px);
}

.member-account-label {
  display:
    block;

  margin-bottom:
    5px;

  color:
    var(--cl-muted);

  font-size:
    11px;

  font-weight:
    750;

  text-transform:
    uppercase;

  letter-spacing:
    .05em;
}

.member-account-value {
  display:
    block;

  color:
    var(--cl-text-strong);

  font-weight:
    750;

  word-break:
    break-word;
}

.member-profile-link {
  position:
    relative;

  z-index:
    2;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    8px;

  min-height:
    42px;

  margin-top:
    16px;

  padding:
    9px 14px;

  border:
    1px solid var(--cl-border-strong);

  border-radius:
    11px;

  background:
    var(--cl-surface-teal);

  color:
    var(--cl-primary-dark);

  font-size:
    12px;

  font-weight:
    750;

  text-decoration:
    none;

  transition:
    transform .18s ease,
    background .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}

.member-profile-link:hover {
  transform:
    translateY(-1px);

  border-color:
    var(--cl-primary);

  background:
    var(--cl-primary-soft);

  box-shadow:
    var(--cl-shadow-sm);
}

.member-profile-link:active {
  transform:
    translateY(0);
}


/* =========================================================
   MEMBER CONTRIBUTION SUMMARY
========================================================= */

.member-summary {
  display:
    grid;

  grid-template-columns:
    repeat(2, minmax(0,1fr));

  gap:
    12px;
}

.member-summary-item {
  padding:
    17px;

  border:
    1px solid var(--cl-border);

  border-radius:
    14px;

  background:
    linear-gradient(
      145deg,
      #f7fbfa,
      #ffffff
    );
}

.member-summary-label {
  display:
    block;

  margin-bottom:
    6px;

  color:
    var(--cl-muted);

  font-size:
    12px;

  font-weight:
    650;
}

.member-summary-value {
  display:
    block;

  color:
    var(--cl-text-strong);

  font-size:
    23px;

  font-weight:
    800;

  letter-spacing:
    -.4px;
}


/* =========================================================
   MEMBER LISTS
========================================================= */

.member-list {
  margin:
    0;

  padding:
    0;

  list-style:
    none;
}

.member-list-item {
  position:
    relative;

  display:
    flex;

  flex-direction:
    column;

  gap:
    5px;

  padding:
    13px 0;

  border-bottom:
    1px solid var(--cl-border);
}

.member-list-item:last-child {
  border-bottom:
    0;
}

.member-list-item strong {
  color:
    var(--cl-text-strong);

  font-size:
    13px;
}

.member-muted {
  color:
    var(--cl-muted);

  font-size:
    12px;

  line-height:
    1.5;
}

.member-status {
  align-self:
    flex-start;

  display:
    inline-flex;

  padding:
    4px 8px;

  border-radius:
    999px;

  background:
    var(--cl-primary-soft);

  color:
    var(--cl-primary-dark);

  font-size:
    10px;

  font-weight:
    750;
}


/* =========================================================
   MEMBER LOADING
========================================================= */

.member-loading {
  color:
    var(--cl-muted);

  font-size:
    13px;
}


/* =========================================================
   MEMBER ERROR
========================================================= */

.member-error {
  margin:
    0 0 18px;

  padding:
    13px 16px;

  border:
    1px solid #fecaca;

  border-radius:
    13px;

  background:
    var(--cl-danger-soft);

  color:
    #b91c1c;

  font-size:
    13px;

  font-weight:
    600;
}


/* =========================================================
   MEMBER FINANCIAL HEALTH
========================================================= */

.member-financial-health {
  display:
    grid;

  grid-template-columns:
    repeat(3, minmax(0,1fr));

  gap:
    12px;
}

.member-health-item {
  padding:
    15px;

  border:
    1px solid var(--cl-border);

  border-radius:
    13px;

  background:
    var(--cl-surface-soft);

  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}

.member-health-item:hover {
  transform:
    translateY(-1px);

  border-color:
    var(--cl-border-strong);

  box-shadow:
    var(--cl-shadow-sm);
}

.member-health-label {
  display:
    block;

  margin-bottom:
    5px;

  color:
    var(--cl-muted);

  font-size:
    11px;

  font-weight:
    700;
}

.member-health-value {
  color:
    var(--cl-text-strong);

  font-size:
    19px;

  font-weight:
    800;
}


/* =========================================================
   MEMBER RECENT TRANSACTIONS
========================================================= */

.member-transaction {
  display:
    grid;

  grid-template-columns:
    1fr auto;

  gap:
    12px;

  align-items:
    center;

  padding:
    13px 0;

  border-bottom:
    1px solid var(--cl-border);

  transition:
    background .18s ease,
    padding .18s ease;
}

.member-transaction:last-child {
  border-bottom:
    0;
}

.member-transaction-main {
  min-width:
    0;
}

.member-transaction-title {
  color:
    var(--cl-text-strong);

  font-size:
    13px;

  font-weight:
    750;
}

.member-transaction-meta {
  margin-top:
    3px;

  color:
    var(--cl-muted);

  font-size:
    11px;
}

.member-transaction-amount {
  color:
    var(--cl-primary-dark);

  font-size:
    14px;

  font-weight:
    800;

  white-space:
    nowrap;
}


/* =========================================================
   MEMBER PROGRESS
========================================================= */

.member-progress {
  width:
    100%;

  height:
    8px;

  margin-top:
    8px;

  overflow:
    hidden;

  border-radius:
    999px;

  background:
    #e5efed;
}

.member-progress > span {
  display:
    block;

  height:
    100%;

  border-radius:
    inherit;

  background:
    linear-gradient(
      90deg,
      #0f766e,
      #10b981
    );

  transition:
    width .6s ease;
}


/* =========================================================
   MEMBER QUICK ACTIONS
========================================================= */

.member-actions {
  display:
    grid;

  grid-template-columns:
    repeat(3, minmax(0,1fr));

  gap:
    12px;
}

.member-action {
  display:
    flex;

  align-items:
    center;

  gap:
    10px;

  min-height:
    58px;

  padding:
    12px 14px;

  border:
    1px solid var(--cl-border);

  border-radius:
    14px;

  background:
    #ffffff;

  color:
    var(--cl-text-strong);

  font-size:
    12px;

  font-weight:
    750;

  text-decoration:
    none;

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    background .18s ease;
}

.member-action:hover {
  transform:
    translateY(-2px);

  border-color:
    var(--cl-border-strong);

  background:
    #fbfefd;

  box-shadow:
    var(--cl-shadow);
}

.member-action:active {
  transform:
    translateY(0);
}

.member-action-icon {
  display:
    grid;

  place-items:
    center;

  width:
    36px;

  height:
    36px;

  flex-shrink:
    0;

  border-radius:
    11px;

  background:
    var(--cl-primary-soft);

  color:
    var(--cl-primary-dark);

  font-size:
    15px;
}


/* =========================================================
   MEMBER DASHBOARD SECTION LABELS
========================================================= */

.member-section-label {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    6px;

  margin-bottom:
    7px;

  color:
    var(--cl-primary-dark);

  font-size:
    10px;

  font-weight:
    800;

  text-transform:
    uppercase;

  letter-spacing:
    .08em;
}


/* =========================================================
   MEMBER EMPTY STATES
========================================================= */

.member-empty {
  padding:
    18px 0;

  color:
    var(--cl-muted);

  font-size:
    12px;

  line-height:
    1.6;

  text-align:
    center;
}

.member-empty-icon {
  display:
    grid;

  place-items:
    center;

  width:
    40px;

  height:
    40px;

  margin:
    0 auto 9px;

  border-radius:
    12px;

  background:
    var(--cl-surface-teal);

  color:
    var(--cl-primary);

  font-size:
    16px;
}


/* =========================================================
   LOGOUT
========================================================= */

.logout-button,
#logoutButton,
[data-action="logout"] {
  min-height:
    38px;

  padding:
    8px 13px;

  border:
    1px solid #dfe4ea;

  border-radius:
    10px;

  background:
    #ffffff;

  color:
    #475467;

  font-size:
    12px;

  font-weight:
    750;

  cursor:
    pointer;

  transition:
    background .18s ease,
    border-color .18s ease,
    color .18s ease,
    transform .18s ease;
}

.logout-button:hover,
#logoutButton:hover,
[data-action="logout"]:hover {
  border-color:
    #fecaca;

  background:
    #fff7f7;

  color:
    #b91c1c;

  transform:
    translateY(-1px);
}


/* =========================================================
   FOCUS
========================================================= */

.member-card a:focus-visible,
.member-action:focus-visible,
.member-profile-link:focus-visible,
.logout-button:focus-visible,
#logoutButton:focus-visible,
[data-action="logout"]:focus-visible {
  outline:
    3px solid
    rgba(15,118,110,.25);

  outline-offset:
    2px;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 900px) {

  .member-grid {
    grid-template-columns:
      1fr;
  }

  .member-card-wide {
    grid-column:
      auto;
  }

  .member-account-row {
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  .member-financial-health {
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  .member-actions {
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }
}


@media (max-width: 600px) {

  .member-dashboard {
    padding:
      18px 12px 90px;
  }

  .member-hero {
    padding:
      21px 19px;

    border-radius:
      18px;
  }

  .member-grid {
    gap:
      13px;
  }

  .member-card {
    padding:
      17px;

    border-radius:
      16px;
  }

  .member-account-row,
  .member-summary,
  .member-financial-health,
  .member-actions {
    grid-template-columns:
      1fr;
  }

  .member-transaction {
    grid-template-columns:
      1fr;
  }

  .member-transaction-amount {
    justify-self:
      start;
  }

  .member-profile-link {
    width:
      100%;
  }

  .member-action {
    min-height:
      54px;
  }
}


/* =========================================================
   SMALL PHONES
========================================================= */

@media (max-width: 380px) {

  .member-dashboard {
    padding-left:
      9px;

    padding-right:
      9px;
  }

  .member-hero {
    padding:
      19px 16px;
  }

  .member-card {
    padding:
      15px;
  }

  .member-card h2 {
    font-size:
      16px;
  }

  .member-summary-value {
    font-size:
      21px;
  }

  .member-health-value {
    font-size:
      18px;
  }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    scroll-behavior:
      auto !important;

    animation-duration:
      .01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      .01ms !important;
  }
}