/* shell screens — area-specific components only; tokens only (see docs/UI.md). */

/* --- Status pages (access denied, not found): one centred empty state ------------------- */

.status-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100dvh - var(--topbar-height) * 3);
}
.status-page > .empty-state,
.auth-panel > .empty-state {
  width: 100%;
  max-width: var(--container-xl);
  border-style: solid;
  border-color: var(--border);
  background: var(--card);
}
.empty-state-icon.is-danger {
  background: var(--danger-soft);
  color: var(--destructive);
}

/* --- Auth pages: a header action (theme) that stays at the right edge on phones -------------- */

@media (max-width: 639px) {
  .auth-header {
    position: relative;
  }
  .auth-header-action {
    position: absolute;
    right: calc(var(--spacing) * 4);
  }
}

/* --- Chat thread (feedback dialog): bubbles, mine on the right -------------------------------- */

.chat-thread {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 3);
  height: calc(var(--spacing) * 85);
  overflow-y: auto;
  padding: calc(var(--spacing) * 3);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--muted);
}
.chat-thread-note {
  margin: auto;
  color: var(--muted-foreground);
  font-size: var(--text-xs);
  text-align: center;
}
.chat-msg-row {
  display: flex;
}
.chat-msg-row.is-me {
  justify-content: flex-end;
}
.chat-msg-wrapper {
  max-width: 80%;
}
.chat-bubble {
  padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
  font-size: var(--text-control);
}
.is-me .chat-bubble {
  border-color: transparent;
  background: var(--accent);
  color: var(--accent-foreground);
}
.chat-sender-name {
  margin-bottom: calc(var(--spacing) * 0.5);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
}
.chat-msg-body {
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.chat-meta {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--spacing) * 2);
  margin-top: calc(var(--spacing) * 1);
  color: var(--muted-foreground);
  font-size: var(--text-2xs);
}

/* --- Compact selects in page actions (dashboard period pickers) ------------------------------ */

.input.input-auto {
  width: auto;
  height: calc(var(--spacing) * 8);
}

/* --- KPI cells that open a page: buttons laid out like .stat -------------------------------- */

.stat-link {
  align-items: flex-start;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--default-transition-duration);
}
.stat-link:hover {
  background: color-mix(in srgb, var(--muted) 50%, transparent);
}
.stat-link:focus-visible {
  outline: none;
  box-shadow: inset var(--focus-ring);
}
.stat-link .stat-label {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 1);
}
.stat-link .stat-label .icon {
  opacity: 0;
  transition: opacity var(--default-transition-duration);
}
.stat-link:hover .stat-label .icon,
.stat-link:focus-visible .stat-label .icon {
  opacity: 1;
}
/* A status word in a KPI cell: one size down from the metric so it fits. */
.stat-value-text {
  font-size: var(--text-lg);
  line-height: var(--text-metric--line-height);
}

/* --- Dashboard: a wide chart beside a narrow list ------------------------------------------- */

.dashboard-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: calc(var(--spacing) * 4);
}
@media (min-width: 1100px) {
  .dashboard-split {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  }
}

/* --- Chart parts: legend, swatch and hover tooltip ------------------------------------------- */

.chart-host {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
}
/* The chart fills whatever height its card gets beside its neighbour. */
.chart-host > .chart-frame {
  flex: 1;
  min-height: calc(var(--spacing) * 65);
}
.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--spacing) * 4);
  font-size: var(--text-xs);
  color: var(--muted-foreground);
}
.chart-legend-item {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 1.5);
}
.chart-swatch {
  display: inline-block;
  width: calc(var(--spacing) * 2.5);
  height: calc(var(--spacing) * 2.5);
  flex-shrink: 0;
  border-radius: var(--radius-mark);
  background: var(--muted-foreground);
}
.chart-hit {
  cursor: pointer;
  outline: none;
}
.chart-hit:hover > rect,
.chart-hit:focus-visible > rect {
  fill: color-mix(in srgb, var(--muted) 60%, transparent);
}
.chart-tooltip {
  position: absolute;
  top: 0;
  z-index: var(--z-popover);
  min-width: calc(var(--spacing) * 44);
  padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--popover);
  color: var(--popover-foreground);
  box-shadow: var(--shadow-md);
  font-size: var(--text-xs);
  pointer-events: none;
}
.chart-tooltip-title {
  margin-bottom: calc(var(--spacing) * 1);
  font-weight: var(--font-weight-semibold);
}
.chart-tooltip-row {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 1.5);
  color: var(--muted-foreground);
}
.chart-tooltip-row > span:first-child {
  width: calc(var(--spacing) * 2.5);
}
.chart-tooltip-row b {
  margin-left: auto;
  padding-left: calc(var(--spacing) * 4);
  color: var(--foreground);
  font-weight: var(--font-weight-medium);
}

/* --- Metric list: clickable label · value rows inside a flush card --------------------------- */

.metric-list {
  display: flex;
  flex-direction: column;
}
.metric-list-scroll {
  max-height: calc(var(--spacing) * 100);
  overflow-y: auto;
}
.metric-list-heading {
  padding: calc(var(--spacing) * 4) calc(var(--spacing) * 5) calc(var(--spacing) * 1);
  color: var(--muted-foreground);
}
.metric-row {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 2);
  width: 100%;
  padding: calc(var(--spacing) * 3) calc(var(--spacing) * 5);
  border-top: 1px solid var(--line);
  font-size: var(--text-sm);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--default-transition-duration);
}
.metric-list > .metric-row:first-child,
.metric-list-heading + .metric-row {
  border-top: 0;
}
.metric-row:hover {
  background: color-mix(in srgb, var(--muted) 50%, transparent);
}
.metric-row:focus-visible {
  outline: none;
  box-shadow: inset var(--focus-ring);
}
.metric-row-inline,
.metric-row-head {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--spacing) * 3);
}
.metric-row-head {
  display: flex;
  align-self: stretch;
  min-width: 0;
}

/* --- Tables whose rows open something ------------------------------------------------------- */

.row-link {
  cursor: pointer;
}
.drilldown-table-wrap {
  max-height: 60vh;
  overflow-y: auto;
}

/* --- Code block (raw JSON payloads) and a changed row in a before/after table ---------------- */

.code-block {
  max-height: calc(var(--spacing) * 110);
  overflow: auto;
  margin: 0;
  padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--muted);
  color: var(--foreground);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  white-space: pre;
}
.code-block-sm {
  max-height: calc(var(--spacing) * 25);
  padding: calc(var(--spacing) * 1.5) calc(var(--spacing) * 2);
}
.table tbody tr.diff-changed {
  background: var(--warning-soft);
}

/* --- <search-dropdown> / <multi-search-dropdown>: an input with a results menu ---------------- */

search-dropdown,
multi-search-dropdown {
  display: block;
}
.search-dropdown-container {
  position: relative;
}
.search-dropdown-container > .input {
  padding-right: calc(var(--spacing) * 9);
}
.search-dropdown-clear {
  position: absolute;
  top: 50%;
  right: calc(var(--spacing) * 1.5);
  transform: translateY(-50%);
}
.search-dropdown-results {
  left: 0;
  right: 0;
  max-height: calc(var(--spacing) * 70);
  overflow-y: auto;
  transform-origin: top left;
}
.search-dropdown-results.above {
  top: auto;
  bottom: calc(100% + var(--spacing) * 1.5);
  transform-origin: bottom left;
}
.search-dropdown-item {
  cursor: pointer;
}
.search-dropdown-empty {
  color: var(--muted-foreground);
  cursor: default;
}
.search-dropdown-empty:hover {
  background: none;
}
/* The multi-select: chips and the query input wrap inside one input-like box. */
.input.multi-search-input {
  display: flex;
  align-items: center;
  height: auto;
  min-height: calc(var(--spacing) * 9);
  padding: calc(var(--spacing) * 1) calc(var(--spacing) * 1.5);
  cursor: text;
}
.multi-search-input:focus-within {
  border-color: var(--ring);
  box-shadow: var(--focus-ring-field);
}
.input-chips-container {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--spacing) * 1);
  min-width: 0;
}
.input-chips-container > input {
  flex: 1;
  min-width: calc(var(--spacing) * 20);
  height: calc(var(--spacing) * 6);
  padding: 0 calc(var(--spacing) * 1.5);
  border: 0;
  background: transparent;
  color: var(--foreground);
  font-size: var(--text-control);
  outline: none;
}
/* A picked value in the multi-select search (a draggable badge). */
.picked-item {
  gap: calc(var(--spacing) * 1);
  cursor: grab;
}
.chip-remove {
  display: inline-flex;
  margin-right: calc(var(--spacing) * -0.5);
  border-radius: var(--radius-mark);
  color: inherit;
  opacity: 0.7;
  cursor: pointer;
}
.chip-remove:hover {
  opacity: 1;
}

/* --- Button tooltip (js/global-button-tooltip.js) --------------------------------------------- */

.global-button-tooltip {
  position: fixed;
  z-index: var(--z-toast);
  max-width: calc(var(--spacing) * 70);
  padding: calc(var(--spacing) * 1) calc(var(--spacing) * 2);
  border-radius: var(--radius-sm);
  background: var(--primary);
  color: var(--primary-foreground);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  pointer-events: none;
  opacity: 0;
  transform: translateY(calc(var(--spacing) * 0.75));
  transition: opacity var(--default-transition-duration) var(--ease-out), transform var(--default-transition-duration) var(--ease-out);
  box-shadow: var(--shadow-md);
}
.global-button-tooltip.is-visible {
  opacity: 1;
  transform: none;
}

/* --- Avatar: a medium size between the default (32px) and .avatar-lg ------------------------- */

.avatar-md {
  width: calc(var(--spacing) * 10);
  height: calc(var(--spacing) * 10);
  font-size: var(--text-xs);
}

/* --- Social wall: feed beside a narrow aside ------------------------------------------------ */

.wall-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: calc(var(--spacing) * 6);
  align-items: start;
}
@media (min-width: 1100px) {
  .wall-layout {
    grid-template-columns: minmax(0, 1fr) calc(var(--spacing) * 80);
  }
}

/* Today's celebrations: small hairline tiles. */
.celebration-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(var(--spacing) * 60), 1fr));
  gap: calc(var(--spacing) * 3);
}
.celebration-grid > .empty-state,
.celebration-grid > p {
  grid-column: 1 / -1;
}
.card .celebration-grid > .empty-state {
  margin: 0;
}
.celebration-card {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 3);
  padding: calc(var(--spacing) * 3.5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
}

/* A card-sized button that opens the post composer. */
.composer-prompt {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--spacing) * 3);
  padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--default-transition-duration);
}
.composer-prompt:hover {
  border-color: var(--border-strong);
}
.composer-prompt:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.composer-prompt-field {
  display: inline-flex;
  flex: 1;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  min-width: 0;
  height: calc(var(--spacing) * 9);
  padding: 0 calc(var(--spacing) * 3);
  border: 1px solid var(--input);
  border-radius: var(--radius-md);
  overflow: hidden;
  color: var(--muted-foreground);
  font-size: var(--text-control);
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* People list rows (upcoming celebrations). */
.person-list {
  display: flex;
  flex-direction: column;
}
.person-row {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 3);
  padding: calc(var(--spacing) * 3) calc(var(--spacing) * 5);
  border-top: 1px solid var(--line-soft);
}
.person-row:first-child {
  border-top: 0;
}
.person-list-note {
  padding: calc(var(--spacing) * 4) calc(var(--spacing) * 5);
  color: var(--muted-foreground);
  font-size: var(--text-control);
}
.guideline-list {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 2);
  padding-left: calc(var(--spacing) * 4);
  color: var(--muted-foreground);
  font-size: var(--text-control);
  list-style: disc;
}

/* A feed post. Urgent and pinned posts carry a coloured hairline on the left. */
.post {
  gap: 0;
  padding: calc(var(--spacing) * 5) 0 0;
}
.post.is-urgent {
  box-shadow: inset calc(var(--spacing) * 0.5) 0 0 var(--destructive);
}
.post.is-pinned {
  box-shadow: inset calc(var(--spacing) * 0.5) 0 0 var(--brand);
}
.post-title {
  font-size: var(--text-card-title);
  font-weight: var(--font-weight-semibold);
}
.post-text {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.post-image {
  max-width: 100%;
  max-height: calc(var(--spacing) * 95);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  object-fit: contain;
}
.post-attachment {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--spacing) * 3);
  padding: calc(var(--spacing) * 2.5) calc(var(--spacing) * 3);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--background);
}
.post-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--spacing) * 2);
  margin-top: calc(var(--spacing) * 4);
  padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
  border-top: 1px solid var(--line);
}
.reaction {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 1);
  height: calc(var(--spacing) * 7);
  padding: 0 calc(var(--spacing) * 2);
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  color: var(--muted-foreground);
  font-size: var(--text-xs);
  cursor: pointer;
  transition: background-color var(--default-transition-duration), border-color var(--default-transition-duration);
}
.reaction:hover {
  background: var(--muted);
}
.reaction.active {
  border-color: var(--brand);
  background: var(--accent);
  color: var(--accent-foreground);
}
.reaction:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.post-comments {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 3);
  padding: calc(var(--spacing) * 4) calc(var(--spacing) * 5);
  border-top: 1px solid var(--line);
  background: var(--background);
}
.post-comments[hidden] {
  display: none;
}
.comment {
  display: flex;
  align-items: flex-start;
  gap: calc(var(--spacing) * 2.5);
}
.comment-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: calc(var(--spacing) * 0.5);
  min-width: 0;
  padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
}
.audit-table-wrap {
  max-height: 50vh;
  overflow-y: auto;
}

/* Confetti after a wish or an acknowledgement (colours come from the chart tokens in JS). */
.confetti-piece {
  position: fixed;
  z-index: var(--z-toast);
  border-radius: var(--radius-mark);
  pointer-events: none;
  animation: confetti-fall linear forwards;
}
@keyframes confetti-fall {
  to {
    opacity: 0;
    transform: translateY(105vh) rotate(720deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .confetti-piece {
    display: none;
  }
}