/* ==========================================================================
   バズマ UI
   - .adm-* : 管理画面（/admin）デザインシステム
   - .mypage-* / .login-container : インフルエンサー側・ログイン（最小限）
   ========================================================================== */

:root {
    --adm-ink: #211d3a;        /* サイドバー・見出し（濃紺すみれ） */
    --adm-ink-soft: #2e2950;   /* サイドバー hover */
    --adm-ink-line: #3a3560;
    --adm-paper: #f5f5f8;      /* アプリ背景 */
    --adm-card: #ffffff;
    --adm-line: #e5e4ee;
    --adm-text: #26243a;
    --adm-muted: #75718c;
    --adm-accent: #e5266a;     /* バズピンク（主要アクション・現在地） */
    --adm-accent-deep: #c21455;
    --adm-accent-soft: #fde7f0;
    --adm-focus: #7c6ff0;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--adm-paper);
    color: var(--adm-text);
    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", Meiryo, sans-serif;
    font-size: 14px;
    line-height: 1.6;
}

a { color: inherit; }

:focus-visible { outline: 2px solid var(--adm-focus); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   シェル（サイドバー + 本文）
   -------------------------------------------------------------------------- */
.adm-shell { display: flex; min-height: 100vh; }

.adm-side {
    width: 216px;
    flex: 0 0 216px;
    background: var(--adm-ink);
    color: #eceaf6;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
}

.adm-brand {
    padding: 20px 20px 16px;
    border-bottom: 1px solid var(--adm-ink-line);
}
.adm-brand strong {
    display: block;
    font-size: 20px;
    letter-spacing: 0.14em;
    color: #fff;
}
.adm-brand-name {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    color: #c9c4e2;
}
.adm-brand-domain {
    display: block;
    margin-top: 1px;
    font-size: 10px;
    letter-spacing: 0.06em;
    color: #7d76a8;
    font-family: "SFMono-Regular", Consolas, Menlo, monospace;
}
.adm-brand-console {
    display: block;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--adm-ink-line);
    font-size: 11px;
    letter-spacing: 0.22em;
    color: #9b94c4;
}

.adm-side nav { flex: 1; padding: 12px 0; }
.adm-side nav a {
    display: block;
    padding: 9px 20px 9px 17px;
    border-left: 3px solid transparent;
    color: #c9c4e2;
    text-decoration: none;
    font-size: 13.5px;
}
.adm-side nav a:hover { background: var(--adm-ink-soft); color: #fff; }
.adm-side nav a.is-active {
    border-left-color: var(--adm-accent);
    background: var(--adm-ink-soft);
    color: #fff;
    font-weight: 600;
}

.adm-side-foot { padding: 14px 20px; border-top: 1px solid var(--adm-ink-line); }
.adm-side-foot a { color: #9b94c4; text-decoration: none; font-size: 13px; }
.adm-side-foot a:hover { color: #fff; }

.adm-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.adm-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 28px;
    background: var(--adm-card);
    border-bottom: 1px solid var(--adm-line);
}
.adm-top h1 { margin: 0; font-size: 17px; font-weight: 700; }
.adm-user { color: var(--adm-muted); font-size: 12.5px; }

.adm-main { padding: 24px 28px 48px; }

/* --------------------------------------------------------------------------
   カード・セクション
   -------------------------------------------------------------------------- */
.adm-card {
    background: var(--adm-card);
    border: 1px solid var(--adm-line);
    border-radius: 10px;
    padding: 18px 20px;
    margin-bottom: 20px;
}
.adm-card > h3 {
    margin: 0 0 12px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--adm-muted);
}

.adm-grid { display: grid; gap: 20px; }
.adm-grid-2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 960px) { .adm-grid-2 { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   シグネチャ: 注文パイプライン（受注 → 投入 → 出荷 → 通知）
   -------------------------------------------------------------------------- */
.adm-pipeline {
    display: flex;
    align-items: stretch;
    gap: 0;
    flex-wrap: wrap;
}
.adm-pipe-stage {
    flex: 1 1 0;
    min-width: 130px;
    background: var(--adm-card);
    border: 1px solid var(--adm-line);
    padding: 14px 16px;
    position: relative;
    text-decoration: none;
    display: block;
}
.adm-pipe-stage:first-child { border-radius: 10px 0 0 10px; }
.adm-pipe-stage + .adm-pipe-stage { border-left: none; }
.adm-pipe-stage:not(.adm-pipe-error):last-of-type { border-radius: 0 10px 10px 0; }
.adm-pipe-stage::after {
    content: "";
    position: absolute;
    right: -7px;
    top: 50%;
    width: 12px;
    height: 12px;
    transform: translateY(-50%) rotate(45deg);
    background: var(--adm-card);
    border-top: 1px solid var(--adm-line);
    border-right: 1px solid var(--adm-line);
    z-index: 1;
}
.adm-pipe-stage:last-of-type::after { display: none; }
.adm-pipe-label { display: block; font-size: 12px; color: var(--adm-muted); }
.adm-pipe-count {
    display: block;
    font-size: 26px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}
.adm-pipe-stage:hover .adm-pipe-count { color: var(--adm-accent); }

.adm-pipe-error {
    flex: 0 0 auto;
    margin-left: 16px;
    border: 1px solid #f3c1c1;
    background: #fdf1f1;
    border-radius: 10px;
}
.adm-pipe-error .adm-pipe-label { color: #a52a2a; }
.adm-pipe-error .adm-pipe-count { color: #c42121; }
.adm-pipe-error::after { display: none; }

/* --------------------------------------------------------------------------
   テーブル
   -------------------------------------------------------------------------- */
.adm-table-wrap { overflow-x: auto; }
table.adm-table { width: 100%; border-collapse: collapse; }
.adm-table th {
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    color: var(--adm-muted);
    padding: 8px 12px;
    border-bottom: 2px solid var(--adm-line);
    white-space: nowrap;
}
.adm-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--adm-line);
    vertical-align: top;
}
.adm-table tbody tr:hover { background: #fafafd; }
.adm-table td.is-num, .adm-table th.is-num { text-align: right; font-variant-numeric: tabular-nums; }
.adm-table .is-code { font-family: "SFMono-Regular", Consolas, Menlo, monospace; font-size: 12.5px; }
.adm-table a { color: var(--adm-accent-deep); }
.adm-table tr.row-error { border-left: 3px solid #c42121; background: #fdf7f7; }
.adm-table td.is-empty { color: var(--adm-muted); text-align: center; padding: 28px 12px; }

/* --------------------------------------------------------------------------
   バッジ（ステータス）
   -------------------------------------------------------------------------- */
.adm-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.adm-badge-received  { background: #e4edff; color: #1d4ed8; }
.adm-badge-submitted { background: #fcf0d8; color: #a16207; }
.adm-badge-shipped   { background: #dcf5f1; color: #0f766e; }
.adm-badge-fulfilled_notified { background: #e2f5e5; color: #15803d; }
.adm-badge-error     { background: #fce4e4; color: #c42121; }

.adm-badge-pending   { background: #fcf0d8; color: #a16207; }
.adm-badge-active    { background: #e2f5e5; color: #15803d; }
.adm-badge-suspended { background: #ececf2; color: #5a5670; }

.adm-badge-draft     { background: #ececf2; color: #5a5670; }
.adm-badge-published { background: #e2f5e5; color: #15803d; }

.adm-badge-success   { background: #e2f5e5; color: #15803d; }
.adm-badge-failure   { background: #fce4e4; color: #c42121; }

.adm-badge-on  { background: #e2f5e5; color: #15803d; }
.adm-badge-off { background: #ececf2; color: #5a5670; }

.adm-badge-tiktok { background: #ececf2; color: #111827; }
.adm-badge-shop   { background: #f3e8ff; color: #7e22ce; }

/* --------------------------------------------------------------------------
   フィルタタブ
   -------------------------------------------------------------------------- */
.adm-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.adm-tabs a {
    padding: 5px 14px;
    border: 1px solid var(--adm-line);
    border-radius: 999px;
    background: var(--adm-card);
    color: var(--adm-muted);
    text-decoration: none;
    font-size: 13px;
}
.adm-tabs a:hover { border-color: var(--adm-accent); color: var(--adm-accent-deep); }
.adm-tabs a.is-active {
    background: var(--adm-ink);
    border-color: var(--adm-ink);
    color: #fff;
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   ボタン・フォーム
   -------------------------------------------------------------------------- */
.adm-btn {
    display: inline-block;
    padding: 7px 16px;
    border-radius: 7px;
    border: 1px solid transparent;
    background: var(--adm-accent);
    color: #fff;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}
.adm-btn:hover { background: var(--adm-accent-deep); }
.adm-btn-ghost { background: var(--adm-card); border-color: var(--adm-line); color: var(--adm-text); }
.adm-btn-ghost:hover { background: var(--adm-paper); border-color: var(--adm-muted); }
.adm-btn-danger { background: #c42121; }
.adm-btn-danger:hover { background: #a51b1b; }

.adm-form { max-width: 560px; }
.adm-form .adm-field { margin-bottom: 14px; }
.adm-form label { display: block; font-size: 12.5px; font-weight: 600; color: var(--adm-muted); margin-bottom: 4px; }
.adm-form input[type="text"],
.adm-form input[type="number"],
.adm-form input[type="password"],
.adm-form select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--adm-line);
    border-radius: 7px;
    font: inherit;
    background: #fff;
}
.adm-form input:focus, .adm-form select:focus { border-color: var(--adm-accent); outline: none; }
.adm-form ul { margin: 4px 0 0; padding-left: 18px; color: #c42121; font-size: 12.5px; }

/* 定義リスト（詳細画面・読み取り専用情報） */
.adm-dl { display: grid; grid-template-columns: 160px 1fr; row-gap: 8px; column-gap: 16px; margin: 0; }
.adm-dl dt { color: var(--adm-muted); font-size: 12.5px; padding-top: 2px; }
.adm-dl dd { margin: 0; }

.adm-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.adm-actions form { display: inline; }

pre.adm-json {
    background: #f2f1f7;
    border: 1px solid var(--adm-line);
    border-radius: 8px;
    padding: 14px;
    overflow-x: auto;
    font-size: 12.5px;
    line-height: 1.5;
}

/* フラッシュ */
.adm-flash { margin: 16px 28px 0; padding: 10px 14px; border-radius: 8px; font-size: 13.5px; }
.adm-flash-success { background: #e2f5e5; color: #15803d; }
.adm-flash-error { background: #fce4e4; color: #c42121; }

.adm-empty { color: var(--adm-muted); padding: 20px 0; text-align: center; }

@media (max-width: 760px) {
    .adm-shell { flex-direction: column; }
    .adm-side { width: 100%; height: auto; position: static; flex-basis: auto; }
    .adm-main { padding: 16px; }
    .adm-dl { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* --------------------------------------------------------------------------
   ログイン（admin / mypage 共通）
   -------------------------------------------------------------------------- */
.login-container {
    max-width: 380px;
    margin: 9vh auto 0;
    padding: 28px 28px 24px;
    background: var(--adm-card);
    border: 1px solid var(--adm-line);
    border-radius: 12px;
}
.login-container h1 { margin: 0 0 4px; font-size: 20px; letter-spacing: 0.1em; }
.login-container .login-sub { margin: 0 0 18px; color: var(--adm-muted); font-size: 12.5px; letter-spacing: 0.14em; }
.login-container form { display: flex; flex-direction: column; gap: 10px; }
.login-container label { font-size: 12.5px; font-weight: 600; color: var(--adm-muted); }
.login-container input {
    padding: 9px 10px;
    border: 1px solid var(--adm-line);
    border-radius: 7px;
    font: inherit;
}
.login-container input:focus { border-color: var(--adm-accent); outline: none; }
.login-container button {
    margin-top: 6px;
    padding: 9px;
    border: none;
    border-radius: 7px;
    background: var(--adm-accent);
    color: #fff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.login-container button:hover { background: var(--adm-accent-deep); }
.login-container .error { color: #c42121; margin-bottom: 4px; font-size: 13px; }

/* --------------------------------------------------------------------------
   mypage（最小限 — 本格的な刷新は別途）
   -------------------------------------------------------------------------- */
.mypage-header {
    background: var(--adm-card);
    padding: 14px 24px;
    border-bottom: 1px solid var(--adm-line);
}
.mypage-nav a { margin-right: 14px; color: var(--adm-text); }
.mypage-main {
    background: var(--adm-card);
    margin: 16px;
    padding: 18px 22px;
    border: 1px solid var(--adm-line);
    border-radius: 10px;
}
.mypage-main table { border-collapse: collapse; width: 100%; margin-bottom: 1.2rem; }
.mypage-main th, .mypage-main td { border: 1px solid var(--adm-line); padding: 6px 10px; text-align: left; }

.flash { margin: 12px 16px 0; padding: 8px 14px; border-radius: 8px; }
.flash-success { background: #e2f5e5; color: #15803d; }