/*
 * 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.
 */

:root {
  --ga-black: #050505;
  --ga-panel: #111111;
  --ga-pink: #ec0064;
  --ga-pink-dark: #97003f;
  --ga-white: #ffffff;
  --ga-muted: #b8b8b8;
  --ga-line: #2a2a2a;
}

body {
  background: var(--ga-black);
  color: var(--ga-white);
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
}

a {
  color: inherit;
}

.notice,
.alert {
  margin: 0;
  padding: 0.75rem 1rem;
}

.dashboard {
  margin: 0 auto;
  max-width: 1180px;
  padding: 2rem;
}

.dashboard-hero {
  align-items: end;
  border-bottom: 4px solid var(--ga-pink);
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  padding-bottom: 1.25rem;
}

.dashboard-kicker,
.dashboard-month {
  color: var(--ga-muted);
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  margin: 0;
  text-transform: uppercase;
}

.dashboard h1 {
  color: var(--ga-pink);
  font-size: clamp(2.5rem, 8vw, 5rem);
  font-style: italic;
  font-weight: 900;
  line-height: 0.9;
  margin: 0.35rem 0;
  text-transform: uppercase;
}

.dashboard-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: flex-end;
}

.dashboard-actions a {
  background: var(--ga-pink);
  color: var(--ga-white);
  font-size: 0.9rem;
  font-weight: 900;
  padding: 0.8rem 1rem;
  text-decoration: none;
  text-transform: uppercase;
}

.dashboard-actions a:first-child {
  background: var(--ga-white);
  color: var(--ga-black);
}

.dashboard-stats {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin-bottom: 1.5rem;
}

.dashboard-stat {
  background: var(--ga-pink);
  color: var(--ga-white);
  min-height: 8rem;
  padding: 1rem;
}

.dashboard-stat--total {
  background: var(--ga-white);
  color: var(--ga-black);
}

.dashboard-stat--danger {
  background: var(--ga-pink-dark);
}

.dashboard-stat--revenue {
  background: var(--ga-white);
  color: var(--ga-black);
}

.dashboard-stat span,
.dashboard-stat small {
  display: block;
  font-size: 0.85rem;
  font-weight: 900;
  text-transform: uppercase;
}

.dashboard-stat strong {
  display: block;
  font-size: 4rem;
  font-weight: 900;
  line-height: 1;
  margin: 0.6rem 0;
  overflow-wrap: anywhere;
}

.dashboard-stat--revenue strong {
  font-size: clamp(1.9rem, 2.4vw, 2.7rem);
  line-height: 1.05;
}

.dashboard-stat small {
  color: rgba(255, 255, 255, 0.78);
}

.dashboard-stat--total small {
  color: #505050;
}

.dashboard-stat--revenue small {
  color: #505050;
}

.dashboard-lists {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dashboard-list {
  background: var(--ga-panel);
  border-top: 0.5rem solid var(--ga-pink);
  min-height: 12rem;
}

.dashboard-list h2 {
  background: var(--ga-white);
  color: var(--ga-black);
  font-size: 1rem;
  font-weight: 900;
  margin: 0;
  padding: 0.8rem 1rem;
  text-transform: uppercase;
}

.dashboard-student-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dashboard-student-list li {
  border-bottom: 1px solid var(--ga-line);
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  padding: 0.85rem 1rem;
}

.dashboard-student-list a {
  color: var(--ga-white);
  font-weight: 800;
}

.dashboard-student-list span {
  color: var(--ga-muted);
  font-size: 0.85rem;
  white-space: nowrap;
}

.dashboard-empty {
  color: var(--ga-muted);
  font-weight: 700;
  margin: 0;
  padding: 1rem;
}

.students-page {
  margin: 0 auto;
  max-width: 1180px;
  padding: 2rem;
}

.students-hero {
  align-items: end;
  border-bottom: 4px solid var(--ga-pink);
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  padding-bottom: 1.25rem;
}

.students-kicker,
.students-month,
.students-section-label {
  color: var(--ga-muted);
  font-size: 0.85rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  margin: 0;
  text-transform: uppercase;
}

.students-page h1 {
  color: var(--ga-pink);
  font-size: clamp(2.5rem, 8vw, 5rem);
  font-style: italic;
  font-weight: 900;
  line-height: 0.9;
  margin: 0.35rem 0;
  text-transform: uppercase;
}

.students-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: flex-end;
}

.students-actions a {
  background: var(--ga-pink);
  color: var(--ga-white);
  font-size: 0.9rem;
  font-weight: 900;
  padding: 0.8rem 1rem;
  text-decoration: none;
  text-transform: uppercase;
}

.students-actions a:first-child {
  background: var(--ga-white);
  color: var(--ga-black);
}

.students-priority,
.students-group {
  background: var(--ga-panel);
}

.students-priority {
  border-top: 0.75rem solid var(--ga-pink);
  margin-bottom: 1.25rem;
}

.students-groups {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1.15fr 0.85fr;
}

.students-group--active {
  border-top: 0.5rem solid var(--ga-white);
}

.students-group--dormant {
  border-top: 0.5rem solid var(--ga-line);
  opacity: 0.72;
}

.students-section-header {
  align-items: center;
  background: var(--ga-white);
  color: var(--ga-black);
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  padding: 1rem;
}

.students-priority .students-section-header {
  background: var(--ga-pink);
  color: var(--ga-white);
}

.students-priority .students-section-label {
  color: rgba(255, 255, 255, 0.78);
}

.students-section-header h2 {
  font-size: 2rem;
  font-style: italic;
  font-weight: 900;
  line-height: 1;
  margin: 0.15rem 0 0;
  text-transform: uppercase;
}

.students-section-header strong {
  font-size: 3rem;
  font-weight: 900;
  line-height: 1;
}

.student-group-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.student-group-list li {
  align-items: center;
  border-bottom: 1px solid var(--ga-line);
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 1rem;
}

.student-group-list a {
  color: var(--ga-white);
  display: inline-block;
  font-size: 1.05rem;
  font-weight: 900;
  text-decoration-color: var(--ga-pink);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.25rem;
}

.student-group-list span,
.student-group-list small,
.student-group-empty {
  color: var(--ga-muted);
  font-weight: 700;
}

.student-group-list span {
  display: block;
  font-size: 0.85rem;
  margin-top: 0.35rem;
  overflow-wrap: anywhere;
}

.student-group-list small {
  font-size: 0.85rem;
  white-space: nowrap;
}

.student-group-list--lapsed li {
  background: linear-gradient(90deg, rgba(236, 0, 100, 0.18), transparent 58%);
  min-height: 4.25rem;
}

.student-group-list--lapsed a {
  font-size: 1.2rem;
}

.student-group-list--dormant li {
  padding: 0.75rem 1rem;
}

.student-group-list--dormant a {
  color: #d6d6d6;
  font-size: 0.95rem;
}

.student-group-empty {
  margin: 0;
  padding: 1rem;
}

.student-detail-page,
.receipt-page {
  margin: 0 auto;
  max-width: 960px;
  padding: 2rem;
}

.student-detail-hero,
.receipt-hero {
  align-items: end;
  border-bottom: 4px solid var(--ga-pink);
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  padding-bottom: 1.25rem;
}

.student-detail-kicker,
.student-detail-meta,
.receipt-kicker,
.receipt-meta,
.student-payments-header span,
.receipt-summary span {
  color: var(--ga-muted);
  font-size: 0.85rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  margin: 0;
  text-transform: uppercase;
}

.student-detail-page h1,
.receipt-page h1 {
  color: var(--ga-pink);
  font-size: clamp(2.4rem, 7vw, 4.75rem);
  font-style: italic;
  font-weight: 900;
  line-height: 0.9;
  margin: 0.35rem 0;
  text-transform: uppercase;
}

.student-detail-actions,
.receipt-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: flex-end;
}

.student-detail-actions a,
.receipt-actions a,
.receipt-link {
  background: var(--ga-pink);
  color: var(--ga-white);
  font-size: 0.9rem;
  font-weight: 900;
  padding: 0.8rem 1rem;
  text-decoration: none;
  text-transform: uppercase;
}

.student-detail-actions a:first-child,
.receipt-actions a:first-child {
  background: var(--ga-white);
  color: var(--ga-black);
}

.student-payments,
.receipt-details {
  background: var(--ga-panel);
  border-top: 0.5rem solid var(--ga-pink);
}

.student-payments-header {
  align-items: center;
  background: var(--ga-white);
  color: var(--ga-black);
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  padding: 1rem;
}

.student-payments-header h2 {
  font-size: 2rem;
  font-style: italic;
  font-weight: 900;
  line-height: 1;
  margin: 0.15rem 0 0;
  text-transform: uppercase;
}

.student-payments-header strong {
  font-size: 3rem;
  font-weight: 900;
  line-height: 1;
}

.student-payment-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.student-payment-list li {
  align-items: center;
  border-bottom: 1px solid var(--ga-line);
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 1rem;
}

.student-payment-list a:not(.receipt-link) {
  color: var(--ga-white);
  display: inline-block;
  font-size: 1.05rem;
  font-weight: 900;
  text-decoration-color: var(--ga-pink);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.25rem;
}

.student-payment-list span,
.student-payment-empty {
  color: var(--ga-muted);
  display: block;
  font-size: 0.9rem;
  font-weight: 700;
  margin-top: 0.35rem;
}

.student-payment-empty {
  margin: 0;
  padding: 1rem;
}

.receipt-summary {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 1rem;
}

.receipt-summary div {
  background: var(--ga-pink);
  color: var(--ga-white);
  min-height: 6rem;
  padding: 1rem;
}

.receipt-summary div:first-child {
  background: var(--ga-white);
  color: var(--ga-black);
}

.receipt-summary strong {
  display: block;
  font-size: 2rem;
  font-weight: 900;
  line-height: 1;
  margin-top: 0.75rem;
}

.receipt-details dl {
  margin: 0;
}

.receipt-details div {
  border-bottom: 1px solid var(--ga-line);
  display: grid;
  gap: 1rem;
  grid-template-columns: 12rem minmax(0, 1fr);
  padding: 1rem;
}

.receipt-details dt {
  color: var(--ga-muted);
  font-size: 0.85rem;
  font-weight: 900;
  text-transform: uppercase;
}

.receipt-details dd {
  font-weight: 900;
  margin: 0;
}

.payment-status {
  border-radius: 4px;
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 700;
  margin: 0 0.5rem;
  padding: 0.15rem 0.4rem;
}

.payment-status--active {
  background: #e8f5e9;
  color: #1b5e20;
}

.payment-status--due_soon {
  background: #fff8e1;
  color: #8a5a00;
}

.payment-status--overdue,
.payment-status--unpaid {
  background: #ffebee;
  color: #b71c1c;
}

@media (max-width: 800px) {
  .dashboard {
    padding: 1rem;
  }

  .dashboard-hero {
    align-items: start;
    flex-direction: column;
  }

  .dashboard-actions {
    justify-content: flex-start;
  }

  .dashboard-stats,
  .dashboard-lists,
  .students-groups {
    grid-template-columns: 1fr;
  }

  .students-page {
    padding: 1rem;
  }

  .students-hero {
    align-items: start;
    flex-direction: column;
  }

  .students-actions {
    justify-content: flex-start;
  }

  .student-detail-hero,
  .receipt-hero {
    align-items: start;
    flex-direction: column;
  }

  .student-detail-actions,
  .receipt-actions {
    justify-content: flex-start;
  }

  .student-group-list li {
    align-items: start;
    grid-template-columns: 1fr;
  }

  .student-group-list small {
    white-space: normal;
  }

  .student-payment-list li,
  .receipt-summary,
  .receipt-details div {
    grid-template-columns: 1fr;
  }
}