/* ============================================
   MUHSEN CRM — Components
   ============================================ */

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 9px 14px;
  border-radius: var(--radius-md);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-md);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--dur-fast) var(--ease-out);
  line-height: 1.2;
}
.btn--primary {
  background: var(--primary);
  color: var(--on-primary);
  box-shadow: 0 1px 2px rgba(0, 130, 153, 0.18);
}
.btn--primary:hover {
  background: var(--primary-hover);
  box-shadow: 0 2px 6px rgba(0, 130, 153, 0.25);
}
.btn--secondary {
  background: var(--bg-surface);
  color: var(--text-primary);
  border-color: var(--border-strong);
}
.btn--secondary:hover {
  background: var(--bg-subtle);
  border-color: var(--neutral-400);
}
.btn--ghost {
  background: transparent;
  color: var(--text-secondary);
}
.btn--ghost:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.btn--danger {
  background: var(--danger-500);
  color: white;
}
.btn--danger:hover { background: var(--danger-700); }
.btn--sm {
  padding: 6px 10px;
  font-size: var(--fs-sm);
}
.btn--lg {
  padding: 12px 20px;
  font-size: var(--fs-base);
}
.btn--icon {
  width: 36px;
  height: 36px;
  padding: 0;
}

/* ===== Cards ===== */
.card {
  background: var(--bg-surface);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-base) var(--ease-out);
}
.card--hoverable:hover {
  box-shadow: var(--shadow-md);
}
.card--inset { padding: var(--space-5) var(--space-6); }
.card--inset-sm { padding: var(--space-4); }

.card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
}
.card__title {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-lg);
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
.card__sub {
  color: var(--text-tertiary);
  font-size: var(--fs-sm);
  margin-top: 2px;
}
.card__body { padding: var(--space-5); }
.card__body--flush { padding: 0; }

/* ===== KPI cards ===== */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
}
.kpi {
  background: var(--bg-surface);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  position: relative;
  overflow: hidden;
  transition: box-shadow var(--dur-base) var(--ease-out);
}
.kpi:hover { box-shadow: var(--shadow-md); }
.kpi__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.kpi__label {
  font-size: var(--fs-sm);
  color: var(--text-tertiary);
  font-weight: var(--fw-medium);
  letter-spacing: 0.01em;
}
.kpi__icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  display: grid;
  place-items: center;
  font-size: 18px;
  background: var(--primary-soft);
  color: var(--teal-700);
}
.kpi--accent .kpi__icon { background: var(--accent-50); color: var(--accent-700); }
.kpi--success .kpi__icon { background: var(--success-50); color: var(--success-700); }
.kpi--warning .kpi__icon { background: var(--warning-50); color: var(--warning-700); }
.kpi--info .kpi__icon { background: var(--info-50); color: var(--info-700); }
.kpi__value {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  letter-spacing: -0.024em;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.kpi__delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}
.kpi__delta--up { color: var(--success-700); }
.kpi__delta--down { color: var(--danger-700); }
.kpi__sparkline {
  height: 32px;
  width: 100%;
  margin-top: var(--space-1);
}

/* ===== Tables ===== */
.tbl-wrap {
  background: var(--bg-surface);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.tbl-toolbar {
  padding: var(--space-3) var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  border-bottom: 1px solid var(--border-subtle);
  flex-wrap: wrap;
}
.tbl-search {
  position: relative;
  flex: 1;
  min-width: 200px;
  max-width: 320px;
}
.tbl-search input {
  width: 100%;
  background: var(--bg-subtle);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: 7px 10px 7px 32px;
  font-size: var(--fs-sm);
  transition: all var(--dur-fast) var(--ease-out);
}
.tbl-search input:focus {
  background: var(--bg-surface);
  border-color: var(--border-focus);
  box-shadow: var(--shadow-focus);
  outline: none;
}
.tbl-search__icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-tertiary);
  font-size: 14px;
  pointer-events: none;
}
.tbl-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--bg-subtle);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
.tbl-filter:hover { background: var(--bg-muted); color: var(--text-primary); }
.tbl-filter--active {
  background: var(--primary-soft);
  color: var(--teal-700);
  border-color: var(--primary-edge);
}

.tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-md);
}
.tbl thead th {
  text-align: left;
  padding: 10px 14px;
  background: var(--bg-subtle);
  color: var(--text-tertiary);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border-subtle);
  white-space: nowrap;
  user-select: none;
}
.tbl thead th[data-sortable] { cursor: pointer; }
.tbl thead th[data-sortable]:hover { color: var(--text-secondary); }
.tbl thead th[data-sortable]::after {
  content: " ↕";
  opacity: 0.3;
  font-size: 11px;
}
.tbl thead th[data-sort="asc"]::after { content: " ↑"; opacity: 1; color: var(--teal-600); }
.tbl thead th[data-sort="desc"]::after { content: " ↓"; opacity: 1; color: var(--teal-600); }

.tbl tbody tr {
  border-bottom: 1px solid var(--border-subtle);
  transition: background var(--dur-fast) var(--ease-out);
}
.tbl tbody tr:nth-child(even) { background: rgba(248, 250, 252, 0.5); }
.tbl tbody tr:hover { background: var(--bg-hover); cursor: pointer; }
.tbl tbody tr:last-child { border-bottom: none; }
.tbl td {
  padding: 12px 14px;
  color: var(--text-primary);
  vertical-align: middle;
}
.tbl td.muted { color: var(--text-secondary); }
.tbl td.num { font-variant-numeric: tabular-nums; text-align: right; }

.tbl-empty {
  padding: var(--space-12) var(--space-6);
  text-align: center;
  color: var(--text-tertiary);
}
.tbl-empty__icon {
  font-size: 40px;
  color: var(--neutral-300);
  margin-bottom: var(--space-3);
}

.tbl-pager {
  padding: var(--space-3) var(--space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-subtle);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}
.tbl-pager__btns { display: flex; gap: var(--space-1); }
.tbl-pager button {
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
}
.tbl-pager button:hover:not(:disabled) { background: var(--bg-surface); color: var(--text-primary); }
.tbl-pager button:disabled { opacity: 0.4; cursor: not-allowed; }
.tbl-pager button[aria-current="page"] {
  background: var(--primary);
  color: var(--on-primary);
}

/* ===== Badges / Pills ===== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  background: var(--bg-muted);
  color: var(--text-secondary);
  line-height: 1.3;
  white-space: nowrap;
}
.badge--success { background: var(--success-50); color: var(--success-700); }
.badge--warning { background: var(--warning-50); color: var(--warning-700); }
.badge--danger  { background: var(--danger-50);  color: var(--danger-700); }
.badge--info    { background: var(--info-50);    color: var(--info-700); }
.badge--brand   { background: var(--primary-soft); color: var(--teal-700); }
.badge--accent  { background: var(--accent-50);  color: var(--accent-700); }
.badge--outline { background: transparent; border: 1px solid var(--border-strong); color: var(--text-secondary); }

.badge__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* Cert levels */
.cert-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: var(--fw-bold);
  font-size: var(--fs-xs);
  padding: 3px 9px;
  border-radius: var(--radius-pill);
}
.cert-pill--bronze { background: #FBE7CC; color: #8A4D0E; }
.cert-pill--silver { background: #E5E7EB; color: #444B57; }
.cert-pill--gold   { background: #FDF3C2; color: #856204; }

/* ===== Forms ===== */
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.field__label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}
.field__hint {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
}
.input, .select, .textarea {
  width: 100%;
  padding: 9px 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  font-size: var(--fs-md);
  transition: all var(--dur-fast) var(--ease-out);
}
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--border-focus);
  box-shadow: var(--shadow-focus);
  outline: none;
}
.select { cursor: pointer; }
.textarea { min-height: 96px; resize: vertical; }

/* ===== Modals / Slide-in Panels ===== */
.scrim {
  position: fixed;
  inset: 0;
  background: var(--bg-overlay);
  z-index: var(--z-modal);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out);
  backdrop-filter: blur(2px);
}
.scrim.is-open {
  opacity: 1;
  pointer-events: auto;
}

.modal {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -48%);
  background: var(--bg-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  z-index: calc(var(--z-modal) + 1);
  width: min(560px, 92vw);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-spring);
}
.modal.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%);
}
.modal__head {
  padding: var(--space-5) var(--space-6) var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}
.modal__title {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  letter-spacing: -0.014em;
}
.modal__sub { color: var(--text-tertiary); font-size: var(--fs-sm); margin-top: 4px; }
.modal__close {
  width: 32px; height: 32px;
  border-radius: var(--radius-md);
  display: grid; place-items: center;
  color: var(--text-tertiary);
}
.modal__close:hover { background: var(--bg-hover); color: var(--text-primary); }
.modal__body {
  padding: var(--space-5) var(--space-6);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.modal__foot {
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
}

/* Slide-in panel (right side) */
.slidepanel {
  position: fixed;
  top: 0;
  right: 0;
  width: min(560px, 100vw);
  height: 100vh;
  background: var(--bg-surface);
  box-shadow: var(--shadow-xl);
  z-index: calc(var(--z-modal) + 1);
  transform: translateX(100%);
  transition: transform var(--dur-slow) var(--ease-out);
  display: flex;
  flex-direction: column;
}
.slidepanel.is-open { transform: translateX(0); }
.slidepanel__head {
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}
.slidepanel__title {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  letter-spacing: -0.014em;
}
.slidepanel__sub { color: var(--text-tertiary); font-size: var(--fs-sm); margin-top: 4px; }
.slidepanel__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-5) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.slidepanel__foot {
  border-top: 1px solid var(--border-subtle);
  padding: var(--space-4) var(--space-6);
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
}

/* ===== Ummah-powered popover (bottom-right) ===== */
.uppop {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 360px;
  max-width: calc(100vw - 48px);
  background: var(--bg-surface);
  border: 1px solid var(--border-card);
  border-radius: 16px;
  box-shadow: var(--shadow-xl);
  z-index: calc(var(--z-toast) - 1);
  overflow: hidden;
  transform: translateY(16px) scale(0.98);
  opacity: 0;
  pointer-events: none;
  transition: transform .28s var(--ease-spring), opacity .25s var(--ease-out);
}
.uppop.is-open {
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: auto;
}
.uppop__top {
  padding: 14px 16px 10px;
  background: linear-gradient(135deg, rgba(0,130,153,0.06), rgba(236,122,37,0.06));
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
}
.uppop__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.uppop__brand-mark {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--teal-500), var(--accent-500));
  color: white;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 12px;
}
.uppop__brand-name {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--text-primary);
  font-size: 13px;
  letter-spacing: -0.005em;
  text-transform: none;
}
.uppop__close {
  width: 22px; height: 22px;
  border-radius: 6px;
  color: var(--text-tertiary);
  display: grid;
  place-items: center;
}
.uppop__close:hover {
  background: var(--bg-subtle);
  color: var(--text-primary);
}
.uppop__body { padding: 14px 16px 12px; }
.uppop__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--text-primary);
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}
.uppop__sub {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
  margin-bottom: 12px;
}
.uppop__bullets {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}
.uppop__bullets li {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 12.5px;
  color: var(--text-secondary);
}
.uppop__bullets li i {
  color: var(--success-700);
  margin-top: 2px;
  font-size: 13px;
  flex-shrink: 0;
}
.uppop__foot {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding: 10px 16px;
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-subtle);
}

/* ===== Toasts ===== */
.toast-stack {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  z-index: var(--z-toast);
}
.toast {
  background: var(--neutral-900);
  color: white;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xl);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  animation: toast-in 0.28s var(--ease-spring);
  max-width: 360px;
}
.toast__icon { font-size: 18px; }
.toast--success .toast__icon { color: #6EE7B7; }
.toast--warning .toast__icon { color: #FCD34D; }
.toast--danger .toast__icon { color: #FCA5A5; }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ===== Avatar ===== */
.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  color: white;
  background: var(--neutral-500);
  flex-shrink: 0;
}
.avatar--sm { width: 24px; height: 24px; font-size: 10px; }
.avatar--md { width: 32px; height: 32px; font-size: 12px; }
.avatar--lg { width: 48px; height: 48px; font-size: 16px; }
.avatar--xl { width: 64px; height: 64px; font-size: 20px; }

/* ===== Charts ===== */
.chart-wrap {
  position: relative;
  width: 100%;
  height: 280px;
}
.chart-wrap--sm { height: 200px; }
.chart-wrap--lg { height: 360px; }

/* ===== Empty state ===== */
.empty {
  padding: var(--space-10) var(--space-6);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  color: var(--text-tertiary);
}
.empty__icon {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--bg-subtle);
  display: grid; place-items: center;
  font-size: 28px;
  color: var(--text-tertiary);
}
.empty__title {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}

/* ===== Skeleton ===== */
.skel {
  background: linear-gradient(90deg, var(--bg-muted) 0%, var(--bg-subtle) 50%, var(--bg-muted) 100%);
  background-size: 200% 100%;
  animation: skel-shimmer 1.4s linear infinite;
  border-radius: var(--radius-sm);
}
@keyframes skel-shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* ===== Profile / detail sections ===== */
.profile-head {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.profile-head__avatar {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--teal-400), var(--teal-700));
  color: white;
  display: grid; place-items: center;
  font-weight: var(--fw-bold);
  font-size: 22px;
  font-family: var(--font-display);
}
.profile-head__name {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
}
.profile-head__sub { color: var(--text-secondary); font-size: var(--fs-sm); }

.kv-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3) var(--space-5);
}
.kv {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-3);
  background: var(--bg-subtle);
  border-radius: var(--radius-md);
}
.kv__label {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: var(--fw-semibold);
}
.kv__value { font-size: var(--fs-md); color: var(--text-primary); font-weight: var(--fw-medium); }

/* Timeline */
.timeline { display: flex; flex-direction: column; gap: 0; }
.timeline__item {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  position: relative;
}
.timeline__item:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 13px; top: 28px;
  width: 2px; bottom: -12px;
  background: var(--border-subtle);
}
.timeline__dot {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--teal-700);
  display: grid; place-items: center;
  font-size: 14px;
  z-index: 1;
}
.timeline__body { display: flex; flex-direction: column; gap: 2px; padding-top: 4px; }
.timeline__title { font-size: var(--fs-md); font-weight: var(--fw-semibold); }
.timeline__meta { font-size: var(--fs-xs); color: var(--text-tertiary); }

/* Tag chip */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
}

/* Section grids */
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.grid-60-40 { display: grid; grid-template-columns: 3fr 2fr; gap: var(--space-4); }
.grid-40-60 { display: grid; grid-template-columns: 2fr 3fr; gap: var(--space-4); }

@media (max-width: 1100px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-60-40, .grid-40-60 { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* Action list */
.action-list { display: flex; flex-direction: column; gap: var(--space-2); }
.action-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-subtle);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--primary);
  transition: background var(--dur-fast) var(--ease-out);
  cursor: pointer;
}
.action-item:hover { background: var(--bg-muted); }
.action-item--warning { border-left-color: var(--warning-500); }
.action-item--danger  { border-left-color: var(--danger-500); }
.action-item__icon {
  width: 32px; height: 32px;
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  display: grid; place-items: center;
  font-size: 16px;
  color: var(--primary);
}
.action-item__body { flex: 1; }
.action-item__title { font-size: var(--fs-md); font-weight: var(--fw-semibold); }
.action-item__meta { font-size: var(--fs-xs); color: var(--text-tertiary); }

/* ===== Dashboard widget rows ===== */
.ev-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  transition: all var(--dur-fast) var(--ease-out);
  cursor: pointer;
}
.ev-row:hover {
  border-color: var(--primary-edge);
  background: linear-gradient(135deg, rgba(0,130,153,0.03), transparent 60%);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.ev-row__date {
  width: 54px;
  text-align: center;
  background: var(--primary-soft);
  border-radius: 10px;
  padding: 6px 4px 5px;
  flex-shrink: 0;
  border: 1px solid var(--primary-edge);
}
.ev-row__date-mo {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--teal-700);
  text-transform: uppercase;
  line-height: 1;
}
.ev-row__date-day {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  color: var(--teal-800);
  line-height: 1.05;
  margin: 1px 0;
}
.ev-row__date-wd {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--teal-700);
  opacity: 0.8;
  font-weight: 600;
}
.ev-row__body { flex: 1; min-width: 0; }
.ev-row__title {
  font-weight: 600;
  font-size: 13.5px;
  color: var(--text-primary);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ev-row__meta {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: var(--text-tertiary);
  flex-wrap: wrap;
}
.ev-row__meta i { font-size: 13px; }
.ev-row__dot { color: var(--border-strong); }
.ev-row__arrow {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--bg-subtle);
  color: var(--text-tertiary);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: all var(--dur-fast) var(--ease-out);
  font-size: 12px;
}
.ev-row:hover .ev-row__arrow {
  background: var(--primary);
  color: white;
  transform: translateX(2px);
}

/* Donation row */
.don-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  transition: all var(--dur-fast) var(--ease-out);
  cursor: pointer;
  position: relative;
}
.don-row::after {
  content: "";
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 3px;
  background: linear-gradient(180deg, var(--success-500), var(--teal-500));
  border-radius: 0 99px 99px 0;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.don-row:hover {
  border-color: var(--success-700);
  background: linear-gradient(135deg, rgba(16,185,129,0.04), transparent 60%);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.don-row:hover::after { opacity: 1; }
.don-row__body { flex: 1; min-width: 0; }
.don-row__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}
.don-row__name {
  font-weight: 600;
  font-size: 13.5px;
  color: var(--text-primary);
}
.don-row__amount {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--success-700);
  font-variant-numeric: tabular-nums;
}
.don-row__meta {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  color: var(--text-tertiary);
  flex-wrap: wrap;
}
.don-row__chip {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 99px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.don-row__chip--brand { background: var(--primary-soft); color: var(--teal-700); }
.don-row__chip--info  { background: var(--info-50); color: var(--info-700); }
.don-row__sep { color: var(--border-strong); }
.don-row__campaign {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.don-row__time {
  font-weight: 600;
  color: var(--text-secondary);
}

/* Donation alert cards */
.alert {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-left: 4px solid var(--primary);
}
.alert--success { border-left-color: var(--success-500); background: var(--success-50); }
.alert--warning { border-left-color: var(--warning-500); background: var(--warning-50); }
.alert--info    { border-left-color: var(--info-500); background: var(--info-50); }
.alert__icon { font-size: 20px; flex-shrink: 0; }
.alert--success .alert__icon { color: var(--success-700); }
.alert--warning .alert__icon { color: var(--warning-700); }
.alert--info .alert__icon { color: var(--info-700); }
.alert__title { font-size: var(--fs-md); font-weight: var(--fw-semibold); }
.alert__sub   { font-size: var(--fs-sm); color: var(--text-secondary); margin-top: 2px; }

/* Kanban */
.kanban {
  display: grid;
  grid-template-columns: repeat(5, minmax(220px, 1fr));
  gap: var(--space-3);
  overflow-x: auto;
  padding-bottom: var(--space-2);
}
.kanban__col {
  background: var(--bg-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-height: 240px;
}
.kanban__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2);
}
.kanban__title { font-size: var(--fs-sm); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-tertiary); }
.kanban__count { font-size: var(--fs-xs); color: var(--text-tertiary); background: var(--bg-surface); padding: 1px 7px; border-radius: var(--radius-pill); }
.kanban__card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  cursor: grab;
  transition: box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.kanban__card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.kanban__card-name { font-size: var(--fs-md); font-weight: var(--fw-semibold); }
.kanban__card-meta { font-size: var(--fs-xs); color: var(--text-tertiary); margin-top: 2px; }
.kanban__card-amount { font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--success-700); margin-top: 6px; }

/* Toggle */
.toggle {
  display: inline-flex;
  background: var(--bg-subtle);
  border-radius: var(--radius-md);
  padding: 3px;
  gap: 2px;
}
.toggle__btn {
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  font-weight: var(--fw-medium);
}
.toggle__btn[aria-pressed="true"] {
  background: var(--bg-surface);
  color: var(--text-primary);
  box-shadow: var(--shadow-xs);
}

/* Section heading */
.section-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin: var(--space-3) 0;
}
.section-h__title {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.012em;
}

/* Map placeholder */
.map-placeholder {
  background: linear-gradient(135deg, var(--primary-soft), var(--bg-surface));
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  height: 360px;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
}
.map-placeholder svg { width: 100%; height: 100%; }

/* ===== Newsletter preview ===== */
.nl-preview { padding: 0; }
.nl-viewport {
  background: #FFFFFF;
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
}
.nl-viewport__bar {
  padding: 14px 16px;
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.nl-viewport__from {
  display: flex;
  align-items: center;
  gap: 10px;
}
.nl-email__topbar {
  padding: 18px 28px;
  background: linear-gradient(135deg, var(--teal-700), var(--teal-500));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.nl-email__topbar img { filter: brightness(0) invert(1); }
.nl-email__hero {
  padding: 24px 28px 6px;
}
.nl-email__heroimg {
  margin: 14px 28px 0;
  height: 180px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--accent-500) 0%, #BE185D 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.nl-email__stats {
  margin: 8px 28px 12px;
  display: flex;
  background: var(--bg-subtle);
  border-radius: 10px;
  border: 1px solid var(--border-subtle);
}
.nl-email__stats > div + div {
  border-left: 1px solid var(--border-subtle);
}
.nl-email__cta {
  margin: 14px 28px 18px;
  background: linear-gradient(135deg, var(--teal-600), var(--teal-800));
  padding: 22px 24px;
  border-radius: 12px;
  text-align: center;
}
.nl-email__footer {
  padding: 18px 28px;
  background: var(--bg-subtle);
  border-top: 1px solid var(--border-subtle);
}

/* ===== Calendar (Marketing) ===== */
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: var(--border-subtle);
  gap: 1px;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.cal-grid__weekday {
  background: var(--bg-subtle);
  padding: 10px 12px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--text-tertiary);
  text-align: center;
}
.cal-grid__cell {
  background: var(--bg-surface);
  min-height: 120px;
  padding: 8px 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.cal-grid__cell--blank { background: var(--bg-subtle); }
.cal-grid__cell--today {
  background: linear-gradient(180deg, rgba(0,130,153,0.05), transparent 60%);
  position: relative;
}
.cal-grid__day {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 4px;
  padding: 0 4px;
}
.cal-grid__cell--today .cal-grid__day {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: var(--primary);
  color: white;
  border-radius: 50%;
  padding: 0;
  font-weight: 700;
}
.cal-grid__item {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  border-radius: 4px;
  font-size: 11px;
  cursor: pointer;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.cal-grid__item:hover { opacity: 0.85; }
.cal-grid__more {
  font-size: 10.5px;
  color: var(--text-tertiary);
  padding: 0 6px;
  font-weight: 600;
}

/* Brand swatches */
.brand-swatch {
  height: 120px;
  border-radius: var(--radius-md);
  padding: 14px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: white;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.brand-swatch__name { font-weight: 700; font-size: 14px; }
.brand-swatch__hex { font-family: var(--font-mono); font-size: 12px; opacity: 0.85; margin-top: 2px; }
.brand-swatch__note { font-size: 11px; opacity: 0.75; margin-top: 4px; }

/* Section heading nudge */
.section-h {
  margin: 8px 0 0;
  padding-top: 4px;
  border-top: 1px solid var(--border-subtle);
}

/* ===== AI Assistant ===== */
.ai-thread {
  background: var(--bg-surface);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  min-height: 360px;
  max-height: calc(100vh - 320px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  box-shadow: var(--shadow-sm);
}
.ai-msg {
  display: flex;
  gap: var(--space-3);
  max-width: 92%;
  animation: msg-in 0.25s var(--ease-out);
}
@keyframes msg-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ai-msg--user {
  align-self: flex-end;
  flex-direction: row-reverse;
}
.ai-msg__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-size: 16px;
  background: linear-gradient(135deg, var(--teal-500) 0%, var(--accent-500) 100%);
  color: white;
}
.ai-msg__avatar--user {
  background:
    radial-gradient(120% 120% at 25% 18%, #FFD27A 0%, transparent 55%),
    linear-gradient(135deg, #F59E0B 0%, #EC7A25 45%, #BE185D 100%);
  font-weight: 700;
  font-size: 12px;
  text-shadow: 0 1px 1px rgba(0,0,0,0.25);
}
.ai-msg__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.ai-msg__bubble {
  background: var(--bg-subtle);
  border-radius: 14px 14px 14px 4px;
  padding: 12px 16px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-primary);
  white-space: pre-wrap;
}
.ai-msg--user .ai-msg__bubble {
  background: linear-gradient(135deg, var(--teal-500), var(--teal-700));
  color: white;
  border-radius: 14px 14px 4px 14px;
}
.ai-msg__time {
  font-size: 10.5px;
  color: var(--text-tertiary);
  margin-top: 2px;
  padding: 0 6px;
}
.ai-typing {
  background: var(--bg-subtle);
  padding: 12px 16px;
  border-radius: 14px;
  display: inline-flex;
  gap: 4px;
}
.ai-typing span {
  width: 6px; height: 6px;
  background: var(--neutral-400);
  border-radius: 50%;
  animation: ai-typing 1.2s infinite;
}
.ai-typing span:nth-child(2) { animation-delay: 0.2s; }
.ai-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes ai-typing {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.45; }
  30% { transform: translateY(-4px); opacity: 1; }
}

.ai-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 14px 16px;
  margin-top: 2px;
}
.ai-card__title {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: 14px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-primary);
}
.ai-card__title::before {
  content: "";
  width: 14px; height: 14px;
  border-radius: 4px;
  background: linear-gradient(135deg, var(--teal-500), var(--accent-500));
}
.ai-card__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ai-card__list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--bg-subtle);
  transition: background var(--dur-fast) var(--ease-out);
}
.ai-card__list-item:hover { background: var(--bg-muted); }
.ai-card__list-icon {
  color: var(--teal-600);
  font-size: 16px;
  flex-shrink: 0;
}
.ai-card__draft {
  background: var(--bg-subtle);
  padding: 14px 16px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.6;
  font-family: var(--font-body);
  white-space: pre-wrap;
  color: var(--text-primary);
  margin: 0;
  border: 1px dashed var(--border-strong);
}

.ai-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.ai-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 11px;
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
.ai-chip:hover {
  background: var(--primary-soft);
  border-color: var(--primary-edge);
  color: var(--teal-700);
}

.ai-suggestions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 4px 0;
}
.ai-suggestion-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  font-size: 12.5px;
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
.ai-suggestion-chip:hover {
  background: var(--primary-soft);
  border-color: var(--primary-edge);
  color: var(--teal-700);
}
.ai-suggestion-chip i {
  color: var(--accent-500);
  font-size: 14px;
}

.ai-composer {
  display: flex;
  gap: 8px;
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  padding: 8px 8px 8px 16px;
  box-shadow: var(--shadow-sm);
  align-items: center;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.ai-composer:focus-within {
  border-color: var(--border-focus);
  box-shadow: var(--shadow-focus);
}
.ai-composer__input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 15px;
  padding: 6px 0;
  color: var(--text-primary);
}
.ai-composer__input::placeholder { color: var(--text-tertiary); }
.ai-composer__send {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--teal-500), var(--accent-500));
  color: white;
  display: grid;
  place-items: center;
  font-size: 16px;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.ai-composer__send:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(236, 122, 37, 0.35);
}

/* Dashboard AI card */
.dash-ai-card {
  background:
    radial-gradient(120% 90% at 10% -10%, rgba(236, 122, 37, 0.10), transparent 60%),
    radial-gradient(120% 90% at 110% 110%, rgba(0, 130, 153, 0.10), transparent 60%),
    var(--bg-surface);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  gap: var(--space-4);
  align-items: center;
  position: relative;
  overflow: hidden;
}
.dash-ai-card__icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--teal-500) 0%, var(--accent-500) 100%);
  color: white;
  display: grid;
  place-items: center;
  font-size: 26px;
  flex-shrink: 0;
  box-shadow: 0 6px 18px rgba(236, 122, 37, 0.20);
}
.dash-ai-card__body { flex: 1; min-width: 0; }
.dash-ai-card__title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 16px;
  margin-bottom: 4px;
  color: var(--text-primary);
}
.dash-ai-card__sub {
  color: var(--text-secondary);
  font-size: 13px;
  margin-bottom: 10px;
}
.dash-ai-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Org chart node */
.org-node {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
  min-width: 200px;
}
.org-node:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--primary-edge);
}
.org-node__name { font-size: var(--fs-md); font-weight: var(--fw-semibold); }
.org-node__title { font-size: var(--fs-xs); color: var(--text-tertiary); }