/* Bootstrap hack added 2026/02/17 due to a bootstrap issue that recently came up */
textarea.form-control {
    height: auto !important;
    min-height: 2.5em; /* Optional: prevents collapse when empty */
}



/* ═══════════════════════════════════════════════════════════════════════════
   DESIGN TOKENS - CSS Custom Properties
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Typography ─────────────────────────────────────────────────────────── */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  --font-size-xs: 0.75rem;    /* 12px */
  --font-size-sm: 0.875rem;   /* 14px */
  --font-size-base: 1rem;     /* 16px */
  --font-size-lg: 1.125rem;   /* 18px */
  --font-size-xl: 1.25rem;    /* 20px */
  --font-size-2xl: 1.5rem;    /* 24px */
  --font-size-3xl: 2rem;      /* 32px */
  --font-size-BIG: 3rem;      /* 32px */
  
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  
  /* ── Colors (inspired by logo tones #8765D6 and #16DAF0) ────────────────── */
  /* Purple palette */
  --color-purple-50: #F5F2FA;
  --color-purple-100: #E8E2F3;
  --color-purple-200: #D4C9E6;
  --color-purple-300: #B8A9D9;
  --color-purple-400: #9B8AC4;
  --color-purple-500: #8765D6;  /* Logo color */
  --color-purple-600: #7451C4;
  --color-purple-700: #6B5B95;
  --color-purple-800: #574A78;
  --color-purple-900: #3D3452;
  --color-purple-dark: #2D2638; /* For very dark accents */
  --color-purple-darkest: #251f2e; /* For near-black */
  
  /* Teal/Cyan palette */
  --color-teal-50: #EDFAFB;
  --color-teal-100: #D4F5F6;
  --color-teal-200: #A8E6E9;
  --color-teal-300: #7DDCE0;
  --color-teal-400: #5CB8B8;
  --color-teal-500: #16DAF0;  /* Logo color */
  --color-teal-600: #0DBFD3;
  --color-teal-700: #3A8A8A;
  --color-teal-800: #2D6B6B;
  --color-teal-800-transparent: rgba(52, 125, 125, 0.447);
  --color-teal-900: #1F4D4D;
  
  /* Neutral palette (warm grays) */
  --color-gray-50: #FAFAF9;
  --color-gray-100: #F5F4F3;
  --color-gray-200: #E8E6E3;
  --color-gray-300: #D4D1CC;
  --color-gray-400: #A8A49E;
  --color-gray-500: #787470;
  --color-gray-600: #5C5955;
  --color-gray-700: #3D3B38;
  --color-gray-800: #262524;
  --color-gray-900: #1A1918;
  
  /* Semantic colors */
  --color-primary: var(--color-purple-600);
  --color-primary-hover: var(--color-purple-700);
  --color-primary-light: var(--color-purple-100);
  --color-accent: var(--color-teal-600);
  --color-accent-hover: var(--color-teal-700);
  --color-accent-light: var(--color-teal-100);
  
  --color-text: var(--color-gray-800);
  --color-text-muted: var(--color-gray-500);
  --color-text-light: var(--color-gray-100);
  
  --color-background: var(--color-gray-50);
  --color-surface: var(--color-gray-100);
  --color-surface-transparent: rgba(245, 244, 243, 0.9);
  --color-border: var(--color-gray-200);
  
  /* ── Spacing (8px base system) ──────────────────────────────────────────── */
  --space-0: 0;
  --space-xs: 0.25rem;   /* 4px */
  --space-sm: 0.5rem;    /* 8px */
  --space-md: 1rem;      /* 16px */
  --space-lg: 1.5rem;    /* 24px */
  --space-xl: 2rem;      /* 32px */
  --space-2xl: 3rem;     /* 48px */
  --space-3xl: 4rem;     /* 64px */
  
  /* ── Border Radius ──────────────────────────────────────────────────────── */
  --radius-sm: 0.25rem;  /* 4px */
  --radius-md: 0.5rem;   /* 8px */
  --radius-lg: 0.75rem;  /* 12px */
  --radius-xl: 1rem;     /* 16px */
  --radius-full: 9999px;
  
  /* ── Shadows ────────────────────────────────────────────────────────────── */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  
  /* ── Transitions ────────────────────────────────────────────────────────── */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow: 350ms ease;

  
  
}

textarea,
input[type="text"] {
    background-color: var(--color-surface) !important;
    color: var(--color-text) !important;
}

/* Set your main modal color */
.modal-content {
    background: linear-gradient(to bottom, var(--color-purple-darkest) 0%, var(--color-purple-900) 40%, var(--color-purple-dark) 100%) !important; 
    
}



.modal-content .list-group-item,
.modal-content .nav-tabs,
.modal-content .nav-tabs.active,
.modal-content .tab-content,
.modal-content .card,
.modal-content .accordion-button.collapsed,
.modal-content .nav-link.active,
.modal-content .accordion-item
{
    background-color: transparent !important;
    color: var(--color-gray-300) !important;
}
.modal-content .nav-link.active {
    background-color: transparent !important;
}
.modal-content .list-group-item {
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.modal-content .list-group-item:hover
{
    box-shadow: 0 0 0 1px var(--color-teal-500) !important;
}
.modal-content .list-group-item.active
{
    border-color: var(--color-teal-500) !important;
}






/* Custom styles for radio buttons */
:is(#formio, #formioEdited, #formioOriginal) .form-check-input[type="radio"] {
  filter: brightness(0.85);
}

/* Custom styles for checkboxes */
:is(#formio, #formioEdited, #formioOriginal) .form-check-input[type="checkbox"] {
  filter: brightness(0.85);
}

.clearShareForm {
  position: absolute;
  top: 60px;
  right: 50px;
  z-index: 1000;
}

#formio {
  margin: var(--space-2xl);
  font-size: var(--font-size-lg);
}
#formio .form-control {
  font-size: var(--font-size-lg);
}



.col-form-label {
  font-weight: var(--font-weight-semibold);
}

.card-title {
  font-weight: var(--font-weight-semibold);
}

.bold {
  font-weight: var(--font-weight-bold);
}

/* ── Form Elements ────────────────────────────────────────────────────────── */
.form-control,
.form-select {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--color-purple-400);
  box-shadow: 0 0 0 3px var(--color-purple-100);
  outline: none;
}

.form-control::placeholder {
  color: var(--color-gray-400);
}

.form-label {
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--space-xs);
  font-size: var(--font-size-sm);
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn {
  font-family: var(--font-family);
  font-weight: var(--font-weight-medium);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  cursor: pointer;
}

.btn-primary {
  background-color: var(--color-purple-600);
  border-color: var(--color-purple-600);
  color: var(--color-gray-100);
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--color-purple-700);
  border-color: var(--color-purple-700);
}

.btn-outline-light {
  border-color: rgba(255, 255, 255, 0.5);
  color: var(--color-gray-100);
}

.btn-outline-light:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.8);
  color: var(--color-gray-100);
}

.btn-sm {
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--font-size-sm);
}

.btn-link {
  text-decoration: none;
}

.btn-link:hover {
  text-decoration: underline;
}

.white-text {
  font-size: var(--font-size-s);
  text-decoration: none;
  color: var(--color-gray-400) !important;
}
.white-text:hover {
  text-decoration: underline;
  color: var(--color-gray-100) !important;
}

body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

.error-text {
  display: none;
  color: #E53E3E;
  font-size: var(--font-size-sm);
}

#authAccordion .accordion-button.collapsed {
  background-color: var(--color-gray-100);
  color: var(--color-text);
}

.red {
  color: rgba(229, 62, 62, 0.7);
}

.grey {
  color: rgba(168, 164, 158, 0.7);
}

.grey-preview {
  color: rgba(168, 164, 158, 0.3);
}

.blue {
  color: rgba(22, 218, 240, 0.7);
}

.green {
  color: rgba(56, 161, 105, 0.7);
}

.pencil-color {
  color: rgba(214, 158, 46, 0.7);
}

/* Minifilter selected icon colors - semi-transparent */
.minifilter .selected-icon.red {
  color: rgba(229, 62, 62, 0.7);
}

.minifilter .selected-icon.green {
  color: rgba(56, 161, 105, 0.7);
}

.minifilter .selected-icon.blue {
  color: rgba(22, 218, 240, 0.7);
}

.minifilter .selected-icon.pencil-color {
  color: rgba(214, 158, 46, 0.7);
}

/* Minifilter icon-toggle checked colors - semi-transparent */
.minifilter .icon-toggle .icon-checked.red {
  color: rgba(229, 62, 62, 0.8);
}

.minifilter .icon-toggle .icon-checked.green {
  color: rgba(56, 161, 105, 0.8);
}

.minifilter .icon-toggle .icon-checked.blue {
  color: rgba(22, 218, 240, 0.8);
}

.minifilter .icon-toggle .icon-checked.pencil-color {
  color: rgba(214, 158, 46, 0.8);
}

.smallIcon {
  font-size: 1.5rem;
}

.smallestIcon {
  font-size: 1.25rem;
}

.icon-dropdown {
  position: relative;
  display: inline-block;
}

.icon-dropdown-toggle {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: var(--space-xs);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

/* Icon-specific hover colors - effect on the icon itself */
.icon-dropdown-toggle[data-icon-type="heart"]:hover i {
  color: rgba(229, 62, 62, 0.6);
  text-shadow: 0 0 0 1.5px #E53E3E;
}

.icon-dropdown-toggle[data-icon-type="eye"]:hover i {
  color: rgba(56, 161, 105, 0.6);
  text-shadow: 0 0 0 1.5px #38A169;
}

.icon-dropdown-toggle[data-icon-type="tags"]:hover i {
  color: rgba(22, 218, 240, 0.6);
  text-shadow: 0 0 0 1.5px var(--color-teal-600);
}

.icon-dropdown-toggle[data-icon-type="pencil"]:hover i {
  color: rgba(214, 158, 46, 0.6);
  text-shadow: 0 0 0 1.5px #D69E2E;
}

/* Fallback hover for toggles without data-icon-type */
.icon-dropdown-toggle:hover i {
  color: rgba(135, 101, 214, 0.6);
  text-shadow: 0 0 0 1.5px var(--color-purple-400);
}

.icon-dropdown-menu {
  position: absolute;
  display: none;
  list-style-type: none;
  padding: var(--space-xs);
  margin: 0;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  top: 100%;
  background: rgba(61, 52, 82, 0.7);
  border: 1px solid var(--color-teal-800-transparent);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  z-index: 1000;
  white-space: nowrap;
  opacity: 0;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
  min-width: 40px;
}

.icon-dropdown.open .icon-dropdown-menu {
  display: block;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.icon-dropdown-menu span {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xs);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
  color: var(--color-gray-300);
}

.icon-dropdown-menu span:hover {
  background-color: rgba(22, 218, 240, 0.15);
  color: var(--color-teal-400);
}

.icon-dropdown-menu a:active {
  color: inherit;
}

.icon-toggle {
  display: inline-block;
  cursor: pointer;
  padding: var(--space-xs);
  padding-left: 10px !important;
  padding-right: 10px !important;
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

/* Icon-specific hover colors - effect on the icon itself */
.icon-toggle[data-icon-type="heart"]:hover i {
  color: rgba(229, 62, 62, 0.6);
  text-shadow: 0 0 0 1.5px #E53E3E;
}

.icon-toggle[data-icon-type="eye"]:hover i {
  color: rgba(56, 161, 105, 0.6);
  text-shadow: 0 0 0 1.5px #38A169;
}

.icon-toggle[data-icon-type="tags"]:hover i {
  color: rgba(22, 218, 240, 0.6);
  text-shadow: 0 0 0 1.5px var(--color-teal-600);
}

.icon-toggle[data-icon-type="pencil"]:hover i {
  color: rgba(214, 158, 46, 0.6);
  text-shadow: 0 0 0 1.5px #D69E2E;
}

/* Fallback hover for toggles without data-icon-type */
.icon-toggle:hover i {
  color: rgba(135, 101, 214, 0.6);
  text-shadow: 0 0 0 1.5px var(--color-purple-400);
}

.icon-toggle input {
  display: none;
}

.icon-toggle .icon-unchecked {
  display: inline-block;
}

.icon-toggle .icon-checked {
  display: none;
}

.icon-toggle input:checked~.icon-toggle-icon .icon-unchecked {
  display: none;
}

.icon-toggle input:checked~.icon-toggle-icon .icon-checked {
  display: inline-block;
}

.mainContainer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-xl) var(--space-xl) var(--space-2xl);
  background: linear-gradient(to bottom, var(--color-purple-darkest) 0%, var(--color-purple-600) 1200px, var(--color-purple-dark) 100%);
  position: relative;
  overflow: hidden;
  min-height: 100vh;
}

/* ── Sinusoidal wave animation ──
   Each wave uses an inline SVG with a cubic-bezier path approximating a sine curve.
   The SVG tiles seamlessly; the element is 200% wide and translates by one tile width. 
   The waves-container fades to transparent toward the bottom via a CSS mask. */

.waves-container {
  position: absolute;
  top: 30px;
  left: 0;
  width: 100%;
  height: 300px;
  pointer-events: none;
  z-index: 0;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.5) 40%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.5) 40%, rgba(0,0,0,0) 100%);
}

.wave {
  position: absolute;
  width: 300%;
  left: 0;
  top: 0;
  height: 100%;
  background-repeat: repeat-x;
  filter: blur(1px);
}

/* Wave 1: 600px wavelength, ~100px amplitude, fills downward
   SVG viewBox 0 0 600 600. Sine path from (0,200) crests at (150,100) troughs at (450,300) back to (600,200).
   Then fills down to bottom of viewBox. */
/* =========================================
   WAVE 1
   ========================================= */
.wave-1 {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600' preserveAspectRatio='none'%3E%3Cpath d='M0 200 C100 100, 200 100, 300 200 S500 300, 600 200 L600 600 L0 600 Z' fill='rgba(180,150,220,0.25)'/%3E%3C/svg%3E");
  background-size: 1200px 300px;      /* Width must match animation distance */
  background-position: 0 0;           /* Start position */
  animation: wave-drift-1 20s linear infinite;

}

@keyframes wave-drift-1 {
  from { background-position: 0 0; }
  to   { background-position: -1200px 0; } /* Move exactly one tile width */
}


/* =========================================
   WAVE 2
   ========================================= */
.wave-2 {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 600' preserveAspectRatio='none'%3E%3Cpath d='M0 220 C83 140, 167 140, 250 220 S417 300, 500 220 L500 600 L0 600 Z' fill='rgba(160,130,210,0.22)'/%3E%3C/svg%3E");
  background-size: 1000px 300px;
  background-position: 0 0;
  animation: wave-drift-2 26s linear infinite;

}

@keyframes wave-drift-2 {
  from { background-position: -500px 0; }
  to   { background-position: 500px 0; }
}


/* =========================================
   WAVE 3
   ========================================= */
.wave-3 {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 700 600' preserveAspectRatio='none'%3E%3Cpath d='M0 180 C117 60, 233 60, 350 180 S583 300, 700 180 L700 600 L0 600 Z' fill='rgba(200,170,240,0.18)'/%3E%3C/svg%3E");
  background-size: 800px 300px;
  background-position: 0 0;
  animation: wave-drift-3 30s linear infinite;

}

@keyframes wave-drift-3 {
  from { background-position: 0 0; }
  to   { background-position: 800px 0; }
}

/* ── Floating fuzzy sprites ── */
.sprite-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 300px;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.sprite {
  position: absolute;
  border-radius: 50%;
  filter: blur(1.5px);
  pointer-events: none;
  will-change: transform;
}

.sprite-1 {
  width: 16px;
  height: 16px;
  background: radial-gradient(circle at 35% 35%, hsl(260, 65%, 60%), transparent 70%);
  box-shadow: 0 0 10px hsl(260, 65%, 60%);
  top: 80px;
  left: 15%;
  animation: float-1 80s ease-in-out infinite;
}

.sprite-2 {
  width: 24px;
  height: 24px;
  background: radial-gradient(circle at 30% 30%, hsl(280, 50%, 65%), transparent 70%);
  box-shadow: 0 0 14px hsl(280, 50%, 65%);
  top: 120px;
  right: 20%;
  animation: float-2 100s ease-in-out infinite;
}

.sprite-3 {
  width: 14px;
  height: 14px;
  background: radial-gradient(circle at 40% 40%, hsl(270, 60%, 55%), transparent 70%);
  box-shadow: 0 0 9px hsl(270, 60%, 55%);
  top: 150px;
  left: 35%;
  animation: float-3 90s ease-in-out infinite;
}

.sprite-4 {
  width: 18px;
  height: 18px;
  background: radial-gradient(circle at 30% 30%, hsl(290, 55%, 62%), transparent 70%);
  box-shadow: 0 0 11px hsl(290, 55%, 62%);
  top: 60px;
  right: 10%;
  animation: float-4 110s ease-in-out infinite;
}

.sprite-5 {
  width: 12px;
  height: 12px;
  background: radial-gradient(circle at 35% 35%, hsl(250, 70%, 58%), transparent 70%);
  box-shadow: 0 0 8px hsl(250, 70%, 58%);
  top: 180px;
  left: 60%;
  animation: float-5 95s ease-in-out infinite;
}

.sprite-6 {
  width: 20px;
  height: 20px;
  background: radial-gradient(circle at 30% 30%, hsl(275, 45%, 65%), transparent 70%);
  box-shadow: 0 0 13px hsl(275, 45%, 65%);
  top: 110px;
  left: 8%;
  animation: float-6 105s ease-in-out infinite;
}

.sprite-7 {
  width: 16px;
  height: 16px;
  background: radial-gradient(circle at 35% 35%, hsl(265, 60%, 60%), transparent 70%);
  box-shadow: 0 0 10px hsl(265, 60%, 60%);
  top: 140px;
  right: 35%;
  animation: float-7 85s ease-in-out infinite;
}

@keyframes float-1 {
  0%   { transform: translate(0, 0) scale(1); opacity: 0.2; }
  25%  { transform: translate(150px, -75px) scale(1.1); opacity: 0.35; }
  50%  { transform: translate(-100px, -150px) scale(0.95); opacity: 0.3; }
  75%  { transform: translate(200px, 50px) scale(1.05); opacity: 0.32; }
  100% { transform: translate(0, 0) scale(1); opacity: 0.2; }
}

@keyframes float-2 {
  0%   { transform: translate(0, 0) scale(1); opacity: 0.25; }
  33%  { transform: translate(-125px, -100px) scale(1.08); opacity: 0.33; }
  66%  { transform: translate(175px, 75px) scale(0.98); opacity: 0.28; }
  100% { transform: translate(0, 0) scale(1); opacity: 0.25; }
}

@keyframes float-3 {
  0%   { transform: translate(0, 0) scale(1); opacity: 0.3; }
  20%  { transform: translate(75px, -125px) scale(1.1); opacity: 0.35; }
  40%  { transform: translate(-150px, 50px) scale(0.95); opacity: 0.25; }
  60%  { transform: translate(125px, -175px) scale(1.05); opacity: 0.32; }
  80%  { transform: translate(-50px, 100px) scale(0.98); opacity: 0.28; }
  100% { transform: translate(0, 0) scale(1); opacity: 0.3; }
}

@keyframes float-4 {
  0%   { transform: translate(0, 0) scale(1); opacity: 0.22; }
  25%  { transform: translate(-175px, -50px) scale(1.05); opacity: 0.32; }
  50%  { transform: translate(100px, -125px) scale(1.02); opacity: 0.28; }
  75%  { transform: translate(-75px, 150px) scale(0.96); opacity: 0.25; }
  100% { transform: translate(0, 0) scale(1); opacity: 0.22; }
}

@keyframes float-5 {
  0%   { transform: translate(0, 0) scale(1); opacity: 0.28; }
  30%  { transform: translate(100px, -100px) scale(1.08); opacity: 0.34; }
  60%  { transform: translate(-125px, 75px) scale(0.94); opacity: 0.26; }
  100% { transform: translate(0, 0) scale(1); opacity: 0.28; }
}

@keyframes float-6 {
  0%   { transform: translate(0, 0) scale(1); opacity: 0.23; }
  25%  { transform: translate(125px, -150px) scale(1.07); opacity: 0.33; }
  50%  { transform: translate(-100px, -50px) scale(0.97); opacity: 0.27; }
  75%  { transform: translate(175px, 100px) scale(1.03); opacity: 0.31; }
  100% { transform: translate(0, 0) scale(1); opacity: 0.23; }
}

@keyframes float-7 {
  0%   { transform: translate(0, 0) scale(1); opacity: 0.26; }
  35%  { transform: translate(-150px, -125px) scale(1.06); opacity: 0.32; }
  70%  { transform: translate(75px, 100px) scale(0.99); opacity: 0.24; }
  100% { transform: translate(0, 0) scale(1); opacity: 0.26; }
}

.white-text {
  color: var(--color-gray-100);
}

.bggrey {
  background-color: var(--color-gray-100);
}
.custom-navbar {
  background-color: var(--color-purple-dark);
  color: var(--color-gray-400);
  height: 60px;
  position: relative; /* Use relative positioning to allow proper dropdown flow */
  width: 100%;
  z-index: 100;
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--color-teal-900);
  padding-left: var(--space-2xl) !important;
  padding-right: var(--space-2xl) !important;  
}

.custom-navbar .nav-link {
  color: var(--color-gray-400);
  padding: var(--space-xs) var(--space-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  transition: color var(--transition-fast);
}

.custom-navbar .nav-link:hover {
  color: var(--color-purple-200) !important;
}

/* Active nav link with teal glow */
.custom-navbar .nav-link.active {
  color: var(--color-teal-500) !important;
  text-shadow: 0 0 8px var(--color-teal-500), 0 0 16px var(--color-teal-400);
}

/* Logo button in navbar */
.logo-btn {
  width: 40px;
  height: 40px;
  padding: 4px;
  border: 1px solid var(--color-teal-900);
  border-radius: var(--radius-md);
  background: transparent;
  cursor: pointer;
  transition: all var(--transition-fast);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-btn:hover {
  box-shadow: 0 0 8px var(--color-teal-500);
  border-color: var(--color-teal-400);
}

.logo-btn img {
  width: 120%;
  height: 120%;
  object-fit: contain;
}

/* Foundation name text */
.foundation-name {
  color: var(--color-gray-400);
  font-size: 9px;
  font-weight: var(--font-weight-semibold);
  line-height: 1.3;
  white-space: nowrap;
  margin-left: var(--space-sm);
  margin-right: var(--space-lg);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* Navbar nav items alignment */
.custom-navbar .navbar-nav {
  display: flex;
  align-items: center;
  flex-shrink: 0; /* Prevent navbar items from shrinking */
}

.custom-navbar .nav-item {
  display: flex;
  align-items: center;
}

/* Ensure dropdown menu is absolutely positioned to remove from flex flow */
.custom-navbar .dropdown-menu {
  position: absolute !important;
  max-height: 600px;
  overflow-y: auto;
}

.logo {
  position: relative;
  width: 250px;
  height: auto;
  z-index: 1;
  margin-bottom: var(--space-md);
}



.login-div {
  white-space: nowrap;
  color: white;
  padding: var(--space-sm) var(--space-md);
  box-sizing: border-box;
  text-align: right;
}
.hidden {
  display: none;
}
.review-buttons-div {
  position: fixed;
  top: 50px;
  right: 380px;
  width: 500px;
  height: 100px;
  color: white;
  padding: var(--space-md);
  box-sizing: border-box;
  text-align: right;
  z-index: 103;
}

.main-form {
  position: relative;
  max-width: max(80vw, 1500px);
  margin-right: 0;
  width: 100%;
}

/* ── Search Input Row (contains input + minifilter) ───────────────────────── */
.search-input-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
  width: 100%;
}

.search-input-row .search-input-wrapper {
  flex: 1 0 auto;
  min-width: 200px;
}

.minifilter {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  z-index: 5;
  margin-left: var(--space-2xl);
}

.minifilter.previewfilter {
  display: inline-flex;
}



.minifilter > span > .icon-dropdown,
.minifilter > span > .icon-toggle,
.minifilter > span > .icon-dropdown-toggle {
  font-size: var(--font-size-base);
}

.top-div {
  position: relative;
  width: 100%;
  z-index: 3;
  margin-left: auto;
  margin-right: auto;  
  /*padding: var(--space-md);*/
}

#experience-div {
  position: relative;
  
  width: 100%;
  background-color: rgba(252, 252, 252, 0.95);
  z-index: 3;
  padding: var(--space-xl);
  border-radius: 12px;
}



.exp-title {
  font-size: var(--font-size-3xl);
  color: var(--color-teal-600);
  padding-top: var(--space-lg);
  padding-bottom: var(--space-md);
  line-height: var(--line-height-tight);
  font-weight: var(--font-weight-bold);
}

.exp-section-header {
  color: var(--color-teal-500);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
  margin-top: var(--space-lg);
  margin-bottom: var(--space-sm);
}


.exp-subtitle {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-muted);
}

#moreFilters {
  background-color: var(--color-gray-100);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}

#resultCount {
  margin-top: 0;
  margin-bottom: var(--space-md);
  color: var(--color-gray-100);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

#resultCount .form-select-sm {
  font-size: var(--font-size-sm);
}

#ascendingToggle {
  min-width: 36px;
}

.footer-background  {
  background: transparent;
  color: var(--color-gray-100);
  position: relative;
  top: 150px;
  padding: var(--space-lg);
}

.footer-background p,
.footer-background li {
  color: var(--color-gray-100);
}

/* Legalize footer for search page - styled for dark background */
.results-background {
  background: transparent;
  color: var(--color-gray-400);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  border-top: 1px solid var(--color-teal-800-transparent);
}

.results-background a {
  color: var(--color-teal-400);
}

.results-background a:hover {
  color: var(--color-teal-300);
}


.override-bottom-margin {
  margin-bottom: var(--space-md);
}

/* ── Search Results Container ─────────────────────────────────────────────── */

.search-results-container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 1200px) {
  .search-results-container {
    width: 70%;
  }
}

/* ── Search Result Tile (Revamped) ───────────────────────────────────────── */

.search-result {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  margin-top: var(--space-md);
  margin-left: auto;
  margin-right: auto;
  background-color: var(--color-surface-transparent);
  width: 100%;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-normal), border-color var(--transition-normal);
  position: relative;
}

.search-result:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-purple-200);
}

/* Tile Header: name + pills + toggle palette */
.tile-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.tile-title {
  margin: 0;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
}

.result-link {
  color: var(--color-purple-600);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.result-link:hover {
  color: var(--color-teal-600);
}

.result-link:visited {
  color: var(--color-purple-700);
}

.greyson-pill {
  display: inline-block;
  padding: 2px 5px;
  border-radius: var(--radius-xl);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  cursor: help;
  background: rgba(76, 175, 80, 0.15);
  color: #256D29;
  border: 1px solid rgba(76, 175, 80, 0.5);  
}

/* Classification Pill (teal) */
.classification-pill {
  display: inline-flex;
  align-items: center;
  background-color: var(--color-teal-600);
  color: white;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  padding: 2px 10px;
  border-radius: var(--radius-xl);
  text-decoration: none;
  transition: background-color var(--transition-fast);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.classification-pill:hover {
  background-color: var(--color-teal-700);
  color: white;
  text-decoration: none;
}

/* Exceptional Pill (yellow border, transparent bg) */
.exceptional-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background-color: transparent;
  border: 2px solid #D69E2E;
  color: #D69E2E;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  padding: 1px 8px;
  border-radius: var(--radius-xl);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.exceptional-pill i {
  font-size: 0.7rem;
}

/* Tile Body: summary text */
.tile-body {
  margin-bottom: var(--space-md);
}

.body-text {
  color: var(--color-text);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-xs);
}

.editorial-text {
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-500);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-sm);
}

/* AI expansion text */
.ai-text {
  color: var(--color-text);
  background-color: var(--color-gray-100);
  padding: var(--space-sm);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  margin-top: var(--space-sm);
}

/* Metadata Row: icons + values */
.metadata-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md) var(--space-xl);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-gray-200);
  margin-top: var(--space-sm);
}

.metadata-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--color-gray-500);
  font-size: var(--font-size-sm);
  white-space: nowrap;
}

.metadata-item i {
  color: var(--color-purple-500);
  font-size: 0.9rem;
}

.metadata-item .metadata-value {
  color: var(--color-gray-700);
  font-weight: var(--font-weight-medium);
}

/* Toggle Palette (like/read/tags/notes) */
.toggle-palette {
  display: flex;
  align-items: center;
  gap: 2px;
  background-color: transparent;
  border-radius: var(--radius-md);
  padding: 2px 6px;
  box-shadow: var(--shadow-sm);
  margin-left: auto;
  opacity: 0.7;
  transition: opacity var(--transition-fast);
}

.toggle-palette:hover {
  opacity: 1;
}

/* Devices with hover capability: hide toggle palette by default, show on tile hover */
@media (hover: hover) {
  .toggle-palette {
    opacity: 0.4;
  }
  
  .search-result:hover .toggle-palette {
    opacity: 1;
  }
}

/* Toggle icon styling */
.toggle-palette .icon-toggle {
  padding: 4px;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

/* Icon-specific hover colors for toggle-palette icons - effect on icon itself */
.toggle-palette .icon-toggle:hover i {
  color: rgba(135, 101, 214, 0.6);
  text-shadow: 0 0 0 1.5px var(--color-purple-400);
}

.toggle-palette .my-heart:hover i,
.toggle-palette .icon-toggle:has(.bi-heart):hover i {
  color: rgba(229, 62, 62, 0.6);
  text-shadow: 0 0 0 1.5px #E53E3E;
}

.toggle-palette .my-eye:hover i,
.toggle-palette .icon-toggle:has(.bi-eye):hover i {
  color: rgba(56, 161, 105, 0.6);
  text-shadow: 0 0 0 1.5px #38A169;
}

.toggle-palette .my-tags:hover i,
.toggle-palette .icon-toggle:has(.bi-tags):hover i {
  color: rgba(22, 218, 240, 0.6);
  text-shadow: 0 0 0 1.5px var(--color-teal-600);
}

.toggle-palette .my-pencil:hover i,
.toggle-palette .icon-toggle:has(.bi-pencil):hover i {
  color: rgba(214, 158, 46, 0.6);
  text-shadow: 0 0 0 1.5px #D69E2E;
}

.toggle-palette .icon-toggle .icon-checked.red {
  color: rgba(229, 62, 62, 0.9);
}

.toggle-palette .icon-toggle .icon-checked.green {
  color: rgba(56, 161, 105, 0.9);
}

.toggle-palette .icon-toggle .icon-checked.blue {
  color: rgba(22, 218, 240, 0.9);
}

.toggle-palette .icon-toggle .icon-checked.pencil-color {
  color: rgba(214, 158, 46, 0.9);
}

/* Legacy styles kept for compatibility */
.btn-icon {
  background: none;
  border: none;
  padding: 0;
  outline: none;
  cursor: pointer;
}

#email-profile {
  color: var(--color-gray-100);
}

.btn-icon:focus {
  outline: none;
}

.textblock {
  position: fixed;
  top: 1px;
  left: 1px;
  width: 50px;
  height: 30px;
  z-index: 1;
}

[data-bs-toggle="collapse"].collapsed .if-not-collapsed {
  display: none;
}

[data-bs-toggle="collapse"]:not(.collapsed) .if-collapsed {
  display: none;
}


#pagination .page-btn {
  margin-right: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-teal-800-transparent);
  background: transparent;
  color: var(--color-gray-100);
  cursor: pointer;
  transition: all var(--transition-fast);
}

#pagination .page-btn:hover {
  border-color: var(--color-teal-500);
  background: rgba(22, 218, 240, 0.15);
  color: var(--color-teal-400);
}

#pagination .page-btn.active {
  background-color: var(--color-teal-600);
  border-color: var(--color-teal-500);
  color: white;
}

/* Bootstrap btn-light override for dark backgrounds in pagination */
#pagination .btn-light {
  background: transparent;
  border: none;
  color: var(--color-gray-100);
}

#pagination .btn-light:hover {
  border-color: var(--color-teal-500);
  background: rgba(22, 218, 240, 0.15);
  color: var(--color-teal-400);
}

#pagination .btn-light.active {
  background-color: var(--color-teal-600);
  border-color: var(--color-teal-500);
  color: white;
}


/* ── Search Page Title ────────────────────────────────────────────────────── */
.search-page-title {
  font-size: var(--font-size-BIG);
  color: var(--color-gray-100);
  font-weight: var(--font-weight-bold);
  margin-top: var(--space-lg);
}

.search-page-title .title-highlight {
  color: var(--color-teal-500);
  text-shadow: 0 0 16px var(--color-teal-400);
}

/* ── Search Input Wrapper ─────────────────────────────────────────────────── */
.search-input-wrapper {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

.search-input-wrapper .search-icon {
  position: absolute;
  left: var(--space-md);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-gray-400);
  font-size: var(--font-size-base);
  pointer-events: none;
}

.search-input {
  background: transparent !important; 
  border: 1px solid var(--color-teal-800-transparent);
  border-radius: var(--radius-lg);
  padding: var(--space-md) var(--space-md) var(--space-md) 2.5rem;
  color: var(--color-gray-100);
  font-size: var(--font-size-lg);
  height: 4rem;
  min-width: 200px;
  width: 100%;
}

.search-input::placeholder {
  color: var(--color-gray-400);
}

.search-input:focus {
  background: transparent;
  border-color: var(--color-teal-500);
  box-shadow: 0 0 0 2px rgba(22, 218, 240, 0.2);
  outline: none;
}

/* ── Filter Row ───────────────────────────────────────────────────────────── */
.filter-row {
  width: 100%;
}

/* ── Add Filter Button ────────────────────────────────────────────────────── */
.filter-add-btn {
  background-color: transparent;
  border: 2px dotted var(--color-teal-600);
  border-radius: var(--radius-xl);
  color: var(--color-gray-100);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  padding: var(--space-sm) var(--space-md);
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  margin-right: var(--space-md);
  transition: all var(--transition-fast);
}

.filter-add-btn:hover {
  background-color: var(--color-teal-800-transparent);
  border-color: var(--color-teal-700);
  color: var(--color-gray-100);
}

/* ── Filter Pills Container ───────────────────────────────────────────────── */


/* ── Filter Pills (badges) ────────────────────────────────────────────────── */
.filter-pills-container .badge,
.filter-pill {
  background-color: var(--color-purple-dark);
  border: 2px solid var(--color-teal-800-transparent);
  border-radius: var(--radius-xl);
  color: var(--color-gray-100);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  padding: var(--space-md) var(--space-md);
  height: 2.5rem;
  margin-right: var(--space-sm) !important;
  display: inline-flex;
  align-items: center;
  
}

/* Hide foundation name on narrow viewports (mobile with scaled viewport) */
@media (max-width: 600px) {
  .foundation-name {
    display: none !important;
  }
  
  .custom-navbar {
    padding-left: var(--space-md) !important;
    padding-right: var(--space-md) !important;
  }
}

/* ── Bootstrap Modal Positioning ──────────────────────────────────────────── */
/* Most modals display at 40% down the page for better mobile visibility */
/* Only apply positioning when modal is shown (has .show class) */
.modal.show {

  padding-top: 30vh !important;
}

/* Larger modals (Add Filter and authModal) display at 25% down the page */
#filterDialog.modal.show,
#authModal.modal.show {
  padding-top: 20vh !important;
}

/* Mobile-specific adjustments for modals */
@media (max-width: 768px) {
  .modal.show {
    padding-top: 30vh !important;
  }
  
  #filterDialog.modal.show,
  #authModal.modal.show {
    padding-top: 15vh !important;
  }
}