/* ══════════════════════════════════════════════════════════════
   BORROWER PORTAL — SHARED STYLES
   Common patterns used across multiple borrower dashboard pages.
   Loaded AFTER components.css, BEFORE page-specific CSS.
   ══════════════════════════════════════════════════════════════ */


/* ── PAGE HEADER PATTERN ──
   Used by: tracker, application, notifications, offers,
            documents, account, dashboard, messages
   ─────────────────────────────────────────────────────── */

/* Container */
.trk-header,
.notif-header,
.ldr-header,
.docs-header,
.acct-header { margin-bottom: var(--s6); }

.ap-header { margin-bottom: var(--s7); }

.db-greeting { margin-bottom: var(--s8); position: relative; z-index: 100; }

/* Inner flex wrapper */
.trk-header__inner,
.ap-header,
.notif-header__inner,
.ldr-header__inner,
.docs-header__inner,
.acct-header__inner,
.db-greeting__inner {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s6); flex-wrap: wrap;
}
.trk-header__inner { align-items: flex-start; gap: var(--s5); }
.ap-header { gap: var(--s4); }

/* Eyebrow */
.trk-header__eyebrow,
.ap-header__eyebrow,
.notif-header__eyebrow,
.ldr-header__eyebrow,
.docs-header__eyebrow,
.acct-header__eyebrow,
.db-greeting__hi {
  font-size: var(--t-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: var(--text-m); margin-bottom: var(--s2);
}
.trk-header__eyebrow { letter-spacing: .12em; color: var(--blue); }

/* Title */
.trk-header__title,
.ap-header__title,
.notif-header__title,
.ldr-header__title,
.docs-header__title,
.acct-header__title,
.db-greeting__name {
  font-family: var(--font-d); font-weight: 700; color: var(--ink);
  letter-spacing: -0.025em; line-height: 1.1;
  font-size: clamp(var(--t-2xl), 4vw, var(--t-4xl));
}
.trk-header__title {
  font-size: var(--t-4xl); letter-spacing: -0.02em; margin-bottom: var(--s2);
}
.ap-header__title { font-size: clamp(var(--t-2xl), 3vw, var(--t-4xl)); }

/* Title emphasis */
.trk-header__title em,
.ap-header__title em,
.notif-header__title em,
.ldr-header__title em,
.docs-header__title em,
.acct-header__title em,
.db-greeting__name em { color: var(--blue); font-style: italic; }

/* Subtitle */
.trk-header__sub,
.ap-header__sub,
.notif-header__sub,
.ldr-header__sub,
.docs-header__sub,
.acct-header__sub {
  font-size: var(--t-sm); color: var(--text-m); margin-top: var(--s2);
}
.trk-header__sub { font-size: var(--t-md); color: var(--text-s); line-height: 1.6; max-width: 600px; }
.ldr-header__sub { line-height: 1.6; }
.notif-header__sub { color: var(--text-m); }

/* Header actions area */
.ap-header__right,
.notif-header__actions,
.ldr-header__actions,
.docs-header__actions,
.acct-header__actions { display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; }

/* Dashboard subtitle (variant) */
.db-greeting__ref {
  font-size: var(--t-sm); color: var(--text-m); margin-top: var(--s2);
  display: flex; align-items: center; gap: var(--s3);
}


/* ── STATUS BADGES ──
   Used by: tracker, application
   ─────────────────────────────────────────────────────── */

.tl-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 700;
  padding: 3px 9px; border-radius: var(--r-pill);
  letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
}
.tl-badge__dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.tl-badge.green  { background: rgba(22,163,74,.1);   color: var(--ok); }
.tl-badge.green  .tl-badge__dot  { background: var(--ok); }
.tl-badge.amber  { background: rgba(217,119,6,.1);   color: var(--amber); }
.tl-badge.amber  .tl-badge__dot  { background: var(--amber); }
.tl-badge.red    { background: rgba(220,38,38,.08);  color: var(--fail); }
.tl-badge.red    .tl-badge__dot  { background: var(--fail); }
.tl-badge.blue   { background: rgba(199,37,235,.1);  color: var(--blue); }
.tl-badge.blue   .tl-badge__dot  { background: var(--blue); }
.tl-badge.grey   { background: var(--off);           color: var(--text-m); }
.tl-badge.grey   .tl-badge__dot  { background: var(--border-hi, #cbd5e1); }


/* ── PANEL / CARD CONTAINER ──
   Used by: dashboard, documents
   ─────────────────────────────────────────────────────── */

.panel {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--r-2xl); overflow: hidden;
}
.panel__head {
  padding: var(--s5) var(--s6);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.panel__title {
  font-family: var(--font-d); font-size: var(--t-xl); font-weight: 700;
  color: var(--ink); letter-spacing: -0.01em;
}
.panel__body  { padding: var(--s6); }
.panel__body--flush { padding: 0; }


/* ── SHARED KEYFRAME ANIMATIONS ──
   ─────────────────────────────────────────────────────── */

@keyframes pulseAmber {
  0%, 100% { box-shadow: 0 0 0 0 rgba(217,119,6,.4); }
  50% { box-shadow: 0 0 0 4px rgba(217,119,6,0); }
}
@keyframes pulseRed {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220,38,38,.4); }
  50% { box-shadow: 0 0 0 4px rgba(220,38,38,0); }
}
@keyframes urgentPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .5; transform: scale(1.3); }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — Borrower Portal
══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .ap-header { flex-direction: column; align-items: flex-start; gap: 8px; }
  .ap-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .ap-header { padding: 16px; }
  .ap-header__title { font-size: 1.3rem; }
  .ap-stats { grid-template-columns: 1fr 1fr; gap: 8px; }
  .ap-stat { padding: 12px; }
  .ap-stat__val { font-size: 22px; }
  .ap-panel { padding: 16px; border-radius: 12px; }
  .ap-panel__title { font-size: 15px; }
}
@media (max-width: 400px) {
  .ap-stats { grid-template-columns: 1fr; }
  .ap-stat__icon { display: none; }
}
.fade-up { animation: fadeUp .4s cubic-bezier(.4,0,.2,1) both; }