/* ============================================================
   PNB CRM — Redesign 2 (STAGING): maturity + motion layer.
   Loads after redesign.css. Design tokens, softer depth,
   spring motion system, premium chrome and cards.
   ============================================================ */
:root {
  --r2-bg: #EBF1F7;
  --r2-card: #FFFFFF;
  --r2-line: #DFE9F2;
  --r2-ink: #14273F;
  --r2-body: #3C526B;
  --r2-mut: #7D93A9;
  --r2-brand: #0E80D2;
  --r2-brand-deep: #0A63A8;
  --r2-tint: #E9F4FC;
  --r2-radius: 20px;
  --r2-sh: 0 1px 2px rgba(18, 45, 80, .05), 0 12px 32px -14px rgba(18, 45, 80, .14);
  --r2-sh-sm: 0 1px 2px rgba(18, 45, 80, .05), 0 6px 18px -8px rgba(18, 45, 80, .12);
  --r2-spring: cubic-bezier(.22, 1.24, .36, 1);
  --r2-out: cubic-bezier(.16, 1, .3, 1);
}

html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body { background: var(--r2-bg); color: var(--r2-body); }
.main-area {
  background:
    radial-gradient(120% 340px at 50% -80px, rgba(14, 128, 210, .10), rgba(14, 128, 210, 0) 70%),
    var(--r2-bg);
}

/* ---------- Chrome: top bar + drawer ---------- */
.topbar {
  background: linear-gradient(120deg, #0A5CA6 0%, #0E80D2 52%, #1B9AE0 100%);
  box-shadow: 0 10px 28px -12px rgba(10, 92, 166, .55), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.sidebar {
  background: linear-gradient(180deg, #FFFFFF 0%, #F7FBFE 100%);
  box-shadow: 24px 0 48px -24px rgba(18, 45, 80, .25);
}
.nav-item {
  border-radius: 14px;
  margin: 2px 10px;
  transition: background .25s var(--r2-out), color .25s var(--r2-out), transform .15s var(--r2-out);
}
.nav-item:active { transform: scale(.98); }
.nav-item.active {
  background: var(--r2-tint);
  color: var(--r2-brand-deep);
  box-shadow: inset 3px 0 0 var(--r2-brand);
}
.nav-item .nav-icon { transition: transform .3s var(--r2-spring); }
.nav-item.active .nav-icon { transform: scale(1.08); }
.icon-button { transition: transform .15s var(--r2-out), background .2s; }
.icon-button:active { transform: scale(.92); }
.notification-count { box-shadow: 0 0 0 2px rgba(255, 255, 255, .35); }

/* ---------- Type + headings ---------- */
.main-area h1, .main-area .page-title { color: var(--r2-ink); letter-spacing: -.01em; }
.panel-heading, .main-area h2 { color: var(--r2-ink); }

/* ---------- Cards & panels ---------- */
.panel, .metric-card, .inst-panel, .kanban-column {
  background: var(--r2-card);
  border: 1px solid var(--r2-line);
  border-radius: var(--r2-radius);
  box-shadow: var(--r2-sh-sm);
}
.metric-card { transition: transform .2s var(--r2-out), box-shadow .25s var(--r2-out); }
.metric-card:active { transform: scale(.97); box-shadow: var(--r2-sh); }
.metric-icon {
  border-radius: 12px;
  background: linear-gradient(135deg, var(--r2-tint), #D8EDFB);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
}

/* ---------- Buttons & inputs ---------- */
.btn, button.primary, .primary.btn {
  border-radius: 14px;
  transition: transform .15s var(--r2-out), box-shadow .25s var(--r2-out), background .2s, filter .2s;
}
.btn.primary, button.primary, .primary {
  background: linear-gradient(135deg, #1293E8, var(--r2-brand) 55%, var(--r2-brand-deep));
  box-shadow: 0 8px 20px -8px rgba(14, 128, 210, .55), inset 0 1px 0 rgba(255, 255, 255, .28);
}
.btn:active, button.primary:active, .primary:active { transform: scale(.965); }
input, select, textarea {
  border-radius: 12px;
  border-color: #D7E3EE;
  background: #F8FBFD;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--r2-brand);
  background: #FFFFFF;
  box-shadow: 0 0 0 4px rgba(14, 128, 210, .14);
  outline: none;
}
.text-link { color: var(--r2-brand-deep); font-weight: 600; }

/* ---------- Home calendar ---------- */
.home-cal-day { animation: r2-cal-in .45s var(--r2-out) both; }
@keyframes r2-cal-in { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: scale(1); } }
.home-cal-num { transition: transform .25s var(--r2-spring), box-shadow .25s; }
.home-cal-day.selected .home-cal-num { animation: r2-pop .38s var(--r2-spring); }
@keyframes r2-pop { 0% { transform: scale(.86); } 55% { transform: scale(1.1); } 100% { transform: scale(1); } }
.home-cal-count { font-weight: 700; }

/* ---------- Activity rows ---------- */
.activity-row, .phase-calendar-item {
  background: #FFFFFF;
  border: 1px solid var(--r2-line);
  border-left: 4px solid var(--activity-color, var(--r2-brand));
  border-radius: 16px;
  box-shadow: var(--r2-sh-sm);
  transition: transform .18s var(--r2-out), box-shadow .25s var(--r2-out), opacity .3s;
}
.activity-row:active, .phase-calendar-item:active { transform: scale(.985); }
.activity-check {
  transition: transform .25s var(--r2-spring), background .25s, border-color .25s, box-shadow .25s;
}
.activity-row.done .activity-check, .phase-calendar-item.done .activity-check {
  animation: r2-check-pop .45s var(--r2-spring);
}
@keyframes r2-check-pop { 0% { transform: scale(.6); } 55% { transform: scale(1.22); } 100% { transform: scale(1); } }
.activity-row.done .activity-copy, .phase-calendar-item.done .activity-copy { opacity: .55; }
.activity-type { border-radius: 12px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); }

/* ---------- Pipeline ---------- */
.kanban-column { background: linear-gradient(180deg, #F4F8FC, #EDF3F9); border-radius: 18px; }
.deal-card, .pdeal {
  background: #FFFFFF;
  border: 1px solid var(--r2-line);
  border-radius: 16px;
  box-shadow: var(--r2-sh-sm);
  transition: transform .18s var(--r2-out), box-shadow .25s var(--r2-out);
}
.deal-card:active, .pdeal:active { transform: scale(.98); box-shadow: var(--r2-sh); }
.pdeal-value { color: var(--r2-ink); letter-spacing: -.01em; }
.pdeal-next {
  border-radius: 11px;
  background: var(--r2-tint);
  color: var(--r2-brand-deep);
  font-weight: 700;
  transition: background .2s, transform .15s var(--r2-out);
}
.pdeal-next:active { transform: scale(.96); background: #D6EBFA; }
.source-chip, .age-chip { border-radius: 999px; font-weight: 600; }
.funnel-seg { animation: r2-funnel-in .7s var(--r2-out) both; }
.funnel-seg:nth-child(2) { animation-delay: .06s; } .funnel-seg:nth-child(3) { animation-delay: .12s; }
.funnel-seg:nth-child(4) { animation-delay: .18s; } .funnel-seg:nth-child(5) { animation-delay: .24s; }
.funnel-seg:nth-child(6) { animation-delay: .3s; }
@keyframes r2-funnel-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- People / team / lists ---------- */
.person-cell {
  background: #FFFFFF;
  border: 1px solid var(--r2-line);
  border-radius: 16px;
  box-shadow: var(--r2-sh-sm);
  transition: transform .18s var(--r2-out);
}
.person-cell:active { transform: scale(.985); }
.avatar { box-shadow: inset 0 0 0 1px rgba(18, 45, 80, .06), 0 2px 6px rgba(18, 45, 80, .10); }
.compact-deal {
  border-radius: 14px;
  transition: background .2s, transform .15s var(--r2-out);
}
.compact-deal:active { transform: scale(.98); background: var(--r2-tint); }
.notification-item { transition: background .2s; }
.notification-item:active { background: var(--r2-tint); }

/* ---------- Sheets, modals, toasts ---------- */
.modal-backdrop { animation: r2-fade .28s var(--r2-out) both; }
@keyframes r2-fade { from { opacity: 0; } to { opacity: 1; } }
.modal-card {
  border-radius: 26px 26px 0 0;
  box-shadow: 0 -18px 50px -12px rgba(10, 35, 66, .35);
  animation: r2-sheet-in .52s var(--r2-spring) both;
}
@keyframes r2-sheet-in { from { transform: translateY(56px); opacity: .4; } to { transform: translateY(0); opacity: 1; } }
.modal-card::before {
  content: ""; display: block; width: 44px; height: 5px; border-radius: 99px;
  background: #D5E1EC; margin: 10px auto 2px;
}
.modal-close { transition: transform .2s var(--r2-spring), background .2s; }
.modal-close:active { transform: scale(.9) rotate(90deg); }
.toast {
  border-radius: 14px;
  box-shadow: 0 16px 36px -12px rgba(10, 35, 66, .45);
  animation: r2-toast-in .45s var(--r2-spring) both;
}
@keyframes r2-toast-in { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: none; } }

/* ---------- Reveal-on-render (motion.js adds .rv, then .in) ---------- */
.rv { opacity: 0; transform: translateY(16px) scale(.992); }
.rv.in {
  opacity: 1; transform: none;
  transition: opacity .55s var(--r2-out), transform .6s var(--r2-spring);
  transition-delay: calc(var(--i, 0) * 45ms);
}

/* ---------- Skeleton shimmer utility ---------- */
.r2-skel {
  border-radius: 12px;
  background: linear-gradient(100deg, #E7EEF5 40%, #F4F8FB 50%, #E7EEF5 60%);
  background-size: 200% 100%;
  animation: r2-shimmer 1.3s linear infinite;
}
@keyframes r2-shimmer { from { background-position: 120% 0; } to { background-position: -80% 0; } }

/* ---------- Focus visibility ---------- */
:focus-visible { outline: 3px solid rgba(14, 128, 210, .45); outline-offset: 2px; border-radius: 8px; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; transition-duration: .001s !important; }
  .rv { opacity: 1; transform: none; }
}

/* ---------- r2b: specificity fixes + stronger moves ---------- */
.activities-phase .phase-calendar-item {
  background: #FFFFFF;
  border: 1px solid var(--r2-line);
  border-left: 4px solid var(--activity-color, var(--r2-brand));
  border-radius: 12px;
  padding: 7px 9px;
  box-shadow: var(--r2-sh-sm);
}
.activities-phase .phase-calendar-item .activity-attribution { color: var(--r2-mut); }
.activities-phase .phase-activity {
  border-radius: 14px;
  border-left: 4px solid var(--activity-color, #B9C5D8);
  box-shadow: var(--r2-sh-sm);
}
.activities-phase .phase-calendar {
  border: 1px solid var(--r2-line);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--r2-sh-sm);
}
.activities-phase .phase-view-switch {
  border-radius: 999px; background: #E6EEF5; border-color: transparent; padding: 4px;
}
.activities-phase .phase-view-switch button { border-radius: 999px; }
.activities-phase .phase-view-switch button[aria-pressed="true"] {
  background: #FFFFFF; color: var(--r2-brand-deep);
  box-shadow: 0 2px 8px rgba(18, 45, 80, .16);
}
.activities-phase .phase-day.today > b { background: var(--r2-brand); color: #FFFFFF; box-shadow: 0 4px 10px -4px rgba(14, 128, 210, .6); }
.phase-calendar-item.is-done .activity-check, .phase-activity.is-done .activity-check {
  animation: r2-check-pop .45s var(--r2-spring);
}
.pipe-hero {
  border-radius: 24px;
  background:
    radial-gradient(560px 220px at 88% -30px, rgba(255, 196, 64, .30), rgba(255, 196, 64, 0) 60%),
    linear-gradient(130deg, #08203E 0%, #0B3D73 48%, #0E6FB8 100%);
  box-shadow: 0 24px 44px -18px rgba(8, 32, 62, .5), inset 0 1px 0 rgba(255, 255, 255, .18);
}
.pipe-hero-main { font-weight: 800; letter-spacing: -.015em; }
.kanban-column { background: #FCFDFE; }
.home-cal-day.has-open .home-cal-num {
  box-shadow: 0 6px 14px -6px rgba(18, 45, 80, .5), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.home-day-sec {
  background: #F5F9FC; border: 1px solid var(--r2-line);
  border-radius: 16px; padding: 12px; margin-top: 12px;
}
.main-area .panel { padding: 20px; }