/* Direction: SalesSnap — playful, bright retail dashboard. Electric blue + purple, mint, coral, sunny yellow on a soft lilac-white page, navy text. */
/* Completed by the platform from the short form: both modes, every
   palette token, each text-on-ground pair at its floor. To restyle, write the
   short form again (the decisions in one :root) and it is completed again. */

:root {
  --canvas: #f2f4ff;
  --surface: #ffffff;
  --surface-2: #e9edff;
  --border: #d9def7;
  --border-strong: #acaebd;
  --ink: #12154a;
  --muted: #4f5580;
  --accent: #2f55f5;
  --accent-hover: #2848d0;
  --accent-ink: #ffffff;
  --accent-text: #2244d4;
  --accent-strong: #2f55f5;
  --accent-soft: #e3e9ff;
  --accent-border: #9aacfb;
  --success: #0b8a5f;
  --success-ink: #ffffff;
  --success-soft: #d6e7ec;
  --success-strong: #086c4a;
  --warning: #a86a00;
  --warning-ink: #ffffff;
  --warning-soft: #e9e3e0;
  --warning-strong: #8f5a00;
  --danger: #d1362b;
  --danger-ink: #ffffff;
  --danger-soft: #eedde6;
  --danger-strong: #b12e25;
  --chart-1: #2f55f5;
  --chart-2: #cc3bd1;
  --chart-3: #a01418;
  --chart-4: #9e7c1d;
  --chart-5: #106425;
  --chart-6: #0195a4;

  --font-display: "Fredoka", "Nunito", system-ui, sans-serif;
  --font-body: "Nunito", system-ui, sans-serif;
  --display-weight: 600;
  --display-tracking: -0.01em;
  --radius-card: 22px;
  --radius-btn: 14px;
  --radius-input: 12px;
  --shadow-card: 0 10px 28px -14px rgba(47, 85, 245, 0.35);
  --x-blue: #2f55f5;
  --x-purple: #8a3ffc;
  --x-mint: #14cfa0;
  --x-coral: #ff7a4d;
  --x-yellow: #ffc933;
  --x-navy: #12154a;
  --x-on-photo: #ffffff;
  --gradient-hero: linear-gradient(135deg, #2f55f5 0%, #8a3ffc 100%);
  --gradient-sunny: linear-gradient(135deg, #ffc933 0%, #ff7a4d 100%);
  --gradient-fresh: linear-gradient(135deg, #14cfa0 0%, #2f55f5 100%);
  --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-sans: "Nunito", system-ui, sans-serif;
  --eyebrow-tracking: 0.08em;
}

html[data-theme="dark"] {
  --canvas: #030712;
  --surface: #1c202a;
  --surface-2: #10131e;
  --border: #262a33;
  --border-strong: #4f5159;
  --ink: #f2f4ff;
  --muted: #9295a0;
  --accent: #2f55f5;
  --accent-hover: #4e6ff7;
  --accent-ink: #ffffff;
  --accent-text: #6a86f9;
  --accent-strong: #5d7bf8;
  --accent-soft: #0d1844;
  --accent-border: #172a78;
  --success: #0b8a5f;
  --success-ink: #ffffff;
  --success-soft: #052423;
  --success-strong: #319c78;
  --warning: #a86a00;
  --warning-ink: #ffffff;
  --warning-soft: #271d0e;
  --warning-strong: #b58127;
  --danger: #d1362b;
  --danger-ink: #ffffff;
  --danger-soft: #301118;
  --danger-strong: #db635a;
  --chart-1: #345cfc;
  --chart-2: #d343d7;
  --chart-3: #ee0c1f;
  --chart-4: #a78110;
  --chart-5: #159a3a;
  --chart-6: #169baa;
}

/* SalesSnap — the app's own look: tones, sidebar, pills, choices, charts, print. Tokens only. */

.tone-blue { --tone: var(--x-blue); }
.tone-purple { --tone: var(--x-purple); }
.tone-mint { --tone: var(--x-mint); }
.tone-coral { --tone: var(--x-coral); }
.tone-yellow { --tone: var(--x-yellow); }

/* sidebar */
.sidebar { background: var(--x-navy); color: var(--x-on-photo); }
.sidebar-glow { background: var(--gradient-hero); opacity: 0.35; }
.nav-link {
  display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.85rem; border-radius: 14px;
  font-weight: 700; color: var(--x-on-photo); opacity: 0.88; transition: background 0.15s, transform 0.15s, opacity 0.15s;
}
.nav-link:hover { background: color-mix(in srgb, var(--x-on-photo) 12%, transparent); opacity: 1; transform: translateX(3px); }
.nav-link:focus-visible { outline: 3px solid var(--x-yellow); outline-offset: 2px; }
.nav-link.active { background: var(--gradient-hero); opacity: 1; box-shadow: 0 8px 20px -8px var(--x-purple); }
.badge-count {
  min-width: 1.35rem; height: 1.35rem; padding: 0 0.35rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--x-yellow); color: var(--x-navy); font-size: 0.75rem; font-weight: 800;
}

/* hero + banners */
.hero { background: var(--gradient-hero); position: relative; isolation: isolate; }
.hero::before, .hero::after { content: ""; position: absolute; border-radius: 999px; z-index: -1; }
.hero::before { width: 260px; height: 260px; right: -60px; top: -90px; background: color-mix(in srgb, var(--x-on-photo) 14%, transparent); }
.hero::after { width: 150px; height: 150px; right: 140px; bottom: -70px; background: color-mix(in srgb, var(--x-yellow) 45%, transparent); }
.sunny { background: var(--gradient-sunny); }
.fresh { background: var(--gradient-fresh); }

/* cards */
.stat { border-top: 5px solid var(--tone); transition: transform 0.18s, box-shadow 0.18s; }
.stat:hover { transform: translateY(-3px); }
.chip-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; border-radius: 14px;
  background: color-mix(in srgb, var(--tone) 18%, var(--surface)); color: var(--ink);
}
.lift { transition: transform 0.18s, box-shadow 0.18s; }
.lift:hover { transform: translateY(-3px); }

/* pills (status / methods / stock) */
.pill {
  display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.15rem 0.65rem; border-radius: 999px; font-size: 0.78rem; font-weight: 800;
  white-space: nowrap; color: var(--ink);
  background: color-mix(in srgb, var(--tone) 24%, var(--surface));
  border: 1.5px solid color-mix(in srgb, var(--tone) 60%, transparent);
}

/* messages */
.msg {
  padding: 0.85rem 1rem; border-radius: 16px; border-left: 6px solid var(--tone); color: var(--ink);
  background: color-mix(in srgb, var(--tone) 16%, var(--surface));
}

/* avatars */
.avatar {
  display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; font-family: var(--font-display); font-weight: 700;
  background: color-mix(in srgb, var(--tone) 28%, var(--surface)); border: 2px solid var(--tone); color: var(--ink);
}

/* radio choices as big buttons */
.choice { position: relative; display: block; cursor: pointer; }
.choice-box {
  display: flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.7rem 0.5rem; border-radius: 14px; font-weight: 800;
  border: 2px solid var(--border); background: var(--surface); color: var(--ink); transition: transform 0.12s, border-color 0.12s;
}
.choice:hover .choice-box { border-color: var(--x-blue); }
.choice input:checked + .choice-box { background: var(--gradient-hero); color: var(--x-on-photo); border-color: transparent; transform: translateY(-1px); }
.choice input:focus-visible + .choice-box { outline: 3px solid var(--x-yellow); outline-offset: 2px; }

/* buttons */
.btn-grad { background: var(--gradient-hero); color: var(--x-on-photo); border-color: transparent; }
.btn-grad:hover { filter: brightness(1.08); }
.btn-danger-soft { background: color-mix(in srgb, var(--x-coral) 20%, var(--surface)); color: var(--ink); border: 1.5px solid var(--x-coral); }

/* tables */
.tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.95rem; }
.tbl th { text-align: left; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); padding: 0.6rem 0.75rem; border-bottom: 2px solid var(--border); white-space: nowrap; }
.tbl td { padding: 0.7rem 0.75rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.tbl tbody tr:hover td { background: var(--accent-soft); }
.thumb { width: 2.6rem; height: 2.6rem; border-radius: 12px; object-fit: cover; background: var(--surface-2); flex: none; }
.thumb-fallback { display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; border-radius: 12px; background: var(--surface-2); flex: none; }

/* progress animation (starts shorter, grows in) */
.bar-fill { transform-origin: left center; animation: grow 0.9s ease-out; }
@keyframes grow { from { transform: scaleX(0.25); } to { transform: scaleX(1); } }
.float { animation: bob 3.6s ease-in-out infinite; }
.float-b { animation: bob 4.4s ease-in-out infinite 0.6s; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
html.reduced-motion .bar-fill, html.reduced-motion .float, html.reduced-motion .float-b { animation: none; }
html.reduced-motion .nav-link, html.reduced-motion .stat, html.reduced-motion .lift { transition: none; }

/* sign-in illustration */
.scene-sky { background: var(--gradient-hero); }

/* print: only the report */
@media print {
  .no-print, aside, .print-hide { display: none !important; }
  .print-reset { padding-left: 0 !important; }
  body { background: var(--surface) !important; }
  .card { box-shadow: none !important; }
}