/* ==========================================================
   PRMONE Design Tokens  —  common/tokens.css
   U-1 仕様に基づく共通デザイントークン（全ページ共有）
   ※ 各HTMLの <style>:root{} から統合。変更はここ1箇所で全体に反映。
========================================================== */
:root {

  /* ── Layout fixed values（U-1 1-4-1）── */
  --nav-h:                52px;
  --titlebar-h:           30px;
  --bnav-h:               44px;
  --bottomnav-h:          64px;
  --sidebar-w:            60px;
  --sidebar-item-h:       60px;
  --contextual-sidebar-w: 220px;

  /* ── Content offset（Shell レイアウト基準値）── */
  --content-top-offset:    var(--nav-h);
  --content-bottom-offset: 0px;

  /* ── z-index fixed values（U-1 1-4-2）── */
  --z-navbar:    1300;  /* ナビバー：常に最前面（オーバーレイで覆わない） */
  --z-titlebar:  1200;
  --z-sidebar:   1100;
  --z-overlay:   1250;  /* モーダル背景：サイドバーは覆う・ナビバーは覆わない */
  --z-bottomnav: 2100;
  --z-dropdown:  1400;
  --z-modal:     9999;
  --z-toast:     10000;

  /* ── Brand colors（U-1 2-1-1）── */
  --primary-800: #625098;
  --primary-700: #654f9c;
  --primary-600: #8170ab;
  --primary-500: #a194c1;
  --primary-300: #c4b5de;
  --primary-100: #ebe5f5;
  --primary-050: #faf8ff;

  /* ── Surface colors（U-1 2-1-2）── */
  --bg-app:      #f5f5f5;
  --bg-surface:  #ffffff;
  --border-color: #e5e5e5;
  --bg-hover:       #ebebeb;
  --bg-hover-row:   #fafafa;
  --bg-active:      #e0e0e0;
  --bg-hover-light: rgba(255,255,255,0.12);
  --bg-overlay:     rgba(0,0,0,0.18);

  /* ── Accent colors（U-1 2-1-3）── */
  --accent-600: #da7f8f;
  --accent-200: #f7d3db;

  /* ── State colors（U-1 2-1-4）── */
  --state-danger:         #ff3860;
  --state-disabled:       #cccccc;
  --state-error:          #da7f8f;
  --state-success:        #16a34a;
  --state-success-bg:     #e8f5e9;
  --state-success-text:   #2e7d32;
  --state-success-icon:   #4ade80;
  --state-success-border: #bbf7d0;
  --state-error-bg:       #fce4ec;
  --state-error-text:     #c62828;
  --state-warning-bg:     #fff3e0;
  --state-warning-border: #ffe082;  /* 社内メモ等 warning枠線（amber-300）*/
  --state-warning-text:   #e65100;

  /* ── Text colors（U-1 2-1-5）── */
  --text-default:    #424242;
  --text-primary:    #333333;
  --text-secondary:  #4a4a4a;
  --text-muted:      #666666;
  --text-on-primary: #ffffff;

  /* ── File-type colors（U-1 2-5-1）── */
  --file-pdf:        #dc2626;
  --file-word:       #2563eb;
  --file-excel:      #16a34a;
  --file-powerpoint: #ea580c;
  --file-image:      var(--primary-700);
  --file-video:      #0891b2;
  --file-zip:        #ca8a04;

  /* ── Typography（U-1 2-2-1, 2-2-2, 2-2-3）── */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans JP", sans-serif;
  --text-xs:    0.72rem;
  --text-sm:    0.75rem;
  --text-label: 0.8rem;
  --text-base:  0.9rem;
  --text-lg:    1.1rem;
  --text-kpi:   1.5rem;
  --input-font-size:     16px;   /* iOS Safari 自動ズーム防止の最低値。rem ではなく px 固定 */
  --line-height-base:    1.5;
  --line-height-compact: 1.3;

  /* ── Spacing — 8px grid（U-1 1-4-3）── */
  --space-1:  2px;
  --space-2:  4px;
  --space-2h: 6px;
  --space-3:  8px;
  --space-3h: 10px;
  --space-4:  12px;
  --space-5:  16px;
  --space-6:  20px;
  --space-7:  24px;
  --space-8:  48px;

  /* ── Border width（U-1 2-3-1）── */
  --border-w:    1px;
  --border-w-md: 2px;
  --border-w-lg: 3px;
  --border-w-xl: 4px;

  /* ── Border radius（U-1 2-3-2）── */
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   12px;
  --radius-full: 9999px;

  /* ── Shadow（U-1 2-4-1）── */
  --shadow-soft:  0 2px 6px rgba(0,0,0,0.08);
  --shadow-modal: 0 8px 32px rgba(0,0,0,0.18);

  /* ── Icon sizes（U-1 2-2-4）── */
  --icon-xs:    16px;
  --icon-sm:    18px;
  --icon-md:    24px;
  --icon-lg:    36px;
  --icon-xl:    40px;
  --icon-empty: 48px;

  /* ── Component dimensions（U-1 4-x）── */
  --touch-min:     44px;
  --input-min-h:   40px;
  --table-row-min: 48px;
  --modal-max-w:   480px;
  --search-min-w:  200px;
  --search-max-w:  320px;
  --spinner-size:  36px;
  --badge-min:     16px;
  --btn-icon-size: 32px;
  --detail-aside-w: 380px;  /* side-panel 幅の正本。変更はここ1箇所で全画面に反映 */
  --filter-group-min-w: 140px;

  /* ── Focus（U-1 1-3-4）── */
  --focus-outline-w:      2px;
  --focus-outline-offset: -2px;

  /* ── Extended state colors（内部メモ・ロックアイコン）── */
  --color-lock-icon:     #f57c00;  /* ロックアイコン amber-700 */
  --color-internal-bg:   #fff3cd;  /* 社内メモバッジ背景 amber-100 */
  --color-internal-text: #856404;  /* 社内メモバッジ文字 amber-800 */

  /* ── Thread bubble colors ── */
  --color-thread-internal: #fff8e1;  /* 社内メモバブル背景（amber-50） */
  --color-thread-partner:  #f3e8ff;  /* パートナー発言バブル背景（purple-50） */

  /* ── Extended shadows ── */
  --shadow-md:   0 4px 12px rgba(0,0,0,0.18);  /* dropdown / tooltip */
  --shadow-side: -4px 0 16px rgba(0,0,0,0.10); /* 右サイドパネル */

  /* ── Tag/Badge Semantic Colors（KAN-19 v0.3 確定）──
     正式 semantic 4色。全画面のステータスタグはこの4色に統一する。
     意味定義: docs/KAN-19-semantic-definition-draft.md 参照。
       neutral = 中立・終了・無効・分類（行動不要）
       primary = 有効・正常・進行中（正常稼働中）
       warning = 要対応・要確認・期限接近（行動要求）
       danger  = 異常・失敗・却下・期限超過（ブロッキング）  */
  --tag-primary-bg:    var(--primary-050);          /* 紫系背景 */
  --tag-primary-text:  var(--primary-700);          /* 紫系文字 */
  --tag-warning-bg:    var(--accent-200);           /* ピンク系背景 */
  --tag-warning-text:  var(--accent-600);           /* ピンク系文字 */
  --tag-danger-bg:     var(--state-error-bg);       /* 赤系背景 */
  --tag-danger-text:   var(--state-error-text);     /* 赤系文字 */
  --tag-neutral-bg:    var(--bg-app);               /* グレー系背景 */
  --tag-neutral-text:  var(--text-muted);           /* グレー系文字 */
  /* reserved: 通常タグでは使用しない。toast/フィードバック用に変数のみ保持 */
  --tag-success-bg:    var(--state-success-bg);     /* reserved: 緑系背景 */
  --tag-success-text:  #155724;                     /* reserved: 緑系文字 */
}

/* ==========================================================
   モバイル: サイドバー幅トークンを 0 に畳む（#506）

   ■ 何が起きていたか（2026-09-09 実機 / iPhone）
     パートナー側のマイページを開くと、内容が画面右端に押し出されて読めなかった。
     実測: 390px 幅で `.mp-main` が **left=280px / 使える幅 110px（28%）**。

   ■ 原因
     A層サイドバー(60px) と B層コンテキストサイドバー(220px) は
     `sidebar.js` の `@media (max-width: 768px)` で **display:none** になる。
     ところが各ページが手書きしている
       `left: calc(var(--sidebar-w) + var(--contextual-sidebar-w))`
     は畳まれないため、**存在しないサイドバーぶんの 280px だけ余白が残る**。
     さらに html/body が `overflow: hidden` なので横スクロールもできず、
     押し出された内容に一切到達できない。

   ■ なぜページごとに直さないか
     この打ち消しは各ページが `@media` を書いて手で行う運用になっており、
     **書き忘れたページが現に壊れていた**。同じ書き忘れは今後も必ず起きる。
     幅トークン自体をモバイルで 0 にすれば、
     `left` / `margin-left` / `width: calc(100% - …)` のどの書き方でも自動的に畳まれ、
     共有部品 `ui-templates.js` の `.prmone-page-frame` も同時に直る。
     このファイル冒頭の方針「変更はここ1箇所で全体に反映」に沿う。

   ■ 安全性（実測で確認）
     - `.sidebar` / `.contextual-sidebar` は ≤768px で `display:none`。
       よって幅が 0 になっても表示に影響しない。
     - モバイルで可視な `.prmone-bottom-nav` / `.prmone-mobile-tabs` は
       `left: 0` 起点で、サイドバー幅に依存しない。
     - 出荷ページでこの2トークンを再定義しているのは `B-4/sample/doclib.html`（sample）のみ。
   ========================================================== */
@media (max-width: 768px) {
  :root {
    --sidebar-w:            0px;
    --contextual-sidebar-w: 0px;
  }
}

/* ==========================================================
   Base UI Components  —  全ページ共通の基盤UIクラス

   ※ tokens.css はトークン定義が主目的だが、全ページが読み込む唯一の
     共通CSSであるため、基盤UIクラスもここに集約する。
     将来的に ui-shell.css / components.css への分離を推奨。
   ========================================================== */

/* --- Form controls（U-1 §4 チェックボックス・ラジオ）---
   ネイティブ accent-color でブランドカラー統一。別途 box 装飾なし。 */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--primary-700);
}

/* --- Spinner（U-1 §5-3 Loading 状態用）--- */
@keyframes spin { to { transform: rotate(360deg); } }

.spinner {
  width: var(--spinner-size, 36px);
  height: var(--spinner-size, 36px);
  margin: 0 auto;
  border: var(--border-w-lg, 3px) solid var(--border-color, #e5e5e5);
  border-top-color: var(--primary-700, #654f9c);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* --- Box Frame（共通カードコンテナ）---
   border + shadow + radius の見た目のみ。
   overflow はコンテナの用途に応じて各ページで個別指定する。 */
.box--framed {
  background: var(--bg-surface, #fff);
  border: var(--border-w) solid var(--border-color);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-soft);
  padding: 0;
}
/* Bulma .columns のネガティブマージンが box--framed をはみ出すのを防止 */
.box--framed > .columns { margin-left: 0; margin-right: 0; }

/* --- 3-State Pattern（U-1 §5-3 Loading / Empty / Ready）---
   HTML 規約:
     <!-- loading-state -->
     <div class="view-state" id="xxx-loading"> ... </div>
     <!-- empty-state -->
     <div class="view-state" id="xxx-empty"> ... </div>
     <!-- ready-state -->
     <div class="view-state" id="xxx-ready"> ... </div>

   JS 制御: .is-active の付け外しのみ。style.display 直書き禁止。
   状態は常に単一（同時表示禁止）。
*/
.view-state { display: none; }
.view-state.is-active { display: block; }

/* ==========================================================
   iOS Safari — ダブルタップ拡大禁止（§7-2 準拠）

   touch-action: manipulation はダブルタップズームを無効化し、
   ピンチズームは維持する。全要素に適用。
   ========================================================== */
*, *::before, *::after {
  touch-action: manipulation;
}

/* ==========================================================
   iOS Safari — input 自動ズーム防止トークン

   iOS Safari は font-size < 16px の input にフォーカスすると
   自動ズームする。各コンポーネントの CSS で --input-font-size を
   使用して 16px 以上を保証すること。
   グローバル一括適用はせず、コンポーネント単位で適用する。
   ========================================================== */

/* ==========================================================
   Scrollbar Layout Stabilization — ★撤去

   全ページが overflow:hidden + 内部スクロール方式のため
   scrollbar-gutter: stable は不要（右端に空きスペースが出る副作用）。
   ========================================================== */

/* ==========================================================
   Shell Placeholder  —  JS 実行前のちらつき抑制

   ★ 現在のモック構成（MPA）ではページ遷移でフルリロードが発生する。
     navbar.js / sidebar.js が実行されるまでの空白を防ぐため、
     プレースホルダー要素に背景色だけを先行適用する。
   ========================================================== */

/* Navbar placeholder: JS 実行前に最終形に近いレイアウトを先行描画
   navbar.js が outerHTML で置き換えるまで表示される。
   ::before = ロゴ領域、::after = アバター領域を模倣し、
   置き換え時の視覚ジャンプを最小化する。 */
#prmone-navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  background-color: var(--primary-700);
  z-index: var(--z-navbar);
  display: flex;
  align-items: center;
}
#prmone-navbar::before {
  /* ロゴプレースホルダー */
  content: '';
  width: 110px; height: 33px;
  margin-left: 16px;
  background: rgba(255,255,255,0.15);
  border-radius: 4px;
  flex-shrink: 0;
}
#prmone-navbar::after {
  /* アバタープレースホルダー（右端に配置） */
  content: '';
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  margin-left: auto;
  margin-right: 20px;
  flex-shrink: 0;
}

/* ==========================================================
   Tag / Badge — 正式 semantic 4色 共通クラス（KAN-19 v0.3 確定）

   意味定義: docs/KAN-19-semantic-definition-draft.md

   正式 semantic（4色）:
     neutral  — 中立・終了・無効・分類（行動不要）
     primary  — 有効・正常・進行中（正常稼働中）
     warning  — 要対応・要確認・期限接近（行動要求）
     danger   — 異常・失敗・却下・期限超過（ブロッキング）

   使い方: <span class="prmone-tag prmone-tag--primary">Active</span>
   既存の .tag--* / .badge--* は段階的にこのクラスへ移行する。

   使用禁止:
     - カテゴリ・属性に warning / danger を使わない
     - primary を装飾目的で使わない
     - semantic color で selected 状態を表現しない
   ========================================================== */
.prmone-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: var(--radius-full, 9999px);
  font-size: var(--text-xs, 0.72rem);
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.prmone-tag--neutral {
  background: var(--tag-neutral-bg);
  color: var(--tag-neutral-text);
}
.prmone-tag--primary {
  background: var(--tag-primary-bg);
  color: var(--tag-primary-text);
}
.prmone-tag--warning {
  background: var(--tag-warning-bg);
  color: var(--tag-warning-text);
}
.prmone-tag--danger {
  background: var(--tag-danger-bg);
  color: var(--tag-danger-text);
}

/* ── guard-pending: fail-closed 権限ガード（KAN-69）──
   保護ページは HTML に class="guard-pending" を付けて初期非表示にする。
   guardPage / guardFromPolicy が権限 OK を返した後に JS で解除する。
   「DOM を生成してから消す」ではなく「権限 OK まで見せない」設計。 */
html.guard-pending body {
  visibility: hidden !important;  /* display:none だとレイアウント計算されない。visibility で空間は確保 */
}

/* Sidebar placeholder: グレー縦バーを JS 実行前に即座に表示 */
#prmone-sidebar {
  position: fixed;
  top: var(--nav-h);
  left: 0;
  width: var(--sidebar-w);
  height: calc(100vh - var(--nav-h));
  background-color: var(--bg-app);
  border-right: var(--border-w) solid var(--border-color);
  z-index: var(--z-sidebar);
}

/* ==========================================================
   Content Offset — body 状態クラスによる変数上書き
   付与責務:
     has-prmone-mobile-tabs — sidebar.js がモバイルB層タブ生成時に付与
     has-prmone-bottom-nav  — sidebar.js がモバイルbottom-nav生成時に付与
   条件:
     has-prmone-mobile-tabs = B層タブが存在する画面（768px以下で表示）
     has-prmone-bottom-nav  = モバイルbottom-navが存在する画面（desktop only画面には付かない）
     両者は独立概念（B層ありでbottom-navなし、またはその逆がありうる）
========================================================== */
body.has-prmone-mobile-tabs {
  --content-top-offset: calc(var(--nav-h) + var(--bnav-h));
}
body.has-prmone-bottom-nav {
  --content-bottom-offset: var(--bottomnav-h);
}
body:not(.has-prmone-bottom-nav) {
  --content-bottom-offset: 0px;
}

/* ── Global font（UI Shell v1.73 §2-2-1）── */
body {
  font-family: var(--font-sans);
}

/* ── prmone-list: SmartNews型リスト標準（KAN-136）── */
.prmone-list {
  padding: 0;
  margin: 0;
  list-style: none;
}
.prmone-list-item {
  display: flex;
  gap: var(--space-3, 12px);
  padding: var(--space-3, 12px) var(--space-4, 16px);
  border-bottom: 1px solid var(--border-color, #e5e5e5);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.prmone-list-item:last-child {
  border-bottom: none;
}
.prmone-list-content {
  flex: 1;
  min-width: 0;
}
.prmone-list-title {
  font-size: var(--text-base, 0.9rem);
  font-weight: 600;
  line-height: var(--line-height-base, 1.5);
  margin: 0 0 var(--space-1, 2px);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.prmone-list-meta {
  font-size: var(--text-sm, 0.75rem);
  color: var(--text-muted, #999);
}
.prmone-list-thumb {
  flex-shrink: 0;
}
.prmone-list-thumb img {
  width: 96px;
  height: 68px;
  object-fit: cover;
  border-radius: 0;
  display: block;
}