/* ONE TRIBE 運営アプリ — styles */
:root{
  --brand:#E0731A; --brand-d:#B85A0F; --brand-l:#FDEBD9;
  --accent:#F5B342; --warn:#F59E0B;
  --bg:#f6f6fb; --card:#ffffff; --line:#e7e5ee; --text:#1f2233; --muted:#7a7a8c;
  --present:#16a34a; --absent:#dc2626; --watch:#2563eb; --makeup:#ea580c; --late:#ca8a04;
  --radius:14px; --shadow:0 2px 10px rgba(60,40,120,.08);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;background:var(--bg);color:var(--text);-webkit-text-size-adjust:100%}
#app{max-width:760px;margin:0 auto;min-height:100vh}
button{font-family:inherit;cursor:pointer}
input,textarea,select{font-family:inherit;font-size:16px}
h2,h3,h4{margin:.2em 0 .5em}

/* buttons */
.btn{border:none;border-radius:10px;padding:9px 14px;font-size:14px;font-weight:600;background:#eee;color:var(--text);transition:.15s}
.btn:active{transform:scale(.97)}
.btn-primary{background:linear-gradient(135deg,var(--brand),var(--accent));color:#fff}
.btn-ghost{background:transparent;color:var(--brand);border:1px solid var(--line)}
.btn-danger{background:#fee2e2;color:#b91c1c}
.btn-sm{padding:6px 10px;font-size:13px}
.btn-block{width:100%;padding:13px;font-size:16px;margin-top:8px}

/* login */
.login-body{background:linear-gradient(160deg,var(--brand),var(--accent))}
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.login-card{background:#fff;border-radius:20px;padding:32px 26px;width:100%;max-width:360px;box-shadow:0 12px 40px rgba(0,0,0,.2)}
.brand-logo{font-size:30px;font-weight:800;letter-spacing:.06em;text-align:center;background:linear-gradient(135deg,var(--brand),var(--accent));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.brand-sub{text-align:center;color:var(--muted);margin-bottom:20px;font-size:13px;letter-spacing:.2em}
.login-card label{display:block;font-size:13px;color:var(--muted);margin:12px 0 4px}
.login-card input{width:100%;padding:12px;border:1px solid var(--line);border-radius:10px}
.err{color:#dc2626;font-size:13px;margin-top:8px;min-height:1em;text-align:center}

/* header + tabbar */
.hd{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:calc(12px + env(safe-area-inset-top, 0px)) 16px 12px;background:linear-gradient(135deg,var(--brand),var(--accent));color:#fff}
.hd-brand{display:flex;align-items:center}
.hd-brand img{height:30px;display:block}
.hd-right{display:flex;align-items:center;gap:10px}
.hd-me{font-size:13px;opacity:.95}
.hd .btn-ghost{color:#fff;border-color:rgba(255,255,255,.5)}
.tabbar{position:sticky;bottom:0;z-index:20;display:flex;background:#fff;border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
.tab{flex:1;border:none;background:none;padding:8px 2px 9px;font-size:11px;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:2px}
.tab span{font-size:20px}
.tab.on{color:var(--brand);font-weight:700}
main{padding-bottom:16px;min-height:calc(100vh - 120px)}
.pad{padding:14px 16px}
.vh{font-size:18px}
.vh-row{display:flex;align-items:center;justify-content:space-between}
.loading{padding:40px;text-align:center;color:var(--muted)}
.mini{font-size:11px;color:var(--muted);font-weight:400}

/* calendar */
.cal-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px 4px}
.cal-title{font-weight:700;font-size:17px}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;padding:6px 10px}
.cal-wd{grid-column:1/-1;display:grid;grid-template-columns:repeat(7,1fr);gap:3px;font-size:11px;color:var(--muted);text-align:center}
.cal-cell{aspect-ratio:1/1;background:#fff;border-radius:9px;padding:4px;display:flex;flex-direction:column;align-items:center;border:1.5px solid transparent;position:relative}
.cal-cell.empty{background:transparent}
.cal-d{font-size:13px;font-weight:600}
.cal-cell.today{border-color:var(--accent)}
.cal-cell.sel{background:var(--brand-l);border-color:var(--brand)}
.cal-cell.sun .cal-d{color:#dc2626}.cal-cell.sat .cal-d{color:#2563eb}
.cal-wd .sun{color:#dc2626}.cal-wd .sat{color:#2563eb}
.cal-dots{display:flex;flex-wrap:wrap;gap:2px;justify-content:center;margin-top:2px}
.dot{width:6px;height:6px;border-radius:50%}
.dot-l{background:var(--brand)}.dot-e{background:var(--warn)}

/* day panel + row cards */
.day-panel{padding:6px 16px 20px}
.dp-head{display:flex;align-items:center;justify-content:space-between;margin:8px 0}
.dp-actions{display:flex;gap:6px}
.list{display:flex;flex-direction:column;gap:8px}
.row-card{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;box-shadow:var(--shadow)}
.row-card:active{background:#faf9ff}
.row-card.ev{border-left:4px solid var(--warn)}
.rc-title{font-weight:600;font-size:15px}
.rc-sub{font-size:12px;color:var(--muted);margin-top:2px}
.badge{background:var(--brand-l);color:var(--brand-d);border-radius:20px;padding:3px 10px;font-size:12px;font-weight:700;white-space:nowrap}
.badge.admin{background:#fce7f3;color:#be185d}
.badge.off{background:#f1f5f9;color:#64748b}
.empty-note{text-align:center;color:var(--muted);padding:24px;font-size:14px}
.day-panel>*+.row-card,.dp-head+.row-card{margin-top:8px}

/* modal */
.modal-bg{position:fixed;inset:0;background:rgba(30,20,50,.5);display:flex;align-items:flex-end;justify-content:center;z-index:50;padding:0}
.modal{background:#fff;border-radius:20px 20px 0 0;width:100%;max-width:560px;max-height:92vh;overflow:auto;animation:slideUp .2s ease}
.modal.wide{max-height:92vh}
@keyframes slideUp{from{transform:translateY(30px);opacity:.6}to{transform:none;opacity:1}}
.modal-inner{padding:20px 18px 28px}
.modal-inner label{display:block;font-size:13px;color:var(--muted);margin:10px 0 4px}
.modal-inner input,.modal-inner textarea,.modal-inner select{width:100%;padding:10px;border:1px solid var(--line);border-radius:10px}
.modal-inner textarea{min-height:60px;resize:vertical}
.two{display:flex;gap:10px}.two>div{flex:1}
.modal-btns{display:flex;gap:8px;justify-content:flex-end;margin-top:18px;flex-wrap:wrap}
.chip-wrap{display:flex;flex-wrap:wrap;gap:6px}
.chip-check{display:inline-flex;align-items:center;gap:5px;background:#f3f2f9;border-radius:20px;padding:6px 12px;font-size:13px;margin:2px 0;width:auto}
.chip-check input{width:auto}
.kv{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--line);font-size:14px}
.kv span{color:var(--muted)}

/* attendance */
.att-legend{display:flex;gap:8px;flex-wrap:wrap;font-size:11px;margin:4px 0 8px}
.att-legend span{padding:2px 8px;border-radius:20px;color:#fff}
.att-summary{font-size:13px;color:var(--brand-d);font-weight:700;margin-bottom:8px}
.att-list{display:flex;flex-direction:column;gap:6px}
.att-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 0;border-bottom:1px solid #f1f0f6}
.att-name{font-size:14px;font-weight:600}
.att-btns{display:flex;gap:4px}
.att-b{width:30px;height:30px;border-radius:8px;border:1.5px solid var(--line);background:#fff;font-size:13px;font-weight:700;color:var(--muted);padding:0}
.att-b.on{color:#fff;border-color:transparent}
.att-b.a-present.on{background:var(--present)}.att-b.a-absent.on{background:var(--absent)}
.att-b.a-watch.on{background:var(--watch)}.att-b.a-makeup.on{background:var(--makeup)}.att-b.a-late.on{background:var(--late)}
.a-present{background:var(--present)}.a-absent{background:var(--absent)}.a-watch{background:var(--watch)}.a-makeup{background:var(--makeup)}.a-late{background:var(--late)}

/* students */
.search{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;margin:10px 0}
.hist{display:flex;flex-direction:column;gap:2px;max-height:200px;overflow:auto}
.hist-row{display:flex;justify-content:space-between;gap:8px;font-size:13px;padding:5px 0;border-bottom:1px solid #f1f0f6}
.hist-row span:last-child{color:#fff;padding:1px 8px;border-radius:20px;font-size:11px}

/* chat */
.chat-wrap{display:flex;flex-direction:column;height:calc(100vh - 120px)}
.chat-tabs{display:flex;gap:6px;padding:10px 14px}
.ctab{flex:1;border:1px solid var(--line);background:#fff;border-radius:10px;padding:9px;font-size:14px;font-weight:600;color:var(--muted)}
.ctab.on{background:var(--brand-l);color:var(--brand-d);border-color:var(--brand)}
.chat-body{flex:1;display:flex;flex-direction:column;min-height:0}
.dm-list{padding:6px 14px;display:flex;flex-direction:column;gap:8px;overflow:auto}
.thread-head{display:flex;align-items:center;gap:10px;padding:8px 14px;border-bottom:1px solid var(--line)}
.msgs{flex:1;overflow:auto;padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.msg{max-width:78%;display:flex;flex-direction:column}
.msg.mine{align-self:flex-end;align-items:flex-end}
.msg.other{align-self:flex-start}
.msg-who{font-size:11px;color:var(--muted);margin-bottom:2px}
.bubble{padding:9px 13px;border-radius:16px;font-size:14px;white-space:pre-wrap;word-break:break-word}
.msg.other .bubble{background:#fff;border:1px solid var(--line);border-bottom-left-radius:4px}
.msg.mine .bubble{background:linear-gradient(135deg,var(--brand),var(--accent));color:#fff;border-bottom-right-radius:4px}
.msg-at{font-size:10px;color:var(--muted);margin-top:2px}
.msg-img{max-width:180px;border-radius:10px;display:block;margin-top:4px}
.msg-file{color:inherit;text-decoration:underline;display:block;margin-top:4px}
.composer{display:flex;align-items:center;gap:8px;padding:10px 14px;border-top:1px solid var(--line);background:#fff}
.composer input#chInput{flex:1;padding:10px 12px;border:1px solid var(--line);border-radius:20px}
.attach{font-size:22px;cursor:pointer}
.att-del{width:30px;height:30px;border-radius:8px;border:1.5px solid var(--line);background:#fff;font-size:13px;padding:0;margin-left:4px;opacity:.75}
.att-del:active{background:#fee2e2;border-color:#dc2626}
.att-pay{height:30px;border-radius:8px;border:1.5px solid var(--line);background:#fff;font-size:12px;font-weight:700;color:var(--muted);padding:0 10px;white-space:nowrap}
.att-pay.pay-on{background:#dcfce7;border-color:#16a34a;color:#166534}
/* 予定あり日の色付け: レッスン=ブランド色 / イベント=オレンジ / 両方=グラデ */
.cal-cell.has-l{background:var(--brand-l);border-color:var(--brand)}
.cal-cell.has-e{background:#fff3e0;border-color:var(--warn)}
.cal-cell.has-l.has-e{background:linear-gradient(135deg,var(--brand-l) 55%,#fff3e0 45%);border-color:var(--brand)}
.cal-cell.today{border-color:var(--accent)}
.cal-cell.sel{box-shadow:0 0 0 2.5px var(--brand) inset}
/* 出席エビデンス写真 */
.lp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.lp-item{position:relative;border-radius:8px;overflow:hidden;border:1px solid var(--line)}
.lp-item img{width:100%;height:90px;object-fit:cover;display:block}
.lp-del{position:absolute;top:2px;right:2px;width:26px;height:26px;border-radius:6px;border:none;background:rgba(255,255,255,.85);font-size:12px;padding:0}
.att-no{font-weight:800;font-size:13px;color:var(--brand);min-width:22px;display:inline-block;text-align:right}
/* iPhoneノッチ対応(ISSOと同方式) */
.login-wrap{padding-top:env(safe-area-inset-top, 0px)}
/* タスク管理 */
.task-chk{width:28px;height:28px;flex:none;border-radius:50%;border:2px solid var(--brand);background:#fff;color:#fff;font-size:15px;font-weight:800;padding:0}
.task-chk.on{background:var(--brand)}
/* ① ヘッダーの更新ボタン: 丸く大きく（タップ範囲46px） */
.hd-reload{width:46px;height:46px;flex:none;padding:0;border-radius:50%;font-size:22px;line-height:1;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.18)}
.hd-reload:active{background:rgba(255,255,255,.36)}
.hd-reload.spinning{animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* ② 当日参加の検索: キーボードで候補が隠れないよう上寄せ＋実際に見えている高さに合わせる */
.modal-bg.top-anchor{align-items:flex-start}
.modal-bg.top-anchor .modal{margin-top:8px;border-radius:18px;max-height:calc(var(--vvh, 92vh) - 16px)}
.modal-bg.top-anchor .modal-inner{padding:16px 16px 18px}
#addList{overflow-y:auto;-webkit-overflow-scrolling:touch;max-height:calc(var(--vvh, 90vh) - 250px);min-height:132px}
/* ③ 出席人数の再取得に失敗したとき（古い数字を最新として見せない） */
.badge-stale{background:#fee2e2;color:#b91c1c}