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

:root {
  --bg-color: #030420; /* Very dark blue */
  --row-alt-color: #0d1a45; /* Slightly lighter blue for odd rows */
  --text-primary: #ffffff;
  --text-yellow: #feca00;
  --header-bg: #000000;
  --header-border: #00a859; /* Green border */
  --icon-bg: #00e500;
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

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

body {
  background-color: transparent;
  color: var(--text-primary);
  font-family: var(--font-family);
  overflow: hidden;
  user-select: none; /* Prevents selection to feel more like an app */
}

.board-container {
  background-color: var(--bg-color);
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-app-region: drag; /* Allows dragging the frameless window */
  border-radius: 8px; /* Slight rounding for floating desktop widget feel */
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
}

.header {
  display: flex;
  align-items: center;
  padding: 15px 20px;
  background-color: var(--header-bg);
}

.header-icon {
  width: 48px;
  height: 40px;
  background-color: var(--icon-bg);
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 20px;
}

.header-icon svg {
  width: 32px;
  height: 32px;
  color: black;
}

.header-text {
  display: flex;
  align-items: baseline;
  gap: 15px;
}

.header-text .en {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 1px;
}

.header-text .ja {
  font-size: 24px;
  font-weight: 600;
}

.settings-menu {
  margin-left: auto; /* Push to right */
  display: flex;
  align-items: center;
  gap: 10px;
  -webkit-app-region: no-drag; /* Allow clicking */
}

#airport-select, #filter-select, #tz-select {
  background-color: #1a1b3a;
  color: white;
  border: 1px solid #3a3b5a;
  border-radius: 4px;
  padding: 5px 10px;
  font-family: var(--font-family);
  font-size: 14px;
  outline: none;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0,0,0,0.5);
  transition: all 0.2s;
}

#airport-select:hover, #filter-select:hover, #tz-select:hover {
  background-color: #2a2b4a;
  border-color: var(--icon-bg);
}

.settings-icon {
  width: 24px;
  height: 24px;
  color: #888;
  cursor: pointer;
  transition: color 0.2s, transform 0.2s;
}

.settings-icon:hover {
  color: white;
  transform: rotate(45deg);
}

.table-header {
  display: flex;
  padding: 8px 20px;
  background-color: var(--header-bg);
  font-size: 11px;
  font-weight: 600;
  color: #cccccc;
}

.table-header span {
  font-size: 10px;
  color: #aaaaaa;
}

.table-border {
  height: 4px;
  background-color: var(--header-border);
}

.flight-list {
  flex: 1;
  overflow-y: auto; /* Enable vertical scroll */
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  -webkit-app-region: no-drag; /* Allow scrolling and clicking inside the list */
}

/* Custom Scrollbar for premium feel */
.flight-list::-webkit-scrollbar {
  width: 8px;
}
.flight-list::-webkit-scrollbar-track {
  background: var(--bg-color);
}
.flight-list::-webkit-scrollbar-thumb {
  background: #3a3b5a;
  border-radius: 4px;
}
.flight-list::-webkit-scrollbar-thumb:hover {
  background: #4a4b6a;
}

.flight-row {
  display: flex;
  align-items: center;
  padding: 10px 20px;
  font-size: 18px;
  font-weight: 600;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  animation: fadeIn 0.5s ease-out;
}

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

.flight-row:nth-child(even) {
  background-color: var(--row-alt-color);
}

/* Columns */
.col-schedule { width: 12%; text-align: left; }
.col-estimated { width: 12%; text-align: left; }
.col-destination { width: 26%; display: flex; align-items: baseline; gap: 10px; }
.col-flight { width: 35%; display: flex; align-items: center; gap: 10px; }
.col-terminal { width: 8%; text-align: center; }
.col-gate { width: 7%; text-align: right; }

.schedule-time {
  position: relative;
  padding-left: 15px;
}

/* Yellow dot for changed flights */
.has-changed .schedule-time::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  background-color: var(--text-yellow);
  border-radius: 50%;
}

.estimated-time {
  color: var(--text-yellow);
}

.dest-main {
  font-size: 20px;
}

.dest-sub {
  font-size: 14px;
  color: #bbbbbb;
}

.flight-info-container {
  display: flex;
  gap: 15px;
}

.flight-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.airline-logo {
  width: 45px;
  height: 25px;
  object-fit: contain;
  background-color: white;
  border-radius: 3px;
  padding: 2px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.flight-number, .flight-link {
  color: #ffffff;
  text-decoration: none;
  font-family: monospace;
  font-size: 18px;
  letter-spacing: 1px;
}

/* ===== Web版で追加した部分 ===== */
body { background-color: #000; }            /* Electronの透過背景をやめる */
.header { flex-wrap: wrap; gap: 10px; }
.settings-menu { flex-wrap: wrap; justify-content: flex-end; }

/* 出発/到着タブ */
.tabs { display: flex; border: 1px solid #3a3b5a; border-radius: 4px; overflow: hidden; }
.tab {
  background-color: #1a1b3a; color: #aaa; border: none; padding: 5px 14px;
  font-family: var(--font-family); font-size: 14px; cursor: pointer; transition: all 0.2s;
}
.tab:hover { background-color: #2a2b4a; color: #fff; }
.tab.active { background-color: var(--icon-bg); color: #000; font-weight: 700; }

/* 到着タブのときは飛行機アイコンを着陸向きに傾ける */
.header-icon .plane { transform-box: fill-box; transform-origin: center; transition: transform 0.3s; }
.header-icon.arrivals .plane { transform: rotate(40deg); }

/* 下部ステータスバー */
.statusbar {
  display: flex; justify-content: space-between; gap: 20px;
  padding: 6px 20px; font-size: 12px; color: #888;
  background-color: var(--header-bg); border-top: 1px solid rgba(255,255,255,0.1);
}

/* 定期的な再描画ではフェードインを再生しない(ちらつき防止) */
.flight-list.no-anim .flight-row { animation: none; }
.flight-row.message { justify-content: center; color: #888; }

/* ヘッダーの現在日時 (空港の現地時刻) */
.header-text .clock { font-size: 18px; font-weight: 600; color: #cccccc; margin-left: 20px; }
.statusbar { justify-content: flex-end; }

/* ===== 備考欄と状態の色 (遅延=黄 / 早発・早着=黄緑 / 欠航=黄) ===== */
:root { --text-lime: #a3e635; }   /* 黄緑 */

/* 備考列を足した分、各列の幅を調整 (合計100%) */
.col-schedule { width: 10%; }
.col-estimated { width: 10%; }
.col-destination { width: 22%; }
.col-flight { width: 30%; }
.col-terminal { width: 8%; }
.col-gate { width: 7%; }
.col-remarks { width: 13%; text-align: left; padding-left: 20px; }

/* 状態ごとの強調色。●・変更時刻・備考の文字がこの色になる */
.flight-row.status-delayed  { --accent: var(--text-yellow); }
.flight-row.status-canceled { --accent: var(--text-yellow); }
.flight-row.status-early    { --accent: var(--text-lime); }
.has-changed .schedule-time::before { background-color: var(--accent, var(--text-yellow)); }
.estimated-time { color: var(--accent, var(--text-yellow)); }
.remarks-text { color: var(--accent); font-size: 16px; }