/* ============================================================
   TruckerProfit — tp_ui.css
   Modern design-system overlay. Built to replace the
   "uno más del montón" look with a heavy, opinionated UI.
   ------------------------------------------------------------
   Load AFTER tp_polish.css and BEFORE any page-level overrides.
   ============================================================ */

:root {
  /* ---- Brand tokens ---- */
  --tp-navy:        #0F1B38;
  --tp-navy-700:    #1A2A4E;
  --tp-navy-500:    #2A3D67;
  --tp-navy-300:    #6B7A99;
  --tp-cream:       #F5F0E6;
  --tp-cream-200:   #FAF7F0;
  --tp-cream-300:   #EFE8D8;
  --tp-orange:      #F46A2D;
  --tp-orange-600:  #D9531B;
  --tp-orange-100:  #FCE0D1;
  --tp-money:       #5E8C6B;
  --tp-money-600:   #4A7256;
  --tp-money-100:   #D7E5DC;
  --tp-danger:      #C0392B;
  --tp-warn:        #E0A82E;
  --tp-info:        #3E78B2;
  --tp-ink:         #0F1B38;
  --tp-ink-soft:    #3A4A6B;
  --tp-muted:       #8590A8;

  /* ---- Surfaces / glass ---- */
  --tp-bg:                var(--tp-cream);
  --tp-surface:           rgba(255,255,255,0.62);
  --tp-surface-solid:     #FFFFFF;
  --tp-border:            rgba(15,27,56,0.10);
  --tp-border-strong:     rgba(15,27,56,0.18);
  --tp-shadow-sm:         0 1px 2px rgba(15,27,56,.06), 0 1px 1px rgba(15,27,56,.04);
  --tp-shadow-md:         0 6px 18px -6px rgba(15,27,56,.18), 0 2px 4px rgba(15,27,56,.06);
  --tp-shadow-lg:         0 22px 48px -16px rgba(15,27,56,.28), 0 4px 10px rgba(15,27,56,.08);
  --tp-shadow-glow:       0 0 0 4px rgba(244,106,45,.16);

  /* ---- Type ---- */
  --tp-font-display: 'Syne', ui-sans-serif, system-ui, sans-serif;
  --tp-font-body:    'DM Sans', ui-sans-serif, system-ui, sans-serif;
  --tp-font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  --tp-fs-xs:  clamp(.72rem, .68rem + .12vw, .78rem);
  --tp-fs-sm:  clamp(.82rem, .78rem + .15vw, .9rem);
  --tp-fs-md:  clamp(.95rem, .9rem + .2vw, 1.02rem);
  --tp-fs-lg:  clamp(1.12rem, 1.04rem + .35vw, 1.3rem);
  --tp-fs-xl:  clamp(1.4rem, 1.2rem + .8vw, 1.85rem);
  --tp-fs-2xl: clamp(1.9rem, 1.5rem + 1.6vw, 2.75rem);
  --tp-fs-3xl: clamp(2.4rem, 1.8rem + 2.4vw, 3.6rem);

  /* ---- Geometry ---- */
  --tp-r-sm:  8px;
  --tp-r-md:  14px;
  --tp-r-lg:  20px;
  --tp-r-xl:  28px;
  --tp-r-pill: 999px;

  --tp-space-1: 4px;
  --tp-space-2: 8px;
  --tp-space-3: 12px;
  --tp-space-4: 16px;
  --tp-space-5: 24px;
  --tp-space-6: 32px;
  --tp-space-7: 48px;

  --tp-ease:     cubic-bezier(.2,.7,.2,1);
  --tp-ease-out: cubic-bezier(.16,1,.3,1);
  --tp-dur-fast: 140ms;
  --tp-dur:      220ms;
  --tp-dur-slow: 420ms;

  /* ---- Gradients ---- */
  --tp-grad-border:   linear-gradient(135deg, rgba(244,106,45,.55), rgba(94,140,107,.45) 60%, rgba(15,27,56,.25));
  --tp-grad-accent:   linear-gradient(135deg, #F46A2D 0%, #FF8A4F 50%, #F46A2D 100%);
  --tp-grad-navy:     linear-gradient(135deg, #0F1B38 0%, #1A2A4E 60%, #243760 100%);
  --tp-grad-money:    linear-gradient(135deg, #5E8C6B 0%, #79A98A 100%);
  --tp-grad-surface:  linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.46));
}

/* ============ DARK THEME ============ */
[data-theme="dark"] {
  --tp-bg:            #0B1426;
  --tp-cream:         #0B1426;
  --tp-cream-200:    #111C36;
  --tp-cream-300:   #16223F;
  --tp-ink:          #F1EEE6;
  --tp-ink-soft:     #B9C2D6;
  --tp-muted:        #7E89A6;
  --tp-surface:      rgba(255,255,255,0.04);
  --tp-surface-solid:#111C36;
  --tp-border:       rgba(255,255,255,0.08);
  --tp-border-strong:rgba(255,255,255,0.16);
  --tp-grad-surface: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  --tp-shadow-sm:    0 1px 2px rgba(0,0,0,.4);
  --tp-shadow-md:    0 8px 22px -8px rgba(0,0,0,.55), 0 2px 4px rgba(0,0,0,.4);
  --tp-shadow-lg:    0 28px 56px -18px rgba(0,0,0,.7), 0 6px 12px rgba(0,0,0,.45);
}

/* ============ BASE ============ */
.tp-ui, .tp-ui * { box-sizing: border-box; }

body.tp-ui-enabled {
  background: var(--tp-bg);
  color: var(--tp-ink);
  font-family: var(--tp-font-body);
  font-size: var(--tp-fs-md);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.tp-h1, .tp-h2, .tp-h3 {
  font-family: var(--tp-font-display);
  letter-spacing: -.02em;
  color: var(--tp-ink);
  margin: 0 0 var(--tp-space-3);
  font-weight: 700;
}
.tp-h1 { font-size: var(--tp-fs-3xl); line-height: 1.02; }
.tp-h2 { font-size: var(--tp-fs-2xl); line-height: 1.1; }
.tp-h3 { font-size: var(--tp-fs-xl);  line-height: 1.2; }

.tp-mono { font-family: var(--tp-font-mono); font-variant-numeric: tabular-nums; }

/* Custom thin scrollbar */
.tp-ui *::-webkit-scrollbar { width: 10px; height: 10px; }
.tp-ui *::-webkit-scrollbar-track { background: transparent; }
.tp-ui *::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--tp-navy), var(--tp-navy-500));
  border-radius: var(--tp-r-pill);
  border: 2px solid var(--tp-cream);
}
.tp-ui *::-webkit-scrollbar-thumb:hover { background: var(--tp-navy); }
.tp-ui * { scrollbar-color: var(--tp-navy) transparent; scrollbar-width: thin; }

/* ============ GRAIN OVERLAY ============ */
.tp-grain { position: relative; }
.tp-grain::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: .35;
  mix-blend-mode: multiply;
  background-image:
    radial-gradient(rgba(15,27,56,.05) 1px, transparent 1px),
    radial-gradient(rgba(15,27,56,.04) 1px, transparent 1px);
  background-size: 3px 3px, 7px 7px;
  background-position: 0 0, 1px 2px;
  border-radius: inherit;
}

/* ============ CARD (glass + gradient border) ============ */
.tp-card {
  position: relative;
  padding: var(--tp-space-5);
  border-radius: var(--tp-r-lg);
  background: var(--tp-grad-surface);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: var(--tp-shadow-md);
  transition: transform var(--tp-dur) var(--tp-ease),
              box-shadow var(--tp-dur) var(--tp-ease);
  isolation: isolate;
  color: var(--tp-ink);
}
.tp-card::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--tp-grad-border);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.tp-card:hover { transform: translateY(-3px); box-shadow: var(--tp-shadow-lg); }
.tp-card--flat { backdrop-filter: none; background: var(--tp-surface-solid); }
.tp-card--dark { background: var(--tp-grad-navy); color: #fff; }
.tp-card--dark .tp-card-title { color: #fff; }

.tp-card-title {
  font-family: var(--tp-font-display);
  font-size: var(--tp-fs-lg);
  letter-spacing: -.01em;
  margin: 0 0 var(--tp-space-2);
  font-weight: 700;
}
.tp-card-sub {
  color: var(--tp-muted);
  font-size: var(--tp-fs-sm);
  margin: 0 0 var(--tp-space-4);
}

/* ============ STAT TILE ============ */
.tp-stat {
  position: relative;
  padding: var(--tp-space-5);
  border-radius: var(--tp-r-lg);
  background: var(--tp-surface-solid);
  box-shadow: var(--tp-shadow-sm);
  overflow: hidden;
  transition: transform var(--tp-dur) var(--tp-ease), box-shadow var(--tp-dur) var(--tp-ease);
}
.tp-stat::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--tp-grad-border);
  opacity: .14;
  pointer-events: none;
}
.tp-stat:hover { transform: translateY(-2px); box-shadow: var(--tp-shadow-md); }

.tp-stat-label {
  display: block;
  font-size: var(--tp-fs-xs);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--tp-muted);
  font-weight: 600;
}
.tp-stat-value {
  display: block;
  font-family: var(--tp-font-display);
  font-size: var(--tp-fs-2xl);
  font-weight: 700;
  letter-spacing: -.02em;
  margin-top: 2px;
  color: var(--tp-ink);
  font-variant-numeric: tabular-nums;
}
.tp-stat-delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--tp-fs-sm);
  font-weight: 600;
  margin-top: 4px;
}
.tp-stat-delta--up   { color: var(--tp-money); }
.tp-stat-delta--down { color: var(--tp-danger); }
.tp-stat-spark {
  height: 36px;
  margin-top: var(--tp-space-3);
  border-radius: var(--tp-r-sm);
  background:
    linear-gradient(180deg, transparent 60%, rgba(244,106,45,.18)),
    repeating-linear-gradient(90deg, rgba(15,27,56,.05) 0 1px, transparent 1px 12px);
  position: relative;
}
.tp-stat-spark::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--tp-orange);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 30' preserveAspectRatio='none'><polyline points='0,22 8,18 16,24 24,12 32,16 40,8 48,14 56,6 64,18 72,10 80,16 88,4 100,12' fill='none' stroke='black' stroke-width='2.4'/></svg>") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 30' preserveAspectRatio='none'><polyline points='0,22 8,18 16,24 24,12 32,16 40,8 48,14 56,6 64,18 72,10 80,16 88,4 100,12' fill='none' stroke='black' stroke-width='2.4'/></svg>") center / 100% 100% no-repeat;
}

/* Animated counter */
@keyframes tp-tick { from { transform: translateY(6px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.tp-count { animation: tp-tick var(--tp-dur-slow) var(--tp-ease-out) both; display: inline-block; }

/* ============ BUTTONS ============ */
.tp-btn,
.tp-btn-primary, .tp-btn-ghost, .tp-btn-danger {
  --_bg: var(--tp-orange);
  --_fg: #fff;
  --_bd: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  font: inherit;
  font-weight: 600;
  font-size: var(--tp-fs-sm);
  letter-spacing: .01em;
  color: var(--_fg);
  background: var(--_bg);
  border: 1px solid var(--_bd);
  border-radius: var(--tp-r-pill);
  cursor: pointer;
  user-select: none;
  position: relative;
  overflow: hidden;
  transition: transform var(--tp-dur-fast) var(--tp-ease),
              box-shadow var(--tp-dur) var(--tp-ease),
              background var(--tp-dur) var(--tp-ease);
  box-shadow: var(--tp-shadow-sm);
}
.tp-btn:focus-visible,
.tp-btn-primary:focus-visible, .tp-btn-ghost:focus-visible, .tp-btn-danger:focus-visible {
  outline: none; box-shadow: var(--tp-shadow-glow), var(--tp-shadow-md);
}
.tp-btn:active,
.tp-btn-primary:active, .tp-btn-ghost:active, .tp-btn-danger:active { transform: scale(.97); }

/* Shimmer hover sweep */
.tp-btn::after,
.tp-btn-primary::after, .tp-btn-ghost::after, .tp-btn-danger::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform var(--tp-dur-slow) var(--tp-ease-out);
  pointer-events: none;
}
.tp-btn:hover::after,
.tp-btn-primary:hover::after, .tp-btn-ghost:hover::after, .tp-btn-danger:hover::after {
  transform: translateX(120%);
}

.tp-btn-primary {
  --_bg: var(--tp-grad-accent);
  --_fg: #fff;
  background-image: var(--tp-grad-accent);
  box-shadow: 0 6px 18px -6px rgba(244,106,45,.55), inset 0 -2px 0 rgba(0,0,0,.08);
}
.tp-btn-primary:hover { transform: translateY(-1px); }

.tp-btn-ghost {
  --_bg: transparent;
  --_fg: var(--tp-ink);
  --_bd: var(--tp-border-strong);
  backdrop-filter: blur(6px);
}
.tp-btn-ghost:hover { background: rgba(15,27,56,.05); }

.tp-btn-danger {
  --_bg: linear-gradient(135deg, #E04A3B, #C0392B);
  --_fg: #fff;
  background-image: linear-gradient(135deg,#E04A3B,#C0392B);
  box-shadow: 0 6px 18px -6px rgba(192,57,43,.55);
}

.tp-btn--sm { padding: 6px 12px; font-size: var(--tp-fs-xs); }
.tp-btn--lg { padding: 14px 26px; font-size: var(--tp-fs-md); }
.tp-btn--block { display: flex; width: 100%; }

/* ============ CHIPS ============ */
.tp-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: var(--tp-fs-xs);
  font-weight: 600;
  letter-spacing: .02em;
  border-radius: var(--tp-r-pill);
  background: rgba(15,27,56,.08);
  color: var(--tp-ink);
  line-height: 1;
}
.tp-chip::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: .65;
}
.tp-chip--success { background: var(--tp-money-100); color: var(--tp-money-600); }
.tp-chip--warn    { background: #FBEFD2;            color: #8A6818; }
.tp-chip--danger  { background: #F8D9D4;            color: var(--tp-danger); }
.tp-chip--info    { background: #D8E5F3;            color: var(--tp-info); }
.tp-chip--accent  { background: var(--tp-orange-100); color: var(--tp-orange-600); }
.tp-chip--ghost   { background: transparent; border: 1px solid var(--tp-border-strong); color: var(--tp-ink-soft); }

/* ============ SKELETON ============ */
@keyframes tp-shimmer { 0% { background-position: -300px 0; } 100% { background-position: 300px 0; } }
.tp-skeleton {
  display: block;
  height: 14px;
  border-radius: var(--tp-r-sm);
  background:
    linear-gradient(90deg,
      rgba(15,27,56,.06) 0%,
      rgba(15,27,56,.12) 50%,
      rgba(15,27,56,.06) 100%);
  background-size: 600px 100%;
  animation: tp-shimmer 1.4s linear infinite;
}
.tp-skeleton--lg { height: 24px; }
.tp-skeleton--circle { width: 40px; height: 40px; border-radius: 50%; }

/* ============ TABLE ============ */
.tp-table-wrap {
  background: var(--tp-surface-solid);
  border-radius: var(--tp-r-lg);
  box-shadow: var(--tp-shadow-sm);
  overflow: hidden;
  border: 1px solid var(--tp-border);
}
.tp-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--tp-fs-sm);
}
.tp-table thead th {
  position: sticky; top: 0; z-index: 1;
  text-align: left;
  font-family: var(--tp-font-body);
  text-transform: uppercase;
  font-size: var(--tp-fs-xs);
  letter-spacing: .14em;
  color: var(--tp-muted);
  background: var(--tp-cream-200);
  padding: 12px 16px;
  border-bottom: 1px solid var(--tp-border);
  font-weight: 700;
}
.tp-table tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--tp-border);
  color: var(--tp-ink);
  vertical-align: middle;
}
.tp-table tbody tr:nth-child(even) td { background: rgba(15,27,56,.018); }
.tp-table tbody tr { transition: background var(--tp-dur-fast) var(--tp-ease); }
.tp-table tbody tr:hover td { background: rgba(244,106,45,.06); }
.tp-table tbody tr:last-child td { border-bottom: 0; }

/* ============ INPUTS (floating label) ============ */
.tp-field {
  position: relative;
  display: block;
  margin: 0 0 var(--tp-space-4);
}
.tp-input, .tp-textarea, .tp-select {
  width: 100%;
  padding: 22px 14px 10px;
  font: inherit;
  color: var(--tp-ink);
  background: var(--tp-surface-solid);
  border: 1px solid var(--tp-border-strong);
  border-radius: var(--tp-r-md);
  outline: none;
  transition: border-color var(--tp-dur) var(--tp-ease),
              box-shadow var(--tp-dur) var(--tp-ease),
              background var(--tp-dur) var(--tp-ease);
}
.tp-textarea { min-height: 110px; resize: vertical; }
.tp-input:focus, .tp-textarea:focus, .tp-select:focus {
  border-color: var(--tp-orange);
  box-shadow: var(--tp-shadow-glow);
  background: #fff;
}
.tp-field > label {
  position: absolute;
  left: 14px; top: 16px;
  font-size: var(--tp-fs-sm);
  color: var(--tp-muted);
  pointer-events: none;
  transform-origin: left top;
  transition: transform var(--tp-dur) var(--tp-ease), color var(--tp-dur) var(--tp-ease);
}
.tp-input:focus + label,
.tp-input:not(:placeholder-shown) + label,
.tp-textarea:focus + label,
.tp-textarea:not(:placeholder-shown) + label,
.tp-select:focus + label,
.tp-select:not([data-empty="true"]) + label {
  transform: translateY(-10px) scale(.78);
  color: var(--tp-orange-600);
}

/* ============ DIVIDER / SECTION HEADER ============ */
.tp-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--tp-border-strong), transparent);
  margin: var(--tp-space-5) 0;
  border: 0;
}
.tp-eyebrow {
  display: inline-block;
  font-family: var(--tp-font-mono);
  font-size: var(--tp-fs-xs);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--tp-orange-600);
  margin-bottom: var(--tp-space-2);
}

/* ============ TOAST ============ */
#tp-toast-root {
  position: fixed;
  right: 20px; bottom: 20px;
  display: flex;
  flex-direction: column-reverse;
  gap: 12px;
  z-index: 9000;
  max-width: 360px;
}
.tp-toast {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px 16px;
  background: var(--tp-surface-solid);
  border: 1px solid var(--tp-border);
  border-radius: var(--tp-r-md);
  box-shadow: var(--tp-shadow-lg);
  overflow: hidden;
  font-size: var(--tp-fs-sm);
  color: var(--tp-ink);
  transform: translateX(110%);
  opacity: 0;
  transition: transform var(--tp-dur) var(--tp-ease-out), opacity var(--tp-dur) var(--tp-ease-out);
  touch-action: pan-y;
}
.tp-toast.is-in  { transform: translateX(0); opacity: 1; }
.tp-toast.is-out { transform: translateX(110%); opacity: 0; }
.tp-toast__icon {
  flex: 0 0 28px; width: 28px; height: 28px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: #fff;
  font-weight: 700;
  font-family: var(--tp-font-display);
}
.tp-toast--success .tp-toast__icon { background: var(--tp-money); }
.tp-toast--error   .tp-toast__icon { background: var(--tp-danger); }
.tp-toast--warning .tp-toast__icon { background: var(--tp-warn); }
.tp-toast--info    .tp-toast__icon { background: var(--tp-info); }
.tp-toast__body { flex: 1 1 auto; min-width: 0; }
.tp-toast__title { font-weight: 700; margin: 0 0 2px; }
.tp-toast__msg { color: var(--tp-ink-soft); margin: 0; }
.tp-toast__action {
  background: transparent;
  border: 0;
  color: var(--tp-orange-600);
  font-weight: 700;
  cursor: pointer;
  padding: 6px 0 0;
  font-size: var(--tp-fs-xs);
  text-transform: uppercase;
  letter-spacing: .12em;
}
.tp-toast__close {
  background: transparent; border: 0; cursor: pointer;
  color: var(--tp-muted); font-size: 18px; line-height: 1;
  padding: 0 0 0 6px;
}
.tp-toast__bar {
  position: absolute; left: 0; bottom: 0;
  height: 3px;
  width: 100%;
  background: var(--tp-orange);
  transform-origin: left center;
  transform: scaleX(1);
}
.tp-toast--success .tp-toast__bar { background: var(--tp-money); }
.tp-toast--error   .tp-toast__bar { background: var(--tp-danger); }
.tp-toast--warning .tp-toast__bar { background: var(--tp-warn); }
.tp-toast--info    .tp-toast__bar { background: var(--tp-info); }

/* ============ MODAL ============ */
#tp-modal-root {
  position: fixed; inset: 0;
  display: none;
  z-index: 9500;
}
#tp-modal-root.is-open { display: block; }
.tp-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(15,27,56,.55);
  backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  opacity: 0;
  transition: opacity var(--tp-dur) var(--tp-ease);
}
#tp-modal-root.is-open .tp-modal__backdrop { opacity: 1; }
.tp-modal__dialog {
  position: relative;
  margin: 8vh auto 0;
  width: min(560px, 92vw);
  background: var(--tp-surface-solid);
  border-radius: var(--tp-r-lg);
  box-shadow: var(--tp-shadow-lg);
  border: 1px solid var(--tp-border);
  transform: translateY(12px) scale(.96);
  opacity: 0;
  transition: transform var(--tp-dur-slow) var(--tp-ease-out),
              opacity var(--tp-dur) var(--tp-ease-out);
  overflow: hidden;
}
#tp-modal-root.is-open .tp-modal__dialog { transform: translateY(0) scale(1); opacity: 1; }
.tp-modal__dialog[data-size="sm"] { width: min(420px, 92vw); }
.tp-modal__dialog[data-size="lg"] { width: min(820px, 92vw); }
.tp-modal__head {
  padding: 22px 24px 6px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.tp-modal__title {
  font-family: var(--tp-font-display);
  font-size: var(--tp-fs-lg);
  font-weight: 700;
  letter-spacing: -.01em;
  margin: 0;
}
.tp-modal__close {
  background: transparent; border: 0; cursor: pointer;
  color: var(--tp-muted); font-size: 20px; line-height: 1;
}
.tp-modal__body {
  padding: 8px 24px 16px;
  color: var(--tp-ink-soft);
  font-size: var(--tp-fs-md);
  max-height: 60vh;
  overflow: auto;
}
.tp-modal__foot {
  padding: 14px 24px 20px;
  display: flex; gap: 10px; justify-content: flex-end;
  border-top: 1px solid var(--tp-border);
  background: var(--tp-cream-200);
}

/* ============ FEEDBACK WIDGET ============ */
.tp-fb-launcher {
  position: fixed;
  right: 22px; bottom: 22px;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--tp-grad-accent);
  color: #fff;
  display: grid; place-items: center;
  cursor: pointer;
  border: 0;
  box-shadow: 0 14px 30px -10px rgba(244,106,45,.55), 0 4px 8px rgba(15,27,56,.18);
  z-index: 90; /* BUG5: below sidebar(100) */
  transition: transform var(--tp-dur) var(--tp-ease);
}
.tp-fb-launcher:hover { transform: translateY(-2px) scale(1.04); }
.tp-fb-launcher svg { width: 24px; height: 24px; }
.tp-fb-pulse::after {
  content: "";
  position: absolute; inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(244,106,45,.55);
  animation: tp-pulse 1.8s var(--tp-ease) infinite;
}
@keyframes tp-pulse {
  0% { transform: scale(.9); opacity: .9; }
  100% { transform: scale(1.6); opacity: 0; }
}

.tp-fb-card {
  position: fixed;
  right: 22px; bottom: 92px;
  width: min(360px, calc(100vw - 44px));
  background: var(--tp-surface-solid);
  border-radius: var(--tp-r-lg);
  box-shadow: var(--tp-shadow-lg);
  border: 1px solid var(--tp-border);
  padding: 18px 18px 16px;
  z-index: 91; /* BUG5: below sidebar(100) */
  transform: translateY(12px) scale(.96);
  opacity: 0;
  pointer-events: none;
  transition: transform var(--tp-dur) var(--tp-ease-out), opacity var(--tp-dur) var(--tp-ease-out);
}
.tp-fb-card.is-open { transform: translateY(0) scale(1); opacity: 1; pointer-events: auto; }
.tp-fb-card h4 {
  font-family: var(--tp-font-display);
  font-size: var(--tp-fs-lg);
  margin: 0 0 4px;
  letter-spacing: -.01em;
  font-weight: 700;
}
.tp-fb-card p.tp-fb-sub {
  font-size: var(--tp-fs-sm);
  color: var(--tp-muted);
  margin: 0 0 12px;
}
.tp-fb-nps {
  display: grid; grid-template-columns: repeat(11, 1fr); gap: 4px;
  margin: 4px 0 14px;
}
.tp-fb-nps button {
  height: 30px;
  background: var(--tp-cream-200);
  border: 1px solid var(--tp-border);
  border-radius: 8px;
  font: 600 12px var(--tp-font-mono);
  color: var(--tp-ink-soft);
  cursor: pointer;
  transition: all var(--tp-dur-fast) var(--tp-ease);
}
.tp-fb-nps button:hover { transform: translateY(-1px); border-color: var(--tp-orange); }
.tp-fb-nps button.is-active {
  background: var(--tp-grad-accent);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 6px 16px -6px rgba(244,106,45,.55);
}
.tp-fb-emoji {
  display: flex; justify-content: space-between; gap: 6px;
  margin-bottom: 12px;
}
.tp-fb-emoji button {
  flex: 1;
  font-size: 26px;
  background: var(--tp-cream-200);
  border: 1px solid var(--tp-border);
  border-radius: 12px;
  padding: 10px 0;
  cursor: pointer;
  transition: transform var(--tp-dur-fast) var(--tp-ease);
}
.tp-fb-emoji button:hover { transform: scale(1.1); }
.tp-fb-emoji button.is-active { background: var(--tp-orange-100); border-color: var(--tp-orange); }
.tp-fb-comment {
  width: 100%; min-height: 70px; resize: vertical;
  padding: 10px 12px;
  border: 1px solid var(--tp-border-strong);
  border-radius: var(--tp-r-md);
  font: inherit;
  font-size: var(--tp-fs-sm);
  margin-bottom: 12px;
}
.tp-fb-comment:focus { outline: none; border-color: var(--tp-orange); box-shadow: var(--tp-shadow-glow); }
.tp-fb-actions { display: flex; align-items: center; justify-content: space-between; }
.tp-fb-skip {
  background: transparent; border: 0;
  color: var(--tp-muted); cursor: pointer; font-size: var(--tp-fs-xs);
  text-decoration: underline; padding: 0;
}
.tp-fb-thanks {
  text-align: center;
  padding: 22px 8px 6px;
}
.tp-fb-thanks h4 { color: var(--tp-money-600); }

.tp-confetti {
  position: fixed; left: 0; top: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 8002;
  overflow: hidden;
}
.tp-confetti span {
  position: absolute;
  width: 8px; height: 14px;
  top: -20px;
  animation: tp-fall linear forwards;
}
@keyframes tp-fall {
  to { transform: translateY(110vh) rotate(720deg); opacity: 0; }
}

/* ============ ALERT / BANNER ============ */
.tp-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--tp-r-md);
  background: var(--tp-cream-300);
  color: var(--tp-ink);
  font-size: var(--tp-fs-sm);
  border-left: 4px solid var(--tp-orange);
  box-shadow: var(--tp-shadow-sm);
  position: relative;
}
.tp-banner--danger  { border-left-color: var(--tp-danger);  background: #FBE6E2; }
.tp-banner--warn    { border-left-color: var(--tp-warn);    background: #FBEFD2; }
.tp-banner--info    { border-left-color: var(--tp-info);    background: #DCE8F4; }
.tp-banner--success { border-left-color: var(--tp-money);   background: var(--tp-money-100); }
.tp-banner__close {
  background: transparent; border: 0; cursor: pointer;
  color: var(--tp-muted); margin-left: auto; padding: 4px 8px;
}
.tp-banner__snooze {
  background: transparent; border: 1px solid var(--tp-border-strong);
  border-radius: var(--tp-r-pill); padding: 4px 10px; font-size: var(--tp-fs-xs);
  cursor: pointer; color: var(--tp-ink-soft);
}

#tp-alerts-root {
  display: flex; flex-direction: column; gap: 8px;
  margin: 10px 0;
}

/* ============ UTILITIES ============ */
.tp-flex { display: flex; }
.tp-row  { display: flex; gap: var(--tp-space-3); align-items: center; }
.tp-grid { display: grid; gap: var(--tp-space-4); }
.tp-grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.tp-grid--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 900px) {
  .tp-grid--3, .tp-grid--4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .tp-grid--3, .tp-grid--4 { grid-template-columns: 1fr; }
}
.tp-mt-0 { margin-top: 0; }
.tp-mb-0 { margin-bottom: 0; }
.tp-text-muted { color: var(--tp-muted); }
.tp-text-accent { color: var(--tp-orange-600); }
.tp-text-money  { color: var(--tp-money-600); }

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* === KPI alias (kpi-card → tp-stat) === */
@import url("./tp_kpi_alias.css?v=20260529");


/* BUG 5 FIX: feedback widget MUST NOT intercept sidebar/header clicks */
@media (max-width: 1100px) {
  .tp-fb-launcher { right: 16px !important; bottom: 16px !important; }
  .tp-fb-card    { right: 16px !important; bottom: 88px !important; left: auto !important; }
}
.tp-fb-launcher { z-index: 90 !important; }
.tp-fb-card { z-index: 91 !important; }
/* When card is closed, ensure it accepts no pointer events */
.tp-fb-card:not(.is-open) { pointer-events: none !important; }

/* === WS-8 PAN-01: status badges === */
@import url('./tp_status_badges.css?v=20260530b');