/* ============================================================
   demo-shell.css
   デモのためだけの外側。実物のアプリには無い層。
   アプリ本体のCSSと衝突しないよう、クラス名は全部 dsh- で始める。
   ============================================================ */

:root {
  --dsh-bar-h: 30px;
  --dsh-toolbar-h: 56px;
  --dsh-navy: #002e49;
  --dsh-teal: #147e9c;
}

/* アプリ本体を帯のぶん押し下げる */
body.dsh-on { padding-top: var(--dsh-bar-h); }

/* 切替ボタンを持つページは、その帯のぶんも押し下げる。
   以前は切替ボタンをアプリのヘッダーに重ねていたが、
   保護者側では画面タイトルを、管理側では更新・ログアウトのボタンを
   完全に覆ってしまい、操作できなくなっていた（2026-08-13）。
   重ねるのをやめ、専用の帯に収めている。 */
body.dsh-has-toolbar { padding-top: calc(var(--dsh-bar-h) + var(--dsh-toolbar-h)); }

/* ---- 切替ボタンを収める帯 ---- */
.dsh-toolbar {
  position: fixed;
  top: var(--dsh-bar-h); left: 0; right: 0;
  height: var(--dsh-toolbar-h);
  z-index: 9000;
  display: flex; align-items: center; justify-content: flex-end;
  gap: 10px;
  padding: 0 10px;
  background: #f1f4f7;
  border-bottom: 1px solid #d7dee5;
}
.dsh-toolbar-label {
  margin-right: auto;
  font-size: 11px; color: #5a6b7a; line-height: 1.3;
}

/* ---- デモ帯 ---- */
.dsh-bar {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--dsh-bar-h);
  z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  background: #2d3748; color: #fff;
  font-size: 11px; line-height: 1.2; text-align: center;
  padding: 0 8px;
  font-family: inherit;
}

/* ---- 保護者⇄スタッフ の切替 ---- */
.dsh-switch {
  display: flex; align-items: stretch;
  border-radius: 999px; overflow: hidden;
  background: #fff;
  border: 1px solid #c8d3dc;
  box-shadow: 0 1px 4px rgba(0,0,0,.10);
  font-size: 13px; font-weight: 700;
}
.dsh-switch button {
  border: 0; background: transparent;
  /* タップ領域を44px以上にする。小さいと押せない */
  padding: 10px 13px; min-height: 44px;
  font: inherit; color: var(--dsh-navy);
  cursor: pointer; white-space: nowrap;
}
.dsh-switch button.dsh-active {
  background: var(--dsh-teal); color: #fff;
}

/* 申請直後だけ出す誘導。切替ボタンの真下に出す */
.dsh-hint {
  position: fixed;
  top: calc(var(--dsh-bar-h) + var(--dsh-toolbar-h) + 6px); right: 10px;
  z-index: 9100;
  max-width: 200px;
  background: #fffbe6; border: 1px solid #f0c000; color: #6b5200;
  border-radius: 10px; padding: 8px 10px;
  font-size: 12px; line-height: 1.5;
  box-shadow: 0 2px 10px rgba(0,0,0,.15);
}
.dsh-hint.dsh-hidden { display: none; }

/* ---- 「最初の状態に戻す」 ---- */
.dsh-reset {
  display: block; margin: 24px auto 40px;
  background: none; border: 1px solid #cbd5e0; color: #4a5568;
  border-radius: 8px; padding: 10px 16px; min-height: 44px;
  font: inherit; font-size: 13px; cursor: pointer;
}

/* ---- 知らせ（自動削除したときなど） ---- */
.dsh-toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: 24px; z-index: 9200;
  max-width: 90vw;
  background: var(--dsh-navy); color: #fff;
  border-radius: 10px; padding: 12px 16px;
  font-size: 13px; line-height: 1.6;
  box-shadow: 0 4px 16px rgba(0,0,0,.3);
}

/* ---- PCではスマホの枠に収める（保護者画面だけ） ---- */
@media (min-width: 768px) {
  body.dsh-framed {
    background: #e2e8f0;
  }
  body.dsh-framed .dsh-frame {
    width: 390px; margin: 16px auto 40px;
    background: #fff; min-height: 780px;
    border-radius: 24px; overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,.22);
  }
  /* 枠の中では、切替ボタンの帯も枠の幅に合わせる。
     画面いっぱいに広げると、枠から遠く離れた位置にボタンが出て繋がりが見えない */
  body.dsh-framed .dsh-toolbar {
    left: 50%; right: auto; transform: translateX(-50%);
    width: 390px;
    border-left: 1px solid #d7dee5; border-right: 1px solid #d7dee5;
  }
  body.dsh-framed .dsh-hint { right: calc(50% - 195px + 10px); }
}