/* Puente AI Design System */
/* Shared across all portal sections */

/* Utility: hide elements via JS classList toggle */
.hidden {
  display: none !important;
}
.ml-auto {
  margin-left: auto;
}

/* ============================================
   CSS Custom Properties (Design Tokens)
   ============================================ */

/* Hex fallbacks for browsers without OKLCH support (Chrome <111, Safari <15.4, Firefox <113).
   Target browsers (Chrome 111+, Safari 15.4+, Firefox 113+) all support OKLCH natively.
   The @supports block below overrides with OKLCH values when supported. */
:root {
  /* Primary Colors */
  --puente-blue: #0069e3;
  --puente-blue-light: #63a4fa;
  --puente-blue-dark: #0059c4;
  --puente-navy: #1c3a5f;
  --puente-sapphire: #1a4eab;
  --puente-sapphire-dark: #153d87;

  /* Accent Colors */
  --puente-sky: #daeafe;
  --puente-warm: #f59e0a;
  --puente-success: #0ab982;
  --puente-danger: #ef4445;
  --puente-purple: #8c5cf6;
  --puente-pink: #ec489a;
  --puente-orange: #ea580c;

  /* Backgrounds */
  --bg-white: #FFFFFF;
  --bg-off-white: #fbf9f6;
  --bg-card: #f6f8ff;
  --bg-gray: #f7f3ee;
  --bg-dark: #0d172a;
  --bg-dark-card: #1d2735;

  /* Text */
  --text-dark: #111825;
  --text-muted: #6a737f;
  --text-light: #899099;
  --text-white: #f1f5f9;

  /* Stage Colors */
  --stage-prospects: #0069e3;
  --stage-contacted: #f59e0a;
  --stage-meeting: #8c5cf6;
  --stage-proposal: #ec489a;
  --stage-won: #0ab982;

  /* Priority Colors */
  --priority-high: #ef4445;
  --priority-medium: #f59e0a;
  --priority-low: #0ab982;

  /* Opacity tints */
  --tint-navy-5: rgba(27, 58, 94, 0.05);
  --tint-navy-10: rgba(27, 58, 94, 0.10);
  --tint-navy-20: rgba(27, 58, 94, 0.20);
  --tint-sky-5: rgba(218, 234, 254, 0.50);
  --tint-danger-5: rgba(239, 68, 68, 0.08);  /* danger hover surface */
}

/* OKLCH overrides — Chrome 111+, Safari 15.4+, Firefox 113+ */
@supports (color: oklch(0 0 0)) {
:root {
  /* ==============================================
     OKLCH Color System (2026-03-29)
     Primary hue: 258 (warm azure), shifted from 263 (cold blue-violet)
     Backgrounds: warm cream (hue 70), low chroma
     Text: navy-tinted grays (hue 256-260)
     All OKLCH values are source of truth; hex fallbacks above for compatibility.
     ============================================== */

  /* Primary Colors — warm azure (hue 258) */
  --puente-blue: oklch(0.546 0.215 258);         /* #0069e3 */
  --puente-blue-light: oklch(0.714 0.143 256);   /* #63a4fa */
  --puente-blue-dark: oklch(0.488 0.217 258);    /* #0059c4 */
  --puente-navy: oklch(0.346 0.074 254);         /* #1c3a5f */
  --puente-sapphire: oklch(0.450 0.160 256);     /* #1a4eab — primary CTA */
  --puente-sapphire-dark: oklch(0.390 0.160 256); /* — CTA hover */

  /* Accent Colors */
  --puente-sky: oklch(0.932 0.032 254);          /* #daeafe */
  --puente-warm: oklch(0.769 0.165 70);          /* #f59e0a */
  --puente-success: oklch(0.696 0.149 163);      /* #0ab982 */
  --puente-danger: oklch(0.637 0.208 25);        /* #ef4445 */
  --puente-purple: oklch(0.606 0.219 293);       /* #8c5cf6 */
  --puente-pink: oklch(0.656 0.212 354);         /* #ec489a */
  --puente-orange: oklch(0.602 0.194 38);        /* #ea580c */

  /* Backgrounds — warm cream (hue 70) */
  --bg-off-white: oklch(0.982 0.005 70);         /* #fbf9f6 */
  --bg-card: oklch(0.988 0.008 254);             /* ~#f6f8ff — faint azure-white card surface */
  --bg-gray: oklch(0.965 0.007 70);              /* #f7f3ee */
  --bg-dark: oklch(0.208 0.040 262);             /* #0d172a */
  --bg-dark-card: oklch(0.270 0.030 258);        /* #1d2735 */

  /* Opacity tints — derived from new navy */
  --tint-navy-5: rgba(27, 58, 94, 0.05);
  --tint-navy-10: rgba(27, 58, 94, 0.10);
  --tint-navy-20: rgba(27, 58, 94, 0.20);
  --tint-sky-5: rgba(218, 234, 254, 0.50);
  --tint-danger-5: rgba(239, 68, 68, 0.08);   /* danger hover surface — sidebar logout, destructive hover */

  /* Text — navy-tinted grays (hue 256-260) */
  --text-dark: oklch(0.210 0.028 260);           /* #111825 */
  --text-muted: oklch(0.551 0.022 258);          /* #6a737f — 4.83:1 on white */
  --text-light: oklch(0.650 0.016 256);          /* #899099 — 3.07:1 on off-white (was #9CA3AF at 2.54:1) */
  --text-white: oklch(0.968 0.007 248);          /* #f1f5f9 */

  /* Stage Colors */
  --stage-prospects: oklch(0.546 0.215 258);     /* matches --puente-blue */
  --stage-contacted: oklch(0.769 0.165 70);      /* matches --puente-warm */
  --stage-meeting: oklch(0.606 0.219 293);       /* matches --puente-purple */
  --stage-proposal: oklch(0.656 0.212 354);      /* matches --puente-pink */
  --stage-won: oklch(0.696 0.149 163);           /* matches --puente-success */

  /* Priority Colors */
  --priority-high: oklch(0.637 0.208 25);        /* matches --puente-danger */
  --priority-medium: oklch(0.769 0.165 70);      /* matches --puente-warm */
  --priority-low: oklch(0.696 0.149 163);        /* matches --puente-success */
}
} /* end @supports oklch */

:root {
  /* Neo-Tactile Shadows (Claymorphism) — warm clay base */
  --shadow-sm: 8px 8px 16px rgba(193, 186, 180, 0.4), -8px -8px 16px rgba(255, 255, 255, 0.8);
  --shadow-md: 12px 12px 24px rgba(193, 186, 180, 0.45), -12px -12px 24px rgba(255, 255, 255, 0.9);
  --shadow-lg: 20px 20px 40px rgba(193, 186, 180, 0.5), -10px -10px 30px rgba(255, 255, 255, 1);
  --shadow-xl: 30px 30px 60px rgba(193, 186, 180, 0.55), -20px -20px 40px rgba(255, 255, 255, 1);
  --shadow-card-hover: 15px 15px 30px rgba(193, 186, 180, 0.6), -15px -15px 30px rgba(255, 255, 255, 1);
  --shadow-inset: inset 6px 6px 12px rgba(193, 186, 180, 0.5), inset -6px -6px 12px rgba(255, 255, 255, 0.8);
  --shadow-glass: 0 8px 32px 0 rgba(31, 38, 135, 0.07);

  /* Dark Mode Shadows */
  --shadow-dark-md: 10px 10px 20px rgba(0, 0, 0, 0.4), -5px -5px 15px rgba(255, 255, 255, 0.05);

  /* Border Radius */
  --radius-sm: 0.75rem;
  --radius-md: 1.25rem;
  --radius-lg: 1.75rem;
  --radius-xl: 2.25rem;
  --radius-2xl: 3rem;
  --radius-full: 9999px;

  /* Transitions — scoped by purpose
     Bouncy easing: ONLY for physical elements that move/scale (buttons, cards, toggles)
     Ease-out:      For visual property changes (color, opacity, border) and content transitions
     See design-rules.md for full mapping. */
  --transition-fast: 200ms cubic-bezier(0.25, 1, 0.5, 1);
  /* ease-out-quart — color, opacity, border changes */
  --transition-bounce: 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
  /* bouncy — interactive element transform/scale */
  --transition-normal: 350ms cubic-bezier(0.34, 1.56, 0.64, 1);
  /* bouncy — card hover, tab switch, panel expand */
  --transition-smooth: 500ms cubic-bezier(0.25, 1, 0.5, 1);
  /* ease-out-quart — large surfaces, ambient, background */
  --transition-enter: 300ms cubic-bezier(0.16, 1, 0.3, 1);
  /* ease-out-expo — content appearing (modal, toast, drawer) */
  --transition-exit: 200ms cubic-bezier(0.7, 0, 0.84, 0);
  /* ease-in — content leaving (faster than enter) */

  /* Spacing Scale (8pt base, 4pt fine-grain)
     Internal ≤ External rule: component padding (space-1..5) < section gaps (space-6..9)
     --space-1 to --space-3: micro/tight — icon gaps, inner component padding
     --space-4 to --space-5: base — card internal padding, grid gaps
     --space-6 to --space-7: layout — card margins, grouped separation
     --space-8 to --space-9: page — section vertical padding (mobile → desktop)
  */
  --space-1: 0.25rem;   /*  4px — micro: icon-to-label, badge padding */
  --space-2: 0.5rem;    /*  8px — tight: inner component padding, related sibling gap */
  --space-3: 0.75rem;   /* 12px — compact: form field inner, list item gap */
  --space-4: 1rem;      /* 16px — base: default card padding, standard spacing */
  --space-5: 1.5rem;    /* 24px — comfortable: card gap in grids, component separation */
  --space-6: 2rem;      /* 32px — section: card margin, grouped component separation */
  --space-7: 2.5rem;    /* 40px — spacious: large section gaps */
  --space-8: 3rem;      /* 48px — page: mobile section padding, hero spacing */
  --space-9: 4rem;      /* 64px — display: desktop section padding, hero vertical space */
}

/* ==============================================
   Dark Mode Token Overrides
   Dark mode is NOT inverted light mode.
   - Elevation via lighter surfaces, not shadows
   - Accents desaturated slightly
   - Text weight stays same (Satoshi variable handles it)
   ============================================== */

/* Anti-flash: html.dark-init sets background before body is ready */
html.dark-init {
  background: #0d172a;
  color-scheme: dark;
}

/* Hex fallbacks for dark mode — browsers without OKLCH support */
body.dark {
  --bg-white: #0d172a;
  --bg-off-white: #0f1c2e;
  --bg-card: #1c2735;
  --bg-gray: #162033;
  --bg-dark: #080f1c;
  --bg-dark-card: #1c2735;
  --text-dark: #ecf0f4;
  --text-muted: #94a2b0;
  --text-light: #6a7380;
  --puente-blue: #2d7de8;
  --puente-blue-light: #7ab4fb;
  --puente-sky: #1a2b40;
}

@supports (color: oklch(0 0 0)) {
body.dark {
  --bg-white: oklch(0.160 0.025 262);           /* #0d172a — deep navy, not pure black */
  --bg-off-white: oklch(0.195 0.030 260);       /* #0f1c2e — slightly elevated */
  --bg-card: oklch(0.270 0.030 258);            /* #1d2735 — elevated card surface */
  --bg-gray: oklch(0.230 0.025 258);            /* #162033 — card/surface base */
  --bg-dark: oklch(0.130 0.025 265);            /* #080f1c — deepest background */
  --bg-dark-card: oklch(0.260 0.022 258);       /* #1c2735 — elevated card */

  --text-dark: oklch(0.950 0.005 248);          /* #ecf0f4 — primary text on dark */
  --text-muted: oklch(0.700 0.015 255);         /* #94a2b0 — secondary text */
  --text-light: oklch(0.550 0.012 255);         /* #6a7380 — tertiary/disabled */

  /* Desaturate blue slightly in dark mode — vibrant blue on dark is harsh */
  --puente-blue: oklch(0.600 0.180 258);        /* lighter, less chroma */
  --puente-blue-light: oklch(0.750 0.120 256);
  --puente-sky: oklch(0.250 0.030 254);         /* dark tinted surface, not light blue */
}
} /* end @supports oklch dark mode */

body.dark {
  /* Shadows don't work for depth in dark mode — suppress */
  --shadow-sm: none;
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-inset: inset 0 2px 4px rgba(0, 0, 0, 0.3);

  /* Tints adjust for dark surfaces */
  --tint-navy-5: rgba(148, 163, 184, 0.05);
  --tint-navy-10: rgba(148, 163, 184, 0.10);
  --tint-navy-20: rgba(148, 163, 184, 0.15);

  color: var(--text-dark);
  background: var(--bg-white);
}

/* ============================================
   Reset & Base
   ============================================ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg-off-white);
  min-height: 100vh;
  color: var(--text-dark);
  line-height: 1.5;
  font-feature-settings: 'ss01' on; /* single-storey a and g — cleaner at small sizes */
}

a {
  color: inherit;
  text-decoration: none;
}

/* ============================================
   Typography
   Vertical rhythm: body 1rem × 1.5 = 24px baseline (3 × 8pt grid)
   ============================================ */
h1,
h2 {
  letter-spacing: -0.025em;
}

h1 { font-weight: 800; }
h2 { font-weight: 700; }
h3 { font-weight: 700; }

/* Tabular numbers for data alignment (KPIs, tables, stats) */
.tabular-nums { font-variant-numeric: tabular-nums; }

/* Landing/marketing fluid headlines (use class, not global) */
.fluid-h1 {
  font-size: clamp(2.25rem, 5vw + 1rem, 4rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 800;
}
.fluid-h2 {
  font-size: clamp(1.75rem, 3vw + 1rem, 3rem);
  line-height: 1.15;
  letter-spacing: -0.025em;
  font-weight: 700;
}

/* Overline / label — small caps with positive tracking */
.overline {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ============================================
   Accessibility: Reduced Motion
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Dark body background — handled by token override in body.dark above.
   Gradient adds visual depth beyond flat token value. */

/* ============================================
   Layout
   ============================================ */
.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0;
}

.container-padded {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

.container-narrow {
  max-width: 900px;
  margin: 0 auto;
}

.card-mt {
  margin-top: 1rem;
}

.section-label-mt {
  margin-top: var(--space-6);
}

/* ============================================
   Accessibility
   ============================================ */
.skip-nav {
  position: absolute;
  top: -100%;
  left: 16px;
  background: var(--puente-blue);
  color: white;
  padding: 8px 16px;
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: 0.85rem;
  z-index: 200;
  transition: top var(--transition-fast);
}

.skip-nav:focus {
  top: 16px;
}

:focus-visible {
  outline: 2px solid var(--puente-blue);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================
   Icons (Lucide)
   ============================================ */
.icon {
  width: 20px;
  height: 20px;
}

.icon-lg {
  width: 24px;
  height: 24px;
}

.icon-muted {
  color: var(--text-muted);
}

.icon-inline {
  vertical-align: middle;
}

.lucide {
  flex: 0 0 auto;
}

/* ============================================
   Nav Header (Dynamic Island / Floating Glass)
   ============================================ */
.nav-header {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: var(--shadow-md), 0 0 0 1px rgba(0, 0, 0, 0.03);
  padding: 12px 24px;
  position: sticky;
  top: 1rem;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  border-radius: var(--radius-2xl);
  max-width: 1200px;
  margin: 1rem auto 2rem;
}

.nav-header.dark {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* App-layout top bar: full-width, flush edges, no floating pill */
.nav-header--app {
  position: sticky;
  top: 0;
  margin: 0;
  border-radius: 0;
  max-width: none;
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: 1px solid var(--tint-navy-10);
  box-shadow: var(--shadow-sm);
  background: rgba(255, 255, 255, 0.95);
  z-index: 200;
}

.dark .nav-header--app {
  background: rgba(15, 23, 42, 0.95);
  border-bottom-color: var(--tint-navy-10);
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav-logo {
  display: flex;
  align-items: center;
  margin-right: 4px;
}

.nav-logo img {
  height: 28px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
}

.nav-brand-icon {
  font-size: 1.75rem;
}

.nav-back {
  display: flex;
  align-items: center;
  color: var(--text-muted);
  transition: color var(--transition-fast);
}

.nav-back:hover {
  color: var(--puente-blue);
}

.nav-back i {
  width: 20px;
  height: 20px;
}

.icon-nav {
  width: 20px;
  height: 20px;
  color: var(--text-muted);
}

.icon-footer {
  width: 18px;
  height: 18px;
}

.nav-brand h1 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--puente-navy);
}

body.dark .nav-brand h1 {
  color: var(--text-white);
}

.nav-subtitle {
  font-size: 0.75rem;
  color: var(--puente-blue);
  font-weight: 600;
  margin-top: 2px;
}

.nav-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.nav-breadcrumb a {
  color: var(--puente-blue);
  transition: opacity var(--transition-fast);
}

.nav-breadcrumb a:hover {
  opacity: 0.8;
}

.nav-breadcrumb .separator {
  color: var(--text-light);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Theme Toggle (Dark/Light Mode) */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: var(--radius-md);
  color: var(--text-muted);
  transition: background var(--transition-fast), color var(--transition-fast);
  flex-shrink: 0;
}

.theme-toggle:hover {
  background: var(--bg-gray);
  color: var(--text-dark);
}

.theme-toggle i {
  width: 18px;
  height: 18px;
}

body.dark .theme-toggle {
  color: var(--text-muted);
}

body.dark .theme-toggle:hover {
  background: var(--tint-navy-10);
  color: var(--text-dark);
}

/* Nav Toggle (Hamburger) */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  transition: background var(--transition-fast);
}

.nav-toggle:hover {
  background: var(--bg-gray);
}

.nav-toggle i {
  width: 24px;
  height: 24px;
  color: var(--text-dark);
}

body.dark .nav-toggle i {
  color: var(--text-white);
}

/* Nav Menu (collapsible container) */
.nav-menu {
  display: contents;
}

/* Nav Links (section navigation) */
.nav-links {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.nav-link {
  padding: 8px 16px;
  border-radius: var(--radius-full);
  font-size: 0.85rem;
  font-weight: 500;
  background: transparent;
  color: var(--text-dark);
  transition: color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-bounce);
}

.nav-link:hover {
  background: var(--bg-white);
  box-shadow: var(--shadow-sm);
  color: var(--puente-blue);
  transform: translateY(-1px);
}

.nav-link.active {
  background: var(--bg-white);
  box-shadow: var(--shadow-sm);
  color: var(--puente-blue);
  font-weight: 600;
}

body.dark .nav-link {
  background: rgba(148, 163, 184, 0.15);
  color: var(--text-white);
}

body.dark .nav-link:hover,
body.dark .nav-link.active {
  background: rgba(37, 99, 235, 0.25);
  color: var(--puente-blue-light);
}

/* ============================================
   Stats Bar
   ============================================ */
.stats-bar {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.stat {
  background: var(--puente-sky);
  padding: 12px 20px;
  border-radius: var(--radius-xl);
  text-align: center;
  min-width: 100px;
}


.stat-number {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--puente-blue);
  line-height: 1.2;
}

.stat-label {
  font-size: 0.75rem;
  color: var(--puente-navy);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

/* ============================================
   Cards Grid
   ============================================ */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}

.card {
  background: var(--bg-card);
  border: 2px solid var(--bg-white);
  border-radius: var(--radius-2xl);
  padding: 2rem;
  transition: background var(--transition-fast), border-color var(--transition-fast);
  box-shadow: var(--shadow-md);
  display: block;
}

body.dark .card {
  background: var(--bg-card);
  border-color: rgba(148, 163, 184, 0.1);
}


.card-icon {
  margin-bottom: 1.5rem;
  color: var(--puente-blue);
  background: var(--bg-white);
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-sm);
}

.card-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.card-description {
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

body.dark .card-description {
  color: var(--text-muted);
}

.card-badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 500;
  margin-top: 1rem;
}

/* Badge colors: light tint bg + token text. Property-level hex fallback before oklch. */
.badge-blue {
  background: rgba(0, 105, 227, 0.15);
  background: oklch(0.546 0.215 258 / 0.15);
  color: var(--puente-blue-light);
}

.badge-green {
  background: rgba(10, 185, 130, 0.15);
  background: oklch(0.696 0.149 163 / 0.15);
  color: var(--puente-success);
}

.badge-purple {
  background: rgba(140, 92, 246, 0.15);
  background: oklch(0.606 0.219 293 / 0.15);
  color: var(--puente-purple);
}

.badge-amber {
  background: rgba(245, 158, 10, 0.15);
  background: oklch(0.769 0.165 70 / 0.15);
  color: var(--puente-warm);
}

.badge-pink {
  background: rgba(236, 72, 154, 0.15);
  background: oklch(0.656 0.212 354 / 0.15);
  color: var(--puente-pink);
}

.badge-gray {
  background: rgba(148, 163, 184, 0.15);
  color: var(--text-muted);
}

.tier-badge {
  margin-left: var(--space-2);
  vertical-align: middle;
}

.tier-upsell-banner {
  max-width: 800px;
  margin-top: var(--space-4);
  background: var(--bg-card);
  border-left: 3px solid var(--puente-blue);
  padding: var(--space-3) var(--space-4);
}

.tier-upsell-banner p {
  margin: 0;
  font-size: 0.875rem;
  color: var(--text-muted);
}

/* ============================================
   Pipeline Grid (Kanban)
   ============================================ */
.pipeline {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}

.stage {
  background: var(--bg-card);
  border-radius: var(--radius-2xl);
  padding: 24px;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(0, 0, 0, 0.02);
  border-top: 6px solid;
  min-height: 500px;
  transition: all var(--transition-normal);
  display: flex;
  flex-direction: column;
}


.stage-prospects {
  border-top-color: var(--stage-prospects);
}

.stage-contacted {
  border-top-color: var(--stage-contacted);
}

.stage-meeting {
  border-top-color: var(--stage-meeting);
}

.stage-proposal {
  border-top-color: var(--stage-proposal);
}

.stage-won {
  border-top-color: var(--stage-won);
}

.stage-title {
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  width: 100%;
  background: transparent;
  border: 0;
  padding: 0;
  text-align: left;
}

.stage-title[role="button"],
button.stage-title {
  cursor: pointer;
}

.stage-expand-icon {
  display: none;
  width: 18px;
  height: 18px;
  color: var(--text-muted);
  transition: transform var(--transition-fast);
}

.stage-title-text {
  display: flex;
  align-items: center;
  gap: 8px;
}

.stage-count-wrapper {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.stage-count {
  background: var(--bg-gray);
  color: var(--text-muted);
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
  min-width: 28px;
  text-align: center;
}

.stage-prospects .stage-count {
  background: rgba(37, 99, 235, 0.1);
  color: var(--stage-prospects);
}

.stage-contacted .stage-count {
  background: rgba(245, 158, 11, 0.1);
  color: var(--stage-contacted);
}

.stage-meeting .stage-count {
  background: rgba(139, 92, 246, 0.1);
  color: var(--stage-meeting);
}

.stage-proposal .stage-count {
  background: rgba(236, 72, 153, 0.1);
  color: var(--stage-proposal);
}

.stage-won .stage-count {
  background: rgba(16, 185, 129, 0.1);
  color: var(--stage-won);
}

.stage-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ============================================
   Lead Cards
   ============================================ */
.lead-card {
  background: var(--bg-white);
  border-radius: var(--radius-xl);
  padding: 16px;
  cursor: grab;
  position: relative;
  border-left: 4px solid transparent;
  animation: slideUp var(--transition-enter);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02), 0 1px 3px rgba(0, 0, 0, 0.04);
}


.lead-card:active {
  cursor: grabbing;
  transform: scale(0.98);
  box-shadow: var(--shadow-sm);
}

.lead-card.priority-high {
  border-left-color: var(--priority-high);
}

.lead-card.priority-medium {
  border-left-color: var(--priority-medium);
}

.lead-card.priority-low {
  border-left-color: var(--priority-low);
}

.lead-priority-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.2;
  border: 1px solid rgba(0, 0, 0, 0.06);
  background: rgba(255, 255, 255, 0.9);
  color: var(--text-muted);
}

.lead-priority-badge.lead-priority-high {
  color: var(--priority-high);
  border-color: rgba(239, 68, 68, 0.25);
  background: rgba(239, 68, 68, 0.08);
}

.lead-priority-badge.lead-priority-medium {
  color: var(--priority-medium);
  border-color: rgba(245, 158, 11, 0.25);
  background: rgba(245, 158, 11, 0.10);
}

.lead-priority-badge.lead-priority-low {
  color: var(--priority-low);
  border-color: rgba(16, 185, 129, 0.25);
  background: rgba(16, 185, 129, 0.10);
}

.lead-name {
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 6px;
  font-size: 0.95rem;
}

.lead-industry {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: 0.8rem;
  margin-bottom: 4px;
}

.lead-industry-tag {
  background: var(--puente-sky);
  color: var(--puente-blue);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: 0.7rem;
  font-weight: 500;
}

.lead-industry-tag--muted {
  background: var(--text-light);
  color: var(--text-white);
}

.lead-location {
  color: var(--text-light);
  font-size: 0.75rem;
}

.lead-contact {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.lead-notes {
  margin-top: 8px;
  font-size: 0.8rem;
  color: var(--text-muted);
  padding: 8px;
  background: var(--bg-white);
  border-radius: var(--radius-sm);
  border-left: 2px solid var(--puente-sky);
}

.last-contact {
  font-size: 0.75rem;
  margin: 2px 0 10px;
  color: var(--text-muted);
}

.last-contact--good {
  color: var(--puente-success);
}

.last-contact--warn {
  color: var(--puente-warm);
}

.last-contact--bad {
  color: var(--puente-danger);
}

.last-contact--never {
  color: var(--text-light);
}

.lead-actions {
  display: flex;
  gap: 6px;
  margin-top: 12px;
  flex-wrap: wrap;
}

/* ============================================
   Buttons
   ============================================ */
.btn {
  padding: var(--space-2) var(--space-4);
  border: 2px solid transparent;
  border-radius: var(--radius-full);
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 600;
  font-family: inherit;
  transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.btn:active {
  transform: scale(0.97);
}

/* CTA — sapphire, highest priority (conversion actions) */
.btn-cta {
  background: var(--puente-sapphire);
  color: white;
  font-weight: 700;
}

.btn-cta:hover {
  background: var(--puente-sapphire-dark);
}

/* Primary — blue, standard actions */
.btn-primary {
  background: var(--puente-blue);
  color: white;
}

.btn-primary:hover {
  background: var(--puente-blue-dark);
}

.btn-primary-active {
  background: var(--puente-blue);
  color: var(--text-white);
  border-color: var(--puente-blue);
}

.btn-success {
  background: var(--puente-success);
  color: white;
}

.btn-success:hover {
  background: oklch(0.600 0.149 163);
}

.btn-ghost, .btn-warning {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--bg-gray);
}

.btn-ghost:hover, .btn-warning:hover {
  background: var(--bg-gray);
  color: var(--text-dark);
}

/* Secondary button (used on dark landing hero) */
.btn-secondary {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-white);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.18);
}

.btn-danger {
  background: transparent;
  color: var(--text-light);
}

.btn-danger:hover {
  background: rgba(239, 68, 68, 0.1);
  color: var(--puente-danger);
}

.btn-lg {
  padding: var(--space-3) var(--space-6);
  font-size: 0.9375rem;
  font-weight: 600;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-outline {
  background: transparent;
  color: var(--puente-blue);
  border: 2px solid var(--puente-blue);
}

.btn-outline:hover {
  background: var(--puente-sky);
  border-color: var(--puente-blue-dark);
}

.btn-outline.learn-reject {
  color: var(--puente-danger);
}

.btn-scrape {
  background: var(--puente-blue);
  color: white;
  border: none;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  transition: opacity var(--transition-fast);
}

.btn-scrape:hover { opacity: 0.85; }

.btn-enrich {
  background: var(--puente-purple);
  color: white;
  border: none;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  transition: opacity var(--transition-fast);
}

.btn-enrich:hover { opacity: 0.85; }

.remove-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.875rem;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast);
}

.remove-btn:hover { color: var(--puente-danger); }

.close-btn {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1.5rem;
}

/* ============================================
   FAB (Floating Action Button)
   ============================================ */
.fab {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  width: 64px;
  height: 64px;
  border-radius: var(--radius-full);
  background: var(--puente-blue);
  color: white;
  border: 2px solid rgba(255, 255, 255, 0.2);
  font-size: 24px;
  cursor: pointer;
  box-shadow: var(--shadow-lg), inset 0 2px 4px rgba(255, 255, 255, 0.3);
  transition: all var(--transition-normal);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
}

.fab:hover {
  transform: scale(1.1);
  background: var(--puente-blue-dark);
  box-shadow: 0 12px 24px rgba(37, 99, 235, 0.4);
}

/* FAB Secondary (pill button floating above primary FAB) */
.fab-secondary-wrapper {
  position: fixed;
  bottom: var(--space-8);
  right: var(--space-5);
  z-index: 100;
}

.fab-secondary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-4);
  background: var(--bg-white);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-sm);
  color: var(--puente-blue);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: box-shadow var(--transition-bounce), transform var(--transition-bounce);
}

.fab-secondary:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

/* Extra-large icon (48px) */
.icon-xl {
  width: 48px;
  height: 48px;
  color: var(--text-light);
}

/* Top margin for bot list grid */
.cards-grid--mt {
  margin-top: var(--space-4);
}

/* ============================================
   Mobile Bottom Navigation
   ============================================ */
.bottom-nav {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 64px;
  background: var(--bg-white);
  border-top: 1px solid rgba(148, 163, 184, 0.35);
  z-index: 60;
  padding: 8px 10px;
  gap: 6px;
  align-items: center;
  justify-content: space-between;
}

.bottom-nav-item {
  flex: 1;
  min-width: 0;
  height: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--text-muted);
  text-decoration: none;
  border-radius: var(--radius-lg);
  border: none;
  background: transparent;
  font-size: 11px;
  line-height: 1;
}

.bottom-nav-item i {
  width: 24px;
  height: 24px;
}

.bottom-nav-item:focus {
  outline: 2px solid rgba(37, 99, 235, 0.35);
  outline-offset: 2px;
}

.bottom-nav-item.active {
  color: var(--puente-blue);
  background: rgba(37, 99, 235, 0.08);
}

@media (prefers-color-scheme: dark) {
  .bottom-nav {
    background: var(--bg-dark-card);
    border-top-color: rgba(255, 255, 255, 0.08);
  }

  .bottom-nav-item {
    color: rgba(255, 255, 255, 0.7);
  }

  .bottom-nav-item.active {
    color: var(--text-white);
    background: rgba(255, 255, 255, 0.06);
  }
}

/* ============================================
   Modals (Glassmorphism & Claymorphism)
   ============================================ */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  background: rgba(15, 23, 42, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 1000;
  animation: fadeIn var(--transition-enter);
}

.modal.active {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 1rem;
  overflow-y: auto;
}

.modal-content {
  background: var(--bg-card);
  padding: 1.5rem;
  border: 2px solid var(--bg-white);
  border-radius: var(--radius-2xl);
  max-width: 480px;
  width: 100%;
  position: relative;
  box-shadow: var(--shadow-xl);
  animation: slideUp var(--transition-enter);
  margin: auto;
}

.modal-content-wide {
  max-width: 600px;
}

.modal-header {
  padding: 24px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-content h2 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--puente-navy);
  margin-bottom: 0;
}

.modal-close {
  background: var(--bg-white);
  border: none;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-muted);
  transition: all var(--transition-bounce);
  box-shadow: var(--shadow-sm);
  position: absolute;
  top: 1rem;
  right: 1rem;
}

.modal-close:hover {
  color: var(--puente-danger);
  transform: scale(1.05);
  background: var(--bg-white);
}

.modal-body-content {
  padding: 24px;
  overflow-y: auto;
}

/* Row of action buttons inside a modal form */
.modal-actions {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.modal-subtitle {
  margin-top: -16px;
  margin-bottom: 16px;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.templates-modal-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.template-group-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--puente-navy);
  margin-bottom: 10px;
}

.template-item {
  border: 1px solid var(--bg-gray);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  padding: 12px;
}

.template-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.template-item-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-dark);
}

.template-item-body {
  white-space: pre-wrap;
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--text-muted);
  background: var(--bg-white);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: var(--radius-md);
  padding: 12px;
}

.template-group-empty {
  color: var(--text-muted);
  font-size: 0.85rem;
}

.nav-actions-inline {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nav-templates-btn {
  white-space: nowrap;
}

@media (max-width: 480px) {
  .modal-content {
    padding: 20px;
  }

  .template-item-header {
    flex-direction: column;
    align-items: flex-start;
  }
}

.modal-content h2 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--puente-navy);
  margin-bottom: 24px;
}

.modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  cursor: pointer;
  color: var(--text-muted);
  transition: all var(--transition-fast);
  background: transparent;
  border: none;
}

.modal-close:hover {
  background: var(--bg-gray);
  color: var(--text-dark);
}

/* ============================================
   Forms
   ============================================ */
.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text-dark);
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 12px 16px;
  background: var(--bg-white);
  border: 2px solid rgba(0, 0, 0, 0.05);
  border-radius: var(--radius-lg);
  font-size: 0.95rem;
  font-family: inherit;
  transition: all var(--transition-fast);
  color: var(--text-dark);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  background: #ffffff;
  border-color: var(--puente-blue);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15), inset 0 2px 4px rgba(0, 0, 0, 0.02);
}

.form-group textarea {
  height: 100px;
  resize: vertical;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-submit {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-size: 1rem;
  font-weight: 600;
  border-radius: var(--radius-full);
  background: var(--puente-blue);
  color: white;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: background-color var(--transition-normal), box-shadow var(--transition-normal);
}

.form-submit:hover {
  background: var(--puente-blue-dark);
  box-shadow: var(--shadow-md);
}

/* ============================================
   Tables
   ============================================ */
.table-wrap {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

table th {
  text-align: left;
  padding: 12px 16px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  border-bottom: 2px solid var(--bg-gray);
}

table td {
  padding: 12px 16px;
  font-size: 0.9rem;
  border-bottom: 1px solid var(--bg-gray);
}

table tr:hover {
  background: var(--bg-off-white);
}

/* ============================================
   Templates Section
   ============================================ */
.templates {
  margin-top: 32px;
  padding: 24px;
  background: var(--bg-white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}

.templates h2 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--puente-navy);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.template-content {
  background: var(--bg-card);
  padding: 16px;
  border-radius: var(--radius-md);
  font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
  font-size: 0.8rem;
  border: 1px solid var(--bg-gray);
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: pre-wrap;
  line-height: 1.6;
  color: var(--text-muted);
}

.template-content:hover {
  border-color: var(--puente-blue);
  background: var(--puente-sky);
}

/* ============================================
   Toast Notifications
   ============================================ */
.toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.toast {
  padding: 12px 20px;
  border-radius: var(--radius-md);
  color: white;
  font-size: 0.9rem;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  animation: slideIn var(--transition-enter);
  min-width: 250px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.toast-success {
  background: var(--puente-success);
}

.toast-error {
  background: var(--puente-danger);
}

.toast-info {
  background: var(--puente-blue);
}

.toast-warning {
  background: var(--puente-warm);
}

/* ============================================
   Empty State
   ============================================ */
.empty-state {
  text-align: center;
  padding: 3rem 2rem;
  color: var(--text-muted);
}

.empty-state-icon {
  margin-bottom: 1rem;
  opacity: 1;
  display: inline-flex;
  color: var(--text-muted);
}

.empty-state-icon .lucide {
  width: 56px;
  height: 56px;
}

.empty-state-text {
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

.empty-state-hint {
  font-size: 0.85rem;
  color: var(--text-light);
}

.empty-state-actions {
  margin-top: var(--space-3);
  display: flex;
  justify-content: center;
}

.empty-state-illustration {
  width: 128px;
  height: 128px;
  margin: 0 auto var(--space-5);
  display: block;
}

/* ============================================
   Bot Cards
   ============================================ */

.bot-card-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.bot-status-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.bot-card-title {
  margin: 0;
  font-size: 1.25rem;
}

.bot-tier-badge {
  color: var(--text-white);
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
}

.bot-badges {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.bot-card-name {
  flex: 1;
}

.bot-card-subtitle {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.bot-card-footer {
  margin-top: var(--space-3);
}

.bot-card-date {
  color: var(--text-light);
  font-size: 0.8rem;
}

.bot-card--disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ============================================
   Loading State (Skeletons)
   ============================================ */
.loading {
  padding: 1rem 0;
}

.skeleton {
  background: rgba(148, 163, 184, 0.18);
  border-radius: var(--radius-md);
  position: relative;
  overflow: hidden;
}

body.dark .skeleton {
  background: rgba(148, 163, 184, 0.12);
}

@media (prefers-reduced-motion: no-preference) {
  .skeleton::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150px;
    height: 100%;
    width: 150px;
    background: linear-gradient(90deg,
        transparent,
        rgba(255, 255, 255, 0.35),
        transparent);
    animation: skeleton-shimmer 1.2s infinite;
  }

  body.dark .skeleton::after {
    background: linear-gradient(90deg,
        transparent,
        rgba(148, 163, 184, 0.2),
        transparent);
  }
}

@keyframes skeleton-shimmer {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(450px);
  }
}

.skeleton-line {
  height: 12px;
  border-radius: var(--radius-full);
}

.skeleton-line+.skeleton-line {
  margin-top: 10px;
}

.skeleton-card {
  padding: 16px;
}

.skeleton-card-header {
  height: 18px;
  width: 55%;
  margin-bottom: 14px;
}

.skeleton-card-badges {
  margin-top: 16px;
  display: flex;
  gap: 8px;
}

.skeleton-badge {
  height: 18px;
  width: 64px;
  border-radius: var(--radius-full);
}

.skeleton-list {
  display: grid;
  gap: 10px;
}

.skeleton-row {
  height: 14px;
  border-radius: var(--radius-full);
}

.skeleton-w-100 {
  width: 100%;
}

.skeleton-w-90 {
  width: 90%;
}

.skeleton-w-80 {
  width: 80%;
}

.skeleton-w-70 {
  width: 70%;
}

.skeleton-w-60 {
  width: 60%;
}

.skeleton-w-40 {
  width: 40%;
}

.skeleton-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.skeleton-stat {
  .skeleton-stat {
    height: 64px;
    border-radius: var(--radius-xl);
  }

  .skeleton-kanban {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
  }

  .skeleton-kanban-col {
    padding: 16px;
    border-radius: var(--radius-xl);
  }

  .skeleton-kanban-col .skeleton-card {
    margin-top: 12px;
  }

  /* ============================================
   Bento Box Layout & Hero (Landing Page)
   ============================================ */

  .portal-landing-hero {
    text-align: center;
    padding: 4rem 1rem 2rem;
    max-width: 800px;
    margin: 0 auto;
  }

  .hero-title {
    font-size: 3.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--puente-navy);
    margin-bottom: 1rem;
    line-height: 1.1;
  }

  .hero-subtitle {
    font-size: 1.25rem;
    color: var(--text-muted);
    max-width: 600px;
    margin: 0 auto;
  }

  body.dark .hero-title {
    color: var(--text-white);
  }

  body.dark .hero-subtitle {
    color: var(--text-muted);
  }

  /* Bento Grid */
  .bento-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 1.5rem;
    max-width: 1200px;
    margin: 0 auto 4rem;
    padding: 0 1rem;
  }

  .bento-secondary-col {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  /* Base Bento Card (Claymorphism) */
  .bento-card {
    position: relative;
    overflow: hidden;
    background: var(--bg-card);
    border: 2px solid var(--bg-white);
    border-radius: var(--radius-2xl);
    padding: 2.5rem;
    transition: all var(--transition-smooth);
    box-shadow: var(--shadow-md);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    min-height: 280px;
  }

  .bento-card-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .bento-card-icon {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-full);
    background: var(--bg-white);
    color: var(--puente-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
    margin-bottom: 1.5rem;
  }

  .bento-card-icon--green {
    color: var(--puente-success);
  }

  .bento-card-icon--orange {
    color: var(--puente-warm);
  }

  .bento-card-icon--purple {
    color: var(--puente-purple);
  }

  .bento-card-icon svg {
    width: 32px;
    height: 32px;
  }

  .bento-card-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 0.75rem;
  }

  body.dark .bento-card-title {
    color: var(--text-white);
  }

  .bento-card-description {
    font-size: 1.05rem;
    color: var(--text-muted);
    line-height: 1.6;
    flex-grow: 1;
  }

  body.dark .bento-card-description {
    color: var(--text-muted);
  }

  /* Primary vs Secondary Bento Cards */
  .bento-card--primary {
    padding: 3.5rem;
  }

  .bento-card--primary .bento-card-title {
    font-size: 2.5rem;
  }

  .bento-card--primary .bento-card-description {
    font-size: 1.2rem;
    max-width: 90%;
    margin-bottom: 2rem;
  }

  .bento-card-action {
    align-self: flex-start;
    margin-top: auto;
  }

  .bento-card-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
  }

  .bento-card-header .bento-card-icon {
    margin-bottom: 0;
    width: 50px;
    height: 50px;
  }

  .bento-card-header .bento-card-icon svg {
    width: 24px;
    height: 24px;
  }

  .bento-card-header .bento-card-title {
    margin-bottom: 0;
    font-size: 1.5rem;
  }

  /* Decorative Blobs inside Bento */
  .card-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    z-index: 1;
    opacity: 0.15;
    transition: all var(--transition-smooth);
  }

  .card-blob--blue {
    background: var(--puente-blue);
    width: 300px;
    height: 300px;
    top: -100px;
    right: -50px;
  }

  .card-blob--green {
    background: var(--puente-success);
    width: 200px;
    height: 200px;
    bottom: -50px;
    right: -50px;
  }

  .card-blob--orange {
    background: var(--puente-warm);
    width: 200px;
    height: 200px;
    top: -50px;
    left: -50px;
  }

  /* Dark Mode for Bento */
  body.dark .bento-card {
    background: var(--bg-dark-card);
    border-color: rgba(255, 255, 255, 0.05);
  }

  body.dark .bento-card-icon {
    background: rgba(255, 255, 255, 0.1);
  }

  /* Responsive Grid Adjustments */
  @media (max-width: 992px) {
    .bento-grid {
      grid-template-columns: 1fr;
    }

    .hero-title {
      font-size: 2.5rem;
    }
  }

  @media (max-width: 768px) {
    .bento-card--primary {
      padding: 2rem;
    }

    .bento-card--primary .bento-card-title {
      font-size: 2rem;
    }
  }

  border-radius: var(--radius-xl);
}

.skeleton-kanban {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

.skeleton-kanban-col {
  padding: 16px;
  border-radius: var(--radius-xl);
}

.skeleton-kanban-col .skeleton-card {
  margin-top: 12px;
}

/* ============================================
   Section Header
   ============================================ */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  gap: 12px;
}

.section-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--puente-navy);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* ============================================
   Main Content Area
   ============================================ */
.main-content {
  padding: 24px;
  background: var(--bg-off-white);
  min-height: calc(100vh - 70px);
  animation: fadeIn var(--transition-enter);
}

/* ============================================
   App Layout + Sidebar Navigation
   ============================================ */

/* Root layout wrapper */
.app-layout {
  display: flex;
  min-height: 100vh;
}

/* Sidebar */
.sidebar {
  width: 220px;
  background: var(--bg-white);
  border-right: 1px solid var(--tint-navy-10);
  display: flex;
  flex-direction: column;
  padding: var(--space-5) 0;
  transition: width var(--transition-smooth);
  flex-shrink: 0;
}

.sidebar.collapsed {
  width: 64px;
  overflow: hidden;
}

/* Nav items */
.sidebar-nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  color: var(--text-dark);
  transition: background var(--transition-fast), color var(--transition-fast);
  text-decoration: none;
  border-left: 3px solid transparent;
  white-space: nowrap;
}

.sidebar-nav-item:hover {
  background: var(--tint-navy-5);
  color: var(--puente-blue);
}

.sidebar-nav-item.active {
  background: var(--tint-navy-10);
  color: var(--puente-blue);
  border-left-color: var(--puente-blue);
  font-weight: 600;
}

/* Label inside nav item — hidden when collapsed */
.sidebar-label {
  transition: opacity var(--transition-fast);
}

.sidebar.collapsed .sidebar-label {
  display: none;
}

/* Section headings */
.sidebar-section-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  padding: var(--space-5) var(--space-5) var(--space-2);
  text-transform: uppercase;
}

.sidebar-section-divider {
  border: none;
  border-top: 1px solid var(--tint-navy-10);
  margin: var(--space-4) var(--space-5);
}

/* Logout button in sidebar */
.sidebar-logout {
  margin-top: auto;
  color: var(--puente-danger);
}
.sidebar-logout:hover {
  color: var(--puente-danger);
  background: var(--tint-danger-5);
}

/* Collapse button */
.sidebar-collapse-btn {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  width: 100%;
  transition: background var(--transition-fast), color var(--transition-fast);
  white-space: nowrap;
}

.sidebar-collapse-btn:hover {
  color: var(--puente-blue);
  background: var(--tint-navy-5);
}

/* Product group (collapsible parent + sub-items) */
.sidebar-product {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  color: var(--text-dark);
  transition: background var(--transition-fast), color var(--transition-fast);
  text-decoration: none;
  border-left: 3px solid transparent;
  white-space: nowrap;
  cursor: pointer;
  width: 100%;
  background: none;
  border-right: none;
  border-top: none;
  border-bottom: none;
  font: inherit;
}
.sidebar-product:hover {
  background: var(--tint-navy-5);
  color: var(--puente-blue);
}
.sidebar-product.active {
  color: var(--puente-blue);
  border-left-color: var(--puente-blue);
  font-weight: 600;
}
.sidebar-product-chevron {
  margin-left: auto;
  transition: transform var(--transition-fast);
  flex-shrink: 0;
}
.sidebar-product.expanded .sidebar-product-chevron {
  transform: rotate(90deg);
}
.sidebar-sub-items {
  display: none;
  padding-left: var(--space-4);
}
.sidebar-product.expanded + .sidebar-sub-items {
  display: block;
}
.sidebar-sub-items .sidebar-nav-item {
  font-size: 0.875rem;
  padding: var(--space-2) var(--space-5);
}
.sidebar.collapsed .sidebar-sub-items {
  display: none;
}
.sidebar.collapsed .sidebar-product-chevron {
  display: none;
}

/* Main content area next to sidebar */
.app-content {
  flex: 1;
  min-width: 0;
}

/* Admin-gated elements — revealed via JS */
.is-admin-only {
  display: none;
}

/* Dark mode */
.dark .sidebar {
  background: var(--bg-dark-card);
  border-right-color: var(--tint-navy-10);
}

/* Hide sidebar on mobile — bottom tabbar handles nav */
@media (max-width: 767px) {
  .sidebar {
    display: none;
  }
}

/* ============================================
   Stat Cards (extracted from inline styles)
   ============================================ */
.stat-card {
  cursor: default;
  text-align: center;
}

.stat-card-value {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
}

.stat-card-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

/* Stat value color modifiers (replaces inline color styles) */
.stat-value--blue    { color: var(--puente-blue); }
.stat-value--success { color: var(--puente-success); }
.stat-value--warm    { color: var(--puente-warm); }
.stat-value--purple  { color: var(--puente-purple); }

/* Spacing utilities for intelligence page layout */
.mt-card  { margin-top: var(--space-5); }    /* 1.5rem — stacked card gap */
.mb-section { margin-bottom: var(--space-6); } /* 2rem — section separation */

/* ============================================
   Panel Title (section headings in cards)
   ============================================ */
.panel-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--puente-navy);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ============================================
   Grid Utilities
   ============================================ */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

/* ============================================
   See All Link
   ============================================ */
.see-all-link {
  display: block;
  margin-top: 12px;
  font-size: 0.85rem;
  color: var(--puente-blue);
}

.see-all-link:hover {
  text-decoration: underline;
}

/* ============================================
   Hero Header (landing page)
   ============================================ */
.hero-header {
  text-align: center;
  padding: 4rem 0 2rem;
}

.hero-title {
  font-size: 3rem;
  font-weight: 700;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
  margin-bottom: 0.5rem;
}

.hero-subtitle {
  color: var(--text-muted);
  font-size: 1.1rem;
}

/* ============================================
   Bento Box Layout (Landing Page)
   ============================================ */

.portal-landing-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.portal-landing-hero {
  text-align: center;
  padding: 4rem 1rem 3rem;
  max-width: 900px;
  margin: 0 auto;
}

.hero-logo-container {
  margin-bottom: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-logo {
  height: 120px;
  max-width: 100%;
  object-fit: contain;
  flex-shrink: 0;
}

.portal-landing-hero .hero-title {
  font-size: 3.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--puente-navy);
  margin-bottom: 1rem;
  line-height: 1.1;
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  -webkit-text-fill-color: unset;
  text-fill-color: unset;
}

.portal-landing-hero .hero-subtitle {
  font-size: 1.25rem;
  color: var(--text-muted);
  max-width: 600px;
  margin: 0 auto;
}

body.dark .portal-landing-hero .hero-title {
  color: var(--text-white);
}

/* Bento Grid */
.bento-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 1.5rem;
  max-width: 1200px;
  margin: 0 auto 4rem;
  padding: 0 1rem;
}

.bento-secondary-col {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Base Bento Card (Claymorphism) */
.bento-card {
  position: relative;
  overflow: hidden;
  background: var(--bg-card);
  border: 2px solid var(--bg-white);
  border-radius: var(--radius-2xl);
  padding: 2.5rem;
  transition: all var(--transition-smooth);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  min-height: 280px;
}

.bento-card-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.bento-card-icon {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-full);
  background: var(--bg-white);
  color: var(--puente-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
  margin-bottom: 1.5rem;
}

.bento-card-icon--green {
  color: var(--puente-success);
}

.bento-card-icon--orange {
  color: var(--puente-warm);
}

.bento-card-icon--purple {
  color: var(--puente-purple);
}

.bento-card-icon svg {
  width: 32px;
  height: 32px;
}

.bento-card-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 0.75rem;
}

body.dark .bento-card-title {
  color: var(--text-white);
}

.bento-card-description {
  font-size: 1.05rem;
  color: var(--text-muted);
  line-height: 1.6;
  flex-grow: 1;
}

/* Primary vs Secondary Bento Cards */
.bento-card--primary {
  padding: 3.5rem;
}

.bento-card--primary .bento-card-title {
  font-size: 2.5rem;
}

.bento-card--primary .bento-card-description {
  font-size: 1.2rem;
  max-width: 90%;
  margin-bottom: 2rem;
}

.bento-card-action {
  align-self: flex-start;
  margin-top: auto;
}

.bento-card-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.bento-card-header .bento-card-icon {
  margin-bottom: 0;
  width: 50px;
  height: 50px;
}

.bento-card-header .bento-card-icon svg {
  width: 24px;
  height: 24px;
}

.bento-card-header .bento-card-title {
  margin-bottom: 0;
  font-size: 1.5rem;
}

/* Decorative Blobs inside Bento */
.card-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  z-index: 1;
  opacity: 0.15;
  transition: all var(--transition-smooth);
}

.card-blob--blue {
  background: var(--puente-blue);
  width: 300px;
  height: 300px;
  top: -100px;
  right: -50px;
}

.card-blob--green {
  background: var(--puente-success);
  width: 200px;
  height: 200px;
  bottom: -50px;
  right: -50px;
}

.card-blob--orange {
  background: var(--puente-warm);
  width: 200px;
  height: 200px;
  top: -50px;
  left: -50px;
}

/* Dark Mode for Bento */
body.dark .bento-card {
  background: var(--bg-dark-card);
  border-color: rgba(255, 255, 255, 0.05);
}

body.dark .bento-card-icon {
  background: rgba(255, 255, 255, 0.1);
}

/* Responsive Grid Adjustments */
@media (max-width: 992px) {
  .bento-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .bento-card--primary {
    padding: 2rem;
  }
}

.btn-hero-primary {
  background: var(--puente-sapphire);
  color: white;
  font-weight: 700;
}

.btn-hero-primary:hover {
  background: var(--puente-sapphire-dark);
}

.btn-hero-secondary {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.55);
  color: #ffffff;
}

.btn-hero-secondary:hover {
  background: rgba(255, 255, 255, 0.12);
}

.portal-hero-tertiary {
  margin-top: 1.15rem;
}

.portal-hero-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(241, 245, 249, 0.82);
  font-weight: 600;
}

.portal-hero-link:hover {
  color: rgba(255, 255, 255, 0.95);
}

.portal-main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2.25rem 1.25rem 2.5rem;
}

.portal-section-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 1.75rem;
}

.portal-section-title {
  font-size: clamp(1.65rem, 2.6vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.96);
}

.portal-section-subtitle {
  margin-top: 0.5rem;
  color: rgba(148, 163, 184, 0.95);
  font-size: 1.05rem;
}

.portal-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.portal-card {
  position: relative;
  display: block;
  padding: 1.35rem 1.35rem 1.2rem;
  border-radius: var(--radius-2xl);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
}


.portal-card:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.85);
  outline-offset: 4px;
}

.portal-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 0.9rem;
  display: grid;
  place-items: center;
  background: rgba(37, 99, 235, 0.22);
  border: 1px solid rgba(37, 99, 235, 0.35);
  color: rgba(255, 255, 255, 0.95);
}

.portal-card-icon-family {
  background: rgba(16, 185, 129, 0.18);
  border: 1px solid rgba(16, 185, 129, 0.32);
}

.portal-card-title {
  margin-top: 1.1rem;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.97);
}

.portal-card-description {
  margin-top: 0.55rem;
  color: rgba(148, 163, 184, 0.95);
  font-size: 1rem;
  line-height: 1.6;
}

.portal-card .badge-group {
  margin-top: 1rem;
}

.portal-card-action {
  margin-top: 1.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 0.9rem;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.92);
  font-weight: 700;
  width: fit-content;
}

.portal-card-action .icon {
  width: 18px;
  height: 18px;
}

@media (min-width: 860px) {
  .portal-cards {
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
  }
}

@media (max-width: 420px) {

  .btn-hero-primary,
  .btn-hero-secondary {
    width: 100%;
    min-width: 0;
  }
}

/* ============================================
   Landing Hero (Phase 4)
   ============================================ */
.landing-hero {
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px 16px;
  border-radius: var(--radius-2xl);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
}

.landing-hero-inner {
  width: 100%;
  max-width: 860px;
}

.landing-hero-title {
  font-size: 2.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #60a5fa, #a78bfa);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
}

.landing-hero-tagline {
  margin-top: 6px;
  color: rgba(241, 245, 249, 0.85);
  font-size: 1.05rem;
}

.landing-hero-stats {
  margin-top: 12px;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: rgba(148, 163, 184, 0.9);
  font-size: 0.9rem;
}

.landing-hero-stat-value {
  color: rgba(241, 245, 249, 0.92);
  font-weight: 700;
}

.landing-hero-actions {
  margin-top: 16px;
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

@media (max-width: 480px) {
  .landing-hero-title {
    font-size: 1.85rem;
  }
}

/* ============================================
   Badge Group
   ============================================ */
.badge-group {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* ============================================
   Filter Bar
   ============================================ */
.filter-bar {
  display: flex;
  gap: 12px;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.filter-select {
  padding: 8px 16px;
  border: 1px solid var(--bg-gray);
  border-radius: var(--radius-full);
  font-family: inherit;
  font-size: 0.85rem;
  background: var(--bg-white);
  color: var(--text-dark);
  transition: border-color var(--transition-fast);
}

.filter-select:focus {
  outline: none;
  border-color: var(--puente-blue);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* ============================================
   Client Dashboard (puente/dashboard/)
   ============================================ */
.dashboard-hero {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}


.dashboard-puchy {
  width: 72px;
  height: 72px;
  object-fit: contain;
  flex-shrink: 0;
}

.hero-text h1 { font-size: 1.75rem; margin-bottom: 0.25rem; }
.hero-text p { color: var(--text-muted); margin: 0; }

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  font-size: 0.8rem;
  font-weight: 600;
  margin-top: 0.5rem;
}

.status-pill.active {
  background: rgba(16, 185, 129, 0.12);
  color: var(--puente-success);
}

.status-pill.inactive {
  background: rgba(107, 114, 128, 0.12);
  color: var(--text-muted);
}

.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  margin: 1.5rem 0;
}

@media (max-width: 900px) {
  .stats-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

.stat-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 1.25rem;
}

.stat-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--puente-sky);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--puente-blue);
}

.stat-icon i { width: 20px; height: 20px; }

.stat-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1;
}

.stat-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 500;
}

.messages-section {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

@media (max-width: 640px) {
  .messages-section { grid-template-columns: 1fr; }
}

.messages-text h2 { margin: 0 0 0.25rem; }
.messages-text p { color: var(--text-muted); margin: 0; font-size: 0.9rem; }

.actions-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1rem;
  margin-top: 0.5rem;
}

.action-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1.25rem;
  border-radius: var(--radius-md);
  background: var(--bg-card);
  border: 2px solid transparent;
  text-decoration: none;
  color: var(--text-dark);
  font-weight: 600;
  font-size: 0.85rem;
  text-align: center;
  transition: var(--transition-fast);
  cursor: pointer;
}

.action-tile:hover {
  border-color: var(--puente-blue);
  background: var(--puente-sky);
  color: var(--puente-blue);
}

.action-tile i { width: 28px; height: 28px; color: var(--puente-blue); }

/* Channel status indicators */
.hero-status-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.channel-indicators { display: flex; gap: var(--space-1); flex-wrap: wrap; }
.channel-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 500;
  background: var(--surface-secondary, var(--bg-secondary));
  color: var(--text-secondary); text-decoration: none;
  transition: background 0.15s;
}
.channel-badge:hover { background: var(--surface-tertiary, var(--bg-tertiary)); color: var(--text-primary); }
.channel-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--puente-success);
  flex-shrink: 0;
}

/* Contacts table */
.section-list-body { padding: 0 var(--space-4) var(--space-4); }
.contacts-table-wrap { overflow-x: auto; }
.contacts-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.contacts-table th {
  text-align: left; font-weight: 600; font-size: 0.75rem;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-light); padding: var(--space-2) var(--space-2);
  border-bottom: 1px solid var(--border-color);
}
.contacts-table td { padding: var(--space-2); border-bottom: 1px solid var(--border-color); vertical-align: middle; }
.contact-row:hover { background: var(--surface-secondary, var(--bg-secondary)); }
.contact-name-cell { display: flex; flex-direction: column; gap: 2px; }
.contact-name { font-weight: 500; }
.contact-detail { font-size: 0.78rem; color: var(--text-light); }
.channel-label { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.contact-actions { display: inline-flex; align-items: center; gap: var(--space-1); }
.contact-escalated-icon { width: 16px; height: 16px; color: var(--puente-danger); flex-shrink: 0; }
.contact-chat-btn { color: var(--puente-blue); cursor: pointer; }
.contact-chat-btn:hover { color: var(--puente-navy); }
@media (max-width: 768px) {
  .contacts-table th:nth-child(3), .contacts-table td:nth-child(3) { display: none; }
}

/* Escalation center */
.escalation-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3);
  border-bottom: 1px solid var(--tint-navy-5);
}
.escalation-row:last-child { border-bottom: none; }
.escalation-info { flex: 1; min-width: 0; }
.escalation-who {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  font-size: 0.875rem;
}
.escalation-summary {
  margin-top: var(--space-1);
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.4;
}
.escalation-actions {
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
  align-items: center;
}
@media (max-width: 600px) {
  .escalation-row { flex-direction: column; }
  .escalation-actions { align-self: flex-end; }
}

/* Getting-started checklist */
.checklist { display: flex; flex-direction: column; gap: var(--space-2); }
.checklist-item {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--surface-secondary, var(--bg-secondary));
  cursor: default;
}
.checklist-item a { color: var(--puente-blue); text-decoration: none; font-weight: 500; }
.checklist-item a:hover { text-decoration: underline; }
.checklist-icon { flex-shrink: 0; display: flex; align-items: center; color: var(--text-light); }

/* Learning cards */
.learning-card {
  display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-3); border-radius: var(--radius-md);
  background: var(--surface-secondary, var(--bg-secondary));
  margin-bottom: var(--space-2);
}
.learning-qa { flex: 1; min-width: 0; }
.learning-q, .learning-a { font-size: 0.9rem; line-height: 1.5; }
.learning-q { margin-bottom: var(--space-1); }
.learning-a { color: var(--text-secondary); }
.learning-meta { font-size: 0.75rem; color: var(--text-light); margin-top: var(--space-1); }
.learning-actions { display: flex; gap: var(--space-1); flex-shrink: 0; align-items: center; }
@media (max-width: 768px) {
  .learning-card { flex-direction: column; }
  .learning-actions { align-self: flex-end; }
}

.section-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.section-header h2 { margin: 0; font-size: 1.15rem; }

.chatwoot-hint {
  font-size: 0.8rem;
  color: var(--text-light);
  margin-top: 0.5rem;
}

.admin-banner {
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid var(--puente-warm);
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
  font-size: 0.85rem;
  color: var(--text-dark);
  margin-bottom: 1rem;
  display: none;
}

.section-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-light);
  margin-top: var(--space-7);
  margin-bottom: var(--space-3);
}
.section-label:first-child { margin-top: 0; }

.field-hint {
  font-size: 0.78rem;
  color: var(--text-light);
  margin-top: 0.35rem;
  margin-bottom: 0;
}

.field-value {
  font-size: 0.95rem;
  color: var(--text-dark);
  margin: 0;
  padding: var(--space-3) var(--space-4);
  background: var(--bg-gray);
  border-radius: var(--radius-sm);
}

/* Getting-started checklist container */
.dashboard-checklist {
  text-align: left;
  margin-top: var(--space-3);
  width: 100%;
  max-width: 400px;
}

/* Hint paragraph with horizontal padding */
.section-hint {
  padding: 0 var(--space-4);
  margin-bottom: var(--space-3);
}

/* Empty state with padding (dashboard context) */
.empty-state--padded {
  padding: var(--space-4);
}

/* ============================================
   Dashboard Grid (family)
   ============================================ */
.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.dashboard-section {
  background: var(--bg-white);
  border-radius: var(--radius-xl);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
}

.dashboard-section h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--puente-navy);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

.activity-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--bg-gray);
  font-size: 0.9rem;
}

.activity-item:last-child {
  border-bottom: none;
}

/* ============================================
   Wellness Bars (dashboard + wellness page)
   ============================================ */
.wellness-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.wellness-bar-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  min-width: 70px;
}

.wellness-bar-track {
  flex: 1;
  height: 8px;
  background: var(--bg-gray);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.wellness-bar-fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width var(--transition-smooth);
}

.wellness-bar-value {
  font-size: 0.8rem;
  font-weight: 600;
  min-width: 30px;
  text-align: right;
}

.expense-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 0.85rem;
}

/* ============================================
   Urgency Styles (dashboard support items)
   ============================================ */
.support-item {
  padding: 8px 12px;
  border-radius: var(--radius-md);
  margin-bottom: 8px;
  font-size: 0.85rem;
}

.urgency-high {
  background: rgba(239, 68, 68, 0.1);
  border-left: 3px solid var(--puente-danger);
}

.urgency-medium {
  background: rgba(245, 158, 11, 0.1);
  border-left: 3px solid var(--puente-warm);
}

.urgency-low {
  background: rgba(37, 99, 235, 0.1);
  border-left: 3px solid var(--puente-blue);
}

.urgency-urgent {
  background: rgba(239, 68, 68, 0.2);
  border-left: 3px solid var(--puente-danger);
}

/* ============================================
   Wellness Page
   ============================================ */
.wellness-card {
  background: var(--bg-white);
  border-radius: var(--radius-xl);
  padding: 1.5rem;
  margin-bottom: 1rem;
  box-shadow: var(--shadow-sm);
}

.score-input {
  display: flex;
  align-items: center;
  gap: 8px;
}

.score-input input[type="range"] {
  flex: 1;
  accent-color: var(--puente-blue);
}

.score-input .score-value {
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--puente-blue);
  min-width: 30px;
  text-align: center;
}

.history-row {
  display: grid;
  grid-template-columns: 100px repeat(3, 1fr) 1.5fr;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--bg-gray);
  font-size: 0.85rem;
  align-items: center;
}

.history-row:first-child {
  font-weight: 600;
  color: var(--text-muted);
  font-size: 0.75rem;
  text-transform: uppercase;
}

.mini-bar {
  height: 6px;
  background: var(--bg-gray);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.mini-bar-fill {
  height: 100%;
  border-radius: var(--radius-full);
}

/* ============================================
   Milestones Timeline
   ============================================ */
.timeline {
  position: relative;
  padding-left: 30px;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--puente-sky);
}

.timeline-item {
  position: relative;
  margin-bottom: 1.5rem;
  padding: 16px;
  background: var(--bg-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.timeline-item::before {
  content: '';
  position: absolute;
  left: -26px;
  top: 20px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--puente-blue);
  border: 2px solid var(--puente-sky);
}

.timeline-date {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.timeline-text {
  font-weight: 500;
  font-size: 1rem;
}

.timeline-notes {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: 4px;
}

.child-section {
  margin-bottom: 2rem;
}

.child-header {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--puente-navy);
  margin-bottom: 1rem;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--puente-sky);
}

/* ============================================
   Support Page
   ============================================ */
.support-card {
  background: var(--bg-white);
  border-radius: var(--radius-lg);
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-sm);
  border-left: 4px solid;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.support-card.urgency-low {
  border-left-color: var(--puente-blue);
}

.support-card.urgency-medium {
  border-left-color: var(--puente-warm);
}

.support-card.urgency-high {
  border-left-color: var(--puente-danger);
}

.support-card.urgency-urgent {
  border-left-color: var(--puente-danger);
  background: rgba(239, 68, 68, 0.05);
}

.support-card.resolved {
  opacity: 0.6;
  border-left-color: var(--puente-success);
}

.urgency-badge {
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: 0.7rem;
  font-weight: 600;
}

.urgency-badge.low {
  background: rgba(37, 99, 235, 0.1);
  color: var(--puente-blue);
}

.urgency-badge.medium {
  background: rgba(245, 158, 11, 0.1);
  color: var(--puente-warm);
}

.urgency-badge.high {
  background: rgba(239, 68, 68, 0.1);
  color: var(--puente-danger);
}

.urgency-badge.urgent {
  background: rgba(239, 68, 68, 0.2);
  color: var(--puente-danger);
}

.tab-bar {
  display: flex;
  gap: 4px;
  margin-bottom: 1.5rem;
  background: var(--bg-gray);
  border-radius: var(--radius-full);
  padding: 4px;
  width: fit-content;
}

.tab {
  padding: 8px 20px;
  border-radius: var(--radius-full);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
  border: none;
  background: transparent;
  font-family: inherit;
}

.tab.active {
  background: var(--bg-white);
  box-shadow: var(--shadow-sm);
  color: var(--puente-blue);
}

/* ============================================
   Content Calendar
   ============================================ */
.calendar-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  margin-bottom: 2rem;
}

.calendar-day {
  background: var(--bg-white);
  border-radius: var(--radius-md);
  padding: 12px;
  min-height: 120px;
  border: 1px solid var(--bg-gray);
}

.calendar-day-header {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.calendar-day-date {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--puente-navy);
  margin-bottom: 8px;
}

.calendar-item {
  font-size: 0.75rem;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  margin-bottom: 4px;
  cursor: pointer;
}

.platform-linkedin {
  background: rgba(37, 99, 235, 0.1);
  color: var(--puente-blue);
}

.platform-instagram {
  background: rgba(236, 72, 153, 0.1);
  color: var(--puente-pink);
}

.platform-blog {
  background: rgba(139, 92, 246, 0.1);
  color: var(--puente-purple);
}

.platform-whatsapp {
  background: rgba(16, 185, 129, 0.1);
  color: var(--puente-success);
}

.content-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-bottom: 1px solid var(--bg-gray);
}

.content-list-item:last-child {
  border-bottom: none;
}

/* ============================================
   Content Calendar — extracted inline styles
   ============================================ */

/* Card without interactive cursor */
.card--static {
  cursor: default;
}

/* Content list card top margin */
.content-list-card {
  margin-top: var(--space-6);
}

/* Today highlight on calendar day */
.calendar-day--today {
  border-color: var(--puente-blue);
  background: var(--puente-sky);
}

/* Empty day placeholder text */
.calendar-day-empty {
  font-size: 0.75rem;
  color: var(--text-light);
}

/* Platform badge inside calendar list items */
.calendar-item--badge {
  min-width: 80px;
  text-align: center;
}

/* Content list item body */
.content-item-body {
  flex: 1;
}

/* Content list item title */
.content-item-title {
  font-weight: 500;
}

/* Content list item meta (date + status) */
.content-item-meta {
  font-size: 0.875rem;
  color: var(--text-muted);
}

/* Content list item actions (button group) */
.content-item-actions {
  display: flex;
  gap: var(--space-1);
}

/* Badge without extra margin */
.card-badge--tight {
  margin: 0;
}

/* Search icon in global search overlay */
.search-icon {
  width: 20px;
  height: 20px;
  color: var(--text-muted);
}

/* ============================================
   Footer
   ============================================ */
.footer {
  background: var(--puente-navy);
  color: rgba(255, 255, 255, 0.8);
  padding: 2rem;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: white;
}

body.dark .footer {
  background: var(--bg-dark);
}

/* ============================================
   Animations
   ============================================ */
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(100px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.7;
  }
}

/* Card entrance animation with stagger */
.lead-card:nth-child(1) {
  animation-delay: 0ms;
}

.lead-card:nth-child(2) {
  animation-delay: 50ms;
}

.lead-card:nth-child(3) {
  animation-delay: 100ms;
}

.lead-card:nth-child(4) {
  animation-delay: 150ms;
}

.lead-card:nth-child(5) {
  animation-delay: 200ms;
}

/* ============================================
   Global Search
   ============================================ */
.search-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  z-index: 100;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: 10vh;
  animation: fadeIn var(--transition-fast);
}

.search-overlay.active {
  display: flex;
}

.search-container {
  width: 100%;
  max-width: 600px;
  background: var(--bg-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  animation: slideUp var(--transition-enter);
}

.search-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--bg-gray);
  display: flex;
  align-items: center;
  gap: 12px;
}

.search-input-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
}

.search-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 1.1rem;
  padding: 8px 0;
  color: var(--text-dark);
  background: transparent;
}

.search-input::placeholder {
  color: var(--text-light);
}

.search-kbd {
  background: var(--bg-gray);
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-family: monospace;
  color: var(--text-muted);
}

.search-results {
  max-height: 60vh;
  overflow-y: auto;
  padding: 8px;
}

.search-group {
  margin-bottom: 16px;
}

.search-group:last-child {
  margin-bottom: 0;
}

.search-group-title {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 8px 12px;
  letter-spacing: 0.5px;
}

.search-result {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.search-result:hover,
.search-result.selected {
  background: var(--bg-gray);
}

.search-result-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--puente-blue);
}

.search-result-content {
  flex: 1;
  min-width: 0;
}

.search-result-title {
  font-weight: 500;
  color: var(--text-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-result-title mark {
  background: var(--puente-sky);
  color: var(--puente-blue);
  padding: 1px 2px;
  border-radius: 2px;
}

.search-result-subtitle {
  font-size: 0.85rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--text-muted);
}

.search-empty i {
  margin-bottom: 16px;
}

.search-empty p {
  margin: 0;
  font-size: 0.95rem;
}

.search-announcer {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Dark mode search */
@media (prefers-color-scheme: dark) {
  .search-container {
    background: var(--bg-dark-card);
  }

  .search-header {
    border-bottom-color: rgba(255, 255, 255, 0.1);
  }

  .search-input {
    color: var(--text-white);
  }

  .search-result:hover,
  .search-result.selected {
    background: rgba(255, 255, 255, 0.05);
  }

  .search-result-title {
    color: var(--text-white);
  }
}

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 1200px) {
  .pipeline {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .pipeline {
    grid-template-columns: 1fr;
  }

  body.has-bottom-nav {
    padding-bottom: 84px;
  }

  .bottom-nav {
    display: flex;
  }

  .nav-header {
    padding: 12px 16px;
    position: relative;
  }

  .nav-toggle {
    display: flex;
  }

  .nav-menu {
    display: none;
    width: 100%;
    flex-direction: column;
    gap: 12px;
    padding-top: 12px;
  }

  .nav-menu.open {
    display: flex;
  }

  .nav-links {
    width: 100%;
  }

  .stats-bar {
    width: 100%;
    justify-content: space-between;
  }

  .stat {
    padding: 10px 14px;
    min-width: auto;
    flex: 1;
  }

  .stat-number {
    font-size: 1.25rem;
  }

  .main-content {
    padding: 16px;
  }

  .stage {
    min-height: auto;
    padding: 16px;
  }

  /* Vertical pipeline accordion */
  .stage-title {
    margin-bottom: 0;
    padding: 6px 0;
  }

  .stage-expand-icon {
    display: inline-flex;
  }

  .stage-content {
    overflow: hidden;
    transition: max-height var(--transition-enter);
    max-height: 2000px;
    padding-top: 12px;
  }

  .stage-collapsed .stage-content {
    max-height: 0;
    padding-top: 0;
  }

  .stage-collapsed .stage-expand-icon {
    transform: rotate(-90deg);
  }

  .cards-grid {
    grid-template-columns: 1fr;
  }

  .grid-2,
  .grid-4 {
    grid-template-columns: 1fr;
  }

  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  .container-padded {
    padding: 1rem;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .fab {
    bottom: 80px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: 56px;
    height: 56px;
    font-size: 20px;
  }

  .fab:hover {
    transform: translateX(-50%) scale(1.05);
  }

  .modal-content {
    margin: 0 16px;
    padding: 24px;
  }

  .section-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .calendar-week {
    grid-template-columns: 1fr;
  }

  .history-row {
    grid-template-columns: 80px repeat(3, 1fr);
    font-size: 0.8rem;
  }

  .history-row span:last-child {
    grid-column: 1 / -1;
  }

  .footer {
    flex-direction: column;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .nav-brand h1 {
    font-size: 1.1rem;
  }
}

/* ============================================
   Portal Landing (Marketing-style)
   ============================================ */
.portal-landing {
  min-height: 100vh;
  background: var(--bg-off-white);
  padding: 32px 16px;
  display: grid;
  place-items: center;
  position: relative;
}

.portal-landing-container {
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  padding: 0;
}



.portal-welcome {
  padding: 0.5rem 0 1.25rem;
  border-bottom: 1px solid var(--tint-navy-10);
  padding-bottom: var(--space-6);
  margin-bottom: var(--space-6);
}

.portal-welcome-greeting {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--puente-blue);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 0.25rem;
}

.portal-welcome-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0;
  letter-spacing: -0.025em;
}

.portal-landing-grid {
  margin-top: 1.25rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.portal-landing-card {
  position: relative;
  overflow: hidden;
  background: var(--bg-white);
  border: 1px solid var(--tint-navy-10);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-height: 220px;
}


.portal-landing-card:focus-visible {
  outline: 2px solid var(--puente-blue);
  outline-offset: 4px;
}

.portal-landing-card-top {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 18px;
  align-items: start;
}

.portal-landing-card-icon {
  width: 64px;
  height: 64px;
  border-radius: 9999px;
  display: grid;
  place-items: center;
  color: var(--text-white);
  box-shadow: 0 14px 28px rgba(17, 24, 39, 0.12); /* design-exception: icon depth shadow — directional drop shadow cannot use flat neo-tactile shadow tokens */
}

.portal-landing-card-icon--blue {
  background: var(--puente-blue);
}

.portal-landing-card-icon--purple {
  background: var(--puente-purple);
}

.portal-landing-card-icon--amber {
  background: var(--puente-warm);
}

.portal-landing-card-icon--pink {
  background: var(--puente-pink);
}

.portal-landing-card-icon--green {
  background: var(--puente-success);
}

.portal-landing-card-icon--orange {
  background: var(--puente-orange);
}

.portal-landing-card-icon .lucide {
  width: 32px;
  height: 32px;
}

.portal-landing-card-title {
  font-size: 24px;
  font-weight: 800;
  color: var(--puente-navy);
  letter-spacing: -0.02em;
}

.portal-landing-card-description {
  margin-top: 10px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 48ch;
}

.portal-landing-card-bottom {
  margin-top: auto;
  display: flex;
  justify-content: flex-end;
}

.portal-landing-card-link {
  font-size: 16px;
  font-weight: 600;
  color: var(--puente-blue);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: gap var(--transition-normal), color var(--transition-fast);
}


.portal-landing-footer {
  text-align: center;
  margin-top: 28px;
  padding-top: 24px;
  color: var(--text-muted);
  font-size: 0.875rem;
}

.portal-landing-footer p {
  margin: 0;
}

/* Gradient blob decoration */
.card-blob {
  position: absolute;
  top: 0;
  right: 0;
  width: 200px;
  height: 200px;
  filter: blur(40px);
  pointer-events: none;
}

.card-blob--blue {
  background: radial-gradient(circle, rgba(37, 99, 235, 0.15) 0%, transparent 70%); /* design-exception: decorative blob gradient — radial-gradient stops cannot use CSS variable as rgba channel */
}

.card-blob--purple {
  background: radial-gradient(circle, rgba(139, 92, 246, 0.16) 0%, transparent 70%); /* design-exception: decorative blob gradient */
}

.card-blob--amber {
  background: radial-gradient(circle, rgba(245, 158, 11, 0.16) 0%, transparent 70%); /* design-exception: decorative blob gradient */
}

.card-blob--pink {
  background: radial-gradient(circle, rgba(236, 72, 153, 0.16) 0%, transparent 70%); /* design-exception: decorative blob gradient */
}

.card-blob--green {
  background: radial-gradient(circle, rgba(16, 185, 129, 0.15) 0%, transparent 70%); /* design-exception: decorative blob gradient */
}

.card-blob--orange {
  background: radial-gradient(circle, rgba(234, 88, 12, 0.16) 0%, transparent 70%); /* design-exception: decorative blob gradient */
}

/* Responsive: desktop grid + paddings */
@media (min-width: 768px) {
  .portal-landing {
    padding: 48px 24px;
  }

  .portal-landing-header {
    padding: 24px 0 28px;
  }

  .portal-landing-grid {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
}

/* ============================================
   Hub Bento Grid (PUE-292, 293, 295)
   ============================================ */

/* Welcome metrics strip (PUE-293) */
.portal-welcome-metrics {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-top: var(--space-2);
}

/* Bento grid layout */
.hub-bento-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

.hub-bento-lead {
  grid-column: span 2;
  min-height: 240px;
}

/* Internal tools section (admin only) */
.hub-section {
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: 1px solid var(--tint-navy-10);
}

.hub-section-header {
  margin-bottom: var(--space-5);
}

.hub-section-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  text-transform: uppercase;
}

.hub-internal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

/* Smaller cards for internal section */
.portal-landing-card--sm {
  min-height: 140px;
}

/* ── Tool page utilities (audit-report, proposal-generator) ── */

/* Opportunity table column widths */
.col-opp     { width: 50%; }
.col-effort  { width: 20%; }
.col-impact  { width: 20%; }
.col-savings { width: 10%; }

/* Horizontal divider before detail section */
.section-divider {
  height: 1px;
  background: var(--tint-navy-10);
  margin: var(--space-6) 0;
}

/* Empty-state cell inside opportunity table */
.table-empty-cell {
  text-align: center;
  color: var(--text-muted);
}

/* Dependency row input (proposal-generator) */
.dep-input {
  flex: 1;
  margin-bottom: 0;
}

/* Price unit label (e.g. "/mes") inside product price */
.price-unit {
  font-size: 0.55em;
  font-weight: 400;
  color: var(--text-muted);
}

/* Empty-state hint paragraph */
.empty-hint {
  color: var(--text-muted);
  font-size: 0.85rem;
}

/* Timeline segment border-radius caps */
.timeline-seg--first { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.timeline-seg--last  { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }

.portal-landing-card--sm .card-blob {
  display: none;
}

/* Live metric on bento lead card */
.hub-card-metric {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--puente-blue);
  margin-top: var(--space-2);
}

/* Role-based visibility (PUE-295) */
.is-admin-hub { display: none; }
.is-client-hub { display: none; }
.is-client-only { display: none; }

/* Bento responsive */
@media (max-width: 768px) {
  .hub-bento-grid {
    grid-template-columns: 1fr 1fr;
  }
  .hub-bento-lead {
    grid-column: span 2;
  }
  .hub-internal-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  .hub-bento-grid {
    grid-template-columns: 1fr;
  }
  .hub-bento-lead {
    grid-column: span 1;
  }
  .hub-internal-grid {
    grid-template-columns: 1fr;
  }
}

/* Mobile sidebar drawer (PUE-294) */
@media (max-width: 767px) {
  .sidebar {
    position: fixed;
    top: 0;
    left: -220px;
    height: 100vh;
    z-index: 200;
    transition: left var(--transition-enter);
    width: 220px;
  }
  .sidebar.mobile-open {
    left: 0;
    box-shadow: var(--shadow-xl);
  }
  .sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 199;
  }
  .sidebar-overlay.visible {
    display: block;
  }
}

/* Hide hamburger toggle on desktop (PUE-294) */
@media (min-width: 768px) {
  .nav-toggle {
    display: none;
  }
}

/* ============================================
   Onboarding Wizard
   ============================================ */

/* Progress Bar */
.wizard-progress {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 2rem;
  padding: 0 1rem;
}

.wizard-progress-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px 4px;
  min-width: 0;
  flex-shrink: 0;
  transition: opacity var(--transition-fast);
}

.wizard-progress-step:disabled {
  opacity: 0.4;
  cursor: default;
}

.wizard-progress-number {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  display: grid;
  place-items: center;
  font-size: 0.8rem;
  font-weight: 700;
  background: var(--bg-gray);
  color: var(--text-muted);
  transition: all var(--transition-normal);
}

.wizard-progress-step.active .wizard-progress-number {
  background: var(--puente-blue);
  color: white;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.wizard-progress-step.completed .wizard-progress-number {
  background: var(--puente-success);
  color: white;
}

.wizard-progress-label {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 80px;
}

.wizard-progress-step.active .wizard-progress-label {
  color: var(--puente-blue);
  font-weight: 600;
}

.wizard-progress-line {
  flex: 1;
  height: 2px;
  background: var(--bg-gray);
  margin: 0 4px;
  margin-bottom: 22px;
}

/* Step Container */
.wizard-step-container {
  min-height: 300px;
}

.wizard-step {
  animation: fadeIn var(--transition-enter);
}

.wizard-step-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--puente-navy);
  margin-bottom: 1.5rem;
}

.wizard-fields {
  display: grid;
  gap: var(--space-5);
}

.wizard-fields .form-group {
  margin-bottom: 0;
}

/* Wizard Navigation */
.wizard-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--bg-gray);
}

/* Onboarding-specific layout */
.onboarding-container {
  max-width: 50rem;
  margin: 0 auto;
}

.skeleton-onboarding {
  height: 18.75rem;
}

.wizard-nav--hidden {
  display: none;
}

.wizard-nav-spacer {
  flex: 1;
}

.is-hidden {
  display: none;
}

.btn--top-space {
  margin-top: var(--space-6);
}

/* Onboarding completion state */
.onboarding-completed {
  max-width: 30rem;
  margin: 0 auto;
  text-align: center;
  padding: var(--space-6) 0;
}

.completed-mascot {
  width: 10rem;
  height: auto;
  margin-bottom: var(--space-5);
}

.completed-mascot-fallback::before {
  content: '🎉';
  font-size: 4rem;
  display: block;
  margin-bottom: var(--space-5);
}

.completed-title {
  color: var(--puente-navy);
  font-weight: 700;
  font-size: 1.5rem;
  margin: 0;
}

.completed-subtitle {
  color: var(--text-muted);
  margin-top: var(--space-3);
  max-width: 22.5rem;
  margin-left: auto;
  margin-right: auto;
}

/* Toggle Group */
.toggle-group {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.toggle-btn {
  padding: 8px 16px;
  border: 1px solid var(--bg-gray);
  border-radius: var(--radius-full);
  background: var(--bg-white);
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: all var(--transition-fast);
}

.toggle-btn:hover {
  border-color: var(--puente-blue);
  color: var(--puente-blue);
}

.toggle-btn.active {
  background: var(--puente-blue);
  color: white;
  border-color: var(--puente-blue);
}

/* Service Cards Grid */
.service-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

.service-card {
  position: relative;
  background: var(--bg-white);
  border: 2px solid var(--bg-gray);
  border-radius: var(--radius-xl);
  padding: 24px 20px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: all var(--transition-normal);
}


.service-card.selected {
  border-color: var(--puente-blue);
  background: rgba(37, 99, 235, 0.04);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.service-card-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-lg);
  display: grid;
  place-items: center;
  background: var(--puente-sky);
  color: var(--puente-blue);
  margin-bottom: 12px;
}

.service-card-icon .lucide {
  width: 22px;
  height: 22px;
}

.service-card-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 6px;
}

.service-card-desc {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.service-card-check {
  position: absolute;
  top: 12px;
  right: 12px;
  color: var(--bg-gray);
  transition: color var(--transition-fast);
}

.service-card-check .lucide {
  width: 22px;
  height: 22px;
}

.service-card.selected .service-card-check {
  color: var(--puente-blue);
}

/* File Upload */
.upload-zone {
  border: 2px dashed var(--bg-gray);
  border-radius: var(--radius-xl);
  padding: 3rem 2rem;
  text-align: center;
  cursor: pointer;
  transition: all var(--transition-normal);
  color: var(--text-muted);
}

.upload-zone:hover,
.upload-zone.dragover {
  border-color: var(--puente-blue);
  background: rgba(37, 99, 235, 0.03);
}

.upload-zone p {
  margin-top: 8px;
  font-size: 0.9rem;
}

.upload-zone-icon {
  width: 48px;
  height: 48px;
  color: var(--text-light);
}

.file-list {
  margin-top: 1rem;
  display: grid;
  gap: 8px;
}

.file-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--bg-gray);
}

.file-item-info {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.file-item-name {
  font-size: 0.9rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.file-item-size {
  font-size: 0.75rem;
  color: var(--text-light);
}

/* FAQ Entry Card */
.faq-entry-card {
  border: 1px solid var(--border-color, rgba(0, 0, 0, 0.08));
  border-radius: var(--radius-md);
  padding: 1rem;
  margin-bottom: 0.75rem;
}

.faq-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.faq-entry-label {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.faq-form-group--compact {
  margin-bottom: 0.5rem;
}

/* Hint Text (wizard steps) */
.hint-text {
  color: var(--text-muted);
  margin-bottom: 1.5rem;
}

/* Upload Hint (smaller font) */
.upload-hint-text {
  font-size: 0.8rem;
  color: var(--text-light);
}

/* Tag Input Container (guardrails) */
.tag-input-container {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--border-color, rgba(0, 0, 0, 0.08));
  border-radius: var(--radius-md);
  min-height: 42px;
  align-items: center;
}

.tag-input-field {
  border: none;
  outline: none;
  background: none;
  flex: 1;
  min-width: 120px;
  padding: 2px 4px;
  font-family: inherit;
  font-size: inherit;
}

/* Required field asterisk */
.required-mark {
  color: var(--puente-danger);
}

/* Review section inline helpers */
.review-inline-header {
  margin-top: 8px;
}

.review-inline-header strong {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.badge-group--top {
  margin-top: 4px;
}

/* Label Hint (inline hint beside label text) */
.label-hint {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 400;
}

/* Badge without pointer cursor (informational tags) */
.badge--no-cursor {
  cursor: default;
}

/* Tag remove button (inside badge) */
.tag-remove-btn {
  background: none;
  border: none;
  cursor: pointer;
  margin-left: 4px;
  padding: 0;
  color: inherit;
  font-size: 1rem;
  line-height: 1;
}

/* Small icon variant */
.icon-sm {
  width: 14px;
  height: 14px;
}

/* Medium icon variant — 18px (e.g. inbox header titles) */
.icon-md {
  width: 18px;
  height: 18px;
}

/* Title icon — 18px, inline with heading text */
.icon-title {
  width: 18px;
  height: 18px;
  vertical-align: middle;
  margin-right: var(--space-1);
  flex-shrink: 0;
}

/* Icon color: success state */
.icon-success {
  color: var(--puente-success);
}

/* Icon inside a button label — align with text */
.btn .icon-sm {
  display: inline-block;
  vertical-align: middle;
  margin-right: var(--space-1);
}

/* Button: small icon padding */
.btn--icon-sm {
  padding: 4px 8px;
}

/* Button: top gap spacing */
.btn--top-gap {
  margin-top: 1rem;
}

/* Last form-group in faq-entry (no margin) */
.faq-form-group--last {
  margin-bottom: 0;
}

/* Text muted utility */
.text-muted {
  color: var(--text-muted);
}

/* Badge group with top margin */
.badge-group--top {
  margin-top: 4px;
}

/* Review inline header with bottom gap */
.review-inline-header {
  margin-top: 8px;
}

.review-inline-header--gap {
  margin-bottom: 6px;
}

/* Review value text (plain text in review) */
.review-value-text {
  font-size: 0.9rem;
  margin-top: 4px;
}

/* Review Section */
.review-section {
  background: var(--bg-white);
  border: 1px solid var(--bg-gray);
  border-radius: var(--radius-xl);
  padding: 1.5rem;
  margin-bottom: 1rem;
}

.review-section-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--puente-navy);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

.review-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 24px;
}

.review-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 0;
}

.review-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  color: var(--text-light);
}

.review-value {
  font-size: 0.9rem;
  color: var(--text-dark);
}

/* Responsive Wizard */
@media (max-width: 768px) {
  .wizard-progress {
    padding: 0;
    overflow-x: auto;
  }

  .wizard-progress-label {
    display: none;
  }

  .wizard-progress-line {
    margin-bottom: 0;
  }

  .service-cards-grid {
    grid-template-columns: 1fr;
  }

  .review-grid {
    grid-template-columns: 1fr;
  }

  .wizard-nav {
    flex-wrap: wrap;
  }

  .checkbox-group {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   Language Toggle
   ============================================ */
.lang-toggle {
  display: flex;
  gap: 4px;
  background: var(--bg-gray);
  border-radius: var(--radius-full);
  padding: 3px;
}

.lang-toggle-btn {
  padding: 4px 12px;
  border: none;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all var(--transition-fast);
}

.lang-toggle-btn:hover {
  color: var(--text-dark);
}

.lang-toggle-btn.active {
  background: var(--bg-white);
  color: var(--puente-blue);
  box-shadow: var(--shadow-sm);
}

/* ============================================
   Checkbox Group (Multiple Choice)
   ============================================ */
.checkbox-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.checkbox-option {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--bg-gray);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  background: var(--bg-white);
  font-size: 0.9rem;
  color: var(--text-dark);
  line-height: 1.4;
}

.checkbox-option:hover {
  border-color: rgba(37, 99, 235, 0.3);
  background: rgba(37, 99, 235, 0.02);
}

.checkbox-option input[type="checkbox"] {
  flex-shrink: 0;
  accent-color: var(--puente-blue);
  width: 16px;
  height: 16px;
}

.checkbox-option.checked {
  border-color: var(--puente-blue);
  background: rgba(37, 99, 235, 0.04);
}

.checkbox-other-input {
  display: none;
  width: 100%;
  margin-top: 8px;
  padding: 8px 12px;
  border: 1px solid var(--bg-gray);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-family: inherit;
}

.checkbox-other-input.visible {
  display: block;
  flex-basis: 100%;
}

.checkbox-other-input:focus {
  outline: none;
  border-color: var(--puente-blue);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* ============================================
   Field Validation Errors
   ============================================ */
.field-invalid input,
.field-invalid select,
.field-invalid textarea {
  border-color: var(--puente-danger);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.field-invalid .toggle-group {
  outline: 2px solid var(--puente-danger);
  outline-offset: 2px;
  border-radius: var(--radius-full);
}

.field-invalid .checkbox-group {
  outline: 2px solid var(--puente-danger);
  outline-offset: 4px;
  border-radius: var(--radius-md);
}

.field-error-msg {
  display: block;
  margin-top: 4px;
  font-size: 0.8rem;
  color: var(--puente-danger);
  font-weight: 500;
}

/* ============================================
   KB List (my-chatbot / bot admin)
   ============================================ */
.kb-category {
  margin-bottom: 1rem;
}

.kb-category-title {
  margin-top: 0;
  margin-bottom: 0.75rem;
  font-size: 1rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.kb-count {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-muted);
  background: var(--bg-card);
  border-radius: var(--radius-full);
  padding: 0.1rem 0.5rem;
}

.kb-entries {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.kb-entry {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius-md);
  background: var(--bg-card);
}

.kb-entry-text {
  flex: 1;
  min-width: 0;
}

.kb-entry-question {
  font-weight: 500;
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kb-entry-content {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kb-entry-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

/* ============================================
   Ingestion Review Entries
   ============================================ */
.ingest-entry {
  margin-bottom: 0.5rem;
  padding: 0.75rem;
}

.ingest-entry-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.ingest-entry-actions {
  display: flex;
  gap: 4px;
  margin-left: auto;
}

.ingest-entry-question {
  font-weight: 600;
  font-size: 0.9rem;
}

.ingest-entry-content {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: 4px;
}

/* Small button + icon variants */
.btn-sm {
  padding: 4px 8px;
  font-size: 0.75rem;
}

.icon-sm {
  width: 14px;
  height: 14px;
}
/* ============================================
   Inbox Panel (Chatwoot relay — PUE-96)
   ============================================ */

/* Base icon button (32x32, rounded, muted) */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  border-radius: var(--radius-full);
  color: var(--text-muted);
  cursor: pointer;
  transition: background var(--transition-fast);
  flex-shrink: 0;
}
.btn-icon:hover { background: var(--bg-gray); }
.btn-icon svg { width: 16px; height: 16px; }

/* Refresh spin animation */
@keyframes rotate-once {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.spinning { animation: rotate-once var(--transition-smooth) 1; }

/* Badge base + variants */
.badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-full);
}
.badge-escalated { background: var(--puente-warm); color: white; }
.badge-resolved  { background: var(--bg-gray); color: var(--text-muted); }
.badge-pending   { background: var(--puente-sky); color: var(--puente-blue); }
.badge--warm     { background: var(--puente-warm); color: var(--text-dark); }

/* Panel header */
.inbox-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}
.inbox-title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
  color: var(--text-dark);
}
.inbox-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.inbox-unread-badge {
  background: var(--puente-blue);
  color: white;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-full);
}

/* Loading + error states */
.inbox-loading {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.5rem 0;
  color: var(--text-muted);
  font-size: 0.9375rem;
}
.inbox-error {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 1rem;
  background: rgba(239, 68, 68, 0.06); /* design-exception: no danger-tint token yet */
  border-radius: var(--radius-md);
  color: var(--puente-danger);
  font-size: 0.875rem;
}
.inbox-error svg { width: 16px; height: 16px; flex-shrink: 0; }

/* Conversation list */
.conversation-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.conversation-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 0.75rem;
  border-top: 1px solid var(--tint-navy-10);
  border-left: 3px solid transparent;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast);
}
.conversation-row:first-child { border-top: none; }
.conversation-row:hover {
  background: var(--bg-off-white);
}
.conversation-row.unread {
  border-left-color: var(--puente-blue);
}
.conversation-row.unread .conv-name { font-weight: 700; }

.conv-avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--puente-sky);
  color: var(--puente-blue);
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.conv-body { flex: 1; min-width: 0; }
.conv-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.conv-name  { font-size: 0.9375rem; color: var(--text-dark); }
.conv-time  { font-size: 0.75rem; color: var(--text-muted); margin-left: auto; }
.conv-preview {
  font-size: 0.875rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0.125rem 0 0;
}
.conv-arrow { color: var(--text-light); flex-shrink: 0; }
.conv-arrow svg { width: 16px; height: 16px; }

/* Thread view */
.thread-header {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--tint-navy-10);
  margin-bottom: 0.75rem;
}
.thread-contact-name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-dark);
  flex: 1;
}
.message-thread {
  max-height: 320px;
  overflow-y: auto;
  padding: 0.75rem 0;
  display: flex;
  flex-direction: column;
}
.message {
  display: flex;
  flex-direction: column;
  margin-bottom: 0.75rem;
  gap: 0.25rem;
}
.message-bot,
.message-customer { align-items: flex-start; }
.message-agent    { align-items: flex-end; }

.message-bubble {
  border-radius: var(--radius-md);
  padding: 0.5rem 0.75rem;
  max-width: 75%;
}
.message-bot .message-bubble,
.message-system .message-bubble { background: var(--bg-gray); color: var(--text-dark); }
.message-customer .message-bubble { background: var(--puente-sky); color: var(--text-dark); }
.message-agent .message-bubble    { background: var(--puente-blue); color: white; }

.message-sender {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.message-time { font-size: 0.6875rem; color: var(--text-light); }

/* Reply area */
.reply-area {
  border-top: 1px solid var(--tint-navy-10);
  padding-top: 0.75rem;
  margin-top: 0.5rem;
}
.reply-locked {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem;
  background: var(--bg-card);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  font-size: 0.875rem;
}
.reply-locked svg { width: 14px; height: 14px; color: var(--text-light); flex-shrink: 0; }
.reply-unlock-hint {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  color: var(--puente-success);
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.reply-unlock-hint svg { width: 14px; height: 14px; }
.reply-input {
  width: 100%;
  border: 1.5px solid var(--tint-navy-10);
  border-radius: var(--radius-md);
  padding: 0.625rem 0.75rem;
  font-size: 0.9375rem;
  font-family: inherit;
  resize: vertical;
}
.reply-input:focus {
  border-color: var(--puente-blue);
  outline: none;
  box-shadow: 0 0 0 3px var(--puente-sky);
}
.reply-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.5rem;
}
.reply-sender-hint { font-size: 0.75rem; color: var(--text-muted); }

/* Side-by-side inbox layout */
.inbox-split {
  display: grid;
  grid-template-columns: 300px 1fr;
  min-height: 400px;
}
.inbox-list-pane {
  border-right: 1px solid var(--tint-navy-10);
  overflow-y: auto;
  max-height: 500px;
}
.inbox-thread-pane {
  padding-left: var(--space-4);
  display: flex;
  flex-direction: column;
}

/* Active conversation highlight */
.conversation-row.active {
  background: var(--puente-sky);
  border-left-color: var(--puente-blue);
}
.conversation-row.active .conv-name { color: var(--puente-blue); font-weight: 700; }

/* Thread empty state (no conversation selected) */
.thread-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-light);
  gap: var(--space-2);
  padding: var(--space-6) 0;
}
.thread-empty svg { width: 40px; height: 40px; }
.thread-empty p { margin: 0; font-size: 0.9375rem; }

/* Expand message thread to fill available space */
.inbox-split .message-thread {
  flex: 1;
  min-height: 200px;
  max-height: 400px;
}

/* Reply gate (locked / bot-managed state) */
.reply-gate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--bg-card);
  border: 1.5px dashed var(--tint-navy-10);
  border-radius: var(--radius-md);
}
.reply-gate-info {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}
.reply-gate-info > svg { width: 20px; height: 20px; color: var(--text-light); flex-shrink: 0; margin-top: 0.125rem; }
.reply-gate-info strong { font-size: 0.875rem; color: var(--text-dark); display: block; }
.reply-gate-info p { font-size: 0.8125rem; color: var(--text-muted); margin: 0.125rem 0 0; }

/* Mobile back button — hidden on desktop */
.thread-back-btn { display: none; }

/* Panel swap animation (kept for mobile transitions) */
.panel-exit {
  transform: translateX(-100%);
  opacity: 0;
  pointer-events: none;
  transition: transform var(--transition-enter), opacity var(--transition-enter);
}
.panel-enter {
  transform: translateX(0);
  opacity: 1;
  transition: transform var(--transition-exit), opacity var(--transition-exit);
}

/* Mobile: stack views, swap on thread open */
@media (max-width: 768px) {
  .inbox-split { grid-template-columns: 1fr; min-height: auto; }
  .inbox-list-pane { border-right: none; max-height: none; }
  .inbox-thread-pane { padding-left: 0; }
  .inbox-split.thread-active .inbox-list-pane { display: none; }
  .thread-back-btn { display: inline-flex; }
  .reply-gate { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 480px) {
  .conv-time { margin-left: 0; width: 100%; }
}

/* Impersonation banner */
.impersonation-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: var(--puente-warm);
  color: #fff;
  padding: 0.5rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.85rem;
  gap: 0.5rem;
}
.impersonation-exit-btn {
  background: var(--tint-navy-20);
  border: none;
  color: #fff;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.8rem;
}

/* ============================================
   Chatbot Deploy Wizard — My Chatbot Page
   ============================================ */

/* Spinning loader icon */
.icon-spin { animation: spin 1s linear infinite; }

/* Progress bar (dot-based, deploy wizard) */
.wizard-progress-bar { display: flex; gap: var(--space-2); margin-bottom: var(--space-4); }
.wizard-step-wrap { flex: 1; text-align: center; }

/* Modal size modifiers */
.modal-content--wizard { max-width: 680px; }
.modal-content--ingest-review { max-width: 900px; max-height: 85vh; overflow-y: auto; }

/* Wizard footer navigation */
.wizard-footer { display: flex; justify-content: space-between; margin-top: var(--space-4); }

/* Deploy section wrapper */
.deploy-section-wrapper { max-width: 640px; margin: var(--space-8) auto 0; }

/* Wizard CTA card (initial deploy prompt) */
.wizard-cta-card { text-align: center; padding: var(--space-6); }
.wizard-cta-card h3 { margin-top: 0; }
.wizard-cta-card > p { color: var(--text-muted); margin-bottom: var(--space-4); }

/* Wizard icon circle color variants */
.wizard-icon-circle--blue { background: var(--puente-blue); }
.wizard-icon-circle--warm { background: var(--puente-warm); }

/* Wizard icon sizes (inside .wizard-icon-circle) */
.wizard-icon-lg { width: 36px; height: 36px; color: var(--text-white); }
.wizard-icon-md { width: 24px; height: 24px; color: var(--text-white); }
.wizard-icon-sm-alert { width: 20px; height: 20px; }

/* Wizard pending status card */
.wizard-pending-card { max-width: 640px; }
.wizard-pending-header { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.wizard-pending-title { margin: 0; }
.wizard-pending-subtitle { margin: var(--space-1) 0 0; color: var(--text-muted); font-size: 0.875rem; }
.wizard-summary-box { background: var(--bg-gray); padding: var(--space-3); margin-top: var(--space-3); }

/* Wizard rejected status card */
.wizard-rejected-card { max-width: 640px; border-left: 3px solid var(--puente-warm); }
.wizard-rejected-title { margin-top: 0; color: var(--puente-warm); display: flex; align-items: center; gap: var(--space-2); }
.wizard-rejected-note { color: var(--text-muted); }
.wizard-cta-btn { margin-top: var(--space-3); }

/* Wizard approved card */
.wizard-approved-card { max-width: 640px; }
.wizard-approved-msg { color: var(--puente-success); }

/* Wizard step content — shared patterns */
.wizard-step-intro { color: var(--text-muted); margin-bottom: var(--space-3); }
.wizard-info-row { display: flex; align-items: center; gap: var(--space-2); }
.icon-accent { color: var(--puente-blue); flex-shrink: 0; }
.icon-success { color: var(--puente-success); flex-shrink: 0; }
.icon-warn { color: var(--puente-warm); flex-shrink: 0; }

/* Wizard step 1 — personality preset grid */
.wizard-preset-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); margin-top: var(--space-1); }
.wizard-preset-item { cursor: pointer; text-align: center; padding: var(--space-3); }
.wizard-preset-icon { width: 28px; height: 28px; color: var(--text-muted); }
.wizard-preset-name { display: block; margin-top: var(--space-1); text-transform: capitalize; }

/* Wizard dos/donts grid */
.wizard-dodonts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-top: var(--space-2); }
.label-dos { color: var(--puente-success); }
.label-donts { color: var(--puente-danger); }
.icon-inline { vertical-align: -2px; }

/* Wizard step 2 — resources */
.wizard-resources-upload { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--bg-gray); display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.wizard-upload-label { cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-1); }
.wizard-upload-status { font-size: 0.875rem; color: var(--text-muted); }
.wizard-url-section { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--bg-gray); }
.wizard-url-label { font-size: 0.875rem; font-weight: 500; margin-bottom: var(--space-1); display: block; }
.wizard-url-form { display: flex; gap: var(--space-2); }
.wizard-url-status { font-size: 0.875rem; color: var(--text-muted); margin-top: var(--space-1); }

/* Wizard step 3 — FAQ */
.wizard-faq-list { display: grid; gap: var(--space-3); }
.wizard-faq-item { display: grid; gap: var(--space-1); }
.wizard-faq-label { font-size: 0.8rem; font-weight: 600; color: var(--text-muted); }
.wizard-hint { margin-top: var(--space-3); font-size: 0.875rem; color: var(--text-muted); }

/* Wizard step 4 — AI analysis */
.wizard-ai-fields { display: grid; gap: var(--space-3); }
.wizard-textarea-sm { font-size: 0.875rem; }
.wizard-ai-title { margin-top: var(--space-2); font-weight: 500; }
.wizard-ai-subtitle { color: var(--text-muted); font-size: 0.875rem; }
.wizard-ai-error-msg { color: var(--puente-danger); margin-bottom: var(--space-2); }
.wizard-ai-error-hint { margin-top: var(--space-2); font-size: 0.8rem; color: var(--text-muted); }

/* Wizard step 5 — review */
.wizard-warning-box { background: var(--tint-danger-5); border-left: 3px solid var(--puente-warm); padding: var(--space-3); border-radius: var(--radius-sm); margin-bottom: var(--space-3); }
.wizard-warning-title { font-size: 0.875rem; }
.wizard-warning-list { margin: var(--space-1) 0 0; padding-left: var(--space-4); font-size: 0.875rem; color: var(--text-muted); }
.wizard-review-grid { display: grid; gap: var(--space-2); }
.wizard-review-section { display: grid; gap: var(--space-2); }
.wizard-footnote { margin-top: var(--space-3); font-size: 0.875rem; color: var(--text-muted); }

/* Wizard resource list rows */
.wizard-resource-row { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) 0; border-bottom: 1px solid var(--bg-gray); }
.wizard-resource-size { color: var(--text-muted); font-size: 0.8rem; margin-left: auto; }
.wizard-resource-error { color: var(--text-muted); font-size: 0.875rem; }

/* ============================================
   KB Ingest Card (my-chatbot page)
   ============================================ */
.ingest-card { max-width: 800px; margin-top: var(--space-4); }
.ingest-card h3 { margin-top: 0; }
.ingest-card-desc { color: var(--text-muted); font-size: 0.875rem; margin-bottom: var(--space-3); }
.ingest-form { display: flex; gap: var(--space-2); }
.input-flex { flex: 1; }
.ingest-loading { margin-top: var(--space-2); color: var(--text-muted); font-size: 0.875rem; }

/* KB actions header */
.kb-actions-header { display: flex; justify-content: space-between; align-items: center; margin-top: var(--space-5); margin-bottom: var(--space-4); flex-wrap: wrap; gap: var(--space-2); }
.kb-actions-header h2 { margin: 0; }
.kb-header-controls { display: flex; gap: var(--space-2); align-items: center; }
.kb-search-input { width: 200px; }

/* Ingest review modal internals */
.ingest-review-hint { font-size: 0.875rem; margin-bottom: var(--space-4); }
.ingest-review-select-wrap { margin-bottom: var(--space-3); }
.ingest-review-select-label { font-size: 0.875rem; cursor: pointer; }
.ingest-review-actions { display: flex; gap: var(--space-3); margin-top: var(--space-4); }

/* ── My Chatbot Page — no-tenant state ──────────────────────────────────── */
body.no-tenant .nav-back { display: none; }
body.no-tenant .sidebar-sub-items { display: none !important; }
body.no-tenant .sidebar-product { pointer-events: none; cursor: default; }

/* ── Wizard step dots (chatbot deploy progress indicator) ───────────────── */
.wizard-step-dot {
  width: 28px; height: 28px; border-radius: 50%;
  margin: 0 auto var(--space-1); display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 600;
}
.wizard-step-dot--done    { background: var(--puente-success); color: var(--text-white); }
.wizard-step-dot--current { background: var(--puente-blue);    color: var(--text-white); }
.wizard-step-dot--pending { background: var(--bg-gray);        color: var(--text-muted); }
.wizard-step-label          { font-size: 0.7rem; }
.wizard-step-label--current { color: var(--text-dark); }
.wizard-step-label--other   { color: var(--text-muted); }

/* ── Wizard icon circle (base + size variant) ───────────────────────────── */
.wizard-icon-circle {
  width: 72px; height: 72px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto var(--space-4);
}
.wizard-icon-circle--sm { width: 48px; height: 48px; flex-shrink: 0; }

/* ── Wizard AI loading / error ──────────────────────────────────────────── */
.wizard-ai-loading { text-align: center; padding: var(--space-4) 0; }
.wizard-ai-loading .icon {
  animation: spin 1s linear infinite;
  width: 32px; height: 32px; color: var(--puente-blue);
}
.wizard-ai-error { text-align: center; padding: var(--space-3) 0; }

/* ── Wizard preset card ──────────────────────────────────────────────────── */
.wizard-preset-card { border: 2px solid var(--bg-gray); }
.wizard-preset-card.selected   { border-color: var(--puente-blue); }
.wizard-preset-card.selected i { color: var(--puente-blue); }

/* ── Wizard review card ──────────────────────────────────────────────────── */
.wizard-review-card {
  background: var(--bg-gray); padding: var(--space-3); border-radius: var(--radius-sm);
}

/* ── Admin Client Panel ───────────────────────────────────────────────────── */
.status-dot-sm {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  margin-right: 4px;
  vertical-align: middle;
  flex-shrink: 0;
}
.status-dot-sm--active { background: var(--puente-success); }
.status-dot-sm--paused { background: var(--puente-warm); }
.status-dot-sm--muted  { background: var(--text-muted); }

.bot-status-dot--active { background: var(--puente-success); }
.bot-status-dot--paused { background: var(--puente-warm); }
.bot-status-dot--muted  { background: var(--text-muted); }

.clickable-row { cursor: pointer; }
.actions-cell  { display: flex; gap: 4px; }
.btn-row       { display: flex; gap: var(--space-2); }

.stat--warn { border-left: 3px solid var(--puente-warm); }
.stat--warn .stat-number { color: var(--puente-warm); }

.divider-subtle {
  border: 0;
  border-top: 1px solid var(--bg-gray);
  margin: var(--space-3) 0;
}

.label-caps {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-2);
}

.grid-stack {
  display: grid;
  gap: var(--space-2);
}

.form-grid {
  display: grid;
  gap: var(--space-3);
}

.tab-bar--wrap { flex-wrap: wrap; }

.text-sm      { font-size: 0.875rem; }
.text-warn    { color: var(--puente-warm); }
.text-success { color: var(--puente-success); }

.detail-text {
  font-size: 0.875rem;
  color: var(--text-muted);
}
.detail-text--clipped {
  max-height: 5rem;
  overflow: hidden;
}

.pending-card {
  padding: var(--space-3);
  background: var(--bg-gray);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--puente-warm);
}

.bot-status-row {
  display: flex;
  gap: var(--space-2);
  align-items: flex-end;
}

.inline-flex-center {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.form-group--flex {
  margin: 0;
  flex: 1;
}

.input-mono {
  font-family: monospace;
  font-size: 0.875rem;
}

.mt-0 { margin-top: 0; }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.m-0  { margin: 0; }
.capitalize { text-transform: capitalize; }

/* ============================================
   Bot Config Page (bot.html)
   ============================================ */

/* Layout */
.bot-config-panel { max-width: 800px; }
.bot-status-header { display: flex; align-items: center; gap: var(--space-3); }
.bot-status-links { margin-left: auto; font-size: 0.875rem; }
.bot-form-actions { display: flex; gap: var(--space-3); align-items: center; }
.bot-form-save-status { color: var(--text-muted); font-size: 0.875rem; align-self: center; }

/* Knowledge tab */
.knowledge-tab-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-4); flex-wrap: wrap; gap: var(--space-2); }
.knowledge-search-input { width: 200px; }
.knowledge-tab-actions { display: flex; gap: var(--space-2); align-items: center; }

/* URL ingest card */
.url-ingest-form { display: flex; gap: var(--space-2); }
.url-ingest-input { flex: 1; }
.url-ingest-loading { display: none; margin-top: var(--space-2); color: var(--text-muted); font-size: 0.875rem; }

/* Ingest review modal */
.ingest-review-content { max-width: 900px; max-height: 85vh; overflow-y: auto; }
.ingest-select-all-row { margin-bottom: var(--space-3); font-size: 0.875rem; cursor: pointer; }

/* Knowledge table (JS-generated) */
.knowledge-category-card { margin-bottom: var(--space-4); }
.knowledge-table { width: 100%; font-size: 0.875rem; }
.knowledge-table th { text-align: left; }
.knowledge-col-question { max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
.knowledge-col-content { max-width: 400px; overflow: hidden; text-overflow: ellipsis; }
.knowledge-col-priority { text-align: center; }
.knowledge-col-actions { white-space: nowrap; }

/* Ingest entry cards (JS-generated) */
.ingest-entry-card { margin-bottom: var(--space-2); padding: var(--space-3); }
.ingest-entry-priority { font-size: 0.75rem; color: var(--text-muted); }
.ingest-entry-edit-btn { margin-left: auto; }

/* Empty state Puchy image */
.empty-state-puchy { display: block; margin: 0 auto var(--space-3); }

/* Settings page */
.settings-container { max-width: 700px; }
.settings-container .card + .card { margin-top: var(--space-4); }
.card-heading { margin-top: 0; margin-bottom: var(--space-5); }
.form-actions { display: flex; gap: var(--space-3); align-items: center; margin-top: var(--space-5); }
.info-list { list-style: none; margin: 0; padding: 0; }
.info-list dt { font-size: 0.875rem; color: var(--text-muted); margin-bottom: var(--space-1); }
.info-list dd { margin: 0; margin-bottom: var(--space-4); color: var(--text-dark); }