/* ============================================================================
   MusicTree Shared Component Library
   ----------------------------------------------------------------------------
   Canonical utility classes built on top of tokens.css. Any page can opt in
   by adding these classes — do NOT copy/inline the rules into page templates.

   Admin density modifiers are provided where they matter (tables, cards,
   form sections). They tighten spacing and reduce font size without changing
   the underlying component structure.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   KPI value — large numeric display on dashboards.
   Usage:  <div class="mt-kpi">£1,234.00</div>
           <h3 class="mt-kpi mb-0">...</h3>
   Variant: .mt-kpi--sm for secondary tiles (e.g. event sub-stats).
   ---------------------------------------------------------------------------- */
.mt-kpi {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.mt-kpi--sm {
  font-size: 1.5rem;
}

/* ----------------------------------------------------------------------------
   Page header
   Usage:
     <header class="mt-page-header">
       <div class="mt-page-header__lead">
         <h1 class="mt-page-header__title">Title</h1>
         <p class="mt-page-header__subtitle">Optional subtitle</p>
       </div>
       <div class="mt-page-header__actions"> ...buttons... </div>
     </header>
   ---------------------------------------------------------------------------- */
.mt-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-6);
  border-bottom: 1px solid var(--border-subtle-grey);
}
.mt-page-header__lead { min-width: 0; }
.mt-page-header__title {
  font-family: var(--font-admin-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-2xl);
  color: var(--color-grigio-blu);
  margin: 0;
  line-height: 1.2;
}
.mt-page-header__subtitle {
  margin: var(--space-1) 0 0;
  color: var(--color-grigio-blu);
  opacity: 0.8;
  font-size: var(--fs-sm);
}
.mt-page-header__actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* Admin-density variant: tighter bottom margin */
.mt-page-header--dense {
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-4);
}
.mt-page-header--dense .mt-page-header__title {
  font-size: var(--fs-xl);
}

/* ----------------------------------------------------------------------------
   Customer hero — slim purple banner used on every customer-portal page via
   the macro in templates/customer/_page_header.html. Keep this class prefix
   (.mt-hero) separate from .mt-page-header (admin bordered header) to avoid
   specificity clashes.
   ---------------------------------------------------------------------------- */
/* Customer hero geometry — single source of truth for the slim purple
   banner used at the top of every customer-portal page. The numbers
   below are the canonical chrome dimensions for the customer surface:

     Banner viewport width:  100vw (banner breaks out of any container)
     Inner content width:    1400px (matches dashboard container)
     Vertical thickness:     ~0.85rem top + bottom padding
     Gap above (from top
     grigio-blu navbar):     0.6rem (margin-top on the banner itself)

   The hero uses the standard negative-margin / 100vw breakout pattern so
   it spans the full viewport width regardless of the parent container's
   max-width. The .account-nav-strip flush below uses the same trick so
   the two elements read as one full-width header band on every page. */
.mt-hero {
  background: linear-gradient(135deg, var(--color-malva, #C3497E) 0%, var(--color-grigio-blu, #636882) 100%);
  color: #fff;
  padding: 0.85rem 1.5rem;
  border-radius: 0;
  /* Break out to viewport width regardless of parent container. */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: 0.6rem;
  margin-bottom: 1rem;
  position: relative;
  overflow: hidden;
}
/* When the flush nav strip sits directly below, drop the bottom margin so
   the two elements read as one header block. */
.mt-hero.mt-hero--with-nav {
  margin-bottom: 0;
}
/* Inner content of the hero stays constrained to the canonical 1400px
   page width so titles/actions align with the rest of the page below. */
.mt-hero__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1.5rem;
}
.mt-hero::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -8%;
  width: 260px;
  height: 260px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
}
.mt-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  /* width constraints set in the geometry block above */
}
/* Music Tree logo on the left of every hero — gives every customer page
   the same visual anchor as the dashboard hero. */
.mt-hero__logo {
  width: 42px;
  height: 42px;
  object-fit: contain;
  opacity: 0.95;
  flex-shrink: 0;
}
.mt-hero__text {
  flex: 1 1 320px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  /* Even rhythm between title + description so the block feels balanced
     rather than cramped or spread out. */
  gap: 0.25rem;
  align-items: flex-start;
}
.mt-hero__title {
  font-size: 1.4rem !important;
  font-weight: 700;
  margin: 0 !important;
  color: #fff;
  line-height: 1.2;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.mt-hero__title i { font-size: 1.2rem; opacity: 0.95; }
.mt-hero__desc {
  font-size: 0.88rem;
  opacity: 0.92;
  margin: 0 !important;
  color: #fff;
  line-height: 1.3;
}
.mt-hero__actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}
.mt-hero__back {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: #fff !important;
  text-decoration: none;
  background: rgba(255,255,255,0.18);
  padding: 0.22rem 0.7rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  transition: background 0.18s ease;
}
.mt-hero__back:hover { background: rgba(255,255,255,0.28); }
.mt-hero .btn-light {
  background: #fff;
  color: var(--color-malva, #C3497E) !important;
  border: 1px solid #fff;
  font-weight: 600;
  padding: 0.4rem 0.95rem;
  border-radius: 8px;
  font-size: 0.85rem;
}
.mt-hero .btn-light:hover {
  background: #f7f7f7;
  color: var(--color-malva-dark, #A33B68) !important;
}
.mt-hero .btn-outline-light {
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.7);
  background: transparent;
  font-weight: 600;
  padding: 0.4rem 0.95rem;
  border-radius: 8px;
  font-size: 0.85rem;
}
.mt-hero .btn-outline-light:hover {
  background: rgba(255,255,255,0.15);
  border-color: #fff;
  color: #fff !important;
}
.mt-hero__extra { position: relative; z-index: 1; margin-top: 0.75rem; }

/* Force the customer account-nav-strip flush against the .mt-hero banner
   AND make it break out to full viewport width using the same pattern as
   the hero, so the two elements form one continuous full-width band. */
.mt-hero.mt-hero--with-nav + .account-nav-strip {
  border-top: none !important;
  border-radius: 0 !important;
  margin-top: 0;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
  background: #fff;
  border-bottom: 1px solid #ebebeb;
  margin-bottom: 1rem;
}
.mt-hero.mt-hero--with-nav + .account-nav-strip .account-nav-strip-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1.5rem;
}
@media (max-width: 576px) {
  .mt-hero { padding: 0.75rem 1rem; }
  .mt-hero__title { font-size: 1.2rem; }
  .mt-hero__desc { font-size: 0.82rem; }
}

/* ----------------------------------------------------------------------------
   Card
   Usage:
     <section class="mt-card">
       <header class="mt-card__header">
         <h2 class="mt-card__title"><i class="bi bi-person"></i> Profile</h2>
       </header>
       <div class="mt-card__body"> ...content... </div>
     </section>
   ---------------------------------------------------------------------------- */
.mt-card {
  background: var(--color-white);
  border: 1px solid var(--border-subtle-grey);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.mt-card__header {
  padding: var(--space-4) var(--space-5);
  border-bottom: 2px solid var(--color-malva);
}
.mt-card__title {
  margin: 0;
  font-family: var(--font-admin-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-lg);
  color: var(--color-grigio-blu);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.mt-card__body {
  padding: var(--space-5);
}
.mt-card__footer {
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--border-subtle-grey);
  background: var(--color-whisper-grey);
}

/* Admin-density variant */
.mt-card--dense .mt-card__header { padding: var(--space-3) var(--space-4); }
.mt-card--dense .mt-card__body   { padding: var(--space-4); }
.mt-card--dense .mt-card__title  { font-size: var(--fs-md); }

/* ----------------------------------------------------------------------------
   Form section
   A grouped set of fields inside a card, with an optional section heading.
   Usage:
     <div class="mt-form-section">
       <h3 class="mt-form-section__heading">Section heading</h3>
       <div class="mt-form-section__fields"> ...inputs... </div>
     </div>
   ---------------------------------------------------------------------------- */
.mt-form-section + .mt-form-section {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-subtle-grey);
}
.mt-form-section__heading {
  font-family: var(--font-admin-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-md);
  color: var(--color-grigio-blu);
  margin: 0 0 var(--space-3);
}
.mt-form-section__fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* ----------------------------------------------------------------------------
   Buttons (canonical brand-aligned variants)
   These are additive — Bootstrap .btn-primary etc. still work. Use these
   when you want brand-aligned styling that does not depend on Bootstrap
   variable overrides.
   ---------------------------------------------------------------------------- */
.mt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--fs-sm);
  line-height: 1.2;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
.mt-btn:focus-visible {
  outline: 2px solid var(--color-malva);
  outline-offset: 2px;
}

.mt-btn--primary {
  background: var(--color-malva);
  border-color: var(--color-malva);
  color: var(--color-white);
}
.mt-btn--primary:hover,
.mt-btn--primary:focus {
  background: #A33B68;
  border-color: #A33B68;
  color: var(--color-white);
}

.mt-btn--secondary {
  background: var(--color-grigio-blu);
  border-color: var(--color-grigio-blu);
  color: var(--color-white);
}
.mt-btn--secondary:hover,
.mt-btn--secondary:focus {
  background: #4A4F62;
  border-color: #4A4F62;
  color: var(--color-white);
}

.mt-btn--outline {
  background: transparent;
  border-color: var(--color-grigio-blu);
  color: var(--color-grigio-blu);
}
.mt-btn--outline:hover,
.mt-btn--outline:focus {
  background: var(--color-grigio-blu);
  color: var(--color-white);
}

.mt-btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--color-grigio-blu);
}
.mt-btn--ghost:hover,
.mt-btn--ghost:focus {
  background: var(--color-whisper-grey);
}

.mt-btn--danger {
  background: var(--semantic-danger);
  border-color: var(--semantic-danger);
  color: var(--color-white);
}

.mt-btn--sm   { padding: var(--space-1) var(--space-3); font-size: var(--fs-xs); }
.mt-btn--lg   { padding: var(--space-3) var(--space-5); font-size: var(--fs-md); }

/* ----------------------------------------------------------------------------
   Status badge
   Usage: <span class="mt-badge mt-badge--success">Active</span>
   Semantic variants map to the semantic palette (NOT categorical teacher/
   calendar colors — those stay separate by design).
   ---------------------------------------------------------------------------- */
.mt-badge {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  line-height: 1.2;
  border: 1px solid transparent;
  background: var(--color-whisper-grey);
  color: var(--color-grigio-blu);
  white-space: nowrap;
}

.mt-badge--success { background: color-mix(in srgb, var(--semantic-success) 12%, white); border-color: var(--semantic-success); color: var(--semantic-success); }
.mt-badge--warning { background: color-mix(in srgb, var(--semantic-warning) 12%, white); border-color: var(--semantic-warning); color: #8B6914; }
.mt-badge--danger  { background: color-mix(in srgb, var(--semantic-danger)  12%, white); border-color: var(--semantic-danger);  color: var(--semantic-danger); }
.mt-badge--info    { background: color-mix(in srgb, var(--semantic-info)    12%, white); border-color: var(--semantic-info);    color: var(--semantic-info); }
.mt-badge--neutral { background: color-mix(in srgb, var(--semantic-neutral) 12%, white); border-color: var(--semantic-neutral); color: var(--semantic-neutral); }
.mt-badge--brand   { background: color-mix(in srgb, var(--color-malva)      12%, white); border-color: var(--color-malva);      color: var(--color-malva); }

/* ----------------------------------------------------------------------------
   Data table
   Usage: <table class="mt-table"> ... </table>
   Add .mt-table--dense for admin density.
   ---------------------------------------------------------------------------- */
.mt-table {
  width: 100%;
  background: var(--color-white);
  border-collapse: collapse;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.mt-table thead th {
  background: var(--color-whisper-grey);
  text-align: left;
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-grigio-blu);
  border-bottom: 1px solid var(--border-subtle-grey);
}
.mt-table tbody td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle-grey);
  vertical-align: middle;
  font-size: var(--fs-sm);
  color: var(--color-text-black);
}
.mt-table tbody tr:last-child td { border-bottom: 0; }
.mt-table tbody tr:hover { background: rgba(99, 104, 130, 0.04); }

.mt-table--dense thead th,
.mt-table--dense tbody td {
  padding: var(--space-2) var(--space-3);
  font-size: var(--fs-xs);
}

/* ----------------------------------------------------------------------------
   Flatpickr z-index — CANONICAL, single source of truth.
   Flatpickr must float above Bootstrap modals (modal z-index is ~1055).
   Do not redeclare this value elsewhere.
   ---------------------------------------------------------------------------- */
.flatpickr-calendar {
  z-index: var(--z-flatpickr) !important;
}