:root {
  --navy-950: #050F24;
  --navy-900: #0A1B3D;
  --navy-800: #102850;
  --blue-700: #0B5FFF;
  --blue-600: #2E7BFF;
  --blue-500: #4F94FF;
  --sky-100: #EEF4FF;
  --sky-50: #F7FAFF;
  --white: #FFFFFF;
  --gold-500: #F4B942;
  --gain: #17C784;
  --loss: #F0465C;
  --ink-900: #0B1424;
  --ink-700: #33425E;
  --ink-500: #67748F;
  --line: #DCE6F7;
  --radius: 14px;
  --shadow: 0 20px 50px -20px rgba(10,27,61,.35);
}

body {
  font-family: 'Inter', sans-serif;
  background-color: var(--sky-50);
  color: var(--ink-700);
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Space Grotesk', sans-serif;
  color: var(--ink-900);
}

.mono {
  font-family: 'JetBrains Mono', monospace;
}

a {
  color: var(--blue-700);
}

a:hover {
  color: var(--blue-600);
}

.btn-link {
  color: var(--blue-700);
}

/* ---------- logo mark (shared by header and footer) ---------- */
.logo-mark {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--blue-600), var(--gold-500));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  color: var(--navy-950);
  font-size: 0.9rem;
  box-shadow: 0 6px 16px rgba(11, 95, 255, 0.4);
  flex-shrink: 0;
}

/* ---------- header / nav ---------- */
.pt-navbar {
  background-color: var(--navy-950) !important;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.pt-navbar .navbar-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--white) !important;
  letter-spacing: -0.02em;
}

.pt-navbar .nav-link {
  color: rgba(255, 255, 255, 0.82) !important;
  font-weight: 500;
  font-size: 0.925rem;
}

.pt-navbar .nav-link:hover {
  color: var(--gold-500) !important;
}

.pt-navbar .navbar-toggler {
  border-color: rgba(255, 255, 255, 0.3);
}

.pt-navbar .navbar-toggler-icon {
  filter: invert(1);
}

/* ---------- buttons ---------- */
.btn {
  border-radius: 10px;
  font-weight: 600;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.pt-btn-primary,
.btn-primary {
  background-color: var(--navy-950);
  border-color: var(--navy-950);
  color: var(--white);
  box-shadow: 0 8px 18px -6px rgba(5, 15, 36, 0.5);
}

.pt-btn-primary:hover,
.btn-primary:hover {
  background-color: var(--navy-900);
  border-color: var(--navy-900);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -6px rgba(5, 15, 36, 0.6);
}

.btn-outline-secondary:hover,
.btn-outline-danger:hover {
  transform: translateY(-1px);
}

.badge.pt-btn-primary {
  background-color: var(--navy-950);
}

/* ---------- cards ----------
   No height:100% here on purpose. Most .pt-card usages are content sections
   stacked inside a Bootstrap .row/.col (which stretches its columns by
   default) — a card with height:100% in that context mis-measures against
   its own variable-height content (a growing table/list) and overflows past
   the footer instead of the column growing to contain it. Equal-height grid
   tiles (dashboard stat cards) opt in via .pt-stat-card below instead. */
.pt-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background-color: var(--white);
  box-shadow: 0 10px 30px -18px rgba(10, 27, 61, 0.25);
}

.pt-card .card-header {
  background-color: var(--navy-950);
  color: var(--white);
  font-weight: 600;
  border-bottom: none;
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
}

/* ---------- badges, alerts, tables, list groups, forms ---------- */
.pt-badge-soon {
  background-color: #e9ecef;
  color: #495057;
}

.alert-success {
  background-color: rgba(23, 199, 132, 0.12);
  border-color: rgba(23, 199, 132, 0.35);
  color: #0b6b47;
}

.alert-danger {
  background-color: rgba(240, 70, 92, 0.1);
  border-color: rgba(240, 70, 92, 0.3);
  color: #8a1626;
}

.table thead {
  background-color: var(--sky-100);
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: var(--sky-50);
}

.list-group-item {
  border-color: var(--line);
}

.list-group-item-action:hover {
  background-color: var(--sky-50);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--blue-500);
  box-shadow: 0 0 0 0.2rem rgba(11, 95, 255, 0.15);
}

/* ---------- sticky footer ----------
   body is a flex column (see site.css); this element is the flex-grow
   spacer between header and footer so short pages still push the footer
   to the bottom of the viewport instead of leaving a gap above it. */
.pt-page-content {
  flex: 1 0 auto;
}

/* ---------- footer ---------- */
footer.pt-footer {
  flex-shrink: 0;
  background-color: var(--navy-950);
  color: rgba(230, 238, 255, 0.7);
}

footer.pt-footer a {
  color: rgba(230, 238, 255, 0.85);
}

footer.pt-footer a:hover {
  color: var(--gold-500);
}

/* ---------- auth pages ---------- */
.auth-page {
  display: flex;
  justify-content: center;
  padding: 3rem 1rem;
}

.auth-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px -18px rgba(10, 27, 61, 0.25);
  padding: 2.5rem;
  width: 100%;
  max-width: 440px;
}

.auth-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--sky-100);
  color: var(--blue-700);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 1rem;
}

.auth-title {
  margin-bottom: 0.4rem;
}

.auth-sub {
  color: var(--ink-500);
  margin-bottom: 1.5rem;
}

.auth-links {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-align: center;
}

/* ---------- icon badges (dashboard/groups/profile/admin) ---------- */
.pt-icon-badge {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--sky-100);
  color: var(--blue-700);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

/* ---------- dashboard stat cards ---------- */
.pt-stat-card {
  height: 100%;
}

.pt-stat-card .card-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background-color: var(--white);
  color: var(--ink-700);
  border-bottom: 1px solid var(--line);
  font-weight: 600;
}

.pt-stat-card .card-body h3 {
  font-weight: 700;
  margin-bottom: 0;
}

/* ---------- group cards ---------- */
.pt-group-card {
  border-left: 4px solid var(--blue-600);
}

.pt-group-card .card-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* ---------- profile section headers ---------- */
.pt-section-title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
}

/* ---------- admin/apply action cards ---------- */
.pt-action-card {
  max-width: 560px;
}

.pt-action-card .pt-icon-badge {
  margin-bottom: 0.75rem;
}

/* ---------- wide multi-field application forms (Funding/Apply and similar) ----------
   Unlike .pt-action-card's single narrow column (for short 1-3 field admin forms),
   this spans the full page width and lays fields out two-per-row, matching the
   sign-up form card's section/grid pattern (PoolTransact.Web/wwwroot/css/Register.css)
   so a longer application form reads as one deliberate layout rather than a long
   single-column stack. */
.pt-form-card {
  padding: 2.5rem;
}

.pt-form-section-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blue-700);
  margin: 1.75rem 0 1rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}

.pt-form-section-label:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.pt-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1.25rem;
}

@media (max-width: 767.98px) {
  .pt-form-grid {
    grid-template-columns: 1fr;
  }

  .pt-form-card {
    padding: 1.5rem;
  }
}

/* ---------- funding request status badges ---------- */
.pt-status-badge {
  display: inline-block;
  padding: 0.3em 0.7em;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
}

.pt-status-submitted {
  background-color: var(--sky-100);
  color: var(--blue-700);
}

.pt-status-offered {
  background-color: rgba(244, 185, 66, 0.2);
  color: #8a5a00;
}

.pt-status-disbursed {
  background-color: rgba(11, 95, 255, 0.12);
  color: var(--blue-700);
}

.pt-network-posts {
  overflow-y: auto;
}

@media (min-width: 992px) {
  .pt-network-panel {
    position: sticky;
    top: 1rem;
    /* Bootstrap's .row is a flex container with the default align-items:
       stretch, which would otherwise force this column to match the (taller)
       groups column's height exactly - leaving sticky zero room to move. */
    align-self: flex-start;
  }

  .pt-network-posts {
    max-height: calc(100vh - 280px);
  }
}

@media (max-width: 991.98px) {
  .pt-network-posts {
    max-height: 60vh;
  }
}

.pt-status-repaid {
  background-color: rgba(23, 199, 132, 0.14);
  color: #0b6b47;
}

.pt-status-rejected {
  background-color: rgba(240, 70, 92, 0.12);
  color: #8a1626;
}

/* ---------- chat message bubbles ---------- */
.chat-row {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}

.chat-row-mine {
  flex-direction: row-reverse;
}

.chat-bubble {
  background: var(--sky-100);
  border-radius: 14px;
  border-bottom-left-radius: 4px;
  padding: 0.5rem 0.75rem;
  max-width: 75%;
}

.chat-row-mine .chat-bubble {
  background: var(--blue-700);
  color: var(--white);
  border-radius: 14px;
  border-bottom-right-radius: 4px;
}

.chat-row-mine .chat-bubble .text-muted {
  color: rgba(255, 255, 255, 0.75) !important;
}

.chat-row-mine .chat-bubble a {
  color: var(--white);
  text-decoration: underline;
}

/* ---------- chat message actions: hover affordance ---------- */
.chat-bubble:hover {
  filter: brightness(0.97);
}

/* ---------- context menu ---------- */
.chat-context-menu {
  position: fixed;
  z-index: 1080;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 10px 30px -8px rgba(10, 27, 61, 0.35);
  padding: 0.35rem;
  min-width: 160px;
}

.chat-context-menu-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  border: none;
  background: none;
  text-align: left;
  padding: 0.45rem 0.6rem;
  border-radius: 6px;
  font-size: 0.9rem;
  color: var(--ink-700);
}

.chat-context-menu-item:hover {
  background: var(--sky-100);
}

.chat-context-menu-item-danger {
  color: var(--loss);
}

/* ---------- in-place edit ---------- */
.chat-edit-textarea {
  width: 100%;
  border-radius: 8px;
  border: 1px solid var(--line);
  padding: 0.4rem 0.5rem;
  font: inherit;
  resize: vertical;
}

.chat-edit-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.35rem;
}

/* ---------- delete confirm ---------- */
.chat-confirm-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(5, 15, 36, 0.35);
  z-index: 1090;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat-confirm-box {
  background: var(--white);
  border-radius: var(--radius);
  padding: 1.25rem;
  max-width: 320px;
  box-shadow: 0 20px 50px -12px rgba(10, 27, 61, 0.45);
}

.chat-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 1rem;
}

/* ---------- reply ---------- */
.chat-reply-quote {
  font-size: 0.8rem;
  padding: 0.3rem 0.5rem;
  margin-bottom: 0.35rem;
  border-left: 3px solid var(--blue-600);
  background: rgba(255, 255, 255, 0.6);
  border-radius: 4px;
  cursor: pointer;
}

.chat-row-mine .chat-reply-quote {
  border-left-color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.12);
}

.chat-row-highlight {
  animation: chat-row-flash 1.2s ease;
}

@keyframes chat-row-flash {
  0% { background-color: rgba(244, 185, 66, 0.35); }
  100% { background-color: transparent; }
}

.chat-reply-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  background: var(--sky-100);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.5rem;
  font-size: 0.85rem;
}

/* ---------- reactions ---------- */
.chat-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.35rem;
}

.chat-reaction-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  background: var(--sky-100);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
  font-size: 0.78rem;
  cursor: pointer;
  color: var(--ink-700);
}

.chat-row-mine .chat-reaction-pill {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.3);
  color: var(--white);
}

.chat-reaction-pill-mine {
  border-color: var(--blue-600);
  font-weight: 600;
}

.chat-reaction-quickbar {
  position: fixed;
  z-index: 1080;
  display: flex;
  gap: 0.25rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.3rem 0.5rem;
  box-shadow: 0 10px 30px -8px rgba(10, 27, 61, 0.35);
}

.chat-reaction-quickbar-emoji {
  border: none;
  background: none;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0.15rem;
  border-radius: 6px;
  cursor: pointer;
}

.chat-reaction-quickbar-emoji:hover {
  background: var(--sky-100);
}

/* ---------- read receipts + typing ---------- */
.chat-read-receipt {
  font-size: 0.72rem;
  color: var(--ink-500);
  margin-top: 0.2rem;
  text-align: right;
}

.chat-row-mine .chat-read-receipt {
  color: rgba(255, 255, 255, 0.75);
}

.chat-typing-indicator {
  font-size: 0.82rem;
  color: var(--ink-500);
  font-style: italic;
  margin-bottom: 0.5rem;
  min-height: 1.1rem;
}

/* ---------- presence dot + avatar/profile links ---------- */
.pt-avatar-wrap {
  position: relative;
  display: inline-block;
}

.pt-avatar-link {
  display: inline-block;
  color: inherit;
  text-decoration: none;
}

.pt-presence-dot {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--white);
}

.pt-presence-dot-online {
  background-color: var(--gain);
}

.pt-presence-dot-away {
  background-color: var(--gold-500);
}

.pt-presence-dot-offline {
  display: none;
}

/* ---------- chat sender name / chat index links to profile ---------- */
.chat-sender-link {
  color: inherit;
  text-decoration: none;
}

.chat-sender-link:hover {
  text-decoration: underline;
}

.chat-row-mine .chat-bubble .chat-sender-link {
  color: var(--white);
}

.pt-chat-index-link {
  color: inherit;
  text-decoration: none;
}

.pt-chat-index-link:hover {
  text-decoration: underline;
}

/* ---------- Groups page investment cards (photo/badge style) ---------- */
/* Copied and adapted from Home.css's .group-card family (landing page),
   scoped to a 2-column grid for the narrower col-lg-8 column on /Groups.
   Renamed to avoid colliding with .group-card (Home.css, 3-column layout)
   and the existing .pt-group-card header-bar class this replaces here. */
.pt-groups-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px;
}

.pt-group-media-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .35s ease, box-shadow .35s ease;
  display: flex;
  flex-direction: column;
}

.pt-group-media-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow);
}

.pt-group-media {
  position: relative;
  height: 190px;
  overflow: hidden;
}

.pt-group-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}

.pt-group-media-card:hover .pt-group-media img {
  transform: scale(1.09);
}

.pt-group-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(5,15,36,.75);
  backdrop-filter: blur(4px);
  color: var(--gain);
  font-family: 'JetBrains Mono';
  font-size: 11.5px;
  padding: 5px 10px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.pt-group-card-body {
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.pt-group-card-body h4 {
  font-size: 18.5px;
  margin-bottom: 8px;
}

.pt-group-card-body p {
  font-size: 14px;
  color: var(--ink-500);
  margin-bottom: 14px;
}

.pt-group-card-body p.small {
  font-size: 12.5px;
}

.pt-group-card-body .pt-group-card-action {
  margin-top: auto;
}

@media (max-width: 767.98px) {
  .pt-groups-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- PoolRide live tracking ---------- */
.pt-ride-map {
  height: 360px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
}

.pt-ride-track-status {
  font-size: 0.85rem;
  color: var(--ink-500);
  min-height: 1.2em;
  margin-bottom: 0.5rem;
}

/* ---------- scrollable long lists (queues, activity feeds, logs) ----------
   Any list/table whose length grows with usage (an admin review queue, a
   user's activity/payment history, a chat conversation list) must not be
   allowed to grow the page indefinitely — a long one pushes the footer far
   below the fold and leaves almost no breathing room between the last row
   and the footer band. Capping the panel's height and scrolling internally
   keeps the page height stable regardless of how much data it holds. Values
   mirror .pt-network-posts, this codebase's original instance of this
   pattern (Groups/Index's Business Network panel). */
.pt-scroll-panel {
  overflow-y: auto;
}

@media (min-width: 992px) {
  .pt-scroll-panel {
    max-height: calc(100vh - 280px);
  }
}

@media (max-width: 991.98px) {
  .pt-scroll-panel {
    max-height: 60vh;
  }
}

/* A <table>'s own <thead> would otherwise scroll out of view with the rest
   of the table body inside a .pt-scroll-panel — pin it so column headers
   stay visible while the rows scroll underneath. */
.pt-scroll-panel table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: var(--white);
}

/* ---------- My Account: wallet & activity ---------- */
.pt-wallet-card h3 {
  color: var(--blue-700);
}

.pt-account-activity .list-group-item {
  border-left: none;
  border-right: none;
}

.pt-account-activity .list-group-item:first-child {
  border-top: none;
}