/* 実装だけの差分 ── mock.css はモックと同じ写し（docs/mockups/assets/mock.css）なので触らない。ここに足す */

/* POSTとCSRFは維持し、見本のa.logoutと同じ見た目にする。 */
.topbar .logout-form{margin:0;display:flex}
.topbar button.logout{font-family:inherit;font-weight:inherit;line-height:inherit;padding:0;border:0;background:transparent;display:flex;cursor:pointer;white-space:nowrap}
.topbar button.logout:hover{text-decoration:underline}

/* Django のフォームは type=email / url / tel を出す。mock.css の欄の見た目は text・password 等だけなので、同じ見た目にする */
input[type=email],input[type=url],input[type=tel]{
  font:inherit;padding:6px 9px;border:1px solid var(--field-line);border-radius:7px;background:var(--field);color:var(--text)}

/* 6桁の確認の欄 ── モック login.html の小窓（max-width:380px、中の欄 344px）と同じ: 中央寄せ・20px・字間 4px・幅 344px */
.authpage .frm input.code{text-align:center;font-size:20px;letter-spacing:4px;width:344px;max-width:100%;margin:0 auto;display:block}

/* look-A: 会社登録だけはモックの460px幅と縦並び。共通入口の幅は変えない。 */
.authpage:has(#id_fiscal_month){max-width:460px}
.authpage:has(#id_fiscal_month) .frm{display:block}
.authpage:has(#id_fiscal_month) .frm label{display:block;margin:12px 0 6px}
.authpage:has(#id_fiscal_month) .frm input,
.authpage:has(#id_fiscal_month) .frm select:not(.ym-y):not(.ym-m){width:100%}
/* main の内側にある会社登録の囲みも伸ばす。auto のままでは224pxまで縮む。 */
.authpage:has(#id_fiscal_month)>div:has(#id_fiscal_month){width:100%}
/* look-A: 個社設定はモックと同じ760pxの主領域。 */
.main:has(>.settings-look){max-width:760px}
.settings-look{width:100%}

/* look-C: 登録画面の名前欄はモックの読みやすい幅へ。別画面や年月・選択肢は伸ばさない。 */
.ledger-asset-create .frm{max-width:780px}
.ledger-prepaid-create .frm{max-width:674px}
.ledger-asset-create input[name=name],.ledger-prepaid-create input[name=name]{width:100%}

/* 編集の小窓から開く確認も、必ず手前に置く。 */
#confirm-action{z-index:1000}

/* 束B 担当5: 返済予定表の月は右寄せ、入力は月の列いっぱい。 */
.finance-schedule th:not(:first-child){text-align:right}
.finance-schedule td.in input{width:100%;text-align:right}
.finance-schedule td.in select{width:100%;min-width:0;border:none;background:transparent;font-size:11.5px;padding:3px 2px;text-align:right;border-radius:0}
.finance-schedule td.in select:focus{outline:2px solid var(--blue);outline-offset:-2px;background:#fff}

/* 振替伝票 ── manual-entry.html の 頭・左右の 欄・実績月。ほかの 画面には 広げない。 */
.voucher-actual{color:var(--muted)}
.voucher-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.voucher-head .small{margin:0}
.voucher-head select{min-width:0;font-size:15px}
.voucher-head .voucher-repeat{margin-left:10px;display:inline-flex;align-items:center;gap:5px}
.voucher-head .voucher-default-caption{margin-left:10px}
.tbl.voucher-je{table-layout:fixed;width:100%;margin:12px 0 0}
.tbl.voucher-je th,.tbl.voucher-je td{padding:4px 5px}
.tbl.voucher-je thead tr.grp th{background:#dbe6fb;font-size:12px}
.tbl.voucher-je th.dr,.tbl.voucher-je td.dr{border-right:2px solid #c7d2e8}
.tbl.voucher-je td.voucher-side-cell{padding:0}
.voucher-side{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start}
.voucher-side>[data-field],.voucher-tags{min-width:0;padding:4px 5px}
.voucher-side select{width:100%;min-width:0;font-size:13px}
.voucher-side [data-field=amount] input{width:100%;min-width:0;text-align:right;font-size:13px;
  font-family:"SienaNum",-apple-system,"Segoe UI","Yu Gothic UI",sans-serif;font-variant-numeric:tabular-nums;letter-spacing:.01em;
  border:none;border-radius:0;padding:7px 10px;height:34px;background:transparent;color:var(--t-ink)}
.voucher-side [data-field=amount] input:focus{outline:2px solid var(--blue);outline-offset:-2px;background:#fff}
.voucher-tag-btn{width:100%;font-size:12px;padding:3px 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left}
.tbl.voucher-je td.mm input{width:100%;min-width:0;font-size:13px}
.tbl.voucher-je td.rm button{border:none;background:none;color:var(--muted);cursor:pointer;font-size:15px;padding:0 4px}
.tbl.voucher-je tfoot td{font-weight:700}
.voucher-je+p.small,#voucher-memo+p.small{margin:8px 0 0}
#tagPop{position:absolute;z-index:5;background:var(--paper);border:1px solid var(--border);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.14);padding:10px 12px;width:300px}
#tagPop label{display:grid;grid-template-columns:52px 1fr;align-items:center;gap:6px;margin:0 0 6px;font-size:12px;color:var(--muted)}
#tagPop select{min-width:0}
.voucher-modal .mb{position:relative}
.voucher-guidance{grid-column:1/-1;margin:0;white-space:normal}
.voucher-je td{vertical-align:top}
.voucher-delete{padding:16px 24px;border-top:1px solid var(--border)}
.voucher-delete label{display:block;margin:10px 0}

/* look-MAIN: 実績の月欄は見本と同じ幅。計算や保存する月は変えない。 */
.actuals-months{overflow:auto;max-height:68vh}
.actuals-months .tbl.ac-tbl{width:auto;min-width:100%;table-layout:auto}
.actuals-months .ac-tbl th,.actuals-months .ac-tbl td{white-space:nowrap}
.actuals-months .ac-tbl th:not(:first-child),.actuals-months .ac-tbl td{min-width:88px;width:88px}
.actuals-months .ac-tbl th:first-child{min-width:160px}
.actuals-months .tbl.ac-tbl td.in input{width:86px;box-sizing:border-box;text-align:right}
.actuals-months .ac-tbl thead th{position:sticky;top:0;z-index:3;background:var(--t-head)}
.actuals-months .ac-tbl tbody th{position:sticky;left:0;z-index:2;background:var(--paper)}
.actuals-months .ac-tbl thead th:first-child{left:0;z-index:4}
/* look-MAIN: 配賦の方式は1つずつ説明付きの選択枠にする。 */
#allocation-form .alloc-mode label.capcard{display:block;cursor:pointer}
#allocation-form .alloc-mode .capcard .small{display:block;margin:4px 0 0 22px}
#allocation-form .alloc-mode .capcard:has(input:checked){border-color:var(--blue);background:#eef4fe}

/* look-SETTINGS: 開始残高は見本と同じ金額欄。小窓・ほかの数値欄へ波及させない。 */
.tbl.money input.opening-amount{width:270px;max-width:100%;box-sizing:border-box;border-radius:5px;padding:3px 8px;height:26px;text-align:right}



/* 台帳の独立額と帳簿の比較。狭い画面では項目単位で折り返す。 */
.ledger-comparison{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:8px 0;border-bottom:1px solid var(--border);font-size:13px}
.ledger-comparison form{display:inline-flex;margin:0}.ledger-comparison b{white-space:nowrap}