/* ====================================================
   STYLE 4: BOLD INDUSTRIAL / HARDWARE & BODEGA BIG-TYPE
   ==================================================== */

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

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

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

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

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

/* Makapal at Solido na Industrial Frame */
.calendar-sheet.style-4 .calendar-frame {
  border: 6px solid var(--s4-grid);
  padding: 0;
  background: #ffffff;
  background-image: none !important;
  border-radius: 0;
}

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

/* Banner Area */
.calendar-sheet.style-4 .banner-area {
  height: 35%;
  background: #f8fafc;
  border-bottom: 5px solid var(--s4-grid);
}

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

/* Solid Block Header */
.calendar-sheet.style-4 .cal-header {
  display: grid;
  grid-template-columns: 140px 1fr 140px;
  height: 72px;
  border-bottom: 5px solid var(--s4-grid);
  background: var(--s4-primary);
}

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

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

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

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

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

/* Days Grid - Makakapal na border lines */
.calendar-sheet.style-4 .days-grid {
  border-bottom: 5px solid var(--s4-grid);
}

.calendar-sheet.style-4 .cell {
  border-right: 3px solid var(--s4-grid);
  border-bottom: 3px solid var(--s4-grid);
  padding: 2px 4px;
}

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

/* Higanteng numero na halos sumakop sa cell */
.calendar-sheet.style-4 .day-number {
  font-family: "Impact", Arial Black, sans-serif !important;
  font-size: 4.4rem;
  font-weight: 900;
  line-height: 0.8;
  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.65rem;
  font-weight: 900;
  color: #ffffff;
  background: var(--s4-sunday);
  padding: 1px 3px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Split Cell (24/31) */
.calendar-sheet.style-4 .split-diagonal-svg line {
  stroke: var(--s4-grid) !important;
  stroke-width: 4 !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: 3rem !important;
  line-height: 0.85;
  color: var(--s4-primary);
}

.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: #f8fafc;
}

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

.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-weight: 900;
}

/* Bottom Panel */
.calendar-sheet.style-4 .bottom-panel {
  background: #f1f5f9;
  padding: 4px;
  gap: 4px;
}

.calendar-sheet.style-4 .mini-cal,
.calendar-sheet.style-4 .holiday-box {
  border: 3px solid var(--s4-grid);
  background: #ffffff;
}

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

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

/* Mobile Auto-Fit */
@media screen and (max-width: 900px) {
  .calendar-sheet.style-4 .calendar-frame {
    border-width: 4px;
  }
  .calendar-sheet.style-4 .cal-header {
    height: 12vw !important;
  }
  .calendar-sheet.style-4 .month-box {
    font-size: 8vw !important;
  }
  .calendar-sheet.style-4 .year-box {
    font-size: 6.8vw !important;
  }
  .calendar-sheet.style-4 .day-number {
    font-size: 10vw !important;
  }
  .calendar-sheet.style-4 .split-top-left,
  .calendar-sheet.style-4 .split-bottom-right {
    font-size: 6.5vw !important;
  }
}