/* Dynamic Dance Force Guild Fund portal.
   Palette and type follow the studio website: deep teal, bright teal, warm cream, Fraunces + Lato. */
:root {
  --ddf-teal: #19bba2;
  --ddf-teal-dark: #0d5e51;
  --ddf-teal-deep: #062f29;
  --ddf-cream: #f4ebd7;
  --ddf-cream-light: #fbf7ee;
  --ddf-ink: #1d2422;
  --ddf-muted: #55605d;
  --bs-body-font-family: 'Lato', 'Helvetica Neue', Arial, sans-serif;
  --bs-body-color: var(--ddf-ink);
  --bs-link-color-rgb: 13, 94, 81;
  --bs-link-hover-color-rgb: 6, 47, 41;
}

body { background: var(--ddf-cream-light); font-size: 1.0625rem; }

h1, h2, h3, .h1, .h2, .h3, .display-font {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  font-weight: 600;
  color: var(--ddf-teal-deep);
}

.skip-link { position: absolute; left: 1rem; top: 1rem; z-index: 1000; background: #fff; padding: .5rem 1rem; }

.site-header { background: var(--ddf-teal-deep); border-bottom: 4px solid var(--ddf-teal); }
.site-header .nav-link { color: rgba(255, 255, 255, .88); }
.site-header .nav-link:hover, .site-header .nav-link:focus, .site-header .nav-link.active { color: #fff; }
.site-header .nav-link.active { text-decoration: underline; text-underline-offset: .4em; text-decoration-color: var(--ddf-teal); }
.brand-logo { max-height: 44px; width: auto; }
.brand-wordmark { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 1.2rem; color: #fff; }
.brand-sub { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ddf-cream); border-left: 1px solid rgba(255,255,255,.4); padding-left: .5rem; }

.site-footer { background: var(--ddf-cream); color: var(--ddf-muted); }
.site-footer a { color: var(--ddf-teal-dark); }

.panel { border: 0; border-radius: 1rem; box-shadow: 0 2px 12px rgba(6, 47, 41, .08); }

.btn-brand {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--ddf-teal-dark);
  --bs-btn-border-color: var(--ddf-teal-dark);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--ddf-teal-deep);
  --bs-btn-hover-border-color: var(--ddf-teal-deep);
  --bs-btn-active-bg: var(--ddf-teal-deep);
  --bs-btn-focus-shadow-rgb: 25, 187, 162;
}
.btn-outline-brand {
  --bs-btn-color: var(--ddf-teal-dark);
  --bs-btn-border-color: var(--ddf-teal-dark);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--ddf-teal-dark);
  --bs-btn-hover-border-color: var(--ddf-teal-dark);
}

.form-control:focus, .form-select:focus { border-color: var(--ddf-teal); box-shadow: 0 0 0 .25rem rgba(25, 187, 162, .25); }

/* Auth pages */
.auth-card { max-width: 440px; margin: 0 auto; }
.auth-accent { height: 6px; border-radius: 1rem 1rem 0 0; background: linear-gradient(90deg, var(--ddf-teal-dark), var(--ddf-teal)); }

/* Balance card: neutral colouring until the studio confirms what positive/negative balances mean. */
.balance-card { background: #fff; border-top: 6px solid var(--ddf-teal); }
.balance-label { font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ddf-muted); font-weight: 700; }
.balance-amount {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: clamp(2.5rem, 11vw, 3.75rem);
  line-height: 1.1;
  color: var(--ddf-ink);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.balance-row-amount { font-weight: 700; font-variant-numeric: tabular-nums; }
.text-muted-ddf { color: var(--ddf-muted); }

.dancer-chip { display: inline-block; background: var(--ddf-cream); color: var(--ddf-teal-deep); border-radius: 2rem; padding: .25rem .8rem; margin: 0 .35rem .35rem 0; font-weight: 700; font-size: .95rem; }

.help-panel { background: var(--ddf-cream); }

/* Admin */
.stat-card .stat-value { font-family: 'Fraunces', Georgia, serif; font-size: 2rem; font-weight: 600; color: var(--ddf-teal-deep); }
.stat-card .stat-label { color: var(--ddf-muted); font-size: .9rem; }
.table-ddf { --bs-table-bg: #fff; }
.table-ddf thead th { background: var(--ddf-cream); color: var(--ddf-teal-deep); font-weight: 700; white-space: nowrap; }
.amount-cell { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.error-text { max-width: 28rem; overflow-wrap: anywhere; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}