/* ============================================================
   Cause Manager Portal — Full-width, theme-inheriting CSS
   Inherits the site's font-family, base font-size, and link colors
   wherever possible; uses CSS custom properties with fallbacks so
   it still looks correct on themes that don't set certain variables.
   ============================================================ */

.cmp-wrap {
  /* Inherit the theme's body font; fall back to system sans-serif */
  font-family: inherit;
  color: inherit;
  width: 100%;
  max-width: none;        /* full width, no artificial container cap */
  box-sizing: border-box;
  --cmp-primary:   #1a3a54;
  --cmp-accent:    #e8a020;
  --cmp-success:   #28a745;
  --cmp-danger:    #dc3545;
  --cmp-border:    color-mix(in srgb, currentColor 12%, transparent);
  --cmp-bg:        color-mix(in srgb, currentColor 4%, transparent);
  --cmp-card-bg:   Canvas;
  --cmp-muted:     color-mix(in srgb, currentColor 55%, transparent);
  --cmp-radius:    10px;
}
.cmp-wrap, .cmp-wrap * { box-sizing: border-box; }

/* Fallbacks for browsers without color-mix() support */
@supports not (color: color-mix(in srgb, red, blue)) {
  .cmp-wrap {
    --cmp-border: rgba(0,0,0,.12);
    --cmp-bg:     rgba(0,0,0,.03);
    --cmp-muted:  rgba(0,0,0,.55);
  }
}

/* ── Auth screen ─────────────────────────────────────────── */
.cmp-auth-wrap { display: flex; justify-content: center; padding: 3em 1em; background: var(--cmp-bg); width: 100%; }
.cmp-auth-card { background: var(--cmp-card-bg); border-radius: var(--cmp-radius); box-shadow: 0 8px 40px rgba(0,0,0,.12); width: 100%; max-width: 26em; overflow: hidden; border: 1px solid var(--cmp-border); }
.cmp-auth-header { background: linear-gradient(135deg, var(--cmp-primary), #235070); padding: 2em 1.75em 1.5em; text-align: center; }
.cmp-auth-logo { width: 3.75em; height: 3.75em; background: rgba(255,255,255,.15); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto .75em; }
.cmp-auth-logo svg { width: 1.9em; height: 1.9em; stroke: #fff; }
.cmp-auth-header h2 { color: #fff; margin: 0 0 .25em; font-size: 1.3em; font-family: inherit; }
.cmp-auth-header p { color: rgba(255,255,255,.7); margin: 0; font-size: .9em; }
.cmp-auth-body { padding: 1.75em; }
.cmp-auth-error { background: #f8d7da; color: #721c24; border-radius: 6px; padding: .6em .8em; font-size: .9em; margin-bottom: 1em; }

/* ── Fields ──────────────────────────────────────────────── */
.cmp-field { margin-bottom: 1em; }
.cmp-field label { display: block; font-size: .82em; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-bottom: .35em; opacity: .8; }
.cmp-input { width: 100%; padding: .6em .8em; border: 1.5px solid var(--cmp-border); border-radius: 7px; font-size: 1em; font-family: inherit; color: inherit; background: var(--cmp-card-bg); outline: none; transition: border .15s, box-shadow .15s; }
.cmp-input:focus { border-color: var(--cmp-primary); box-shadow: 0 0 0 3px rgba(26,58,84,.1); }
.cmp-pass-wrap { position: relative; }
.cmp-pass-wrap .cmp-input { padding-right: 4em; }
.cmp-toggle-pass { position: absolute; right: .6em; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--cmp-muted); font-size: .8em; cursor: pointer; font-family: inherit; }

/* ── Buttons ─────────────────────────────────────────────── */
.cmp-btn { display: inline-flex; align-items: center; justify-content: center; gap: .45em; padding: .65em 1.3em; border-radius: 7px; font-family: inherit; font-size: 1em; font-weight: 700; cursor: pointer; border: 2px solid transparent; transition: all .18s; text-decoration: none; line-height: 1.2; }
.cmp-btn-full { width: 100%; }
.cmp-btn-primary { background: linear-gradient(135deg, var(--cmp-primary), #235070); color: #fff; box-shadow: 0 4px 14px rgba(26,58,84,.25); }
.cmp-btn-primary:hover { filter: brightness(1.08); }
.cmp-btn-success { background: var(--cmp-success); color: #fff; }
.cmp-btn-danger { background: var(--cmp-danger); color: #fff; }
.cmp-btn-outline { background: transparent; border-color: var(--cmp-border); color: inherit; }
.cmp-btn-outline:hover { border-color: var(--cmp-primary); color: var(--cmp-primary); }
.cmp-btn-sm { padding: .35em 1em; font-size: .85em; }

/* ── Dashboard shell (full width) ───────────────────────── */
.cmp-dashboard { width: 100%; }
.cmp-header { background: linear-gradient(135deg, var(--cmp-primary), #235070); position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 12px rgba(0,0,0,.15); width: 100%; }
.cmp-header-inner { display: flex; align-items: center; justify-content: space-between; padding: .9em 2em; flex-wrap: wrap; gap: .6em; width: 100%; }
.cmp-brand { display: flex; align-items: center; gap: .7em; }
.cmp-brand-icon { width: 2.6em; height: 2.6em; background: rgba(255,255,255,.15); border-radius: 9px; display: flex; align-items: center; justify-content: center; }
.cmp-brand-icon svg { width: 1.4em; height: 1.4em; stroke: #fff; }
.cmp-brand-name { display: block; font-size: 1em; font-weight: 700; color: #fff; }
.cmp-brand-sub { display: block; font-size: .76em; color: rgba(255,255,255,.65); }
.cmp-user-row { display: flex; align-items: center; gap: .6em; }
.cmp-avatar { width: 2.3em; height: 2.3em; background: rgba(255,255,255,.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: .9em; }
.cmp-user-name { display: block; font-size: .9em; font-weight: 600; color: #fff; }
.cmp-logout-btn { background: none; border: none; color: rgba(255,255,255,.6); font-size: .76em; cursor: pointer; font-family: inherit; padding: 0; }
.cmp-logout-btn:hover { color: #fff; }
.cmp-nav { display: flex; padding: 0 2em; overflow-x: auto; scrollbar-width: none; width: 100%; }
.cmp-nav::-webkit-scrollbar { display: none; }
.cmp-nav-tab { display: flex; align-items: center; gap: .4em; padding: .8em 1.1em; background: transparent; border: none; border-bottom: 3px solid transparent; font-family: inherit; font-size: .9em; font-weight: 600; color: rgba(255,255,255,.6); cursor: pointer; white-space: nowrap; transition: all .16s; }
.cmp-nav-tab svg { width: 1em; height: 1em; }
.cmp-nav-tab:hover { color: rgba(255,255,255,.9); }
.cmp-nav-tab.active { color: #fff; border-bottom-color: var(--cmp-accent); }

/* ── Sections (full width, generous padding) ────────────── */
.cmp-section { padding: 1.75em 2em; width: 100%; }
.cmp-tab { display: none; }
.cmp-tab.active { display: block; }

/* ── Stats grid ──────────────────────────────────────────── */
.cmp-stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(13em, 1fr)); gap: 1em; margin-bottom: 1.5em; width: 100%; }
.cmp-stat { background: var(--cmp-card-bg); border: 1px solid var(--cmp-border); border-radius: var(--cmp-radius); padding: 1.1em 1.3em; border-left: 4px solid var(--cmp-primary); }
.cmp-stat-val { font-size: 1.6em; font-weight: 800; color: var(--cmp-primary); line-height: 1; }
.cmp-stat-lbl { font-size: .78em; opacity: .65; text-transform: uppercase; letter-spacing: .04em; margin-top: .3em; }

/* ── Cards ───────────────────────────────────────────────── */
.cmp-card { background: var(--cmp-card-bg); border: 1px solid var(--cmp-border); border-radius: var(--cmp-radius); overflow: hidden; margin-bottom: 1.25em; width: 100%; }
.cmp-card-hd { padding: 1em 1.3em; border-bottom: 1px solid var(--cmp-border); display: flex; align-items: center; justify-content: space-between; gap: .6em; flex-wrap: wrap; }
.cmp-card-hd h3 { margin: 0; font-size: 1.05em; font-weight: 700; color: var(--cmp-primary); font-family: inherit; }
.cmp-card-body { padding: 1.3em; }

/* ── Grid layouts (responsive, fill available width) ────── */
.cmp-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5em; width: 100%; }
.cmp-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5em; width: 100%; }
@media (max-width: 900px) { .cmp-grid-2, .cmp-grid-3 { grid-template-columns: 1fr; } }

/* ── Cause cards (manager's assigned causes) ────────────── */
.cmp-cause-tile { padding: 1.1em 1.3em; border-bottom: 1px solid var(--cmp-border); display: flex; align-items: center; gap: .9em; cursor: pointer; transition: background .15s; }
.cmp-cause-tile:last-child { border-bottom: none; }
.cmp-cause-tile:hover { background: var(--cmp-bg); }
.cmp-cause-tile.active { background: color-mix(in srgb, var(--cmp-primary) 8%, transparent); }
.cmp-cause-icon-box { width: 2.6em; height: 2.6em; background: var(--cmp-bg); border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cmp-cause-icon-box svg { width: 1.3em; height: 1.3em; stroke: var(--cmp-primary); }
.cmp-cause-info { flex: 1; min-width: 0; }
.cmp-cause-info strong { display: block; font-size: .95em; }
.cmp-cause-info span { font-size: .78em; opacity: .65; }
.cmp-prog-bar { height: .45em; background: var(--cmp-border); border-radius: 99px; overflow: hidden; margin-top: .4em; }
.cmp-prog-fill { height: 100%; background: linear-gradient(90deg, var(--cmp-primary), var(--cmp-accent)); border-radius: 99px; transition: width .6s; }

/* ── Tables (full width) ─────────────────────────────────── */
.cmp-table-wrap { overflow-x: auto; width: 100%; }
.cmp-table { width: 100%; border-collapse: collapse; font-size: .92em; }
.cmp-table th { background: var(--cmp-bg); color: var(--cmp-primary); font-weight: 700; font-size: .76em; text-transform: uppercase; letter-spacing: .05em; padding: .7em 1em; border-bottom: 2px solid var(--cmp-border); text-align: left; white-space: nowrap; }
.cmp-table td { padding: .7em 1em; border-bottom: 1px solid var(--cmp-border); vertical-align: middle; }
.cmp-table tbody tr:hover { background: var(--cmp-bg); }
.cmp-table tbody tr:last-child td { border-bottom: none; }

/* ── Badges ──────────────────────────────────────────────── */
.cmp-badge { display: inline-block; padding: .2em .7em; border-radius: 99px; font-size: .76em; font-weight: 700; text-transform: uppercase; }
.cmp-badge-completed { background: #d4edda; color: #155724; }
.cmp-badge-pending_verification { background: #fff3cd; color: #856404; }
.cmp-badge-manual { background: #e3f2fd; color: #0d47a1; }

/* ── Filter row ──────────────────────────────────────────── */
.cmp-filter-row { display: flex; gap: .6em; flex-wrap: wrap; align-items: center; }
.cmp-filter-row select, .cmp-filter-row input { padding: .5em .7em; border: 1.5px solid var(--cmp-border); border-radius: 7px; font-size: .88em; font-family: inherit; background: var(--cmp-card-bg); color: inherit; outline: none; }
.cmp-filter-row select:focus, .cmp-filter-row input:focus { border-color: var(--cmp-primary); }

/* ── Form layouts ────────────────────────────────────────── */
.cmp-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1em; }
@media (max-width: 600px) { .cmp-field-row { grid-template-columns: 1fr; } }

/* ── Tabs (inner, e.g. donor list tabs) ─────────────────── */
.cmp-tabs { display: flex; border-bottom: 2px solid var(--cmp-border); margin-bottom: 1.25em; }
.cmp-tab-btn { padding: .7em 1.3em; font-size: .9em; font-weight: 600; opacity: .6; cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -2px; background: none; border-top: none; border-left: none; border-right: none; font-family: inherit; transition: all .16s; }
.cmp-tab-btn:hover { opacity: .85; }
.cmp-tab-btn.active { opacity: 1; color: var(--cmp-primary); border-bottom-color: var(--cmp-primary); }
.cmp-tab-panel { display: none; }
.cmp-tab-panel.active { display: block; }

/* ── Messages ────────────────────────────────────────────── */
.cmp-msg { padding: .6em .9em; border-radius: 7px; font-size: .9em; margin-bottom: 1em; }
.cmp-msg.success { background: #d4edda; color: #155724; }
.cmp-msg.error { background: #f8d7da; color: #721c24; }

/* ── Spending update entries ─────────────────────────────── */
.cmp-update-card { padding: 1em 1.3em; border-left: 3px solid var(--cmp-accent); background: color-mix(in srgb, var(--cmp-accent) 6%, transparent); margin-bottom: .8em; border-radius: 0 8px 8px 0; }
.cmp-update-title { font-weight: 700; font-size: .95em; }
.cmp-update-body { font-size: .88em; opacity: .8; margin: .4em 0; line-height: 1.6; }
.cmp-update-meta { display: flex; gap: 1em; font-size: .76em; opacity: .65; flex-wrap: wrap; margin-top: .4em; }

/* ── Empty state ─────────────────────────────────────────── */
.cmp-empty { text-align: center; padding: 2.5em 1.5em; opacity: .6; }
.cmp-empty svg { width: 3em; height: 3em; opacity: .4; margin-bottom: .75em; }

/* ── Spinner ─────────────────────────────────────────────── */
.cmp-spinner { display: inline-block; width: 1em; height: 1em; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: cmp-spin .7s linear infinite; margin-right: .4em; }
@keyframes cmp-spin { to { transform: rotate(360deg); } }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 640px) {
  .cmp-section { padding: 1em; }
  .cmp-header-inner { padding: .6em .8em; gap: .5em; }
  .cmp-brand { gap: .5em; }
  .cmp-brand-icon { width: 2em; height: 2em; border-radius: 7px; }
  .cmp-brand-icon svg { width: 1.1em; height: 1.1em; }
  .cmp-brand-name { font-size: .85em; }
  .cmp-brand-sub { font-size: .68em; }
  .cmp-avatar { width: 1.9em; height: 1.9em; font-size: .78em; }
  .cmp-user-name { font-size: .8em; }
  .cmp-logout-btn { font-size: .7em; }
  .cmp-nav { padding: 0 .4em; }
  .cmp-nav-tab { padding: .6em .65em; font-size: .74em; gap: .3em; }
  .cmp-nav-tab svg { width: .85em; height: .85em; }
  .cmp-stats-row { grid-template-columns: repeat(2, 1fr); gap: .7em; }
  .cmp-stat { padding: .85em 1em; }
  .cmp-stat-val { font-size: 1.3em; }
}

@media (max-width: 380px) {
  .cmp-brand-sub { display: none; }
  .cmp-nav-tab { font-size: .7em; }
  .cmp-stats-row { grid-template-columns: 1fr 1fr; }
}