@page {
  size: 297mm 210mm; /* A4 Landscape */
  margin: 0mm !important;
}

/* Base / Default Colors: Black & Red */
:root {
  --primary-color: #111111;
  --accent-color: #e51d1d;
}

/* Corporate Palette Overrides */
body.palette-default {
  --primary-color: #111111;
  --accent-color: #e51d1d;
}

body.palette-navy {
  --primary-color: #0f172a;
  --accent-color: #e11d48;
}

body.palette-slate {
  --primary-color: #1e293b;
  --accent-color: #d97706;
}

body.palette-emerald {
  --primary-color: #064e3b;
  --accent-color: #b45309;
}

body.palette-sapphire {
  --primary-color: #172554;
  --accent-color: #0284c7;
}

body.palette-monolith {
  --primary-color: #262626;
  --accent-color: #dc2626;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-print-color-adjust: exact !important;
  print-color-adjust: exact !important;
}

body {
  background-color: #0b0f19;
  font-family: 'Plus Jakarta Sans', Arial, sans-serif;
  color: #111;
  display: flex;
  min-height: 100vh;
}

/* Sidebar Controls */
.control-panel {
  width: 290px;
  background: #111827;
  color: #f8fafc;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}

.panel-header .back-link {
  color: #38bdf8;
  font-size: 0.8rem;
  text-decoration: none;
  font-weight: 700;
  display: inline-block;
  margin-bottom: 6px;
}

.panel-header h2 {
  font-size: 1.15rem;
  font-weight: 800;
}

.panel-header .badge {
  display: inline-block;
  background: var(--accent-color);
  color: #fff;
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: bold;
  margin-top: 4px;
  transition: background 0.2s;
}

.control-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.control-group label {
  font-size: 0.8rem;
  color: #94a3b8;
  font-weight: 700;
}

.control-group input,
.control-group select {
  padding: 10px 12px;
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 8px;
  color: #fff;
  font-size: 0.9rem;
}

.primary-btn {
  background: var(--accent-color);
  color: #fff;
  border: none;
  padding: 12px;
  border-radius: 8px;
  font-weight: 800;
  cursor: pointer;
  margin-top: 10px;
  transition: 0.2s;
}

.primary-btn:hover {
  filter: brightness(0.9);
}

/* Main Calendar Workspace */
.calendar-wrapper {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  background: #070a12;
}

/* Exact A4 Landscape Box (297mm x 210mm) */
.desk-sheet {
  width: 297mm;
  height: 210mm;
  background: #ffffff;
  padding: 14mm 10mm 6mm 10mm;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

/* 1. Header */
.desk-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 2px;
  line-height: 0.82;
}

.desk-header .side-year {
  font-family: 'Impact', 'Oswald', sans-serif;
  font-size: 48pt;
  color: var(--accent-color);
  letter-spacing: -1px;
}

.desk-header .main-month {
  font-family: 'Impact', 'Oswald', sans-serif;
  font-size: 60pt;
  color: var(--primary-color);
  text-transform: uppercase;
  letter-spacing: 2px;
  text-align: center;
}

/* 2. Weekdays Bar */
.weekdays-bar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 2px;
}

.weekdays-bar .day-name {
  background-color: var(--primary-color) !important;
  color: #ffffff !important;
  font-family: 'Impact', 'Oswald', sans-serif;
  font-size: 15pt;
  text-align: center;
  padding: 2px 0 1px 0;
  letter-spacing: 1px;
}

.weekdays-bar .day-name.sun {
  background-color: var(--accent-color) !important;
  color: #ffffff !important;
}

/* 3. Days Grid */
.days-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(5, 23.5mm);
  height: 117.5mm;
  margin-bottom: 2mm;
}

.cell {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

/* Main Numbers */
.day-num {
  font-family: 'Impact', 'Oswald', sans-serif;
  font-size: 72pt;
  line-height: 0.85;
  color: var(--primary-color);
  letter-spacing: -2px;
}

/* Automatic Color para sa Sunday at Holidays */
.cell.sunday .day-num,
.cell.holiday .day-num {
  color: var(--accent-color) !important;
}

/* Holiday cell (May label) */
.cell.holiday-labeled {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  height: 100% !important;
  padding: 1px 0 !important;
}

.cell.holiday-labeled .day-num {
  font-size: 52pt !important;
  line-height: 0.88 !important;
  margin-top: -2px;
  color: var(--accent-color) !important;
}

.cell.holiday-labeled .hol-tag {
  font-family: 'Impact', 'Oswald', sans-serif;
  font-size: 7.5pt !important;
  color: var(--accent-color);
  letter-spacing: 0.3px;
  text-align: center;
  line-height: 1;
  margin-top: 1px;
  white-space: nowrap;
}

.fireworks-icon {
  width: 22px !important;
  height: 22px !important;
  position: absolute;
  top: 2px !important;
  right: 12px !important;
}

/* Shaded Moon Vector Cells */
.moon-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 2px;
}

.moon-svg-wrap {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.moon-svg-wrap svg,
.moon-svg-wrap img,
.moon-img-render {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: contain !important;
}

.moon-text-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.05;
}

.moon-phase-name {
  font-family: 'Impact', 'Oswald', sans-serif;
  font-size: 9.5pt;
  color: var(--primary-color);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.moon-phase-date {
  font-family: 'Impact', 'Oswald', sans-serif;
  font-size: 9.5pt;
  color: var(--primary-color);
  margin-top: 1px;
}

/* Split Cell */
.split-cell {
  position: relative;
  width: 100%;
  height: 100%;
}

.split-diagonal {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  stroke: var(--primary-color);
  stroke-width: 2.2;
}

.cell.sunday .split-diagonal {
  stroke: var(--accent-color);
}

.split-top {
  position: absolute;
  top: 2px;
  left: 8px;
  font-family: 'Impact', sans-serif;
  font-size: 40pt;
  line-height: 1;
  color: var(--primary-color);
}

.split-bottom {
  position: absolute;
  bottom: 2px;
  right: 8px;
  font-family: 'Impact', sans-serif;
  font-size: 40pt;
  line-height: 1;
  color: var(--primary-color);
}

.cell.sunday .split-top,
.cell.sunday .split-bottom,
.cell.holiday .split-top,
.cell.holiday .split-bottom {
  color: var(--accent-color) !important;
}

/* 4. Footer Section */
.desk-footer {
  display: grid;
  grid-template-columns: 78mm 121mm 78mm;
  justify-content: space-between;
  flex: 1;
  align-items: stretch;
  padding-top: 1mm;
}

/* Mini Calendar Boxes */
.mini-cal-box {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.mini-cal-title {
  font-family: 'Impact', 'Oswald', sans-serif;
  font-size: 11pt;
  color: var(--primary-color);
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}

.mini-table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 8pt;
  font-weight: 700;
  flex: 1;
}

.mini-table th {
  padding: 1.5px 0;
  font-size: 7.2pt;
  border-bottom: 1.5px solid var(--primary-color);
}

.mini-table td {
  padding: 1.8px 0;
  border-bottom: 0.5px solid #cbd5e1;
}

/* Center Legal Holidays */
.holidays-box {
  text-align: center;
  display: flex;
  flex-direction: column;
  padding: 0 4mm;
}

.holidays-title {
  font-family: 'Impact', 'Oswald', sans-serif;
  font-size: 13pt;
  color: var(--accent-color);
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}

.holidays-dual-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  text-align: left;
  flex: 1;
}

.hol-col {
  list-style: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.hol-col li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: 'Plus Jakarta Sans', Arial, sans-serif;
  font-size: 7.2pt;
  color: var(--accent-color);
  line-height: 1.25;
}

.hol-col li span.h-name {
  font-weight: 700;
  font-size: 7pt;
  text-transform: uppercase;
  text-align: left;
}

.hol-col li b.h-date {
  font-family: 'Impact', 'Oswald', sans-serif;
  letter-spacing: 0.5px;
  font-size: 7.8pt;
  text-align: right;
  margin-left: 6px;
  white-space: nowrap;
}

/* Print Rules */
@media print {
  html, body {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }

  .control-panel,
  .modal-overlay,
  .preview-pill {
    display: none !important;
  }

  .calendar-wrapper {
    padding: 0 !important;
    background: transparent !important;
    margin: 0 !important;
    gap: 0 !important;
    display: block !important;
    width: 100% !important;
  }

  .desk-sheet {
    box-shadow: none !important;
    page-break-after: always !important;
    break-after: page !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    margin: 0 auto !important;
    zoom: 1 !important; /* Pinipigilan ang mobile screen zoom na sumingit sa print */
    width: 297mm !important;
    height: 210mm !important;
    max-height: 210mm !important;
    padding: 10mm 10mm 4mm 10mm !important; /* Binawasan ang top at bottom padding para hindi maputol ang mini-calendars at legal holidays sa footer */
    box-sizing: border-box !important;
  }

  .desk-sheet:last-child {
    page-break-after: auto !important;
    break-after: auto !important;
  }
}

/* ====================================================
   MOBILE & TABLET RESPONSIVE ENGINE (ALL DEVICES)
   ==================================================== */

   @media screen and (max-width: 1024px) {
    body {
      flex-direction: column !important;
      height: auto !important;
      overflow-y: auto !important;
    }
  
    /* 1. Controls Panel sa Mobile & Tablet */
    .control-panel {
      width: 100% !important;
      max-width: 100% !important;
      border-right: none !important;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
      padding: 16px !important;
      gap: 12px !important;
    }
  
    .control-panel .panel-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  
    .control-panel .panel-header h2 {
      font-size: 1rem !important;
    }
  
    /* 2. Calendar Preview Workspace */
    .calendar-wrapper {
      width: 100% !important;
      padding: 12px 0 30px 0 !important;
      display: flex !important;
      justify-content: center !important;
      align-items: center !important;
      overflow-x: hidden !important;
    }
  
    /* 3. Automatic CSS Zoom para sa screen preview lamang */
    .desk-sheet {
      zoom: 0.65;
      margin: 0 auto !important;
      transform-origin: top center;
    }
  }
  
  @media screen and (max-width: 640px) {
    /* Para sa standard mobile phones (iPhone, Samsung, Xiaomi) */
    .desk-sheet {
      zoom: 0.36; /* Sakop ang buong 297mm width sa mobile screen */
      margin: 0 auto !important;
    }
  
    .control-group input,
    .control-group select,
    .primary-btn {
      font-size: 0.85rem !important;
      padding: 8px 10px !important;
    }
  
    /* VIP Modal sa Maliit na Screen */
    .modal-card {
      width: 95% !important;
      padding: 16px !important;
    }
  
    .gcash-qr-img {
      width: 140px !important;
      height: 140px !important;
    }
  }
  
  @media screen and (max-width: 380px) {
    /* Extra-small mobile screens */
    .desk-sheet {
      zoom: 0.31;
      margin: 0 auto !important;
    }
  }

  /* ====================================================
   MOBILE PRINT OVERRIDE PARA SA CORPORATE (DESK TENT)
   ==================================================== */
@media print and (max-width: 1024px) {
  .desk-sheet {
    zoom: 1 !important; /* Tanggalin ang screen preview zoom */
    width: 297mm !important;
    height: 206mm !important; /* Binawasan ng 4mm para hindi lumagpas sa 210mm A4 boundary */
    max-height: 206mm !important;
    padding: 8mm 8mm 3mm 8mm !important;
    overflow: hidden !important;
  }

  .desk-footer {
    padding-top: 0 !important;
  }
}