/* dashboard 共通のスタイル。
   画面が 4 つになったので、index.html のインライン CSS からここへ切り出した。
   フレームワークもビルド工程も持たない（配布は exe 1 個のまま）。 */

:root {
  --bg: #f6f5fa; --panel: #fff; --line: #e3e0ec; --fg: #241f36;
  --muted: #6f6885; --accent: #6b3fa0; --accent-fg: #fff; --danger: #b0344a;
  --warn: #8a5a12;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #17151f; --panel: #211d2b; --line: #35304380; --fg: #ece9f4;
    --muted: #a49cba; --accent: #a883e0; --accent-fg: #1a1524; --danger: #e5798c;
    --warn: #d9a44e;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0; padding: 0 1rem 4rem; background: var(--bg); color: var(--fg);
  font: 15px/1.6 "Segoe UI", "Yu Gothic UI", system-ui, sans-serif;
}
main { max-width: 60rem; margin: 0 auto; }
h1 { font-size: 1.35rem; margin: 0 0 .25rem; }
h1 span { color: var(--accent); }
h2 { font-size: 1.05rem; margin: 2rem 0 .75rem; }
.sub { color: var(--muted); font-size: .875rem; margin: 0 0 1.5rem; }

/* 画面上部の帯。どの法人として何の権限で見ているのかを常に出す。
   多テナントなので、「今どこを見ているか」が分からないのが一番危ない。

   帯は代行中だけ 2 段になる（上段 .top-main = 当社の仕事、
   下段 .top-delegate = 契約先として見ている範囲）。段組みにするので、
   flex は .top ではなく段ごとに掛ける。 */
.top {
  max-width: 60rem; margin: 0 auto 1.5rem; padding: .75rem 0 0;
  border-bottom: 1px solid var(--line);
}
.top .top-main {
  display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center;
  padding-bottom: .75rem;
}
.top .brand { font-weight: 600; }
.top .brand span { color: var(--accent); }
.top nav { display: flex; gap: .25rem; }
.top nav a {
  color: var(--fg); text-decoration: none; padding: .3rem .6rem; border-radius: .4rem;
  font-size: .9rem;
}
.top nav a:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.top nav a[aria-current] { background: var(--accent); color: var(--accent-fg); }
.top .who { margin-left: auto; color: var(--muted); font-size: .8125rem; text-align: right; }
.top .who b { color: var(--fg); font-weight: 600; }
/* 特権管理者が契約先を代行操作しているときの目印。見落とされては困るので目立たせる。 */
.top b.warn {
  color: var(--warn); border: 1px solid currentColor; border-radius: .8rem;
  padding: .05rem .45rem;
}

/* 代行中の下段。**上段と地続きに見せない。**
   同じ並びに見えると、契約先のお客様のデータを当社の画面だと思ったまま
   操作されうる。枠と地色で切って、色は代行の目印（--warn）と揃える。 */
.top .top-delegate {
  display: flex; flex-wrap: wrap; gap: .35rem .75rem; align-items: center;
  padding: .45rem .7rem; margin-bottom: .75rem; font-size: .875rem;
  border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent);
  border-left: 3px solid var(--warn);
  border-radius: .4rem;
  background: color-mix(in srgb, var(--warn) 10%, transparent);
}
/* 代行先は法人名と管理IDの両方を出す。名前だけだと同名の法人を見分けられず、
   管理IDだけだとどのお客様か思い出せない。 */
.top .top-delegate .target { color: var(--fg); font-weight: 600; }
.top .top-delegate nav a:hover { background: color-mix(in srgb, var(--warn) 22%, transparent); }
.top .top-delegate nav a[aria-current] { background: var(--warn); color: var(--bg); }
/* 代行から抜ける導線は右端に離す（他のリンクと押し間違えない）。 */
.top .top-delegate .end {
  margin-left: auto; color: var(--warn); text-decoration: none;
  border: 1px solid currentColor; border-radius: .4rem; padding: .15rem .55rem;
}
.top .top-delegate .end:hover { background: color-mix(in srgb, var(--warn) 22%, transparent); }

.bar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 1rem; }
input, select, button, textarea {
  font: inherit; padding: .4rem .7rem; border-radius: .4rem;
  border: 1px solid var(--line); background: var(--panel); color: var(--fg);
}
button { cursor: pointer; }
button.primary { background: var(--accent); color: var(--accent-fg); border-color: transparent; }
button.link { border: 0; background: none; color: var(--accent); padding: .2rem .4rem; }
button.link.danger { color: var(--danger); }
button:disabled { opacity: .5; cursor: default; }
label { display: block; font-size: .8125rem; color: var(--muted); margin-bottom: .2rem; }
.field { margin-bottom: .75rem; }
.field input, .field select { width: 100%; }
.count { color: var(--muted); font-size: .875rem; margin-left: auto; }

.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: .6rem;
  padding: .9rem 1rem; margin-bottom: .6rem;
}
/* card の中の card（place の下に端末、のような入れ子）。
   外と同じ地色・同じ枠のままだと境目が消えて、どこまでが内側か判らなくなる。
   内側は少し落とした地色にして左へ寄せ、親子の向きを見た目で示す。 */
.card .card {
  background: color-mix(in srgb, var(--fg) 4%, transparent);
  border-radius: .4rem; padding: .6rem .75rem; margin: .5rem 0 0 .75rem;
}
/* 入れ子が 3 段以上になると、地色を重ねるほど親との差が消える。重ねない。 */
.card .card .card { background: none; }
.row { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: baseline; }
.name { font-weight: 600; word-break: break-all; }
.meta { color: var(--muted); font-size: .8125rem; }
.actions { margin-left: auto; display: flex; gap: .25rem; flex-wrap: wrap; }
/* .actions に並ぶ pull down（役割の変更）。
   周りは button.link（枠なしのテキスト）なので、素の select だと 1 つだけ
   入力欄が挟まったように見える。高さと文字の大きさを寄せる。 */
.actions select { padding: .15rem 1.2rem .15rem .4rem; font-size: .8125rem; }

/* チェックボックスの並び（見せる place）。狭い画面では 1 列に落ちる。 */
.checks {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: .1rem .5rem; margin: .3rem 0 .6rem;
}
/* label は既定で block・muted なので、チェックの横に置く用に上書きする。 */
label.check {
  display: flex; align-items: center; gap: .35rem;
  font-size: .875rem; color: var(--fg); margin: 0;
}
label.check input { margin: 0; }

audio { width: 100%; margin-top: .6rem; height: 2.2rem; }
.empty, .error { text-align: center; padding: 2rem; color: var(--muted); }
.error { color: var(--danger); }
.notice {
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  background: var(--panel); border-radius: .4rem; padding: .75rem 1rem; margin-bottom: 1rem;
  font-size: .9rem;
}
.notice.warn { border-left-color: var(--warn); }
.notice.danger { border-left-color: var(--danger); }
/* 案内を段落で分けて書くとき（noScreenNotice）。p の既定の余白だと箱が間延びする。 */
.notice p { margin: 0 0 .4rem; }
.notice p:last-child { margin-bottom: 0; }
.notice p.lead { font-weight: 600; }

/* 手元の WAV を取り込む導線（管理者のみ）。 */
.drop { border-style: dashed; text-align: center; color: var(--muted); font-size: .9rem; }
.drop.over { border-color: var(--accent); color: var(--accent); }
.drop label { display: inline; margin-right: .4rem; }
.drop .meta { margin: .5rem 0 0; }

input[type=search] { flex: 1; min-width: 12rem; }
.badge {
  font-size: .75rem; padding: .1rem .45rem; border-radius: .8rem;
  border: 1px solid var(--line); color: var(--muted); white-space: nowrap;
}
.badge.done, .badge.active { color: var(--accent); border-color: currentColor; }
.badge.failed, .badge.revoked, .badge.disabled, .badge.suspended { color: var(--danger); border-color: currentColor; }
.badge.stale { color: var(--warn); border-color: currentColor; }
.status { color: var(--muted); font-size: .8125rem; margin: -.5rem 0 1rem; }

/* 秘密を 1 度だけ見せる箱（仮パスワード・端末トークン）。
   閉じたら二度と出ないので、それが分かる見せ方にする。 */
.secret {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 1.05rem; letter-spacing: .04em; user-select: all;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-radius: .4rem; padding: .5rem .7rem; display: inline-block; word-break: break-all;
}
/* 紐付けコードは読み上げるので、大きく等幅で出す。 */
.code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 2rem; letter-spacing: .12em; text-align: center;
  padding: .75rem; user-select: all;
}

dialog {
  border: 1px solid var(--line); border-radius: .6rem; background: var(--panel);
  color: var(--fg); padding: 1.25rem; max-width: 30rem; width: calc(100% - 2rem);
}
dialog::backdrop { background: #0008; }
dialog h3 { margin: 0 0 .75rem; font-size: 1.05rem; }
dialog .actions { margin-top: 1rem; }

/* 折りたたみ（card の中で「端末」「アカウント」などをたたんで見せる用）。
   押せることが判る程度にだけ飾る。閉じているときに中身の件数を summary に
   書けるよう、色は本文より落とす。 */
details > summary {
  cursor: pointer; color: var(--muted); font-size: .875rem; padding: .2rem 0;
}
details > summary:hover { color: var(--fg); }
details[open] > summary { margin-bottom: .4rem; }
/* たたんだ中身は summary の真下に付いて見えるよう、余白を summary 側に持たせない。 */
details > summary + * { margin-top: 0; }

table { width: 100%; border-collapse: collapse; font-size: .875rem; }
th, td { text-align: left; padding: .45rem .5rem; border-bottom: 1px solid var(--line); }
th { color: var(--muted); font-weight: 600; font-size: .8125rem; }
td.id { font-family: ui-monospace, Consolas, monospace; font-size: .8125rem; }

/* 文字起こし。発話をクリックすると音声をその位置から鳴らす。 */
.transcript { margin-top: .6rem; border-top: 1px solid var(--line); padding-top: .6rem; }
.utt {
  display: flex; gap: .5rem; align-items: baseline; width: 100%; text-align: left;
  border: 0; background: none; color: inherit; font: inherit;
  padding: .2rem .3rem; border-radius: .3rem; cursor: pointer;
}
.utt:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.utt.playing { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.utt .at { color: var(--muted); font-size: .75rem; font-variant-numeric: tabular-nums; }
.utt .who { font-size: .75rem; font-weight: 600; white-space: nowrap; }
/* 話者の色分け。誰が店員かは推定しないので、A/B としか言えない。 */
.utt.spk-A .who { color: var(--accent); }
.utt.spk-B .who { color: #c2703a; }
@media (prefers-color-scheme: dark) { .utt.spk-B .who { color: #e0a072; } }
.utt .said { flex: 1; }
mark { background: color-mix(in srgb, var(--accent) 35%, transparent); color: inherit; }

/* 発話とその横の操作（直す・修正済みの印）。
   ⚠ .utt 自体が再生のボタンなので、操作はその**外**に並べる
   （中に入れると押し分けられない）。 */
.utt-row { display: flex; gap: .4rem; align-items: baseline; }
.utt-row .utt { flex: 1; min-width: 0; }
.utt-row .link { flex: none; opacity: .55; }
.utt-row:hover .link { opacity: 1; }

/* 単語ごとの表示。押すとその単語から鳴らす。
   ⚠ **発話がボタンでなくなる場合の見た目。** 単語で描くときは .utt を
   ボタンではなく行の器として使う（ボタンの中にボタンは置けない）。 */
.utt.by-word { cursor: default; }
.utt.by-word:hover { background: none; }
.utt .words { flex: 1; }
.w {
  border: 0; background: none; color: inherit; font: inherit; cursor: pointer;
  padding: 0 .05rem; border-radius: .2rem; line-height: 1.7;
}
/* 下線はホバー時だけ。全単語に線が入ると本文として読めなくなる。 */
.w:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.w.playing { background: color-mix(in srgb, var(--accent) 32%, transparent); }
.w.picked { outline: 2px solid var(--accent); outline-offset: 1px; }
/* 直した単語は、直したと分かる程度にだけ印を付ける。 */
.w.edited { border-bottom: 2px dotted var(--accent); }
/* 単語ごとの時刻が無い発話の単語。押しても発話の先頭から鳴るので、
   ホバーの色を弱くして「ここから鳴るわけではない」ことを示す。
   直すためのクリックとしては、時刻のある単語と同じに扱える。 */
.w.untimed:hover { background: color-mix(in srgb, var(--muted) 18%, transparent); }

/* 単語の修正パネル。右ペインの下に出す。 */
.word-edit { margin-top: .8rem; border: 1px solid var(--accent); border-radius: .5rem;
  padding: .75rem; background: color-mix(in srgb, var(--accent) 6%, var(--panel)); }
.word-edit .from { color: var(--muted); font-size: .875rem; }
.word-edit .row2 { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-top: .4rem; }
.word-edit input[type=text] { flex: 1; min-width: 8rem; }
.word-edit label { display: flex; gap: .35rem; align-items: center; font-size: .875rem; }

/* 2 ペイン（録音の画面）。左＝カレンダーと録音、右＝文字起こし。 */
body.wide main { max-width: 76rem; }
body.wide .top { max-width: 76rem; }
.split { display: grid; grid-template-columns: 20rem 1fr; gap: 1rem; align-items: start; }
/* 左ペインは画面に貼り付けて、右を長くスクロールしても見え続けるようにする。 */
.pane-left { position: sticky; top: .5rem; }
.pane-right { min-width: 0; }
@media (max-width: 62rem) {
  .split { grid-template-columns: 1fr; }
  .pane-left { position: static; }
}

/* カレンダー。録音のある日にだけ印を付ける。 */
.cal-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .4rem; }
.cal-head .month { flex: 1; text-align: center; font-weight: 600; }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal .dow { text-align: center; font-size: .7rem; color: var(--muted); padding: .2rem 0; }
.cal button {
  border: 0; background: none; color: inherit; font: inherit; cursor: pointer;
  padding: .3rem 0 .45rem; border-radius: .3rem; position: relative;
  font-variant-numeric: tabular-nums; font-size: .875rem;
}
.cal button[disabled] { color: color-mix(in srgb, var(--muted) 50%, transparent); cursor: default; }
.cal button:not([disabled]):hover { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.cal button[aria-pressed=true] { background: var(--accent); color: var(--accent-fg); }
/* 録音のある日の点。件数そのものは title に出す（狭いので数字は置かない）。 */
.cal button .dot {
  position: absolute; left: 50%; bottom: .18rem; translate: -50% 0;
  width: .3rem; height: .3rem; border-radius: 50%; background: var(--accent);
}
.cal button[aria-pressed=true] .dot { background: var(--accent-fg); }
.cal .blank { visibility: hidden; }

/* 左ペインの録音一覧。**時刻の昇順**に並べる（時系列で辿るため）。 */
.reclist { margin-top: .6rem; display: flex; flex-direction: column; gap: 2px; }
.reclist button {
  display: flex; gap: .5rem; align-items: baseline; width: 100%; text-align: left;
  border: 0; background: none; color: inherit; font: inherit;
  padding: .35rem .4rem; border-radius: .35rem; cursor: pointer; font-size: .875rem;
}
.reclist button:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.reclist button[aria-pressed=true] { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.reclist .at { font-variant-numeric: tabular-nums; font-weight: 600; }
.reclist .len { color: var(--muted); font-size: .8125rem; font-variant-numeric: tabular-nums; }
.reclist .where { color: var(--muted); font-size: .8125rem; margin-left: auto;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 時刻を指定して録音を特定する欄。 */
.jump { display: flex; gap: .4rem; align-items: center; margin-top: .6rem;
  padding-top: .6rem; border-top: 1px solid var(--line); font-size: .875rem; }
.jump select { flex: 1; min-width: 0; }

/* ログイン画面だけは中央に寄せる。 */
.auth { max-width: 22rem; margin: 4rem auto; }
.auth .card { padding: 1.5rem; }
.auth button { width: 100%; }