/* ====================================================
   STYLE 5: DAILY PLANNER & NOTE-TAKER
   ==================================================== */

/* Theme 1: Warm Sand & Espresso (Default) */
body.s5-theme-warm-sand {
  --s5-primary: #451a03;
  --s5-accent: #b45309;
  --s5-grid: #e7e5e4;
  --s5-line: #f5f5f4;
  --s5-sunday: #b91c1c;
  --s5-bg: #fffbf5;
  --s5-card-bg: #fdfbf7;
}

/* Theme 2: Pastel Lavender & Slate */
body.s5-theme-lavender-slate {
  --s5-primary: #334155;
  --s5-accent: #7c3aed;
  --s5-grid: #e2e8f0;
  --s5-line: #f1f5f9;
  --s5-sunday: #e11d48;
  --s5-bg: #fafafc;
  --s5-card-bg: #f8fafc;
}

/* Theme 3: Sage Botanical & Olive */
body.s5-theme-sage-olive {
  --s5-primary: #1e3a2b;
  --s5-accent: #3f6212;
  --s5-grid: #dcfce7;
  --s5-line: #f0fdf4;
  --s5-sunday: #b91c1c;
  --s5-bg: #fcfdfc;
  --s5-card-bg: #f4fbf6;
}

/* Theme 4: Soft Denim & Amber */
body.s5-theme-denim-amber {
  --s5-primary: #1e293b;
  --s5-accent: #d97706;
  --s5-grid: #e2e8f0;
  --s5-line: #f8fafc;
  --s5-sunday: #dc2626;
  --s5-bg: #ffffff;
  --s5-card-bg: #f8fafc;
}

.calendar-sheet.style-5 {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  background-color: var(--s5-bg) !important;
}

/* Malinis at manipis na notebook frame */
.calendar-sheet.style-5 .calendar-frame {
  border: 1.5px solid var(--s5-grid);
  padding: 0;
  background: var(--s5-bg);
  background-image: none !important;
  border-radius: 8px;
  overflow: hidden;
}

.calendar-sheet.style-5 .calendar-inner-core {
  border: none;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Banner Area */
.calendar-sheet.style-5 .banner-area {
  height: 33%;
  background: var(--s5-card-bg);
  border-bottom: 1.5px solid var(--s5-grid);
}

.calendar-sheet.style-5 .banner-placeholder {
  border: 1.5px dashed var(--s5-accent);
  background: #ffffff;
  color: var(--s5-primary);
  border-radius: 6px;
  font-weight: 700;
  font-size: 0.85rem;
}

/* Elegant Calendar Header */
.calendar-sheet.style-5 .cal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 24px;
  height: 60px;
  background: #ffffff;
  border-bottom: 2px solid var(--s5-accent);
}

.calendar-sheet.style-5 .month-box {
  background: transparent !important;
  color: var(--s5-primary) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 2.3rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.5px !important;
}

.calendar-sheet.style-5 .year-box {
  background: var(--s5-card-bg) !important;
  color: var(--s5-accent) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 1.2rem !important;
  font-weight: 800 !important;
  padding: 4px 14px;
  border-radius: 20px;
  border: 1px solid var(--s5-grid);
}

/* Weekday Row */
.calendar-sheet.style-5 .weekdays-row {
  background: var(--s5-card-bg);
  border-bottom: 1.5px solid var(--s5-grid);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 1.2px;
}

.calendar-sheet.style-5 .weekdays-row div {
  padding: 7px 0;
  border-right: 1px solid var(--s5-grid);
  color: var(--s5-primary);
}

.calendar-sheet.style-5 .weekdays-row .sun-col {
  color: var(--s5-sunday);
}

/* Days Grid & Note-Taking Lined Cells */
.calendar-sheet.style-5 .days-grid {
  border-bottom: 1.5px solid var(--s5-grid);
}

.calendar-sheet.style-5 .cell {
  border-right: 1px solid var(--s5-grid);
  border-bottom: 1px solid var(--s5-grid);
  padding: 4px 6px;
  /* Notebook Ruled Lines para madaling sulatan ng ballpen */
  background-image: repeating-linear-gradient(
    transparent,
    transparent 15px,
    var(--s5-grid) 15px,
    var(--s5-grid) 16px
  );
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.calendar-sheet.style-5 .cell-top {
  display: flex;
  justify-content: flex-start;
  width: 100%;
  margin-bottom: 2px;
}

/* Malinis at maliit na numero sa top-left */
.calendar-sheet.style-5 .day-number {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1;
  color: var(--s5-primary);
  margin-left: 0;
  background: #ffffff;
  padding: 1px 4px;
  border-radius: 4px;
}

.calendar-sheet.style-5 .sunday-cell .day-number,
.calendar-sheet.style-5 .holiday-cell .day-number {
  color: var(--s5-sunday) !important;
}

.calendar-sheet.style-5 .holiday-name {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.55rem;
  font-weight: 700;
  color: var(--s5-sunday);
  background: rgba(220, 38, 38, 0.08);
  padding: 1px 3px;
  border-radius: 3px;
  margin-top: auto;
  align-self: flex-start;
}

/* Split Cell (24/31) */
.calendar-sheet.style-5 .split-diagonal-svg line {
  stroke: var(--s5-grid) !important;
  stroke-width: 1.5 !important;
}

.calendar-sheet.style-5 .split-top-left,
.calendar-sheet.style-5 .split-bottom-right {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--s5-primary);
  background: #ffffff;
  padding: 0 3px;
  border-radius: 3px;
}

.calendar-sheet.style-5 .sunday-cell .split-top-left,
.calendar-sheet.style-5 .sunday-cell .split-bottom-right {
  color: var(--s5-sunday);
}

/* Moon Cell */
.calendar-sheet.style-5 .moon-cell {
  background: var(--s5-card-bg);
  background-image: none;
}

.calendar-sheet.style-5 .moon-title {
  color: var(--s5-accent);
  font-size: 0.55rem;
}

.calendar-sheet.style-5 .moon-svg circle,
.calendar-sheet.style-5 .moon-svg path {
  stroke: var(--s5-accent);
}

.calendar-sheet.style-5 .moon-svg circle[fill="#dc2626"],
.calendar-sheet.style-5 .moon-svg path[fill="#dc2626"] {
  fill: var(--s5-accent) !important;
}

.calendar-sheet.style-5 .moon-date {
  color: var(--s5-primary);
  font-size: 0.6rem;
}

/* Bottom Panel Cards */
.calendar-sheet.style-5 .bottom-panel {
  background: #ffffff;
  padding: 8px;
  gap: 10px;
}

.calendar-sheet.style-5 .mini-cal,
.calendar-sheet.style-5 .holiday-box {
  border: 1px solid var(--s5-grid);
  border-radius: 6px;
  background: var(--s5-card-bg);
  padding: 6px;
}

.calendar-sheet.style-5 .section-tag {
  background: var(--s5-accent);
  color: #ffffff;
  font-weight: 700;
  border-radius: 4px;
  font-size: 0.65rem;
  letter-spacing: 1px;
}

.calendar-sheet.style-5 .holiday-col li b {
  color: var(--s5-accent);
}

/* Mobile Auto-Fit */
@media screen and (max-width: 900px) {
  .calendar-sheet.style-5 .cal-header {
    height: 10vw !important;
    padding: 2vw 4vw !important;
  }
  .calendar-sheet.style-5 .month-box {
    font-size: 5.8vw !important;
  }
  .calendar-sheet.style-5 .year-box {
    font-size: 3.6vw !important;
    padding: 1vw 3vw !important;
  }
  .calendar-sheet.style-5 .day-number {
    font-size: 3.8vw !important;
  }
  .calendar-sheet.style-5 .split-top-left,
  .calendar-sheet.style-5 .split-bottom-right {
    font-size: 3.2vw !important;
  }
}