/* =========================================================================
   Summer Shindig 2027 - brand layer ("Berry" scheme)
   Source: assets/Branding Guidelines.pdf (The Trull Players, v1)

   Loaded AFTER styles.css on every page. The template is driven by CSS
   variables, so most of the rebrand is just re-pointing those variables.

   Palette
     Shindig Pink   #FF74B8  primary brand colour / accents
     Punch Magenta  #C23CD0  gradient mid
     Grape          #6A1FB0  gradient deep  -> UI primary (buttons/links:
                                               white text needs the contrast)
     Deep Grape     #4A1480  keyline        -> hover / headings
     Sunshine Gold  #FFD84A  year stamp     -> warning / highlights
     Aqua           #58C7C6  letter accent  -> info
     Blossom        #FFD9EF  gradient light
     Midnight       #0E1F3D  dark background -> sidebar / logo panels
   Type
     Fredoka   - display / headings / big numbers
     Work Sans - body copy, listings, captions
   Logo rules applied here: shown at >= 200px wide, on Midnight or white,
   never with a shadow, glow, filter or reduced opacity.
   ========================================================================= */

:root {
  --brand-pink: #FF74B8;
  --brand-magenta: #C23CD0;
  --brand-grape: #6A1FB0;
  --brand-deep-grape: #4A1480;
  --brand-gold: #FFD84A;
  --brand-aqua: #58C7C6;
  --brand-blossom: #FFD9EF;
  --brand-midnight: #0E1F3D;
  --brand-gradient: linear-gradient(90deg, #FFD9EF 0%, #FF74B8 30%, #C23CD0 62%, #6A1FB0 100%);
  --brand-gradient-diagonal: linear-gradient(135deg, #FFD9EF 0%, #FF74B8 28%, #C23CD0 60%, #6A1FB0 100%);
  --brand-font-display: "Fredoka", "Work Sans", system-ui, sans-serif;
  --brand-font-body: "Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Template variables */
  --primary-rgb: 106, 31, 176;          /* Grape */
  --primary-tint1-rgb: 194, 60, 208;    /* Punch Magenta */
  --primary-tint2-rgb: 255, 116, 184;   /* Shindig Pink */
  --primary-tint3-rgb: 255, 216, 74;    /* Sunshine Gold */
  --secondary-rgb: 194, 60, 208;        /* Punch Magenta */
  --pink-rgb: 255, 116, 184;
  --purple-rgb: 106, 31, 176;
  --teal-rgb: 88, 199, 198;
  --info-rgb: 58, 160, 159;             /* Aqua, deepened slightly so white text stays readable */
  --warning-rgb: 245, 190, 20;          /* Sunshine Gold, deepened slightly for badges/buttons */
  --body-bg-rgb: 241, 238, 246;         /* pale lavender page, as in the guidelines */
  --default-body-bg-color: rgb(var(--body-bg-rgb));
  --default-background: #f1eef6;
  --default-font-family: var(--brand-font-body);
  --default-text-color: #24163a;
  --default-border: #e8e1f1;
  --bootstrap-card-border: #e8e1f1;
  --input-border: #ddd3ea;
  --text-muted: #6f6485;
  --list-hover-focus-bg: #f6f0fc;
  --header-bg: #ffffff;
  --header-prime-color: #5b4f70;
  --header-border-color: #e8e1f1;
}

/* ---------- Typography ---------- */
body {
  font-family: var(--brand-font-body);
  color: var(--default-text-color);
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.page-title,
.card-title,
.card .card-header .card-title,
.modal-title,
.swal2-title,
.side-menu__label1,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  font-family: var(--brand-font-display);
  font-weight: 600;
  letter-spacing: 0;
}
.page-title {
  color: var(--brand-deep-grape);
  font-weight: 700;
}
.card.custom-card .card-header .card-title {
  text-transform: none;
  font-size: 1rem;
  color: var(--brand-deep-grape);
}
.card.custom-card .card-header .card-title:before {
  background: var(--brand-gradient);
}
/* Big numbers on stat tiles read best in the display face */
.fs-18.fw-semibold, .fs-20.fw-semibold, .fs-22, .fs-24, .fs-26, .fs-28, .fw-semibold.fs-16.text-center {
  font-family: var(--brand-font-display);
}
a { color: var(--brand-grape); }
a:hover { color: var(--brand-deep-grape); }
.breadcrumb-item a { color: var(--text-muted); }
.breadcrumb-item.active { color: var(--brand-grape); }

/* ---------- Header ---------- */
.app-header {
  box-shadow: 0 2px 12px rgba(74, 20, 128, 0.06);
}
.app-header::before {
  /* thin brand gradient stripe across the top */
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  height: 4px;
  background: var(--brand-gradient);
}

/* ---------- Sidebar (Midnight) ---------- */
.app-sidebar,
.app-sidebar .main-sidebar-header {
  --menu-bg: var(--brand-midnight);
  --menu-prime-color: rgba(255, 255, 255, 0.72);
  --menu-border-color: rgba(255, 255, 255, 0.08);
  background: var(--brand-midnight);
}
.app-sidebar .slide__category {
  color: var(--brand-pink);
  opacity: 0.9;
  font-family: var(--brand-font-body);
  font-weight: 600;
  letter-spacing: 0.12em;
}
.app-sidebar .side-menu__item,
.app-sidebar .side-menu__item .side-menu__label,
.app-sidebar .side-menu__item .side-menu__icon {
  color: rgba(255, 255, 255, 0.78);
}
.app-sidebar .side-menu__item {
  border-radius: 0.5rem;
}
.app-sidebar .side-menu__item:hover,
.app-sidebar .side-menu__item:focus-visible {
  background: rgba(255, 255, 255, 0.06);
}
.app-sidebar .side-menu__item:hover .side-menu__label,
.app-sidebar .side-menu__item:hover .side-menu__icon {
  color: #fff;
}
.app-sidebar .side-menu__item.active,
.app-sidebar .slide.active > .side-menu__item {
  background: linear-gradient(90deg, rgba(255, 116, 184, 0.22), rgba(194, 60, 208, 0.12));
  box-shadow: inset 3px 0 0 var(--brand-pink);
}
.app-sidebar .side-menu__item.active .side-menu__label,
.app-sidebar .side-menu__item.active .side-menu__icon,
.app-sidebar .slide.active > .side-menu__item .side-menu__label,
.app-sidebar .slide.active > .side-menu__item .side-menu__icon {
  color: #fff !important;
}
.app-sidebar .side-menu__item .badge {
  font-family: var(--brand-font-body);
}

/* Logo area: the logo needs >= 200px width (guidelines s.02), so the sidebar
   header grows to fit it instead of squeezing it to the template's 1.7rem. */
:root { --brand-sidebar-header-h: 10.75rem; } /* fits a 208px-wide logo down to ~1.35:1 */
.app-sidebar .main-sidebar-header {
  height: var(--brand-sidebar-header-h);
  padding: 0.75rem 1rem;
  border-block-end: 1px solid rgba(255, 255, 255, 0.08);
}
.app-sidebar .main-sidebar-header .header-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.app-sidebar .main-sidebar-header .header-logo img.desktop-logo,
.app-sidebar .main-sidebar-header .header-logo img.desktop-dark {
  width: 208px !important;
  max-width: 208px !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain;
}
/* Sidebar is Midnight in every theme mode, so always show exactly one logo image */
.app-sidebar .main-sidebar-header .header-logo .desktop-logo { display: block !important; }
.app-sidebar .main-sidebar-header .header-logo .desktop-dark,
.app-sidebar .main-sidebar-header .header-logo .toggle-logo,
.app-sidebar .main-sidebar-header .header-logo .toggle-dark,
.app-sidebar .main-sidebar-header .header-logo .toggle-white,
.app-sidebar .main-sidebar-header .header-logo .desktop-white { display: none !important; }
.app-sidebar .main-sidebar-header .brand-wordmark {
  font-family: var(--brand-font-display);
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1.1;
  color: #fff;
  text-align: center;
}
.app-sidebar .main-sidebar-header .brand-wordmark span { color: var(--brand-gold); }
/* The theme sizes .main-sidebar at 100vh and relies on padding to clear its
   4.25rem header; with the taller logo header that pushed the bottom of the menu
   off-screen. Size the scroll area to exactly the space below the header. */
[data-nav-layout=vertical] .main-sidebar {
  margin-block-start: var(--brand-sidebar-header-h);
  height: calc(100vh - var(--brand-sidebar-header-h));
  height: calc(100dvh - var(--brand-sidebar-header-h));
  padding-block-end: 1.5rem;
}
/* Collapsed icon sidebar: too narrow for the logo, so hide it rather than shrink it */
[data-toggled=icon-overlay-close]:not([data-icon-overlay=open]) .app-sidebar .main-sidebar-header,
[data-toggled=icon-click-closed] .app-sidebar .main-sidebar-header,
[data-toggled=icon-hover-closed] .app-sidebar .main-sidebar-header,
[data-toggled=icon-text-close] .app-sidebar .main-sidebar-header {
  height: 4.25rem;
}
[data-toggled=icon-overlay-close]:not([data-icon-overlay=open]) .main-sidebar,
[data-toggled=icon-click-closed] .main-sidebar,
[data-toggled=icon-hover-closed] .main-sidebar,
[data-toggled=icon-text-close] .main-sidebar {
  margin-block-start: 4.25rem;
  height: calc(100vh - 4.25rem);
  height: calc(100dvh - 4.25rem);
}
[data-toggled=icon-overlay-close]:not([data-icon-overlay=open]) .app-sidebar .main-sidebar-header .header-logo,
[data-toggled=icon-click-closed] .app-sidebar .main-sidebar-header .header-logo,
[data-toggled=icon-hover-closed] .app-sidebar .main-sidebar-header .header-logo,
[data-toggled=icon-text-close] .app-sidebar .main-sidebar-header .header-logo {
  visibility: hidden;
}

/* ---------- Components ---------- */
.card.custom-card {
  border-radius: 0.75rem;
  box-shadow: 0 6px 18px rgba(74, 20, 128, 0.06);
}
.btn {
  font-family: var(--brand-font-body);
  font-weight: 500;
  border-radius: 0.5rem;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--brand-deep-grape) !important;
  border-color: var(--brand-deep-grape) !important;
}
.btn-outline-primary {
  color: var(--brand-grape) !important;
  border-color: var(--brand-grape) !important;
}
.btn-outline-primary:hover,
.btn-outline-primary.active,
.btn-check:checked + .btn-outline-primary {
  background-color: var(--brand-grape) !important;
  color: #fff !important;
}
.btn-warning, .bg-warning { color: #2a1a00 !important; }
.badge.bg-warning, .badge.bg-warning-transparent { color: #6b4e00 !important; }
.form-control:focus,
.form-select:focus {
  border-color: rgba(var(--primary-rgb), 0.55);
  box-shadow: 0 0 0 0.2rem rgba(var(--primary-rgb), 0.12);
}
.form-check-input:checked {
  background-color: var(--brand-grape);
  border-color: var(--brand-grape);
}
.nav-tabs .nav-link.active {
  color: var(--brand-grape);
  border-block-end-color: var(--brand-grape);
}
.nav-pills .nav-link.active {
  background: var(--brand-grape);
}
.progress-bar {
  background: var(--brand-gradient);
}
.alert-warning {
  /* gold text on a gold tint is unreadable; keep the tint, darken the text */
  background-color: rgba(255, 216, 74, 0.18);
  border-color: rgba(245, 190, 20, 0.35);
  color: #5c4300;
}
.alert-warning a, .alert-warning .alert-link { color: #4a1480; font-weight: 600; }
.alert-info {
  background-color: rgba(88, 199, 198, 0.14);
  border-color: rgba(88, 199, 198, 0.35);
  color: #1d5e5d;
}
.alert-primary {
  background: #f4ecfc;
  border-color: #e2cdf6;
  color: var(--brand-deep-grape);
}
.page-link { color: var(--brand-grape); }
.page-item.active .page-link {
  background-color: var(--brand-grape);
  border-color: var(--brand-grape);
}

/* SweetAlert2 */
.swal2-popup { font-family: var(--brand-font-body); border-radius: 0.9rem; }
.swal2-styled.swal2-confirm { background-color: var(--brand-grape); }

/* FullCalendar (dashboard + events) */
.fc .fc-button-primary {
  background-color: var(--brand-grape);
  border-color: var(--brand-grape);
}
.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active,
.fc .fc-button-primary:hover {
  background-color: var(--brand-deep-grape);
  border-color: var(--brand-deep-grape);
}
.fc .fc-day-today { background: rgba(255, 216, 74, 0.16) !important; }
.fc .fc-toolbar-title { font-family: var(--brand-font-display); color: var(--brand-deep-grape); }

/* ---------- Authentication pages (login, forgot/reset password, privacy) ---------- */
.authentication-background {
  background: var(--brand-gradient-diagonal) fixed;
  min-height: 100vh;
}
.authentication-background:before { display: none; }
.authentication-background .card.custom-card {
  border-radius: 1rem;
  box-shadow: 0 24px 48px rgba(74, 20, 128, 0.25);
  overflow: hidden;
}
.brand-logo-panel {
  /* Midnight panel: the guidelines' preferred background for the logo */
  background: var(--brand-midnight);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.75rem 1.5rem;
  margin: -3rem -3rem 1.75rem;   /* bleeds to the card edges (card-body has p-5) */
}
.brand-logo-panel img {
  width: 260px;
  max-width: 100%;
  min-width: 200px;
  height: auto;
}
.brand-logo-panel .brand-wordmark {
  font-family: var(--brand-font-display);
  font-weight: 700;
  font-size: 2rem;
  color: #fff;
  line-height: 1.1;
  text-align: center;
}
.brand-logo-panel .brand-wordmark span { color: var(--brand-gold); }
.brand-kicker {
  font-family: var(--brand-font-body);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand-magenta);
}

/* ---------- Dark mode (kept working, re-tinted to Midnight) ---------- */
[data-theme-mode=dark] {
  --body-bg-rgb: 10, 22, 44;
  --body-bg-rgb2: 18, 33, 62;
  --default-body-bg-color: rgb(var(--body-bg-rgb));
  --custom-white: #12213e;
  --default-text-color: rgba(255, 255, 255, 0.86);
  --default-border: rgba(255, 255, 255, 0.08);
  --header-bg: #12213e;
  --header-border-color: rgba(255, 255, 255, 0.08);
  --text-muted: rgba(255, 255, 255, 0.55);
}
[data-theme-mode=dark] .page-title,
[data-theme-mode=dark] .card.custom-card .card-header .card-title {
  color: #fff;
}
[data-theme-mode=dark] a:not(.btn):not(.side-menu__item):not(.header-link):not(.page-link) { color: var(--brand-pink); }