/* theme-saas.css — 一般的なSaaS管理画面に寄せた配色・質感
   tokens.css の値を上書きするだけなので、この配色をやめるときは
   サイドバー下部の「テーマ」を「深緑」に戻すか、index.html のこの1行を外せば元に戻ります。 */

:root[data-theme="saas"] {
  /* 基調：スレート系のニュートラル */
  --c-ink:        #0F172A;
  --c-body:       #475569;
  --c-muted:      #64748B;
  --c-line:       #E5E9F0;
  --c-line-strong:#CBD5E1;
  --c-surface:    #F8FAFC;
  --c-surface-2:  #F1F5F9;
  --c-paper:      #FFFFFF;

  /* 主色：SaaSで最も一般的な青 */
  --c-primary:    #2563EB;
  --c-primary-d:  #1D4ED8;
  --c-primary-l:  #EFF6FF;

  /* ステータス */
  --c-ok:         #15803D;  --c-ok-bg:    #DCFCE7;
  --c-warn:       #B45309;  --c-warn-bg:  #FEF3C7;
  --c-alert:      #B91C1C;  --c-alert-bg: #FEE2E2;
  --c-info:       #1D4ED8;  --c-info-bg:  #DBEAFE;

  /* 角丸と影 */
  --r-sm: 6px;
  --r-md: 8px;
  --shadow-drawer: 0 24px 48px rgba(15, 23, 42, .18);
  --shadow-card:   0 1px 2px rgba(15, 23, 42, .06);
  --shadow-pop:    0 8px 24px rgba(15, 23, 42, .12);
  --app-bg:        #F8FAFC;
}

/* ---------- シェル ---------- */
:root[data-theme="saas"] .app-header {
  border-bottom-color: var(--c-line);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
:root[data-theme="saas"] .app-header__brand .mark { border-radius: 4px; }
:root[data-theme="saas"] .app-main { background: var(--app-bg); }
:root[data-theme="saas"] .page-head { background: var(--c-paper); }

/* サイドバー：白地＋角丸のナビ項目（左のアクセントバーは使わない） */
:root[data-theme="saas"] .sidebar { background: var(--c-paper); border-right-color: var(--c-line); }
:root[data-theme="saas"] .sidebar__group + .sidebar__group { border-top-color: var(--c-line); }
:root[data-theme="saas"] .nav-item {
  width: calc(100% - 16px);
  margin: 1px 8px;
  height: 34px;
  padding: 0 10px;
  border-radius: 6px;
}
:root[data-theme="saas"] .nav-item::before { display: none; }
:root[data-theme="saas"] .nav-item:hover { background: var(--c-surface-2); }
:root[data-theme="saas"] .nav-item.is-active {
  background: var(--c-primary-l);
  color: var(--c-primary);
}
:root[data-theme="saas"] .nav-item.is-active .nav-item__glyph { color: var(--c-primary); }
:root[data-theme="saas"] .nav-item__count { border-radius: 999px; }
:root[data-theme="saas"].is-collapsed .nav-item,
:root[data-theme="saas"] .app.is-collapsed .nav-item { padding: 0 10px; }

/* ---------- カード類：白地＋薄い影 ---------- */
:root[data-theme="saas"] .card,
:root[data-theme="saas"] .kpi,
:root[data-theme="saas"] .panel,
:root[data-theme="saas"] .gov-card,
:root[data-theme="saas"] .event-card,
:root[data-theme="saas"] .prop-card,
:root[data-theme="saas"] .chat,
:root[data-theme="saas"] > body .table-wrap,
:root[data-theme="saas"] .table-wrap {
  background: var(--c-paper);
  box-shadow: var(--shadow-card);
  border-color: var(--c-line);
}
:root[data-theme="saas"] .card .table-wrap,
:root[data-theme="saas"] .panel .table-wrap,
:root[data-theme="saas"] .drawer .table-wrap,
:root[data-theme="saas"] .modal .table-wrap { box-shadow: none; }

:root[data-theme="saas"] .cust-head {
  background: var(--c-paper);
  box-shadow: var(--shadow-card);
}
:root[data-theme="saas"] .event-card { border-color: var(--c-line); }

/* ---------- テーブル ---------- */
:root[data-theme="saas"] .dt th {
  background: var(--c-paper);
  border-bottom-color: var(--c-line-strong);
  color: var(--c-muted);
  letter-spacing: .02em;
}
:root[data-theme="saas"] .dt tbody tr.is-clickable:hover { background: var(--c-surface); }
:root[data-theme="saas"] .dt td { border-bottom-color: var(--c-line); }

/* ---------- バッジ・チップ ---------- */
:root[data-theme="saas"] .badge {
  height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  font-weight: 600;
}
:root[data-theme="saas"] .chip { border-radius: 999px; padding: 0 10px; }
:root[data-theme="saas"] .chip-alert { border-radius: 999px; }
:root[data-theme="saas"] .tier { border-radius: 5px; }
:root[data-theme="saas"] .dummy-badge { border-radius: 999px; }

/* ---------- ボタン ---------- */
:root[data-theme="saas"] .btn {
  height: 34px;
  border-radius: 6px;
  font-weight: 600;
}
:root[data-theme="saas"] .btn--primary { box-shadow: 0 1px 2px rgba(37, 99, 235, .22); }
:root[data-theme="saas"] .btn--secondary { box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
:root[data-theme="saas"] .btn--sm { height: 28px; border-radius: 6px; }

/* ---------- フォーム ---------- */
:root[data-theme="saas"] .input,
:root[data-theme="saas"] .select,
:root[data-theme="saas"] .textarea {
  height: 34px;
  border-radius: 6px;
  border-color: var(--c-line-strong);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
:root[data-theme="saas"] .textarea { height: auto; }
:root[data-theme="saas"] .input:focus,
:root[data-theme="saas"] .select:focus,
:root[data-theme="saas"] .textarea:focus {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .16);
}
:root[data-theme="saas"] :focus-visible { outline-color: var(--c-primary); }
:root[data-theme="saas"] .role-select { height: 30px; border-radius: 6px; }

/* ---------- タブ ---------- */
:root[data-theme="saas"] .tab.is-active { color: var(--c-primary); }
:root[data-theme="saas"] .tab.is-active::after { background: var(--c-primary); border-radius: 2px 2px 0 0; }
:root[data-theme="saas"] .chat-tab.is-active { background: var(--c-primary); }

/* ---------- 拠点タイル ---------- */
:root[data-theme="saas"] .branch-tile {
  border-radius: 8px;
  box-shadow: var(--shadow-card);
}
:root[data-theme="saas"] .branch-tile--warn { border-color: #FCD34D; }
:root[data-theme="saas"] .branch-tile--alert { border-color: #FCA5A5; }

/* ---------- 通知・ドロワー・モーダル ---------- */
:root[data-theme="saas"] .notice { border-radius: 0 6px 6px 0; }
:root[data-theme="saas"] .toast { border-radius: 8px; background: #0F172A; }
:root[data-theme="saas"] .modal { border-radius: 12px; }
:root[data-theme="saas"] .overlay { background: rgba(15, 23, 42, .32); }
:root[data-theme="saas"] .step__no { border-radius: 999px; }

/* ---------- チャット ---------- */
:root[data-theme="saas"] .chat-bubble { border-radius: 4px 12px 12px 12px; }
:root[data-theme="saas"] .chat-bubble--mine {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: #fff;
  border-radius: 12px 4px 12px 12px;
}
:root[data-theme="saas"] .chat-file { border-radius: 10px; }
:root[data-theme="saas"] .chat-file--mine { background: var(--c-primary-l); border-color: #BFDBFE; }
:root[data-theme="saas"] .chat-item.is-active { box-shadow: inset 3px 0 0 var(--c-primary); }
:root[data-theme="saas"] .chat-item__unread { background: var(--c-primary); }
:root[data-theme="saas"] .line-bubble { border-radius: 4px 12px 12px 12px; }
:root[data-theme="saas"] .line-bubble__cta { border-radius: 999px; }

/* ---------- グラフ ---------- */
:root[data-theme="saas"] .funnel__step--last { border-color: #BFDBFE; }