/* ============================================================
   SocialPV – Design System
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ── Custom Properties ────────────────────────────────────── */
:root {
  /* Instagram signature gradient */
  --ig-gradient: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  --ig-gradient-soft: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);

  /* Instagram palette */
  --ig-blue:     #0095f6;
  --ig-blue-d:   #00376b;
  --ig-red:      #ed4956;
  --ig-text:     #262626;
  --ig-text-2:   #8e8e8e;
  --ig-border:   #dbdbdb;
  --ig-bg:       #fafafa;
  --ig-white:    #ffffff;
  --ig-hover:    #efefef;

  /* Status colours */
  --status-draft:    #9ca3af;
  --status-pending:  #f59e0b;
  --status-approved: #10b981;
  --status-rejected: #ef4444;
  --status-ready:    #6366f1;
  --status-published:#22c55e;

  --status-draft-bg:    #f3f4f6;
  --status-pending-bg:  #fffbeb;
  --status-approved-bg: #ecfdf5;
  --status-rejected-bg: #fef2f2;
  --status-ready-bg:    #ede9fe;
  --status-published-bg:#f0fdf4;

  /* Manager dark theme */
  --mgr-bg:      #0a0a0f;
  --mgr-surf:    #13131a;
  --mgr-surf-2:  #1c1c28;
  --mgr-border:  #2a2a3e;
  --mgr-text:    #f0f0fa;
  --mgr-text-2:  #8888a8;
  --mgr-accent:  #6366f1;
  --mgr-accent-h:#5254cc;
  --mgr-danger:  #ef4444;
  --mgr-success: #10b981;

  /* Spacing */
  --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem;
  --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem;
  --sp-12: 3rem; --sp-16: 4rem;

  /* Radius */
  --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 24px; --r-full: 9999px;

  /* Shadow */
  --shadow-sm:  0 1px 3px rgba(0,0,0,.08);
  --shadow-md:  0 4px 16px rgba(0,0,0,.12);
  --shadow-lg:  0 12px 40px rgba(0,0,0,.18);
  --shadow-xl:  0 24px 64px rgba(0,0,0,.25);

  /* Transition */
  --t-fast:   .12s ease;
  --t-normal: .2s ease;
  --t-slow:   .35s ease;

  /* Font */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-ig: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* ── Reset ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { font-family: var(--font); -webkit-font-smoothing: antialiased; }
img, video { max-width: 100%; display: block; }
button { cursor: pointer; font-family: inherit; }
a { text-decoration: none; }
ul, ol { list-style: none; }
input, textarea, select { font-family: inherit; }

/* ── Status Dot ───────────────────────────────────────────── */
.status-dot {
  display: inline-block;
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 2px solid white;
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
  flex-shrink: 0;
}
.status-dot.draft     { background: var(--status-draft); }
.status-dot.pending   { background: var(--status-pending); }
.status-dot.approved  { background: var(--status-approved); }
.status-dot.rejected  { background: var(--status-rejected); }
.status-dot.ready     { background: var(--status-ready); }
.status-dot.published { background: var(--status-published); }

/* ── Status Badge (pill) ─────────────────────────────────── */
.status-badge {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-full);
  font-size: .78rem; font-weight: 600; letter-spacing: .02em;
}
.status-badge::before {
  content: ''; display: inline-block;
  width: 8px; height: 8px; border-radius: 50%;
  background: currentColor; opacity: .6;
}
.status-badge.draft     { color: #6b7280; background: var(--status-draft-bg); }
.status-badge.pending   { color: #d97706; background: var(--status-pending-bg); }
.status-badge.approved  { color: #059669; background: var(--status-approved-bg); }
.status-badge.rejected  { color: #dc2626; background: var(--status-rejected-bg); }
.status-badge.ready     { color: #4f46e5; background: var(--status-ready-bg); }
.status-badge.published { color: #16a34a; background: var(--status-published-bg); }

/* ── Utility: spinner ────────────────────────────────────── */
@keyframes spin { to { transform: rotate(360deg); } }
.spinner {
  display: inline-block; width: 20px; height: 20px;
  border: 2.5px solid rgba(255,255,255,.3);
  border-top-color: white; border-radius: 50%;
  animation: spin .7s linear infinite;
}
.spinner.dark { border-color: rgba(0,0,0,.15); border-top-color: var(--mgr-accent); }

/* ── Toast notifications ─────────────────────────────────── */
#toast-container {
  position: fixed; bottom: 1.5rem; right: 1.5rem;
  z-index: 9999; display: flex; flex-direction: column; gap: .6rem;
}
.toast {
  padding: .75rem 1.25rem; border-radius: var(--r-md);
  color: white; font-size: .9rem; font-weight: 500;
  box-shadow: var(--shadow-lg);
  animation: slideInToast .25s ease;
  max-width: 340px;
}
.toast.success { background: #059669; }
.toast.error   { background: #dc2626; }
.toast.info    { background: #2563eb; }

@keyframes slideInToast {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Avatar helper ───────────────────────────────────────── */
.avatar {
  border-radius: 50%; object-fit: cover;
  background: var(--ig-border);
  flex-shrink: 0;
}
.avatar-placeholder {
  border-radius: 50%; background: linear-gradient(135deg, #667eea, #764ba2);
  display: flex; align-items: center; justify-content: center;
  color: white; font-weight: 700; flex-shrink: 0;
}

/* ── Scrollbar ───────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,.2); border-radius: var(--r-full); }
::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,.35); }