/* ═══════════════════════════════════════════════════════════
   PRICING TOOL — Design System v3
   Fresh Green × Pure White × Charcoal Dark
   Inspired by: Storement SaaS (light) + NuPhy (dark)
   ═══════════════════════════════════════════════════════════ */

/* ── Design Tokens ────────────────────────────────────────── */
:root {
  /* Dark mode — Charcoal + Lime */
  --bg:            #111111;
  --surface:       #1A1A1A;
  --surface2:      #222222;
  --surface3:      #2A2A2A;
  --border:        rgba(255,255,255,0.08);
  --border-hover:  rgba(163,230,53,0.40);
  --accent:        #A3E635;
  --accent2:       #BEF264;
  --accent-dim:    rgba(163,230,53,0.12);
  --accent-glow:   0 4px 24px rgba(163,230,53,0.22);
  --success:       #4ADE80;
  --success-dim:   rgba(74,222,128,0.12);
  --danger:        #F87171;
  --danger-dim:    rgba(248,113,113,0.12);
  --text:          #FAFAFA;
  --text-muted:    #A1A1AA;
  --text-dim:      #3F3F46;
  --radius:        14px;
  --radius-sm:     10px;
  --radius-xs:     6px;
  --ease-out:      cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out:   cubic-bezier(0.77, 0, 0.175, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth:   cubic-bezier(0.4, 0, 0.2, 1);
  --font-mono:     'IBM Plex Mono', 'Menlo', monospace;
  --shadow-sm:     0 1px 3px rgba(0,0,0,0.5);
  --shadow-md:     0 4px 16px rgba(0,0,0,0.45);
  --shadow-lg:     0 8px 36px rgba(0,0,0,0.5);
  --topbar:        90px;
}

[data-theme="light"] {
  /* Light mode — Pure White + Forest Green */
  --bg:            #FFFFFF;
  --surface:       #FAFAFA;
  --surface2:      #F4F4F5;
  --surface3:      #E4E4E7;
  --border:        rgba(0,0,0,0.07);
  --border-hover:  rgba(22,163,74,0.35);
  --accent:        #16A34A;
  --accent2:       #15803D;
  --accent-dim:    rgba(22,163,74,0.10);
  --accent-glow:   0 4px 24px rgba(22,163,74,0.18);
  --success:       #16A34A;
  --success-dim:   rgba(22,163,74,0.10);
  --danger:        #DC2626;
  --danger-dim:    rgba(220,38,38,0.08);
  --text:          #09090B;
  --text-muted:    #71717A;
  --text-dim:      #D4D4D8;
  --shadow-sm:     0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:     0 4px 16px rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.04);
  --shadow-lg:     0 8px 32px rgba(0,0,0,0.08), 0 4px 16px rgba(0,0,0,0.04);
}

/* ── Theme Transition ─────────────────────────────────────── */
html {
  transition:
    background-color 0.35s var(--ease-smooth),
    color            0.35s var(--ease-smooth);
}

body,
.panel, .card, .section-card, .profile-hero,
.sidebar, .nav-item, .user-pill, .setting-field,
.msg-bubble, .msg-input, .input-area,
.search-input-wrap, .tool-btn,
.dm-sidebar, .dm-convo, .dm-user-item,
.chat-input-bar, .floating-nav,
.video-card, .stat-card, .kpi-mini, .stat-tile,
.field, .margin-card, .breakdown-card,
.form-field input, .form-field select,
.input-field, .step-card, .lp-hd,
.feat-card, .stat-item, .contact-card {
  transition:
    background-color 0.32s var(--ease-smooth),
    border-color     0.28s var(--ease-smooth),
    color            0.28s var(--ease-smooth),
    box-shadow       0.32s var(--ease-smooth);
}

/* ── Focus Rings ──────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
  box-shadow: 0 0 0 4px var(--accent-dim);
  transition: box-shadow 0.18s ease, outline-color 0.18s ease;
}
input:focus-visible,
textarea:focus-visible,
select:focus-visible { outline: none; box-shadow: none; }

/* ── Text Selection ───────────────────────────────────────── */
::selection {
  background: var(--accent-dim);
  color: inherit;
}

/* ── Scrollbars ───────────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(163,230,53,0.18);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(163,230,53,0.35);
}
[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: rgba(22,163,74,0.18);
}
[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(22,163,74,0.35);
}
* { scrollbar-width: thin; scrollbar-color: rgba(163,230,53,0.15) transparent; }
[data-theme="light"] * { scrollbar-color: rgba(22,163,74,0.15) transparent; }

/* ── Touch targets ────────────────────────────────────────── */
button, a, [role="button"], label, select {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* ── Button Press (Emil's scale feedback) ─────────────────── */
button:active,
a:active,
[role="button"]:active {
  transform: scale(0.97);
  transition: transform 0.1s var(--ease-smooth) !important;
}

.send-btn:active,
.tool-btn:active,
.edit-save-btn:active,
.pinned-btn:active,
.msg-action-btn:active {
  transform: scale(0.93);
  transition: transform 0.08s var(--ease-smooth);
}

/* ── Page Entrance ────────────────────────────────────────── */
@keyframes pg-fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.wrapper,
.page-wrapper,
.profile-wrapper,
.videos-wrapper {
  animation: pg-fade-in 0.4s var(--ease-out) both;
}
.main, .page.active {
  animation: pg-fade-in 0.32s var(--ease-out) both;
}

/* ── Reduced Motion ───────────────────────────────────────── */
@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;
  }
}

/* ── Visually hidden ──────────────────────────────────────── */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border-width: 0;
}

/* ── Hover lift ───────────────────────────────────────────── */
.hover-lift {
  transition: transform 0.22s var(--ease-spring), box-shadow 0.22s ease !important;
}
.hover-lift:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg), 0 0 0 1px var(--border-hover) !important;
}

/* ── Number display ───────────────────────────────────────── */
.num, .profit-amount, .margin-value, .breakdown-val {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  font-family: var(--font-mono);
}

/* ── Card glow on hover ───────────────────────────────────── */
.glow-on-hover {
  transition: box-shadow 0.26s ease, border-color 0.26s ease, transform 0.22s var(--ease-spring) !important;
}
.glow-on-hover:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 0 0 1px rgba(163,230,53,0.20), 0 0 20px rgba(163,230,53,0.06) !important;
  border-color: rgba(163,230,53,0.25) !important;
  transform: translateY(-2px);
}
[data-theme="light"] .glow-on-hover:hover {
  box-shadow: var(--shadow-md), 0 0 0 1px rgba(22,163,74,0.20) !important;
  border-color: rgba(22,163,74,0.28) !important;
}

/* ── Section card hover ───────────────────────────────────── */
.section-card {
  transition: border-color 0.22s var(--ease-smooth), box-shadow 0.22s var(--ease-smooth), transform 0.22s var(--ease-spring) !important;
}
.section-card:hover {
  border-color: rgba(163,230,53,0.14) !important;
  box-shadow: 0 4px 28px rgba(0,0,0,0.3), 0 0 0 1px rgba(163,230,53,0.08) !important;
  transform: translateY(-1px);
}
[data-theme="light"] .section-card:hover {
  border-color: rgba(22,163,74,0.16) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.07), 0 0 0 1px rgba(22,163,74,0.10) !important;
}

/* ── Inputs ───────────────────────────────────────────────── */
input, textarea, select {
  color: var(--text);
  font-family: 'Cairo', sans-serif;
}
input::placeholder, textarea::placeholder {
  color: var(--text-dim);
  opacity: 0.8;
}

/* ── Elevation tokens ─────────────────────────────────────── */
.elevation-1 { box-shadow: var(--shadow-sm); }
.elevation-2 { box-shadow: var(--shadow-md); }
.elevation-3 { box-shadow: var(--shadow-lg); }

/* ── Dot grid background ──────────────────────────────────── */
.dot-grid {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: 28px 28px;
}
/* Ambient gradient orbs — dark mode atmosphere */
.dot-grid::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 55% 45% at 85% 10%, rgba(163,230,53,0.07) 0%, transparent 60%),
    radial-gradient(ellipse 45% 55% at 15% 85%, rgba(163,230,53,0.05) 0%, transparent 60%),
    radial-gradient(ellipse 35% 30% at 50% 50%, rgba(163,230,53,0.025) 0%, transparent 70%);
}
[data-theme="light"] .dot-grid {
  background-image: radial-gradient(rgba(0,0,0,0.048) 1px, transparent 1px);
}
[data-theme="light"] .dot-grid::after {
  background:
    radial-gradient(ellipse 55% 45% at 85% 10%, rgba(22,163,74,0.05) 0%, transparent 60%),
    radial-gradient(ellipse 45% 55% at 15% 85%, rgba(22,163,74,0.04) 0%, transparent 60%);
}

/* ── Accent gradient ──────────────────────────────────────── */
.grad-accent {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
}

/* ── Shimmer skeleton ─────────────────────────────────────── */
@keyframes shimmer {
  from { background-position: -400px 0; }
  to   { background-position:  400px 0; }
}
.shimmer {
  background: linear-gradient(
    90deg,
    var(--surface2) 25%,
    var(--surface3) 50%,
    var(--surface2) 75%
  );
  background-size: 800px 100%;
  animation: shimmer 1.6s infinite linear;
}

/* ── Accent pulse ring ────────────────────────────────────── */
@keyframes accentRing {
  0%   { box-shadow: 0 0 0 0   rgba(163,230,53,0.5); }
  70%  { box-shadow: 0 0 0 10px rgba(163,230,53,0);   }
  100% { box-shadow: 0 0 0 0   rgba(163,230,53,0);   }
}
[data-theme="light"] @keyframes accentRing {
  0%   { box-shadow: 0 0 0 0   rgba(22,163,74,0.5); }
  70%  { box-shadow: 0 0 0 10px rgba(22,163,74,0);   }
  100% { box-shadow: 0 0 0 0   rgba(22,163,74,0);   }
}
.pulse-accent { animation: accentRing 2s ease-out infinite; }

/* ── Stagger children fade-up ─────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.stagger > * { animation: fadeUp 0.45s var(--ease-out) both; }
.stagger > *:nth-child(1) { animation-delay: 0.04s; }
.stagger > *:nth-child(2) { animation-delay: 0.10s; }
.stagger > *:nth-child(3) { animation-delay: 0.16s; }
.stagger > *:nth-child(4) { animation-delay: 0.22s; }
.stagger > *:nth-child(5) { animation-delay: 0.28s; }
.stagger > *:nth-child(6) { animation-delay: 0.34s; }

/* ── Badge ────────────────────────────────────────────────── */
.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  font-family: 'Tajawal';
}
.badge-admin  { background: var(--accent-dim); color: var(--accent); }
.badge-mod    { background: rgba(96,165,250,0.12); color: #60A5FA; }
.badge-user   { background: rgba(255,255,255,0.06); color: var(--text-muted); }
.badge-access { background: var(--success-dim); color: var(--success); }
.badge-no     { background: var(--danger-dim); color: var(--danger); }

[data-theme="light"] .badge-admin { background: rgba(22,163,74,0.10); color: #15803D; }
[data-theme="light"] .badge-mod   { background: rgba(37,99,235,0.10); color: #1D4ED8; }
[data-theme="light"] .badge-user  { background: rgba(0,0,0,0.05);     color: var(--text-muted); }

/* ── Avatar pulse ─────────────────────────────────────────── */
@keyframes avatarPulse {
  0%,100% { box-shadow: 0 0 0 0   rgba(163,230,53,0); }
  50%     { box-shadow: 0 0 0 4px rgba(163,230,53,0.22); }
}
[data-theme="light"] @keyframes avatarPulse {
  0%,100% { box-shadow: 0 0 0 0   rgba(22,163,74,0); }
  50%     { box-shadow: 0 0 0 4px rgba(22,163,74,0.22); }
}

/* ── Toast ────────────────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--surface);
  border: 1px solid rgba(74,222,128,0.30);
  border-radius: 12px;
  padding: 13px 24px;
  font-size: 13px;
  font-family: 'Tajawal';
  font-weight: 600;
  color: var(--success);
  opacity: 0;
  pointer-events: none;
  z-index: 9999;
  transition: opacity 0.28s var(--ease-out), transform 0.28s var(--ease-spring);
  white-space: nowrap;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 24px rgba(0,0,0,0.4), 0 0 0 1px rgba(74,222,128,0.12), inset 0 1px 0 rgba(255,255,255,0.06);
  display: flex; align-items: center; gap: 8px;
}
.toast::before {
  content: '✓';
  width: 18px; height: 18px; border-radius: 50%;
  background: rgba(74,222,128,0.15);
  border: 1px solid rgba(74,222,128,0.3);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 900; flex-shrink: 0;
}
.toast.err::before { content: '✕'; color: var(--danger); background: rgba(248,113,113,0.12); border-color: rgba(248,113,113,0.28); }
.toast.err { color: var(--danger); border-color: rgba(248,113,113,0.28); }
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
[data-theme="light"] .toast {
  box-shadow: 0 4px 24px rgba(0,0,0,0.12), 0 0 0 1px rgba(22,163,74,0.12);
  background: rgba(250,250,250,0.95);
}