/* ----------------- tab panels ------------------ */
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* room for the fixed bottom bar (overrides base.css body bottom padding) */
body { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }

/* ----------------- bottom tab bar (PWA style) ------------------ */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  display: flex;
  background: color-mix(in srgb, var(--panel) 92%, #000);
  border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}
.tab-btn {
  flex: 1; appearance: none; background: none; border: none; cursor: pointer;
  color: var(--muted); font-family: inherit;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 8px 4px 7px; transition: color 0.2s;
}
.tab-btn .tb-ico { width: 22px; height: 22px; display: block; }
.tab-btn .tb-lbl { font-size: 10px; letter-spacing: 0.02em; font-weight: 600; }
.tab-btn.active { color: var(--accent); }
.tab-btn.active .tb-ico { filter: drop-shadow(0 0 5px color-mix(in srgb, var(--accent) 55%, transparent)); }

/* ----------------- alerts tab card ------------------ */
.alerts-card {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 12px; overflow: hidden;
}
.alerts-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 16px;
}
.alerts-row + .alerts-row { border-top: 1px solid var(--border); }
.alerts-txt { min-width: 0; }
.alerts-label { font-size: 14px; font-weight: 600; }
.alerts-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.alerts-row .btn { flex: none; white-space: nowrap; }

/* list of which notification types fire */
.alert-types {
  list-style: none; margin: 0; padding: 0;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 12px; overflow: hidden;
}
.alert-types li { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; }
.alert-types li + li { border-top: 1px solid var(--border); }
.alert-types .at-dot {
  width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; flex: none;
  background: var(--idle);
}
.alert-types .at-dot.warn { background: var(--warn); box-shadow: 0 0 6px color-mix(in srgb, var(--warn) 60%, transparent); }
.alert-types .at-dot.err  { background: var(--err);  box-shadow: 0 0 6px color-mix(in srgb, var(--err) 60%, transparent); }
.alert-types .at-dot.ok   { background: var(--ok);   box-shadow: 0 0 6px color-mix(in srgb, var(--ok) 60%, transparent); }
.alert-types .at-title { font-size: 14px; font-weight: 600; }
.alert-types .at-desc { font-size: 12px; color: var(--muted); margin-top: 2px; line-height: 1.4; }

/* low-emphasis test button */
.alerts-test { margin-top: 14px; text-align: center; }
.btn-quiet {
  appearance: none; background: none; border: none; cursor: pointer;
  color: var(--muted); font-family: inherit; font-size: 12px; padding: 6px 10px;
  text-decoration: underline; text-underline-offset: 3px;
}
.btn-quiet:hover { color: var(--fg); }
.btn-quiet:disabled { opacity: 0.5; cursor: default; }

/* on wider screens centre the content column */
@media (min-width: 760px) {
  .tabbar { left: 50%; right: auto; width: 100%; transform: translateX(-50%);
            max-width: 520px; border-radius: 14px 14px 0 0;
            border-left: 1px solid var(--border); border-right: 1px solid var(--border); }
}