@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

body {
  background-color: #ffd6e8;
  background-image: radial-gradient(#ffb3c6 1.5px, transparent 1.5px);
  background-size: 18px 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
  font-family: 'Press Start 2P', cursive;
  box-sizing: border-box;
}

.calendar-card {
  background: #ffe6ed;
  border: 4px solid #ffb3c6;
  border-radius: 24px;
  padding: 16px;
  width: 95%;
  max-width: 440px;
  box-shadow: inset 3px 3px 0px #ffffff, inset -3px -3px 0px #ff8da1, 0 10px 30px rgba(255, 179, 193, 0.5);
  position: relative;
}

.hidden { display: none !important; }

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.calendar-header h1 {
  font-size: 8px;
  color: #800033;
  margin: 0;
  text-align: center;
}

.nav-btn, .back-btn {
  background: #ffffff;
  border: 2px solid #ff8da1;
  border-radius: 8px;
  color: #ff4d79;
  font-family: inherit;
  font-size: 8px;
  padding: 4px 8px;
  cursor: pointer;
}

.back-btn {
  background: #ff527b;
  color: white;
  border-color: #ff0055;
}

.weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: 7px;
  color: #ff0055;
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 2px dashed #ffb3c6;
}

.days-grid, .week-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.day-cell {
  background: #ffffff;
  border: 2px solid #ffd1dc;
  border-radius: 8px;
  padding: 4px 2px;
  font-size: 8px;
  color: #800033;
  cursor: pointer;
  min-height: 48px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.day-cell.empty { background: transparent; border: none; cursor: default; }

.day-cell.today {
  border-color: #ff0055;
  box-shadow: 0 0 5px rgba(255, 0, 85, 0.4);
}

/* Colored Event Tags in Month & Week Views */
.event-tag-container {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 3px;
}

.event-tag {
  font-size: 5px;
  padding: 2px 3px;
  border-radius: 4px;
  color: #40001a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: sans-serif;
  font-weight: bold;
}

/* CollaNote Toolbar & Tools */
.collanote-tools {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
  justify-content: space-between;
}

.tool-btn {
  background: #fff;
  border: 2px solid #ffb3c6;
  border-radius: 8px;
  font-family: inherit;
  font-size: 6px;
  padding: 4px 6px;
  cursor: pointer;
}

.tool-btn.active { background: #ff8da1; color: white; border-color: #ff0055; }
.clear-btn { background: #ffe0e0; }

.sticker-drawer {
  background: white;
  border: 2px solid #ff8da1;
  border-radius: 10px;
  padding: 6px;
  display: flex;
  gap: 8px;
  font-size: 14px;
  margin-bottom: 8px;
  justify-content: center;
}

.sticker-drawer span { cursor: pointer; transition: transform 0.1s; }
.sticker-drawer span:hover { transform: scale(1.3); }

/* Drawing Canvas & Page Stack */
.planner-page-container {
  position: relative;
  height: 300px;
}

#draw-canvas {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 10;
  pointer-events: none;
}

#draw-canvas.drawing-active {
  pointer-events: auto;
  cursor: crosshair;
}

.hourly-timeline {
  height: 100%;
  overflow-y: auto;
  border: 2px solid #ffb3c6;
  border-radius: 12px;
  background: #ffffff;
  padding: 4px;
}

.time-row {
  display: flex;
  align-items: center;
  border-bottom: 1px dashed #ffe6ed;
  min-height: 34px;
  cursor: pointer;
}

.time-label {
  width: 65px;
  font-size: 6px;
  color: #ff4d79;
  font-weight: bold;
}

.time-content {
  flex-grow: 1;
  font-size: 7px;
  color: #800033;
}

.time-content.has-event {
  border-radius: 6px;
  padding: 4px;
  font-weight: bold;
  border: 1px solid rgba(0,0,0,0.1);
}

/* Modal Styling */
.modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100;
}

.modal-card {
  background: #fff0f5;
  border: 4px solid #ff8da1;
  border-radius: 18px;
  padding: 16px;
  width: 80%;
  max-width: 280px;
  text-align: center;
}

.modal-card h2 { font-size: 8px; color: #800033; margin-top: 0; }

.modal-card input {
  width: 88%;
  padding: 8px;
  border: 2px solid #ffb3c6;
  border-radius: 8px;
  font-family: inherit;
  font-size: 7px;
  margin-bottom: 10px;
  outline: none;
}

.color-picker-label { font-size: 6px; color: #800033; margin-bottom: 6px; }

.color-options {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 12px;
}

.color-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
}

.color-dot.active { border-color: #ff0055; transform: scale(1.1); }
.color-pink { background-color: #ffb3c6; }
.color-purple { background-color: #d8b4fe; }
.color-blue { background-color: #a5f3fc; }
.color-yellow { background-color: #fef08a; }
.color-green { background-color: #bbf7d0; }

.modal-actions { display: flex; justify-content: space-between; gap: 6px; }

.modal-btn {
  font-family: inherit;
  font-size: 6px;
  padding: 6px 8px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
}

.save-btn { background: #ff527b; color: white; }
.delete-btn-modal { background: #ff3333; color: white; }
.close-btn { background: #cccccc; color: #333333; }