:root {
  --bg: #eceff1;
  --surface: #ffffff;
  --text: #212b30;
  --muted: #5b6b73;
  --border: #cfd8dc;
  --bar: #37474f;
  --bar-text: #ffffff;
  --primary: #1e88e5;
  --ok: #2e7d32;
  --danger: #d32f2f;
  --warn-bg: #fff9c4;
  --alert-bg: #ffcdd2;
  --calm-bg: #e8f5e9;
  --row-text: #333333;
  --shared: #1e88e5;
  --mine: #8e24aa;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #161c1f;
    --surface: #222b30;
    --text: #e6ecef;
    --muted: #9aaab2;
    --border: #3a474e;
    --bar: #263238;
    --ok: #81c784;
    --danger: #ef5350;
    --warn-bg: #4a4520;
    --alert-bg: #5c2529;
    --calm-bg: #223a27;
    --row-text: #f0f3f4;
  }
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.4 Arial, "Segoe UI", sans-serif;
}

[hidden] { display: none !important; }

h1 { font-size: 1.3rem; margin: 0 0 12px; }
h2 { font-size: 1rem; margin: 0 0 8px; }

input, textarea, button { font: inherit; }

input, textarea {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px;
  min-width: 0;
}

textarea { width: 100%; font-family: Consolas, monospace; font-size: 12px; margin: 8px 0; }

/* --- Buttons --- */
.btn {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 14px;
  font-weight: bold;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
}
.btn:disabled { opacity: 0.45; cursor: default; }
.btn-small { padding: 5px 9px; font-size: 0.85rem; }
.btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-ok { background: #4caf50; border-color: #4caf50; color: #fff; }
.btn-danger { background: #d32f2f; border-color: #d32f2f; color: #fff; }
.btn-silence { background: #ffeb3b; border-color: #ffeb3b; color: #000; }
.btn-link { display: block; background: #008cba; border-color: #008cba; color: #fff; margin-top: 12px; }

/* --- Login --- */
.login {
  max-width: 360px;
  margin: 8vh auto 0;
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.login label { display: flex; flex-direction: column; gap: 4px; font-weight: bold; font-size: 0.9rem; }
.error { color: var(--danger); margin: 0; min-height: 1.2em; }

/* --- App shell --- */
.app { display: flex; flex-direction: column; height: 100%; }

.topbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 6px 10px;
  padding-top: calc(6px + env(safe-area-inset-top));
  background: var(--bar);
  color: var(--bar-text);
}
.topbar .title { font-weight: bold; }
.topbar.flash { background: #d32f2f; }
.conn { color: #ef5350; }
.conn.on { color: #66bb6a; }
.online { font-size: 0.8rem; opacity: 0.85; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.silence-bar { display: flex; flex-wrap: wrap; gap: 4px; }

.banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  background: var(--warn-bg);
  color: var(--row-text);
  font-size: 0.9rem;
}

.layout { flex: 1; display: flex; flex-direction: column-reverse; min-height: 0; }

main { flex: 1; overflow-y: auto; padding: 12px; }

.tabs {
  display: flex;
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabs button {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 2px;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 1.1rem;
  cursor: pointer;
}
.tabs button span { font-size: 0.68rem; font-weight: bold; }
.tabs button.active { color: #fff; background: var(--primary); }
.tabs button.alert { box-shadow: inset 0 3px 0 var(--danger); }

.tab { display: none; max-width: 720px; margin: 0 auto; }
.tab.active { display: block; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 12px;
}

.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.grow { flex: 1; }
.status { color: var(--muted); font-size: 0.9rem; margin: 8px 0 0; }
.status.ok { color: var(--ok); }
.status.bad { color: var(--danger); }

.badge {
  display: inline-block;
  font-size: 0.7rem;
  padding: 2px 6px;
  border-radius: 10px;
  color: #fff;
  vertical-align: middle;
}
.badge.shared { background: var(--shared); }
.badge.mine { background: var(--mine); }

/* --- Duration entry: two combo boxes, [ 3 v min : 00 v sec ] --- */
.duration {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 8px 3px 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-variant-numeric: tabular-nums;
}
.duration:focus-within { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(30, 136, 229, 0.25); }
.duration .unit { color: var(--muted); font-size: 0.8rem; }
.duration .sep { font-weight: bold; padding: 0 4px; }

.entry { display: inline-flex; align-items: center; gap: 6px; }
.btn-ok-entry { padding: 7px 12px; }

.combo { display: inline-flex; align-items: center; }
.combo input {
  width: 2.3em;
  padding: 4px 0;
  border: 0;
  outline: 0;
  background: none;
  text-align: right;
  font-weight: bold;
  font-size: 1.1rem;
}
.combo-toggle {
  border: 0;
  background: none;
  color: var(--muted);
  padding: 6px 5px;
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
}
.combo-toggle:hover { color: var(--primary); }

.combo-list {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 5;
  display: grid;
  gap: 2px;
  width: 246px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
.combo-list button {
  border: 0;
  border-radius: 5px;
  background: none;
  color: var(--text);
  padding: 7px 0;
  font-weight: bold;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.combo-list button:hover { background: var(--bg); }
.combo-list button.current { background: var(--primary); color: #fff; }

/* --- Timer cards --- */
.timer { text-align: center; }
.timer .inputs { justify-content: center; }
.timer .display {
  font: bold 3.4rem/1.2 Calibri, Arial, sans-serif;
  font-variant-numeric: tabular-nums;
  margin: 8px 0;
  color: var(--shared);
}
.timer.mine .display { color: var(--mine); }
.timer .display.idle { opacity: 0.4; }
.timer .buttons { justify-content: center; }

/* --- Buffers --- */
.buffer { justify-content: space-between; margin-bottom: 6px; }
.buffer label { font-weight: bold; font-size: 0.9rem; }

/* --- Village lists --- */
.list { display: flex; flex-direction: column; gap: 5px; }
.list .empty { color: var(--muted); text-align: center; padding: 14px 0; }
.village {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--row-text);
  background: var(--calm-bg);
}
.village.warn { background: var(--warn-bg); }
.village.alert { background: var(--alert-bg); }
.village .info { flex: 1; min-width: 0; }
.village .name { font-weight: bold; }
.village .detail { font-size: 0.88rem; font-variant-numeric: tabular-nums; }
.village a { flex: none; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 84px;
  transform: translateX(-50%);
  max-width: 90vw;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--bar);
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  z-index: 10;
}
.toast.bad { background: #d32f2f; }

/* --- Wide screens: tabs on the left, like the desktop app --- */
@media (min-width: 800px) {
  .layout { flex-direction: row; }
  .tabs {
    flex-direction: column;
    width: 210px;
    border-top: 0;
    border-right: 1px solid var(--border);
    padding: 6px;
    gap: 4px;
  }
  .tabs button {
    flex: none;
    flex-direction: row;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 6px;
    font-size: 1rem;
  }
  .tabs button span { font-size: 0.9rem; }
  .tabs button.alert { box-shadow: inset 4px 0 0 var(--danger); }
  .toast { bottom: 24px; }
}