/* Wash, Wiggle & Wag — shared styles */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=Inter:wght@400;500;600&display=swap');

:root {
  --teal: #0d9488;
  --teal-dark: #0f766e;
  --teal-light: #14b8a6;
  --teal-pale: #f0fdfa;
  --teal-soft: #99f6e4;
  --text: #0f172a;
  --text-2: #475569;
  --text-3: #94a3b8;
  --border: #e2e8f0;
  --bg: #f6f8fa;
  --white: #ffffff;
  --green: #16a34a;
  --green-pale: #f0fdf4;
  --amber: #d97706;
  --amber-pale: #fffbeb;
  --red: #dc2626;
  --red-pale: #fef2f2;
  --blue: #2563eb;
  --blue-pale: #eff6ff;
  --radius: 14px;
  --radius-sm: 9px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: 'Inter', sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
}
h1, h2, h3, .font-head { font-family: 'Outfit', sans-serif; letter-spacing: -0.02em; }
a { color: var(--teal-dark); }

.btn {
  font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 0.92rem;
  border: none; border-radius: var(--radius-sm); padding: 12px 20px;
  cursor: pointer; transition: all 0.15s; display: inline-flex; align-items: center; gap: 7px;
}
.btn-primary { background: var(--teal); color: #fff; }
.btn-primary:hover { background: var(--teal-dark); }
.btn-primary:disabled { background: var(--text-3); cursor: not-allowed; }
.btn-ghost { background: var(--white); color: var(--text-2); border: 1px solid var(--border); }
.btn-ghost:hover { border-color: var(--teal-light); color: var(--teal-dark); }
.btn-sm { padding: 7px 13px; font-size: 0.8rem; }
.btn-block { width: 100%; justify-content: center; }
.btn-danger { background: var(--red-pale); color: var(--red); border: 1px solid #fca5a5; }

input, select, textarea {
  font-family: 'Inter', sans-serif; font-size: 0.95rem; width: 100%;
  padding: 11px 13px; border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  background: var(--white); color: var(--text); transition: border-color 0.15s;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--teal); }
label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--text-2); margin-bottom: 6px; }
.field { margin-bottom: 16px; }
.field .req { color: var(--red); }
.hint { font-size: 0.75rem; color: var(--text-3); margin-top: 5px; }

.card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px;
}

.badge {
  display: inline-block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; padding: 3px 9px; border-radius: 20px;
}
.badge-new { background: var(--blue-pale); color: var(--blue); }
.badge-quoted { background: var(--amber-pale); color: var(--amber); }
.badge-assigned { background: #f5f3ff; color: #7c3aed; }
.badge-scheduled { background: var(--green-pale); color: var(--green); }
.badge-declined { background: var(--red-pale); color: var(--red); }
.badge-completed { background: #f1f5f9; color: var(--text-2); }

.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--text); color: #fff; font-size: 0.88rem; font-weight: 600;
  padding: 12px 22px; border-radius: 24px; opacity: 0; transition: all 0.25s; pointer-events: none; z-index: 999;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.err { background: var(--red); }

.muted { color: var(--text-3); }
.empty { text-align: center; padding: 40px 20px; color: var(--text-3); }