/* ============================================================================
   Travelieons design system — ported from "Travelieons CRM.dc.html" concept.
   Terracotta-orange brand on a warm cream canvas. Violet is retained ONLY as
   the AI accent, so AI surfaces stay distinct from the brand. Bootstrap 5
   augmentation, no build step. Self-hosted fonts (no CDN).
   See files/design/TRAVELIEONS_DESIGN_CONCEPT.md.
   ========================================================================== */
@import url("../fonts/fonts.css");

:root {
  /* Brand */
  --ti-primary: #F26B32;
  --ti-primary-2: #FB8B3D;
  --ti-primary-deep: #241207;
  --ti-primary-deeper: #3A2416;
  --ti-primary-light: #FDBA74;
  --ti-brand-tint: #FFEEDD;
  /* Brand as raw channels, for the rgba() tints used by shadows and active states. */
  --ti-primary-rgb: 242, 107, 50;
  --ti-ink: #1a1340;              /* editorial headings + solid dark buttons */

  /* Sunset accent / money-in */
  --ti-accent: #FF7A59;
  --ti-amber: #F59E0B;
  --ti-magenta: #B14BE0;
  --ti-pink: #E11D74;

  /* AI accent — deliberately still violet so AI reads as its own thing */
  --ti-ai-a: #E0409A;
  --ti-ai-b: #8B5CF6;
  --ti-ai-c: #6D28D9;

  /* Super Admin (light indigo console) */
  --ti-admin-accent: #3538CD;
  --ti-admin-accent-2: #4F46E5;
  --ti-admin-bg: #F6FBFA;
  --ti-admin-bg-2: #EDF5F3;
  --ti-admin-surface: #FFFFFF;
  --ti-admin-border: #E5E8F6;
  --ti-admin-sidebar-border: #DFE3FF;
  --ti-admin-text: #0F172A;
  --ti-admin-subtext: #64748B;
  --ti-admin-cyan: #22D3EE;       /* survives only as a chart/map accent */

  /* Surfaces & text */
  --ti-bg: #F6EEE3;
  --ti-surface: #FFFFFF;
  --ti-border: #ECE2D5;
  --ti-muted-fill: #FBF6EF;
  --ti-soft-fill: #F7F0E6;
  --ti-hairline: #F4EEE6;         /* table row rules */
  --ti-text: #1F2937;
  --ti-subtext: #6B7280;
  --ti-faint: #9AA3B2;

  /* Semantic status */
  --ti-lead-new: #0EA5E9;
  --ti-lead-contacted: #6366F1;
  --ti-lead-quote: #F59E0B;
  --ti-lead-nego: #F97316;
  --ti-won: #16A34A;
  --ti-lost: #9CA3AF;
  --ti-info: #0EA5E9;
  --ti-success: #16A34A;
  --ti-warning: #D97706;
  --ti-danger: #DC2626;
  --ti-teal: #14B8A6;

  /* Gradients */
  --ti-grad-primary: linear-gradient(135deg, #F26B32, #FB8B3D);
  --ti-grad-warm: linear-gradient(135deg, #F26B32, #FDBA74);   /* logo mark, avatars, day numbers */
  --ti-grad-amber: linear-gradient(135deg, #FF7A59, #F59E0B);
  --ti-grad-sidebar: linear-gradient(180deg, #FFFFFF, #F7F0E6);
  --ti-grad-ai: linear-gradient(120deg, #E0409A, #8B5CF6 60%, #6D28D9);
  --ti-grad-hero: linear-gradient(155deg, #241207, #F26B32 42%, #B14BE0 72%, #FF7A59);
  --ti-grad-admin: linear-gradient(155deg, #312E81, #3538CD 45%, #4F46E5 78%, #818CF8);
  --ti-grad-revenue: linear-gradient(140deg, #F2542D, #F97316 46%, #FB923C 78%, #FFB27A);

  /* Radii */
  --ti-r-card: 16px;
  --ti-r-input: 11px;
  --ti-r-pill: 999px;
  --ti-r-hero: 22px;
}

/* ---- Base ---- */
body {
  margin: 0;
  font-family: 'Instrument Sans', system-ui, sans-serif;
  color: var(--ti-text);
  background: var(--ti-bg);
  -webkit-font-smoothing: antialiased;
}
.ti-display { font-family: 'Bricolage Grotesque', sans-serif; letter-spacing: -.01em; font-weight: 800; }
.ti-num { font-variant-numeric: tabular-nums; }
.ti-money { font-variant-numeric: tabular-nums; text-align: right; }
a { color: var(--ti-primary); text-decoration: none; }
a:hover { color: #D6551F; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #d8cbba; border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }

/* ---- Keyframes (defined once; reuse, don't reinvent) ---- */
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn { 0% { opacity: 0; transform: scale(.9); } 60% { transform: scale(1.02); } 100% { opacity: 1; transform: scale(1); } }
@keyframes slideRight { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(60px); } to { opacity: 1; transform: none; } }
@keyframes growW { from { width: 0; } }
@keyframes growH { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(.94); } }
@keyframes sparkle { 0%, 100% { opacity: .4; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.25); } }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes ring { 0% { box-shadow: 0 0 0 0 rgba(245,158,11,.5); } 70% { box-shadow: 0 0 0 12px rgba(245,158,11,0); } 100% { box-shadow: 0 0 0 0 rgba(245,158,11,0); } }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%,24px); } to { opacity: 1; transform: translate(-50%,0); } }
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes twinkle { 0%, 100% { opacity: .15; } 50% { opacity: 1; } }
@keyframes skyShift { 0%, 100% { background-position: 0% 40%; } 50% { background-position: 100% 60%; } }
@keyframes cloud { from { transform: translateX(-180px); } to { transform: translateX(560px); } }
@keyframes cardLift { from { transform: translateY(6px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes dash { to { stroke-dashoffset: 0; } }
@keyframes flyacross { 0% { transform: translateX(0) rotate(12deg); } 100% { transform: translateX(360px) rotate(12deg); } }

.ti-anim-fadein { animation: fadeIn .3s both; }
.ti-anim-fadeup { animation: fadeUp .5s both; }
.sk { background: linear-gradient(90deg,#eef1f6 25%,#f7f9fc 37%,#eef1f6 63%); background-size: 800px 100%; animation: shimmer 1.3s infinite linear; }

/* ---- Cards ---- */
.ti-card { background: var(--ti-surface); border: 1px solid var(--ti-border); border-radius: var(--ti-r-card); padding: 18px; box-shadow: 0 1px 3px rgba(16,24,40,.04); }
.ti-card-hd { display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: 14.5px; margin-bottom: 14px; }
.ti-card-hover { transition: transform .16s, box-shadow .16s; }
.ti-card-hover:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(var(--ti-primary-rgb), .16); }

/* ---- Buttons ---- */
.ti-btn { display: inline-flex; align-items: center; gap: 7px; border: none; border-radius: var(--ti-r-input); font-weight: 700; font-size: 13.5px; padding: 10px 16px; transition: transform .12s, box-shadow .12s; cursor: pointer; }
.ti-btn:hover { transform: translateY(-1px); }
.ti-btn-pri { background: var(--ti-grad-primary); color: #fff; box-shadow: 0 4px 14px rgba(var(--ti-primary-rgb), .28); }
.ti-btn-amber { background: var(--ti-grad-amber); color: #fff; box-shadow: 0 4px 14px rgba(245,158,11,.3); }
.ti-btn-wa { background: #25D366; color: #fff; }
.ti-btn-ghost { background: #fff; color: #374151; border: 1px solid var(--ti-border); }
.ti-btn-block { width: 100%; justify-content: center; padding: 13px; }
/* Animating background-position repaints on the main thread every frame, and this
   button is on screen in the topbar of every page — it made scrolling stutter.
   The shimmer now runs only while the pointer is on it. */
.ti-btn-ai { background: var(--ti-grad-ai); background-size: 180% 180%; color: #fff; box-shadow: 0 3px 14px rgba(224,64,154,.32); }
.ti-btn-ai:hover { animation: skyShift 5s ease infinite; }

/* ---- Status pills (single legend, use everywhere) ---- */
.ti-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: var(--ti-r-pill); font-size: 11px; font-weight: 700; white-space: nowrap; }
.ti-pill-lg { padding: 4px 11px; }
/* color driven by inline --c (background = tint, text = solid): style="--c:#16A34A" */
.ti-pill[style*="--c"] { background: color-mix(in srgb, var(--c) 13%, transparent); color: var(--c); }

/* ---- Fields ---- */
.ti-field { display: flex; align-items: center; gap: 10px; background: var(--ti-muted-fill); border: 1px solid var(--ti-border); border-radius: var(--ti-r-input); padding: 11px 13px; margin-bottom: 14px; transition: border-color .15s, background .15s, box-shadow .15s; }
.ti-field:hover { border-color: #CFD5E0; }
/* Without a focus state a form reads as a page of grey boxes — you cannot tell where you are typing. */
.ti-field:focus-within { background: #fff; border-color: var(--ti-primary); box-shadow: 0 0 0 3px rgba(var(--ti-primary-rgb), .13); }
.ti-field:focus-within > i { color: var(--ti-primary) !important; }
.ti-field input { border: none; background: transparent; outline: none; flex: 1; font-size: 14px; color: var(--ti-text); width: 100%; }
.ti-field input::placeholder { color: #A8B0BF; }
.ti-field.is-invalid { border-color: var(--ti-danger); background: #FEF2F2; }
.ti-lbl { font-size: 12.5px; font-weight: 600; color: #374151; display: block; margin-bottom: 6px; }
.ti-lbl .req { color: var(--ti-danger); margin-left: 2px; }
/* Same treatment for the native controls that aren't wrapped in .ti-field. */
.ti-slideover textarea, .ti-slideover .form-control { transition: border-color .15s, background .15s, box-shadow .15s; }
.ti-slideover textarea:focus, .ti-slideover .form-control:focus { background: #fff; border-color: var(--ti-primary); box-shadow: 0 0 0 3px rgba(var(--ti-primary-rgb), .13); outline: none; }

/* ---- Icon button ---- */
.ti-iconbtn { position: relative; width: 38px; height: 38px; border-radius: var(--ti-r-input); background: var(--ti-muted-fill); border: 1px solid var(--ti-border); display: flex; align-items: center; justify-content: center; color: #374151; font-size: 16px; cursor: pointer; }
/* Sidebar counter (My day) — hidden with the labels when the rail collapses,
   because a number with no word next to it means nothing. */
.ti-nav-badge { background: var(--ti-danger); color: #fff; font-size: 10px; font-weight: 800; min-width: 18px;
  height: 18px; border-radius: 999px; display: flex; align-items: center; justify-content: center; padding: 0 5px; flex-shrink: 0; }
.ti-sidebar.collapsed .ti-nav-badge { display: none; }

.ti-badge-dot { position: absolute; top: -4px; right: -4px; background: var(--ti-danger); color: #fff; font-size: 9px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 999px; display: flex; align-items: center; justify-content: center; padding: 0 4px; border: 2px solid #fff; }

/* ---- App shell: sidebar ---- */
.ti-shell { display: flex; height: 100vh; background: linear-gradient(180deg,#FBF7F2,var(--ti-bg)); }
/* Light sidebar (design refresh): white→soft-violet, dark text, coloured icon chips. */
.ti-sidebar { width: 244px; background: linear-gradient(180deg,#FFFFFF,#F7F0E6); border-right: 1px solid #EBE1D4; padding: 10px 10px 14px; display: flex; flex-direction: column; transition: width .22s cubic-bezier(.2,.8,.2,1); flex-shrink: 0; }
.ti-sidebar.collapsed { width: 74px; }
.ti-sidebar.collapsed .ti-nav-label, .ti-sidebar.collapsed .ti-brand-word, .ti-sidebar.collapsed .ti-nav-section, .ti-sidebar.collapsed .ti-nav-chev, .ti-sidebar.collapsed .ti-subnav { display: none !important; }
.ti-sidebar.collapsed .ti-nav-item { justify-content: center; }
.ti-nav-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; margin: 2px -2px 0; padding: 0 2px; }
.ti-logo-mark { width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg,var(--ti-primary),var(--ti-primary-light)); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0; }
.ti-nav-section { font-size: 9.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(26,19,64,.42); padding: 0 12px; margin: 13px 0 5px; }
.ti-nav-item { display: flex; align-items: center; gap: 11px; padding: 8px 9px; border-radius: 12px; color: #5B5382; font-size: 13.5px; font-weight: 600; cursor: pointer; margin-bottom: 2px; position: relative; transition: background .16s, color .16s; text-decoration: none; }
.ti-nav-item:hover { background: rgba(var(--ti-primary-rgb), .07); color: #1a1340; }
.ti-nav-item.active { background: linear-gradient(90deg,rgba(var(--ti-primary-rgb), .16),rgba(var(--ti-primary-rgb), .03)); color: #1a1340; }
.ti-nav-chip { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-size: 15px; flex-shrink: 0; background: rgba(var(--ti-primary-rgb), .09); color: var(--ti-primary); transition: background .16s, color .16s, box-shadow .16s; }
.ti-nav-item.active .ti-nav-chip { background: linear-gradient(135deg,var(--ti-primary),var(--ti-primary-light)); color: #fff; box-shadow: 0 6px 14px -6px rgba(var(--ti-primary-rgb), .7); }
.ti-nav-chip i { font-size: 15px; }
.ti-nav-chev { font-size: 11px; opacity: .55; transition: transform .2s; }
.ti-nav-item.expanded .ti-nav-chev { transform: rotate(90deg); }
.ti-subnav { display: flex; flex-direction: column; gap: 1px; margin: 1px 0 6px 22px; padding-left: 11px; border-left: 1px solid rgba(26,19,64,.12); animation: fadeUp .22s both; }
.ti-subnav-item { display: flex; align-items: center; gap: 9px; padding: 6px 10px; border-radius: 9px; font-size: 12.5px; font-weight: 600; cursor: pointer; color: #6B6494; text-decoration: none; transition: background .14s, color .14s; }
.ti-subnav-item:hover { background: rgba(var(--ti-primary-rgb), .06); color: var(--ti-primary); }
.ti-subnav-item.active { background: rgba(var(--ti-primary-rgb), .1); color: var(--ti-primary); }
.ti-subnav-item .ti-subdot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .5; flex-shrink: 0; }
.ti-brand-word { color: #1a1340 !important; }

/* ---- App shell: topbar ---- */
.ti-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.ti-topbar { height: 62px; background: #fff; border-bottom: 1px solid var(--ti-border); display: flex; align-items: center; gap: 12px; padding: 0 24px; flex-shrink: 0; }
.ti-switcher { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--ti-border); border-radius: var(--ti-r-input); cursor: pointer; flex-shrink: 0; }
.ti-search { display: flex; align-items: center; gap: 10px; background: var(--ti-muted-fill); border: 1px solid var(--ti-border); border-radius: var(--ti-r-input); padding: 9px 14px; flex: 1; max-width: 420px; }
.ti-search input { border: none; background: transparent; outline: none; flex: 1; font-size: 14px; }
.ti-avatar { width: 38px; height: 38px; border-radius: var(--ti-r-input); background: linear-gradient(135deg,var(--ti-primary),var(--ti-primary-light)); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; }
.ti-body { flex: 1; overflow: auto; padding: 26px 30px 60px; }

/* ---- KPI cards ---- */
.ti-kpi { background: #fff; border: 1px solid var(--ti-border); border-radius: 14px; padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.ti-kpi-icon { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 17px; }
.ti-kpi-value { font-size: 27px; margin-top: 14px; }
.ti-trend { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 700; padding: 3px 8px; border-radius: 999px; }
.ti-trend-up { color: var(--ti-won); background: #F0FDF4; }
.ti-trend-down { color: var(--ti-danger); background: #FEF2F2; }

/* ---- Tables ---- */
.ti-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ti-table th { padding: 13px 16px; font-weight: 600; font-size: 11.5px; text-transform: uppercase; letter-spacing: .4px; border-bottom: 1px solid var(--ti-bg); text-align: left; color: var(--ti-subtext); background: var(--ti-muted-fill); }
.ti-table td { padding: 13px 16px; border-bottom: 1px solid #F1F4F9; }
.ti-table tbody tr { cursor: pointer; transition: background .12s; }
.ti-table tbody tr:hover { background: var(--ti-muted-fill); }

/* ---- Avatars (list) ---- */
.ti-av-sm { width: 30px; height: 30px; border-radius: 9px; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 11.5px; flex-shrink: 0; }

/* ---- Misc ---- */
.ti-todo-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid #F7F0E6; }
.ti-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.ti-toast { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%); background: #1F2937; color: #fff; padding: 13px 20px; border-radius: 13px; font-size: 13.5px; font-weight: 600; display: flex; align-items: center; gap: 10px; z-index: 60; box-shadow: 0 12px 32px rgba(0,0,0,.28); animation: toastIn .3s both; max-width: min(620px, calc(100vw - 32px)); }
/* Failures sit above success and stay put until dismissed — they carry the reason. */
.ti-toast-bad { bottom: 88px; background: #991B1B; align-items: flex-start; }

/* ---- Slide-over panel + scrim (quick-add lead, record payment, quick-view) ---- */
.ti-scrim { position: fixed; inset: 0; background: rgba(16,24,40,.42); z-index: 40; display: none; animation: fadeIn .2s both; }
.ti-scrim.show { display: block; }
.ti-slideover { position: fixed; top: 0; right: 0; bottom: 0; width: 420px; max-width: 94vw; background: #fff; z-index: 41; padding: 22px; box-shadow: -12px 0 40px rgba(16,24,40,.14); overflow-y: auto; transform: translateX(100%); transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.ti-slideover.show { transform: none; }
.ti-slideover-hd { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.ti-stepper { display: inline-flex; align-items: center; gap: 10px; }
/* Both buttons carry the same weight — a white minus next to a solid purple plus
   reads as "minus is disabled". Dimming is reserved for actually being at zero. */
.ti-stepbtn { width: 30px; height: 30px; border-radius: 9px; border: 1.5px solid #DDD6FE; background: var(--ti-brand-tint); display: flex; align-items: center; justify-content: center; color: var(--ti-primary); cursor: pointer; font-size: 15px; font-weight: 700; user-select: none; transition: background .13s, transform .08s, border-color .13s; }
.ti-stepbtn:hover { background: #DFD9FF; border-color: var(--ti-primary); }
.ti-stepbtn:active { transform: scale(.9); }
.ti-stepbtn.is-off { background: #F4F5F7; border-color: var(--ti-border); color: #C2C8D2; cursor: not-allowed; }
.ti-stepbtn.is-off:hover { background: #F4F5F7; border-color: var(--ti-border); }
.ti-stepbtn.pri { background: var(--ti-primary); color: #fff; border-color: var(--ti-primary); }
.ti-stepbtn.pri:hover { background: #4B3FD0; }

/* ---- Mobile bottom tab bar (design 4: 4–5 key actions, thumb-reachable) ---- */
.ti-bottombar { display: none; }

/* ---- Responsive ---- */
@media (max-width: 860px) {
  .ti-sidebar { position: fixed; z-index: 50; height: 100vh; transform: translateX(-100%); transition: transform .22s cubic-bezier(.2,.8,.2,1); box-shadow: 8px 0 40px rgba(16,24,40,.2); }
  .ti-sidebar.open { transform: none; }
  .ti-search { display: none; }
  .ti-body { padding: 18px 16px 86px; }
  .ti-topbar { padding: 0 14px; }

  .ti-drawer-scrim { position: fixed; inset: 0; background: rgba(16,24,40,.42); z-index: 49; display: none; }
  .ti-drawer-scrim.show { display: block; }

  .ti-bottombar {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 45;
    background: #fff; border-top: 1px solid var(--ti-border); padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    box-shadow: 0 -4px 20px rgba(16,24,40,.06);
  }
  .ti-bottombar a {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 6px 0; color: var(--ti-faint); font-size: 10.5px; font-weight: 600; text-decoration: none;
  }
  .ti-bottombar a.active { color: var(--ti-primary); }
  .ti-bottombar a i { font-size: 19px; }
  .ti-bottombar .ti-bb-fab {
    flex: 0 0 auto; width: 46px; height: 46px; margin-top: -18px; border-radius: 16px;
    background: var(--ti-grad-primary); color: #fff; box-shadow: 0 6px 16px rgba(var(--ti-primary-rgb), .4);
    justify-content: center; font-size: 22px;
  }
  .ti-bottombar .ti-bb-fab i { font-size: 22px; }
}

/* ===== Searchable select + phone country dropdown (searchable.js) =====
   These enhance native <select data-searchable> and <x-phone-input>. Without them
   the native control shows alongside the custom one (looks doubled) and the panel
   renders inline instead of as a closing overlay. */
.ti-ss { position: relative; }
/* Keep the real <select> in the DOM (so the form still submits) but hidden. */
.ti-ss-native { display: none !important; }
.ti-ss-toggle {
  display: flex !important; align-items: center; justify-content: space-between;
  width: 100%; text-align: left; cursor: pointer; background: #fff;
  min-height: 44px; border: 1.5px solid var(--ti-border); border-radius: 12px;
  padding: 9px 14px; font-size: 13.5px; color: var(--ti-text);
}
.ti-ss-toggle { transition: border-color .15s, box-shadow .15s; }
.ti-ss-toggle:hover { border-color: #F0B590; }
/* Match .ti-field so dropdowns and text inputs respond to the agent identically. */
.ti-ss-toggle:focus { border-color: var(--ti-primary); box-shadow: 0 0 0 3px rgba(var(--ti-primary-rgb), .13); outline: none; }
/* While the panel is open the toggle stays lit, even if focus moved to the search box. */
.ti-ss:has(.ti-ss-panel.show) .ti-ss-toggle { border-color: var(--ti-primary); box-shadow: 0 0 0 3px rgba(var(--ti-primary-rgb), .13); }
.ti-ss-toggle.text-muted { color: var(--ti-faint); }

.ti-phone { position: relative; }
.ti-phone .input-group { flex-wrap: nowrap; }

/* The floating panel — shared by search-select and phone. Width = the field
   (no min-width, so a narrow half-row field doesn't spill onto the backdrop). */
.ti-ss-panel {
  position: absolute; z-index: 1090; top: calc(100% + 5px); left: 0; right: 0;
  background: #fff; border: 1px solid var(--ti-border); border-radius: 12px;
  box-shadow: 0 16px 38px rgba(16,24,40,.18); padding: 6px; display: none;
}
/* Phone country panel needs a little more room for flags + names. */
.ti-phone .ti-ss-panel { min-width: 260px; }
/* Flip above the field when there's no room below (JS toggles .drop-up). */
.ti-ss-panel.drop-up { top: auto; bottom: calc(100% + 5px); }
.ti-ss-panel.show { display: block; animation: ssPop .15s cubic-bezier(.2,.8,.2,1); }
.ti-ss-search { padding: 2px 2px 6px; }
.ti-ss-search input, .ti-ss-panel .form-control { font-size: 13px; border-radius: 9px; }
.ti-ss-list { max-height: 240px; overflow-y: auto; }
.ti-ss-item {
  padding: 8px 11px; border-radius: 8px; cursor: pointer; font-size: 13.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ti-ss-item:hover { background: var(--ti-soft-fill); }
.ti-ss-item.active { background: var(--ti-brand-tint, var(--ti-brand-tint)); color: var(--ti-primary); font-weight: 600; }
.ti-ss-item.ti-ss-add { color: var(--ti-primary); font-weight: 600; border-top: 1px dashed var(--ti-border); margin-top: 2px; }
.ti-ss-empty { padding: 12px; text-align: center; color: var(--ti-faint); font-size: 13px; }

/* Phone country rows */
.ti-phone-item { display: flex; align-items: center; gap: 8px; }
.ti-phone-item-flag { font-size: 15px; }
.ti-phone-item-name { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.ti-phone-item-code { margin-left: auto; }
.ti-phone-toggle { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }

@keyframes ssPop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.ti-pulse { animation: pulse 1.4s ease-in-out infinite; }

/* ===== Motion polish (entrance stagger + interactive hovers) ===== */
/* Cards slide up on first paint; stagger the first few for a layered feel. */
.ti-anim-fadein > .ti-card,
.ti-anim-fadeup > .ti-card { animation: cardLift .5s both; }
.ti-anim-fadein > .ti-card:nth-child(2){ animation-delay:.04s }
.ti-anim-fadein > .ti-card:nth-child(3){ animation-delay:.08s }
.ti-anim-fadein > .ti-card:nth-child(4){ animation-delay:.12s }
.ti-anim-fadein > .ti-card:nth-child(5){ animation-delay:.16s }
.ti-anim-fadein > .ti-card:nth-child(6){ animation-delay:.20s }

/* Clickable table rows get a clear hover affordance. */
.ti-table tbody tr[onclick] { cursor: pointer; transition: background .13s; }
.ti-table tbody tr[onclick]:hover { background: var(--ti-soft-fill); }

/* Buttons & pills feel a touch more alive. */
.ti-btn:active { transform: translateY(1px) scale(.99); }
.ti-iconbtn { transition: background .14s, color .14s, transform .12s; }
.ti-iconbtn:hover { background: var(--ti-brand-tint); color: var(--ti-primary); }

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ===== Scroll smoothness =====
   Looping decoration (the live map's SMIL paths, pulsing dots, marquees) repaints
   on the main thread every frame. That is fine on its own and awful while the user
   is scrolling, because the same thread has to produce frames for both.

   Two rules, applied by ti-motion.js:
   - .ti-scrolling on <html> while a scroll is in flight → freeze the decoration.
   - .is-offscreen on a heavy block the viewport has left → stop paying for it at all. */
html.ti-scrolling [data-decor],
html.ti-scrolling [data-decor] * { animation-play-state: paused !important; }
[data-decor].is-offscreen,
[data-decor].is-offscreen * { animation-play-state: paused !important; }

/* Skip layout+paint for big blocks that are nowhere near the viewport. The size hint
   keeps the scrollbar honest so the page doesn't jump as they come into view. */
.ti-defer { content-visibility: auto; contain-intrinsic-size: auto 420px; }