/* ============================================================
   VANTA UI — Apple-Minimal Design System
   San Francisco typography · hairline borders · one blue accent
   Loaded by index.php / admin.php / agent.php. No build step.
   ============================================================ */

:root {
    /* Canvas */
    --bg:       #f5f5f7;
    --card:     #ffffff;
    --well:     #f2f2f7;              /* recessed input fill */
    --hairline: rgba(0, 0, 0, 0.08);
    --hairline-strong: rgba(0, 0, 0, 0.14);

    /* Text */
    --text:       #1d1d1f;
    --text-dim:   #6e6e73;
    --text-faint: #aeaeb2;

    /* System colors */
    --blue:        #0071e3;
    --blue-hover:  #0077ed;
    --blue-text:   #0066cc;
    --blue-tint:   #eaf3ff;
    --green:       #34c759;
    --green-text:  #1f8a3d;
    --green-tint:  #e8f8ee;
    --red:         #ff3b30;
    --red-text:    #d70015;
    --red-tint:    #ffe9e7;
    --orange:      #ff9500;
    --orange-text: #b25000;
    --orange-tint: #fff3e0;
    --gray-fill:   #e8e8ed;
    --gray-fill-2: #dededf;

    --radius:    18px;
    --radius-sm: 12px;
    --shadow:      0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06);
    --shadow-lift: 0 2px 6px rgba(0,0,0,.05), 0 16px 40px rgba(0,0,0,.10);
    --ring:      0 0 0 4px rgba(0, 113, 227, .18);
    --ease:      cubic-bezier(.25, .1, .25, 1);
}

* { -webkit-tap-highlight-color: transparent; }

html { background: var(--bg); }
body {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Inter', 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    color: var(--text);
    background: var(--bg);
    letter-spacing: -0.01em;
}

.font-mono, .mono { font-family: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace; letter-spacing: 0; }
.font-display { font-family: inherit; letter-spacing: -0.022em; }

/* Legacy decorative layers from earlier themes — disabled */
.v-blobs, .v-blob, .v-aurora, .v-grid, .v-grain { display: none !important; }

/* ---------- Card ---------- */
.v-card {
    position: relative;
    background: var(--card);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.v-card--line::before { content: none; }
.v-hover { transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.v-hover:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }

/* ---------- Buttons: Apple pills ---------- */
.v-btn {
    position: relative; overflow: hidden; isolation: isolate;
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    font-family: inherit; font-weight: 600; font-size: .84rem; letter-spacing: -0.01em;
    padding: .72rem 1.3rem; border-radius: 980px; cursor: pointer; border: none;
    color: #fff; user-select: none; white-space: nowrap;
    transition: transform .15s var(--ease), background .2s var(--ease), opacity .2s, box-shadow .2s;
}
.v-btn:active { transform: scale(.97); }
.v-btn:disabled, .v-btn.is-loading { cursor: not-allowed; opacity: .55; }
.v-btn--primary { background: var(--blue); }
.v-btn--primary:hover:not(:disabled) { background: var(--blue-hover); }
.v-btn--emerald { background: var(--green); color: #fff; }
.v-btn--emerald:hover:not(:disabled) { filter: brightness(1.05); }
.v-btn--ghost { background: var(--gray-fill); color: var(--text); }
.v-btn--ghost:hover:not(:disabled) { background: var(--gray-fill-2); }
.v-btn--danger { background: var(--red-tint); color: var(--red-text); }
.v-btn--danger:hover:not(:disabled) { background: #ffdcd9; }
.v-btn:focus-visible { outline: none; box-shadow: var(--ring); }
.v-btn .v-spin { width: 1em; height: 1em; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%; animation: vspin .6s linear infinite; }
.v-btn--ghost .v-spin, .v-btn--danger .v-spin { border-color: rgba(0,0,0,.15); border-top-color: currentColor; }
@keyframes vspin { to { transform: rotate(360deg); } }

/* Ripple — kept API-compatible, rendered as a faint press tint */
.v-ripple { position: absolute; border-radius: 50%; transform: scale(0); background: rgba(0,0,0,.06); pointer-events: none; animation: vripple .5s var(--ease) forwards; z-index: -1; }
@keyframes vripple { to { transform: scale(2.4); opacity: 0; } }

/* ---------- Inputs ---------- */
.v-field {
    width: 100%; background: var(--well);
    border: 1px solid transparent; border-radius: var(--radius-sm);
    color: var(--text); font-family: inherit; font-weight: 400;
    font-size: .9rem; padding: .72rem .95rem; outline: none;
    transition: background .2s, border-color .2s, box-shadow .2s;
}
.v-field::placeholder { color: var(--text-faint); }
.v-field:focus { background: var(--card); border-color: var(--blue); box-shadow: var(--ring); }
.v-field--icon { padding-left: 2.7rem; }
select.v-field { -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .85rem center; background-size: .9rem; padding-right: 2.4rem; }
.v-label { display: block; font-size: .72rem; font-weight: 600; letter-spacing: -0.005em; color: var(--text-dim); margin-bottom: .4rem; }

/* ---------- Pills (status) ---------- */
.v-pill { display: inline-flex; align-items: center; gap: .32rem; font-size: .66rem; font-weight: 600; letter-spacing: -0.005em; padding: .26rem .6rem; border-radius: 999px; white-space: nowrap; }
.v-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill-new       { color: var(--blue-text);   background: var(--blue-tint); }
.pill-contacted { color: var(--text-dim);    background: var(--gray-fill); }
.pill-conv      { color: var(--orange-text); background: var(--orange-tint); }
.pill-won       { color: var(--green-text);  background: var(--green-tint); }
.pill-lost      { color: var(--red-text);    background: var(--red-tint); }
.pill-muted     { color: var(--text-dim);    background: var(--gray-fill); }

/* ---------- Toasts ---------- */
#v-toasts { position: fixed; top: 1rem; right: 1rem; z-index: 9999; display: flex; flex-direction: column; gap: .6rem; width: min(360px, calc(100vw - 2rem)); pointer-events: none; }
@media (max-width: 640px) { #v-toasts { left: 1rem; right: 1rem; width: auto; top: .75rem; } }
.v-toast {
    pointer-events: auto; position: relative; overflow: hidden; display: flex; gap: .75rem; align-items: flex-start;
    padding: .85rem .95rem; border-radius: 14px; color: var(--text);
    background: rgba(255,255,255,.92);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border: 1px solid var(--hairline); box-shadow: var(--shadow-lift);
    transform: translateY(-12px); opacity: 0; animation: vtoast-in .35s var(--ease) forwards;
}
.v-toast.v-out { animation: vtoast-out .28s var(--ease) forwards; }
@keyframes vtoast-in  { to { transform: translateY(0); opacity: 1; } }
@keyframes vtoast-out { to { transform: translateY(-12px); opacity: 0; } }
.v-toast__icon { flex-shrink: 0; width: 1.9rem; height: 1.9rem; border-radius: 999px; display: grid; place-items: center; font-size: .78rem; }
.v-toast__body { flex: 1; min-width: 0; }
.v-toast__title { font-size: .8rem; font-weight: 600; letter-spacing: -0.01em; }
.v-toast__msg { font-size: .74rem; color: var(--text-dim); margin-top: .12rem; line-height: 1.45; word-break: break-word; }
.v-toast__close { flex-shrink: 0; color: var(--text-faint); background: none; border: 0; cursor: pointer; font-size: 1rem; line-height: 1; padding: .05rem .2rem; transition: color .15s; }
.v-toast__close:hover { color: var(--text); }
.v-toast__bar { position: absolute; bottom: 0; left: 0; height: 2px; width: 100%; transform-origin: left; }
.v-toast--success .v-toast__icon { background: var(--green-tint); color: var(--green-text); }
.v-toast--success .v-toast__bar { background: var(--green); }
.v-toast--error .v-toast__icon { background: var(--red-tint); color: var(--red-text); }
.v-toast--error .v-toast__bar { background: var(--red); }
.v-toast--info .v-toast__icon { background: var(--blue-tint); color: var(--blue-text); }
.v-toast--info .v-toast__bar { background: var(--blue); }
.v-toast--warning .v-toast__icon { background: var(--orange-tint); color: var(--orange-text); }
.v-toast--warning .v-toast__bar { background: var(--orange); }

/* ---------- Segmented control (shared) ---------- */
.v-seg { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border-radius: 9px; background: var(--gray-fill); }
.v-seg > button {
    font-family: inherit; font-size: .72rem; font-weight: 600; letter-spacing: -0.01em;
    color: var(--text-dim); padding: .38rem .8rem; border-radius: 7px; border: none; background: transparent;
    cursor: pointer; transition: color .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease);
}
.v-seg > button:hover { color: var(--text); }
.v-seg > button.is-active { background: var(--card); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 0 0 0.5px rgba(0,0,0,.04); }

/* ---------- Skeleton ---------- */
.v-skel { position: relative; overflow: hidden; background: var(--well); border-radius: 8px; }
.v-skel::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(0,0,0,.04), transparent); animation: vshimmer 1.4s infinite; }
@keyframes vshimmer { to { transform: translateX(100%); } }

/* ---------- Scrollbar ---------- */
.v-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.v-scroll::-webkit-scrollbar-track { background: transparent; }
.v-scroll::-webkit-scrollbar-thumb { background: rgba(0,0,0,.18); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
.v-scroll::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,.3); background-clip: padding-box; }

/* ---------- Entrances (subtle) ---------- */
@keyframes vfade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes vpop { 0% { transform: scale(.98); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.v-in { opacity: 0; animation: vfade-up .5s var(--ease) forwards; }
.v-in-1 { animation-delay: .04s; } .v-in-2 { animation-delay: .09s; } .v-in-3 { animation-delay: .14s; }
.v-in-4 { animation-delay: .19s; } .v-in-5 { animation-delay: .24s; } .v-in-6 { animation-delay: .29s; }
.v-pop { animation: vpop .3s var(--ease); }

/* ---------- Misc ---------- */
.text-grad { color: var(--blue-text); }
.v-divider { height: 1px; background: var(--hairline); }
[data-haptic] { cursor: pointer; }
.v-dot-pulse { position: relative; }
.v-dot-pulse::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 0 currentColor; animation: vdot 2s var(--ease) infinite; }
@keyframes vdot { 0% { box-shadow: 0 0 0 0 currentColor; opacity: .4; } 100% { box-shadow: 0 0 0 8px currentColor; opacity: 0; } }

/* Icon tile (replaces clay avatar look; same class name for compatibility) */
.v-avatar { display: grid; place-items: center; border-radius: 10px; font-weight: 600; }

/* Frosted header helper */
.v-frost {
    background: rgba(255, 255, 255, .78);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--hairline);
}

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