/* ============ SOHO Connect β ============ */
* { margin:0; padding:0; box-sizing:border-box; }
:root {
  --primary:#1a6feb; --primary-dark:#0f56c4; --primary-light:#e8f1fe;
  --accent:#00b48f; --danger:#e04545; --warn:#e8a20c;
  --bg:#f4f6fa; --card:#ffffff; --border:#dde3ec;
  --text:#20293a; --text-sub:#6a7488;
  --radius:10px;
  font-size:15px;
}
html,body { height:100%; }
body { font-family:"Hiragino Kaku Gothic ProN","Yu Gothic UI","Meiryo",sans-serif; background:var(--bg); color:var(--text); }
.hidden { display:none !important; }

/* ---------- ログイン ---------- */
.login-screen { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:16px;
  background:linear-gradient(135deg,#0f2a5e 0%,#1a6feb 60%,#00b48f 100%); }
.login-card { background:#fff; border-radius:16px; padding:36px 32px; width:100%; max-width:420px; box-shadow:0 18px 50px rgba(10,30,80,.35); }
.login-logo { font-size:1.7rem; font-weight:800; letter-spacing:.5px; text-align:center; color:#0f2a5e; }
.login-logo span { color:var(--primary); }
.login-logo em { font-style:normal; color:var(--accent); font-size:1.1rem; }
.login-sub { text-align:center; color:var(--text-sub); margin:6px 0 22px; font-size:.85rem; }
.login-error { background:#fdecec; color:var(--danger); border:1px solid #f5c6c6; border-radius:8px; padding:8px 12px; font-size:.85rem; margin-bottom:12px; }
.login-demo { margin-top:20px; border-top:1px dashed var(--border); padding-top:12px; font-size:.75rem; color:var(--text-sub); }
.login-demo table { width:100%; border-collapse:collapse; margin-top:4px; }
.login-demo td { padding:2px 4px; }

/* ---------- ヘッダー・タブ ---------- */
.app-screen { min-height:100vh; display:flex; flex-direction:column; }
.app-header { background:#0f2a5e; color:#fff; display:flex; align-items:center; justify-content:space-between; padding:10px 18px; position:sticky; top:0; z-index:50; }
.header-logo { font-weight:800; font-size:1.15rem; cursor:pointer; }
.header-logo span { color:#7db4ff; }
.header-logo em { font-style:normal; color:#39d8b8; font-size:.9rem; }
.header-right { display:flex; align-items:center; gap:10px; }
.header-user { font-size:.85rem; }
.role-badge { background:#39d8b8; color:#063; color:#04463a; font-size:.7rem; font-weight:700; padding:3px 10px; border-radius:20px; }

.tab-bar { display:flex; gap:2px; background:#fff; border-bottom:2px solid var(--border); padding:0 10px; overflow-x:auto; position:sticky; top:48px; z-index:49; white-space:nowrap; }
.tab-bar button { border:none; background:none; padding:12px 16px; font-size:.9rem; color:var(--text-sub); cursor:pointer; border-bottom:3px solid transparent; font-weight:600; flex-shrink:0; }
.tab-bar button:hover { color:var(--primary); background:var(--primary-light); }
.tab-bar button.active { color:var(--primary); border-bottom-color:var(--primary); }
.tab-badge { background:var(--danger); color:#fff; border-radius:10px; font-size:.65rem; padding:1px 6px; margin-left:4px; }

.main { flex:1; padding:20px; max-width:1500px; width:100%; margin:0 auto; }

/* ---------- 共通部品 ---------- */
h2.page-title { font-size:1.25rem; margin-bottom:4px; }
p.page-desc { color:var(--text-sub); font-size:.85rem; margin-bottom:16px; }
.card { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:18px; margin-bottom:16px; }
.card h3 { font-size:1rem; margin-bottom:12px; border-left:4px solid var(--primary); padding-left:8px; }
.grid { display:grid; gap:12px; }
.grid-2 { grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.grid-3 { grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.grid-4 { grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); }

.form-group { margin-bottom:12px; }
.form-group label { display:block; font-size:.8rem; font-weight:700; color:var(--text-sub); margin-bottom:4px; }
.form-group label .req { color:var(--danger); margin-left:2px; }
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],input[type=month],select,textarea {
  width:100%; padding:8px 10px; border:1px solid var(--border); border-radius:8px; font-size:.9rem; background:#fff; color:var(--text); }
input:focus,select:focus,textarea:focus { outline:2px solid var(--primary-light); border-color:var(--primary); }
input.err { border-color:var(--danger); }
.field-err { color:var(--danger); font-size:.75rem; margin-top:2px; }
.pw-wrap { position:relative; }
.pw-wrap input { padding-right:38px; }
.pw-eye { position:absolute; right:6px; top:50%; transform:translateY(-50%); border:none; background:none; cursor:pointer; font-size:1rem; }

.btn { display:inline-block; border:none; border-radius:8px; padding:9px 18px; font-size:.9rem; font-weight:700; cursor:pointer; transition:.15s; }
.btn-primary { background:var(--primary); color:#fff; }
.btn-primary:hover { background:var(--primary-dark); }
.btn-accent { background:var(--accent); color:#fff; }
.btn-accent:hover { filter:brightness(.92); }
.btn-outline { background:#fff; color:var(--primary); border:1px solid var(--primary); }
.btn-outline:hover { background:var(--primary-light); }
.btn-danger { background:#fff; color:var(--danger); border:1px solid var(--danger); }
.btn-danger:hover { background:#fdecec; }
.btn-ghost { background:rgba(255,255,255,.12); color:#fff; }
.btn-sm { padding:5px 12px; font-size:.8rem; }
.btn-block { width:100%; }
.btn:disabled { opacity:.45; cursor:not-allowed; }

.toolbar { display:flex; flex-wrap:wrap; gap:8px; align-items:flex-end; margin-bottom:14px; }
.toolbar .form-group { margin-bottom:0; min-width:160px; }
.toolbar .spacer { flex:1; }

/* ---------- テーブル ---------- */
.table-wrap { overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius); background:#fff; }
table.data { width:100%; border-collapse:collapse; font-size:.85rem; min-width:600px; }
table.data th { background:#eef2f8; color:#3b4a63; text-align:left; padding:9px 10px; border-bottom:2px solid var(--border); white-space:nowrap; position:sticky; top:0; }
table.data td { padding:8px 10px; border-bottom:1px solid #edf0f5; white-space:nowrap; }
table.data tr:hover td { background:#f7faff; }
table.data td.num, table.data th.num { text-align:right; }
.tag { display:inline-block; font-size:.72rem; font-weight:700; padding:2px 10px; border-radius:12px; }
.tag-green { background:#e2f7f0; color:#068062; }
.tag-blue { background:var(--primary-light); color:var(--primary-dark); }
.tag-gray { background:#eceef2; color:#7a8296; }
.tag-red { background:#fdecec; color:var(--danger); }
.tag-yellow { background:#fdf3d9; color:#a06f06; }

/* ---------- 工数入力グリッド ---------- */
.perf-grid-wrap { overflow:auto; max-height:60vh; border:1px solid var(--border); border-radius:var(--radius); background:#fff; }
table.perf { border-collapse:collapse; font-size:.78rem; }
table.perf th, table.perf td { border:1px solid #e3e8f0; padding:3px 5px; text-align:center; min-width:44px; }
table.perf th { background:#eef2f8; position:sticky; top:0; z-index:2; }
table.perf th.fixed, table.perf td.fixed { position:sticky; background:#fff; z-index:3; text-align:left; }
table.perf th.fixed { background:#eef2f8; z-index:4; }
table.perf .c1 { left:0; min-width:150px; max-width:190px; white-space:normal; }
table.perf .c2 { left:150px; min-width:80px; }
table.perf .c3 { left:230px; min-width:80px; }
table.perf td.today, table.perf th.today { background:#fff8e1; }
table.perf input { width:44px; padding:3px 2px; text-align:right; border:1px solid transparent; border-radius:4px; font-size:.78rem; }
table.perf input:hover { border-color:var(--border); }
table.perf input:disabled { background:#f4f6fa; color:#aab; }
table.perf .total-col { background:#f0f7ff; font-weight:700; }
table.perf tfoot td { background:#eef2f8; font-weight:700; }

.sum-box { display:flex; flex-wrap:wrap; gap:12px; margin-top:14px; }
.sum-item { background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:12px 18px; min-width:170px; flex:1; }
.sum-item .lbl { font-size:.75rem; color:var(--text-sub); }
.sum-item .val { font-size:1.25rem; font-weight:800; margin-top:2px; }
.sum-item.hl { border-color:var(--primary); background:var(--primary-light); }
.sum-item.hl .val { color:var(--primary-dark); }

/* ---------- ダッシュボード ---------- */
.kpi-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; margin-bottom:16px; }
.kpi { background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:16px; }
.kpi .k-lbl { font-size:.75rem; color:var(--text-sub); }
.kpi .k-val { font-size:1.6rem; font-weight:800; margin-top:4px; }
.kpi .k-sub { font-size:.72rem; color:var(--text-sub); margin-top:2px; }
.alert-list { list-style:none; }
.alert-list li { padding:8px 10px; border-left:4px solid var(--warn); background:#fdf8ec; border-radius:6px; margin-bottom:6px; font-size:.85rem; }
.alert-list li.danger { border-left-color:var(--danger); background:#fdf0f0; }

/* ---------- 契約・サイン ---------- */
.sign-canvas-wrap { border:2px dashed var(--border); border-radius:var(--radius); background:#fff; position:relative; }
canvas.sign-pad { display:block; width:100%; height:180px; touch-action:none; border-radius:var(--radius); }
.sign-hint { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#c3c9d6; pointer-events:none; font-size:.9rem; }
.sign-img { border:1px solid var(--border); border-radius:6px; background:#fff; max-width:220px; }
.contract-doc { background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:22px; font-size:.85rem; line-height:1.9; max-height:300px; overflow-y:auto; }
.contract-doc h4 { text-align:center; margin-bottom:10px; }

/* ---------- モーダル ---------- */
.modal-backdrop { position:fixed; inset:0; background:rgba(15,30,60,.5); z-index:100; display:flex; align-items:center; justify-content:center; padding:16px; }
.modal { background:#fff; border-radius:14px; padding:24px; width:100%; max-width:720px; max-height:88vh; overflow-y:auto; box-shadow:0 20px 60px rgba(0,0,0,.3); }
.modal h3 { margin-bottom:14px; font-size:1.05rem; }
.modal-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:18px; }
.modal.modal-sm { max-width:440px; }
.modal.modal-lg { max-width:1000px; }

/* ---------- トースト ---------- */
.toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); background:#20293a; color:#fff; padding:12px 26px; border-radius:30px; font-size:.9rem; z-index:200; box-shadow:0 8px 24px rgba(0,0,0,.3); animation:toastIn .2s; }
@keyframes toastIn { from { opacity:0; transform:translate(-50%,10px);} to { opacity:1; transform:translate(-50%,0);} }

/* ---------- 支払通知書プレビュー ---------- */
.notice-doc { background:#fff; padding:24px; border:1px solid var(--border); border-radius:var(--radius); overflow-x:auto; }
table.notice { border-collapse:collapse; font-size:.7rem; }
table.notice th, table.notice td { border:1px solid #555; padding:2px 4px; text-align:right; min-width:26px; }
table.notice th { background:#f0f2f6; text-align:center; }
table.notice td.l { text-align:left; }
.notice-head { display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; margin-bottom:10px; font-size:.85rem; }
.notice-title { font-size:1.3rem; font-weight:800; text-align:center; margin-bottom:12px; letter-spacing:6px; }
.notice-sums { margin-top:10px; margin-left:auto; width:280px; font-size:.85rem; }
.notice-sums td { padding:3px 8px; border-bottom:1px solid #ddd; }
.notice-sums td:last-child { text-align:right; font-weight:700; }

/* ---------- 印刷 ---------- */
.print-area { display:none; }
@media print {
  body > *:not(.print-area) { display:none !important; }
  .print-area { display:block !important; }
  .print-area .notice-doc { border:none; padding:0; }
  @page { size:A4 portrait; margin:2cm 2cm 2cm 2.5cm; }
}

/* ---------- コード表示 ---------- */
pre.fmt { background:#0f1a2e; color:#c8d6f0; border-radius:8px; padding:14px; font-size:.75rem; overflow-x:auto; line-height:1.7; }
.fmt-table td, .fmt-table th { font-size:.78rem; }

/* ---------- レスポンシブ ---------- */
@media (max-width: 860px) {
  :root { font-size:14px; }
  .main { padding:12px; }
  .app-header { padding:8px 12px; }
  .header-user { display:none; }
  .tab-bar { top:44px; }
  .toolbar .form-group { min-width:130px; flex:1; }
  table.perf .c2 { left:120px; }
  table.perf .c3 { left:190px; }
  table.perf .c1 { min-width:120px; }
  .modal { padding:16px; }
  .notice-sums { width:100%; }
}
@media (max-width: 520px) {
  .kpi .k-val { font-size:1.2rem; }
  .login-card { padding:24px 18px; }
}