/* ============================================================
   Studio CRM — Shared Stylesheet (loaded by every page)
   Shared theme tokens, base finish and generic utilities used by
   both the admin shell and the client portal. Admin-only board /
   Select2 custom lives in admin.css; portal-only custom lives in
   client.css. All three load before tailwind.css so Tailwind
   utilities still win. External .css files cannot use @apply, so
   Tailwind-equivalent rules are written as vanilla CSS.
   ============================================================ */

/* ── Producer Place base finish ─────────────────────────────────────────── */
body { background:#09090b; color:#fafafa; font-family:'Geist','Inter',system-ui,sans-serif; }
::selection { background:#f59e0b50; color:#fff; }
input, textarea, select { color-scheme: dark; }
:where(button, a, input, textarea, select):focus-visible {
  outline:2px solid #f59e0b; outline-offset:2px; }
@keyframes slideUp { from { opacity:0; transform:translateY(8px);} to { opacity:1; transform:translateY(0);} }
.animate-slide-up { animation: slideUp .25s ease-out; }
/* Amber hero glow (retained) */
.pp-glow { position:relative; }
.pp-glow::before { content:""; position:absolute; left:0; right:0; top:0; height:220px; pointer-events:none;
  background:linear-gradient(to bottom, rgba(245,158,11,0.10), transparent); z-index:0; }
.pp-glow > * { position:relative; z-index:1; }

/* ── Design System — consistent spacing, typography ──────────── */

/* Unified badge sizing */
.badge-sm {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 9999px;
  font-weight: 600;
  line-height: 1.4;
}

/* Skeleton shimmer for loading states */
@keyframes shimmer {
  0% { background-position: -200px 0; }
  100% { background-position: calc(200px + 100%) 0; }
}
.skeleton {
  background: linear-gradient(90deg, rgba(156,163,175,0.1) 25%, rgba(156,163,175,0.2) 50%, rgba(156,163,175,0.1) 75%);
  background-size: 200px 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: 0.5rem;
}

/* ── Mobile: prevent iOS auto-zoom on input focus ────────────── */
/* iOS zooms in whenever a focused text input has font-size < 16px. */
/* Only apply to text inputs and textareas — not selects/buttons   */
/* which look oversized at 16px forced minimum.                     */
@media screen and (max-width: 768px) {
  input[type="text"], input[type="email"], input[type="password"],
  input[type="tel"], input[type="search"], input[type="url"],
  input:not([type]), textarea {
    font-size: max(16px, 1em) !important;
  }
}

/* ── Eliminate 300ms tap delay on all touch devices ─────────── */
/* Without this, iOS/Android wait 300ms after a tap to check     */
/* for a double-tap, making every button press feel laggy.       */
*, *::before, *::after {
  touch-action: manipulation;
}
/* Restore pan behavior on scrollable containers */
.board-scroll, .overflow-y-auto, [class*="overflow-y"] {
  touch-action: pan-y;
}

/* ── Vertical scroll panels ──────────────────────────────────── */
.overflow-y-auto {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

/* ── Thin scrollbar utility ──────────────────────────────────── */
.scrollbar-thin::-webkit-scrollbar { width: 4px; }
.scrollbar-thin::-webkit-scrollbar-track { background: transparent; }
.scrollbar-thin::-webkit-scrollbar-thumb {
  background: rgba(156, 163, 175, 0.3);
  border-radius: 2px;
}
.scrollbar-thin::-webkit-scrollbar-thumb:hover {
  background: rgba(156, 163, 175, 0.5);
}
.scrollbar-thin { scrollbar-width: thin; scrollbar-color: rgba(156,163,175,0.3) transparent; }