@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Noto+Sans+JP:wght@300;400;500;700&display=swap');

:root {
  /* Color System */
  --primary-color: #0d6efd;
  --primary-hover: #0b5ed7;
  --primary-light: #e7f1ff;
  
  --success-color: #198754;
  --success-hover: #157347;
  --success-light: #d1e7dd;
  
  --warning-color: #ffc107;
  --warning-hover: #ffca2c;
  --warning-light: #fff3cd;
  
  --danger-color: #dc3545;
  --danger-hover: #bb2d3b;
  --danger-light: #f8d7da;
  
  --info-color: #0dcaf0;
  --info-light: #cff4fc;

  /* Theme colors - Light B2B slate/gray sidebar with clean main area */
  --sidebar-bg: #f8fafc;
  --sidebar-hover: #f1f5f9;
  --sidebar-active: #e2e8f0;
  --sidebar-text: #475569;
  --sidebar-text-active: #0f172a;
  
  --body-bg: #f3f6f5;
  --card-bg: #ffffff;
  --border-color: #e2e8f0;
  --text-main: #1e293b;
  --text-muted: #64748b;
  --text-white: #ffffff;

  /* Font System */
  --font-sans: 'Inter', 'Noto Sans JP', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  
  /* Borders and Shadows */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-sans);
  background-color: var(--body-bg);
  color: var(--text-main);
  font-size: 14px;
  line-height: 1.5;
  overflow-x: hidden;
  height: 100vh;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

/* Scrollbar Style */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Layout */
#app-layout {
  display: flex;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

/* Sidebar */
aside.sidebar {
  width: 260px;
  background-color: var(--sidebar-bg);
  color: var(--sidebar-text);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  border-right: 1px solid var(--border-color);
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.08); /* Shadow to distinguish from main area */
  transition: width var(--transition-normal);
  z-index: 15;
}

.brand-logo {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  object-fit: contain;
}

.brand-logo--login {
  width: 40px;
  height: 40px;
}

.brand-text span {
  color: var(--success-color);
}

.sidebar-brand {
  height: 60px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 24px;
  font-size: 20px;
  font-weight: 700;
  color: var(--text-main);
  border-bottom: 1px solid var(--border-color);
}

.sidebar-menu {
  flex: 1;
  overflow-y: auto;
  padding: 16px 12px;
  list-style: none;
}

.menu-item {
  margin-bottom: 4px;
}

.menu-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  color: var(--sidebar-text);
  text-decoration: none;
  border-radius: var(--radius-md);
  font-weight: 500;
  transition: all var(--transition-fast);
  cursor: pointer;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
}

.menu-link:hover {
  background-color: var(--sidebar-hover);
  color: var(--sidebar-text-active);
}

.menu-item.active > .menu-link {
  background-color: var(--sidebar-active);
  color: var(--sidebar-text-active);
  font-weight: 600;
}

.menu-link-content {
  display: flex;
  align-items: center;
  gap: 12px;
}

.menu-link i {
  font-size: 16px;
  width: 20px;
  text-align: center;
}

.menu-arrow {
  font-size: 12px;
  transition: transform var(--transition-fast);
}

.menu-item.open .menu-arrow {
  transform: rotate(90deg);
}

/* Submenu */
.submenu {
  list-style: none;
  padding-left: 36px;
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-normal);
}

.menu-item.open .submenu {
  max-height: 300px;
}

.submenu-link {
  display: block;
  padding: 8px 16px;
  color: var(--sidebar-text);
  text-decoration: none;
  font-size: 13px;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
  cursor: pointer;
  margin-top: 2px;
}

.submenu-link:hover {
  color: var(--sidebar-text-active);
  background-color: var(--sidebar-hover);
}

.submenu-item.active .submenu-link {
  color: var(--sidebar-text-active);
  font-weight: 600;
  background-color: rgba(0, 0, 0, 0.05);
}

/* Main Container */
main.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

/* Header */
header.app-header {
  height: 60px;
  background-color: var(--card-bg);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  box-shadow: var(--shadow-sm);
  z-index: 10;
}

.header-title-area {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-main);
}

.header-subtitle {
  font-size: 13px;
  color: var(--text-muted);
}

.header-user-area {
  display: flex;
  align-items: center;
  gap: 16px;
}

.user-profile-dropdown {
  position: relative;
  cursor: pointer;
}

.user-profile-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  background-color: #fafbfc;
  font-weight: 500;
  transition: all var(--transition-fast);
}

.user-profile-trigger:hover {
  background-color: #f1f5f9;
}

.user-dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  width: 180px;
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  display: none;
  flex-direction: column;
  padding: 8px 0;
  z-index: 20;
}

.user-profile-dropdown.open .user-dropdown-menu {
  display: flex;
}

.user-dropdown-item {
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-main);
  text-decoration: none;
  font-size: 13px;
  transition: background-color var(--transition-fast);
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  cursor: pointer;
}

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

/* Page Wrapper */
.page-container {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
  position: relative;
}

.page-view {
  display: none;
  animation: fadeIn 0.3s ease;
}

.page-view.active {
  display: block;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Dashboard Specific Styles */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.dashboard-card {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.dashboard-card-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.dashboard-card-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 6px;
}

.dashboard-card-sub {
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
  /* 前月比と前年同月比を並べるため、カード幅が足りないときは折り返す */
  flex-wrap: wrap;
}

.dashboard-rate-separator {
  color: var(--text-muted);
}

.trend-up {
  color: var(--danger-color);
  font-weight: 600;
}

.trend-down {
  color: var(--primary-color);
  font-weight: 600;
}

.dashboard-visuals {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 24px;
  margin-bottom: 24px;
}

.visual-panel {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-sm);
}

.panel-header {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 20px;
  color: var(--text-main);
  border-left: 4px solid var(--success-color);
  padding-left: 10px;
}

/* Custom SVG Chart Styles */
.chart-container {
  height: 240px;
  position: relative;
}

/* Notice Bar */
.notice-bar {
  background-color: var(--warning-light);
  border: 1px solid #ffe69c;
  border-radius: var(--radius-md);
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #664d03;
  margin-bottom: 24px;
}

.notice-bar i {
  font-size: 16px;
}

/* Table Card / Layout */
.table-card {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin-bottom: 24px;
}

.table-responsive {
  width: 100%;
  overflow-x: auto;
}

table.data-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 13px;
}

table.data-table th {
  background-color: #f8fafc;
  color: var(--text-muted);
  font-weight: 600;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color);
  white-space: nowrap;
}

table.data-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-main);
  vertical-align: middle;
}

/* 配車一覧: クライアント要望（横スクロール採用・原則改行禁止・長文列のみ省略表示）に対応。
   .haisha-list-table にスコープしており、他画面の一覧テーブルには影響しない。 */
.haisha-list-table td,
.haisha-list-table th {
  white-space: nowrap;
}

.haisha-list-table td.cell-ellipsis-sm,
.haisha-list-table th.cell-ellipsis-sm {
  max-width: 80px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.haisha-list-table td.cell-ellipsis-md,
.haisha-list-table th.cell-ellipsis-md {
  max-width: 140px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 配車管理「荷主別」タブ: 荷主グループの見出し行・交互配色（プロトタイプのデザインを移植）。
   荷主が切り替わる位置に .haisha-group-header 行を挿入し、荷主ごとに色帯で区切る。
   偶数/奇数グループで .haisha-group-alt により明暗を付け、荷主会社ごとの視認性を上げる。 */
.haisha-group-header td {
  background-color: var(--sidebar-active);
  border-top: 2px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  padding: 8px 16px;
  font-weight: 600;
  font-size: 12.5px;
  color: var(--sidebar-text-active);
  white-space: nowrap;
}

.haisha-group-header td i {
  color: var(--text-muted);
  margin-right: 6px;
}

.haisha-group-alt td {
  background-color: var(--sidebar-bg);
}

/* 配送マスタ一覧: クライアント要望（改行させず横スクロールで表示）に対応。
   .item-list-table にスコープしており、他のマスタ一覧（荷主/車両/乗務員/協力会社等）には影響しない。 */
.item-list-table td,
.item-list-table th {
  white-space: nowrap;
}

/* 汎用: 改行させず横スクロール表示する一覧テーブル用（クライアント要望「他ページ同様に改行しない」）。
   表を <div class="table-responsive"> でラップした上でこのクラスを table に付与する。
   請求管理・マスタ(荷主/乗務員/協力会社)・分析資料の各一覧に適用する。 */
.nowrap-table td,
.nowrap-table th {
  white-space: nowrap;
}

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

table.data-table tbody tr:hover {
  background-color: #f8fafc;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: var(--radius-md);
  font-weight: 500;
  font-size: 13px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
  /* ボタンには<a>で作るものもある（一覧の「クリア」、一括追加への導線、「一覧へ戻る」等）。
     アンカー既定の下線が出てボタンに見えなくなるため、ここで消す。 */
  text-decoration: none;
}

.btn-primary {
  background-color: var(--success-color); /* Matches the screenshot's green buttons */
  color: var(--text-white);
}
.btn-primary:hover {
  background-color: var(--success-hover);
}

.btn-secondary {
  background-color: var(--card-bg);
  border-color: var(--border-color);
  color: var(--text-main);
}
.btn-secondary:hover {
  background-color: #f1f5f9;
}

.btn:disabled,
.btn.disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-danger {
  background-color: var(--danger-color);
  color: var(--text-white);
}
.btn-danger:hover {
  background-color: var(--danger-hover);
}

.btn-info {
  background-color: var(--primary-color);
  color: var(--text-white);
}
.btn-info:hover {
  background-color: var(--primary-hover);
}

.btn-sm {
  padding: 4px 8px;
  font-size: 12px;
  border-radius: var(--radius-sm);
}

/* Search Box Form */
.search-card {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 20px;
}

.search-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 16px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-group.span-2 {
  grid-column: span 2;
}

.form-group.span-3 {
  grid-column: span 3;
}

.form-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}

/* 入力欄の下に添えるチェックボックス（運行日の「期間で検索」など） */
.form-check {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
}

.form-control {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background-color: #fafbfc;
  font-size: 13px;
  transition: all var(--transition-fast);
  outline: none;
}

.form-control:focus {
  border-color: var(--success-color);
  background-color: #ffffff;
  box-shadow: 0 0 0 3px rgba(25, 135, 84, 0.15);
}

.form-control:disabled {
  background-color: #e2e8f0;
  color: #94a3b8;
  cursor: not-allowed;
}

.search-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  border-top: 1px solid var(--border-color);
  padding-top: 16px;
}

/* Form layout in Popup Modals */
.modal-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}

.modal-form-grid .form-group.full-width {
  grid-column: span 2;
}

.required-badge {
  background-color: var(--danger-color);
  color: var(--text-white);
  font-size: 10px;
  padding: 2px 4px;
  border-radius: 3px;
  font-weight: bold;
  margin-left: 6px;
}

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 50px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}

.badge-success {
  background-color: var(--success-light);
  color: var(--success-color);
}

.badge-warning {
  background-color: var(--warning-light);
  color: #856404;
}

.badge-danger {
  background-color: var(--danger-light);
  color: var(--danger-color);
}

/* 合計金額支払入力（支払合計を手入力した行）の目印。配車一覧の支払合計セルで使う。 */
.badge-manual-payment {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border: 1px solid var(--border-color);
  border-radius: 50px;
  background-color: #f1f5f9;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
}

.badge-info {
  background-color: var(--primary-light);
  color: #084298;
}

/* Pagination */
.table-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: nowrap;
  padding: 16px 20px;
  border-top: 1px solid var(--border-color);
  background-color: #f8fafc;
}

/* E2: バー型ページネーション（左=件数テキスト、右=ページ送りボタン群）。
   .table-footer が左右振り分けのバーコンテナを兼ねる（display:flex; justify-content:space-between）。
   #analysis-pagination（analysis.js のクライアントページング）にも同クラスを付与して統一する。 */
.pagination-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* 件数テキストは左端に固定し、折り返して縦積みにならないようにする（E2崩れ対策）。 */
.pagination-count {
  font-size: 13px;
  color: var(--text-muted);
  white-space: nowrap;
  flex: 0 0 auto;
}

/* ページ送りは右端へ。ページ番号はウィンドウ表示のため折り返さない。 */
.pagination {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 0 0 auto;
  margin-left: auto;
  flex-wrap: nowrap;
}

/* 省略記号（…）。ボタンではないため枠線・背景を持たせない。 */
.page-ellipsis {
  padding: 6px 4px;
  font-size: 12px;
  color: var(--text-muted);
  user-select: none;
}

/* ボタンの枠全体をクリック領域にする。padding を li ではなく中の a/span 側に持たせ、
   a/span を block 化してセル全体を埋める（padding を li に置くと文字部分しか
   リンクにならず、枠の余白を押しても反応しないため）。 */
.page-btn {
  padding: 0;
  border: 1px solid var(--border-color);
  background-color: var(--card-bg);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  transition: all var(--transition-fast);
}

.page-btn > a,
.page-btn > span {
  display: block;
  padding: 6px 12px;
  color: inherit;
  text-decoration: none;
  cursor: inherit;
}

.page-btn:hover:not(.disabled) {
  background-color: #f1f5f9;
  border-color: #cbd5e1;
}

.page-btn.active {
  background-color: var(--success-color);
  border-color: var(--success-color);
  color: var(--text-white);
}

.page-btn.disabled {
  color: #cbd5e1;
  cursor: not-allowed;
}

/* Modal Overlay */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(4px);
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  animation: modalFadeIn var(--transition-fast);
}

.modal-overlay.open {
  display: flex;
}

.modal-window {
  background-color: var(--card-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  width: 720px;
  max-width: 90%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: modalSlideUp var(--transition-normal);
}

.modal-window.large {
  width: 1000px;
}

.modal-window.xlarge {
  width: 1100px;
  max-width: 95vw;
}

.modal-window.small {
  width: 480px;
}

.modal-header {
  padding: 16px 24px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #f8fafc;
}

.modal-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-main);
}

.modal-close {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 18px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}

.modal-close:hover {
  background-color: #e2e8f0;
  color: var(--text-main);
}

.modal-body {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
}

.modal-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  background-color: #f8fafc;
}

@keyframes modalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes modalSlideUp {
  from { transform: translateY(20px) scale(0.98); }
  to { transform: translateY(0) scale(1); }
}

/* Form validation and errors */
.form-error {
  color: var(--danger-color);
  font-size: 11px;
  margin-top: 4px;
  display: none;
}

/* Tabs */
.tabs-container {
  display: flex;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 20px;
}

.tab-item {
  padding: 12px 24px;
  font-weight: 500;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none; /* タブは<a>要素。アンカー既定の下線を消す（active時の緑border-bottomは維持） */
}

.tab-item:hover {
  color: var(--text-main);
}

.tab-item.active {
  color: var(--success-color);
  border-bottom-color: var(--success-color);
  font-weight: 600;
}

/* Login Page Styles */
#login-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #08110e;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
}

.login-card {
  width: 400px;
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  padding: 40px;
  display: flex;
  flex-direction: column;
}

.login-header {
  text-align: center;
  margin-bottom: 30px;
}

.login-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 26px;
  font-weight: 700;
  color: #1e352f;
  margin-bottom: 8px;
}

.login-subtitle {
  font-size: 14px;
  color: var(--text-muted);
}

.login-error {
  background-color: var(--danger-light);
  color: var(--danger-color);
  padding: 10px 14px;
  border-radius: var(--radius-md);
  margin-bottom: 20px;
  font-size: 12px;
  display: none;
  font-weight: 500;
}

/* Action Buttons Header Bar */
.action-header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.action-header-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
}

.haisha-expense-section {
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--border-color);
}

.haisha-expense-section .section-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 12px;
}

.preview-modal-body {
  background-color: #f1f5f9;
  padding: 20px;
}

.preview-layout {
  display: flex;
  gap: 16px;
  min-height: 520px;
}

.preview-sidebar {
  width: 180px;
  flex-shrink: 0;
}

.preview-sidebar-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.preview-page-thumb {
  background: #fff;
  border: 2px solid var(--border-color);
  border-radius: 6px;
  padding: 8px;
  margin-bottom: 8px;
  cursor: pointer;
  font-size: 11px;
}

.preview-page-thumb.active {
  border-color: var(--success-color);
  background: #f0fdf4;
}

.preview-main {
  flex: 1;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  overflow: auto;
}

.preview-shipper-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.preview-shipper-tab {
  padding: 6px 12px;
  border-radius: 4px;
  border: 1px solid var(--border-color);
  background: #fff;
  font-size: 12px;
  cursor: pointer;
}

.preview-shipper-tab.active {
  background: var(--success-color);
  color: #fff;
  border-color: var(--success-color);
}

.tokyo-grid-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}

.tokyo-grid-table th,
.tokyo-grid-table td {
  border: 1px solid #ccc;
  padding: 4px 6px;
  text-align: center;
}

.pdf-preview-content {
  width: 100%;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 16px;
  overflow: auto;
}

@media print {
  body * {
    visibility: hidden;
  }
  #modal-pdf-preview.open .pdf-preview-content,
  #modal-pdf-preview.open .pdf-preview-content *,
  #modal-invoice-preview.open .preview-layout,
  #modal-invoice-preview.open .preview-layout *,
  #modal-invoice-tokyo.open .preview-layout,
  #modal-invoice-tokyo.open .preview-layout * {
    visibility: visible;
  }
  #modal-pdf-preview.open,
  #modal-invoice-preview.open,
  #modal-invoice-tokyo.open {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
  }
}

/* Invoice Preview styling (looks like a Japanese printed paper invoice) */
.invoice-print-container {
  background-color: #ffffff;
  color: #000000;
  font-family: 'Noto Sans JP', sans-serif;
  padding: 24px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.invoice-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
}

.invoice-title {
  font-size: 24px;
  font-weight: 700;
  border-bottom: 2px solid #000;
  padding-bottom: 4px;
  width: fit-content;
}

.invoice-info-block {
  font-size: 12px;
  line-height: 1.6;
}

.invoice-billing-to {
  font-size: 16px;
  margin-bottom: 20px;
  border-bottom: 1px solid #000;
  padding-bottom: 4px;
}

.invoice-total-box {
  border: 2px solid #000;
  padding: 12px;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 24px;
  display: flex;
  justify-content: space-between;
  background-color: #f8fafc;
}

.invoice-details-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  margin-bottom: 30px;
}

.invoice-details-table th, .invoice-details-table td {
  border: 1px solid #000;
  padding: 6px 10px;
}

.invoice-details-table th {
  background-color: #f1f5f9;
  text-align: center;
}

.text-right {
  text-align: right;
}

.text-center {
  text-align: center;
}

/* Direction of icons and items in forms */
.search-icon-input {
  position: relative;
}

/* Top bar style user dropdown active */
.user-profile-trigger i {
  transition: transform var(--transition-fast);
}
.user-profile-dropdown.open .user-profile-trigger i {
  transform: rotate(180deg);
}

/* Double arrow in B2B transfer */
.transfer-arrow-container {
  display: flex;
  align-items: center;
  justify-content: center;
  grid-column: span 2;
  margin: 10px 0;
}
.transfer-arrow {
  background-color: var(--success-light);
  color: var(--success-color);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  box-shadow: var(--shadow-sm);
}

/* Sub-panel tables inside popup */
.popup-sub-panel {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  margin-top: 16px;
  background-color: #fafbfc;
  padding: 16px;
}

.popup-sub-title {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* 配車一括追加画面（F03拡張）。
   以前は .bulk-table-scroll に max-height/overflow-y:auto を設定し、
   テーブル本体を縦スクロール領域にしていたが、クライアント要望（2026-08-17）により
   表示件数・高さの制限は行わず全行そのまま縦に伸ばす方式に変更した。
   theadのsticky固定（画面スクロールに追随して見出しが常に見える）と
   1列目（チェックボックス）の左端固定は維持する。 */
.bulk-table-scroll thead th {
  position: sticky;
  top: 0;
  z-index: 2;
}

.bulk-table th,
.bulk-table td {
  white-space: nowrap;
}

/* 1列目（チェックボックス）は横スクロールしても左端に固定する。
   列数が多く右端の社内備考まで入力すると、どの行を選択中か見失うため。
   縦固定のtheadと交差するので、重なり順は 見出しの左上 > 見出し行 > 本文の1列目 > 本文 とする。 */
.bulk-table th:first-child,
.bulk-table td:first-child {
  position: sticky;
  left: 0;
  /* border-collapse: collapse のテーブルではsticky時に罫線が消えるため、
     区切り線はinsetのbox-shadowで引く（固定列の境界を示す役割も兼ねる）。 */
  box-shadow: inset -1px 0 0 var(--border-color);
}

.bulk-table tbody td:first-child {
  z-index: 1;
  /* 背景が透明だと下の行が透けるので、テーブルの地色で塗りつぶす。 */
  background-color: var(--card-bg);
}

/* thead th は上記で z-index:2。左上のセルは行にも列にも重なるのでさらに上に置く。 */
.bulk-table-scroll thead th:first-child {
  z-index: 3;
}

/* 固定列は自前の背景色を持つため、行ホバーの色（table.data-table tbody tr:hover）が
   そのままでは乗らない。同じ色を明示して行全体で色が揃うようにする。 */
.bulk-table tbody tr:hover td:first-child {
  background-color: #f8fafc;
}

/* 編集不可列（荷主〜請求単価）には背景色を付けない（クライアント確定・2026-08-06）。
   当初は薄いグレーで編集可否を区切っていたが「一覧の大半に色が入って読みづらい」との指摘。
   見出し行の色は table.data-table th の既定色のみ、本文は白のままとし、
   行の識別は既存の table.data-table tbody tr:hover のホバー色に任せる。
   編集できる列は入力欄が置かれているので、色分けが無くても判別できる。
   .bulk-readonly-col は「素のテキストで出す列」を示す意味付けとしてHTML側に残している。 */

/* 見出しの登録対象日。どの日付で登録されるかは事故に直結するため、
   見出しの中でも日付部分だけ一段大きく・緑で目立たせる。 */
.bulk-target-date {
  font-size: 17px;
  font-weight: 700;
  color: var(--primary-color);
}

/* 見出しに出す「この日は既に N件 登録済み」。
   行単位の「登録済」バッジは廃止したため（クライアント確定・2026-08-06）、
   二重登録の気づきはこの日単位の件数で担保する。 */
.bulk-day-count {
  margin-left: 12px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-muted);
}

/* テーブル内の入力欄はform-controlより一回り小さくして100行の縦スクロール時の圧迫感を抑える。 */
.bulk-table .bulk-input-sm {
  padding: 4px 8px;
  height: 30px;
  font-size: 12.5px;
}

.bulk-table select.bulk-input-sm {
  min-width: 130px;
}

.bulk-table input.bulk-payment,
.bulk-table input.bulk-quantity {
  width: 90px;
}

.bulk-table input.bulk-remarks {
  min-width: 160px;
}

/* =================================================================
   横スクロール一覧: 画面下端に常時表示する疑似スクロールバー（sticky-hscroll）
   クライアント要望対応（2026-08-17）。
   .table-responsive（overflow-x:auto の実スクロール領域）は今までどおり
   全行を縦にそのまま伸ばす（表示件数の制限や高さ上限は設けない）。
   その代わり、.table-responsive の直後（同じ .table-card 内）にこのバーを
   position:sticky; bottom:0 で挿入し、画面をどれだけ縦にスクロールしても
   常に画面下端にスクロールバーが見えるようにする。
   実装（同期・表示判定）は /js/sticky-hscroll.js 側。
   position:fixed ではなく sticky を使うのは、fixedだと他要素（アクションバー等）に
   被ってしまうため。sticky はバーが属する .table-card の高さ範囲でのみ画面下端に
   張り付き、表を過ぎればその場に流れて次の要素（ページングなど）と重ならない。
   ================================================================= */
.sticky-hscroll {
  position: sticky;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  background-color: var(--card-bg);
  border-top: 1px solid var(--border-color);
  z-index: 5;
}

/* 表が画面幅に収まりスクロール不要なときはJS側でこのクラスを付与して隠す */
.sticky-hscroll.is-hidden {
  display: none;
}

/* .table-card の overflow:hidden はスクロールコンテナを作るため、中の
   position:sticky が効かなくなり、バーが画面下端に張り付かず表の最下部に留まる
   （実ブラウザで再現確認済み）。overflow:clip は切り抜きは同じままスクロール
   コンテナを作らないので sticky が効く。バーを持つカードにだけ適用する
   （クラスは /js/sticky-hscroll.js が付与する）。 */
.table-card.has-sticky-hscroll {
  overflow: clip;
}

/* 実スクロール領域のネイティブ横スクロールバーを隠し、見えるバーをsticky側の1本に集約する。
   隠さないと表の最下部で本体側とsticky側の2本が並んで見えてしまう。
   この要素は overflow-x のみで縦スクロールは発生しないため、隠しても操作性は落ちない。 */
.table-responsive.has-sticky-hscroll {
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* 旧Edge/IE */
}

.table-responsive.has-sticky-hscroll::-webkit-scrollbar {
  height: 0;                      /* Chrome/Safari */
}

/* 中身は幅だけを持つダミー要素。JSが表の実幅(scrollWidth)と同じwidthを設定し、
   ブラウザ標準の横スクロールバーだけが見える状態にする。 */
.sticky-hscroll-inner {
  height: 1px;
}

/* 検索カードの期間指定（分析資料の集計単位切替・開始〜終了の並び・かんたん指定ボタン）。
   開始/終了を1行に収めて検索カードが縦に伸びないようにする。 */
.period-unit-switch {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 38px;
}

.period-unit-switch label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  cursor: pointer;
}

.period-range {
  display: flex;
  align-items: center;
  gap: 6px;
}

.period-range .form-control {
  flex: 1 1 auto;
  min-width: 0;
}

.period-range span {
  color: var(--text-muted);
  font-size: 13px;
}

.period-quick-buttons {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 38px;
}

/* 検索カードの幅を内容に合わせて詰めるレイアウト（分析資料）。
   既定の .search-grid は4等分の固定グリッドのため、幅の狭い項目（集計単位・かんたん指定）でも
   1/4の枠を取ってしまい、余白が空いたまま次の項目が2行目に折り返していた。
   横並びにして、狭い項目は必要な幅だけ、プルダウンだけ伸ばす。 */
.search-grid.search-grid-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px 20px;
}

.search-grid.search-grid-inline > .form-group {
  flex: 0 0 auto;
}

/* プルダウン（荷主・協力会社）だけ余りを分け合って伸ばす。 */
.search-grid.search-grid-inline > .form-group:has(> select) {
  flex: 1 1 200px;
  min-width: 180px;
}

/* 期間の開始〜終了は日付欄2つぶんの幅を確保する。 */
.search-grid.search-grid-inline .period-range .form-control {
  width: 165px;
  flex: 0 0 auto;
}

/* form-group内でチェックボックスと排他表示にしたい入力欄だけを包むためのラッパー
   （例: 請求管理の「請求年月」「期間指定 開始日」。「期間で検索」チェックはform-groupに
   残したまま、この中だけJSで出し入れする）。form-groupと同じ縦積みレイアウトにする。 */
.form-group-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ------------------------------------------------------------------
   キーワードで絞り込めるセレクトボックス（/js/searchable-select.js）。
   元の <select> は値の置き場所として残したまま非表示にし、入力欄と候補リストを重ねる。
   2026-08-29 クライアント依頼「積地・着地を入力でも絞り込めるようにしてほしい」。
   ------------------------------------------------------------------ */
.searchable-select {
  position: relative;
}

/* display:none にすると required の検証時にフォーカスできずエラーになるため、
   見えなくするだけで領域は保持しない形にする。 */
.searchable-select > select {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.searchable-select-input {
  /* 選択肢を開けることが分かるよう、セレクトボックスと同じ下向き三角を右端に描く。 */
  background-image: linear-gradient(45deg, transparent 50%, #64748b 50%),
                    linear-gradient(135deg, #64748b 50%, transparent 50%);
  background-position: calc(100% - 15px) center, calc(100% - 10px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 28px;
}

.searchable-select-list {
  position: absolute;
  z-index: 20;
  top: 100%;
  left: 0;
  right: 0;
  margin: 2px 0 0;
  padding: 4px 0;
  max-height: 240px;
  overflow-y: auto;
  list-style: none;
  background-color: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.12);
}

.searchable-select-item {
  padding: 6px 12px;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.searchable-select-item.is-active,
.searchable-select-item:hover {
  background-color: #eef2f7;
}

.searchable-select-item.is-selected {
  font-weight: 600;
}