/* ═══════════════════════════════════════════════════════════════
   جمعية الجبر والعطاء — ORCHARD ALMANAC
   Limestone · irrigation teal · apricot fields · documentary light
   ═══════════════════════════════════════════════════════════════ */


:root {
  /* ── Orchard Almanac · جمعية الجبر والعطاء ─────────────────────
     Limestone ground, irrigation teal from the logo, flat apricot
     fields. Every text pair below was checked for WCAG AA.        */

  /* Brand */
  --teal:       #00616E;   /* logo teal · white text 7.2:1        */
  --teal-deep:  #0A4F5C;   /* sidebar / fields · white 9.2:1      */
  --teal-ink:   #083D47;
  --teal-wash:  #E3EEEE;
  --apricot:    #E2832F;   /* qamar-al-din field · ink text 5.2:1 */
  --apricot-deep: #A8500F; /* apricot as text on white 5.5:1      */
  --apricot-wash: #FBEBDD;
  --olive:      #5C6B5E;
  --olive-wash: #EBEFE9;

  /* Surfaces */
  --bg:       #F3F5F1;     /* limestone                           */
  --surface:  #FFFFFF;
  --surface2: #EEF1EC;
  --surface3: #E3E8E1;

  /* Lines */
  --border:        #DCE2DA;
  --border-strong: #8A968A;  /* 3.1:1 — inputs (WCAG 1.4.11)      */

  /* Text */
  --text:   #1D2B2F;       /* 14.6:1 on white */
  --muted:  #4F5E5F;       /* 6.8:1           */
  --faint:  #66706F;       /* 5.1:1           */

  /* Meaning (all ≥4.5:1 on white) */
  --success:  #2E7D4F;
  --warning:  #9A5B0B;
  --danger:   #B42318;
  --info:     #1F6A8A;
  --neutral:  #5E6B6C;
  --btn-primary: #00616E;
  --btn-primary-hover: #0A4F5C;
  --btn-info:  #00616E;
  --btn-info-hover: #0A4F5C;
  --btn-danger: #B42318;
  --btn-danger-hover: #8F1C13;
  --focus:    #E2832F;

  /* Legacy accent names, re-pointed into the orchard palette */
  --navy:    #00616E;
  --navy2:   #0A4F5C;
  --navy3:   #083D47;
  --green:   #2E7D4F;
  --green2:  #256640;
  --amber:   #9A5B0B;
  --red:     #B42318;
  --purple:  #6B4F9E;
  --orange:  #A8500F;
  --pink:    #A3416C;

  /* Sidebar */
  --sidebar-bg: #0A4F5C;

  /* Depth: soft, offset, ink-tinted */
  --shadow:  0 1px 2px rgba(29,43,47,.06), 0 1px 3px rgba(29,43,47,.05);
  --shadow2: 0 6px 18px -6px rgba(29,43,47,.18), 0 2px 6px rgba(29,43,47,.06);
  --shadow3: 0 24px 48px -16px rgba(8,61,71,.30), 0 6px 14px rgba(29,43,47,.08);

  /* Shape / layout */
  --radius:     10px;
  --radius2:    8px;
  --sidebar:    264px;
  --topbar:     64px;
  --transition: .2s cubic-bezier(.22,1,.36,1);
  --ease-out:   cubic-bezier(.16,1,.3,1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Tajawal', 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Scrollbar ─────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: #B9C2B8; }

/* ══════════════════════════════════════════════════════════════
   SIDEBAR
══════════════════════════════════════════════════════════════ */
#sidebar {
  position: fixed; top: 0; right: 0; height: 100vh;
  width: var(--sidebar); background: var(--sidebar-bg);
  border-left: 1px solid rgba(29,43,47,.05);
  display: flex; flex-direction: column; z-index: 900;
  transition: width var(--transition); overflow: hidden;
}
#sidebar.collapsed { width: 68px; }

/* Brand */
.sb-brand {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 18px 14px;
  border-bottom: 1px solid rgba(29,43,47,.05);
  flex-shrink: 0;
}
.sb-brand-icon {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--green), var(--teal));
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  box-shadow: 0 2px 12px rgba(46,125,79,.25);
}
.sb-brand-text strong { display: block; font-size: 14px; font-weight: 700; color: var(--text); }
.sb-brand-text small  { font-size: 11px; color: rgba(255,255,255,.3); }

/* User widget */
.sb-user {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; flex-shrink: 0;
  border-bottom: 1px solid rgba(29,43,47,.05);
}
.sb-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 13px; color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.5);
}
.sb-user-name { font-size: 13px; font-weight: 600; color: var(--text); }
.sb-user-role { font-size: 11px; margin-top: 2px; }
.role-pill {
  display: inline-block; padding: 2px 8px; border-radius: 99px;
  font-size: 11px; font-weight: 600; letter-spacing: .2px;
}
.role-admin    { background: rgba(180,35,24,.15);   color: var(--danger); }
.role-manager  { background: rgba(0,97,110,.15);  color: var(--info); }
.role-verifier { background: rgba(46,125,79,.15);   color: var(--success); }
.role-donor    { background: rgba(154,91,11,.15);  color: var(--warning); }
.role-viewer   { background: rgba(94,107,108,.12); color: var(--muted); }

/* Nav */
.sb-nav { flex: 1; overflow-y: auto; padding: 8px 0; }
.sb-nav::-webkit-scrollbar { width: 3px; }

.sb-section-label {
  font-size: 10px; font-weight: 700; letter-spacing: 1.2px;
  text-transform: uppercase; color: rgba(29,43,47,.12);
  padding: 14px 18px 4px;
}
.sb-link {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 18px; color: rgba(255,255,255,.5);
  text-decoration: none; font-size: 13.5px; font-weight: 500;
  transition: all var(--transition);
  border-right: 2.5px solid transparent;
}
.sb-link:hover { background: rgba(29,43,47,.05); color: var(--text); border-right-color: rgba(29,43,47,.12); }
.sb-link.active {
  background: rgba(0,97,110,.1); color: var(--navy);
  border-right-color: var(--navy);
}
.sb-link.active .sb-icon { color: var(--navy); }
.sb-icon { width: 20px; text-align: center; flex-shrink: 0; font-size: 14px; }
.sb-badge {
  margin-right: auto; background: var(--navy); color: #fff;
  border-radius: 99px; font-size: 10px; font-weight: 700; padding: 1px 7px;
}

/* Footer */
.sb-footer { padding: 12px 16px; border-top: 1px solid rgba(29,43,47,.05); flex-shrink: 0; }
.sb-logout {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 8px;
  color: rgba(255,255,255,.38); text-decoration: none;
  font-size: 13px; font-weight: 500; transition: all var(--transition);
}
.sb-logout:hover { background: rgba(180,35,24,.1); color: var(--danger); }

/* Collapsed state */
#sidebar.collapsed .sb-brand-text,
#sidebar.collapsed .sb-user-name,
#sidebar.collapsed .sb-user-role,
#sidebar.collapsed .sb-section-label,
#sidebar.collapsed .sb-link span,
#sidebar.collapsed .sb-badge,
#sidebar.collapsed .sb-logout span { display: none; }
#sidebar.collapsed .sb-link { justify-content: center; padding: 12px; border-right: none; }
#sidebar.collapsed .sb-icon { width: auto; }
#sidebar.collapsed .sb-footer a { justify-content: center; }
#sidebar.collapsed .sb-user { justify-content: center; }

/* ══════════════════════════════════════════════════════════════
   MAIN LAYOUT
══════════════════════════════════════════════════════════════ */
#main-wrap {
  margin-right: var(--sidebar);
  min-height: 100vh;
  transition: margin var(--transition);
}
#sidebar.collapsed ~ #main-wrap { margin-right: 68px; }

/* Top bar */
.topbar {
  height: var(--topbar); background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 12px;
  padding: 0 20px; position: sticky; top: 0; z-index: 800;
}
#sb-toggle {
  width: 36px; height: 36px; border-radius: 8px; border: none;
  background: transparent; cursor: pointer; color: var(--muted);
  font-size: 16px; display: flex; align-items: center; justify-content: center;
  transition: all var(--transition);
}
#sb-toggle:hover { background: var(--surface3); color: var(--text); }
.topbar-title { font-size: 15px; font-weight: 700; color: var(--text); flex: 1; }
.topbar-actions { display: flex; align-items: center; gap: 8px; }

/* Breadcrumb */
.breadcrumb-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 20px; border-bottom: 1px solid var(--border);
}
.breadcrumb-bar a { color: var(--muted); font-size: 12px; text-decoration: none; }
.breadcrumb-bar a:hover { color: var(--navy); }
.breadcrumb-bar span { color: var(--faint); font-size: 12px; }

/* Content */
.content { padding: 0 20px 30px; }

/* ══════════════════════════════════════════════════════════════
   KPI CARDS
══════════════════════════════════════════════════════════════ */
.kpi-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin-bottom: 20px; }
.kpi {
  background: var(--surface); border-radius: var(--radius);
  border: 1px solid var(--border); padding: 18px 16px;
  position: relative; overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  cursor: default;
}
.kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow2); border-color: rgba(29,43,47,.12); }
.kpi::before {
  content: ''; position: absolute; top: 0; right: 0; left: 0; height: 2px;
  background: var(--accent-color, var(--navy));
  border-radius: var(--radius) var(--radius) 0 0;
}
.kpi-icon-wrap {
  width: 40px; height: 40px; border-radius: 10px; margin-bottom: 12px;
  background: var(--icon-bg, rgba(0,97,110,.12));
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; color: var(--accent-color, var(--navy));
}
.kpi-value { font-size: 26px; font-weight: 800; color: var(--text); line-height: 1; }
.kpi-label { font-size: 12px; color: var(--muted); margin-top: 4px; font-weight: 500; }
.kpi-trend { font-size: 11px; margin-top: 6px; display: flex; align-items: center; gap: 4px; }
.kpi-trend.up   { color: var(--green); }
.kpi-trend.down { color: var(--amber); }

.kpi.navy   { --accent-color: var(--info); --icon-bg: rgba(0,97,110,.12); }
.kpi.green  { --accent-color: var(--success); --icon-bg: rgba(46,125,79,.12);  }
.kpi.amber  { --accent-color: var(--warning); --icon-bg: rgba(154,91,11,.12); }
.kpi.red    { --accent-color: var(--danger); --icon-bg: rgba(180,35,24,.12);  }
.kpi.purple { --accent-color: var(--purple); --icon-bg: rgba(107,79,158,.12);}
.kpi.teal   { --accent-color: #39C5CF; --icon-bg: rgba(0,97,110,.12); }

/* ══════════════════════════════════════════════════════════════
   CARDS
══════════════════════════════════════════════════════════════ */
.card {
  background: var(--surface); border-radius: var(--radius);
  border: 1px solid var(--border); box-shadow: var(--shadow); overflow: hidden;
}
.card-header {
  padding: 14px 20px; border-bottom: 1px solid var(--border);
  background: transparent; display: flex; align-items: center; gap: 8px;
}
.card-title { font-size: 14px; font-weight: 700; color: var(--text); margin: 0; flex: 1; }
.card-title i { color: var(--green); }
.card-body { padding: 20px; }
.card-footer { padding: 12px 20px; border-top: 1px solid var(--border); background: var(--surface2); }

/* ══════════════════════════════════════════════════════════════
   TABLES
══════════════════════════════════════════════════════════════ */
.data-table { width: 100%; border-collapse: collapse; }
.data-table thead tr { background: var(--surface2); }
.data-table thead th {
  padding: 11px 14px; text-align: right;
  font-size: 11.5px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .5px; white-space: nowrap;
  border-bottom: 1px solid var(--border);
}
.data-table thead th:first-child { border-radius: 0 8px 8px 0; }
.data-table thead th:last-child  { border-radius: 8px 0 0 8px; }
.data-table tbody tr {
  border-bottom: 1px solid rgba(29,43,47,.05);
  transition: background var(--transition);
}
.data-table tbody tr:hover { background: rgba(29,43,47,.05); }
.data-table tbody tr:last-child { border-bottom: none; }
.data-table td { padding: 11px 14px; vertical-align: middle; font-size: 13.5px; }

/* ══════════════════════════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: var(--radius2);
  font-size: 13.5px; font-weight: 600; font-family: inherit;
  border: 1px solid transparent; cursor: pointer;
  transition: all var(--transition); text-decoration: none;
  white-space: nowrap; line-height: 1.4;
}
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--navy); color: #fff; border-color: var(--navy); }
.btn-primary:hover { background: var(--navy2); border-color: var(--navy2); box-shadow: 0 4px 14px rgba(0,97,110,.25); }
.btn-success { background: var(--green); color: #fff; border-color: var(--green); }
.btn-success:hover { background: var(--green2); border-color: var(--green2); box-shadow: 0 4px 14px rgba(46,125,79,.25); }
.btn-amber { background: var(--amber); color: var(--text); border-color: var(--amber); }
.btn-amber:hover { background: #d4a72c; border-color: #d4a72c; }
.btn-danger { background: var(--red); color: #fff; border-color: var(--red); }
.btn-danger:hover { background: #e0352b; border-color: #e0352b; box-shadow: 0 4px 14px rgba(180,35,24,.25); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--border); }
.btn-ghost:hover { background: var(--surface3); border-color: rgba(29,43,47,.12); }
.btn-sm  { padding: 6px 12px; font-size: 12.5px; }
.btn-xs  { padding: 4px 9px; font-size: 11.5px; border-radius: 6px; }
.btn-icon { padding: 7px 9px; }
.btn:disabled { opacity: .4; cursor: not-allowed; transform: none !important; }

/* ══════════════════════════════════════════════════════════════
   FORMS
══════════════════════════════════════════════════════════════ */
.form-group { margin-bottom: 16px; }
.form-label { display: block; font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.form-label .req { color: var(--red); margin-right: 3px; }
.form-control, .form-select {
  width: 100%; padding: 9px 12px; border-radius: var(--radius2);
  border: 1px solid var(--border); font-family: inherit; font-size: 13.5px;
  background: var(--surface2); color: var(--text);
  transition: border-color var(--transition), box-shadow var(--transition);
  border-color: var(--border-strong);
}
.form-control:focus, .form-select:focus {
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(0,97,110,.15);
}
.form-control::placeholder { color: var(--faint); }
.form-select option { background: var(--surface2); color: var(--text); }
.form-control.is-invalid { border-color: var(--red); }
.form-control.is-valid   { border-color: var(--green); }
.form-hint { font-size: 12px; color: var(--muted); margin-top: 4px; }
textarea.form-control { resize: vertical; min-height: 80px; }

/* Input group */
.input-group { display: flex; }
.input-group .form-control { border-radius: var(--radius2) 0 0 var(--radius2); flex: 1; }
.input-group .btn { border-radius: 0 var(--radius2) var(--radius2) 0; }

/* Search input */
.search-wrap { position: relative; }
.search-wrap .search-icon { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--faint); font-size: 14px; pointer-events: none; }
.search-wrap .form-control { padding-right: 36px; }

/* ══════════════════════════════════════════════════════════════
   BADGES / PILLS
══════════════════════════════════════════════════════════════ */
.badge {
  display: inline-flex; align-items: center;
  padding: 3px 10px; border-radius: 99px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .2px;
}
.badge-green  { background: rgba(46,125,79,.15);   color: var(--success); border: 1px solid rgba(46,125,79,.25);  }
.badge-red    { background: rgba(180,35,24,.15);   color: var(--danger); border: 1px solid rgba(180,35,24,.25);  }
.badge-amber  { background: rgba(154,91,11,.15);  color: var(--warning); border: 1px solid rgba(154,91,11,.25); }
.badge-blue   { background: rgba(0,97,110,.15);  color: var(--info); border: 1px solid rgba(0,97,110,.25); }
.badge-purple { background: rgba(107,79,158,.15); color: var(--purple); border: 1px solid rgba(107,79,158,.25);}
.badge-gray   { background: rgba(94,107,108,.1);  color: var(--muted); border: 1px solid rgba(94,107,108,.2); }
.badge-navy   { background: rgba(0,97,110,.15);  color: var(--info); border: 1px solid rgba(0,97,110,.25); }

/* ══════════════════════════════════════════════════════════════
   TABS
══════════════════════════════════════════════════════════════ */
.tab-nav {
  display: flex; background: var(--bg); border-radius: 10px;
  padding: 4px; gap: 2px; border: 1px solid var(--border);
}
.tab-nav .tab-btn {
  flex: 1; padding: 8px 14px; border-radius: 8px;
  border: none; background: none; cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--muted);
  transition: all var(--transition); font-family: inherit;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.tab-nav .tab-btn.active {
  background: var(--surface); color: var(--navy);
  box-shadow: var(--shadow); border: 1px solid var(--border);
}

/* ══════════════════════════════════════════════════════════════
   LOGIN PAGE
══════════════════════════════════════════════════════════════ */
.login-wrap {
  min-height: 100vh; display: flex;
  background: linear-gradient(135deg, #010409 0%, #0D1117 60%, #0B1622 100%);
}
.login-left {
  flex: 1; display: none; flex-direction: column;
  justify-content: center; align-items: center;
  padding: 40px; color: #fff;
}
@media(min-width:1024px) { .login-left { display: flex; } }
.login-right {
  width: 100%; max-width: 460px; min-height: 100vh;
  background: var(--surface); display: flex; flex-direction: column;
  justify-content: center; padding: 48px 44px;
  border-left: 1px solid var(--border);
  box-shadow: -20px 0 60px rgba(0,0,0,.5);
}
.login-logo-wrap {
  width: 72px; height: 72px; border-radius: 20px; margin-bottom: 24px;
  background: linear-gradient(135deg, var(--green), var(--teal));
  display: flex; align-items: center; justify-content: center;
  font-size: 34px; box-shadow: 0 8px 24px rgba(46,125,79,.2);
}
.login-title { font-size: 26px; font-weight: 800; color: var(--text); margin-bottom: 4px; }
.login-sub { font-size: 14px; color: var(--muted); margin-bottom: 32px; }
.login-btn {
  width: 100%; padding: 12px; background: var(--navy); color: #fff;
  border: none; border-radius: var(--radius2); font-size: 15px;
  font-weight: 700; cursor: pointer; font-family: inherit;
  transition: all var(--transition);
  display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 8px;
}
.login-btn:hover { background: var(--navy2); box-shadow: 0 6px 20px rgba(0,97,110,.25); }
.login-btn:active { transform: scale(.98); }

/* Role cards (left panel) */
.role-cards { display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 380px; }
.role-card {
  background: rgba(29,43,47,.05); border: 1px solid rgba(29,43,47,.12);
  border-radius: 14px; padding: 16px 18px;
  display: flex; align-items: center; gap: 14px; cursor: pointer;
  transition: all var(--transition); text-align: right;
}
.role-card:hover { background: rgba(29,43,47,.12); border-color: rgba(29,43,47,.12); transform: translateX(-4px); }
.role-card-icon {
  width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.role-card-name { font-size: 15px; font-weight: 700; color: var(--text); }
.role-card-desc { font-size: 12px; color: rgba(255,255,255,.4); margin-top: 2px; }

/* ══════════════════════════════════════════════════════════════
   IMPORT / EXPORT ZONE
══════════════════════════════════════════════════════════════ */
.drop-zone {
  border: 1.5px dashed var(--border); border-radius: var(--radius);
  padding: 32px 20px; text-align: center; cursor: pointer;
  transition: all var(--transition); background: var(--surface2);
}
.drop-zone:hover, .drop-zone.drag-over {
  border-color: var(--navy); background: rgba(0,97,110,.06);
}
.drop-zone-icon { font-size: 40px; color: var(--muted); margin-bottom: 10px; }
.drop-zone-title { font-size: 15px; font-weight: 700; color: var(--text); }
.drop-zone-sub { font-size: 13px; color: var(--muted); margin-top: 4px; }

/* Progress bar */
.progress-bar-wrap { background: var(--surface2); border-radius: 99px; height: 6px; overflow: hidden; margin-top: 12px; }
.progress-bar-fill { height: 100%; background: linear-gradient(90deg, var(--navy), var(--green)); border-radius: 99px; transition: width .3s; }

/* ══════════════════════════════════════════════════════════════
   USER MANAGEMENT
══════════════════════════════════════════════════════════════ */
.user-row-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 14px; color: #fff; flex-shrink: 0;
}
.status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-left: 6px; }
.status-dot.online  { background: var(--green); box-shadow: 0 0 0 3px rgba(46,125,79,.2); }
.status-dot.offline { background: #B9C2B8; }

/* ══════════════════════════════════════════════════════════════
   MODALS  (override Bootstrap dark)
══════════════════════════════════════════════════════════════ */
.modal-content {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow3); color: var(--text);
}
.modal-header { border-bottom: 1px solid var(--border); padding: 18px 20px; background: var(--surface2); }
.modal-title  { font-size: 16px; font-weight: 700; color: var(--text); }
.modal-footer { border-top: 1px solid var(--border); padding: 14px 20px; gap: 8px; background: var(--surface2); }
.modal-body   { padding: 20px; }
.btn-close    { filter: none; }

/* ══════════════════════════════════════════════════════════════
   VERIFICATION ITEMS
══════════════════════════════════════════════════════════════ */
.verif-item {
  padding: 14px 16px; border-radius: 10px; border: 1px solid var(--border);
  margin-bottom: 8px; cursor: pointer; transition: all var(--transition);
  background: var(--surface);
}
.verif-item:hover { border-color: var(--navy); background: rgba(0,97,110,.06); transform: translateX(-2px); }
.verif-item.selected { border-color: var(--green); background: rgba(46,125,79,.08); }

/* ══════════════════════════════════════════════════════════════
   TOASTS
══════════════════════════════════════════════════════════════ */
#toast-box { position: fixed; top: 16px; left: 16px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; }
.toast-item {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-radius: 10px; font-size: 13.5px; font-weight: 500;
  box-shadow: var(--shadow3); max-width: 340px; min-width: 260px;
  animation: slideIn .25s ease; backdrop-filter: blur(12px);
}
@keyframes slideIn {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: translateX(0); }
}
.toast-success { background: rgba(46,125,79,.14);  color: var(--success); border: 1px solid rgba(46,125,79,.3); }
.toast-danger  { background: rgba(180,35,24,.14);  color: var(--danger); border: 1px solid rgba(180,35,24,.3); }
.toast-warning { background: rgba(154,91,11,.14); color: var(--warning); border: 1px solid rgba(154,91,11,.3); }
.toast-info    { background: rgba(0,97,110,.14); color: var(--info); border: 1px solid rgba(0,97,110,.3); }
.toast-close   { margin-right: auto; background: none; border: none; cursor: pointer; opacity: .45; font-size: 16px; color: currentColor; }
.toast-close:hover { opacity: 1; }

/* ══════════════════════════════════════════════════════════════
   ACTIVITY FEED
══════════════════════════════════════════════════════════════ */
.activity-feed { display: flex; flex-direction: column; gap: 1px; }
.activity-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid rgba(29,43,47,.05);
}
.activity-item:last-child { border-bottom: none; }
.activity-dot {
  width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 13px;
}
.activity-text { font-size: 13px; color: var(--text); flex: 1; }
.activity-time { font-size: 11.5px; color: var(--muted); flex-shrink: 0; }

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  :root { --sidebar: 68px; }
  .sb-brand-text, .sb-user-name, .sb-user-role,
  .sb-section-label, .sb-link span, .sb-badge,
  .sb-logout span { display: none; }
  .sb-link { justify-content: center; padding: 12px; border-right: none; }
  .sb-icon { width: auto; }
  .sb-footer a { justify-content: center; }
  .sb-user { justify-content: center; }
  .content { padding: 0 12px 20px; }
}

/* ══════════════════════════════════════════════════════════════
   BOOTSTRAP OVERRIDES (dark mode compat)
══════════════════════════════════════════════════════════════ */
.nav-tabs { border-bottom: 1px solid var(--border); }
.nav-tabs .nav-link { font-weight: 600; color: var(--muted); border: none; border-bottom: 2px solid transparent; background: transparent; }
.nav-tabs .nav-link:hover { color: var(--text); border-color: rgba(29,43,47,.12); }
.nav-tabs .nav-link.active { color: var(--navy); font-weight: 700; border-bottom-color: var(--navy); background: transparent; }

.alert { border-radius: var(--radius2); border: 1px solid var(--border); }
.alert-success { background: rgba(46,125,79,.12);  border-color: rgba(46,125,79,.3);  color: var(--success); }
.alert-danger  { background: rgba(180,35,24,.12);  border-color: rgba(180,35,24,.3);  color: var(--danger); }
.alert-warning { background: rgba(154,91,11,.12); border-color: rgba(154,91,11,.3); color: var(--warning); }
.alert-info    { background: rgba(0,97,110,.12); border-color: rgba(0,97,110,.3); color: var(--info); }

/* ══════════════════════════════════════════════════════════════
   CHART CARDS
══════════════════════════════════════════════════════════════ */
.chart-card {
  background: var(--surface); border-radius: var(--radius);
  padding: 18px; box-shadow: var(--shadow);
  border: 1px solid var(--border); height: 100%;
}
.chart-card-title {
  font-size: 13px; font-weight: 700; color: var(--text);
  margin-bottom: 16px; display: flex; align-items: center; gap: 7px;
  padding-bottom: 12px; border-bottom: 1px solid var(--border);
}
.chart-card-title i { color: var(--green); }

/* ══════════════════════════════════════════════════════════════
   TABLE WRAPPER
══════════════════════════════════════════════════════════════ */
.tbl-wrap { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); }

/* ══════════════════════════════════════════════════════════════
   STEP WIZARD
══════════════════════════════════════════════════════════════ */
.step-indicator { display: flex; gap: 0; margin-bottom: 28px; }
.step { flex: 1; text-align: center; position: relative; }
.step::after { content: ''; position: absolute; top: 15px; left: 0; right: 50%; height: 1.5px; background: var(--border); z-index: 0; }
.step:first-child::after { display: none; }
.step.done::after { background: var(--green); }
.step-num {
  width: 32px; height: 32px; border-radius: 50%;
  border: 1.5px solid var(--border); background: var(--surface2);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: var(--muted);
  margin: 0 auto 6px; position: relative; z-index: 1;
}
.step.active .step-num { border-color: var(--navy); color: var(--navy); background: rgba(0,97,110,.12); }
.step.done .step-num { border-color: var(--green); background: var(--green); color: #fff; }
.step-label { font-size: 12px; color: var(--muted); font-weight: 600; }
.step.active .step-label { color: var(--navy); }

/* ══════════════════════════════════════════════════════════════
   PRINT STYLES
══════════════════════════════════════════════════════════════ */
.print-header { display: none; }

@media print {
  #sidebar, .topbar, .topbar-actions, .breadcrumb-bar,
  .btn, button, #toast-box, .modal, .no-print,
  .sb-footer, #sb-toggle { display: none !important; }

  #main-wrap { margin-right: 0 !important; }
  body  { background: #fff !important; color: #000 !important; font-size: 11pt; }
  .content { padding: 0 !important; }

  .print-header {
    display: block !important; text-align: center;
    padding: 14px 0 8px; margin-bottom: 14px;
    border-bottom: 2px solid #1B2A4A;
    font-size: 15pt; font-weight: 800; color: #1B2A4A;
  }

  .card, .chart-card {
    border: 1px solid #ccc !important;
    box-shadow: none !important;
    background: #fff !important;
  }
  .card-header { background: #f5f5f5 !important; }
  .card-footer { background: #f5f5f5 !important; }

  .data-table thead tr { background: #1B2A4A !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .data-table thead th { color: #fff !important; }
  .data-table tbody tr:hover { background: transparent !important; }
  .tbl-wrap { border-radius: 0 !important; }
  .badge { border: 1px solid #ccc !important; color: #333 !important; background: #f0f0f0 !important; }

  table { page-break-inside: auto; }
  tr    { page-break-inside: avoid; }
  .page-break { page-break-before: always; }
}

/* ══════════════════════════════════════════════════════════════
   FEE STATUS BADGES
══════════════════════════════════════════════════════════════ */
.badge-paid        { background: rgba(46,125,79,.15);   color: var(--success); border: 1px solid rgba(46,125,79,.25);  }
.badge-waived      { background: rgba(94,107,108,.1);  color: var(--muted); border: 1px solid rgba(94,107,108,.2); }
.badge-pending-fee { background: rgba(154,91,11,.15);  color: var(--warning); border: 1px solid rgba(154,91,11,.25); }

/* ══════════════════════════════════════════════════════════════
   STATUS INDICATORS  (color-coded dot + label)
══════════════════════════════════════════════════════════════ */
.status-dot-wrap { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; }
.status-dot-wrap::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; flex-shrink: 0;
}
.s-verified   { color: var(--success); }
.s-pending    { color: var(--warning); }
.s-partial    { color: var(--info); }
.s-rejected   { color: var(--danger); }
.s-review     { color: var(--purple); }
.s-blocked    { color: var(--danger); }
.s-clear      { color: var(--success); }
.s-flagged    { color: var(--danger); }
.s-paid       { color: var(--success); }
.s-waived     { color: var(--muted); }

/* ══════════════════════════════════════════════════════════════
   SETTINGS PAGE
══════════════════════════════════════════════════════════════ */
.setting-row {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 16px 0; border-bottom: 1px solid var(--border);
}
.setting-row:last-child { border-bottom: none; }
.setting-label { flex: 0 0 260px; }
.setting-label strong { display: block; font-size: 13.5px; font-weight: 600; color: var(--text); }
.setting-label small  { font-size: 12px; color: var(--muted); margin-top: 2px; display: block; }
.setting-control { flex: 1; }

/* Toggle switch */
.toggle-wrap { display: inline-flex; align-items: center; gap: 10px; }
.toggle-switch { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-slider {
  position: absolute; inset: 0; background: var(--surface3);
  border-radius: 24px; cursor: pointer; transition: background var(--transition);
  border: 1px solid var(--border);
}
.toggle-slider::after {
  content: ''; position: absolute;
  width: 18px; height: 18px; background: var(--muted);
  border-radius: 50%; top: 2px; right: 2px;
  transition: all var(--transition);
}
.toggle-switch input:checked + .toggle-slider { background: rgba(46,125,79,.25); border-color: var(--green); }
.toggle-switch input:checked + .toggle-slider::after { background: var(--green); transform: translateX(-20px); }
.toggle-label { font-size: 13px; font-weight: 500; color: var(--muted); }

/* Fee summary mini-cards */
.fee-stat { background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; text-align: center; }
.fee-stat .fs-val { font-size: 22px; font-weight: 800; color: var(--text); }
.fee-stat .fs-lbl { font-size: 11.5px; color: var(--muted); margin-top: 3px; }

/* ══════════════════════════════════════════════════════════════
   ABOUT PAGE
══════════════════════════════════════════════════════════════ */
.about-hero { text-align: center; padding: 48px 20px 32px; }
.about-hero h1 { font-size: 32px; font-weight: 900; color: var(--text); margin-bottom: 8px; }
.about-hero p  { font-size: 15px; color: var(--muted); max-width: 560px; margin: 0 auto; line-height: 1.7; }
.version-badge {
  display: inline-block; padding: 3px 14px; border-radius: 99px;
  font-size: 12px; font-weight: 700;
  background: rgba(0,97,110,.12); color: var(--navy);
  border: 1px solid rgba(0,97,110,.3); margin-bottom: 12px;
}

.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: 14px; margin-bottom: 28px; }
.feature-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 22px 18px; text-align: center;
  transition: transform var(--transition), border-color var(--transition);
}
.feature-card:hover { transform: translateY(-2px); border-color: var(--navy); }
.feature-card .fc-icon { font-size: 28px; margin-bottom: 10px; display: block; }
.feature-card h4 { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.feature-card p  { font-size: 12.5px; color: var(--muted); line-height: 1.55; margin: 0; }

.dev-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; }
.dev-info-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid rgba(29,43,47,.05); font-size: 13.5px;
}
.dev-info-row:last-child { border-bottom: none; }
.dev-info-row i { width: 22px; text-align: center; color: var(--navy); font-size: 15px; flex-shrink: 0; }
.dev-info-row a { color: var(--navy); text-decoration: none; }
.dev-info-row a:hover { text-decoration: underline; }

.donate-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 28px 24px; text-align: center;
}
.donate-card .donate-icon { font-size: 38px; display: block; margin-bottom: 12px; }
.donate-card h4  { font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.donate-card p   { font-size: 13px; color: var(--muted); margin-bottom: 18px; line-height: 1.55; }
.donate-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 22px; border-radius: var(--radius2);
  font-size: 14px; font-weight: 700; text-decoration: none;
  transition: all var(--transition); cursor: pointer;
}
.donate-btn-paypal { background: #003087; color: #fff; }
.donate-btn-paypal:hover { background: #00266a; box-shadow: 0 4px 14px rgba(0,48,135,.4); color: #fff; }
.donate-btn-stripe { background: var(--purple); color: #fff; }
.donate-btn-stripe:hover { background: #8b5cf6; box-shadow: 0 4px 14px rgba(107,79,158,.4); color: #fff; }
.donate-btn-github { background: var(--surface2); color: var(--text); border: 1px solid var(--border); }
.donate-btn-github:hover { background: var(--surface3); color: var(--text); }

.faq-q {
  width: 100%; background: var(--surface2); border: 1px solid var(--border);
  border-radius: 10px; padding: 14px 18px; text-align: right; cursor: pointer;
  font-size: 13.5px; font-weight: 600; color: var(--text);
  display: flex; align-items: center; justify-content: space-between;
  transition: all var(--transition); margin-bottom: 2px;
}
.faq-q:hover { border-color: var(--navy); background: rgba(0,97,110,.06); }
.faq-q[aria-expanded="true"] { border-color: var(--navy); color: var(--navy); }
.faq-a { font-size: 13px; color: var(--muted); line-height: 1.65; padding: 12px 18px 14px; }

/* ══════════════════════════════════════════════════════════════
   BASKET CARDS
══════════════════════════════════════════════════════════════ */
.basket-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
  cursor: pointer; transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  display: flex; flex-direction: column;
}
.basket-card:hover { transform: translateY(-3px); box-shadow: var(--shadow2); border-color: rgba(29,43,47,.12); }

.bc-header {
  padding: 20px 16px 16px; display: flex; align-items: flex-start;
  justify-content: space-between; border-bottom: 1px solid var(--border);
  background: rgba(29,43,47,.05);
}
.bc-icon { font-size: 28px; }
.bc-body { padding: 16px; flex: 1; }
.bc-name { font-size: 15px; font-weight: 700; color: var(--text); margin: 0 0 4px; }
.bc-type { font-size: 12px; margin: 0 0 8px; }
.bc-desc { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin: 0 0 10px; }
.bc-stats {
  display: flex; gap: 12px; flex-wrap: wrap;
  font-size: 12px; color: var(--muted);
}
.bc-progress-wrap small { font-size: 11px; }

/* ══════════════════════════════════════════════════════════════
   BARCODE DISPLAY
══════════════════════════════════════════════════════════════ */
.barcode-img {
  background: #fff; border-radius: 6px; padding: 4px 8px;
  display: inline-block; border: 1px solid var(--border);
}
.barcode-value { font-family: 'Courier New', monospace; font-size: 11px; color: var(--muted); letter-spacing: 1px; }

/* ══════════════════════════════════════════════════════════════
   PRINT TABLE LAYOUT FIX
══════════════════════════════════════════════════════════════ */
@media print {
  table             { table-layout: fixed !important; width: 100% !important; }
  td, th            { word-wrap: break-word; overflow-wrap: break-word; max-width: 200px; }
  .barcode-img img  { max-width: 120px; height: auto !important; }
  .bc-stats, .bc-progress-wrap { display: none !important; }

  /* Hide basket grid on print; show table instead */
  #baskets-grid     { display: none !important; }
  #baskets-table-wrap { display: block !important; }

  .basket-card { break-inside: avoid; }
}

/* ══════════════════════════════════════════════════════════════
   CAUSES / SPONSORSHIPS PAGE
══════════════════════════════════════════════════════════════ */

/* Hero banner */
.causes-hero {
  border-radius: var(--radius); overflow: hidden;
  background: linear-gradient(135deg, #0D1B2A 0%, #162032 50%, #1A1030 100%);
  border: 1px solid var(--border);
  position: relative;
}
.causes-hero::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 80% 50%, rgba(0,97,110,.08) 0%, transparent 70%);
  pointer-events: none;
}
.causes-hero-inner { padding: 40px 32px; position: relative; text-align: center; }
.ch-badge {
  display: inline-block; padding: 4px 16px; border-radius: 99px; font-size: 12px;
  font-weight: 700; background: rgba(180,35,24,.12); color: var(--danger);
  border: 1px solid rgba(180,35,24,.3); margin-bottom: 14px;
}
.ch-title  { font-size: 34px; font-weight: 900; color: var(--text); margin-bottom: 10px; }
.ch-subtitle { font-size: 15px; color: var(--muted); max-width: 560px; margin: 0 auto 24px; line-height: 1.7; }
.ch-stats  { display: flex; align-items: center; justify-content: center; gap: 0; flex-wrap: wrap; }
.chs-item  { padding: 0 20px; text-align: center; }
.chs-val   { display: block; font-size: 22px; font-weight: 800; color: var(--text); }
.chs-lbl   { font-size: 12px; color: var(--muted); }
.chs-sep   { width: 1px; height: 36px; background: rgba(29,43,47,.12); }

/* Category filter */
.causes-filter { display: flex; gap: 8px; flex-wrap: wrap; }
.cf-btn {
  padding: 8px 16px; border-radius: 99px; border: 1px solid var(--border);
  background: var(--surface); color: var(--muted); font-size: 13px; font-weight: 600;
  cursor: pointer; transition: all var(--transition); font-family: inherit;
}
.cf-btn:hover { border-color: var(--navy); color: var(--navy); }
.cf-btn.active { background: var(--navy); color: #fff; border-color: var(--navy); }

/* Causes grid */
.causes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

/* Cause card */
.cause-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  display: flex; flex-direction: column;
}
.cause-card:hover { transform: translateY(-4px); box-shadow: var(--shadow2); border-color: rgba(29,43,47,.12); }
.cause-featured { border-color: rgba(154,91,11,.4) !important; }
.cause-featured:hover { box-shadow: 0 8px 28px rgba(154,91,11,.15); }

.cc-img-wrap {
  height: 150px; position: relative; display: flex;
  align-items: center; justify-content: center; overflow: hidden;
}
.cc-emoji { font-size: 56px; z-index: 1; filter: drop-shadow(0 4px 8px rgba(0,0,0,.3)); }
.cc-icon-bg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.cc-featured-badge {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  background: rgba(154,91,11,.2); border: 1px solid rgba(154,91,11,.4);
  color: var(--warning); font-size: 11px; font-weight: 700;
  padding: 3px 10px; border-radius: 99px;
}

.cc-body { padding: 18px 16px; flex: 1; display: flex; flex-direction: column; }
.cc-name { font-size: 17px; font-weight: 800; color: var(--text); margin: 0 0 6px; }
.cc-desc { font-size: 13px; color: var(--muted); line-height: 1.55; margin: 0 0 14px; flex: 1; }
.cc-progress { }

.cc-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.cc-badge {
  font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 99px;
  display: inline-flex; align-items: center; gap: 4px;
}
.cc-badge-monthly { background: rgba(46,125,79,.12);  color: var(--success); border: 1px solid rgba(46,125,79,.25); }
.cc-badge-once    { background: rgba(0,97,110,.12); color: var(--info); border: 1px solid rgba(0,97,110,.25); }

.cc-actions { display: flex; gap: 6px; margin-top: 14px; flex-wrap: wrap; }
.cc-actions .flex-1 { flex: 1; min-width: 0; }

/* Skeleton loader */
.cause-skeleton { pointer-events: none; }
.sk-rect { background: linear-gradient(90deg, var(--surface2) 25%, var(--surface3) 50%, var(--surface2) 75%);
  background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: 6px; }
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ── Donation modal ─────────────────────────────────────────────── */
.step-label { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 10px; }

.ptype-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ptype-card {
  background: var(--surface2); border: 1.5px solid var(--border);
  border-radius: var(--radius2); padding: 16px 14px; text-align: center;
  cursor: pointer; transition: all var(--transition);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.ptype-card:hover   { border-color: var(--navy); background: rgba(0,97,110,.06); }
.ptype-card.active  { border-color: var(--navy); background: rgba(0,97,110,.1); }
.ptype-card strong  { font-size: 15px; font-weight: 700; color: var(--text); }
.ptype-card small   { font-size: 12px; color: var(--muted); }
.ptype-card .ptype-desc { font-size: 11px; color: var(--faint); }

.amount-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.amount-chip {
  padding: 8px 18px; border-radius: var(--radius2);
  border: 1.5px solid var(--border); background: var(--surface2);
  color: var(--text); font-size: 14px; font-weight: 600;
  cursor: pointer; transition: all var(--transition); font-family: inherit;
}
.amount-chip:hover  { border-color: var(--navy); color: var(--navy); }
.amount-chip.active { background: var(--navy); color: #fff; border-color: var(--navy); }

.donate-summary {
  background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius2);
  padding: 14px 18px;
}
.ds-row { display: flex; align-items: center; justify-content: space-between; padding: 5px 0; }
.ds-row.highlight { border-top: 1px solid var(--border); padding-top: 10px; margin-top: 4px; }
.ds-lbl { font-size: 13px; color: var(--muted); }
.ds-val { font-size: 14px; font-weight: 600; color: var(--text); }

/* Payment methods */
.payment-methods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pm-option input[type="radio"] { display: none; }
.pm-card {
  border: 1.5px solid var(--border); border-radius: var(--radius2);
  padding: 14px 10px; text-align: center; cursor: pointer;
  transition: all var(--transition); display: flex; flex-direction: column;
  align-items: center; gap: 5px; background: var(--surface2);
}
.pm-card i     { font-size: 20px; color: var(--muted); }
.pm-card span  { font-size: 13px; font-weight: 600; color: var(--text); }
.pm-card small { font-size: 11px; color: var(--faint); }
.pm-option input:checked + .pm-card { border-color: var(--navy); background: rgba(0,97,110,.08); }
.pm-option input:checked + .pm-card i { color: var(--navy); }
.pm-card:hover { border-color: var(--navy); }

/* Print causes */
@media print {
  .causes-hero { background: #fff !important; color: #000 !important; border: 2px solid #1B2A4A !important; }
  .ch-badge, .cf-btn, .cc-actions, .ptype-grid { display: none !important; }
  .causes-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .cause-card  { border: 1px solid #ccc !important; background: #fff !important; break-inside: avoid; }
  .cc-img-wrap { height: 80px !important; }
  .cc-emoji    { font-size: 32px !important; }
}

/* ══════════════════════════════════════════════════════════════
   SECURITY PAGE
══════════════════════════════════════════════════════════════ */

/* MFA status banner */
.mfa-status-banner {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 20px; border-radius: var(--radius2);
  border: 1.5px solid var(--border); background: var(--surface2);
  transition: all var(--transition);
}
.msb-icon  { font-size: 32px; flex-shrink: 0; }
.msb-title { font-size: 16px; font-weight: 700; color: var(--text); }
.msb-desc  { font-size: 13px; color: var(--muted); margin-top: 3px; }

/* Setup steps */
.sec-step { display: flex; gap: 14px; align-items: flex-start; }
.ss-num {
  width: 30px; height: 30px; border-radius: 50%; background: var(--navy);
  color: #fff; font-weight: 800; font-size: 14px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ss-body h6 { font-weight: 700; color: var(--text); margin-bottom: 4px; }
.ss-body p  { font-size: 13px; color: var(--muted); margin-bottom: 10px; }

.mfa-qr-wrap { background: var(--surface2); border: 1px solid var(--border); border-radius: 14px; padding: 20px; display: inline-block; margin-bottom: 10px; }
.mfa-secret-display code { word-break: break-all; }
.totp-input { font-family: 'Courier New',monospace; font-size: 22px; letter-spacing: 6px; text-align: center; max-width: 180px; }

/* Danger box */
.sec-danger-box { background: rgba(180,35,24,.06); border: 1.5px solid rgba(180,35,24,.25); border-radius: var(--radius2); padding: 20px; }

/* Info cards */
.sec-info-card { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius2); padding: 20px; text-align: center; height: 100%; }
.sec-info-card i  { display: block; }
.sec-info-card h6 { font-weight: 700; color: var(--text); margin: 8px 0 4px; font-size: 14px; }
.sec-info-card p  { font-size: 12.5px; color: var(--muted); margin: 0; line-height: 1.55; }

/* Password strength bar */
.pwd-strength-wrap { }
.pwd-strength-bar { height: 6px; background: var(--surface3); border-radius: 99px; overflow: hidden; }
.psb-fill { height: 100%; border-radius: 99px; transition: width .3s, background .3s; }
.psb-weak   { width: 25%; background: var(--red); }
.psb-fair   { width: 50%; background: var(--amber); }
.psb-good   { width: 75%; background: var(--teal); }
.psb-strong { width: 100%; background: var(--green); }
.pwd-strength-label { font-size: 12px; font-weight: 600; margin-top: 3px; display: block; }
.pwd-strength-label.weak   { color: var(--red); }
.pwd-strength-label.fair   { color: var(--amber); }
.pwd-strength-label.good   { color: var(--teal); }
.pwd-strength-label.strong { color: var(--green); }

/* Password policy card */
.pwd-policy-card { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius2); padding: 14px 16px; }
.ppc-title { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.ppc-list  { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ppc-item  { font-size: 12.5px; color: var(--muted); display: flex; align-items: center; background: var(--surface3); padding: 4px 10px; border-radius: 99px; transition: all .2s; }
.ppc-ok    { color: var(--green); background: rgba(46,125,79,.12); }
.ppc-fail  { color: var(--red);   background: rgba(180,35,24,.1); }

/* RBAC Matrix */
.rbac-table th, .rbac-table td { text-align: center !important; padding: 10px 8px !important; font-size: 12.5px !important; }
.rbac-table th:first-child, .rbac-table td:first-child { text-align: right !important; }
.rbac-cell { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; margin: 0 auto; }
.rbac-full    { background: rgba(46,125,79,.15);  color: var(--success); }
.rbac-partial { background: rgba(0,97,110,.15); color: var(--info); }
.rbac-none    { background: transparent; color: var(--faint); }
.rbac-legend  { font-size: 11.5px; font-weight: 600; padding: 3px 10px; border-radius: 99px; }
.rbac-legend.rbac-full    { background: rgba(46,125,79,.15);  color: var(--success); }
.rbac-legend.rbac-partial { background: rgba(0,97,110,.15); color: var(--info); }
.rbac-legend.rbac-none    { background: var(--surface2);       color: var(--faint); border: 1px solid var(--border); }

/* Danger zone (master reset) */
.sec-danger-zone-header { display: flex; align-items: flex-start; gap: 16px; padding: 20px; background: rgba(180,35,24,.06); border: 1.5px solid rgba(180,35,24,.25); border-radius: var(--radius2); }
.reset-op-card { background: var(--surface); border: 1.5px solid rgba(180,35,24,.2); border-radius: var(--radius2); padding: 16px; height: 100%; }
.roc-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.roc-label  { font-size: 13px; color: var(--text); margin: 0 0 12px; min-height: 36px; }
.reset-op-card button:disabled { opacity: .4; cursor: not-allowed; }

/* Alert */
.alert-sec { background: rgba(154,91,11,.1); border: 1px solid rgba(154,91,11,.3); border-radius: var(--radius2); padding: 12px 16px; font-size: 13px; color: var(--text); }

/* ══════════════════════════════════════════════════════════════
   MASTER RESET — enhanced UI
══════════════════════════════════════════════════════════════ */

/* Two-option cards */
.reset-option-card {
  background: var(--surface); border-radius: var(--radius);
  padding: 22px; height: 100%; display: flex; flex-direction: column;
  border: 1.5px solid var(--border);
}
.reset-option-medium  { border-color: rgba(154,91,11,.3); }
.reset-option-critical { border-color: rgba(180,35,24,.3); }
.roc-top  { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 12px; }
.roc-icon { width: 48px; height: 48px; border-radius: 12px; flex-shrink: 0;
             display: flex; align-items: center; justify-content: center; }
.roc-title { font-size: 17px; font-weight: 800; color: var(--text); margin: 4px 0 0; }
.roc-desc  { font-size: 13px; color: var(--muted); line-height: 1.55; flex: 1; }

/* Affected items */
.roc-affected { }
.roa-title { font-size: 11.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px; }
.roa-items { display: flex; flex-direction: column; gap: 4px; }
.roa-item  { font-size: 12.5px; padding: 5px 10px; border-radius: 6px; font-weight: 500; }
.roa-delete  { background: rgba(180,35,24,.1);  color: var(--danger); }
.roa-changed { background: rgba(154,91,11,.1); color: var(--warning); }
.roa-safe    { background: rgba(46,125,79,.1);  color: var(--success); }

/* Data preview sections */
.preview-section { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius2); padding: 12px; height: 100%; }
.ps-title { font-size: 11.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px; }
.ps-row   { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; border-bottom: 1px solid rgba(29,43,47,.05); font-size: 12.5px; }
.ps-row:last-child { border-bottom: none; }
.ps-row-has   strong { color: var(--text); }
.ps-row-empty strong { color: var(--faint); }
.ps-row-has   span   { color: var(--muted); }
.ps-row-empty span   { color: var(--faint); }


/* ══════════════════════════════════════════════════════════════
   DESIGN SYSTEM v2 — colour meaning, contrast, focus, motion
   Every value here was contrast-checked; see the token comments.
══════════════════════════════════════════════════════════════ */

/* Buttons: text must reach 4.5:1 on its fill (WCAG 1.4.3). */
.btn-success, .btn-primary.btn-action { background: var(--btn-primary); border-color: var(--btn-primary); color: #fff; }
.btn-success:hover, .btn-primary.btn-action:hover { background: var(--btn-primary-hover); border-color: var(--btn-primary-hover); }
.btn-primary { background: var(--btn-info); border-color: var(--btn-info); color: #fff; }
.btn-primary:hover { background: var(--btn-info-hover); border-color: var(--btn-info-hover); box-shadow: none; }
.btn-danger { background: var(--btn-danger); border-color: var(--btn-danger); color: #fff; }
.btn-danger:hover { background: var(--btn-danger-hover); border-color: var(--btn-danger-hover); box-shadow: none; }
.btn-ghost { border-color: var(--border-strong); }

/* Focus: visible on every interactive element, keyboard only (WCAG 2.4.7). */
:focus-visible {
  outline: 2px solid var(--focus) !important;
  outline-offset: 2px !important;
  box-shadow: none;
}
.form-control:focus-visible, .form-select:focus-visible { outline-offset: 0 !important; }
/* Sticky bars must not hide the focused element (WCAG 2.4.11). */
html { scroll-padding-top: calc(var(--topbar) + 56px); }

/* Targets: at least 24×24 CSS px (WCAG 2.5.8). */
.btn-icon, .icon-btn, .tbl-action, .page-btn, .btn-close { min-width: 28px; min-height: 28px; }

/* Skip link for keyboard users. */
.skip-link {
  position: fixed; top: -48px; inset-inline-start: 12px; z-index: 2000;
  background: var(--surface); color: var(--text); padding: 10px 16px;
  border-radius: var(--radius2); border: 2px solid var(--focus); font-weight: 700;
}
.skip-link:focus { top: 12px; }

/* KPI cards: neutral. Colour is kept for state, not decoration (Few: save colour for exceptions). */
.kpi::before { display: none; }
.kpi { border-color: var(--border); }
.kpi:hover { transform: none; }
.kpi-icon-wrap { background: var(--surface2) !important; color: var(--muted) !important; }
.kpi-icon-wrap i { color: var(--muted) !important; }
.kpi.is-alert { border-color: var(--warning); }
.kpi.is-alert .kpi-icon-wrap i { color: var(--warning) !important; }
.kpi-value { font-size: 30px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.kpi-value.is-empty { font-size: 16px; font-weight: 600; color: var(--muted); }
.kpi-trend { color: var(--muted); }
.kpi-trend.up { color: var(--success); }
.kpi-trend.down { color: var(--warning); }
.kpi-link { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; font-size: 12px; color: var(--info); text-decoration: none; }
.kpi-link:hover { text-decoration: underline; }
a.kpi { color: inherit; text-decoration: none; display: block; }
a.kpi:hover { border-color: var(--border-strong); }

/* Numbers line up in columns and tiles. */
.num, td.num, .kpi-value { font-variant-numeric: tabular-nums; }
td.num, th.num { text-align: left; direction: ltr; }

/* Status badges: always text + colour (WCAG 1.4.1). */
.status { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px; border-radius: 99px; font-size: 12px; font-weight: 600; border: 1px solid currentColor; background: transparent; white-space: nowrap; }
.status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-verified { color: var(--success); }
.status-partial  { color: var(--info); }
.status-pending  { color: var(--warning); }
.status-rejected { color: var(--danger); }
.status-neutral  { color: var(--neutral); }

/* Empty states replace blank charts and zero tiles. */
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 32px 16px; color: var(--muted); min-height: 160px; }
.empty-state i { font-size: 28px; opacity: .6; }
.empty-state strong { color: var(--text); font-size: 14px; }

/* Chart cards: no decoration around data (Tufte: data-ink). */
.chart-summary { font-size: 12px; color: var(--muted); margin-top: 10px; }

/* Reduced motion (WCAG 2.3.3). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ── Sidebar: names stay readable to screen readers when the rail hides them ──
   display:none removed the links' accessible names; clip them visually instead. */
#sidebar.collapsed .sb-link span,
#sidebar.collapsed .sb-logout span {
  display: inline !important; position: absolute !important; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
@media (max-width: 900px) and (min-width: 769px) {
  .sb-link span, .sb-logout span {
    display: inline !important; position: absolute !important; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
}

/* ── Phones: the sidebar is a drawer, not a permanent icon rail ── */
.sb-overlay { display: none; }
@media (max-width: 768px) {
  :root { --sidebar: 280px; }
  #sidebar { transform: translateX(100%); transition: transform var(--transition); width: 280px; box-shadow: var(--shadow3); }
  #sidebar.open { transform: none; }
  #sidebar .sb-brand-text, #sidebar .sb-user-name, #sidebar .sb-user-role,
  #sidebar .sb-section-label, #sidebar .sb-link span, #sidebar .sb-badge, #sidebar .sb-logout span { display: revert; position: static !important; width: auto; height: auto; clip: auto; clip-path: none; }
  #sidebar .sb-link { justify-content: flex-start; padding: 10px 16px; }
  #main-wrap { margin-right: 0 !important; margin-left: 0 !important; }
  .sb-overlay.show { display: block; position: fixed; inset: 0; background: rgba(8,61,71,.45); z-index: 899; }
  .content { padding: 0 12px 20px; }
}

/* ══════════════════════════════════════════════════════════════
   ICON SYSTEM — Font Awesome tiles + logo mark (replaces emoji)
   One neutral tile, one accent colour; icons are decorative
   (aria-hidden) and always sit next to a text label.
══════════════════════════════════════════════════════════════ */
.ic-tile {
  width: 40px; height: 40px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px; background: var(--surface2); border: 1px solid var(--border);
  color: var(--navy); font-size: 17px; line-height: 1;
}
.ic-tile-lg { width: 56px; height: 56px; border-radius: 14px; font-size: 22px; }
.ic-tile-success { color: var(--success); background: rgba(46,125,79,.12); border-color: rgba(46,125,79,.3); }

/* Logo mark: arch (currentColor) sheltering a heart (accent) */
.logo-mark { display: block; flex-shrink: 0; }
.sb-brand-icon {
  background: var(--surface2); border: 1px solid var(--border); box-shadow: none;
  color: var(--text);
}
.about-hero-mark {
  width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface2); border: 1px solid var(--border); color: var(--text);
}

/* About page tiles */
.feature-card .fc-icon.ic-tile { display: inline-flex; font-size: 17px; margin: 0 auto 12px; }
.donate-card .donate-icon.ic-tile { display: inline-flex; width: 48px; height: 48px; font-size: 20px; margin: 0 auto 12px; }

/* Role pills, toasts, MFA banner */
.role-pill i { font-size: .9em; margin-left: 3px; }
.toast-icon { font-size: 16px; flex-shrink: 0; }
.toast-close i { font-size: 13px; }
.msb-icon.ic-tile { font-size: 18px; }

/* Cause cards: neutral header instead of tinted gradient + giant emoji */
.cc-img-wrap.cc-img-plain { background: var(--surface2); height: 96px; }

/* ══════════════════════════════════════════════════════════════
   ORCHARD ALMANAC — identity layer
   Flat colour fields instead of boxes, documentary photographs,
   live figures in fixed digit cells. Overrides the base above.
══════════════════════════════════════════════════════════════ */

@font-face { font-family: 'Tajawal'; font-weight: 400; font-display: swap;
  src: local('Tajawal'), local('Tajawal-Regular'), url('/static/fonts/Tajawal-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Tajawal'; font-weight: 700; font-display: swap;
  src: local('Tajawal Bold'), local('Tajawal-Bold'), url('/static/fonts/Tajawal-Bold.ttf') format('truetype'); }

body { font-size: 14.5px; line-height: 1.65; background: var(--bg); color: var(--text); }
::selection { background: var(--apricot); color: var(--text); }
input, textarea { caret-color: var(--teal); }
a { color: var(--teal); text-underline-offset: 3px; }
a:hover { color: var(--teal-deep); }
* { scrollbar-width: thin; scrollbar-color: #B9C2B8 transparent; }
::-webkit-scrollbar-thumb { background: #B9C2B8; }
::-webkit-scrollbar-thumb:hover { background: var(--olive); }
:focus-visible { outline-color: var(--apricot-deep) !important; }
.num, .tabular, .kpi-value, .data-table td { font-variant-numeric: tabular-nums; }
h1, h2, h3, h4 { text-wrap: balance; }
.text-muted { color: var(--muted) !important; }

/* ── Sidebar: one deep irrigation-teal field ─────────────────── */
#sidebar { background: var(--teal-deep); border-left: 0; }
.sb-brand { padding: 18px 18px 16px; border-bottom: 1px solid rgba(255,255,255,.1); gap: 12px; }
.sb-brand-logo { width: 46px; height: 46px; flex-shrink: 0; border-radius: 50%; background: #fff; display: block;
  box-shadow: 0 2px 10px rgba(0,0,0,.18); }
.sb-brand-text strong { color: #fff; font-size: 14.5px; font-weight: 700; line-height: 1.35; }
.sb-brand-text small  { color: rgba(255,255,255,.75); font-size: 11.5px; }
.sb-user { border-bottom: 1px solid rgba(255,255,255,.1); }
.sb-user-name { color: #fff; }
.sb-avatar { box-shadow: none; outline: 2px solid rgba(255,255,255,.25); }
.sb-section-label { color: rgba(255,255,255,.6); letter-spacing: 0; text-transform: none; font-size: 11.5px; font-weight: 700; padding: 16px 20px 6px; }
.sb-link { color: rgba(255,255,255,.85); border-right: 0; margin: 1px 10px; padding: 9px 12px; border-radius: 8px; position: relative; }
.sb-link .sb-icon { color: rgba(255,255,255,.65) !important; }
.sb-link:hover { background: rgba(255,255,255,.08); color: #fff; border-right-color: transparent; }
.sb-link:hover .sb-icon { color: #fff !important; }
.sb-link.active { background: rgba(255,255,255,.13); color: #fff; font-weight: 700; }
.sb-link.active .sb-icon { color: var(--apricot) !important; }
.sb-link.active::before { content: ''; position: absolute; inset-inline-start: -10px; top: 9px; bottom: 9px; width: 4px;
  border-radius: 0 4px 4px 0; background: var(--apricot); }
.sb-badge { background: var(--apricot); color: var(--text); }
.sb-footer { border-top: 1px solid rgba(255,255,255,.1); }
.sb-logout { color: rgba(255,255,255,.78); }
.sb-logout:hover { background: rgba(255,255,255,.08); color: #fff; }
.role-pill { background: rgba(255,255,255,.13) !important; color: #fff !important; font-weight: 600; }
#sidebar.collapsed .sb-link { margin: 1px 8px; }
#sidebar.collapsed .sb-link.active::before { display: none; }
#sidebar.collapsed .sb-brand { justify-content: center; padding-inline: 10px; }

/* ── Top bar: limestone strip, hairline under it ─────────────── */
.topbar { background: rgba(243,245,241,.94); border-bottom: 1px solid var(--border); backdrop-filter: saturate(1.4) blur(8px); padding: 0 24px; }
.topbar-title { font-size: 17px; font-weight: 700; display: flex; align-items: center; gap: 10px; margin: 0; }
.topbar-title i { color: var(--teal) !important; font-size: 15px; }
#sb-toggle:hover { background: var(--surface3); }
.content { padding: 0 24px 40px; }

/* ── Surfaces: no boxes, just white fields on limestone ──────── */
.card, .chart-card, .dash-card, .tbl-wrap, .kpi, .basket-card, .cause-card, .feature-card, .dev-card, .donate-card, .reset-option-card, .verif-item {
  border: 0 !important; box-shadow: var(--shadow); background: var(--surface); }
.card-header { border-bottom: 1px solid var(--border); padding: 16px 20px; }
.card-title { font-size: 15px; }
.card-title i, .chart-card-title i { color: var(--teal); }
.card-footer, .modal-header, .modal-footer { background: var(--surface2); }
.kpi { padding: 18px 18px 16px; }
.kpi-value { font-size: 32px; font-weight: 700; color: var(--teal-ink); letter-spacing: -.02em; }
a.kpi:hover { box-shadow: var(--shadow2); }
.kpi-link { color: var(--teal); font-weight: 600; }
.kpi-bar > span { background: var(--teal) !important; }
.kpi-bar.is-info > span { background: var(--apricot) !important; }

/* Tables */
.data-table thead tr { background: var(--surface2); }
.data-table thead th { color: var(--muted); text-transform: none; letter-spacing: 0; font-size: 12.5px; border-bottom: 0; }
.data-table tbody tr { border-bottom: 1px solid var(--border); }
.data-table tbody tr:hover { background: var(--teal-wash); }

/* Buttons */
.btn { border-radius: 8px; font-weight: 700; }
.btn-primary, .btn-success { background: var(--teal); border-color: var(--teal); color: #fff; }
.btn-primary:hover, .btn-success:hover { background: var(--teal-deep); border-color: var(--teal-deep); color: #fff; box-shadow: none; }
.btn-amber, .btn-donate { background: var(--apricot); border-color: var(--apricot); color: var(--text); }
.btn-amber:hover, .btn-donate:hover { background: #CF7224; border-color: #CF7224; color: var(--text); }
.btn-ghost { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.btn-ghost:hover { background: var(--surface2); border-color: var(--olive); color: var(--text); }
.btn-lg { padding: 12px 22px; font-size: 15px; }

/* Forms */
.form-control, .form-select { background-color: var(--surface); color: var(--text); border-color: var(--border-strong); }
.form-control:focus, .form-select:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(0,97,110,.14); background-color: var(--surface); color: var(--text); }
.form-select option { background: #fff; color: var(--text); }
.input-group-text { background: var(--surface2); border-color: var(--border-strong); color: var(--muted); }

/* Badges, alerts, toasts: tinted wash + dark text */
.badge-green, .badge-paid { background: #E4F1E8; color: #23603D; border-color: #C3DFCC; }
.badge-red    { background: #FBE6E3; color: #8F1C13; border-color: #F1C4BE; }
.badge-amber, .badge-pending-fee { background: var(--apricot-wash); color: #7A4108; border-color: #F2CFAE; }
.badge-blue, .badge-navy { background: var(--teal-wash); color: var(--teal-ink); border-color: #C3DADB; }
.badge-purple { background: #ECE6F5; color: #4F3A78; border-color: #D5CAE8; }
.badge-gray, .badge-waived { background: var(--surface2); color: var(--muted); border-color: var(--border); }
.alert-success { background: #E4F1E8; color: #23603D; border-color: #C3DFCC; }
.alert-danger  { background: #FBE6E3; color: #8F1C13; border-color: #F1C4BE; }
.alert-warning { background: var(--apricot-wash); color: #7A4108; border-color: #F2CFAE; }
.alert-info    { background: var(--teal-wash); color: var(--teal-ink); border-color: #C3DADB; }
.toast-item { background: var(--surface) !important; color: var(--text) !important; border: 0 !important; box-shadow: var(--shadow3); backdrop-filter: none;
  position: relative; overflow: hidden; padding-inline-start: 20px; }
.toast-item::before { content: ''; position: absolute; inset-block: 0; inset-inline-start: 0; width: 5px; background: var(--teal); }
.toast-success::before { background: var(--success); } .toast-danger::before { background: var(--danger); }
.toast-warning::before { background: var(--apricot); } .toast-info::before { background: var(--teal); }
.toast-success .toast-icon { color: var(--success); } .toast-danger .toast-icon { color: var(--danger); }
.toast-warning .toast-icon { color: var(--apricot-deep); } .toast-info .toast-icon { color: var(--teal); }

/* Tabs */
.tab-nav { background: var(--surface2); border: 0; }
.tab-nav .tab-btn.active { background: var(--surface); color: var(--teal-ink); border: 0; box-shadow: var(--shadow); }
.nav-tabs .nav-link.active { color: var(--teal-ink); border-bottom-color: var(--apricot); }

/* Progress: a flat field filling, never a gradient */
.progress-bar-wrap { background: var(--surface3); height: 8px; }
.progress-bar-fill { background: var(--teal); }

/* Icon tiles become quiet glyphs on wash */
.ic-tile { background: var(--teal-wash); border: 0; color: var(--teal); }
.ic-tile-success { background: #E4F1E8; color: var(--success); }

/* Modal */
.modal-content { border: 0; box-shadow: var(--shadow3); }
.modal-backdrop.show { opacity: .45; background: var(--teal-ink); }

/* Sidebar overlay on phones */
.sb-overlay.show { background: rgba(8,61,71,.45); }

/* ── Photographs: shared treatment ───────────────────────────── */
.photo { position: relative; overflow: hidden; background: var(--olive-wash); }
.photo > picture, .photo > img, .photo > picture > img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.photo img { object-fit: cover; }
.photo-tag { position: absolute; inset-block-end: 10px; inset-inline-end: 10px; z-index: 2;
  font-size: 11px; font-weight: 700; line-height: 1; padding: 6px 9px; border-radius: 6px;
  background: rgba(29,43,47,.74); color: #fff; pointer-events: none; }

/* ── Live figures: fixed digit cells ─────────────────────────── */
.figure-cells { display: inline-flex; direction: ltr; gap: 3px; font-variant-numeric: tabular-nums; }
.figure-cells .cell { display: inline-grid; place-items: center; min-width: .74em; padding: .05em .07em; border-radius: 4px;
  background: rgba(29,43,47,.10); line-height: 1.05; }
.figure-cells .cell.sep { background: transparent; min-width: .28em; padding: 0; }
.figure-cells .cell.flip { animation: cell-in .45s var(--ease-out); }
@keyframes cell-in { from { opacity: 0; filter: blur(3px); transform: translateY(-.18em); } to { opacity: 1; filter: none; transform: none; } }

/* ══════════════════════════════════════════════════════════════
   LOGIN — photograph + apricot field
══════════════════════════════════════════════════════════════ */
.ol-login { min-height: 100vh; display: grid; grid-template-columns: minmax(0,1fr); background: var(--surface); }
@media (min-width: 1024px) { .ol-login { grid-template-columns: minmax(0, 1.15fr) minmax(440px, .85fr); } }
.ol-visual { display: none; position: relative; min-height: 100vh; }
@media (min-width: 1024px) { .ol-visual { display: grid; align-content: end; } }
.ol-visual .photo { position: absolute; inset: 0; }
.ol-visual .photo img { object-position: 50% 55%; }
.ol-field { position: relative; z-index: 1; margin: 0 40px 40px; max-width: 560px;
  background: var(--apricot); color: var(--text); padding: 28px 30px 24px; border-radius: 4px;
  box-shadow: 0 30px 60px -24px rgba(8,61,71,.6); }
.ol-field h2 { font-size: 27px; font-weight: 800; line-height: 1.45; margin: 0 0 12px; color: var(--text); }
.ol-field p { margin: 0; font-size: 14.5px; line-height: 1.8; color: #2B1B0C; }
.ol-license { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(29,43,47,.25); font-size: 13px; font-weight: 700; }
.ol-visual .photo-tag { inset-block-end: auto; inset-block-start: 18px; inset-inline-end: 18px; }

.ol-panel { display: flex; flex-direction: column; justify-content: center; padding: 48px clamp(24px, 6vw, 72px); background: var(--surface); min-height: 100vh; }
.ol-brand { display: flex; align-items: center; gap: 16px; margin-bottom: 36px; }
.ol-brand img { width: 80px; height: 80px; flex-shrink: 0; }
.ol-brand strong { display: block; font-size: 18px; font-weight: 800; line-height: 1.4; color: var(--teal-ink); }
.ol-brand span { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }
.ol-panel h1 { font-size: 30px; font-weight: 800; margin: 0 0 6px; color: var(--text); }
.ol-sub { font-size: 14.5px; color: var(--muted); margin: 0 0 28px; }
.ol-panel .form-control { padding: 12px 14px; font-size: 15px; }
.ol-panel .search-wrap .form-control { padding-right: 40px; }
.ol-submit { width: 100%; margin-top: 10px; padding: 13px 16px; font-size: 15.5px; justify-content: center; }
.ol-err { display: none; background: #FBE6E3; color: #8F1C13; padding: 12px 14px; border-radius: 8px; font-size: 13.5px; margin-bottom: 16px; }
.ol-public { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--border); font-size: 13.5px; }
.ol-public a { font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.ol-foot { margin-top: 24px; font-size: 12px; color: var(--faint); }
.ol-demo { margin-top: 28px; padding: 14px 16px; background: var(--surface2); border-radius: 8px; }
.ol-demo p { font-size: 12.5px; color: var(--muted); font-weight: 700; margin: 0 0 8px; }
.ol-demo button { display: flex; width: 100%; align-items: center; gap: 8px; font-size: 13px; padding: 6px 8px; border: 0; border-radius: 6px; background: none; text-align: right; color: var(--text); cursor: pointer; }
.ol-demo button:hover { background: var(--surface3); }
.ol-demo code { margin-inline-start: auto; background: var(--surface); padding: 1px 6px; border-radius: 4px; font-size: 11.5px; color: var(--muted); }
.ol-mobile-photo { height: 210px; margin: -48px calc(-1 * clamp(24px, 6vw, 72px)) 28px; }
@media (min-width: 1024px) { .ol-mobile-photo { display: none; } }
@media (prefers-reduced-motion: no-preference) {
  .ol-visual .photo img { animation: ol-settle 1.6s var(--ease-out) both; }
  .ol-field { animation: ol-rise .9s .25s var(--ease-out) both; }
  @keyframes ol-settle { from { opacity: .3; transform: scale(1.04); } to { opacity: 1; transform: none; } }
  @keyframes ol-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
}

/* ══════════════════════════════════════════════════════════════
   PUBLIC SHELL (causes for visitors without an account)
══════════════════════════════════════════════════════════════ */
.pub-bar { position: sticky; top: 0; z-index: 50; background: var(--teal-deep); color: #fff; }
.pub-bar-inner { max-width: 1240px; margin: 0 auto; padding: 10px 24px; display: flex; align-items: center; gap: 12px; }
.pub-bar img { width: 44px; height: 44px; border-radius: 50%; background: #fff; flex-shrink: 0; }
.pub-bar strong { font-size: 15px; font-weight: 800; line-height: 1.3; }
.pub-bar small { display: block; font-size: 11.5px; color: rgba(255,255,255,.78); font-weight: 400; }
.pub-bar nav { margin-inline-start: auto; display: flex; gap: 4px; }
.pub-bar nav a { color: #fff; text-decoration: none; font-weight: 700; font-size: 13.5px; padding: 8px 12px; border-radius: 8px; white-space: nowrap; }
.pub-bar nav a:hover { background: rgba(255,255,255,.12); color: #fff; }
@media (max-width: 560px) { .pub-bar small { display: none; } .pub-bar strong { font-size: 13.5px; } }
.pub-main { max-width: 1240px; margin: 0 auto; padding: 24px 24px 56px; }
@media (max-width: 560px) { .pub-main { padding: 16px 16px 40px; } }
.pub-foot { background: var(--teal-ink); color: rgba(255,255,255,.85); font-size: 13px; }
.pub-foot-inner { max-width: 1240px; margin: 0 auto; padding: 28px 24px; display: flex; flex-wrap: wrap; gap: 10px 32px; align-items: center; }
.pub-foot strong { color: #fff; }

/* ══════════════════════════════════════════════════════════════
   CAUSES — harvest season
══════════════════════════════════════════════════════════════ */
.cz-hero { display: grid; grid-template-columns: minmax(0,1fr); border-radius: 6px; overflow: hidden; background: var(--apricot); margin-bottom: 30px; box-shadow: var(--shadow2); }
@media (min-width: 900px) { .cz-hero { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); min-height: 460px; } }
.cz-hero .photo { min-height: 240px; }
.cz-hero .photo img { object-position: 50% 45%; }
.cz-hero-field { padding: clamp(22px, 4vw, 44px); display: flex; flex-direction: column; justify-content: center; color: var(--text); }
.cz-org { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; margin-bottom: 16px; color: #2B1B0C; }
.cz-org img { width: 34px; height: 34px; border-radius: 50%; background: #fff; }
.cz-hero h1 { font-size: clamp(28px, 3.6vw, 44px); font-weight: 800; line-height: 1.25; margin: 0 0 12px; color: var(--text); }
.cz-hero p { font-size: 15.5px; line-height: 1.8; margin: 0 0 18px; max-width: 46ch; color: #2B1B0C; }
.cz-ledger { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px 22px; margin: 4px 0 22px; padding: 16px 0; border-block: 1px solid rgba(29,43,47,.25); }
.cz-ledger dt { font-size: 12.5px; font-weight: 700; color: #3A2611; margin-bottom: 4px; }
.cz-ledger dd { margin: 0; font-size: 26px; font-weight: 800; color: var(--text); min-height: 1.3em; }
.cz-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.cz-hero-actions .btn-primary { background: var(--teal-deep); border-color: var(--teal-deep); }
.cz-hero-actions .btn-primary:hover { background: var(--teal-ink); border-color: var(--teal-ink); }
.cz-hero-note { font-size: 12.5px; color: #3A2611; }

.cz-season { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; margin: 6px 0 16px; }
.cz-season h2 { font-size: 22px; font-weight: 800; margin: 0; color: var(--teal-ink); }
.causes-filter { gap: 6px; }
.cf-btn { border: 0; background: var(--surface); color: var(--muted); box-shadow: var(--shadow); font-weight: 700; padding: 8px 14px; border-radius: 8px; }
.cf-btn:hover { color: var(--teal-ink); background: var(--teal-wash); border: 0; }
.cf-btn.active { background: var(--teal-deep); color: #fff; }

.causes-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 22px; }
.cause-card { border-radius: 6px; overflow: hidden; transition: box-shadow .3s var(--ease-out), transform .3s var(--ease-out); }
.cause-card:hover { transform: translateY(-3px); box-shadow: var(--shadow2); border-color: transparent; }
.cc-photo { height: 196px; }
.cc-cat { position: absolute; z-index: 2; inset-block-start: 12px; inset-inline-start: 12px; font-size: 12px; font-weight: 700;
  background: var(--surface); color: var(--teal-ink); padding: 5px 10px; border-radius: 6px; display: inline-flex; gap: 6px; align-items: center; }
.cc-feat { position: absolute; z-index: 2; inset-block-start: 12px; inset-inline-end: 12px; font-size: 12px; font-weight: 800;
  background: var(--apricot); color: var(--text); padding: 5px 10px; border-radius: 6px; }
.cc-body { padding: 18px 20px 20px; }
.cc-name { font-size: 18px; font-weight: 800; color: var(--text); line-height: 1.4; }
.cc-desc { color: var(--muted); font-size: 13.5px; line-height: 1.7; }
.cc-yield { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.cc-yield strong { font-size: 20px; font-weight: 800; color: var(--teal-ink); font-variant-numeric: tabular-nums; }
.cc-yield span { font-size: 12.5px; color: var(--muted); }
.cc-meter { height: 8px; background: var(--surface3); border-radius: 2px; overflow: hidden; }
.cc-meter span { display: block; height: 100%; width: 100%; background: var(--apricot); border-radius: 2px; transform: scaleX(0); transform-origin: right; transition: transform 1.2s var(--ease-out); }
.cc-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; font-size: 12.5px; color: var(--muted); }
.cc-meta b { color: var(--text); font-weight: 700; }
.cc-more { margin-top: 12px; }
.cc-more summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--teal); list-style: none; display: inline-flex; align-items: center; gap: 6px; }
.cc-more summary::-webkit-details-marker { display: none; }
.cc-more summary i { transition: transform .25s var(--ease-out); font-size: 11px; }
.cc-more[open] summary i { transform: rotate(180deg); }
.cc-more-body { padding-top: 10px; font-size: 13.5px; line-height: 1.75; color: var(--text); }
.cc-more-body ul { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 0; }
.cc-more-body li { display: flex; justify-content: space-between; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.cc-more-body li span { color: var(--muted); }
@media (prefers-reduced-motion: no-preference) {
  .cc-more[open] .cc-more-body { animation: cc-unfold .35s var(--ease-out); }
  @keyframes cc-unfold { from { opacity: 0; transform: translateY(-6px); clip-path: inset(0 0 100% 0); } to { opacity: 1; transform: none; clip-path: inset(0); } }
}
.cc-actions { gap: 8px; margin-top: 16px; }
.cause-skeleton .cc-photo { background: var(--surface3); }
.cause-featured { box-shadow: 0 0 0 2px var(--apricot), var(--shadow) !important; }

/* Donation modal in the orchard palette */
.ptype-card, .pm-card, .amount-chip, .donate-summary { background: var(--surface); border-color: var(--border-strong); }
.ptype-card.active, .pm-option input:checked + .pm-card { border-color: var(--teal); background: var(--teal-wash); }
.amount-chip.active { background: var(--teal-deep); border-color: var(--teal-deep); color: #fff; }
.amount-chip:hover, .ptype-card:hover, .pm-card:hover { border-color: var(--teal); color: var(--teal-ink); }
.pm-option input:checked + .pm-card i { color: var(--teal); }
.cz-modal-photo { height: 150px; }

/* ══════════════════════════════════════════════════════════════
   ABOUT — the association, then the system
══════════════════════════════════════════════════════════════ */
.ab-hero { display: grid; grid-template-columns: minmax(0,1fr); border-radius: 6px; overflow: hidden; background: var(--teal-deep); color: #fff; margin-bottom: 24px; box-shadow: var(--shadow2); }
@media (min-width: 900px) { .ab-hero { grid-template-columns: minmax(0,1fr) minmax(0, 1.05fr); min-height: 400px; } }
.ab-hero .photo { min-height: 240px; }
.ab-hero-text { padding: clamp(24px, 4vw, 48px); display: flex; flex-direction: column; justify-content: center; }
.ab-logo { width: 92px; height: 92px; border-radius: 50%; background: #fff; margin-bottom: 20px; box-shadow: 0 6px 18px rgba(0,0,0,.2); }
.ab-hero h1 { font-size: clamp(26px, 3.2vw, 38px); font-weight: 800; line-height: 1.3; margin: 0 0 6px; color: #fff; }
.ab-en { font-size: 14px; color: rgba(255,255,255,.78); margin: 0 0 18px; }
.ab-hero p { font-size: 15.5px; line-height: 1.85; color: rgba(255,255,255,.92); margin: 0; max-width: 54ch; }

.ab-license { display: grid; grid-template-columns: minmax(0,1fr); background: var(--surface); border-radius: 6px; box-shadow: var(--shadow); margin-bottom: 36px; overflow: hidden; }
@media (min-width: 768px) { .ab-license { grid-template-columns: auto minmax(0,1fr); } }
.ab-seal { background: var(--apricot); color: var(--text); padding: 24px 28px; display: flex; flex-direction: column; justify-content: center; min-width: 220px; }
.ab-seal span { font-size: 12.5px; font-weight: 700; color: #3A2611; }
.ab-seal strong { font-size: 42px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ab-seal small { font-size: 13px; font-weight: 700; margin-top: 4px; color: #2B1B0C; }
.ab-license dl { margin: 0; padding: 22px 26px; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px 28px; }
.ab-license dt { font-size: 12.5px; color: var(--muted); font-weight: 700; margin-bottom: 3px; }
.ab-license dd { margin: 0; font-size: 14.5px; font-weight: 700; color: var(--text); line-height: 1.6; }

.ab-section-title { font-size: 22px; font-weight: 800; color: var(--teal-ink); margin: 0 0 6px; }
.ab-section-lead { color: var(--muted); font-size: 14.5px; margin: 0 0 18px; max-width: 70ch; }
.ab-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 18px; margin-bottom: 40px; }
.ab-field { background: var(--surface); border-radius: 6px; overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; margin: 0; }
.ab-field .photo { aspect-ratio: 4 / 3; }
.ab-field-text { padding: 16px 18px 18px; border-top: 5px solid var(--apricot); flex: 1; }
.ab-field:nth-child(even) .ab-field-text { border-top-color: var(--teal); }
.ab-field h3 { font-size: 17px; font-weight: 800; margin: 0 0 6px; color: var(--text); }
.ab-field p { font-size: 13.5px; color: var(--muted); line-height: 1.7; margin: 0; }

.ab-system { display: grid; grid-template-columns: minmax(0,1fr); background: var(--surface); border-radius: 6px; box-shadow: var(--shadow); margin-bottom: 36px; overflow: hidden; }
@media (min-width: 768px) { .ab-system { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1200px) { .ab-system { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.ab-sys-item { display: grid; grid-template-columns: 22px minmax(0,1fr); gap: 4px 12px; padding: 18px 22px; border-bottom: 1px solid var(--border); border-inline-start: 1px solid var(--border); margin-inline-start: -1px; }
.ab-sys-item i { color: var(--teal); font-size: 16px; padding-top: 3px; }
.ab-sys-item h4 { font-size: 14.5px; font-weight: 800; margin: 0; color: var(--text); }
.ab-sys-item p { grid-column: 2; font-size: 13px; color: var(--muted); margin: 0; line-height: 1.65; }

/* About: support + FAQ keep their content, lose their boxes */
.faq-q { background: var(--surface); border: 0; box-shadow: var(--shadow); }
.faq-q:hover, .faq-q[aria-expanded="true"] { background: var(--teal-wash); color: var(--teal-ink); border: 0; }
.dev-info-row { border-bottom: 1px solid var(--border); }
.dev-info-row i { color: var(--teal); }
.donate-btn-stripe { background: var(--teal); }
.donate-btn-stripe:hover { background: var(--teal-deep); }
.donate-btn-github { background: var(--surface); border: 1px solid var(--border-strong); }

/* ══════════════════════════════════════════════════════════════
   DASHBOARD welcome band
══════════════════════════════════════════════════════════════ */
.dw-band { display: grid; grid-template-columns: minmax(0,1fr); border-radius: 6px; overflow: hidden; background: var(--teal-deep); color: #fff; margin-bottom: 20px; box-shadow: var(--shadow); }
@media (min-width: 900px) { .dw-band { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); min-height: 170px; } }
.dw-text { padding: 22px 26px; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.dw-text h2 { font-size: 22px; font-weight: 800; margin: 0; color: #fff; }
.dw-text p { margin: 0; font-size: 14px; color: rgba(255,255,255,.88); }
.dw-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.dw-actions .btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.dw-actions .btn-ghost:hover { background: rgba(255,255,255,.1); color: #fff; border-color: #fff; }
.dw-band .photo { min-height: 150px; display: none; }
@media (min-width: 900px) { .dw-band .photo { display: block; } }

@media (max-width: 768px) { .content { padding: 0 14px 28px; } .topbar { padding: 0 14px; } }

/* Print stays plain ink on paper */
@media print {
  .cz-hero, .ab-hero, .dw-band { background: #fff !important; color: #000 !important; box-shadow: none !important; }
  .photo, .photo-tag, .pub-bar, .pub-foot, .ol-visual { display: none !important; }
  .cz-hero h1, .ab-hero h1, .ab-hero p { color: #000 !important; }
}

/* ══ Finish-review fixes: no enclosure, full bleed, ruled season rows ══ */
:root { --gutter: 24px; }
@media (max-width: 768px) { :root { --gutter: 14px; } }
@media (max-width: 560px) { .pub-main { --gutter: 16px; } }
.pub-main { padding-inline: var(--gutter); }

/* Heroes run edge to edge: no radius, no shadow, photo full height */
.cz-hero, .ab-hero, .dw-band { border-radius: 0; box-shadow: none; margin-inline: calc(-1 * var(--gutter)); }
.content > .cz-hero:first-child, .content > .ab-hero:first-child, .content > .dw-band:first-child { margin-top: -1rem; }
.pub-main > .cz-hero:first-child, .pub-main > .ab-hero:first-child { margin-top: -24px; }
@media (min-width: 1240px) { .pub-main > .cz-hero, .pub-main > .ab-hero { margin-inline: calc(50% - 50vw); } }
.cz-hero .photo, .ab-hero .photo { min-height: 260px; }
@media (min-width: 900px) { .cz-hero .photo, .ab-hero .photo { min-height: 100%; } }
@media (min-width: 900px) { .cz-hero { min-height: min(78vh, 620px); } }
.cz-org { margin: 22px 0 0; padding-top: 16px; border-top: 1px solid rgba(29,43,47,.25); }

/* Season: ruled rows on the limestone ground, no cards */
.cz-totals { margin: 4px 0 0; font-size: 13.5px; color: var(--muted); }
.cz-totals b { color: var(--teal-ink); font-size: 15px; }
.cz-rows { border-top: 2px solid var(--teal-deep); margin-bottom: 8px; }
.cz-row { display: grid; grid-template-columns: minmax(0,1fr); gap: 14px 28px; padding: 22px 0; border-bottom: 1px solid var(--border-strong); }
@media (min-width: 900px) { .cz-row { grid-template-columns: 260px minmax(0, 1fr) 300px; align-items: start; } }
.cz-row-photo { position: relative; aspect-ratio: 16 / 10; }
.cz-row-photo .photo { position: absolute; inset: 0; }
.cz-row-cat { margin: 0 0 4px; font-size: 12.5px; font-weight: 700; color: var(--olive); }
.cz-row .cc-name { margin: 0 0 6px; font-size: 20px; }
.cz-row .cc-desc { margin: 0; }
.cz-row-yield dl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; margin: 0 0 10px; }
.cz-row-yield dt { font-size: 12px; font-weight: 700; color: var(--muted); margin-bottom: 2px; }
.cz-row-yield dd { margin: 0; font-size: 19px; font-weight: 800; color: var(--teal-ink); }
.cz-row .cc-actions { margin-top: 14px; display: flex; flex-wrap: wrap; }
/* Featured campaign: a flat apricot field, the row's own colour — not a ring */
.cz-row.is-featured { background: var(--apricot); border-bottom-color: transparent; padding-inline: 20px; margin-inline: -20px; }
.cz-row.is-featured .cc-desc, .cz-row.is-featured .cz-row-cat, .cz-row.is-featured .cz-row-yield dt { color: #3A2611; }
.cz-row.is-featured .cz-row-yield dd { color: var(--text); }
.cz-row.is-featured .cc-meter { background: rgba(29,43,47,.18); }
.cz-row.is-featured .cc-meter span { background: var(--teal-deep); }
.cz-row.is-featured .cc-more summary { color: var(--teal-ink); }
.cz-row.is-featured .cc-more-body li { border-bottom-color: rgba(29,43,47,.2); }
.cz-row.is-featured .cc-more-body li span { color: #3A2611; }
@media (max-width: 899px) { .cz-row.is-featured { margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); } }
.cz-row.cause-skeleton .cz-row-photo { aspect-ratio: 16 / 10; }

/* KPI rows: one flat strip of figures, dividers not boxes, no icon tiles */
.row:has(> .col > .kpi), .kpi-grid, .dash-kpis { background: var(--surface); box-shadow: var(--shadow); margin-inline: 0; gap: 0 !important; border-radius: 0; }
.row:has(> .col > .kpi) > .col { padding: 0; }
.row:has(> .col > .kpi) > .col + .col .kpi, .dash-kpis > .kpi + .kpi { border-inline-start: 1px solid var(--border) !important; }
.row:has(> .col > .kpi) .kpi, .dash-kpis .kpi, .kpi-grid .kpi { box-shadow: none !important; border-radius: 0; height: 100%; background: transparent; }
.kpi-icon-wrap { display: none !important; }
a.kpi:hover { background: var(--teal-wash); box-shadow: none; }

/* About fields: photo + caption on the ground, no boxing, no strips */
.ab-field { background: transparent; box-shadow: none; border-radius: 0; }
.ab-field-text { border-top: 0; padding: 12px 0 0; }
.ab-field .photo { border-radius: 0; }
.ab-license { border-radius: 0; box-shadow: none; border-block: 2px solid var(--teal-deep); background: transparent; }
.ab-license .ab-seal { margin-block: -2px; }

/* Login form sits on the limestone ground */
.ol-login, .ol-panel { background: var(--bg); }

/* Public header wraps instead of overflowing on phones */
.pub-bar-inner { flex-wrap: wrap; row-gap: 4px; }
@media (max-width: 560px) {
  .pub-bar nav { width: 100%; margin-inline-start: 0; justify-content: space-between; border-top: 1px solid rgba(255,255,255,.12); padding-top: 4px; }
  .pub-bar nav a { padding: 8px 6px; font-size: 13px; }
}

/* Adjacent featured rows stay separate fields; KPI strip keeps its top gap */
.cz-row.is-featured { box-shadow: 0 3px 0 var(--bg); }
.cz-row.is-featured + .cz-row.is-featured { margin-top: 3px; }
.row:has(> .col > .kpi) { margin-top: 0 !important; }

/* ══ Round 2: licence everywhere, project gallery, photo empty states ══ */
.sb-license { display: flex; gap: 10px; align-items: flex-start; margin: 0 10px 8px; padding: 10px 12px; border-radius: 8px;
  background: rgba(255,255,255,.08); color: rgba(255,255,255,.85); font-size: 11.5px; line-height: 1.55; flex-shrink: 0; }
.sb-license i { color: var(--apricot); font-size: 15px; margin-top: 2px; }
.sb-license b { color: #fff; font-size: 12.5px; }
#sidebar.collapsed .sb-license span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
#sidebar.collapsed .sb-license { justify-content: center; }
@media (max-width: 900px) and (min-width: 769px) { .sb-license span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .sb-license { justify-content: center; } }
.dw-license { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px !important; font-size: 13px !important; font-weight: 700; color: #fff !important; }
.dw-license i { color: var(--apricot); }

.pj-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 18px; margin-bottom: 20px; }
.pj-proj { margin: 0; }
.pj-proj-photo { position: relative; aspect-ratio: 16 / 10; }
.pj-proj-photo .photo { position: absolute; inset: 0; }
.pj-proj figcaption { padding-top: 10px; }
.pj-proj h3 { font-size: 16px; font-weight: 800; margin: 0 0 2px; color: var(--text); }
.pj-proj dl { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; margin: 8px 0 0; padding-top: 8px; border-top: 1px solid var(--border); }
.pj-proj dt { font-size: 12px; color: var(--muted); font-weight: 700; }
.pj-proj dd { margin: 0; font-weight: 800; color: var(--teal-ink); font-variant-numeric: tabular-nums; }

.empty-photo { display: flex; align-items: center; gap: 18px; padding: 18px 0; text-align: start; }
.empty-photo .photo { width: 200px; height: 125px; flex-shrink: 0; }
.empty-photo strong { display: block; font-size: 15px; color: var(--text); margin-bottom: 4px; }
.empty-photo span { display: block; font-size: 13px; color: var(--muted); margin-bottom: 10px; }
@media (max-width: 560px) { .empty-photo { flex-direction: column; align-items: stretch; } .empty-photo .photo { width: 100%; height: 160px; } }

@media print { .print-header::after { content: "جمعية الجبر والعطاء الخيرية · ترخيص رقم 815 لعام 2025"; display: block; font-size: 10pt; font-weight: 700; margin-top: 4px; } .sb-license { display: none !important; } }

/* Phones: top-bar actions wrap under the title instead of widening the page */
@media (max-width: 768px) {
  .topbar { height: auto; min-height: var(--topbar); flex-wrap: wrap; padding-block: 10px; row-gap: 8px; }
  .topbar-title { min-width: 0; font-size: 15.5px; }
  .topbar-actions { flex-wrap: wrap; width: 100%; }
}

/* Shared server-side pager (renderPager in app.js) */
.srv-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 4px 4px; font-size: 13px; color: var(--muted); }
.srv-pager:empty { display: none; }
.srv-pager-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.srv-pager .page-btn { min-width: 34px; min-height: 34px; padding: 2px 10px; border-radius: 6px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font: inherit; font-weight: 700; cursor: pointer; font-variant-numeric: tabular-nums; }
.srv-pager .page-btn:hover:not(:disabled) { background: var(--teal-wash); border-color: var(--teal); }
.srv-pager .page-btn[aria-current="page"] { background: var(--teal-deep); border-color: var(--teal-deep); color: #fff; }
.srv-pager .page-btn:disabled { opacity: .45; cursor: not-allowed; }
.srv-pager-gap { padding: 0 4px; }

/* Toast text column (was an inline style= before the Trusted Types rewrite) */
.toast-msg { flex: 1; }

/* Wrapper that lays out as its children (Vue islands teleport topbar buttons into it) */
.d-contents { display: contents; }