/* ============================================================================
   RENTALink モックアップ 追加コンポーネントCSS（portal.css を上位継承）
   modal / toast / 6-26要確認A/B / tabs / エリアマトリクス / サイン枠 など
   ============================================================================ */

/* ---- トップバー ツール ---- */
.rl-demo{font-size:9px;font-weight:bold;letter-spacing:1px;color:#fff;background:var(--ihin);border-radius:9px;padding:1px 7px;}
.rl-link{cursor:pointer;color:var(--sub);font-size:12px;font-weight:bold;}
.rl-link:hover{color:var(--accent);}

/* ---- toast ---- */
#rl-toast{position:fixed;right:18px;bottom:18px;z-index:200;display:flex;flex-direction:column;gap:8px;}
.rl-t{background:var(--ink);color:#fff;font-size:12.5px;font-weight:bold;padding:10px 16px;border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.25);opacity:0;transform:translateY(8px);transition:.25s;max-width:340px;line-height:1.5;}
.rl-t.show{opacity:1;transform:translateY(0);}
.rl-t-ok{background:var(--ok);} .rl-t-warn{background:var(--warn);} .rl-t-ng{background:var(--danger);}

/* ---- modal ---- */
.rl-modal-back{position:fixed;inset:0;background:rgba(16,28,42,.46);z-index:150;display:flex;align-items:flex-start;justify-content:center;padding:6vh 16px;overflow:auto;}
.rl-modal{background:#fff;border-radius:12px;width:100%;box-shadow:0 24px 70px rgba(0,0,0,.34);overflow:hidden;animation:rlpop .14s ease-out;}
@keyframes rlpop{from{transform:translateY(-10px) scale(.99);opacity:.4;}to{transform:none;opacity:1;}}
.rl-modal-hd{padding:13px 18px;border-bottom:1px solid var(--line);font-weight:bold;color:var(--accent);font-size:14.5px;display:flex;justify-content:space-between;align-items:center;}
.rl-modal-x{cursor:pointer;color:var(--sub);font-size:13px;}.rl-modal-x:hover{color:var(--danger);}
.rl-modal-bd{padding:16px 18px;font-size:12.5px;line-height:1.65;max-height:64vh;overflow:auto;}
.rl-modal-ft{padding:11px 18px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:9px;background:#fafcfe;}

/* ---- 6/26 要確認 A/B トグル ---- */
.review626{border:1px solid #e6b9b1;background:#fdf5f3;border-radius:9px;padding:11px 13px;margin:12px 0;}
.review626 .r626-hd{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:9px;}
.review626 .r626-tag{font-size:9.5px;font-weight:bold;color:#fff;background:var(--danger);border-radius:9px;padding:1px 9px;letter-spacing:.5px;}
.review626 .r626-ttl{font-size:12.5px;font-weight:bold;color:var(--danger);}
.review626 .r626-sw{display:inline-flex;border:1px solid var(--danger);border-radius:8px;overflow:hidden;margin-left:auto;}
.review626 .r626-sw [data-opt]{font-size:11px;font-weight:bold;padding:4px 12px;cursor:pointer;color:var(--danger);background:#fff;border:none;}
.review626 .r626-sw [data-opt].on{background:var(--danger);color:#fff;}
.review626 .r626-pane{background:#fff;border:1px dashed #e6b9b1;border-radius:7px;padding:10px 12px;font-size:12px;line-height:1.6;}
.review626 .r626-note{font-size:10.5px;color:var(--sub);margin-top:7px;}

/* 軽い「6/26要確認」注記（A/Bトグルではない残り保留項目） */
.note626{border-left:3px solid var(--danger);background:#fdf5f3;border-radius:0 7px 7px 0;padding:7px 11px;font-size:11px;color:#8a3a30;margin:9px 0;}
.note626 b{color:var(--danger);}

/* 次フェーズ（F2/F3）タグ */
.ph-tag{display:inline-block;font-size:9px;font-weight:bold;border-radius:8px;padding:0 7px;margin-left:5px;vertical-align:1px;border:1px solid var(--sub);color:var(--sub);background:#f1f4f7;}
.ph-tag.f2{border-color:var(--accent2);color:var(--accent2);background:#eafaf8;}
.ph-tag.f3{border-color:var(--ihin);color:var(--ihin);background:#f3f0fa;}

/* ---- タブ ---- */
.tabs{display:flex;gap:4px;border-bottom:2px solid var(--line);margin-bottom:13px;}
.tabs .tab{font-size:12.5px;font-weight:bold;color:var(--sub);padding:8px 15px;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;}
.tabs .tab.on{color:var(--accent);border-bottom-color:var(--accent);}
.tabpane{display:none;} .tabpane.on{display:block;}

/* ---- エリアマトリクス（S30） ---- */
.amx{width:100%;border-collapse:collapse;font-size:11.5px;}
.amx th,.amx td{border:1px solid var(--line);padding:6px 9px;text-align:center;}
.amx th{background:#eef3f8;color:var(--accent);}
.amx td.area{text-align:left;font-weight:bold;background:#f7fafc;}
.amx .hot{background:#fdece6;}
.amx .cnt{font-weight:bold;}
.amx .veh{font-size:10px;color:var(--danger);font-weight:bold;}

/* ---- サイン枠（S31） ---- */
.signbox{border:2px dashed var(--accent2);border-radius:8px;height:120px;display:flex;align-items:center;justify-content:center;color:var(--sub);font-size:12px;background:repeating-linear-gradient(#fff,#fff 26px,#f0f5f9 27px);cursor:crosshair;}
.signbox.signed{border-style:solid;border-color:var(--ok);color:var(--ok);font-weight:bold;background:#f3fbf6;}

/* ---- ドリルダウン行 ---- */
.drill{cursor:pointer;} .drill:hover td{background:#eef4fb;}
.drill .caret{color:var(--accent2);font-weight:bold;}

/* ---- KPI delta neutral ---- */
.card .delta.flat{color:var(--sub);}

/* ---- 個品状態の色点 ---- */
.sdot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px;vertical-align:0;}
.sd-rent{background:var(--accent);}.sd-wh{background:var(--warn);}.sd-ret{background:#9a86c4;}.sd-mnt{background:var(--accent2);}.sd-dmg{background:var(--danger);}.sd-sold{background:var(--ok);}

/* ---- 汎用：小見出し ---- */
.subhd{font-size:12.5px;font-weight:bold;color:var(--accent);margin:14px 0 6px;border-left:3px solid var(--accent2);padding-left:8px;}

/* ---- ステップ進行（受注フロー可視化） ---- */
.steps{display:flex;gap:0;flex-wrap:wrap;margin:6px 0 14px;}
.steps .st{flex:1;min-width:96px;text-align:center;font-size:10.5px;font-weight:bold;color:var(--sub);position:relative;padding:7px 4px;background:#f1f4f7;border-right:2px solid #fff;}
.steps .st.done{background:#e3f2e9;color:var(--ok);}
.steps .st.on{background:var(--accent);color:#fff;}
.steps .st small{display:block;font-size:9px;font-weight:normal;opacity:.85;margin-top:2px;}

/* ============================================================================
   v2 デザインリフレッシュ ─ 本番水準UI/UX（レスポンシブ＋マイクロインタラクション）
   portal.css を上位継承し、全画面へ一括適用。
   ============================================================================ */

/* ---- 1. なめらかな相互作用（マイクロインタラクション） ---- */
a,.btn,.tile,.card,.copt,.fs,.tab,summary,.side nav a,.navtree a,.navtree summary,
.badge,.chip,select.inp,input.inp,textarea.inp,.kpi,th{transition:background-color .16s ease,color .16s ease,box-shadow .18s ease,transform .14s ease,border-color .16s ease,opacity .16s ease;}
.btn{will-change:transform;}
.btn:hover{filter:brightness(1.05);box-shadow:0 4px 14px rgba(31,78,121,.22);transform:translateY(-1px);}
.btn:active{transform:translateY(0) scale(.99);box-shadow:0 1px 4px rgba(31,78,121,.18);}
.btn.ghost:hover{background:var(--soft);}
.card{transition:box-shadow .2s ease,transform .16s ease,border-color .16s ease;}
.panel{transition:box-shadow .2s ease;}
.panel:hover{box-shadow:0 6px 22px rgba(20,40,64,.07);}
tr:hover td{transition:background-color .12s;}
.more,.rl-link,.combo .copt{cursor:pointer;}
.more:hover{text-decoration:underline;}

/* フォーカスリング（キーボード操作のアフォーダンス） */
:focus-visible{outline:2px solid var(--accent2);outline-offset:2px;border-radius:4px;}
.btn:focus-visible{outline-offset:3px;}
input.inp:focus,select.inp:focus,textarea.inp:focus{outline:none;border-color:var(--accent2);box-shadow:0 0 0 3px rgba(14,124,123,.14);}

/* ナビ：アクティブ左インジケータをアニメ化 */
.navtree a{position:relative;border-radius:0 7px 7px 0;}
.navtree a::before{content:"";position:absolute;left:0;top:7px;bottom:7px;width:3px;border-radius:2px;background:var(--accent2);transform:scaleY(0);transform-origin:center;transition:transform .18s ease;}
.navtree a.on::before{transform:scaleY(1);}
.navtree a:hover{background:rgba(255,255,255,.07);}
.navtree a.on{border-left-color:transparent;}

/* KPIカードの値をカウントアップ風に（ロード時フェード） */
.card.kpi .val{letter-spacing:-.3px;}

/* ページ本文のロードフェード */
.content{animation:rlfade .28s ease both;}
@keyframes rlfade{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}

/* スクロールバー（細身・洗練） */
*{scrollbar-width:thin;scrollbar-color:#c3ccd5 transparent;}
*::-webkit-scrollbar{width:9px;height:9px;}
*::-webkit-scrollbar-thumb{background:#c8d0d9;border-radius:6px;border:2px solid transparent;background-clip:content-box;}
*::-webkit-scrollbar-thumb:hover{background:#a9b4bf;background-clip:content-box;}

/* ---- 2. 本番ビュー：設計用バッジ（FR/TERM/v記号）を主操作面から隠す ---- */
body.prod .v2badge,body.prod .v2b,body.prod .newbadge{display:none!important;}
/* .help（フィールド微注記）は本番では控えめに（淡色・小） */
body.prod .help{color:#8a96a2;font-size:10px;}

/* ---- 3. ページ下部「補足・注記」アコーディオン（app.js が自動集約） ---- */
.page-notes{margin-top:22px;border:1px solid var(--line);border-radius:10px;background:#fbfcfe;overflow:hidden;}
.page-notes>summary{list-style:none;cursor:pointer;padding:11px 16px;font-size:12px;font-weight:bold;color:var(--sub);display:flex;align-items:center;gap:8px;user-select:none;}
.page-notes>summary::-webkit-details-marker{display:none;}
.page-notes>summary::after{content:"▾";margin-left:auto;transition:transform .2s;font-size:10px;opacity:.7;}
.page-notes[open]>summary::after{transform:rotate(180deg);}
.page-notes>summary:hover{background:var(--soft);color:var(--accent);}
.page-notes .pn-body{padding:4px 16px 16px;display:grid;gap:9px;}
.page-notes .pn-body>*{margin:0!important;}
.page-notes .pn-i{font-size:11px;color:var(--accent2);border:1px solid var(--accent2);border-radius:50%;width:16px;height:16px;display:inline-flex;align-items:center;justify-content:center;font-weight:bold;}

/* ---- 4. ツールチップ（ⓘ：操作のアフォーダンスを文章でなく記号で） ---- */
.tip{position:relative;display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;border:1px solid var(--sub);color:var(--sub);font-size:10px;font-weight:bold;cursor:help;margin-left:5px;vertical-align:1px;}
.tip:hover{border-color:var(--accent2);color:var(--accent2);}
.tip[data-tip]:hover::after{content:attr(data-tip);position:absolute;bottom:135%;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;font-size:11px;font-weight:normal;line-height:1.5;padding:7px 10px;border-radius:7px;width:max-content;max-width:240px;white-space:normal;z-index:60;box-shadow:0 8px 24px rgba(0,0,0,.25);}
.tip[data-tip]:hover::before{content:"";position:absolute;bottom:135%;left:50%;transform:translate(-50%,90%);border:5px solid transparent;border-top-color:var(--ink);z-index:60;}

/* ---- 5. レスポンシブ：モバイル ドロワーナビ＋スタック ---- */
.navtoggle{display:none;align-items:center;justify-content:center;width:34px;height:34px;border-radius:8px;border:1px solid var(--line);background:#fff;color:var(--accent);font-size:17px;cursor:pointer;margin-right:6px;}
.nav-scrim{position:fixed;inset:0;background:rgba(16,28,42,.45);opacity:0;visibility:hidden;transition:opacity .25s;z-index:115;}
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
/* コンボを含む表ラッパは横スクロールを無効化＝類似プルダウン（絶対配置）のクリップ防止 */
.tbl-wrap:has(.combo){overflow:visible;}
/* コンボを含むセルは最小幅を確保＝物件・住所などの長文が縦折れしないように */
.lines td:has(.combo){min-width:168px;}

@media (max-width:1024px){
  .cards.k4{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:900px){
  .app{grid-template-columns:1fr;}
  .side{position:fixed;top:0;left:0;bottom:0;width:248px;max-width:84vw;transform:translateX(-100%);transition:transform .26s cubic-bezier(.4,0,.2,1);z-index:120;box-shadow:8px 0 30px rgba(0,0,0,.18);overflow-y:auto;}
  .app.nav-open .side{transform:none;}
  .app.nav-open .nav-scrim{opacity:1;visibility:visible;}
  .navtoggle{display:inline-flex;}
  .top{position:sticky;top:0;z-index:80;}
  .top .crumb b{font-size:14px;}
  .top .qsearch{display:none;}
  .content{padding:14px 12px 28px;}
  .pagehd{flex-direction:column;align-items:flex-start;gap:3px;}
  .cards.k3,.cards.k2{grid-template-columns:1fr;}
  .cards.k3 .card[style*="span 2"]{grid-column:auto!important;}
  .row{gap:8px;}
  /* 横長テーブルは横スクロール（.tbl-wrap は app.js が自動付与） */
  .tbl-wrap table{min-width:560px;}
  .form-row{grid-template-columns:1fr;gap:4px;}
  .rl-modal{max-width:96vw!important;}
}
@media (max-width:560px){
  .cards.k4{grid-template-columns:1fr;}
  .top .right .u span:not(.avatar){display:none;}
  .pagehd h1{font-size:16px;}
  #rl-tools .rl-demo{display:none;}
}

/* タッチ操作の最小ターゲット確保 */
@media (hover:none){
  .btn,.tile,.navtree a,.tab,.copt{min-height:38px;}
}

/* ===== ヘッダ常時表示のクイック操作 ===== */
.top{justify-content:flex-start;flex-wrap:wrap;gap:8px 12px;}
.top .right{margin-left:auto;}
.rl-quick{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.rl-quick .btn{white-space:nowrap;}
@media(max-width:900px){ .rl-quick{order:3;width:100%;border-top:1px solid var(--line);padding-top:7px;} }

/* 印刷時は管理UIを隠す（帳票側で別途@media print） */
@media print{ #rl-toast,.rl-modal-back,#rl-tools,#rl-quick,.navtoggle,.nav-scrim,.page-notes{display:none!important;} }