/* Per-component restyling of BobsComponents package components (second wave). Plain global CSS, unlayered, so it
   wins over the package's layered rules. Prefer a documented --bob-* variable; a rule here is only for what no
   variable covers (mostly BobFit's 44px touch targets). Sheet overrides live in modal-overrides.css, token
   mapping in bob-theme.css. See docs/COMPONENT-THEME-VARIABLES.md. */

/* RestPicker: BobFit's 44px chips, small muted legend and stacked "Other" box. */
:root {
  --bob-rest-picker-radius: var(--radius-md);
}
.bob-rest-picker__legend {
  margin-bottom: 0.4rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ink-muted);
}
.bob-rest-picker__chips {
  align-items: flex-end;
}
.bob-rest-picker__chip {
  min-width: 56px;
  min-height: 44px;
  padding: 0 0.7rem;
  font-weight: 600;
}
.bob-rest-picker__other {
  flex: 0 0 6.5rem;
  flex-direction: column;
  align-items: stretch;
  gap: 0.2rem;
  font-size: 0.75rem;
  font-weight: 700;
}
.bob-rest-picker__other input {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 0 0.6rem;
  box-sizing: border-box;
  border-radius: var(--radius-md);
  font-size: 1rem;
  font-weight: 400;
}
.bob-rest-picker__hint {
  margin: 0.25rem 0 0;
  font-size: 0.8rem;
}

/* SegmentPicker: 44px touch targets, BobFit's uppercase title, and the pointer drag (DraggableSegmentPicker attaches
   dragReorder.js, which adds .dragging to the lifted row and a .drag-placeholder row, styled in app.css). Bootstrap's
   unlayered reboot gives <p> a bottom margin, so the title and hint restate margin: 0. */
.bob-segment-picker__title {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.bob-segment-picker__hint {
  margin: 0;
  font-size: 0.8rem;
}
.bob-segment-picker__chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.9rem;
  font-weight: 600;
}
.bob-segment-picker__add input {
  min-height: 44px;
  padding: 0 0.85rem;
  font-size: 1rem;
  border-radius: var(--radius-md);
}
.bob-segment-picker__add-button {
  min-height: 44px;
  min-width: 4.5rem;
}
.bob-segment-picker__item {
  background: var(--surface);
  border-radius: var(--radius-md);
}
.bob-segment-picker__item--lifted,
.bob-segment-picker__item.dragging {
  background: var(--surface-strong);
  box-shadow: 0 14px 28px -10px rgba(0, 0, 0, 0.4);
  z-index: 5;
}
.bob-segment-picker__handle,
.bob-segment-picker__remove {
  min-width: 44px;
  min-height: 44px;
  border: none;
  background: none;
  color: var(--ink-muted);
}
.bob-segment-picker__handle {
  cursor: grab;
  touch-action: none; /* dragReorder.js reads pointer movement itself */
}
.bob-segment-picker__item--lifted .bob-segment-picker__handle,
.bob-segment-picker__item.dragging .bob-segment-picker__handle {
  color: var(--accent);
}
@media (hover: hover) {
  .bob-segment-picker__handle:hover,
  .bob-segment-picker__remove:hover:not(:disabled) {
    color: var(--ink);
  }
}

/* ProgressChart: BobFit's card around the plot, mono axis labels, and a 6rem plot. The package chart is
   dependency-free SVG with no JS and draws only the first and last date; BobFit's old per-date dotted gridlines and
   intermediate date ticks are not carried over. Bootstrap's reboot gives <p> a bottom margin, so the empty text
   restates margin: 0. */
:root {
  --bob-progress-chart-height: 6rem;
  --bob-progress-chart-axis-color: var(--ink-muted);
}
.bob-progress-chart {
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: 0.85rem 1rem;
}
.bob-progress-chart__yaxis,
.bob-progress-chart__xaxis {
  font-family: var(--font-mono);
  font-size: 0.72rem;
}
.bob-progress-chart__empty {
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.85rem;
}

/* ActivityHeatmap: BobFit's three streak cards, mono accent numbers, and the accent-2 cell scale. The package
   renders <dl>/<dd> with their own margins, restated here (Bootstrap's reboot is unlayered and wins). */
:root {
  --bob-activity-heatmap-cell-size: 12px;
  --bob-activity-heatmap-level-0: var(--surface-border);
  --bob-activity-heatmap-level-1: color-mix(in srgb, var(--accent-2) 40%, var(--surface-border));
  --bob-activity-heatmap-level-2: color-mix(in srgb, var(--accent-2) 70%, var(--surface-border));
  --bob-activity-heatmap-level-3: var(--accent-2);
}
.bob-activity-heatmap__stats {
  gap: 0.6rem;
  margin: 0 0 1rem;
}
.bob-activity-heatmap__stat {
  flex: 1;
  align-items: stretch;
  gap: 0.1rem;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.bob-activity-heatmap__value {
  margin: 0;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--accent);
}
.bob-activity-heatmap__label {
  color: var(--ink-muted);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.bob-activity-heatmap__scroll {
  padding-bottom: 0.25rem;
}
.bob-activity-heatmap__cell {
  border-radius: 3px;
}
.bob-activity-heatmap__cell--empty {
  background: transparent;
}

/* NotificationBell: BobFit's round 38px header button with the Bootstrap bell glyph (the package draws an emoji, so
   it is blanked and the glyph drawn from the icon font), danger badge, blurred panel. z-index sits one below the
   panel's 50 so the bell's own click-away backdrop covers the page but not the panel. Focus and keyboard behaviour
   (Escape closes and returns focus to the button) come from the package unchanged. */
:root {
  --bob-notification-bell-z: 49;
  --bob-notification-bell-panel-width: 300px;
  --bob-notification-bell-badge-bg: var(--danger, #dc3545);
  --bob-notification-bell-badge-text: #fff;
}
.bob-notification-bell__button {
  width: 38px;
  height: 38px;
  min-width: 38px;
  min-height: 38px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--surface-border);
  background: var(--surface);
  color: var(--ink-muted);
  transition: filter 0.15s ease, transform 0.15s ease;
}
.bob-notification-bell__button:hover { filter: brightness(1.08); }
.bob-notification-bell__button:active { transform: scale(0.96); }
.bob-notification-bell__icon {
  font-size: 0;
}
.bob-notification-bell__icon::before {
  content: "\f18a"; /* bootstrap-icons bi-bell */
  font-family: bootstrap-icons;
  font-size: 1.05rem;
  line-height: 1;
}
.bob-notification-bell__badge {
  top: -4px;
  inset-inline-end: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 16px;
}
.bob-notification-bell__panel {
  top: 48px;
  max-height: 360px;
  padding: 0.5rem;
  background: var(--surface-strong);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border-color: var(--surface-border);
  border-radius: var(--radius-md);
  box-shadow: 0 16px 40px -14px rgba(0, 0, 0, 0.35);
}
.bob-notification-bell__status {
  margin: 0;
  padding: 0.8rem 0.6rem;
  font-size: 0.9rem;
}
.bob-notification-bell__list {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.bob-notification-bell__item {
  padding: 0.55rem 0.6rem;
  border-bottom: 0;
  border-radius: var(--radius-sm);
}
.bob-notification-bell__item:hover {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.bob-notification-bell__message {
  font-size: 0.88rem;
  color: var(--ink);
  line-height: 1.35;
}
.bob-notification-bell__time {
  font-size: 0.72rem;
}