:root {
  --bg: #1d1c1d;
  --panel: #292728;
  --panel-2: #323031;
  --line: #4a4748;
  --text: #ffffff;
  --muted: #b9b5b3;

  --water: #5aaee0;
  --fire: #f0743f;
  --mold: #7cc576;
  --other: #c9c4c1;

  --pad: 3vw;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  overflow: hidden;
  cursor: none;
}

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

/* ---------- Header ---------- */
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.6vh var(--pad);
  background: var(--panel);
  border-bottom: 0.5vh solid var(--fire);
}
.brand { display: flex; align-items: center; gap: 1.6vw; }
.logo { height: 9vh; width: auto; }
.brand-name {
  font-size: 2.4vh;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
h1 {
  margin: .3vh 0 0;
  font-size: 5.6vh;
  line-height: 1.05;
  font-weight: 800;
}
.clock { text-align: right; }
.time {
  font-size: 7vh;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.date { margin-top: .8vh; font-size: 3vh; color: var(--muted); font-weight: 500; }

/* ---------- Table ---------- */
main {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0 var(--pad);
}

.cols, .row {
  display: grid;
  grid-template-columns: 13% 12% 23% 31% 21%;
  column-gap: 1.2vw;
  align-items: center;
}
.cols {
  padding: 1.8vh 1.6vw 1.2vh;
  font-size: 2.2vh;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

.rows {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 1vh;
  padding-bottom: 1vh;
}

.row {
  height: var(--row-h, 11vh);
  flex: none;
  padding: 0 1.6vw;
  background: var(--panel);
  border-left: 1vh solid var(--accent, var(--other));
  border-radius: 4px;
  font-size: calc(var(--row-h, 11vh) * 0.31);
  font-weight: 600;
}
.row > * { min-width: 0; }

.row .time-cell { white-space: nowrap; font-weight: 800; font-variant-numeric: tabular-nums; }
.row .type { color: var(--accent, var(--other)); font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
.row .name { font-weight: 700; }
.row .addr { font-weight: 500; color: #e9e6e4; line-height: 1.15; }
.row .name, .row .addr {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.row.water { --accent: var(--water); }
.row.fire  { --accent: var(--fire); }
.row.mold  { --accent: var(--mold); }

.pill {
  display: inline-block;
  max-width: 100%;
  padding: .25em .7em;
  border-radius: 999px;
  border: 0.3vh solid currentColor;
  font-size: .85em;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pill.scheduled   { color: #ffffff; }
.pill.enroute     { color: var(--water); }
.pill.inprogress  { background: var(--fire); border-color: var(--fire); color: #1d1c1d; }
.pill.completed   { color: var(--mold); }
.pill.other       { color: var(--other); }

.row.done { opacity: .5; }

.empty {
  margin: auto;
  font-size: 5vh;
  font-weight: 700;
  color: var(--muted);
  text-align: center;
  line-height: 1.3;
}
.empty small { display: block; font-size: 3vh; font-weight: 500; margin-top: 1vh; }

/* ---------- Priority column (only when the sheet has one) ---------- */
.pri-h { display: none; }
body.has-pri .pri-h { display: block; }
body.has-pri .cols, body.has-pri .row { grid-template-columns: 11% 10% 19% 27% 17% 12%; }

.pri {
  display: inline-block;
  padding: .25em .7em;
  border-radius: 4px;
  font-size: .85em;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .03em;
  white-space: nowrap;
}
.pri.high { background: #e5484d; color: #ffffff; }
.pri.med  { background: #f2b84b; color: #1d1c1d; }
.pri.low  { background: #4a4748; color: #ffffff; }
.pri.none { color: var(--muted); }

/* ---------- Footer ---------- */
.bottom {
  display: flex;
  justify-content: space-between;
  padding: 1.2vh var(--pad) 1.6vh;
  font-size: 2.4vh;
  font-weight: 600;
  color: var(--muted);
  border-top: 1px solid var(--line);
  min-height: 6.4vh;
  align-items: center;
}

/* Smooth page flip */
.rows.flip { animation: fade .5s ease; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* Small screens (testing on a laptop/phone) */
@media (max-aspect-ratio: 1/1) {
  .cols { display: none; }
  .row { grid-template-columns: 1fr 1fr; height: auto; min-height: 14vh; padding: 1vh 3vw; row-gap: .4em; font-size: 2.4vh; }
}