/* css/pages.css — screen, header, list layouts */

.screen { display: flex; flex-direction: column; min-height: 100dvh; }
.loading { padding: 2em; color: var(--muted); text-align: center; }

.app-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: .6em .8em;
  padding-top: calc(.6em + env(safe-area-inset-top, 0px));
  gap: .5em;
  position: sticky; top: 0;
  background: linear-gradient(var(--bg) 70%, transparent);
  z-index: 5;
}
.header-left, .header-right { display: flex; align-items: center; gap: .3em; min-width: 44px; }
.header-right { justify-content: flex-end; }
.header-center { flex: 1; min-width: 0; text-align: center; }
.header-title {
  font-weight: 600; font-size: 1.05em;
  max-width: 60vw; margin: 0 auto;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: block;
}
.header-spacer { display: inline-block; width: 40px; }
.float-help { position: absolute; top: calc(.6em + env(safe-area-inset-top, 0px)); right: .8em; }

.page-body { padding: 0 1em 3em; flex: 1; }

.row-list { display: flex; flex-direction: column; gap: .5em; margin: 1em 0; }
.event-row {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .9em 1em;
  text-align: left;
}
.event-row-name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 65%; }
.event-row-date { color: var(--muted-2); font-size: .85em; }

.fab-row { display: flex; gap: .6em; margin: 1.2em 0 .6em; }

.participant-list { display: flex; flex-direction: column; gap: .4em; margin: 1em 0; }
.participant-row {
  display: flex; align-items: center; gap: .7em;
  padding: .6em .2em; text-align: left;
}
.participant-row.muted-row { opacity: .55; }
.participant-name { flex: 1; display: flex; align-items: center; gap: .3em; }
.admin-badge { width: 14px; height: 14px; opacity: .8; }

.info-name { font-size: 1.3em; }
.info-date { color: var(--muted); margin-bottom: 1em; }
.info-total {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: .8em 1em; background: var(--panel); border-radius: var(--radius);
  margin-bottom: 1em; border: 1px solid var(--line);
}
.info-total-amt { font-size: 1.2em; font-weight: 600; }

.pill {
  border-radius: 999px; padding: .25em .7em; font-size: .85em; font-weight: 600;
  border: 1.5px solid var(--muted-2); color: var(--text);
}
.pill-pos { border-color: var(--positive-outline); background: var(--positive-soft); }
.pill-neg { border-color: var(--negative-outline); background: var(--negative-soft); }
.pill-zero { border-color: var(--muted-2); }

.participant-profile { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .3em; }
.stat-row {
  display: flex; justify-content: space-between; width: 100%; max-width: 320px;
  padding: .7em 0; border-bottom: 1px solid var(--line);
}
.stat-label { color: var(--muted); }
.stat-val { font-weight: 600; }

.roster-list { display: flex; flex-direction: column; gap: .4em; }
.roster-row {
  display: flex; align-items: center; gap: .7em;
  padding: .7em .5em; border-radius: var(--radius-sm);
  background: var(--panel); border: 1px solid var(--line);
  text-align: left;
}