/* ============================================================
   Fretive Work Hub スタイル
   白基調・黒文字（AIオフィスとトンマナ統一）＋スタイリッシュ。
   PC＝上部タブ、スマホ＝下部ボトムナビ。ページ全体はスクロールさせず内部スクロールのみ。
   ============================================================ */
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
:root {
  /* AIオフィスとトンマナ統一：白基調＋オレンジアクセント(#ED6C2E) */
  --bg:#f5f5f3; --panel:#ffffff; --card:#fafaf8; --border:#e7e6e2; --line:#efeeea;
  --text:#1e2025; --dim:#8b8c90;
  --accent:#ED6C2E; --accent-soft:rgba(237,108,46,0.12); --accent-line:rgba(237,108,46,0.28);
  --danger:#c8443b; --warn:#c07a12; --ok:#219653; --info:#2b5fa8;
  --ink:#1f2024;
  --radius:14px; --shadow:0 1px 3px rgba(30,32,40,.05), 0 10px 28px rgba(30,32,40,.04);
}
html,body { height:100dvh; overflow:hidden; background:var(--bg); color:var(--text);
  font-family:"Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",system-ui,sans-serif;
  overscroll-behavior:none; -webkit-font-smoothing:antialiased; }
.hidden { display:none !important; }
.muted { color:var(--dim); font-weight:400; font-size:13px; }

#gate { height:100dvh; display:flex; align-items:center; justify-content:center; }
.gate-msg { color:var(--dim); font-size:14px; text-align:center; line-height:1.9; padding:24px; }
.gate-msg a { color:var(--text); }

#app { height:100dvh; display:flex; flex-direction:column; }

/* ---- ヘッダー ---- */
.topbar { display:flex; align-items:center; gap:18px; height:52px; flex:0 0 auto;
  padding:0 max(16px, env(safe-area-inset-left)) 0 max(16px, env(safe-area-inset-left));
  padding-top:env(safe-area-inset-top); background:var(--panel);
  border-bottom:1px solid var(--border); box-shadow:0 1px 0 var(--accent-soft); }
.brand { font-weight:700; font-size:15px; letter-spacing:.02em; white-space:nowrap;
  display:flex; align-items:center; gap:8px; }
.brand::before { content:""; width:9px; height:9px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft); flex:0 0 auto; }
.brand span { color:var(--dim); font-weight:500; }
.tabs { display:flex; gap:2px; flex:1 1 auto; overflow-x:auto; }
.tab { background:none; border:none; color:var(--dim); font-size:14px; padding:8px 14px; min-height:44px;
  cursor:pointer; border-radius:8px; white-space:nowrap; font-family:inherit; transition:color .12s, background .12s; }
.tab:hover { color:var(--text); }
.tab.active { color:var(--accent); font-weight:700; background:var(--accent-soft); }
.who { display:flex; align-items:center; gap:10px; font-size:13px; color:var(--dim); white-space:nowrap; }

.btn { background:var(--accent); color:#fff; border:none; border-radius:9px; padding:9px 16px; font-size:14px;
  font-weight:600; min-height:44px; cursor:pointer; font-family:inherit;
  box-shadow:0 2px 8px rgba(237,108,46,.25); transition:filter .12s, box-shadow .12s; }
.btn:hover { filter:brightness(1.05); box-shadow:0 4px 14px rgba(237,108,46,.32); }
.btn:disabled { opacity:.5; cursor:default; box-shadow:none; }
.btn-ghost { background:none; border:1px solid var(--border); color:var(--text); border-radius:9px;
  padding:8px 14px; font-size:13px; min-height:40px; cursor:pointer; font-family:inherit; transition:border-color .12s, color .12s; }
.btn-ghost:hover { border-color:var(--accent-line); color:var(--accent); }
.btn-sm { min-height:36px; padding:6px 10px; font-size:12px; }

/* ---- メイン・ビュー ---- */
#main { flex:1 1 auto; overflow:hidden; position:relative; }
.view { position:absolute; inset:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:20px max(20px, env(safe-area-inset-left)) 24px; display:none; }
.view.active { display:block; }
.view-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
.view-head h1 { font-size:19px; font-weight:700; }
.head-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

.cols { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.col { display:flex; flex-direction:column; gap:16px; }
.card { background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow); }
.card h2 { font-size:14px; font-weight:700; margin-bottom:12px; display:flex; align-items:center; gap:8px; }
.card h2::before { content:""; width:4px; height:14px; border-radius:3px; background:var(--accent); flex:0 0 auto; }
.card.alert h2 { color:var(--warn); }
.card.alert h2::before { background:var(--warn); }

.list { display:flex; flex-direction:column; gap:8px; }
.item { border:1px solid var(--line); border-radius:10px; padding:11px 12px; background:#fff; }
.item .t { font-size:14px; font-weight:600; line-height:1.4; }
.item .meta { font-size:12px; color:var(--dim); margin-top:4px; display:flex; gap:10px; flex-wrap:wrap; }
.empty { color:var(--dim); font-size:13px; padding:8px 2px; }

.dot { width:8px; height:8px; border-radius:50%; display:inline-block; flex:0 0 auto; }
.dot.red{background:var(--danger)} .dot.orange{background:var(--warn)} .dot.green{background:var(--ok)}
.dot.blue{background:var(--info)} .dot.gray{background:var(--dim)}
.pill { font-size:11px; padding:2px 8px; border-radius:20px; background:var(--bg); color:var(--dim); border:1px solid var(--line); }
.pill.overdue { color:var(--danger); border-color:#e7c4c0; background:#fbeeed; }
.pill.today { color:var(--warn); border-color:#ecd6a8; background:#fbf3e2; }
.pill.local { color:var(--info); border-color:#c5d4ea; background:#eef3fb; }

.banner { border-radius:10px; padding:10px 14px; font-size:13px; margin-bottom:14px; border:1px solid; }
.banner.warn { background:#fbf3e2; border-color:#ecd6a8; color:#7a5209; }
.banner.info { background:#eef3fb; border-color:#c5d4ea; color:#204a86; }
.ai-summary { background:var(--panel); border:1px solid var(--border); border-left:3px solid var(--accent);
  border-radius:var(--radius); padding:16px; margin-bottom:16px; white-space:pre-wrap; font-size:14px;
  line-height:1.75; box-shadow:var(--shadow); }

/* ---- カレンダー ---- */
.deadline-strip { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.calendar { background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:12px; box-shadow:var(--shadow); }
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.cal-dow { background:var(--bg); text-align:center; font-size:11px; color:var(--dim); padding:6px 0; }
.cal-cell { background:#fff; min-height:88px; padding:5px 6px; font-size:11px; overflow:hidden; }
.cal-cell.other { background:#fafaf9; color:var(--dim); }
.cal-cell.today { outline:2px solid var(--accent); outline-offset:-2px; }
.cal-num { font-size:12px; font-weight:600; margin-bottom:3px; }
.cal-ev { font-size:10.5px; padding:1px 4px; border-radius:4px; margin-bottom:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cal-ev.final { background:#fbeeed; color:#a3322a; } .cal-ev.submit { background:#eef3fb; color:#204a86; }
.cal-ev.task { background:#eef7ef; color:#245c37; } .cal-ev.event { background:#f0eef9; color:#4a3f7a; }

/* ---- 案件 ---- */
.projects-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:14px; }
.project-card { background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow); }
.project-card .ph { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.project-card .pname { font-size:15px; font-weight:700; }
.project-card .assignee-row { display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.project-card select { flex:1; }
.sched-row { display:flex; align-items:center; gap:8px; padding:7px 0; border-top:1px solid var(--line); font-size:13px; }
.sched-row .st { flex:1; min-width:0; }
.sched-row .sn { font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sched-row .sd { font-size:11px; color:var(--dim); }
.sched-row select { min-height:36px; font-size:13px; }

/* ---- メール ---- */
.mail-empty { text-align:center; padding:48px 20px; color:var(--dim); }
.mail-list { display:flex; flex-direction:column; gap:1px; background:var(--line); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.mail-item { background:#fff; padding:12px 14px; }
.mail-item .mf { font-size:13px; font-weight:600; }
.mail-item .ms { font-size:13px; } .mail-item .msn { font-size:12px; color:var(--dim); }

/* ---- 連携 ---- */
.integrations { display:flex; flex-direction:column; gap:10px; }
.integ-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px; border:1px solid var(--line); border-radius:10px; }
.integ-row .il { display:flex; align-items:center; gap:10px; }
.status-badge { font-size:12px; padding:3px 10px; border-radius:20px; }
.status-badge.connected { background:#e8f3ea; color:var(--ok); }
.status-badge.disconnected { background:#f1f0ee; color:var(--dim); }
.status-badge.configured { background:#eef3fb; color:var(--info); }
.row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:6px; }

input, select, textarea { font-family:inherit; font-size:16px; /* iOS自動ズーム防止 */
  border:1px solid var(--border); border-radius:9px; padding:11px 12px; background:#fff; color:var(--text); min-height:44px; width:100%; }
textarea { min-height:110px; resize:vertical; line-height:1.6; }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(237,108,46,.16); }
label { display:block; font-size:12px; color:var(--dim); margin:12px 0 5px; }

/* ---- モーダル ---- */
.overlay { position:fixed; inset:0; background:rgba(15,15,17,.42); display:flex; align-items:center; justify-content:center;
  z-index:200; padding:20px calc(env(safe-area-inset-left) + 16px); }
.modal-box { background:var(--panel); border-radius:16px; width:100%; max-width:460px; max-height:86dvh; overflow-y:auto;
  padding:22px; box-shadow:0 12px 48px rgba(0,0,0,.22); }
.modal-title { font-size:16px; font-weight:700; margin-bottom:12px; }
.modal-content { font-size:14px; line-height:1.7; }
.modal-actions { display:flex; gap:10px; justify-content:flex-end; margin-top:18px; flex-wrap:wrap; }
.modal-msg { font-size:13px; margin-top:10px; min-height:16px; }
.modal-msg.err { color:var(--danger); } .modal-msg.ok { color:var(--ok); }

/* ---- ボトムナビ（スマホのみ） ---- */
.bottomnav { display:none; }

/* ============ レスポンシブ：スマホ ============ */
@media (max-width: 760px) {
  .topbar .tabs { display:none; }
  .topbar { gap:10px; }
  .who { font-size:12px; }
  .who #who-text { display:none; }
  .cols { grid-template-columns:1fr; }
  .view { padding-bottom:76px; } /* ボトムナビ分 */
  .bottomnav { display:flex; flex:0 0 auto; background:var(--panel); border-top:1px solid var(--border);
    padding-bottom:env(safe-area-inset-bottom); position:relative; z-index:50; }
  .bn { flex:1; background:none; border:none; font-family:inherit; font-size:11px; color:var(--dim);
    padding:8px 0 6px; min-height:56px; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:3px; }
  .bn.active { color:var(--accent); font-weight:700; }
  .bn::before { content:""; width:5px; height:5px; border-radius:50%; background:transparent; }
  .bn.active::before { background:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
  .projects-list { grid-template-columns:1fr; }
  .cal-cell { min-height:60px; }
  .view-head h1 { font-size:17px; }
}
@media (min-width: 761px) { .bottomnav { display:none !important; } }