/* FAMTIVI CUSTOM CSS */

/* COLORS */
:root {
  --color-white: #FFFFFF; 
  
  --color-light-cyan: #e7f7f9;
  --color-cyan: #14B3C8;
  --color-dark-cyan: #0E7A8A;
  
  --color-light-green: #aff5cb;
  --color-green: #12C852;
  --color-dark-green: #0A7A3D;

  --color-light-cream: #fff8e7;
  --color-cream: #FFF6F0;
  --color-dark-cream: #E6B8A2;
  
  --color-light-yellow: #f7eab6;
  --color-yellow: #D9B200;
  --color-dark-yellow: #7A5E00;

  --color-light-blue: #e0f0f2;
  --color-blue: #2196F3;
  --color-dark-blue: #0e64bb;

  --color-light-navy: #d6e1ec;
  --color-navy: #253346;
  --color-dark-navy: #121c2e;
  
  --color-light-orange: #ffcd9e;
  --color-orange: #fc9736;
  --color-dark-orange: #b25e1e;

  --color-light-red: #FFB2B2;
  --color-red: #F34F4F;
  --color-dark-red: #B22E2E;

  --color-light-lavender: #e6e0f7;
  --color-purple: #7D62BC;
  --color-dark-purple: #4b3a7a;

  --color-light-gray:#e4e6e8;
  --color-gray:#8a8a8a;
  --color-dark-gray:#262626;

  --color-dark-cal-header:#2c3e50;
}

/* Text color utilities */
.fmtv-white-color { color: var(--color-white); }
.fmtv-light-cyan-color { color: var(--color-light-cyan); }
.fmtv-cyan-color { color: var(--color-cyan); }
.fmtv-dark-cyan-color { color: var(--color-dark-cyan); }
.fmtv-light-green-color { color: var(--color-light-green); }
.fmtv-green-color { color: var(--color-green); }
.fmtv-dark-green-color { color: var(--color-dark-green); }
.fmtv-light-cream-color { color: var(--color-light-cream); }
.fmtv-cream-color { color: var(--color-cream); }
.fmtv-dark-cream-color { color: var(--color-dark-cream); }
.fmtv-light-yellow-color { color: var(--color-light-yellow); }
.fmtv-yellow-color { color: var(--color-yellow); }
.fmtv-dark-yellow-color { color: var(--color-dark-yellow); }
.fmtv-light-blue-color { color: var(--color-light-blue); }
.fmtv-blue-color { color: var(--color-blue); }
.fmtv-dark-blue-color { color: var(--color-dark-blue); }
.fmtv-light-navy-color { color: var(--color-light-navy); }
.fmtv-navy-color { color: var(--color-navy); }
.fmtv-dark-navy-color { color: var(--color-dark-navy); }
.fmtv-light-orange-color { color: var(--color-light-orange); }
.fmtv-orange-color { color: var(--color-orange); }
.fmtv-dark-orange-color { color: var(--color-dark-orange); }
.fmtv-light-red-color { color: var(--color-light-red); }
.fmtv-red-color { color: var(--color-red); }
.fmtv-dark-red-color { color: var(--color-dark-red); }
.fmtv-light-lavender-color { color: var(--color-light-lavender); }
.fmtv-purple-color { color: var(--color-purple); }
.fmtv-dark-purple-color { color: var(--color-dark-purple); }
.fmtv-light-gray-color { color: var(--color-light-gray); }
.fmtv-gray-color { color: var(--color-gray); }
.fmtv-dark-gray-color { color: var(--color-dark-gray); }

/* Background utilities */
.bg-white { background-color: var(--color-white); }
.bg-light-cyan { background-color: var(--color-light-cyan); }
.bg-cyan { background-color: var(--color-cyan); }
.bg-dark-cyan { background-color: var(--color-dark-cyan); }
.bg-light-green { background-color: var(--color-light-green); }
.bg-green { background-color: var(--color-green); }
.bg-dark-green { background-color: var(--color-dark-green); }
.bg-light-cream { background-color: var(--color-light-cream); }
.bg-cream { background-color: var(--color-cream); }
.bg-dark-cream { background-color: var(--color-dark-cream); }
.bg-light-yellow { background-color: var(--color-light-yellow); }
.bg-yellow { background-color: var(--color-yellow); }
.bg-dark-yellow { background-color: var(--color-dark-yellow); }
.bg-light-blue { background-color: var(--color-light-blue); }
.bg-blue { background-color: var(--color-blue); }
.bg-dark-blue { background-color: var(--color-dark-blue); }
.bg-light-navy { background-color: var(--color-light-navy); }
.bg-navy { background-color: var(--color-navy); }
.bg-dark-navy { background-color: var(--color-dark-navy); }
.bg-light-orange { background-color: var(--color-light-orange); }
.bg-orange { background-color: var(--color-orange); }
.bg-dark-orange { background-color: var(--color-dark-orange); }
.bg-light-red { background-color: var(--color-light-red); }
.bg-red { background-color: var(--color-red); }
.bg-dark-red { background-color: var(--color-dark-red); }
.bg-light-lavender { background-color: var(--color-light-lavender); }
.bg-purple { background-color: var(--color-purple); }
.bg-dark-purple { background-color: var(--color-dark-purple); }
.bg-light-gray { background-color: var(--color-light-gray); }
.bg-gray { background-color: var(--color-gray); }
.bg-dark-gray { background-color: var(--color-dark-gray); }

.page_background {
  background-color: #FAFAFA;
}


/*--- CUSTOMIZE NAV AND ACTION BARS ---*/

#fmtv_menu-bar {
  background-color: var(--color-light-gray);
  padding: 10px 14px;
  border-color: var(--color-dark-gray);
}

/* the thing that holds the entire menu system */
.fmtv_menu_container {
  bottom: 5px;
  border-radius: 20px;
}

#fmtv_action-bar {
  background-color: var(--color-white);
  border-radius: 10px;
  padding: 5px 10px;
  border-color: var(--color-dark-gray);
}

#fmtv_action-container {
  border-radius: 20px;
}

#fmtv_menu-open-button {
 background-color: var(--color-light-gray);
 border-radius: 10px;
  padding: 5px 10px;
  border-color: var(--color-dark-gray);
  border-width: 2px;
}

.fmtv_menu-icon {
height: 40px;
}

.fmtv_action-icon {
  width: 30px;
  height: 30px;
  min-width: 30px;
  min-height: 30px;
}

.fmtv_question-icon {
  width: 20px;
  height: 20px;  
}

.fmtv-circle-btn {
  width: 1.5rem; 
  height: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 100px; /* rounded-full */
  background-color: var(--color-dark-navy); 
  color: var(--color-white);
  transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out;
  transform: none;
  cursor: pointer;
  border: none;
  padding: 0; /* consistent center */
}

.dark .fmtv-circle-btn {
  background-color: var(--color-light-gray); 
  color: var(--color-dark-gray);
}

.fmtv-btn-action {
  width: 2.5rem; /* w-10 */
  height: 2.5rem; /* h-10 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px; /* rounded-full */
  background-color: var(--color-light-gray); /* bg-gray-100 equivalent */
  color: #4B5563; /* text-gray-600 */
  transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out;
  transform: none;
  cursor: pointer;
  border: none;
  padding: 0; /* consistent center */
}

.fmtv-btn-action:hover {
  background-color: #e5e7eb; /* hover:bg-gray-200 */
  transform: scale(1.10); /* hover:scale-110 */
}

/* Dark mode variants */
.dark .fmtv-btn-action {
  background-color: #374151; /* dark:bg-gray-700 */
  color: #e5e7eb; /* dark:text-gray-200 */
}

.dark .fmtv-btn-action:hover {
  background-color: #4B5563; /* dark:hover:bg-gray-600 */
}

/*--- TARGET ELEMENT WITH id="fmtv_bottommargin" ---*/
#fmtv_bottommargin {
  padding-bottom: 120px;
}


/*--- LEARNER CUSTOMIZATIONS ---*/
.fmtv-learner-card {
  background-color: var(--color-white);
  border-radius: 10px;
  border-width: 2px;
  border-color: var(--color-light-gray);
  padding: 10px;
  margin-top: 0px;
  /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */
}

.fmtv_team-card {
  background-color: var(--color-white);
  border-radius: 10px;
  border-width: 2px;
  border-color: var(--color-light-gray);
  padding: 10px;
  margin-top: 0px;
  /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */
}

.fmtv_team_member-card {
  background-color: var(--color-white);
  border-radius: 10px;
  border-width: 2px;
  border-color: var(--color-light-gray);
  padding: 10px;
  margin-top: 0px;
  /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */
}

/*--- TOPIC CUSTOMIZATION ---*/
.fmtv-topic-card {
  background-color: var(--color-white);
  border-radius: 10px;
  border-width: 2px;
  border-color: var(--color-gray);
  padding: 10px;
  margin-top: 0px;
}

/*--- BUTTON SHAPES ---*/
.fmtv-btn-capsule {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem; /* space between icon/text */
  padding: 0.5rem 1.25rem; /* vertical/horizontal padding */
  border-radius: 9999px; /* rounded-full style */
  color: var(--color-white); /* default text color */
  font-weight: 500; /* medium */
  box-shadow: 0 1px 2px rgba(0,0,0,0.05); /* subtle shadow */
  transition: all 0.2s ease-in-out;
  cursor: pointer;
}

.fmtv-btn-soft {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem; /* space between icon/text */
  padding: 0.5rem 1.25rem; /* vertical/horizontal padding */
  border-radius: 10px; /* rounded-full style */
  color: var(--color-white); /* default text color */
  background-color: var(--color-dark-blue);
  font-weight: 500; /* medium */
  font-size: 0.875rem; /* text-sm */
  box-shadow: 0 1px 2px rgba(0,0,0,0.05); /* subtle shadow */
  transition: all 0.2s ease-in-out;
  cursor: pointer;
}

.fmtv-btn-precise {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem; /* space between icon/text */
  padding: 0.5rem 1.25rem; /* vertical/horizontal padding */
  border-radius: 5px; /* rounded-full style */
  color: var(--color-white); /* default text color */
  font-weight: 500; /* medium */
  box-shadow: 0 1px 2px rgba(0,0,0,0.05); /* subtle shadow */
  transition: all 0.2s ease-in-out;
  cursor: pointer;
}

.fmtv-btn-info {
  align-items: center;
  justify-content: center;
  gap: 0.5rem; /* space between icon/text */
  padding: 0.25rem 0.75rem; /* vertical/horizontal padding */
  border-radius: 3px; 
  color: var(--color-white); /* default text color */
  font-weight: 400; 
  font-size: 0.25rem; /* text-sm */
  box-shadow: 0 1px 2px rgba(0,0,0,0.05); /* subtle shadow */
  transition: all 0.2s ease-in-out;
  cursor: pointer;
  height: fit-content;
}

.fmtv-btn-info-soft {
  align-items: center;
  justify-content: center;
  gap: 0.5rem; /* space between icon/text */
  padding: 0.25rem 0.75rem; /* vertical/horizontal padding */
  border-radius: 9999px; 
  color: var(--color-dark-gray); /* default text color */
  font-weight: 400; 
  font-size: 0.25rem; /* text-sm */
  box-shadow: 0 1px 2px rgba(0,0,0,0.05); /* subtle shadow */
  height: fit-content;
}

/* Primary Button */
.fmtv-btn-main {
  background-color: var(--color-navy); 
  color: var(--color-white); 
}

.fmtv-btn-primary { 
  background-color: var(--color-cyan); 
  color: var(--color-white); 
}

.fmtv-btn-primary:hover { 
  background-color: #0f8695; /* slightly darker hover */
}

/* Secondary and Tertiary Buttons */
.fmtv-btn-secondary { background-color: var(--color-light-cyan); color: var(--color-dark-gray); }
.fmtv-btn-secondary:hover { background-color: #bee0ff; }

.fmtv-btn-tertiary { background-color: var(--color-light-gray); color: var(--color-dark-gray); }
.fmtv-btn-tertiary:hover { background-color: #d9d9d9; }

.fmtv-btn-info-cyan { background-color: var(--color-light-cyan); color: var(--color-dark-gray); }
.fmtv-btn-info-cyan:hover { background-color: #7fc5e0; }

.fmtv-btn-info-yellow { background-color: var(--color-light-yellow); color: var(--color-dark-gray); }
.fmtv-btn-info-yellow:hover { background-color: var(--color-yellow); }

.fmtv-btn-info-green { background-color: var(--color-light-green); color: var(--color-dark-gray); }
.fmtv-btn-info-green:hover { background-color: var(--color-green); }

.fmtv-btn-info-red { background-color: var(--color-light-red); color: var(--color-dark-gray); }
.fmtv-btn-info-red:hover { background-color: var(--color-red); }

.fmtv-btn-info-gray { background-color: var(--color-light-gray); color: var(--color-dark-gray); }
.fmtv-btn-info-gray:hover { background-color: var(--color-gray); }

.fmtv-btn-owner { background-color: #bce3ebff; color: var(--color-dark-gray); }
.fmtv-btn-member { background-color: #d9ead3ff; color: var(--color-dark-gray); }
.fmtv-btn-friend { background-color: #fff2ccff; color: var(--color-dark-gray); }
.fmtv-btn-friend-member { background-color: #f4ccccff; color: var(--color-dark-gray); }
.fmtv-btn-team { background-color: var(--color-light-gray); color: var(--color-light-gray); }

.fmtv-btn-delete { background-color: var(--color-light-red); color: var(--color-dark-gray); }
.fmtv-btn-delete:hover { background-color: var(--color-red); }

/* Horizontal Divider, top 4px, bottom 2px */
.fmtv-horizontal-divider {
  border-top: 1px solid var(--color-light-gray);
  margin: 4px 0 2px 0;
}

.dark .fmtv-horizontal-divider {
  border-top: 1px solid var(--color-dark-gray);
}

/* Focus state for all buttons */
.fmtv-btn:focus {
  outline: none;
  box-shadow: 0 0 0 2px #21334B; /* focus ring uses primary color */
}

/* FamTiVi Form Input */
.fmtv-form-input {
  background-color: #F9FAFB; /* bg-gray-50 */
  border: 1px solid #D1D5DB; /* border-gray-300 */
  color: #111827; /* text-gray-900 */
  font-size: 0.875rem; /* text-sm */
  border-radius: 0.5rem; /* rounded-lg */
  display: block;
  width: 100%;
  padding: 0.625rem; /* p-2.5 */
  transition: all 0.2s ease-in-out;
}

.fmtv-form-input:focus {
  outline: none;
  border-color: #3B82F6; /* focus:border-blue-500 */
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3); /* focus:ring-blue-500 */
}

.fmtv-form-input::placeholder {
  color: #9CA3AF; /* placeholder-gray-400 */
}

.fmtv-card {
  background-color: var(--color-white);
  border-width: 2px;
  border-color: var(--color-light-gray);
}

.dark .fmtv-card {
  background-color: var(--color-dark-gray); /* bg-gray-800 */
  border-color: var(--color-dark-cyan); /* border-gray-700 */
  color: var(--color-white); /* text-gray-200 */
}

/* Dark Mode */
.dark .fmtv-form-input {
  background-color: #374151; /* bg-gray-700 */
  border-color: #4B5563; /* border-gray-600 */
  color: #FFFFFF; /* text-white */
}

.dark .fmtv-form-input::placeholder {
  color: #9CA3AF; /* placeholder-gray-400 in dark */
}

.dark .fmtv-form-input:focus {
  border-color: #3B82F6; /* focus:border-blue-500 */
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3); /* focus:ring-blue-500 */
}

@media (prefers-color-scheme: dark) {

  /* Backgrounds */
  body {
    background-color: #1a1a1a;
    color: #e5e5e5;
  }

  .page_background {
    background-color: #111827; /* Tailwind's gray-900 equivalent */
  }

  /* Navigation + Action Bar */
  /* #fmtv_menu-bar {
    background-color: #2a2a2a;
    border-color: #4b5563;
  } */

  /* #fmtv_action-bar {
    background-color: #1f2937;
    border-color: #4b5563;
  } */

  #fmtv_menu-open-button {
    background-color: #374151;
    border-color: #6b7280;
    color: #f3f4f6;
  }

  #fmtv_menu-open-button:hover {
    background-color: #4b5563;
  }

  /* 🌙 Tertiary Button (You already did this, included for completeness) */
  .fmtv-btn-tertiary {
    background-color: #2c2c2c;
    color: #f5f5f5;
  }
  .fmtv-btn-tertiary:hover {
    background-color: #3d3d3d;
  }
  .dark .fmtv-btn-tertiary {
    background-color: #7d8da3;
    color: #000000;
  }

  /* 🌙 Primary Button (navy/cyan) */
  .fmtv-btn-primary {
    background-color: #0E7A8A; /* Darker cyan */
    color: var(--color-white);
  }
  .fmtv-btn-primary:hover {
    background-color: #0b5e6a;
  }
  .dark .fmtv-btn-primary {
    background-color: #0a5864; /* Light cyan */
    color: #cccccc; /* dark gray */
  }

  /* 🌙 Secondary Button (light cyan → darker muted cyan) */
  .fmtv-btn-secondary {
    background-color: #1f3a47;
    color: #d1d5db;
  }
  .fmtv-btn-secondary:hover {
    background-color: #2c4a5a;
  }
  .dark .fmtv-btn-secondary {
    background-color: #65899b;
    color: #000000;
  }

  /* 🌙 Soft Button */
  .fmtv-btn-soft {
    background-color: #1e3a5f;
    color: #e5e7eb;
  }
  .fmtv-btn-soft:hover {
    background-color: #27476f;
  }

  /* 🌙 Precise Button */
  .fmtv-btn-precise {
    background-color: #374151;
    color: #f3f4f6;
  }
  .fmtv-btn-precise:hover {
    background-color: #4b5563;
  }

  /* 🌙 Main (navy) Button */
  .fmtv-btn-main {
    background-color: #1e293b; /* dark navy */
    color: #f8fafc;
  }
  .fmtv-btn-main:hover {
    background-color: #2d3b52;
  }
  .dark .fmtv-btn-main {
    background-color: #678dca; /* light navy */
    color: #000000;
  }

  /* 🌙 Delete / Danger Buttons */
  .fmtv-btn-delete {
    background-color: #7f1d1d;
    color: #f8d7da;
  }
  .fmtv-btn-delete:hover {
    background-color: #991b1b;
  }

  /* 🌙 Info Buttons */
  .fmtv-btn-info-gray {
    background-color: #374151;
    color: #d1d5db;
  }
  .fmtv-btn-info-cyan {
    background-color: #1e3a40;
    color: #a5f3fc;
  }
  .fmtv-btn-info-green {
    background-color: #1e3f2b;
    color: #86efac;
  }
  .fmtv-btn-info-yellow {
    background-color: #3f3a1e;
    color: #fde68a;
  }
  .fmtv-btn-info-red {
    background-color: #4a1e1e;
    color: #fecaca;
  }

  /* 🌙 Card elements */
  .fmtv-learner-card,
  .fmtv_team-card,
  .fmtv_team_member-card,
  .fmtv-topic-card {
    background-color: #1f2937;
    border-color: #374151;
    color: #e5e7eb;
  }

  /* 🌙 Horizontal Divider */
  .fmtv-horizontal-divider {
    border-top: 1px solid #374151;
  }
}


/*--- FULL CALENDAR CUSTOMIZATIONS ---*/
.calendar-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
}
#calendar {
  width: 95%;
}
.fc .fc-timegrid, .fc .fc-scrollgrid-sync-table {
  min-width: 100%;
}

@media (max-width: 768px) {
  #calendar {
    font-size: 0.85rem;
  }
  .fc-toolbar-title {
    font-size: 1rem !important;
  }
}


.dark .fc .fc-day-today {
  background-color: #2e3e50 !important;
}

.dark .fc .fc-scroller {
  background-color: var(--color-dark-cal-header) !important;
}

.dark .fc-scrollgrid {
  background-color: var(--color-dark-cal-header) !important;
}


.dark .fc-datagrid-cell-frame {
  background-color: var(--color-dark-cal-header) !important;
}

.dark .fc-col-header {
  background-color: var(--color-dark-cal-header) !important;
} 

.dark  .fc-col-header-cell {
  background-color: var(--color-dark-cal-header) !important;
}

.dark .fc-scrollgrid-sync-inner {
  background-color: var(--color-dark-cal-header) !important;
}

.dark .fc-timeline-header {
  background-color: var(--color-dark-cal-header) !important;
}

/* Container for channel label */
.fc-resource {
  padding: 1px 1px;
}

/* STRIPE */
.price-transition {
  transition: all 0.3s ease-in-out;
}