/* ============================================================================
   FaciLog デザインレイヤー（Apple のサービス風の洗練）  2026-09-12
   ----------------------------------------------------------------------------
   目的  : 既存の Tailwind ユーティリティ／インライン style／JS のクラス切替を
           一切壊さず、上から「質感」だけを差し替える。
   構成  : app.html / index.html の tailwind.config（gray パレット・角丸・影・フォント）
           ＋ この CSS（トップバー・サイドバー・表・入力欄・ボタン・スクロールバー）。
   戻す時: <link rel="stylesheet" href="facilog-design.css"> を外し、
           tailwind.config の gray / borderRadius / boxShadow / fontFamily を元に戻す。
   原則  : ・色は「白＋#f5f5f7＋#1d1d1f」を土台に、ブランド緑はアクセントとしてだけ使う
           ・囲い枠より余白と面で区切る（ヘアライン 1px rgba(0,0,0,.08) まで）
           ・角丸は 8 / 12 / 18px、影は淡く広く
           ・見出しは 600（semibold）＋わずかなマイナス字間、数字は等幅（tabular-nums）
   ========================================================================== */

:root {
  --ds-bg: #ffffff;          /* ページ背景は白（ユーザー指示 2026-09-13）。薄灰 #f5f5f7 は面の色として使う */
  --ds-bg-2: #f5f5f7;
  --ds-surface: #ffffff;
  --ds-text: #1d1d1f;
  --ds-text-2: #6e6e73;
  --ds-text-3: #86868b;
  --ds-sep: rgba(0, 0, 0, .08);
  --ds-sep-strong: #d2d2d7;
  --ds-fill: rgba(0, 0, 0, .04);
  --ds-fill-2: rgba(0, 0, 0, .07);
  --ds-accent: #3EAC70;
  --ds-accent-deep: #277A4D;
  --ds-accent-tint: #e6f4ec;
  --ds-shadow-card: 0 1px 2px rgba(0, 0, 0, .05), 0 8px 24px rgba(0, 0, 0, .07);   /* 白の上の白カードでも輪郭が出る強さ */
  --ds-shadow-pop: 0 12px 40px rgba(0, 0, 0, .14), 0 2px 8px rgba(0, 0, 0, .06);
  --ds-ring: 0 0 0 4px rgba(62, 172, 112, .18);
}

/* ---------- 土台：背景・文字レンダリング ---------- */
html { background-color: var(--ds-bg) !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
html body { background-color: var(--ds-bg) !important; color: var(--ds-text); }
#ios26Tint { background-color: #ffffff !important; }

/* 見出し：semibold ＋ わずかなマイナス字間 ＋ プロポーショナル詰め（palt） */
html .font-bold { font-weight: 600; }
html .font-extrabold, html .font-black { font-weight: 700; }
html .text-lg, html .text-xl, html .text-2xl, html .text-3xl, html .text-4xl, html .text-5xl,
h1, h2, h3 { letter-spacing: -.012em; font-feature-settings: "palt"; }
html .text-2xl, html .text-3xl, html .text-4xl, html .text-5xl { letter-spacing: -.022em; }
/* 数字は等幅（KPI・表・入力欄で桁が揃う） */
html .text-2xl, html .text-3xl, html .text-4xl, html .text-5xl, td, th, .num-input, input[inputmode="decimal"], input[type="number"] { font-variant-numeric: tabular-nums; }

/* ---------- トップバー：白の磨りガラス ＋ ヘアライン。
   ロゴは白背景用（Faci＝緑 / Log＝黄）の FaciLog_light.svg を使う ---------- */
.app-topbar {
  background: rgba(255, 255, 255, .78) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--ds-sep) !important;
  box-shadow: none !important;
  color: var(--ds-text);
}
/* 白文字→墨文字。ただしドロップダウン内（白パネル）や色付きバッジの中の白文字はそのまま */
.app-topbar .text-white:not(#mobileMenu *):not(#projMenu *):not([class*="bg-brand"]):not([class*="bg-brand"] *):not([class*="bg-red"]):not([class*="bg-red"] *) { color: var(--ds-text) !important; }
.app-topbar [class*="text-white/"]:not(#mobileMenu *):not(#projMenu *) { color: var(--ds-text-2) !important; }
.app-topbar #signOutBtn { border-color: var(--ds-sep-strong) !important; color: var(--ds-text-2) !important; }
/* 「施設の設定」ボタン：白バーの上では薄灰の面（枠なし） */
.app-topbar button[class~="bg-white"] { background-color: #f0f0f3 !important; color: var(--ds-text) !important; border-color: transparent !important; box-shadow: none !important; }
.app-topbar button[class~="bg-white"]:hover { background-color: #e6e6eb !important; }

/* ---------- ログイン画面・認証スプラッシュ（app.html）：緑グラデ → 白基調 ---------- */
#loginScreen { background: #ffffff !important; color: var(--ds-text); }
#loginScreen .bg-brand-300\/25 { background-color: rgba(62, 172, 112, .18) !important; }
#loginScreen .bg-sub-400\/20 { background-color: rgba(63, 168, 179, .14) !important; }
#loginScreen .text-white { color: var(--ds-text) !important; }
#loginScreen [class*="text-white/"] { color: var(--ds-text-2) !important; }
#loginScreen .bg-white\/95 { background: #fff !important; box-shadow: var(--ds-shadow-pop) !important; border-radius: 22px !important; }
#loginScreen .ring-1 { --tw-ring-color: transparent; box-shadow: var(--ds-shadow-pop) !important; }
#loginScreen input { border-color: var(--ds-sep-strong) !important; border-radius: 10px !important; }
#loginScreen input:focus { border-color: var(--ds-accent) !important; box-shadow: var(--ds-ring); --tw-ring-color: transparent; }
#loginScreen button.bg-brand-600 { border-radius: 10px; }
#loginScreen button.border-brand-500 { background: #f0f0f3 !important; border-color: transparent !important; color: var(--ds-text) !important; }
#authLoading .bg-white\/25 { background: rgba(0, 0, 0, .08) !important; }
.facilog-loading-bar { background: var(--ds-accent) !important; }
/* バー上のチップ（企業・施設セレクター等）：ごく薄い墨の面、枠なし */
.app-topbar [class~="bg-white/5"], .app-topbar [class~="bg-white/10"], .app-topbar [class~="bg-white/15"], .app-topbar [class~="bg-white/20"] { background-color: var(--ds-fill) !important; }
.app-topbar [class*="hover:bg-white/"]:hover { background-color: var(--ds-fill-2) !important; }
.app-topbar [class*="border-white/"] { border-color: transparent !important; }
.app-topbar .rounded-md { border-radius: 9px; }

/* ---------- サイドバー：macOS のサイドバー風（面で選択を示す） ---------- */
@media (min-width: 768px) {
  nav.order-2 {
    background: var(--ds-bg) !important;
    border-right: 1px solid var(--ds-sep) !important;
    box-shadow: none !important;
    padding: 10px 8px !important;
  }
  nav.order-2 button:not(.equipSeg) {
    border: 0 !important;
    border-left-width: 0 !important;
    border-radius: 9px !important;
    margin: 0 0 2px !important;
    padding: 8px 10px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.3;
    opacity: 1 !important;
    color: var(--ds-text) !important;
    background: transparent !important;
    transition: background-color .15s ease, color .15s ease !important;
  }
  nav.order-2 button:not(.equipSeg):hover { background: var(--ds-fill-2) !important; }
  /* highlightMainNav() が付ける ACT クラス（border-gray-700 bg-white）を選択状態として拾う */
  nav.order-2 button.border-gray-700 {
    background: var(--ds-accent-tint) !important;
    color: var(--ds-accent-deep) !important;
    font-weight: 600 !important;
  }
  nav.order-2 button .mi { font-size: 1.25em; margin-right: 8px !important; vertical-align: -0.22em; }
  .sidebarToggle { border-color: var(--ds-sep-strong) !important; box-shadow: var(--ds-shadow-card) !important; color: var(--ds-text-2) !important; }
  .sidebarToggle:hover { background: #fff !important; }
}

/* ---------- カード・パネル：枠線ではなく面と淡い影で ---------- */
html .order-3 .bg-white.shadow-sm, html .order-3 .bg-white.shadow, html .order-3 .bg-white.shadow-md { box-shadow: var(--ds-shadow-card); }
html .order-3 .bg-white.rounded-lg, html .order-3 .bg-white.rounded-xl { border-radius: 14px; }
html .order-3 .bg-white.rounded-2xl { border-radius: 18px; }
html .order-3 .border-gray-200, html .order-3 .border-gray-300 { border-color: var(--ds-sep); }
html .order-3 .divide-gray-200 > :not([hidden]) ~ :not([hidden]), html .order-3 .divide-gray-100 > :not([hidden]) ~ :not([hidden]) { border-color: var(--ds-sep); }
html .order-3 .text-gray-500, html .order-3 .text-gray-600 { color: var(--ds-text-2); }
html .order-3 .text-gray-400 { color: var(--ds-text-3); }
/* Scope3 のカテゴリ見出しバー（紫ベタ）→ 淡い紫の面＋濃い紫の文字 */
html .order-3 div.bg-violet-700 { background-color: #f1eef7; color: #523E77; border-radius: 10px; }
html .order-3 div.bg-violet-700 .text-white { color: inherit; }
html .order-3 div.bg-violet-700 [class*="text-white/"] { color: #7B62AE; }

/* ---------- 図形の囲い枠を全廃：面（背景色）と淡い影だけで区切る（Apple の作法） ----------
   背景色クラス(bg-*)を持つ図形の「四辺の枠」は透明にする。
   入力欄・表・一方向の区切り線（border-t/b/l/r）・アクセントバー（border-l-4）は残す。 */
html [class*="bg-"]:is([class~="border"],[class~="border-2"]):not(input):not(select):not(textarea):not(table):not(th):not(td):not(tr):not(thead):not(tbody):not([class~="border-t"]):not([class~="border-b"]):not([class~="border-l"]):not([class~="border-r"]):not([class~="border-t-2"]):not([class~="border-b-2"]):not([class~="border-l-2"]):not([class~="border-r-2"]):not([class~="border-l-4"]):not([class~="border-b-4"]):not([class~="border-t-4"]) { border-color: transparent !important; }
/* 「淡いグラデ＋薄い色枠」のカード（AI 生成 UI にありがちな見た目）→ 枠なしの平らな淡色面に */
html .order-3 [class~="bg-gradient-to-br"][class~="from-brand-50"] { background-image: none !important; background-color: #eef6f1 !important; }
html .order-3 [class~="bg-gradient-to-br"][class~="from-brand-50"]:hover { box-shadow: none !important; background-color: #e6f2ea !important; }
/* 白い図形（カード・チップ）は枠の代わりにごく淡い影で輪郭を出す（白の上に白でも見失わない） */
html :not(button):not(a):not(input):not(select):not(textarea)[class~="bg-white"]:is([class~="border"], [class~="border-2"]) { box-shadow: var(--ds-shadow-card); }
/* 白い枠付きボタン → 薄灰の面（枠なし）。Apple の "secondary" ボタン */
html button[class~="bg-white"]:is([class~="border"], [class~="border-2"]),
html a[class~="bg-white"]:is([class~="border"], [class~="border-2"]) { background-color: #f0f0f3 !important; border-color: transparent !important; box-shadow: none !important; }
html button[class~="bg-white"]:is([class~="border"], [class~="border-2"]):hover,
html a[class~="bg-white"]:is([class~="border"], [class~="border-2"]):hover { background-color: #e6e6eb !important; }
.dq-item, .ai-slide { border-color: transparent !important; }
.sidebarToggle { border-color: transparent !important; }

/* ---------- ボタン ---------- */
button { font-weight: 500; }
html .order-3 button.font-bold, html .app-topbar button.font-bold { font-weight: 600; }
button:focus-visible, a:focus-visible { outline: 2px solid rgba(62, 172, 112, .55); outline-offset: 2px; border-radius: 8px; }
/* 主ボタン（ブランド緑）：フラット。押した感は明度で */
html .bg-brand-600, html .bg-brand-700, html .bg-blue-600, html .bg-blue-700 { box-shadow: none; }
html button.bg-brand-600:hover, html button.bg-blue-600:hover { background-color: #33935F; }
html button.bg-brand-600:active, html button.bg-blue-600:active { background-color: #277A4D; }

/* ---------- 入力欄：ヘアライン枠 ＋ 柔らかいフォーカスリング ---------- */
.order-3 :is(input, select, textarea):not(.table-input):not(.border-transparent):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not(.opacity-0) {
  border-color: var(--ds-sep-strong);
  border-radius: 8px;
  background-color: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.order-3 :is(input, select, textarea):not(.table-input):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not(.opacity-0):focus {
  outline: none;
  border-color: var(--ds-accent) !important;
  box-shadow: var(--ds-ring);
}
.order-3 :is(input, select, textarea)::placeholder { color: var(--ds-text-3); }
.order-3 :is(input, textarea):disabled, .order-3 :is(input, textarea)[readonly] { background-color: var(--ds-bg-2); color: var(--ds-text-2); }
.table-input:hover, .table-input:focus { border-color: var(--ds-accent); box-shadow: 0 0 0 3px rgba(62, 172, 112, .14); }

/* ---------- 表：色ベタのヘッダーをやめ、淡い面＋ヘアラインに ---------- */
.fl-tbl thead th, #dataTable thead th {
  background: #f5f5f7 !important;
  color: var(--ds-text-2) !important;
  font-weight: 600 !important;
  font-size: 11px;
  letter-spacing: .02em;
}
/* ページごとのアクセント（--fl-accent）は「淡い着色＋濃い文字」として残す */
@supports (color: color-mix(in srgb, red 10%, white)) {
  .fl-tbl thead th { background: color-mix(in srgb, var(--fl-accent) 9%, white) !important; color: color-mix(in srgb, var(--fl-accent) 70%, black) !important; }
  #dataTable thead th { background: color-mix(in srgb, #3EAC70 9%, white) !important; color: color-mix(in srgb, #3EAC70 70%, black) !important; }
}
#dataTable thead .tcol-h, #dataTable thead .tcol-no { background: #ececf0 !important; }
#dataTable thead th.cursor-pointer:hover { background: #e8e8ed !important; }
#dataTable thead th span, #dataTable thead th .text-gray-400, .fl-tbl thead th span, .fl-tbl thead th .font-normal { color: inherit !important; opacity: .7; }
.fl-tbl th, .fl-tbl td, #dataTable th, #dataTable td { border: 1px solid rgba(0, 0, 0, .06) !important; }
.fl-tbl tbody td { background: #fff !important; }
#dataTable tbody tr:hover td:not(.equip-row-old) { background-color: #fafafa; }
#dataTable .tcol-no { box-shadow: 1px 0 0 rgba(0, 0, 0, .06); }
/* Scope3 明細（紫）・エネルギー使用量（黄）のヘッダーも同じ作法で淡く */
#scope3Editor table thead th { background: #f1eef7 !important; color: #523E77 !important; font-weight: 600 !important; }
#scope3Editor table th, #scope3Editor table td { border: 1px solid rgba(0, 0, 0, .06) !important; }
#scope3Editor table tbody td { background-color: #fff; }
html th.bg-yellow-600, html thead.bg-yellow-600, html thead.bg-yellow-600 th, html tr.bg-yellow-600, html tr.bg-yellow-600 th { background-color: #fbf3df; color: #7a5200; }
html th.bg-yellow-600 .text-white, html thead.bg-yellow-600 .text-white, html tr.bg-yellow-600 .text-white { color: inherit; }
html th.bg-yellow-700, html thead.bg-yellow-700, html thead.bg-yellow-700 th { background-color: #f6e9c8; color: #6b4600; }
html th.bg-yellow-700 .text-white, html thead.bg-yellow-700 .text-white { color: inherit; }
html th.bg-yellow-500, html thead.bg-yellow-500, html thead.bg-yellow-500 th { background-color: #fdf6e3; color: #7a5200; }
html th.bg-yellow-500 .text-white, html thead.bg-yellow-500 .text-white { color: inherit; }
html .order-3 th.bg-gray-100, html .order-3 th.bg-gray-200, html .order-3 th.bg-gray-300, html .order-3 thead.bg-gray-100 th, html .order-3 thead.bg-gray-200 th { background-color: #f5f5f7; color: var(--ds-text-2); font-weight: 600; }
html .order-3 th.bg-blue-50, html .order-3 thead.bg-blue-50 th { background-color: #eef7f2; color: #1F6240; font-weight: 600; }
html .order-3 table { border-color: var(--ds-sep); }

/* ---------- ポップオーバー・メニュー・モーダル ---------- */
html .shadow-xl, html .shadow-2xl { box-shadow: var(--ds-shadow-pop); }
html .fixed .bg-white.rounded-xl, html .fixed .bg-white.rounded-2xl { border-radius: 18px; }
#_faciInfoPop { border-radius: 12px; box-shadow: var(--ds-shadow-pop); }
.dq-item { border-color: var(--ds-sep); border-radius: 12px; box-shadow: 0 1px 2px rgba(0, 0, 0, .03); }

/* ---------- スクロールバー：オーバーレイ風の細いつまみ ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, .18); border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, .32); border: 3px solid transparent; background-clip: padding-box; }

/* ---------- AI アシスタント表示 ---------- */
.ai-slide { border-color: var(--ds-sep); border-radius: 14px; box-shadow: var(--ds-shadow-card); }
.ai-lead { border-radius: 0 12px 12px 0; }

/* ============================================================================
   ランディングページ（index.html）
   緑ベタのヘッダー／ヒーロー → 白基調・墨文字・緑はアクセントのみ（apple.com の作法）
   ========================================================================== */
/* 認証確認スプラッシュ：白地＋ダークロゴ＋緑のバー */
#authLoading { background: #ffffff !important; }
#authLoading img { filter: none !important; }
#authLoading .bar { background: rgba(0, 0, 0, .08) !important; }
#authLoading .bar > div { background: var(--ds-accent) !important; }

/* ヘッダー：白の磨りガラス（ロゴは白背景用 FaciLog_light.svg） */
#landingPage > header {
  background: rgba(255, 255, 255, .78) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--ds-sep) !important;
  color: var(--ds-text);
}
#landingPage > header .text-white, #landingPage > header [class*="text-white/"] { color: var(--ds-text) !important; }
#landingPage > header [class*="text-white/"] { color: var(--ds-text-2) !important; }
#landingPage > header .text-brand-200 { color: var(--ds-accent) !important; }
#landingPage > header [class*="border-white/"] { border-color: var(--ds-sep-strong) !important; }
#landingPage > header button[class*="hover:bg-white/"]:hover { background-color: var(--ds-fill) !important; }
#landingPage > header button.bg-white.text-brand-700 { background: var(--ds-accent-deep) !important; color: #fff !important; box-shadow: none !important; border-radius: 980px !important; }
#landingPage > header button.bg-white.text-brand-700:hover { background: #1F6240 !important; }

/* ヒーロー：白〜薄灰のグラデ＋ごく淡い緑のにじみ。文字は墨、主ボタンだけ緑 */
#landingPage > section.bg-gradient-to-br {
  background: #ffffff !important;
  color: var(--ds-text) !important;
}
#landingPage > section.bg-gradient-to-br .bg-brand-300\/20 { background-color: rgba(62, 172, 112, .18) !important; }
#landingPage > section.bg-gradient-to-br .bg-sub-400\/20 { background-color: rgba(63, 168, 179, .14) !important; }
#landingPage > section.bg-gradient-to-br h1 { color: var(--ds-text); font-weight: 700; letter-spacing: -.03em; }
#landingPage > section.bg-gradient-to-br .text-white { color: var(--ds-text) !important; }
#landingPage > section.bg-gradient-to-br [class*="text-white/"] { color: var(--ds-text-2) !important; }
#landingPage > section.bg-gradient-to-br p b { color: var(--ds-text); }
#landingPage > section.bg-gradient-to-br .bg-white\/15 { background-color: var(--ds-fill) !important; color: var(--ds-text-2) !important; }
#landingPage > section.bg-gradient-to-br .bg-amber-400 { background-color: #fff3cc !important; color: #7a5200 !important; box-shadow: none !important; }
/* 主ボタン：緑の錠剤型。副ボタン：白＋ヘアライン */
#landingPage > section.bg-gradient-to-br button.bg-white.text-brand-700 { background: var(--ds-accent-deep) !important; color: #fff !important; box-shadow: 0 8px 24px rgba(39, 122, 77, .22) !important; }
#landingPage > section.bg-gradient-to-br button.bg-white.text-brand-700:hover { background: #1F6240 !important; }
#landingPage > section.bg-gradient-to-br button[class*="bg-white/"] { background: #e8e8ed !important; color: var(--ds-text) !important; border-color: transparent !important; box-shadow: none !important; }
#landingPage > section.bg-gradient-to-br button[class*="bg-white/"]:hover { background: #dedee3 !important; }

/* 本文セクション：見出しは墨、ネイビー見出しも墨に統一 */
#landingPage .text-navy-800 { color: var(--ds-text); }
#landingPage h2 { letter-spacing: -.025em; }
#landingPage .font-extrabold { font-weight: 700; }
#landingPage .rounded-2xl, #landingPage .rounded-3xl { border-radius: 22px; }

/* 最終CTA：緑ベタ → 薄灰の面＋墨文字＋緑ボタン */
#landingPage > section.bg-brand-600 { background: var(--ds-bg-2) !important; color: var(--ds-text) !important; border-top: 1px solid var(--ds-sep); }
#landingPage > section.bg-brand-600 [class*="text-white/"] { color: var(--ds-text-2) !important; }
#landingPage > section.bg-brand-600 button.bg-white.text-brand-700 { background: var(--ds-accent-deep) !important; color: #fff !important; box-shadow: 0 8px 24px rgba(39, 122, 77, .22) !important; border-radius: 980px !important; }
#landingPage > section.bg-brand-600 button.bg-white.text-brand-700:hover { background: #1F6240 !important; }

/* フッター：ネイビー → 薄灰。文字は中間グレー、社名は墨 */
#landingPage > footer { background: #ffffff !important; color: var(--ds-text-2) !important; border-top: 1px solid var(--ds-sep); }
#landingPage > footer .text-gray-300, #landingPage > footer .text-gray-400 { color: var(--ds-text-2) !important; }
#landingPage > footer .text-white { color: var(--ds-text) !important; }
#landingPage > footer a:hover { color: var(--ds-text) !important; }
#landingPage > footer img { opacity: 1 !important; }

/* ---------- 印刷時は無効化（報告書の見た目を変えない） ---------- */
@media print {
  .app-topbar, nav.order-2 { -webkit-backdrop-filter: none; backdrop-filter: none; }
}