/*
 * 沖縄ビーチヨガ — 管理・業務画面のデザインシステム(.by-admin-*)
 * 公開サイト(application.css / .by-page)のトークン(色・フォント・角丸・影)を再利用し、
 * 業務ツールとして情報密度と操作性を優先した専用コンポーネントを定義する。
 * 業務系レイアウト(layouts/admin)でのみ application.css に「追加」読み込みする(公開ページには載せない)。
 * 変数(--ac 等)・フォント・リセット(.by-page *)は application.css の .by-page ラッパーから継承する。
 */

/* ページ土台。.by-page の変数/フォント/背景を継承しつつ、フッターを最下部に貼る縦フレックス */
.by-admin{min-height:100dvh;display:flex;flex-direction:column;}

/* =========================================================================
   トップバー
   ========================================================================= */
.by-admin-bar{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:saturate(120%) blur(12px);backdrop-filter:saturate(120%) blur(12px);
  border-bottom:1px solid rgba(22,50,58,.12);}
.by-admin-bar__inner{max-width:1320px;margin:0 auto;padding:0 clamp(16px,3vw,40px);
  min-height:64px;display:flex;align-items:center;gap:clamp(10px,2vw,24px);}

.by-admin-brand{display:flex;align-items:center;gap:11px;flex:none;color:#16323a;}
/* ロゴマークは枠(40px)に対して実際に描かれているのが 21.6×19.1px しかなく、しかも上寄り
   (枠の下に15pxの空白がある)。枠の中心で揃えると ink の中心が文字ブロックの中心より 3.4px
   上に来て、マークが浮いて文字が沈んで見える。ズレ幅は 360〜1280px すべてで 3.4px と同じ
   なので、画面幅で出し分けずここで一度だけ下げる(残り 0.4px)。 */
.by-admin-brand svg{position:relative;top:4px;}
.by-admin-brand__site{display:flex;align-items:center;}
a.by-admin-brand__en:hover,a.by-admin-brand__tag:hover{color:var(--ac,#c9743f);}
.by-admin-brand__txt{display:flex;flex-direction:column;gap:3px;line-height:1;}
.by-admin-brand__en{font-family:'Cormorant Garamond',serif;font-size:1rem;letter-spacing:.2em;
  font-weight:600;white-space:nowrap;}
.by-admin-brand__tag{font-size:.58rem;letter-spacing:.3em;color:#8a9794;white-space:nowrap;}

.by-admin-nav{display:flex;align-items:center;gap:clamp(2px,.6vw,8px);margin-left:auto;min-width:0;}
.by-admin-nav a,.by-admin-nav summary{font-size:.82rem;letter-spacing:.05em;color:#41565a;
  padding:8px 13px;border-radius:2px;white-space:nowrap;transition:background .2s ease,color .2s ease;}
.by-admin-nav a:hover,.by-admin-nav summary:hover{background:rgba(22,50,58,.06);color:#16323a;}
.by-admin-nav a.is-active{color:var(--ac,#c9743f);font-weight:600;}

/* マスタのドロップダウン(details/summary。JSレス) */
.by-admin-menu{position:relative;}
.by-admin-menu>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:7px;}
.by-admin-menu>summary::-webkit-details-marker{display:none;}
.by-admin-menu>summary::after{content:"";width:6px;height:6px;border-right:1.4px solid currentColor;
  border-bottom:1.4px solid currentColor;transform:rotate(45deg);opacity:.55;margin-top:-3px;transition:transform .2s ease;}
.by-admin-menu[open]>summary{background:rgba(22,50,58,.06);color:#16323a;}
.by-admin-menu[open]>summary::after{transform:rotate(-135deg);margin-top:2px;}
.by-admin-menu__panel{position:absolute;top:calc(100% + 8px);right:0;min-width:200px;background:#fff;
  border:1px solid rgba(22,50,58,.12);border-radius:3px;box-shadow:0 16px 44px rgba(22,50,58,.16);
  padding:6px;display:grid;gap:1px;z-index:60;}
.by-admin-menu__panel a{display:block;padding:9px 13px;font-size:.85rem;color:#41565a;border-radius:2px;letter-spacing:.03em;}
.by-admin-menu__panel a:hover{background:rgba(22,50,58,.06);color:#16323a;}
/* ログアウト(button_to が生成する form ごとレイアウトに乗せる)。アイコンだけで置く。
   枠つきボタンは 96px あり、狭幅では1段目でワードマークと幅を奪い合っていた(元のズレの
   原因)。アイコンなら実効 34px で、360px でも 49px 残る。
   押し間違いと「押す前に何が起きるか分からない」は turbo_confirm のダイアログで受ける。
   フッターへ移す案は測って落とした — /admin/beach_guides ではフッターまで 10,816px
   (13.3画面)スクロールが要る。 */
.by-admin-logout{flex:none;margin:0;}
.by-admin-logout__btn{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  min-width:44px;min-height:40px;padding:0;background:none;border:0;color:#41565a;
  /* 44px の当たり判定に対して字面は 20px なので、右の余りぶんだけ引いて
     コンテナの padding に光学的に揃える */
  margin-right:-11px;transition:color .2s ease;}
.by-admin-logout__btn:hover{color:var(--ac,#c9743f);}

/* メニューの中のログアウト。button_to は form + button で来るので、パネルの a と同じ
   見え方に揃える。**基底の .by-admin-logout__btn より後ろに、二重クラスで置く** —
   同じ詳細度で前に置くと padding:0 や min-width:44px に打ち消され、隣の
   「パスワード変更」と左端がずれる(実際にずれた)。 */
/* **`margin:0` と `width:100%` を必ず打つ。** 狭幅のメディアクエリが
   `.by-admin-logout` に margin-left:auto を当てており(トップバー直下で右へ寄せるため)、
   パネルはグリッドなのでフォームが縮んで右寄せになる。実測で 375px のとき
   ログアウトだけ 90px 右へずれていた。 */
.by-admin-menu__panel .by-admin-logout{display:block;margin:0;width:100%;}
.by-admin-logout__btn.by-admin-logout__btn--labeled{display:block;width:100%;min-width:0;
  min-height:0;margin:0;padding:9px 13px;font-family:inherit;font-size:.85rem;
  letter-spacing:.03em;color:#41565a;border-radius:2px;text-align:left;}
.by-admin-logout__btn.by-admin-logout__btn--labeled:hover{background:rgba(22,50,58,.06);color:#16323a;}

/* =========================================================================
   メインコンテナ / 見出し
   ========================================================================= */
.by-admin-main{flex:1;width:100%;max-width:1240px;margin:0 auto;
  padding:clamp(24px,4vw,44px) clamp(16px,3vw,40px) clamp(56px,7vw,88px);}

/* フッター(最小) */
.by-admin-foot{padding:22px 20px;text-align:center;font-size:.72rem;letter-spacing:.06em;
  color:#8a9794;border-top:1px solid rgba(22,50,58,.08);}
.by-admin-foot a:hover{color:var(--ac,#c9743f);}

.by-admin-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin-bottom:clamp(20px,3vw,32px);}
.by-admin-head__l{min-width:0;}
.by-admin-head h1{font-family:'Shippori Mincho',serif;font-weight:600;
  font-size:clamp(1.4rem,2.6vw,2rem);color:#16323a;line-height:1.4;letter-spacing:.02em;}
.by-admin-head .by-admin-sub{font-size:.85rem;color:#73827f;margin-top:7px;line-height:1.7;}
.by-admin-back{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;color:#73827f;margin-bottom:14px;}
.by-admin-back:hover{color:var(--ac,#c9743f);}

/* 一覧内のセクション見出し(「今後の予約」等) */
.by-admin-secttl{font-family:'Shippori Mincho',serif;font-weight:600;font-size:1.12rem;color:#16323a;
  margin:clamp(30px,4vw,44px) 0 14px;display:flex;align-items:baseline;gap:10px;}
.by-admin-secttl:first-child{margin-top:0;}

/* =========================================================================
   パネル(白カード)
   ========================================================================= */
.by-admin-panel{background:#fff;border-radius:3px;box-shadow:0 14px 40px rgba(22,50,58,.07);
  border:1px solid rgba(22,50,58,.06);}
.by-admin-panel--pad{padding:clamp(22px,3vw,36px);}
.by-admin-panel--narrow{max-width:760px;}

/* =========================================================================
   テーブル(狭幅ではラッパーが横スクロール)
   ========================================================================= */
.by-admin-tablewrap{background:#fff;border-radius:3px;box-shadow:0 14px 40px rgba(22,50,58,.07);
  border:1px solid rgba(22,50,58,.06);overflow-x:auto;}
.by-admin-table{width:100%;border-collapse:collapse;font-size:.86rem;min-width:560px;}
.by-admin-table th,.by-admin-table td{text-align:left;padding:12px 15px;vertical-align:middle;
  border-bottom:1px solid rgba(22,50,58,.08);}
.by-admin-table thead th{background:#f2f7f5;color:#46595c;font-weight:600;font-size:.73rem;
  letter-spacing:.07em;white-space:nowrap;border-bottom:1px solid rgba(22,50,58,.14);}
.by-admin-table tbody tr:last-child td{border-bottom:none;}
.by-admin-table tbody tr:hover{background:rgba(22,50,58,.022);}
.by-admin-table .num{font-family:'Cormorant Garamond',serif;font-size:1.02rem;letter-spacing:.03em;color:#16323a;}
/* 委託料の明細。金額は桁を揃えて縦に読むので右寄せにする
   (他の管理画面の .num は人数などで、左寄せのまま揃えてある)。 */
.by-admin-table--money .num{text-align:right;}
/* 7列あるので既定の min-width(560px) だとビーチ名が1〜2文字ずつ縦積みになる。
   狭幅では横スクロールに逃がす(.by-admin-tablewrap が overflow-x:auto)。
   **幅は実測で決める。** 700px では料金・手数料・小計を足したぶんビーチ名が
   2行に折れた(760px でも折れ、800px で1行)。列を増やしたら測り直すこと。 */
.by-admin-table--money{min-width:800px;}
/* 区分(通常/マンツーマン)とバッジが地続きに見えるので離す。 */
.by-admin-table--money .by-admin-badge{margin-left:9px;}
.by-admin-table .nowrap{white-space:nowrap;}
.by-admin-table td.col-actions{white-space:nowrap;}
.by-admin-table td.msg{max-width:320px;font-size:.82rem;color:#46595c;line-height:1.7;}
.by-admin-table .masked{color:#8a9794;letter-spacing:.06em;}
/* セル内の補足(連携日など)。主の値より一段沈める。改行させるのは、狭い列で日付が
   途中で折り返して読めなくなるため */
.by-admin-table .sub{display:block;margin-top:3px;font-size:.74rem;color:#8a9794;letter-spacing:.03em;}

/* 自動保存のエラートースト(成功時は無音。表示制御は schedule_form_controller) */
.by-admin-toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,8px);background:#16323a;color:#eef4f3;
  font-size:.8rem;letter-spacing:.08em;padding:10px 22px;border-radius:2px;opacity:0;pointer-events:none;
  transition:opacity .25s ease,transform .25s ease;z-index:200;
  /* fixed+left:50% は shrink-to-fit が右半分幅で計算され狭くなるため、内容幅で確保して上限だけ制限する。
     body直下に追加され .by-page のリセットが効かないので box-sizing も明示する */
  width:max-content;max-width:calc(100vw - 40px);box-sizing:border-box;}
.by-admin-toast.is-error{background:#8a3b1a;}
.by-admin-toast.is-show{opacity:1;transform:translate(-50%,0);}

/* =========================================================================
   ボタン(管理用・小型)
   ========================================================================= */
.by-admin-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;font-family:inherit;
  cursor:pointer;font-size:.8rem;letter-spacing:.04em;line-height:1.2;padding:9px 18px;border-radius:2px;
  border:1px solid transparent;white-space:nowrap;
  transition:background .2s ease,color .2s ease,border-color .2s ease,filter .2s ease;}
/* 変種は二重クラスで詳細度を .by-page button リセット(background:none, 詳細度0,1,1)より上げる。
   button_to 由来の button だと単一クラスでは負けて背景が消える(primary は白文字で不可視になる)。
   公開側 .by-btn.by-btn--primary と同じ手法。 */
.by-admin-btn.by-admin-btn--primary{background:var(--ac,#c9743f);color:#fff;}
.by-admin-btn.by-admin-btn--primary:hover{filter:brightness(1.07);}
.by-admin-btn.by-admin-btn--outline{border-color:rgba(22,50,58,.28);color:#16323a;background:#fff;}
.by-admin-btn.by-admin-btn--outline:hover{border-color:#16323a;background:#16323a;color:#eef4f3;}
.by-admin-btn.by-admin-btn--subtle{background:rgba(22,50,58,.06);color:#16323a;}
.by-admin-btn.by-admin-btn--subtle:hover{background:rgba(22,50,58,.12);}
.by-admin-btn.by-admin-btn--danger{border-color:rgba(201,116,63,.35);color:#8a3b1a;background:rgba(201,116,63,.08);}
.by-admin-btn.by-admin-btn--danger:hover{background:rgba(201,116,63,.16);}
.by-admin-btn--sm{padding:6px 12px;font-size:.74rem;letter-spacing:.03em;}
.by-admin-btn--block{width:100%;}
/* 担当確定のように「ほぼスマホで押される」ボタン。既定の .by-admin-btn は実測で高さ33px しかなく
   (2026-08-30 計測)、iOS の推奨タップ領域44px を下回る。管理画面はPC中心なので既定は変えず、
   LINE/メールのリンクから開く画面だけこの変種を当てる。狭幅では幅いっぱいにして押し損ねを減らす。 */
.by-admin-btn--tap{min-height:48px;padding:12px 24px;font-size:.92rem;}
@media (max-width:480px){.by-admin-btn--tap{width:100%;}}

/* button_to は form を生む。行内アクションを横並びにするラッパー */
.by-admin-actions{display:flex;flex-wrap:wrap;gap:6px;align-items:center;}
.by-admin-actions form{margin:0;}
.by-admin-actions .sep{color:rgba(22,50,58,.2);}

/* =========================================================================
   バッジ / ステータス
   ========================================================================= */
.by-admin-badge{display:inline-flex;align-items:center;gap:5px;font-size:.72rem;letter-spacing:.04em;
  padding:3px 11px;border-radius:100px;white-space:nowrap;line-height:1.6;}
.by-admin-badge--muted{background:rgba(22,50,58,.08);color:#6c7b78;}
.by-admin-badge--ac{background:rgba(201,116,63,.13);color:#8a3b1a;}
.by-admin-badge--ok{background:rgba(42,120,88,.13);color:#2a7858;}
.by-admin-badge--dot::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none;}

/* =========================================================================
   flash
   ========================================================================= */
.by-admin-flash{margin-bottom:22px;display:grid;gap:10px;}
/* 枠(背景+余白)は p 以外にも効かせる。訳の陳腐化のように、見出し行と対象一覧を
   ひとつの枠へまとめたいケースがあるため(p の中に ul は置けない) */
/* text-wrap:pretty は application.css 側で .by-prose 等にしか当たっていない。
   div に直接テキストを置くこのコンポーネントは対象外なので、ここで当てる
   (375px でバックアップ警告の最終行が「い。」だけになった)。→ .claude/rules/typography-check.md */
.by-admin-flash p,.by-admin-flash .notice,.by-admin-flash .alert{padding:13px 18px;border-radius:2px;font-size:.9rem;line-height:1.7;text-wrap:pretty;}
.by-admin-flash .notice{background:#e3efec;color:#16323a;border:1px solid rgba(22,50,58,.14);}
.by-admin-flash .alert{background:#f6e6dd;color:#8a3b1a;border:1px solid rgba(201,116,63,.3);}

/* =========================================================================
   フォーム
   ========================================================================= */
.by-admin-form{display:grid;gap:18px;max-width:640px;}
.by-admin-field{display:grid;gap:7px;}
.by-admin-field>label,.by-admin-form>p>label:first-child{font-family:'Shippori Mincho',serif;
  font-size:.9rem;color:#16323a;}
.by-admin-form input[type=text],.by-admin-form input[type=email],.by-admin-form input[type=tel],
.by-admin-form input[type=number],.by-admin-form input[type=password],.by-admin-form input[type=search],
.by-admin-form input[type=date],.by-admin-form input[type=datetime-local],
.by-admin-form select,.by-admin-form textarea{
  width:100%;font-family:inherit;font-size:.95rem;color:#16323a;background:#fff;
  border:1px solid rgba(22,50,58,.22);border-radius:2px;padding:10px 13px;
  transition:border-color .2s ease,box-shadow .2s ease;}
.by-admin-form input:focus,.by-admin-form select:focus,.by-admin-form textarea:focus{
  outline:none;border-color:var(--ac,#c9743f);box-shadow:0 0 0 3px rgba(201,116,63,.12);}
.by-admin-form textarea{min-height:110px;resize:vertical;line-height:1.7;}
.by-admin-form select{appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2316323a' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;padding-right:38px;}
.by-admin-check{display:inline-flex;align-items:center;gap:8px;font-size:.88rem;color:#41565a;cursor:pointer;font-family:inherit;}
.by-admin-check input{width:16px;height:16px;accent-color:var(--ac,#c9743f);}
/* HABTM(担当ビーチ・資格)のチェックボックス群。項目が多いので折り返して並べる */
.by-admin-checks{display:flex;flex-wrap:wrap;gap:8px 18px;}
/* チェック1つと、その補助行の組。フォームの行間(gap)を継がせず、中は詰める */
.by-admin-checkfield{display:grid;gap:5px;}

/* ダッシュボードの自動送信予定・要対応リスト(テーブルと同じ文字サイズに揃える) */
.by-admin-loglist{font-size:.86rem;color:#41565a;}
.by-admin-loglist strong{color:#16323a;}

/* テーブル内のキャンセル理由セレクト(フォームのselectと同意匠のコンパクト版) */
.by-admin-cancelform select,.by-admin-inlineselect select{font-family:inherit;font-size:.82rem;color:#16323a;background:#fff;
  border:1px solid rgba(22,50,58,.22);border-radius:2px;padding:7px 30px 7px 10px;margin-top:4px;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2316323a' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;
  transition:border-color .2s ease,box-shadow .2s ease;}
.by-admin-cancelform select:focus,.by-admin-inlineselect select:focus{outline:none;border-color:var(--ac,#c9743f);box-shadow:0 0 0 3px rgba(201,116,63,.12);}
.by-admin-hint{font-size:.78rem;color:#8a9794;line-height:1.6;}
/* 選んだ瞬間に保存するインラインの select(確定ボタンを持たない) */
.by-admin-inlineselect{margin:0;}
.by-admin-inlineselect select{margin-top:0;font-size:.8rem;padding:5px 26px 5px 9px;}
.by-admin-errors{background:#f6e6dd;border:1px solid rgba(201,116,63,.3);border-radius:2px;
  padding:14px 18px;color:#8a3b1a;font-size:.86rem;line-height:1.8;}
.by-admin-errors ul{margin:0;padding-left:1.2em;}
.by-admin-formfoot{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:6px;}

/* =========================================================================
   定義リスト(担当確定・詳細)
   ========================================================================= */
.by-admin-dl{background:#fff;border-radius:3px;box-shadow:0 14px 40px rgba(22,50,58,.07);
  border:1px solid rgba(22,50,58,.06);overflow:hidden;margin:0;}
.by-admin-dl>div{display:grid;grid-template-columns:minmax(84px,140px) 1fr;gap:14px;padding:14px 20px;}
.by-admin-dl>div+div{border-top:1px solid rgba(22,50,58,.08);}
.by-admin-dl dt{font-family:'Shippori Mincho',serif;font-size:.86rem;color:#16323a;}
.by-admin-dl dd{margin:0;font-size:.92rem;color:#46595c;}

/* =========================================================================
   空状態 / 注記
   ========================================================================= */
.by-admin-empty{padding:38px 20px;text-align:center;color:#8a9794;font-size:.9rem;
  background:#fff;border-radius:3px;border:1px dashed rgba(22,50,58,.16);}
/* **定義は1箇所に保つ。** 以前は表の節にも同名の規則があり、後勝ちで font-size と
   line-height だけが上書きされる状態だった(値がどこで決まるか読めない)。
   line-height は 1.8 だと数行の注記が間延びするので、本文と同じ 1.7 に揃える。 */
.by-admin-note{margin-top:10px;font-size:.83rem;color:#73827f;letter-spacing:.03em;
  line-height:1.7;margin-bottom:14px;}
/* 続けて並ぶ注記は1つのかたまりとして読ませる。**両側を下げる**こと —
   隣り合う margin は大きいほうへ畳まれるので、後ろの margin-top だけ縮めても
   前の margin-bottom(14px)が残って効かない。
   下を 14px のままにするのは、注記の直後がボタンの画面があるため
   (instructor_assignments/show)。 */
.by-admin-note:has(+ .by-admin-note){margin-bottom:6px;}
.by-admin-note+.by-admin-note{margin-top:6px;}

/* =========================================================================
   ログイン(中央カード)
   ========================================================================= */
.by-admin-auth{flex:1;min-height:100dvh;display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:40px 20px;}
.by-admin-auth__brand{display:flex;flex-direction:column;align-items:center;gap:13px;margin-bottom:30px;}
.by-admin-auth__brand .en{font-family:'Cormorant Garamond',serif;font-size:1.12rem;letter-spacing:.26em;
  font-weight:600;color:#16323a;}
.by-admin-auth__brand .jp{font-family:'Shippori Mincho',serif;font-size:.66rem;letter-spacing:.4em;color:#8a9794;}
.by-admin-auth__card{width:100%;max-width:400px;background:#fff;border-radius:4px;
  box-shadow:0 22px 60px rgba(22,50,58,.13);padding:clamp(28px,5vw,40px);}
.by-admin-auth__card h1{font-family:'Shippori Mincho',serif;font-weight:600;font-size:1.3rem;
  color:#16323a;text-align:center;margin-bottom:26px;letter-spacing:.04em;}

/* =========================================================================
   月見出し(担当スケジュールのカレンダー的リスト)
   ========================================================================= */
.by-admin-month{font-family:'Cormorant Garamond',serif;font-size:1.05rem;letter-spacing:.06em;
  color:#16323a;margin:26px 0 12px;padding-bottom:8px;border-bottom:1px solid rgba(22,50,58,.12);}
.by-admin-month:first-of-type{margin-top:0;}
.by-admin-slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;}

/* 担当スケジュール: 月ごとの朝/夕カレンダー */
.by-admin-cals{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:18px;align-items:start;margin-bottom:26px;}
.by-admin-cal{background:#fff;border:1px solid rgba(22,50,58,.12);border-radius:2px;padding:14px 14px 16px;}
.by-admin-cal__ttl{font-size:.88rem;letter-spacing:.06em;color:#16323a;margin-bottom:10px;display:flex;align-items:baseline;gap:10px;}
.by-admin-cal__ttl .time{font-size:.76rem;color:#8a9794;letter-spacing:.04em;}
.by-admin-cal__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;}
.by-admin-cal__wd{text-align:center;font-size:.68rem;letter-spacing:.08em;color:#8a9794;padding:2px 0 4px;}
.by-admin-cal__wd.is-sun{color:#b8543a;}
.by-admin-cal__wd.is-sat{color:#3a7ab8;}
.by-admin-cal__cell{position:relative;aspect-ratio:1;border-radius:2px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1px;font-size:.84rem;color:#16323a;}
.by-admin-cal__cell.is-empty .d{color:#c3cdca;}
.by-admin-cal__cell.is-slot{border:1px solid rgba(22,50,58,.18);cursor:pointer;
  transition:border-color .2s ease;}
.by-admin-cal__cell.is-slot:hover{border-color:var(--ac,#c9743f);}
.by-admin-cal__cell.is-slot input{position:absolute;opacity:0;pointer-events:none;}
.by-admin-cal__cell .bg{position:absolute;inset:0;border-radius:1px;transition:background .2s ease;}
.by-admin-cal__cell .d,.by-admin-cal__cell .t,.by-admin-cal__cell .lock{position:relative;z-index:1;}
.by-admin-cal__cell input:checked ~ .bg{background:var(--ac,#c9743f);}
.by-admin-cal__cell input:checked ~ .d,.by-admin-cal__cell input:checked ~ .t{color:#fff;}
.by-admin-cal__cell .t{font-size:.6rem;color:#8a9794;}
.by-admin-cal__cell .lock{font-size:.56rem;letter-spacing:.04em;color:#fff;opacity:.9;}
.by-admin-cal__cell.is-slot.is-locked{cursor:not-allowed;border:1px dashed rgba(201,116,63,.55);}
.by-admin-cal__cell.is-slot.is-locked input:checked ~ .bg{background:rgba(201,116,63,.55);}
.by-admin-slot{display:flex;align-items:center;gap:10px;padding:11px 14px;background:#fff;
  border:1px solid rgba(22,50,58,.16);border-radius:2px;font-size:.86rem;color:#16323a;cursor:pointer;
  transition:border-color .2s ease,background .2s ease;}
.by-admin-slot:hover{border-color:var(--ac,#c9743f);}
.by-admin-slot input{width:16px;height:16px;accent-color:var(--ac,#c9743f);flex:none;}
.by-admin-slot.is-locked{background:#f3f5f5;color:#8a9794;cursor:not-allowed;border-style:dashed;}
.by-admin-slot .lock{margin-left:auto;font-size:.68rem;color:#8a9794;letter-spacing:.04em;}

/* =========================================================================
   レスポンシブ
   ========================================================================= */
@media (max-width:760px){
  .by-admin-bar__inner{flex-wrap:wrap;padding-top:10px;padding-bottom:10px;gap:10px;}
  .by-admin-brand{order:1;}
  .by-admin-logout{order:2;margin-left:auto;}
  /* 折り返しで全項目を見せる(横スクロールだと「マスタ」のドロップダウンが
     overflowにクリップされて開けないため) */
  .by-admin-nav{order:3;width:100%;margin-left:0;flex-wrap:wrap;padding-bottom:2px;gap:2px;}
  /* 項目の左右 padding は 13px(1項目あたり26px)。インストラクター役の項目が
     375px の使える幅 343px を数px 超えて2行に割れていた。狭幅では 8px に詰める。
     ぶら下がりは gap で足りるので見た目は変わらない。 */
  /* **直下の項目だけに絞る。** `.by-admin-nav a` だと**ドロップダウンの中のリンクにも
     当たり**、パネルの 13px を上書きして「パスワード変更」だけ文字が 5px 左へずれる
     (実測 31px vs ログアウト 36px)。 */
  .by-admin-nav>a,.by-admin-nav>details>summary{padding-left:8px;padding-right:8px;}
  /* 1段目に入るのはブランド(235px)とログアウト(68px)だけ。ワードマークは
     .86rem/.12em のまま出す — 幅はログアウトを枠つきボタンからテキストリンクに
     変えて空けたので、字を縮める必要がない(360px で余り15px)。 */
  .by-admin-brand__en{font-size:.86rem;letter-spacing:.12em;}
  /* **パネルは details ではなくナビの幅に合わせる。** details を基準にすると、
     それが右端にあるとき(インストラクター役の「その他」)パネルが画面外へ出る
     — 実測で 375px のとき右へ 102px はみ出した。ナビ基準なら menu がどこにあっても
     溢れないので、項目の並びを変えても壊れない。 */
  .by-admin-nav{position:relative;}
  .by-admin-menu{position:static;}
  .by-admin-menu__panel{left:0;right:0;min-width:0;}
}