/* ═══════════════════════════════════════════════════════
   タクろぐ！ — CSS v4 (Release)
═══════════════════════════════════════════════════════ */

/* ── RESET & CSS VARIABLES ─────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:        #ffffff;
  --bg2:       #f8f9fa;
  --bg3:       #f1f3f5;
  --border:    #e9ecef;
  --border2:   #dee2e6;
  --accent:    #e8a020;
  --accent2:   #c8861a;
  --blue:      #2b7de9;
  --green:     #20c070;
  --red:       #e03131;
  --text:      #1a1a2e;
  --text2:     #495057;
  --text3:     #868e96;
  --shadow:    0 1px 4px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.09);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.14);
  --radius:    16px;
  --radius-sm: 10px;
  --nav-h:     58px;
  --header-h:  50px;
  --font-ja:   'Noto Sans JP', sans-serif;
  --font-num:  'DM Sans', 'Noto Sans JP', sans-serif;
}
body.dark {
  --bg:        #0d0d16;
  --bg2:       #131320;
  --bg3:       #1a1a2c;
  --border:    #252538;
  --border2:   #2e2e48;
  --text:      #e8e8f5;
  --text2:     #9898b8;
  --text3:     #55557a;
  --shadow:    0 1px 4px rgba(0,0,0,0.35);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.45);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.55);
}
body.dark .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) saturate(0.6) brightness(0.82); }
body.dark .leaflet-container { background: #1a1a2c !important; }

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ja);
  font-size: 14px;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}

/* ── SCREENS ────────────────────────────────────────── */
.screen {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  display: none;
  flex-direction: column;
  /* iOS/Android セーフエリア */
  padding-top: env(safe-area-inset-top, 0px);
}
.screen.active { display: flex; }

/* ──────────────────────────────────────────────────────
   保存中オーバーレイ（完全ロック・最前面）
────────────────────────────────────────────────────── */
.saving-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  pointer-events: all;
  touch-action: none;
}
.saving-overlay.hidden {
  display: none;
  pointer-events: none;
}
.saving-overlay-card {
  background: var(--bg);
  border-radius: 22px;
  padding: 34px 28px 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 300px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.28);
  border: 1px solid var(--border);
}
.saving-spinner {
  width: 44px; height: 44px;
  border: 4px solid var(--border2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
  flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }

.saving-overlay-title {
  font-family: var(--font-num);
  font-size: 17px; font-weight: 800;
  color: var(--text);
  text-align: center;
  line-height: 1.3;
}
.saving-overlay-sub {
  font-size: 12px; color: var(--text3);
  text-align: center; line-height: 1.8;
  white-space: pre-line;
}
.saving-progress-bar {
  width: 100%; height: 5px;
  background: var(--border2);
  border-radius: 3px;
  overflow: hidden;
}
.saving-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  border-radius: 3px;
  transition: width 0.5s ease;
}
.saving-cancel-btn {
  background: none;
  border: 1.5px solid var(--border2);
  border-radius: 20px;
  padding: 6px 20px;
  font-family: var(--font-ja);
  font-size: 12px; font-weight: 700;
  color: var(--text3); cursor: pointer;
  transition: all 0.15s;
}
.saving-cancel-btn:hover { border-color: var(--red); color: var(--red); }

/* ── PWA BANNER ─────────────────────────────────────── */
#pwa-banner {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  color: #fff;
  padding: 10px 14px;
  font-size: 12.5px;
  line-height: 1.5;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex-shrink: 0;
  z-index: 100;
}
#pwa-banner.hidden { display: none; }
.pwa-banner-icon  { font-size: 22px; flex-shrink:0; margin-top:1px; }
.pwa-banner-text  { flex:1; }
.pwa-banner-title { font-weight:700; font-size:13px; margin-bottom:2px; }
.pwa-banner-sub   { color:#aab; font-size:11.5px; }
.pwa-banner-sub a { color:#7eb8f7; text-decoration:underline; }
.pwa-banner-close {
  background:none; border:none; color:#aab;
  font-size:20px; cursor:pointer; padding:0 2px; flex-shrink:0; line-height:1;
}

/* ── AUTH ───────────────────────────────────────────── */
.auth-bg {
  position:absolute; inset:0; z-index:0;
  background:linear-gradient(145deg,#fff9f0,#fff,#f0f7ff);
}
body.dark .auth-bg { background:linear-gradient(135deg,#0d0d16,#131320); }
.auth-container {
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center;
  justify-content:center;
  padding: max(24px, env(safe-area-inset-top, 24px)) 20px
           max(24px, env(safe-area-inset-bottom, 24px));
  min-height:100%;
  gap:0;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.auth-logo {
  text-align:center; margin-bottom:24px;
}
.app-icon {
  width:72px; height:72px; border-radius:18px;
  box-shadow:0 6px 24px rgba(232,160,32,0.28);
  margin-bottom:12px;
}
.auth-logo h1 {
  font-family:var(--font-num);
  font-size:28px; font-weight:800; letter-spacing:-0.5px;
  color:var(--text); margin-bottom:4px;
}
.auth-logo p { font-size:13px; color:var(--text3); }
.auth-card {
  background:var(--bg);
  border-radius:var(--radius);
  box-shadow:var(--shadow-md);
  width:100%; max-width:380px;
  padding:22px 20px;
  border:1px solid var(--border);
}
.auth-tabs {
  display:flex; gap:0; margin-bottom:20px;
  border-radius:10px; background:var(--bg3); padding:3px;
}
.auth-tab {
  flex:1; padding:8px; border:none; background:none;
  font-family:var(--font-ja); font-size:13px; font-weight:600;
  cursor:pointer; border-radius:8px; color:var(--text3); transition:all 0.18s;
}
.auth-tab.active {
  background:var(--bg); color:var(--text);
  box-shadow:0 1px 4px rgba(0,0,0,0.10);
}
.auth-error {
  background:#fff5f5; border:1px solid #fcc;
  border-radius:8px; padding:10px 12px;
  font-size:13px; color:var(--red); margin-bottom:14px;
}
body.dark .auth-error { background:#1a0a0a; border-color:#5a1a1a; }
.auth-error.hidden { display:none; }
.auth-form        { display:flex; flex-direction:column; gap:10px; }
.auth-form.hidden { display:none; }
.auth-input {
  width:100%; padding:12px 14px;
  border:1.5px solid var(--border2);
  border-radius:10px; background:var(--bg2); color:var(--text);
  font-family:var(--font-ja); font-size:14px;
  transition:border-color 0.15s; outline:none;
}
.auth-input:focus { border-color:var(--accent); }
.auth-btn {
  width:100%; padding:13px; border:none;
  background:var(--accent); color:#fff;
  font-family:var(--font-ja); font-size:15px; font-weight:700;
  border-radius:10px; cursor:pointer;
  transition:background 0.15s, transform 0.1s;
}
.auth-btn:hover   { background:var(--accent2); }
.auth-btn:active  { transform:scale(0.98); }
.auth-btn:disabled { opacity:0.4; cursor:default; }
.auth-footer-note {
  font-size:11px; color:var(--text3); text-align:center;
  margin-top:14px; line-height:1.7;
}
.auth-footer-note a      { color:var(--accent); }
.auth-footer-note strong { color:var(--red); }

/* ── HEADER ─────────────────────────────────────────── */
.app-header {
  height: calc(var(--header-h) + env(safe-area-inset-top, 0));
  padding-top: env(safe-area-inset-top, 0);
  display:flex; align-items:center; justify-content:space-between;
  padding-left:12px; padding-right:12px;
  background:var(--bg);
  border-bottom:1px solid var(--border);
  flex-shrink:0; z-index:10;
}
.header-left  { display:flex; align-items:center; gap:8px; }
.header-icon  { width:28px; height:28px; border-radius:7px; }
.header-right { display:flex; align-items:center; gap:4px; }
.header-user  {
  font-size:11px; color:var(--text3);
  max-width:64px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.header-logo-text {
  font-family:var(--font-num);
  font-size:16px; font-weight:900; letter-spacing:-0.5px;
  color:var(--text);
}
.header-btn {
  width:34px; height:34px; border:none; background:none;
  cursor:pointer; border-radius:8px; font-size:16px;
  display:flex; align-items:center; justify-content:center;
  transition:background 0.15s; color:var(--text2);
}
.header-btn:hover { background:var(--bg3); }

/* ── BOTTOM NAV ─────────────────────────────────────── */
.app-nav {
  display:flex;
  height: calc(var(--nav-h) + env(safe-area-inset-bottom, 0));
  padding-bottom: env(safe-area-inset-bottom, 0);
  border-top:1px solid var(--border);
  background:var(--bg);
  flex-shrink:0;
  position:fixed; bottom:0; left:0; right:0;
  z-index:20;
}
.nav-btn {
  flex:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:2px; border:none; background:none;
  cursor:pointer; font-family:var(--font-ja);
  color:var(--text3); transition:color 0.15s;
  padding:6px 2px;
}
.nav-btn.active { color:var(--accent); }
.nav-icon  { font-size:20px; line-height:1; }
.nav-label { font-size:9px; font-weight:600; letter-spacing:0.02em; }

/* ── MAIN LAYOUT ────────────────────────────────────── */
.app-main {
  flex:1;
  min-height:0; /* flex子要素のoverflow対策 */
  overflow:hidden;
  padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
  display:flex; flex-direction:column;
}

/* ── TAB PANELS ─────────────────────────────────────── */
.tab-panel {
  display:none; flex-direction:column;
  height:100%; min-height:0; overflow:hidden;
}
.tab-panel.active { display:flex; }
.panel-scroll {
  flex:1; min-height:0;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
}

/* ── PANEL HEADER ───────────────────────────────────── */
.panel-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px 10px;
  flex-shrink:0; background:var(--bg);
  border-bottom:1px solid var(--border);
}
.panel-header h2 {
  font-family:var(--font-num);
  font-size:18px; font-weight:800; letter-spacing:-0.3px;
}

/* ── BUTTONS ────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:5px;
  padding:8px 14px; border:none; border-radius:8px;
  font-family:var(--font-ja); font-size:13px; font-weight:700;
  cursor:pointer; transition:all 0.15s; white-space:nowrap;
  background:var(--bg3); color:var(--text2);
}
.btn:active         { transform:scale(0.97); }
.btn-accent         { background:var(--accent); color:#fff; }
.btn-accent:hover   { background:var(--accent2); }
.btn-danger         { background:var(--red); color:#fff; }
.btn-sm             { padding:6px 10px; font-size:12px; }
.btn-full           { width:100%; justify-content:center; padding:13px; font-size:15px; }

/* ── INPUT TAB ──────────────────────────────────────── */
.input-date-bar {
  display:flex; gap:8px; align-items:center;
  padding:10px 14px; background:var(--bg2);
  border-bottom:1px solid var(--border);
  flex-shrink:0; flex-wrap:wrap;
}
.date-input {
  padding:8px 10px; border:1.5px solid var(--border2);
  border-radius:8px; background:var(--bg); color:var(--text);
  font-family:var(--font-ja); font-size:14px; flex:1;
  min-width:120px; outline:none;
}
.date-input:focus { border-color:var(--accent); }

.time-row {
  display:flex; gap:8px; align-items:center;
  padding:8px 14px; background:var(--bg2);
  border-bottom:1px solid var(--border);
  flex-shrink:0; flex-wrap:wrap;
}
.time-row-label {
  font-size:11px; font-weight:700; color:var(--text3);
  letter-spacing:0.05em; white-space:nowrap;
}
.time-input {
  padding:7px 10px; border:1.5px solid var(--border2);
  border-radius:8px; background:var(--bg); color:var(--text);
  font-family:var(--font-ja); font-size:13px; outline:none; width:100px;
}
.time-input:focus { border-color:var(--accent); }

.shift-banner, .edit-mode-banner {
  padding:8px 14px; font-size:12px; font-weight:600; flex-shrink:0;
}
.shift-banner { background:#e8f4ff; color:#1a5fa8; border-bottom:1px solid #c5dff5; }
body.dark .shift-banner { background:#0a1a2e; color:#7eb8f7; border-color:#1a3050; }
.shift-banner.hidden { display:none; }
.edit-mode-banner {
  display:flex; align-items:center; justify-content:space-between;
  background:#fff8e6; color:#7a5500; border-bottom:1.5px solid #f0b429;
}
body.dark .edit-mode-banner { background:#1e1400; color:#f0b429; border-color:#c8861a; }
.edit-mode-banner.hidden { display:none; }
.edit-cancel-btn {
  background:none; border:1.5px solid currentColor;
  border-radius:20px; padding:3px 10px; font-size:11px;
  font-weight:700; cursor:pointer; color:inherit;
}

.input-mode-bar {
  display:flex; gap:6px; padding:10px 14px;
  background:var(--bg); border-bottom:1px solid var(--border); flex-shrink:0;
}
.mode-btn {
  flex:1; padding:9px; border:1.5px solid var(--border2);
  border-radius:8px; background:var(--bg2); color:var(--text3);
  font-family:var(--font-ja); font-size:13px; font-weight:600;
  cursor:pointer; transition:all 0.15s;
}
.mode-btn.active { border-color:var(--accent); color:var(--accent); background:#fff8ee; }
body.dark .mode-btn.active { background:#1e1200; }

.upload-zone {
  margin:12px 14px; border:2px dashed var(--border2);
  border-radius:var(--radius); padding:28px 16px;
  text-align:center; cursor:pointer; transition:all 0.2s; background:var(--bg2);
}
.upload-zone.drag-over { border-color:var(--accent); background:#fff8ee; }
.upload-zone.hidden { display:none; }
.upload-icon { font-size:36px; margin-bottom:8px; }
.upload-text { font-size:14px; font-weight:700; color:var(--text2); margin-bottom:4px; }
.upload-sub  { font-size:12px; color:var(--text3); }

/* ── TRIP TABLE ─────────────────────────────────────── */
.table-section { flex:1; display:flex; flex-direction:column; overflow:hidden; }
.table-section.hidden { display:none; }
.table-toolbar {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px; background:var(--bg2);
  border-bottom:1px solid var(--border); flex-shrink:0; gap:8px;
}
.table-toolbar h3   { font-size:13px; font-weight:700; color:var(--text2); }
.toolbar-actions    { display:flex; gap:6px; flex-shrink:0; }
.table-scroll       { flex:1; overflow:auto; -webkit-overflow-scrolling:touch; }
.trip-table {
  /* 常に1行で横スクロール */
  width:max-content; min-width:100%;
  border-collapse:collapse; font-size:12px;
}
.trip-table th {
  padding:7px 8px; background:var(--bg3);
  border-bottom:2px solid var(--border2);
  color:var(--text3); font-size:10px; font-weight:700;
  text-align:center; white-space:nowrap;
  position:sticky; top:0; z-index:1;
}
.trip-table td {
  padding:4px 6px; border-bottom:1px solid var(--border);
  vertical-align:middle; white-space:nowrap;
}
.trip-table tr:last-child td { border-bottom:none; }
.col-seq { width:28px; }
.col-del { width:30px; }
.td-seq {
  display:flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:50%;
  background:var(--bg3); font-size:10px; font-weight:700;
  color:var(--text3); margin:0 auto;
}
.td-input, .td-select {
  padding:5px 6px; border:1px solid var(--border2);
  border-radius:6px; background:var(--bg); color:var(--text);
  font-family:var(--font-ja); font-size:12px; outline:none;
}
.td-input:focus, .td-select:focus { border-color:var(--accent); }
.td-delete {
  width:24px; height:24px; border:none; background:none;
  color:var(--text3); cursor:pointer; border-radius:50%;
  font-size:11px; transition:all 0.15s;
  display:flex; align-items:center; justify-content:center; margin:0 auto;
}
.td-delete:hover { background:#fee; color:var(--red); }

.trip-summary {
  display:flex; flex-wrap:wrap; gap:6px;
  padding:10px 14px; background:var(--bg);
  border-top:1px solid var(--border); flex-shrink:0;
}
.summary-item {
  display:flex; flex-direction:column; align-items:center;
  background:var(--bg2); border-radius:8px;
  padding:6px 10px; min-width:68px; flex:1;
}
.summary-item.highlight { background:#fff8ee; border:1px solid #f0b429; }
body.dark .summary-item.highlight { background:#1e1200; }
.summary-label { font-size:9px; color:var(--text3); font-weight:600; margin-bottom:2px; }
.summary-value {
  font-family:var(--font-num); font-size:15px; font-weight:800;
  color:var(--accent); letter-spacing:-0.3px;
}

/* ── HISTORY ────────────────────────────────────────── */
.history-list {
  flex:1; min-height:0;
  overflow-y:auto; padding:10px 14px;
  gap:8px; display:flex; flex-direction:column;
  -webkit-overflow-scrolling:touch;
}
.loading-msg { text-align:center; padding:40px 20px; color:var(--text3); font-size:14px; line-height:2; }
.history-card {
  background:var(--bg); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:11px 14px;
  cursor:pointer; transition:all 0.15s;
}
.history-card:hover { border-color:var(--accent); transform:translateY(-1px); box-shadow:var(--shadow-md); }
.history-card-header {
  display:flex; justify-content:space-between; align-items:center; margin-bottom:5px;
}
.history-date  { font-size:13px; font-weight:700; }
.history-total { font-family:var(--font-num); font-size:17px; font-weight:800; color:var(--accent); }
.history-card-footer {
  display:flex; gap:6px; align-items:center; flex-wrap:nowrap;
  overflow-x:auto; -webkit-overflow-scrolling:touch;
}
.history-card-footer::-webkit-scrollbar { display:none; }
.history-stat-pill {
  font-size:11px; color:var(--text2); white-space:nowrap;
  background:var(--bg2); border:1px solid var(--border);
  border-radius:20px; padding:3px 9px; flex-shrink:0;
  font-weight:600;
}
.history-stat-time {
  font-size:11px; color:var(--text3); white-space:nowrap;
  flex-shrink:0; font-weight:500;
}
/* 後方互換 */
.history-stat { font-size:11px; color:var(--text3); }

/* ── CALENDAR ───────────────────────────────────────── */
.cal-weekdays { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; padding:8px 8px 4px; }
.cal-weekday  { text-align:center; font-size:10px; font-weight:700; color:var(--text3); }
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; padding:0 8px 8px; }
.cal-cell {
  min-height:52px; border-radius:8px; padding:4px 3px;
  cursor:pointer; background:var(--bg2); transition:all 0.15s;
  display:flex; flex-direction:column; align-items:center;
}
.cal-cell:not(.empty):hover { transform:scale(1.03); box-shadow:var(--shadow); }
.cal-cell.empty    { background:transparent; pointer-events:none; }
.cal-cell.today    { border:2px solid var(--accent); }
.cal-cell.has-data { background:var(--bg); border:1px solid var(--border2); }
.cal-cell.sunday .cal-day   { color:var(--red); }
.cal-cell.saturday .cal-day { color:var(--blue); }
.cal-day   { font-size:11px; font-weight:700; }
.cal-fare  { font-family:var(--font-num); font-size:9px; font-weight:800; color:var(--accent); margin-top:2px; }
.cal-rides { font-size:9px; color:var(--text3); }
.cal-month-summary {
  display:flex; gap:8px; flex-wrap:wrap;
  padding:10px 12px; background:var(--bg2);
  border-top:1px solid var(--border); flex-shrink:0;
}
.cal-sum-item  { flex:1; min-width:70px; text-align:center; }
.cal-sum-label { font-size:10px; color:var(--text3); font-weight:600; }
.cal-sum-value { font-family:var(--font-num); font-size:15px; font-weight:800; color:var(--accent); }
.no-data-sm    { font-size:12px; color:var(--text3); padding:6px; }

/* ── ANALYTICS ──────────────────────────────────────── */
.kpi-grid {
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:8px; padding:12px 12px 0;
}
.kpi-card {
  background:var(--bg); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:12px 13px;
}
.kpi-card.highlight { border-color:var(--accent); background:#fff8ee; }
body.dark .kpi-card.highlight { background:#1e1200; }
.kpi-card.best  { border-color:#2ecc71; }
.kpi-card.worst { border-color:var(--red); }
.kpi-label { font-size:10px; color:var(--text3); font-weight:700; margin-bottom:4px; }
.kpi-value { font-family:var(--font-num); font-size:20px; font-weight:800; letter-spacing:-0.5px; color:var(--text); line-height:1.1; }
.kpi-value.accent { color:var(--accent); }
.kpi-sub   { font-size:10px; color:var(--text3); margin-top:3px; }

/* カスタム期間 */
.analytics-custom-range {
  background:var(--bg2); border-bottom:1px solid var(--border);
  padding:8px 14px; flex-shrink:0;
}
.analytics-custom-range.hidden { display:none; }
.custom-range-inner {
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
}
.custom-range-label {
  font-size:11px; font-weight:700; color:var(--text3); white-space:nowrap;
}

/* 実車率 */
#jissya-section {
  margin:10px 12px 0;
  background:var(--bg); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:14px;
}
#jissya-section.hidden { display:none; }
.jissya-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.jissya-title  { font-size:12px; font-weight:700; color:var(--text2); }
#jissya-rate-value {
  font-family:var(--font-num); font-size:28px; font-weight:900;
  color:var(--accent); letter-spacing:-1px;
}
.jissya-bar {
  height:12px; border-radius:6px; background:var(--bg3);
  overflow:hidden; display:flex; margin-bottom:10px;
}
#jissya-bar-ride  { background:var(--accent); height:100%; border-radius:6px 0 0 6px; transition:width 0.5s; }
#jissya-bar-empty { background:var(--border2); height:100%; transition:width 0.5s; }
.jissya-stats { display:flex; gap:8px; flex-wrap:wrap; }
.jissya-stat {
  display:flex; justify-content:space-between; align-items:center;
  gap:8px; flex:1; min-width:130px; font-size:11px; color:var(--text3);
}
.jissya-stat span:last-child { font-weight:700; color:var(--text2); }
.jissya-stat.ride  span:last-child { color:var(--red); }
.jissya-stat.empty span:last-child { color:var(--blue); }

/* グラフ */
.charts-grid { padding:10px 12px 12px; display:flex; flex-direction:column; gap:10px; }
.chart-card {
  background:var(--bg); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:12px;
}
.chart-card h4 { font-size:12px; font-weight:700; color:var(--text2); margin-bottom:10px; }
.chart-card canvas      { max-height:180px; }
.chart-card.tall canvas { max-height:220px; }
.chart-card.hidden      { display:none; }
#chart-daily-status-wrap.hidden { display:none; }

.range-select {
  padding:6px 8px; border:1.5px solid var(--border2);
  border-radius:8px; background:var(--bg2); color:var(--text);
  font-family:var(--font-ja); font-size:12px; font-weight:600; outline:none;
}
.no-data-msg { text-align:center; padding:40px 20px; color:var(--text3); font-size:14px; line-height:2; }
.no-data-msg.hidden { display:none; }

/* グラフ凡例ドット */
.legend-dot { display:inline-block; width:9px; height:9px; border-radius:50%; margin:0 2px 0 5px; vertical-align:middle; }
.legend-dot.ride  { background:rgba(224,49,49,0.85); }
.legend-dot.empty { background:rgba(43,125,233,0.75); }

/* ── MAP ────────────────────────────────────────────── */
.map-filter-group {
  display:flex; gap:4px; flex-wrap:wrap;
  padding:8px 12px; background:var(--bg2);
  border-bottom:1px solid var(--border); flex-shrink:0; align-items:center;
}
.map-filter-label { font-size:10px; font-weight:700; color:var(--text3); }
.fare-filter-btn {
  padding:4px 8px; border:1px solid var(--border2);
  border-radius:20px; background:var(--bg); color:var(--text3);
  font-size:10px; font-weight:600; cursor:pointer;
  transition:all 0.15s; font-family:var(--font-ja);
}
.fare-filter-btn.active { background:var(--accent); color:#fff; border-color:var(--accent); }
.map-legend {
  display:flex; gap:8px; flex-wrap:wrap;
  padding:6px 12px; background:var(--bg);
  border-bottom:1px solid var(--border); flex-shrink:0;
}
.legend-item { display:flex; align-items:center; gap:4px; font-size:10px; color:var(--text3); }
.dot { width:10px; height:10px; border-radius:50%; display:inline-block; }
.dot-s    { background:#4a9eff; }
.dot-m    { background:#2ecc71; }
.dot-l    { background:#f0b429; }
.dot-xl   { background:#e67e22; }
.dot-xxl  { background:#e74c3c; }
.dot-xxxl { background:#9b59b6; }
.map-container { flex:1; }
.map-stats {
  padding:6px 12px; font-size:11px; color:var(--text3);
  background:var(--bg2); border-top:1px solid var(--border); flex-shrink:0;
}

/* ── MODALS ─────────────────────────────────────────── */
.modal {
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:flex-end;
}
.modal.hidden { display:none; }
.modal-backdrop {
  position:absolute; inset:0;
  background:rgba(0,0,0,0.45);
  backdrop-filter:blur(2px);
}
.modal-card {
  position:relative; z-index:1;
  background:var(--bg); border-radius:20px 20px 0 0;
  width:100%; max-height:92vh;
  display:flex; flex-direction:column;
  box-shadow:0 -4px 32px rgba(0,0,0,0.18);
  animation:slideUp 0.28s ease-out;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.modal-card.center-modal {
  border-radius:20px; margin:auto;
  max-width:480px; max-height:92vh;
  padding-bottom:0;
}
@keyframes slideUp {
  from { transform:translateY(40px); opacity:0; }
  to   { transform:translateY(0);    opacity:1; }
}
.modal-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 18px 12px;
  border-bottom:1px solid var(--border); flex-shrink:0;
}
.modal-header h3 { font-family:var(--font-num); font-size:16px; font-weight:800; }
.modal-close {
  width:30px; height:30px; border:none; background:var(--bg3);
  border-radius:50%; cursor:pointer; font-size:14px;
  display:flex; align-items:center; justify-content:center; color:var(--text3);
}
.modal-body   { flex:1; overflow-y:auto; padding:14px 18px; }
.modal-footer { padding:12px 18px; border-top:1px solid var(--border); flex-shrink:0; }

/* ── DETAIL MODAL ───────────────────────────────────── */
.modal-card--detail .modal-body { padding:12px 14px; }

.detail-kpis {
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:8px; margin-bottom:14px;
}
.detail-kpi {
  background:var(--bg2); border-radius:8px; padding:8px 10px;
}
.detail-kpi.highlight { background:#fff8ee; border:1px solid #f0b429; }
body.dark .detail-kpi.highlight { background:#1e1200; }

/* 詳細テーブル：完全横スクロール・1行表示 */
.detail-table-scroll {
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  margin-bottom:14px;
  /* スクロールバーを常に表示してわかりやすく */
}
.detail-table-scroll::-webkit-scrollbar { height:4px; }
.detail-table-scroll::-webkit-scrollbar-track { background:var(--bg3); }
.detail-table-scroll::-webkit-scrollbar-thumb { background:var(--border2); border-radius:2px; }
.detail-table {
  width:max-content;
  min-width:100%;
  border-collapse:collapse;
  font-size:12px;
}
.detail-table thead { position:sticky; top:0; z-index:1; }
.detail-table th {
  padding:8px 10px; background:var(--bg3);
  font-weight:700; color:var(--text3); font-size:10px;
  white-space:nowrap; border-bottom:2px solid var(--border2);
  text-align:left;
}
.detail-table td {
  padding:8px 10px;
  border-bottom:1px solid var(--border);
  white-space:nowrap;
  font-size:12px;
  line-height:1.5;
  vertical-align:middle;
}
.detail-table tr:last-child td { border-bottom:none; }
.detail-table tr:nth-child(even) td { background:var(--bg2); }
.detail-table .th-seq,
.detail-table .seq-cell { width:30px; text-align:center; }
/* 住所セル：省略せず最大240pxで表示 */
.addr-cell {
  max-width:240px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--text2);
  font-size:11px;
}
/* tooltip付きで全文確認可能 */
.addr-cell[title]:hover { overflow:visible; white-space:normal; }
.accent-cell { color:var(--accent); font-weight:700; font-family:var(--font-num); }
.detail-edit-row { margin-top:2px; }

/* ── SETTINGS ───────────────────────────────────────── */
.setting-section {
  padding-bottom:18px; margin-bottom:18px;
  border-bottom:1px solid var(--border);
}
.setting-section:last-child { border-bottom:none; margin-bottom:0; padding-bottom:0; }
.setting-label {
  display:block; font-size:13px; font-weight:700;
  color:var(--text2); margin-bottom:8px;
}
.setting-hint { font-size:11px; color:var(--text3); line-height:1.7; margin-top:5px; }
.setting-hint a { color:var(--accent); }
.api-key-row { display:flex; gap:8px; }
.radio-group { display:flex; flex-direction:column; gap:8px; }
.radio-label { display:flex; align-items:center; gap:8px; font-size:13px; cursor:pointer; color:var(--text2); }
.col-toggle-list { display:flex; flex-direction:column; gap:10px; }
.col-toggle-item {
  display:flex; align-items:flex-start; gap:10px; cursor:pointer;
  padding:8px 10px; background:var(--bg2); border-radius:8px;
}
.col-toggle-item input  { margin-top:2px; accent-color:var(--accent); }
.col-toggle-name  { font-size:13px; font-weight:600; color:var(--text2); }
.col-toggle-desc  { font-size:11px; color:var(--text3); margin-top:1px; }
.required-badge   { color:var(--accent); font-size:10px; }
.setting-row      { display:flex; align-items:center; gap:6px; margin-top:8px; flex-wrap:wrap; }
.setting-hint-inline { font-size:11px; color:var(--text3); }
.time-input-sm {
  padding:6px 8px; border:1.5px solid var(--border2);
  border-radius:7px; background:var(--bg); color:var(--text);
  font-size:13px; outline:none;
}
.time-input-sm:focus { border-color:var(--accent); }

/* ── TERMS ──────────────────────────────────────────── */
.terms-text { font-size:12px; line-height:1.85; color:var(--text2); }
.terms-text h4 { color:var(--text); margin-bottom:8px; margin-top:14px; font-size:13px; font-weight:700; }
.terms-text p  { margin-bottom:10px; }

/* ── TOAST ──────────────────────────────────────────── */
#toast {
  position:fixed;
  bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0) + 12px);
  left:50%;
  transform:translateX(-50%) translateY(16px);
  background:var(--bg); border:1px solid var(--border);
  border-radius:50px; padding:10px 20px; font-size:13px;
  z-index:8000; pointer-events:none; opacity:0;
  transition:all 0.25s; box-shadow:var(--shadow-md);
  color:var(--text); white-space:nowrap; max-width:88vw;
}
#toast.show    { opacity:1; transform:translateX(-50%) translateY(0); }
#toast.success { border-color:var(--green); color:var(--green); }
#toast.error   { border-color:var(--red); color:var(--red); }

/* ── LEAFLET ────────────────────────────────────────── */
.leaflet-container { background:#e8eaf0 !important; }
.leaflet-popup-content-wrapper {
  background:var(--bg); border:1px solid var(--border);
  border-radius:var(--radius-sm); box-shadow:var(--shadow-md);
}
.leaflet-popup-content { color:var(--text); font-family:var(--font-ja); font-size:13px; margin:11px; }
.leaflet-popup-tip { background:var(--bg); }
.leaflet-popup-close-button { color:var(--text3) !important; }

/* ──────────────────────────────────────────────────────
   タイムライン
   ・赤=実車・青=空車の2色のみ
   ・出庫〜帰庫の全体を空車で塗り、実車区間を上から重ねる
   ・時刻目盛りは重ならないよう下部に配置
────────────────────────────────────────────────────── */
.timeline-wrap {
  margin:0 0 16px;
  background:var(--bg2);
  border-radius:var(--radius-sm);
  border:1px solid var(--border);
  overflow:hidden;
  padding:12px 14px 16px;
}

/* ヘッダー行（凡例 + 時間範囲） */
.tl-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
  flex-wrap:wrap;
  gap:6px;
}
.tl-legends {
  display:flex;
  align-items:center;
  gap:14px;
}
.tl-legend {
  display:flex;
  align-items:center;
  gap:5px;
  font-size:12px;
  font-weight:700;
  color:var(--text2);
}
.tl-dot {
  width:12px; height:12px;
  border-radius:3px;
  display:inline-block;
  flex-shrink:0;
}
.tl-dot-ride  { background:rgba(220,50,50,0.90); }
.tl-dot-empty { background:rgba(43,125,233,0.75); }
.tl-range-label {
  font-size:11px;
  color:var(--text3);
  font-weight:600;
  text-align:right;
}

/* バーとティックのラッパー */
.tl-track-wrap {
  position:relative;
}

/* バー本体 */
.tl-track {
  position:relative;
  height:28px;
  background:var(--bg3);
  border-radius:6px;
  overflow:hidden;
}

/* 各セグメント */
.tl-seg {
  position:absolute;
  top:0; height:100%;
  min-width:2px;
  cursor:default;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  transition:filter 0.15s;
}
.tl-seg:hover { filter:brightness(1.12); z-index:2; }

.tl-empty {
  background:rgba(43,125,233,0.55);
  border-radius:0;
}
.tl-ride {
  background:rgba(220,50,50,0.90);
  z-index:1;
  border-radius:0;
}
.tl-fare {
  font-family:var(--font-num);
  font-size:9px; font-weight:800; color:#fff;
  white-space:nowrap; overflow:hidden; text-overflow:clip;
  pointer-events:none; padding:0 3px;
  text-shadow:0 1px 2px rgba(0,0,0,0.4);
}

/* 時刻目盛り：重ならないよう overflow:hidden */
.tl-ticks {
  position:relative;
  height:20px;
  margin-top:4px;
  overflow:hidden;
}
.tl-tick {
  position:absolute;
  top:0;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
}
.tl-tick::before {
  content:''; display:block; width:1px; height:4px;
  background:var(--border2);
}
.tl-tick span {
  font-size:10px;
  font-family:var(--font-num);
  font-weight:600;
  color:var(--text3);
  white-space:nowrap;
  margin-top:2px;
  line-height:1;
}

/* ──────────────────────────────────────────────────────
   スマホ最適化（全体のフォント・スペース）
────────────────────────────────────────────────────── */
@media (max-width: 390px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); gap:6px; padding:8px 10px 0; }
  .kpi-value { font-size:17px; }
  .history-date { font-size:12px; }
  .history-total { font-size:15px; }
  .cal-fare { font-size:8px; }
  .tl-fare { font-size:8px; }
}

/* ──────────────────────────────────────────────────────
   タブレット以上（≥ 600px）
────────────────────────────────────────────────────── */
@media (min-width: 600px) {
  .kpi-grid { grid-template-columns: repeat(3, 1fr); }
  .auth-container { padding: 40px 20px; }
  .auth-card { max-width: 420px; }
  .history-card { padding: 14px 18px; }
  .detail-table td { font-size: 13px; }
}