/* Ocean Climate Fund: the logged-in dashboard in the same design as the
   front page, About and Data (navy contour hero, light tint page, white
   rounded cards, pill buttons). Loaded after theme.min.css and style.css.
   Dashboard rules are scoped to the main that follows .ocf-dash-head
   (dashboard/partials/header.blade.php), so public pages are untouched.
   Ven amounts are green, as on every Hub ecosystem site. */

:root {
  --ocf-navy: #1b2a4e;
  --ocf-ink-2: #3d4a66;
  --ocf-blue: #1470af;
  --ocf-sky: #1aa3e9;
  --ocf-deep: #0b1a36;
  --ocf-tint: #f3f6fa;
  --ocf-rule: #e4e3df;
  --ocf-display: "miller-display", Georgia, "Times New Roman", serif;
  --ocf-sans: "neue-haas-grotesk-display", "Helvetica Neue", Arial, sans-serif;

  --ven-green: #42b479;
  --ven-green-text: #237a4c;
  --ven-green-soft: rgba(66, 180, 121, 0.12);
}

/* Header: greeting and section tabs */
.ocf-dash-head {
  background:
    url('/img/ocf-contours.svg') center / cover no-repeat,
    radial-gradient(120% 90% at 75% 40%, #164a7c 0%, #0b1a36 62%);
  color: #ffffff;
  padding: 40px 0 0;
  font-family: var(--ocf-sans);
}
.ocf-dash-hello { display: flex; align-items: center; gap: 16px; }
.ocf-dash-avatar {
  flex: none; width: 64px; height: 64px; border-radius: 50%; object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.35); background: #ffffff;
}
.ocf-dash-title {
  margin: 0 0 2px; font-size: 13px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(255, 255, 255, 0.7);
}
.ocf-dash-head h1 {
  margin: 0; color: #ffffff; font-family: var(--ocf-display); font-weight: 400;
  font-size: clamp(28px, 4vw, 40px); line-height: 1.15;
}
.ocf-dash-tabs {
  display: flex; gap: 4px; margin-top: 28px; overflow-x: auto;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.ocf-dash-tabs::-webkit-scrollbar { display: none; }
.ocf-dash-tabs a {
  flex: none; padding: 12px 16px; font-size: 15px; font-weight: 600; white-space: nowrap;
  color: rgba(255, 255, 255, 0.75); border-bottom: 3px solid transparent; text-decoration: none;
}
.ocf-dash-tabs a:hover { color: #ffffff; }
.ocf-dash-tabs a.is-active { color: #ffffff; border-bottom-color: var(--ocf-sky); }

/* Page */
.ocf-dash-head ~ main {
  background: var(--ocf-tint);
  margin-top: 0 !important;
  padding-top: 32px;
  font-family: var(--ocf-sans);
  color: var(--ocf-navy);
}
.ocf-dash-head ~ main h1,
.ocf-dash-head ~ main h2 {
  font-family: var(--ocf-display); font-weight: 400; color: var(--ocf-navy);
}
.ocf-dash-head ~ main h3,
.ocf-dash-head ~ main h4,
.ocf-dash-head ~ main h5 { color: var(--ocf-navy); font-family: var(--ocf-sans); }
.ocf-dash-head ~ main .text-muted { color: #5b6575 !important; }

/* Cards: white, rounded, a hairline instead of a heavy shadow. card-bleed
   normally runs edge to edge on phones; keep the inset so cards read as
   cards rather than white bands. */
.ocf-dash-head ~ main .card {
  background: #ffffff;
  border: 1px solid var(--ocf-rule);
  border-radius: 18px !important;
  box-shadow: none !important;
  overflow: hidden;
}
.ocf-dash-head ~ main .card-bleed { margin-left: 0 !important; margin-right: 0 !important; }
.ocf-dash-head ~ main .card-header,
.ocf-dash-head ~ main .card-body { background: transparent; }

/* Coalition and System cards: equal heights, actions pinned to the bottom */
.ocf-dash-head ~ main .row > [class*="col-md-4"],
.ocf-dash-head ~ main .row > [class*="col-lg-6"] { display: flex; flex-direction: column; }
.ocf-dash-head ~ main .row > [class*="col-md-4"] > .card { flex: 1 1 auto; display: flex; flex-direction: column; }
.ocf-dash-head ~ main .row > [class*="col-md-4"] > .card > .card-header {
  flex: 1 1 auto; display: flex; flex-direction: column;
}
.ocf-dash-head ~ main .card .action_container { margin-top: auto; padding-top: 12px; }
.ocf-dash-head ~ main .card h4 { font-size: 18px; line-height: 1.3; margin-top: 4px; }
.ocf-dash-head ~ main .systemimage { border-radius: 12px; }
.ocf-dash-head ~ main .coal-count { border-radius: 0 0 18px 18px; }

/* Buttons */
.ocf-dash-head ~ main .btn-primary {
  background: var(--ocf-navy); border-color: var(--ocf-navy); border-radius: 999px; font-weight: 600;
}
.ocf-dash-head ~ main .btn-primary:hover,
.ocf-dash-head ~ main .btn-primary:focus { background: var(--ocf-blue); border-color: var(--ocf-blue); }
.ocf-dash-head ~ main .custom-btn {
  background: var(--ocf-navy); padding: 7px 16px; font-size: 14px; font-weight: 600;
}
.ocf-dash-head ~ main .custom-btn:hover { background: var(--ocf-blue); }
.ocf-dash-head ~ main .custom-btn.donateVein { background: var(--ven-green-text); }
.ocf-dash-head ~ main .custom-btn.donateVein:hover { background: var(--ven-green); }

/* Fields */
.ocf-dash-head ~ main .form-control { border-radius: 10px; border-color: var(--ocf-rule); }
.ocf-dash-head ~ main .form-control:focus { border-color: var(--ocf-blue); box-shadow: 0 0 0 3px rgba(20, 112, 175, 0.15); }

/* Ven and payment amounts */
.ven-amount { color: var(--ven-green-text); font-weight: 600; font-variant-numeric: tabular-nums; }
.ven-amount.is-pending { color: #6b7280; font-weight: 400; }
.money { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Phones: room for the floating Zeke button so it never covers Donate */
@media (max-width: 767.98px) {
  .ocf-dash-head { padding-top: 28px; }
  .ocf-dash-head ~ main { padding-top: 20px; padding-bottom: 96px !important; }
  .ocf-dash-tabs { margin-left: -15px; margin-right: -15px; padding: 0 7px; }
}