/* Large type and big touch targets: the people using this are mostly elderly,
   on old Android phones. Kept to CSS that Chrome ~60 already understands. */

:root {
  --bg: #f3f0e8;
  --card: #ffffff;
  --ink: #111111;
  --muted: #4d4d4d;
  --line: #cfc8ba;
  --primary: #1f4e79;
  --primary-ink: #ffffff;
  --ok: #17652a;
  --bad: #a31f17;
  --warn-bg: #fff4cc;
  --warn-line: #c99700;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

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

#app {
  max-width: 560px;
  margin: 0 auto;
  padding: 16px 16px 48px;
}

h1 { font-size: 30px; line-height: 1.2; margin: 8px 0 18px; }
h2 { font-size: 24px; margin: 24px 0 12px; }

.loading, .empty { text-align: center; color: var(--muted); margin-top: 40px; }

/* ---- device list ---- */

.tile {
  display: flex;
  align-items: center;
  min-height: 92px;
  margin: 0 0 14px;
  padding: 14px 16px;
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: 16px;
  color: inherit;
  text-decoration: none;
}
.tile:active { background: #e8eef5; }
.tile .icon { width: 52px; height: 52px; flex: 0 0 52px; margin-right: 16px; color: var(--primary); }
.tile .name { display: block; font-size: 26px; font-weight: 700; line-height: 1.2; }
.tile .state { display: block; font-size: 19px; color: var(--muted); }
.tile .chev { margin-left: auto; padding-left: 8px; font-size: 34px; color: var(--line); }

.state.offline, .devstate.offline { color: var(--bad); }
.state.on, .state.unlocked, .devstate.on, .devstate.unlocked { color: var(--ok); font-weight: 700; }

.statusline { text-align: center; color: var(--muted); font-size: 17px; min-height: 1.4em; }

/* ---- device screen ---- */

.back {
  display: inline-block;
  padding: 10px 14px 10px 0;
  color: var(--primary);
  font-size: 22px;
  font-weight: 700;
  text-decoration: none;
}
.devname { display: flex; align-items: center; margin-bottom: 4px; }
.devname .icon { width: 44px; height: 44px; flex: 0 0 44px; margin-right: 12px; color: var(--primary); }
.devstate { font-size: 21px; color: var(--muted); margin: 0 0 18px; min-height: 1.4em; }
.linkname { font-size: 20px; font-weight: 700; margin: 8px 0 10px; }
.linkname span { font-weight: 400; color: var(--muted); }

.btn {
  display: block;
  width: 100%;
  min-height: 76px;
  margin: 0 0 14px;
  padding: 12px;
  border: 0;
  border-radius: 16px;
  font: inherit;
  font-size: 25px;
  font-weight: 700;
  cursor: pointer;
}
.btn.primary { background: var(--primary); color: var(--primary-ink); }
.btn.secondary { background: var(--card); color: var(--primary); border: 3px solid var(--primary); }
.btn.danger { background: var(--card); color: var(--bad); border: 3px solid var(--bad); }
.btn[disabled] { opacity: 0.45; }
.btn.small {
  display: inline-block;
  width: auto;
  min-height: 46px;
  margin: 4px 8px 4px 0;
  padding: 8px 14px;
  font-size: 17px;
  border-radius: 10px;
}

.confirm {
  margin: 0 0 14px;
  padding: 14px;
  background: var(--warn-bg);
  border: 3px solid var(--warn-line);
  border-radius: 16px;
}
.confirm p { margin: 0 0 12px; font-size: 23px; font-weight: 700; text-align: center; }

.msg { min-height: 1.5em; margin: 6px 0; font-size: 23px; font-weight: 700; text-align: center; }
.msg.ok { color: var(--ok); }
.msg.bad { color: var(--bad); }
.msg.info { color: var(--muted); }

.cam {
  position: relative;
  min-height: 210px;
  margin: 0 0 16px;
  background: #000;
  border-radius: 16px;
  overflow: hidden;
}
.cam img { display: block; width: 100%; height: auto; }
.cam img.wait { display: none; }
.camstatus {
  position: absolute;
  left: 0;
  right: 0;
  top: 35%;
  margin: 0;
  padding: 0 14px;
  color: #fff;
  font-size: 20px;
  text-align: center;
}

/* ---- login ---- */

.login { clear: both; text-align: center; padding-top: 8px; }
.login .icon { width: 84px; height: 84px; color: var(--primary); }
.code {
  display: block;
  width: 100%;
  margin: 0 0 16px;
  padding: 14px;
  border: 3px solid var(--line);
  border-radius: 16px;
  font: inherit;
  font-size: 38px;
  letter-spacing: 6px;
  text-align: center;
}
.code:focus { border-color: var(--primary); outline: none; }
.login label { margin: 0 0 10px; font-size: 26px; font-weight: 700; }
.hint { color: var(--muted); font-size: 18px; }

.foot { margin-top: 32px; text-align: center; }
.foot a { display: inline-block; margin: 6px 12px; color: var(--muted); font-size: 18px; }

/* ---- admin ---- */

.tabs { display: flex; margin: 0 0 16px; }
.tabs a {
  flex: 1;
  padding: 12px 4px;
  border-bottom: 4px solid var(--line);
  color: var(--muted);
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}
.tabs a.on { color: var(--primary); border-color: var(--primary); }

.card {
  margin: 0 0 14px;
  padding: 14px;
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: 14px;
}
.card .title { font-size: 22px; font-weight: 700; }
.sub { margin: 2px 0 8px; color: var(--muted); font-size: 16px; }
.badge {
  margin-left: 6px;
  padding: 2px 7px;
  background: var(--primary);
  color: #fff;
  border-radius: 6px;
  font-size: 14px;
  vertical-align: middle;
}

.notice {
  margin: 0 0 18px;
  padding: 14px;
  background: var(--warn-bg);
  border: 3px solid var(--warn-line);
  border-radius: 14px;
  text-align: center;
}
.bigcode { margin: 6px 0; font-size: 46px; font-weight: 800; letter-spacing: 4px; }

form label { display: block; margin: 0 0 12px; font-size: 18px; }
form label.inline { display: inline-block; margin-right: 16px; }
input[type=text], input[type=number], select {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 10px;
  border: 2px solid var(--line);
  border-radius: 10px;
  background: #fff;
  font: inherit;
  font-size: 20px;
}
input[readonly] { background: #eee; color: var(--muted); }
input[type=checkbox] { width: 24px; height: 24px; margin: 0 6px 0 0; vertical-align: middle; }
.checks label { display: inline-block; margin: 4px 16px 4px 0; font-size: 18px; }
details { margin: 8px 0; font-size: 17px; }
summary { cursor: pointer; color: var(--primary); padding: 6px 0; }
.phone { padding: 6px 0; border-top: 1px solid var(--line); }

.log { width: 100%; border-collapse: collapse; font-size: 15px; }
.log td { padding: 7px 4px; border-bottom: 1px solid var(--line); vertical-align: top; }
.log .t { white-space: nowrap; color: var(--muted); }

/* ---- language switch (top right corner) ---- */

.langbar { float: right; margin: 0 0 8px 12px; }
.langbar a {
  display: inline-block;
  min-width: 48px;
  padding: 8px 6px;
  background: var(--card);
  border: 2px solid var(--line);
  color: var(--muted);
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}
.langbar a:first-child { border-radius: 10px 0 0 10px; border-right-width: 1px; }
.langbar a:last-child { border-radius: 0 10px 10px 0; border-left-width: 1px; }
.langbar a.on { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }