/*
 * ig-admin v0.4.1 — supplemental CSS.
 *
 * Builds on Tailwind via Play CDN. This file ships the patterns Tailwind
 * can't (or shouldn't) express:
 *   - iOS-vibrant base, true-black OLED body
 *   - Apple text-on-dark opacities as custom properties
 *   - Subtle border system (Apple's rgba grays)
 *   - IG-gradient utilities (full + 15%-soft variants)
 *   - Toast notification primitives
 *   - Empty-state primitives
 *   - Reduce-motion guards
 *   - Out-expo cubic-bezier on all transitions by default
 */

/* =========================================================================
   DESIGN TOKENS — iOS Settings dark, Apple semantic
   ========================================================================= */
:root, html.iga-html {
  /* Surfaces — iOS Settings dark */
  --iga-bg-0:        #000000;      /* OLED black */
  --iga-bg-1:        #0a0a0b;      /* page bg */
  --iga-surface-1:   #1c1c1e;      /* cards */
  --iga-surface-2:   #2c2c2e;      /* inputs / interactive surfaces inside cards */
  --iga-surface-3:   #3a3a3c;      /* hover */
  --iga-surface-4:   #48484a;      /* pressed */

  /* Borders — Apple greys with alpha */
  --iga-border-subtle:  rgba(84, 84, 88, 0.30);
  --iga-border:         rgba(84, 84, 88, 0.50);
  --iga-border-strong:  rgba(152, 152, 157, 0.65);

  /* Text — Apple label-on-dark opacities */
  --iga-text:           #ffffff;
  --iga-text-2:         rgba(235, 235, 245, 0.78);  /* secondary */
  --iga-text-3:         rgba(235, 235, 245, 0.60);  /* muted */
  --iga-text-4:         rgba(235, 235, 245, 0.40);  /* faint */
  --iga-text-5:         rgba(235, 235, 245, 0.25);  /* placeholder */

  /* iOS-vibrant semantic */
  --iga-red:            #ff453a;
  --iga-orange:         #ff9f0a;
  --iga-yellow:         #ffd60a;
  --iga-green:          #30d158;
  --iga-blue:           #0a84ff;
  --iga-indigo:         #5e5ce6;
  --iga-purple:         #bf5af2;
  --iga-pink:           #ff375f;

  /* IG brand */
  --iga-ig-purple:      #515BD4;
  --iga-ig-pink:        #DD2A7B;
  --iga-ig-orange:      #F77737;

  /* Shadows */
  --iga-shadow-1:       0 1px 2px rgba(0, 0, 0, 0.40);
  --iga-shadow-2:       0 4px 16px rgba(0, 0, 0, 0.40);
  --iga-shadow-3:       0 12px 28px rgba(0, 0, 0, 0.50);
  --iga-shadow-glow:    0 0 32px -8px rgba(221, 42, 123, 0.40);
  --iga-shadow-glow-soft: 0 4px 28px -4px rgba(221, 42, 123, 0.25);

  /* Motion */
  --iga-ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --iga-ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --iga-ease-standard:  cubic-bezier(0.4, 0, 0.2, 1);
  --iga-dur-fast:       180ms;
  --iga-dur-normal:     260ms;
  --iga-dur-slow:       360ms;
}

/* =========================================================================
   BODY / HTML — overlay any theme + WP-injected styles
   ========================================================================= */
html.iga-html, body.iga-fullscreen-body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background: var(--iga-bg-1);
  color: var(--iga-text);
}
html.iga-html {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-feature-settings: 'cv11', 'ss01', 'cv02', 'cv03';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body.iga-fullscreen-body #wpadminbar { display: none !important; }
body.iga-fullscreen-body { padding-top: 0 !important; }

#ig-admin-app { min-height: 100vh; display: flex; flex-direction: column; }

/* =========================================================================
   IG-GRADIENT — subtle (15%) + full saturation variants
   Subtle = ambient backgrounds; Full = primary CTA + brand mark only
   ========================================================================= */
.iga-grad-text {
  background: linear-gradient(135deg, #515BD4 0%, #DD2A7B 60%, #F77737 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.iga-grad-bg {
  background: linear-gradient(135deg, #515BD4 0%, #DD2A7B 60%, #F77737 100%);
}
.iga-grad-bg-soft {
  background: linear-gradient(135deg, rgba(81, 91, 212, 0.15) 0%, rgba(221, 42, 123, 0.15) 60%, rgba(247, 119, 55, 0.15) 100%);
}
.iga-grad-ring-soft {
  position: relative;
}
.iga-grad-ring-soft::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(81,91,212,0.30), rgba(221,42,123,0.30), rgba(247,119,55,0.30));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

.iga-glow-ig      { box-shadow: var(--iga-shadow-glow); }
.iga-glow-soft    { box-shadow: var(--iga-shadow-glow-soft); }

/* =========================================================================
   SCROLLBARS — invisible-on-rest, subtle on hover (Apple-style)
   ========================================================================= */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.10) transparent;
}
*::-webkit-scrollbar         { width: 10px; height: 10px; }
*::-webkit-scrollbar-track   { background: transparent; }
*::-webkit-scrollbar-thumb   {
  background: rgba(255,255,255,0.10);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
  transition: background var(--iga-dur-fast) var(--iga-ease-standard);
}
*::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.20); background-clip: padding-box; }

/* =========================================================================
   FOCUS — IG-pink ring, used on all interactive elements
   ========================================================================= */
.iga-focus-ring:focus,
.iga-focus-ring:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(221, 42, 123, 0.30);
}

/* =========================================================================
   SKELETON shimmer
   ========================================================================= */
.iga-skeleton {
  background: linear-gradient(90deg, #1c1c1e 0%, #2c2c2e 50%, #1c1c1e 100%);
  background-size: 200% 100%;
  animation: iga-shimmer 1.4s linear infinite;
  border-radius: 10px;
}
@keyframes iga-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* =========================================================================
   EMPTY-STATE pattern (ported from ig-studio §Empty-state-pattern)
   ========================================================================= */
.iga-empty {
  text-align: center;
  padding: 56px 24px;
  max-width: 480px;
  margin: 0 auto;
}
.iga-empty__icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: var(--iga-surface-2);
  color: var(--iga-text-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.iga-empty__icon [data-lucide] { width: 24px; height: 24px; stroke-width: 1.5; }
.iga-empty__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--iga-text);
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}
.iga-empty__hint {
  font-size: 13px;
  color: var(--iga-text-3);
  margin: 0 0 20px;
  line-height: 1.55;
}
.iga-empty__cta {
  max-width: 280px;
  margin: 0 auto;
}

/* "Sober done" state — small inline pill, not celebratory */
.iga-done-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 12px;
  background: rgba(48, 209, 88, 0.12);
  color: var(--iga-green);
  font-size: 13px;
  font-weight: 500;
}

/* =========================================================================
   TOAST system — fixed bottom, pill, semantic backgrounds
   ========================================================================= */
.iga-toast-stack {
  position: fixed;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  pointer-events: none;
  max-width: 92vw;
}
.iga-toast {
  background: rgba(28, 28, 30, 0.96);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
          backdrop-filter: blur(20px) saturate(180%);
  color: #fff;
  padding: 10px 18px;
  border-radius: 9999px;
  font-size: 13.5px;
  font-weight: 500;
  box-shadow: var(--iga-shadow-3);
  opacity: 0;
  transform: translateY(20px) scale(0.92);
  transition: opacity 240ms var(--iga-ease-out-expo),
              transform 240ms var(--iga-ease-out-expo);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  pointer-events: auto;
  border: 1px solid rgba(255,255,255,0.08);
}
.iga-toast.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.iga-toast--success { background: rgba(48, 209, 88, 0.96); color: #00210d; }
.iga-toast--error   { background: rgba(255, 69, 58, 0.96); color: #2b0707; }
.iga-toast--info    { background: rgba(10, 132, 255, 0.96); color: #001e44; }

/* =========================================================================
   CHARTS — give canvas breathing room
   ========================================================================= */
.iga-chart-wrap { position: relative; }
.iga-chart-wrap canvas { max-width: 100%; }

/* =========================================================================
   LUCIDE — default sizing
   ========================================================================= */
[data-lucide] {
  width: 18px;
  height: 18px;
  stroke-width: 2;
  flex-shrink: 0;
}

/* =========================================================================
   CUSTOM CHECKBOX ACCENT
   ========================================================================= */
input[type="checkbox"] { accent-color: var(--iga-ig-pink); }
input[type="text"], input[type="number"], input[type="search"],
input[type="datetime-local"], select, textarea {
  font-family: inherit;
}

/* =========================================================================
   PICKER POPOVER positioning context
   ========================================================================= */
.iga-picker { position: relative; }
.iga-picker__popover { position: absolute; top: calc(100% + 6px); left: 0; z-index: 100; }

/* =========================================================================
   NOISE / GRAIN overlay (very subtle, hero elements only)
   ========================================================================= */
.iga-grain::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.04;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* =========================================================================
   STATUS PILL system (ported from ig-studio §Status pills)
   Use bg=rgba(color,0.15) + color=solid for clean iOS-style
   ========================================================================= */
.iga-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 9999px;
  font-size: 11.5px;
  font-weight: 600;
  text-transform: capitalize;
  white-space: nowrap;
  letter-spacing: -0.005em;
  /* Fallback so a status with no dedicated modifier still looks like a pill. */
  background: rgba(255, 255, 255, 0.06);
  color: var(--iga-text-3);
}
.iga-pill--active        { background: rgba(48, 209, 88, 0.15);  color: var(--iga-green); }
.iga-pill--warming       { background: rgba(10, 132, 255, 0.15); color: var(--iga-blue); }
.iga-pill--warning       { background: rgba(255, 159, 10, 0.15); color: var(--iga-orange); }
.iga-pill--suspended,
.iga-pill--banned,
.iga-pill--content_removed { background: rgba(255, 69, 58, 0.15); color: var(--iga-red); }
.iga-pill--retired,
.iga-pill--returned,
.iga-pill--unknown       { background: rgba(120, 120, 128, 0.20); color: var(--iga-text-3); }
.iga-pill--info          { background: rgba(10, 132, 255, 0.15); color: var(--iga-blue); }
.iga-pill--neutral       { background: rgba(255, 255, 255, 0.06); color: var(--iga-text-3); }

/* ig-studio operational statuses (Issues / Tasks / SMS / Cut-requests) */
.iga-pill--open,
.iga-pill--pending       { background: rgba(255, 159, 10, 0.15); color: var(--iga-orange); }
.iga-pill--in_review,
.iga-pill--waiting       { background: rgba(10, 132, 255, 0.15); color: var(--iga-blue); }
.iga-pill--resolved,
.iga-pill--done,
.iga-pill--completed,
.iga-pill--received,
.iga-pill--fulfilled     { background: rgba(48, 209, 88, 0.15);  color: var(--iga-green); }
.iga-pill--timeout       { background: rgba(255, 69, 58, 0.15);  color: var(--iga-red); }
.iga-pill--cancelled,
.iga-pill--expired       { background: rgba(120, 120, 128, 0.20); color: var(--iga-text-3); }

/* =========================================================================
   SECTION HEADER pattern (uppercase tracking-widest tiny muted)
   ========================================================================= */
.iga-sh {
  font-size: 11px;
  font-weight: 700;
  color: var(--iga-text-4);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0;
}

/* =========================================================================
   CARDS — iOS surface tone with subtle border
   ========================================================================= */
.iga-card {
  background: var(--iga-surface-1);
  border: 1px solid var(--iga-border-subtle);
  border-radius: 16px;
  padding: 20px;
  transition: border var(--iga-dur-fast) var(--iga-ease-standard),
              transform var(--iga-dur-fast) var(--iga-ease-standard);
}
.iga-card--hover {
  cursor: pointer;
}
@media (hover: hover) {
  .iga-card--hover:hover {
    border-color: var(--iga-border);
    transform: translateY(-1px);
  }
}
.iga-card--accent { border-color: rgba(221, 42, 123, 0.20); }

/* KPI tile — bigger value, breath */
.iga-tile {
  background: var(--iga-surface-1);
  border: 1px solid var(--iga-border-subtle);
  border-radius: 16px;
  padding: 18px 20px;
  transition: border var(--iga-dur-fast) var(--iga-ease-out-expo),
              transform var(--iga-dur-fast) var(--iga-ease-out-expo);
}
@media (hover: hover) {
  .iga-tile:hover {
    border-color: rgba(221, 42, 123, 0.30);
    transform: translateY(-1px);
  }
}
.iga-tile__label {
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--iga-text-4);
  line-height: 1;
}
.iga-tile__value {
  margin-top: 10px;
  font-size: 26px;
  font-weight: 600;
  color: var(--iga-text);
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.iga-tile__sub {
  margin-top: 6px;
  font-size: 12px;
  color: var(--iga-text-4);
  line-height: 1.4;
}

/* Tile variants */
.iga-tile--success { border-color: rgba(48, 209, 88, 0.25); background: linear-gradient(180deg, rgba(48,209,88,0.05) 0%, var(--iga-surface-1) 100%); }
.iga-tile--danger  { border-color: rgba(255, 69, 58, 0.25);  background: linear-gradient(180deg, rgba(255,69,58,0.05) 0%, var(--iga-surface-1) 100%); }
.iga-tile--warning { border-color: rgba(255, 159, 10, 0.25); background: linear-gradient(180deg, rgba(255,159,10,0.05) 0%, var(--iga-surface-1) 100%); }

/* =========================================================================
   TYPOGRAPHY — page hierarchy
   ========================================================================= */
.iga-h1 {
  font-size: 28px;
  font-weight: 600;
  color: var(--iga-text);
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.15;
}
.iga-h2 {
  font-size: 17px;
  font-weight: 600;
  color: var(--iga-text);
  letter-spacing: -0.01em;
  margin: 0;
  line-height: 1.3;
}
.iga-subtitle {
  font-size: 14px;
  color: var(--iga-text-3);
  margin-top: 4px;
  line-height: 1.5;
}
.iga-page-head {
  margin-bottom: 24px;
}

/* Section divider — separates major chunks of content */
.iga-divider {
  height: 1px;
  background: var(--iga-border-subtle);
  margin: 24px 0;
}

/* =========================================================================
   BUTTONS
   ========================================================================= */
.iga-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--iga-text);
  cursor: pointer;
  transition: background var(--iga-dur-fast) var(--iga-ease-out-expo),
              border var(--iga-dur-fast) var(--iga-ease-out-expo),
              transform var(--iga-dur-fast) var(--iga-ease-out-expo),
              box-shadow var(--iga-dur-fast) var(--iga-ease-out-expo);
  white-space: nowrap;
}
.iga-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(221, 42, 123, 0.30);
}
.iga-btn:active { transform: scale(0.97); }

.iga-btn--primary {
  background: linear-gradient(135deg, #515BD4 0%, #DD2A7B 60%, #F77737 100%);
  color: #fff;
  font-weight: 600;
}
@media (hover: hover) {
  .iga-btn--primary:hover { box-shadow: var(--iga-shadow-glow-soft); }
}

.iga-btn--secondary {
  background: var(--iga-surface-2);
  color: var(--iga-text);
  border-color: var(--iga-border-subtle);
}
@media (hover: hover) {
  .iga-btn--secondary:hover { background: var(--iga-surface-3); }
}

.iga-btn--ghost {
  background: transparent;
  color: var(--iga-text-3);
}
@media (hover: hover) {
  .iga-btn--ghost:hover { background: var(--iga-surface-2); color: var(--iga-text); }
}

/* =========================================================================
   FORM INPUTS — uniform appearance
   ========================================================================= */
.iga-input {
  background: var(--iga-surface-2);
  border: 1px solid var(--iga-border-subtle);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 13.5px;
  font-family: inherit;
  color: var(--iga-text);
  transition: border var(--iga-dur-fast) var(--iga-ease-out-expo),
              box-shadow var(--iga-dur-fast) var(--iga-ease-out-expo);
  outline: none;
}
.iga-input:hover { border-color: var(--iga-border); }
.iga-input:focus {
  border-color: rgba(221, 42, 123, 0.50);
  box-shadow: 0 0 0 3px rgba(221, 42, 123, 0.18);
}
.iga-input::placeholder { color: var(--iga-text-5); }

.iga-select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-color: var(--iga-surface-2);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='rgba(235,235,245,0.40)'%3E%3Cpath d='M6 9L1 4l1-1 4 4 4-4 1 1z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 10px;
  border: 1px solid var(--iga-border-subtle);
  border-radius: 10px;
  padding: 8px 32px 8px 12px;
  font-size: 13.5px;
  font-family: inherit;
  color: var(--iga-text);
  cursor: pointer;
  transition: border var(--iga-dur-fast) var(--iga-ease-out-expo),
              box-shadow var(--iga-dur-fast) var(--iga-ease-out-expo);
}
.iga-select:hover { border-color: var(--iga-border); }
.iga-select:focus {
  outline: none;
  border-color: rgba(221, 42, 123, 0.50);
  box-shadow: 0 0 0 3px rgba(221, 42, 123, 0.18);
}

/* =========================================================================
   TABLE — clean iOS-list rhythm
   ========================================================================= */
.iga-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.iga-table th {
  background: transparent;
  text-align: left;
  padding: 12px 14px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--iga-text-4);
  border-bottom: 1px solid var(--iga-border-subtle);
}
.iga-table td {
  padding: 12px 14px;
  color: var(--iga-text-2);
  border-bottom: 1px solid var(--iga-border-subtle);
}
.iga-table tbody tr:last-child td { border-bottom: none; }
.iga-table tbody tr {
  transition: background var(--iga-dur-fast) var(--iga-ease-out-expo);
}
.iga-table tbody tr[data-clickable] {
  cursor: pointer;
}
@media (hover: hover) {
  .iga-table tbody tr:hover { background: var(--iga-surface-2); }
}

/* =========================================================================
   SPIN ANIMATION — used by refresh buttons
   ========================================================================= */
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.animate-spin { animation: spin 1s linear infinite; }

/* =========================================================================
   REDUCE MOTION — accessibility (ported from ig-studio)
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================================
   HOVER GATING — touch devices skip hover-only treatments
   ========================================================================= */
@media (hover: none) {
  .iga-hover\:lift:hover { transform: none; box-shadow: var(--iga-shadow-1); }
}