/* Nichiwa Order Tool — shared cross-page styles.
 *
 * Loaded by public/index.html, public/mobile.html, public/mobile-quote.html
 * via <link rel="stylesheet" href="app-shared.css">.
 *
 * Scope: visual tokens that MUST stay in sync across pages (tier badges,
 * per-tab accent themes). Page-specific layout / typography lives in each
 * page's inline <style> block.
 */

/* ===== Tier badges =====
 * Customer price tier is the single most important classifier in this tool:
 * it drives unit price, discount eligibility, and gift-wrap defaults.
 * The visual vocabulary here is intentionally loud so staff can spot it at
 * a glance from across the room:
 *   - 3 stars (Tier4) = animated rainbow — "this is our top account"
 *   - 2 stars (Tier3) = polished gold
 *   - 1 star  (Tier2) = polished silver
 *   - group   (Tier1) = green ("組合価格")
 *   - unknown         = dashed gray fallback
 *
 * Usage: <span class="tier-badge tier-3stars">★★★3 価格</span>
 * Generator: NichiwaShared.tierBadgeHtml(customer) in app-shared.js.
 */

.tier-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1;
  letter-spacing: 0.02em;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
  /* Stable baseline alignment against adjacent text */
  vertical-align: middle;
}

/* Large variant — used on mobile customer card for thumb-friendly sizing. */
.tier-badge-lg {
  padding: 9px 18px;
  font-size: 15px;
  border-radius: 16px;
}

/* ---- Tier 4 — 3 stars: rainbow, moving ---- */
/* The animated background is positioned well inside a 400%-wide gradient
 * strip so the eye catches motion without it feeling like loading UI.
 * 3.5s is slow enough to feel celebratory rather than busy. */
.tier-badge.tier-3stars {
  background: linear-gradient(
    90deg,
    #ff6b6b 0%,
    #ffa726 16%,
    #ffd93d 33%,
    #66bb6a 50%,
    #42a5f5 66%,
    #ab47bc 83%,
    #ff6b6b 100%
  );
  background-size: 400% 100%;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 2px 8px rgba(155, 93, 229, 0.35);
  animation: tier-rainbow-shift 3.5s linear infinite;
}
@keyframes tier-rainbow-shift {
  0%   { background-position:   0% 50%; }
  100% { background-position: 400% 50%; }
}

/* Respect reduced-motion — staff with vestibular sensitivity still see a
 * clear color cue via the static multi-stop gradient. */
@media (prefers-reduced-motion: reduce) {
  .tier-badge.tier-3stars { animation: none; }
}

/* ---- Tier 3 — 2 stars: gold ---- */
.tier-badge.tier-2stars {
  background: linear-gradient(135deg, #fef3c7 0%, #f5d76e 45%, #d4af37 100%);
  color: #5a4200;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
  border: 1px solid #c69c2b;
}

/* ---- Tier 2 — 1 star: silver ---- */
.tier-badge.tier-1star {
  background: linear-gradient(135deg, #f5f5f5 0%, #cfcfcf 55%, #a8a8a8 100%);
  color: #333;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  border: 1px solid #a8a8a8;
}

/* ---- Tier 1 — group: green ---- */
.tier-badge.tier-group {
  background: linear-gradient(135deg, #66bb6a 0%, #43a047 55%, #2e7d32 100%);
  color: #fff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.22);
  border: 1px solid #2e7d32;
}

/* ---- No tier detected — dashed gray ---- */
.tier-badge.tier-unknown {
  background: #f0f0f0;
  color: #888;
  border: 1px dashed #bbb;
  font-weight: 500;
  box-shadow: none;
}

/* ===== Per-tab / per-page accent themes =====
 *
 * Design principle: each surface (order, quote, queue, pricing, master)
 * has its own accent family so staff landing mid-task can tell at a glance
 * which mode they're in. All themes share the same neutral surface + text
 * colors so they remain visually cohesive.
 *
 * Desktop index.html drives this by setting body[data-active-tab=...]
 * when tabs switch. Mobile pages get a fixed theme via body.page-order or
 * body.page-quote on initial render.
 *
 * The overrides below hit --accent / --accent-2 / --accent-soft — the same
 * three tokens each page's inline CSS already uses. No other tokens need
 * to change for the theme swap to propagate through buttons, cards, tabs,
 * chips, progress bars, etc.
 */

/* Order (default — keeps the existing amber palette staff are used to). */
body[data-active-tab="new-order"],
body.page-order {
  --accent: #c89b5e;
  --accent-2: #8a6636;
  --accent-soft: #f5edde;
}

/* Quote — indigo-blue. Cooler palette signals "price inquiry / paperwork
 * mode" vs the warmer "live order" amber. */
body[data-active-tab="quote"],
body.page-quote {
  --accent: #5b7fb8;
  --accent-2: #3a5a8c;
  --accent-soft: #e4ecf7;
}

/* Queue — teal. Operational, logistics-flavored. */
body[data-active-tab="queue"] {
  --accent: #3e9b99;
  --accent-2: #2a6f6d;
  --accent-soft: #d9eeed;
}

/* Pricing — emerald. Evokes money / margin. */
body[data-active-tab="pricing"] {
  --accent: #4a8f5f;
  --accent-2: #2e6b3f;
  --accent-soft: #dcecdf;
}

/* Sales-lead — coral/rose. Energetic, "go grow the business" flavor;
   distinct from queue (teal) and pricing (emerald) so staff can tell
   they're in the activity dashboard, not a transactional view. */
body[data-active-tab="sales-lead"] {
  --accent: #c0566f;
  --accent-2: #8e3650;
  --accent-soft: #f7e1e6;
}

/* Master — plum. Admin-only flavor. */
body[data-active-tab="master"] {
  --accent: #8a5ea8;
  --accent-2: #5e3d7a;
  --accent-soft: #ebe0f4;
}

/* Light theme only — dark-mode tweaks were removed per app-wide design
 * decision. The light accent-soft values above carry across automatically. */

/* ===== 🏆 Milestone celebration overlay =====
 * Fires from NichiwaShared.maybeCelebrateMilestone() when a sales rep's
 * bonus rank crosses up into a new tier. Each tier gets its own theme
 * (rainbow / gold / silver / bronze / green) so the visual mirrors the
 * level reached — recognising A-rank should *feel* different from E-rank.
 *
 * The overlay covers the whole viewport, blocks input until dismissed
 * (click backdrop, click 続ける, or Esc), and confetti rains from the top.
 */

.milestone-overlay {
  position: fixed; inset: 0;
  z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: rgba(15, 18, 28, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: mlc-fade-in 0.3s ease-out;
  overflow: hidden;
  padding: 16px;
}
.milestone-overlay.mlc-out { animation: mlc-fade-out 0.32s ease-in forwards; }
@keyframes mlc-fade-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes mlc-fade-out { from { opacity: 1; } to { opacity: 0; } }

.milestone-overlay .mlc-card {
  position: relative;
  width: min(440px, 92vw);
  border-radius: 24px;
  padding: 28px 24px 22px;
  background: #fff;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.45),
    0 0 0 4px rgba(255, 255, 255, 0.4);
  text-align: center;
  overflow: hidden;
  animation: mlc-pop-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.milestone-overlay.mlc-out .mlc-card { animation: mlc-pop-out 0.3s ease-in forwards; }
@keyframes mlc-pop-in {
  0%   { transform: scale(0.4) translateY(40px); opacity: 0; }
  60%  { transform: scale(1.05) translateY(0);   opacity: 1; }
  100% { transform: scale(1)    translateY(0);   opacity: 1; }
}
@keyframes mlc-pop-out {
  to { transform: scale(0.92) translateY(20px); opacity: 0; }
}

/* Sweeping shine highlight that swipes once on entry. */
.milestone-overlay .mlc-shine {
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: linear-gradient(115deg,
    transparent 0%, transparent 40%,
    rgba(255, 255, 255, 0.6) 50%,
    transparent 60%, transparent 100%);
  animation: mlc-shine-sweep 1.6s ease-out 0.4s 1;
  pointer-events: none;
}
@keyframes mlc-shine-sweep {
  0%   { transform: translate(-30%, -30%) rotate(0deg); }
  100% { transform: translate(30%, 30%)   rotate(0deg); }
}

.milestone-overlay .mlc-rank-up {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.25em;
  color: #6b7280;
  text-transform: uppercase;
  animation: mlc-rise 0.5s ease-out 0.2s both;
}
@keyframes mlc-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.milestone-overlay .mlc-rank-badge {
  margin: 14px auto 12px;
  width: 140px; height: 140px;
  border-radius: 22px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: #fff;
  font-weight: 900;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3), inset 0 0 0 3px rgba(255, 255, 255, 0.35);
  animation: mlc-badge-spin 0.9s cubic-bezier(0.4, 0, 0.2, 1) 0.15s both,
             mlc-badge-pulse 2.4s ease-in-out 1.05s infinite;
}
@keyframes mlc-badge-spin {
  0%   { transform: rotate(-220deg) scale(0.3); opacity: 0; }
  60%  { transform: rotate(15deg)  scale(1.15); opacity: 1; }
  100% { transform: rotate(0deg)   scale(1);    opacity: 1; }
}
@keyframes mlc-badge-pulse {
  0%, 100% { box-shadow: 0 12px 32px rgba(0,0,0,0.3), inset 0 0 0 3px rgba(255,255,255,0.35), 0 0 0 0 rgba(255,255,255,0); }
  50%      { box-shadow: 0 12px 32px rgba(0,0,0,0.3), inset 0 0 0 3px rgba(255,255,255,0.35), 0 0 0 18px rgba(255,255,255,0); }
}
.milestone-overlay .mlc-rank-letter { font-size: 78px; line-height: 1; letter-spacing: -3px; }
.milestone-overlay .mlc-rank-stars  { font-size: 16px; letter-spacing: 4px; margin-top: 4px; }

.milestone-overlay .mlc-label {
  font-size: 22px; font-weight: 800; letter-spacing: 0.12em;
  margin-top: 4px;
  animation: mlc-rise 0.5s ease-out 0.5s both;
}
.milestone-overlay .mlc-emoji { margin-right: 4px; }
.milestone-overlay .mlc-subtitle {
  font-size: 13px; color: #6b7280; margin-top: 2px; margin-bottom: 14px;
  animation: mlc-rise 0.5s ease-out 0.65s both;
}
.milestone-overlay .mlc-multiplier {
  font-size: 56px; font-weight: 900; line-height: 1;
  margin-top: 6px;
  animation: mlc-rise 0.55s cubic-bezier(0.34,1.56,0.64,1) 0.85s both;
}
.milestone-overlay .mlc-multiplier .x {
  font-size: 28px; vertical-align: super; margin-right: 2px; opacity: 0.85;
}
.milestone-overlay .mlc-multiplier-note {
  font-size: 14px; font-weight: 700; color: #374151;
  margin-top: 4px;
  animation: mlc-rise 0.5s ease-out 1s both;
}
.milestone-overlay .mlc-money {
  margin-top: 14px; padding: 8px 14px;
  background: #f3f4f6; border-radius: 10px;
  font-size: 13px; color: #374151;
  animation: mlc-rise 0.5s ease-out 1.15s both;
}
.milestone-overlay .mlc-period {
  margin-top: 10px;
  font-size: 11px; color: #9ca3af;
  animation: mlc-rise 0.5s ease-out 1.25s both;
}
.milestone-overlay .mlc-dismiss {
  margin-top: 18px;
  padding: 12px 32px;
  border: 0; border-radius: 999px;
  background: #111827; color: #fff;
  font-size: 14px; font-weight: 700; letter-spacing: 0.08em;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
  animation: mlc-rise 0.5s ease-out 1.35s both;
}
.milestone-overlay .mlc-dismiss:hover  { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); }
.milestone-overlay .mlc-dismiss:active { transform: translateY(0); }

/* Confetti rain — particles are absolutely-positioned spans dropped from
 * just above the viewport. Mix of squares + circles, randomised colours
 * via inline style. Pure CSS animation, no JS frame loop. */
.milestone-overlay .mlc-confetti-layer {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.milestone-overlay .mlc-confetti {
  position: absolute;
  top: -24px;
  width: 10px; height: 14px;
  border-radius: 2px;
  opacity: 0.95;
  animation-name: mlc-confetti-fall;
  animation-timing-function: cubic-bezier(0.4, 0.4, 0.6, 1);
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  will-change: transform, opacity;
}
.milestone-overlay .mlc-confetti.mlc-conf-circle {
  width: 10px; height: 10px;
  border-radius: 50%;
}
@keyframes mlc-confetti-fall {
  0%   { transform: translateY(-30px) rotate(0deg);    opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translateY(110vh)  rotate(720deg); opacity: 0; }
}

/* ---- Per-rank theme accents on the card ---- */

/* A — LEGENDARY rainbow. Animated 6-color background runs slowly through
 * the badge so it reads "endgame, mythic". Gold ring around the card. */
.milestone-overlay.mlc-a .mlc-card {
  box-shadow: 0 30px 80px rgba(0,0,0,0.45),
              0 0 0 4px #ffd54f,
              0 0 60px rgba(255, 215, 100, 0.35);
}
.milestone-overlay.mlc-a .mlc-rank-badge {
  background: linear-gradient(115deg,
    #ff6b6b 0%, #ffa726 16%, #ffd93d 33%,
    #66bb6a 50%, #42a5f5 66%, #ab47bc 83%, #ff6b6b 100%);
  background-size: 400% 100%;
  animation: mlc-badge-spin 0.9s cubic-bezier(0.4,0,0.2,1) 0.15s both,
             mlc-badge-pulse 2.4s ease-in-out 1.05s infinite,
             mlc-rainbow-shift 4.5s linear 1.05s infinite;
}
@keyframes mlc-rainbow-shift { from { background-position: 0% 50%; } to { background-position: 400% 50%; } }
.milestone-overlay.mlc-a .mlc-label { color: #b45309; }
.milestone-overlay.mlc-a .mlc-multiplier {
  background: linear-gradient(90deg, #ff6b6b, #ffa726, #ffd93d, #66bb6a, #42a5f5, #ab47bc);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: mlc-rise 0.55s cubic-bezier(0.34,1.56,0.64,1) 0.85s both,
             mlc-rainbow-shift 4s linear 1.5s infinite;
}

/* B — EPIC gold. Royal yellow palette, deep amber border. */
.milestone-overlay.mlc-b .mlc-card {
  box-shadow: 0 30px 80px rgba(0,0,0,0.45),
              0 0 0 4px #fbbf24,
              0 0 50px rgba(251, 191, 36, 0.4);
}
.milestone-overlay.mlc-b .mlc-rank-badge {
  background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 35%, #fde68a 60%, #f59e0b 100%);
}
.milestone-overlay.mlc-b .mlc-label      { color: #92400e; }
.milestone-overlay.mlc-b .mlc-multiplier { color: #d97706; }

/* C — RARE silver. Cool blue-gray, frosty. */
.milestone-overlay.mlc-c .mlc-card {
  box-shadow: 0 30px 80px rgba(0,0,0,0.45),
              0 0 0 4px #94a3b8,
              0 0 50px rgba(148, 163, 184, 0.35);
}
.milestone-overlay.mlc-c .mlc-rank-badge {
  background: linear-gradient(135deg, #64748b 0%, #94a3b8 40%, #cbd5e1 70%, #64748b 100%);
}
.milestone-overlay.mlc-c .mlc-label      { color: #1e3a8a; }
.milestone-overlay.mlc-c .mlc-multiplier { color: #1e40af; }

/* D — UNCOMMON bronze. Warm earthy brown. */
.milestone-overlay.mlc-d .mlc-card {
  box-shadow: 0 30px 80px rgba(0,0,0,0.45),
              0 0 0 4px #b45309,
              0 0 50px rgba(180, 83, 9, 0.3);
}
.milestone-overlay.mlc-d .mlc-rank-badge {
  background: linear-gradient(135deg, #92400e 0%, #b45309 40%, #d97706 70%, #92400e 100%);
}
.milestone-overlay.mlc-d .mlc-label      { color: #7c2d12; }
.milestone-overlay.mlc-d .mlc-multiplier { color: #9a3412; }

/* E — COMMON green. Fresh, "you're on the board". */
.milestone-overlay.mlc-e .mlc-card {
  box-shadow: 0 30px 80px rgba(0,0,0,0.45),
              0 0 0 4px #22c55e,
              0 0 50px rgba(34, 197, 94, 0.3);
}
.milestone-overlay.mlc-e .mlc-rank-badge {
  background: linear-gradient(135deg, #15803d 0%, #22c55e 40%, #86efac 70%, #15803d 100%);
}
.milestone-overlay.mlc-e .mlc-label      { color: #14532d; }
.milestone-overlay.mlc-e .mlc-multiplier { color: #166534; }

/* Reduce motion — keep entry/exit but kill the infinite pulses for
 * users who've requested less motion. */
@media (prefers-reduced-motion: reduce) {
  .milestone-overlay .mlc-rank-badge,
  .milestone-overlay.mlc-a .mlc-rank-badge,
  .milestone-overlay.mlc-a .mlc-multiplier { animation-iteration-count: 1; }
  .milestone-overlay .mlc-confetti { display: none; }
}