/* CalfWatch — iPadOS dark visual language.
   True-black system background, elevated #1C1C1E cards (no borders — iOS uses
   fills and separators), system tint colors, segmented control, sidebar,
   SF stack, 44pt+ targets. */

:root {
  /* iOS system colors (dark) */
  --bg: #000000;
  --bg-elevated: #1c1c1e;          /* secondarySystemBackground */
  --bg-tertiary: #2c2c2e;          /* tertiarySystemBackground */
  --fill: rgba(120, 120, 128, 0.2);        /* systemFill */
  --fill-secondary: rgba(120, 120, 128, 0.16);
  --separator: rgba(84, 84, 88, 0.6);
  --label: #ffffff;
  --label-secondary: rgba(235, 235, 245, 0.6);
  --label-tertiary: rgba(235, 235, 245, 0.3);
  --blue: #0a84ff;
  --green: #30d158;
  --red: #ff453a;
  --orange: #ff9f0a;
  --yellow: #ffd60a;
  --teal: #64d2ff;
  --radius-card: 16px;
  --radius-control: 12px;
  --ease-ios: cubic-bezier(0.25, 0.1, 0.25, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

html, body { height: 100%; }

body {
  background: var(--bg);
  color: var(--label);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", system-ui, sans-serif;
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
  font-size: 17px; /* iOS body */
}

#app { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }

button { font: inherit; color: inherit; border: none; background: none; cursor: pointer; }

/* Kept for the top bar: iOS navigation-bar material */
.glass {
  background: rgba(28, 28, 30, 0.75);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border: none;
  border-bottom: 0.5px solid var(--separator);
}

/* ---------- Top bar (navigation bar) ---------- */
#topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: calc(env(safe-area-inset-top, 0px) + 8px) 16px 8px;
  min-height: 60px;
  z-index: 20;
}

#session-info { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
#session-observer { font-weight: 600; font-size: 17px; }
#session-clock { color: var(--label-secondary); font-variant-numeric: tabular-nums; font-size: 15px; }

/* iOS "gray" capsule button */
.ghost-btn {
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--fill);
  color: var(--blue);
  font-size: 15px;
  font-weight: 600;
  min-height: 34px;
  transition: opacity 0.15s var(--ease-ios);
}
.ghost-btn:active { opacity: 0.55; }

#resp-strip { flex: 1; display: flex; align-items: center; gap: 10px; overflow-x: auto; scrollbar-width: none; }
#resp-strip::-webkit-scrollbar { display: none; }

/* Due/overdue window banner — iOS tinted capsule */
.resp-banner {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px 6px 14px;
  border-radius: 999px;
  background: rgba(255, 159, 10, 0.16);
  color: var(--orange);
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  animation: slide-down 0.35s var(--ease-ios);
}
.resp-banner.overdue {
  background: rgba(255, 69, 58, 0.16);
  color: var(--red);
  animation: slide-down 0.35s var(--ease-ios), pulse 2s ease-in-out infinite;
}
.resp-banner .start-count {
  padding: 7px 14px; border-radius: 999px;
  background: var(--orange); color: #000; font-weight: 700; font-size: 14px;
  min-height: 34px;
}
.resp-banner.overdue .start-count { background: var(--red); color: #fff; }

/* In-progress countdown chip in the top bar */
.resp-active {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(100, 210, 255, 0.14);
  color: var(--teal);
  font-size: 15px; font-weight: 600;
  white-space: nowrap;
}
.resp-countdown { font-variant-numeric: tabular-nums; font-weight: 700; }

@keyframes slide-down { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(255,69,58,0); } 50% { box-shadow: 0 0 0 5px rgba(255,69,58,0.18); } }

/* Next-resps countdown chip in the nav bar */
#next-resps { display: flex; align-items: center; }
.next-chip {
  padding: 6px 14px; border-radius: 999px;
  font-size: 14px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.next-chip.idle { background: var(--fill-secondary); color: var(--label-secondary); }
.next-chip.due { background: rgba(255, 159, 10, 0.16); color: var(--orange); }
.next-chip.counting { background: rgba(100, 210, 255, 0.14); color: var(--teal); }
.next-chip.done { background: rgba(48, 209, 88, 0.18); color: var(--green); }

#top-right { display: flex; align-items: center; gap: 12px; }

#sync-pill {
  font-size: 13px; font-weight: 600;
  padding: 5px 12px; border-radius: 999px;
  white-space: nowrap;
  border: none; cursor: pointer;
  transition: transform 0.15s var(--ease-ios);
}
#sync-pill:active { transform: scale(0.94); }
.sync-err { color: var(--amber); font-size: 14px; margin-top: -6px; margin-bottom: 14px; }
.sync-ok { background: rgba(48, 209, 88, 0.16); color: var(--green); }
.sync-pending { background: rgba(255, 159, 10, 0.16); color: var(--orange); }
.sync-offline { background: rgba(255, 69, 58, 0.16); color: var(--red); }

/* iOS segmented control */
#tabs {
  display: flex;
  background: rgba(118, 118, 128, 0.24);
  border-radius: 9px;
  padding: 2px;
}
.tab {
  padding: 6px 20px;
  border-radius: 7px;
  font-size: 14px; font-weight: 600;
  color: var(--label);
  min-height: 32px;
  transition: background 0.2s var(--ease-ios);
}
.tab.active { background: #636366; box-shadow: 0 1px 4px rgba(0,0,0,0.3); }

/* ---------- Resp row (full-width well) ---------- */
#resp-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 16px 0;
  padding: 12px 16px;
  background: var(--bg-elevated);
  border-radius: var(--radius-card);
  animation: slide-down 0.35s var(--ease-ios);
}
#resp-row[hidden] { display: none; }
#resp-row .rr-lead {
  display: flex; flex-direction: column; gap: 1px;
  white-space: nowrap; min-width: 96px;
}
#resp-row .rr-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--label-secondary);
  white-space: nowrap;
}
#resp-row .rr-timer {
  font-size: 26px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  color: var(--teal);
  line-height: 1.05;
}
#resp-row .rr-timer:empty { display: none; }
#resp-row .rr-timer.up { color: var(--green); }

/* Time's up: the whole well flashes green so it's unmistakable at a glance. */
#resp-row.resp-done {
  background: rgba(48, 209, 88, 0.20);
  box-shadow: inset 0 0 0 2px var(--green);
  transition: background 0.3s var(--ease-ios);
}
#resp-row.resp-done .rr-title { color: var(--green); }
#resp-row .rr-buttons { display: flex; gap: 12px; flex: 1; overflow-x: auto; scrollbar-width: none; }
#resp-row .rr-buttons::-webkit-scrollbar { display: none; }

.resp-animal-btn {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  padding: 14px 22px;
  border-radius: 14px;
  background: rgba(100, 210, 255, 0.14);
  color: var(--teal);
  font-size: 17px; font-weight: 700;
  min-height: 56px;
  white-space: nowrap;
  transition: transform 0.15s var(--ease-ios), background 0.15s;
}
.resp-animal-btn:active { transform: scale(0.95); background: rgba(100, 210, 255, 0.28); }
.resp-pool-btn { font-size: 20px; padding: 16px 34px; min-height: 62px; }
.rr-minus {
  padding: 14px 20px;
  border-radius: 14px;
  background: var(--fill);
  color: var(--label-secondary);
  font-size: 24px; font-weight: 700;
  min-height: 56px;
}
.rr-minus:active { background: var(--fill-secondary); }
.rr-idle { color: var(--label-tertiary); font-size: 15px; padding: 12px 4px; }
.resp-animal-btn .rb-count {
  font-variant-numeric: tabular-nums;
  font-size: 15px; font-weight: 700;
  background: rgba(100, 210, 255, 0.2);
  padding: 3px 10px;
  border-radius: 999px;
  min-width: 32px;
  text-align: center;
}
#resp-row .rr-done {
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--fill);
  color: var(--blue);
  font-size: 15px; font-weight: 600;
  white-space: nowrap;
}

/* ---------- Log view layout ---------- */
#log-view { flex: 1; display: flex; min-height: 0; }

/* Sidebar (focal rail) — iPadOS sidebar style */
#focal-rail {
  width: 210px;
  padding: 14px 12px;
  display: flex; flex-direction: column; gap: 4px;
  overflow-y: auto;
  background: var(--bg-elevated);
  margin: 12px 0 12px 16px;
  border-radius: var(--radius-card);
}
.focal-btn {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 14px;
  border-radius: 10px;
  font-size: 17px; font-weight: 500;
  color: var(--label);
  text-align: left;
  min-height: 50px;
  transition: background 0.15s var(--ease-ios);
  position: relative;
}
.focal-btn.selected { background: var(--blue); font-weight: 600; }
.focal-btn:not(.selected):active { background: var(--fill); }
.calf-badge {
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  background: rgba(100, 210, 255, 0.22); color: var(--teal);
  padding: 2px 7px; border-radius: 6px;
}
.focal-btn.selected .calf-badge { background: rgba(255,255,255,0.25); color: #fff; }
.focal-running-dot { position: absolute; right: 12px; width: 8px; height: 8px; border-radius: 50%; background: var(--green); }

/* Sidebar footer: Resps toggle */
#rail-footer { margin-top: auto; padding-top: 12px; }
#resp-toggle {
  width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px;
  border-radius: var(--radius-control);
  background: rgba(100, 210, 255, 0.14);
  color: var(--teal);
  font-size: 16px; font-weight: 600;
  min-height: 50px;
  transition: transform 0.15s var(--ease-ios);
}
#resp-toggle:active { transform: scale(0.97); }
#resp-toggle.on { background: var(--teal); color: #000; }
#sign-out-btn {
  width: 100%;
  margin-top: 8px;
  padding: 10px;
  border-radius: var(--radius-control);
  color: var(--label-tertiary);
  font-size: 14px;
  min-height: 40px;
}
#sign-out-btn:active { background: var(--fill); }

/* Event grid */
#event-grid-wrap { flex: 1; display: flex; flex-direction: column; padding: 12px 16px; overflow-y: auto; }
#grid-title { font-size: 28px; font-weight: 700; letter-spacing: 0.01em; margin: 4px 0 16px 4px; } /* iOS large title */
#event-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
  align-content: start;
}

/* Tiles — iOS Settings-style cards: dark card, colored icon chip */
.tile {
  position: relative;
  border-radius: var(--radius-card);
  min-height: 120px;
  padding: 16px;
  display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start;
  background: var(--bg-elevated);
  overflow: hidden;
  transition: transform 0.18s var(--ease-ios), background 0.18s;
}
.tile:active { transform: scale(0.96); background: var(--bg-tertiary); }
.tile .tile-chip {
  width: 44px; height: 44px;
  border-radius: 11px; /* iOS icon squircle-ish */
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
}
.tile .tile-label { font-size: 16px; font-weight: 600; line-height: 1.25; }
.tile .tile-sub { font-size: 13px; color: var(--label-secondary); margin-top: 2px; }
.tile .tile-count {
  position: absolute; top: 12px; right: 12px;
  font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--label);
  background: var(--fill);
  padding: 3px 10px; border-radius: 999px;
  min-width: 30px; text-align: center;
}
.tile.duration-running { box-shadow: 0 0 0 2px var(--green) inset; }
.tile.duration-running .tile-sub { color: var(--green); font-weight: 600; }
.tile.pulse { animation: tile-pulse 0.35s var(--ease-ios); }
@keyframes tile-pulse { 0% { transform: scale(1); } 40% { transform: scale(1.04); } 100% { transform: scale(1); } }

/* Active tray */
#active-tray {
  width: 270px;
  padding: 16px 14px;
  display: flex; flex-direction: column; gap: 12px;
  overflow-y: auto;
  background: var(--bg-elevated);
  margin: 12px 16px 12px 0;
  border-radius: var(--radius-card);
  border: none;
}
#active-tray h3 { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--label-secondary); }
#tray-empty { color: var(--label-tertiary); font-size: 15px; padding: 8px 4px; }

.tray-card {
  position: relative;
  border-radius: var(--radius-card);
  padding: 14px 14px 18px;
  background: var(--bg-tertiary);
  overflow: hidden;
  animation: slide-down 0.35s var(--ease-ios);
}
.tray-card .tc-title { font-size: 15px; font-weight: 600; position: relative; z-index: 2; }
.tray-card .tc-mod {
  font-size: 13px; font-style: italic;
  color: var(--label-secondary);
  margin-top: 2px;
  position: relative; z-index: 2;
}
.tray-card .tc-clock {
  font-size: 34px; font-weight: 700; font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  margin: 4px 0 12px; position: relative; z-index: 2;
}
.tray-card .tc-stop {
  position: relative; z-index: 2;
  width: 100%; padding: 12px;
  border-radius: var(--radius-control);
  background: rgba(255, 69, 58, 0.16);
  color: var(--red);
  font-weight: 700; font-size: 16px;
  min-height: 48px;
  transition: background 0.2s var(--ease-ios), transform 0.15s;
}
.tray-card .tc-stop:active { transform: scale(0.97); }
.tray-card .tc-stop.confirm { background: var(--red); color: #fff; }

/* Ocean wave: one element, two identical periods, translateX(-50%) loops
   seamlessly because the second half is an exact copy of the first. */
.wave-wrap {
  position: absolute; inset: auto 0 0 0; height: 56%;
  opacity: var(--wave-opacity, 0.3);
  pointer-events: none;
  z-index: 1;
  transition: opacity 1s linear;
}
.wave {
  position: absolute; bottom: 0; left: 0;
  width: 200%; height: 100%;
  will-change: transform;
}
.wave svg { width: 100%; height: 100%; display: block; }
.wave-1 { animation: wave-slide 11s linear infinite; }
.wave-2 { animation: wave-slide 17s linear infinite; opacity: 0.55; }
@keyframes wave-slide { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }

@media (prefers-reduced-motion: reduce) {
  .wave-1, .wave-2 { animation: none; }
  .resp-banner.overdue { animation: slide-down 0.01s; }
  * { transition-duration: 0.01ms !important; }
}

/* ---------- History view ---------- */
#history-view { flex: 1; display: flex; gap: 16px; padding: 12px 16px; min-height: 0; overflow-y: auto; align-items: flex-start; flex-wrap: wrap; }
#history-view[hidden] { display: none; }
.history-card {
  flex: 1 1 380px;
  background: var(--bg-elevated);
  border-radius: var(--radius-card);
  padding: 18px;
}
.history-card h3 {
  font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--label-secondary); margin-bottom: 14px;
}
#resp-chart { width: 100%; height: auto; display: block; }
#resp-chart-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 10px; }
.legend-item { display: flex; align-items: center; gap: 7px; font-size: 14px; color: var(--label-secondary); }
.legend-dot { width: 10px; height: 10px; border-radius: 50%; }

#nursing-hours { width: 100%; border-collapse: collapse; font-size: 16px; font-variant-numeric: tabular-nums; }
#nursing-hours th {
  text-align: left; font-size: 12px; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--label-tertiary);
  padding: 6px 10px; border-bottom: 0.5px solid var(--separator);
}
#nursing-hours td { padding: 10px; border-bottom: 0.5px solid var(--separator); }
#nursing-hours tr:last-child td { border-bottom: none; }
#nursing-hours .total-row td { color: var(--teal); font-weight: 600; border-top: 1px solid var(--separator); }
.live-empty { color: var(--label-tertiary); font-size: 15px; padding: 4px; }

/* ---------- Toast / undo ---------- */
#toast-root {
  position: fixed; bottom: calc(env(safe-area-inset-bottom, 0px) + 20px);
  left: 50%; transform: translateX(-50%);
  z-index: 60; display: flex; flex-direction: column; gap: 8px; align-items: center;
}
.toast {
  display: flex; align-items: center; gap: 14px;
  background: rgba(44, 44, 46, 0.9);
  -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  border-radius: 999px;
  padding: 12px 22px;
  font-size: 15px; font-weight: 600;
  box-shadow: 0 8px 30px rgba(0,0,0,0.5);
  animation: toast-in 0.3s var(--ease-ios);
}
@keyframes toast-in { from { opacity: 0; transform: translateY(14px) scale(0.95); } to { opacity: 1; transform: none; } }
.toast .undo-btn { color: var(--blue); font-weight: 700; padding: 4px 8px; min-height: 36px; }

/* ---------- Modals (iOS alert/sheet) ---------- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(0, 0, 0, 0.45);
  display: flex; align-items: center; justify-content: center;
  animation: fade-in 0.2s var(--ease-ios);
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.modal {
  width: min(460px, 92vw);
  background: var(--bg-tertiary);
  border-radius: 20px;
  padding: 24px;
  animation: modal-in 0.32s var(--ease-ios);
  box-shadow: 0 20px 60px rgba(0,0,0,0.55);
}
@keyframes modal-in { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: none; } }
.modal h2 { font-size: 20px; font-weight: 700; margin-bottom: 6px; }
.modal p { color: var(--label-secondary); font-size: 15px; margin-bottom: 16px; }
.modal input[type="text"], .modal input[type="password"], .modal textarea {
  width: 100%;
  background: rgba(118, 118, 128, 0.24);
  border: none;
  border-radius: var(--radius-control);
  color: var(--label);
  font: inherit; font-size: 17px;
  padding: 13px 14px;
  margin-bottom: 16px;
}
.modal input::placeholder, .modal textarea::placeholder { color: var(--label-tertiary); }
.modal textarea { min-height: 96px; resize: none; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.mod-choices { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.mod-choices .mod-choice { width: 100%; font-size: 18px; min-height: 56px; }
.btn {
  padding: 13px 20px;
  border-radius: var(--radius-control);
  font-weight: 600; font-size: 17px;
  min-height: 50px;
  transition: transform 0.15s var(--ease-ios), opacity 0.15s;
}
.btn:active { transform: scale(0.97); opacity: 0.8; }
.btn-primary { background: var(--blue); color: #fff; }
.btn-secondary { background: var(--fill); color: var(--blue); }
.btn-danger { background: rgba(255, 69, 58, 0.16); color: var(--red); }

.recover-row {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 0; border-bottom: 0.5px solid var(--separator);
  margin-bottom: 8px; flex-wrap: wrap;
}
.recover-row .rr-info { flex: 1; min-width: 140px; }
.recover-row .rr-clock { font-variant-numeric: tabular-nums; color: var(--green); font-weight: 700; }

/* Narrow screens */
@media (max-width: 900px) {
  #focal-rail { width: 150px; }
  #active-tray { width: 220px; }
}
@media (max-width: 700px) {
  #log-view { flex-direction: column; overflow-y: auto; }
  #focal-rail { width: auto; flex-direction: row; margin: 12px 16px 0; }
  #rail-footer { margin: 0 0 0 auto; padding: 0 0 0 12px; }
  #active-tray { width: auto; margin: 0 16px 12px; }
  #history-view { flex-direction: column; overflow-y: auto; }
}