/* ========================================================
   mdo3.com 案件統合コンソール (Project Workspace)
   1案件で複数ツールをシームレスに使い分ける統合ワークスペース
   ======================================================== */

:root {
  --ws-bg: #090d16;
  --ws-header-bg: rgba(12, 17, 30, 0.98);
  --ws-border: rgba(255, 255, 255, 0.12);
  --ws-border-focus: #0ea5e9;
  
  --ws-text: #f8fafc;
  --ws-text-sub: #94a3b8;
  --ws-text-muted: #64748b;
  
  --ws-cyan: #06b6d4;
  --ws-gold: #f59e0b;
  --ws-green: #10b981;
  --ws-emerald: #34d399;
  --ws-blue: #3b82f6;
  --ws-rose: #f43f5e;
  --ws-amber: #fbbf24;
}

* {
  box-sizing: border-box;
}

html, body.workspace-body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden; /* コンソール全体はスクロールさせず、ツール側iframe内でスクロール */
  font-family: 'Noto Sans JP', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  background-color: var(--ws-bg);
  color: var(--ws-text);
  display: flex;
  flex-direction: column;
}

/* ==========================================
   1. 案件統合コンソール 上部固定ヘッダー (スリム & 高機能)
   ========================================== */
.ws-header {
  background: var(--ws-header-bg);
  backdrop-filter: blur(16px);
  border-bottom: 2px solid rgba(14, 165, 233, 0.35);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
  z-index: 1000;
  flex-shrink: 0;
  padding: 8px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ヘッダー上段: ブランドロゴ・建設地・地域定数・アクション */
.ws-header-row-primary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

/* ブランドロゴ */
.ws-brand-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ws-brand-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--ws-text);
}

.ws-logo-icon {
  width: 30px;
  height: 30px;
  background: linear-gradient(135deg, #0ea5e9, #10b981);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 900;
  font-size: 1rem;
  box-shadow: 0 0 10px rgba(14, 165, 233, 0.4);
}

.ws-title-group h1 {
  font-size: 0.98rem;
  font-weight: 800;
  margin: 0;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.ws-tag {
  font-size: 0.68rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 10px;
  background: rgba(14, 165, 233, 0.18);
  color: #38bdf8;
  border: 1px solid rgba(14, 165, 233, 0.35);
}

/* 建設地・地域定数同期 */
.ws-addr-sync-box {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 0, 0, 0.45);
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.ws-addr-sync-box label {
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--ws-emerald);
  display: flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}

.ws-input-addr {
  background: transparent;
  border: none;
  color: #ffffff;
  font-size: 0.88rem;
  font-weight: 700;
  font-family: inherit;
  width: 280px;
  min-width: 160px;
  letter-spacing: 0.02em;
}

.ws-input-addr:focus {
  outline: none;
  border-bottom: 1px solid var(--ws-cyan);
}

.btn-sync-pill {
  background: rgba(14, 165, 233, 0.2);
  border: 1px solid rgba(14, 165, 233, 0.4);
  color: #38bdf8;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 3px;
  transition: all 0.15s;
}

.btn-sync-pill:hover {
  background: rgba(14, 165, 233, 0.35);
  color: #fff;
}

/* ★ 地域定数 常時表示バー (Z, V0, S, 凍結深度, 省エネ) */
.ws-constants-badge-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(0, 0, 0, 0.5);
  padding: 4px 12px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  flex-wrap: wrap;
}

.ws-const-tag {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-size: 0.8rem;
  white-space: nowrap;
}

.ws-const-tag .tag-lbl {
  color: var(--ws-text-muted);
  font-size: 0.72rem;
  font-weight: 700;
}

.ws-const-tag .tag-val {
  font-weight: 800;
}

.ws-const-tag.tag-z .tag-val { color: var(--ws-gold); font-size: 0.88rem; }
.ws-const-tag.tag-v0 .tag-val { color: #60a5fa; font-size: 0.88rem; }
.ws-const-tag.tag-s .tag-val { color: #34d399; font-size: 0.88rem; }
.ws-const-tag.tag-freeze .tag-val { color: #f472b6; }
.ws-const-tag.tag-energy .tag-val { color: #38bdf8; }
.ws-const-tag.tag-urban {
  border-radius: 4px;
  padding: 2px 7px;
  transition: all 0.2s ease;
}
.ws-const-tag.tag-urban:hover {
  background: rgba(245, 158, 11, 0.25) !important;
  border-color: rgba(245, 158, 11, 0.6) !important;
  transform: translateY(-1px);
}

/* 右側アクション */
.ws-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.ws-sim-select {
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: #fbbf24;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 0.75rem;
  font-weight: 700;
}

.btn-ws-cad {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 6px;
  background: rgba(91, 138, 254, 0.18);
  border: 1px solid rgba(91, 138, 254, 0.4);
  color: #93c5fd;
  text-decoration: none;
  font-size: 0.78rem;
  font-weight: 800;
  transition: all 0.2s;
  white-space: nowrap;
}

.btn-ws-cad:hover {
  background: rgba(91, 138, 254, 0.3);
  border-color: #60a5fa;
  color: #fff;
  transform: translateY(-1px);
}

.btn-ws-portal {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  color: var(--ws-text-sub);
  text-decoration: none;
  padding: 5px 8px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.15s;
  white-space: nowrap;
}

.btn-ws-portal:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

/* ==========================================
   2. ヘッダー下段: 最頻出ボタン ＋ プルタブ (ドロップダウン形式)
   ========================================== */
.ws-tools-navbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* 最頻出クイックボタングループ */
.ws-frequent-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ws-tool-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 11px;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 800;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: var(--ws-text-sub);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
  position: relative;
}

.ws-tool-tab-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--ws-text);
  border-color: rgba(255, 255, 255, 0.25);
}

.ws-tool-tab-btn.active {
  background: rgba(14, 165, 233, 0.22);
  border-color: #0ea5e9;
  color: #38bdf8;
  box-shadow: 0 0 12px rgba(14, 165, 233, 0.35);
}

.ws-tool-tab-btn.locked {
  background: rgba(0, 0, 0, 0.6);
  border-color: rgba(255, 255, 255, 0.04);
  color: var(--ws-text-muted);
  opacity: 0.55;
}

.ws-tool-tab-btn.locked:hover {
  opacity: 0.85;
  border-color: rgba(245, 158, 11, 0.4);
  color: #fbbf24;
}

/* プルタブ（ドロップダウン）メニュー */
.ws-dropdown {
  position: relative;
  display: inline-block;
}

.ws-dropdown-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 800;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: var(--ws-text);
  cursor: pointer;
  transition: all 0.15s ease;
}

.ws-dropdown-btn:hover,
.ws-dropdown.active .ws-dropdown-btn {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--ws-cyan);
}

.ws-dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  background: #0f172a;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.7);
  min-width: 250px;
  z-index: 2000;
  padding: 6px 0;
  max-height: 400px;
  overflow-y: auto;
}

.ws-dropdown.active .ws-dropdown-menu {
  display: block;
}

.ws-dropdown-item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ws-text-sub);
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s;
}

.ws-dropdown-item:hover {
  background: rgba(14, 165, 233, 0.15);
  color: #fff;
}

.ws-dropdown-item.active {
  background: rgba(14, 165, 233, 0.25);
  color: #38bdf8;
  font-weight: 800;
}

.ws-dropdown-item.locked {
  color: var(--ws-text-muted);
  opacity: 0.6;
}

.ws-dropdown-item.locked:hover {
  color: #fbbf24;
  opacity: 0.9;
}

/* ==========================================
   3. メインビューポート: 元ツール完全埋め込み (iframe)
   ========================================== */
.ws-tool-viewport {
  flex: 1;
  width: 100%;
  height: 100%;
  position: relative;
  background: #ffffff;
}

.ws-tool-iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: none;
}

.ws-tool-iframe.active {
  display: block;
}

/* ローディングプレースホルダー */
.ws-iframe-loading {
  position: absolute;
  inset: 0;
  background: #090d16;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #38bdf8;
  gap: 12px;
  z-index: 10;
}

.ws-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid rgba(14, 165, 233, 0.2);
  border-top-color: #0ea5e9;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ==========================================
   4. 未契約ツール 契約案内モーダル
   ========================================== */
.ws-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.ws-modal-dialog {
  background: #111827;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  width: 100%;
  max-width: 540px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
  animation: modalScale 0.2s ease;
  overflow: hidden;
}

@keyframes modalScale {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

.ws-modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ws-modal-body {
  padding: 20px;
}

.ws-plan-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}

.ws-plan-option-card {
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  padding: 12px 14px;
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s;
}

.ws-plan-option-card:hover {
  border-color: var(--ws-cyan);
  background: rgba(14, 165, 233, 0.08);
}