/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */
.card-hover:hover .remove-link {
  opacity: 1;
}
.remove-link {
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}
.selected-label {
  font-size: 0.75rem;
  padding: 0.125rem 0.5rem;
  background-color: #dcfce7;
  color: #22c55e;
  border-radius: 9999px;
  font-weight: 600;
}
/* Custom Scrollbar for Webkit browsers */
.custom-scrollbar::-webkit-scrollbar {
    width: 8px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #555;
}
/* For Firefox */
.custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: #888 #f1f1f1;
}


/* Full Calendar */
.fc {
  --fc-border-color: #e9ecef;
  --fc-daygrid-event-dot-width: 5px;
  --fc-small-font-size: 0.85rem;
  --fc-page-bg-color: #f8f9fa;
}

/* .fc-event {
  background-color: #e9ecef;
  color: #212529;
}

.fc-event:hover {
  background-color: #dee2e6;
}

.fc-daygrid-day-frame {
  background-color: white;
}

.fc-day-today {
  background-color: #f8f9fa !important;
} */

#main-calendar{
  .fc-header-toolbar {
    margin-bottom: 0.5em !important;
  }

  .fc-toolbar-title {
    font-weight: 300 !important;
    font-size: 1.25rem !important;
  }
  .fc-col-header-cell-cushion {
    font-weight: lighter;
  }
  .fc-event-title.fc-sticky {
    font-weight: 300;
    padding-left: 10px;
    padding-right: 10px;
    /* font-size: 12px; */
  }
  .fc-event-title {
    font-weight: 300 !important;
  }
  .fc-daygrid-day-number {
    font-size: 15px;
  }
  .fc-event {
    border-radius: 10px;
  }
  td.fc-day.fc-day-future.fc-daygrid-day:hover {
    background-color: #ccc7ff;
  }
  td.fc-day.fc-day-past.fc-daygrid-day:hover {
    background-color: #ccc7ff;
  }
}
.fc-button {
  font-weight: 300 !important;
  font-size: 0.8rem !important;
  background-color: transparent !important;
  border: 1px solid #dee2e6 !important;
  color: #6c757d !important;
}

.fc-button-active {
  background-color: #e9ecef !important;
}
.fc-day-today .fc-daygrid-day-number{
  background-color: #4f39f6;
  color: white;
  border-radius: 12px;
  width: 1.5rem;
  height: 1.5rem; 
  display: flex;
  align-items: center;
  justify-content: center;
}

.comment-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.comment-feed {
    flex: 1;
    overflow-y: auto;
}
.comment-input {
    flex-shrink: 0;
}
.modal-overlay {
    display: flex;
}
.modal-overlay.hidden {
    display: none;
}

/* Mini calendar styles */
#mini-calendar .fc-header-toolbar {
  margin-bottom: 0.5em;
}

#mini-calendar .fc-toolbar-title {
  font-size: 0.9em;
}

#mini-calendar .fc-button {
  padding: 0.2em 0.4em;
  font-size: 0.8em;
}

#mini-calendar .fc-daygrid-day-frame {
  min-height: 2em;
}

#mini-calendar .fc-daygrid-day-number {
  font-size: 0.8em;
  padding: 2px;
}

#mini-calendar .fc-daygrid-event {
  margin: 0;
  padding: 0;
}

#mini-calendar .fc-day-today {
  background-color: rgba(59, 130, 246, 0.1);
}
#mini-calendar .fc-daygrid-day-events {
  display: none;
}

#mini-calendar{
  .fc-daygrid-day-frame {
    display: flex;
    flex-direction: column;
    align-items: center;  /* Horizontal centering */
    justify-content: center; /* Vertical centering */
    height: 100%;
  }

  .fc-daygrid-day-top {
    display: flex;
    justify-content: center;
    width: 100%;
  }

  .fc-daygrid-day-number {
    text-align: center;
    padding: 0; /* Remove default padding if needed */
  }
  .fc-col-header-cell-cushion {
    font-weight: lighter;
    font-size: 12px;
  }
  .fc-daygrid-day-frame.fc-scrollgrid-sync-inner:hover {
    border-radius: 50% !important; /* Makes it circular */
    border: 2px solid #4f39f6 !important; /* Blue border (change color as needed) */
    transition: all 0.2s ease-in-out; /* Smooth hover effect */
    cursor: pointer;
  }
}
/* Drag handle styling */
.handle {
  cursor: move;
  opacity: 0.6;
  transition: opacity 0.2s;
}
.handle:hover {
  opacity: 1;
}

/* SortableJS classes */
.sortable-ghost {
  opacity: 0.5;
  background: #f0f7ff;
  border: 1px dashed #3b82f6;
}
.sortable-chosen {
  background: #f0f7ff;
}
.sortable-drag {
  opacity: 1 !important;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transform: scale(1.02);
}

/* Smooth transitions */
[data-sortable-item] {
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.sub-calendar-filter {
  cursor: pointer;
}

/* Optional: Add hover effect */
.sub-calendar-filter:hover span {
  opacity: 0.9;
  transform: scale(1.01);
  transition: all 0.2s ease;
}

.card-hover:hover .remove-link {
  opacity: 1;
}
.remove-link {
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}
.dark{ 
  #main-calendar{
    .fc-col-header-cell-cushion {
      color: #ffffff;
    }
    .fc-daygrid-day-number {
      color: #fff;
    }
    .fc-timegrid-slot-label-cushion.fc-scrollgrid-shrink-cushion {
      color: #fff;
    }
    .fc-timegrid-axis-cushion.fc-scrollgrid-shrink-cushion.fc-scrollgrid-sync-inner {
      color: #fff;
    }
    .fc-button.fc-button-primary.fc-button-active {
      color: #ffffff !important;
      background-color: #1f2937 !important ;
    }
    td.fc-day.fc-day-future.fc-daygrid-day:hover {
      background-color: #1f2937 !important;
    }
    td.fc-day.fc-day-past.fc-daygrid-day:hover {
      background-color: #1f2937 !important;
    }
  }
  .fc-toolbar-title {
    color: #fff;
  }
  #mini-calendar{
    .fc-daygrid-day-number {
      color: #fff;
    }
    .fc-col-header-cell-cushion{
      color: #fff;
    }
    .fc-scrollgrid-sync-inner {
      background-color: #1f2937;
    }
  }
}