*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ========== デモモードバナー ========== */
#demo-mode-banner {
  position: sticky;
  top: 0;
  z-index: 9999;
  background: #0ea5e9;
  color: #fff;
  text-align: center;
  padding: 0.45rem 1.5rem;
  font-size: 0.875rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* ========== MFA 警告バナー ========== */
#mfa-warning-banner {
  position: sticky;
  top: 0;
  z-index: 9998;
  background: #dc2626;
  color: #fff;
  text-align: center;
  padding: 0.5rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* ========== 試用期限警告バナー ========== */
#trial-expiring-banner {
  position: sticky;
  top: 0;
  z-index: 9997;
  background: #f97316;
  color: #fff;
  text-align: center;
  padding: 0.5rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  cursor: pointer;
}

#trial-expiring-banner a {
  color: inherit;
  text-decoration: none;
}

#trial-expiring-banner:hover {
  background: #ea6c0c;
}

/* ========== なりすましバナー ========== */
#impersonation-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: #2563eb;
  color: #fff;
  padding: 0.5rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.875rem;
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(37,99,235,0.25);
}

#imp-exit-btn {
  background: #fff;
  color: #2563eb;
  border: none;
  border-radius: 6px;
  padding: 0.3rem 0.9rem;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

#imp-exit-btn:hover {
  background: #dbeafe;
}

body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background-color: #f0f2f5;
  color: #1a1a2e;
  min-height: 100vh;
}

input::placeholder,
textarea::placeholder {
  color: #b8bfc9 !important;
  opacity: 1 !important;
}

/* ========== ログインページ ========== */

.login-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 1rem;
}

.login-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  padding: 2.5rem;
  width: 100%;
  max-width: 400px;
}

.login-logo {
  text-align: center;
  margin-bottom: 2rem;
}

.login-logo h1 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1a1a2e;
}

.login-logo p {
  font-size: 0.875rem;
  color: #6b7280;
  margin-top: 0.25rem;
}

.form-group {
  margin-bottom: 1.25rem;
}

.form-group label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
  margin-bottom: 0.375rem;
}

.form-group input {
  width: 100%;
  padding: 0.625rem 0.875rem;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 0.9375rem;
  color: #1a1a2e;
  transition: border-color 0.15s, box-shadow 0.15s;
  outline: none;
}

.form-group input:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-group input[type="checkbox"] {
  width: auto;
  padding: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: none;
}

.btn-primary {
  width: 100%;
  padding: 0.75rem;
  background: #2563eb;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
  margin-top: 0.5rem;
}

.btn-primary:hover {
  background: #1d4ed8;
}

.btn-primary:disabled {
  background: #93c5fd;
  cursor: not-allowed;
}

.error-msg {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  color: #dc2626;
  font-size: 0.875rem;
  padding: 0.75rem;
  margin-top: 1rem;
  display: none;
}

.error-msg.visible {
  display: block;
}

/* ========== ダッシュボード・共通ヘッダー ========== */

.app-header {
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  padding: 0 1rem;
  min-height: 56px;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.app-header .app-name {
  font-size: 1rem;
  font-weight: 700;
  color: #1a1a2e;
  text-decoration: none;
  cursor: pointer;
}

/* ========== ユーザーアバターメニュー ========== */

.user-menu-wrap {
  position: relative;
  flex-shrink: 0;
  margin-left: auto;
}

.user-avatar-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #e5e7eb;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #374151;
  transition: background 0.15s;
}

.user-avatar-btn:hover {
  background: #d1d5db;
}

.user-dropdown {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  min-width: 220px;
  z-index: 200;
}

.user-dropdown.open {
  display: block;
}

.user-dropdown-info {
  padding: 0.875rem 1rem 0.75rem;
}

.user-dropdown-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: #1a1a2e;
  margin-bottom: 0.2rem;
}

.user-dropdown-email {
  font-size: 0.8rem;
  color: #6b7280;
  word-break: break-all;
}

.user-dropdown-divider {
  height: 1px;
  background: #e5e7eb;
}

.user-dropdown-item {
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  background: none;
  border: none;
  text-align: left;
  font-size: 0.875rem;
  color: #374151;
  cursor: pointer;
  transition: background 0.15s;
  font-family: inherit;
}

.user-dropdown-item:hover {
  background: #f9fafb;
}

.user-dropdown-logout {
  color: #dc2626;
  border-radius: 0 0 10px 10px;
}

.user-dropdown-logout:hover {
  background: #fef2f2;
}

.app-main {
  max-width: 1200px;
  margin: 2rem auto;
  padding: 0 1.5rem;
}

.welcome-card {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  padding: 2rem;
}

.welcome-card h2 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #1a1a2e;
  margin-bottom: 0.5rem;
}

.welcome-card p {
  color: #6b7280;
  font-size: 0.9375rem;
}

/* ========== ナビゲーション ========== */

.app-nav {
  display: flex;
  align-items: flex-end;
  align-self: stretch;
  gap: 3px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  background: transparent;
  padding: 6px 0 0;
}

.app-nav::-webkit-scrollbar {
  display: none;
}

.app-nav a {
  display: flex;
  align-items: center;
  padding: 0 0.875rem;
  border-radius: 6px 6px 0 0;
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
  text-decoration: none;
  transition: background 0.15s;
  white-space: nowrap;
  border: none;
  min-height: 32px;
  background: #fff;
  margin-bottom: -1px;
}

.app-nav a:hover {
  background: #dce8ff;
}

.app-nav a.active {
  background: #2563eb;
  color: #fff;
}

.app-nav a:first-child {
  font-size: 1rem;
  padding: 0 0.625rem;
}

html.nav-hidden #top-nav { display: none; }

/* ========== ページヘッダー ==========
 *
 * 新規ページを追加するときは必ず以下のテンプレートを使う:
 *
 *   <main class="app-main">            ← 幅広ページはそのまま / 狭いページは style="max-width:Xpx;"
 *     <div class="page-header">
 *       <!-- 任意: 戻るボタン（左端に配置） -->
 *       <a href="/dashboard.html" class="btn btn-outline-secondary btn-sm">← 戻る</a>
 *       <h2>ページタイトル</h2>         ← 絵文字不要・h2固定
 *       <!-- 任意: アクションボタン（右端に配置） -->
 *       <button class="btn btn-primary btn-sm">＋ 新規作成</button>
 *     </div>
 *     ...コンテンツ...
 *   </main>
 *
 * NG: <div class="container">, <h4>, <h5>, タイトルなし
 * ========================================== */

.page-header {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-bottom: 1.25rem;
}

.page-header h2 {
  font-size: 1.125rem;
  font-weight: 700;
  color: #1a1a2e;
}

.page-header > .btn {
  position: absolute;
  right: 0;
}

.page-header > .btn-outline-secondary {
  left: 0;
  right: auto;
}

.btn-primary.btn-sm {
  width: auto;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  margin-top: 0;
}

/* ========== データテーブル ========== */

.table-wrap {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.data-table th {
  background: #f9fafb;
  padding: 0.75rem 1rem;
  text-align: left;
  font-weight: 600;
  color: #374151;
  border-bottom: 1px solid #e5e7eb;
  white-space: nowrap;
}

.data-table td {
  padding: 0.75rem 1rem;
  color: #374151;
  border-bottom: 1px solid #f3f4f6;
}

.data-table tbody tr:last-child td {
  border-bottom: none;
}

.data-table tbody tr:hover td {
  background: #f9fafb;
}

.btn-table {
  padding: 0.25rem 0.625rem;
  background: #fff;
  color: #374151;
  border: 1px solid #d1d5db;
  border-radius: 5px;
  font-size: 0.8125rem;
  cursor: pointer;
  transition: background 0.15s;
  margin-right: 0.25rem;
}

.btn-table:hover {
  background: #f3f4f6;
}

.btn-table.btn-danger {
  color: #dc2626;
  border-color: #fca5a5;
}

.btn-table.btn-danger:hover {
  background: #fef2f2;
}

.btn-table.btn-approve {
  color: #16a34a;
  border-color: #86efac;
}

.btn-table.btn-approve:hover {
  background: #f0fdf4;
}

.empty-state {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  padding: 3rem;
  text-align: center;
  color: #9ca3af;
  font-size: 0.9375rem;
}

.loading-state {
  padding: 3rem;
  text-align: center;
  color: #9ca3af;
  font-size: 0.9375rem;
}

/* ========== バッジ ========== */

.badge {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 99px;
  font-size: 0.75rem;
  font-weight: 600;
}

.badge-green  { background: #dcfce7; color: #16a34a; }
.badge-yellow { background: #fef9c3; color: #a16207; }
.badge-red    { background: #fee2e2; color: #dc2626; }
.badge-blue   { background: #dbeafe; color: #1d4ed8; }
.badge-gray   { background: #f3f4f6; color: #6b7280; }

/* ========== モーダル ========== */

.modal-overlay {
  display: flex;
  position: fixed;
  inset: 0;
  top: var(--imp-banner-h, 0px);
  background: rgba(0, 0, 0, 0.4);
  z-index: 300;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.22s ease, visibility 0.22s ease;
}

.modal-overlay.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Bootstrap の .modal { position:fixed / top:0 / left:0 / height:100% / display:none } を上書き
   Bootstrap は .modal に position:fixed を付与するため flex の中央揃えから外れる。
   relative に戻すことで modal-overlay の justify-content:center が正常に機能する。 */
.modal-overlay .modal {
  display: block;
  position: relative;
  top: auto;
  left: auto;
  height: auto;
  overflow: visible;
  z-index: auto;
  transform: scale(0.95) translateY(-12px);
  opacity: 0;
  transition: transform 0.22s ease, opacity 0.22s ease;
}

.modal-overlay.open .modal {
  transform: scale(1) translateY(0);
  opacity: 1;
}

.modal {
  background: #fff;
  border-radius: 12px;
  width: 100%;
  max-width: 480px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

/* Bootstrap モーダル（.modal.fade）はカスタムスタイルを無効化して正しく中央表示する */
.modal.fade {
  background: transparent;
  max-width: none;
  border-radius: 0;
  box-shadow: none;
  width: 100%;
  top: var(--imp-banner-h, 0px);
  height: calc(100% - var(--imp-banner-h, 0px));
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid #e5e7eb;
}

.modal-header h3 {
  font-size: 1rem;
  font-weight: 700;
  color: #1a1a2e;
}

.modal-close {
  background: none;
  border: none;
  font-size: 1.25rem;
  color: #9ca3af;
  cursor: pointer;
  line-height: 1;
  padding: 0.25rem;
}

.modal-close:hover {
  color: #374151;
}

.modal-body {
  padding: 1.5rem;
}

.modal-body .form-group input {
  font-size: 0.9375rem;
}

.required {
  color: #dc2626;
  font-size: 0.75rem;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid #e5e7eb;
}

.btn-secondary {
  padding: 0.625rem 1.25rem;
  background: #fff;
  color: #374151;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}

.btn-secondary:hover {
  background: #f9fafb;
}

.modal-footer .btn-primary {
  width: auto;
  padding: 0.625rem 1.5rem;
  margin-top: 0;
  font-size: 0.875rem;
}

/* ========== セルフバッジ ========== */

.self-label {
  font-size: 0.75rem;
  color: #9ca3af;
  margin-left: 0.375rem;
}

/* ========== 見積編集ページ ========== */

.estimate-header-form {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  padding: 1.5rem;
  margin-bottom: 1.25rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 2rem;
}

.estimate-header-form .form-group input,
.estimate-header-form .form-group select,
.estimate-header-form .form-group textarea {
  font-size: 0.9375rem;
}

.estimate-header-form .form-group textarea {
  width: 100%;
  padding: 0.625rem 0.875rem;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 0.9375rem;
  color: #1a1a2e;
  resize: vertical;
  outline: none;
  font-family: inherit;
  min-height: 80px;
}

.estimate-header-form .form-group textarea:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.estimate-header-form .form-group select {
  width: 100%;
  padding: 0.625rem 0.875rem;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 0.9375rem;
  color: #1a1a2e;
  background: #fff;
  outline: none;
}

.estimate-number-display {
  font-size: 0.8125rem;
  color: #6b7280;
  background: #f9fafb;
  padding: 0.5rem 0.875rem;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
  display: inline-block;
  font-family: monospace;
  letter-spacing: 0.05em;
}

.lines-section {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  margin-bottom: 1.25rem;
  overflow: hidden;
}

.lines-wrapper {
  overflow-x: auto;
}

.estimate-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
  min-width: 860px;
}

.estimate-table th {
  background: #f9fafb;
  padding: 0.5rem 0.5rem;
  text-align: left;
  font-weight: 600;
  color: #374151;
  border-bottom: 1px solid #e5e7eb;
  white-space: nowrap;
}

.estimate-table th.th-num   { text-align: right; }
.estimate-table th.th-center { text-align: center; }

.estimate-table td {
  padding: 0.3rem 0.375rem;
  border-bottom: 1px solid #f3f4f6;
  vertical-align: middle;
}

.estimate-table td input {
  width: 100%;
  padding: 0.25rem 0.375rem;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  font-size: 0.8125rem;
  outline: none;
  font-family: inherit;
}

.estimate-table td input:focus {
  border-color: #3b82f6;
}

.estimate-table td input:disabled {
  background: #f9fafb;
  color: #d1d5db;
  border-color: #f3f4f6;
  cursor: default;
}

.estimate-table td input[type="number"] {
  text-align: right;
}

.td-lineno {
  text-align: center;
  color: #9ca3af;
  font-size: 0.75rem;
  width: 28px;
  min-width: 28px;
}

.td-amount {
  text-align: right;
  padding-right: 0.5rem;
  white-space: nowrap;
  min-width: 80px;
}

.line-heading td { background: #f8faff; }
.line-blank   td { background: #fafafa; }

.sel-type {
  padding: 0.2rem 0.25rem;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  font-size: 0.75rem;
  background: #fff;
  outline: none;
  width: 62px;
}

.inp-content { min-width: 120px; }
.inp-tekiyo  { min-width: 80px; }
.inp-qty     { max-width: 70px; }
.inp-unit    { max-width: 50px; }
.inp-price   { max-width: 90px; }

.btn-remove-line {
  background: none;
  border: none;
  color: #d1d5db;
  cursor: pointer;
  font-size: 1rem;
  padding: 0.125rem 0.375rem;
  line-height: 1;
}

.btn-remove-line:hover { color: #dc2626; }

.add-line-btns {
  padding: 0.625rem 0.75rem;
  border-top: 1px solid #f3f4f6;
  display: flex;
  gap: 0.5rem;
}

.btn-add-line {
  padding: 0.3rem 0.75rem;
  background: #fff;
  color: #374151;
  border: 1px dashed #d1d5db;
  border-radius: 6px;
  font-size: 0.8125rem;
  cursor: pointer;
}

.btn-add-line:hover { background: #f9fafb; }

.estimate-totals {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 1.25rem;
}

.totals-card {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  padding: 1.25rem 1.5rem;
  min-width: 260px;
}

.total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.375rem 0;
  font-size: 0.875rem;
  color: #374151;
  border-top: 1px solid #f3f4f6;
}

.total-row:first-child { border-top: none; }

.grand-total {
  font-size: 1rem;
  font-weight: 700;
  color: #1a1a2e;
  border-top: 2px solid #e5e7eb !important;
  margin-top: 0.25rem;
  padding-top: 0.625rem !important;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  padding-bottom: 2rem;
}

/* ========== タブ ========== */

/* タブ全体のコンテナ：青枠＋全角丸 */
.tab-wrap {
  border: 1.5px solid #3b5de7;
  border-radius: 10px;
  margin-bottom: 1.25rem;
  overflow: hidden;
}

/* タブボタン行 */
.tab-bar {
  display: flex;
  gap: 4px;
  padding: 5px 5px 0;
  border-bottom: 1.5px solid #3b5de7;
  background: transparent;
  margin-bottom: 0;
}

/* 各タブボタン：上角丸 */
.tab-btn {
  padding: 0.5rem 1.25rem;
  background: #fff;
  border: none;
  border-radius: 6px 6px 0 0;
  color: #3b5de7;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}

.tab-btn:hover:not(.active) {
  background: #eff2ff;
}

/* アクティブタブ：塗りつぶし青 */
.tab-btn.active {
  background: #3b5de7;
  color: #fff;
}

.tab-panel { display: none; padding: 1rem; }
.tab-panel.active { display: block; }

/* ========== フィルタバー ========== */

.filter-bar {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.filter-bar span {
  font-size: 0.8125rem;
  color: #6b7280;
  margin-right: 0.25rem;
}

.filter-btn {
  padding: 0.3rem 0.75rem;
  background: #fff;
  color: #374151;
  border: 1px solid #d1d5db;
  border-radius: 20px;
  font-size: 0.8125rem;
  cursor: pointer;
  transition: all 0.15s;
}

.filter-btn.active {
  background: #eff6ff;
  color: #2563eb;
  border-color: #bfdbfe;
}

/* ========== 未請求グループ ========== */

.unbilled-group {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  margin-bottom: 1rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.unbilled-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 1rem;
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
  gap: 1rem;
}

.unbilled-customer {
  font-weight: 600;
  font-size: 0.9375rem;
  color: #1a1a2e;
  flex: 1;
}

.unbilled-summary {
  font-size: 0.875rem;
  color: #6b7280;
}

/* ========== 広いモーダル ========== */

.modal-lg {
  max-width: 580px;
}

.modal-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1rem;
}

.modal-form-grid .form-group-full {
  grid-column: 1 / -1;
}

.modal-body textarea {
  width: 100%;
  padding: 0.625rem 0.875rem;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 0.9375rem;
  color: #1a1a2e;
  resize: vertical;
  outline: none;
  font-family: inherit;
  min-height: 72px;
}

.modal-body textarea:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.modal-body select {
  width: 100%;
  padding: 0.625rem 0.875rem;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 0.9375rem;
  color: #1a1a2e;
  background: #fff;
  outline: none;
}

.modal-body select:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* ========== 会社情報設定ページ ========== */

.settings-section {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  padding: 1.5rem;
  margin-bottom: 1.25rem;
}

.settings-section-title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: #1a1a2e;
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #f3f4f6;
}

.settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 2rem;
}

.settings-full {
  grid-column: 1 / -1;
}

.save-success {
  background: #f0fdf4;
  border: 1px solid #86efac;
  border-radius: 8px;
  color: #16a34a;
  font-size: 0.875rem;
  padding: 0.75rem;
  margin-bottom: 1rem;
}

/* ========== メールページ ========== */

.mail-layout {
  display: flex;
  flex-direction: row;
  overflow: hidden;
  height: calc(100vh - 178px);
  min-height: 450px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}

.mail-sidebar {
  width: 280px;
  min-width: 280px;
  border-right: 1px solid #e5e7eb;
  background: #fff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.mail-sidebar-header {
  padding: 0.875rem 1rem;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-shrink: 0;
}

.mail-sidebar-header h5 {
  font-size: 0.9375rem;
  font-weight: 700;
  color: #1a1a2e;
  margin: 0;
}

.mail-customer-list {
  flex: 1;
  overflow-y: auto;
}

.mail-customer-item {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #f3f4f6;
  cursor: pointer;
  transition: background 0.15s;
}

.mail-customer-item:hover { background: #f9fafb; }

.mail-customer-item.active {
  background: #eff6ff;
  border-left: 3px solid #2563eb;
  padding-left: calc(1rem - 3px);
}

.mail-customer-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: #1a1a2e;
  margin-bottom: 0.125rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mail-customer-addr {
  font-size: 0.75rem;
  color: #9ca3af;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mail-customer-date {
  font-size: 0.75rem;
  color: #6b7280;
  margin-top: 0.25rem;
}

.mail-main {
  flex: 1;
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #f8f9fa;
}

.mail-main-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
  font-size: 0.9375rem;
}

.mail-thread { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }

.mail-thread-header {
  background: #fff;
  padding: 0.875rem 1.25rem;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

.mail-thread-header h5 {
  flex: 1;
  font-size: 0.9375rem;
  font-weight: 700;
  color: #1a1a2e;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mail-fetch-status {
  font-size: 0.7rem;
  white-space: nowrap;
  flex-shrink: 0;
}
.mail-fetch-status.fetching  { color: #6b7280; }
.mail-fetch-status.done-new  { color: #059669; font-weight: 600; }
.mail-fetch-status.done-none { color: #9ca3af; }

.mail-thread-body {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}

.mail-empty-thread {
  padding: 2rem;
  text-align: center;
  color: #9ca3af;
  font-size: 0.875rem;
}

/* メールアイテム */
.mail-item {
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  overflow: hidden;
}

.mail-item-clickable {
  cursor: pointer;
  transition: background 0.15s;
  user-select: none;
}

.mail-item-clickable:hover { background: #f9fafb; }

.mail-item-header {
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.mail-dir-badge {
  flex-shrink: 0;
  font-size: 0.7rem;
  padding: 0.125rem 0.5rem;
  border-radius: 99px;
  font-weight: 600;
}

.mail-dir-sent     { background: #dbeafe; color: #1d4ed8; }
.mail-dir-received { background: #dcfce7; color: #16a34a; }

.mail-item-subject {
  flex: 1;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #1a1a2e;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mail-item-date {
  flex-shrink: 0;
  font-size: 0.75rem;
  color: #9ca3af;
  white-space: nowrap;
}

.mail-item-party {
  font-size: 0.75rem;
  color: #6b7280;
  padding: 0 1rem 0.4rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: nowrap;
  min-width: 0;
}
.mail-item-party > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.mail-item-body {
  display: none;
  padding: 1rem;
  border-top: 1px solid #f3f4f6;
}

.mail-item-body.open { display: block; }

.mail-from-to {
  font-size: 0.8125rem;
  color: #6b7280;
  margin-bottom: 0.75rem;
  display: flex;
  flex-direction: column;
}

.mail-from-to-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.badge-registered {
  font-size: 0.7rem;
  color: #16a34a;
  background: #dcfce7;
  padding: 0.125rem 0.5rem;
  border-radius: 99px;
  white-space: nowrap;
}

.mail-body-text {
  font-size: 0.875rem;
  color: #374151;
  white-space: pre-wrap;
  line-height: 1.6;
  background: #f9fafb;
  padding: 0.875rem;
  border-radius: 6px;
  max-height: 360px;
  overflow-y: auto;
  font-family: inherit;
}

.mail-body-text.html-mail {
  background: transparent;
  padding: 0;
  max-height: none;
  overflow: visible;
  border-radius: 0;
}

.mail-html-iframe {
  width: 100%;
  border: none;
  display: block;
  min-height: 80px;
  border-radius: 6px;
  background: #fff;
}

.mail-body-loading {
  font-size: 0.875rem;
  color: #9ca3af;
  padding: 0.5rem 0;
}

.mail-attachments {
  margin-top: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.mail-attach-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.625rem;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 0.75rem;
  cursor: pointer;
  color: #374151;
  transition: background 0.15s;
}

.mail-attach-btn:hover { background: #f3f4f6; }

.mail-attach-btn.too-large {
  color: #9ca3af;
  border-color: #f3f4f6;
  cursor: not-allowed;
}

.mail-item-actions {
  margin-top: 0.75rem;
  display: flex;
  gap: 0.5rem;
}

.btn-mail-reply {
  padding: 0.3rem 0.75rem;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 0.8125rem;
  cursor: pointer;
  color: #374151;
  transition: background 0.15s;
}

.btn-mail-reply:hover { background: #f3f4f6; }

.btn-register-customer {
  padding: 0.2rem 0.3rem;
  background: transparent;
  border: 1px solid #d1d5db;
  border-radius: 5px;
  font-size: 0.75rem;
  cursor: pointer;
  color: #374151;
  transition: background 0.15s;
  flex-shrink: 0;
  line-height: 1;
}
.btn-register-customer:hover:not(:disabled) { background: #f3f4f6; }
.btn-register-customer:disabled {
  color: #d1d5db;
  border-color: #e5e7eb;
  cursor: not-allowed;
}

/* ========== レスポンシブ ========== */

@media (max-width: 768px) {

  /* メールページ */
  .mail-layout {
    height: calc(100dvh - 148px);
    min-height: 300px;
  }

  .mail-sidebar { width: 100%; min-width: unset; border-right: none; }
  .mail-main    { display: none; }

  .mail-layout.thread-open .mail-sidebar { display: none; }
  .mail-layout.thread-open .mail-main    { display: flex; }

  /* ヘッダー：タブ＋アバターを1行に */
  .app-header {
    padding: 0 0.75rem;
    min-height: 52px;
  }

  .app-header .app-name {
    font-size: 0.9375rem;
  }

  .app-nav a {
    font-size: 0.8rem;
    padding: 0 0.5rem;
  }

  /* メインコンテンツの余白調整 */
  .app-main {
    margin: 1rem auto;
    padding: 0 0.75rem;
  }

  /* 2カラムグリッドを1カラムに */
  .estimate-header-form {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .settings-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .modal-form-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  /* ページヘッダーのボタンが折り返せるように */
  .page-header {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  /* データテーブルはセル内折り返しなし→横スクロールで対応 */
  .data-table td {
    white-space: nowrap;
  }
}

/* ========== 電話番号リンク（スマホのみ有効） ========== */
.tel-link {
  color: inherit;
  text-decoration: none;
  pointer-events: none;
}

@media (max-width: 767px) {
  .tel-link {
    color: #0d6efd;
    text-decoration: none;
    pointer-events: auto;
  }
}

/* ========== サイドバーレイアウト（PC専用） ========== */

.app-sidebar {
  display: none;
}

@media (min-width: 1024px) {
  html.sidebar-layout .app-sidebar {
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 0;
    top: var(--imp-banner-h, 0px);
    bottom: 0;
    width: 220px;
    background: #fff;
    border-right: 1px solid #e5e7eb;
    z-index: 200;
    overflow-y: auto;
    opacity: 0;
    transition: opacity 0.15s;
  }

  html.sidebar-layout .app-sidebar.ready {
    opacity: 1;
  }

  /* サイドバー表示時はヘッダーを非表示、ボディ左余白を確保 */
  html.sidebar-layout .app-header {
    display: none;
  }

  html.sidebar-layout body {
    padding-left: 220px;
  }

  /* モーダルをサイドバーの右側（コンテンツ領域）の中央に表示する。
     padding-left にすることで背景は全画面を覆いつつ、
     flexbox の中央揃えがコンテンツ領域内で計算される。 */
  html.sidebar-layout .modal-overlay {
    padding-left: 220px;
  }

  /* ロゴエリア */
  .sidebar-header {
    padding: 1rem 1rem 0.75rem;
    border-bottom: 1px solid #f3f4f6;
    flex-shrink: 0;
  }

  .sidebar-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: #1a1a2e;
    font-weight: 700;
    font-size: 1rem;
  }

  .sidebar-logo i {
    font-size: 1.1rem;
    color: #2563eb;
  }

  /* ナビゲーション */
  .sidebar-nav {
    flex: 1;
    padding: 0.5rem 0;
    overflow-y: auto;
  }

  .sidebar-nav-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.6rem 1rem;
    color: #374151;
    text-decoration: none;
    font-size: 0.875rem;
    border-radius: 6px;
    margin: 1px 0.5rem;
    transition: background 0.12s, color 0.12s;
  }

  .sidebar-nav-item i {
    width: 1rem;
    text-align: center;
    font-size: 0.875rem;
    color: #6b7280;
    flex-shrink: 0;
    transition: color 0.12s;
  }

  .sidebar-nav-item:hover {
    background: #f3f4f6;
    color: #111827;
  }

  .sidebar-nav-item:hover i {
    color: #374151;
  }

  .sidebar-nav-item.active {
    background: #eff6ff;
    color: #1d4ed8;
    font-weight: 600;
  }

  .sidebar-nav-item.active i {
    color: #2563eb;
  }

  /* フッター（ユーザー情報・ログアウト） */
  .sidebar-footer {
    padding: 0.75rem;
    border-top: 1px solid #f3f4f6;
    flex-shrink: 0;
  }

  .sidebar-user {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.25rem;
    margin-bottom: 0.25rem;
    overflow: hidden;
  }

  .sidebar-user-icon {
    font-size: 1.5rem;
    color: #9ca3af;
    flex-shrink: 0;
  }

  .sidebar-user-text {
    overflow: hidden;
  }

  .sidebar-user-name {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .sidebar-user-email {
    font-size: 0.75rem;
    color: #6b7280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .sidebar-logout-btn {
    width: 100%;
    padding: 0.5rem 0.75rem;
    background: none;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 0.8rem;
    color: #6b7280;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
    display: flex;
    align-items: center;
    gap: 0.4rem;
  }

  .sidebar-logout-btn:hover {
    background: #fef2f2;
    color: #dc2626;
    border-color: #fca5a5;
  }

  /* QRコードログインセクション */
  .sidebar-qr-wrap {
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #f3f4f6;
  }

  .sidebar-qr-btn {
    width: 100%;
    padding: 0.5rem 0.75rem;
    background: none;
    border: 1px solid #bfdbfe;
    border-radius: 6px;
    font-size: 0.8rem;
    color: #2563eb;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: background 0.12s, border-color 0.12s;
    display: flex;
    align-items: center;
    gap: 0.4rem;
  }

  .sidebar-qr-btn:hover {
    background: #eff6ff;
    border-color: #93c5fd;
  }

  #sidebar-qr-panel {
    text-align: center;
    padding: 0.5rem 0 0.25rem;
  }

  #sidebar-qr-canvas {
    display: inline-block;
    border-radius: 10px;
    overflow: hidden;
    line-height: 0;
    background: #fff;
    padding: 8px;
    box-shadow: 0 1px 6px rgba(0,0,0,0.18);
  }

  .sidebar-qr-timer {
    font-size: 0.72rem;
    color: #6b7280;
    margin-top: 0.3rem;
  }

  .sidebar-qr-expired {
    text-align: center;
    padding: 0.4rem 0 0.25rem;
  }

  .sidebar-qr-expired-msg {
    font-size: 0.75rem;
    color: #9ca3af;
    margin-bottom: 0.4rem;
  }

  .sidebar-qr-expired .sidebar-qr-btn {
    width: auto;
    margin: 0 auto;
    padding: 0.35rem 0.75rem;
  }
}

/* ========== モバイルハンバーガーメニュー ========== */

.mobile-menu-btn {
  display: none;
}

.mobile-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 399;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s, visibility 0.25s;
}

.mobile-drawer-backdrop.open {
  opacity: 1;
  visibility: visible;
}

.mobile-drawer {
  position: fixed;
  top: var(--imp-banner-h, 0px);
  left: 0;
  bottom: 0;
  width: 260px;
  max-width: 80vw;
  background: #fff;
  z-index: 400;
  transform: translateX(-100%);
  transition: transform 0.25s ease;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  box-shadow: 2px 0 16px rgba(0, 0, 0, 0.15);
}

.mobile-drawer.open {
  transform: translateX(0);
}

.mobile-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1rem 0.75rem;
  border-bottom: 1px solid #f3f4f6;
  flex-shrink: 0;
}

.mobile-drawer-logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: #1a1a2e;
  font-weight: 700;
  font-size: 1rem;
}

.mobile-drawer-logo i {
  font-size: 1.1rem;
  color: #2563eb;
}

.mobile-drawer-close {
  background: none;
  border: none;
  color: #6b7280;
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  line-height: 1;
}

.mobile-drawer-close:hover {
  background: #f3f4f6;
  color: #374151;
}

.mobile-drawer-nav {
  flex: 1;
  padding: 0.5rem 0;
  overflow-y: auto;
}

.mobile-drawer-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.75rem 1rem;
  color: #374151;
  text-decoration: none;
  font-size: 0.9375rem;
  border-radius: 6px;
  margin: 1px 0.5rem;
  transition: background 0.12s, color 0.12s;
}

.mobile-drawer-item i {
  width: 1.125rem;
  text-align: center;
  font-size: 0.9375rem;
  color: #6b7280;
  flex-shrink: 0;
}

.mobile-drawer-item:hover {
  background: #f3f4f6;
  color: #111827;
}

.mobile-drawer-item.active {
  background: #eff6ff;
  color: #1d4ed8;
  font-weight: 600;
}

.mobile-drawer-item.active i {
  color: #2563eb;
}

.mobile-drawer-footer {
  padding: 0.75rem;
  border-top: 1px solid #f3f4f6;
  flex-shrink: 0;
}

.mobile-drawer-user {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.25rem;
  margin-bottom: 0.5rem;
  overflow: hidden;
}

.mobile-drawer-user-icon {
  font-size: 1.5rem;
  color: #9ca3af;
  flex-shrink: 0;
}

.mobile-drawer-user-text {
  overflow: hidden;
}

.mobile-drawer-user-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-drawer-user-email {
  font-size: 0.75rem;
  color: #6b7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-drawer-logout-btn {
  width: 100%;
  padding: 0.5rem 0.75rem;
  background: none;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  font-size: 0.8rem;
  color: #6b7280;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.mobile-drawer-logout-btn:hover {
  background: #fef2f2;
  color: #dc2626;
  border-color: #fca5a5;
}

@media (max-width: 1023px) {
  .app-header {
    display: none;
  }

  .mobile-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    left: 16px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #2563eb;
    color: #fff;
    border: none;
    cursor: pointer;
    z-index: 401;
    box-shadow: 0 3px 12px rgba(37, 99, 235, 0.45);
    font-size: 1.125rem;
    transition: background 0.15s, left 0.25s ease;
  }

  .mobile-menu-btn:active {
    background: #1d4ed8;
  }

  .mobile-menu-btn.open {
    background: #374151;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3);
    left: calc(min(260px, 80vw) + 8px);
  }
}

@media (min-width: 1024px) {
  .mobile-menu-btn,
  .mobile-drawer,
  .mobile-drawer-backdrop {
    display: none !important;
  }
}

/* ========== ダークモード ========== */

[data-theme="dark"] body {
  background-color: #0d1117;
  color: #e6edf3;
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: #6e7681 !important;
}

/* ── ヘッダー・ナビ ── */
[data-theme="dark"] .app-header {
  background: #161b22;
  border-bottom-color: #30363d;
}
[data-theme="dark"] .app-header .app-name { color: #e6edf3; }
[data-theme="dark"] .app-nav a {
  background: #161b22;
  color: #c9d1d9;
}
[data-theme="dark"] .app-nav a:hover { background: #21262d; color: #e6edf3; }
[data-theme="dark"] .app-nav a.active { background: #2563eb; color: #fff; }

/* ── ユーザードロップダウン ── */
[data-theme="dark"] .user-avatar-btn { background: #30363d; color: #e6edf3; }
[data-theme="dark"] .user-avatar-btn:hover { background: #3d444e; }
[data-theme="dark"] .user-dropdown {
  background: #161b22;
  border-color: #30363d;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
[data-theme="dark"] .user-dropdown-name { color: #e6edf3; }
[data-theme="dark"] .user-dropdown-email { color: #8b949e; }
[data-theme="dark"] .user-dropdown-divider { background: #30363d; }
[data-theme="dark"] .user-dropdown-item { color: #c9d1d9; }
[data-theme="dark"] .user-dropdown-item:hover { background: #21262d; }
[data-theme="dark"] .user-dropdown-logout { color: #f87171; }
[data-theme="dark"] .user-dropdown-logout:hover { background: #1a0f0f; }

/* ── サイドバー ── */
[data-theme="dark"] .app-sidebar {
  background: #161b22 !important;
  border-right-color: #30363d !important;
}
[data-theme="dark"] .sidebar-header { border-bottom-color: #30363d; }
[data-theme="dark"] .sidebar-logo { color: #e6edf3; }
[data-theme="dark"] .sidebar-nav-item { color: #c9d1d9; }
[data-theme="dark"] .sidebar-nav-item i { color: #8b949e; }
[data-theme="dark"] .sidebar-nav-item:hover { background: #21262d; color: #e6edf3; }
[data-theme="dark"] .sidebar-nav-item:hover i { color: #c9d1d9; }
[data-theme="dark"] .sidebar-nav-item.active { background: #1c2d4a; color: #58a6ff; }
[data-theme="dark"] .sidebar-nav-item.active i { color: #58a6ff; }
[data-theme="dark"] .sidebar-footer { border-top-color: #30363d; }
[data-theme="dark"] .sidebar-user-name { color: #e6edf3; }
[data-theme="dark"] .sidebar-user-email { color: #8b949e; }
[data-theme="dark"] .sidebar-logout-btn {
  border-color: #30363d;
  color: #8b949e;
}
[data-theme="dark"] .sidebar-logout-btn:hover {
  background: #1a0f0f;
  color: #f87171;
  border-color: #7f1d1d;
}
[data-theme="dark"] .sidebar-qr-wrap { border-bottom-color: #30363d; }
[data-theme="dark"] .sidebar-qr-btn { border-color: #1c3a6e; color: #58a6ff; }
[data-theme="dark"] .sidebar-qr-btn:hover { background: #1c2d4a; border-color: #388bfd; }
[data-theme="dark"] .sidebar-qr-timer { color: #8b949e; }
[data-theme="dark"] .sidebar-qr-expired-msg { color: #6e7681; }

/* ── モバイルドロワー ── */
[data-theme="dark"] .mobile-drawer {
  background: #161b22;
  box-shadow: 2px 0 16px rgba(0, 0, 0, 0.5);
}
[data-theme="dark"] .mobile-drawer-header { border-bottom-color: #30363d; }
[data-theme="dark"] .mobile-drawer-logo { color: #e6edf3; }
[data-theme="dark"] .mobile-drawer-close { color: #8b949e; }
[data-theme="dark"] .mobile-drawer-close:hover { background: #21262d; color: #e6edf3; }
[data-theme="dark"] .mobile-drawer-item { color: #c9d1d9; }
[data-theme="dark"] .mobile-drawer-item i { color: #8b949e; }
[data-theme="dark"] .mobile-drawer-item:hover { background: #21262d; color: #e6edf3; }
[data-theme="dark"] .mobile-drawer-item:hover i { color: #c9d1d9; }
[data-theme="dark"] .mobile-drawer-item.active { background: #1c2d4a; color: #58a6ff; }
[data-theme="dark"] .mobile-drawer-item.active i { color: #58a6ff; }
[data-theme="dark"] .mobile-drawer-footer { border-top-color: #30363d; }
[data-theme="dark"] .mobile-drawer-user-name { color: #e6edf3; }
[data-theme="dark"] .mobile-drawer-user-email { color: #8b949e; }
[data-theme="dark"] .mobile-drawer-logout-btn { border-color: #30363d; color: #8b949e; }
[data-theme="dark"] .mobile-drawer-logout-btn:hover {
  background: #1a0f0f;
  color: #f87171;
  border-color: #7f1d1d;
}

/* ── ログインページ ── */
[data-theme="dark"] .login-card {
  background: #161b22;
  box-shadow: 0 4px 24px rgba(0,0,0,0.4);
}
[data-theme="dark"] .login-logo h1 { color: #e6edf3; }
[data-theme="dark"] .login-logo p { color: #8b949e; }
[data-theme="dark"] .form-group label { color: #c9d1d9; }
[data-theme="dark"] .form-group input {
  background: #0d1117;
  border-color: #30363d;
  color: #e6edf3;
}
[data-theme="dark"] .form-group input:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
}

/* ── 共通ページ要素 ── */
[data-theme="dark"] .page-header h2 { color: #e6edf3; }
[data-theme="dark"] .app-main { color: #e6edf3; }
[data-theme="dark"] .welcome-card {
  background: #161b22;
  border-color: #30363d;
}
[data-theme="dark"] .welcome-card h2 { color: #e6edf3; }
[data-theme="dark"] .welcome-card p { color: #8b949e; }

/* ── テーブル ── */
[data-theme="dark"] .table-wrap {
  background: #161b22;
  border-color: #30363d;
}
[data-theme="dark"] .data-table th {
  background: #1e2430;
  color: #c9d1d9;
  border-bottom-color: #30363d;
}
[data-theme="dark"] .data-table td {
  color: #c9d1d9;
  border-bottom-color: #21262d;
}
[data-theme="dark"] .data-table tbody tr:hover td { background: #21262d; }
[data-theme="dark"] .empty-state {
  background: #161b22;
  border-color: #30363d;
  color: #6e7681;
}
[data-theme="dark"] .loading-state { color: #6e7681; }

/* ── ボタン（カスタム） ── */
[data-theme="dark"] .btn-secondary {
  background: #21262d;
  color: #c9d1d9;
  border-color: #30363d;
}
[data-theme="dark"] .btn-secondary:hover { background: #30363d; }
[data-theme="dark"] .btn-table {
  background: #21262d;
  color: #c9d1d9;
  border-color: #30363d;
}
[data-theme="dark"] .btn-table:hover { background: #30363d; }
[data-theme="dark"] .btn-table.btn-danger { color: #f87171; border-color: #7f1d1d; }
[data-theme="dark"] .btn-table.btn-danger:hover { background: #1a0f0f; }
[data-theme="dark"] .btn-table.btn-approve { color: #4ade80; border-color: #14532d; }
[data-theme="dark"] .btn-table.btn-approve:hover { background: #052e16; }
[data-theme="dark"] .btn-register-customer { border-color: #30363d; color: #c9d1d9; }
[data-theme="dark"] .btn-register-customer:hover:not(:disabled) { background: #21262d; }
[data-theme="dark"] .btn-register-customer:disabled { color: #6e7681; border-color: #21262d; }

/* ── Bootstrap ボタン・フォーム ── */
[data-theme="dark"] .btn-outline-secondary {
  color: #c9d1d9;
  border-color: #30363d;
}
[data-theme="dark"] .btn-outline-secondary:hover {
  background: #30363d;
  color: #e6edf3;
  border-color: #30363d;
}
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
  background: #0d1117;
  border-color: #30363d;
  color: #e6edf3;
}
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
  background: #0d1117;
  border-color: #3b82f6;
  color: #e6edf3;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
}
[data-theme="dark"] .form-control:disabled,
[data-theme="dark"] .form-select:disabled { background: #161b22; color: #6e7681; }
[data-theme="dark"] .form-check-label { color: #c9d1d9; }
[data-theme="dark"] .input-group-text {
  background: #1e2430;
  border-color: #30363d;
  color: #8b949e;
}
[data-theme="dark"] .text-muted { color: #8b949e !important; }

/* ── Bootstrap カード ── */
[data-theme="dark"] .card {
  background: #161b22;
  border-color: #30363d;
}
[data-theme="dark"] .card-body { color: #c9d1d9; }
[data-theme="dark"] .card-subtitle { color: #8b949e !important; }

/* ── モーダル（カスタム） ── */
[data-theme="dark"] .modal {
  background: #161b22;
}
[data-theme="dark"] .modal-header {
  border-bottom-color: #30363d;
}
[data-theme="dark"] .modal-header h3 { color: #e6edf3; }
[data-theme="dark"] .modal-close { color: #6e7681; }
[data-theme="dark"] .modal-close:hover { color: #c9d1d9; }
[data-theme="dark"] .modal-footer { border-top-color: #30363d; }
[data-theme="dark"] .modal-body textarea,
[data-theme="dark"] .modal-body select,
[data-theme="dark"] .modal-body .form-group input,
[data-theme="dark"] .modal-body .form-group select {
  background: #0d1117;
  border-color: #30363d;
  color: #e6edf3;
}

/* ── Bootstrap モーダル ── */
[data-theme="dark"] .modal-content {
  background: #161b22;
  border-color: #30363d;
  color: #e6edf3;
}

/* ── 設定セクション ── */
[data-theme="dark"] .settings-section {
  background: #161b22;
  border-color: #30363d;
}
[data-theme="dark"] .settings-section-title {
  color: #e6edf3;
  border-bottom-color: #30363d;
}
[data-theme="dark"] .save-success {
  background: #052e16;
  border-color: #14532d;
  color: #4ade80;
}

/* ── 見積・請求 ── */
[data-theme="dark"] .estimate-header-form {
  background: #161b22;
  border-color: #30363d;
}
[data-theme="dark"] .estimate-header-form .form-group input,
[data-theme="dark"] .estimate-header-form .form-group select,
[data-theme="dark"] .estimate-header-form .form-group textarea {
  background: #0d1117;
  border-color: #30363d;
  color: #e6edf3;
}
[data-theme="dark"] .estimate-number-display {
  background: #1e2430;
  border-color: #30363d;
  color: #8b949e;
}
[data-theme="dark"] .lines-section {
  background: #161b22;
  border-color: #30363d;
}
[data-theme="dark"] .estimate-table th {
  background: #1e2430;
  color: #c9d1d9;
  border-bottom-color: #30363d;
}
[data-theme="dark"] .estimate-table td { border-bottom-color: #21262d; }
[data-theme="dark"] .estimate-table td input {
  background: #0d1117;
  border-color: #30363d;
  color: #e6edf3;
}
[data-theme="dark"] .estimate-table td input:disabled {
  background: #161b22;
  color: #6e7681;
  border-color: #21262d;
}
[data-theme="dark"] .sel-type {
  background: #0d1117;
  border-color: #30363d;
  color: #e6edf3;
}
[data-theme="dark"] .line-heading td { background: #1c2d4a; }
[data-theme="dark"] .line-blank td { background: #1a1d26; }
[data-theme="dark"] .add-line-btns { border-top-color: #21262d; }
[data-theme="dark"] .btn-add-line {
  background: #161b22;
  color: #c9d1d9;
  border-color: #30363d;
}
[data-theme="dark"] .btn-add-line:hover { background: #21262d; }
[data-theme="dark"] .totals-card {
  background: #161b22;
  border-color: #30363d;
}
[data-theme="dark"] .total-row { color: #c9d1d9; border-top-color: #21262d; }
[data-theme="dark"] .grand-total { color: #e6edf3; border-top-color: #30363d !important; }
[data-theme="dark"] .btn-remove-line { color: #6e7681; }
[data-theme="dark"] .btn-remove-line:hover { color: #f87171; }

/* ── タブ ── */
[data-theme="dark"] .tab-wrap { border-color: #3b5de7; }
[data-theme="dark"] .tab-bar { border-bottom-color: #3b5de7; }
[data-theme="dark"] .tab-btn { background: #161b22; color: #7592ff; }
[data-theme="dark"] .tab-btn:hover:not(.active) { background: #1c2455; }
[data-theme="dark"] .tab-btn.active { background: #3b5de7; color: #fff; }
[data-theme="dark"] .tab-panel { color: #c9d1d9; }

/* ── フィルタ ── */
[data-theme="dark"] .filter-bar span { color: #8b949e; }
[data-theme="dark"] .filter-btn {
  background: #161b22;
  color: #c9d1d9;
  border-color: #30363d;
}
[data-theme="dark"] .filter-btn.active {
  background: #1c2d4a;
  color: #58a6ff;
  border-color: #1d4ed8;
}

/* ── 未請求グループ ── */
[data-theme="dark"] .unbilled-group { background: #161b22; border-color: #30363d; }
[data-theme="dark"] .unbilled-group-header { background: #1e2430; border-bottom-color: #30363d; }
[data-theme="dark"] .unbilled-customer { color: #e6edf3; }
[data-theme="dark"] .unbilled-summary { color: #8b949e; }

/* ── メールページ ── */
[data-theme="dark"] .mail-layout { background: #161b22; border-color: #30363d; }
[data-theme="dark"] .mail-sidebar { background: #161b22; border-right-color: #30363d; }
[data-theme="dark"] .mail-sidebar-header { border-bottom-color: #30363d; }
[data-theme="dark"] .mail-sidebar-header h5 { color: #e6edf3; }
[data-theme="dark"] .mail-customer-item { border-bottom-color: #21262d; }
[data-theme="dark"] .mail-customer-item:hover { background: #21262d; }
[data-theme="dark"] .mail-customer-item.active { background: #1c2d4a; }
[data-theme="dark"] .mail-customer-name { color: #e6edf3; }
[data-theme="dark"] .mail-customer-addr { color: #6e7681; }
[data-theme="dark"] .mail-customer-date { color: #8b949e; }
[data-theme="dark"] .mail-main { background: #0d1117; }
[data-theme="dark"] .mail-main-empty { color: #6e7681; }
[data-theme="dark"] .mail-thread-header { background: #161b22; border-bottom-color: #30363d; }
[data-theme="dark"] .mail-thread-header h5 { color: #e6edf3; }
[data-theme="dark"] .mail-item { background: #161b22; border-bottom-color: #30363d; }
[data-theme="dark"] .mail-item-clickable:hover { background: #21262d; }
[data-theme="dark"] .mail-item-subject { color: #e6edf3; }
[data-theme="dark"] .mail-item-date { color: #6e7681; }
[data-theme="dark"] .mail-item-party { color: #8b949e; }
[data-theme="dark"] .mail-item-body { border-top-color: #21262d; }
[data-theme="dark"] .mail-from-to { color: #8b949e; }
[data-theme="dark"] .mail-body-text { color: #c9d1d9; background: #1e2430; }
[data-theme="dark"] .mail-body-loading { color: #6e7681; }
[data-theme="dark"] .mail-empty-thread { color: #6e7681; }
[data-theme="dark"] .mail-attach-btn { background: #21262d; border-color: #30363d; color: #c9d1d9; }
[data-theme="dark"] .mail-attach-btn:hover { background: #30363d; }
[data-theme="dark"] .btn-mail-reply { background: #21262d; border-color: #30363d; color: #c9d1d9; }
[data-theme="dark"] .btn-mail-reply:hover { background: #30363d; }

/* ── ダッシュボードウィジェット ── */
[data-theme="dark"] .widget-card { background: #161b22; border-color: #30363d; }
[data-theme="dark"] .widget-header { border-bottom-color: #21262d; }
[data-theme="dark"] .widget-title { color: #c9d1d9; }
[data-theme="dark"] .widget-title i { color: #6e7681; }
[data-theme="dark"] .widget-link { color: #58a6ff; }
[data-theme="dark"] .widget-empty,
[data-theme="dark"] .widget-loading { color: #6e7681; }
[data-theme="dark"] .widget-map-empty { background: #1e2430; color: #6e7681; }
[data-theme="dark"] .sched-item { border-bottom-color: #21262d; }
[data-theme="dark"] a.sched-item:hover { background: #21262d; }
[data-theme="dark"] .sched-item-time { color: #8b949e; }
[data-theme="dark"] .sched-item-title { color: #e6edf3; }
[data-theme="dark"] .sched-item-meta { color: #8b949e; }
[data-theme="dark"] .widget-more a { color: #58a6ff; }
[data-theme="dark"] .sales-month { color: #6e7681; border-bottom-color: #21262d; }
[data-theme="dark"] .sales-stat { border-bottom-color: #21262d; }
[data-theme="dark"] .sales-stat-label { color: #8b949e; }
[data-theme="dark"] .sales-stat-value { color: #e6edf3; }
[data-theme="dark"] .sales-unit { color: #8b949e; }
[data-theme="dark"] .activity-item { border-bottom-color: #21262d; }
[data-theme="dark"] a.activity-item:hover { background: #21262d; }
[data-theme="dark"] .activity-text { color: #c9d1d9; }
[data-theme="dark"] .activity-time { color: #6e7681; }
[data-theme="dark"] .mail-widget-item { border-bottom-color: #21262d; }
[data-theme="dark"] .mail-widget-subject { color: #e6edf3; }
[data-theme="dark"] .mail-widget-meta { color: #8b949e; }
[data-theme="dark"] .widget-sort-item { background: #161b22; border-color: #30363d; }
[data-theme="dark"] .widget-sort-item.disabled { background: #1e2430; }
[data-theme="dark"] .widget-drag-handle { color: #6e7681; }
[data-theme="dark"] .widget-sort-label { color: #c9d1d9; }

/* ── 個人設定ページ ── */
[data-theme="dark"] .layout-option {
  border-color: #30363d;
  color: #c9d1d9;
}
[data-theme="dark"] .layout-option.selected {
  border-color: #2563eb;
  background: #1c2d4a;
}

/* ── Bootstrap テーブル・テキストのダークモード上書き ── */
[data-theme="dark"] .table {
  --bs-table-color: #c9d1d9;
  --bs-table-bg: transparent;
  --bs-table-border-color: #30363d;
  --bs-table-hover-bg: #21262d;
  --bs-table-striped-bg: #1e2430;
  color: #c9d1d9;
  border-color: #30363d;
}
[data-theme="dark"] .table > :not(caption) > * {
  border-color: #30363d;
}
[data-theme="dark"] thead.table-light,
[data-theme="dark"] .table-light {
  --bs-table-color: #c9d1d9;
  --bs-table-bg: #1e2430;
  background-color: #1e2430 !important;
  color: #c9d1d9 !important;
  border-color: #30363d;
}
[data-theme="dark"] .text-dark {
  color: #e6edf3 !important;
}
[data-theme="dark"] .bg-light {
  background-color: #1e2430 !important;
  color: #c9d1d9 !important;
}

/* ── テーマトグルボタン共通 ── */
.theme-toggle-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* ── バナー共通（dashboard.html 等） ── */
.banner-error   { background: #f8d7da; border: 1px solid #f5c2c7; color: #842029; }
.banner-warning { background: #fff3cd; border: 1px solid #ffc107; color: #856404; }
.banner-info    { background: #e8f4fd; border: 1px solid #90cdf4; color: #1a365d; }
.banner-success { background: #d1fae5; border: 1px solid #6ee7b7; color: #065f46; }
[data-theme="dark"] .banner-error   { background: #1a0f0f; border-color: #7f1d1d; color: #f87171; }
[data-theme="dark"] .banner-warning { background: #1c1500; border-color: #854d0e; color: #fbbf24; }
[data-theme="dark"] .banner-info    { background: #0c1e35; border-color: #1e4d8c; color: #93c5fd; }
[data-theme="dark"] .banner-success { background: #052e16; border-color: #14532d; color: #4ade80; }

/* ── デモトースト（api.js） ── */
.demo-write-toast {
  position: fixed; top: 4rem; right: 1rem;
  background: #dc3545; color: #fff;
  padding: 0.6rem 1.2rem; border-radius: 8px;
  font-size: 0.875rem; z-index: 10000;
  box-shadow: 0 2px 10px rgba(0,0,0,0.25);
}

/* ── 更新履歴差分（api.js） ── */
.audit-diff-item { border: 1px solid #e5e7eb; border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; }
.audit-diff-avatar {
  width: 24px; height: 24px; border-radius: 50%; background: #e0e7ff;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; color: #4338ca; flex-shrink: 0;
}
.audit-diff-wrap { background: #f9fafb; border-radius: 6px; padding: 6px 10px; margin-top: 7px; }
.audit-diff-label { color: #6b7280; }
.audit-diff-old { color: #dc2626; text-decoration: line-through; }
.audit-diff-new { color: #16a34a; }
.audit-diff-sub { margin-top: 5px; font-size: 0.78rem; }
[data-theme="dark"] .audit-diff-item { border-color: #30363d; }
[data-theme="dark"] .audit-diff-avatar { background: #1c2d4a; color: #93c5fd; }
[data-theme="dark"] .audit-diff-wrap { background: #1e2430; }
[data-theme="dark"] .audit-diff-label { color: #8b949e; }
[data-theme="dark"] .audit-diff-old { color: #f87171; }
[data-theme="dark"] .audit-diff-new { color: #4ade80; }

/* ── 顧客詳細ページ ── */
[data-theme="dark"] .report-card:hover { background: #21262d; border-color: #3d444e; }

/* ── MFAセットアップ ── */
[data-theme="dark"] .secret-box { background: #1e2430 !important; border-color: #30363d !important; color: #e6edf3 !important; }

/* ── 画像プレビューボックス（logo/icon upload） ── */
[data-theme="dark"] .img-preview-box { background: #1e2430 !important; }

/* ── インフォボックス青（estimate-edit 等） ── */
[data-theme="dark"] .info-box-blue { background: #1c2d4a !important; border-color: #1d4ed8 !important; color: #93c5fd !important; }

/* ── 成功メッセージ（login 等） ── */
[data-theme="dark"] .msg-success-box { background: #052e16 !important; border-color: #14532d !important; color: #4ade80 !important; }

/* ── エラーメッセージ ── */
[data-theme="dark"] .msg-error-box { background: #1a0f0f !important; border-color: #7f1d1d !important; color: #f87171 !important; }

/* ── 警告メッセージ ── */
[data-theme="dark"] .msg-warning-box { background: #1c1500 !important; border-color: #854d0e !important; color: #fbbf24 !important; }

/* ── デモログインボタン ── */
[data-theme="dark"] #demo-login-btn { background: #0c2a3e !important; border-color: #0ea5e9 !important; color: #7dd3fc !important; }

/* ── お気に入り行（vendor-admin） ── */
[data-theme="dark"] tr.fav-row > * { background-color: #1a1600 !important; }

/* ── 収益レポートカード（vendor-admin） ── */
[data-theme="dark"] .rpt-card[data-rpt-metric="revenue"] { background: #052e16 !important; border-color: #14532d !important; }
[data-theme="dark"] .rpt-card[data-rpt-metric="rate"]     { background: #1c2d4a !important; border-color: #1d4ed8 !important; }
[data-theme="dark"] .rpt-card[data-rpt-metric="avg"]      { background: #1c1500 !important; border-color: #854d0e !important; }
[data-theme="dark"] .rpt-card[data-rpt-metric="duration"] { background: #1a0d2b !important; border-color: #6b21a8 !important; }
[data-theme="dark"] #rpt-monthly-revenue { color: #4ade80 !important; }
[data-theme="dark"] #rpt-premium-rate    { color: #60a5fa !important; }
[data-theme="dark"] #rpt-avg-amount      { color: #fbbf24 !important; }
[data-theme="dark"] #rpt-avg-duration    { color: #c084fc !important; }

/* ── 日報ページ (work-reports.html) 担当者タグ・ドロップダウン・削除済み ── */
.staff-tag-partial {
  font-weight:400; font-size:12px; cursor:pointer;
  background:#E6F1FB; color:#0C447C; border:0.5px solid #85B7EB;
}
.staff-tag-deleted {
  font-weight:400; font-size:12px; cursor:pointer;
  background:#FAECE7; color:#712B13; border:0.5px solid #F0997B;
}
.staff-tag-active {
  font-weight:400; font-size:12px; cursor:pointer;
  background:#EEEDFE; color:#3C3489; border:0.5px solid #AFA9EC;
}
.wr-staff-dropdown-item {
  padding:7px 12px; cursor:pointer; font-size:13px;
  display:flex; align-items:center; gap:8px;
  border-bottom:0.5px solid #f0f0f0;
}
.wr-staff-dropdown-item:hover { background:#f8f9fa; }
.wr-deleted-badge {
  font-size:10px; background:#FAECE7; color:#712B13;
  border:0.5px solid #F0997B; padding:1px 6px; border-radius:20px;
}
.wr-deleted-item {
  border:1px solid #e5e7eb; border-radius:8px;
  padding:10px 12px; margin-bottom:8px; opacity:0.65;
}
[data-theme="dark"] #filterPanel {
  background:#1e2430 !important; border-color:#30363d !important;
}
[data-theme="dark"] #staffFilterDropdown {
  background:#1e2430 !important; border-color:#30363d !important;
  box-shadow:0 4px 12px rgba(0,0,0,.4) !important;
}
[data-theme="dark"] .staff-tag-partial {
  background:#1c2d4a !important; color:#58a6ff !important; border-color:#1d4ed8 !important;
}
[data-theme="dark"] .staff-tag-deleted {
  background:#1a0f0f !important; color:#f87171 !important; border-color:#7f1d1d !important;
}
[data-theme="dark"] .staff-tag-active {
  background:#221840 !important; color:#c4b5fd !important; border-color:#6d28d9 !important;
}
[data-theme="dark"] .wr-staff-dropdown-item {
  border-bottom-color:#30363d !important; color:#c9d1d9;
}
[data-theme="dark"] .wr-staff-dropdown-item:hover { background:#21262d !important; }
[data-theme="dark"] .wr-deleted-badge {
  background:#1a0f0f !important; color:#f87171 !important; border-color:#7f1d1d !important;
}
[data-theme="dark"] .wr-deleted-item { border-color:#30363d !important; }

/* ── 見積編集ページ (estimate-edit.html) 掛率フォーム・商品利益・変更履歴 ── */
.est-kk-form {
  background: #f0f4ff;
  border: 1px solid #c7d4f5;
}
[data-theme="dark"] .est-kk-form {
  background: #1c2d4a !important;
  border-color: #1d4ed8 !important;
}
[data-theme="dark"] #prod-profit-display {
  background: #052e16 !important;
  border-color: #14532d !important;
}
[data-theme="dark"] #est-history-section > div {
  border-color: #30363d !important;
}