/* Dashboard hero image inside the dark card */
/* .card-hero { overflow: visible; height: 250px; } */
.card-hero .dropdown-menu { z-index: 2000; }
.card-hero .card-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* fill the card */
  opacity: 1; /* fully clear image */
  pointer-events: none;
  user-select: none;
  filter: none;
  z-index: -1; /* keep behind content */
}
@media (max-width: 576px) {
  .card-hero .card-hero-img { inset: 0; width: 100%; height: 100%; object-fit: cover; }
}

/* Simple card-as-button hover */
.card-hero { position: relative; transition: background-color .15s ease, box-shadow .15s ease; overflow: visible; z-index: 1; /* sit above adjacent cards */ }
/* When a dropdown is open, raise the whole card above neighbors */
.card-hero:has(.dropdown-menu.show) { z-index: 1025; }
.card-hero:hover { background-color: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.25); }

/* Ensure image respects card rounding without clipping dropdowns */
.card-hero .card-hero-img { border-radius: inherit; }

/* Keep dashboard hero card visible when scrolling content */
.card-hero--sticky {
  position: sticky;
  top: 8px;
}

.card-commission--fixed {
  position: sticky;
  top: 213px;
}
.guide-scroll {
  max-height: 64vh;
  overflow-y: scroll; /* always show vertical scroll bar */
  overscroll-behavior: contain;
}

.commission-table-scroll {
  height: var(--commission-table-max-height, 58vh);
  max-height: 57.5vh;
  min-height: 320px;
  overflow-y: scroll; /* always show vertical scroll bar */
  overscroll-behavior: contain;
}

.commission-table-scroll table {
  margin-bottom: 0;
}

.commission-table-scroll thead th {
  position: sticky;
  top: 0;
  z-index: 5;
  background-color: #f8f9fa;
}


/* Profile summary card hover: bg-light + text-dark */
#profileMenuCard { transition: background-color .15s ease, color .15s ease; }
#profileMenuCard:hover {
  background-color: var(--bs-primary, #3803f8) !important;
  color: var(--bs-light, #ffffff) !important;
}
#profileMenuCard:hover * { color: var(--bs-light, #ffffff) !important; }

/* Profile dropdown card: subtle emoji background image */
#profileMenuCard {
  background-image: url('../img/emoji2.png');
  background-repeat: no-repeat;
  background-size: 70px auto;        /* roughly matches <img height=100px> */
  background-position: right 0px bottom 60px; /* keep it out of the text */
}

:root{
    --ttk-navy:#0B1C36;      /* trust */
    --ttk-teal:#00BFA6;      /* growth */
    --ttk-ink:#111827;       /* headings */
    --ttk-slate:#6B7280;     /* secondary text */
    --ttk-bg:#F3F5F7;        /* light bg */
    --dashboard-sticky-offset: 8rem; /* gap below header for fixed cards */
    --commission-table-max-height: calc(100vh - 18rem); /* keep table scrollable but visible */
}

.bg-paid {background-color:#10f31f;}

/* Hero */
.hero{
  position:relative;
  background: radial-gradient(1200px 600px at 10% -20%, rgba(0,191,166,.18), transparent 50%),
              radial-gradient(1000px 600px at 110% 0%, rgba(11,28,54,.22), transparent 35%),
              linear-gradient(180deg, #ffffff 0%, #f7fafc 100%);
  overflow:hidden;
}
.hero .brand-badge{
  font-weight:700; letter-spacing:.4px; color:var(--ttk-navy);
}
.hero h1{
  font-weight:800; color:var(--ttk-ink);
}
.hero .lead{
  color:var(--ttk-slate);
}
.btn-ttk{
  --bs-btn-bg: var(--ttk-teal);
  --bs-btn-border-color: var(--ttk-teal);
  --bs-btn-hover-bg: #07a792;
  --bs-btn-hover-border-color:#07a792;
  --bs-btn-focus-shadow-rgb: 0,191,166;
  color:#041316;
  font-weight:600;
}
.trust-logos img{ filter: grayscale(100%); opacity:.75; height:28px; }
.tagline-chip{
  display:inline-block; border-radius:999px; padding:.4rem .75rem; font-size:.85rem; 
  background:#E6FFFA; color:#065F46; border:1px solid rgba(0,191,166,.35);
}
.hero-card{
  background:#fff; border:1px solid #e8edf3; box-shadow: 0 10px 25px rgba(17,24,39,.07);
}

/* Guided input steps in Add Commission modal */
.step-badge {
  display:inline-block; min-width:1.25em; padding:0 .35em; margin-right:.35rem;
  border-radius:999px; font-size:.75em; font-weight:700; line-height:1.4;
  color:#0B1C36; background:#B2D8CE; border:1px solid rgba(0,0,0,.08);
}
.step-field {
  position:relative; transition: box-shadow .15s ease, border-color .15s ease, background-color .15s ease;
  border:1px dashed transparent; border-radius:.25rem; padding:.25rem .35rem;
}
.step-field.current {
  border-color: var(--ttk-teal, #00BFA6);
  box-shadow: 0 0 0 2px rgba(0,191,166,.2);
  background: rgba(0,191,166,.06);
}

/* Highlight for Save button when it is part of guided flow */
button.step-save-current {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(0,191,166,.35);
}
/* Make active buttons use your brand teal */
.nav-item.active { background-color: var(--ttk-teal); border-color: var(--ttk-teal); }

/* Ensure outline variant is consistent */
.btn-outline-secondary { border-color: #ced4da; }