/* ===========================================
   Calendar Styles
   =========================================== */

/* === Image Drag & Drop Feedback === */
.image-container.dragging {
  opacity: 0.5;
  border: 2px dashed var(--primary, orange);
}
.image-container.drag-over {
  outline: 2px solid var(--primary, orange);
  background-color: rgba(255, 140, 0, 0.08);
}

/* Calendar Container */
.calendar-container {
  width: 100%;
  max-width: 95%;
  margin: var(--space-sm) auto; /* Changed from var(--space-lg) to var(--space-sm) */
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
}

.calendar-container.loaded {
  opacity: 1;
  visibility: visible;
}

/* Ensure header remains at consistent height regardless of calendar loading state */
.calendar-container.loaded ~ header,
body.calendar-page header {
  height: 80px;
  min-height: 80px;
}

@media (max-width: 767px) {
  .calendar-container.loaded ~ header,
  body.calendar-page header,
  body.calendar-page .calendar-container.loaded ~ header {
    height: 80px;
    min-height: 80px;
  }
}

/* Year Navigation */
/* Year Navigation - Match calendar container exactly */
.year-navigation {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* Left-justified */
  margin: var(--space-md) auto var(--space-md); /* Reduced from var(--space-xl) to var(--space-md) */
  width: 100%; /* Full width */
  max-width: 95%; /* Match calendar container */
  padding-left: var(--space-md); /* Match the left padding of calendar container */
  box-sizing: border-box; /* Ensure padding is included in width calculation */
}

.year-nav {
  background: none;
  border: 1px solid var(--primary);
  color: var(--primary);
  font-size: var(--font-size-lg);
  width: 40px;
  height: 40px;
  border-radius: var(--border-radius-circle);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition-medium);
}

.year-nav:hover {
  background-color: var(--primary);
  color: var(--white);
  box-shadow: 0 0 10px var(--primary-light);
}

/* Year lock button: isolated styling */
.year-navigation .year-lock-btn {
  background: transparent;
  border: none;
  color: #363636;
  box-shadow: none;
  outline: none;
  transition: none; /* cancel .year-nav transition to avoid flicker */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent; /* remove mobile tap ring */
  width: auto;
  height: auto;
  padding: 0;
  margin-left: var(--space-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  border-radius: var(--border-radius-circle);
}

/* Remove Firefox inner focus border */
.year-navigation .year-lock-btn::-moz-focus-inner {
  border: 0;
}

.year-navigation .year-lock-btn:hover {
  background: transparent;
  color: var(--primary-light);
  box-shadow: none;
}

.year-navigation .year-lock-btn:focus,
.year-navigation .year-lock-btn:active {
  background: transparent;
  color: var(--primary-light);
  box-shadow: none;
  outline: none;
  outline-offset: 0;
}

.year-navigation .year-lock-btn:focus-visible {
  outline: none;
}

.year-navigation .year-lock-btn i {
  font-size: var(--font-size-lg);
  line-height: 1;
  pointer-events: none;
}

#current-year {
  color: var(--primary);
  font-size: var(--font-size-xl);
  margin: 0 var(--space-md);
  font-weight: bold;
  font-family: var(--font-primary);
  text-shadow: 0 0 5px var(--primary-light);
}

/* Calendar Grid */
#calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr); /* Default 7 columns, overridden in responsive.css */
  gap: var(--space-md);
  width: 100%;
}

/* Calendar Day Boxes */
.calendar-day {
  /* Create container with reliable aspect ratio */
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (9 / 16 = 0.5625 or 56.25%) */
  background-color: var(--card-bg);
  background-size: cover;
  background-position: center;
  border-radius: var(--border-radius-md);
  cursor: pointer;
  overflow: visible; /* Allow content to break out if needed */
  box-shadow: var(--box-shadow-sm);
  transition: var(--transition-medium);
  border: 1px solid var(--black); /* Changed from transparent to mid-gray */
  animation: none; /* Remove initial animation */
  opacity: 0;
}

/* Calendar Day Content Container */
.calendar-day-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  padding: var(--space-md);
  padding-top: 24px; /* Reduced from 30px to match shorter title */
}

.calendar-container.loaded .calendar-day {
  animation: fadeIn 0.4s ease-out forwards; /* Add animation when container is loaded */
}

.calendar-day:hover {
  transform: translateY(-5px);
  box-shadow: var(--box-shadow-glow);
  border-color: var(--primary);
}

/* Day Number */
.day-number {
  position: absolute !important;
  bottom: var(--space-xs) !important; /* Position at BOTTOM LEFT */
  left: var(--space-xs) !important;
  background-color: rgba(0, 0, 0, 0.7);
  color: var(--primary);
  font-weight: bold;
  border-radius: var(--border-radius-sm);
  padding: 2px 6px;
  font-size: var(--font-size-sm);
  z-index: 99 !important;
  top: auto !important; /* Ensure it's not at the top */
  position: absolute;
  bottom: var(--space-xs);
  left: var(--space-xs);
  top: auto;
  background-color: rgba(0, 0, 0, 0.7);
  color: var(--primary);
  font-weight: bold;
  border-radius: var(--border-radius-sm);
  padding: 2px 6px;
  font-size: var(--font-size-sm);
  z-index: 5;
}

/* Day description - positioned at the bottom above day number and icons */
.day-description {
  position: absolute !important;
  bottom: 40px !important; /* Increased from 30px to give more space above day number */
  left: 0 !important;
  right: 0 !important;
  color: var(--white) !important;
  padding: var(--space-xs) var(--space-sm) !important;
  font-size: var(--font-size-xs) !important;
  text-align: left !important;
  width: 100% !important;
  margin: 0 !important;
  z-index: 90 !important; /* Below the title but above content */
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.9), 0 0 5px rgba(0, 0, 0, 0.8) !important; /* Added text shadow for better readability */

}

/* Action Icons */
.icon-container {
  position: absolute !important;
  bottom: var(--space-xs) !important; /* Position at BOTTOM RIGHT */
  right: var(--space-xs) !important;
  display: flex;
  gap: var(--space-xs);
  z-index: 99 !important;
  top: auto !important; /* Ensure it's not at the top */
  position: absolute;
  bottom: var(--space-xs);
  right: var(--space-xs);
  top: auto;
  display: flex;
  gap: var(--space-xs);
  z-index: 5;
}

.add-icon, 
.edit-icon {
  width: 24px;
  height: 24px;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: var(--border-radius-circle);
  padding: 4px;
  cursor: pointer;
  transition: var(--transition-medium);
}

.add-icon:hover,
.edit-icon:hover {
  transform: scale(1.2);
  box-shadow: 0 0 5px var(--primary);
}

.add-icon {
  color: var(--success);
}

.edit-icon {
  color: var(--info);
}

/* Day with content */
.calendar-day-has-content .day-number {
  z-index: 2; /* Ensure day number stays on top */
}

.calendar-day-has-content .icon-container {
  z-index: 2; /* Ensure icons stay on top */
}

/* Entry content in day */
.entry-title-container {
  position: absolute;
  bottom: var(--space-xs);
  left: 30%; /* Position from left 30% */
  right: 30%; /* Position from right 30% */
  text-align: center;
  width: 40%; /* Width between left and right */
}

.entry-title {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  color: #ff6600;
  padding: var(--space-xs);
  font-size: var(--font-size-sm);
  font-weight: 900;
  text-align: center;
  border-bottom: 1px solid var(--primary);
  z-index: 5;
}

/* Entry content in day - More specific selector with !important */
.calendar-day .entry-title,
#calendar-grid .calendar-day .entry-title,
.calendar-day-has-content .entry-title {
  position: absolute !important;
  top: 0 !important; /* Position at the TOP */
  left: 0 !important; /* Start from far left */
  right: 0 !important; /* Extend to far right */
  background-color: rgba(0, 0, 0, 0.8) !important;
  color: var(--white) !important;
  padding: 2px var(--space-xs) !important; /* Reduced vertical padding from var(--space-xs) to 2px */
  margin: 0 !important;
  font-size: calc(var(--font-size-sm) - 1px) !important; /* Slightly smaller font */
  font-weight: 900 !important; /* Super bold */
  text-align: center !important;
  width: 100% !important; /* Take full width */
  z-index: 10 !important; /* Reduced from 100 to 10 */
  border-radius: var(--border-radius-sm) 
                var(--border-radius-sm) 
                0 0 !important; /* Round only top corners */
  border-bottom: 1px solid var(--primary) !important; /* Keep the border thin */
}

/* Entry content in day - Using extremely high specificity and !important */
html body #calendar-grid .calendar-day .entry-title {
  position: absolute !important;
  top: 0 !important; /* Position at the TOP */
  left: 0 !important; /* Start from far left */
  right: 0 !important; /* Extend to far right */
  background-color: rgba(0, 0, 0, 0.8) !important;
  color: var(--white) !important;
  padding: 2px var(--space-xs) !important; /* Reduced vertical padding from var(--space-xs) to 2px */
  margin: 0 !important;
  font-size: calc(var(--font-size-sm) - 1px) !important; /* Slightly smaller font */
  font-weight: 900 !important; /* Super bold */
  text-align: center !important;
  width: 100% !important; /* Take full width */
  z-index: 10 !important; /* Reduced from 100 to 10 */
  border-radius: var(--border-radius-sm) 
                var(--border-radius-sm) 
                0 0 !important; /* Round only top corners */
  border-bottom: 1px solid var(--primary) !important; /* Keep the border thin */
}

/* Entry content in day - Ultra-specific selector */
html body #calendar-grid .calendar-day .entry-title,
html body .calendar-container #calendar-grid .calendar-day .entry-title {
  position: absolute !important;
  top: 0 !important; /* Position at the TOP */
  left: 0 !important; /* Start from far left */
  right: 0 !important; /* Extend to far right */
  background-color: rgba(0, 0, 0, 0.8) !important;
  color: var(--white) !important;
  padding: 2px var(--space-xs) !important; /* Reduced vertical padding from var(--space-xs) to 2px */
  margin: 0 !important;
  font-size: calc(var(--font-size-sm) - 1px) !important; /* Slightly smaller font */
  font-weight: 900 !important; /* Super bold */
  text-align: center !important;
  width: 100% !important; /* Take full width */
  z-index: 10 !important; /* Reduced from 100 to 10 */
  border-radius: var(--border-radius-sm) 
                var(--border-radius-sm) 
                0 0 !important; /* Round only top corners */
  border-bottom: 1px solid var(--primary) !important; /* Keep the border thin */
}

/* Style specifically for the text inside the title to ensure it's bold */
html body #calendar-grid .calendar-day .entry-title span,
#calendar-grid .calendar-day .entry-title span,
.calendar-day .entry-title span,
.entry-title span,
html body #calendar-grid .calendar-day .entry-title *,
#calendar-grid .calendar-day .entry-title *,
.calendar-day .entry-title *,
.entry-title * {
  font-weight: 900 !important; /* Super bold */
}

/* Debug styling to force visibility */
.entry-title-debug {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  background-color: red !important; /* Bright red for visibility */
  color: white !important;
  padding: 5px !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  z-index: 9999 !important; /* Super high z-index */
  text-align: center !important;
}

/* Empty Day Styling */
.calendar-day-empty {
  background-color: rgba(0, 0, 0, 0.3);
  cursor: default;
}

.calendar-day-empty:hover {
  transform: none;
  box-shadow: none;
  border-color: transparent;
}

/* Current Day Highlight */
.calendar-day-current {
  border: 2px solid var(--primary);
}

/* Halloween Day Special Styling (Oct 31) */
.calendar-day-halloween {
  background-color: rgba(0, 0, 0, 0.8);
  border: 2px dashed var(--primary);
}

.calendar-day-halloween .day-number {
  background-color: var(--primary);
  color: var(--black);
  font-weight: bold;
}

.calendar-day-halloween:hover {
  box-shadow: 0 0 20px 5px var(--primary);
}

/* Calendar Animation Effects */
@keyframes fadeIn {
  from { 
    opacity: 0;
    transform: translateY(10px);
  }
  to { 
    opacity: 1;
    transform: translateY(0);
  }
}

/* Different animation delay for each day to create a wave effect */
.calendar-day:nth-child(7n+1) { animation-delay: 0.05s; }
.calendar-day:nth-child(7n+2) { animation-delay: 0.1s; }
.calendar-day:nth-child(7n+3) { animation-delay: 0.15s; }
.calendar-day:nth-child(7n+4) { animation-delay: 0.2s; }
.calendar-day:nth-child(7n+5) { animation-delay: 0.25s; }
.calendar-day:nth-child(7n+6) { animation-delay: 0.3s; }
.calendar-day:nth-child(7n+7) { animation-delay: 0.35s; }

/* New day title class with super high priority */
.day-title {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  background-color: rgba(0, 0, 0, 0.5) !important; /* Semi-transparent black */
  color: var(--primary) !important; /* Changed from white to orange primary color */
  padding: 2px var(--space-xs) !important; /* Reduced vertical padding from var(--space-xs) to 2px */
  font-size: calc(var(--font-size-sm) - 1px) !important; /* Slightly smaller font */
  font-weight: 900 !important;
  text-align: left !important;
  z-index: 10 !important; /* Reduced from 1000 to 10 */
  width: 100% !important;
  margin: 0 !important;
  border-radius: 6px 6px 0 0 !important;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.5) !important; /* Added subtle text shadow for better readability */
}

/* Make sure modal has higher z-index */
.modal {
  z-index: 2000 !important; /* Keep this higher than all calendar elements */
}

.modal-content {
  z-index: 2001 !important; /* Ensure modal content is above modal backdrop */
}

/* Add loading state styles */
.calendar-loading {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100svh; /* small viewport to avoid browser UI shifting on mobile */
  background: rgba(0, 0, 0, 0.9);
  display: block;
  z-index: 10001; /* Above hamburger (9999) and modal (2000) */
}

.calendar-loading-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  width: min(95vw, 480px);
}

.calendar-loading-text {
  color: #fff; /* white text */
  font-family: var(--font-secondary);
  font-size: var(--font-size-lg);
  margin-top: 0;
  /* Orange glow */
  text-shadow: 0 0 8px var(--primary), 0 0 16px var(--primary);
}

.ghost-loader {
  /* Let the container size to the emoji to avoid overlapping the text below */
  width: auto;
  height: auto;
  position: relative;
  display: grid;
  place-items: center;
}

.ghost-loader::before {
  content: none;
}

.ghost-loader::after {
  content: '👻';
  display: inline-block;
  line-height: 1;
  font-size: clamp(108px, 36vw, 192px);
  animation: ghost-bob 3s ease-in-out infinite;
}

/* Combined translateY + scale so we can keep the loader centered while animating */
@keyframes ghost-bob {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-16px) scale(1.08);
  }
}

/* (keep single definition of .calendar-loading-text earlier in file) */