/* ==========================================================================
   OliveGiving: additions on top of the Olive Data platform sheets.
   Loads last. Everything structural (shell, components, the interaction layer)
   comes from olive-tokens / olive-app / olive-ui, copied from
   D:\Work\Olive\OlivePlatform\OliveData\OliveQMS\wwwroot via OliveMembers.Theme.
   Re-copy those files to take platform changes; keep product-only rules here.

   This sheet holds:
     1. the --om-* brand defaults the platform sheets expect;
     2. the handful of things OliveGiving has and the platform does not
        (pastel dashboard tiles, fundraiser profile hero, log tail, cover cropper).
   ========================================================================== */

/* ===== 1. Brand variables (Olive defaults; OliveGiving uses the house palette) ===== */
:root {
  --om-primary-rgb: 57, 29, 102;     /* #391D66, plum 900 */
  --om-secondary-rgb: 96, 78, 161;   /* #604EA1, plum 700 */
  --om-accent-rgb: 214, 228, 88;     /* #D6E458, lime 300 */
  --om-primary-hover: #2C1652;
  /* Sidebar and sign-in art panel */
  --om-side: #391D66;
  --om-side-top: #5B3FA0;
  --om-side-deep: #1F0F3D;
  --om-orb-a: #9C89CF;
  --om-orb-b: #D6E458;
  --om-orb-c: #604EA1;
}

/* ===== 2. Brand block in the top bar ====================================== */
.om-brand { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none !important; }
.om-brand .om-brand-logo { max-height: 36px; width: auto; max-width: 180px; object-fit: contain; }
.om-brand .om-brand-icon { height: 32px; width: 32px; border-radius: 8px; background: #fff; padding: 2px; }
.om-brand .om-brand-name { font-weight: 700; color: var(--ink-900); letter-spacing: -.01em; white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.om-auth-logo { width: 44px !important; height: 44px !important; border-radius: 10px; background: #fff; padding: 4px; object-fit: contain; }

.sidenav-user .avatar-olive { width: 36px; height: 36px; }

/* ===== 3. Definition lists on detail pages ================================ */
.om-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .9rem 1.5rem; margin: 0; }
.om-facts dt { font-size: max(.72rem, 10px); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-500); margin-bottom: .15rem; }
.om-facts dd { margin: 0; color: var(--ink-900); font-weight: 500; word-break: break-word; }

/* One-time link panels (admin invitations) */
.om-onetime { background: var(--ok-bg); border: 1px solid var(--ok-line); border-radius: 12px; padding: 1rem 1.1rem; }
.om-onetime .link { font-family: var(--font-mono); font-size: .82rem; background: #fff; border: 1px solid var(--ok-line); border-radius: 8px; padding: .5rem .65rem; word-break: break-all; }

/* Filter bars above server-paged tables */
.om-filters { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.om-filters .form-control, .om-filters .form-select { width: auto; min-width: 180px; }

/* ===== 4. Pastel KPI tiles (OliveGiving only) ============================= */
/* The platform ships .kpi in plum/lime accents. OliveGiving's dashboard was asked for
   light pastel tiles with dark text, so these are variants of .kpi rather than a
   separate component - same markup, same spacing, just a tinted surface. */
.kpi.t-lilac { background: #F1ECFB; border-color: #E4DAF6; }
.kpi.t-mint  { background: #E9F6EC; border-color: #D6EBDB; }
.kpi.t-peach { background: #FDEEE3; border-color: #F6DFCF; }
.kpi.t-sky   { background: #E7F1FB; border-color: #D5E5F6; }
.kpi.t-lilac .label, .kpi.t-mint .label, .kpi.t-peach .label, .kpi.t-sky .label { color: #5b5570; }
.kpi.t-lilac .value, .kpi.t-mint .value, .kpi.t-peach .value, .kpi.t-sky .value { color: #1c1430; }

/* ===== 5. Fundraiser profile hero ======================================== */
.og-hero { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); background: var(--paper); margin-bottom: 1.25rem; }
.og-hero .cover { height: 190px; background: linear-gradient(135deg, var(--plum-700), var(--plum-900)); position: relative; }
.og-hero .cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.og-hero .meta { padding: 1rem 1.25rem 1.25rem; }
.og-hero .meta h2 { margin: 0 0 .35rem; font-size: 1.25rem; }
.og-hero .row { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; color: var(--ink-500); font-size: .9rem; }

/* Raised-vs-goal bar */
.og-progress { height: 8px; border-radius: 999px; background: var(--plum-100); overflow: hidden; margin: .75rem 0 .35rem; }
.og-progress > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--olive-600), var(--lime-300)); }

/* ===== 6. Log tail (Logs page) =========================================== */
pre.og-tail {
  background: var(--ink-900); color: #D7CFF0; padding: 1rem; border-radius: var(--radius);
  font-family: var(--font-mono); font-size: .78rem; line-height: 1.55;
  overflow: auto; max-height: 420px; margin: 0;
}

/* ===== 7. Cover image cropper (fundraiser create/edit) =================== */
.og-cropper { max-width: 100%; }
.og-cropper img { max-width: 100%; display: block; }
.og-crop-box { border: 1px dashed var(--line-2); border-radius: var(--radius); padding: .75rem; background: var(--cream); }
.og-thumb { width: 72px; height: 45px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); display: block; }

/* ===== 8. Sign-in: the one-time code field =============================== */
.auth-code { letter-spacing: .5rem; text-align: center; font-size: 1.25rem; font-weight: 600; font-family: var(--font-mono); }

/* ===== 9. Table cards: breathing room ==================================== */
/* The platform runs tables flush to the card edge. OliveGiving insets them by the same amount as a card body,
   so the toolbar, the striped rows, the pager and the row action buttons never touch the card border.
   olive-tables.js injects its toolbar as a sibling of the table inside .table-responsive, so padding here
   covers the whole block in one rule. */
.card > .table-responsive {
  padding: 1rem 1.25rem 1.25rem;
}

@media (max-width: 575.98px) {
  .card > .table-responsive { padding: .875rem 1rem 1rem; }
}

/* ===== 10. Top bar height ================================================ */
/* The platform pins the sidebar with `position: fixed; top: var(--topbar-h)` (64px), but Vona only gives the
   top bar a *min*-height, so a taller brand block pushed it to 75px and the sidebar's user card ended up
   underneath it, clipped. Hold the bar to exactly the token the sidebar is positioned against. */
.app-topbar { height: var(--topbar-h); }
.app-topbar > .topbar-menu { height: 100%; }
.app-topbar .logo-topbar { display: flex; align-items: center; height: 100%; }
.app-topbar .om-brand { height: auto; line-height: 1.2; }
.app-topbar .om-brand-name { height: auto; }

/* ===== 11. Sidebar user card stays put =================================== */
/* The sidebar's nav is taller than the screen, and Vona scrolls the active item into view on load. That is
   useful with this many items, but it dragged the user card at the top of the sidebar out of sight and clipped
   it under the top bar. Pinning the card to the top of the scroll area keeps both behaviours. */
.sidenav-menu .sidenav-user {
  position: sticky;
  top: 12px;              /* the card's own side margin, so the gap above matches the gap either side */
  z-index: 3;
  margin-top: 12px;
  /* Translucent sidebar purple rather than a solid block: the gradient still reads through it, and the blur
     keeps nav items legible-free as they scroll underneath. */
  background: rgba(57, 29, 102, .55);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
}