/* ==========================================================================
   Star Rail Dynamic Calendar - General Skeleton and Controls (main.v006.css)
   ========================================================================== */

:root {
  --primary-color: #0c1020;
  --secondary-color: #161c38;
  --accent-gold: #d4af37;
  --accent-cyan: #8ecae6;
  --text-light: #f8f9fa;
  --text-muted: #a0aec0;
  --glass-bg: rgba(12, 16, 32, 0.65);
  --glass-border: rgba(212, 175, 55, 0.25);
  --glow-shadow: 0 0 20px rgba(212, 175, 55, 0.35);
  --transition-smooth: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Cinzel', 'Noto Serif SC', 'PingFang SC', sans-serif;
  background-color: var(--primary-color);
  color: var(--text-light);
  overflow-x: hidden;
  height: 100vh;
  display: flex !important;
  justify-content: center;
  align-items: center;
}

#particles-canvas {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  z-index: 1; pointer-events: none;
}

.blur-bg {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background-size: cover;
  background-position: center;
  filter: blur(40px) brightness(0.25);
  transform: scale(1.1);
  z-index: 0;
}

/* Skeleton Layout Base */
.app-container {
  position: relative;
  z-index: 10;
  width: 95% !important;
  max-width: 1100px !important;
  height: 85vh !important;
  min-height: 650px;
  background: var(--glass-bg) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border) !important;
  border-radius: 24px;
  display: flex !important; 
  overflow: hidden;
  opacity: 1 !important;
  transform: scale(1) !important;
}

/* Flex Container for the Card - Prevents squeezing */
.calendar-view {
  width: auto !important;
  min-width: 420px !important;
  flex-shrink: 0 !important; 
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
}

.card-container {
  perspective: 1000px;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Global Card Physical Size Defs */
.calendar-card {
  width: 380px !important;  
  height: 656px !important; 
  flex-shrink: 0 !important;
  border-radius: 16px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-size: 100% 100% !important; 
  background-position: center center;
  background-repeat: no-repeat;
  transform-style: preserve-3d;
}

.calendar-card-header {
  width: 100%;
  position: relative;
  pointer-events: none;
  height: 74.5% !important; 
}

.calendar-card-body {
  width: calc(100% - 36px); 
  margin: 0 auto;
  background: transparent;
  padding: 0px; 
  display: flex;
  flex-direction: column;
  height: 25.5% !important; 
}

.calendar-days-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.calendar-day-cell {
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 500;
  cursor: pointer;
  position: relative;
  user-select: none;
}

/* Highlights & Memos Circle Base */
.calendar-day-cell::before {
  content: '';
  position: absolute;
  width: 18px; 
  height: 18px;
  border-radius: 50%;
  z-index: -1;
  transition: var(--transition-smooth);
  background: transparent;
  border: 1px solid transparent;
}

.calendar-day-cell:hover::before {
  background: rgba(142, 202, 230, 0.15);
}

.calendar-day-cell.selected {
  color: #160a0a !important; 
  font-weight: bold !important;
}
.calendar-day-cell.selected::before {
  background: var(--accent-gold) !important; 
  border-color: var(--accent-gold) !important;
  box-shadow: 0 0 8px rgba(212, 175, 55, 0.8); 
}

.calendar-day-cell.today:not(.selected)::before {
  border-color: rgba(212, 175, 55, 0.8);
  box-shadow: 0 0 4px rgba(212, 175, 55, 0.4);
}

.memo-dot {
  position: absolute;
  bottom: 2px; width: 2.5px; height: 2.5px;
  background-color: var(--accent-gold); border-radius: 50%;
}
.calendar-day-cell.selected .memo-dot { background-color: #160a0a; }

/* Dashboard Widgets Panels */
.dashboard-view {
  flex: 1 !important;
  display: flex;
  flex-direction: column;
  padding: 40px;
  overflow-y: auto;
  gap: 25px;
}

.panel-section {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  padding: 20px;
  position: relative;
}

.section-title {
  font-size: 1.05rem;
  color: var(--accent-gold);
  letter-spacing: 2px;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-left: 3px solid var(--accent-gold);
  padding-left: 10px;
}

.year-selector {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.year-nav-btn {
  background: transparent;
  border: none;
  color: var(--accent-gold);
  font-size: 0.9rem;
  cursor: pointer;
  padding: 5px 10px;
  transition: var(--transition-smooth);
  opacity: 0.7;
}

.year-nav-btn:hover {
  opacity: 1;
  text-shadow: 0 0 5px var(--accent-gold);
}

.year-select-container {
  position: relative;
  display: flex;
  align-items: center;
}

.year-select {
  font-family: 'Cinzel', serif;
  font-size: 1.4rem;
  font-weight: bold;
  letter-spacing: 2px;
  color: var(--text-light);
  background: transparent;
  border: none;
  outline: none;
  cursor: pointer;
  text-align: center;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding: 0 5px;
  transition: var(--transition-smooth);
}

.year-select:hover {
  color: var(--accent-gold);
  text-shadow: 0 0 8px rgba(212, 175, 55, 0.6);
}

.year-select option {
  background: #111625;
  color: var(--text-light);
  font-family: sans-serif;
  font-size: 1rem;
}

.month-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 8px;
}

.month-btn.active {
  border-color: var(--accent-gold);
  background: rgba(212, 175, 55, 0.15);
  color: var(--accent-gold);
  font-weight: bold;
  padding: 8px;
  border-radius: 8px;
  text-align: center;
}

.music-panel { display: flex; align-items: center; gap: 20px; }
.gramophone { width: 80px; height: 80px; position: relative; flex-shrink: 0; }
.vinyl-record {
  width: 74px; height: 74px;
  background: radial-gradient(circle, #000 20%, #222 40%, #000 80%);
  border-radius: 50%;
}
.gramophone.playing .vinyl-record { animation: rotateDisc 10s linear infinite; }
.needle {
  position: absolute; top: -5px; right: 5px; width: 30px; height: 40px;
  border-left: 3px solid #ccc; border-bottom: 3px solid #ccc;
  transform: rotate(-25deg); transform-origin: top right; transition: transform 0.5s;
}
.gramophone.playing .needle { transform: rotate(0deg); }
.music-info { flex: 1; }
.track-name { font-size: 0.95rem; margin-bottom: 3px; }
.track-desc { font-size: 0.75rem; color: var(--text-muted); margin-bottom: 10px; }
.music-controls { display: flex; align-items: center; gap: 15px; }
.play-toggle {
  background: var(--accent-gold); border: none; color: var(--primary-color);
  width: 32px; height: 32px; border-radius: 50%; cursor: pointer;
}
.volume-slider { width: 80px; }

.memo-area {
  width: 100%; height: 100px; background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px;
  padding: 12px; color: var(--text-light); font-family: inherit;
  font-size: 0.85rem; resize: none; outline: none;
}
.memo-status { font-size: 0.75rem; color: var(--text-muted); text-align: right; margin-top: 5px; }

.card-reflection {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 60%);
  pointer-events: none; z-index: 2;
}

@keyframes rotateDisc { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ==========================================================================
   Month Switch Interactive Buttons Style (Single Page Application Tabs)
   ========================================================================== */
.month-toggle-btn {
  flex: 1; 
  text-align: center; 
  padding: 8px; 
  background: rgba(255, 255, 255, 0.05); 
  border: 1px solid rgba(255, 255, 255, 0.1); 
  border-radius: 8px; 
  color: #f8f9fa; 
  font-family: inherit; 
  font-size: 0.8rem; 
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.month-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}
.month-toggle-btn.active {
  border-color: var(--accent-gold) !important;
  background: rgba(212, 175, 55, 0.15) !important;
  color: var(--accent-gold) !important;
  font-weight: bold;
}

/* ==========================================================================
   Isolated Monthly Namespace Layout Models
   ========================================================================== */

/* --------------------------------------------------------------------------
   January (Month-1) - Standard 5-Row Layout Model
   -------------------------------------------------------------------------- */
.calendar-card.month-1 .calendar-days-grid {
  grid-template-rows: repeat(5, 1fr) !important; 
  padding: 0 20px; 
  transform: translateX(0.5px) translateY(-1px) !important; 
}
.calendar-card.month-1 .calendar-day-cell {
  font-size: 0.62rem !important; 
  color: rgba(255, 255, 255, 0.85) !important;
  height: 23.5px !important;
  transform: none !important;
}

/* --------------------------------------------------------------------------
   February (Month-2) - Clean 4-Row Layout Model (Fully Visible Text)
   -------------------------------------------------------------------------- */
.calendar-card.month-2 .calendar-days-grid {
  grid-template-rows: repeat(4, 1fr) !important; 
  padding: 0 20px; 
  /* Shift 4 rows grid downward to match vertical empty window perfectly */
  transform: translateX(0.5px) translateY(7px) !important; 
}
.calendar-card.month-2 .calendar-day-cell {
  font-size: 0.62rem !important;
  /* All numbers are 100% visible over the blank white wallpaper background */
  color: rgba(255, 255, 255, 0.85) !important; 
  height: 26.5px !important; 
}
.calendar-card.month-2 .calendar-day-cell.selected {
  color: #111625 !important; 
}

/* --------------------------------------------------------------------------
   Months 3, 4, 6, 7, 9, 10, 11, 12 - Standard 5-Row Layout Model
   -------------------------------------------------------------------------- */
.calendar-card.month-3 .calendar-days-grid,
.calendar-card.month-4 .calendar-days-grid,
.calendar-card.month-6 .calendar-days-grid,
.calendar-card.month-7 .calendar-days-grid,
.calendar-card.month-9 .calendar-days-grid,
.calendar-card.month-10 .calendar-days-grid,
.calendar-card.month-11 .calendar-days-grid,
.calendar-card.month-12 .calendar-days-grid {
  grid-template-rows: repeat(5, 1fr) !important; 
  padding: 0 20px; 
  transform: translateX(0.5px) translateY(-1px) !important; 
}

.calendar-card.month-3 .calendar-day-cell,
.calendar-card.month-4 .calendar-day-cell,
.calendar-card.month-6 .calendar-day-cell,
.calendar-card.month-7 .calendar-day-cell,
.calendar-card.month-9 .calendar-day-cell,
.calendar-card.month-10 .calendar-day-cell,
.calendar-card.month-11 .calendar-day-cell,
.calendar-card.month-12 .calendar-day-cell {
  font-size: 0.62rem !important; 
  color: rgba(255, 255, 255, 0.85) !important;
  height: 23.5px !important;
  transform: none !important;
}

/* --------------------------------------------------------------------------
   Months 5, 8 - Standard 6-Row Layout Model
   -------------------------------------------------------------------------- */
.calendar-card.month-5 .calendar-days-grid,
.calendar-card.month-8 .calendar-days-grid {
  grid-template-rows: repeat(6, 1fr) !important; 
  padding: 0 20px; 
  transform: translateX(0.5px) translateY(-1px) !important; 
}

.calendar-card.month-5 .calendar-day-cell,
.calendar-card.month-8 .calendar-day-cell {
  font-size: 0.62rem !important; 
  color: rgba(255, 255, 255, 0.85) !important;
  height: 19.5px !important;
  transform: none !important;
}