/* Shared page styles. Palette = the Home Assistant default dark theme the tiles live in. */
:root {
  color-scheme: dark;
  --primary-text-color: #e1e1e1;
  --secondary-text-color: #9b9b9b;
  --card-background-color: #1c1c1c;
  --ha-card-border-radius: 12px;
  --page-bg: #111111;
  --divider: rgba(255, 255, 255, 0.08);
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--page-bg); color: var(--primary-text-color);
  font-family: Roboto, "Segoe UI", system-ui, -apple-system, sans-serif; font-size: 14px;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }

/* status line, shared */
.status { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; color: var(--secondary-text-color); font-size: 12px; }
#dot { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; flex: none; }
#dot.bad { background: #f87171; }
.status .src { margin-left: auto; }

/* ---- /bus ---- */
body[data-view="bus"] .page { max-width: 1500px; margin: 0 auto; padding-inline: 16px; padding-block: 12px 18px; display: flex; flex-direction: column; gap: 12px; min-height: 100%; }
body[data-view="bus"] header { display: flex; align-items: baseline; gap: 14px; padding-inline: 4px; }
#date { color: var(--secondary-text-color); text-transform: capitalize; font-size: 15px; }
#clock { margin-left: auto; font-size: 30px; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
#boards { display: grid; gap: 14px; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); align-items: start; }
#boards > bus-board-card { height: auto; border: 1px solid var(--divider); border-radius: var(--ha-card-border-radius); overflow: hidden; }
body[data-view="bus"] .status { margin-top: auto; padding-inline: 4px; }
body.no-status .status { display: none; }

/* fit_screen: exactly one screen, no scrollbar ever (a page that changes height
   inside a zoomed signage player reflows and flickers). Boards fill the height
   and the card hides rows that do not fit completely. */
body.fit { overflow: hidden; }
body.fit .page { height: 100vh; height: 100dvh; min-height: 0; max-width: none; }
body.fit #boards { flex: 1 1 auto; min-height: 0; align-items: stretch; grid-auto-rows: minmax(0, 1fr); }
body.fit #boards > bus-board-card { height: 100%; min-height: 0; }
@media (max-width: 760px) {
  #boards { grid-template-columns: minmax(0, 1fr); }
  #clock { font-size: 24px; }
}

/* ---- /ryde: the map is the page ---- */
body[data-view="ryde"] { overflow: hidden; }
body[data-view="ryde"] #map { position: fixed; inset: 0; }
body[data-view="ryde"] #map > ryde-map-card { height: 100%; --ha-card-border-radius: 0; }
body[data-view="ryde"] .status {
  position: fixed; left: 10px; bottom: 10px; z-index: 5; padding: 5px 10px; border-radius: 999px;
  background: rgba(17, 17, 17, 0.82); border: 1px solid var(--divider); max-width: calc(100% - 130px);
}
body[data-view="ryde"] .status .src { display: none; }

/* ---- index pages ---- */
body[data-view="index"] .page { max-width: 520px; margin: 0 auto; padding-inline: 16px; padding-block: 48px; display: flex; flex-direction: column; gap: 12px; }
body[data-view="index"] h1 { font-size: 20px; font-weight: 500; margin: 0 0 8px; }
.link-card { display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: var(--ha-card-border-radius); background: var(--card-background-color); border: 1px solid var(--divider); text-decoration: none; font-size: 16px; font-weight: 500; }
.link-card:hover { background: #242424; }
.link-card svg { width: 22px; height: 22px; fill: var(--secondary-text-color); }
.link-card small { margin-left: auto; color: var(--secondary-text-color); font-weight: 400; font-size: 13px; }