/* Wrapper */
#pay-calendar-wrapper {
  max-width: 700px;
  margin: 0 auto;
  font-family: Arial, sans-serif;
}

/* Navigation buttons */
.calendar-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.calendar-nav button {
  padding: 6px 12px;
  background: #f2f2f2;
  border: 1px solid #b7b7b7;
  cursor: pointer;
  font-size: 14px;
  border-radius: 4px;
}

.calendar-nav button:hover {
  background: #e0e0e0;
}

/* Calendar table */
.calendar {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.calendar th {
  background: #e0e0e0;
  padding: 6px;
  text-align: center;
  font-weight: bold;
  border: 1px solid #ffffff;
}

.calendar td {
  height: 70px;
  text-align: center;
  vertical-align: middle;
  border: 1px solid #f0f0f0;
  font-size: 16px;
  position: relative;
  padding: 0;
  box-sizing: border-box;
  overflow: hidden;
}

/* === Χρώματα κελιών === */

/* Εργάσιμη ημέρα */
.working {
  background: #C6E0B4 !important;
  color: #0b3a12;
}

/* Σαββατοκύριακο – μη εργάσιμη (όπως πριν) */
.non-working {
  background: #BEBEBE !important;
  color: #333;
}

/* Αργίες: πάντα μωβ background (όπως ζήτησες) */
.holiday {
  background: #C9A4E4 !important;
  /* κείμενο της αργίας: λεπτό και σκούρο μπορντο */
  color: #5b0b0b;
}

/* Όνομα αργίας: λεπτό, μικρό και σκούρο μπορντο */
.holiday-name {
  display: block;
  margin-top: 4px;
  font-size: 0.66rem;
  font-weight: 300; /* λεπτό */
  color: #5b0b0b;
  line-height: 1.1;
}

/* === Κανονική ημέρα καταβολής (μονή) === */
.payment-day {
  background: #FFFF00 !important; /* κίτρινο */
  border: 2px solid #e6b800 !important;
  font-weight: bold;
  position: relative;
}

/* € κάτω δεξιά σε κύκλο (μονή) */
.payment-day .euro {
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  background: white;
  border-radius: 50%;
  border: 1px solid #999;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
  color: #000;
}

/* === Πολλαπλή καταβολή: κίτρινο με hatch/γραμμοσκίαση === */
.payment-multi {
  /* κρατάμε το κίτρινο ως βάση (όπως payment-day) και προσθέτουμε subtle stripes */
  background-color: #FFFF00 !important;
  border: 2px solid #e6b800 !important;
  position: relative;
  font-weight: bold;
  color: #000;
  /* subtle diagonal stripes πάνω από το κίτρινο */
  background-image:
    repeating-linear-gradient(
      135deg,
      rgba(0,0,0,0.03) 0,
      rgba(0,0,0,0.03) 6px,
      rgba(255,255,255,0.00) 6px,
      rgba(255,255,255,0.00) 12px
    );
}

/* Δύο € σε κύκλους, στοιχισμένα δεξιά (για payment-multi) */
.payment-multi .euro {
  position: absolute;
  bottom: 4px;
  right: 6px;
  display: inline-flex;
  gap: 4px;
  align-items: center;
}

/* κάθε κύκλος € */
.payment-multi .euro span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid #999;
  font-weight: 700;
  color: #b36b00; /* σκούρο χρυσό/πορτοκαλί για αντίθεση */
  font-size: 12px;
}

/* Αν υπάρχει και αργία μέσα σε payment-multi ή payment-day, εμφανίζουμε και το όνομα αργίας */
.payment-multi .holiday-name,
.payment-day .holiday-name {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  font-weight: 300;
  color: #5b0b0b;
}

/* Tooltip cursor */
.calendar td[title] { cursor: help; }

/* ===== Legend ===== */
#calendar-legend {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  font-size: 14px;
}

#calendar-legend .legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.legend-box {
  width: 18px;
  height: 18px;
  border: 1px solid #999;
  border-radius: 3px;
}

/* Χρώματα legend ίδια με τα κελιά (όπως είχες) */
.legend-box.working { background: #C6E0B4; }
.legend-box.non-working { background: #BEBEBE; }
.legend-box.holiday { background: #C9A4E4; }
.legend-box.payment-day { background: #FFFF00; border: 2px solid #e6b800; }
.legend-box.payment-multi {
  background-color: #FFFF00;
  background-image:
    repeating-linear-gradient(
      135deg,
      rgba(0,0,0,0.03) 0,
      rgba(0,0,0,0.03) 6px,
      rgba(255,255,255,0.00) 6px,
      rgba(255,255,255,0.00) 12px
    );
  border: 2px solid #e6b800;
}

/* Responsive: μικρότερες οθόνες */
@media (max-width: 480px) {
  .calendar td { height: 56px; font-size: 14px; padding: 4px; }
  .payment-day .euro, .payment-multi .euro span { width: 18px; height: 18px; font-size: 11px; }
  .holiday-name { font-size: 11px; }
}