/* =====================================================================
 * Phase 10B: 洋子システムモード (POP テーマ) — 新 UI 用
 *
 * body.pop-theme が付いたときだけ発動。新 UI の CSS トークンを POP 系に
 * 上書きし、主要コンポーネントに POP 装飾を追加する。
 *
 * 読込タイミング: styles.css の後ろに読込 (後勝ち)。
 * 適用/解除は yoko-mode.js が body の class 付与で制御、状態は
 * localStorage キー `yoko_mode` で永続化。
 * ===================================================================== */

/* --- Design tokens (POP palette) -------------------------------- */
body.pop-theme {
  --bg: #fef1f8;
  --surface: #ffffff;
  --surface-2: #fce7f3;
  --border: #f9a8d4;
  --border-2: #ec4899;
  --text: #3b0764;
  --muted: #7e22ce;
  --hint: #a855f7;
  --accent: #ec4899;
  --accent-hover: #db2777;
  --accent-fg: #ffffff;
  --success: #059669;
  --success-bg: #d1fae5;
  --danger: #e11d48;

  /* Legacy aliases も同時に上書き (旧 inline CSS が参照するため) */
  --text-muted: #7e22ce;
  --text-subtle: #a855f7;
  --accent-soft: #fce7f3;
  --border-strong: #ec4899;

  background:
    radial-gradient(at 20% 10%, rgba(252,231,243,0.55) 0%, transparent 45%),
    radial-gradient(at 80% 20%, rgba(219,234,254,0.40) 0%, transparent 45%),
    radial-gradient(at 40% 80%, rgba(254,243,199,0.40) 0%, transparent 45%),
    radial-gradient(at 90% 90%, rgba(221,214,254,0.45) 0%, transparent 45%),
    linear-gradient(135deg, #fef1f8 0%, #fae8b8 100%);
  background-attachment: fixed;
}

/* --- Header ------------------------------------------------------- */
body.pop-theme .app-header {
  background: rgba(253, 231, 243, 0.92);
  border-bottom: 2px solid var(--accent);
  backdrop-filter: blur(6px);
}
body.pop-theme .brand-logo {
  background: conic-gradient(from 0deg, #ec4899, #f59e0b, #10b981, #3b82f6, #a855f7, #ec4899);
  color: white;
  animation: yoko-spin 4s linear infinite;
  box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(236, 72, 153, 0.35);
}
body.pop-theme .brand-name {
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--text);
}
body.pop-theme .brand-edition { color: var(--muted); font-weight: 600; }

/* Nav */
body.pop-theme .main-nav a {
  color: var(--muted);
  font-weight: 600;
}
body.pop-theme .main-nav a:hover {
  background: var(--surface-2);
  color: var(--accent);
}
body.pop-theme .main-nav a.active {
  background: linear-gradient(135deg, #ec4899 0%, #a855f7 100%);
  color: #fff;
  box-shadow: 0 2px 0 -1px rgba(236, 72, 153, 0.35);
}

@keyframes yoko-spin { to { transform: rotate(360deg); } }

/* --- Status pill -------------------------------------------------- */
body.pop-theme .status-pill {
  border: 1.5px solid var(--accent);
  background: #fff;
  color: var(--accent);
  font-weight: 700;
}

/* --- Metrics / cards --------------------------------------------- */
body.pop-theme .metric {
  border: 2px solid var(--accent);
  background: #fff;
  box-shadow: 0 4px 0 -1px rgba(236, 72, 153, 0.25);
}
body.pop-theme .metric-label::before {
  content: "✨ ";
}
body.pop-theme .metric-label { color: var(--muted); font-weight: 700; }
body.pop-theme .metric-value { color: var(--text); }
body.pop-theme .metric-sub.up   { color: var(--success); font-weight: 700; }
body.pop-theme .metric-sub.down { color: var(--danger);  font-weight: 700; }

/* --- yc-card (前年単価ベース比較) --------------------------------- */
body.pop-theme .yc-cell-v,
body.pop-theme .yc-cell .yc-v { color: var(--text); }
body.pop-theme .yc-cell .yc-v.up   { color: var(--success); }
body.pop-theme .yc-cell .yc-v.down { color: var(--danger); }

/* --- Card ------------------------------------------------------- */
body.pop-theme .card {
  border: 2px solid var(--accent);
  background: #fff;
  box-shadow: 0 4px 0 -1px rgba(236, 72, 153, 0.25);
}
body.pop-theme .card-title {
  color: var(--text);
  font-weight: 800;
  letter-spacing: 0.04em;
}
body.pop-theme .card-title::before { content: "✨ "; }
body.pop-theme .card-header { background: linear-gradient(90deg, #fce7f3 0%, #fef3c7 100%); }

/* --- Buttons ------------------------------------------------------ */
body.pop-theme .btn {
  background: #fff;
  border: 1.5px solid var(--accent);
  color: var(--accent);
  font-weight: 600;
}
body.pop-theme .btn:hover {
  background: var(--surface-2);
  border-color: var(--accent-hover);
  color: var(--accent-hover);
}
body.pop-theme .btn-primary {
  background: linear-gradient(135deg, #ec4899 0%, #a855f7 100%);
  border: 2px solid #fff;
  color: #fff;
  font-weight: 700;
  box-shadow: 0 2px 0 -1px rgba(236, 72, 153, 0.5);
}
body.pop-theme .btn-primary:hover {
  background: linear-gradient(135deg, #db2777 0%, #9333ea 100%);
  color: #fff;
  border-color: #fff;
}
body.pop-theme .btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--accent);
}
body.pop-theme .btn-ghost:hover {
  background: var(--surface-2);
  color: var(--accent-hover);
  border-color: transparent;
}
body.pop-theme .btn-danger { color: var(--danger); border-color: var(--danger); }

/* --- Segmented control ------------------------------------------- */
body.pop-theme .seg {
  background: var(--surface-2);
  border: 1px solid var(--accent);
}
body.pop-theme .seg > button.on,
body.pop-theme .seg > label input:checked + span,
body.pop-theme .tab-nav .tab.active {
  background: linear-gradient(135deg, #ec4899, #a855f7);
  color: #fff;
  font-weight: 700;
}

/* --- Inputs ------------------------------------------------------- */
body.pop-theme .input,
body.pop-theme input[type="text"],
body.pop-theme input[type="number"],
body.pop-theme input[type="date"],
body.pop-theme select,
body.pop-theme textarea {
  border: 1.5px solid var(--border);
  border-radius: 8px;
}
body.pop-theme .input:focus,
body.pop-theme input[type="text"]:focus,
body.pop-theme input[type="number"]:focus,
body.pop-theme input[type="date"]:focus,
body.pop-theme select:focus,
body.pop-theme textarea:focus {
  outline: 3px solid rgba(236, 72, 153, 0.25);
  outline-offset: -1px;
  border-color: var(--accent);
}

/* --- Tables ------------------------------------------------------- */
body.pop-theme table.data-table thead th {
  background: linear-gradient(90deg, #fce7f3 0%, #fef3c7 100%);
  color: var(--accent);
  font-weight: 700;
}
body.pop-theme table.data-table tbody tr:hover { background: var(--surface-2); }
body.pop-theme table.data-table tbody tr.selected { background: linear-gradient(90deg, rgba(236, 72, 153, 0.12), transparent); }
body.pop-theme table.data-table tbody tr.selected td:first-child { box-shadow: inset 3px 0 0 var(--accent); }

/* --- Sidebar card (分類集計) ------------------------------------- */
body.pop-theme .cat-row[data-name="原料"]   .dot { background: #ec4899; }
body.pop-theme .cat-row[data-name="資材"]   .dot { background: #f59e0b; }
body.pop-theme .cat-row[data-name="中間品"] .dot { background: #10b981; }
body.pop-theme .cat-row[data-name="その他"] .dot { background: #a855f7; }
body.pop-theme .cat-total .value { color: var(--accent); }

/* --- Footer ------------------------------------------------------ */
body.pop-theme .app-footer::before { content: "💖 "; }
body.pop-theme .app-footer::after  { content: " 💖"; }

/* --- Confetti (yoko-mode.js が生成) ------------------------------- */
body.pop-theme .confetti-layer,
.confetti-layer {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 1000;
  overflow: hidden;
}
.confetti-piece {
  position: absolute;
  font-size: 24px;
  top: -40px;
  animation: yoko-confetti-fall var(--dur, 2.5s) ease-in var(--delay, 0s) forwards;
  will-change: transform, opacity;
}
@keyframes yoko-confetti-fall {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 1; }
  100% { transform: translate3d(var(--dx, 0), 110vh, 0) rotate(var(--rot, 720deg)); opacity: 0; }
}

/* --- Tier UI (Phase 12) -------------------------------------------- */
body.pop-theme table.tier-table thead th {
  background: linear-gradient(90deg, #fce7f3 0%, #fef3c7 100%);
  color: var(--accent);
}
body.pop-theme table.tier-table input[type="number"] {
  border: 1.5px solid var(--border);
}
body.pop-theme .tier-progress {
  border: 2px solid var(--accent);
  background: #fff;
  box-shadow: 0 4px 0 -1px rgba(236, 72, 153, 0.18);
}
body.pop-theme .tier-progress .tp-bar {
  background: var(--surface-2);
}
body.pop-theme .tier-progress .tp-bar-fill {
  background: linear-gradient(90deg, #ec4899, #a855f7);
}
body.pop-theme .tier-progress .tp-list li.current {
  background: linear-gradient(90deg, rgba(236, 72, 153, 0.15), transparent);
  color: var(--accent);
}

/* --- Toolbar / chip ----------------------------------------------- */
body.pop-theme .toolbar {
  border: 2px solid var(--accent);
  background: rgba(255, 255, 255, 0.85);
}
body.pop-theme .period-badge {
  background: linear-gradient(135deg, #fce7f3, #fef3c7);
  color: var(--accent);
  font-weight: 700;
}

/* ========================================================================
 * 印刷時は POP を完全に打ち消す (請求書・PDF で POP が混ざらないよう)
 * export/*.html と invoice.html は yoko-mode.css を読み込まない設計だが、
 * index/trend/backmargin を印刷する場合の保険でここでも neutralize。
 * ====================================================================== */
@media print {
  body.pop-theme {
    background: #fff !important;
    --bg: #fafafa;
    --surface: #ffffff;
    --surface-2: #f4f4f5;
    --border: #e4e4e7;
    --border-2: #d4d4d8;
    --text: #09090b;
    --muted: #71717a;
    --hint: #a1a1aa;
    --accent: #18181b;
    --accent-fg: #fafafa;
    --text-muted: #71717a;
    --text-subtle: #a1a1aa;
    --accent-soft: #f4f4f5;
    --border-strong: #d4d4d8;
  }
  body.pop-theme .brand-logo {
    background: #18181b !important;
    animation: none !important;
    box-shadow: none !important;
  }
  body.pop-theme .app-header,
  body.pop-theme .card,
  body.pop-theme .metric { background: #fff !important; box-shadow: none !important; border-color: #d4d4d8 !important; }
  body.pop-theme .btn-primary {
    background: #18181b !important;
    color: #fff !important;
    border-color: #18181b !important;
    box-shadow: none !important;
  }
  body.pop-theme .card-title::before,
  body.pop-theme .metric-label::before,
  body.pop-theme .app-footer::before,
  body.pop-theme .app-footer::after { content: "" !important; }
  body.pop-theme .confetti-layer { display: none !important; }
}