:root{--navy:#0f2742;--blue:#0f5ea8;--orange:#e97820;--bg:#f4f6f8;--line:#dde4ec;--text:#172033;--muted:#667085}
*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,"Yu Gothic",Meiryo,sans-serif;background:var(--bg);color:var(--text)}
button,input,select{font:inherit}.topbar{height:64px;background:var(--navy);color:#fff;display:flex;justify-content:space-between;align-items:center;padding:0 24px;position:sticky;top:0;z-index:20}
.brand{display:flex;align-items:center;gap:10px}.brand-mark{width:34px;height:34px;border-radius:8px;background:var(--orange);display:grid;place-items:center;font-weight:900}.brand strong{display:block;letter-spacing:.04em}.brand span{display:block;font-size:11px;opacity:.75}
.top-actions{display:flex;gap:12px;align-items:center;font-size:13px}.top-actions a{color:#fff}.version{opacity:.75}.ghost{background:transparent;border:1px solid #ffffff55;color:#fff}
.app-shell{display:grid;grid-template-columns:220px 1fr;min-height:calc(100vh - 64px)}.sidebar{background:#fff;border-right:1px solid var(--line);padding:16px 12px;display:flex;flex-direction:column;gap:6px}
.sidebar button{width:100%;text-align:left}.content{padding:24px;min-width:0}.page-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:16px}.page-head.compact{align-items:center}.page-head h1{margin:0;font-size:25px}.page-head p{margin:5px 0 0;color:var(--muted);font-size:13px}
button{border:0;border-radius:8px;padding:10px 14px;font-weight:700;cursor:pointer}.primary{background:var(--blue);color:#fff}.secondary{background:#edf2f7;color:#26384a}.danger{background:#b42318;color:white}
.kpi-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:16px}.kpi-grid.six{grid-template-columns:repeat(3,minmax(0,1fr))}.kpi-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px}.kpi-card span{display:block;color:var(--muted);font-size:12px}.kpi-card strong{display:block;font-size:24px;margin-top:4px}
.panel{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px;margin-bottom:16px}.filters{padding:14px}.filter-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr 1fr;gap:10px}.filter-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}
label{font-size:12px;color:#586475;display:block}input,select{width:100%;margin-top:5px;padding:9px 10px;border:1px solid #cfd8e3;border-radius:7px;background:#fff}.form-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.form-section{padding:8px 0 18px;border-bottom:1px solid #edf1f5}.form-section:last-of-type{border-bottom:0}.form-section h3,.section-head h3{margin:0 0 12px}.section-head{display:flex;justify-content:space-between;align-items:center}
.table-toolbar{display:flex;justify-content:space-between;margin-bottom:8px}.table-scroll{overflow:auto}table{width:100%;border-collapse:collapse;min-width:780px}th,td{padding:10px;border-bottom:1px solid #e9edf2;text-align:left;font-size:13px;vertical-align:middle}th{background:#f8fafc;color:#475467;position:sticky;top:0}.money{text-align:right}.muted{color:var(--muted);font-size:13px}
td input{min-width:80px;margin:0}.actions{display:flex;gap:8px;align-items:center}.editor-footer{display:flex;justify-content:space-between;align-items:center;margin-top:16px}.subpanel{margin-top:16px;padding:16px;border:1px solid var(--line);border-radius:10px;background:#fafbfc}.hidden{display:none!important}.inline{display:flex;gap:8px;align-items:center}.inline input{margin:0}
.alert{padding:10px 12px;background:#fff4e8;color:#9a4b00;border:1px solid #ffd9b5;border-radius:8px;margin-bottom:14px}.status-ok{color:#067647;font-weight:700}.status-off{color:#b42318;font-weight:700}.perm-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:10px 0}.perm-grid label{background:#fff;border:1px solid var(--line);padding:8px;border-radius:6px}
hr{border:0;border-top:1px solid #e5e7eb;margin:22px 0}dialog{border:0;border-radius:12px;padding:22px;box-shadow:0 24px 70px #0003;width:380px}dialog::backdrop{background:#0006}dialog h3{margin-top:0}dialog label{margin-top:12px}
@media(max-width:1100px){.filter-grid{grid-template-columns:repeat(3,1fr)}.form-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.app-shell{grid-template-columns:1fr}.sidebar{position:sticky;top:64px;z-index:15;flex-direction:row;overflow:auto;border-right:0;border-bottom:1px solid var(--line)}.sidebar button{width:auto;white-space:nowrap}.content{padding:14px}.kpi-grid,.kpi-grid.six{grid-template-columns:1fr}.filter-grid,.form-grid{grid-template-columns:1fr}.top-actions .version,.top-actions span:not(.version){display:none}.page-head{flex-direction:column}.editor-footer{align-items:flex-start;gap:12px;flex-direction:column}}

/* Ver.25.0: estimate editor + live A4 preview */
#editor.panel{padding:0;background:transparent;border:0}
.editor-workspace{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(390px,.75fr);gap:16px;align-items:start}
.editor-form-pane{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px;min-width:0}
.live-preview-pane{position:sticky;top:80px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px;min-width:0}
.preview-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.preview-head span{font-size:11px;color:var(--muted)}
.preview-stage{background:#dfe5eb;border-radius:8px;padding:10px;display:flex;justify-content:center;overflow:hidden}
#livePreviewFrame{display:block;border:0;background:white;width:100%;aspect-ratio:210/297;box-shadow:0 3px 16px #0002}
.live-totals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.live-totals>div{border:1px solid var(--line);border-radius:9px;padding:10px 12px;background:#fafbfc}
.live-totals span{display:block;font-size:11px;color:var(--muted)}
.live-totals strong{display:block;margin-top:3px;font-size:18px;text-align:right}
.live-totals .em{border-color:#9fc3e8;background:#f2f8fd}
@media(max-width:1350px){.editor-workspace{grid-template-columns:1fr}.live-preview-pane{position:relative;top:auto}.preview-stage{max-width:620px;margin:auto}}

.kpi-card small{display:block;margin-top:4px;font-size:13px;color:#667085;font-weight:600;}

/* Ver.25.0 - 請求・入金を見積（青系）と見分けやすくする */
.invoice-nav-tab{
  background:#e8f5f2 !important;
  border-color:#7bb8aa !important;
  color:#0f5f52 !important;
}
.invoice-nav-tab:hover{
  background:#d8eee8 !important;
}
.invoice-nav-tab.active,
.invoice-nav-tab[aria-current="page"]{
  background:#0f766e !important;
  border-color:#0f766e !important;
  color:#fff !important;
}
#homeView.invoice-mode #listTitle,
.invoice-list-title{
  color:#0f766e !important;
}
#homeView.invoice-mode .table-wrap,
#homeView.invoice-mode .card,
#homeView.invoice-mode .list-card{
  border-color:#9ccdc3 !important;
}
#homeView.invoice-mode table thead th{
  background:#e8f5f2 !important;
  color:#0f5f52 !important;
  border-color:#b9ddd5 !important;
}
#homeView.invoice-mode .kpi-card{
  border-color:#9ccdc3 !important;
}
#homeView.invoice-mode .kpi-card span{
  color:#0f5f52 !important;
}

/* Ver.25.0 navigation color unification
   見積 = blue / 請求・入金 = green / その他 = gray-black */
.sidebar button,
.sidebar a,
nav button,
nav a {
  background:#f3f4f6;
  border-color:#d1d5db;
  color:#374151;
}

/* 見積一覧 */
.estimate-nav-tab,
[data-type="estimate"] {
  background:#eaf2ff !important;
  border-color:#8bb2e8 !important;
  color:#174f8a !important;
}
.estimate-nav-tab:hover,
[data-type="estimate"]:hover {
  background:#dceaff !important;
}
.estimate-nav-tab.active,
[data-type="estimate"].active,
.estimate-nav-tab[aria-current="page"],
[data-type="estimate"][aria-current="page"] {
  background:#2563a6 !important;
  border-color:#2563a6 !important;
  color:#fff !important;
}

/* 請求・入金一覧 */
.invoice-nav-tab,
[data-type="invoice"] {
  background:#e8f5f2 !important;
  border-color:#7bb8aa !important;
  color:#0f5f52 !important;
}
.invoice-nav-tab:hover,
[data-type="invoice"]:hover {
  background:#d8eee8 !important;
}
.invoice-nav-tab.active,
[data-type="invoice"].active,
.invoice-nav-tab[aria-current="page"],
[data-type="invoice"][aria-current="page"] {
  background:#0f766e !important;
  border-color:#0f766e !important;
  color:#fff !important;
}

/* Ver.25.0 */
.status-off{color:#9b1c1c;font-weight:700}
tr.cancelled-row{opacity:.72}

/* Ver.25.0 */
.panel-lite{display:flex;gap:14px;align-items:end;flex-wrap:wrap;padding:12px 14px;margin:8px 0 16px;border:1px solid #d8dee6;border-radius:10px;background:#fafbfc}.dashboard-period label{min-width:180px}.dashboard-period strong{padding-bottom:8px}.kpi-card small{display:block;margin-top:4px;color:#667085}

/* Ver.25.0 usability */
.editor-workspace{grid-template-columns:minmax(560px,1fr) minmax(560px,1fr);gap:18px}
.live-preview-pane{padding:14px}
.preview-head strong{font-size:16px}
.preview-head span{font-size:13px}
.preview-stage{padding:8px;overflow:auto;max-height:calc(100vh - 125px)}
#livePreviewFrame{min-width:540px;width:100%;height:auto;min-height:764px;aspect-ratio:210/297}
.document-history{margin-top:18px;border:1px solid #d9e1e8;background:#fbfcfd}
.history-list{display:flex;flex-direction:column;gap:8px;max-height:320px;overflow:auto}
.history-item{border:1px solid #dfe4ea;border-radius:8px;padding:10px 12px;background:#fff}
.history-meta{display:flex;gap:12px;align-items:center;flex-wrap:wrap;font-size:12px;color:#667085}
.history-meta strong{font-size:13px;color:#1f2937}
.history-detail{margin-top:5px;font-size:13px;line-height:1.55;color:#344054}
.cancelled-row{background:#fff4f4!important}
.filters .filter-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px 12px}
.filters label{font-weight:600}
@media(max-width:1500px){
  .editor-workspace{grid-template-columns:minmax(520px,1fr) minmax(500px,.95fr)}
}
@media(max-width:1150px){
  .editor-workspace{grid-template-columns:1fr}
  .live-preview-pane{position:relative;top:auto}
  .preview-stage{max-width:none}
  #livePreviewFrame{min-width:620px;max-width:760px}
}


/* Ver.25.0 - 右側A4プレビュー拡大（帳票内部レイアウトは変更しない） */
.editor-workspace{
  grid-template-columns:minmax(560px,.9fr) minmax(680px,1.1fr);
  gap:18px;
  align-items:start;
}
.live-preview-pane{
  min-width:680px;
}
.preview-stage{
  width:100%;
  padding:10px;
  overflow:auto;
}
#livePreviewFrame{
  width:100%;
  min-width:660px;
  max-width:none;
  aspect-ratio:210/297;
  min-height:934px;
  height:auto;
}

/* 中間幅ではプレビューを優先して横幅を確保 */
@media(max-width:1550px) and (min-width:1201px){
  .editor-workspace{
    grid-template-columns:minmax(520px,.92fr) minmax(620px,1.08fr);
  }
  .live-preview-pane{min-width:620px}
  #livePreviewFrame{min-width:600px;min-height:849px}
}

/* 狭い画面では従来通り下段配置。A4比率は維持 */
@media(max-width:1200px){
  .editor-workspace{grid-template-columns:1fr}
  .live-preview-pane{position:relative;top:auto;min-width:0}
  .preview-stage{max-width:none;justify-content:center}
  #livePreviewFrame{
    width:min(820px,100%);
    min-width:700px;
    min-height:990px;
  }
}

/* Ver.25.0 - A4プレビュー拡大操作。iframe全体を等倍拡大し帳票内部は再配置しない */
.preview-head{gap:12px}
.preview-tools{display:flex;align-items:center;gap:6px;margin-left:auto}
.preview-tools button{width:auto;min-width:0;margin:0;line-height:1}
.preview-zoom-btn{height:32px;width:34px!important;border:1px solid #b9c3ce;border-radius:7px;background:#fff;font-size:20px;font-weight:700;cursor:pointer}
.preview-zoom-label{height:32px;min-width:58px!important;border:1px solid #b9c3ce;border-radius:7px;background:#f8fafc;font-size:13px;font-weight:700;cursor:pointer}
.preview-zoom-fit{height:32px;border:1px solid #b9c3ce;border-radius:7px;background:#fff;padding:0 10px;font-size:12px;cursor:pointer}
.preview-zoom-btn:hover,.preview-zoom-label:hover,.preview-zoom-fit:hover{background:#eef3f7}
.preview-stage{justify-content:flex-start}
#livePreviewFrame{transform-origin:top left}


/* Ver.25.0 - 作成画面の左右幅をVer.24.9.15相当に戻す。
   プレビューの＋/－ズーム機能は維持。帳票内部レイアウトは変更しない。 */
.editor-workspace{
  grid-template-columns:minmax(560px,1fr) minmax(560px,1fr);
  gap:18px;
  align-items:start;
}
.live-preview-pane{
  min-width:0;
}
#livePreviewFrame{
  width:100%;
  min-width:540px;
  min-height:764px;
  aspect-ratio:210/297;
}

/* Ver.24.9.15相当のレスポンシブ挙動へ復帰 */
@media(max-width:1500px){
  .editor-workspace{
    grid-template-columns:minmax(520px,1fr) minmax(500px,.95fr);
  }
  .live-preview-pane{min-width:0}
  #livePreviewFrame{min-width:500px;min-height:707px}
}
@media(max-width:1150px){
  .editor-workspace{grid-template-columns:1fr}
  .live-preview-pane{position:relative;top:auto;min-width:0}
  .preview-stage{max-width:none;margin:auto}
  #livePreviewFrame{
    width:100%;
    min-width:620px;
    min-height:877px;
  }
}

/* Ver.25.0 - 見積の集計区分 */
.estimate-category-fields{
  border:1px solid var(--line);
  border-radius:9px;
  padding:10px 12px;
  background:#f8fafc;
  display:grid;
  gap:7px;
  align-content:start;
}
.estimate-category-fields .field-caption{font-size:12px;font-weight:700;color:#475467}
.estimate-category-fields .check-option{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:8px;
  font-weight:600;
  cursor:pointer;
}
.estimate-category-fields .check-option input{width:17px;height:17px;margin:0}
.estimate-category-fields small{font-size:11px;color:#667085;line-height:1.45}

/* Ver.25.0 - 顧客住所の直接入力 */
.form-grid .wide-field{grid-column:span 2}
@media(max-width:900px){.form-grid .wide-field{grid-column:span 1}}


/* Ver.25.0 - 左サイドメニューを機能別に色分け
   通常時は薄い背景、選択中は濃い背景＋白文字で視認性を上げる。 */
#nav button{
  border:1px solid transparent;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease;
}

/* 見積一覧 = 青 */
#nav button[data-view="estimate"]{
  background:#eaf2ff !important;
  border-color:#9bbce8 !important;
  color:#174f8a !important;
}
#nav button[data-view="estimate"]:hover{background:#dceaff !important}
#nav button[data-view="estimate"].active{
  background:#2563a6 !important;
  border-color:#2563a6 !important;
  color:#fff !important;
  box-shadow:0 2px 8px rgba(37,99,166,.20);
}

/* 請求一覧 = 緑 */
#nav button[data-view="invoice"]{
  background:#e8f5f2 !important;
  border-color:#8fc7ba !important;
  color:#0f6659 !important;
}
#nav button[data-view="invoice"]:hover{background:#d8eee8 !important}
#nav button[data-view="invoice"].active{
  background:#0f766e !important;
  border-color:#0f766e !important;
  color:#fff !important;
  box-shadow:0 2px 8px rgba(15,118,110,.20);
}

/* 商品・工事マスタ = オレンジ */
#nav button[data-view="products"]{
  background:#fff3e8 !important;
  border-color:#efbd86 !important;
  color:#9a4e05 !important;
}
#nav button[data-view="products"]:hover{background:#ffe9d2 !important}
#nav button[data-view="products"].active{
  background:#d97706 !important;
  border-color:#d97706 !important;
  color:#fff !important;
  box-shadow:0 2px 8px rgba(217,119,6,.20);
}

/* 集計ダッシュボード = 紫 */
#nav button[data-view="dashboard"]{
  background:#f3edff !important;
  border-color:#bca5e8 !important;
  color:#6640a5 !important;
}
#nav button[data-view="dashboard"]:hover{background:#eadeff !important}
#nav button[data-view="dashboard"].active{
  background:#7c3fb2 !important;
  border-color:#7c3fb2 !important;
  color:#fff !important;
  box-shadow:0 2px 8px rgba(124,63,178,.20);
}

/* ユーザー・権限管理 = ネイビー */
#nav button[data-view="users"]{
  background:#e9eef6 !important;
  border-color:#9babc2 !important;
  color:#273f61 !important;
}
#nav button[data-view="users"]:hover{background:#dce5f1 !important}
#nav button[data-view="users"].active{
  background:#334e73 !important;
  border-color:#334e73 !important;
  color:#fff !important;
  box-shadow:0 2px 8px rgba(51,78,115,.20);
}

/* システム設定 = グレー */
#nav button[data-view="settings"]{
  background:#f1f3f5 !important;
  border-color:#b7bec7 !important;
  color:#4b5563 !important;
}
#nav button[data-view="settings"]:hover{background:#e5e7eb !important}
#nav button[data-view="settings"].active{
  background:#5b6470 !important;
  border-color:#5b6470 !important;
  color:#fff !important;
  box-shadow:0 2px 8px rgba(75,85,99,.20);
}

/* 顧客管理は従来の中立色を維持 */
#nav button[data-view="customers"].active{
  background:#4b5563 !important;
  border-color:#4b5563 !important;
  color:#fff !important;
}