/* ============================================================
   OpenDS - UIスタイルシート
   ============================================================ */

/* ===== CSS変数 ===== */
:root {
  --topbar-h:    56px;
  --sidebar-w:   244px;

  --bg:          #f0f2f7;
  --bg2:         #ffffff;
  --bg3:         #f5f7fb;
  --sidebar-bg:  #ffffff;
  --card-bg:     #ffffff;
  --input-bg:    #f7f8fc;
  --border:      #e3e7f0;
  --border-s:    #eceef5;
  --text:        #1a1d2e;
  --muted:       #9ba3be;
  --muted2:      #6b7090;
  --primary:     #3b82f6;
  --primary-d:   #2563eb;
  --primary-l:   #60a5fa;
  --primary-bg:  rgba(59,130,246,.08);
  --primary-bg2: rgba(59,130,246,.14);
  --success:     #10b981;
  --success-bg:  rgba(16,185,129,.08);
  --danger:      #ef4444;
  --danger-bg:   rgba(239,68,68,.08);
  --warning:     #f59e0b;
  --warning-bg:  rgba(245,158,11,.08);
  --radius:      8px;
  --radius-sm:   5px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --shadow:      0 8px 28px rgba(0,0,0,.09);
  --shadow-sm:   0 2px 10px rgba(0,0,0,.055);
  --shadow-md:   0 4px 18px rgba(0,0,0,.075);
  --shadow-blue: 0 4px 16px rgba(59,130,246,.22);
  --transition:  all .18s ease;
}

/* ===== ダークモード変数（CLIターミナル配色） ===== */
html[data-theme="dark"] {
  /* ── 背景（ターミナル黒系） */
  --bg:          #090c10;
  --bg2:         #0d1117;
  --bg3:         #161b22;
  --sidebar-bg:  #060a0e;
  --card-bg:     #0d1117;
  --input-bg:    #0d1117;

  /* ── ボーダー */
  --border:      #30363d;
  --border-s:    #21262d;

  /* ── テキスト（明るい白） */
  --text:        #f0f6fc;
  --muted:       #6e7681;
  --muted2:      #8b949e;

  /* ── プライマリ（CLI ブルー） */
  --primary:     #58a6ff;
  --primary-d:   #388bfd;
  --primary-l:   #79c0ff;
  --primary-bg:  rgba(88,166,255,.10);
  --primary-bg2: rgba(88,166,255,.20);

  /* ── CLI グリーン（成功・金額） */
  --success:     #3fb950;
  --success-bg:  rgba(63,185,80,.12);

  /* ── CLI レッド（危険・エラー） */
  --danger:      #ff7b72;
  --danger-bg:   rgba(255,123,114,.12);

  /* ── CLI イエロー（警告・期限） */
  --warning:     #e3b341;
  --warning-bg:  rgba(227,179,65,.12);

  /* ── シャドウ */
  --shadow:      0 8px 32px rgba(0,0,0,.70);
  --shadow-sm:   0 2px 10px rgba(0,0,0,.50);
  --shadow-md:   0 4px 20px rgba(0,0,0,.60);
  --shadow-blue: 0 0 0 3px rgba(88,166,255,.25), 0 4px 16px rgba(88,166,255,.15);
}

/* ===== Reset ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; height: 100%; }
body {
  font-family: 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', 'Yu Gothic UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  height: 100%;
  overflow: hidden;
}
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: none; opacity: .85; }
code {
  font-family: 'Consolas','SF Mono',monospace;
  background: var(--input-bg);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-size: .9em;
  border: 1px solid var(--border);
}
select option { background: var(--bg2); color: var(--text); }

/* ===== App Shell ===== */
.app-shell {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

/* ===== Topbar ===== */
.app-topbar {
  height: var(--topbar-h);
  flex-shrink: 0;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 var(--border-s), 0 3px 12px rgba(0,0,0,.04);
  display: flex;
  align-items: center;
  padding: 0 1.1rem;
  gap: .75rem;
  position: sticky;
  top: 0;
  z-index: 300;
}

.topbar-toggle {
  background: none;
  border: none;
  color: var(--muted2);
  cursor: pointer;
  padding: .45rem;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  flex-shrink: 0;
}
.topbar-toggle:hover {
  color: var(--text);
  background: var(--bg3);
  box-shadow: inset 0 0 0 1px var(--border);
}

.topbar-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.topbar-logo img { height: 36px; width: auto; display: block; }
.topbar-logo:hover { opacity: .9; }

.topbar-spacer { flex: 1; }

.topbar-right {
  display: flex;
  align-items: center;
  gap: .2rem;
}

.topbar-user {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .75rem;
  border-radius: var(--radius);
  color: var(--muted2);
  font-size: .85rem;
  transition: var(--transition);
}
.topbar-user:hover { color: var(--text); background: var(--bg3); }

.user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-bg2), var(--primary-bg));
  border: 1.5px solid rgba(59,130,246,.3);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .72rem;
  font-weight: 700;
  flex-shrink: 0;
}

.topbar-btn {
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .7rem;
  border-radius: var(--radius);
  color: var(--muted2);
  font-size: .82rem;
  background: none;
  border: none;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}
.topbar-btn:hover { color: var(--text); background: var(--bg3); }
.topbar-btn.danger:hover { color: var(--danger); background: var(--danger-bg); }

.topbar-divider {
  width: 1px;
  height: 20px;
  background: var(--border);
  margin: 0 .2rem;
}

/* ===== Body (sidebar + main) ===== */
.app-body {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* ===== Sidebar ===== */
.app-sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: linear-gradient(180deg, #fdfdff 0%, var(--sidebar-bg) 100%);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  transition: width .22s cubic-bezier(.4,0,.2,1), transform .22s cubic-bezier(.4,0,.2,1);
}
.app-sidebar::-webkit-scrollbar { width: 3px; }
.app-sidebar::-webkit-scrollbar-track { background: transparent; }
.app-sidebar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* サイドバー縮小 */
body.sidebar-collapsed .app-sidebar { width: 56px; }
body.sidebar-collapsed .nav-label    { opacity: 0; width: 0; overflow: hidden; }
body.sidebar-collapsed .nav-section-title { opacity: 0; }
body.sidebar-collapsed .app-sidebar:hover { width: var(--sidebar-w); }
body.sidebar-collapsed .app-sidebar:hover .nav-label { opacity: 1; width: auto; }
body.sidebar-collapsed .app-sidebar:hover .nav-section-title { opacity: 1; }

/* ===== サイドバー ナビゲーション ===== */
.sidebar-nav {
  padding: .625rem .5rem;
  flex: 1;
}

.nav-section {
  margin-bottom: .25rem;
}

.nav-section-title {
  font-size: .64rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--muted);
  padding: .8rem .6rem .35rem;
  white-space: nowrap;
  overflow: hidden;
  transition: opacity .2s;
  font-weight: 600;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .58rem .75rem;
  color: var(--muted2);
  font-size: .875rem;
  border-radius: var(--radius);
  transition: var(--transition);
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  margin-bottom: 1px;
}
.nav-item:hover {
  color: var(--text);
  background: var(--bg3);
  text-decoration: none;
}
.nav-item.active {
  color: var(--primary);
  background: var(--primary-bg);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(59,130,246,.15);
}
.nav-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 20%;
  height: 60%;
  width: 3px;
  background: linear-gradient(180deg, var(--primary-l), var(--primary-d));
  border-radius: 0 3px 3px 0;
  box-shadow: 0 0 8px rgba(59,130,246,.4);
}
.nav-item.active .nav-icon { color: var(--primary); }

.nav-icon {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  color: var(--muted);
  transition: color .18s;
}
.nav-item:hover .nav-icon { color: var(--text); }

.nav-label { transition: opacity .2s; overflow: hidden; flex: 1; }

.nav-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  flex-shrink: 0;
}

.nav-separator {
  height: 1px;
  background: var(--border-s);
  margin: .5rem .5rem;
}

/* ── 現場名バナー（工事管理セクション上部） ── */
.nav-project-banner {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .7rem;
  margin: .1rem .25rem .15rem;
  background: linear-gradient(135deg, rgba(37,99,235,.10) 0%, rgba(124,58,237,.08) 100%);
  border: 1px solid rgba(37,99,235,.18);
  border-radius: var(--radius);
  text-decoration: none;
  transition: background .15s, border-color .15s;
  overflow: hidden;
}
.nav-project-banner:hover {
  background: linear-gradient(135deg, rgba(37,99,235,.18) 0%, rgba(124,58,237,.14) 100%);
  border-color: rgba(37,99,235,.35);
}
.nav-project-icon {
  font-size: 1rem;
  flex-shrink: 0;
}
.nav-project-name {
  font-size: .78rem;
  font-weight: 700;
  color: var(--primary-d);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  transition: opacity .2s, width .2s;
}
body.sidebar-collapsed .nav-project-name { opacity: 0; width: 0; }
body.sidebar-collapsed .app-sidebar:hover .nav-project-name { opacity: 1; width: auto; }
body.sidebar-collapsed .nav-project-banner { justify-content: center; }
body.sidebar-collapsed .app-sidebar:hover .nav-project-banner { justify-content: flex-start; }

.sidebar-footer {
  padding: .5rem .5rem .75rem;
  border-top: 1px solid var(--border-s);
}

/* ===== メインコンテンツ ===== */
.app-main {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 1.75rem 2rem;
  background: var(--bg);
}
.app-main::-webkit-scrollbar { width: 5px; }
.app-main::-webkit-scrollbar-track { background: transparent; }
.app-main::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* ===== フラッシュメッセージ ===== */
.flash {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .875rem 1.1rem;
  border-radius: var(--radius);
  margin-bottom: 1.25rem;
  font-size: .875rem;
  border: 1px solid transparent;
  border-left: 3px solid;
}
.flash-info    {
  background: var(--primary-bg);
  border-color: var(--primary);
  border-top-color: rgba(59,130,246,.15);
  border-right-color: rgba(59,130,246,.15);
  border-bottom-color: rgba(59,130,246,.15);
  color: var(--primary-d);
}
.flash-danger  {
  background: var(--danger-bg);
  border-color: var(--danger);
  border-top-color: rgba(239,68,68,.15);
  border-right-color: rgba(239,68,68,.15);
  border-bottom-color: rgba(239,68,68,.15);
  color: #b91c1c;
}
.flash-success {
  background: var(--success-bg);
  border-color: var(--success);
  border-top-color: rgba(16,185,129,.15);
  border-right-color: rgba(16,185,129,.15);
  border-bottom-color: rgba(16,185,129,.15);
  color: #065f46;
}
.flash-warning {
  background: var(--warning-bg);
  border-color: var(--warning);
  border-top-color: rgba(245,158,11,.15);
  border-right-color: rgba(245,158,11,.15);
  border-bottom-color: rgba(245,158,11,.15);
  color: #92400e;
}

/* ===== ページヘッダー ===== */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  gap: 1rem;
  flex-wrap: wrap;
}
.page-header h1 {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--text);
}
.page-title-sub {
  font-size: .8rem;
  color: var(--muted2);
  margin-top: .15rem;
}

/* ===== ボタン ===== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem 1.15rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: .875rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none !important;
  transition: var(--transition);
  white-space: nowrap;
  line-height: 1.4;
}
.btn:active { transform: scale(.96); }

.btn-primary {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-d) 100%);
  color: #fff;
  border-color: var(--primary-d);
  box-shadow: var(--shadow-blue);
}
.btn-primary:hover {
  background: linear-gradient(135deg, #5091f7 0%, var(--primary) 100%);
  box-shadow: 0 6px 20px rgba(59,130,246,.35);
  transform: translateY(-1px);
  opacity: 1;
}

.btn-secondary {
  background: var(--bg2);
  color: var(--text);
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}
.btn-secondary:hover {
  background: var(--bg3);
  border-color: var(--muted);
  opacity: 1;
  box-shadow: var(--shadow-md);
}

.btn-danger {
  background: var(--danger-bg);
  color: var(--danger);
  border-color: rgba(239,68,68,.25);
}
.btn-danger:hover { background: var(--danger); color: #fff; opacity: 1; }

.btn-ghost {
  background: transparent;
  color: var(--muted2);
  border-color: transparent;
}
.btn-ghost:hover { color: var(--text); background: var(--bg3); opacity: 1; }

.btn-block { width: 100%; justify-content: center; }
.btn-sm { padding: .32rem .8rem; font-size: .8rem; }

/* ===== カード ===== */
.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .2s;
}
.card:hover { box-shadow: var(--shadow-md); }

.card-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  background: linear-gradient(to bottom, var(--bg3), #f8f9fd);
}
.card-header h3 {
  font-size: .95rem;
  font-weight: 600;
}
.card-body {
  padding: 1.25rem;
}

/* ===== フォーム ===== */
.form-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  box-shadow: var(--shadow-sm);
}
.form-group { margin-bottom: 1.25rem; }
.form-group label {
  display: block;
  margin-bottom: .4rem;
  font-size: .82rem;
  color: var(--muted2);
  font-weight: 600;
  letter-spacing: .01em;
}
.form-group input,
.form-group select,
.form-group textarea,
.form-input,
.filter-input,
.filter-select {
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .575rem .9rem;
  color: var(--text);
  font-size: .9rem;
  transition: border-color .18s, box-shadow .18s, background .18s;
  width: 100%;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.form-input:focus,
.filter-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(59,130,246,.12);
  background: #fff;
}
.form-group textarea { resize: vertical; min-height: 100px; }
.form-row { display: flex; gap: 1rem; flex-wrap: wrap; }
.form-col-4 { flex: 0 0 calc(33% - .5rem); }
.form-col-6 { flex: 1; min-width: 180px; }
.form-col-8 { flex: 1 1 58%; }
.form-actions {
  display: flex;
  gap: .75rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}
.required { color: var(--danger); }

/* ===== フォームセクションタイトル ===== */
.form-section-title {
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--muted);
  padding: .5rem 0 .75rem;
  margin-top: .75rem;
  border-bottom: 1px solid var(--border-s);
  margin-bottom: 1rem;
}

/* ===== フィルターバー ===== */
.filter-bar {
  display: flex;
  gap: .75rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
  background: var(--card-bg);
  padding: .875rem 1rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.filter-input { flex: 1; min-width: 200px; width: auto; }
.filter-select { width: auto; }

/* ===== バッジ ===== */
.badge {
  display: inline-flex;
  align-items: center;
  padding: .16rem .65rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .02em;
}
.badge-primary   {
  background: var(--primary-bg);
  color: var(--primary-d);
  border: 1px solid rgba(59,130,246,.18);
}
.badge-success   {
  background: var(--success-bg);
  color: #065f46;
  border: 1px solid rgba(16,185,129,.18);
}
.badge-danger    {
  background: var(--danger-bg);
  color: #b91c1c;
  border: 1px solid rgba(239,68,68,.18);
}
.badge-secondary {
  background: var(--bg3);
  color: var(--muted2);
  border: 1px solid var(--border);
}
.badge-warning   {
  background: #fffbeb;
  color: #92400e;
  border: 1px solid rgba(245,158,11,.22);
}
.badge-preorder  {
  background: #f5f3ff;
  color: #5b21b6;
  border: 1px solid rgba(124,58,237,.22);
}

/* ===== プロジェクトカード ===== */
.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1rem;
}
.project-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  transition: border-color .2s, transform .18s, box-shadow .2s;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}
.project-card:hover {
  border-color: rgba(59,130,246,.35);
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(59,130,246,.12);
  text-decoration: none;
}
.project-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: .6rem;
}
.project-code {
  font-size: .72rem;
  color: var(--muted2);
  font-family: 'Consolas', monospace;
  background: var(--bg3);
  padding: .1rem .45rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}
.project-name { font-size: 1rem; font-weight: 600; margin-bottom: .75rem; }
.project-name a { color: var(--text); }
.project-name a:hover { color: var(--primary); }
.project-meta { font-size: .8rem; color: var(--muted2); margin-bottom: .6rem; }
.project-meta span { display: block; margin-bottom: .2rem; }
.project-stats {
  display: flex;
  gap: .75rem;
  font-size: .78rem;
  color: var(--muted);
  padding-top: .75rem;
  border-top: 1px solid var(--border-s);
}
.project-stats span {
  display: flex;
  align-items: center;
  gap: .3rem;
}

/* ===== テーブル ===== */
.table-wrapper { overflow-x: auto; }
table.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .875rem;
}
.data-table th {
  background: linear-gradient(to bottom, var(--bg3), #f2f4f9);
  padding: .65rem .9rem;
  text-align: left;
  font-size: .74rem;
  color: var(--muted2);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  position: sticky;
  top: 0;
}
.data-table td {
  padding: .72rem .9rem;
  border-bottom: 1px solid var(--border-s);
  vertical-align: middle;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: #f7f9ff; }

/* ===== パンくず ===== */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .8rem;
  color: var(--muted);
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}
.breadcrumb a { color: var(--muted2); }
.breadcrumb a:hover { color: var(--primary); }
.breadcrumb-sep { color: var(--muted); }

/* ===== 空状態 ===== */
.empty-state {
  text-align: center;
  padding: 3.5rem 2rem;
  color: var(--muted2);
  background: var(--card-bg);
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.empty-state p { font-size: .9rem; line-height: 1.7; }

/* ===== ログイン画面 ===== */
.layout-login {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  overflow: auto;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(59,130,246,.07) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 50%, rgba(59,130,246,.05) 0%, transparent 60%),
    var(--bg);
}
.login-wrap { width: 100%; max-width: 400px; padding: 1.5rem; }
.login-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 2.5rem 2rem;
  box-shadow: var(--shadow);
}
.login-logo {
  text-align: center;
  margin-bottom: 2rem;
}
.login-tagline {
  text-align: center;
  font-size: .78rem;
  color: var(--muted);
  margin-top: -.75rem;
  margin-bottom: 2rem;
  letter-spacing: .05em;
}
.text-center { text-align: center; }
.text-muted  { color: var(--muted2); font-size: .875rem; margin-bottom: 1.25rem; }

/* ===== セットアップ ===== */
.setup-steps { padding-left: 1.4rem; margin-bottom: 1.5rem; }
.setup-steps li { margin-bottom: .75rem; font-size: .9rem; line-height: 1.6; }

/* ===== スクロールバー共通 ===== */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

/* ===== モバイル用オーバーレイ ===== */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.28);
  z-index: 250;
  backdrop-filter: blur(3px);
}

/* ===== App Footer ===== */
.app-footer {
  text-align: center;
  padding: .45rem 1rem;
  font-size: .65rem;
  color: var(--muted);
  border-top: 1px solid var(--border-s);
  background: var(--bg2);
  letter-spacing: .04em;
}

/* ===== Login Footer Credit ===== */
.login-footer-credit {
  text-align: center;
  margin-top: 1rem;
  font-size: .65rem;
  color: var(--muted);
  letter-spacing: .04em;
}

/* ===== モバイル対応 ===== */
@media (max-width: 900px) {
  body { overflow: auto; }
  .app-shell { height: auto; min-height: 100vh; }
  .app-body  { overflow: visible; }

  .app-sidebar {
    position: fixed;
    top: var(--topbar-h);
    left: 0;
    bottom: 0;
    z-index: 260;
    transform: translateX(-100%);
    transition: transform .25s cubic-bezier(.4,0,.2,1);
    width: var(--sidebar-w) !important;
  }
  .app-sidebar .nav-label    { opacity: 1 !important; width: auto !important; }
  .app-sidebar .nav-section-title { opacity: 1 !important; }
  .app-sidebar .nav-project-name { opacity: 1 !important; width: auto !important; }
  .app-sidebar .nav-project-banner { justify-content: flex-start !important; }

  body.mobile-sidebar-open .app-sidebar { transform: translateX(0); }
  body.mobile-sidebar-open .sidebar-overlay { display: block; }

  .app-main { padding: 1.25rem 1rem; }

  .form-row { flex-direction: column; }
  .form-col-4, .form-col-6, .form-col-8 { flex: 1 1 100%; }
  .page-header { flex-wrap: wrap; }
  .project-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .app-main { padding: 1rem .75rem; }
}

/* ===== テーマトグルボタン ===== */
.theme-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg3);
  cursor: pointer;
  color: var(--muted2);
  transition: background .18s, border-color .18s, color .18s, transform .15s;
  flex-shrink: 0;
}
.theme-toggle-btn:hover {
  background: var(--primary-bg2);
  border-color: var(--primary);
  color: var(--primary);
  transform: rotate(18deg) scale(1.08);
}
.theme-toggle-btn .icon-sun,
.theme-toggle-btn .icon-moon { transition: opacity .18s, transform .18s; }
html:not([data-theme="dark"]) .theme-toggle-btn .icon-moon { display: none; }
html[data-theme="dark"]       .theme-toggle-btn .icon-sun  { display: none; }

/* ═══════════════════════════════════════════════════════════════
   ダークモード CLI スタイルオーバーライド
   カラー哲学:
     白   = テキスト (f0f6fc)
     緑   = 金額・成功・完了 (3fb950)
     青   = リンク・アクション・プライマリ (58a6ff)
     黄   = 警告・期限・注意 (e3b341)
     赤   = エラー・危険・削除 (ff7b72)
     紫   = タグ・ラベル・AI機能 (d2a8ff)
     グレー = ミュート・補助テキスト (8b949e)
   ═══════════════════════════════════════════════════════════════ */

/* ── 基本要素 ── */
html[data-theme="dark"] a { color: #58a6ff; }
html[data-theme="dark"] code {
  background: #161b22;
  border-color: #30363d;
  color: #d2a8ff; /* 紫: コードはCLI紫 */
}

/* ── スクロールバー ── */
html[data-theme="dark"] ::-webkit-scrollbar-track { background: #0d1117; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #30363d; border-radius: 3px; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #484f58; }

/* ── トップバー ── */
html[data-theme="dark"] .app-topbar {
  background: #060a0e;
  border-bottom-color: #21262d;
  box-shadow: 0 1px 0 #21262d, 0 2px 8px rgba(0,0,0,.5);
}

/* ── サイドバー ── */
html[data-theme="dark"] .app-sidebar {
  background: linear-gradient(180deg, #060a0e 0%, #0a0e13 100%);
  border-right: 1px solid #21262d;
}
html[data-theme="dark"] .nav-section-title {
  color: #484f58;
  letter-spacing: .15em;
}
html[data-theme="dark"] .nav-separator { background: #21262d; }

/* ── ナビアイテム ── */
html[data-theme="dark"] .nav-item { color: #8b949e; }
html[data-theme="dark"] .nav-item:hover {
  background: rgba(88,166,255,.08);
  color: #c9d1d9;
}
html[data-theme="dark"] .nav-item.active {
  background: rgba(88,166,255,.12) !important;
  color: #58a6ff !important;
}
/* アクティブインジケーターを緑に */
html[data-theme="dark"] .nav-item.active::before {
  background: linear-gradient(180deg, #3fb950, #58a6ff) !important;
  box-shadow: 0 0 10px rgba(63,185,80,.5) !important;
}

/* ── 現場バナー ── */
html[data-theme="dark"] .nav-project-banner {
  background: rgba(63,185,80,.08);
  border-color: rgba(63,185,80,.25);
}
html[data-theme="dark"] .nav-project-banner:hover {
  background: rgba(63,185,80,.14);
  border-color: rgba(63,185,80,.4);
}
html[data-theme="dark"] .nav-project-name { color: #3fb950; } /* 緑: 現場名 */

/* ── ボタン ── */
html[data-theme="dark"] .btn-primary {
  background: linear-gradient(135deg, #388bfd 0%, #2563eb 100%);
  box-shadow: 0 2px 8px rgba(88,166,255,.25);
}
html[data-theme="dark"] .btn-secondary {
  background: #161b22;
  border-color: #30363d;
  color: #c9d1d9;
}
html[data-theme="dark"] .btn-secondary:hover {
  background: #1f2937;
  border-color: #58a6ff;
  color: #79c0ff;
}
html[data-theme="dark"] .btn-danger {
  background: rgba(255,123,114,.15);
  border: 1px solid rgba(255,123,114,.35);
  color: #ff7b72;
}
html[data-theme="dark"] .btn-danger:hover {
  background: rgba(255,123,114,.25);
  border-color: #ff7b72;
}
html[data-theme="dark"] .btn-ghost { color: #8b949e; }
html[data-theme="dark"] .btn-ghost:hover { color: #c9d1d9; background: rgba(255,255,255,.06); }

/* ── AI ボタン ── */
html[data-theme="dark"] .btn.btn-ai {
  background: linear-gradient(135deg, #6e40c9 0%, #553098 100%);
  box-shadow: 0 2px 8px rgba(210,168,255,.2);
}
html[data-theme="dark"] .btn.btn-ai:hover {
  background: linear-gradient(135deg, #8957e5 0%, #6e40c9 100%);
}

/* ── フォーム入力 ── */
html[data-theme="dark"] .form-input,
html[data-theme="dark"] .cell-input {
  background: #0d1117;
  border-color: #30363d;
  color: #f0f6fc;
}
html[data-theme="dark"] .form-input:focus,
html[data-theme="dark"] .cell-input:focus {
  border-color: #388bfd;
  background: #0d1117;
  box-shadow: 0 0 0 3px rgba(88,166,255,.20);
  outline: none;
}
html[data-theme="dark"] .form-input::placeholder,
html[data-theme="dark"] .cell-input::placeholder { color: #484f58; }
html[data-theme="dark"] select option { background: #161b22; color: #f0f6fc; }

/* ── テーブル ── */
html[data-theme="dark"] .estimate-table th,
html[data-theme="dark"] thead th {
  background: #0d1117 !important;
  color: #79c0ff !important; /* 青: テーブルヘッダー */
  border-bottom-color: #30363d !important;
}
html[data-theme="dark"] .estimate-table tr:hover td { background: rgba(255,255,255,.03); }
html[data-theme="dark"] td { border-bottom-color: #21262d !important; }

/* ── 金額セル（緑）── */
html[data-theme="dark"] .amount-cell { color: #3fb950 !important; } /* 緑: 金額 */
html[data-theme="dark"] .parent-sum  { color: #56d364 !important; }

/* ── 合計バー ── */
html[data-theme="dark"] .totals-bar { background: #0d1117; border-color: #30363d; }
html[data-theme="dark"] .total-value { color: #c9d1d9; }
html[data-theme="dark"] .total-grand .total-value {
  color: #3fb950 !important; /* 緑: 合計金額 */
  text-shadow: 0 0 12px rgba(63,185,80,.35);
}

/* ── バッジ（CLI配色） ── */
html[data-theme="dark"] .badge-primary {
  background: rgba(88,166,255,.15);
  color: #79c0ff !important; /* 青 */
  border: 1px solid rgba(88,166,255,.30);
}
html[data-theme="dark"] .badge-success {
  background: rgba(63,185,80,.15);
  color: #3fb950 !important; /* 緑 */
  border: 1px solid rgba(63,185,80,.30);
}
html[data-theme="dark"] .badge-danger {
  background: rgba(255,123,114,.15);
  color: #ff7b72 !important; /* 赤 */
  border: 1px solid rgba(255,123,114,.30);
}
html[data-theme="dark"] .badge-warning {
  background: rgba(227,179,65,.15);
  color: #e3b341 !important; /* 黄 */
  border: 1px solid rgba(227,179,65,.30);
}
html[data-theme="dark"] .badge-secondary {
  background: rgba(110,118,129,.12);
  color: #8b949e !important;
  border: 1px solid rgba(110,118,129,.25);
}

/* ── ステータスドット（プロジェクト一覧） ── */
html[data-theme="dark"] .status-dot-active   { box-shadow: 0 0 6px #3fb950; }
html[data-theme="dark"] .status-dot-warning  { box-shadow: 0 0 6px #e3b341; }

/* ── カード・パネル ── */
html[data-theme="dark"] .app-main,
html[data-theme="dark"] [class*="card"],
html[data-theme="dark"] [class*="panel"] { color: #f0f6fc; }

/* ── empty-state ── */
html[data-theme="dark"] .empty-state {
  background: #0d1117;
  border-color: #30363d;
  color: #6e7681;
}

/* ── モーダル ── */
html[data-theme="dark"] .modal-overlay,
html[data-theme="dark"] .ai-modal-overlay { background: rgba(0,0,0,.75); }
html[data-theme="dark"] .modal-box,
html[data-theme="dark"] .ai-modal-box {
  background: #0d1117;
  border-color: #30363d;
  box-shadow: 0 16px 40px rgba(0,0,0,.70);
}
html[data-theme="dark"] .modal-close,
html[data-theme="dark"] .ai-modal-close { color: #6e7681; }
html[data-theme="dark"] .modal-close:hover,
html[data-theme="dark"] .ai-modal-close:hover { color: #ff7b72; }

/* ── AI 単価モーダル（CLI紫） ── */
html[data-theme="dark"] .ai-modal-title { color: #d2a8ff; }
html[data-theme="dark"] .ai-price-card {
  background: #0d1117;
  border-color: #30363d;
}
html[data-theme="dark"] .ai-price-card:hover { border-color: #58a6ff; background: rgba(88,166,255,.08); }
html[data-theme="dark"] .ai-price-card--mid {
  border-color: #8957e5;
  background: rgba(137,87,229,.10);
}
html[data-theme="dark"] .ai-price-card--mid .ai-card-value { color: #d2a8ff; } /* 紫 */
html[data-theme="dark"] .ai-meta-type { color: #8b949e; background: #161b22; border-color: #30363d; }
html[data-theme="dark"] .conf-high { background: rgba(63,185,80,.15); color: #3fb950; border-color: rgba(63,185,80,.30); }
html[data-theme="dark"] .conf-medium { background: rgba(227,179,65,.15); color: #e3b341; border-color: rgba(227,179,65,.30); }
html[data-theme="dark"] .conf-low { background: rgba(255,123,114,.15); color: #ff7b72; border-color: rgba(255,123,114,.30); }

/* ── フラッシュ通知 ── */
html[data-theme="dark"] .flash-success { background: rgba(63,185,80,.12); border-left-color: #3fb950; color: #3fb950; }
html[data-theme="dark"] .flash-danger  { background: rgba(255,123,114,.12); border-left-color: #ff7b72; color: #ff7b72; }
html[data-theme="dark"] .flash-info    { background: rgba(88,166,255,.12); border-left-color: #58a6ff; color: #79c0ff; }
html[data-theme="dark"] .flash-warning { background: rgba(227,179,65,.12); border-left-color: #e3b341; color: #e3b341; }

/* ── AI Toast ── */
html[data-theme="dark"] .ai-toast {
  background: #161b22 !important;
  color: #d2a8ff !important;
  border-color: #8957e5 !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.6), 0 0 0 1px rgba(137,87,229,.3);
}

/* ── 親子行テーブル ── */
html[data-theme="dark"] .is-parent {
  background: linear-gradient(90deg, rgba(88,166,255,.07) 0%, #0d1117 60%) !important;
}
html[data-theme="dark"] tr.is-child[data-depth="1"] td.cell-name { border-left-color: #388bfd; }
html[data-theme="dark"] tr.is-child[data-depth="2"] td.cell-name { border-left-color: #3fb950; }
html[data-theme="dark"] tr.is-child[data-depth="3"] td.cell-name { border-left-color: #e3b341; }
html[data-theme="dark"] tr.is-child[data-depth="1"] { background: #0d1117; }
html[data-theme="dark"] tr.is-child[data-depth="2"] { background: rgba(63,185,80,.03); }
html[data-theme="dark"] tr.is-child[data-depth="3"] { background: rgba(227,179,65,.03); }
html[data-theme="dark"] .child-indent { color: #388bfd; opacity: .7; }

/* ── ダッシュボード stat カード ── */
html[data-theme="dark"] .stat-card {
  background: #0d1117 !important;
  border-color: #30363d;
  box-shadow: 0 2px 8px rgba(0,0,0,.4);
}
html[data-theme="dark"] .stat-card:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,.55) !important;
  border-color: #484f58;
}
/* 各カラーバリアント: 上端ストリップを明るく + 背景に微妙な色味 */
html[data-theme="dark"] .stat-blue {
  background: linear-gradient(160deg, rgba(88,166,255,.08) 0%, #0d1117 50%) !important;
  border-color: rgba(88,166,255,.20);
}
html[data-theme="dark"] .stat-green {
  background: linear-gradient(160deg, rgba(63,185,80,.08) 0%, #0d1117 50%) !important;
  border-color: rgba(63,185,80,.20);
}
html[data-theme="dark"] .stat-indigo {
  background: linear-gradient(160deg, rgba(121,192,255,.08) 0%, #0d1117 50%) !important;
  border-color: rgba(121,192,255,.18);
}
html[data-theme="dark"] .stat-purple {
  background: linear-gradient(160deg, rgba(210,168,255,.08) 0%, #0d1117 50%) !important;
  border-color: rgba(210,168,255,.20);
}
html[data-theme="dark"] .stat-orange {
  background: linear-gradient(160deg, rgba(227,179,65,.08) 0%, #0d1117 50%) !important;
  border-color: rgba(227,179,65,.20);
}
html[data-theme="dark"] .stat-line {
  background: linear-gradient(160deg, rgba(6,199,85,.08) 0%, #0d1117 50%) !important;
  border-color: rgba(6,199,85,.20);
}
/* アイコン背景 + 色 */
html[data-theme="dark"] .stat-blue .stat-icon   { background: rgba(88,166,255,.12) !important;  color: #58a6ff !important; }
html[data-theme="dark"] .stat-green .stat-icon  { background: rgba(63,185,80,.12) !important;   color: #3fb950 !important; }
html[data-theme="dark"] .stat-indigo .stat-icon { background: rgba(121,192,255,.12) !important; color: #79c0ff !important; }
html[data-theme="dark"] .stat-purple .stat-icon { background: rgba(210,168,255,.12) !important; color: #d2a8ff !important; }
html[data-theme="dark"] .stat-orange .stat-icon { background: rgba(227,179,65,.12) !important;  color: #e3b341 !important; }
html[data-theme="dark"] .stat-line .stat-icon   { background: rgba(6,199,85,.12) !important;    color: #3fb950 !important; }
/* 上端ストリップを鮮明に */
html[data-theme="dark"] .stat-blue::before   { background: linear-gradient(90deg, #388bfd, #79c0ff) !important; box-shadow: 0 0 8px rgba(88,166,255,.4); }
html[data-theme="dark"] .stat-green::before  { background: linear-gradient(90deg, #2ea043, #3fb950) !important; box-shadow: 0 0 8px rgba(63,185,80,.4); }
html[data-theme="dark"] .stat-indigo::before { background: linear-gradient(90deg, #388bfd, #a5b4fc) !important; box-shadow: 0 0 8px rgba(121,192,255,.4); }
html[data-theme="dark"] .stat-purple::before { background: linear-gradient(90deg, #8957e5, #d2a8ff) !important; box-shadow: 0 0 8px rgba(210,168,255,.4); }
html[data-theme="dark"] .stat-orange::before { background: linear-gradient(90deg, #bb8009, #e3b341) !important; box-shadow: 0 0 8px rgba(227,179,65,.4); }
html[data-theme="dark"] .stat-line::before   { background: linear-gradient(90deg, #06c755, #3fb950) !important; box-shadow: 0 0 8px rgba(6,199,85,.4); }
/* テキスト */
html[data-theme="dark"] .stat-value { color: #f0f6fc !important; font-weight: 700; }
html[data-theme="dark"] .stat-label { color: #6e7681 !important; }
html[data-theme="dark"] .stat-badge { background: rgba(255,255,255,.06) !important; color: #8b949e !important; }

/* ── ブレッドクラム ── */
html[data-theme="dark"] .breadcrumb a { color: #58a6ff; }
html[data-theme="dark"] .breadcrumb a:hover { color: #79c0ff; }

/* ── パンくず区切り ── */
html[data-theme="dark"] .breadcrumb span { color: #484f58; }

/* ── ログインページ ── */
html[data-theme="dark"] .login-wrap {
  background: #0d1117;
  border-color: #30363d;
  box-shadow: 0 16px 48px rgba(0,0,0,.7);
}

/* ── フッター ── */
html[data-theme="dark"] .app-footer {
  background: #060a0e;
  border-top-color: #21262d;
}

/* ── スクロールバー（webkit） ── */
html[data-theme="dark"] * { scrollbar-color: #30363d #0d1117; }

/* ── タブナビ ── */
html[data-theme="dark"] .tab-nav { border-bottom-color: #21262d; }
html[data-theme="dark"] .tab-item { color: #8b949e; }
html[data-theme="dark"] .tab-item:hover { color: #c9d1d9; border-bottom-color: #484f58; }
html[data-theme="dark"] .tab-item.active {
  color: #58a6ff;       /* 青: アクティブタブ */
  border-bottom-color: #58a6ff;
}

/* ── 数量計算ドラッグハンドル ── */
html[data-theme="dark"] .drag-handle { color: #484f58; }
html[data-theme="dark"] .drag-handle:hover { color: #8b949e; }

/* ── btn-ai-row（✨ボタン）── */
html[data-theme="dark"] .btn-ai-row { color: #d2a8ff; opacity: .7; }
html[data-theme="dark"] .btn-ai-row:hover { opacity: 1; background: rgba(210,168,255,.12); }

/* ── 図面エディタ ── */
html[data-theme="dark"] canvas { filter: brightness(.9) contrast(1.05); }