/* ============================================================
   イチカン(ichikan)共通スタイル v0.3(2026-07-17 UI総点検)
   正: docs/design/システムUIモック_v0.2.html + docs/design/ui-audit-20260717.md
   原則は不変 — 操作=青1色 / 緑=完了 / 赤=要対応 / 黄=注意。色は意味にのみ使う。
   v0.3の方針: v0.2の見た目は維持したまま「違和感」を根治する —
     ①Bootstrapの.card(display:flex)衝突の解消 ②リンク下線はhover時のみ
     ③番号・ピルナビの折返し禁止 ④フォーカスリング統一 ⑤絵文字→SVGアイコン。
   クラス名はv0.1と完全互換(既存Bladeを壊さない)。
   ============================================================ */
:root{
  --brand:#1C63D5; --brand-dark:#1451B4; --brand-tint:#EAF1FC; --brand-soft:#C9DBF6;
  --ink:#1F2937; --sub:#64748B; --faint:#94A3B8;
  --line:#E4E9F0; --line-strong:#D6DDE7; --paper:#F6F8FA; --card:#FFFFFF;
  --ok:#178A50; --ok-bg:#E7F5EC;
  --danger:#D23B3B; --danger-bg:#FCEBEB; --danger-row:#FDF4F4;
  --warn:#B45309; --warn-bg:#FDF3E3;
  --chrome:#17181B; --chrome-sub:#9CA3AF;
  --shadow-sm:0 1px 2px rgba(15,23,42,.05);
  --shadow-md:0 1px 2px rgba(15,23,42,.05), 0 4px 12px -2px rgba(15,23,42,.06);
  --radius:12px;
}

body{
  font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Noto Sans JP",sans-serif;
  background:var(--paper); color:var(--ink); font-size:14px;
  -webkit-font-smoothing:antialiased;
}
.num{font-variant-numeric:tabular-nums;}
/* リンクの既定は下線なし・本文中のリンク(表・定義リスト・履歴)だけhoverで下線(v0.3) */
a{color:var(--brand); text-decoration:none;}
td a:hover, dd a:hover, .note-body a:hover, .card p a:hover{text-decoration:underline;}
/* キーボード操作のフォーカスを全要素で見えるように(v0.3) */
:focus-visible{outline:2px solid var(--brand); outline-offset:2px; border-radius:4px;}
.form-control:focus-visible, .form-select:focus-visible{outline:none;}

/* ===== アイコン(SVGスプライト・partials/icon) ===== */
.ik-icon{width:16px; height:16px; flex-shrink:0; vertical-align:-2px;}

/* ===== アプリシェル ===== */
.shell{display:flex; min-height:100vh;}
.sidebar{
  width:224px; background:var(--card); border-right:1px solid var(--line);
  padding:14px 12px; flex-shrink:0;
}
.side-inner{display:flex; flex-direction:column; min-height:100%;}
.tenant-box{
  display:flex; align-items:center; gap:10px;
  padding:8px 10px 14px; border-bottom:1px solid var(--line); margin-bottom:10px;
}
.tenant-avatar{
  width:34px; height:34px; border-radius:9px; flex-shrink:0;
  background:linear-gradient(135deg, var(--brand) 0%, #3D7BE0 100%);
  color:#fff; font-weight:700; font-size:15px;
  display:flex; align-items:center; justify-content:center;
}
.tenant-box .t-name{font-weight:700; font-size:13.5px; line-height:1.3;}
.tenant-box .t-user{color:var(--sub); font-size:11px; margin-top:2px;}

.ik-nav{flex:1;}
.ik-nav a{
  display:flex; align-items:center; gap:10px;
  padding:8px 10px; border-radius:9px; color:var(--ink);
  text-decoration:none; font-size:13.5px; margin-bottom:1px;
  transition:background .12s;
}
.ik-nav a:hover{background:var(--paper);}
.ik-nav a.active{background:var(--brand-tint); color:var(--brand); font-weight:700;}
.ik-nav a.active .nav-ic{color:var(--brand) !important;}
.ik-nav .nav-ic{display:inline-flex; color:var(--faint);}
.ik-nav .dot{width:7px; height:7px; border-radius:50%; flex-shrink:0;}
.ik-nav .sec{
  color:var(--faint); font-size:10px; font-weight:600; letter-spacing:.14em;
  padding:16px 10px 6px;
}
.ik-nav .nav-badge{
  margin-left:auto; background:var(--danger); color:#fff; border-radius:99px;
  font-size:10.5px; font-weight:700; padding:1px 7px; line-height:1.5;
}

.logout-form{padding:10px 10px; border-top:1px solid var(--line); margin-top:10px;}
.logout-btn{
  background:none; border:none; color:var(--sub); font-size:12.5px; cursor:pointer; padding:0;
  font-family:inherit;
}
.logout-btn:hover{color:var(--ink);}

.main{flex:1; min-width:0; padding:22px 28px 40px; max-width:1160px; width:100%;} /* min-width:0 — 横に長い表(勤怠一覧)で flex 子が広がらず、表の側で横スクロールさせる(2026-09-11) */
.page-head{display:flex; align-items:center; gap:14px; margin-bottom:18px; flex-wrap:wrap;}
.page-head h1{font-size:19px; font-weight:700; letter-spacing:-.01em; margin:0;}
.page-head .actions{margin-left:auto; display:flex; gap:8px; flex-wrap:wrap;}
.page-head .actions .btn{white-space:nowrap;} /* ボタン文言の途中折返し禁止(v0.3) */
.page-head .page-date{color:var(--sub); font-size:12.5px;}

/* ===== モバイル ===== */
.topbar{
  display:none; background:var(--card); border-bottom:1px solid var(--line);
  height:52px; align-items:center; gap:12px; padding:0 14px;
  position:sticky; top:0; z-index:40;
}
.topbar .topbar-title{font-weight:700; font-size:15px;}
.btn-hamburger{
  background:none; border:1px solid var(--line); border-radius:9px;
  font-size:16px; padding:5px 11px; cursor:pointer; color:var(--ink);
}
@media (max-width: 991.98px){
  .topbar{display:flex;}
  .main{padding:16px 14px 32px;}
}

/* ===== ボタン(操作は青1色) ===== */
.btn{font-weight:600; font-size:13px; border-radius:9px;}
.btn-primary{--bs-btn-bg:var(--brand); --bs-btn-border-color:var(--brand);
  --bs-btn-hover-bg:var(--brand-dark); --bs-btn-hover-border-color:var(--brand-dark);
  --bs-btn-active-bg:var(--brand-dark); --bs-btn-active-border-color:var(--brand-dark);
  box-shadow:0 1px 2px rgba(28,99,213,.25);}
.btn-ghost{background:var(--card); color:var(--ink); border:1px solid var(--line-strong);}
.btn-ghost:hover{border-color:var(--faint); background:var(--card); color:var(--ink);}

/* ===== カード ===== */
.card{
  display:block; /* Bootstrapの.card(display:flex column)を打ち消す。放置するとカード内の
                    インライン要素がブロック化されて全幅に伸びる(未提出者チップで実発生・v0.3) */
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px 18px; box-shadow:var(--shadow-sm);
}
.card h2{font-size:14px; font-weight:700; margin-bottom:14px; letter-spacing:.005em;}
.card h2 .sub{color:var(--sub); font-weight:400; font-size:11.5px; margin-left:8px;}

.kpi-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:16px;}
@media (max-width: 991.98px){ .kpi-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width: 575.98px){ .kpi-grid{grid-template-columns:1fr;} }
/* KPIカードは行の高さいっぱいに揃える(k-noteが短い/長いで縦の高さがバラつくのを防ぐ・2026-07-11) */
.kpi-grid > .card{height:100%;}
.kpi .k-label{color:var(--sub); font-size:12px; margin-bottom:8px;}
.kpi .k-value{font-size:25px; font-weight:700; letter-spacing:-.02em; line-height:1.15;}
.kpi .k-note{font-size:11.5px; color:var(--sub); margin-top:7px;}
.kpi.alert{border-color:#F0C4C4; background:#FFFDFD;}
.kpi.alert .k-value{color:var(--danger);}
.kpi.alert .k-label{color:var(--danger); font-weight:700;}
.kpi .k-unit{font-size:14px; font-weight:600; color:var(--sub); margin-left:2px;}

/* ===== ダッシュボード ===== */
.two-col{display:grid; grid-template-columns:1.6fr 1fr; gap:14px;}
@media (max-width: 991.98px){ .two-col{grid-template-columns:1fr;} }
.dash-stack{display:flex; flex-direction:column; gap:14px;}
.chart-box{position:relative; height:190px;}
.chart-legend{display:flex; gap:16px; margin-top:12px; font-size:11.5px; color:var(--sub);}
.chart-legend i{display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:5px; vertical-align:-1px;}
.chips{display:flex; flex-wrap:wrap; gap:8px;}
.chip{
  background:var(--paper); border:1px solid var(--line-strong); border-radius:99px;
  padding:6px 13px; font-size:12.5px; color:var(--ink); text-decoration:none;
  transition:border-color .12s;
}
.chip:hover{border-color:var(--faint); color:var(--ink);}
.chip b{margin-left:5px;}
.chip-active{border-color:var(--brand-soft); background:var(--brand-tint); color:var(--brand-dark);}
.od-list{list-style:none; margin:0; padding:0;}
.od-list li{
  display:flex; align-items:center; gap:10px;
  padding:11px 4px; border-bottom:1px solid var(--line); font-size:13px;
}
.od-list li:last-child{border-bottom:none;}
.od-list .days{color:var(--danger); font-weight:700; font-size:12px; width:64px; flex-shrink:0;}
.od-list .od-link{color:var(--ink); text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.od-list .od-link:hover{color:var(--brand);}
.od-list .amt{margin-left:auto; font-weight:700;}
.card .more{display:block; text-align:right; font-size:12px; color:var(--brand); text-decoration:none; margin-top:10px;}
.dash-empty{color:var(--sub); font-size:12.5px; margin:0;}

/* はじめにチェックリスト(オンボーディング・Phase 9) */
.onboard{border-color:var(--brand-soft); background:linear-gradient(180deg, #FBFDFF 0%, #FFFFFF 100%); margin-bottom:16px;}
.onboard .ob-head{display:flex; align-items:center; gap:10px; margin-bottom:4px;}
.onboard h2{margin-bottom:2px;}
.onboard .ob-progress{font-size:11.5px; color:var(--sub);}
.onboard .ob-close{margin-left:auto; background:none; border:none; color:var(--faint); font-size:12px; cursor:pointer;}
.onboard .ob-close:hover{color:var(--sub);}
.ob-steps{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:10px;}
@media (max-width: 991.98px){ .ob-steps{grid-template-columns:1fr;} }
.ob-step{
  display:flex; align-items:center; gap:9px; text-decoration:none;
  border:1px solid var(--line); border-radius:10px; padding:9px 12px;
  color:var(--ink); font-size:12.5px; background:var(--card);
}
.ob-step:hover{border-color:var(--brand-soft); color:var(--ink);}
.ob-step .ob-check{
  width:18px; height:18px; border-radius:50%; flex-shrink:0;
  border:1.5px solid var(--line-strong); display:flex; align-items:center; justify-content:center;
  font-size:11px; color:#fff;
}
.ob-step.done{color:var(--sub); text-decoration:none; background:var(--paper);}
.ob-step.done .ob-check{background:var(--ok); border-color:var(--ok);}

/* ===== テーブル ===== */
.table-ik{
  width:100%; border-collapse:separate; border-spacing:0;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow-sm);
}
.table-ik thead th{
  text-align:left; font-size:11px; color:var(--sub); font-weight:600; letter-spacing:.03em;
  padding:10px 14px; background:#F8FAFC; border-bottom:1px solid var(--line);
}
.table-ik tbody td{padding:12px 14px; border-bottom:1px solid var(--line); font-size:13px; background:var(--card);}
.table-ik tbody tr:last-child td{border-bottom:none;}
.table-ik tbody tr:hover td{background:#F8FBFF;}
/* 書類番号・日付・金額は途中で折り返さない(狭い幅でI2026-/0020と割れるのを防ぐ・v0.3) */
.table-ik .num{white-space:nowrap;}
.table-wrap{overflow-x:auto;}

/* ===== バッジ(状態色) ===== */
.badge-ik{display:inline-block; border-radius:6px; padding:3.5px 9px; font-size:11.5px; font-weight:700; line-height:1.5;}
.b-muted{background:var(--paper); color:var(--sub); border:1px solid var(--line-strong);}
.b-brand{background:var(--brand-tint); color:var(--brand-dark);}
.b-ok{background:var(--ok-bg); color:var(--ok);}
.b-warn{background:var(--warn-bg); color:var(--warn);}
.b-danger{background:var(--danger-bg); color:var(--danger);}

/* ===== 空状態(Phase 9) ===== */
.empty-state{
  text-align:center; padding:44px 24px; color:var(--sub);
}
.empty-state .es-icon{
  width:52px; height:52px; border-radius:14px; margin:0 auto 12px;
  background:var(--brand-tint); color:var(--brand);
  display:flex; align-items:center; justify-content:center;
}
.empty-state .es-icon .ik-icon{width:24px; height:24px;}
.empty-state .es-title{font-size:14.5px; font-weight:700; color:var(--ink); margin-bottom:5px;}
.empty-state .es-desc{font-size:12.5px; line-height:1.9; margin-bottom:14px;}
.empty-state .es-actions{display:flex; gap:8px; justify-content:center; flex-wrap:wrap;}

/* ===== フォーム ===== */
.form-label{font-size:12px; color:var(--sub); font-weight:600; margin-bottom:6px;}
.form-control,.form-select{
  border:1px solid var(--line-strong); border-radius:9px; font-size:14px; color:var(--ink);
}
.form-control:focus,.form-select:focus{
  border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft);
}
.form-text{font-size:11.5px; color:var(--faint);}
.img-preview{
  max-height:64px; max-width:160px; border:1px solid var(--line);
  border-radius:9px; padding:4px; background:#fff;
}

/* ===== 初期ログイン情報カード ===== */
.cred-card{
  background:var(--warn-bg); border:1px solid #EAD8B0; border-radius:var(--radius);
  padding:14px 18px; margin-bottom:16px; font-size:13px;
}
.cred-card b{display:block; color:var(--warn); margin-bottom:8px; font-size:12.5px;}
.cred-card code{
  background:#fff; border:1px solid var(--line); border-radius:6px;
  padding:2px 8px; font-size:13px; color:var(--ink);
}

/* ===== ゲスト(ログイン)画面 ===== */
.auth-stage{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:24px; flex-direction:column; gap:20px;
  position:relative; overflow:hidden;
  background:
    radial-gradient(circle at 12% 18%, rgba(28,99,213,.08) 1px, transparent 1.2px) 0 0/26px 26px,
    radial-gradient(640px 320px at 50% -80px, rgba(28,99,213,.10), transparent 70%),
    var(--paper);
}
/* 動的背景(Phase 9): ゆっくり漂うブロブ。reduced-motionでは停止 */
.auth-stage::before, .auth-stage::after{
  content:""; position:absolute; border-radius:50%; filter:blur(72px); z-index:0; pointer-events:none;
}
.auth-stage::before{
  width:440px; height:440px; top:-160px; left:calc(50% - 430px); opacity:.5;
  background:radial-gradient(circle at 35% 35%, #BFD5F8, transparent 70%);
  animation:authBlobA 26s ease-in-out infinite alternate;
}
.auth-stage::after{
  width:380px; height:380px; bottom:-140px; right:calc(50% - 420px); opacity:.55;
  background:radial-gradient(circle at 55% 45%, #DFEAFC, transparent 70%);
  animation:authBlobB 32s ease-in-out infinite alternate;
}
@keyframes authBlobA{from{transform:translate(0,0) scale(1);} to{transform:translate(55px,45px) scale(1.1);}}
@keyframes authBlobB{from{transform:translate(0,0) scale(1.04);} to{transform:translate(-45px,-55px) scale(.96);}}
@media (prefers-reduced-motion: reduce){
  .auth-stage::before, .auth-stage::after{animation:none;}
}
.auth-wordmark{font-weight:700; font-size:24px; letter-spacing:.05em; text-align:center; position:relative; z-index:1;}
.auth-wordmark .auth-logo{display:block; margin:0 auto 10px; width:40px; filter:drop-shadow(0 4px 10px rgba(28,99,213,.3));}
.auth-wordmark .sub{
  display:block; color:var(--sub); font-size:11.5px; font-weight:400;
  letter-spacing:.16em; margin-top:6px; text-align:center;
}
.auth-card{
  background:var(--card); border:1px solid var(--line); border-radius:16px;
  padding:28px 26px; width:100%; max-width:400px; box-shadow:var(--shadow-md);
  position:relative; z-index:1;
}
.auth-card h1{font-size:16px; font-weight:700; margin-bottom:18px;}

/* ===== 運営コンソール(コーポレート=白黒グレー) ===== */
.chrome-bar{
  background:var(--chrome); color:#fff; height:52px;
  display:flex; align-items:center; gap:14px; padding:0 20px;
  position:sticky; top:0; z-index:50;
}
.chrome-bar .wordmark{font-weight:700; letter-spacing:.14em; font-size:15px;}
.chrome-bar .label{color:var(--chrome-sub); font-size:11.5px;}
.chrome-bar .chrome-right{margin-left:auto; display:flex; align-items:center; gap:14px;}
.chrome-bar .logout-btn{color:var(--chrome-sub);}
.chrome-bar .logout-btn:hover{color:#fff;}
.admin-main{max-width:1120px; margin:0 auto; padding:24px 28px 48px;}

/* ===== 検索・絞込バー ===== */
.filter-bar{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:13px 16px; margin-bottom:14px; box-shadow:var(--shadow-sm);
  display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end;
}
.f-group{display:flex; flex-direction:column; gap:5px;}
.f-group label{font-size:11px; color:var(--sub); margin-bottom:0;}

/* ===== 詳細タブ ===== */
.ik-tabs{border-bottom:1px solid var(--line); margin-bottom:14px;}
.ik-tabs .nav-link{
  color:var(--sub); font-size:13px; font-weight:600; border:none;
  border-bottom:2px solid transparent; border-radius:0; padding:9px 14px;
  background:none;
}
.ik-tabs .nav-link:hover{color:var(--ink); border-color:var(--line-strong);}
.ik-tabs .nav-link.active{color:var(--brand); border-bottom-color:var(--brand); background:none;}
.ik-tabs .count{
  background:var(--paper); border:1px solid var(--line); border-radius:99px;
  font-size:10.5px; padding:1px 7px; margin-left:3px; color:var(--sub);
}

/* ===== 詳細画面の定義リスト ===== */
.detail-dl{display:grid; grid-template-columns:150px 1fr; gap:0; margin:0;}
.detail-dl dt{
  color:var(--sub); font-size:12px; font-weight:600;
  padding:10px 8px 10px 0; border-bottom:1px solid var(--line);
}
.detail-dl dd{
  margin:0; font-size:13.5px; padding:10px 0; border-bottom:1px solid var(--line);
}
.detail-dl dt:nth-last-of-type(1), .detail-dl dd:last-of-type{border-bottom:none;}
@media (max-width: 575.98px){
  .detail-dl{grid-template-columns:1fr;}
  .detail-dl dt{border-bottom:none; padding-bottom:2px;}
}

/* ===== 対応履歴 ===== */
.note-row{padding:12px 0; border-bottom:1px solid var(--line);}
.note-row:last-child{border-bottom:none;}
.note-meta{font-size:12px; color:var(--sub); margin-bottom:4px; display:flex; gap:10px;}
.note-meta b{color:var(--ink);}
.note-body{font-size:13.5px; line-height:1.8;}

/* ===== 見積⇔請求 切替ナビ ===== */
.pill-nav{
  display:inline-flex; background:var(--card); border:1px solid var(--line-strong); border-radius:99px; padding:3px; gap:2px; box-shadow:var(--shadow-sm);
  max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; /* 狭い幅は横スクロール(v0.3) */
}
.pill-nav::-webkit-scrollbar{display:none;}
.pill-nav a{
  padding:6px 18px; border-radius:99px; font-size:12.5px; font-weight:600;
  color:var(--sub); text-decoration:none;
  white-space:nowrap; /* 「見積」が「見/積」に縦割れするのを防ぐ(v0.3) */
}
.pill-nav a:hover{color:var(--ink);}
.pill-nav a.active{background:var(--brand); color:#fff;}

/* ===== サマリーチップ(請求一覧) ===== */
.summary-chips{display:flex; gap:10px; margin-bottom:12px; flex-wrap:wrap;}
.s-chip{border-radius:9px; padding:8px 14px; font-size:12.5px; background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow-sm);}
.s-chip.danger{background:var(--danger-bg); border-color:#F0C4C4; color:var(--danger); font-weight:700;}
tr.overdue td{background:var(--danger-row) !important;}

/* ===== 見積フォーム(明細) ===== */
.items-table{width:100%; border-collapse:collapse;}
.items-table thead th{
  font-size:11px; color:var(--sub); font-weight:600; text-align:left;
  padding:6px 6px; border-bottom:1px solid var(--line);
}
.items-table tbody td{padding:5px 4px; vertical-align:middle;}
.btn-row{
  background:var(--card); border:1px solid var(--line-strong); border-radius:7px;
  color:var(--sub); font-size:11px; padding:4px 7px; cursor:pointer;
}
.btn-row:hover{border-color:var(--faint); color:var(--ink);}
.totals-box{
  margin-top:14px; padding-top:12px; border-top:1px solid var(--line);
  display:flex; flex-direction:column; align-items:flex-end; gap:6px;
}
.t-breakdown{font-size:12px; color:var(--sub); text-align:right;}
.t-table{width:280px; font-size:13.5px;}
.t-table td{padding:5px 4px; border-bottom:1px solid var(--line);}
.t-table .t-grand td{font-weight:700; font-size:16px; border-bottom:2px solid var(--ink);}

/* ===== 日報(スマホ最優先・S-60) ===== */
.report-form .form-control, .report-form .form-select{
  font-size:15px; padding:12px 12px; border-radius:10px; min-height:44px;
}
.report-form textarea.form-control{height:150px; line-height:1.7;}
.report-form .form-label{font-size:12.5px;}
.photo-add{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  min-height:82px; border:1.5px dashed var(--brand-soft); border-radius:10px;
  background:var(--brand-tint); color:var(--brand); font-size:12.5px; font-weight:700;
  cursor:pointer; width:100%;
}
.photo-add .cam{font-size:22px; line-height:1;}
.photo-thumbs{display:flex; flex-wrap:wrap; gap:10px; margin-top:10px;}
.photo-thumb{
  position:relative; width:82px; height:82px; border-radius:10px; overflow:hidden;
  background:#D7DEE8; border:1px solid var(--line);
}
.photo-thumb img{width:100%; height:100%; object-fit:cover; display:block;}
.photo-thumb .ph-del{
  position:absolute; top:3px; right:3px; width:22px; height:22px; border-radius:50%;
  background:rgba(23,24,27,.72); color:#fff; border:none; font-size:11px; line-height:1;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.photo-thumb.deleting{opacity:.35;}
.p-submit{
  background:var(--brand); color:#fff; border:none; border-radius:12px;
  padding:15px; font-size:16px; font-weight:700; font-family:inherit; cursor:pointer; width:100%;
  box-shadow:0 2px 6px rgba(28,99,213,.3);
}
.p-submit:active{background:var(--brand-dark);}

/* 日報詳細の写真グリッド */
.report-photos{display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:10px;}
.report-photos a{display:block; border-radius:10px; overflow:hidden; border:1px solid var(--line);}
.report-photos img{width:100%; height:150px; object-fit:cover; display:block;}

/* 未提出者チップ */
.ns-chip{
  display:inline-block; background:var(--warn-bg); color:var(--warn);
  border-radius:99px; padding:4px 12px; font-size:12px; font-weight:600; margin:0 6px 6px 0;
}

/* ===== 申請フォーム(種別選択・S-70) ===== */
.type-select{display:flex; gap:8px; flex-wrap:wrap;}
.type-opt{
  flex:1; min-width:100px; text-align:center; cursor:pointer;
  border:1.5px solid var(--line-strong); border-radius:10px; padding:12px 8px;
  font-size:13.5px; font-weight:600; color:var(--sub); background:var(--card);
}
.type-opt:has(input:checked){
  border-color:var(--brand); background:var(--brand-tint); color:var(--brand);
}
.type-opt input{display:none;}

/* ===== 準備中プレースホルダ ===== */
.placeholder-card{
  background:var(--card); border:1px dashed var(--brand-soft); border-radius:var(--radius);
  padding:48px 24px; text-align:center; color:var(--sub);
}
.placeholder-card .ph-title{font-size:15px; font-weight:700; color:var(--ink); margin-bottom:8px;}

/* ===== レスポンシブ調整(2026-07-10 施主FB: 画面幅が狭いときの潰れ・ズレ) ===== */
@media (max-width: 767.98px){
  /* 列数の多いデータ表は列を潰さず(1文字ずつの縦折れ防止)、横スクロールで見せる */
  .table-wrap .table-ik:has(thead th:nth-child(5)){min-width:640px;}
  .table-wrap .table-ik:has(thead th:nth-child(7)){min-width:800px;}
  .table-wrap .table-ik thead th{white-space:nowrap;}
  /* 明細フォーム(見積・請求・定期請求): 数量・単位・税率が潰れないよう最低幅を確保して横スクロール */
  .table-wrap .items-table{min-width:660px;}
  .table-wrap .items-table thead th{white-space:nowrap;}
  .table-wrap{-webkit-overflow-scrolling:touch;}
}
@media (max-width: 575.98px){
  /* カード見出しの補足文は改行して整える(見出しと混ざって折り返されるのを防ぐ) */
  .card h2 .sub{display:block; margin:4px 0 0;}
  /* はじめにやること: 「今後表示しない」を右上で折り返さない */
  .onboard .ob-head{flex-wrap:wrap;}
  .onboard .ob-close{white-space:nowrap;}
}

/* ===== 勤怠一覧: 記録のない日は淡く(31行の「—」と修正ボタンのノイズを抑える・v0.3) ===== */
.att-empty td{color:var(--faint); background:#FBFCFD;}
.att-empty .btn{opacity:.45;}
.att-empty:hover .btn{opacity:1;}

/* 案件の請求進捗バー(P3拡張) */
.cf-progress{display:flex; height:10px; background:#EEF2F7; border:1px solid var(--line-strong); border-radius:5px; overflow:hidden;}
.cf-progress-bar{height:100%; transition:width .2s;}
.cf-progress-collected{background:var(--ok);}
.cf-progress-billed{background:var(--brand-soft);}