/* 共通シェル(サイドバー+ヘッダー)。2026-08-15新設、このコードベース初の共有フロント資産。
   embed=1(iframe埋め込み)の時はshell.jsがそもそも描画をスキップするため、このCSSが
   iframe埋め込み先の見た目に影響することは無い。
   2026-08-24(CS/Logistics/Analytics見た目統一フェーズ): このファイルのクラス名・
   (tokens.cssの)シェル用トークン名は mall-analytics/frontend/shared/analyticsShell.js の
   <style>ブロックへ同名同値でミラーされている(物理的に別Cloudflare Pagesのためimport不可)。
   ここを変更した場合は、Analytics側の見た目が再び乖離しないよう、あちらの該当ブロックも
   同じ内容へ更新すること。1ドメイン化した際は、あちら側の<style>を削除しこのCSSを
   importするだけで統合できる構造を意図している。 */
.shell-root { display: flex; min-height: 100vh; align-items: stretch; }

/* ===== サイドバー ===== */
.shell-sidebar {
  flex: 0 0 var(--shell-sidebar-width);
  width: var(--shell-sidebar-width);
  background: var(--shell-sidebar-bg);
  color: var(--shell-sidebar-text);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  transition: width 0.18s ease, flex-basis 0.18s ease;
  z-index: 40;
}
.shell-root.collapsed .shell-sidebar { flex-basis: var(--shell-sidebar-width-collapsed); width: var(--shell-sidebar-width-collapsed); }

/* 2026-08-21(共通Shell再設計フェーズ): ロゴは常にINU-ONE Portalへ戻るリンクにした */
.shell-brand {
  display: flex; align-items: center; gap: 10px; padding: 18px 16px 14px;
  font-weight: 700; font-size: 14.5px; color: #fff; white-space: nowrap; overflow: hidden;
  text-decoration: none; cursor: pointer;
}
.shell-brand:hover { opacity: 0.85; }
.shell-brand .shell-brand-mark {
  flex: 0 0 28px; width: 28px; height: 28px; border-radius: 8px; object-fit: contain; display: block;
}
.shell-root.collapsed .shell-brand-label { display: none; }

/* ワークスペース切替(adminのみ、2026-08-16)。折りたたみ時は選択自体を隠す(再展開すれば
   現在の選択がselectの表示値から分かるので、アイコン化などは行わない、INU-ONE情報設計書より) */
.shell-workspace-switcher-wrap { padding: 0 12px 14px; }
.shell-workspace-label {
  display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--shell-sidebar-text-dim); margin-bottom: 5px;
}
.shell-workspace-select {
  width: 100%; font-size: 13px; font-weight: 600; padding: 8px 10px; border-radius: var(--radius-sm);
  background: var(--shell-sidebar-hover-bg); color: #fff; border: 1px solid var(--shell-sidebar-border);
  cursor: pointer; font-family: inherit;
}
.shell-workspace-select:focus-visible { outline: 2px solid var(--shell-sidebar-active-accent); outline-offset: 1px; }
.shell-root.collapsed .shell-workspace-switcher-wrap { display: none; }

/* 2026-08-25(CS情報設計再整理フェーズ): CSで頻発する「新規登録系操作」を2つ縦積みで置く
   (ケースを新規登録=Primary、受取拒否を登録=Secondary)。232px幅のサイドバーで窮屈にならない
   よう、2つ目はPrimaryより控えめな配色にするだけで、サイズ・padding・折りたたみ時の挙動は
   .shell-primary-actionの共通ルールをそのまま流用する */
.shell-primary-action-wrap { padding: 0 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.shell-primary-action-wrap[hidden] { display: none; }
.shell-primary-action {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 10px 14px; border-radius: var(--radius-md);
  background: #fff; color: #111; font-weight: 700; font-size: 13.5px; text-decoration: none;
  border: none; cursor: pointer; transition: opacity 0.15s, background 0.15s; white-space: nowrap; overflow: hidden;
}
.shell-primary-action:hover { opacity: 0.88; }
.shell-primary-action-secondary {
  background: transparent; color: var(--shell-sidebar-text); font-weight: 600;
  border: 1px solid var(--shell-sidebar-border);
}
.shell-primary-action-secondary:hover { opacity: 1; background: var(--shell-sidebar-hover-bg); color: #fff; }
.shell-primary-action:focus-visible { outline: 2px solid var(--shell-sidebar-active-accent); outline-offset: 2px; }
.shell-root.collapsed .shell-primary-action { padding: 10px; }
.shell-root.collapsed .shell-primary-action-label { display: none; }

.shell-nav { flex: 1; padding: 4px 10px; overflow-y: auto; }
.shell-nav-group { margin-bottom: 14px; }
.shell-nav-group-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; color: var(--shell-sidebar-text-dim);
  padding: 6px 10px 4px; text-transform: uppercase; white-space: nowrap; overflow: hidden;
}
.shell-root.collapsed .shell-nav-group-label { opacity: 0; height: 0; padding: 0; margin: 0; overflow: hidden; }
.shell-root.collapsed .shell-nav-group:not(:first-child) { border-top: 1px solid var(--shell-sidebar-border); padding-top: 8px; }

/* 低頻度グループ(2026-08-30、本社管理等)。日常業務のリンクと同格に見えないよう、
   区切り線+一段弱い文字色・小さめのフォントで視覚的な重要度を落とす。 */
.shell-nav-group--muted { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--shell-sidebar-border); }
.shell-nav-group--muted .shell-nav-group-label { opacity: 0.7; }
.shell-nav-group--muted .shell-nav-link { font-size: 12.5px; opacity: 0.82; }
.shell-nav-group--muted .shell-nav-link:hover,
.shell-nav-group--muted .shell-nav-link.active { opacity: 1; }
.shell-root.collapsed .shell-nav-group--muted { margin-top: 8px; padding-top: 8px; }

/* 2段ツリー(2026-08-30、保管>出庫)。親=開閉ボタン(リンクではない)、子=軽いインデント+
   一段軽いウェイト。表示中の子を持つ親はrenderNavGroups側で自動的にopenされる。 */
.shell-nav-parent-btn { width: 100%; border: none; background: none; cursor: pointer; text-align: left; font: inherit; font-weight: 600; }
.shell-nav-parent-btn .shell-nav-caret { margin-left: auto; width: 14px; height: 14px; display: flex; align-items: center; color: var(--shell-sidebar-text-dim); transition: transform 0.15s ease; }
.shell-nav-parent-btn .shell-nav-caret svg { width: 14px; height: 14px; stroke: currentColor; fill: none; }
.shell-nav-parent.open .shell-nav-parent-btn .shell-nav-caret { transform: rotate(180deg); }
.shell-nav-parent-btn.child-active { color: var(--shell-sidebar-active-text); }
.shell-nav-children { display: none; }
.shell-nav-parent.open .shell-nav-children { display: block; }
.shell-nav-link--child { margin-left: 14px; padding: 7px 10px; font-size: 12.5px; font-weight: 500; border-left: 1px solid var(--shell-sidebar-border); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.shell-nav-link--child.active { border-left-color: var(--shell-sidebar-active-accent); }
/* 折りたたみサイドバー(アイコンのみ)では開閉UIが成立しないため、親ボタンを隠して
   子アイコンをフラットに常時表示する(インデント・境界線も外す) */
.shell-root.collapsed .shell-nav-parent-btn { display: none; }
.shell-root.collapsed .shell-nav-children { display: block; }
.shell-root.collapsed .shell-nav-link--child { margin-left: 0; padding: 9px; border-left: none; border-radius: var(--radius-sm); }

.shell-nav-link {
  display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: var(--radius-sm);
  color: var(--shell-sidebar-text); text-decoration: none; font-size: 13.5px; font-weight: 500;
  white-space: nowrap; overflow: hidden; position: relative; margin-bottom: 2px;
  border-left: 3px solid transparent;
}
.shell-nav-link .shell-nav-icon { flex: 0 0 18px; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; }
.shell-nav-link .shell-nav-icon svg { width: 18px; height: 18px; stroke: currentColor; fill: none; }
.shell-nav-link:hover { background: var(--shell-sidebar-hover-bg); color: #fff; }
.shell-nav-link:focus-visible { outline: 2px solid var(--shell-sidebar-active-accent); outline-offset: -2px; }
.shell-nav-link.active {
  background: var(--shell-sidebar-active-bg); color: var(--shell-sidebar-active-text);
  border-left-color: var(--shell-sidebar-active-accent); font-weight: 700;
}
.shell-root.collapsed .shell-nav-link { justify-content: center; padding: 9px; }
.shell-root.collapsed .shell-nav-link .shell-nav-label { display: none; }
/* 別アプリ(関連ツール)へのリンクだけに付く外部リンク記号(2026-08-16) */
.shell-nav-link .shell-nav-external { margin-left: 5px; font-size: 11px; color: var(--shell-sidebar-text-dim); }
.shell-nav-link:hover .shell-nav-external { color: inherit; }

/* 準備中項目(2026-08-21、ロール別ナビ表示フェーズ)。理想のナビ構成上は存在するが対応する
   実画面が無い項目を、非表示にはせず無効化リンク+バッジで示す */
.shell-nav-link.disabled { color: var(--shell-sidebar-text-dim); cursor: default; }
.shell-nav-link.disabled:hover { background: none; color: var(--shell-sidebar-text-dim); }
.shell-nav-link .shell-nav-badge {
  margin-left: 6px; font-size: 9.5px; font-weight: 700; padding: 1px 6px; border-radius: 8px;
  background: var(--shell-sidebar-hover-bg); color: var(--shell-sidebar-text-dim); vertical-align: middle;
}
.shell-root.collapsed .shell-nav-link .shell-nav-badge { display: none; }

/* APPSセクション(2026-08-21新設)。サイドバー最下部固定、CS/Logistics/Analytics/Adsへの
   導線をここに一本化する(ヘッダーのアプリ切替ドロップダウンは廃止)。apps.js側の
   resolveAccessibleApps(auth)がpermission別に絞り込んだ結果をそのまま列挙するだけで、
   role名の分岐はここにもmountAppsNavSection側にも一切書かない */
.shell-apps-section { padding: 10px 10px 4px; border-top: 1px solid var(--shell-sidebar-border); }
.shell-apps-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; color: var(--shell-sidebar-text-dim);
  padding: 4px 10px 6px; text-transform: uppercase; white-space: nowrap; overflow: hidden;
}
.shell-root.collapsed .shell-apps-label { opacity: 0; height: 0; padding: 0; margin: 0; overflow: hidden; }
.shell-apps-item {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-sm);
  color: var(--shell-sidebar-text); text-decoration: none; font-size: 13px; font-weight: 600;
  white-space: nowrap; overflow: hidden; margin-bottom: 2px; border-left: 3px solid transparent;
}
.shell-apps-item:hover { background: var(--shell-sidebar-hover-bg); color: #fff; }
.shell-apps-item.active {
  background: var(--shell-sidebar-active-bg); color: var(--shell-sidebar-active-text);
  border-left-color: var(--shell-sidebar-active-accent); font-weight: 700;
}
.shell-apps-item-icon { flex: 0 0 20px; width: 20px; height: 20px; border-radius: 5px; overflow: hidden; }
.shell-apps-item-icon img { width: 100%; height: 100%; object-fit: contain; display: block; }
.shell-root.collapsed .shell-apps-item-label { display: none; }
.shell-root.collapsed .shell-apps-item { justify-content: center; padding: 8px; }

/* Other Apps折りたたみ(2026-09-14、サイドバー再構成)。常時表示4アプリ(CS/Logistics/
   Supply/Expense)の下に、残りのアプリをまとめる開閉トグル。見た目は.shell-apps-itemと
   同じ言語で、開閉状態はappSwitcherComponent.jsが.openクラスで切り替える */
.shell-apps-other-toggle {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px;
  border-radius: var(--radius-sm); color: var(--shell-sidebar-text); font-size: 13px; font-weight: 600;
  white-space: nowrap; overflow: hidden; margin-bottom: 2px; border: none; border-left: 3px solid transparent;
  background: none; cursor: pointer; font-family: inherit; text-align: left;
}
.shell-apps-other-toggle:hover { background: var(--shell-sidebar-hover-bg); color: #fff; }
.shell-apps-other-icon { display: flex; align-items: center; justify-content: center; color: var(--shell-sidebar-text-dim); }
.shell-apps-other-icon svg { width: 16px; height: 16px; fill: currentColor; }
.shell-apps-other-toggle:hover .shell-apps-other-icon { color: inherit; }
.shell-apps-other-caret {
  margin-left: auto; width: 14px; height: 14px; display: flex; align-items: center;
  color: var(--shell-sidebar-text-dim); transition: transform 0.15s ease;
}
.shell-apps-other-caret svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.shell-apps-other.open .shell-apps-other-caret { transform: rotate(180deg); }
.shell-apps-other-items { display: none; }
.shell-apps-other.open .shell-apps-other-items { display: block; }
.shell-apps-other-items .shell-apps-item { padding-left: 20px; }
/* 折りたたみサイドバー(アイコンのみ)では開閉UIが成立しないため、トグルを隠して
   子アイコンをフラットに常時表示する(.shell-nav-parent-btnと同じ扱い) */
.shell-root.collapsed .shell-apps-other-toggle { display: none; }
.shell-root.collapsed .shell-apps-other-items { display: block; }
.shell-root.collapsed .shell-apps-other-items .shell-apps-item { padding-left: 8px; }

.shell-sidebar-footer { padding: 10px; border-top: 1px solid var(--shell-sidebar-border); }
/* Settings/ログアウト(2026-08-21、ヘッダーからサイドバー最下部へ移設)。.shell-nav-linkの
   見た目を流用しつつ、ログアウトは<button>なのでリセットを足す */
.shell-sidebar-footer .shell-nav-link { margin-bottom: 2px; }
.shell-sidebar-footer .shell-logout-link {
  width: 100%; background: transparent; border: none; font-family: inherit; text-align: left; cursor: pointer;
}
.shell-collapse-btn {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px;
  background: transparent; border: none; color: var(--shell-sidebar-text-dim); font-size: 12.5px;
  cursor: pointer; border-radius: var(--radius-sm); white-space: nowrap; overflow: hidden;
}
.shell-collapse-btn:hover { background: var(--shell-sidebar-hover-bg); color: #fff; }
.shell-collapse-btn:focus-visible { outline: 2px solid var(--shell-sidebar-active-accent); outline-offset: -2px; }
.shell-collapse-btn svg { flex: 0 0 16px; width: 16px; height: 16px; stroke: currentColor; fill: none; transition: transform 0.18s; }
.shell-root.collapsed .shell-collapse-btn svg { transform: rotate(180deg); }
.shell-root.collapsed .shell-collapse-btn .shell-collapse-label { display: none; }

/* ツールチップ(折りたたみ時、ラベルの代わりにhoverで表示) */
.shell-tooltip {
  position: fixed; background: #1a1a1a; color: #fff; font-size: 12px; font-weight: 600;
  padding: 5px 9px; border-radius: 6px; pointer-events: none; z-index: 200; white-space: nowrap;
  opacity: 0; transform: translateY(-50%) translateX(-4px); transition: opacity 0.1s;
}
.shell-tooltip.visible { opacity: 1; }

/* ===== メインエリア(ヘッダー+ページ本体) ===== */
.shell-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.shell-header {
  background: var(--panel-bg); border-bottom: 1px solid var(--border-light);
  padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  position: sticky; top: 0; z-index: 30; min-height: 60px;
}
.shell-header-left { min-width: 0; display: flex; align-items: center; gap: 12px; }
.shell-header-titleblock { min-width: 0; }
.shell-breadcrumb { font-size: 12px; color: var(--text-faint); margin-bottom: 3px; display: flex; align-items: center; gap: 5px; }
.shell-header-title { font-size: 19px; font-weight: 700; margin: 0; letter-spacing: -0.01em; color: var(--text); display: flex; align-items: center; gap: 8px; }
.shell-header-desc { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
.shell-header-right { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.shell-header-actions { display: flex; align-items: center; gap: 8px; }
.shell-header-primary-btn {
  font-size: 13px; font-weight: 600; padding: 9px 16px; cursor: pointer; text-decoration: none;
  background: var(--active-bg); color: var(--active-fg); border-radius: var(--radius-sm); border: none;
  box-shadow: 0 1px 2px var(--shadow); transition: opacity 0.15s; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
}
.shell-header-primary-btn:hover { opacity: 0.85; }
.shell-header-primary-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.shell-header-help-link {
  display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 0 12px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface);
  color: var(--text-muted); font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.shell-header-help-link:hover { color: var(--accent); border-color: var(--accent); background: var(--hover-bg); }
.shell-header-help-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.shell-menu-btn {
  display: none; background: transparent; border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 7px; cursor: pointer; color: var(--text);
}
.shell-menu-btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; display: block; }

.shell-user-chip { display: flex; align-items: center; gap: 8px; padding: 5px 10px 5px 5px; border-radius: 20px; background: var(--bg); border: 1px solid var(--border-light); }
.shell-user-avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 11.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex: 0 0 26px; }
.shell-user-name { font-size: 12.5px; font-weight: 600; color: var(--text); white-space: nowrap; max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
.shell-user-role { font-size: 10px; color: var(--text-faint); }

/* 作業者切替(2026-08-19)。認証アカウント(shell-user-chip)とは別に、共同端末で
   「今の作業者」を選ぶための小さなセレクタ。ヘッダー右側、ユーザーチップの左に置く */
.shell-worker-switcher { display: flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 20px; background: var(--bg); border: 1px dashed var(--border-light); }
.shell-worker-label { font-size: 10.5px; color: var(--text-faint); white-space: nowrap; }
.shell-worker-select { font-size: 12.5px; font-weight: 600; color: var(--text); background: transparent; border: none; max-width: 130px; }
.shell-worker-select:focus { outline: 1px solid var(--accent); border-radius: 4px; }

/* 権限プレビュー(2026-08-19)。admin本人にだけ出す表示権限セレクタ(ヘッダー右側、
   作業者切替とユーザーチップの間)と、プレビュー中であることを常時示すバナー
   (ヘッダー直下、幅いっぱい)。amber系(--group-kikuchi-*)を使い、CS優先度を示す
   赤系(--warn-*)とは意図的に色を分けている(「異常」ではなく「モード」を示すため)。 */
.shell-preview-select-wrap {
  display: flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 20px;
  background: var(--group-kikuchi-bg); border: 1px dashed var(--group-kikuchi-border);
}
.shell-preview-select-label { font-size: 10.5px; color: var(--kpi-orange); font-weight: 700; white-space: nowrap; }
.shell-preview-select { font-size: 12.5px; font-weight: 600; color: var(--text); background: transparent; border: none; max-width: 150px; }
.shell-preview-select:focus { outline: 1px solid var(--kpi-orange); border-radius: 4px; }

.shell-preview-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 24px; background: var(--group-kikuchi-bg); border-bottom: 1px solid var(--group-kikuchi-border);
  font-size: 12.5px; color: var(--kpi-orange);
}
.shell-preview-banner[hidden] { display: none; }
.shell-preview-banner-text strong { color: var(--kpi-orange); }
.shell-preview-banner-reset {
  flex: 0 0 auto; font-size: 12px; font-weight: 700; padding: 5px 12px; cursor: pointer;
  background: #fff; color: var(--kpi-orange); border: 1px solid var(--group-kikuchi-border);
  border-radius: var(--radius-sm); white-space: nowrap;
}
.shell-preview-banner-reset:hover { background: var(--group-kikuchi-bg); }

.shell-content { flex: 1; padding: 20px 24px 100px; }

/* ===== レスポンシブ: タブレット・スマートフォンはドロワー化 ===== */
.shell-scrim { display: none; }
@media (max-width: 900px) {
  .shell-menu-btn { display: inline-flex; align-items: center; justify-content: center; }
  .shell-sidebar {
    position: fixed; left: 0; top: 0; width: 260px; flex-basis: 260px;
    transform: translateX(-100%); transition: transform 0.2s ease; box-shadow: 2px 0 16px rgba(0,0,0,0.2);
  }
  .shell-root.mobile-open .shell-sidebar { transform: translateX(0); }
  .shell-root.collapsed .shell-sidebar { width: 260px; flex-basis: 260px; }
  .shell-root.collapsed .shell-nav-group-label,
  .shell-root.collapsed .shell-nav-link .shell-nav-label,
  .shell-root.collapsed .shell-primary-action-label,
  .shell-root.collapsed .shell-apps-label,
  .shell-root.collapsed .shell-apps-item-label,
  .shell-root.collapsed .shell-brand-label { display: block; opacity: 1; height: auto; padding: revert; }
  .shell-root.collapsed .shell-workspace-switcher-wrap { display: block; }
  /* モバイルでは折りたたみ操作自体を出さない(ドロワー開閉はハンバーガーで行う)。
     2026-08-21: Settings/ログアウトはfooterへ移設したため、footer全体ではなく
     折りたたみボタンだけを隠す(モバイルでSettings/ログアウトが消えないようにする) */
  .shell-sidebar-footer .shell-collapse-btn { display: none; }
  .shell-scrim {
    display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 39;
  }
  .shell-root.mobile-open .shell-scrim { display: block; }
  .shell-header { padding: 12px 16px; }
  .shell-content { padding: 16px 16px 80px; }
  .shell-user-name { display: none; }
}

/* ===== 通知ベル(2026-09-17、アカウント・担当者・権限統一) =====
   全画面共通ヘッダー右上、アカウント表示の左。未読は赤バッジ、クリックで一覧をドロップダウン表示 */
.shell-notif-wrap { position: relative; flex: 0 0 auto; }
.shell-notif-btn {
  position: relative; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
  background: var(--bg); border: 1px solid var(--border-light); border-radius: 50%; cursor: pointer; color: var(--text);
}
.shell-notif-btn:hover { border-color: var(--accent); color: var(--accent); }
.shell-notif-btn svg { width: 19px; height: 19px; stroke: currentColor; fill: none; }
.shell-notif-badge {
  position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px;
  display: flex; align-items: center; justify-content: center;
  background: #dc2626; color: #fff; font-size: 10.5px; font-weight: 700; border-radius: 9px;
  font-variant-numeric: tabular-nums; box-sizing: border-box;
}
.shell-notif-badge[hidden] { display: none; }
.shell-notif-panel {
  position: absolute; top: 46px; right: 0; width: 380px; max-width: calc(100vw - 24px); max-height: 70vh;
  display: flex; flex-direction: column; background: var(--panel-bg); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,0.14); z-index: 60; overflow: hidden;
}
.shell-notif-panel[hidden] { display: none; }
.shell-notif-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 14px; border-bottom: 1px solid var(--border-light); font-size: 13px; font-weight: 700;
}
.shell-notif-readall {
  font-size: 11.5px; font-weight: 600; color: var(--accent); background: none; border: none;
  cursor: pointer; padding: 6px 8px; border-radius: 6px;
}
.shell-notif-readall:hover { background: var(--hover-bg, #f5f6f7); }
.shell-notif-list { overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.shell-notif-item {
  display: block; width: 100%; text-align: left; padding: 10px 14px; border: none; background: none;
  border-bottom: 1px solid var(--border-light); cursor: pointer; font-family: inherit;
}
.shell-notif-item:hover { background: var(--hover-bg, #f5f6f7); }
.shell-notif-item.unread { background: #eef4fb; }
.shell-notif-item.unread:hover { background: #e2edf9; }
.shell-notif-item-top { display: flex; align-items: center; gap: 6px; }
.shell-notif-type {
  flex: 0 0 auto; font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 8px;
  background: var(--tag-default-bg, #eef0f2); color: var(--text-muted); white-space: nowrap;
}
.shell-notif-type[data-type="approval_request"] { background: #fdf3ea; color: #a75a12; }
.shell-notif-type[data-type="cs_overdue"], .shell-notif-type[data-type="sync_failure"], .shell-notif-type[data-type="overdue"] { background: #fdecec; color: #a11; }
.shell-notif-type[data-type="customer_reply"] { background: #e8f6ed; color: #15803d; }
.shell-notif-type[data-type="case_update"], .shell-notif-type[data-type="comment_reply"] { background: #e5eef6; color: #1f3f57; }
.shell-notif-type[data-type="assignment"], .shell-notif-type[data-type="mention"] { background: #e5eef6; color: #1f3f57; }
.shell-notif-title { font-size: 12.5px; font-weight: 700; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shell-notif-body { margin-top: 3px; font-size: 11.5px; color: var(--text-muted); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.shell-notif-meta { margin-top: 3px; font-size: 10.5px; color: var(--text-faint); display: flex; gap: 8px; }
.shell-notif-empty { padding: 26px 14px; text-align: center; font-size: 12.5px; color: var(--text-faint); }

/* ===== 矢留共有アカウントの担当者バー(2026-09-17) =====
   「作業中:〇〇」の常時表示+作業開始/切替/終了。ページ側CSSが旧.shell-worker-switcherを
   モバイルで隠している画面があるため、意図的に別クラス名にする(スマホでも常に見える) */
.shell-worker-session { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.shell-worker-session-chip {
  display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 18px;
  background: #e8f6ed; border: 1px solid #cfe9d9; color: #15803d; font-size: 12.5px; font-weight: 700; white-space: nowrap;
}
.shell-worker-session-chip.none { background: var(--warn-bg, #fdecec); border-color: var(--warn-border, #f3c6c6); color: var(--warn-text, #a11); }
.shell-worker-session-btn {
  font-size: 12px; font-weight: 700; padding: 7px 12px; min-height: 36px; cursor: pointer;
  border-radius: var(--radius-sm, 8px); border: 1px solid var(--border); background: var(--panel-bg); color: var(--text); white-space: nowrap;
}
.shell-worker-session-btn:hover { border-color: var(--accent); color: var(--accent); }
.shell-worker-session-btn.primary { background: var(--active-bg, #111); color: var(--active-fg, #fff); border-color: var(--active-bg, #111); }

/* 作業開始(PIN)モーダル(2026-10-08 再設計: タブレットで押しやすい大きな名前タイルとテンキー) */
.shell-worker-modal-overlay {
  position: fixed; inset: 0; background: rgba(15,23,42,0.6); z-index: 70;
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.shell-worker-modal-overlay[hidden] { display: none; }
.shell-worker-modal {
  width: 560px; max-width: 100%; max-height: calc(100dvh - 32px); overflow: auto; background: var(--panel-bg); border-radius: 18px; padding: 26px 28px 22px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.3); box-sizing: border-box;
}
.shell-worker-modal h2 { margin: 0; font-size: 24px; font-weight: 800; text-align: center; }
.shell-worker-modal .modal-sub { margin: 6px 0 16px; font-size: 14px; color: var(--text-muted); text-align: center; }
.shell-worker-modal .worker-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.shell-worker-modal .worker-tile {
  min-height: 72px; font-size: 20px; font-weight: 800; padding: 12px 16px; cursor: pointer; overflow-wrap: anywhere;
  border: 2px solid var(--border); border-radius: 14px; background: var(--bg); color: var(--text);
}
.shell-worker-modal .worker-tile:hover, .shell-worker-modal .worker-tile:focus-visible { border-color: var(--active-bg, #111); background: var(--panel-bg); }
.shell-worker-modal .worker-tiles-loading { grid-column: 1 / -1; padding: 20px; text-align: center; color: var(--text-muted); font-size: 14px; }
.shell-worker-modal .worker-back { border: 0; background: transparent; color: var(--text-muted); font-size: 14px; font-weight: 700; padding: 0 0 6px; cursor: pointer; }
.shell-worker-modal .confirm-name { font-size: 28px; font-weight: 800; text-align: center; padding: 4px 0 0; }
.shell-worker-modal .pin-dots { display: flex; justify-content: center; gap: 14px; margin: 4px 0 18px; }
.shell-worker-modal .pin-dots span { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--border); box-sizing: border-box; }
.shell-worker-modal .pin-dots span.opt { opacity: .45; }
.shell-worker-modal .pin-dots span.on { background: var(--active-bg, #111); border-color: var(--active-bg, #111); opacity: 1; }
.shell-worker-modal .pin-hidden-input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.shell-worker-modal .pin-keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 340px; margin: 0 auto; }
.shell-worker-modal .pin-keypad button {
  min-height: 64px; font-size: 26px; font-weight: 700; cursor: pointer; border-radius: 14px;
  border: 1px solid var(--border); background: var(--bg); color: var(--text); font-variant-numeric: tabular-nums;
}
.shell-worker-modal .pin-keypad button.del { font-size: 22px; }
.shell-worker-modal .pin-keypad button.ok { background: var(--active-bg, #111); color: var(--active-fg, #fff); border-color: var(--active-bg, #111); font-size: 20px; }
.shell-worker-modal .pin-keypad button.ok:disabled { opacity: .35; cursor: default; }
.shell-worker-modal .pin-keypad button:not(.ok):active { background: var(--border); }
.shell-worker-modal .modal-actions { display: flex; justify-content: center; margin-top: 16px; }
.shell-worker-modal .modal-actions button.ghost { border: 0; background: transparent; color: var(--text-muted); font-size: 13px; padding: 10px 14px; cursor: pointer; text-decoration: underline; }
.shell-worker-modal .modal-msg { margin: 12px 0 0; font-size: 14px; font-weight: 700; color: var(--warn-text, #a11); min-height: 20px; text-align: center; }
@media (max-width: 480px) {
  .shell-worker-modal { padding: 20px 16px 16px; border-radius: 14px; }
  .shell-worker-modal h2 { font-size: 21px; }
  .shell-worker-modal .worker-tile { min-height: 64px; font-size: 18px; }
  .shell-worker-modal .pin-keypad button { min-height: 58px; }
}

@media (max-width: 900px) {
  .shell-notif-panel { position: fixed; top: 62px; left: 12px; right: 12px; width: auto; max-height: calc(100dvh - 80px); }
  .shell-worker-session-chip { font-size: 12px; padding: 6px 10px; }
  .shell-worker-session .shell-worker-session-btn { min-height: 40px; }
}