/* ============================================================
   ミライレンディング パートナー（代理店用の管理画面）— partner.css
   admin-kit.css（当社の管理画面の部品）のあとに読み込む。ここには代理店用だけの部品を書く。
   色・文字・余白は管理画面と同じ変数（tokens.css / base.css）と同じ刻み（文字 12px 以上・余白 4 の倍数・左右 22px）を使う。
   inline の style は書かない（棒グラフの高さだけは数値なので例外）。
   ============================================================ */

/* ---------- サイドバー：ロゴの横の「パートナー」の印（当社の管理画面と見分ける） ----------
   ロゴは管理画面（高さ 40px）より小さくして、印と並べてもサイドバーの幅に収める */
.sb-brand .mirai-logo{height:28px;width:auto;max-width:none}
.sb-tag{
  flex:0 0 auto;
  font-size:1.2rem;font-weight:700;line-height:1.4;letter-spacing:.02em;white-space:nowrap;
  padding:2px 8px;border-radius:var(--radius-chip);
  background:var(--color-paper-3);color:var(--color-navy-800);
  position:relative;top:1px;   /* ロゴの文字（MIRAI）の中心線にそろえる */
}

/* ---------- 本文のまとまり（見出し＋表）。見出しの下は .adm-h2 の 8px だけ ---------- */
.p-sec{display:flex;flex-direction:column;min-width:0}
.p-sec[hidden]{display:none}
.p-panel{display:flex;flex-direction:column;gap:20px;min-width:0}
.p-panel[hidden]{display:none}
/* 表の中の名前（お客様・リンク・下位代理店）。管理画面の表と同じ 13px で、少しだけ太く */
.p-strong{font-weight:500;color:var(--ink)}
a.p-strong:hover{color:var(--color-accent-text)}
.p-link{color:var(--color-accent-text);font-weight:500;text-decoration:underline;text-underline-offset:3px}
.adm-dl .v.neg,.adm-table .neg{color:var(--color-negative-ink);font-weight:500}

/* 表の合計の行（紹介の進み具合） */
.adm-table tfoot td{border-top:1px solid var(--line);border-bottom:0;background:var(--color-soft-canvas);font-weight:700}
.adm-table tfoot td .sub{font-weight:400}
.adm-table.sticky-col tfoot td:first-child{background:var(--color-soft-canvas)}

/* 表の行の中の小さな操作（リンクをコピー・QRコード） */
.p-row-acts{display:flex;gap:6px;margin-top:8px}
/* ツールバーの左の1行（右にボタン） */
.p-toolbar-hint{margin:0;flex:1 1 240px;min-width:0}

/* ---------- KPI：金額を途中で折り返さない ----------
   管理画面の .kpi .v は折り返し可（overflow-wrap:anywhere）。代理店用は金額が主役なので1行に保ち、
   狭い画面（2列）では文字を少し小さくして入れる */
.kpi .v{white-space:nowrap;overflow-wrap:normal}
@media (max-width:767px){.kpi .v{font-size:min(2rem,5.4vw)}}
@media (max-width:374px){.kpi{padding-left:16px;padding-right:12px}}

/* ---------- 次のお支払い ---------- */
.p-pay{display:flex;flex-direction:column;gap:2px;padding:2px 0 12px;border-bottom:1px solid var(--line)}
.p-pay-when{display:flex;align-items:center;gap:8px;min-height:28px;font-size:1.4rem;font-weight:500;color:var(--color-ink-2)}
.p-pay-amt{font-family:var(--font-outlier);font-variant-numeric:tabular-nums;font-size:3rem;font-weight:700;line-height:1.2;letter-spacing:-.01em;color:var(--ink);white-space:nowrap}

/* ---------- 報酬の推移（週ごとの累計の棒。下の段＝前の週までの累計、上の段＝その週の報酬） ---------- */
.p-trend-cap{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 12px;min-height:56px;padding:2px 0 8px}
.p-trend-week{flex:0 0 100%;font-size:1.3rem;line-height:1.5;color:var(--color-muted)}
.p-trend-cap b{font-family:var(--font-outlier);font-variant-numeric:tabular-nums;font-size:2.4rem;font-weight:700;line-height:1.2;letter-spacing:-.01em;color:var(--ink)}
.p-trend-cum{font-size:1.3rem;color:var(--color-ink-2)}
.p-trend-cum .num{font-family:var(--font-outlier)}
.p-trend{display:flex;align-items:stretch;gap:6px;height:148px;border-bottom:1px solid var(--color-rule-2)}
.p-trend-bar{flex:1 1 0;min-width:0;display:flex;flex-direction:column;justify-content:flex-end;padding:0;background:transparent;border-radius:4px 4px 0 0;cursor:pointer}
.p-trend-bar i{display:block;width:100%;flex:0 0 auto}
.p-trend-bar .add{background:var(--color-blue-300);border-radius:3px 3px 0 0}
.p-trend-bar .base{background:var(--color-blue-100)}
.p-trend-bar .base:first-child{border-radius:3px 3px 0 0}
.p-trend-bar.is-cur .add{background:var(--color-accent)}
.p-trend-bar.is-cur .base{background:var(--color-blue-300)}
.p-trend-bar:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}
.p-trend-axis{display:flex;justify-content:space-between;gap:12px;margin-top:6px;font-size:1.2rem;color:var(--color-muted)}
@media (max-width:767px){.p-trend{gap:4px;height:120px}}

/* ---------- お客様の詳細（管理画面のユーザー詳細の見出しと同じ形） ---------- */
.p-back{display:inline-flex;align-items:center;min-height:44px;font-size:1.3rem;font-weight:700;color:var(--color-accent-text);align-self:flex-start;margin-bottom:-8px}
.p-back:hover{color:var(--color-accent-hover)}
.p-who{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.p-who h2{font-size:1.8rem;font-weight:700;line-height:1.35;letter-spacing:.01em;color:var(--ink)}
.p-who .chip{position:relative;top:1px}
.p-who-id{margin-top:2px;font-size:1.3rem;color:var(--color-muted)}
.p-who-dl{margin-top:10px;border-top:1px solid var(--line)}

/* ---------- 入力：率（数字 ＋ % ＋ 上限） ---------- */
.p-rate-input{display:flex;align-items:center;gap:10px}
body.admin .p-rate-input .input{width:120px;text-align:right}
.p-rate-input .unit{font-size:1.5rem;font-weight:700;color:var(--ink)}
.adm-modal .adm-hint{margin-top:14px}
.adm-modal-h + .adm-modal-facts{margin-top:0}

/* ---------- QRコード ---------- */
.p-qr-modal{width:min(420px,100%)}
.p-qr{width:min(240px,64vw);margin:4px auto 0;padding:12px;border:1px solid var(--line);border-radius:var(--radius-panel)}
.p-qr svg{width:100%;height:auto}
.adm-modal-sub.num{overflow-wrap:anywhere}

/* ---------- ログイン（管理画面のログインと同じ形・同じ指定。管理画面ではログインのページの中に書いてある） ----------
   メール・パスワード → 初回は新しいパスワード → 完了／2段階認証がオンなら6桁（プールが「必須」のあいだは認証アプリの登録も）。
   QR とキー（.lg-qr・.lg-secret）と6桁の欄（.input-code）は管理画面の admin.css の共通の規則（admin-kit.css に入る） */
.adm-login > div{width:100%;max-width:420px}
.adm-login .field-error{display:none;margin-top:6px;font-size:1.3rem;line-height:1.5;color:var(--color-negative-ink);font-weight:500}
.adm-login .field.is-error .input{border-color:var(--color-negative)}
.adm-login .field.is-error .field-error{display:block}
.lg-ttl{margin:0 0 6px;font-size:1.6rem;font-weight:700;color:var(--ink);text-align:center}
.lg-tx{margin:0 0 18px;font-size:1.3rem;line-height:1.7;color:var(--color-muted);text-align:center;text-wrap:balance}
.lg-err{margin:0 0 14px;padding:10px 12px;border-radius:var(--radius-chip);background:var(--danger-soft);color:var(--color-negative-ink);font-size:1.3rem;line-height:1.55;font-weight:500}
.lg-info{margin:0 0 14px;padding:10px 12px;border-radius:var(--radius-chip);background:var(--color-soft-blue);color:var(--color-ink-2);font-size:1.3rem;line-height:1.55}
.lg-back{display:flex;justify-content:center;margin-top:12px}
.lg-back button{background:none;border:0;min-height:44px;font-size:1.3rem;color:var(--color-accent-text);font-weight:700;cursor:pointer}
.lg-env{display:block;width:max-content;margin:-14px auto 20px;padding:2px 10px;border-radius:var(--radius-pill);background:var(--warn-soft);color:var(--color-warn-ink);font-size:1.2rem;font-weight:700}

/* ---------- 契約が終わった・停止中の代理店（見るだけ）。ページの頭のすぐ下に1行 ---------- */
.p-readonly{margin:0;padding:10px 14px;border-radius:var(--radius-chip);background:var(--color-paper-3);color:var(--color-ink-2);font-size:1.3rem;line-height:1.55;font-weight:500}

/* ---------- 報酬の取消のお知らせ（ホーム。意見を受け付けているあいだ）。押すと報酬の「取消のお知らせ」へ ---------- */
.p-alert{display:flex;align-items:center;min-height:44px;padding:10px 14px;border-radius:var(--radius-chip);background:var(--warn-soft);color:var(--color-warn-ink);font-size:1.3rem;line-height:1.55;font-weight:700}
.p-alert::after{content:"›";margin-left:auto;padding-left:12px;font-size:1.6rem;font-weight:700}
.p-alert:hover{text-decoration:underline;text-underline-offset:3px}

/* アカウントの「2段階認証（認証アプリ）」：状態の札とボタンを1行に並べる（中心線でそろえる） */
.p-mfa{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}

/* 取消へのご意見（モーダルの中の文の入力欄） */
.adm-modal textarea.input{min-height:120px}

/* ---------- ダッシュボードの2枚のカード（次のお支払い・報酬の推移）は高さをそろえ、棒グラフを伸ばす ---------- */
.p-split-eq{align-items:stretch}
.p-trend-card{display:flex;flex-direction:column}
.p-trend-card #trend{flex:1 1 auto;display:flex;flex-direction:column}
.p-trend-card .p-trend{flex:1 1 auto;min-height:148px;height:auto}
@media (max-width:767px){.p-trend-card .p-trend{min-height:120px}}

/* ---------- ラベル：値の行（金額・日付など短い値だけのとき）。管理画面の .adm-dl は 480px 未満で縦に積むが、
   代理店用の値は短いので、狭い画面でも横に並べたまま（長い値は値の中で折り返す） ---------- */
@media (max-width:479px){
  .adm-dl.p-dl-row > div{flex-direction:row;align-items:baseline;gap:12px}
  .adm-dl.p-dl-row .v{text-align:right;min-width:0}
}

/* ---------- 表の1列目の補助行：PC だけ（モバイルは .only-mobile の行に切り替える。admin-kit.css の .only-mobile と対） ---------- */
.adm-table .sub.only-pc{display:block}
@media (max-width:767px){.adm-table .sub.only-pc{display:none}}

/* 文の切れ目でだけ折り返す（2文を並べる注記。狭い画面では1文ずつ改行） */
.p-nb{display:inline-block}

/* ラベル：値の行。値が1行に入らないときは、値だけを次の行の右に出す（ラベルを途中で折らない） */
.adm-dl.p-dl-row > div{flex-wrap:wrap;row-gap:2px}
.adm-dl.p-dl-row .v{margin-left:auto}
@media (max-width:767px){.p-toolbar-hint{flex-basis:100%}.p-toolbar-hint + .grow{display:none}}