/* Smart community screens (smart.js), in the admin portal and the phone pages. */
.smart {
  /* Chart colours: three series in a fixed order, checked for colour-blind separation on both surfaces. */
  --series-1: #2a78d6;
  --series-2: #eb6834;
  --series-3: #1baf7a;
  --grid: #e1e0d9;
  --critical: #d03b3b;
  --warning-bg: #fab219;
  --ground: #eef4ea;
  --lawn: #cfe5c5;
  --road: #d8dce3;
  --wall: #6b7890;
  --water: #7dbbe8;
  --chip-on: #f6c445;
}
:root[data-theme='dark'] .smart {
  --series-1: #3987e5;
  --series-2: #d95926;
  --series-3: #199e70;
  --grid: #2c3444;
  --ground: #18211c;
  --lawn: #223a26;
  --road: #2b3342;
  --wall: #8894aa;
  --water: #2f6f9f;
  --chip-on: #c99a1c;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .smart {
    --series-1: #3987e5;
    --series-2: #d95926;
    --series-3: #199e70;
    --grid: #2c3444;
    --ground: #18211c;
    --lawn: #223a26;
    --road: #2b3342;
    --wall: #8894aa;
    --water: #2f6f9f;
    --chip-on: #c99a1c;
  }
}

.smart h3 {
  font-size: 15px;
  margin: 18px 0 8px;
}
.smart .grow {
  flex: 1;
  margin: 0;
}
.smart .hint {
  margin: 10px 2px;
}
.smart .scroll {
  overflow-x: auto;
}
.smart button.danger {
  color: var(--red);
}

/* Alarms */
.smart .alarms {
  border: 2px solid var(--critical);
  border-radius: 12px;
  background: var(--card);
  margin-bottom: 14px;
  overflow: hidden;
}
.smart .alarms.ringing {
  animation: smart-ring 1.2s ease-in-out infinite;
}
@keyframes smart-ring {
  50% {
    box-shadow: 0 0 0 6px rgb(208 59 59 / 28%);
  }
}
.smart .alarm-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.smart .alarm-row:last-child {
  border-bottom: none;
}
.smart .alarm-row .sev {
  font-weight: 700;
  font-size: 13px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--critical);
  color: #fff;
  white-space: nowrap;
}
.smart .alarm-row.warning .sev {
  background: var(--warning-bg);
  color: #0b0b0b;
}
.smart .alarm-row .what {
  flex: 1 1 220px;
  display: flex;
  flex-direction: column;
}
.smart .alarm-row small {
  color: var(--muted);
}

/* Tiles */
.smart .tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.smart .tile {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  min-height: 78px;
}
.smart .tile strong {
  font-size: 22px;
  font-variant-numeric: tabular-nums;
}
.smart .tile small {
  font-size: 12.5px;
}
.smart .views {
  display: inline-flex;
  margin-bottom: 12px;
  max-width: 100%;
  overflow-x: auto;
}
.smart .view {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
}

/* Devices */
.smart .dev {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 4px;
  border-bottom: 1px solid var(--line);
}
.smart .dev .ico {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--subtle);
  display: grid;
  place-items: center;
  flex: none;
}
.smart .dev .what {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.smart .dev.alarm .ico {
  background: var(--disabled-bg);
}
.smart .dev.offline {
  opacity: 0.6;
}
.smart .switch {
  min-width: 78px;
  border-radius: 999px;
  font-weight: 600;
  color: var(--muted);
}
.smart .switch.on {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--on-primary);
}
.smart .connect {
  margin-top: 18px;
}
.smart .connect pre {
  background: var(--subtle);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  overflow-x: auto;
  font-size: 12.5px;
}
.smart .connect button {
  margin: 4px 8px 4px 0;
}

/* The plans */
.smart .plan {
  width: 100%;
  height: auto;
  display: block;
  font-size: 15px;
}
.smart .plan-wrap {
  max-width: 980px;
  margin: 0 auto;
}
.smart .plan text {
  fill: var(--ink);
  font-weight: 600;
  pointer-events: none;
}
.smart .plan .note {
  fill: var(--muted);
  font-weight: 400;
  font-size: 13px;
}
.smart .plan .ground {
  fill: var(--ground);
  stroke: var(--wall);
  stroke-width: 3;
}
.smart .plan .road {
  fill: none;
  stroke: var(--road);
  stroke-width: 26;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.smart .plan .lawn,
.smart .plan .tree {
  fill: var(--lawn);
}
.smart .plan .bld {
  fill: var(--card);
  stroke: var(--wall);
  stroke-width: 2;
}
.smart .plan .win {
  fill: var(--blue-tint);
}
.smart .plan .panel {
  fill: var(--series-1);
  opacity: 0.55;
}
.smart .plan .water {
  fill: var(--water);
}
.smart .plan .area {
  cursor: pointer;
}
.smart .plan .area:hover .bld,
.smart .plan .area:focus .bld,
.smart .plan .area.sel .bld,
.smart .plan .area.sel .lawn,
.smart .plan .area.sel .water {
  stroke: var(--blue);
  stroke-width: 4;
}
.smart .plan .area:focus {
  outline: none;
}
.smart .plan .area.alarm .bld,
.smart .plan .area.alarm .water,
.smart .plan .area.alarm .lawn {
  fill: var(--disabled-bg);
  stroke: var(--critical);
  stroke-width: 4;
  animation: smart-blink 1s steps(2) infinite;
}
@keyframes smart-blink {
  50% {
    stroke-opacity: 0.25;
  }
}
.smart .area-panel {
  margin-top: 8px;
}
.smart .crumbs {
  margin-bottom: 10px;
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}

/* A tower: its floors, each a corridor of flats */
.smart .tower-plan {
  border: 3px solid var(--wall);
  border-radius: 10px;
  overflow: hidden;
}
.smart .floor {
  display: flex;
  align-items: stretch;
  border-bottom: 2px solid var(--wall);
}
.smart .floor:last-child {
  border-bottom: none;
}
.smart .floor-name {
  flex: 0 0 76px;
  display: grid;
  place-items: center;
  background: var(--subtle);
  border-right: 2px solid var(--wall);
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}
.smart .corridor {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px;
  background: var(--ground);
}
.smart .lobby {
  flex: 1;
  padding: 4px 10px;
}
.smart .flat {
  flex: 1 1 120px;
  max-width: 220px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border: 2px solid var(--wall);
  border-radius: 4px;
  padding: 10px 12px;
  white-space: normal;
  text-align: left;
}
.smart .flat small {
  color: var(--muted);
}
.smart .flat.alarm {
  border-color: var(--critical);
  background: var(--disabled-bg);
  animation: smart-ring 1.2s ease-in-out infinite;
}

/* A home: rooms and what is in them */
.smart .plan.home {
  max-width: 720px;
  margin: 0 auto;
  font-size: 13px;
}
.smart .plan .room {
  fill: var(--card);
  stroke: var(--wall);
  stroke-width: 4;
}
.smart .plan .door-gap {
  stroke: var(--card);
  stroke-width: 6;
}
.smart .plan .room-name {
  fill: var(--muted);
  font-size: 13px;
}
.smart .plan .chip circle {
  fill: var(--subtle);
  stroke: var(--line);
  stroke-width: 2;
}
.smart .plan .chip .emoji {
  font-size: 19px;
}
.smart .plan .chip .lbl {
  font-size: 11px;
  font-weight: 400;
  fill: var(--muted);
}
.smart .plan .chip.on circle {
  fill: var(--chip-on);
  stroke: var(--chip-on);
}
.smart .plan .chip.alarm circle {
  fill: var(--critical);
  stroke: var(--critical);
  animation: smart-blink 1s steps(2) infinite;
}
.smart .plan .chip[data-act] {
  cursor: pointer;
}
.smart .plan .chip[data-act]:hover circle,
.smart .plan .chip[data-act]:focus circle {
  stroke: var(--blue);
  stroke-width: 3;
}

/* Automation */
.smart .rule-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 10px;
}
.smart .rule-card.paused {
  opacity: 0.65;
}
.smart .rule-card .head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.smart .rule-card .head strong {
  flex: 1;
}
.smart .rule-card p {
  margin: 4px 0;
}
.smart .rule-card .buttons {
  margin-top: 4px;
}
.smart .row3 {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 12px;
}
.smart .checks {
  max-height: 170px;
  overflow-y: auto;
  margin-bottom: 10px;
}
.smart label.pad {
  padding-top: 26px;
}
.smart dialog {
  max-height: calc(100vh - 24px);
  overflow-y: auto;
}

/* Charts */
.smart .chart {
  position: relative;
}
.smart .chart svg {
  width: 100%;
  height: auto;
  display: block;
}
.smart .chart .grid {
  stroke: var(--grid);
  stroke-width: 1;
}
.smart .chart .axis {
  fill: var(--muted);
  font-size: 11px;
}
.smart .chart .hit {
  fill: transparent;
}
.smart .chart .bar:hover .hit {
  fill: var(--ink);
  fill-opacity: 0.06;
}
.smart .tip {
  position: absolute;
  pointer-events: none;
  background: var(--toast-bg);
  color: var(--toast-ink);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 12.5px;
  display: flex;
  flex-direction: column;
  white-space: nowrap;
  z-index: 2;
}
.smart .legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  font-size: 13px;
  margin-bottom: 6px;
}
.smart .legend i {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  margin-right: 6px;
}
.smart .table-view summary {
  color: var(--link);
  font-size: 13px;
  cursor: pointer;
  margin: 6px 0;
}
.smart .two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 28px;
}
.smart .hbar {
  display: grid;
  grid-template-columns: minmax(90px, 34%) 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
  font-size: 14px;
}
.smart .hbar .name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.smart .hbar .track {
  position: relative;
  height: 14px;
}
.smart .hbar .track i {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--series-1);
  border-radius: 0 4px 4px 0;
  min-width: 2px;
}
.smart .hbar .track b {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  background: var(--ink);
}
.smart .hbar .val {
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  font-size: 13px;
}
.smart .findings {
  margin: 0;
  padding-left: 20px;
}
.smart .findings li {
  margin-bottom: 4px;
}
.smart .empty h3 {
  font-size: 18px;
}

@media (max-width: 720px) {
  .smart .two,
  .smart .row3 {
    grid-template-columns: 1fr;
  }
  .smart .view {
    padding: 10px;
  }
  .smart .floor-name {
    flex-basis: 54px;
  }
  /* The chart is drawn 720 wide and shrinks to the phone: keep its labels readable. */
  .smart .chart .axis {
    font-size: 19px;
  }
  .smart .plan {
    font-size: 19px;
  }
  .smart .plan .note {
    font-size: 16px;
  }
}
@media print {
  .topbar,
  .rule,
  .toolbar,
  .smart .views,
  .smart button,
  #add-button {
    display: none !important;
  }
}

/* The open alarms' heading: how many, how many still wait, and all of them acknowledged at once */
.smart .alarms header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--critical) 9%, var(--card));
}
.smart .alarms header small {
  color: var(--muted);
}
.smart .alarms header .spacer {
  flex: 1;
}