/*
  The bell, the notification list, the notification settings and the install hint. The mock has no screen
  of its own for these, so they are built from its parts (docs/mockup/hauswerk-prototyp.html): the icon
  tile of the app bar, the accent dot, the card with its rows and the time column in mono. Everything
  builds on the tokens of hauswerk.css, so light and dark follow the theme.
*/

/* --- bell ------------------------------------------------------------------------- */

.hw-bell {
  position: relative;
}

.hw-bell-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  border: 2px solid var(--hw-ground);
  background: var(--bsft-color-primary);
  color: var(--bsft-color-primary-contrast);
  font-family: var(--hw-font-mono);
  font-size: 10.5px;
  line-height: 14px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* --- notification list ----------------------------------------------------------------- */

.hw-inbox-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.hw-inbox-item + .hw-inbox-item {
  border-top: 1px solid var(--bsft-color-border);
}

.hw-inbox-open {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 10px 0;
  border: 0;
  background: transparent;
  color: var(--bsft-color-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.hw-inbox-when {
  display: flex;
  flex: none;
  align-items: center;
  gap: 6px;
  padding-top: 2px;
}

.hw-inbox-dot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--bsft-color-primary);
}

.hw-inbox-text {
  flex: 1;
  min-width: 0;
}

.hw-inbox-text b {
  display: block;
  font-weight: 400;
  overflow-wrap: anywhere;
}

.hw-inbox-item.is-unread .hw-inbox-text b {
  font-weight: 700;
}

.hw-inbox-text small {
  display: block;
  color: var(--bsft-color-muted);
  font-size: 13px;
}

.hw-inbox-time {
  font-family: var(--hw-font-mono);
  font-size: 12.5px;
  color: var(--bsft-color-muted);
  font-variant-numeric: tabular-nums;
}

.hw-inbox-pages {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.hw-inbox-pages .bsft-button {
  flex: 1;
}

/* --- notification settings -------------------------------------------------------------- */

.hw-switches {
  display: flex;
  flex-direction: column;
}

.hw-switch-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 8px 0;
  cursor: pointer;
}

.hw-switch-row + .hw-switch-row {
  border-top: 1px solid var(--bsft-color-border);
}

.hw-switch-text {
  flex: 1;
  min-width: 0;
}

.hw-switch-text b {
  display: block;
}

.hw-switch-text small {
  display: block;
  color: var(--bsft-color-muted);
  font-size: 13px;
}

.hw-switch {
  appearance: none;
  position: relative;
  flex: none;
  width: 46px;
  height: 28px;
  margin: 0;
  border-radius: 999px;
  border: 1px solid var(--bsft-color-border);
  background: var(--hw-surface-2);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.hw-switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--bsft-color-muted);
  transition: transform 0.15s ease;
}

.hw-switch:checked {
  background: var(--bsft-color-primary);
  border-color: var(--bsft-color-primary);
}

.hw-switch:checked::after {
  background: var(--bsft-color-primary-contrast);
  transform: translateX(18px);
}

.hw-switch:focus-visible {
  outline: 2px solid var(--bsft-color-primary);
  outline-offset: 2px;
}

.hw-switch:disabled {
  opacity: 0.6;
  cursor: default;
}

.hw-device {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-top: 10px;
  padding: 12px;
  border-radius: 14px;
  background: var(--hw-surface-2);
}

.hw-device-state {
  margin: 0;
}

.hw-settings .hw-notice {
  margin-top: 10px;
}

@media (prefers-reduced-motion: reduce) {
  .hw-switch,
  .hw-switch::after {
    transition: none;
  }
}

/* --- install hint ------------------------------------------------------------------ */

.hw-install {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.hw-install-mark img {
  display: block;
  border-radius: 11px;
}

.hw-install-text {
  flex: 1;
  min-width: 0;
}

.hw-install-text .hw-card-title {
  margin-bottom: 4px;
}

.hw-install-text p {
  margin: 0 0 10px;
  color: var(--bsft-color-muted);
}

.hw-install-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* --- Android app (settings card; the update hint is an hw-banner) ------------------ */

.hw-install-text .hw-android-app-state {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--bsft-color-text);
}

.hw-install-text .hw-android-app-state.is-current {
  color: var(--bsft-color-success);
}

.hw-android-app-size {
  margin-left: 8px;
  font-family: var(--hw-font-mono);
  font-size: 13px;
  font-weight: 500;
  opacity: 0.85;
}

.hw-android-app .hw-install-actions + .hw-hint {
  margin-top: 10px;
}