/* =====================================================
   Panjika — Jagannath Calendar
   Full-screen overlay triggered from the bottom nav.
   ===================================================== */

.panjika-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
  padding-top: calc(20px + 40px + 20px); /* topbar top + height + gap */
  padding-bottom: 110px; /* room for bottom nav */
  overflow-y: auto;
  animation: panjika-fade 0.22s ease-out;
}

.panjika-overlay[hidden] {
  display: none;
}

@keyframes panjika-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* On desktop, keep inside phone mockup */
@media (min-width: 520px) {
  .panjika-overlay {
    left: 50%;
    transform: translateX(-50%);
    width: min(100vw, calc(100vh * 9 / 16));
    max-width: 440px;
  }
}

.panjika-overlay::-webkit-scrollbar { width: 0; }
.panjika-overlay { scrollbar-width: none; }

/* ============== Calendar header ============== */
.panjika-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 28px 16px;
}

.panjika-month-label {
  font-size: 20px;
  font-weight: 600;
  color: var(--color-yellow);
  letter-spacing: 0.3px;
  text-align: center;
  flex: 1 1 auto;
}

.panjika-month-label .panjika-year {
  margin-left: 10px;
  color: var(--color-yellow);
  font-weight: 500;
}

.panjika-nav-btn {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(186, 141, 66, 0.1);
  border: 1px solid rgba(186, 141, 66, 0.35);
  transition: background 0.15s ease, transform 0.12s ease;
  flex-shrink: 0;
}

.panjika-nav-btn:hover { background: rgba(186, 141, 66, 0.18); }
.panjika-nav-btn:active { transform: scale(0.94); }

.panjika-nav-btn svg {
  width: 16px;
  height: 16px;
  stroke: var(--color-yellow);
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ============== Calendar grid ============== */
.panjika-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  padding: 0 16px;
}

.panjika-dow {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-yellow);
  letter-spacing: 0.8px;
  text-align: center;
  padding: 8px 0;
}

.panjika-day {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 500;
  color: var(--color-white);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid transparent;
  border-radius: 8px;
  position: relative;
  transition: background 0.15s ease, transform 0.1s ease;
  cursor: pointer;
}

.panjika-day:hover {
  background: rgba(255, 255, 255, 0.09);
}

.panjika-day:active {
  transform: scale(0.96);
}

.panjika-day.is-muted {
  color: rgba(255, 255, 255, 0.28);
  background: transparent;
  cursor: default;
}

.panjika-day.is-muted:hover {
  background: transparent;
}

.panjika-day.is-today {
  color: var(--color-yellow);
  border-color: var(--color-yellow);
  background: rgba(186, 141, 66, 0.12);
}

.panjika-day.is-selected {
  color: var(--color-white);
  background: rgba(186, 141, 66, 0.35);
  border-color: var(--color-yellow);
  box-shadow: 0 0 0 1px var(--color-yellow);
}

.panjika-day.is-today.is-selected {
  color: var(--color-yellow);
}

/* ============== Calendar cell dots ==============
   Up to three small circular dots below the date,
   one per category present (event, tithi, festival).
   ================================================== */

/* Container — sits where the line used to be */
.panjika-day.has-event::after,
.panjika-day.has-tithi::after,
.panjika-day.has-festival::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 0;
  right: 0;
  height: 4px;

  /* The dots themselves are painted via radial-gradients
     stacked on the same pseudo-element. Each gradient is
     one dot. We center them as a group horizontally. */
  background-position: center;
  background-repeat: no-repeat;
}

/* Single dot — centered */
.panjika-day.has-event:not(.has-tithi):not(.has-festival)::after {
  background-image: radial-gradient(circle, var(--color-red) 1.8px, transparent 2px);
  background-size: 4px 4px;
}
.panjika-day.has-tithi:not(.has-event):not(.has-festival)::after {
  background-image: radial-gradient(circle, var(--color-yellow) 1.8px, transparent 2px);
  background-size: 4px 4px;
}
.panjika-day.has-festival:not(.has-event):not(.has-tithi)::after {
  background-image: radial-gradient(circle, #FFFFFF 1.8px, transparent 2px);
  background-size: 4px 4px;
}

/* Two dots — 8px wide group, dots at -4px and +4px from center */
.panjika-day.has-event.has-tithi:not(.has-festival)::after {
  background-image:
    radial-gradient(circle at 25% 50%, var(--color-red)    1.8px, transparent 2px),
    radial-gradient(circle at 75% 50%, var(--color-yellow) 1.8px, transparent 2px);
  background-size: 12px 4px;
}
.panjika-day.has-event.has-festival:not(.has-tithi)::after {
  background-image:
    radial-gradient(circle at 25% 50%, var(--color-red) 1.8px, transparent 2px),
    radial-gradient(circle at 75% 50%, #FFFFFF          1.8px, transparent 2px);
  background-size: 12px 4px;
}
.panjika-day.has-tithi.has-festival:not(.has-event)::after {
  background-image:
    radial-gradient(circle at 25% 50%, var(--color-yellow) 1.8px, transparent 2px),
    radial-gradient(circle at 75% 50%, #FFFFFF             1.8px, transparent 2px);
  background-size: 12px 4px;
}

/* Three dots — 16px wide group */
.panjika-day.has-event.has-tithi.has-festival::after {
  background-image:
    radial-gradient(circle at 16.66% 50%, var(--color-red)    1.8px, transparent 2px),
    radial-gradient(circle at 50%    50%, var(--color-yellow) 1.8px, transparent 2px),
    radial-gradient(circle at 83.33% 50%, #FFFFFF             1.8px, transparent 2px);
  background-size: 18px 4px;
}

/* ============== Selected Day panel ============== */
.panjika-panel {
  margin-top: 28px;
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.panjika-panel-date {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-yellow);
  text-align: center;
  letter-spacing: 0.4px;
  margin-bottom: 4px;
}

.panjika-panel-hint,
.panjika-panel-empty {
  text-align: center;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  padding: 14px 0;
}

.panjika-entry {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  color: var(--color-white);
  text-decoration: none;
  transition: background 0.15s ease, transform 0.1s ease;
}

.panjika-entry-bar {
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: var(--color-grey);
}

.panjika-entry-text {
  flex: 1 1 auto;
  min-width: 0;
  margin-left: 8px;
}

.panjika-entry-primary {
  font-size: 15px;
  font-weight: 500;
  color: var(--color-white);
  line-height: 1.25;
}

.panjika-entry-secondary {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 2px;
  letter-spacing: 0.2px;
}

.panjika-entry-arrow {
  flex: 0 0 auto;
  font-size: 20px;
  color: var(--color-yellow);
  opacity: 0.9;
  padding-left: 4px;
}

/* Festival entries — red bar, tap to open event */
.panjika-entry-event {
  cursor: pointer;
}
.panjika-entry-event:hover { background: rgba(255, 255, 255, 0.07); }
.panjika-entry-event:active { transform: scale(0.99); }
.panjika-entry-event .panjika-entry-bar {
  background: var(--color-red);
}

/* Tithi + sankranti — yellow bar, informational */
.panjika-entry-purnima .panjika-entry-bar,
.panjika-entry-amavasya .panjika-entry-bar,
.panjika-entry-ekadashi .panjika-entry-bar,
.panjika-entry-sankranti .panjika-entry-bar {
  background: var(--color-yellow);
}
 
/* Festival — white bar, informational (Odisha festivals,
   pujas, jayantis, vratas, etc.) */
.panjika-entry-festival .panjika-entry-bar {
  background: #FFFFFF;
}