/* Only what Tabler does not already cover. */
body { padding-bottom: env(safe-area-inset-bottom); }
.dot { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; flex: none; }
.device-row { cursor: pointer; }
.device-row td { vertical-align: middle; }
.metric { font-variant-numeric: tabular-nums; }
.progress { height: .5rem; }
.auth-card { max-width: 24rem; }
.token { word-break: break-all; }
/* The top bar takes the base colour's surface, so it matches whichever
   background is chosen -- Tabler's tertiary background stays navy in dark mode. */
.beacon-bar { background: var(--tblr-bg-surface); }
/* The top bar: larger than Tabler's, on every screen. */
.beacon-bar { padding-top: .9rem; padding-bottom: .9rem; }
.beacon-bar .navbar-brand { font-size: 1.6rem; margin-right: 3rem; gap: .5rem; }
.beacon-logo { width: 1.9rem; height: 1.9rem; flex: none; }
.beacon-bar .nav-link { font-size: 1.05rem; }
.beacon-bar .beacon-logout { font-size: 1rem; }

/* History: a row of day cells, green to red; grey where nothing was watched. */
.strip { display: block; width: 100%; height: 1.75rem; }
.strip rect { fill: var(--tblr-border-color); cursor: pointer; }
.strip rect.up { fill: var(--tblr-green); }
.strip rect.partial { fill: var(--tblr-yellow); }
.strip rect.down { fill: var(--tblr-red); }
.strip rect:hover, .strip rect.sel { opacity: .6; }
.strip-axis { font-size: .75rem; }
.strip-caption { min-height: 1.25rem; }
.chart { width: 100%; }
/* Icons sit in the text like a letter would. */
.ico { width: 1.2em; height: 1.2em; vertical-align: -.22em; flex: none; }
.btn .ico { margin: 0; }
.status-icon .ico { width: 1.35em; height: 1.35em; }
.snooze-badge, .quiet-badge { white-space: nowrap; }

/* A device's cards: each grows to fill the width it is given, so switching a
   widget off closes the gap instead of leaving one. The wide ones (strips and
   charts, which need the room) take a row of their own. */
.cards { display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: 1rem; }
.cards > * { flex: 1 1 26rem; min-width: 0; }
.cards > .wide { flex-basis: 100%; }
.cards > .d-none { display: none !important; }
/* Room between the page edge and the header and content. */
.container { padding-left: calc(var(--tblr-gutter-x, 1.5rem) * .5 + 10px);
             padding-right: calc(var(--tblr-gutter-x, 1.5rem) * .5 + 10px); }
.chart .u-legend { font-size: .8rem; color: var(--tblr-body-color); }
.chart .u-legend .u-marker { border-radius: 50%; }

/* Phones: Tabler's 14px text is small in the hand, and taps need room. */
@media (max-width: 767.98px) {
  :root { --tblr-body-font-size: 1rem; }
  body { font-size: 1rem; }
  /* More room above the bar, and clear of the iPhone's status bar when
     Beacon runs from the home screen and draws beneath it. */
  .beacon-bar { padding-top: calc(env(safe-area-inset-top) + 1.4rem); padding-bottom: 1.1rem; }
  .beacon-bar .navbar-brand { font-size: 1.8rem; }
  .beacon-logo { width: 2.4rem; height: 2.4rem; }
  .navbar-toggler { font-size: 1.5rem; }
  /* Buttons set their own size in Tabler, so they did not grow with the text. */
  .btn { --tblr-btn-font-size: 1rem; font-size: 1rem; }
  .btn-sm { --tblr-btn-font-size: .95rem; font-size: .95rem; }
  .btn, .form-control, .form-select { min-height: 2.75rem; }
  .btn-sm { min-height: 2.5rem; }
  .navbar-collapse .nav-link { padding: .75rem 0; font-size: 1.05rem; }
  .navbar-collapse .beacon-logout { width: 100%; margin: .5rem 0; }
  .device-row td { padding-top: .75rem; padding-bottom: .75rem; }
}