/* style.css - MTR Next Train Edition - With Official Line Colors */
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&family=Google+Sans+Text:wght@400;500;700&family=Google+Sans:wght@400;500;700&family=Google+Sans+Display:wght@400;700&display=swap");
/*
  NOTE: The above @import for Google Sans, Google Sans Display, and Google Sans Text
  is illustrative. These specific fonts are NOT available on Google Fonts for general web use.
  You would need to use @font-face if you have the font files.
  Roboto is included as a reliable fallback.
*/

:root {
  /* Accent Color - Google Blue */
  --primary-color: #4285f4;
  --primary-color-dark-hover: #1a73e8;
  --primary-color-light-focus: color-mix(
    in srgb,
    var(--primary-color) 15%,
    transparent
  );
  --primary-color-dark-focus: color-mix(
    in srgb,
    var(--primary-color) 25%,
    #000000a0
  );

  --kmb-red: #d71920; /* Retained from original, used for H1 */

  /* Font Families */
  --font-family-display: "Google Sans Display", "Roboto", sans-serif;
  --font-family-sans: "Google Sans", "Roboto", sans-serif;
  --font-family-text: "Google Sans Text", "Roboto", sans-serif;

  /* Light Mode Variables */
  --background-color-light: #fdfdfe;
  --surface-color-light: #ffffff;
  --on-surface-color-light: #1f1f1f;
  --on-surface-variant-color-light: #444746;
  --outline-color-light: #c4c7c5;
  --table-row-hover-light: color-mix(
    in srgb,
    var(--primary-color) 8%,
    transparent
  );
  --legend-bg-light: #f1f3f4;
  --shadow-color-light: rgba(0, 0, 0, 0.08);
  --shadow-color-strong-light: rgba(0, 0, 0, 0.12);

  /* Dark Mode Variables */
  --background-color-dark: #1a1b1e;
  --surface-color-dark: #28292c;
  --on-surface-color-dark: #e3e3e3;
  --on-surface-variant-color-dark: #9aa0a6;
  --outline-color-dark: #4a4a4a;
  --table-row-hover-dark: color-mix(
    in srgb,
    var(--primary-color) 15%,
    var(--surface-color-dark)
  );
  --legend-bg-dark: #202124;
  --shadow-color-dark: rgba(0, 0, 0, 0.3);
  --shadow-color-strong-dark: rgba(0, 0, 0, 0.5);

  /* Status Colors */
  --success-bg: #e6f4ea;
  --success-text: #1e8e3e;
  --success-border: #a8dab5;
  --info-bg: #e8f0fe;
  --info-text: #1967d2;
  --info-border: #a9c7fb;
  --error-bg: #fce8e6;
  --error-text: #c5221f;
  --error-border: #f7b9b7;
  --success-bg-dark: #1e3a26;
  --success-text-dark: #81c995;
  --success-border-dark: #345b3f;
  --info-bg-dark: #202c41;
  --info-text-dark: #89b4f8;
  --info-border-dark: #364c75;
  --error-bg-dark: #3c2827;
  --error-text-dark: #f28b82;
  --error-border-dark: #6d3c3a;

  --border-radius-small: 6px;
  --border-radius-medium: 12px;
  --border-radius-large: 18px;
  --border-radius-pill: 999px;

  --animation-duration: 0.25s;
  --animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

  /* Generic Route/Tag Colors */
  --route-white-text: #ffffff;
  --route-normal-text-light: var(--on-surface-color-light);
  --route-normal-bg-light: #e8eaed;
  --route-normal-text-dark: var(--on-surface-color-dark);
  --route-normal-bg-dark: #3c4043;
  --route-tag-base-font-size: 0.875em;

  /* Default to light mode variables */
  --background-color: var(--background-color-light);
  --surface-color: var(--surface-color-light);
  --on-surface-color: var(--on-surface-color-light);
  --on-surface-variant-color: var(--on-surface-variant-color-light);
  --outline-color: var(--outline-color-light);
  --table-row-hover: var(--table-row-hover-light);
  --legend-bg: var(--legend-bg-light);
  --shadow-color: var(--shadow-color-light);
  --shadow-color-strong: var(--shadow-color-strong-light);
  --focus-ring-color: var(--primary-color-light-focus);
  --status-success-bg: var(--success-bg);
  --status-success-text: var(--success-text);
  --status-success-border: var(--success-border);
  --status-info-bg: var(--info-bg);
  --status-info-text: var(--info-text);
  --status-info-border: var(--info-border);
  --status-error-bg: var(--error-bg);
  --status-error-text: var(--error-text);
  --status-error-border: var(--error-border);
  --route-normal-text: var(--route-normal-text-light);
  --route-normal-bg: var(--route-normal-bg-light);
}

body.dark-mode {
  --background-color: var(--background-color-dark);
  --surface-color: var(--surface-color-dark);
  --on-surface-color: var(--on-surface-color-dark);
  --on-surface-variant-color: var(--on-surface-variant-color-dark);
  --outline-color: var(--outline-color-dark);
  --table-row-hover: var(--table-row-hover-dark);
  --legend-bg: var(--legend-bg-dark);
  --shadow-color: var(--shadow-color-dark);
  --shadow-color-strong: var(--shadow-color-strong-dark);
  --focus-ring-color: var(--primary-color-dark-focus);

  --status-success-bg: var(--success-bg-dark);
  --status-success-text: var(--success-text-dark);
  --status-success-border: var(--success-border-dark);
  --status-info-bg: var(--info-bg-dark);
  --status-info-text: var(--info-text-dark);
  --status-info-border: var(--info-border-dark);
  --status-error-bg: var(--error-bg-dark);
  --status-error-text: var(--error-text-dark);
  --status-error-border: var(--error-border-dark);
  --route-normal-text: var(--route-normal-text-dark);
  --route-normal-bg: var(--route-normal-bg-dark);
}
.remark-symbol { /* This existing class is used for '*' and now '†' */
  font-weight: bold;
  margin-left: 3px; /* Adjusted margin slightly */
  color: var(--primary-color);
  vertical-align: super; /* Makes it look a bit like a superscript */
  font-size: 0.8em;   /* Makes it a bit smaller */
  line-height: 1;     /* Prevents it from increasing line height */
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
}
body {
  font-family: var(--font-family-text);
  background-color: var(--background-color);
  color: var(--on-surface-color);
  line-height: 1.65;
  padding: 20px;
  transition: background-color var(--animation-duration),
    color var(--animation-duration);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.container {
  max-width: 1050px;
  margin: 25px auto;
  background-color: var(--surface-color);
  padding: 30px 35px;
  border-radius: var(--border-radius-large);
  box-shadow: 0 4px 16px var(--shadow-color), 0 2px 8px var(--shadow-color);
  transition: background-color var(--animation-duration),
    box-shadow var(--animation-duration);
}

.header-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--outline-color);
  transition: border-color var(--animation-duration);
}
h1 {
  font-family: var(--font-family-display);
  text-align: left;
  color: var(--kmb-red);
  margin-bottom: 0;
  font-weight: 700;
  font-size: 2.2em;
  letter-spacing: -0.5px;
  flex-grow: 1;
}

.theme-switch-wrapper {
  display: flex;
  align-items: center;
}
.theme-label {
  font-family: var(--font-family-sans);
  margin-left: 12px;
  font-size: 0.9em;
  color: var(--on-surface-variant-color);
  transition: color var(--animation-duration);
  font-weight: 500;
}
.theme-switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 28px;
}
.theme-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #bdc1c6;
  transition: 0.3s var(--animation-timing-function);
  border-radius: 28px;
}
.slider:before {
  position: absolute;
  content: "";
  height: 22px;
  width: 22px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.3s var(--animation-timing-function);
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
input:checked + .slider {
  background-color: var(--primary-color);
}
input:focus-visible + .slider {
  box-shadow: 0 0 0 3px var(--focus-ring-color);
}
input:checked + .slider:before {
  transform: translateX(20px);
}
body.dark-mode .slider {
  background-color: #5f6368;
}
body.dark-mode input:checked + .slider {
  background-color: var(--primary-color);
}

.controls {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 35px;
  align-items: flex-end;
}
.controls > div {
  flex: 1 1 220px;
}
.controls label {
  font-family: var(--font-family-text);
  display: block;
  margin-bottom: 10px;
  font-weight: 500;
  color: var(--on-surface-variant-color);
  font-size: 0.875em;
}
.controls input[type="text"] {
  font-family: var(--font-family-text);
  width: 100%;
  padding: 14px 18px;
  border: 1.5px solid var(--outline-color);
  background-color: var(--surface-color);
  color: var(--on-surface-color);
  border-radius: var(--border-radius-medium);
  font-size: 1em;
  transition: border-color var(--animation-duration),
    box-shadow var(--animation-duration),
    background-color var(--animation-duration), color var(--animation-duration);
}
.controls input[type="text"]:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3.5px var(--focus-ring-color);
}
.controls button {
  font-family: var(--font-family-sans);
  padding: 14px 30px;
  background-color: var(--primary-color);
  color: white;
  border: none;
  border-radius: var(--border-radius-pill);
  cursor: pointer;
  font-size: 1em;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  transition: background-color var(--animation-duration),
    transform 0.15s var(--animation-timing-function),
    box-shadow var(--animation-duration);
  box-shadow: 0 3px 6px var(--shadow-color-strong);
  flex-grow: 0;
  flex-basis: auto;
}
.controls button:hover {
  background-color: var(--primary-color-dark-hover);
  box-shadow: 0 5px 10px var(--shadow-color-strong);
  transform: translateY(-2px);
}
.controls button:active {
  transform: translateY(0px) scale(0.97);
  box-shadow: 0 1px 3px var(--shadow-color);
}

#status-messages {
  font-family: var(--font-family-text);
  margin-bottom: 25px;
  padding: 14px 18px;
  border-radius: var(--border-radius-medium);
  border: 1px solid;
  font-size: 0.95em;
  font-weight: 500;
  opacity: 0;
  transform: translateY(-15px) scale(0.98);
  transition: opacity var(--animation-duration) var(--animation-timing-function),
    transform var(--animation-duration) var(--animation-timing-function),
    background-color var(--animation-duration),
    border-color var(--animation-duration), color var(--animation-duration);
}
#status-messages.status-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.status-loading {
  background-color: var(--status-info-bg);
  border-color: var(--status-info-border);
  color: var(--status-info-text);
}
.status-error {
  background-color: var(--status-error-bg);
  border-color: var(--status-error-border);
  color: var(--status-error-text);
}
.status-info { /* Used for success/general info in JS */
  background-color: var(--status-success-bg);
  border-color: var(--status-success-border);
  color: var(--status-success-text);
}

.eta-table-container {
  margin-bottom: 35px;
  background-color: var(--surface-color);
  border-radius: var(--border-radius-medium);
  box-shadow: 0 3px 10px var(--shadow-color);
  padding: 25px;
  overflow-x: auto;
  opacity: 0;
  transform: scale(0.95);
  animation: fadeInScaleUp 0.4s var(--animation-timing-function) forwards;
  transition: background-color var(--animation-duration),
    box-shadow var(--animation-duration);
}
@keyframes fadeInScaleUp {
  to {
    opacity: 1;
    transform: scale(1);
  }
}
/* H3 Title for the single table container (if needed, or remove if no title above table) */
/* .eta-table-container h3 {
  font-family: var(--font-family-sans);
  margin-top: 0;
  margin-bottom: 20px;
  color: var(--on-surface-color);
  font-weight: 500;
  font-size: 1.4em;
  border-bottom: 1.5px solid var(--outline-color);
  padding-bottom: 12px;
  transition: color var(--animation-duration),
    border-color var(--animation-duration);
} */

table.eta-results {
  font-family: var(--font-family-text);
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.9em;
}
table.eta-results th,
table.eta-results td {
  padding: 10px 12px; /* Adjusted padding slightly for more columns */
  text-align: left;
  border-bottom: 1px solid var(--outline-color);
  transition: border-color var(--animation-duration),
    background-color 0.15s;
  white-space: normal;
  word-break: keep-all;
}
table.eta-results th {
  font-family: var(--font-family-sans);
  font-weight: 700;
  color: var(--on-surface-variant-color);
  text-transform: uppercase;
  font-size: 0.75em; /* Slightly smaller for more columns */
  letter-spacing: 0.8px;
  border-bottom-width: 2px;
  transition: color var(--animation-duration);
  white-space: nowrap; /* Keep headers on one line */
}
/* Prevent wrapping for specific columns that should be concise */
table.eta-results td:nth-child(1), /* Line Tag */
table.eta-results td:nth-child(3), /* Platform */
table.eta-results td:nth-child(4), /* ETA 1 */
table.eta-results td:nth-child(5), /* ETA 2 */
table.eta-results td:nth-child(6), /* ETA 3 */
table.eta-results td:nth-child(7)  /* ETA 4 */
{
  white-space: nowrap;
  text-align: center; /* Center ETA values */
}
table.eta-results td:nth-child(2) { /* Destination */
    min-width: 120px; /* Give destination more space */
}


table.eta-results tr:last-child td {
  border-bottom: none;
}
table.eta-results tr:hover td {
  background-color: var(--table-row-hover);
}
.scheduled-eta { /* Applied via JS to scheduled time text if needed */
  color: var(--on-surface-variant-color);
  font-style: italic;
  opacity: 0.8;
}
.remark-symbol { /* The asterisk symbol */
  font-weight: bold;
  margin-left: 5px;
  color: var(--primary-color);
}
.remark-only-row td { /* For "No upcoming trains" messages if used */
  text-align: left !important;
  font-style: italic;
  color: var(--on-surface-variant-color);
  padding-top: 15px !important;
  padding-bottom: 15px !important;
  opacity: 0.9;
}

/* MTR Line Tag Styling - Updated with Official Colors */
span.route-tag {
  font-family: "Google Sans", Arial, sans-serif;
  display: inline-block;
  padding: 5px 10px;
  border-radius: var(--border-radius-small);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  min-width: 50px;
  box-shadow: 0 1px 2px var(--shadow-color);
  vertical-align: middle;
  font-size: var(--route-tag-base-font-size);
  white-space: nowrap;
  transition: background-color var(--animation-duration),
    color var(--animation-duration), box-shadow var(--animation-duration);
  background-color: var(--route-normal-bg);
  color: var(--route-normal-text);
}

/* Official MTR Line Colors (approximated from image) */
.route-tag-AEL { background-color: #00797C; color: var(--route-white-text); } /* Airport Express - Dark Teal */
.route-tag-DRL { background-color: #FF70AE; color: var(--route-white-text); } /* Disneyland Resort Line - Pink */
.route-tag-EAL { background-color: #72C6E7; color: var(--route-white-text); } /* East Rail Line - Light Blue */
.route-tag-ISL { background-color: #0078BF; color: var(--route-white-text); } /* Island Line - Blue */
.route-tag-KTL { background-color: #00A859; color: var(--route-white-text); } /* Kwun Tong Line - Green */
.route-tag-SIL { background-color: #B5D236; color: var(--route-normal-text); } /* South Island Line - Lime Green (dark text) */
.route-tag-TKL { background-color: #7B2E90; color: var(--route-white-text); } /* Tseung Kwan O Line - Purple */
.route-tag-TWL { background-color: #ED1C24; color: var(--route-white-text); } /* Tsuen Wan Line - Red */
.route-tag-TML { background-color: #A05A2C; color: var(--route-white-text); } /* Tuen Ma Line - Brown */
.route-tag-TCL { background-color: #F58220; color: var(--route-white-text); } /* Tung Chung Line - Orange */

.route-tag-DEFAULT {
  background-color: var(--route-normal-bg);
  color: var(--route-normal-text);
}


#legend {
  font-family: var(--font-family-text);
  margin-top: 35px;
  padding: 20px;
  background-color: var(--legend-bg);
  border: 1px solid var(--outline-color);
  border-radius: var(--border-radius-medium);
  font-size: 0.9em;
  transition: background-color var(--animation-duration),
    border-color var(--animation-duration);
  box-shadow: 0 2px 6px var(--shadow-color);
}
#legend p {
  margin: 6px 0;
  color: var(--on-surface-variant-color);
  transition: color var(--animation-duration);
}
#legend strong {
  font-family: var(--font-family-sans);
  color: var(--on-surface-color);
  transition: color var(--animation-duration);
  font-weight: 500;
}

footer {
  font-family: var(--font-family-text);
  text-align: center;
  padding: 25px 0;
  margin-top: 40px;
  border-top: 1px solid var(--outline-color);
  transition: border-color var(--animation-duration);
}
footer p {
  color: var(--on-surface-variant-color);
  font-size: 0.875em;
  transition: color var(--animation-duration);
}

.loading-spinner {
  border: 4px solid var(--outline-color);
  border-top: 4px solid var(--primary-color);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: spin 1s linear infinite;
  margin: 20px auto;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@media (max-width: 768px) {
  body { padding: 15px; }
  .container { margin: 15px auto; padding: 20px 25px; }
  .header-controls { flex-direction: column; align-items: flex-start; gap: 15px; padding-bottom: 10px; }
  h1 { margin-bottom: 5px; font-size: 1.8em; }
  .theme-switch-wrapper { margin-bottom: 10px; }
  .controls { gap: 18px; margin-bottom: 30px; }
  .controls > div { flex-basis: 100%; }
  .controls button { width: 100%; padding: 15px; }
  /* .grouping-control { padding-bottom: 0; } Removed as not used */
  table.eta-results { font-size: 0.825em; } /* Adjusted for more columns */
  table.eta-results th, table.eta-results td { padding: 8px 6px; } /* Adjusted for more columns */
  :root { --route-tag-base-font-size: 0.8em; } /* Adjusted for smaller table cells */
}
@media (max-width: 480px) {
  body { padding: 10px; }
  .container { padding: 15px; border-radius: var(--border-radius-medium); }
  h1 { font-size: 1.6em; }
  .controls input[type="text"], .controls button { font-size: 0.95em; padding: 12px 15px; }
  .eta-table-container { padding: 10px; } /* Reduced padding */
  /* .eta-table-container h3 { font-size: 1.2em; } Removed as no h3 in container now */
  table.eta-results { font-size: 0.75em; } /* Further adjusted */
  table.eta-results th, table.eta-results td { padding: 6px 4px; } /* Further adjusted */
  :root { --route-tag-base-font-size: 0.75em; } /* Further adjusted */
  footer p { font-size: 0.8em; }
}