/*
 * Link Biz - 共通スタイル
 */

:root {
  /* ── プライマリカラー: ディープインディゴ ─────────── */
  --color-primary:        #4f46e5;   /* インディゴ */
  --color-primary-dark:   #3730a3;   /* ダークインディゴ */
  --color-primary-light:  #eef2ff;   /* ライトインディゴ */

  --color-secondary:      #64748b;   /* スレートグレー */

  /* ── セマンティックカラー（抑えたトーン） ──────── */
  --color-success:        #059669;   /* エメラルドグリーン */
  --color-warning:        #d97706;   /* アンバー */
  --color-danger:         #dc2626;   /* ローズレッド */
  --color-info:           #0891b2;   /* シアン */

  /* ── テキスト ────────────────────────────────── */
  --text-primary:   #1e1e2e;   /* ほぼ黒（深い紺寄り）*/
  --text-secondary: #475569;   /* ミディアムスレート */
  --text-muted:     #94a3b8;   /* ライトスレート */
  --text-inverse:   #ffffff;

  /* ── 背景 ────────────────────────────────────── */
  --bg-body:    #f4f4f8;   /* ほんのり青みがかったライトグレー */
  --bg-surface: #ffffff;
  --bg-muted:   #f8f8fc;   /* ほんのり紫がかったオフホワイト */
  --bg-overlay: rgba(15,15,30,.5);

  /* ── ボーダー ────────────────────────────────── */
  --border-color:       #e2e2ee;   /* ほんのり青紫がかったグレー */
  --border-color-focus: #4f46e5;

  /* ── 角丸 ────────────────────────────────────── */
  --border-radius-sm:   0.25rem;
  --border-radius:      0.5rem;
  --border-radius-lg:   0.75rem;
  --border-radius-xl:   1rem;
  --border-radius-full: 9999px;

  /* ── サイドバー ──────────────────────────────── */
  --sidebar-width:    16rem;
  --sidebar-bg:       #16162a;   /* 深い紺黒 */
  --sidebar-text:     #8b8ba8;   /* ミュートなスレートバイオレット */
  --sidebar-text-act: #ffffff;
  --sidebar-item-act: rgba(99,102,241,.18);  /* インディゴ半透明 */
  --sidebar-border:   rgba(255,255,255,.07);

  /* ── シャドウ ────────────────────────────────── */
  --shadow-sm:  0 1px 2px rgba(15,15,30,.06);
  --shadow:     0 1px 4px rgba(15,15,30,.08),0 2px 8px rgba(15,15,30,.05);
  --shadow-lg:  0 4px 16px rgba(15,15,30,.1),0 2px 8px rgba(15,15,30,.06);
  --shadow-xl:  0 8px 32px rgba(15,15,30,.14);

  /* ── トランジション ──────────────────────────── */
  --transition: 0.18s ease;

  /* ── タイポグラフィ ──────────────────────────── */
  --font-family: 'Noto Sans JP', system-ui, -apple-system, sans-serif;
  --font-size-xs:   0.75rem;
  --font-size-sm:   0.875rem;
  --font-size-base: 1rem;
  --font-size-lg:   1.125rem;
  --font-size-xl:   1.25rem;
  --font-size-2xl:  1.5rem;
  --font-size-3xl:  1.875rem;

  --header-height: 3.5rem;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth}
body{font-family:var(--font-family);font-size:var(--font-size-base);color:var(--text-primary);background:var(--bg-body);line-height:1.6;-webkit-font-smoothing:antialiased;min-height:100vh}
img{max-width:100%;height:auto;display:block}
a{color:var(--color-primary);text-decoration:none}
a:hover{text-decoration:underline}
button{cursor:pointer;font-family:var(--font-family)}
input,select,textarea{font-family:var(--font-family)}

/* アプリレイアウト */
.app{display:none;min-height:100vh}
.app:not([hidden]){display:flex}

/* サイドバー */
.sidebar{width:var(--sidebar-width);height:calc(100vh - var(--header-height));background:var(--sidebar-bg);display:flex;flex-direction:column;position:fixed;top:var(--header-height);left:0;z-index:200;transition:transform var(--transition);overflow-y:auto;overflow-x:hidden}
.sidebar-header{display:none;align-items:center;gap:.75rem;padding:1.25rem 1rem;border-bottom:1px solid var(--sidebar-border);flex-shrink:0}
.sidebar-logo{width:2.25rem;height:2.25rem;background:var(--color-primary);border-radius:var(--border-radius);display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-size-base);flex-shrink:0}
.sidebar-brand{flex:1;min-width:0}
.sidebar-brand-name{display:block;font-size:var(--font-size-sm);font-weight:700;color:#fff;letter-spacing:.05em;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-brand-company{display:block;font-size:var(--font-size-xs);color:var(--sidebar-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-close{display:none;background:none;border:none;color:var(--sidebar-text);font-size:var(--font-size-lg);padding:.25rem;border-radius:var(--border-radius-sm)}
.sidebar-nav{padding:.75rem 0}
.nav-section-label{font-size:var(--font-size-xs);font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--sidebar-text);padding:.75rem 1rem .25rem;opacity:.6}
.nav-item{display:flex;align-items:center;gap:.75rem;padding:.65rem 1rem;color:var(--sidebar-text);text-decoration:none;transition:background var(--transition),color var(--transition);font-size:var(--font-size-sm);font-weight:500;position:relative}
.nav-item:hover{background:rgba(255,255,255,.06);color:#fff;text-decoration:none}
.nav-item.active{background:var(--sidebar-item-act);color:var(--sidebar-text-act)}
.nav-item.active::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--color-primary);border-radius:0 2px 2px 0}
.nav-icon{width:1.25rem;text-align:center;font-size:var(--font-size-base);flex-shrink:0;opacity:.8}
.nav-label{flex:1}
.sidebar-footer{flex-shrink:0;}
.sidebar-user{display:flex;align-items:center;gap:.75rem;padding:.6rem 1rem;margin-bottom:.25rem}
.sidebar-user-avatar{font-size:1.75rem;color:var(--sidebar-text);flex-shrink:0}
.sidebar-user-info{min-width:0}
.sidebar-user-name{display:block;font-size:var(--font-size-sm);font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-user-role{display:block;font-size:var(--font-size-xs);color:var(--sidebar-text)}
.btn-logout{display:flex;align-items:center;gap:.75rem;width:100%;padding:.65rem 1rem;background:none;border:none;color:var(--sidebar-text);font-size:var(--font-size-sm);font-weight:500;transition:background var(--transition),color var(--transition);text-align:left}
.btn-logout:hover{background:rgba(239,68,68,.15);color:#fca5a5}
.sidebar-overlay{display:none;position:fixed;inset:0;background:var(--bg-overlay);z-index:190;opacity:0;transition:opacity var(--transition)}

/* ヘッダー（モバイル） */
.app-header{display:flex;position:fixed;top:0;left:0;right:0;height:var(--header-height);background:var(--bg-surface);border-bottom:1px solid var(--border-color);z-index:250;align-items:center;padding:0 1rem;gap:.75rem;box-shadow:var(--shadow-sm)}
.sidebar-toggle{display:none;background:none;border:none;color:var(--text-secondary);font-size:var(--font-size-xl);padding:.25rem;border-radius:var(--border-radius-sm)}
.header-title{display:none;flex:1;font-size:var(--font-size-base);font-weight:700;color:var(--text-primary);letter-spacing:.03em}
.header-actions{display:flex;gap:.5rem;margin-left:auto}
.header-action-btn{background:none;border:none;color:var(--text-secondary);font-size:var(--font-size-lg);padding:.4rem;border-radius:var(--border-radius-sm)}

/* メインコンテンツ */
.main-content{flex:1;margin-left:var(--sidebar-width);min-height:100vh;display:flex;flex-direction:column;padding-top:var(--header-height)}
.page-container{flex:1;padding:1.5rem 2rem;max-width:1280px;width:100%}
.page-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;min-height:60vh;color:var(--text-muted);font-size:var(--font-size-lg)}

/* ページヘッダー */
.page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;flex-wrap:wrap;gap:.75rem}
.page-title{font-size:var(--font-size-2xl);font-weight:700;color:var(--text-primary);display:flex;align-items:center;gap:.6rem}
.page-title i{color:var(--color-primary)}

/* カード */
.card{background:var(--bg-surface);border-radius:var(--border-radius-lg);box-shadow:var(--shadow);padding:1.5rem;border:1px solid var(--border-color);border-top:2px solid transparent}
.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;padding-bottom:.75rem;border-bottom:1px solid var(--border-color);gap:.75rem;flex-wrap:wrap}
.card-title{font-size:var(--font-size-base);font-weight:700;color:var(--text-primary);display:flex;align-items:center;gap:.5rem}

/* ボタン */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;padding:.5rem 1rem;border-radius:var(--border-radius);border:1px solid transparent;font-size:var(--font-size-sm);font-weight:500;cursor:pointer;transition:background var(--transition),color var(--transition),border-color var(--transition);white-space:nowrap;text-decoration:none;font-family:var(--font-family)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn-primary{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}
.btn-primary:hover:not(:disabled){background:var(--color-primary-dark);border-color:var(--color-primary-dark)}
.btn-secondary{background:transparent;color:var(--text-secondary);border-color:var(--border-color)}
.btn-secondary:hover:not(:disabled){background:var(--bg-muted);border-color:var(--color-primary);color:var(--color-primary)}
.btn-danger{background:var(--color-danger);color:#fff;border-color:var(--color-danger)}
.btn-danger:hover:not(:disabled){background:#dc2626;border-color:#dc2626}
.btn-success{background:var(--color-success);color:#fff;border-color:var(--color-success)}
.btn-success:hover:not(:disabled){background:#059669}
.btn-sm{padding:.3rem .65rem;font-size:var(--font-size-xs)}
.btn-lg{padding:.7rem 1.4rem;font-size:var(--font-size-base)}
.btn-icon{width:2rem;height:2rem;padding:0;border-radius:var(--border-radius-sm)}

/* フォーム */
.form-row{display:flex;gap:1rem;flex-wrap:wrap}
.form-row>.form-group{flex:1;min-width:0}
/* インラインstyleのflex指定を尊重（郵便番号欄等） */
.form-row>.form-group[style*="flex:0"]{flex:0!important;min-width:0!important}
.form-group{margin-bottom:1rem}
.form-label{display:block;font-size:var(--font-size-sm);font-weight:600;color:var(--text-secondary);margin-bottom:.35rem}
.form-input,.form-select,.form-textarea{width:100%;padding:.55rem .85rem;border:1px solid var(--border-color);border-radius:var(--border-radius);font-size:var(--font-size-sm);color:var(--text-primary);background:var(--bg-surface);transition:border-color var(--transition),box-shadow var(--transition);outline:none;font-family:var(--font-family)}
.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(79,70,229,.12)}
.form-textarea{resize:vertical;min-height:6rem;line-height:1.6}
.input-with-toggle{position:relative}
.input-with-toggle .form-input{padding-right:2.5rem}
.toggle-password{position:absolute;right:.6rem;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--text-muted);font-size:var(--font-size-sm);padding:.25rem;cursor:pointer}
.form-check{display:flex;align-items:center;gap:.5rem;cursor:pointer;font-size:var(--font-size-sm)}
.form-check input[type=checkbox],.form-check input[type=radio]{width:1rem;height:1rem;cursor:pointer;accent-color:var(--color-primary)}

/* バッジ */
.badge{display:inline-flex;align-items:center;gap:.25rem;padding:.15rem .55rem;border-radius:var(--border-radius-full);font-size:var(--font-size-xs);font-weight:600;line-height:1.5}
.badge-primary{background:var(--color-primary-light);color:var(--color-primary-dark)}
.badge-success{background:#d1fae5;color:#065f46}
.badge-warning{background:#fef3c7;color:#92400e}
.badge-danger{background:#fee2e2;color:#991b1b}
.badge-gray{background:#f1f5f9;color:var(--text-secondary)}

/* テーブル */
.table-wrapper{overflow-x:auto;border-radius:var(--border-radius);border:1px solid var(--border-color)}
.table{width:100%;border-collapse:collapse;font-size:var(--font-size-sm)}
.table th{background:var(--bg-muted);color:var(--text-secondary);font-weight:700;font-size:var(--font-size-xs);text-transform:uppercase;letter-spacing:.05em;padding:.65rem 1rem;text-align:left;border-bottom:1px solid var(--border-color);white-space:nowrap}
.table td{padding:.75rem 1rem;border-bottom:1px solid var(--border-color);color:var(--text-primary);vertical-align:middle}
.table tbody tr:last-child td{border-bottom:none}
.table tbody tr:hover{background:var(--bg-muted)}

/* Toast */
.toast-container{position:fixed;bottom:1.5rem;right:1.5rem;z-index:9999;display:flex;flex-direction:column;gap:.5rem;pointer-events:none}
.toast{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;background:var(--text-primary);color:#fff;border-radius:var(--border-radius);box-shadow:var(--shadow-lg);font-size:var(--font-size-sm);min-width:16rem;max-width:22rem;pointer-events:auto;animation:toast-in .25s ease}
.toast.toast-success{background:#065f46}
.toast.toast-error{background:#991b1b}
.toast.toast-warning{background:#92400e}
.toast.toast-out{animation:toast-out .25s ease forwards}
@keyframes toast-in{from{opacity:0;transform:translateY(1rem)}to{opacity:1;transform:translateY(0)}}
@keyframes toast-out{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(1rem)}}

/* ダッシュボード */
.dashboard-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:1rem;margin-bottom:1.5rem}
.stat-card{background:var(--bg-surface);border-radius:var(--border-radius-lg);border:1px solid var(--border-color);padding:1.25rem 1.5rem;display:flex;align-items:center;gap:1rem;box-shadow:var(--shadow-sm)}
.stat-icon{width:3rem;height:3rem;border-radius:var(--border-radius);display:flex;align-items:center;justify-content:center;font-size:var(--font-size-xl);flex-shrink:0}
.stat-icon-blue{background:var(--color-primary-light);color:var(--color-primary)}
.stat-icon-green{background:#d1fae5;color:#059669}
.stat-icon-orange{background:#fef3c7;color:#d97706}
.stat-icon-purple{background:#ede9fe;color:#7c3aed}
.stat-value{font-size:var(--font-size-2xl);font-weight:700;color:var(--text-primary);line-height:1.2}
.stat-label{font-size:var(--font-size-xs);color:var(--text-muted);font-weight:500}

/* プロフィール */
.profile-container{max-width:640px}
.profile-section{margin-bottom:1.5rem}

/* 空状態 */
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem 1rem;color:var(--text-muted);text-align:center;gap:.75rem}
.empty-state-icon{font-size:3rem;opacity:.5}
.empty-state-text{font-size:var(--font-size-sm)}

/* スピナー */
.spinner{display:inline-block;width:1rem;height:1rem;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite}
.spinner-dark{border-color:rgba(79,70,229,.2);border-top-color:var(--color-primary)}
@keyframes spin{to{transform:rotate(360deg)}}

/* レスポンシブ */
@media(max-width:1024px){
  .sidebar{transform:translateX(-100%)}
  .sidebar.open{transform:translateX(0);box-shadow:var(--shadow-xl)}
  .sidebar-close{display:block}
  .sidebar-overlay.active{display:block;opacity:1}
  .main-content{margin-left:0;padding-top:var(--header-height)}
  .app-header{left:0}
  .sidebar{top:var(--header-height);height:calc(100vh - var(--header-height))}
  .sidebar-header{display:flex}
  .sidebar-toggle{display:block}
  .header-title{display:block}
  .page-container{padding:1rem}
}
@media(max-width:640px){
  .dashboard-grid{grid-template-columns:1fr 1fr}
  .page-header{flex-direction:column;align-items:flex-start}
}
@media(max-width:400px){.dashboard-grid{grid-template-columns:1fr}}

/* ============================================================
   CRM（顧客・案件・タスク）共通スタイル
   ============================================================ */

/* 検索バー */
.crm-search-bar {
    display     : flex;
    gap         : .75rem;
    flex-wrap   : wrap;
    align-items : center;
    margin-bottom: 1rem;
}

/* 詳細ページ 2カラムグリッド */
.crm-detail-grid {
    display               : grid;
    grid-template-columns : 18rem 1fr;
    gap                   : 1rem;
    align-items           : start;
}

/* 情報行 */
.crm-info-row {
    display         : flex;
    align-items     : center;
    gap             : .75rem;
    padding         : .45rem .25rem;
    border-bottom   : 1px solid var(--border-color);
    font-size       : var(--font-size-sm);
}
.crm-info-row:last-child { border-bottom: none; }
.crm-info-label {
    width       : 6rem;
    flex-shrink : 0;
    font-weight : 600;
    color       : var(--text-secondary);
    font-size   : var(--font-size-xs);
}
.crm-info-value { flex: 1; word-break: break-word; }

/* インライン行 */
.crm-inline-row {
    display     : flex;
    align-items : center;
    gap         : .5rem;
    padding     : .45rem .6rem;
    border      : 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background  : var(--bg-surface);
    transition  : background var(--transition);
    font-size   : var(--font-size-sm);
}
.crm-inline-row:hover { background: var(--bg-muted); }

/* カンバンボード */
.kanban-board {
    display     : flex;
    gap         : .75rem;
    overflow-x  : auto;
    padding-bottom: .5rem;
    align-items : start;
}
.kanban-col {
    min-width   : 13rem;
    width       : 13rem;
    flex-shrink : 0;
    background  : var(--bg-muted);
    border-radius: var(--border-radius-lg);
    border      : 1px solid var(--border-color);
    overflow    : hidden;
}
.kanban-col-header {
    display         : flex;
    align-items     : center;
    justify-content : space-between;
    padding         : .6rem .75rem;
    background      : var(--bg-surface);
    border-bottom   : 1px solid var(--border-color);
}
.kanban-col-title  { font-size: var(--font-size-sm); font-weight: 700; }
.kanban-col-count  { font-size: var(--font-size-xs); color: var(--text-muted); }
.kanban-col-total  {
    font-size   : var(--font-size-xs);
    color       : var(--text-secondary);
    padding     : .25rem .75rem;
    background  : var(--bg-surface);
    border-bottom: 1px solid var(--border-color);
    text-align  : right;
}
.kanban-cards { padding: .5rem; display: flex; flex-direction: column; gap: .4rem; }
.kanban-card {
    background    : var(--bg-surface);
    border        : 1px solid var(--border-color);
    border-radius : var(--border-radius);
    padding       : .6rem .75rem;
    cursor        : pointer;
    transition    : box-shadow var(--transition);
}
.kanban-card:hover { box-shadow: var(--shadow-lg); }
.kanban-card-title   { font-size: var(--font-size-sm); font-weight: 600; margin-bottom: .2rem; }
.kanban-card-company { font-size: var(--font-size-xs); color: var(--text-muted); margin-bottom: .4rem; }
.kanban-card-footer  {
    display     : flex;
    gap         : .4rem;
    flex-wrap   : wrap;
    font-size   : var(--font-size-xs);
    color       : var(--text-secondary);
    align-items : center;
}

/* タスクのステータス色 */
.task-todo       { color: var(--text-muted); }
.task-inprogress { color: var(--color-warning); }
.task-done       { color: var(--color-success); }
.task-done-row   { opacity: .7; }
.task-pri-high   { color: var(--color-danger); }
.task-pri-med    { color: var(--color-primary); }
.task-pri-low    { color: var(--text-muted); }

/* レスポンシブ */
@media (max-width: 900px) {
    .crm-detail-grid { grid-template-columns: 1fr; }
}

/* modal-xl: CRM詳細用大型モーダル */
.modal-xl {
    max-width   : 860px;
    width       : 95vw;
}

/* CRM 詳細モーダル内ヘッダー */
.crm-detail-header {
    display         : flex;
    justify-content : space-between;
    align-items     : flex-start;
    gap             : 1rem;
    margin-bottom   : 1.25rem;
    padding-bottom  : 1rem;
    border-bottom   : 1px solid var(--border-color);
    flex-wrap       : wrap;
}

/* CRM セクションタイトル */
.crm-section-title {
    font-size     : var(--font-size-sm);
    font-weight   : 700;
    color         : var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: .05em;
    border-bottom : 1px solid var(--border-color);
    padding-bottom: .4rem;
    margin-bottom : .6rem;
}

/* ============================================================
   見積書・契約 スタイル
   ============================================================ */

/* フォーム内の小さい入力（明細テーブル用） */
.form-input-sm {
    padding   : .3rem .5rem;
    font-size : var(--font-size-sm);
    height    : auto;
    width     : 100%;
}

/* 金額サマリーブロック */
.quote-summary {
    display         : flex;
    flex-direction  : column;
    gap             : .2rem;
    max-width       : 22rem;
    margin-left     : auto;
    border          : 1px solid var(--border-color);
    border-radius   : var(--border-radius);
    overflow        : hidden;
}

.quote-summary-row {
    display         : flex;
    justify-content : space-between;
    align-items     : center;
    padding         : .45rem .9rem;
    font-size       : var(--font-size-sm);
    background      : var(--bg-surface);
    border-bottom   : 1px solid var(--border-color);
}
.quote-summary-row:last-child { border-bottom: none; }

.quote-summary-total {
    background  : var(--bg-muted);
    font-size   : var(--font-size-base);
    font-weight : 700;
    padding     : .6rem .9rem;
}

/* btn-success（契約作成ボタン用） */
.btn-success {
    background : var(--color-success);
    color      : #fff;
    border     : 1px solid transparent;
}
.btn-success:hover  { background: #059669; }
.btn-success:disabled { opacity: .5; cursor: not-allowed; }

/* ============================================================
   タスクガントチャートスタイル
   ============================================================ */
.tgantt-wrap {
    --tgantt-label-w : 14rem;
    --tgantt-row-h   : 2.6rem;
}

/* コントロールバー */
.tgantt-controls {
    display         : flex;
    align-items     : center;
    justify-content : space-between;
    gap             : .75rem;
    flex-wrap       : wrap;
    margin-bottom   : .75rem;
}

/* 横スクロールコンテナ */
.tgantt-scroll {
    overflow-x            : auto;
    background            : var(--bg-surface);
    border                : 1px solid var(--border-color);
    border-radius         : var(--border-radius-lg);
    box-shadow            : var(--shadow-sm);
    -webkit-overflow-scrolling: touch;
}

/* ガント全体 */
.tgantt-chart {
    min-width      : max-content;
    display        : flex;
    flex-direction : column;
}

/* 各行共通 */
.tgantt-row {
    display       : grid;
    border-bottom : 1px solid var(--border-color);
    min-height    : var(--tgantt-row-h);
    position      : relative;
    align-items   : stretch;
}
.tgantt-row:last-child { border-bottom: none; }

/* セル共通 */
.tgantt-cell {
    border-right : 1px solid var(--border-color);
    display      : flex;
    align-items  : center;
}

/* ラベル列 */
.tgantt-label-cell {
    position    : sticky;
    left        : 0;
    z-index     : 5;
    background  : var(--bg-surface);
    border-right: 2px solid var(--border-color);
    min-width   : var(--tgantt-label-w);
    max-width   : var(--tgantt-label-w);
    padding     : .3rem .6rem;
    gap         : .4rem;
    font-size   : var(--font-size-sm);
}

/* ヘッダー行 */
.tgantt-header-row {
    background : var(--bg-muted);
    position   : sticky;
    top        : 0;
    z-index    : 10;
}
.tgantt-head-cell {
    display         : flex;
    flex-direction  : column;
    align-items     : center;
    justify-content : center;
    padding         : .25rem .2rem;
    border-right    : 1px solid var(--border-color);
    background      : var(--bg-muted);
}
.tgantt-head-label {
    font-size   : var(--font-size-xs);
    font-weight : 700;
    white-space : nowrap;
}
.tgantt-head-sub {
    font-size : .62rem;
    color     : var(--text-muted);
}
.tgantt-today-head  { background: rgba(79,70,229,.1); }
.tgantt-today-head .tgantt-head-label { color: var(--color-primary); }
.tgantt-weekend-head { background: rgba(239,68,68,.04); }
.tgantt-weekend-head .tgantt-head-label { color: #ef4444; }

/* ヘッダーのラベルセル（左上角） */
.tgantt-head-cell.tgantt-label-cell { z-index: 11; background: var(--bg-muted); }

/* 案件グループ行 */
.tgantt-deal-row { background: var(--bg-muted); min-height: 2rem; }
.tgantt-deal-label {
    font-size   : var(--font-size-xs);
    font-weight : 700;
    color       : var(--text-primary);
    gap         : .4rem;
    padding     : .3rem .6rem;
}
.tgantt-company {
    color       : var(--text-muted);
    font-weight : 400;
    font-size   : .7rem;
    margin-left : .25rem;
}

/* タスク行 */
.tgantt-task-row { background: var(--bg-surface); }
.tgantt-task-label {
    font-size   : var(--font-size-sm);
    font-weight : 500;
    overflow    : hidden;
    white-space : nowrap;
}
.tgantt-task-name {
    flex          : 1;
    overflow      : hidden;
    text-overflow : ellipsis;
    white-space   : nowrap;
    min-width     : 0;
}
.tgantt-done-name {
    text-decoration : line-through;
    color           : var(--text-muted);
}

/* 背景セル */
.tgantt-bg-cell {
    border-right : 1px solid var(--border-color);
    align-self   : stretch;
    grid-row     : 1;
}
.tgantt-today-col   { background: rgba(79,70,229,.06); }
.tgantt-weekend-col { background: rgba(239,68,68,.03);  }

/* タスクバー（日モード: CSS Grid）*/
.tgantt-task-bar {
    grid-row        : 1;
    align-self      : center;
    height          : 1.65rem;
    border-radius   : .35rem;
    display         : flex;
    align-items     : center;
    padding         : 0 .4rem;
    cursor          : pointer;
    overflow        : hidden;
    white-space     : nowrap;
    z-index         : 2;
    box-shadow      : 0 1px 3px rgba(0,0,0,.15);
    transition      : opacity .15s, box-shadow .15s;
    margin          : 0 2px;
    color           : #fff;
}
.tgantt-task-bar:hover {
    opacity    : .88;
    box-shadow : 0 2px 8px rgba(0,0,0,.22);
    z-index    : 3;
}
.tgantt-bar-done { opacity: .55 !important; }

/* タスクバー（月モード: 絶対配置）*/
.tgantt-task-bar-abs {
    position  : absolute;
    top       : 50%;
    transform : translateY(-50%);
    height    : 1.65rem;
    min-width : .5rem;
}

.tgantt-bar-label {
    font-size     : .7rem;
    font-weight   : 600;
    overflow      : hidden;
    text-overflow : ellipsis;
    flex          : 1;
    text-shadow   : 0 1px 2px rgba(0,0,0,.2);
}
.tgantt-bar-date {
    font-size   : .65rem;
    opacity     : .8;
    margin-left : .3rem;
    flex-shrink : 0;
}
.tgantt-bar-pri {
    font-size   : .65rem;
    margin-right: .25rem;
    flex-shrink : 0;
}

/* 月モードのバーオーバーレイ */
.tgantt-month-bars-wrap {
    grid-column : 2 / -1;
    position    : relative;
}

/* レスポンシブ */
@media (max-width: 768px) {
    .tgantt-wrap { --tgantt-label-w: 8rem; }
    .tgantt-controls { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   ファイル紐付けモーダル タブ
   ============================================================ */
.lf-tabs {
    display         : flex;
    border-bottom   : 2px solid var(--border-color);
    gap             : 0;
    margin-bottom   : 0;
}
.lf-tab {
    background   : none;
    border       : none;
    padding      : .55rem 1rem;
    font-size    : var(--font-size-sm);
    font-weight  : 600;
    color        : var(--text-secondary);
    cursor       : pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition   : color var(--transition), border-color var(--transition);
    display      : flex;
    align-items  : center;
    gap          : .4rem;
}
.lf-tab:hover  { color: var(--color-primary); }
.lf-tab.active {
    color        : var(--color-primary);
    border-bottom-color: var(--color-primary);
}
.lf-tab-panel { padding-top: .25rem; }

/* 会社情報ブロック（見積書等で使用） */
.company-info-block {
    font-size   : var(--font-size-sm);
    line-height : 1.7;
    color       : var(--text-secondary);
}
.company-info-name {
    font-weight   : 700;
    font-size     : var(--font-size-base);
    color         : var(--text-primary);
    margin-bottom : .15rem;
}
.company-info-line { color: var(--text-secondary); }

/* ============================================================
   見積書フォームモーダル 改善スタイル
   ============================================================ */

/* 宛先ヘッダー（顧客・案件情報） */
.qf-deal-header {
    display         : flex;
    flex-wrap       : wrap;
    gap             : .5rem 1.5rem;
    align-items     : center;
    background      : var(--bg-muted);
    border          : 1px solid var(--border-color);
    border-radius   : var(--border-radius);
    padding         : .6rem 1rem;
    margin-bottom   : 1rem;
    font-size       : var(--font-size-sm);
}
.qf-deal-customer {
    font-weight : 700;
    color       : var(--text-primary);
    display     : flex;
    align-items : center;
    gap         : .4rem;
}
.qf-deal-contact {
    font-weight : 400;
    color       : var(--text-secondary);
    font-size   : var(--font-size-xs);
    margin-left : .25rem;
}
.qf-deal-name {
    color       : var(--text-secondary);
    display     : flex;
    align-items : center;
    gap         : .4rem;
}

/* フッターレイアウト（備考 + サマリー横並び） */
.qf-footer-layout {
    display     : flex;
    gap         : 1.5rem;
    align-items : flex-start;
    margin-top  : .75rem;
}
@media (max-width: 640px) {
    .qf-footer-layout { flex-direction: column; }
    .qf-footer-layout .quote-summary { width: 100%; }
}

/* ドラッグ中の行スタイル */
.qf-item-row.qf-dragging {
    opacity    : .45;
    background : var(--bg-muted);
}
.qf-item-row.qf-drag-over {
    border-top : 2px solid var(--color-primary);
}
.qf-drag-handle {
    cursor     : grab;
    user-select: none;
}
.qf-drag-handle:active { cursor: grabbing; }

/* 金額欄が手動入力モードのとき下線で示す */
.qf-item-amount[data-manual="1"] {
    border-bottom-color : var(--color-warning);
    background          : rgba(245,158,11,.06);
}

/* ============================================================
   ドロップダウンメニュー
   ============================================================ */
.dropdown-wrap { position: relative; }

.dropdown-menu {
    position      : absolute;
    top           : calc(100% + 4px);
    right         : 0;
    z-index       : 200;
    background    : var(--bg-surface);
    border        : 1px solid var(--border-color);
    border-radius : var(--border-radius-lg);
    box-shadow    : var(--shadow-lg);
    min-width     : 9rem;
    padding       : .3rem;
    animation     : modal-in .15s ease;
}
.dropdown-item {
    display       : flex;
    align-items   : center;
    width         : 100%;
    padding       : .45rem .65rem;
    font-size     : var(--font-size-sm);
    border        : none;
    background    : none;
    cursor        : pointer;
    border-radius : var(--border-radius);
    transition    : background var(--transition);
    text-align    : left;
}
.dropdown-item:hover { background: var(--bg-muted); }

/* ============================================================
   連絡履歴タイムライン
   ============================================================ */
.contact-timeline {
    display        : flex;
    flex-direction : column;
    gap            : .5rem;
    padding        : .25rem 0;
}

.contact-item {
    display    : flex;
    gap        : .65rem;
    align-items: flex-start;
}

.contact-icon-wrap {
    flex-shrink   : 0;
    width         : 2rem;
    height        : 2rem;
    border-radius : 50%;
    display       : flex;
    align-items   : center;
    justify-content: center;
}

.contact-body {
    flex      : 1;
    min-width : 0;
    background: var(--bg-surface);
    border    : 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding   : .5rem .7rem;
    font-size : var(--font-size-sm);
}

.contact-meta {
    display     : flex;
    align-items : center;
    gap         : .5rem;
    flex-wrap   : wrap;
    margin-bottom: .25rem;
}

.contact-type-label { font-size: var(--font-size-xs); }
.contact-to {
    font-size  : var(--font-size-xs);
    color      : var(--text-muted);
    overflow   : hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width  : 12rem;
}
.contact-time {
    font-size   : var(--font-size-xs);
    color       : var(--text-muted);
    white-space : nowrap;
}
.contact-subject {
    font-weight   : 600;
    margin-bottom : .2rem;
    white-space   : nowrap;
    overflow      : hidden;
    text-overflow : ellipsis;
}
.contact-content {
    color      : var(--text-secondary);
    white-space: pre-wrap;
    font-size  : var(--font-size-sm);
    line-height: 1.5;
    max-height : 4.5rem;
    overflow   : hidden;
}
.contact-files {
    display   : flex;
    gap       : .35rem;
    flex-wrap : wrap;
    margin-top: .4rem;
}
.contact-file-chip {
    display     : inline-flex;
    align-items : center;
    gap         : .3rem;
    padding     : .2rem .5rem;
    border-radius: var(--border-radius);
    background  : var(--bg-muted);
    border      : 1px solid var(--border-color);
    font-size   : var(--font-size-xs);
    color       : var(--text-secondary);
    text-decoration: none;
    transition  : background var(--transition);
}
.contact-file-chip:hover { background: var(--border-color); }

/* ============================================================
   ヘッダー ユーザードロップダウン
   ============================================================ */
.header-user-wrap {
    position : relative;
}

.header-user-btn {
    display      : flex;
    align-items  : center;
    gap          : .45rem;
    background   : none;
    border       : none;
    border-radius: var(--border-radius);
    padding      : .35rem .6rem;
    cursor       : pointer;
    transition   : background var(--transition);
    color        : var(--text-primary);
    white-space  : nowrap;
    max-width    : 14rem;
}
.header-user-btn:hover { background: var(--bg-muted); }

.header-user-avatar {
    font-size    : 1.4rem;
    color        : var(--color-primary);
    flex-shrink  : 0;
}
.header-user-name {
    font-size    : var(--font-size-sm);
    font-weight  : 600;
    overflow     : hidden;
    text-overflow: ellipsis;
    max-width    : 8rem;
}
.header-user-caret {
    font-size    : .65rem;
    color        : var(--text-muted);
    flex-shrink  : 0;
    transition   : transform var(--transition);
}
.header-user-wrap.open .header-user-caret {
    transform: rotate(180deg);
}

/* ドロップダウンメニュー本体 */
.header-user-menu {
    position     : absolute;
    top          : calc(100% + 6px);
    right        : 0;
    min-width    : 13rem;
    background   : var(--bg-surface);
    border       : 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    box-shadow   : var(--shadow-lg);
    z-index      : 300;
    overflow     : hidden;
    animation    : modal-in .15s ease;
}
.header-user-menu:not([hidden]) { display: block; }

/* ユーザー情報エリア */
.header-user-menu-info {
    padding      : .85rem 1rem .7rem;
    display      : flex;
    flex-direction: column;
    gap          : .15rem;
}
.header-user-menu-display {
    font-size    : var(--font-size-sm);
    font-weight  : 700;
    color        : var(--text-primary);
}
.header-user-menu-role {
    font-size    : var(--font-size-xs);
    color        : var(--text-muted);
}

.header-user-menu-divider {
    height       : 1px;
    background   : var(--border-color);
    margin       : 0;
}

/* メニュー項目 */
.header-user-menu-item {
    display      : flex;
    align-items  : center;
    gap          : .6rem;
    width        : 100%;
    padding      : .65rem 1rem;
    font-size    : var(--font-size-sm);
    font-weight  : 500;
    color        : var(--text-secondary);
    text-decoration: none;
    background   : none;
    border       : none;
    cursor       : pointer;
    transition   : background var(--transition), color var(--transition);
    text-align   : left;
}
.header-user-menu-item:hover {
    background   : var(--bg-muted);
    color        : var(--text-primary);
}
.header-user-menu-item i {
    width        : 1rem;
    text-align   : center;
    color        : var(--text-muted);
    flex-shrink  : 0;
}
.header-user-menu-logout:hover {
    background   : rgba(220,38,38,.07);
    color        : var(--color-danger);
}
.header-user-menu-logout:hover i {
    color        : var(--color-danger);
}

/* ============================================================
   ヘッダーブランドエリア（PC: サイドバー幅分）
   ============================================================ */
.header-brand-area {
    display      : flex;
    align-items  : center;
    gap          : .6rem;
    width        : var(--sidebar-width);
    flex-shrink  : 0;
    padding-right: 1rem;
    border-right : 1px solid var(--border-color);
    margin-right : .75rem;
}
.header-brand-logo {
    width           : 1.75rem;
    height          : 1.75rem;
    background      : var(--color-primary);
    border-radius   : var(--border-radius-sm);
    display         : flex;
    align-items     : center;
    justify-content : center;
    color           : #fff;
    font-size       : .85rem;
    flex-shrink     : 0;
}
.header-brand-name {
    font-size     : var(--font-size-sm);
    font-weight   : 700;
    color         : var(--text-primary);
    letter-spacing: .04em;
    white-space   : nowrap;
}

/* モバイル: ブランドエリアを非表示 */
@media(max-width:1024px) {
    .header-brand-area { display: none; }
}

/* ============================================================
   タスクフォーム 優先度・状態 UI（共通リセット）
   ============================================================ */



/* ============================================================
   タスクフォーム 優先度 ライジンググラフボックス
   ============================================================ */
.tf-pri-box {
    position     : relative;
    height       : 5rem;
    border       : 1px solid var(--border-color);
    border-radius: var(--border-radius);
    overflow     : hidden;
    display      : flex;
    cursor       : pointer;
}
.tf-pri-svg {
    position : absolute;
    inset    : 0;
    width    : 100%;
    height   : 100%;
    pointer-events: none;
}
.tf-pri-zone {
    flex            : 1;
    position        : relative;
    z-index         : 1;
    background      : none;
    border          : none;
    cursor          : pointer;
    font-size       : var(--font-size-base);
    font-weight     : 700;
    color           : rgba(0,0,0,.2);
    transition      : color var(--transition), text-shadow var(--transition);
    display         : flex;
    align-items     : center;
    justify-content : center;
    letter-spacing  : .05em;
    user-select     : none;
}
.tf-pri-zone:hover  { color: rgba(0,0,0,.45); }

.tf-pri-low.active    { color: #059669; text-shadow: 0 1px 6px rgba(5,150,105,.3); }
.tf-pri-medium.active { color: #b45309; text-shadow: 0 1px 6px rgba(234,179,8,.4); }
.tf-pri-high.active   { color: #dc2626; text-shadow: 0 1px 6px rgba(220,38,38,.3); }

/* ============================================================
   タスクフォーム 状態 矢印ボックス選択
   ============================================================ */
.tf-st-box {
    position     : relative;
    height       : 5rem;
    border       : 1px solid var(--border-color);
    border-radius: var(--border-radius);
    overflow     : hidden;
    display      : flex;
    cursor       : pointer;
}
.tf-st-svg {
    position      : absolute;
    inset         : 0;
    width         : 100%;
    height        : 100%;
    pointer-events: none;
}
.tf-st-zone {
    flex            : 1;
    position        : relative;
    z-index         : 1;
    background      : none;
    border          : none;
    cursor          : pointer;
    font-size       : var(--font-size-base);
    font-weight     : 700;
    color           : rgba(0,0,0,.2);
    transition      : color var(--transition), text-shadow var(--transition);
    display         : flex;
    align-items     : center;
    justify-content : center;
    letter-spacing  : .03em;
    user-select     : none;
}
.tf-st-zone:hover { color: rgba(0,0,0,.45); }

.tf-st-todo.active   { color: #4b5563; text-shadow: 0 1px 6px rgba(107,114,128,.35); }
.tf-st-inprog.active { color: #4f46e5; text-shadow: 0 1px 6px rgba(79,70,229,.4); }
.tf-st-done.active   { color: #059669; text-shadow: 0 1px 6px rgba(5,150,105,.35); }

/* ============================================================
   案件ステータス ビジュアルグリッド選択
   ============================================================ */
.ds-grid {
    display              : grid;
    grid-template-columns: repeat(3, 1fr);
    gap                  : .4rem;
}
.ds-zone {
    display        : flex;
    flex-direction : column;
    align-items    : center;
    justify-content: center;
    gap            : .2rem;
    padding        : .6rem .4rem;
    border         : 2px solid var(--border-color);
    border-radius  : var(--border-radius);
    background     : var(--bg-surface);
    cursor         : pointer;
    font-size      : var(--font-size-xs);
    font-weight    : 700;
    color          : var(--text-muted);
    transition     : all var(--transition);
    line-height    : 1.2;
}
.ds-zone:hover {
    border-color : var(--ds-color);
    color        : var(--ds-color);
    background   : var(--ds-bg);
}
.ds-zone.active {
    border-color : var(--ds-color);
    color        : var(--ds-color);
    background   : var(--ds-bg);
    box-shadow   : 0 0 0 1px var(--ds-color);
}
.ds-zone i { color: inherit; }

/* ============================================================
   顧客サジェスト検索（案件フォーム）
   ============================================================ */
.customer-suggest-wrap {
    position : relative;
}
.customer-id-badge {
    display     : inline-flex;
    align-items : center;
    padding     : .2rem .5rem;
    background  : var(--color-primary-light);
    color       : var(--color-primary);
    border      : 1px solid var(--color-primary);
    border-radius: var(--border-radius-sm);
    font-size   : var(--font-size-xs);
    font-weight : 700;
    white-space : nowrap;
    flex-shrink : 0;
    font-family : monospace;
}
.customer-suggest-list {
    position     : absolute;
    top          : calc(100% + 4px);
    left         : 0;
    right        : 0;
    z-index      : 400;
    background   : var(--bg-surface);
    border       : 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow   : var(--shadow-lg);
    max-height   : 16rem;
    overflow-y   : auto;
}
.customer-suggest-item {
    padding     : .6rem 1rem;
    cursor      : pointer;
    border-bottom: 1px solid var(--border-color);
    transition  : background var(--transition);
}
.customer-suggest-item:last-child { border-bottom: none; }
.customer-suggest-item:hover      { background: var(--bg-muted); }

/* ============================================================
   顧客担当者 複数登録カード
   ============================================================ */
.cf-contacts-section {
    border     : 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    padding    : 1rem;
    margin-bottom: 1rem;
    background : var(--bg-muted);
}
.cf-contact-card {
    background   : var(--bg-surface);
    border       : 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding      : .85rem 1rem;
    margin-bottom: .65rem;
}
.cf-contact-card:last-child { margin-bottom: 0; }