/* 速帳Web — デスクトップ版（PySide6 Fusion＋クラシックWindows配色）の見た目をそのまま再現する。
   値は main.py _apply_light_theme と各画面の setStyleSheet から写している。 */
:root {
  --face: #ECE9D8;          /* クラシックWindowsの面 */
  --face-hover: #F4F2E4;
  --face-press: #DCD8C8;
  --btn-border: #7A7A66;
  --input-border: #7F9DB9;
  --tab: #DCD8C8;
  --tab-border: #808070;
  --group-border: #A0A090;
  --grid-bg: #FDF6E5;       /* 弥生の帳簿: クリーム地 */
  --grid-alt: #F1E7CE;
  --grid-line: #CDBD9E;
  --head-bg: #E8DFC8;
  --head-border: #A89878;
  --sel: #316AC5;
  --band: #C8875F;
  --band-text: #231000;
  --band-border: #8F5B3B;
  --navy: #0A246A;
  --link: #0A246A;
  --edit: #FFFFC8;          /* 入力中セル=弥生の黄 */
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--face); color: #000;
  font-family: "ＭＳ Ｐゴシック", "MS PGothic", "Yu Gothic UI",
               "Hiragino Kaku Gothic ProN", "Noto Sans CJK JP", sans-serif;
  font-size: 12px; overflow: hidden;
}
button, input, select, textarea { font: inherit; color: inherit; }

/* ── 全体 ── */
#app { display: flex; flex-direction: column; height: 100vh; }
.toolbar {
  display: flex; align-items: center; gap: 2px; padding: 1px 2px;
  background: var(--face); border-bottom: 1px solid var(--group-border);
  flex-wrap: wrap;
}
.toolbar button {
  background: transparent; border: 1px solid transparent; padding: 1px 5px;
  min-height: 18px; cursor: default; white-space: nowrap;
}
.toolbar button:hover:not(:disabled) { border-color: var(--btn-border); background: var(--face-hover); }
.toolbar button:active:not(:disabled) { background: var(--face-press); }
.toolbar button:disabled { color: #8a8a8a; }
.toolbar .user-area { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.toolbar #user-name { color: #0A246A; padding: 0 6px; white-space: nowrap; }
.toolbar .sep { width: 1px; height: 14px; background: #B8B4A0; margin: 0 4px; }

.tabbar { display: flex; align-items: flex-end; gap: 1px; padding: 0 0 0 1px; }
.tabbar .tab {
  background: var(--tab); border: 1px solid var(--tab-border); border-bottom: none;
  padding: 3px 14px; cursor: default; white-space: nowrap; user-select: none;
}
.tabbar .tab.on { background: var(--face); font-weight: bold; position: relative; top: 1px; }
.pane {
  flex: 1; min-height: 0; border: 1px solid var(--tab-border); margin: 0 1px;
  display: flex; flex-direction: column;
}
.statusbar {
  display: flex; gap: 12px; padding: 2px 6px; min-height: 20px;
  border-top: 1px solid var(--group-border); background: var(--face);
  white-space: nowrap; overflow: hidden;
}
.statusbar .msg { color: #000; }

/* ── 部品 ── */
.btn {
  background: var(--face); border: 1px solid var(--btn-border); border-radius: 0;
  padding: 2px 10px; min-height: 22px; cursor: default; white-space: nowrap;
}
.btn:hover:not(:disabled) { background: var(--face-hover); }
.btn:active:not(:disabled) { background: var(--face-press); border-color: #404040; }
.btn:disabled { color: #8a8a8a; border-color: #B0B0A0; }
.btn.primary { font-weight: bold; background: var(--navy); color: #fff; padding: 4px 10px; }
.btn.primary:hover:not(:disabled) { background: #14348a; }
.btn.primary:disabled { background: #6c7aa0; color: #e0e0e0; }
.btn.blue {
  border: 1px solid #185FA5; color: #0C447C; background: #E6F1FB;
  padding: 3px 10px; border-radius: 3px;
}
.btn.bold { font-weight: bold; }
.btn.green { border: 1px solid #3B6D11; background: #EAF3DE; color: #1d4a05; font-weight: bold; border-radius: 3px; }

input[type=text], input[type=number], input:not([type]), select, textarea {
  border: 1px solid var(--input-border); border-radius: 0; padding: 1px 4px;
  background: #fff; min-height: 22px;
}
input::placeholder, textarea::placeholder { color: #808080; }
input:disabled, select:disabled { background: #f3f3f3; color: #808080; }
textarea { resize: vertical; }

.band {
  background: var(--band); color: var(--band-text); border: 1px solid var(--band-border);
  padding: 3px 10px; font-size: 14px; font-weight: bold;
}
fieldset.group { border: 1px solid var(--group-border); margin: 4px 0 0; padding: 4px 8px 8px; min-width: 0; }
fieldset.group > legend { padding: 0 3px; }
.flow { background: var(--face); padding: 8px; }
.muted { color: #444; }
.hint { color: #555; font-size: 11px; }
.link { color: var(--link); }
.row { display: flex; align-items: center; gap: 6px; }
.grow { flex: 1; min-width: 0; }
.right { text-align: right; }

/* ── 帳簿グリッド（弥生配色） ── */
.grid-wrap { flex: 1; min-height: 0; overflow: auto; background: var(--grid-bg); border: 1px solid #9a9a8a; }
table.grid { border-collapse: collapse; background: var(--grid-bg); table-layout: fixed; }
table.grid th {
  position: sticky; top: 0; z-index: 2;
  background: var(--head-bg); border: 1px solid var(--head-border);
  padding: 2px 4px; font-weight: bold; white-space: nowrap; user-select: none;
}
table.grid th.sortable { cursor: default; }
table.grid th .ind { font-size: 9px; color: #555; margin-left: 4px; }
table.grid td { border: 1px solid var(--grid-line); padding: 0 1px; vertical-align: middle; }
table.grid tbody tr:nth-child(even) td { background: var(--grid-alt); }
table.grid td.rh {
  background: var(--head-bg); border-color: var(--head-border); font-weight: bold;
  text-align: center; position: sticky; left: 0; z-index: 1; user-select: none; width: 24px;
}
table.grid tr.sel td { background: var(--sel) !important; color: #fff; }
table.grid tr.sel td input, table.grid tr.sel td select, table.grid tr.sel td .self-zei { color: #fff; }
table.grid tr.cur td.rh { background: #d8ccae; }
table.grid tr.flash td { animation: flash 1.6s ease-out; }
table.grid tr.sel.flash td { animation: flashsel 1.6s ease-out; }
@keyframes flashsel { 0% { background: #FFF3B0; color: #000; } 100% { } }
@keyframes flash { 0% { background: #FFE082; } 100% { } }

/* グリッド内の入力欄は罫線なし・透明（Qtのセルウィジェットと同じ見た目） */
table.grid td input, table.grid td select {
  border: 1px solid transparent; background: transparent; width: 100%;
  min-height: 20px; padding: 0 1px; border-radius: 0;
}
table.grid td input:focus, table.grid td select:focus {
  background: var(--edit); border: 1px solid #E3B75C; outline: none; color: #000;
}
table.grid td input.num { text-align: right; }
table.grid td .calc { text-align: right; padding: 0 3px; }
table.grid td .stack { display: flex; flex-direction: column; justify-content: center; }
table.grid td .stack .lower { font-size: 11px; }
table.grid td .zei-line { display: flex; align-items: center; }
table.grid td .self-zei { color: #999; font-size: 11px; white-space: nowrap; padding-left: 4px; }
table.grid td .self-zei.nq { color: #B36B00; }
.bad { color: #C62828 !important; }

/* 中身に合わせて伸び縮みする表（ダイアログの一覧など） */
table.grid.fluid { table-layout: auto; }
table.grid.fluid td { padding: 2px 4px; word-break: break-all; }

/* ── 選択ページ（口座・カード） ── */
.select-page { padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; height: 100%; }
.select-page h2 { font-size: 16px; margin: 0; }
.cards {
  flex: 1; min-height: 0; overflow: auto; border: 1px solid #c4c0ad; padding: 10px;
  display: grid; grid-template-columns: repeat(auto-fill, 320px); grid-auto-rows: 150px; gap: 6px; align-content: start;
}
.acard { border: 1px solid #cfcfcf; background: #f7f8fa; padding: 9px; display: flex; flex-direction: column; }
.acard .name { font-size: 15px; font-weight: bold; }
.acard .info { color: #555; font-size: 12px; margin-top: 6px; line-height: 1.35; }
.acard .rule { color: #888; font-size: 11px; margin-top: 4px; line-height: 1.35; }
.acard .open { margin-top: auto; width: 100%; }
.addcard {
  border: 2px dashed #b9c2d0; background: #fbfcfe; display: flex; align-items: center; justify-content: center;
  color: var(--navy); font-size: 16px; font-weight: bold; cursor: pointer;
}

/* ── 通帳の口座ページ ── */
.wf { padding: 6px 8px 6px; display: flex; flex-direction: column; gap: 4px; height: 100%; min-height: 0; }
.wf .stmt-tabs { display: flex; gap: 2px; }
.wf .stmt-tabs .t {
  padding: 4px 14px; border: 1px solid #C8C8C8; border-bottom: none; background: #F2F2F2; cursor: default;
}
.wf .stmt-tabs .t.on { background: #E6F1FB; color: #0C447C; font-weight: bold; border-color: #185FA5; }
.split { flex: 1; min-height: 0; display: flex; gap: 0; }
.split .lpane { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; padding-right: 6px; }
.split .divider { width: 5px; cursor: col-resize; display: flex; align-items: center; justify-content: center; color: #aaa; }
.split .rpane { flex: 2; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.imgnav { flex-wrap: nowrap; gap: 3px; overflow: hidden; }
.imgnav .btn { padding: 2px 6px; }
.viewer {
  flex: 1; min-height: 0; overflow: auto; background: #fafafa; border: 1px solid #ddd;
  display: flex; cursor: grab; position: relative;
}
.viewer.dragging { cursor: grabbing; }
.viewer img { margin: auto; display: block; user-select: none; -webkit-user-drag: none; }
.viewer .empty { margin: auto; color: #999; }
.recon { padding: 4px; font-weight: bold; }
.recon.ok { background: #E6F4EA; color: #1B5E20; }
.recon.warn { background: #FFF8E1; color: #7A5800; }
.recon.ng { background: #FCEBEB; color: #B71C1C; }
.recon.none { font-weight: normal; }

/* ── 準備中 ── */
.todo { margin: auto; text-align: center; color: #555; line-height: 1.8; }

/* ── ダイアログ（モーダル） ── */
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,.18); display: flex; align-items: center; justify-content: center; z-index: 50; }
.dlg {
  background: var(--face); border: 1px solid #6b6b5b; box-shadow: 0 6px 24px rgba(0,0,0,.35);
  min-width: 320px; max-width: calc(100vw - 32px); max-height: calc(100vh - 32px);
  display: flex; flex-direction: column;
}
.dlg .title {
  background: linear-gradient(#e2dfcf, #d4d0bc); border-bottom: 1px solid #a8a490;
  padding: 4px 10px; font-weight: bold; user-select: none;
}
.dlg .body { padding: 10px; overflow: auto; }
.dlg .body > div { max-width: 100%; }
.dlg .foot { display: flex; justify-content: flex-end; gap: 6px; padding: 0 10px 10px; }
.dlg .foot .left { margin-right: auto; }
.msgbox .body { white-space: pre-wrap; line-height: 1.5; max-width: 560px; display: flex; gap: 12px; }
.msgbox .icon { font-size: 26px; line-height: 1; }
.form { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; align-items: center; }
.drop {
  border: 2px dashed #7c4dff; border-radius: 10px; background: #f6f2ff; color: #5b2bd6;
  text-align: center; padding: 28px 10px; font-size: 14px; line-height: 1.8;
}
.drop.over { background: #ece4ff; }
.dtabs { display: flex; gap: 1px; }
.dtabs .tab { background: var(--tab); border: 1px solid var(--tab-border); border-bottom: none; padding: 3px 12px; }
.dtabs .tab.on { background: var(--face); font-weight: bold; position: relative; top: 1px; }
.dtab-pane { border: 1px solid var(--tab-border); padding: 10px; }
.radio-list label { display: block; padding: 2px 0; }
.progress { height: 14px; border: 1px solid #ccc; background: #fff; }
.progress > div { height: 100%; background: #3B6D11; width: 0; transition: width .3s; }

/* ── AIチャット（右側のパネル） ── */
body.chat-open #app { margin-right: 380px; }
.chat-panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: 380px; z-index: 40;
  background: var(--face); border-left: 1px solid #808070; display: flex; flex-direction: column;
  box-shadow: -2px 0 8px rgba(0,0,0,.12);
}
.chat-head { display: flex; align-items: center; gap: 4px; padding: 6px 8px; border-bottom: 1px solid var(--group-border); }
.chat-log { flex: 1; overflow: auto; padding: 8px; display: flex; flex-direction: column; gap: 8px; background: #FDFBF4; }
.chat-log .msg { max-width: 94%; padding: 6px 8px; border: 1px solid #d8d2bd; line-height: 1.5; white-space: pre-wrap; }
.chat-log .msg.me { align-self: flex-end; background: #E6F1FB; border-color: #b9cfe6; }
.chat-log .msg.ai { align-self: flex-start; background: #fff; }
.chat-log .plan table.grid { font-size: 11px; }
.chat-input { display: flex; gap: 4px; padding: 6px 8px; border-top: 1px solid var(--group-border); }
.chat-input textarea { flex: 1; min-height: 44px; }
.toolbar button.on { border-color: var(--btn-border); background: var(--face-press); }
@media (max-width: 760px) {
  body.chat-open #app { margin-right: 0; }
  .chat-panel { width: 100%; }
}

/* ── 狭い画面（スマホ・小さいウィンドウ）: 画像を表の上に、ボタンは折り返す ── */
@media (max-width: 900px) {
  .wf { overflow: auto; }
  .wf > .row, .rpane > .row { flex-wrap: wrap; }
  .wf .row > .band { flex-basis: 100%; order: -1; }
  .split { flex-direction: column; flex: none; }
  .split .lpane { flex: none !important; height: 260px; padding-right: 0; }
  .split .divider { display: none; }
  .split .rpane { flex: none; }
  .rpane .grid-wrap { height: 60vh; flex: none; }
  .consult .split .lpane { height: auto; }
  .consult .viewer { height: 240px; flex: none; }
  .consult .rpane > div:first-child { min-height: 240px; }
  .imgnav { flex-wrap: wrap; }
  .select-page { overflow: auto; }
  .cards { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .acard { min-height: 150px; }
}

/* ── 顧客一覧（メイン画面のカード） ── */
.client-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; padding: 4px 2px 12px; overflow: auto; flex: 1; align-content: start; }
.ccard { position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 150px; padding: 14px 16px 12px;
  background: var(--face); border: 2px solid #8A8A78; border-radius: 6px; cursor: pointer; }
.ccard:hover, .ccard:focus-visible { background: #fff; outline: 3px solid #fff; outline-offset: -1px; box-shadow: 0 0 0 1px #8A8A78; }
.ccard.alert { border-color: #C0392B; }
.ccard .cname { font-size: 17px; font-weight: bold; color: #161A2B; line-height: 1.3; padding-right: 26px; word-break: break-all; }
.ccard .cmeta { font-size: 11px; color: #666; }
.ccard .cinfo { font-size: 12px; line-height: 1.6; flex: 1; }
.ccard .copen { text-align: center; font-size: 13px; }
.ccard .copen a { color: #1F6FB2; }
.ccard .bang { position: absolute; top: 10px; right: 10px; width: 24px; height: 24px; border-radius: 50%; background: #D2402E; color: #fff;
  font-weight: bold; font-size: 15px; display: grid; place-items: center; }
.ccard.add { border-style: dashed; color: #555; justify-content: center; text-align: center; }
.ccard.add .cname { padding-right: 0; color: #1F6FB2; }

/* ── 顧客ごとのAIエージェント（右下） ── */
.agent-panel { position: fixed; right: 12px; bottom: calc(env(safe-area-inset-bottom, 0px) + 28px); width: 470px; height: 520px; max-height: calc(100vh - 120px);
  display: flex; flex-direction: column; background: var(--face); border: 1px solid #6E7F99; border-radius: 6px;
  box-shadow: 0 6px 22px rgba(0,0,0,.28); z-index: 40; }
.agent-head { display: flex; gap: 4px; align-items: center; padding: 5px 8px; color: #fff; border-radius: 5px 5px 0 0;
  background: linear-gradient(90deg, #0A246A, #3A6EA5); }
.agent-head .btn { padding: 0 8px; }
.agent-log { flex: 1; overflow: auto; padding: 8px; display: flex; flex-direction: column; gap: 8px; background: #FDFBF4; }
.agent-log .msg { max-width: 96%; padding: 6px 8px; border: 1px solid #d8d2bd; line-height: 1.5; }
.agent-log .msg.me { align-self: flex-end; background: #E6F1FB; border-color: #b9cfe6; white-space: pre-wrap; }
.agent-log .msg.ai { align-self: flex-start; background: #fff; }
.agent-input { display: flex; gap: 4px; padding: 6px 8px; border-top: 1px solid var(--group-border); }
.agent-input textarea { flex: 1; min-height: 44px; }
.agent-proposal { margin-top: 6px; padding: 6px 8px; background: #F4F8FD; border: 1px solid #b9cfe6; }
.agent-pill { position: fixed; right: 12px; bottom: calc(env(safe-area-inset-bottom, 0px) + 28px); z-index: 40; padding: 8px 16px; border-radius: 20px;
  background: linear-gradient(90deg, #0A246A, #3A6EA5); color: #fff; border: none; font-weight: bold; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,.25); }
body.chat-open .agent-panel, body.chat-open .agent-pill { right: 392px; }
@media (max-width: 900px) {
  .agent-panel { left: 8px; right: 8px; width: auto; height: 60vh; }
  body.chat-open .agent-panel, body.chat-open .agent-pill { right: 8px; }
}

/* ツールバーの件数バッジ（顧客一覧: ドライブに未取込の資料がある顧客の数） */
.toolbar button .badge { display: inline-block; min-width: 16px; margin-left: 4px; padding: 0 4px; border-radius: 8px;
  background: #D2402E; color: #fff; font-size: 10px; font-weight: bold; line-height: 16px; text-align: center; }