/* =============================================================
   style.css ― Workspace-renge 共通スタイル
   ティール系・ダーク対応・レスポンシブ。色はCSS変数で管理。
   ============================================================= */

:root{
    /* メインカラー #8ad2de（2026-07-18〜）は明るい色のため2トーン構成:
       --accent        = 面（ヘッダー・主ボタン・選択ピル等の背景）
       --accent-text   = 面の上に載せる文字色（白では読めないので濃い同系色）
       --accent-strong = 白背景の上の文字・枠線に使う濃いめの同系色（旧アクセントの役割） */
    --accent:#8ad2de; --accent-hover:#6fc3d2; --accent-text:#173b44; --accent-strong:#1d7a8c;
    --text-link:#1d7a8c; --bg-active:#e0f4f8;
    --bg-primary:#ffffff; --bg-secondary:#f7f8f9; --bg-hover:#eef2f3;
    --bg-card:#ffffff; /* チェックリスト項目・写真カードの背景（ダークで上書き） */
    --text-primary:#202124; --text-secondary:#5f6368; --text-muted:#9aa0a6;
    --border-color:#e0e3e7;
    --success:#2ea043; --danger:#d93025; --warning:#f9ab00; --info:#1a73e8;
    --chart-inquiry:#c26b2b; /* 売上グラフの問合せ系列（ティールと寒暖で区別できるオレンジ） */
    /* 売上グラフの業種別カラー（色覚多様性検証済みのカテゴリパレット。変数はパレットの段）
       業種への割当は .bt-* 側で行う: お墓参り代行=bt2(青緑) お掃除=bt1(青)（2026-07-18交換）
       家財整理=bt3(黄) 遺品整理=bt4(緑) その他=bt5(青紫) */
    --chart-bt1:#2a78d6; --chart-bt2:#1baf7a; --chart-bt3:#eda100; --chart-bt4:#008300; --chart-bt5:#4a3aa7;
    --header-height:60px; --sidebar-width:240px;
    --radius:8px; --radius-sm:4px;
    --shadow-sm:0 1px 2px rgba(0,0,0,.05); --shadow-md:0 2px 8px rgba(0,0,0,.08);
    /* フォント：CMS本文はゴシック、帳票(見積/請求/報告)は明朝＋筆見出し */
    --font-base:"Noto Sans JP","Hiragino Kaku Gothic ProN","Meiryo",sans-serif;
    --font-doc:"Hiragino Mincho ProN","Yu Mincho","YuMincho","BIZ UDPMincho","MS PMincho",serif;
    --font-brush:"Yuji Syuku","Hiragino Mincho ProN","Yu Mincho",serif;
}
[data-theme="dark"]{
    /* ダーク面ではメインカラーを少し落ち着かせて眩しさを抑える（文字用 --accent-strong は逆に明るい #8ad2de） */
    --accent:#6fbdcb; --accent-hover:#84c9d5; --accent-strong:#8ad2de;
    --text-link:#9adbe6; --bg-active:#25454e;
    --bg-primary:#1c1f22; --bg-secondary:#252a2d; --bg-hover:#2e3438;
    --bg-card:#252a2d; /* ダーク時はカードも暗い背景に（白浮き防止） */
    --text-primary:#e8eaed; --text-secondary:#9aa0a6; --text-muted:#5f6368;
    --border-color:#3c4043;
    --success:#4caf50; --danger:#f28b82; --warning:#ffd166; --info:#8ab4f8;
    --chart-inquiry:#cc8038; /* ダーク面でも沈まない明るめのオレンジ */
    /* 業種別カラーのダーク面用ステップ（同じ色相を暗い背景向けに調整した検証済みセット） */
    --chart-bt1:#3987e5; --chart-bt2:#199e70; --chart-bt3:#c98500; --chart-bt4:#008300; --chart-bt5:#9085e9;
    --shadow-sm:0 1px 2px rgba(0,0,0,.3); --shadow-md:0 2px 8px rgba(0,0,0,.4);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
    font-family:var(--font-base);
    background:var(--bg-secondary); color:var(--text-primary);
    line-height:1.7; font-size:16px;
}
button,input,select,textarea{font-family:inherit}
a{color:var(--text-link); text-decoration:none}
a:hover{text-decoration:underline}
code{background:var(--bg-hover); padding:1px 5px; border-radius:var(--radius-sm); font-size:14px}
.muted{color:var(--text-muted)}
.nowrap{white-space:nowrap}
.ok{color:var(--success); font-weight:700}
.ng{color:var(--danger); font-weight:700}
.lead{font-size:17px; margin:0 0 16px}

/* ---------------- ヘッダー ---------------- */
.app-header{
    position:relative; z-index:30; flex:0 0 var(--header-height);
    height:var(--header-height); display:flex; align-items:center; justify-content:space-between;
    padding:0 16px; background:var(--accent); color:var(--accent-text); box-shadow:var(--shadow-md);
}
.app-header__left,.app-header__right{display:flex; align-items:center; gap:10px}
.app-header__brand{position:absolute; left:50%; transform:translateX(-50%);
    color:var(--accent-text); font-weight:700; font-size:18px; white-space:nowrap}
.app-header__brand:hover{text-decoration:none; opacity:.9}
.hamburger{display:none; background:transparent; border:none; color:var(--accent-text); font-size:22px; cursor:pointer}

/* ユーザーメニュー */
.user-menu{position:relative}
.user-menu__btn{display:flex; align-items:center; gap:8px; background:transparent; border:none;
    color:var(--accent-text); cursor:pointer; padding:4px 6px; border-radius:var(--radius-sm)}
.user-menu__btn:hover{background:rgba(0,0,0,.08)}
/* パネル先頭の「誰でログイン中か」（名前＋ロール。ヘッダー上はアバターのみ＝2026-07-18） */
.user-menu__who{display:flex; align-items:center; gap:8px; padding:8px 12px 10px;
    border-bottom:1px solid var(--border-color); margin-bottom:4px}
.user-menu__who-name{font-weight:700; font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.user-menu__who-role{flex:0 0 auto; font-size:12px; padding:1px 8px; border-radius:999px;
    background:var(--bg-active); color:var(--accent-strong)}
.avatar{display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px;
    border-radius:50%; background:#5f6368; color:#fff; font-weight:700; font-size:15px; overflow:hidden}
.avatar img{width:100%; height:100%; object-fit:cover; display:block}
.avatar--lg{width:72px; height:72px; font-size:30px}
.user-menu__dropdown{position:absolute; right:0; top:calc(100% + 6px); min-width:170px;
    background:var(--bg-primary); border:1px solid var(--border-color); border-radius:var(--radius);
    box-shadow:var(--shadow-md); padding:6px; display:none}
.user-menu.is-open .user-menu__dropdown{display:block}
.user-menu__item{display:block; width:100%; text-align:left; padding:8px 12px; border:none;
    background:transparent; color:var(--text-primary); font-size:15px; border-radius:var(--radius-sm); cursor:pointer}
.user-menu__item:hover{background:var(--bg-hover); text-decoration:none}
.user-menu__item--danger{color:var(--danger)}
/* テーマ切替：現在のモードをアイコン＋ラベルで表示（アイコンは白黒＝カラー絵文字を無彩色に） */
.user-menu__item--theme{display:flex; align-items:center; gap:8px}
.user-menu__item-icon{font-size:16px; line-height:1; filter:grayscale(1)}

/* 権限プレビュー（表示テスト）: ヘッダーの入口ドロップダウン（<details>だけで開閉・JS不使用） */
.preview-menu{position:relative}
.preview-menu__btn{list-style:none; display:flex; align-items:center; gap:6px; cursor:pointer; user-select:none;
    padding:5px 10px; border:1px solid rgba(23,59,68,.4); border-radius:999px;
    color:var(--accent-text); font-size:13px; white-space:nowrap}
.preview-menu__btn::-webkit-details-marker{display:none}
.preview-menu__btn:hover, .preview-menu[open] .preview-menu__btn{background:rgba(0,0,0,.08)}
.preview-menu__pop{position:absolute; right:0; top:calc(100% + 8px); z-index:40; width:250px;
    background:var(--bg-primary); border:1px solid var(--border-color); border-radius:var(--radius);
    box-shadow:var(--shadow-md); padding:10px}
.preview-menu__hint{margin:0 0 4px; font-size:12px; line-height:1.6; color:var(--text-muted)}
.preview-menu__item{display:block; width:100%; margin-top:6px; padding:8px 10px; text-align:left; cursor:pointer;
    background:var(--bg-secondary); border:1px solid var(--border-color); border-radius:var(--radius-sm);
    color:var(--text-primary); font-size:13px}
.preview-menu__item:hover{background:var(--bg-hover)}

/* 権限プレビュー中の帯（ヘッダー直下・全ページ共通）。テスト中であることがひと目で分かる注意色 */
.preview-bar{flex:0 0 auto; display:flex; align-items:center; justify-content:center; gap:8px 14px; flex-wrap:wrap;
    padding:7px 16px; font-size:13px; color:var(--text-primary);
    background:rgba(249,171,0,.16); border-bottom:1px solid rgba(190,140,0,.4)}
.preview-bar__real{color:var(--text-muted)}
.preview-bar__actions{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.preview-bar form{display:inline; margin:0}
.preview-bar__btn{padding:4px 10px; font-size:12px; cursor:pointer; border-radius:999px;
    border:1px solid rgba(190,140,0,.55); background:transparent; color:inherit}
.preview-bar__btn:hover{background:rgba(249,171,0,.22)}
.preview-bar__btn--exit{background:var(--warning); border-color:var(--warning); color:#33270a; font-weight:700}
.preview-bar__btn--exit:hover{filter:brightness(1.06)}
/* 狭い画面ではボタンの文字を優先し、入口ボタンは目のアイコンだけにする */
@media (max-width: 700px){
    .preview-menu__text{display:none}
    .myspace-btn__text{display:none}
}

/* ---------------- My Space（全ページ共通の個人ドロワー） ---------------- */
/* ヘッダーの入口ボタン（表示テストと同じピル型） */
.myspace-btn{display:flex; align-items:center; gap:6px; padding:5px 10px; white-space:nowrap;
    border:1px solid rgba(23,59,68,.4); border-radius:999px; color:var(--accent-text); font-size:13px}
.myspace-btn:hover{background:rgba(0,0,0,.08); text-decoration:none}
/* 画面全体を覆う半透明の背景（クリックで閉じる） */
.myspace__overlay{position:fixed; inset:0; z-index:60; background:rgba(0,0,0,.35); cursor:default}
/* 右からのパネル */
.myspace__panel{position:fixed; top:0; right:0; bottom:0; z-index:61; width:min(420px, 94vw);
    display:flex; flex-direction:column; background:var(--bg-primary);
    border-left:1px solid var(--border-color); box-shadow:var(--shadow-md)}
.myspace__head{display:flex; align-items:center; justify-content:space-between; gap:8px;
    padding:12px 16px; background:var(--accent); color:var(--accent-text); font-weight:700}
.myspace__sub{font-weight:400; font-size:12px; opacity:.85; margin-left:4px}
.myspace__close{color:var(--accent-text); font-size:16px; line-height:1; padding:4px 9px; border-radius:var(--radius-sm)}
.myspace__close:hover{background:rgba(0,0,0,.08); text-decoration:none}
.myspace__body{flex:1; overflow-y:auto; padding:14px 16px}
/* タブ（ラジオ + :checked のCSSだけで切替。JS不要）。ラジオ本体は見えなくする */
.mstab__radio{position:absolute; opacity:0; pointer-events:none}
.mstab__bar{display:flex; gap:2px; margin-bottom:14px; border-bottom:2px solid var(--border-color)}
.mstab__bar label{padding:8px 10px; margin-bottom:-2px; font-size:13px; white-space:nowrap; cursor:pointer;
    color:var(--text-secondary); border-bottom:2px solid transparent;
    border-radius:var(--radius-sm) var(--radius-sm) 0 0; user-select:none}
.mstab__bar label:hover{background:var(--bg-hover)}
.mstab__pane{display:none}
/* 選択中タブの見た目と、対応するパネルの表示（ラジオ・バー・パネルは兄弟要素） */
#mstab-notes:checked ~ .mstab__bar label[for="mstab-notes"],
#mstab-sc:checked    ~ .mstab__bar label[for="mstab-sc"],
#mstab-img:checked   ~ .mstab__bar label[for="mstab-img"]{color:var(--accent-strong); border-bottom-color:var(--accent-strong); font-weight:700}
#mstab-notes:checked ~ .mstab__pane--notes{display:block}
#mstab-sc:checked    ~ .mstab__pane--sc{display:block}
#mstab-img:checked   ~ .mstab__pane--img{display:block}
.myspace__textarea{width:100%; resize:vertical}
.myspace__add{margin-bottom:10px; display:flex; flex-direction:column; gap:6px}
.myspace__actions{display:flex; align-items:center; justify-content:flex-end; gap:8px}
.myspace__date{margin-right:auto; font-size:11px; color:var(--text-muted)}
/* メモのタイトル一覧（ピル）。選択中は塗りつぶし・クリックでそのメモを開く */
.msnote__list{display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-bottom:10px}
.msnote__pill{display:inline-block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    padding:4px 12px; font-size:13px; border-radius:999px; cursor:pointer; user-select:none;
    background:var(--bg-secondary); border:1px solid var(--border-color); color:var(--text-primary)}
.msnote__pill:hover{background:var(--bg-hover); text-decoration:none}
.msnote__pill.is-active{background:var(--accent); border-color:var(--accent); color:var(--accent-text); font-weight:700}
.msnote__pill--new{color:var(--text-secondary); border-style:dashed; list-style:none}
.msnote__pill--new::-webkit-details-marker{display:none}
.msnote__new{display:contents}   /* details をピル一覧のflexに溶け込ませる */
.msnote__new-form{flex-basis:100%; display:flex; gap:6px; margin-top:2px}
.msnote__new-form .form-input{flex:1}
.msnote__title{margin-bottom:6px; font-weight:700}
/* 選択中メモ＝編集フォーム＋右下に削除。カード風に区切る */
.myspace__note{position:relative; margin-bottom:10px; padding:10px; padding-right:10px;
    background:var(--bg-secondary); border:1px solid var(--border-color); border-radius:var(--radius)}
.myspace__note .myspace__delform{position:absolute; right:10px; bottom:10px}
.myspace__note .myspace__actions{padding-right:56px}   /* 削除ボタンと重ならない余白 */
.myspace__del{color:var(--danger)}
.myspace__delform{display:inline; margin:0}
/* ショートカット */
.myspace__sc-list{list-style:none; margin:0 0 10px; padding:0}
.myspace__sc-list li{display:flex; align-items:center; justify-content:space-between; gap:8px;
    padding:6px 2px; border-bottom:1px dashed var(--border-color); min-width:0}
.myspace__sc-list li a{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
/* 画像グリッド（3列・正方形サムネ・右上に✕） */
.myspace__imgs{display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; margin-bottom:10px}
.myspace__img{position:relative; margin:0}
.myspace__img img{display:block; width:100%; aspect-ratio:1/1; object-fit:cover;
    border:1px solid var(--border-color); border-radius:var(--radius-sm)}
.myspace__img-del{position:absolute; top:4px; right:4px; margin:0}
.myspace__img-delbtn{width:22px; height:22px; padding:0; line-height:1; font-size:12px; cursor:pointer;
    border:none; border-radius:50%; background:rgba(0,0,0,.55); color:#fff}
.myspace__img-delbtn:hover{background:var(--danger)}
.myspace__hint{margin:4px 0 0; font-size:12px; line-height:1.6; color:var(--text-muted)}

/* ---------------- レイアウト（アプリシェル：本文だけスクロール） ---------------- */
body.app-shell{display:flex; flex-direction:column; height:100vh; overflow:hidden}
.app-layout{display:flex; flex:1 1 auto; min-height:0}
.app-sidebar{
    width:var(--sidebar-width); flex:0 0 var(--sidebar-width);
    background:var(--bg-primary); border-right:1px solid var(--border-color);
    display:flex; flex-direction:column; justify-content:space-between;
    min-height:0; overflow-y:auto;
}
.app-main{flex:1; padding:24px; max-width:100%; min-width:0; min-height:0; overflow-y:auto}
.page-title{font-size:20px; margin:0 0 18px; padding-bottom:10px; border-bottom:2px solid var(--bg-active)}

/* ---------------- ナビ ---------------- */
.nav{padding:10px 8px}
.nav__link{display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:var(--radius-sm);
    color:var(--text-primary); font-size:16px; cursor:pointer}
.nav__link:hover{background:var(--bg-hover); text-decoration:none}
.nav__link.is-active{background:var(--bg-active); color:var(--accent-strong); font-weight:700}
.nav__link.is-disabled{color:var(--text-muted); cursor:default}
.nav__link.is-disabled:hover{background:transparent}
.nav__icon{width:20px; text-align:center; filter:grayscale(1); opacity:.7}
.nav__label{flex:1}
.nav__badge{font-size:12px; color:var(--text-muted); border:1px solid var(--border-color);
    border-radius:999px; padding:0 6px}
.nav__group{margin-top:2px}
.nav__group summary{list-style:none}
.nav__group summary::-webkit-details-marker{display:none}
.nav__summary{user-select:none}
.nav__caret{transition:transform .15s ease}
.nav__group[open] .nav__caret{transform:rotate(180deg)}
.nav__children{padding-left:14px}
.nav__children .nav__link{font-size:15px; padding:7px 12px}
/* 入れ子の展開グループ（例：登録管理 > マスタ管理）は、さらに一段下げて階層を示す */
.nav__group--nested{margin-top:0}
.nav__group--nested > .nav__children{padding-left:12px}

.sidebar-head{padding:14px; border-bottom:1px solid var(--border-color)}
.clock{font-variant-numeric:tabular-nums; font-size:24px; font-weight:700; text-align:center; color:var(--text-primary)}
.clock__sec{font-size:.6em; font-weight:600; color:var(--text-secondary); margin-left:1px}
.clock-date{margin-top:4px; font-size:14px; text-align:center; color:var(--text-secondary)}
.nav--bottom{border-top:1px solid var(--border-color)}
.sidebar-overlay{display:none}

/* ---------------- フッター ---------------- */
.app-footer{flex:0 0 auto; display:flex; justify-content:center; align-items:center; gap:10px;
    padding:12px 24px; color:var(--text-muted); font-size:14px; border-top:1px solid var(--border-color);
    background:var(--bg-primary)}

/* ---------------- カード / 表 ---------------- */
.card{background:var(--bg-primary); border:1px solid var(--border-color); border-radius:var(--radius); padding:18px 20px}
.card--shadow{box-shadow:var(--shadow-md)}
.card__title{font-size:16px; margin:0 0 12px; color:var(--accent-strong);
    border-bottom:2px solid var(--bg-active); padding-bottom:8px}
.table{width:100%; border-collapse:collapse; font-size:15px}
.table th,.table td{text-align:left; padding:7px 8px; border-bottom:1px solid var(--border-color)}
.table th{color:var(--text-secondary); font-weight:600}

/* ダッシュボード */
.widget-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:14px; margin-bottom:20px}
.stat-card{display:flex; align-items:center; gap:12px; padding:14px 16px}
.stat-card__icon{font-size:25px}
/* モノクロ線画アイコン（売上管理のサマリー等）。currentColor で描くのでテーマ色に追従 */
.stat-card__icon--mono{color:var(--text-secondary)}
.stat-card__icon--mono svg{width:28px; height:28px; display:block}
.stat-card__label{font-size:14px; color:var(--text-secondary)}
.stat-card__value{font-size:25px; font-weight:700}
.stat-card__note{font-size:12px; color:var(--text-muted)}
.stat-card__body{flex:1; min-width:0}
/* 売上カード（ダッシュボード）: <a> でカード全体をリンクにする。文字色・下線は通常カードと同じに */
a.stat-card{color:inherit; text-decoration:none}
a.stat-card:hover{border-color:var(--accent-strong)}
/* 業種別売上（今月）の内訳リスト。チップの色は業種クラス .bt-xxx（売上グラフと共用） */
.stat-card__types{list-style:none; margin:2px 0 0; padding:0; font-size:13px}
.stat-card__types li{display:flex; align-items:center; gap:7px; padding:2px 0}
.stat-card__chip{flex:0 0 auto; width:12px; height:12px; border-radius:3px}
.stat-card__amt{margin-left:auto; font-weight:600; font-variant-numeric:tabular-nums}
.stat-card__unit{font-size:14px; font-weight:400}
.dash-cols{display:grid; grid-template-columns:1fr 1fr; gap:16px}

/* ---------------- ダッシュボード予定カレンダー ----------------
   案件の実施予定＝業種色の帯（.bt-xxx を共用）／未入金請求の支払期限＝⚠帯（.due）／
   自分の日報＝📝マーク。日付マスをクリックするとその日の予定モーダルが開く（app.js）。 */
.cal-card{margin-bottom:20px}
.cal-head{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:12px}
.cal-scroll{overflow-x:auto}                          /* 幅が足りないときは横スクロール（モバイル） */
.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:4px; min-width:660px}
.cal-wday{text-align:center; font-size:13px; color:var(--text-secondary); padding:2px 0}
.cal-wday.is-sun,.cal-day__num.is-sun{color:var(--danger)}   /* 日曜=赤 */
.cal-wday.is-sat,.cal-day__num.is-sat{color:var(--info)}     /* 土曜=青 */
.cal-day{min-height:98px; display:flex; flex-direction:column; gap:2px; padding:4px;
    background:var(--bg-primary); border:1px solid var(--border-color); border-radius:var(--radius-sm);
    cursor:pointer; min-width:0}
.cal-day:hover{background:var(--bg-hover)}
.cal-day:focus-visible{outline:2px solid var(--accent-strong); outline-offset:-1px}
.cal-day.is-today{border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent)}
.cal-day__head{display:flex; align-items:center; justify-content:space-between; line-height:1.3}
.cal-day__num{font-size:13px; font-weight:600; padding:0 3px}
.cal-day.is-today .cal-day__num{background:var(--accent); color:var(--accent-text); border-radius:999px; min-width:20px; text-align:center}
.cal-day__memo{font-size:12px}
/* 前後月のはみ出しマス（月初の週・月末の週）。背景と日付を薄くして当月と区別する */
.cal-day--out{background:var(--bg-secondary)}
.cal-day--out .cal-day__num{color:var(--text-muted); font-weight:400}
/* 予定の帯。背景色は業種の .bt-xxx（売上グラフと共用）または .due（支払期限） */
.cal-band{display:block; font-size:12px; line-height:1.5; padding:0 6px; border-radius:3px;
    color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cal-band.bt-furniture{color:#332600}                 /* 黄色地だけ黒文字（白では読めないため） */
.cal-band.is-past,.cal-modal__bar.is-past{opacity:.45}  /* 終わった予定（過去の案件）は色を落とす */
.cal-band.due,.cal-legend__chip.due,.cal-modal__bar.due{background:var(--warning)}
.cal-band.due{color:#4a3200; font-weight:600}
.cal-more{font-size:12px; color:var(--text-link)}
/* 凡例 */
.cal-legend{display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:10px; font-size:13px; color:var(--text-secondary)}
.cal-legend__item{display:inline-flex; align-items:center; gap:5px}
.cal-legend__chip{display:inline-block; width:12px; height:12px; border-radius:3px}

/* その日の予定モーダル */
.cal-modal-overlay{position:fixed; inset:0; z-index:100; display:none;
    align-items:flex-start; justify-content:center; padding:60px 16px; background:rgba(0,0,0,.45)}
.cal-modal-overlay.is-open{display:flex}
.cal-modal{width:100%; max-width:540px; max-height:80vh; overflow-y:auto; padding:18px 20px;
    background:var(--bg-primary); border-radius:var(--radius); box-shadow:var(--shadow-md)}
.cal-modal__head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px}
.cal-modal__title{font-size:17px; margin:0}
.cal-modal__close{background:transparent; border:none; font-size:24px; line-height:1; cursor:pointer;
    color:var(--text-secondary); padding:2px 6px; border-radius:var(--radius-sm)}
.cal-modal__close:hover{background:var(--bg-hover)}
/* 予定1件＝1行のリンク。行のどこを押しても案件・請求書へ飛べる */
.cal-modal__item{display:flex; align-items:center; gap:12px; padding:10px 12px; margin-bottom:8px;
    border:1px solid var(--border-color); border-radius:var(--radius-sm); color:inherit}
.cal-modal__item:hover{background:var(--bg-hover); text-decoration:none}
.cal-modal__bar{flex:0 0 5px; align-self:stretch; border-radius:3px}
.cal-modal__body{min-width:0; flex:1 1 auto}
.cal-modal__name{font-weight:600}
.cal-modal__meta{font-size:13px; color:var(--text-secondary)}
.cal-modal__go{flex:0 0 auto; font-size:13px; color:var(--text-link); white-space:nowrap}
/* モーダル内の日報プレビュー（📝のある日は内容をそのまま表示し「編集する」でフォームへ） */
.cal-modal__daily{border:1px solid var(--border-color); border-radius:var(--radius-sm); padding:10px 12px; margin-top:8px}
.cal-modal__daily-head{display:flex; align-items:center; justify-content:space-between; gap:8px}
.cal-modal__daily-title{font-weight:600}
.cal-modal__daily-label{font-size:12px; font-weight:600; color:var(--text-secondary); margin-top:10px}
.cal-modal__daily-text{font-size:14px; white-space:pre-wrap; overflow-wrap:anywhere; margin-top:2px}

/* 送信メッセージテンプレート（ダッシュボード・カレンダーの下）。
   PC=業種タブ（ナビバー風）＋フェーズのサブナビ / SP=業種セグメント＋フェーズ横スクロールチップ。
   旧CMS（Workstation）のダッシュボードから移植したUI。色はれんげのCSS変数に置き換え済み。 */
.msg-tpl__tabs{display:flex; overflow-x:auto; background:var(--accent); border-radius:var(--radius-sm)}
.msg-tpl__tab{padding:12px 22px; border:none; background:transparent; color:rgba(23,59,68,.72);
    font-size:14px; cursor:pointer; white-space:nowrap}
.msg-tpl__tab:hover{color:var(--accent-text)}
.msg-tpl__tab.is-active{background:rgba(255,255,255,.55); color:var(--accent-text); font-weight:600}
.msg-tpl__subnav{display:flex; flex-wrap:wrap; border-bottom:1px solid var(--border-color); margin-top:4px}
.msg-tpl__phase{padding:9px 16px; border:none; background:transparent; color:var(--text-secondary);
    font-size:13px; cursor:pointer; border-bottom:2px solid transparent}
.msg-tpl__phase:hover{color:var(--text-primary)}
.msg-tpl__phase.is-active{color:var(--accent-strong); border-bottom-color:var(--accent-strong); font-weight:600}
.msg-tpl__sp{display:none}   /* SP用のタブはスマホ幅でだけ出す（下のメディアクエリ） */
.msg-tpl__toolbar{display:flex; align-items:center; justify-content:space-between; gap:10px; margin:12px 0 8px}
.msg-tpl__where{font-size:14px; color:var(--text-secondary)}
.msg-tpl__text{width:100%; min-height:320px; padding:12px 14px; box-sizing:border-box;
    border:1px solid var(--border-color); border-radius:var(--radius-sm);
    background:var(--bg-primary); color:var(--text-primary); font-size:15px; line-height:1.7; resize:vertical}
.msg-tpl__text:focus{outline:none; border-color:var(--accent-strong)}
.msg-tpl__note{font-size:12.5px; margin:8px 0 0}
@media (max-width:768px){
    .msg-tpl__tabs,.msg-tpl__subnav{display:none}
    .msg-tpl__sp{display:block}
    .msg-tpl__segment{display:flex; gap:2px; padding:4px; background:var(--bg-secondary); border-radius:8px}
    .msg-tpl__segment-item{flex:1; padding:8px 4px; text-align:center; font-size:12px; border:none; border-radius:6px;
        background:transparent; color:var(--text-secondary); cursor:pointer; transition:all .2s}
    .msg-tpl__segment-item.is-active{background:var(--bg-primary); box-shadow:var(--shadow-sm); color:var(--accent-strong); font-weight:600}
    .msg-tpl__chips{display:flex; gap:8px; overflow-x:auto; padding:10px 0 4px; -webkit-overflow-scrolling:touch}
    .msg-tpl__chip{flex:0 0 auto; padding:7px 14px; border:none; border-radius:999px;
        background:var(--bg-secondary); color:var(--text-secondary); font-size:12.5px; white-space:nowrap; cursor:pointer}
    .msg-tpl__chip.is-active{background:var(--accent); color:var(--accent-text)}
    .msg-tpl__text{min-height:45vh}
}

/* 売上グラフ（?page=sales）。売上=棒（業種別の積み上げ）＋問合せ=折れ線の2系列・ベースライン起点。
   数値はテキスト色（系列色を文字に使わない）。ホバーで濃くなり、詳細はホバーカード（.tipcard）で表示。
   ※ 折れ線SVGの頂点を列の中心に合わせるため、列間は gap ではなく棒の最大幅（track）で空ける。 */
.bar-chart{position:relative; display:flex; align-items:flex-end; padding-top:4px}
.bar-chart__col{position:relative; flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; gap:4px;
    text-decoration:none; border-radius:var(--radius-sm)}
.bar-chart__col:hover{text-decoration:none; background:var(--bg-hover)}
.bar-chart__value{height:13px; font-size:12px; line-height:1; color:var(--text-secondary);
    font-variant-numeric:tabular-nums; white-space:nowrap}
.bar-chart__track{position:relative; display:flex; flex-direction:column; justify-content:flex-end; gap:2px;
    height:150px; width:100%; max-width:38px; padding:0 1px}
/* 業種別の積み上げセグメント。0円の業種は描かれないため、:first-child＝一番上だけ角丸 */
.bar-chart__seg{width:100%; flex:0 0 auto}
.bar-chart__seg:first-child{border-radius:4px 4px 0 0}
.bar-chart__col:hover .bar-chart__seg{filter:brightness(.88)}
/* 業種→色の対応（凡例スウォッチと共用。割当は固定＝絞り込みで色が変わらない） */
/* お墓参り代行とお掃除は 2026-07-18 に色を交換（ユーザー指定）: 代行=青緑 / お掃除=青 */
.bt-grave_visit{background:var(--chart-bt2)}
.bt-grave_cleaning{background:var(--chart-bt1)}
.bt-furniture{background:var(--chart-bt3)}
.bt-relic{background:var(--chart-bt4)}
.bt-other{background:var(--chart-bt5)}
/* 問合せ件数の折れ線（線=グラフ全体に重ねたSVG・点=各列に置く丸）。売上とは別の物差し（件数）なので形で区別する */
.bar-chart__dot{position:absolute; left:50%; bottom:0; transform:translate(-50%,50%); width:7px; height:7px;
    border-radius:50%; background:var(--chart-inquiry); z-index:1;
    box-shadow:0 0 0 2px var(--bg-primary)}   /* 点が売上の棒に重なっても見えるよう縁取り */
.bar-chart__line{position:absolute; left:0; bottom:21px; width:100%; height:150px; pointer-events:none}
    /* ↑ SVGは left/right では伸びないため width:100% を明示。
       bottom = ラベルの高さ17px + 列内の隙間4px。棒の帯（track）とぴったり重なる */
.bar-chart__line polyline{fill:none; stroke:var(--chart-inquiry); stroke-width:2px; stroke-linejoin:round; stroke-linecap:round}
.bar-chart__label{height:17px; font-size:12px; line-height:17px; color:var(--text-muted); white-space:nowrap}
.bar-chart__label.is-sat{color:var(--info)}     /* 土曜=青 */
.bar-chart__label.is-sun{color:var(--danger)}   /* 日曜=赤 */
.bar-chart__col.is-current .bar-chart__label{color:var(--accent-strong); font-weight:700}
/* 日別タブは棒が最大31本並ぶため幅と文字を詰める */
.bar-chart--daily .bar-chart__track{max-width:22px}
.bar-chart--daily .bar-chart__label{font-size:10px}

/* 顧客別売上タブのランキング表: 売上額の横バー（業種色 .bt-* の積み上げ。長さは1位比） */
.rank-cell{width:26%; min-width:160px}
.rank-bar{display:flex; height:14px; border-radius:4px; overflow:hidden; vertical-align:middle}
.rank-bar__seg{height:100%; flex:0 0 auto}

/* グラフのホバーカード（列に重ねて詳細を表示。中のリンクから帳票へ移動できる） */
.tipcard{position:absolute; bottom:calc(100% + 10px); left:50%; transform:translateX(-50%);
    display:block; min-width:216px; padding:10px 12px 9px; text-align:left; cursor:default;
    background:var(--bg-primary); border:1px solid var(--border-color); border-radius:var(--radius);
    box-shadow:var(--shadow-md); z-index:30;
    opacity:0; visibility:hidden; transition:opacity .12s ease}
.bar-chart__col:hover .tipcard,
.bar-chart__col:focus-within .tipcard{opacity:1; visibility:visible}   /* focus-within=カード内リンクへTab移動時 */
/* 棒とカードの隙間（10px）でマウスが外れてカードが消えないようにする透明の橋 */
.tipcard__bridge{position:absolute; top:100%; left:0; right:0; height:12px}
/* カード下の吹き出しの矢印（▼）。before=枠線色 / after=背景色 を1pxずらして重ねる */
.tipcard::before{content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%);
    border:8px solid transparent; border-top-color:var(--border-color)}
.tipcard::after{content:""; position:absolute; top:calc(100% - 1px); left:50%; transform:translateX(-50%);
    border:7px solid transparent; border-top-color:var(--bg-primary)}
/* 端の列は画面からはみ出さないよう左右へ寄せる（矢印は棒の近くへ） */
.tipcard--left{left:-6px; transform:none}
.tipcard--left::before,.tipcard--left::after{left:18px; transform:none}
.tipcard--right{left:auto; right:-6px; transform:none}
.tipcard--right::before{left:auto; right:10px; transform:none}
.tipcard--right::after{left:auto; right:11px; transform:none}
.tipcard__title{display:block; font-size:12px; color:var(--text-secondary); margin-bottom:2px; white-space:nowrap}
.tipcard__total{display:block; font-size:18px; font-weight:700; color:var(--text-primary);
    font-variant-numeric:tabular-nums; margin-bottom:6px; white-space:nowrap}
.tipcard__total small{font-size:12px; font-weight:400; color:var(--text-secondary); margin-left:4px}
.tipcard__row{display:flex; justify-content:space-between; align-items:center; gap:16px;
    font-size:13px; line-height:1.8; white-space:nowrap}
.tipcard__key{color:var(--text-secondary); display:inline-flex; align-items:center; gap:6px}
.tipcard__val{color:var(--text-primary); font-variant-numeric:tabular-nums}
.tipcard__sep{display:block; height:1px; background:var(--border-color); margin:6px 0}
.tipcard__chip{display:inline-block; width:9px; height:9px; border-radius:2px}
/* カード内のリンク（お客様名→案件詳細 / 小リンク→各帳票 / 下端→一覧絞り込み） */
.tipcard__link{color:var(--text-link)}
.tipcard__link:hover{text-decoration:underline}
.tipcard__docs{display:block; margin:-3px 0 3px; font-size:11px; line-height:1.6; color:var(--text-muted)}
.tipcard__docs a{margin-right:10px; color:var(--text-link)}
.tipcard__docs a::before{content:"» "}
.tipcard__docs a:hover{text-decoration:underline}
.tipcard__more{display:block; margin-top:7px; padding-top:6px; border-top:1px dashed var(--border-color);
    font-size:12px; text-align:right; color:var(--text-link)}
.tipcard__more:hover{text-decoration:underline}

/* グラフのタブ切替（日別売上/月別売上/年別売上） */
.chart-tabs{display:flex; gap:4px; border-bottom:2px solid var(--bg-active); margin-bottom:12px}
.chart-tabs__tab{padding:7px 14px; font-size:15px; color:var(--text-secondary);
    border-radius:var(--radius-sm) var(--radius-sm) 0 0}
.chart-tabs__tab:hover{background:var(--bg-hover); text-decoration:none}
.chart-tabs__tab.is-active{background:var(--bg-active); color:var(--accent-strong); font-weight:700}

/* グラフの期間ナビ（◀ 2026年7月 ▶） */
.chart-nav{display:flex; align-items:center; gap:8px; margin-bottom:8px}
.chart-nav__btn{display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px;
    border:1px solid var(--border-color); border-radius:var(--radius-sm); color:var(--text-secondary)}
.chart-nav__btn svg{width:16px; height:16px}
.chart-nav__btn:hover{background:var(--bg-hover); text-decoration:none}
.chart-nav__btn.is-disabled{opacity:.3}
.chart-nav__label{font-size:16px; font-weight:700; min-width:120px; text-align:center}
.chart-nav__sub{font-size:12px; color:var(--text-muted)}   /* 全期間のときの「いつ〜いつ」の控えめな注記 */

/* 売上一覧のヘッダ（期間ナビ＋表示単位の切替。狭い画面では折り返す） */
.list-head{display:flex; justify-content:space-between; align-items:center; gap:8px 16px; flex-wrap:wrap; margin-bottom:10px}
.list-head__modes{display:flex; gap:6px}

/* グラフの凡例（色見本＋系列名） */
.chart-legend{display:flex; flex-wrap:wrap; gap:4px 14px; margin:10px 0 0; font-size:13px; color:var(--text-secondary); align-items:center}
.chart-legend__item{display:inline-flex; align-items:center; gap:6px}
.chart-legend__swatch{display:inline-block; width:12px; height:12px; border-radius:3px}
.chart-legend__swatch--line{position:relative; display:inline-block; width:14px; height:2px; border-radius:0; background:var(--chart-inquiry)}
.chart-legend__swatch--line::after{content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width:7px; height:7px; border-radius:50%; background:var(--chart-inquiry)}

@media (max-width:640px){
    .bar-chart__value{display:none}   /* 狭い画面は数値ラベルを隠す（表・ツールチップで参照） */
    .bar-chart--daily .bar-chart__col:nth-child(even) .bar-chart__label{visibility:hidden}  /* 日別は偶数日のラベルを省く */
}

/* ---------------- ボタン / フォーム ---------------- */
.btn{display:inline-block; padding:9px 18px; border-radius:var(--radius-sm); border:1px solid transparent;
    font-size:16px; cursor:pointer; transition:background .15s ease-out; text-align:center}
.btn:hover{text-decoration:none}
.btn--primary{background:var(--accent); color:var(--accent-text)}
.btn--primary:hover{background:var(--accent-hover); color:var(--accent-text)}
.btn--outline{background:transparent; border-color:var(--border-color); color:var(--text-primary)}
.btn--danger{background:var(--danger); color:#fff}
.btn--block{display:block; width:100%}
.btn--sm{padding:4px 10px; font-size:14px}
/* 送信中・無効化されたボタン（二重送信防止で disabled 付与時） */
.btn:disabled, .btn.is-sending{opacity:.6; cursor:progress; pointer-events:none}

/* 控えめ表示の削除ボタン（誤操作を防ぎたい操作）。
 *  普段は薄く表示して「ここに削除がある」ことは分かるようにし、
 *  親要素([data-hover-actions] or .reveal-danger)にマウスを乗せる/フォーカスすると
 *  はっきり表示される。ホバーできない端末（スマホ）では常に通常表示。 */
@media (hover: hover) {
    .reveal-danger .btn--reveal,
    [data-hover-actions] .btn--reveal{opacity:.4; transition:opacity .12s ease-out}
    .reveal-danger:hover .btn--reveal,
    .reveal-danger:focus-within .btn--reveal,
    [data-hover-actions]:hover .btn--reveal,
    [data-hover-actions]:focus-within .btn--reveal,
    .btn--reveal:focus-visible{opacity:1}
}
/* 操作列（table-actions / nowrap の操作td）を横並びにし、削除など reveal は右端へ寄せる */
[data-hover-actions]{display:flex; gap:6px; align-items:center; flex-wrap:wrap}
[data-hover-actions] .reveal-danger,
[data-hover-actions] > form:last-child,
[data-hover-actions] .btn--reveal{margin-left:auto}

.form-row{margin-bottom:14px}
.form-label{display:block; margin-bottom:5px; font-size:15px; color:var(--text-secondary)}
.form-input{width:100%; padding:9px 11px; border:1px solid var(--border-color); border-radius:var(--radius-sm);
    background:var(--bg-primary); color:var(--text-primary); font-size:16px}
.form-input:focus{border-color:var(--accent-strong); outline:none; box-shadow:0 0 0 2px var(--bg-active)}

/* 識別カラー（カラーピッカー） */
.color-picker{display:flex; align-items:center; gap:10px}
.color-picker__swatch{flex:0 0 auto; width:46px; height:40px; padding:0; cursor:pointer;
    border:1px solid var(--border-color); border-radius:var(--radius-sm); background:var(--bg-primary)}
.color-picker__swatch::-webkit-color-swatch-wrapper{padding:3px}
.color-picker__swatch::-webkit-color-swatch{border:none; border-radius:3px}
.color-picker__swatch::-moz-color-swatch{border:none; border-radius:3px}
.color-picker__hex{flex:1; min-width:0; font-family:"SFMono-Regular",Consolas,monospace}

/* アイコン写真 */
.avatar-field{display:flex; align-items:center; gap:16px}
.avatar-field__controls{flex:1; min-width:0}
.avatar-field__hint{margin:4px 0 0; font-size:13px}
.avatar-field__remove{display:inline-flex; align-items:center; gap:6px; margin-top:8px;
    font-size:14px; color:var(--text-secondary); cursor:pointer}

/* ---------------- アラート ---------------- */
.alert{padding:10px 14px; border-radius:var(--radius); margin:0 0 14px; font-size:15px}
.alert--success{background:rgba(46,160,67,.12); color:var(--success)}
.alert--danger{background:rgba(217,48,37,.12); color:var(--danger)}
.alert--warning{background:rgba(249,171,0,.14); color:#8a6d00}
.alert--info{background:rgba(26,115,232,.12); color:var(--info)}
[data-theme="dark"] .alert--warning{color:var(--warning)}

/* ---------------- 認証（ログイン）画面 ---------------- */
.auth-body{display:flex; align-items:center; justify-content:center; min-height:100vh;
    background:linear-gradient(135deg,var(--accent) 0%,var(--accent-hover) 100%)}
.auth-wrap{width:100%; max-width:380px; padding:20px}
.auth-card{padding:30px 28px}
.auth-brand{font-size:20px; font-weight:700; text-align:center; color:var(--accent-strong)}
.auth-sub{text-align:center; color:var(--text-muted); font-size:14px; margin:4px 0 20px}
.auth-form{margin-top:8px}
.auth-foot{text-align:center; color:rgba(23,59,68,.72); font-size:13px; margin-top:14px}

/* ---------------- 汎用センターボックス（404等） ---------------- */
.centered-box{display:flex; align-items:center; justify-content:center; min-height:100vh; padding:20px}
.centered-box .card{text-align:center; max-width:420px}
.big-status{font-size:56px; margin:0 0 8px; color:var(--accent-strong)}

/* ---------------- ページ先頭へ戻るボタン ----------------
   縦長ページ（報告書作成など）・スマホ用の右下フローティング。表示切替は app.js の initScrollTop */
.scroll-top{position:fixed; right:18px; bottom:18px; z-index:50; width:44px; height:44px; padding:0;
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    border:1px solid var(--border-color); border-radius:50%;
    background:var(--accent); color:var(--accent-text); box-shadow:var(--shadow-md)}
.scroll-top:hover{background:var(--accent-hover)}
.scroll-top svg{width:22px; height:22px; display:block}
.scroll-top[hidden]{display:none}   /* display:flex が hidden 属性に勝たないように */

/* ---------------- レスポンシブ ---------------- */
@media (max-width:768px){
    .hamburger{display:inline-block}
    .scroll-top{right:12px; bottom:12px}
    .app-sidebar{position:fixed; left:0; top:var(--header-height); z-index:25;
        height:calc(100vh - var(--header-height)); overflow-y:auto;
        transform:translateX(-100%); transition:transform .2s ease; box-shadow:var(--shadow-md)}
    .app-sidebar.is-open{transform:translateX(0)}
    .sidebar-overlay{position:fixed; inset:var(--header-height) 0 0 0; background:rgba(0,0,0,.4); z-index:24}
    .sidebar-overlay.is-open{display:block}
    .app-main{padding:16px}
    .dash-cols{grid-template-columns:1fr}
}
/* ---------------- ツールバー / 検索 / 一覧 ---------------- */
.toolbar{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; flex-wrap:wrap}
.toolbar__actions{display:flex; gap:8px; align-items:center}
.filter-bar{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.filter-bar .form-input{width:auto; min-width:240px}
.table-wrap{overflow-x:auto}

/* バッジ */
.badge{display:inline-block; font-size:13px; padding:1px 8px; border-radius:999px;
    background:var(--bg-active); color:var(--accent-strong); border:1px solid var(--border-color)}
.badge--on{background:rgba(46,160,67,.12); color:var(--success); border-color:transparent}
.badge--off{background:rgba(217,48,37,.10); color:var(--danger); border-color:transparent}

/* ページネーション */
.pagination{display:flex; gap:6px; flex-wrap:wrap; margin-top:14px}
.pagination--top{margin:0 0 10px}   /* 一覧の上側に出すページ送り（売上一覧など） */
.pagination__item{display:inline-flex; min-width:32px; height:32px; align-items:center; justify-content:center;
    padding:0 8px; border:1px solid var(--border-color); border-radius:var(--radius-sm); color:var(--text-primary)}
.pagination__item:hover{background:var(--bg-hover); text-decoration:none}
.pagination__item.is-current{background:var(--accent); color:var(--accent-text); border-color:var(--accent)}
.pagination__item.is-gap{border:none; color:var(--text-muted)}   /* 省略記号「…」（Activity Logなどページ数が多い一覧） */

/* ---------------- フォーム（グリッド・操作行・スイッチ） ---------------- */
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:0 16px}
.form-row--full{grid-column:1 / -1}
.form-required{color:var(--danger)}
.form-actions{display:flex; gap:10px; justify-content:flex-end; margin-top:16px; flex-wrap:wrap}
textarea.form-input{resize:vertical; font-family:inherit}
.switch{display:inline-flex; align-items:center; gap:8px; cursor:pointer; font-size:16px}
.switch input{width:18px; height:18px}
.input-with-btn{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.input-with-btn .form-input{flex:1; min-width:200px}

/* 詳細のキー・バリュー表 */
.table--kv th{width:130px; color:var(--text-secondary); font-weight:600; vertical-align:top}
.table--kv td{word-break:break-word}

/* 無効ボタン */
.btn.is-disabled{background:var(--bg-hover); color:var(--text-muted); cursor:default; border-color:var(--border-color)}
.btn.is-disabled:hover{background:var(--bg-hover)}

hr{border:none; border-top:1px solid var(--border-color); margin:12px 0}

@media (max-width:768px){
    .form-grid{grid-template-columns:1fr}
    .toolbar{align-items:stretch}
    .filter-bar .form-input{min-width:0; flex:1}
}

/* ---------------- 見積フォーム 明細 ---------------- */
.est-items-wrap{overflow-x:auto}  /* 2ペインの細い左ペインでも崩れないよう、狭い時は横スクロール */
.est-table{border-collapse:collapse; min-width:560px}
/* 行・列の枠線を常時表示（行を追加しても枠が残る） */
.est-table th,.est-table td{border:1px solid var(--border-color); padding:6px 8px}
.est-table thead th{background:var(--bg-hover)}
.est-table .form-input{width:100%; padding:6px 8px}
/* 項目名・備考は「入力することが前提」の欄なので最低幅を確保し、フォーカス中はさらに広げる
   （2026-07-18 ユーザー要望）。表が左ペインより広くなったときは .est-items-wrap が横スクロール */
.est-table input[name="item_name[]"]{min-width:12em; transition:min-width .12s ease}
.est-table input[name="item_note[]"]{min-width:7em; transition:min-width .12s ease}
.est-table input[name="item_name[]"]:focus{min-width:20em}
.est-table input[name="item_note[]"]:focus{min-width:14em}
.est-table td{vertical-align:middle}
.est-move{display:flex; gap:2px}

/* 数量カスタムドロップダウン（常に下に開く） */
.qtydd{position:relative}
.qtydd__btn{width:100%; text-align:left; cursor:pointer; background:var(--bg-primary);
    color:var(--text-primary); padding:6px 24px 6px 8px; position:relative}
.qtydd__btn::after{content:'▾'; position:absolute; right:8px; top:50%; transform:translateY(-50%);
    color:var(--text-muted); pointer-events:none}
.qtydd__menu{position:absolute; top:calc(100% + 2px); left:0; min-width:100%;
    background:var(--bg-primary); border:1px solid var(--border-color); border-radius:var(--radius-sm);
    box-shadow:var(--shadow-md); z-index:60; max-height:260px; overflow-y:auto; display:none; padding:4px}
.qtydd.is-open .qtydd__menu{display:block}
.qtydd__opt{display:block; width:100%; text-align:left; border:none; background:transparent;
    color:var(--text-primary); padding:7px 12px; border-radius:var(--radius-sm); cursor:pointer;
    font-size:15px; white-space:nowrap}
.qtydd__opt:hover{background:var(--bg-hover)}
.qtydd__opt.is-sel{background:var(--bg-active); color:var(--accent-strong); font-weight:700}
.est-move .btn{padding:2px 6px}
.est-totals{display:flex; flex-direction:column; align-items:flex-end; gap:6px; margin-top:14px; font-size:17px}
.est-totals > div{display:flex; align-items:center; gap:10px}
.est-totals .est-rate{width:70px; padding:4px 6px}
.est-totals .est-grand{font-size:20px; color:var(--accent-strong); border-top:2px solid var(--border-color); padding-top:6px}
.est-totals strong{min-width:120px; text-align:right; font-variant-numeric:tabular-nums}

/* ---------------- ドラッグ並び替え ---------------- */
.drag-cell{width:30px; text-align:center; padding-left:6px; padding-right:6px}
.drag-handle{cursor:grab; color:var(--text-muted); user-select:none; font-size:18px; line-height:1}
tr[draggable]:hover .drag-handle{color:var(--text-secondary)}
tr.dragging{opacity:.45; background:var(--bg-active)}
table[data-sortable] tbody tr{cursor:default}

/* ---------------- トースト ---------------- */
.toast{position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(10px);
    background:var(--text-primary); color:var(--bg-primary); padding:9px 18px; border-radius:999px;
    font-size:15px; box-shadow:var(--shadow-md); opacity:0; transition:opacity .25s ease, transform .25s ease;
    z-index:2000; pointer-events:none}
.toast.is-show{opacity:.96; transform:translateX(-50%) translateY(0)}

.doc-link-list{list-style:none; padding:0; margin:0}
.doc-link-list li{display:flex; align-items:center; gap:10px; padding:6px 0; border-bottom:1px dashed var(--border-color)}
.doc-link-list li:last-child{border-bottom:none}

/* ---------------- 帳票（見積/請求/報告 共通） ---------------- */
.paper{
    background:#fff; color:#1a1a1a; max-width:820px; margin:0 auto; padding:36px 40px;
    box-shadow:var(--shadow-md); border:1px solid var(--border-color); border-radius:var(--radius);
    font-family:var(--font-doc);  /* 帳票は明朝体 */
    -webkit-print-color-adjust:exact; print-color-adjust:exact;  /* 印刷でも背景色・枠色を出す */
}
/* 帳票タイトル: 筆文字のまま控えめに（2026-07-18。32px/太字/字間.3em は大げさに見えるため縮小。
   Yuji Syuku は元々 Regular のみ提供＝太字指定は擬似ボールドだったので、解除で本来の字形になる） */
.doc-title{text-align:center; font-size:28px; letter-spacing:.15em; margin:0 0 24px; font-weight:400; font-family:var(--font-brush)}
/* 報告書は表題とその下（宛名・ロゴ行）が詰まらないよう、上下に余白を確保 */
.report-doc .doc-title{margin:10px 0 42px}
.report-doc .doc-head{margin-bottom:22px}
.doc-head{display:flex; justify-content:space-between; gap:24px; margin-bottom:18px}
.doc-head__left{flex:1}
.doc-recipient{font-size:20px; font-weight:700; border-bottom:2px solid #1a1a1a; display:inline-block; padding-bottom:2px; margin-bottom:6px}
.doc-site{font-size:14px; margin-bottom:4px}
.doc-subject{font-weight:700; font-size:15px; margin-top:6px}  /* 件名（業種）を少し強調 */
.doc-lead{margin:14px 0 8px}
.doc-meta{border-collapse:collapse; font-size:15px}
.doc-meta th,.doc-meta td{border:1px solid #bbb; padding:3px 10px; text-align:left}
.doc-meta th{background:#f3f4f5; white-space:nowrap}
.doc-shop{text-align:left; font-size:15px; line-height:1.8}
.doc-logo{max-width:145px; max-height:54px; width:auto; height:auto; display:block; margin:0 0 8px}
.doc-dates{margin-top:10px; font-size:12px; color:#555; line-height:1.7}
.doc-codenote{margin-top:6px; font-size:12px; color:var(--text-muted)}
.doc-grandbox{display:flex; align-items:center; justify-content:space-between; gap:16px;
    background:#f3f7f8; border:1px solid #cdd9db; border-radius:6px; padding:12px 18px; margin:14px 0 18px}
.doc-grandtotal{font-size:27px; font-weight:700; border-bottom:3px double #1a1a1a; padding-bottom:2px}
.doc-items{width:100%; border-collapse:collapse; font-size:15px}
.doc-items th,.doc-items td{border:1px solid #bbb; padding:7px 10px}
.doc-items thead th{background:#3a6b75; color:#fff; text-align:center}
.doc-items .r{text-align:right; font-variant-numeric:tabular-nums}
.doc-items__desc td:first-child{white-space:pre-wrap}
/* 完全な空行＝表の枠を一切出さない空白行（改ページ位置の微調整用スペーサー） */
.doc-items tr.doc-items__blank td{border:0; background:transparent}
.doc-sum{display:flex; justify-content:flex-end; margin-top:12px}
.doc-sum table{border-collapse:collapse; font-size:16px; min-width:260px}
.doc-sum th,.doc-sum td{border:1px solid #bbb; padding:6px 12px}
.doc-sum th{background:#f3f4f5; text-align:left; width:55%}
.doc-sum .r{text-align:right; font-variant-numeric:tabular-nums}
.doc-sum__total th,.doc-sum__total td{font-size:18px; font-weight:700; background:#eef5f6}
.doc-note{margin-top:18px; border:1px solid #ccc; border-radius:6px; padding:10px 14px; font-size:15px}
.doc-note__label{font-weight:700; margin-bottom:4px; color:#555}

/* ---------------- 報告書: 本文ブロック ---------------- */
.doc-block{margin-top:18px}
.doc-block__label{font-weight:700; color:#3a6b75; border-left:5px solid #3a6b75; padding-left:8px; margin-bottom:6px; font-size:16px}
.doc-block__body{font-size:15px; line-height:1.9; padding:2px 4px}

/* ---------------- 報告書: 帳票の写真 ---------------- */
.doc-photos-group{margin-top:10px}
.doc-photos-group__title{font-weight:700; font-size:14px; color:#555; margin:6px 0 4px}
.doc-photos{display:grid; grid-template-columns:repeat(2, 1fr); gap:12px}
.doc-photo{margin:0; border:1px solid #ccc; border-radius:6px; overflow:hidden; background:#fff}
/* 枠を4:3に統一し cover で枠いっぱい表示＝向きが違っても均一に整列（横長は端を少しトリミング・中央保持）。 */
.doc-photo img{display:block; width:100%; aspect-ratio:4 / 3; object-fit:cover}
/* 縦長写真だけは contain（左右に余白を付けて全体を表示）。枠の4:3は保つので並びは崩れない。 */
.doc-photo--portrait img{object-fit:contain; background:#fff}
.doc-photo figcaption{padding:5px 8px; font-size:13px; color:#333; border-top:1px solid #eee}
/* 報告書: シート（本文／現地写真）。プレビューでは別々の用紙に見せる */
@media screen{ .report-doc + .report-doc{margin-top:28px} }
.doc-sheet-head{display:flex; justify-content:space-between; align-items:baseline; gap:10px;
    font-size:13px; color:#555; border-bottom:1px solid #ddd; padding-bottom:6px; margin-bottom:14px}

/* ---------------- 報告書フォーム: 写真添付（ドラッグ&ドロップ） ---------------- */
.filedrop{border:2px dashed var(--border-color); border-radius:10px; padding:18px; text-align:center; cursor:pointer; transition:border-color .15s, background .15s}
.filedrop:hover{border-color:var(--accent-strong)}
.filedrop.is-drag{border-color:var(--accent-strong); background:var(--bg-hover)}
.filedrop__prompt{display:flex; flex-direction:column; align-items:center; gap:4px; color:var(--text-muted); pointer-events:none}
.filedrop__icon{font-size:28px}
.filedrop__info{margin-top:10px}
.filedrop__count{font-size:14px; margin-bottom:6px}
.filedrop__thumbs{display:flex; flex-wrap:wrap; gap:8px; justify-content:center}
.filedrop__thumb{position:relative}
.filedrop__thumbs img{width:84px; height:84px; object-fit:cover; border-radius:6px; border:1px solid var(--border-color); display:block}
.filedrop__rm{position:absolute; top:-7px; right:-7px; width:20px; height:20px; border-radius:50%;
    border:none; background:var(--danger); color:#fff; font-size:13px; line-height:1; cursor:pointer; padding:0}

/* ---------------- 帳票の2ペイン編集（左フォーム＋右ライブプレビュー）：報告書・見積・請求 共通 ---------------- */
.doc-editor{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px; align-items:start}
.doc-editor__form{min-width:0}
.doc-editor__form .dash-cols{grid-template-columns:1fr}  /* 左ペインは1カラムで見やすく */
/* sticky の高さ上限はヘッダー(60)＋フッター(約49)＋本文余白＋すき間を見込む。下端がフッターに隠れないように。 */
.doc-editor__preview{position:sticky; top:12px; max-height:calc(100vh - 170px); overflow:auto; min-width:0}
.report-preview-note{font-size:13px; color:var(--text-muted); margin-bottom:8px}
@media (max-width:1024px){
    .doc-editor{grid-template-columns:1fr}
    .doc-editor__preview{position:static; max-height:none; overflow:visible}
}

/* ---------------- 画面上のA4ページ：印刷プレビューと同じ「用紙の切れ目」を再現 ----------------
   すべての帳票プレビュー（単体ビュー／2ペインの右プレビュー）で、用紙を A4 実寸 794×1123px(≒210×297mm)・
   余白14mm（印刷の @page margin と一致）で表示する。
   JS(initDocPaging) が [data-doc-src] の元帳票を測って .doc-page（実A4ページ）に流し込み直し、
   ページの切れ目・ページ番号を画面に出す。幅が収まらない時は JS(initDocFit) が zoom で縮小（レイアウト不変）。
   ※ 印刷は画面用ページを隠し、元帳票(.doc-src)をブラウザのネイティブ改ページに任せる（最も正確）。 */
/* 売上フォーム内の帳票プレビュー（見積/請求を縮小して埋め込み表示） */
.sale-doc-preview{border:1px solid var(--border-color); border-radius:var(--radius);
    background:var(--bg-secondary); padding:12px; max-height:520px; overflow:auto}
.sale-doc-preview .paper{zoom:.62; margin:0 auto; box-shadow:var(--shadow-sm)}

.doc-fit{width:794px; margin:0 auto}
/* JS前/失敗時のフォールバック（連続表示）。A4幅・1ページ分の高さは確保し、余白は印刷と同じ14mm。 */
.doc-fit .paper{width:100%; max-width:none; min-height:1123px; margin:0 auto 18px; padding:14mm}
.doc-fit [data-doc-pages]:empty{display:none}

/* 分割済み: 元帳票(測定用)を画面外へ、A4ページ群を表示 */
.doc-fit.is-paged [data-doc-src]{position:absolute; left:-100000px; top:0; width:794px}
.doc-fit.is-paged [data-doc-src] .paper{margin:0}
.doc-page{position:relative; box-sizing:border-box; width:794px; min-height:1123px; padding:14mm;
    background:#fff; border:1px solid var(--border-color); box-shadow:var(--shadow-md);
    margin:0 auto 18px; overflow:hidden}
/* ページ内の .paper は枠線・影・余白を持たない（A4ページ側が用紙の役目）。フォント/子孫セレクタは維持 */
.doc-page > .paper{width:auto; max-width:none; min-height:0; margin:0; padding:0; border:none; box-shadow:none; background:none}
.doc-page__num{position:absolute; right:10px; bottom:5px; font-size:11px; color:var(--text-muted); letter-spacing:.05em}

@media print{
    .doc-fit{width:auto; margin:0}
    [data-doc-fit]{zoom:1 !important}
    [data-doc-pages]{display:none !important}                 /* 画面用A4ページは印刷しない */
    .doc-fit.is-paged [data-doc-src]{position:static; left:auto; width:auto}  /* 印刷は元帳票をネイティブ改ページ */
    .doc-fit .paper{min-height:0; margin:0; padding:0}        /* 余白は @page margin に任せる */
}

/* ---------------- 報告書フォーム: 写真管理 ---------------- */
.form-static{margin:6px 0; padding:6px 0; font-weight:600}
.form-input--sm{padding:4px 6px; font-size:14px}
/* 請求/売上一覧の入金状況セレクト（状態で色分け。変更で即保存） */
.pay-select{font-weight:600}
.pay-select.pay-unpaid{color:#c0392b}
.pay-select.pay-partial{color:#b8860b}
.pay-select.pay-paid{color:#2e7d32}
.pay-select.pay-canceled{color:#78909c}
/* 売上一覧: 入金予定日を過ぎた未入金/一部入金の日付を強調（督促漏れ防止） */
.is-overdue{color:#c0392b; font-weight:700}
/* ステータスの色トーン（案件/見積/報告 共通）。tone-x を付けた要素の文字色。バッジは淡い背景も付く。
   セレクト(.status-sel/.pj-status/.pay-select)にも同じ tone クラスで色が乗る。 */
.tone-lead{color:#546e7a} .tone-quote{color:#1565c0} .tone-active{color:#e67e22}
.tone-post{color:#00838f} .tone-done{color:#2e7d32} .tone-dead{color:#c0392b}
.pj-status,.status-sel{font-weight:600}
.badge.tone-lead{background:#eceff1}
.badge.tone-quote{background:#e3f2fd}
.badge.tone-active{background:#fff3e0}
.badge.tone-post{background:#e0f2f1}
.badge.tone-done{background:#e8f5e9}
.badge.tone-dead{background:#fdecea}

/* 書類番号の凡例（PJ/ES/RP/INV の意味を併記） */
.code-legend{font-size:12.5px; margin:2px 0 12px}
.code-legend b{font-weight:700; color:var(--text-color, inherit)}

/* ---------------- 作業チェックリスト ---------------- */
.check-bar{height:8px; background:var(--bg-hover); border-radius:5px; overflow:hidden; margin:4px 0 14px}
.check-bar__fill{height:100%; background:var(--accent); transition:width .2s}
.check-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px}
.check-item{display:flex; align-items:center; gap:10px; padding:8px 10px; border:1px solid var(--border-color); border-radius:8px; background:var(--bg-card,#fff); flex-wrap:wrap}
.check-item.is-done{background:#f2f8f3; border-color:#cfe6d4}
.check-item__main{display:flex; align-items:center; gap:8px; flex:1 1 220px; min-width:0; cursor:pointer; margin:0}
.check-item__main input{width:18px; height:18px; flex:none; cursor:pointer}
.check-item__label{font-size:15px}
.check-item.is-done .check-item__label{text-decoration:line-through; color:var(--text-muted)}
.check-item__memo{flex:1 1 160px; max-width:240px}
.check-item__by{font-size:12px; white-space:nowrap; flex:0 0 auto}
.check-item__ops{display:flex; gap:3px; flex:0 0 auto}
.check-item__ops form{margin:0}
.check-item__ops .btn{padding:2px 7px}
/* チェック項目の削除×。普段はほぼ見えない薄さにして、行にマウスを乗せると少し浮かび、
 *  ×自体に乗せた時だけ赤くして「押すと削除」だと分かるようにする */
.check-item__del{background:transparent; color:var(--text-muted); opacity:.25; transition:opacity .12s ease-out, background .15s ease-out}
.check-item:hover .check-item__del{opacity:.55}
.check-item__del:hover, .check-item__del:focus-visible{opacity:1; background:var(--danger); color:#fff}
@media (max-width:640px){ .check-item__memo{flex-basis:100%; max-width:none} }
.rep-photos{display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:14px}
.rep-photo{position:relative; border:1px solid var(--border-color); border-radius:8px; padding:8px; display:flex; flex-direction:column; gap:6px; background:var(--bg-card, #fff)}
.rep-photo.dragging{opacity:.45; outline:2px dashed var(--accent-strong)}
.rep-photo__drag{cursor:move; user-select:none; text-align:center; font-size:12px; color:var(--text-muted); letter-spacing:.05em}
/* サムネも4:3枠に cover で統一（帳票の見た目と一致）。縦長のみ contain で全体表示（横に余白）。 */
.rep-photo__img{aspect-ratio:4/3; border-radius:6px; overflow:hidden; cursor:grab; background:var(--bg-hover)}
.rep-photo__img img{display:block; width:100%; height:100%; object-fit:cover}
.rep-photo__img.is-portrait img{object-fit:contain}
.rep-photo__meta{display:flex; flex-direction:column; gap:5px}
.rep-photo__use{display:flex; align-items:center; gap:6px; font-size:14px}
.rep-photo__ops{display:flex; gap:4px; align-items:center}
.rep-photo__ops .btn{padding:2px 8px}

/* ---------------- 写真管理UIのモバイル最適化（画面表示のみ） ----------------
   ※ 帳票本体(.paper/.doc-head/.doc-photos 等)は A4アートボード(.doc-fit)に固定表示し、
      画面幅で崩さず zoom で縮小して印刷と完全一致させるため、ここでは帳票の縦積み等は行わない。 */
@media screen and (max-width:768px){
    /* 採用写真の操作ボタンをタッチしやすく（フォームUI側のみ） */
    .rep-photo__ops .btn{padding:7px 12px}
    .filedrop__thumbs img{width:72px; height:72px}
}

/* ---------------- 印刷（PDF） ---------------- */
@media print{
    .app-header,.app-sidebar,.app-footer,.no-print,.sidebar-overlay,.page-title,.alert,.scroll-top{display:none !important}
    /* 背景色・枠色を画面どおり印刷する（既定では背景が出ないブラウザ対策） */
    .paper, .paper *{-webkit-print-color-adjust:exact !important; print-color-adjust:exact !important}
    body.app-shell{display:block; height:auto; overflow:visible}
    .app-layout{display:block}
    .app-main{padding:0 !important; overflow:visible}
    body{background:#fff}
    .paper{box-shadow:none; border:none; max-width:none; margin:0; padding:0}
    /* 複数ページにまたがる明細：行を分割せず、各ページに見出しを繰り返す */
    .doc-items thead{display:table-header-group}
    .doc-items tr{break-inside:avoid; page-break-inside:avoid}
    .doc-grandbox, .doc-sum, .doc-note{break-inside:avoid; page-break-inside:avoid}
    /* 報告書: 写真1枚・本文ブロックはページ途中で割れないように（区分内は詰める） */
    .doc-photo, .doc-block{break-inside:avoid; page-break-inside:avoid}
    /* 各シート（本文 / 現地写真＝区分ごと）は必ず新しいページから開始 */
    .doc-sheet{break-before:page; page-break-before:always}
    /* 見出しが行末で孤立しないよう、直後の内容とくっつける */
    .doc-sheet-head, .doc-sheet .doc-block__label{break-after:avoid; page-break-after:avoid}
    .doc-photo img{max-height:120mm}
    @page{margin:14mm}
}

@media (prefers-reduced-motion:reduce){
    *{animation:none !important; transition:none !important}
}