/* ==========================================================================
   DomeEducation - Luxury Dark Theme + LEGO Blue Buttons & Tactile Accents
   Inspired by GoFundMe & math.zoupons.com
   ========================================================================== */

:root {
  /* LEGO Signature Core Colors */
  --lego-blue: #0066E2;
  --lego-blue-dark: #00449E;
  --lego-blue-light: rgba(0, 102, 226, 0.12);
  --lego-blue-glow: rgba(0, 102, 226, 0.28);

  --lego-red: #E3000B;
  --lego-red-dark: #B30008;
  --lego-red-light: rgba(227, 0, 11, 0.12);
  --lego-red-glow: rgba(227, 0, 11, 0.25);

  --lego-yellow: #FFD500;
  --lego-yellow-dark: #D4B000;
  --lego-yellow-light: rgba(255, 213, 0, 0.15);
  --lego-yellow-glow: rgba(255, 213, 0, 0.3);

  --lego-green: #009639;
  --lego-green-dark: #00702A;
  --lego-green-light: rgba(0, 150, 57, 0.12);

  /* Clean Light Canvas Surfaces */
  --bg-main: #F8FAFC;
  --bg-surface: #FFFFFF;
  --bg-card: #FFFFFF;
  --bg-card-hover: #F1F5F9;
  --border-subtle: #E2E8F0;
  --border-focus: rgba(0, 102, 226, 0.5);

  /* High-Contrast Texts for White Canvas */
  --text-dark: #0F172A;
  --text-primary: #1E293B;
  --text-secondary: #475569;
  --text-muted: #64748B;
  --text-white: #FFFFFF;

  /* Typography */
  --font-heading: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-body: 'Outfit', system-ui, -apple-system, sans-serif;
  --font-badge: 'Rubik', sans-serif;
}

/* Base Light Canvas */
body {
  font-family: var(--font-body);
  color: var(--text-primary);
  background-color: var(--bg-main);
  min-height: 100vh;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--text-dark);
}



.role-pills {
  display: inline-flex;
  background: rgba(0, 0, 0, 0.6);
  padding: 0.25rem;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.role-pill-btn {
  padding: 0.35rem 0.95rem;
  border-radius: 9999px;
  font-weight: 800;
  font-size: 0.75rem;
  transition: all 0.2s ease;
  border: none;
  cursor: pointer;
  color: var(--text-secondary);
  background: transparent;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.role-pill-btn:hover {
  color: #fff;
}

.role-pill-btn.active-role-admin {
  background: var(--lego-red);
  color: #fff;
  box-shadow: 0 2px 8px var(--lego-red-glow);
}

.role-pill-btn.active-role-teacher {
  background: var(--lego-green);
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 150, 57, 0.35);
}

.role-pill-btn.active-role-parent {
  background: var(--lego-blue);
  color: #fff;
  box-shadow: 0 2px 8px var(--lego-blue-glow);
}

/* Announcement Ribbon (Sleek Top Bar Above Header with LEGO Yellow Divider) */
.top-announcement-bar {
  background: #00449E;
  color: #FFFFFF;
  font-size: 0.815rem;
  padding: 0.45rem 1rem;
  text-align: center;
  font-weight: 600;
  border-bottom: 3.5px solid var(--lego-yellow);
  /* Yellow divider between alert blue bar and the rest of the site */
  position: relative;
  z-index: 50;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.announcement-content {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  max-width: 72rem;
  margin: 0 auto;
  position: relative;
  padding: 0 1.5rem;
}

.announcement-link {
  color: #FFE033;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity 0.15s ease;
}

.announcement-link:hover {
  opacity: 0.85;
}

.announcement-close-btn {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.2rem 0.4rem;
  border-radius: 6px;
  transition: all 0.15s ease;
}

.announcement-close-btn:hover {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.15);
}

/* Brand Logo with LEGO Motifs */
.logo-brick-icon {
  width: 44px;
  height: 44px;
  background: var(--lego-blue);
  border-radius: 12px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 0 var(--lego-blue-dark);
  transition: transform 0.15s ease;
}

.logo-brick-icon.small {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  box-shadow: 0 2px 0 var(--lego-blue-dark);
}

.logo-brick-icon:hover {
  transform: translateY(-2px);
}

.brick-studs {
  position: absolute;
  top: 3px;
  left: 3px;
  right: 3px;
  bottom: 3px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  pointer-events: none;
  opacity: 0.3;
}

.brick-studs span {
  width: 7px;
  height: 7px;
  background: #fff;
  border-radius: 50%;
  margin: auto;
}

.brick-letter {
  font-family: var(--font-heading);
  font-weight: 900;
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  position: relative;
  z-index: 2;
}

.logo-brick-icon.small .brick-letter {
  font-size: 1.15rem;
}

.brand-title {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 1.35rem;
  letter-spacing: -0.03em;
  color: #fff;
}

.brand-badge {
  background: var(--lego-yellow);
  color: #000;
  font-family: var(--font-badge);
  font-weight: 900;
  font-size: 0.65rem;
  padding: 0.15rem 0.45rem;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.brand-subtitle {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-top: -3px;
}

/* Navigation Items */
.desktop-nav .nav-item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.6rem 0.9rem;
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--text-secondary);
  border-radius: 12px;
  transition: all 0.2s ease;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
}

.desktop-nav .nav-item:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.08);
}

.desktop-nav .nav-item.active {
  color: #fff;
  background: var(--lego-blue);
  box-shadow: 0 3px 0 var(--lego-blue-dark), 0 0 16px var(--lego-blue-glow);
}

.desktop-nav .nav-item.highlight-pizza {
  color: var(--lego-yellow);
}

.desktop-nav .nav-item.highlight-pizza:hover {
  background: rgba(255, 213, 0, 0.1);
}

.desktop-nav .nav-item.highlight-pizza.active {
  background: var(--lego-blue);
  color: #fff;
}

.desktop-nav .nav-item i {
  width: 17px;
  height: 17px;
}

/* Header Action Buttons */
.action-btn {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: all 0.15s ease;
}

.action-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

/* Amazon-style Header Actions */
.amazon-account-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.65rem;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
}

.amazon-account-btn:hover {
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.08);
}

.amazon-account-greeting {
  font-size: 0.7rem;
  color: #94A3B8;
  line-height: 1.15;
  font-weight: 500;
  display: block;
}

.amazon-account-title {
  font-size: 0.825rem;
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1.2;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.amazon-cart-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.65rem;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  transition: all 0.15s ease;
}

/* Tighter touch targets on phones so the header (logo + account + chat +
   cart + hamburger) fits in ~375px without the brand lockup getting
   squeezed and overlapping the account button. */
@media (max-width: 639px) {
  .amazon-cart-btn {
    padding: 0.3rem 0.35rem;
  }
}

.amazon-cart-btn:hover {
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.08);
}

.amazon-cart-icon-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.amazon-cart-count {
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  color: #FFD500;
  font-family: var(--font-badge);
  font-weight: 900;
  font-size: 0.85rem;
  line-height: 1;
}

.amazon-cart-label {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.85rem;
  color: #FFFFFF;
}

/* ==========================================================================
   Header Theme Configurations (Active White Theme & Preserved Dark Theme)
   ========================================================================== */

/* Active: Mascot Light Gray (#F2F1F2) Matching Scheme */
.main-header.header-light {
  background: #F2F1F2;
  border-bottom: 1px solid #D8D7D9;
  box-shadow: 0 2px 12px -2px rgba(0, 0, 0, 0.04);
}

.main-header.header-light .brand-title {
  color: #0F172A;
}

.main-header.header-light .brand-subtitle {
  color: #475569;
}

.main-header.header-light .desktop-nav .nav-item {
  color: #334155;
}

.main-header.header-light .desktop-nav .nav-item:hover {
  color: #0F172A;
  background: rgba(0, 102, 226, 0.08);
  border-color: rgba(0, 102, 226, 0.15);
}

.main-header.header-light .desktop-nav .nav-item.active {
  color: #FFFFFF;
  background: var(--lego-blue);
  box-shadow: 0 3px 0 var(--lego-blue-dark), 0 4px 14px rgba(0, 102, 226, 0.3);
}

.main-header.header-light .desktop-nav .nav-item.highlight-pizza {
  color: #B45309;
}

.main-header.header-light .desktop-nav .nav-item.highlight-pizza:hover {
  background: rgba(217, 119, 6, 0.09);
}

.main-header.header-light .desktop-nav .nav-item.highlight-pizza.active {
  background: var(--lego-blue);
  color: #FFFFFF;
}

.main-header.header-light .amazon-account-btn {
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(255, 255, 255, 0.55);
  border-radius: 8px;
}

.main-header.header-light .amazon-account-btn:hover {
  border-color: #94A3B8;
  background: #FFFFFF;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

.main-header.header-light .amazon-account-greeting {
  color: #475569 !important;
  font-weight: 700;
}

.main-header.header-light .amazon-account-title,
.main-header.header-light #header-active-role-badge {
  color: #0F172A !important;
  font-weight: 900;
}

.main-header.header-light .amazon-account-title svg,
.main-header.header-light .amazon-account-title i,
.main-header.header-light #user-menu-chevron {
  color: #334155 !important;
}

.main-header.header-light .amazon-account-btn:hover .amazon-account-title svg,
.main-header.header-light .amazon-account-btn:hover .amazon-account-title i,
.main-header.header-light .amazon-account-btn:hover #user-menu-chevron {
  color: #0066E2 !important;
}

.main-header.header-light .amazon-cart-btn:hover {
  border-color: #CBD5E1;
  background: rgba(255, 255, 255, 0.6);
}

.main-header.header-light .amazon-cart-icon,
.main-header.header-light .amazon-cart-btn svg {
  color: #0F172A;
}

.main-header.header-light .amazon-cart-count {
  color: #C2410C;
  /* Rich vivid burnt orange / amber for crisp contrast on white */
}

.main-header.header-light .amazon-cart-label {
  color: #0F172A;
}

.main-header.header-light .mobile-menu-btn,
.main-header.header-light .mobile-menu-btn svg {
  color: #0F172A;
}

/* Preserved: Prestige Dark Navy Header Scheme (Reference & Revert Ready)
   To revert, simply swap 'header-light' with 'header-dark' on the <header> element in index.html!
*/
.main-header.header-dark {
  background: rgba(2, 6, 23, 0.95);
  border-bottom: 1px solid #1E293B;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.main-header.header-dark .brand-title {
  color: #FFFFFF;
}

.main-header.header-dark .brand-subtitle {
  color: #94A3B8;
}

.main-header.header-dark .desktop-nav .nav-item {
  color: #94A3B8;
}

.main-header.header-dark .desktop-nav .nav-item:hover {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.06);
}

.main-header.header-dark .desktop-nav .nav-item.active {
  color: #FFFFFF;
  background: var(--lego-blue);
  box-shadow: 0 3px 0 var(--lego-blue-dark), 0 0 16px var(--lego-blue-glow);
}

.main-header.header-dark .desktop-nav .nav-item.highlight-pizza {
  color: var(--lego-yellow);
}

.main-header.header-dark .amazon-account-btn:hover {
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.08);
}

.main-header.header-dark .amazon-account-greeting {
  color: #94A3B8;
}

.main-header.header-dark .amazon-account-title {
  color: #FFFFFF;
}

.main-header.header-dark .amazon-cart-btn:hover {
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.08);
}

.main-header.header-dark .amazon-cart-icon,
.main-header.header-dark .amazon-cart-btn svg {
  color: #FFFFFF;
}

.main-header.header-dark .amazon-cart-count {
  color: #FFD500;
}

.main-header.header-dark .amazon-cart-label {
  color: #FFFFFF;
}

.main-header.header-dark .mobile-menu-btn,
.main-header.header-dark .mobile-menu-btn svg {
  color: #FFFFFF;
}

/* User Auth Button */
.user-auth-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.9rem;
  border-radius: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  font-weight: 700;
  font-size: 0.85rem;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  transition: all 0.15s ease;
}

.user-auth-btn:hover {
  border-color: var(--lego-blue);
  background: rgba(255, 255, 255, 0.08);
}

.user-avatar-badge {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.75rem;
  color: #fff;
}

.avatar-admin {
  background: var(--lego-red);
}

.avatar-teacher {
  background: var(--lego-green);
}

.avatar-parent {
  background: var(--lego-blue);
}

/* ==========================================================================
   BUTTONS: LUXURY TACTILE STYLING CALIBRATED FOR WHITE CANVAS
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.4rem;
  border-radius: 14px;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
  text-decoration: none;
  position: relative;
  user-select: none;
}

.btn-sm {
  padding: 0.45rem 0.9rem;
  font-size: 0.825rem;
  border-radius: 10px;
}

.btn-lg {
  padding: 0.95rem 1.85rem;
  font-size: 1.05rem;
  border-radius: 16px;
}

/* 1. LEGO BLUE PRIMARY BUTTON (Signature Action) */
.btn-lego-blue {
  background: var(--lego-blue);
  color: #FFFFFF !important;
  border-color: #0052B8;
  box-shadow: 0 4px 0 var(--lego-blue-dark), 0 8px 18px rgba(0, 102, 226, 0.28);
}

.btn-lego-blue:hover {
  transform: translateY(-2px);
  background: #1A7BFF;
  box-shadow: 0 6px 0 var(--lego-blue-dark), 0 12px 24px rgba(0, 102, 226, 0.35);
}

.btn-lego-blue:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 var(--lego-blue-dark);
}

/* 2. OUTLINE / SECONDARY BUTTON (High Contrast on White Canvas) */
.btn-outline {
  background: #FFFFFF;
  color: #0F172A !important;
  border: 1.5px solid #CBD5E1;
  box-shadow: 0 3px 0 #E2E8F0, 0 2px 6px rgba(0, 0, 0, 0.04);
}

.btn-outline:hover {
  border-color: var(--lego-blue);
  color: var(--lego-blue) !important;
  background: #F0F7FF;
  transform: translateY(-2px);
  box-shadow: 0 5px 0 #93C5FD, 0 6px 14px rgba(0, 102, 226, 0.15);
}

.btn-outline:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #CBD5E1;
}

/* 3. HERO OUTLINE BUTTON (Frosted Glass for Dark Hero/Banner Only) */
.btn-outline-hero {
  background: rgba(255, 255, 255, 0.08);
  color: #FFFFFF !important;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(8px);
}

.btn-outline-hero:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: #FFFFFF;
  color: #FFFFFF !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.6), 0 8px 18px rgba(0, 0, 0, 0.3);
}

.btn-outline-hero:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.5);
}

/* 4. LEGO YELLOW BUTTON (Gold High-Energy Accent) */
.btn-lego-yellow {
  background: var(--lego-yellow);
  color: #0F172A !important;
  font-weight: 900;
  border-color: #E6C000;
  box-shadow: 0 4px 0 var(--lego-yellow-dark), 0 8px 18px rgba(255, 213, 0, 0.32);
}

.btn-lego-yellow:hover {
  transform: translateY(-2px);
  background: #FFE033;
  box-shadow: 0 6px 0 var(--lego-yellow-dark), 0 12px 24px rgba(255, 213, 0, 0.4);
}

.btn-lego-yellow:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 var(--lego-yellow-dark);
}

/* 5. LEGO RED BUTTON (Important / Flagship Action) */
.btn-lego-red {
  background: var(--lego-red);
  color: #FFFFFF !important;
  border-color: #C20009;
  box-shadow: 0 4px 0 var(--lego-red-dark), 0 8px 18px rgba(227, 0, 11, 0.28);
}

.btn-lego-red:hover {
  transform: translateY(-2px);
  background: #FF1A27;
  box-shadow: 0 6px 0 var(--lego-red-dark), 0 12px 24px rgba(227, 0, 11, 0.35);
}

.btn-lego-red:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 var(--lego-red-dark);
}

/* 6. LEGO GREEN BUTTON (Success / Approved Action) */
.btn-lego-green {
  background: var(--lego-green);
  color: #FFFFFF !important;
  border-color: #008030;
  box-shadow: 0 4px 0 var(--lego-green-dark), 0 8px 18px rgba(0, 150, 57, 0.28);
}

.btn-lego-green:hover {
  transform: translateY(-2px);
  background: #00B344;
  box-shadow: 0 6px 0 var(--lego-green-dark), 0 12px 24px rgba(0, 150, 57, 0.35);
}

.btn-lego-green:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 var(--lego-green-dark);
}

/* 7. SECONDARY SLATE BUTTON */
.btn-secondary {
  background: #F1F5F9;
  color: #334155 !important;
  border: 1px solid #CBD5E1;
  box-shadow: 0 3px 0 #CBD5E1;
}

.btn-secondary:hover {
  background: #E2E8F0;
  color: #0F172A !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 0 #94A3B8;
}

.btn-secondary:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #CBD5E1;
}

/* 8. TACTILE QUANTITY BUTTONS (+ / -) */
.btn-quantity {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #F1F5F9;
  color: #0F172A;
  font-weight: 800;
  font-size: 1rem;
  border: 1px solid #CBD5E1;
  box-shadow: 0 2px 0 #CBD5E1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-quantity:hover {
  background: #E2E8F0;
  border-color: var(--lego-blue);
  color: var(--lego-blue);
  transform: translateY(-1px);
}

.btn-quantity:active {
  transform: translateY(1px);
  box-shadow: 0 1px 0 #CBD5E1;
}

/* 9. DONATION PRESET AMOUNT BUTTONS */
.don-amt-btn {
  background: #FFFFFF;
  color: #0F172A;
  border: 2px solid #E2E8F0;
  box-shadow: 0 3px 0 #E2E8F0;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: var(--font-heading);
  font-weight: 800;
  border-radius: 14px;
}

.don-amt-btn:hover {
  border-color: var(--lego-blue);
  color: var(--lego-blue);
  transform: translateY(-2px);
  box-shadow: 0 5px 0 #93C5FD;
}

.don-amt-btn.active,
.don-amt-btn.selected,
.teacher-grant-amt-btn.active,
.teacher-grant-amt-btn.selected {
  background: var(--lego-blue) !important;
  color: #FFFFFF !important;
  border-color: var(--lego-blue-dark) !important;
  box-shadow: 0 4px 0 var(--lego-blue-dark), 0 4px 12px rgba(0, 102, 226, 0.25) !important;
}

.teacher-grant-amt-btn {
  background: #FFFFFF;
  color: #0F172A;
  border: 2px solid #E2E8F0;
  box-shadow: 0 3px 0 #E2E8F0;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: var(--font-heading);
  font-weight: 800;
  border-radius: 14px;
}

.teacher-grant-amt-btn:hover {
  border-color: var(--lego-blue);
  color: var(--lego-blue);
  transform: translateY(-2px);
  box-shadow: 0 5px 0 #93C5FD;
}

/* Square Teacher Grant Tile */
.teacher-grant-tile {
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 1.15rem 0.85rem;
  border-radius: 1.25rem;
  background: #FFFFFF;
  border: 2px solid #E2E8F0;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  text-align: center;
  cursor: pointer;
  user-select: none;
}

.teacher-grant-tile:hover {
  border-color: var(--lego-blue);
  transform: translateY(-4px);
  box-shadow: 0 12px 24px -4px rgba(0, 102, 226, 0.15);
}

.teacher-grant-tile.selected {
  border-color: var(--lego-blue) !important;
  box-shadow: 0 0 0 4px rgba(0, 102, 226, 0.18), 0 12px 28px -4px rgba(0, 102, 226, 0.22) !important;
  background: #F0F7FF !important;
  transform: translateY(-2px);
}

/* ==========================================================================
   CARDS & CONTAINERS (CRISP WHITE CANVAS)
   ========================================================================== */

.lego-card {
  background: #FFFFFF;
  border-radius: 24px;
  border: 1.5px solid #E2E8F0;
  box-shadow: 0 8px 24px -4px rgba(15, 23, 42, 0.06), 0 4px 10px -4px rgba(15, 23, 42, 0.04);
  position: relative;
  overflow: hidden;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  color: #1E293B;
}

.lego-card:hover {
  border-color: #93C5FD;
  box-shadow: 0 16px 32px -8px rgba(0, 102, 226, 0.14), 0 0 0 1px #BFDBFE;
  transform: translateY(-3px);
}

.lego-card-stud-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--lego-blue) 0% 35%, var(--lego-yellow) 35% 70%, var(--lego-red) 70% 100%);
}

/* Badges (High Contrast on White Canvas) */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.65rem;
  border-radius: 9999px;
  font-family: var(--font-badge);
  font-weight: 800;
  font-size: 0.725rem;
  letter-spacing: 0.02em;
}

.badge-blue {
  background: #EFF6FF;
  color: #1D4ED8;
  border: 1px solid #BFDBFE;
}

.badge-red {
  background: #FEF2F2;
  color: #DC2626;
  border: 1px solid #FECACA;
}

.badge-yellow {
  background: #FEFCE8;
  color: #854D0E;
  border: 1px solid #FEF08A;
}

.badge-green {
  background: #F0FDF4;
  color: #15803D;
  border: 1px solid #BBF7D0;
}

.badge-purple {
  background: #FAF5FF;
  color: #7E22CE;
  border: 1px solid #E9D5FF;
}

.badge-slate {
  background: #F1F5F9;
  color: #475569;
  border: 1px solid #CBD5E1;
}

.badge-indigo {
  background: #EEF2FF;
  color: #4338CA;
  border: 1px solid #C7D2FE;
}

/* Admin console per-tile feature toggle (on/off for optional modules) */
.feature-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 38px;
  height: 22px;
  cursor: pointer;
  flex-shrink: 0;
}
.feature-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.feature-toggle .track {
  position: absolute;
  inset: 0;
  background: #CBD5E1;
  border-radius: 9999px;
  transition: background 0.2s ease;
}
.feature-toggle .thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 9999px;
  transition: transform 0.2s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.25);
}
.feature-toggle input:checked + .track {
  background: #16A34A;
}
.feature-toggle input:checked + .track .thumb {
  transform: translateX(16px);
}

/* Progress Bars (GoFundMe Style) */
.progress-container {
  background: #E2E8F0;
  border-radius: 9999px;
  height: 12px;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06);
}

.progress-bar-fill {
  height: 100%;
  border-radius: 9999px;
  transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  background: linear-gradient(90deg, var(--lego-blue), #38BDF8);
  box-shadow: 0 0 12px rgba(0, 102, 226, 0.35);
}

/* Indeterminate progress - for work in flight with no measurable percent
   (e.g. a CSV batch upload: the file itself transfers instantly, the wait
   is server-side row processing with no progress signal). Communicates
   "still working" rather than a real percentage. */
.progress-bar-indeterminate {
  height: 100%;
  width: 40%;
  border-radius: 9999px;
  background: linear-gradient(90deg, var(--lego-blue), #38BDF8);
  box-shadow: 0 0 12px rgba(0, 102, 226, 0.35);
  animation: progressIndeterminate 1.2s ease-in-out infinite;
}

@keyframes progressIndeterminate {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(350%); }
}

/* Modals & Drawers */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.7);
  backdrop-filter: blur(8px);
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.modal-container {
  background: #FFFFFF;
  color: #0F172A;
  border-radius: 28px;
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25);
  max-width: 38rem;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  border: 1.5px solid #E2E8F0;
  animation: modalPop 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalPop {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(12px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(6px);
  z-index: 55;
}

.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 440px;
  background: #FFFFFF;
  color: #0F172A;
  border-left: 1.5px solid #E2E8F0;
  box-shadow: -15px 0 40px rgba(15, 23, 42, 0.15);
  z-index: 60;
  display: flex;
  flex-direction: column;
  animation: slideDrawer 0.25s ease-out;
}

@keyframes slideDrawer {
  from {
    transform: translateX(100%);
  }

  to {
    transform: translateX(0);
  }
}

/* Toasts */
.toast-container {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 70;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  background: #FFFFFF;
  color: #0F172A;
  border-radius: 16px;
  padding: 0.9rem 1.35rem;
  box-shadow: 0 15px 35px rgba(15, 23, 42, 0.15);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: 700;
  font-size: 0.9rem;
  border: 1.5px solid #E2E8F0;
  border-left: 6px solid var(--lego-blue);
  animation: toastIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  max-width: 24rem;
}

.toast.toast-success {
  border-left-color: var(--lego-green);
}

.toast.toast-error {
  border-left-color: var(--lego-red);
}

.toast.toast-warning {
  border-left-color: var(--lego-yellow);
}

/* Mobile Nav Drawer */
.mobile-nav-drawer {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bg-surface);
  border-bottom: 2px solid var(--border-subtle);
  padding: 1.25rem;
  box-shadow: 0 20px 30px rgba(0, 0, 0, 0.6);
  z-index: 45;
}

.mobile-nav-links {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.mobile-nav-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: 12px;
  font-weight: 700;
  font-size: 1rem;
  color: var(--text-secondary);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  text-align: left;
  cursor: pointer;
}

.mobile-nav-item.active {
  background: var(--lego-blue);
  color: #fff;
  border-color: var(--lego-blue);
}

.hidden {
  display: none !important;
}

/* ==========================================================================
   Amazon ASIN Product Detail & Faculty Following Styles
   ========================================================================== */
.animate-fadeIn {
  animation: fadeIn 0.25s ease-out forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Auction countdown badge: flashes once per second (re-triggered by JS
   removing/re-adding this class on every tick) so the clock reads as
   visibly "live" rather than a silently-updating number. */
.auction-blink {
  animation: auctionBlink 1s ease-out;
}

@keyframes auctionBlink {
  0% {
    opacity: 0.35;
    transform: scale(1.08);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.asin-thumb-btn {
  transition: all 0.15s ease-in-out;
}

.asin-thumb-btn:hover {
  transform: translateY(-1px);
}

.asin-color-chip,
.asin-size-chip {
  cursor: pointer;
  user-select: none;
}

.asin-color-chip:active,
.asin-size-chip:active {
  transform: scale(0.97);
}

.follow-teacher-btn {
  user-select: none;
}

/* ==========================================================================
   FLARES Master Admin Site - Luxury Dark Glowing Tiled Theme
/* ==========================================================================
   10. Master Admin Site - Light/White Theme
   ========================================================================== */

.admin-site-container {
  background-color: #FFFFFF !important;
  color: #0F172A !important;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}

/* Security Cameras opts out of the 100vh floor above - it needs to fit
   exactly inside whatever #app-container.fit-viewport-page leaves below
   the header (see that class's own comment), not force the page to at
   least a full screen regardless of content like every other admin page
   intentionally does. */
.admin-site-container.admin-site-container-fit {
  min-height: 0;
  height: 100%;
}

/* Ambient glow atmospheric spots softened for white background */
.admin-ambient-spot {
  position: absolute;
  border-radius: 50%;
  filter: blur(140px);
  pointer-events: none;
  opacity: 0.08 !important;
  z-index: 0;
}

/* Admin Card Tiles (White Theme with subtle elevation) */
.admin-card-tile {
  position: relative;
  overflow: hidden;
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 1.5rem;
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05), 0 2px 6px -1px rgba(15, 23, 42, 0.03) !important;
}

.admin-card-tile:hover {
  transform: translateY(-4px);
  border-color: #CBD5E1 !important;
  box-shadow: 0 20px 35px -10px rgba(15, 23, 42, 0.08), 0 0 30px var(--tile-glow, rgba(0, 102, 226, 0.12)) !important;
}

.admin-tile-glow {
  position: absolute;
  top: -60px;
  right: -60px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  filter: blur(65px);
  pointer-events: none;
  opacity: 0.12;
  transition: opacity 0.3s ease;
  z-index: 0;
}

.admin-card-tile:hover .admin-tile-glow {
  opacity: 0.25;
}

.admin-tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.3rem 0.65rem;
  border-radius: 0.625rem;
  font-size: 0.72rem;
  font-weight: 700;
  background: #F1F5F9;
  border: 1px solid #E2E8F0;
  color: #475569;
  transition: all 0.2s ease;
}

.admin-tag-pill:hover {
  background: #E2E8F0;
  color: #0F172A;
  border-color: #CBD5E1;
}

.admin-tile-btn {
  width: 100%;
  padding: 0.85rem 1.25rem;
  border-radius: 0.875rem;
  font-weight: 800;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: #FFFFFF !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  border: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

.admin-tile-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, transparent 100%);
  pointer-events: none;
}

.admin-tile-btn:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px -4px var(--btn-shadow, rgba(0, 102, 226, 0.35));
}

.admin-tile-btn:active {
  transform: translateY(0);
}

/* Modal light theme variant for Admin details */
.modal-container-dark {
  background: #FFFFFF !important;
  color: #0F172A !important;
  border: 1.5px solid #E2E8F0 !important;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.15), 0 0 40px rgba(0, 102, 226, 0.08) !important;
}

.admin-input-dark {
  background: #FFFFFF !important;
  color: #0F172A !important;
  border: 1px solid #CBD5E1 !important;
  border-radius: 0.75rem;
  padding: 0.65rem 0.85rem;
  font-size: 0.8125rem;
  transition: all 0.2s ease;
}

.admin-input-dark:focus {
  outline: none;
  border-color: #0066E2 !important;
  box-shadow: 0 0 0 3px rgba(0, 102, 226, 0.15) !important;
}

.admin-input-dark::placeholder {
  color: #94A3B8 !important;
}

.admin-table-row {
  transition: background-color 0.15s ease;
  border-bottom: 1px solid #E2E8F0 !important;
}

.admin-table-row:hover {
  background-color: #F8FAFC !important;
}

/* Grade Multi-Selector Pill Buttons */
.grade-pill-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem 0.65rem;
  border-radius: 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  border: 1px solid #CBD5E1 !important;
  background: #F8FAFC !important;
  color: #475569 !important;
  user-select: none;
}

.grade-pill-btn:hover {
  background: #F1F5F9 !important;
  color: #0F172A !important;
}

.grade-pill-btn.selected {
  background: #0066E2 !important;
  color: #FFFFFF !important;
  border-color: #0066E2 !important;
  box-shadow: 0 0 12px rgba(0, 102, 226, 0.35);
}

/* Admin Subtab Navigation */
.admin-subtab-btn {
  padding: 0.6rem 1.15rem;
  font-size: 0.8rem;
  font-weight: 800;
  border-radius: 0.85rem;
  transition: all 0.15s ease;
  color: #64748B !important;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.admin-subtab-btn:hover {
  color: #0F172A !important;
  background: #F1F5F9 !important;
}

.admin-subtab-btn.active {
  background: #EFF6FF !important;
  color: #0066E2 !important;
  border-color: #BFDBFE !important;
  box-shadow: 0 2px 8px rgba(0, 102, 226, 0.12) !important;
}

/* Scoped Overrides for Admin Site Elements */
.admin-site-container h1,
.admin-site-container h2,
.admin-site-container h3,
.admin-site-container h4 {
  color: #0F172A !important;
}

/* Panels and Cards in Admin Site */
.admin-site-container .bg-slate-900\/90,
.admin-site-container .bg-slate-900\/80,
.admin-site-container .bg-slate-900\/70,
.admin-site-container .bg-slate-900\/60,
.admin-site-container .bg-slate-900\/95,
.admin-site-container .bg-slate-900,
.admin-site-container .bg-slate-950,
.admin-site-container [class*="bg-slate-900"] {
  background-color: #FFFFFF !important;
  border-color: #E2E8F0 !important;
  box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05), 0 2px 6px -1px rgba(15, 23, 42, 0.03) !important;
}

.admin-site-container .bg-slate-800\/80,
.admin-site-container .bg-slate-800\/90,
.admin-site-container .bg-slate-800,
.admin-site-container [class*="bg-slate-800"]:not(.btn):not(.btn *) {
  background-color: #F8FAFC !important;
  border-color: #E2E8F0 !important;
}

.admin-site-container .bg-white\/\[0\.02\],
.admin-site-container .bg-white\/\[0\.03\],
.admin-site-container .bg-white\/\[0\.04\],
.admin-site-container .bg-white\/\[0\.05\],
.admin-site-container [class*="bg-white/"] {
  background-color: #FFFFFF !important;
  border-color: #E2E8F0 !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05) !important;
}

.admin-site-container .border-white\/10,
.admin-site-container .border-white\/15,
.admin-site-container .border-white\/20,
.admin-site-container .border-white\/5,
.admin-site-container [class*="border-white/"] {
  border-color: #E2E8F0 !important;
}

.admin-site-container .divide-white\/5> :not([hidden])~ :not([hidden]),
.admin-site-container .divide-white\/10> :not([hidden])~ :not([hidden]),
.admin-site-container [class*="divide-white/"]> :not([hidden])~ :not([hidden]) {
  border-color: #F1F5F9 !important;
}

/* Text font color overrides for matching white background */
.admin-site-container .text-slate-400 {
  color: #64748B !important;
}

.admin-site-container .text-slate-300 {
  color: #475569 !important;
}

.admin-site-container .text-slate-200 {
  color: #334155 !important;
}

.admin-site-container .text-slate-100 {
  color: #0F172A !important;
}

/* High-Contrast Accessible Colors for White Background (Replaces neon dark-mode colors) */
.admin-site-container .text-amber-200,
.admin-site-container .text-amber-300,
.admin-site-container .text-amber-400,
.admin-site-container .text-yellow-300,
.admin-site-container .text-yellow-400,
.admin-site-container [class*="text-amber-200"],
.admin-site-container [class*="text-amber-300"],
.admin-site-container [class*="text-amber-400"],
.admin-site-container [class*="text-yellow-300"],
.admin-site-container [class*="text-yellow-400"] {
  color: #92400E !important;
  /* amber-800: deep, comfortable warm bronze-amber */
}

.admin-site-container .text-emerald-200,
.admin-site-container .text-emerald-300,
.admin-site-container .text-emerald-400,
.admin-site-container [class*="text-emerald-200"],
.admin-site-container [class*="text-emerald-300"],
.admin-site-container [class*="text-emerald-400"],
.admin-site-container [class*="text-green-300"],
.admin-site-container [class*="text-green-400"] {
  color: #065F46 !important;
  /* emerald-800: deep readable forest emerald */
}

.admin-site-container .text-blue-200,
.admin-site-container .text-blue-300,
.admin-site-container .text-blue-400,
.admin-site-container .text-sky-300,
.admin-site-container .text-sky-400,
.admin-site-container .text-cyan-300,
.admin-site-container .text-cyan-400,
.admin-site-container [class*="text-blue-200"],
.admin-site-container [class*="text-blue-300"],
.admin-site-container [class*="text-blue-400"],
.admin-site-container [class*="text-sky-300"],
.admin-site-container [class*="text-sky-400"],
.admin-site-container [class*="text-cyan-300"],
.admin-site-container [class*="text-cyan-400"] {
  color: #1E40AF !important;
  /* blue-800: deep royal blue */
}

.admin-site-container .text-purple-200,
.admin-site-container .text-purple-300,
.admin-site-container .text-purple-400,
.admin-site-container .text-indigo-300,
.admin-site-container .text-indigo-400,
.admin-site-container .text-fuchsia-300,
.admin-site-container .text-fuchsia-400,
.admin-site-container [class*="text-purple-200"],
.admin-site-container [class*="text-purple-300"],
.admin-site-container [class*="text-purple-400"],
.admin-site-container [class*="text-indigo-300"],
.admin-site-container [class*="text-indigo-400"],
.admin-site-container [class*="text-fuchsia-300"],
.admin-site-container [class*="text-fuchsia-400"] {
  color: #5B21B6 !important;
  /* purple-800: deep purple */
}

.admin-site-container .text-pink-300,
.admin-site-container .text-pink-400,
.admin-site-container .text-rose-300,
.admin-site-container .text-rose-400,
.admin-site-container .text-red-300,
.admin-site-container .text-red-400,
.admin-site-container [class*="text-pink-300"],
.admin-site-container [class*="text-pink-400"],
.admin-site-container [class*="text-rose-300"],
.admin-site-container [class*="text-rose-400"],
.admin-site-container [class*="text-red-300"],
.admin-site-container [class*="text-red-400"] {
  color: #9F1239 !important;
  /* rose-800 */
}

.admin-site-container .text-orange-300,
.admin-site-container .text-orange-400,
.admin-site-container [class*="text-orange-300"],
.admin-site-container [class*="text-orange-400"] {
  color: #9A3412 !important;
  /* orange-800 */
}

/* Badge and Pill Overrides on White Background */
.admin-site-container .bg-emerald-500\/10,
.admin-site-container .bg-emerald-500\/20,
.admin-site-container [class*="bg-emerald-500/"] {
  background-color: #ECFDF5 !important;
  border-color: #A7F3D0 !important;
  color: #065F46 !important;
}

.admin-site-container .bg-amber-500\/10,
.admin-site-container .bg-amber-500\/20,
.admin-site-container [class*="bg-amber-500/"] {
  background-color: #FFFBEB !important;
  border-color: #FDE68A !important;
  color: #92400E !important;
}

.admin-site-container .bg-blue-500\/10,
.admin-site-container .bg-blue-500\/20,
.admin-site-container [class*="bg-blue-500/"],
.admin-site-container [class*="bg-sky-500/"],
.admin-site-container [class*="bg-cyan-500/"] {
  background-color: #EFF6FF !important;
  border-color: #BFDBFE !important;
  color: #1E40AF !important;
}

.admin-site-container .bg-purple-500\/10,
.admin-site-container .bg-purple-500\/20,
.admin-site-container [class*="bg-purple-500/"],
.admin-site-container [class*="bg-indigo-500/"],
.admin-site-container [class*="bg-fuchsia-500/"] {
  background-color: #FAF5FF !important;
  border-color: #E9D5FF !important;
  color: #5B21B6 !important;
}

.admin-site-container [class*="bg-red-500/"],
.admin-site-container [class*="bg-rose-500/"],
.admin-site-container [class*="bg-pink-500/"] {
  background-color: #FFF1F2 !important;
  border-color: #FECDD3 !important;
  color: #9F1239 !important;
}

.admin-site-container .bg-slate-500\/10,
.admin-site-container .bg-slate-500\/20,
.admin-site-container [class*="bg-slate-500/"] {
  background-color: #F1F5F9 !important;
  border-color: #CBD5E1 !important;
  color: #334155 !important;
}

/* Status indicator dot styling */
.admin-site-container .bg-emerald-400 {
  background-color: #059669 !important;
}

.admin-site-container .bg-amber-400 {
  background-color: #D97706 !important;
}

.admin-site-container .bg-slate-400 {
  background-color: #64748B !important;
}

/* Selective text-white override: only for text on white backgrounds, protect buttons & badges */
.admin-site-container .text-white:not(.btn, .btn *,
  .badge, .badge *,
  .admin-tile-btn, .admin-tile-btn *,
  .bg-lego-blue, .bg-lego-blue *,
  .bg-lego-red, .bg-lego-red *,
  .bg-lego-green, .bg-lego-green *,
  .bg-blue-600, .bg-blue-600 *,
  .bg-emerald-600, .bg-emerald-600 *,
  .bg-purple-600, .bg-purple-600 *,
  .bg-amber-600, .bg-amber-600 *,
  .bg-red-600, .bg-red-600 *,
  .bg-cyan-600, .bg-cyan-600 *,
  .bg-pink-600, .bg-pink-600 *,
  .bg-indigo-600, .bg-indigo-600 *,
  .bg-fuchsia-600, .bg-fuchsia-600 *,
  .bg-orange-600, .bg-orange-600 *,
  .bg-sky-600, .bg-sky-600 *,
  [class*="bg-gradient-"] *) {
  color: #0F172A !important;
}

/* Form controls in Admin */
.admin-site-container input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.admin-site-container select,
.admin-site-container textarea {
  background-color: #FFFFFF !important;
  color: #0F172A !important;
  border: 1px solid #CBD5E1 !important;
}

.admin-site-container input::placeholder,
.admin-site-container textarea::placeholder {
  color: #94A3B8 !important;
}

.admin-site-container input:focus,
.admin-site-container select:focus,
.admin-site-container textarea:focus {
  border-color: #0066E2 !important;
  box-shadow: 0 0 0 3px rgba(0, 102, 226, 0.15) !important;
}

.admin-site-container thead {
  background-color: #F8FAFC !important;
  color: #475569 !important;
  border-bottom: 1px solid #E2E8F0 !important;
}

.admin-site-container .btn-outline {
  border-color: #CBD5E1 !important;
  color: #334155 !important;
  background-color: #FFFFFF !important;
}

.admin-site-container .btn-outline:hover {
  background-color: #F8FAFC !important;
  color: #0F172A !important;
  border-color: #94A3B8 !important;
}

/* ==========================================================================
   Header User Profile & Persona Switcher Dropdown (Light/White Theme)
   ========================================================================== */
.user-dropdown-wrapper {
  position: relative;
  display: inline-block;
}

.user-profile-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 320px;
  max-width: calc(100vw - 2rem);
  background: #FFFFFF;
  color: #0F172A;
  border: 1px solid #E2E8F0;
  border-radius: 1.25rem;
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.12), 0 0 25px rgba(0, 102, 226, 0.08);
  z-index: 100;
  padding: 0.85rem;
  animation: dropdownFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

@keyframes dropdownFadeIn {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.96);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.user-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 0.75rem;
  border-radius: 0.875rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: #334155;
  transition: all 0.15s ease;
  cursor: pointer;
  border: 1px solid transparent;
}

.user-dropdown-item:hover {
  background: #F1F5F9;
  color: #0F172A;
}

.user-dropdown-item.active-persona {
  background: #EFF6FF;
  border-color: #BFDBFE;
  color: #0066E2;
}

.user-dropdown-item .persona-title {
  color: #0F172A;
  transition: color 0.15s ease;
}

.user-dropdown-item:hover .persona-title {
  color: #0F172A;
}

.user-dropdown-item.active-persona .persona-title {
  color: #0052B4;
}

.user-dropdown-item .persona-desc {
  color: #64748B;
  transition: color 0.15s ease;
}

.user-dropdown-item.active-persona .persona-desc {
  color: #2563EB;
}

/* Fallback overrides in case text-white or light text is used inside dropdown items */
.user-dropdown-item .text-white {
  color: #0F172A !important;
}

.user-dropdown-item.active-persona .text-white {
  color: #0052B4 !important;
}

.user-profile-dropdown ::-webkit-scrollbar {
  width: 4px;
}

.user-profile-dropdown ::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 4px;
}

/* ==========================================================================
   WhatsApp Experience & Campus Messenger Styles
   ========================================================================== */

/* Chat Header Thumbnail & Unread Badge */
.flares-chat-badge {
  position: absolute;
  top: -8px;
  right: -6px;
  left: auto !important;
  transform: none !important;
  background: #25D366 !important;
  /* Authentic WhatsApp Green */
  color: #FFFFFF !important;
  font-family: var(--font-badge);
  font-weight: 900;
  font-size: 0.72rem;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 9999px;
  min-width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(37, 211, 102, 0.5);
  border: 2px solid #FFFFFF;
}

.main-header.header-light .flares-chat-btn:hover {
  background: rgba(0, 0, 0, 0.04);
}

.main-header.header-light .flares-chat-badge {
  border-color: #F2F1F2;
}

/* WhatsApp Main Frame - fills whatever space .chat-page-wrapper's flex
   layout leaves it (not an independent vh calc) so it always fits inside
   the viewport exactly, with no fixed min-height floor to force the page
   taller than short screens can show without double-scrolling. */
.whatsapp-app-container {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  max-height: 900px;
  background: #FFFFFF;
  border-radius: 1.5rem;
  overflow: hidden;
  box-shadow: 0 20px 45px -10px rgba(15, 23, 42, 0.15), 0 0 0 1px rgba(15, 23, 42, 0.08);
}

/* #app-container is a flex-1 child of <body> (see index.html) so it fills
   exactly the space the header/footer leave - but a flex item's default
   min-height:auto still floors it at its own content's natural size,
   which on the chat page would force the page taller than the
   already viewport-fitted messenger panel actually needs, reintroducing
   the double-scroll this whole page exists to avoid. Scoped to chat only. */
#app-container.chat-page-fit {
  min-height: 0;
}

/* Same escape hatch as .chat-page-fit above, under a page-agnostic name -
   Security Cameras needs the exact same "don't let flex's default
   min-height:auto force the page taller than the viewport" fix so a 4x4
   camera grid can fill the screen via flex-1 instead of the whole page
   scrolling to show all 16 tiles. */
#app-container.fit-viewport-page {
  min-height: 0;
  /* #app-container's base class also carries pb-24 (6rem) for the normal
     case of "space before the footer" - irrelevant and actively wrong
     here since the footer is hidden on this page, and left unchecked it's
     exactly the gap that kept the camera grid from truly fitting the
     viewport even once every other container in the chain was sized right. */
  padding-bottom: 0 !important;
}

/* Mobile chat = a single full-screen "app" view, not a card floating in
   the normal site chrome: the host header (logo/nav/cart/hamburger)
   steps aside in favor of the Messenger's own compact header (with its
   own "back to portal" control), and the WhatsApp frame goes edge-to-edge
   instead of sitting in a rounded, shadowed card. Desktop keeps both -
   there's room, and the card-in-a-page look is the intentional "WhatsApp
   Web" reference there. */
@media (max-width: 639px) {
  body.chat-page-active > header.main-header {
    display: none;
  }
  body.chat-page-active .whatsapp-app-container {
    border-radius: 0;
    box-shadow: none;
  }
}

/* WhatsApp Wallpaper Pattern */
.whatsapp-wallpaper {
  background-color: #EFEAE2;
  background-image:
    radial-gradient(#d5cdc4 1px, transparent 1px),
    radial-gradient(#d5cdc4 1px, #EFEAE2 1px);
  background-size: 24px 24px;
  background-position: 0 0, 12px 12px;
}

/* Message Bubbles */
.whatsapp-bubble-in {
  background: #FFFFFF;
  border-radius: 0.85rem;
  border-top-left-radius: 0.2rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
  position: relative;
}

.whatsapp-bubble-out {
  background: #D9FDD3;
  border-radius: 0.85rem;
  border-top-right-radius: 0.2rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
  position: relative;
}

/* Teacher Star Distinction */
.teacher-star-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-weight: 900;
  font-size: 0.68rem;
  color: #B45309;
  background: #FEF3C7;
  border: 1px solid #FDE68A;
  padding: 0.15rem 0.5rem;
  border-radius: 9999px;
  letter-spacing: 0.02em;
}

.parent-pill-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-weight: 800;
  font-size: 0.68rem;
  color: #1D4ED8;
  background: #EFF6FF;
  border: 1px solid #DBEAFE;
  padding: 0.15rem 0.5rem;
  border-radius: 9999px;
}

/* Chat Item Active & Hover */
.whatsapp-chat-item {
  transition: background-color 0.15s ease;
  cursor: pointer;
}

.whatsapp-chat-item:hover {
  background-color: #F8FAFC;
}

.whatsapp-chat-item.active {
  background-color: #F1F5F9;
}

.whatsapp-chat-item.unread-thread {
  background-color: #F0FDF4;
}

.whatsapp-chat-item.unread-thread:hover {
  background-color: #DCFCE7;
}

/* Green unread pill badge */
.whatsapp-unread-badge {
  background-color: #25D366;
  color: #FFFFFF;
  font-weight: 900;
  font-size: 0.7rem;
  min-width: 1.25rem;
  height: 1.25rem;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.35rem;
}

/* Fund a Teacher Grant Section Scroll Margin */
#teacher-grant-form-card {
  scroll-margin-top: 125px;
}

/* Multi-Media Uploader & Drag-and-Drop Sortable Cards */
#product_media_dropzone.drag-active {
  border-color: #38bdf8 !important;
  background-color: rgba(56, 189, 248, 0.12) !important;
  transform: scale(1.01);
}

.product-media-card {
  user-select: none;
  cursor: grab;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, border-color 0.2s ease;
}

.product-media-card:active {
  cursor: grabbing;
}

.product-media-card.dragging {
  opacity: 0.35 !important;
  transform: scale(0.96) !important;
}

.product-media-card.drag-over {
  border-color: #38bdf8 !important;
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.5), 0 12px 24px -6px rgba(0, 102, 226, 0.35) !important;
  transform: translateY(-3px) scale(1.02) !important;
}

/* Scholar Search & Autocomplete Recommendations */
.scholar-search-wrapper {
  position: relative;
}

.scholar-dropdown {
  box-shadow: 0 20px 40px -6px rgba(15, 23, 42, 0.22), 0 0 0 1px rgba(0, 0, 0, 0.05);
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
  z-index: 60 !important;
}

.scholar-dropdown::-webkit-scrollbar {
  width: 5px;
}
.scholar-dropdown::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 9999px;
}

.scholar-suggestion-item {
  transition: all 0.15s ease;
}

.scholar-suggestion-item:hover,
.scholar-suggestion-item.active-item {
  background-color: #eff6ff !important;
}

.scholar-recommendation-chip {
  transition: all 0.18s ease;
  user-select: none;
}

.scholar-recommendation-chip:hover {
  transform: translateY(-1px);
}