/* ====================================================
   COMMERCIAL B - STYLE 4: BOLD INDUSTRIAL / BIG-TYPE
   (6 Pages / 2 Months per Page Layout)
   ==================================================== */

/* Theme 1: Safety Yellow & Black (Default) */
body.s4-theme-safety-yellow {
  --s4-primary: #111827;
  --s4-accent: #eab308;
  --s4-contrast: #000000;
  --s4-grid: #000000;
  --s4-sunday: #dc2626;
  --s4-bg: #ffffff;
  --s4-panel-bg: #f8fafc;
}

/* Theme 2: Industrial Black & Red */
body.s4-theme-black-red {
  --s4-primary: #000000;
  --s4-accent: #dc2626;
  --s4-contrast: #ffffff;
  --s4-grid: #1c1917;
  --s4-sunday: #dc2626;
  --s4-bg: #ffffff;
  --s4-panel-bg: #f8fafc;
}

/* Theme 3: Workshop Navy & Signal Orange */
body.s4-theme-navy-orange {
  --s4-primary: #0f172a;
  --s4-accent: #ea580c;
  --s4-contrast: #ffffff;
  --s4-grid: #0f172a;
  --s4-sunday: #ef4444;
  --s4-bg: #ffffff;
  --s4-panel-bg: #f8fafc;
}

/* Theme 4: Steel Charcoal & Neon Lime */
body.s4-theme-steel-lime {
  --s4-primary: #18181b;
  --s4-accent: #84cc16;
  --s4-contrast: #000000;
  --s4-grid: #27272a;
  --s4-sunday: #ef4444;
  --s4-bg: #ffffff;
  --s4-panel-bg: #f8fafc;
}

/* Base Sheet Styling */
.calendar-sheet.style-4 {
  font-family: "Impact", "Arial Black", sans-serif !important;
  background-color: var(--s4-bg) !important;
}

/* Makapal at Solido na Outer Border */
.calendar-sheet.style-4 .calendar-frame {
  border: 5px solid var(--s4-grid);
  padding: 0;
  background-color: var(--s4-bg);
  background-image: none !important;
  border-radius: 0;
}

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

/* Banner Area */
.calendar-sheet.style-4 .banner-area {
  background: var(--s4-panel-bg);
  border-bottom: 4px solid var(--s4-grid);
}

.calendar-sheet.style-4 .banner-placeholder {
  border: 2.5px dashed var(--s4-primary);
  background: #f1f5f9;
  color: var(--s4-primary);
  font-family: Arial, sans-serif;
  font-weight: 900;
  letter-spacing: 1px;
}

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

.calendar-sheet.style-4 .cal-block {
  border-right: 3px solid var(--s4-grid);
}

.calendar-sheet.style-4 .bottom-month .cal-block {
  border-left: 3px solid var(--s4-grid);
  border-right: none;
}

/* Header Bar ng Bawat Buwan */
.calendar-sheet.style-4 .month-header-bar {
  display: grid;
  grid-template-columns: 85px 1fr 85px;
  height: 44px;
  background: var(--s4-primary);
  border-bottom: 3px solid var(--s4-grid);
}

.calendar-sheet.style-4 .m-title {
  background: var(--s4-accent) !important;
  color: var(--s4-contrast) !important;
  font-family: "Impact", Arial Black, sans-serif !important;
  font-size: 2.1rem !important;
  font-weight: 900 !important;
  letter-spacing: 3px !important;
}

.calendar-sheet.style-4 .m-year {
  background: var(--s4-primary) !important;
  color: #ffffff !important;
  font-family: "Impact", Arial Black, sans-serif !important;
  font-size: 1.7rem !important;
  letter-spacing: 1px !important;
}

/* Weekday Bar */
.calendar-sheet.style-4 .cal-weekdays {
  background: var(--s4-primary);
  border-bottom: 3px solid var(--s4-grid);
  font-size: 0.88rem;
  font-weight: 900;
  letter-spacing: 1px;
}

.calendar-sheet.style-4 .cal-weekdays div {
  padding: 3px 0;
  border-right: 1.5px solid rgba(255, 255, 255, 0.25);
  color: #ffffff;
  font-family: "Impact", Arial Black, sans-serif;
}

.calendar-sheet.style-4 .cal-weekdays .sun-col {
  color: #ffffff !important;
  background: var(--s4-sunday);
}

/* Days Grid & Cell Borders */
.calendar-sheet.style-4 .cell {
  border-right: 2px solid var(--s4-grid);
  border-bottom: 2px solid var(--s4-grid);
  padding: 1px 3px;
}

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

/* Higanteng Numero sa Bawat Araw */
.calendar-sheet.style-4 .day-number {
  font-family: "Impact", Arial Black, sans-serif !important;
  font-size: 2.7rem;
  font-weight: 900;
  line-height: 0.82;
  color: var(--s4-primary);
  margin-left: auto;
}

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

.calendar-sheet.style-4 .holiday-name {
  font-family: Arial, sans-serif;
  font-size: 0.52rem;
  font-weight: 900;
  color: #ffffff;
  background: var(--s4-sunday);
  padding: 1px 2px;
  text-transform: uppercase;
}

/* Split Cell (24/31 o 23/30) */
.calendar-sheet.style-4 .split-diagonal-svg line {
  stroke: var(--s4-grid) !important;
  stroke-width: 3 !important;
}

.calendar-sheet.style-4 .split-top-left,
.calendar-sheet.style-4 .split-bottom-right {
  font-family: "Impact", Arial Black, sans-serif !important;
  font-size: 2rem !important;
  line-height: 0.85;
  color: var(--s4-primary) !important;
}

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

/* Moon SVG Cells */
.calendar-sheet.style-4 .moon-cell {
  background: var(--s4-panel-bg);
}

.calendar-sheet.style-4 .moon-title {
  color: var(--s4-primary) !important;
  font-family: "Impact", Arial Black, sans-serif;
  font-size: 0.5rem;
  letter-spacing: 0.5px;
}

.calendar-sheet.style-4 .moon-svg circle,
.calendar-sheet.style-4 .moon-svg path {
  stroke: var(--s4-primary) !important;
}

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

.calendar-sheet.style-4 .moon-date {
  color: var(--s4-sunday) !important;
  font-family: Arial, sans-serif;
  font-weight: 900;
}

/* Sidebar Panels (Holidays, Notes, Mini Reference) */
.calendar-sheet.style-4 .sidebar-panel {
  background: var(--s4-panel-bg);
  padding: 3px;
  gap: 3px;
}

.calendar-sheet.style-4 .side-box {
  border: 2px solid var(--s4-grid);
  background: #ffffff;
}

.calendar-sheet.style-4 .side-title-tag {
  background: var(--s4-primary);
  color: #ffffff;
  font-family: "Impact", Arial Black, sans-serif;
  font-size: 0.65rem;
  letter-spacing: 1px;
}

.calendar-sheet.style-4 .side-holidays-list li b {
  color: var(--s4-primary);
  font-family: Arial, sans-serif;
  font-weight: 900;
}

.calendar-sheet.style-4 .notes-header {
  color: var(--s4-primary);
  font-family: "Impact", Arial Black, sans-serif;
  font-size: 0.65rem;
  letter-spacing: 1px;
}

.calendar-sheet.style-4 .notes-line {
  border-bottom: 1.5px solid var(--s4-grid);
}

.calendar-sheet.style-4 .side-mini-hdr {
  color: var(--s4-primary);
  font-family: "Impact", Arial Black, sans-serif;
  border-bottom: 1.5px solid var(--s4-grid);
  font-size: 0.62rem;
}

.calendar-sheet.style-4 .side-mini-wk {
  color: var(--s4-primary);
  font-weight: 900;
}

.calendar-sheet.style-4 .side-mini-grid {
  color: var(--s4-primary);
  font-weight: 900;
}

/* ====================================================
   MOBILE & TABLET AUTO-FIT (COMMERCIAL B STYLE 4)
   ==================================================== */
@media screen and (max-width: 900px) {
  .calendar-sheet.style-4 .calendar-frame {
    border-width: 3.5px;
  }
  .calendar-sheet.style-4 .month-header-bar {
    height: 8vw !important;
    grid-template-columns: 18% 1fr 18% !important;
  }
  .calendar-sheet.style-4 .m-title {
    font-size: 5vw !important;
    letter-spacing: 1px !important;
  }
  .calendar-sheet.style-4 .m-year {
    font-size: 4.2vw !important;
  }
  .calendar-sheet.style-4 .day-number {
    font-size: 6.2vw !important;
  }
  .calendar-sheet.style-4 .split-top-left,
  .calendar-sheet.style-4 .split-bottom-right {
    font-size: 4.6vw !important;
  }
  .calendar-sheet.style-4 .side-title-tag {
    font-size: 1.4vw !important;
  }
}