/* ============================================
   Brand tokens — Studio Tattoo Front Office
   Dark editorial + coral pink accents
   ============================================ */

:root {
  --bg-0: #0b0b0d;          /* page */
  --bg-1: #121215;          /* surface */
  --bg-2: #17171b;          /* card */
  --bg-3: #1d1d22;          /* raised */
  --bg-4: #25252b;          /* hover / chip */
  --line: #2a2a30;          /* subtle border */
  --line-2: #34343c;        /* stronger border */

  --ink-0: #f5f5f7;         /* primary text */
  --ink-1: #c8c8cf;         /* secondary */
  --ink-2: #8a8a93;         /* muted */
  --ink-3: #5a5a62;         /* very muted */

  --coral: #ff6b80;         /* primary accent */
  --coral-2: #ff8597;       /* hover */
  --coral-soft: rgba(255, 107, 128, 0.14);
  --coral-line: rgba(255, 107, 128, 0.32);

  --wa: #25d366;            /* whatsapp */
  --wa-soft: rgba(37, 211, 102, 0.12);
  --mail: #6aa9ff;          /* email */
  --mail-soft: rgba(106, 169, 255, 0.12);
  --call: #f5b14a;          /* phone */
  --call-soft: rgba(245, 177, 74, 0.12);

  --ok: #4ade80;
  --warn: #fbbf24;
  --no:  #94939c;
  --bad: #f87171;

  --star: #ffd166;

  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 18px;

  --font-display: "Bebas Neue", "Oswald", Impact, sans-serif;
  --font-ui: "Inter", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body.app {
  font-family: var(--font-ui);
  color: var(--ink-0);
  background: var(--bg-0);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "cv11";
}

.app, .app * { box-sizing: border-box; }

/* Logo wordmark */
.brand-wordmark {
  font-family: var(--font-display);
  letter-spacing: 0.06em;
  font-weight: 400;
}

/* Generic button */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  padding: 9px 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--bg-3);
  color: var(--ink-0);
  cursor: pointer;
  transition: all 120ms ease;
  white-space: nowrap;
  user-select: none;
}
.btn:hover { background: var(--bg-4); border-color: var(--line-2); }
.btn:active { transform: translateY(1px); }
.btn.primary {
  background: var(--coral);
  border-color: var(--coral);
  color: #1a0a0d;
  font-weight: 600;
}
.btn.primary:hover { background: var(--coral-2); border-color: var(--coral-2); }
.btn.ghost {
  background: transparent;
  border-color: var(--line);
}
.btn.ghost:hover { background: var(--bg-3); }
.btn.danger {
  color: var(--bad);
  border-color: transparent;
  background: transparent;
}
.btn.danger:hover { background: rgba(248, 113, 113, 0.1); }
.btn.sm { padding: 6px 10px; font-size: 12px; }
.btn.xs { padding: 4px 8px; font-size: 11px; gap: 4px; }
.btn.icon { padding: 8px; }

/* Inputs */
.input, .select, .textarea {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--ink-0);
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 9px 12px;
  width: 100%;
  outline: none;
  transition: border-color 120ms ease;
}
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--coral);
  background: var(--bg-2);
}
.input::placeholder, .textarea::placeholder { color: var(--ink-3); }
.textarea { resize: vertical; min-height: 220px; line-height: 1.55; }

/* Chips */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  color: var(--ink-1);
  background: var(--bg-2);
  border: 1px solid var(--line);
  cursor: pointer;
  user-select: none;
  transition: all 120ms ease;
  white-space: nowrap;
}
.chip:hover { background: var(--bg-3); color: var(--ink-0); }
.chip.active {
  color: var(--coral);
  background: var(--coral-soft);
  border-color: var(--coral-line);
}
.chip .count {
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
  font-size: 11px;
}
.chip.active .count { color: var(--coral); opacity: 0.75; }

/* Status pills */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.pill .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
}
.pill.attesa   { color: var(--warn); background: rgba(251, 191, 36, 0.12); }
.pill.lasciata { color: var(--ok);   background: rgba(74, 222, 128, 0.12); }
.pill.nessuna  { color: var(--no);   background: rgba(148, 147, 156, 0.14); }
.pill.rifiutata{ color: var(--bad);  background: rgba(248, 113, 113, 0.12); }
.pill.dainviare{ color: var(--coral); background: var(--coral-soft); }

/* Stars */
.stars { display: inline-flex; gap: 1px; color: var(--ink-3); }
.stars .s.on { color: var(--star); }
.stars .s { font-size: 13px; line-height: 1; }

/* Tooltip-ish data card titles */
.eyebrow {
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}

/* Method dot/icon */
.method {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}
.method .ic {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.method.wa .ic   { background: var(--wa-soft);   color: var(--wa); }
.method.mail .ic { background: var(--mail-soft); color: var(--mail); }
.method.call .ic { background: var(--call-soft); color: var(--call); }

/* Scrollbar tweaks */
.scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.scroll::-webkit-scrollbar-track { background: transparent; }
.scroll::-webkit-scrollbar-thumb { background: var(--bg-4); border-radius: 999px; border: 2px solid var(--bg-0); }
.scroll::-webkit-scrollbar-thumb:hover { background: var(--line-2); }

/* Photo thumb */
.photo-thumb {
  width: 32px; height: 32px;
  border-radius: 6px;
  object-fit: cover;
  background: linear-gradient(135deg, #2a2a30, #1d1d22);
  border: 1px solid var(--line);
}

/* Toast */
@keyframes toast-in {
  from { transform: translate(-50%, 20px); opacity: 0; }
  to   { transform: translate(-50%, 0);    opacity: 1; }
}
.toast {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-3);
  color: var(--ink-0);
  border: 1px solid var(--line-2);
  padding: 10px 16px;
  border-radius: var(--r-md);
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  animation: toast-in 180ms ease;
  z-index: 100;
  pointer-events: none;
}
.toast .check { color: var(--ok); }

/* Avatar */
.avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--bg-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-1);
  letter-spacing: 0.04em;
  border: 1px solid var(--line);
  flex-shrink: 0;
}

/* Satisfaction pill + dropdown */
.sat-wrap { position: relative; display: inline-flex; }
.sat-pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px;
  padding: 0 8px;
  border-radius: 4px;
  border: 1px dashed var(--line-2);
  background: transparent;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
  color: var(--ink-3);
  transition: all 100ms ease;
  white-space: nowrap;
}
.sat-pill:hover { border-color: var(--ink-3); color: var(--ink-1); }
.sat-pill.empty { font-style: italic; }
.sat-pill .sat-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ink-3);
  flex-shrink: 0;
}
.sat-pill svg { opacity: 0.5; }
.sat-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 100;
  min-width: 170px;
  background: var(--bg-3);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  padding: 4px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  display: flex; flex-direction: column;
}
.sat-menu-item {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  border: 0; background: transparent;
  font-family: inherit;
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
  border-radius: var(--r-xs);
  transition: background 100ms ease;
}
.sat-menu-item:hover { background: var(--bg-4); }
.sat-menu-item .sat-dot {
  width: 8px; height: 8px; border-radius: 50%;
  flex-shrink: 0;
}

/* Modality tag */
.mod-tag {
  display: inline-flex; align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 4px;
  font-size: 11.5px;
  font-weight: 500;
  white-space: nowrap;
}

/* Photo tag (text) */
.foto-tag {
  display: inline-flex; align-items: center;
  font-size: 12px;
  font-weight: 500;
}
.foto-tag.yes { color: var(--coral); }
.foto-tag.no  { color: var(--ink-3); }

/* Coral inline links */
.link-coral { color: var(--coral); text-decoration: none; }
.link-coral:hover { text-decoration: underline; }

/* Soft divider */
.divider { height: 1px; background: var(--line); }