/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* ─── Design Tokens ──────────────────────────────────────────────────────── */
/*
 * Palette derived from the group's own event poster art.
 * Rename or replace only here — every use below references these vars.
 */
:root {
  /* Brand colors */
  --color-plum:        #4a1a6b; /* Plum Night — primary surfaces, buttons, navbar */
  --color-magenta:     #cc33cc; /* Carnival Magenta — hover/active only (Magenta Discipline) */
  --color-lavender:    #b399d4; /* Lavender Skirt — secondary accents, empty state icons */
  --color-violet:      #7b4fa6; /* Violet Mid — nav dividers, section labels, geo icon */
  --color-ivory:       #f0e6a0; /* Warm Ivory — text on dark surfaces (never pure white) */

  /* Neutral surfaces */
  --color-surface:     #fdfbf7; /* Surface White — card and container backgrounds */
  --color-surface-alt: #f2eff8; /* Surface Grey — page bg, table rows, geo row */
  --color-border:      #ccc;    /* Default input border */
  --color-border-alt:  #ddd;    /* Table / divider border */

  /* Text */
  --color-text:        #1a0a2e; /* Text Primary — body on light surfaces */
  --color-text-muted:  #5a4a6e; /* Text Secondary — meta, hints, labels */

  /* State */
  --color-disabled:    #b8aac8; /* Disabled — lilac-tinted, not flat grey */

  /* Semantic: success */
  --color-success-text:   #2d7a46;
  --color-success-bg:     #e6ffed;
  --color-success-border: #8cd9a1;

  /* Semantic: error */
  --color-error-text:   #a94442;
  --color-error-bg:     #fff0f0;
  --color-error-border: #e89f9f;

  /* Shadows — plum-tinted, never neutral grey */
  --shadow-surface: 0 2px 4px rgba(26, 10, 46, 0.10);
  --shadow-focus:   0 0 3px rgba(74, 26, 107, 0.50);

  /* Border radii */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;
}

/* ─── Base ───────────────────────────────────────────────────────────────── */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Arial", sans-serif;
  background-color: var(--color-surface-alt);
  color: var(--color-text);
  line-height: 1.6;
  overflow-x: hidden;
}

/* ─── Layout ─────────────────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  padding: 15px;
  background-color: var(--color-surface);
  border-radius: 10px;
}

.admin-layout .container {
  max-width: 1200px;
}

.admin-layout .container button,
.admin-layout .container input[type="submit"],
.admin-layout .container a.button {
  display: inline-block;
  width: auto;
}

.admin-layout .container a.button.clear-button,
.admin-layout .container a.button.secondary,
.admin-layout .container a.button.primary {
  padding: 4px 8px;
}

.admin-layout .filter-fields input {
  margin: 0;
}

/* ─── Header ─────────────────────────────────────────────────────────────── */
header {
  text-align: center;
  padding: 10px;
}

header h1 {
  font-size: 1.8rem;
  color: var(--color-plum);
}

/* ─── Frequency Section ──────────────────────────────────────────────────── */
.frequencies {
  margin-top: 30px;
}

.frequencies h3 {
  font-size: 1.4rem;
  color: var(--color-plum);
  margin-bottom: 10px;
}

.frequencies ul {
  list-style-type: none;
}

.frequencies ul li {
  padding: 10px;
  margin: 5px 0;
  background-color: var(--color-surface-alt);
  border-radius: var(--radius-md);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.frequencies ul li.present {
  background-color: var(--color-success-bg);
  color: var(--color-success-text);
}

.frequencies ul li.missed {
  background-color: var(--color-error-bg);
  color: var(--color-error-text);
}

.frequencies ul li span {
  font-weight: bold;
}

/* ─── Buttons ────────────────────────────────────────────────────────────── */
button,
a.button,
input[type="submit"] {
  width: 100%;
  padding: 10px;
  background-color: var(--color-plum);
  color: var(--color-ivory);
  border: none;
  border-radius: var(--radius-md);
  font-size: 1.1rem;
  margin-top: 15px;
  cursor: pointer;
}

button:disabled,
button:hover:disabled,
input[type="submit"]:disabled,
input[type="submit"]:hover:disabled {
  background-color: var(--color-disabled);
  color: var(--color-surface);
  cursor: not-allowed;
}

a.button {
  text-decoration: none;
  display: inline-block;
  text-align: center;
}

a.button.secondary {
  background-color: var(--color-text-muted);
  color: var(--color-ivory);
}

a.button.secondary:hover {
  background-color: var(--color-text);
}

button:hover,
a.button.primary:hover,
input[type="submit"]:hover {
  background-color: var(--color-magenta);
}

@media screen and (max-width: 768px) {
  header h1 {
    font-size: 1.6rem;
  }

  .frequencies h3 {
    font-size: 1.2rem;
  }

  .frequencies ul li {
    font-size: 0.9rem;
  }

  button,
  input[type="submit"] {
    font-size: 1rem;
  }
}

/* ─── Navigation ─────────────────────────────────────────────────────────── */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--color-plum);
  padding: 12px 15px;
  color: var(--color-ivory);
  position: relative;
}

.logo {
  font-size: 1.4rem;
  font-weight: bold;
  flex-shrink: 0;
}

.logo a {
  color: var(--color-ivory);
  text-decoration: none;
}

/* User presence slot: avatar + first name */
.navbar__user {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--color-lavender);
  font-size: 0.875rem;
  font-weight: 500;
  padding: 4px 0;
  margin-left: auto;
  margin-right: 16px;
  transition: color 200ms ease-out;
  flex-shrink: 0;
}

.navbar__user:hover {
  color: var(--color-ivory);
}

.navbar__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--color-violet);
  display: block;
  flex-shrink: 0;
  transition: border-color 200ms ease-out;
}

.navbar__user:hover .navbar__avatar {
  border-color: var(--color-lavender);
}

.navbar__name {
  max-width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hamburger {
  font-size: 1.8rem;
  cursor: pointer;
  display: block;
  flex-shrink: 0;
}

.nav-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  background-color: var(--color-plum);
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  display: none;
  flex-direction: column;
  z-index: 1000;
  transition: opacity 300ms ease-out;
}

.nav-menu li {
  border-top: 1px solid var(--color-violet);
}

.nav-menu li a {
  color: var(--color-ivory);
  text-decoration: none;
  padding: 15px;
  display: block;
  transition: color 200ms ease-out;
}

.nav-menu li a:hover {
  color: var(--color-lavender);
}

.nav-menu.open {
  display: flex;
}

@media screen and (min-width: 768px) {
  .hamburger {
    display: none;
  }

  .navbar__user {
    margin-right: 0;
    border-right: 1px solid var(--color-violet);
    padding-right: 16px;
    margin-right: 16px;
  }

  .nav-menu {
    display: flex !important;
    position: static;
    flex-direction: row;
    gap: 20px;
    background-color: transparent;
    margin-left: 0;
  }

  .nav-menu li {
    border: none;
  }

  .nav-menu li a {
    padding: 10px;
  }
}

/* ─── Video ──────────────────────────────────────────────────────────────── */
video {
  max-width: 100%;
  opacity: 0.3;
  max-height: 570px;
}

video.active {
  opacity: 1;
}

/* ─── Flash Messages ─────────────────────────────────────────────────────── */
.message {
  padding: 1em;
  margin: 1em 0;
  border-radius: var(--radius-md);
  font-family: Arial, sans-serif;
  font-size: 1rem;
  width: 100%;
  box-shadow: 0 0 8px rgba(26, 10, 46, 0.06);
}

.success {
  background-color: var(--color-success-bg);
  color: var(--color-success-text);
  border: 1px solid var(--color-success-border);
}

.error {
  background-color: var(--color-error-bg);
  color: var(--color-error-text);
  border: 1px solid var(--color-error-border);
}

/* Aviso permanente de pendência financeira */
.open-payments {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
}

.open-payments--pending {
  background-color: #fff6db;
  color: #7a5a00;
  border: 1px solid #e8d3a0;
}

.open-payments--late {
  background-color: var(--color-error-bg);
  color: var(--color-error-text);
  border: 1px solid var(--color-error-border);
}

.open-payments__text {
  margin: 0;
  flex: 1 1 240px;
  font-size: 0.9375rem;
  line-height: 1.45;
}

.open-payments__link {
  flex: 0 0 auto;
  display: inline-block;
  padding: 8px 16px;
  border-radius: var(--radius-full);
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  color: #fff;
}

.open-payments--pending .open-payments__link {
  background-color: #7a5a00;
}

.open-payments--late .open-payments__link {
  background-color: var(--color-error-text);
}

/* ─── Form Inputs ────────────────────────────────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="time"],
textarea,
select {
  width: 100%;
  padding: 12px;
  margin-top: 8px;
  margin-bottom: 15px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 1rem;
}

input.inline {
  width: auto;
}

form.inline {
  display: flex;
  gap: 8px;
  align-items: center;
}

form.inline textarea {
  flex: 1;
  min-height: 50px;
  resize: vertical;
  margin: 0;
}

form.inline button[type="submit"] {
  margin-top: 0;
  background-color: transparent;
  padding: 0;
}

form.button_to {
  display: inline-block;
}

form.button_to button {
  margin-top: 0;
  background-color: transparent;
  padding: 0;
}

form.button_to svg {
  margin-left: 10px;
  margin-bottom: -5px;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--color-plum);
  box-shadow: var(--shadow-focus);
}

@media screen and (max-width: 768px) {
  input[type="text"],
  input[type="tel"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  textarea,
  select {
    font-size: 1rem;
    padding: 10px;
  }
}

/* ─── Filter Form + Activities Table ─────────────────────────────────────── */
.filter-form {
  margin-bottom: 20px;
}

.filter-form .filter-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
}

.filter-form label {
  font-weight: bold;
}

.filter-form .button.filter-button,
.filter-form .button.clear-button {
  padding: 8px 12px;
  background-color: var(--color-plum);
  color: var(--color-ivory);
  border-radius: var(--radius-sm);
  border: none;
  text-decoration: none;
}

.filter-form .button.clear-button {
  background-color: var(--color-text-muted);
}

.filter-form input[type="text"] {
  padding: 7px 6px;
}

.filter-form input[type="date"],
.filter-form select {
  padding: 6px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
}

.filter-form select {
  margin-bottom: 0;
}

.activities-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}

.activities-table th,
.activities-table td {
  border: 1px solid var(--color-border-alt);
  padding: 8px;
  text-align: left;
}

.activities-table th {
  background-color: var(--color-surface-alt);
}

.activities-table tr:nth-child(even) {
  background-color: #f5f3fa;
}

.activities-table tr:hover {
  background-color: #ece8f8;
}

/* ─── Inline Validation ──────────────────────────────────────────────────── */
/* Banner on top of a form whose fields show their own errors inline */
.form-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 1.25em;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  border-left: 4px solid var(--color-error-text);
  background-color: var(--color-error-bg);
  color: var(--color-error-text);
  font-size: 0.9375rem;
}

.form-alert__icon {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;
}

.form-alert__title {
  margin: 0;
  font-weight: 600;
}

.form-alert__detail {
  margin: 4px 0 0;
}

.inline-error {
  color: var(--color-error-text);
  font-size: 0.875rem;
  margin-top: -10px;
  margin-bottom: 10px;
}

/* Form-group fields have no bottom margin, so the error sits right below */
.form-group .inline-error {
  margin: 6px 0 0;
}

.field_with_errors input,
.field_with_errors textarea,
.field_with_errors select {
  border-color: var(--color-error-text);
  background-color: var(--color-error-bg);
}

/* ─── Profile Image ──────────────────────────────────────────────────────── */
.admin-activity-show {
  text-align: center;
}

/* ─── Checkin Histogram ──────────────────────────────────────────────────── */
.checkin-histogram {
  margin-top: 40px;
  padding: 20px;
  background-color: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-surface);
}

.checkin-histogram h2 {
  font-size: 1.4rem;
  color: var(--color-plum);
  margin-bottom: 20px;
}

.histogram-container {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 8px;
  min-height: 300px;
  padding: 20px 10px;
  border-bottom: 2px solid var(--color-border-alt);
  flex-wrap: wrap;
}

.histogram-bar-wrapper {
  flex: 1;
  min-width: 60px;
  max-width: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.histogram-bar {
  width: 100%;
  min-height: 20px;
  background-color: var(--color-plum);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 5px;
  transition: background-color 300ms ease-out;
}

.histogram-bar:hover {
  background-color: var(--color-magenta);
}

.histogram-count {
  color: var(--color-ivory);
  font-weight: bold;
  font-size: 0.9rem;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.histogram-label {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  text-align: center;
  word-break: break-word;
  line-height: 1.2;
}

@media screen and (max-width: 768px) {
  .checkin-histogram {
    padding: 15px;
  }

  .checkin-histogram h2 {
    font-size: 1.2rem;
  }

  .histogram-container {
    gap: 4px;
    padding: 15px 5px;
    min-height: 250px;
  }

  .histogram-bar-wrapper {
    min-width: 40px;
    max-width: 80px;
    gap: 4px;
  }

  .histogram-label {
    font-size: 0.65rem;
  }

  .histogram-count {
    font-size: 0.75rem;
  }
}

@media screen and (max-width: 480px) {
  .histogram-container {
    flex-wrap: wrap;
    overflow-x: auto;
    justify-content: flex-start;
    padding-bottom: 10px;
  }

  .histogram-bar-wrapper {
    min-width: 35px;
  }

  .histogram-label {
    font-size: 0.6rem;
  }
}

/* ─── Checkin Map ────────────────────────────────────────────────────────── */
.checkin-map {
  margin-top: 40px;
  padding: 20px;
  background-color: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-surface);
}

.checkin-map h2 {
  font-size: 1.4rem;
  color: var(--color-plum);
  margin-bottom: 20px;
  text-align: center;
}

.checkin-map__canvas {
  height: 400px;
  border-radius: var(--radius-md);
}

.checkin-map__legend {
  margin-top: 12px;
  font-size: 0.85rem;
  text-align: center;
}

.checkin-map__dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 4px 0 12px;
  border-radius: 50%;
}

.checkin-map__dot--location { background: #1d4ed8; }
.checkin-map__dot--inside { background: #16a34a; }
.checkin-map__dot--outside { background: #dc2626; }

/* ─── Checkins List ──────────────────────────────────────────────────────── */
.checkins-list {
  margin-top: 40px;
  padding: 20px;
  background-color: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-surface);
  text-align: left;
}

.checkins-list h2 {
  font-size: 1.4rem;
  color: var(--color-plum);
  margin-bottom: 20px;
  text-align: center;
}

.checkins-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}

.checkins-table th,
.checkins-table td {
  border: 1px solid var(--color-border-alt);
  padding: 12px;
  text-align: left;
}

.checkins-table th {
  background-color: var(--color-surface-alt);
  font-weight: bold;
  color: var(--color-text);
}

.checkins-table tr:nth-child(even) {
  background-color: #f5f3fa;
}

.checkins-table tr:hover {
  background-color: #ece8f8;
}

.checkins-list p {
  text-align: center;
  color: var(--color-text-muted);
  padding: 20px;
  font-style: italic;
}

@media screen and (max-width: 768px) {
  .checkins-list {
    padding: 15px;
  }

  .checkins-list h2 {
    font-size: 1.2rem;
  }

  .checkins-table th,
  .checkins-table td {
    padding: 8px;
    font-size: 0.9rem;
  }
}

@media screen and (max-width: 480px) {
  .checkins-table {
    font-size: 0.85rem;
  }

  .checkins-table th,
  .checkins-table td {
    padding: 6px;
  }
}

/* ─── Check-in Flow ──────────────────────────────────────────────────────── */

/* Shared: done state */
.checkin-done {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 40px 20px 32px;
  text-align: center;
}

.checkin-done__icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background-color: var(--color-success-text);
  color: var(--color-ivory);
  font-size: 2rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.checkin-done__title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.2;
}

.checkin-done__activity {
  font-size: 1rem;
  color: var(--color-text-muted);
  font-weight: 500;
}

.checkin-done__time {
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.checkin-done__link {
  margin-top: 8px;
  background-color: var(--color-text-muted);
}

.checkin-done__link:hover {
  background-color: var(--color-text);
}

/* Scan screen */
.checkin-scan {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.checkin-scan__header {
  padding: 20px 0 16px;
  text-align: center;
}

.checkin-scan__title {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.2;
}

.checkin-scan__meta {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin-top: 4px;
}

/* Camera viewport */
.checkin-scan__viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background-color: var(--color-text);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin: 0 0 4px;
}

.checkin-scan__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 300ms ease-out;
}

.checkin-scan__video.active {
  opacity: 1;
}

.checkin-scan__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.checkin-scan__frame {
  width: 60%;
  aspect-ratio: 1 / 1;
  border: 3px solid var(--color-ivory);
  border-radius: var(--radius-md);
  box-shadow: 0 0 0 9999px rgba(26, 10, 46, 0.45);
}

.checkin-scan__hint {
  position: absolute;
  bottom: 16px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 0.875rem;
  color: var(--color-ivory);
  font-weight: 500;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

.checkin-scan__status {
  min-height: 20px;
  font-size: 0.875rem;
  color: var(--color-text-muted);
  text-align: center;
  padding: 8px 0 4px;
}

.checkin-scan__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 56px;
  padding: 14px 20px;
  background-color: var(--color-plum);
  color: var(--color-ivory);
  border: none;
  border-radius: var(--radius-md);
  font-size: 1.1rem;
  font-weight: 600;
  margin-top: 12px;
  cursor: pointer;
  transition: background-color 200ms ease-out;
}

.checkin-scan__btn:hover:not(:disabled) {
  background-color: var(--color-magenta);
}

.checkin-scan__btn:focus-visible {
  outline: 2px solid var(--color-magenta);
  outline-offset: 2px;
}

.checkin-scan__btn:disabled {
  background-color: var(--color-disabled);
  color: var(--color-surface);
  cursor: not-allowed;
}

.checkin-scan__btn-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

/* Confirm screen */
.checkin-confirm {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-top: 8px;
}

.checkin-confirm__activity {
  padding: 20px 0 24px;
  text-align: center;
}

.checkin-confirm__name {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.2;
}

.checkin-confirm__meta {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin-top: 6px;
}

.checkin-confirm__location {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  font-weight: 500;
  margin-top: 4px;
}

.checkin-confirm__geo {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  background-color: var(--color-surface-alt);
  border-radius: var(--radius-md);
  margin-bottom: 16px;
}

.checkin-confirm__geo-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--color-violet);
  margin-top: 1px;
}

.checkin-confirm__geo-icon svg {
  width: 20px;
  height: 20px;
}

.checkin-confirm__geo-status {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  line-height: 1.4;
}

.checkin-confirm__btn {
  min-height: 56px;
  font-size: 1.1rem;
  font-weight: 600;
  background-color: var(--color-plum);
  color: var(--color-ivory);
}

.checkin-confirm__btn:hover:not(:disabled) {
  background-color: var(--color-magenta);
}

/* Empty / error state */
.checkin-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 48px 20px 32px;
  text-align: center;
}

.checkin-empty__icon {
  width: 64px;
  height: 64px;
  color: var(--color-lavender);
}

.checkin-empty__icon svg {
  width: 64px;
  height: 64px;
}

.checkin-empty__icon--error {
  color: var(--color-error-text);
}

.checkin-empty__title {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-text);
}

.checkin-empty__sub {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  max-width: 52ch;
  line-height: 1.5;
}

@media screen and (min-width: 480px) {
  .checkin-scan__viewport {
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ─── Auth Forms ─────────────────────────────────────────────────────────── */
.auth-form {
  padding: 8px 0 24px;
}

.auth-form__title {
  font-size: clamp(1.4rem, 5vw, 1.8rem);
  font-weight: 700;
  color: var(--color-plum);
  margin-bottom: 24px;
  line-height: 1.15;
}

.auth-form__sub {
  color: var(--color-text-muted);
  font-size: 0.95rem;
  margin-top: -16px;
  margin-bottom: 20px;
  line-height: 1.5;
}

.auth-form__submit {
  margin-top: 8px;
}

.auth-form__links {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.auth-form__links a {
  color: var(--color-text-muted);
  font-size: 0.875rem;
  text-decoration: none;
  border-bottom: 1px solid var(--color-disabled);
  display: inline-block;
  transition: color 150ms ease-out, border-color 150ms ease-out;
}

.auth-form__links a:hover {
  color: var(--color-plum);
  border-color: var(--color-plum);
}

/* ─── Form Group ─────────────────────────────────────────────────────────── */
.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 4px;
  letter-spacing: 0.01em;
}

.form-group input,
.form-group textarea,
.form-group select {
  margin-top: 0;
  margin-bottom: 0;
}

.form-group__hint {
  display: block;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin-top: 2px;
  margin-bottom: 2px;
}

.form-group--checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
}

.form-group--checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--color-plum);
  flex-shrink: 0;
  margin: 0;
}

.form-group--checkbox label {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--color-text);
  cursor: pointer;
}

/* ─── Profile Edit ───────────────────────────────────────────────────────── */
.profile-edit__form {
  padding-top: 4px;
}


/* Identity / avatar block */
.profile-edit__identity {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0 24px;
  cursor: pointer;
}

/* Tappable avatar */
.avatar-upload {
  position: relative;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
  background: none;
  border: 3px solid var(--color-lavender);
  padding: 0;
  cursor: pointer;
  transition: border-color 200ms ease-out;
  flex-shrink: 0;
}

.avatar-upload:hover,
.avatar-upload:focus-visible {
  border-color: var(--color-magenta);
  outline: none;
}

.avatar-upload:focus-visible {
  box-shadow: 0 0 0 3px rgba(204, 51, 204, 0.30);
}

.avatar-upload__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: filter 200ms ease-out;
}

.avatar-upload:hover .avatar-upload__img,
.avatar-upload:focus-visible .avatar-upload__img {
  filter: brightness(0.72);
}

.avatar-upload__img--changed {
  border-color: var(--color-plum);
}

.avatar-upload__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-ivory);
  opacity: 0;
  transition: opacity 200ms ease-out;
  pointer-events: none;
}

.avatar-upload:hover .avatar-upload__overlay,
.avatar-upload:focus-visible .avatar-upload__overlay {
  opacity: 1;
}

.avatar-upload__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.avatar-upload__hint {
  margin-top: 10px;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  text-align: center;
}

/* Section headers with numbering */
.profile-edit__section {
  border: none;
  border-top: 1px solid #e0d9f0;
  padding: 24px 0 8px;
  margin-bottom: 8px;
}

.profile-edit__section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-violet);
  padding: 0;
  margin-bottom: 16px;
  width: 100%;
}

.profile-edit__section-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-plum);
  color: var(--color-ivory);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0;
  flex-shrink: 0;
}

/* 2-column grid for personal data on wider screens */
.profile-edit__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.profile-edit__col-full {
  grid-column: 1 / -1;
}

@media (min-width: 500px) {
  .profile-edit__grid {
    grid-template-columns: 1fr 1fr;
    gap: 0 16px;
  }

  .profile-edit__col-full {
    grid-column: 1 / -1;
  }
}

/* Submit button */
.profile-edit__submit {
  margin-top: 28px;
  width: 100%;
}

.profile-edit__submit:disabled {
  background-color: var(--color-disabled);
  cursor: not-allowed;
}

/* Password-reset banner */
.profile-edit__reset-banner {
  background: rgba(74, 26, 107, 0.05);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-bottom: 8px;
}

.profile-edit__reset-notice {
  color: var(--color-violet);
  margin-bottom: 20px;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.5;
}

/* ─── Admin Edit (mirrors profile-edit, wider canvas) ───────────────────── */
.admin-edit__header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 0 20px;
  border-bottom: 1px solid #e0d9f0;
  margin-bottom: 4px;
  text-align: left;
}

.admin-edit__eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-violet);
  margin: 0;
}

.admin-edit__name {
  font-size: clamp(1.4rem, 3vw, 1.75rem);
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
  line-height: 1.15;
}

.admin-edit__meta {
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  margin: 0;
}

.admin-edit__meta-dot {
  margin: 0 6px;
  color: var(--color-lavender);
}

.admin-edit__form .profile-edit__identity {
  padding-top: 24px;
}

/* Actions row: secondary back + primary submit, side-by-side on wide */
.admin-edit__actions {
  display: flex;
  flex-direction: column-reverse;
  gap: 12px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid #e0d9f0;
}

.admin-layout .container .admin-edit__back {
  display: block;
  text-align: center;
  padding: 10px 16px;
  width: 100%;
}

.admin-layout .container .admin-edit__submit {
  width: 100%;
  margin-top: 0;
}

@media (min-width: 640px) {
  .admin-edit__actions {
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
  }

  .admin-layout .container .admin-edit__back {
    width: auto;
    margin-right: auto;
  }

  .admin-layout .container .admin-edit__submit {
    width: auto;
    padding: 12px 28px;
  }
}

/* Post-form sections (Frequência / Pagamentos) */
.admin-edit__section {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid #e0d9f0;
}

.admin-edit__post-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-violet);
  margin: 0 0 16px;
}

/* Frequência list */
.admin-edit__activity-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.admin-edit__activity {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background-color: var(--color-surface-alt);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
}

.admin-edit__activity--present {
  background-color: var(--color-success-bg);
  color: var(--color-success-text);
  border-color: var(--color-success-border);
}

.admin-edit__activity--missed {
  background-color: var(--color-error-bg);
  color: var(--color-error-text);
  border-color: var(--color-error-border);
}

.admin-edit__activity--absent {
  background-color: var(--color-surface-alt);
  color: var(--color-text-muted);
  border-color: #e0d9f0;
}

.admin-edit__activity-when {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  font-size: 0.9375rem;
}

.admin-edit__activity-date {
  font-weight: 600;
}

.admin-edit__activity-time {
  font-variant-numeric: tabular-nums;
  opacity: 0.8;
  font-size: 0.875rem;
}

.admin-edit__activity-name {
  font-weight: 400;
  opacity: 0.95;
}

.admin-edit__justification,
.admin-edit__justify-form {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 100%;
  min-width: 0;
}

.admin-edit__justification-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.7;
  flex-shrink: 0;
}

.admin-edit__justification-text {
  flex: 1 1 auto;
  font-size: 0.9375rem;
  font-style: italic;
  min-width: 0;
}

.admin-edit__justify-form textarea {
  flex: 1 1 auto;
  margin: 0;
  resize: vertical;
  min-height: 38px;
  font-size: 0.9375rem;
  background-color: var(--color-surface);
}

.admin-layout .container .admin-edit__icon-button {
  width: 36px;
  height: 36px;
  padding: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: currentColor;
  border-radius: var(--radius-md);
  flex-shrink: 0;
  transition: background-color 200ms ease-out, color 200ms ease-out;
}

.admin-layout .container .admin-edit__icon-button:hover {
  background-color: rgba(74, 26, 107, 0.08);
  color: var(--color-plum);
}

/* Gerar cobrança avulsa */
.admin-edit__charge-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 16px;
  padding: 14px;
  border-radius: var(--radius-md);
  background-color: var(--color-surface-alt);
}

.admin-edit__charge-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 160px;
  min-width: 0;
}

.admin-edit__charge-field label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.admin-layout .container .admin-edit__charge-field select {
  margin: 0;
  background-color: var(--color-surface);
}

.admin-layout .container .admin-edit__charge-submit {
  margin: 0;
  width: auto;
  min-height: 44px;
  padding: 8px 18px;
  font-size: 0.9375rem;
}

@media (max-width: 480px) {
  .admin-layout .container .admin-edit__charge-submit {
    width: 100%;
  }
}

/* Pagamentos table */
.admin-edit__table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-md);
  border: 1px solid #e0d9f0;
}

.admin-edit__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.admin-edit__table th,
.admin-edit__table td {
  text-align: left;
  padding: 10px 14px;
  vertical-align: middle;
}

.admin-edit__table thead th {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  background-color: var(--color-surface-alt);
  border-bottom: 1px solid #e0d9f0;
}

.admin-edit__table tbody tr + tr td {
  border-top: 1px solid #ece6f5;
}

.admin-edit__table tbody tr:hover {
  background-color: #faf7ff;
}

.admin-edit__num {
  font-variant-numeric: tabular-nums;
}

.admin-edit__muted {
  color: var(--color-disabled);
}

.admin-edit__link {
  color: var(--color-plum);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 500;
}

.admin-edit__link:hover {
  color: var(--color-magenta);
}

.admin-edit__table-actions {
  text-align: right;
  white-space: nowrap;
}

.admin-edit__chip {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  background-color: var(--color-surface-alt);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.admin-edit__chip--paid {
  background-color: var(--color-success-bg);
  color: var(--color-success-text);
}

.admin-edit__chip--created,
.admin-edit__chip--pending,
.admin-edit__chip--awaiting,
.admin-edit__chip--processing {
  background-color: #fff6db;
  color: #7a5a00;
}

.admin-edit__chip--late,
.admin-edit__chip--overdue,
.admin-edit__chip--failed,
.admin-edit__chip--canceled {
  background-color: var(--color-error-bg);
  color: var(--color-error-text);
  border: 1px solid var(--color-error-border);
  font-weight: 700;
}

.admin-layout .container .admin-edit__ghost-button,
.admin-layout .container .admin-ghost-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  color: var(--color-plum);
  border: 1px solid var(--color-plum);
  padding: 4px 10px;
  font-size: 0.8125rem;
  font-weight: 600;
  margin: 0;
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: background-color 200ms ease-out, color 200ms ease-out;
}

.admin-layout .container .admin-edit__ghost-button:hover,
.admin-layout .container .admin-ghost-button:hover {
  background-color: var(--color-plum);
  color: var(--color-ivory);
}

.admin-edit__empty {
  padding: 16px 0;
  color: var(--color-text-muted);
  font-style: italic;
}

@media (max-width: 600px) {
  .admin-edit__activity {
    flex-direction: column;
    align-items: stretch;
  }

  .admin-edit__activity-when {
    width: 100%;
  }

  .admin-edit__table th,
  .admin-edit__table td {
    padding: 8px 10px;
    font-size: 0.875rem;
  }
}

/* ─── Admin Payments ─────────────────────────────────────────────────────── */
.admin-payments__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e0d9f0;
  margin-bottom: 20px;
}

.admin-payments__period {
  font-size: clamp(1.4rem, 3vw, 1.75rem);
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
  line-height: 1.15;
}

.admin-payments__header-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.admin-payments__period-nav {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--color-surface-alt);
  border-radius: var(--radius-full);
  padding: 4px;
}

.admin-layout .container .admin-payments__nav-button {
  width: 32px;
  height: 32px;
  padding: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--color-plum);
  border-radius: var(--radius-full);
  border: none;
  flex-shrink: 0;
  transition: background-color 200ms ease-out, color 200ms ease-out;
}

.admin-layout .container .admin-payments__nav-button:hover {
  background-color: var(--color-plum);
  color: var(--color-ivory);
}

.admin-payments__today {
  padding: 4px 14px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text);
  border-radius: var(--radius-full);
  text-decoration: none;
  transition: background-color 200ms ease-out, color 200ms ease-out;
}

.admin-payments__today:hover {
  background-color: var(--color-plum);
  color: var(--color-ivory);
}

/* Toolbar */
.admin-payments__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 16px;
  padding: 16px;
  background: var(--color-surface-alt);
  border-radius: var(--radius-lg);
  margin-bottom: 20px;
}

.admin-payments__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  flex: 1 1 auto;
  min-width: 0;
}

.admin-payments__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.admin-payments__field--search {
  flex: 1 1 220px;
}

.admin-payments__field label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.admin-layout .container .admin-payments__field input,
.admin-layout .container .admin-payments__field select {
  margin: 0;
  background-color: var(--color-surface);
}

.admin-payments__filter-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.admin-layout .container .admin-payments__filter-submit {
  margin: 0;
  padding: 8px 18px;
  height: 38px;
  font-size: 0.9375rem;
  width: auto;
}

.admin-payments__filter-clear {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 4px 6px;
}

.admin-payments__filter-clear:hover {
  color: var(--color-plum);
}

/* Header charge menu (details/summary dropdown) */
.admin-payments__charge-menu {
  position: relative;
}

.admin-payments__charge-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 14px;
  background: var(--color-plum);
  color: var(--color-ivory);
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  user-select: none;
  white-space: nowrap;
  transition: background-color 200ms ease-out;
}

.admin-payments__charge-trigger::-webkit-details-marker { display: none; }

.admin-payments__charge-trigger:hover {
  background-color: var(--color-magenta);
}

.admin-payments__charge-trigger svg {
  transition: transform 200ms ease-out;
}

.admin-payments__charge-menu[open] .admin-payments__charge-trigger svg {
  transform: rotate(180deg);
}

.admin-payments__charge-menu-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 280px;
  background: var(--color-surface);
  border: 1px solid #e0d9f0;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-surface);
  padding: 4px;
  z-index: 50;
  display: flex;
  flex-direction: column;
}

.admin-payments__charge-form {
  margin: 0;
}

.admin-layout .container .admin-payments__charge-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  margin: 0;
  padding: 10px 12px;
  background: transparent;
  color: var(--color-text);
  border-radius: var(--radius-sm);
  text-align: left;
  font-size: 0.9375rem;
  font-weight: 600;
  transition: background-color 200ms ease-out, color 200ms ease-out;
}

.admin-layout .container .admin-payments__charge-item:hover {
  background-color: var(--color-plum);
  color: var(--color-ivory);
}

.admin-payments__charge-item-label {
  font-weight: 600;
  line-height: 1.2;
}

.admin-payments__charge-item-hint {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--color-text-muted);
  line-height: 1.3;
}

.admin-layout .container .admin-payments__charge-item:hover .admin-payments__charge-item-hint {
  color: var(--color-lavender);
}

/* Close on outside click using :focus-within trick:
   the details element only closes on summary click, that's native and fine. */

/* Counts strip */
.admin-payments__counts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 0;
  margin: 0 0 16px;
  font-size: 0.9375rem;
  color: var(--color-text-muted);
}

.admin-payments__count-group {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  align-items: baseline;
  padding-right: 20px;
}

.admin-payments__count-group + .admin-payments__count-group {
  padding-left: 20px;
  border-left: 1px solid #e0d9f0;
}

.admin-payments__count-group strong {
  color: var(--color-text);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.admin-payments__count-detail {
  font-size: 0.8125rem;
}

.admin-payments__count--paid {
  color: var(--color-success-text);
  font-weight: 600;
}

.admin-payments__count--late {
  color: var(--color-error-text);
  font-weight: 600;
}

/* History disclosure */
.admin-payments__history {
  margin-bottom: 16px;
  border: 1px solid #e0d9f0;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  overflow: hidden;
}

.admin-payments__history-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text);
  list-style: none;
  user-select: none;
  transition: background-color 200ms ease-out;
}

.admin-payments__history-summary::-webkit-details-marker { display: none; }

.admin-payments__history-summary:hover {
  background-color: var(--color-surface-alt);
}

.admin-payments__history-caret {
  transition: transform 200ms ease-out;
  flex-shrink: 0;
  color: var(--color-text-muted);
}

.admin-payments__history[open] .admin-payments__history-caret {
  transform: rotate(180deg);
}

.admin-payments__history-body {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid #ece6f5;
}

.admin-payments__run {
  padding: 14px;
}

.admin-payments__run + .admin-payments__run {
  border-top: 1px solid #ece6f5;
}

.admin-payments__run-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 12px;
  margin-bottom: 10px;
}

.admin-payments__run-label {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-violet);
}

.admin-payments__run-when {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.admin-payments__run-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px 16px;
  margin: 0;
}

.admin-payments__run-stats > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.admin-payments__run-stats dt {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.admin-payments__run-stats dd {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

.admin-payments__run-success { color: var(--color-success-text); }
.admin-payments__run-failed  { color: var(--color-error-text); }

/* Table */
.admin-payments__table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-md);
  border: 1px solid #e0d9f0;
}

.admin-payments__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.admin-payments__table th,
.admin-payments__table td {
  text-align: left;
  padding: 10px 14px;
  vertical-align: middle;
}

.admin-payments__table thead th {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  background-color: var(--color-surface-alt);
  border-bottom: 1px solid #e0d9f0;
}

.admin-payments__table tbody tr + tr td {
  border-top: 1px solid #ece6f5;
}

.admin-payments__table tbody tr:hover {
  background-color: #faf7ff;
}

.admin-payments__num {
  font-variant-numeric: tabular-nums;
}

.admin-payments__when {
  color: var(--color-text-muted);
  font-size: 0.875rem;
  white-space: nowrap;
}

.admin-payments__user-link {
  color: var(--color-plum);
  font-weight: 600;
  text-decoration: none;
}

.admin-payments__user-link:hover {
  color: var(--color-magenta);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.admin-payments__table-actions {
  text-align: right;
  white-space: nowrap;
}

/* Empty state */
.admin-payments__empty {
  padding: 40px 20px;
  text-align: center;
  border: 1px dashed #d9d0ea;
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
}

.admin-payments__empty p {
  margin: 0 0 8px;
  font-size: 0.9375rem;
}

.admin-payments__empty-link {
  color: var(--color-plum);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.admin-payments__empty-link:hover {
  color: var(--color-magenta);
}

@media (max-width: 720px) {
  .admin-payments__header-actions {
    width: 100%;
    justify-content: space-between;
  }

  .admin-payments__charge-menu-panel {
    right: auto;
    left: 0;
  }

  .admin-payments__table th,
  .admin-payments__table td {
    padding: 8px 10px;
    font-size: 0.875rem;
  }

  .admin-payments__when {
    font-size: 0.8125rem;
  }
}

/* ─── Admin Activities Index ─────────────────────────────────────────────── */
.admin-activities__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e0d9f0;
  margin-bottom: 20px;
}

.admin-activities__period {
  font-size: clamp(1.4rem, 3vw, 1.75rem);
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
  line-height: 1.15;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
}

.admin-activities__period-month {
  font-weight: 500;
  color: var(--color-text-muted);
  font-size: 0.7em;
  letter-spacing: 0.005em;
}

.admin-activities__header-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.admin-activities__period-nav {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--color-surface-alt);
  border-radius: var(--radius-full);
  padding: 4px;
}

.admin-layout .container .admin-activities__nav-button {
  width: 32px;
  height: 32px;
  padding: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--color-plum);
  border-radius: var(--radius-full);
  border: none;
  flex-shrink: 0;
  transition: background-color 200ms ease-out, color 200ms ease-out;
}

.admin-layout .container .admin-activities__nav-button:hover {
  background-color: var(--color-plum);
  color: var(--color-ivory);
}

.admin-activities__today {
  padding: 4px 14px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text);
  border-radius: var(--radius-full);
  text-decoration: none;
  transition: background-color 200ms ease-out, color 200ms ease-out;
}

.admin-activities__today:hover {
  background-color: var(--color-plum);
  color: var(--color-ivory);
}

.admin-activities__new {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 14px;
  background: var(--color-plum);
  color: var(--color-ivory);
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 200ms ease-out;
}

.admin-activities__new:hover {
  background-color: var(--color-magenta);
  color: var(--color-ivory);
}

.admin-activities__new svg {
  flex-shrink: 0;
}

/* Toolbar */
.admin-activities__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 16px;
  padding: 16px;
  background: var(--color-surface-alt);
  border-radius: var(--radius-lg);
  margin-bottom: 20px;
}

.admin-activities__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  flex: 1 1 auto;
  min-width: 0;
}

.admin-activities__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.admin-activities__field--search {
  flex: 1 1 220px;
}

.admin-activities__field label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.admin-layout .container .admin-activities__field input,
.admin-layout .container .admin-activities__field select {
  margin: 0;
  background-color: var(--color-surface);
}

.admin-activities__filter-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.admin-layout .container .admin-activities__filter-submit {
  margin: 0;
  padding: 8px 18px;
  height: 38px;
  font-size: 0.9375rem;
  width: auto;
}

.admin-activities__filter-clear {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 4px 6px;
}

.admin-activities__filter-clear:hover {
  color: var(--color-plum);
}

/* Counts strip */
.admin-activities__counts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 0;
  margin: 0 0 16px;
  font-size: 0.9375rem;
  color: var(--color-text-muted);
}

.admin-activities__count-group {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  align-items: baseline;
  padding-right: 20px;
}

.admin-activities__count-group + .admin-activities__count-group {
  padding-left: 20px;
  border-left: 1px solid #e0d9f0;
}

.admin-activities__count-group strong {
  color: var(--color-text);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.admin-activities__count-detail {
  font-size: 0.8125rem;
}

.admin-activities__count--with {
  color: var(--color-success-text);
  font-weight: 600;
}

/* Table */
.admin-activities__table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-md);
  border: 1px solid #e0d9f0;
}

.admin-activities__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.admin-activities__table th,
.admin-activities__table td {
  text-align: left;
  padding: 12px 14px;
  vertical-align: middle;
}

.admin-activities__table thead th {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  background-color: var(--color-surface-alt);
  border-bottom: 1px solid #e0d9f0;
}

.admin-activities__table tbody tr + tr td {
  border-top: 1px solid #ece6f5;
}

.admin-activities__table tbody tr:hover {
  background-color: #faf7ff;
}

.admin-activities__event-link {
  color: var(--color-plum);
  font-weight: 600;
  text-decoration: none;
}

.admin-activities__event-link:hover {
  color: var(--color-magenta);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.admin-activities__when {
  display: flex;
  flex-direction: column;
  gap: 2px;
  white-space: nowrap;
}

.admin-activities__when-date {
  color: var(--color-text);
  font-size: 0.9375rem;
}

.admin-activities__when-time {
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}

.admin-activities__location {
  color: var(--color-text);
}

.admin-activities__num,
.admin-activities__num-head {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.admin-activities__count-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  padding: 2px 10px;
  border-radius: var(--radius-full);
  background-color: #ece6f5;
  color: var(--color-plum);
  font-weight: 700;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}

.admin-activities__count-pill--zero {
  background-color: transparent;
  color: var(--color-text-muted);
  font-weight: 500;
}

.admin-activities__table-actions {
  text-align: right;
  white-space: nowrap;
}

/* Empty state */
.admin-activities__empty {
  padding: 40px 20px;
  text-align: center;
  border: 1px dashed #d9d0ea;
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
}

.admin-activities__empty p {
  margin: 0 0 8px;
  font-size: 0.9375rem;
}

.admin-activities__empty-link {
  color: var(--color-plum);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.admin-activities__empty-link:hover {
  color: var(--color-magenta);
}

@media (max-width: 720px) {
  .admin-activities__header-actions {
    width: 100%;
    justify-content: space-between;
  }

  .admin-activities__table th,
  .admin-activities__table td {
    padding: 10px 10px;
    font-size: 0.875rem;
  }

  .admin-activities__when-date {
    font-size: 0.875rem;
  }

  .admin-activities__when-time {
    font-size: 0.75rem;
  }
}

/* ─── Admin Users Index ──────────────────────────────────────────────────── */
.admin-users__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e0d9f0;
  margin-bottom: 20px;
}

.admin-users__title {
  font-size: clamp(1.4rem, 3vw, 1.75rem);
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
  line-height: 1.15;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
}

.admin-users__title-count {
  font-weight: 500;
  color: var(--color-text-muted);
  font-size: 0.7em;
  letter-spacing: 0.005em;
}

.admin-users__header-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.admin-users__new {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 14px;
  background: var(--color-plum);
  color: var(--color-ivory);
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 200ms ease-out;
}

.admin-users__new:hover {
  background-color: var(--color-magenta);
  color: var(--color-ivory);
}

.admin-users__new svg {
  flex-shrink: 0;
}

/* Toolbar */
.admin-users__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 16px;
  padding: 16px;
  background: var(--color-surface-alt);
  border-radius: var(--radius-lg);
  margin-bottom: 20px;
}

.admin-users__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  flex: 1 1 auto;
  min-width: 0;
}

.admin-users__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.admin-users__field--search {
  flex: 1 1 220px;
}

.admin-users__field label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.admin-layout .container .admin-users__field input,
.admin-layout .container .admin-users__field select {
  margin: 0;
  background-color: var(--color-surface);
}

.admin-users__filter-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.admin-layout .container .admin-users__filter-submit {
  margin: 0;
  padding: 8px 18px;
  height: 38px;
  font-size: 0.9375rem;
  width: auto;
}

.admin-users__filter-clear {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 4px 6px;
}

.admin-users__filter-clear:hover {
  color: var(--color-plum);
}

/* Counts strip */
.admin-users__counts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 0;
  margin: 0 0 16px;
  font-size: 0.9375rem;
  color: var(--color-text-muted);
}

.admin-users__count-group {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  align-items: baseline;
  padding-right: 20px;
}

.admin-users__count-group strong {
  color: var(--color-text);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.admin-users__count-detail {
  font-size: 0.8125rem;
}

.admin-users__count--live {
  color: var(--color-success-text);
  font-weight: 600;
}

/* Table */
.admin-users__table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-md);
  border: 1px solid #e0d9f0;
}

.admin-users__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.admin-users__table th,
.admin-users__table td {
  text-align: left;
  padding: 10px 14px;
  vertical-align: middle;
}

.admin-users__table thead th {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  background-color: var(--color-surface-alt);
  border-bottom: 1px solid #e0d9f0;
}

.admin-users__table tbody tr + tr td {
  border-top: 1px solid #ece6f5;
}

.admin-users__table tbody tr:hover {
  background-color: #faf7ff;
}

.admin-users__name-cell {
  min-width: 220px;
}

.admin-users__user-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--color-plum);
  font-weight: 600;
  text-decoration: none;
}

.admin-users__user-link:hover .admin-users__name {
  color: var(--color-magenta);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.admin-users__avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  object-fit: cover;
  background-color: var(--color-surface-alt);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.admin-users__avatar--initials {
  background: linear-gradient(135deg, #ece6f5, #d9cbeb);
  color: var(--color-plum);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.admin-users__name {
  min-width: 0;
}

.admin-users__section,
.admin-users__type {
  color: var(--color-text);
}

.admin-users__freq-head {
  min-width: 140px;
}

.admin-users__freq-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 130px;
}

.admin-users__freq-bar {
  flex: 1;
  height: 6px;
  background-color: #ece6f5;
  border-radius: var(--radius-full);
  overflow: hidden;
  max-width: 90px;
}

.admin-users__freq-bar-fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width 240ms ease-out;
}

.admin-users__freq-bar-fill--high {
  background-color: var(--color-success-text);
}

.admin-users__freq-bar-fill--mid {
  background-color: #c89b2a;
}

.admin-users__freq-bar-fill--low {
  background-color: var(--color-error-text);
}

.admin-users__freq-value {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--color-text);
  min-width: 36px;
  text-align: right;
}

.admin-users__freq-empty {
  color: var(--color-text-muted);
  font-size: 0.875rem;
}

.admin-users__table-actions {
  text-align: right;
  white-space: nowrap;
}

/* Empty state */
.admin-users__empty {
  padding: 40px 20px;
  text-align: center;
  border: 1px dashed #d9d0ea;
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
}

.admin-users__empty p {
  margin: 0 0 8px;
  font-size: 0.9375rem;
}

.admin-users__empty-link {
  color: var(--color-plum);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.admin-users__empty-link:hover {
  color: var(--color-magenta);
}

.admin-users__pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.admin-users__pagination-links {
  display: flex;
  align-items: center;
  gap: 12px;
}

@media (max-width: 720px) {
  .admin-users__header-actions {
    width: 100%;
    justify-content: flex-end;
  }

  .admin-users__table th,
  .admin-users__table td {
    padding: 8px 10px;
    font-size: 0.875rem;
  }

  .admin-users__avatar {
    width: 28px;
    height: 28px;
  }

  .admin-users__freq-bar {
    max-width: 60px;
  }
}

/* ─── Admin tables on phones ─────────────────────────────────────────────── */
/*
 * Abaixo de 720px as tabelas do admin viram cartões de duas ou três linhas:
 * o que identifica a linha e o valor principal em cima, detalhes embaixo.
 * Nada de rolagem lateral escondendo status e ações.
 */
@media (max-width: 720px) {
  .admin-stack,
  .admin-stack tbody {
    display: block;
    width: 100%;
  }

  .admin-stack thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .admin-stack tbody tr {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 12px;
    row-gap: 6px;
    align-items: center;
    padding: 14px;
  }

  .admin-stack tbody tr + tr {
    border-top: 1px solid #ece6f5;
  }

  .admin-stack tbody tr td,
  .admin-stack tbody tr + tr td {
    display: block;
    min-width: 0;
    padding: 0;
    border: 0;
    font-size: 0.875rem;
  }

  .admin-stack .admin-edit__chip {
    justify-self: end;
  }

  .admin-layout .container .admin-stack .admin-ghost-button,
  .admin-layout .container .admin-stack .admin-edit__ghost-button {
    min-height: 44px;
    padding: 8px 16px;
    font-size: 0.875rem;
  }

  /* Ações vazias não ocupam espaço. */
  .admin-stack td:is(.admin-payments__table-actions, .admin-edit__table-actions):not(:has(*)) {
    display: none;
  }

  /* Integrantes: a linha inteira leva para a edição. */
  .admin-users__table tbody tr {
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: 0;
    grid-template-areas:
      "name    name status"
      "section type freq";
  }

  .admin-users__name-cell { grid-area: name; min-width: 0; }
  .admin-users__status    { grid-area: status; justify-self: end; margin-left: 12px; }
  .admin-users__freq      { grid-area: freq; justify-self: end; margin-left: 12px; }
  .admin-stack .admin-users__table-actions { display: none; }

  .admin-stack .admin-users__section {
    grid-area: section;
    padding-left: 38px;
    color: var(--color-text-muted);
    white-space: nowrap;
  }

  .admin-stack .admin-users__type {
    grid-area: type;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .admin-users__type::before {
    content: "·";
    margin: 0 6px;
  }

  .admin-users__user-link {
    font-size: 0.9375rem;
  }

  .admin-users__user-link::after {
    content: "";
    position: absolute;
    inset: 0;
  }

  .admin-users__freq-cell {
    min-width: 0;
    gap: 6px;
  }

  .admin-users__freq-bar {
    width: 36px;
    flex: none;
  }

  .admin-users__freq-value {
    min-width: 0;
  }

  /* Pagamentos */
  .admin-payments__table tbody tr {
    grid-template-areas:
      "user   value"
      "reason status"
      "when   actions";
  }

  .admin-payments__user   { grid-area: user; }
  .admin-payments__reason { grid-area: reason; color: var(--color-text-muted); }
  .admin-payments__status { grid-area: status; justify-self: end; }
  .admin-payments__when   { grid-area: when; }
  .admin-payments__table-actions { grid-area: actions; justify-self: end; }

  .admin-stack .admin-payments__num {
    grid-area: value;
    font-size: 0.9375rem;
    font-weight: 700;
    white-space: nowrap;
  }

  .admin-payments__user-link {
    font-size: 0.9375rem;
  }

  /* Eventos */
  .admin-activities__table tbody tr {
    grid-template-areas:
      "event    num"
      "when     when"
      "location actions";
  }

  .admin-activities__event    { grid-area: event; }
  .admin-activities__num      { grid-area: num; justify-self: end; white-space: nowrap; }
  .admin-activities__count-pill::after { content: " check-ins"; margin-left: 4px; font-weight: 500; }
  .admin-activities__location { grid-area: location; color: var(--color-text-muted); }
  .admin-activities__table-actions { grid-area: actions; }

  .admin-stack .admin-activities__when {
    grid-area: when;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 8px;
  }

  .admin-activities__event-link {
    font-size: 0.9375rem;
  }

  /* Pagamentos na ficha da integrante */
  .admin-edit__table tbody tr {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "ref     reason  value"
      "status  status  actions"
      "invoice invoice invoice";
  }

  .admin-stack .admin-edit__ref {
    grid-area: ref;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }

  .admin-edit__reason  { grid-area: reason; color: var(--color-text-muted); }
  .admin-edit__reason::before { content: "·"; margin-right: 6px; }
  .admin-edit__status  { grid-area: status; }
  .admin-edit__status .admin-edit__chip { justify-self: start; }
  .admin-edit__invoice { grid-area: invoice; }
  .admin-stack .admin-edit__invoice:has(.admin-edit__muted) { display: none; }
  .admin-edit__table-actions { grid-area: actions; }

  .admin-stack .admin-edit__num {
    grid-area: value;
    font-weight: 700;
    white-space: nowrap;
  }

  /* Check-ins do evento e colisões */
  .checkins-table.admin-stack {
    margin-top: 10px;
    border: 1px solid #e0d9f0;
    border-radius: var(--radius-md);
    overflow: hidden;
  }

  .checkins-table tbody tr {
    grid-template-areas:
      "name section"
      "when when";
    row-gap: 2px;
    padding: 12px 14px;
  }

  .checkins-table__name {
    grid-area: name;
  }

  .admin-stack .checkins-table__name {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text);
  }

  .admin-stack .checkins-table__section {
    grid-area: section;
    align-self: start;
    color: var(--color-text-muted);
    text-align: right;
  }

  .admin-stack .checkins-table__when {
    grid-area: when;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
  }
}

/* ─── Financeiro (user payments) ─────────────────────────────────────────── */
.finance__head {
  padding: 4px 0 20px;
  border-bottom: 1px solid #e0d9f0;
  margin-bottom: 20px;
}

.finance__title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-plum);
  line-height: 1.1;
}

.finance__owed {
  margin-top: 10px;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--color-text);
}

.finance__owed--late {
  color: var(--color-error-text);
}

.finance__owed--clear {
  font-weight: 500;
  font-size: 0.9375rem;
  color: var(--color-success-text);
}

.finance__owed-count {
  font-weight: 500;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.finance__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Each charge is a stacked row: identity + value on top, status + action below.
   State is carried by a leading full-height tint band, not a side-stripe border. */
.finance__row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "main   status"
    "action action";
  align-items: center;
  gap: 6px 12px;
  padding: 14px 16px;
  background-color: var(--color-surface-alt);
  border-radius: var(--radius-md);
}

.finance__row--late {
  background-color: var(--color-error-bg);
}

.finance__row-main {
  grid-area: main;
  min-width: 0;
}

.finance__row-id {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
}

.finance__modality {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--color-text);
}

.finance__period {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  text-transform: capitalize;
}

.finance__row-meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 4px;
}

.finance__value {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

.finance__row--late .finance__value {
  color: var(--color-error-text);
}

.finance__billing {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.finance__row-status {
  grid-area: status;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-align: right;
}

.finance__badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.finance__badge--paid {
  background-color: var(--color-success-bg);
  color: var(--color-success-text);
  border: 1px solid var(--color-success-border);
}

.finance__badge--late {
  background-color: var(--color-surface);
  color: var(--color-error-text);
  border: 1px solid var(--color-error-border);
}

.finance__badge--pending {
  background-color: var(--color-surface);
  color: var(--color-violet);
  border: 1px solid var(--color-lavender);
}

.finance__paid-date {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.finance__pay {
  grid-area: action;
  display: block;
  width: 100%;
  margin: 4px 0 0;
  padding: 12px;
  text-align: center;
  text-decoration: none;
  background-color: var(--color-plum);
  color: var(--color-ivory);
  border-radius: var(--radius-md);
  font-size: 1rem;
  font-weight: 700;
  transition: background-color 200ms ease-out;
}

.finance__pay:hover,
.finance__pay:focus-visible {
  background-color: var(--color-magenta);
  outline: none;
}

.finance__empty {
  padding: 40px 20px;
  text-align: center;
}

.finance__empty-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-plum);
}

.finance__empty-sub {
  margin-top: 8px;
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  max-width: 34ch;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
}

/* On wider screens, let the pay button sit inline with the status column
   rather than spanning full width. */
@media (min-width: 500px) {
  .finance__row {
    grid-template-columns: 1fr auto auto;
    grid-template-areas: "main status action";
    gap: 16px;
  }

  .finance__pay {
    width: auto;
    margin: 0;
    padding: 10px 20px;
    align-self: center;
  }
}

/* ─── Frequência (user attendance history) ───────────────────────────────── */
.freq__head {
  padding: 4px 0 20px;
  border-bottom: 1px solid #e0d9f0;
  margin-bottom: 20px;
}

.freq__title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-plum);
  line-height: 1.1;
}

.freq__summary {
  margin-top: 10px;
  font-size: 0.9375rem;
  color: var(--color-text-muted);
}

.freq__summary-count {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--color-plum);
}

.freq__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.freq__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background-color: var(--color-surface-alt);
  border-radius: var(--radius-md);
}

.freq__row--present {
  background-color: var(--color-success-bg);
}

.freq__row--missed {
  background-color: var(--color-error-bg);
}

/* Small solid dot carries state redundantly with the text label, so the state
   never depends on background color alone (a11y). */
.freq__marker {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.freq__marker--present {
  background-color: var(--color-success-text);
}

.freq__marker--missed {
  background-color: var(--color-error-text);
}

.freq__marker--absent {
  background-color: var(--color-violet);
}

.freq__row-id {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.freq__activity {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
}

.freq__date {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.freq__status {
  flex-shrink: 0;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: right;
}

.freq__status--present {
  color: var(--color-success-text);
}

.freq__status--missed {
  color: var(--color-error-text);
}

.freq__status--absent {
  color: var(--color-violet);
}

.freq__empty {
  padding: 40px 20px;
  text-align: center;
}

.freq__empty-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-plum);
}

.freq__empty-sub {
  margin-top: 8px;
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  max-width: 34ch;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
}

/* ─────────────────────────────────────────────────────────────────────────── */

@media print {
  nav.navbar {
    display: none;
  }

  .admin-activity-show img#qr-code {
    width: 80%;
  }

  .admin-activity-show {
    font-size: 30pt;
  }

  .checkin-histogram {
    page-break-inside: avoid;
  }
}