@charset "UTF-8";
/* ==========================================================================
   エンドユーザーポータル デザインシステム
   - このファイルはエンドユーザー画面(/enduser/*)専用。
     管理者(/admin/*)・顧客(/customer/*)画面には読み込まれない。
   - Bootstrap / Adminator には依存しない。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. トークン
   -------------------------------------------------------------------------- */
:root {
    /* 面 */
    --surface-canvas: #f4f5f7;
    --surface-panel: #ffffff;
    --surface-subtle: #f6f8fa;
    --surface-head: #e9edf2;   /* 表の見出し行。本文の白とはっきり差をつける */
    --surface-hover: #eef2f7;
    --surface-selected: #e5eef8;
    --surface-disabled: #f0f1f4;

    /* 文字
       補助テキストが入力欄のプレースホルダーと見分けられなくなるため、
       secondary は白背景で7:1以上を確保する。 */
    --text-primary: #1a1e24;
    --text-secondary: #4a525e;
    --text-disabled: #79818d;
    --text-inverse: #ffffff;

    /* 罫線。面の区切りが分かる程度に留め、罫線自体を主張させない */
    --border-subtle: #dfe3e8;
    --border-default: #c6ccd4;
    --border-strong: #9aa3ae;

    /* アクセント（識別・現在地・リンク・選択・フォーカス）
       契約ごとのテーマから供給される。未設定時は既定の水色にフォールバックする。 */
    --theme-base: #0b7f9b;
    --theme-hover: #096d85;
    --theme-soft: #ebf5f7;
    --theme-soft-strong: #cee5eb;
    --theme-tint: #f4f9fb;
    --theme-nav: #e2f0f3;
    --theme-nav-hover: #d2e7ec;
    --theme-nav-border: #b7d8e0;
    --theme-nav-pattern: rgba(11, 127, 155, .16);

    --accent: var(--theme-base);
    --accent-hover: var(--theme-hover);
    --accent-soft: var(--theme-soft);
    --accent-contrast: #ffffff;

    /* 状態色（アクセントから独立。テーマを変えても意味を変えない） */
    --success: #1f7a4d;
    --success-soft: #e6f3ec;
    --warning: #9a6400;
    --warning-soft: #fbf0da;
    --danger: #b3261e;
    --danger-soft: #fbe9e7;
    --danger-hover: #8f1e18;
    --info: #2f6fb0;
    --info-soft: #e5eef8;
    --neutral: #5b6470;
    --neutral-soft: #eef0f2;

    /* 余白 */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-8: 32px;

    /* 形 */
    --radius-sm: 2px;
    --radius: 3px;
    --radius-panel: 6px;
    --shadow-floating: 0 4px 12px rgba(31, 35, 40, .14);

    /* 寸法 */
    --control-h: 36px;
    --control-h-sm: 30px;
    --nav-w: 240px;
    --topbar-h: 52px;

    /* 文字サイズ。長時間の業務利用に耐えるよう、本文は14pxを基準にする */
    --fz-xs: 12px;
    --fz-sm: 13px;
    --fz-body: 14px;
    --fz-lg: 16px;
    --fz-title: 22px;
}


/* --------------------------------------------------------------------------
   1-b. 契約ごとの表示テーマ
   色は全て「白文字を載せてWCAG AA(4.5:1)以上」を満たす値に調整済み。
   値を変更する場合はコントラスト比を再計測すること。
   ステータス色（成功/警告/危険/進行中）はテーマから独立させ、ここでは触らない。
   -------------------------------------------------------------------------- */
[data-ui-theme="aqua"] {
    --theme-base: #0B7F9B;
    --theme-hover: #096D85;
    --theme-soft: #EBF5F7;
    --theme-soft-strong: #CEE5EB;
    --theme-tint: #F4F9FB;
    --theme-nav: #E2F0F3;
    --theme-nav-hover: #D2E7EC;
    --theme-nav-border: #B7D8E0;
    --theme-nav-pattern: rgba(11, 127, 155, .16);
}

[data-ui-theme="green"] {
    --theme-base: #22855C;
    --theme-hover: #1D724F;
    --theme-soft: #EDF5F2;
    --theme-soft-strong: #D3E7DE;
    --theme-tint: #F5FAF8;
    --theme-nav: #E4F0EB;
    --theme-nav-hover: #D3E7DF;
    --theme-nav-border: #BAD9CE;
    --theme-nav-pattern: rgba(34, 133, 92, .16);
}

[data-ui-theme="blue"] {
    --theme-base: #2470C4;
    --theme-hover: #1F60A9;
    --theme-soft: #EDF4FA;
    --theme-soft-strong: #D3E2F3;
    --theme-tint: #F5F9FC;
    --theme-nav: #E5EEF8;
    --theme-nav-hover: #D3E2F3;
    --theme-nav-border: #BACFEB;
    --theme-nav-pattern: rgba(36, 112, 196, .16);
}

[data-ui-theme="indigo"] {
    --theme-base: #5C68C8;
    --theme-hover: #4F59AC;
    --theme-soft: #F2F3FB;
    --theme-soft-strong: #DEE1F4;
    --theme-tint: #F8F8FD;
    --theme-nav: #EBEDF8;
    --theme-nav-hover: #DEE1F4;
    --theme-nav-border: #CBD0EE;
    --theme-nav-pattern: rgba(92, 104, 200, .16);
}

[data-ui-theme="purple"] {
    --theme-base: #9350BC;
    --theme-hover: #7E45A2;
    --theme-soft: #F6F1FA;
    --theme-soft-strong: #E9DCF2;
    --theme-tint: #FAF7FC;
    --theme-nav: #F2EAF7;
    --theme-nav-hover: #EADCF2;
    --theme-nav-border: #DEC9EA;
    --theme-nav-pattern: rgba(147, 80, 188, .16);
}

[data-ui-theme="pink"] {
    --theme-base: #CC3C74;
    --theme-hover: #AF3464;
    --theme-soft: #FBEFF4;
    --theme-soft-strong: #F5D8E3;
    --theme-tint: #FDF6F9;
    --theme-nav: #F9E8EE;
    --theme-nav-hover: #F5D8E3;
    --theme-nav-border: #EFC2D3;
    --theme-nav-pattern: rgba(204, 60, 116, .16);
}

[data-ui-theme="red"] {
    --theme-base: #D03D33;
    --theme-hover: #B3342C;
    --theme-soft: #FBEFEF;
    --theme-soft-strong: #F6D8D6;
    --theme-tint: #FDF6F6;
    --theme-nav: #F9E8E7;
    --theme-nav-hover: #F6D8D6;
    --theme-nav-border: #F0C3C0;
    --theme-nav-pattern: rgba(208, 61, 51, .16);
}

[data-ui-theme="orange"] {
    --theme-base: #B85512;
    --theme-hover: #9E490F;
    --theme-soft: #F9F1EC;
    --theme-soft-strong: #F1DDD0;
    --theme-tint: #FCF7F4;
    --theme-nav: #F6EBE3;
    --theme-nav-hover: #F1DDD0;
    --theme-nav-border: #E9CAB6;
    --theme-nav-pattern: rgba(184, 85, 18, .16);
}

[data-ui-theme="brown"] {
    --theme-base: #916A50;
    --theme-hover: #7D5B45;
    --theme-soft: #F6F3F1;
    --theme-soft-strong: #E9E1DC;
    --theme-tint: #FAF8F7;
    --theme-nav: #F2EDEA;
    --theme-nav-hover: #E9E1DC;
    --theme-nav-border: #DDD1CA;
    --theme-nav-pattern: rgba(145, 106, 80, .16);
}

[data-ui-theme="graphite"] {
    --theme-base: #5F6873;
    --theme-hover: #525963;
    --theme-soft: #F2F3F4;
    --theme-soft-strong: #DFE1E3;
    --theme-tint: #F8F8F9;
    --theme-nav: #ECEDEE;
    --theme-nav-hover: #DFE1E3;
    --theme-nav-border: #CDD0D3;
    --theme-nav-pattern: rgba(95, 104, 115, .16);
}

/* --------------------------------------------------------------------------
   2. リセットと基本
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Hiragino Sans", "Hiragino Kaku Gothic ProN",
        "Noto Sans JP", "Yu Gothic UI", "Yu Gothic", Meiryo, sans-serif;
    font-size: var(--fz-body);
    line-height: 1.7;
    color: var(--text-primary);
    background: var(--surface-canvas);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, p, figure, ul, ol, dl, dd {
    margin: 0;
}

ul, ol {
    padding: 0;
    list-style: none;
}

a {
    color: var(--accent);
    text-decoration: none;
}

a:hover {
    color: var(--accent-hover);
    text-decoration: underline;
}

img {
    max-width: 100%;
    height: auto;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

hr {
    border: 0;
    border-top: 1px solid var(--border-subtle);
    margin: var(--sp-5) 0;
}

/* フォーカスは全画面共通で明示する */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

.ui-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* キーボード利用者向けの本文スキップ */
.ui-skip-link {
    position: absolute;
    left: var(--sp-3);
    top: -60px;
    z-index: 100;
    padding: var(--sp-2) var(--sp-4);
    background: var(--surface-panel);
    border: 1px solid var(--border-default);
    border-radius: var(--radius);
    transition: top .12s ease;
}

.ui-skip-link:focus {
    top: var(--sp-3);
}

/* --------------------------------------------------------------------------
   3. シェル

   構造:
     [グローバルバー（横・全体スコープ）]
     [契約ナビ（テーマ色＋柄）] [スコープヘッダー]
                                [本文]

   契約に属さない画面（ホーム／契約一覧／登録情報）では契約ナビを出さず、
   本文が全幅を使う。
   -------------------------------------------------------------------------- */
.ui-app {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/*
   画面内で完結させるページ（トーク）。

   ページ全体はスクロールさせず、内側のメッセージ一覧だけをスクロールさせる。
   こうすると入力欄が常に画面下に残り、かつメッセージはすべて一覧の
   スクロールで到達できる（隠れない）。

   100dvh はモバイルのアドレスバー伸縮に追従させるため。
   未対応ブラウザ向けに 100vh を先に書いておく。
*/
.ui-app--fixed {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
}

.ui-body {
    flex: 1 1 auto;
    display: flex;
    min-height: 0;
    align-items: stretch;
}

.ui-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--surface-canvas);
}

.ui-app--fixed .ui-main {
    min-height: 0;
}

.ui-content {
    flex: 1 1 auto;
    padding: var(--sp-5);
    min-width: 0;
}

.ui-content--flush {
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.ui-footer {
    padding: var(--sp-4) var(--sp-5);
    border-top: 1px solid var(--border-subtle);
    font-size: var(--fz-sm);
    color: var(--text-secondary);
    text-align: center;
    flex-shrink: 0;
}

/* 画面内で完結させるページでは、入力欄の高さを確保するためフッターを出さない */
.ui-app--fixed .ui-footer {
    display: none;
}

/* --------------------------------------------------------------------------
   3-a. グローバルバー（全体スコープ）
   テーマは「薄いティント」だけに留め、広い面積を高彩度で塗らない。
   -------------------------------------------------------------------------- */
.ui-globalbar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    min-height: var(--topbar-h);
    padding: 0 var(--sp-5);
    background: var(--theme-tint);
    border-bottom: 1px solid var(--theme-soft-strong);
    position: sticky;
    top: 0;
    z-index: 30;
}

.ui-globalbar__brand {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex: 0 0 auto;
    max-width: 200px;
}

.ui-globalbar__logo {
    max-height: 28px;
    max-width: 180px;
    object-fit: contain;
}

.ui-globalbar__brand-text {
    font-size: var(--fz-sm);
    font-weight: 700;
    color: var(--theme-hover);
    white-space: nowrap;
}

/* 自社ロゴ。クリックでダッシュボードに戻る */
.ui-globalbar__home {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-1);
    border-radius: var(--radius);
}

.ui-globalbar__home:hover {
    background: var(--theme-soft);
}

.ui-globalbar__mark {
    display: block;
    width: 26px;
    height: 26px;
    object-fit: contain;
}

.ui-globalnav {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.ui-globalnav::-webkit-scrollbar {
    display: none;
}

.ui-globalnav__link {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    height: 36px;
    padding: 0 var(--sp-3);
    border-radius: var(--radius);
    color: var(--text-primary);
    white-space: nowrap;
    line-height: 1;
}

/* 項目のアイコン。文字の補助であり、単独で意味を運ばせない */
.ui-globalnav__icon {
    flex: 0 0 auto;
    color: var(--theme-base);
}

.ui-globalnav__link[aria-current="page"] .ui-globalnav__icon {
    color: var(--theme-hover);
}

.ui-globalnav__link:hover {
    background: var(--theme-soft);
    color: var(--theme-hover);
    text-decoration: none;
}

/* 現在地は背景・太字・下線インジケーターの3つで示す */
.ui-globalnav__link[aria-current="page"] {
    background: var(--theme-soft-strong);
    color: var(--theme-hover);
    font-weight: 700;
    box-shadow: inset 0 -2px 0 var(--theme-base);
}

.ui-globalbar__right {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex: 0 0 auto;
}

/* ログイン中の管理者。アイコンだけを出し、自分の設定画面への入口も兼ねる */
.ui-globalbar__user {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    border-radius: 50%;
}

.ui-globalbar__user:hover .ui-avatar {
    box-shadow: 0 0 0 2px var(--theme-base);
}

/* 担当者ポータルは、アイコンの手前にお名前も出す（誰として見ているかを言葉でも示す） */
.ui-globalbar__name {
    flex: 0 0 auto;
    color: var(--text-secondary);
    font-size: var(--fz-sm);
    white-space: nowrap;
}

.ui-logout {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    height: 30px;
    padding: 0 var(--sp-3);
    border: 1px solid var(--theme-soft-strong);
    border-radius: var(--radius);
    background: var(--surface-panel);
    color: var(--text-secondary);
    font-size: var(--fz-sm);
    cursor: pointer;
    white-space: nowrap;
}

.ui-logout:hover {
    background: var(--theme-soft);
    border-color: var(--theme-base);
    color: var(--theme-hover);
    text-decoration: none;
}

/* ナビ開閉ボタン（狭い画面のみ表示） */
.ui-navtoggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: transparent;
    border: 1px solid var(--theme-soft-strong);
    border-radius: var(--radius);
    color: var(--theme-hover);
    cursor: pointer;
}

.ui-navtoggle:hover {
    background: var(--theme-soft);
}

/* --------------------------------------------------------------------------
   3-b. 契約ナビ（局所スコープ・テーマ色）

   テーマ色は「薄いティント（--theme-nav）」として敷き、文字は通常の濃い色を使う。
   長時間見る面を高彩度で塗らないことで、目の疲れとコントラスト低下を避ける。
   テーマ色そのものは、現在地・アイコン・区切り線といった狭い面積に集中させる。

   現在地は色だけに依存させず、
   「塗りつぶし」「太字」「左端のインジケーター」の3つで示す。
   柄は不透明度16%までに抑え、ラベルの可読性を落とさない。
   -------------------------------------------------------------------------- */
.ui-scopenav {
    flex: 0 0 var(--nav-w);
    width: var(--nav-w);
    background-color: var(--theme-nav);
    border-right: 1px solid var(--theme-nav-border);
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
    align-self: stretch;
}

.ui-scopenav__inner {
    position: sticky;
    top: var(--topbar-h);
    max-height: calc(100vh - var(--topbar-h));
    overflow-y: auto;
    padding: var(--sp-3) 0 var(--sp-5);
}

/* 画面内で完結させるページでは親が高さを持つので、sticky ではなく実寸で追従させる */
.ui-app--fixed .ui-scopenav {
    min-height: 0;
}

.ui-app--fixed .ui-scopenav__inner {
    position: static;
    max-height: none;
    height: 100%;
}

/* 余白のない本文でも、フラッシュメッセージだけは余白を持たせる */
.ui-content--flush > .ui-flash {
    flex-shrink: 0;
    margin: var(--sp-3) var(--sp-5) 0;
}

/* 柄。薄い背景の上に、テーマ色を低い不透明度で重ねる */
.ui-scopenav--dot {
    background-image: radial-gradient(var(--theme-nav-pattern) 1.5px, transparent 1.6px);
    background-size: 16px 16px;
}

.ui-scopenav--stripe {
    background-image: repeating-linear-gradient(
        -45deg,
        var(--theme-nav-pattern) 0 6px,
        rgba(255, 255, 255, 0) 6px 14px
    );
}

.ui-scopenav__label {
    padding: var(--sp-2) var(--sp-4) var(--sp-1);
    font-size: var(--fz-xs);
    font-weight: 700;
    color: var(--text-secondary);
    letter-spacing: .06em;
}

.ui-scopenav__link {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-height: 40px;
    margin: 0 var(--sp-2) 2px;
    padding: var(--sp-2) var(--sp-3);
    border-left: 3px solid transparent;
    border-radius: var(--radius);
    color: var(--text-primary);
    font-weight: 600;
    line-height: 1.5;
}

.ui-scopenav__link:hover {
    background: var(--theme-nav-hover);
    color: var(--text-primary);
    text-decoration: none;
}

/* 現在地は塗りつぶし・太字・左端のインジケーターで示す */
.ui-scopenav__link[aria-current="page"] {
    background: var(--theme-base);
    border-left-color: var(--theme-hover);
    color: var(--text-inverse);
    font-weight: 700;
}

.ui-scopenav__link[aria-current="page"]:hover {
    background: var(--theme-hover);
    color: var(--text-inverse);
}

/* アイコンはテーマ色で色を添える。現在地では反転する */
.ui-scopenav__icon {
    color: var(--theme-base);
}

.ui-scopenav__link[aria-current="page"] .ui-scopenav__icon {
    color: var(--text-inverse);
}

.ui-scopenav__icon {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
}

.ui-scopenav__count {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    height: 18px;
    padding: 0 var(--sp-2);
    border-radius: 9px;
    background: var(--danger);
    color: var(--text-inverse);
    font-size: var(--fz-xs);
    font-weight: 700;
    line-height: 1;
}

.ui-scopenav__link[aria-current="page"] .ui-scopenav__count {
    background: var(--danger);
    color: var(--text-inverse);
}

/* 外部リンクは局所ナビと役割が違うので区切って置く */
.ui-scopenav__divider {
    margin: var(--sp-3) var(--sp-4);
    border-top: 1px solid var(--theme-nav-border);
}

.ui-scopenav__external {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    min-height: 34px;
    margin: 0 var(--sp-2);
    padding: var(--sp-1) var(--sp-3);
    border-left: 3px solid transparent;
    border-radius: var(--radius);
    color: var(--theme-hover);
    font-size: var(--fz-sm);
}

.ui-scopenav__external:hover {
    background: var(--theme-nav-hover);
    color: var(--theme-hover);
    text-decoration: underline;
}

/* 狭い画面でナビを開いたときの背景 */
.ui-nav-scrim {
    display: none;
}

/* --------------------------------------------------------------------------
   4. スコープヘッダー（どの契約を操作中かを常時示す）
   -------------------------------------------------------------------------- */
.ui-scopebar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-3);
    padding: var(--sp-3) var(--sp-5);
    background: var(--surface-panel);
    border-bottom: 1px solid var(--border-default);
}

.ui-scope__kind {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 var(--sp-2);
    border-radius: var(--radius);
    background: var(--theme-base);
    color: var(--text-inverse);
    font-size: var(--fz-xs);
    font-weight: 700;
    white-space: nowrap;
}

.ui-scope__name {
    font-size: var(--fz-lg);
    font-weight: 700;
    line-height: 1.4;
    margin-right: auto;
}

.ui-scope__key {
    margin-left: var(--sp-2);
    font-size: var(--fz-sm);
    font-weight: 400;
    color: var(--text-disabled);
}

/* --------------------------------------------------------------------------
   5. ページ見出し
   -------------------------------------------------------------------------- */
.ui-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-4);
    flex-wrap: wrap;
    margin-bottom: var(--sp-4);
}

.ui-page-head__title {
    font-size: var(--fz-title);
    font-weight: 700;
    line-height: 1.4;
}

.ui-page-head__lead {
    margin-top: var(--sp-1);
    font-size: var(--fz-sm);
    color: var(--text-secondary);
}

.ui-page-head__actions {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   6. パネルとセクション
   -------------------------------------------------------------------------- */
.ui-panel {
    background: var(--surface-panel);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-panel);
}

.ui-panel--pad {
    padding: var(--sp-5);
}

.ui-panel + .ui-panel {
    margin-top: var(--sp-5);
}

/* 横に並べる入れ物の中では、縦に積むための余白を打ち消す。
   これが残っていると2枚目だけ下がり、隣り合うパネルの上辺がずれる。 */
.ui-chartgrid > .ui-panel + .ui-panel,
.ui-halfgrid > .ui-panel + .ui-panel {
    margin-top: 0;
}

/* カードで囲わず、見出しと罫線で区切るためのセクション */
.ui-section + .ui-section {
    margin-top: var(--sp-6);
}

.ui-section__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-3);
    flex-wrap: wrap;
    padding-bottom: var(--sp-2);
    border-bottom: 1px solid var(--border-default);
    margin-bottom: var(--sp-3);
}

.ui-section__title {
    font-size: var(--fz-lg);
    font-weight: 700;
}

.ui-section__meta {
    font-size: var(--fz-sm);
    color: var(--text-secondary);
}

.ui-note {
    font-size: var(--fz-sm);
    color: var(--text-secondary);
}

.ui-callout {
    padding: var(--sp-3) var(--sp-4);
    background: var(--surface-subtle);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    font-size: var(--fz-sm);
    color: var(--text-secondary);
}

/* --------------------------------------------------------------------------
   7. ボタン
   -------------------------------------------------------------------------- */
.ui-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    height: var(--control-h);
    padding: 0 var(--sp-4);
    border: 1px solid var(--border-default);
    border-radius: var(--radius);
    background: var(--surface-panel);
    color: var(--text-primary);
    font-size: var(--fz-body);
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    transition: background-color .12s ease, border-color .12s ease;
}

.ui-btn:hover {
    background: var(--surface-hover);
    border-color: var(--border-strong);
    color: var(--text-primary);
    text-decoration: none;
}

.ui-btn:disabled,
.ui-btn[aria-disabled="true"] {
    background: var(--surface-disabled);
    color: var(--text-disabled);
    border-color: var(--border-subtle);
    cursor: not-allowed;
}

/* 主操作は画面（領域）につき1つ */
.ui-btn--primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-contrast);
    font-weight: 600;
}

.ui-btn--primary:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    color: var(--accent-contrast);
}

.ui-btn--primary:disabled {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-contrast);
    opacity: .5;
}

/* 破壊的操作は通常操作と見た目を揃えない */
.ui-btn--danger {
    background: var(--surface-panel);
    border-color: var(--danger);
    color: var(--danger);
    font-weight: 600;
}

.ui-btn--danger:hover {
    background: var(--danger);
    border-color: var(--danger);
    color: var(--text-inverse);
}

.ui-btn--sm {
    height: var(--control-h-sm);
    padding: 0 var(--sp-3);
    font-size: var(--fz-sm);
}

.ui-btn--block {
    width: 100%;
}

.ui-btn--quiet {
    border-color: transparent;
    background: transparent;
    color: var(--accent);
}

.ui-btn--quiet:hover {
    background: var(--surface-hover);
    border-color: var(--border-default);
    color: var(--accent-hover);
}

/* 操作の並び。主操作を右端に置く */
.ui-actions {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
}

.ui-actions--end {
    justify-content: flex-end;
}

.ui-form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--sp-2);
    flex-wrap: wrap;
    margin-top: var(--sp-6);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--border-subtle);
}

/* 危険な操作は通常の保存操作から距離を置く */
.ui-danger-zone {
    margin-top: var(--sp-8);
    padding: var(--sp-4);
    border: 1px solid var(--danger);
    border-radius: var(--radius);
    background: var(--surface-panel);
}

.ui-danger-zone__title {
    font-size: var(--fz-body);
    font-weight: 700;
    color: var(--danger);
    margin-bottom: var(--sp-1);
}

.ui-danger-zone__body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   8. 検索・絞り込み
   -------------------------------------------------------------------------- */
.ui-search {
    background: var(--surface-panel);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-panel);
    padding: var(--sp-3) var(--sp-4);
    margin-bottom: var(--sp-3);
}

.ui-search__row {
    display: flex;
    align-items: flex-end;
    gap: var(--sp-3);
    flex-wrap: wrap;
}

.ui-search__field {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    min-width: 0;
}

/* 選択肢の文字が矢印に重ならない幅を確保する */
.ui-search__field .ui-select {
    min-width: 168px;
}

.ui-search__label {
    font-size: var(--fz-xs);
    font-weight: 600;
    color: var(--text-secondary);
}

/* 実行ボタンは条件のすぐ隣に置き、どの条件で検索するのか分かるようにする */
.ui-search__actions {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

/* 適用中の条件 */
.ui-applied {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
    margin-top: var(--sp-3);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--border-subtle);
    font-size: var(--fz-sm);
}

.ui-applied__label {
    color: var(--text-secondary);
}

.ui-applied__chip {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    height: 24px;
    padding: 0 var(--sp-1) 0 var(--sp-2);
    border: 1px solid var(--border-default);
    border-radius: var(--radius);
    background: var(--surface-subtle);
    color: var(--text-primary);
    font-size: var(--fz-sm);
}

.ui-applied__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    text-decoration: none;
    font-size: var(--fz-sm);
    line-height: 1;
}

.ui-applied__remove:hover {
    background: var(--surface-hover);
    color: var(--text-primary);
    text-decoration: none;
}

/* 結果サマリ（件数・現在範囲） */
.ui-result-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    flex-wrap: wrap;
    margin-bottom: var(--sp-2);
}

.ui-result-count {
    font-size: var(--fz-sm);
    color: var(--text-secondary);
}

.ui-result-count strong {
    color: var(--text-primary);
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   9. フォーム
   -------------------------------------------------------------------------- */
.ui-form {
    max-width: 760px;
}

/*
   入力欄どうしの間隔。横並びのまとまり（.ui-fieldgrid）を挟んでも
   間隔が抜けないよう、隣り合う組み合わせをすべて拾う。
   まとまりの中の先頭要素は style="margin-top:0" で個別に打ち消している。
*/
.ui-field + .ui-field,
.ui-field + .ui-fieldgrid,
.ui-fieldgrid + .ui-field,
.ui-fieldgrid + .ui-fieldgrid {
    margin-top: var(--sp-4);
}

.ui-label {
    display: block;
    font-size: var(--fz-body);
    font-weight: 600;
    margin-bottom: var(--sp-1);
}

.ui-required {
    display: inline-block;
    margin-left: var(--sp-1);
    padding: 0 var(--sp-1);
    border-radius: var(--radius-sm);
    background: var(--danger-soft);
    color: var(--danger);
    font-size: var(--fz-xs);
    font-weight: 700;
    vertical-align: middle;
}

.ui-optional {
    display: inline-block;
    margin-left: var(--sp-1);
    color: var(--text-disabled);
    font-size: var(--fz-xs);
    font-weight: 400;
    vertical-align: middle;
}

.ui-input,
.ui-select,
.ui-textarea,
.ui-file {
    width: 100%;
    padding: 0 var(--sp-3);
    height: var(--control-h);
    border: 1px solid var(--border-default);
    border-radius: var(--radius);
    background: var(--surface-panel);
    font-size: var(--fz-body);
}

.ui-textarea {
    height: auto;
    padding: var(--sp-2) var(--sp-3);
    line-height: 1.7;
    resize: vertical;
}

.ui-file {
    height: auto;
    padding: var(--sp-2) var(--sp-3);
    line-height: 1.5;
}

.ui-input:hover,
.ui-select:hover,
.ui-textarea:hover {
    border-color: var(--border-strong);
}

.ui-input:focus,
.ui-select:focus,
.ui-textarea:focus,
.ui-file:focus {
    outline: 2px solid var(--accent);
    outline-offset: 0;
    border-color: var(--accent);
}

.ui-select {
    appearance: none;
    padding-right: var(--sp-6);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%235b6470' d='M0 0h10L5 6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--sp-3) center;
}

/* 入力内容に合う幅を与える（一律100%にしない） */
.ui-w-xs { max-width: 120px; }
.ui-w-sm { max-width: 200px; }
.ui-w-md { max-width: 320px; }
.ui-w-lg { max-width: 480px; }
.ui-w-xl { max-width: 640px; }

.ui-hint {
    margin-top: var(--sp-1);
    font-size: var(--fz-sm);
    color: var(--text-secondary);
}

.ui-error {
    margin-top: var(--sp-1);
    font-size: var(--fz-sm);
    color: var(--danger);
    font-weight: 600;
}

.ui-input[aria-invalid="true"],
.ui-textarea[aria-invalid="true"],
.ui-select[aria-invalid="true"] {
    border-color: var(--danger);
    background: var(--danger-soft);
}

.ui-check {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    cursor: pointer;
    font-size: var(--fz-sm);
}

.ui-check input {
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
}

/* 添付ファイルの一覧 */
.ui-filelist {
    border: 1px solid var(--border-default);
    border-radius: var(--radius);
    overflow: hidden;
}

.ui-filelist__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-3);
    background: var(--surface-panel);
}

.ui-filelist__item + .ui-filelist__item {
    border-top: 1px solid var(--border-subtle);
}

/* 定義リスト（詳細画面の属性表示） */
.ui-dl {
    border: 1px solid var(--border-default);
    border-radius: var(--radius);
    overflow: hidden;
}

.ui-dl__row {
    display: flex;
    /* 見出し側の背景を行の高さいっぱいに伸ばす。
       flex-start にすると内容が複数行になったとき見出しの下に隙間ができる。 */
    align-items: stretch;
    border-bottom: 1px solid var(--border-subtle);
}

.ui-dl__row:last-child {
    border-bottom: 0;
}

.ui-dl__key {
    flex: 0 0 200px;
    padding: var(--sp-3) var(--sp-4);
    background: var(--surface-subtle);
    font-weight: 600;
    color: var(--text-secondary);
}

.ui-dl__val {
    flex: 1 1 auto;
    min-width: 0;
    padding: var(--sp-3) var(--sp-4);
}

/* --------------------------------------------------------------------------
   10. テーブル
   -------------------------------------------------------------------------- */
.ui-tablewrap {
    background: var(--surface-panel);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-panel);
    overflow-x: auto;
}

.ui-table {
    width: 100%;
    font-size: var(--fz-body);
}

.ui-table th,
.ui-table td {
    padding: var(--sp-2) var(--sp-3);
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--border-subtle);
}

.ui-table thead th {
    background: var(--surface-head);
    border-bottom: 1px solid var(--border-default);
    font-size: var(--fz-sm);
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    vertical-align: middle;
}

.ui-table tbody tr:last-child td {
    border-bottom: 0;
}

.ui-table tbody tr:hover {
    background: var(--surface-hover);
}

/* 合計行。本文の最終行と混ざらないよう、面と上罫線で区切る */
.ui-table tfoot th,
.ui-table tfoot td {
    background: var(--surface-head);
    border-top: 1px solid var(--border-default);
    border-bottom: 0;
    vertical-align: middle;
}

/* 同じ形の表を複数並べるとき、列幅を揃えて縦に読めるようにする */
.ui-table--fixed {
    table-layout: fixed;
}

.ui-table--fixed td {
    overflow-wrap: anywhere;
}

.ui-table__num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ui-table__date {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
}

.ui-table__actions {
    text-align: right;
    white-space: nowrap;
}

.ui-table__main {
    font-weight: 600;
}

.ui-table__sub {
    display: block;
    margin-top: 2px;
    font-size: var(--fz-sm);
    font-weight: 400;
    color: var(--text-secondary);
}

/* 2行までで省略（概要など） */
.ui-clamp2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 並び替え可能な列見出し */
.ui-sort {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    color: var(--text-secondary);
    text-decoration: none;
}

.ui-sort:hover {
    color: var(--accent-hover);
    text-decoration: underline;
}

.ui-sort__mark {
    font-size: 9px;
    color: var(--text-disabled);
}

[aria-sort="ascending"] .ui-sort,
[aria-sort="descending"] .ui-sort {
    color: var(--accent-hover);
    font-weight: 700;
}

[aria-sort="ascending"] .ui-sort__mark,
[aria-sort="descending"] .ui-sort__mark {
    color: var(--accent);
}

/* 横スクロールできることを示す */
.ui-scroll-hint {
    display: none;
    margin-bottom: var(--sp-2);
    font-size: var(--fz-sm);
    color: var(--text-secondary);
}

/* --------------------------------------------------------------------------
   11. ステータス表示
   色だけに意味を持たせず、必ず記号 + 文字で示す
   -------------------------------------------------------------------------- */
.ui-status {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    white-space: nowrap;
    line-height: 1.5;
}

.ui-status__mark {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 1.5px solid currentColor;
}

/* 進行中: 塗りつぶし */
.ui-status--progress {
    color: var(--info);
}

.ui-status--progress .ui-status__mark {
    background: currentColor;
}

/* 完了: チェック相当の塗り + 二重丸 */
.ui-status--done {
    color: var(--success);
}

.ui-status--done .ui-status__mark {
    background: currentColor;
    box-shadow: inset 0 0 0 1.5px var(--surface-panel);
}

/* 要対応: 塗りなし + 太い枠 */
.ui-status--attention {
    color: var(--warning);
    font-weight: 700;
}

.ui-status--attention .ui-status__mark {
    border-width: 3px;
}

/* 中立・未着手: 枠のみ */
.ui-status--neutral {
    color: var(--text-secondary);
}

/* 無効・キャンセル: 横棒 */
.ui-status--muted {
    color: var(--text-disabled);
}

.ui-status--muted .ui-status__mark {
    border: 0;
    border-radius: 0;
    height: 2px;
    background: currentColor;
}

.ui-status__text {
    color: var(--text-primary);
}

.ui-status--attention .ui-status__text {
    color: var(--warning);
}

.ui-status--muted .ui-status__text {
    color: var(--text-disabled);
}

.ui-status--danger .ui-status__text {
    color: var(--danger);
}

.ui-status--danger .ui-status__mark {
    border-color: var(--danger);
    background: var(--danger);
}

/*
   ステータスの丸角タグ。
   一覧で状態を一目で拾えるよう、面の色で区別する。
   色だけに意味を持たせないよう、必ず状態名の文字を中に入れる。
*/
.ui-chip {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 var(--sp-3);
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: var(--fz-sm);
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

/* 未着手・区分なし */
.ui-chip--neutral {
    background: var(--neutral-soft);
    border-color: #d3d8de;
    color: var(--text-secondary);
}

/* 進行中 */
.ui-chip--progress {
    background: var(--info-soft);
    border-color: #c3d7ee;
    color: var(--info);
}

/* 完了・取引中 */
.ui-chip--done {
    background: var(--success-soft);
    border-color: #bfdfcd;
    color: var(--success);
}

/* 要対応 */
.ui-chip--attention {
    background: var(--warning-soft);
    border-color: #e8d5a8;
    color: var(--warning);
}

/* 停止・事故 */
.ui-chip--danger {
    background: var(--danger-soft);
    border-color: #f0cdc8;
    color: var(--danger);
}

/* 失注・キャンセル */
.ui-chip--muted {
    background: var(--surface-disabled);
    border-color: var(--border-default);
    color: var(--text-disabled);
}

/* 未読・要対応の件数バッジ */
.ui-badge {
    display: inline-flex;
    align-items: center;
    height: 18px;
    padding: 0 var(--sp-2);
    border-radius: 9px;
    font-size: var(--fz-xs);
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.ui-badge--unread {
    background: var(--danger);
    color: var(--text-inverse);
}

.ui-badge--count {
    background: var(--neutral-soft);
    color: var(--text-secondary);
}

.ui-badge--warning {
    background: var(--warning-soft);
    color: var(--warning);
}

.ui-read {
    font-size: var(--fz-sm);
    color: var(--text-disabled);
}

/* --------------------------------------------------------------------------
   12. 空状態・フラッシュ・エラー要約
   -------------------------------------------------------------------------- */
.ui-empty {
    padding: var(--sp-8) var(--sp-5);
    text-align: center;
    color: var(--text-secondary);
}

.ui-empty__title {
    font-size: var(--fz-body);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--sp-1);
}

.ui-empty__body {
    font-size: var(--fz-sm);
}

.ui-empty__actions {
    margin-top: var(--sp-4);
    display: flex;
    justify-content: center;
    gap: var(--sp-2);
}

.ui-flash {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid;
    border-radius: var(--radius);
    margin-bottom: var(--sp-4);
    font-size: var(--fz-body);
}

.ui-flash__mark {
    font-weight: 700;
    line-height: 1.7;
}

.ui-flash--success {
    background: var(--success-soft);
    border-color: var(--success);
    color: var(--success);
}

.ui-flash--error {
    background: var(--danger-soft);
    border-color: var(--danger);
    color: var(--danger);
}

.ui-flash--info {
    background: var(--info-soft);
    border-color: var(--info);
    color: var(--accent-hover);
}

.ui-errorsummary {
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--danger);
    border-radius: var(--radius);
    background: var(--danger-soft);
    margin-bottom: var(--sp-4);
}

.ui-errorsummary__title {
    font-weight: 700;
    color: var(--danger);
    margin-bottom: var(--sp-1);
}

.ui-errorsummary ul {
    list-style: disc;
    padding-left: var(--sp-5);
    font-size: var(--fz-sm);
}

/* --------------------------------------------------------------------------
   13. ページネーション
   -------------------------------------------------------------------------- */
.ui-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-1);
    flex-wrap: wrap;
    margin-top: var(--sp-4);
}

.ui-pager__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--control-h);
    height: var(--control-h);
    padding: 0 var(--sp-2);
    border: 1px solid var(--border-default);
    border-radius: var(--radius);
    background: var(--surface-panel);
    color: var(--text-primary);
    font-size: var(--fz-sm);
    text-decoration: none;
}

.ui-pager__item:hover {
    background: var(--surface-hover);
    border-color: var(--border-strong);
    color: var(--text-primary);
    text-decoration: none;
}

.ui-pager__item[aria-current="page"] {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-contrast);
    font-weight: 700;
}

.ui-pager__item--disabled {
    color: var(--text-disabled);
    background: var(--surface-disabled);
    border-color: var(--border-subtle);
    cursor: not-allowed;
    pointer-events: none;
}

.ui-pager__gap {
    padding: 0 var(--sp-1);
    color: var(--text-disabled);
}

/* --------------------------------------------------------------------------
   14. ログイン画面
   -------------------------------------------------------------------------- */
.ui-auth {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--sp-6) var(--sp-4);
    background: var(--surface-canvas);
}

.ui-auth__box {
    width: 100%;
    max-width: 400px;
    background: var(--surface-panel);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-panel);
    padding: var(--sp-6);
}

.ui-auth__logo {
    text-align: center;
    margin-bottom: var(--sp-4);
}

.ui-auth__logo img {
    max-width: 220px;
    max-height: 72px;
    object-fit: contain;
}

.ui-auth__title {
    font-size: var(--fz-lg);
    font-weight: 700;
    text-align: center;
    margin-bottom: var(--sp-5);
}

.ui-auth__foot {
    margin-top: var(--sp-5);
    font-size: var(--fz-sm);
    color: var(--text-secondary);
    text-align: center;
}

/* --------------------------------------------------------------------------
   15. トーク（Master–Detail + 会話）
   -------------------------------------------------------------------------- */
/*
   高さは自分で決めず、親（.ui-content--flush）が渡した残りの高さを使う。
   ここで 100vh から引き算をすると、グローバルバーとスコープヘッダーの分だけ
   はみ出して入力欄が画面外に出てしまう。
*/
.ui-talk {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
}

.ui-talk__list {
    flex: 0 0 268px;
    width: 268px;
    border-right: 1px solid var(--border-default);
    background: var(--surface-panel);
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.ui-talk__list-head {
    flex-shrink: 0;
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--border-default);
    font-size: var(--fz-sm);
    font-weight: 700;
    color: var(--text-secondary);
}

.ui-talk__list-body {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
}

.ui-talk__room {
    display: block;
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--border-subtle);
    border-left: 3px solid transparent;
    color: var(--text-primary);
}

.ui-talk__room:hover {
    background: var(--surface-hover);
    color: var(--text-primary);
    text-decoration: none;
}

/* 選択中は色以外（左インジケーター・太字）でも判別できる */
.ui-talk__room[aria-current="true"] {
    background: var(--accent-soft);
    border-left-color: var(--accent);
    font-weight: 700;
}

.ui-talk__room-title {
    /* 未読バッジを行の右端に置く。件名が長いときは折り返す */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    line-height: 1.5;
}

.ui-talk__room-meta {
    display: block;
    margin-top: 2px;
    font-size: var(--fz-xs);
    color: var(--text-secondary);
    font-weight: 400;
}

.ui-talk__main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--surface-canvas);
}

.ui-talk__head {
    flex-shrink: 0;
    padding: var(--sp-3) var(--sp-5);
    background: var(--surface-panel);
    border-bottom: 1px solid var(--border-default);
}

.ui-talk__title {
    font-size: var(--fz-lg);
    font-weight: 700;
    line-height: 1.4;
}

.ui-talk__back {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    margin-top: var(--sp-1);
    font-size: var(--fz-sm);
}

.ui-talk__body {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
    padding: var(--sp-5);
    opacity: 0;
    transition: opacity .3s ease;
}

.ui-talk__body.is-ready {
    opacity: 1;
}

/* 入力欄は縮ませない。メッセージ一覧側が残りの高さを使ってスクロールする */
.ui-talk__foot {
    flex-shrink: 0;
    background: var(--surface-panel);
    border-top: 1px solid var(--border-default);
    padding: var(--sp-3) var(--sp-5);
}

/* 発言 */
.ui-msg {
    display: flex;
    gap: var(--sp-3);
    max-width: 760px;
    margin-bottom: var(--sp-4);
}

.ui-msg__avatar {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--surface-disabled);
}

.ui-msg__col {
    min-width: 0;
    flex: 1 1 auto;
}

.ui-msg__name {
    font-size: var(--fz-xs);
    color: var(--text-secondary);
    margin-bottom: var(--sp-1);
}

/* 短い発言で吹き出しが間延びしないよう、内容の幅に合わせる */
.ui-msg__bubble {
    display: inline-block;
    max-width: 100%;
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-panel);
    background: var(--surface-panel);
    font-size: 14px;
    line-height: 1.8;
    text-align: left;
    overflow-wrap: anywhere;
}

.ui-msg__meta {
    margin-top: var(--sp-1);
    font-size: var(--fz-xs);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

/* 自分の発言は「右寄せ・背景差・名前の位置」の3つで区別する */
.ui-msg--self {
    flex-direction: row-reverse;
    margin-left: auto;
}

/* 自分の発言は吹き出しも右端に寄せる（col が inline-block を包むため） */
.ui-msg--self .ui-msg__col {
    text-align: right;
}

.ui-msg--self .ui-msg__name,
.ui-msg--self .ui-msg__meta {
    justify-content: flex-end;
    text-align: right;
}

.ui-msg--self .ui-msg__bubble {
    background: var(--accent-soft);
    border-color: #bcd3ec;
}

.ui-msg__files {
    margin-top: var(--sp-2);
    padding-top: var(--sp-2);
    border-top: 1px solid var(--border-subtle);
    font-size: var(--fz-sm);
}

.ui-msg__files a {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
}

/* 投稿本文のMarkdown */
.ui-md > *:first-child { margin-top: 0; }
.ui-md > *:last-child { margin-bottom: 0; }
.ui-md p { margin: 0 0 var(--sp-2); }
.ui-md h1 { font-size: 1.4em; font-weight: 700; margin: var(--sp-4) 0 var(--sp-2); }
.ui-md h2 { font-size: 1.2em; font-weight: 700; margin: var(--sp-4) 0 var(--sp-2); }
.ui-md h3 { font-size: 1.05em; font-weight: 700; margin: var(--sp-3) 0 var(--sp-2); }
.ui-md ul { list-style: disc; padding-left: 1.4em; margin: 0 0 var(--sp-2); }
.ui-md ol { list-style: decimal; padding-left: 1.6em; margin: 0 0 var(--sp-2); }
.ui-md blockquote {
    margin: 0 0 var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    border-left: 3px solid var(--border-strong);
    background: var(--surface-subtle);
    color: var(--text-secondary);
}
.ui-md code {
    padding: 1px 4px;
    border-radius: var(--radius-sm);
    background: var(--surface-subtle);
    border: 1px solid var(--border-subtle);
    font-size: .92em;
}
.ui-md pre {
    margin: 0 0 var(--sp-2);
    padding: var(--sp-3);
    border-radius: var(--radius);
    background: var(--surface-subtle);
    border: 1px solid var(--border-subtle);
    overflow-x: auto;
}
.ui-md pre code { border: 0; padding: 0; background: none; }
.ui-md table { width: 100%; margin: 0 0 var(--sp-2); }
.ui-md th, .ui-md td { border: 1px solid var(--border-default); padding: var(--sp-1) var(--sp-2); }
.ui-md hr { margin: var(--sp-3) 0; }

/* 投稿フォーム */
/* 入力欄の開閉。
   会話の表示に高さを譲るため、既定では畳んで細い帯だけを出す。
   帯を押すと開く（<details> の素の動きに乗せている） */
.ui-composer-panel > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--border-default);
    border-radius: var(--radius);
    background: var(--surface-canvas);
    color: var(--text-secondary);
    font-size: var(--fz-sm);
    cursor: pointer;
    list-style: none;
}

/* 既定の三角は出さない（左右に自前の文言を置いているため） */
.ui-composer-panel > summary::-webkit-details-marker {
    display: none;
}

.ui-composer-panel > summary:hover {
    background: var(--surface-hover);
    border-color: var(--border-strong);
}

.ui-composer-panel > summary:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.ui-composer-panel__state {
    flex-shrink: 0;
    color: var(--accent);
    font-weight: 700;
    white-space: nowrap;
}

/* 開いているときと閉じているときで、帯の文言を入れ替える */
.ui-composer-panel:not([open]) .ui-composer-panel__label--open,
.ui-composer-panel[open] .ui-composer-panel__label--closed {
    display: none;
}

/* 開いたときは帯を見出しとして細くし、入力欄との境目をはっきりさせる */
.ui-composer-panel[open] > summary {
    margin-bottom: var(--sp-3);
    border-color: transparent;
    background: transparent;
    padding-left: 0;
    padding-right: 0;
}

.ui-composer {
    display: flex;
    gap: var(--sp-3);
    align-items: flex-start;
}

.ui-composer__main {
    flex: 1 1 auto;
    min-width: 0;
}

.ui-composer__main .ui-emojibtn {
    margin-top: var(--sp-2);
}

.ui-composer__side {
    flex: 0 0 260px;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

/* --------------------------------------------------------------------------
   15-a. 管理者画面で使う部品

   一括操作・出力・アバターなど、担当者ポータルには無い業務要素。
   -------------------------------------------------------------------------- */

/* 一覧の上に置くツールバー。件数・出力・表示切替を近接させる */
.ui-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    flex-wrap: wrap;
    margin-bottom: var(--sp-2);
}

.ui-toolbar__group {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
}

/*
   一括操作バー。
   選択0件でも位置を動かさないよう常に表示し、操作側を無効化する。
   無効の理由が分かるよう、件数を必ず文字で示す。
*/
.ui-bulkbar {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex-wrap: wrap;
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--border-default);
    border-bottom: 0;
    border-radius: var(--radius-panel) var(--radius-panel) 0 0;
    background: var(--surface-subtle);
    font-size: var(--fz-sm);
}

/* 選択があるときだけ背景を変え、状態を色以外（文言）でも示す */
.ui-bulkbar.is-active {
    background: var(--theme-soft);
    border-color: var(--theme-soft-strong);
}

.ui-bulkbar__count {
    font-weight: 700;
}

.ui-bulkbar + .ui-tablewrap {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* 選択チェックボックスの列 */
.ui-table__check {
    width: 40px;
    text-align: center;
}

.ui-table__check input {
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
}

.ui-table tbody tr.is-selected {
    background: var(--theme-soft);
}

/* 管理者のアバター */
.ui-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--surface-disabled);
    flex: 0 0 auto;
}

/* 設定画面など、今のアイコンを大きく見せたいところで使う */
.ui-avatar--lg {
    width: 48px;
    height: 48px;
    font-size: var(--fz-lg);
}

/* 画像が無い管理者は頭文字で代用する（枠が空いて見えないように） */
.ui-avatar--initial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-default);
    background: var(--surface-panel);
    color: var(--text-secondary);
    font-size: var(--fz-sm);
    font-weight: 700;
    line-height: 1;
}

/*
   顧客・エンドユーザーのアイコン。
   一覧で会社を目で拾うための手がかり。人物ではないので角丸の四角にする。
*/
.ui-orgicon {
    width: 28px;
    height: 28px;
    border-radius: var(--radius);
    border: 1px solid var(--border-subtle);
    object-fit: contain;
    background: var(--surface-panel);
    flex: 0 0 auto;
}

.ui-orgicon--initial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-head);
    color: var(--text-secondary);
    font-size: var(--fz-sm);
    font-weight: 700;
    line-height: 1;
}

.ui-orgicon--lg {
    width: 48px;
    height: 48px;
    font-size: var(--fz-lg);
}

/* アイコンと名前を横に並べる（一覧の1列目） */
.ui-namecell {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
}

.ui-namecell--center {
    align-items: center;
}

.ui-namecell__body {
    min-width: 0;
}

/* グローバル検索 */
.ui-globalsearch {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

.ui-globalsearch .ui-input {
    height: 30px;
    width: 200px;
    font-size: var(--fz-sm);
    background: var(--surface-panel);
}

/* 権限・区分などの小さなラベル。状態バッジとは別系統 */
.ui-tag {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 var(--sp-2);
    border: 1px solid var(--border-default);
    border-radius: var(--radius);
    background: var(--surface-subtle);
    color: var(--text-secondary);
    font-size: var(--fz-xs);
    white-space: nowrap;
}

/* 長いフォームを意味単位で並べる。項目ごとにカードを作らない */
.ui-fieldgrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--sp-4);
}

.ui-fieldgrid--wide {
    grid-template-columns: 1fr;
}

/*
   見積明細・経費明細のように、入力欄を並べた表。
   同種の値を縦に比較できるよう、カードではなく表で扱う。
*/
.ui-table--form th,
.ui-table--form td {
    padding: var(--sp-2);
    vertical-align: middle;
}

.ui-table--form .ui-input,
.ui-table--form .ui-select {
    width: 100%;
    height: var(--control-h-sm);
}

.ui-table--form tbody tr:hover {
    background: transparent;
}

/* 絞り込み付きの選択欄 */
.ui-searchselect {
    max-width: 460px;
}

.ui-searchselect .ui-input {
    margin-bottom: var(--sp-2);
}

/* 一覧として見せるため、閉じたセレクトではなくリスト表示にする */
.ui-searchselect select[size] {
    height: auto;
    padding: var(--sp-1);
    background-image: none;
}

.ui-searchselect select[size] option {
    padding: var(--sp-1) var(--sp-2);
}

/* 集計の並び。判断に使う数字だけを並べ、飾りの指標は作らない */
.ui-summary {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-5);
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--border-default);
    border-radius: var(--radius);
    background: var(--surface-subtle);
}

.ui-summary__item {
    min-width: 150px;
}

.ui-summary__label {
    display: block;
    font-size: var(--fz-sm);
    color: var(--text-secondary);
}

.ui-summary__value {
    display: block;
    font-size: var(--fz-title);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.4;
}

/* 粗利の水準。色だけに頼らず、隣に文言も出す */
.ui-summary__value--warning { color: var(--warning); }
.ui-summary__value--danger { color: var(--danger); }

.ui-summary__note {
    display: block;
    font-size: var(--fz-sm);
    color: var(--text-secondary);
}

/* --------------------------------------------------------------------------
   ダッシュボードの2列（左＝いま動くもの／右＝全体の更新履歴）
   -------------------------------------------------------------------------- */
.ui-dashgrid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    /* 左の表と更新履歴が近すぎると詰まって見えるため、列の間隔は広めに取る */
    gap: var(--sp-8);
    /* 右列（更新履歴）を左の並びと同じ高さまで伸ばすため、既定の stretch のままにする */
    align-items: stretch;
}

.ui-dashgrid__main {
    min-width: 0;
}

.ui-dashgrid__side {
    min-width: 0;
    /* 更新履歴は左の並びと同じ高さまで伸ばす。中身を絶対配置にして、
       この列の高さが行の高さ（＝左の列の高さ）に決まるようにしている。 */
    position: relative;
    min-height: 60vh;
}

.ui-dashgrid__side > .ui-section {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
}

/* 更新履歴。1件ずつが短いため、表ではなく縦に流す並びにする */
.ui-feed {
    padding: var(--sp-2) var(--sp-4) var(--sp-4);
    /* 右列にあるときは左の並びと同じ高さまで伸ばし、
       収まらない分はこの列の中だけでスクロールさせる。 */
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.ui-feed__date {
    position: sticky;
    top: 0;
    z-index: 1;
    margin: 0;
    padding: var(--sp-3) 0 var(--sp-2);
    background: var(--surface-panel);
    font-size: var(--fz-sm);
    font-weight: 700;
    color: var(--text-secondary);
}

.ui-feed__item {
    display: flex;
    gap: var(--sp-3);
    padding: var(--sp-3) 0;
    border-top: 1px solid var(--border-subtle);
}

.ui-feed__icon {
    flex: 0 0 auto;
}

.ui-feed__body {
    flex: 1 1 auto;
    min-width: 0;
}

.ui-feed__line {
    margin: 0;
    font-size: var(--fz-sm);
    line-height: 1.7;
}

.ui-feed__target {
    margin: 0;
    overflow-wrap: anywhere;
}

.ui-feed__meta {
    margin: 0;
    font-size: var(--fz-sm);
    color: var(--text-secondary);
    overflow-wrap: anywhere;
}

.ui-feed__time {
    flex: 0 0 auto;
    font-size: var(--fz-xs);
    color: var(--text-secondary);
    white-space: nowrap;
}

/* 連絡先1〜5のような繰り返し行 */
.ui-repeat__item {
    padding: var(--sp-4);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    background: var(--surface-subtle);
}

.ui-repeat__item + .ui-repeat__item {
    margin-top: var(--sp-3);
}

.ui-repeat__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-bottom: var(--sp-3);
    font-size: var(--fz-sm);
    font-weight: 700;
    color: var(--text-secondary);
}

/* --------------------------------------------------------------------------
   15-b. 表示設定（テーマ選択）
   -------------------------------------------------------------------------- */
.ui-swatches {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    gap: var(--sp-3);
}

.ui-swatch {
    position: relative;
    display: block;
    cursor: pointer;
}

.ui-swatch input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.ui-swatch__box {
    display: block;
    border: 2px solid var(--border-default);
    border-radius: var(--radius-panel);
    overflow: hidden;
    background: var(--surface-panel);
    transition: border-color .12s ease;
}

.ui-swatch__preview {
    display: flex;
    align-items: flex-end;
    height: 56px;
    padding: var(--sp-2);
}

/* プレビュー内の「現在地（塗りつぶし）」を再現する。色は選択肢ごとに上書きされる */
.ui-swatch__chip {
    width: 62%;
    height: 18px;
    border-radius: var(--radius);
    background: var(--theme-base);
}

.ui-swatch__caption {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    border-top: 1px solid var(--border-subtle);
    font-size: var(--fz-sm);
}

.ui-swatch:hover .ui-swatch__box {
    border-color: var(--border-strong);
}

/* 選択中は枠の太さ・色・チェック記号の3つで示す（色だけに依存しない） */
.ui-swatch input:checked + .ui-swatch__box {
    border-color: var(--text-primary);
    box-shadow: 0 0 0 2px var(--surface-canvas), 0 0 0 3px var(--text-primary);
}

.ui-swatch__check {
    color: var(--text-disabled);
    font-weight: 700;
}

.ui-swatch input:checked + .ui-swatch__box .ui-swatch__check {
    color: var(--text-primary);
}

.ui-swatch input:focus-visible + .ui-swatch__box {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   16. サブナビ（同じ機能の中で画面を切り替えるタブ）
   グローバルナビの1項目が複数画面を持つとき（自動見積など）に使う。
   現在地は「背景・枠・上辺のアクセント・太字」で示し、色だけに頼らない。
   -------------------------------------------------------------------------- */
.ui-subnav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-1);
    border-bottom: 1px solid var(--border-default);
    margin-bottom: var(--sp-5);
}

.ui-subnav__link {
    padding: var(--sp-2) var(--sp-4);
    margin-bottom: -1px;
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: var(--radius) var(--radius) 0 0;
    color: var(--text-secondary);
    font-size: var(--fz-body);
    line-height: 1.6;
}

.ui-subnav__link:hover {
    background: var(--surface-hover);
    color: var(--text-primary);
    text-decoration: none;
}

.ui-subnav__link[aria-current="page"] {
    background: var(--surface-panel);
    border-color: var(--border-default);
    box-shadow: inset 0 2px 0 var(--accent);
    color: var(--text-primary);
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   17. グラフ
   系列色はテーマ（契約ごとの色）から独立させる。テーマを変えても
   「案件」「保守」の色が入れ替わらないようにするため。
   -------------------------------------------------------------------------- */
:root {
    /* 系列1（案件・単一系列の既定）／系列2（保守）。
       白背景でコントラスト3:1以上、P型・D型・T型色覚でも判別できる組み合わせ。 */
    --chart-series-1: #2A78D6;
    --chart-series-2: #EB6834;
    --chart-grid: #EAECEF;
    --chart-ink: #5B6470;
    --chart-surface: #FFFFFF;
    --chart-track: #EEF0F2;
}

/* 幅いっぱいを必要としない2つのブロックを、半分ずつ横に並べる */
.ui-halfgrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: var(--sp-5);
    align-items: start;
    /* .ui-section 同士の間隔と同じだけ、前後のセクションから離す */
    margin-top: var(--sp-6);
}

.ui-halfgrid + .ui-section {
    margin-top: var(--sp-6);
}

/* 並べた中では上下の間隔を持たせない（横並びのため） */
.ui-halfgrid > .ui-section + .ui-section {
    margin-top: 0;
}

.ui-chartgrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: var(--sp-5);
}

.ui-chart__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-3);
    flex-wrap: wrap;
    margin-bottom: var(--sp-3);
}

.ui-chart__title {
    font-size: var(--fz-body);
    font-weight: 700;
}

.ui-chart__meta {
    font-size: var(--fz-sm);
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

/* canvas は親の実寸に追従させる。高さを固定しないと描画のたびに伸び続ける */
.ui-chart__box {
    position: relative;
    height: 220px;
}

.ui-chart__fallback {
    display: none;
    padding: var(--sp-4);
    font-size: var(--fz-sm);
    color: var(--text-secondary);
}

/* グラフが描けなかったときは、下の数値表だけで読めるようにする */
.ui-chart.is-unavailable .ui-chart__box {
    display: none;
}

.ui-chart.is-unavailable .ui-chart__fallback {
    display: block;
}

/* グラフの数値を表でも確認できるようにする（読み上げ・印刷用途） */
.ui-datatable {
    margin-top: var(--sp-3);
    font-size: var(--fz-sm);
}

.ui-datatable > summary {
    cursor: pointer;
    color: var(--accent);
}

.ui-datatable > summary:hover {
    text-decoration: underline;
}

.ui-datatable .ui-table {
    margin-top: var(--sp-2);
}

/* 構成比。件数を棒の長さで比べる。色は1色で、長さと数値で読ませる */
.ui-meter {
    display: grid;
    grid-template-columns: minmax(88px, max-content) 1fr max-content;
    align-items: center;
    gap: var(--sp-2) var(--sp-3);
}

.ui-meter__label {
    font-size: var(--fz-body);
}

.ui-meter__track {
    height: 10px;
    border-radius: var(--radius-sm);
    background: var(--chart-track);
}

.ui-meter__fill {
    display: block;
    height: 100%;
    min-width: 2px;
    border-radius: var(--radius-sm);
    background: var(--chart-series-1);
}

.ui-meter__value {
    font-size: var(--fz-sm);
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ui-meter__value strong {
    color: var(--text-primary);
    font-size: var(--fz-body);
}

/* --------------------------------------------------------------------------
   18. 見積の計算画面
   入力しながら金額を確かめる画面。結果を画面外に追い出さないよう、
   広い画面では右に固定し、狭い画面では入力の下に置く。
   -------------------------------------------------------------------------- */
.ui-calc {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 288px;
    gap: var(--sp-5);
    align-items: start;
}

.ui-calc__result {
    position: sticky;
    top: var(--sp-4);
}

.ui-calc__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-1) 0;
    font-size: var(--fz-sm);
    color: var(--text-secondary);
}

.ui-calc__row span:last-child {
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}

.ui-calc__grand {
    margin-top: var(--sp-2);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--border-default);
}

.ui-calc__grand-label {
    display: block;
    font-size: var(--fz-sm);
    color: var(--text-secondary);
}

.ui-calc__grand-value {
    display: block;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.3;
    font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   18-a. 区分の丸角タグ（案件の種類・保守の種別）

   ステータスの丸角タグ（.ui-chip）と役割が違うため、見た目も分ける。
     ステータス … 面を色で塗り、文字も同系色の太字。「いまどうなっているか」。
     区分       … 淡い面＋色の丸印。文字は通常の黒。「どの種類の仕事か」。
   区分の色は識別のためだけのもので、良し悪しの意味は持たない。

   色は6色のカテゴリ配色として検証済み（明度帯・彩度・色覚特性別の隣接分離・
   コントラストの各チェックを通している）。値を変えるときは再検証すること。
   なお色だけに意味を持たせないよう、タグの中には必ず区分名を書く。
   -------------------------------------------------------------------------- */
.ui-typechip {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    height: 24px;
    padding: 0 var(--sp-3);
    border: 1px solid var(--typechip-line, var(--border-default));
    border-radius: 999px;
    background: var(--typechip-bg, var(--surface-subtle));
    color: var(--text-primary);
    font-size: var(--fz-sm);
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.ui-typechip::before {
    content: "";
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--typechip-dot, var(--neutral));
}

.ui-typechip--1 { --typechip-dot: #364FC7; --typechip-bg: #EDEFFA; --typechip-line: #B3BCEA; }
.ui-typechip--2 { --typechip-dot: #2F9E44; --typechip-bg: #ECF6EE; --typechip-line: #B0DAB8; }
.ui-typechip--3 { --typechip-dot: #C2255C; --typechip-bg: #FAEBF0; --typechip-line: #E8ACC1; }
.ui-typechip--4 { --typechip-dot: #0F94A5; --typechip-bg: #E9F5F7; --typechip-line: #A4D6DD; }
.ui-typechip--5 { --typechip-dot: #B05A00; --typechip-bg: #F8F0E8; --typechip-line: #E1C09E; }

/* 「その他」は識別の必要が薄いので、色を持たせず落ち着かせる */
.ui-typechip--6 { --typechip-dot: #5B6470; --typechip-bg: #F0F1F2; --typechip-line: #C1C4C9; }

/* 7色目。区分の種類が6色で足りないときに使う */
.ui-typechip--7 { --typechip-dot: #6741D9; --typechip-bg: #F0ECFB; --typechip-line: #C3B2ED; }


/* --------------------------------------------------------------------------
   18-b. 課題・ドキュメント

   本文と補足情報（担当者・期日など）を左右に置く。
   狭い画面では補足情報を本文の下へ回す。
   -------------------------------------------------------------------------- */
.ui-detail {
    display: flex;
    gap: var(--sp-5);
    align-items: flex-start;
}

.ui-detail__main {
    flex: 1 1 auto;
    min-width: 0;
}

.ui-detail__side {
    flex: 0 0 280px;
}

/* 補足情報の定義リストは、幅280pxの中に見出しと値を横に並べると値が1行に潰れる
   （見出し列が固定200pxのため）。ここだけ見出しを上・値を下に積み、
   外枠はパネルに任せて行区切りの線だけ残す。
   1024px以下では本文の下へ回って全幅になるが、そこでも同じ見せ方で通す
   （640px以下は元から積む作りなので、幅で見え方が二転三転しない）。 */
.ui-detail__side .ui-dl {
    border: 0;
    border-radius: 0;
}

.ui-detail__side .ui-dl__row {
    flex-direction: column;
    gap: var(--sp-1);
    /* 管理画面は8行まで並ぶため、縦に伸びすぎないよう行の余白は詰める */
    padding: var(--sp-2) 0;
}

.ui-detail__side .ui-dl__row:first-child {
    padding-top: 0;
}

.ui-detail__side .ui-dl__key {
    flex: 0 0 auto;
    padding: 0;
    background: none;
    font-size: var(--fz-sm);
}

.ui-detail__side .ui-dl__val {
    padding: 0;
}

/* 課題番号。件名の前に置き、電話口でも指し示せるようにする */
.ui-issueno {
    display: inline-block;
    margin-right: var(--sp-2);
    color: var(--text-secondary);
    font-size: var(--fz-sm);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* 期日を過ぎている課題。色だけでなく「超過」の文字も併記する */
.ui-overdue {
    color: var(--danger);
    font-weight: 700;
}

/* コメントの一覧。吹き出しにせず、上から読み下せる形にする */
.ui-comments {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

.ui-comment {
    display: flex;
    gap: var(--sp-3);
    padding: var(--sp-4);
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--border-default);
    border-radius: var(--radius);
    background: var(--surface-panel);
}

/* 弊社のコメントとお客様のコメントを、左端の線の色で見分ける */
.ui-comment--admin { border-left-color: var(--accent); }
.ui-comment--enduser { border-left-color: var(--neutral); background: var(--surface-subtle); }

.ui-comment__col {
    flex: 1 1 auto;
    min-width: 0;
}

.ui-comment__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--sp-2) var(--sp-3);
    margin-bottom: var(--sp-2);
}

.ui-comment__name {
    font-size: var(--fz-body);
    font-weight: 700;
    color: var(--text-primary);
}

.ui-comment__side {
    font-size: var(--fz-xs);
    color: var(--text-secondary);
}

.ui-comment__body {
    font-size: var(--fz-body);
    line-height: 1.9;
    color: var(--text-primary);
}

/* マークダウンの書き方の案内。入力欄のすぐ下に置く */
.ui-mdhint {
    margin-top: var(--sp-2);
    font-size: var(--fz-xs);
    color: var(--text-secondary);
}

.ui-mdhint code {
    padding: 1px 4px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: var(--surface-subtle);
}

/* ドキュメントの目次。カテゴリごとにまとめて並べる */
.ui-doctree {
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
}

.ui-doctree__group + .ui-doctree__group {
    padding-top: var(--sp-5);
    border-top: 1px solid var(--border-subtle);
}

.ui-doctree__cat {
    margin-bottom: var(--sp-2);
    font-size: var(--fz-body);
    font-weight: 700;
    color: var(--text-primary);
}

.ui-doctree__sub {
    margin: var(--sp-3) 0 var(--sp-2) var(--sp-4);
    font-size: var(--fz-sm);
    font-weight: 700;
    color: var(--text-secondary);
}

.ui-doctree__list {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--border-subtle);
}

.ui-doctree__item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2) var(--sp-3);
    padding: var(--sp-3) var(--sp-2);
    border-bottom: 1px solid var(--border-subtle);
}

.ui-doctree__item:hover {
    background: var(--surface-hover);
}

.ui-doctree__title {
    font-size: var(--fz-body);
    font-weight: 600;
}

.ui-doctree__meta {
    margin-left: auto;
    font-size: var(--fz-xs);
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

/* 社内限定のドキュメントであることの表示 */
.ui-internal {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 var(--sp-2);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--surface-disabled);
    color: var(--text-secondary);
    font-size: var(--fz-xs);
    font-weight: 700;
    white-space: nowrap;
}

/* 一覧の名称の後ろに置く未読バッジ。名称と離れないよう行内に置く */
.ui-namebadge {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
}


/* --------------------------------------------------------------------------
   19.4 絵文字の挿入
   入力欄の下に小さなボタンを置き、押すと選択パネルを出す。
   狭い画面では画面を覆ってしまうため、ボタンごと出さない。
   -------------------------------------------------------------------------- */
.ui-textarea + .ui-emojibtn {
    margin-top: var(--sp-2);
}

.ui-emojibtn {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    height: var(--control-h-sm);
    padding: 0 var(--sp-2);
    border: 1px solid var(--border-default);
    border-radius: var(--radius);
    background: var(--surface-panel);
    color: var(--text-secondary);
    font-size: var(--fz-xs);
    line-height: 1;
    cursor: pointer;
}

.ui-emojibtn:hover {
    border-color: var(--border-strong);
    background: var(--surface-hover);
}

.ui-emojibtn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.ui-emojibtn[aria-expanded="true"] {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--text-primary);
}

.ui-emojipanel {
    position: absolute;
    z-index: 60;
    overflow-y: auto;
    width: 320px;
    max-height: 320px;
    padding: var(--sp-3);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-panel);
    background: var(--surface-panel);
    box-shadow: var(--shadow-floating);
}

.ui-emojipanel__label {
    margin: var(--sp-3) 0 var(--sp-1);
    color: var(--text-disabled);
    font-size: var(--fz-xs);
    font-weight: 700;
}

.ui-emojipanel__label:first-child { margin-top: 0; }

.ui-emojipanel__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(34px, 1fr));
    gap: 2px;
}

.ui-emojipanel__item {
    padding: 0;
    border: 0;
    border-radius: var(--radius);
    background: none;
    font-size: 20px;
    line-height: 32px;
    cursor: pointer;
}

.ui-emojipanel__item:hover { background: var(--surface-hover); }

.ui-emojipanel__item:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}


/* --------------------------------------------------------------------------
   19.45 メンション
   本文の中で名指しされた人を示す印と、入力欄で「@」を打ったときの候補。

   印は色だけに頼らず、太字も併せて付ける（テーマ色は契約ごとに変わるため）。
   -------------------------------------------------------------------------- */
.ui-mention {
    padding: 0 2px;
    border-radius: 3px;
    background: var(--accent-soft);
    color: var(--text-primary);
    font-weight: 700;
}

.ui-mentionpanel {
    position: absolute;
    z-index: 60;
    overflow-y: auto;
    width: 260px;
    max-height: 280px;
    padding: var(--sp-1);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-panel);
    background: var(--surface-panel);
    box-shadow: var(--shadow-floating);
}

.ui-mentionpanel__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    padding: var(--sp-2);
    border-radius: var(--radius);
    cursor: pointer;
}

.ui-mentionpanel__item.is-active,
.ui-mentionpanel__item:hover {
    background: var(--surface-hover);
}

.ui-mentionpanel__name {
    overflow: hidden;
    font-size: var(--fz-sm);
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-mentionpanel__side {
    flex: none;
    color: var(--text-disabled);
    font-size: var(--fz-xs);
}



/* --------------------------------------------------------------------------
   19.5 ガント / カレンダー
   課題の開始日〜期日を時間軸に並べる。色は工程（カテゴリ）を表し、
   契約ごとのテーマ色とは独立させる（契約を切り替えても工程の色が動かないため）。

   色だけに頼らないよう、バーには必ずカテゴリ名を添え、
   終わった課題は「塗りの薄さ」と「斜線」の両方で示す。
   -------------------------------------------------------------------------- */
:root {
    /* カテゴリ色。config/issue_categories.php の colors と同じ値を持つ。
       いずれも白文字でコントラスト比 5:1 以上（WCAG AA）。 */
    --cat-indigo: #3f4ea6;
    --cat-pink:   #be3a6b;
    --cat-sky:    #0f6e94;
    --cat-teal:   #10705e;
    --cat-steel:  #55687f;
    --cat-purple: #7c46ac;
    --cat-green:  #2c7a3d;
    --cat-orange: #b0530e;
    --cat-slate:  #5f6873;
    --cat-amber:  #8a6410;

    /* ガントの寸法。1日 = 1列。
       左ペインは「課題名＋担当者＋開始日＋期日」が1行に収まる幅を確保する。
       日付の入力はブラウザ既定の見た目のため、これより狭めると潰れる。 */
    --gantt-col: 28px;
    --gantt-pane: 540px;
    --gantt-row: 40px;

    /* 自分が担当の課題の背景。文字が読みにくくならない薄さにする */
    --gantt-mine: #fffce6;
    --gantt-mine-hover: #fff8cc;
}

/* カテゴリ色の適用。バー・タグ・凡例で共通に使う。 */
.ui-cat--indigo { --cat: var(--cat-indigo); }
.ui-cat--pink   { --cat: var(--cat-pink); }
.ui-cat--sky    { --cat: var(--cat-sky); }
.ui-cat--teal   { --cat: var(--cat-teal); }
.ui-cat--steel  { --cat: var(--cat-steel); }
.ui-cat--purple { --cat: var(--cat-purple); }
.ui-cat--green  { --cat: var(--cat-green); }
.ui-cat--orange { --cat: var(--cat-orange); }
.ui-cat--slate  { --cat: var(--cat-slate); }
.ui-cat--amber  { --cat: var(--cat-amber); }

/* カテゴリ名の小さなタグ（課題の詳細・凡例で使う） */
.ui-cattag {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 2px var(--sp-2);
    border-radius: var(--radius);
    background: var(--cat, var(--neutral));
    color: var(--text-inverse);
    font-size: var(--fz-xs);
    font-weight: 700;
    line-height: 1.6;
}

/* ガントのバー本体。色見本にも同じものを使う。 */
.ui-ganttbar {
    position: relative;
    display: block;
    overflow: hidden;
    padding: 0 var(--sp-2);
    border-radius: var(--radius);
    background: var(--cat, var(--neutral));
    color: var(--text-inverse);
    font-size: var(--fz-xs);
    font-weight: 700;
    line-height: 22px;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-decoration: none;
}

/* バーに添えるエンドユーザー名。主役は課題名なので一段小さく細くする
   （全体ガントでのみ出る。同じ課題名が別のお客様で並ぶため） */
.ui-ganttbar__sub {
    font-size: 10px;
    font-weight: 400;
    opacity: .9;
}

/* 全体の a:hover が文字色を変えてしまうため、ここで白のまま押さえる。
   変化は下線だけにして、バーの上の文字が読めなくならないようにする。 */
a.ui-ganttbar:hover,
a.ui-ganttbar:focus {
    color: var(--text-inverse);
    text-decoration: underline;
}

a.ui-ganttbar:focus-visible {
    outline: 2px solid var(--text-primary);
    outline-offset: 1px;
}

/* --- 凡例 ------------------------------------------------------------- */
.ui-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2) var(--sp-3);
    margin: var(--sp-3) 0;
}

.ui-legend__title {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--fz-sm);
    font-weight: 700;
}

/* --- 期間の移動 ------------------------------------------------------- */
.ui-rangenav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2) var(--sp-3);
    margin-bottom: var(--sp-3);
}

.ui-rangenav__label {
    margin: 0;
    font-size: var(--fz-lg);
    font-weight: 700;
}

.ui-rangenav__spacer { flex: 1 1 auto; }

/* --- ガント本体 ------------------------------------------------------- */
.ui-gantt {
    overflow: auto;
    max-height: 100%;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-panel);
    background: var(--surface-panel);
}

.ui-gantt__body {
    position: relative;
    width: max-content;
    min-width: 100%;
}

/* 土日と今日の縦じま。行ごとに描くとDOMが増えるため、背面に1枚だけ敷く。 */
.ui-gantt__stripes {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--gantt-pane);
    display: grid;
    grid-template-columns: repeat(var(--gantt-days), var(--gantt-col));
    width: calc(var(--gantt-days) * var(--gantt-col));
    pointer-events: none;
}

/* 1日ぶんのマス。左端の点線が日ごとの区切りになる（薄く、目盛りとして）。 */
.ui-gantt__stripe {
    grid-row: 1;
    border-left: 1px dotted var(--border-subtle);
}

.ui-gantt__stripe--weekend { background: var(--surface-subtle); }

.ui-gantt__stripe--today {
    background: var(--info-soft);
    box-shadow: inset 1px 0 0 var(--info), inset -1px 0 0 var(--info);
}

.ui-gantt__row {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: var(--gantt-pane) calc(var(--gantt-days) * var(--gantt-col));
    border-bottom: 1px solid var(--border-subtle);
}

.ui-gantt__row:last-child { border-bottom: 0; }
.ui-gantt__row:hover .ui-gantt__pane { background: var(--surface-hover); }

/* 見出しは上に、左ペインは左に貼り付ける */
.ui-gantt__row--months,
.ui-gantt__row--days {
    position: sticky;
    z-index: 4;
    background: var(--surface-head);
}

.ui-gantt__row--months { top: 0; }
.ui-gantt__row--days { top: 26px; }
.ui-gantt__row--months .ui-gantt__pane,
.ui-gantt__row--days .ui-gantt__pane { background: var(--surface-head); }

.ui-gantt__pane {
    position: sticky;
    left: 0;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 104px 124px 124px;
    align-items: center;
    gap: var(--sp-2);
    min-height: var(--gantt-row);
    padding: var(--sp-1) var(--sp-3);
    border-right: 1px solid var(--border-default);
    background: var(--surface-panel);
}

.ui-gantt__pane--read { grid-template-columns: minmax(0, 1fr) 120px 90px 90px; }

/* 担当者・開始日・期日は横幅を食うため、既定では畳んで課題名だけを出す。
   「担当者・日付を表示」で開くと、その場で直せる欄が現れる。 */
.ui-gantt.is-compact { --gantt-pane: 260px; }

.ui-gantt.is-compact .ui-gantt__pane,
.ui-gantt.is-compact .ui-gantt__pane--read {
    grid-template-columns: minmax(0, 1fr);
}

.ui-gantt.is-compact .ui-gantt__colhead--sub,
.ui-gantt.is-compact .ui-gantt__val,
.ui-gantt.is-compact [data-ui-gantt-field] {
    display: none;
}

.ui-gantt__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-2);
}

.ui-gantt__colhead {
    color: var(--text-secondary);
    font-size: var(--fz-xs);
    font-weight: 700;
}

/* 課題名は太字にしない。太字は束の見出し（カテゴリ名・担当者名）だけに使い、
   どこが見出しでどこが中身かを字面で見分けられるようにする。 */
.ui-gantt__title {
    overflow: hidden;
    color: var(--text-primary);
    font-size: var(--fz-sm);
    white-space: nowrap;
    text-overflow: ellipsis;
    text-decoration: none;
}

.ui-gantt__title:hover { text-decoration: underline; }

.ui-gantt__no {
    margin-right: var(--sp-1);
    color: var(--text-disabled);
    font-weight: 400;
}

.ui-gantt__val {
    color: var(--text-secondary);
    font-size: var(--fz-xs);
    white-space: nowrap;
}

/* 行内の入力は行の高さに収める。通常のフォームより一段小さい。 */
.ui-gantt__pane .ui-select,
.ui-gantt__pane .ui-input {
    height: var(--control-h-sm);
    min-width: 0;
    padding: 0 var(--sp-2);
    font-size: var(--fz-xs);
}

.ui-gantt__track {
    display: grid;
    grid-template-columns: repeat(var(--gantt-days), var(--gantt-col));
    align-items: center;
    min-height: var(--gantt-row);
}

.ui-gantt__track--months,
.ui-gantt__track--days { min-height: 0; }

.ui-gantt__month {
    border-left: 1px solid var(--border-default);
    line-height: 18px;
}

/* 月の見出しは、その月が画面に映っている間ずっと左端に貼り付けておく。
   3ヶ月ぶんを横に流すため、いま何月を見ているかを見失わないようにする。 */
.ui-gantt__monthlabel {
    position: sticky;
    left: var(--gantt-pane);
    display: inline-block;
    padding: var(--sp-1) var(--sp-2);
    color: var(--text-secondary);
    font-size: var(--fz-xs);
    font-weight: 700;
    white-space: nowrap;
}

.ui-gantt__day {
    color: var(--text-disabled);
    font-size: 10px;
    line-height: 18px;
    text-align: center;
}

.ui-gantt__day.is-weekend { color: var(--danger); }

.ui-gantt__day.is-today {
    background: var(--info);
    color: var(--text-inverse);
    font-weight: 700;
}

/* --- グループ見出し（カテゴリごと・担当者ごとの束） ------------------- */
.ui-gantt__row--group { background: var(--surface-subtle); }

.ui-gantt__row--group .ui-gantt__pane {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    min-height: 34px;
    background: var(--surface-subtle);
    font-weight: 700;
}

/* 見出しそのものを開閉ボタンにする（押せる範囲を見出しの文字まで広げる） */
.ui-gantt__toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.ui-gantt__toggle:hover { text-decoration: underline; }

.ui-gantt__toggle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* 閉じているときは印を横向きにする（色だけに頼らない） */
.ui-gantt__caret {
    display: inline-block;
    color: var(--text-secondary);
    font-size: var(--fz-xs);
    line-height: 1;
    transition: transform .15s ease;
}

.ui-gantt__toggle[aria-expanded="false"] .ui-gantt__caret { transform: rotate(-90deg); }

/* カテゴリの見出しに添える色の印。バーの色と見出しを結び付ける */
.ui-gantt__catdot {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    background: var(--cat, var(--neutral));
    flex: 0 0 auto;
}

/* 閉じた束の中身 */
.ui-gantt__row.is-collapsed { display: none; }

.ui-gantt__grouprole {
    color: var(--text-disabled);
    font-size: var(--fz-xs);
    font-weight: 400;
}

.ui-gantt__count {
    margin-left: auto;
    color: var(--text-secondary);
    font-size: var(--fz-xs);
    font-weight: 400;
}

/* 自分が担当の課題。薄い黄色で、行を追わずに自分のぶんを拾えるようにする。
   文字の読みやすさを損なわない濃さに留める。 */
.ui-gantt__pane.is-mine { background: var(--gantt-mine); }

/* 行のhoverが背景を上書きしてしまうため、黄色のまま一段濃くする */
.ui-gantt__row:hover .ui-gantt__pane.is-mine { background: var(--gantt-mine-hover); }

/* --- バーの状態 ------------------------------------------------------- */
/* 期間の外まで続くバーは、切った側の角を落とし、さらに矢印で続きがあることを示す。
   角の形だけでは気づきにくいため、記号を添えている。 */
.ui-ganttbar--clip-start {
    padding-left: 18px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.ui-ganttbar--clip-end {
    padding-right: 18px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.ui-ganttbar--clip-start::before,
.ui-ganttbar--clip-end::after {
    position: absolute;
    top: 0;
    /* 下を流れる文字と重ならないよう、カテゴリ色で塗りつぶす */
    background: var(--cat, var(--neutral));
    padding: 0 3px;
}

.ui-ganttbar--clip-start::before { content: '◀'; left: 0; }
.ui-ganttbar--clip-end::after { content: '▶'; right: 0; }

/* 終わった課題。斜線と薄さの2つで示し、色だけに頼らない。
   文字が読めなくならないよう、薄くしすぎない。 */
.ui-ganttbar--closed {
    background-image: repeating-linear-gradient(
        135deg,
        rgba(0, 0, 0, .22) 0 5px,
        rgba(0, 0, 0, 0) 5px 10px
    );
    opacity: .78;
}

/* 期日を過ぎてまだ終わっていない課題は、赤い縁で目立たせる */
.ui-ganttbar--overdue { box-shadow: 0 0 0 2px var(--danger); }

/* 保存中・保存直後の見え方 */
.ui-gantt__row.is-saving { opacity: .55; }

.ui-gantt__row.is-saved .ui-ganttbar { box-shadow: 0 0 0 2px var(--success); }

.ui-gantt__rowerror {
    grid-column: 1 / -1;
    position: sticky;
    left: 0;
    width: max-content;
    max-width: 100%;
    margin: 0 0 var(--sp-2) var(--sp-3);
    color: var(--danger);
    font-size: var(--fz-xs);
    font-weight: 700;
}

/* --- カレンダー ------------------------------------------------------- */
.ui-cal {
    overflow: hidden;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-panel);
    background: var(--surface-panel);
}

.ui-cal__head {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: var(--surface-head);
}

.ui-cal__dow {
    padding: var(--sp-2);
    color: var(--text-secondary);
    font-size: var(--fz-xs);
    font-weight: 700;
    text-align: center;
}

.ui-cal__dow--sat { color: var(--info); }
.ui-cal__dow--sun { color: var(--danger); }

.ui-cal__week {
    position: relative;
    border-top: 1px solid var(--border-subtle);
}

.ui-cal__days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    min-height: 116px;
}

.ui-cal__day {
    padding: var(--sp-1) var(--sp-2);
    border-left: 1px solid var(--border-subtle);
}

.ui-cal__day:first-child { border-left: 0; }
.ui-cal__day.is-weekend { background: var(--surface-subtle); }
.ui-cal__day.is-out { background: var(--surface-disabled); }

.ui-cal__date {
    display: inline-block;
    min-width: 22px;
    color: var(--text-secondary);
    font-size: var(--fz-xs);
    font-weight: 700;
    text-align: center;
}

.ui-cal__day.is-out .ui-cal__date { color: var(--text-disabled); }

.ui-cal__day.is-today .ui-cal__date {
    border-radius: 999px;
    background: var(--info);
    color: var(--text-inverse);
}

/* 帯は日付マスの上に重ねる。週をまたぐ予定も1本につながって見える。 */
.ui-cal__bars {
    position: absolute;
    top: 26px;
    right: 0;
    left: 0;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px var(--sp-1);
    padding: 0 var(--sp-1);
    pointer-events: none;
}

.ui-calbar {
    position: relative;
    pointer-events: auto;
    overflow: hidden;
    padding: 0 var(--sp-2);
    border-radius: var(--radius);
    background: var(--cat, var(--neutral));
    color: var(--text-inverse);
    font-size: var(--fz-xs);
    line-height: 20px;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-decoration: none;
}

.ui-calbar:hover,
.ui-calbar:focus {
    color: var(--text-inverse);
    text-decoration: underline;
}

.ui-calbar:focus-visible {
    outline: 2px solid var(--text-primary);
    outline-offset: 1px;
}

.ui-calbar--clip-start {
    padding-left: 16px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.ui-calbar--clip-end {
    padding-right: 16px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.ui-calbar--clip-start::before,
.ui-calbar--clip-end::after {
    position: absolute;
    top: 0;
    background: var(--cat, var(--neutral));
    padding: 0 2px;
}

.ui-calbar--clip-start::before { content: '◀'; left: 0; }
.ui-calbar--clip-end::after { content: '▶'; right: 0; }

.ui-calbar--closed {
    background-image: repeating-linear-gradient(
        135deg,
        rgba(0, 0, 0, .22) 0 5px,
        rgba(0, 0, 0, 0) 5px 10px
    );
    opacity: .78;
}

.ui-cal__more {
    position: absolute;
    right: 0;
    bottom: var(--sp-1);
    left: 0;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    padding: 0 var(--sp-1);
}

.ui-cal__morelink {
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
}

.ui-cal__morelink:hover { text-decoration: underline; }


/* --------------------------------------------------------------------------
   19. レスポンシブ
   段階的に縮退させる。表はカードに変換せず横スクロールを許す。
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
    .ui-talk__list {
        flex-basis: 240px;
        width: 240px;
    }

    /* ガントの左ペインを1行に並べきれないため、課題名の下に操作を折り返す。
       行の高さが伸びる代わりに、狭い画面でも期日と担当者を直せる。 */
    :root {
        --gantt-pane: 260px;
    }

    .ui-gantt__pane,
    .ui-gantt__pane--read {
        grid-template-columns: minmax(0, 1fr);
        align-content: center;
        gap: var(--sp-1);
        padding-top: var(--sp-2);
        padding-bottom: var(--sp-2);
    }

    /* 見出し行だけは列名を積まず、まとめて「課題」とだけ出す */
    .ui-gantt__colhead--sub {
        display: none;
    }

    /* 表が窮屈になるため、更新履歴は下に回す */
    .ui-dashgrid {
        grid-template-columns: minmax(0, 1fr);
    }

    /* 1列のときは高さを合わせる必要がないので、ふつうの流れに戻す */
    .ui-dashgrid__side {
        position: static;
        min-height: 0;
    }

    .ui-dashgrid__side > .ui-section {
        position: static;
        display: block;
    }

    .ui-feed {
        max-height: 70vh;
    }
}

@media (max-width: 1024px) {
    :root {
        --nav-w: 208px;
    }


    .ui-composer {
        flex-direction: column;
    }

    .ui-composer__side {
        flex: 1 1 auto;
        width: 100%;
        flex-direction: row;
        align-items: center;
    }

    .ui-composer__side .ui-file {
        flex: 1 1 auto;
    }

    /* 課題・ドキュメントの補足情報は本文の下へ回す */
    .ui-detail {
        flex-direction: column;
    }

    .ui-detail__side {
        flex: 1 1 auto;
        width: 100%;
    }

}

@media (max-width: 900px) {
    .ui-navtoggle {
        display: inline-flex;
    }

    /* 1マスが狭くなりすぎるとカレンダーが読めないので、横スクロールを許す */
    .ui-calwrap {
        overflow-x: auto;
    }

    .ui-calwrap > .ui-cal {
        min-width: 640px;
    }

    /* 狭い画面では計算結果を入力の下に流す */
    .ui-calc {
        grid-template-columns: 1fr;
    }

    .ui-calc__result {
        position: static;
    }

    /* 契約ナビをドロワー化する */
    .ui-scopenav {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 40;
        transform: translateX(-100%);
        transition: transform .16s ease;
        box-shadow: var(--shadow-floating);
    }

    .ui-scopenav__inner {
        position: static;
        max-height: none;
        height: 100%;
        padding-top: var(--sp-5);
    }

    body.ui-nav-open .ui-scopenav {
        transform: translateX(0);
    }

    body.ui-nav-open .ui-nav-scrim {
        display: block;
    }

    body.ui-nav-open {
        overflow: hidden;
    }

    .ui-nav-scrim {
        position: fixed;
        inset: 0;
        z-index: 35;
        background: rgba(31, 35, 40, .4);
        border: 0;
    }

    .ui-content {
        padding: var(--sp-4);
    }

    .ui-globalbar,
    .ui-scopebar {
        padding-left: var(--sp-4);
        padding-right: var(--sp-4);
    }

    .ui-globalbar {
        gap: var(--sp-3);
    }

    .ui-scroll-hint {
        display: block;
    }

    .ui-dl__key {
        flex-basis: 140px;
    }

    /* 狭い画面では他のトーク一覧を上に畳み、会話と入力欄に高さを譲る */
    .ui-talk {
        flex-direction: column;
    }

    .ui-talk__list {
        flex: 0 0 auto;
        width: 100%;
        max-height: 22vh;
        border-right: 0;
        border-bottom: 1px solid var(--border-default);
    }

    .ui-talk__body {
        padding: var(--sp-4);
    }

    .ui-talk__foot {
        padding: var(--sp-3) var(--sp-4);
    }
}

@media (max-width: 640px) {
    /* 絵文字パネルは画面を覆ってしまうため、狭い画面では出さない。
       スマホの文字入力には端末側の絵文字キーボードがある。 */
    .ui-emojibtn {
        display: none;
    }

    .ui-search__row {
        flex-direction: column;
        align-items: stretch;
    }

    .ui-search__actions {
        margin-left: 0;
    }

    .ui-search__field,
    .ui-w-xs,
    .ui-w-sm,
    .ui-w-md,
    .ui-w-lg,
    .ui-w-xl {
        max-width: none;
    }

    .ui-dl__row {
        flex-direction: column;
    }

    .ui-dl__key {
        flex-basis: auto;
        width: 100%;
        padding-bottom: var(--sp-1);
    }

    .ui-dl__val {
        padding-top: var(--sp-1);
    }

    .ui-page-head__actions,
    .ui-form-actions {
        width: 100%;
    }

    .ui-page-head__actions .ui-btn,
    .ui-form-actions .ui-btn {
        flex: 1 1 auto;
    }

    .ui-msg {
        max-width: none;
    }
}

/* タッチ端末では操作領域を広げる */
@media (pointer: coarse) {
    :root {
        --control-h: 40px;
        --control-h-sm: 34px;
    }

    .ui-globalnav__link,
    .ui-scopenav__link,
    .ui-scopenav__external,
    .ui-talk__room {
        min-height: 44px;
    }
}

/* ------------------------------------------------------------------
   見積CSVの取込

   表の行をその場で捌く画面。保存中・保存済みの見せ方は
   ガント（.ui-gantt__row）と同じ考え方で、行そのものに状態を持たせる。
   ------------------------------------------------------------------ */

/*
   更新の操作。登録（--primary）と見分けが付くよう色を変える。
   壊す操作ではないので、--danger とは別系統にしておく。
*/
.ui-btn--accent {
    background: var(--info);
    border-color: var(--info);
    color: var(--text-inverse);
    font-weight: 600;
}

.ui-btn--accent:hover {
    background: var(--surface-panel);
    color: var(--info);
}

.ui-btn--accent:disabled {
    background: var(--info);
    border-color: var(--info);
    color: var(--text-inverse);
    opacity: .5;
}

.ui-table tbody tr.is-saving {
    opacity: .55;
}

.ui-table tbody tr.is-saving .ui-btn,
.ui-table tbody tr.is-saving .ui-select {
    pointer-events: none;
}

/* 行の下に出す不備。表の列をまたいで1行使う */
.ui-table tbody tr .ui-rowerror {
    margin: 0;
    color: var(--danger);
    font-size: var(--fz-sm);
}

/*
   取引先をその場で作るための入力欄。行の直下に開く。
   上の行と地続きに見せたいので、面の色だけ変えて枠は付けない。
*/
.ui-rowform > td {
    background: var(--surface-hover);
    border-top: 0;
}

.ui-rowform__title {
    margin: 0 0 var(--sp-3);
    font-weight: 600;
}

.ui-rowform__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--sp-3) var(--sp-4);
}

.ui-rowform__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-top: var(--sp-3);
}

/* 不備は操作の並びの左に置く。ボタンの位置を動かさないため幅を取らせる */
.ui-rowform__error {
    flex: 1 1 200px;
    margin: 0;
    color: var(--danger);
    font-size: var(--fz-sm);
}

/* 印刷 */
@media print {
    .ui-globalbar,
    .ui-scopenav,
    .ui-search,
    .ui-pager,
    .ui-page-head__actions,
    .ui-table__actions {
        display: none !important;
    }

    body {
        background: #fff;
    }

    .ui-tablewrap,
    .ui-panel {
        border-color: #999;
    }
}