/* ====================================================
   COMMERCIAL B - STYLE 5: DAILY PLANNER & NOTE-TAKER
   (6 Pages / 2 Months per Page Layout)
   ==================================================== */

/* Theme 1: Warm Sand & Espresso (Default) */
body.s5-theme-warm-sand {
  --s5-primary: #451a03;
  --s5-accent: #b45309;
  --s5-grid: #e7e5e4;
  --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-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-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-sunday: #dc2626;
  --s5-bg: #ffffff;
  --s5-card-bg: #f8fafc;
}

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

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

.calendar-sheet.style-5 .calendar-inner-core {
  border: none;
  background: var(--s5-bg);
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Banner Area */
.calendar-sheet.style-5 .banner-area {
  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;
}

/* Section Dividers ng Dalawang Buwan */
.calendar-sheet.style-5 .month-row.top-month {
  border-bottom: 1.5px solid var(--s5-grid);
}

.calendar-sheet.style-5 .cal-block {
  border-right: 1.5px solid var(--s5-grid);
}

.calendar-sheet.style-5 .bottom-month .cal-block {
  border-left: 1.5px solid var(--s5-grid);
  border-right: none;
}

/* Header Bar ng Bawat Buwan */
.calendar-sheet.style-5 .month-header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 16px;
  height: 38px;
  background: #ffffff;
  border-bottom: 1.5px solid var(--s5-accent);
}

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

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

/* Weekday Bar */
.calendar-sheet.style-5 .cal-weekdays {
  background: var(--s5-card-bg);
  border-bottom: 1.5px solid var(--s5-grid);
  font-size: 0.75rem;
  font-weight: 800;
}

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

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

/* Ruled Lined Cells para Madaling Sulatan */
.calendar-sheet.style-5 .cell {
  border-right: 1px solid var(--s5-grid);
  border-bottom: 1px solid var(--s5-grid);
  padding: 2px 3px;
  background-image: repeating-linear-gradient(
    transparent,
    transparent 11px,
    var(--s5-grid) 11px,
    var(--s5-grid) 12px
  );
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

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

/* Petsa sa Top-Left */
.calendar-sheet.style-5 .day-number {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--s5-primary);
  background: #ffffff;
  padding: 0 3px;
  border-radius: 3px;
  line-height: 1.1;
  margin-left: 0 !important;
}

.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.46rem;
  font-weight: 700;
  color: var(--s5-sunday);
  background: rgba(220, 38, 38, 0.08);
  padding: 1px 2px;
  border-radius: 2px;
  margin-top: auto;
  align-self: flex-start;
}

/* Split Cell (24/31 o 23/30) */
.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: 0.85rem !important;
  font-weight: 800;
  color: var(--s5-primary);
  background: #ffffff;
  padding: 0 2px;
  border-radius: 2px;
}

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

/* Moon SVG Cells */
.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.44rem;
}

.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.48rem;
}

/* Sidebar Organizer */
.calendar-sheet.style-5 .sidebar-panel {
  background: var(--s5-card-bg);
  gap: 3px;
  padding: 3px;
}

.calendar-sheet.style-5 .side-box {
  border: 1px solid var(--s5-grid);
  border-radius: 4px;
  background: #ffffff;
}

.calendar-sheet.style-5 .side-title-tag {
  background: var(--s5-accent);
  color: #ffffff;
  font-weight: 800;
  font-size: 0.52rem;
  letter-spacing: 0.5px;
}

.calendar-sheet.style-5 .side-holidays-list li b {
  color: var(--s5-accent);
}

.calendar-sheet.style-5 .notes-header {
  color: var(--s5-primary);
  font-size: 0.55rem;
}

.calendar-sheet.style-5 .notes-line {
  border-bottom: 1px solid var(--s5-grid);
}

.calendar-sheet.style-5 .side-mini-hdr {
  color: var(--s5-primary);
  border-bottom: 1px solid var(--s5-grid);
}

.calendar-sheet.style-5 .side-mini-wk {
  color: var(--s5-primary);
}

.calendar-sheet.style-5 .side-mini-grid {
  color: var(--s5-primary);
}

/* ====================================================
   MOBILE & TABLET AUTO-FIT (COMMERCIAL B STYLE 5)
   ==================================================== */
@media screen and (max-width: 900px) {
  .calendar-sheet.style-5 .month-header-bar {
    height: 7vw !important;
    padding: 0 3vw !important;
  }
  .calendar-sheet.style-5 .m-title {
    font-size: 3.8vw !important;
  }
  .calendar-sheet.style-5 .m-year {
    font-size: 2.6vw !important;
    padding: 0.5vw 2vw !important;
  }
  .calendar-sheet.style-5 .day-number {
    font-size: 2.5vw !important;
  }
  .calendar-sheet.style-5 .split-top-left,
  .calendar-sheet.style-5 .split-bottom-right {
    font-size: 2.2vw !important;
  }
}