/* ============================================================
 * OPERA v2 — opera-datepicker.css v1.34.4
 * Stile coerente con popup e form OPERA
 * ============================================================ */

.opera-datepicker-input {
  cursor: pointer;
  background-color: #fff;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2' ry='2'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 36px;
}

.opera-datepicker-input:focus {
  outline: 2px solid #3b82f6;
  outline-offset: 1px;
  border-color: #3b82f6;
}

/* ----- Popup container ----- */
.opera-datepicker-popup {
  position: absolute;
  z-index: 10000;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  padding: 12px;
  font-family: inherit;
  font-size: 14px;
  color: #1f2937;
  width: 320px;
  user-select: none;
}

/* ----- Header (mese/anno + navigazione) ----- */
.odp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.odp-title {
  font-weight: 600;
  font-size: 15px;
  color: #1f2937;
}

.odp-nav {
  background: none;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  width: 32px;
  height: 32px;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  color: #4b5563;
  transition: background-color 0.15s;
  padding: 0;
}

.odp-nav:hover {
  background-color: #f3f4f6;
  border-color: #d1d5db;
}

.odp-nav:active {
  background-color: #e5e7eb;
}

/* ----- Header colonne (W lu ma me gi ve sa do) ----- */
.odp-cols {
  display: grid;
  grid-template-columns: 32px repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 4px;
  font-size: 11px;
  color: #6b7280;
  font-weight: 600;
  text-transform: uppercase;
}

/* Quando settimane disabilitate, prima colonna sparisce */
.opera-datepicker-popup:not(:has(.odp-week-num)) .odp-cols {
  grid-template-columns: repeat(7, 1fr);
}
.opera-datepicker-popup:not(:has(.odp-week-num)) .odp-grid {
  grid-template-columns: repeat(7, 1fr);
}

.odp-col-w {
  text-align: center;
  color: #9ca3af;
  font-size: 10px;
}

.odp-col-d {
  text-align: center;
}

/* ----- Griglia giorni ----- */
.odp-grid {
  display: grid;
  grid-template-columns: 32px repeat(7, 1fr);
  gap: 2px;
}

.odp-week-num {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: #9ca3af;
  font-weight: 600;
  background-color: #f9fafb;
  border-radius: 4px;
  height: 36px;
  cursor: default;
}

.odp-day {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  border: none;
  background: none;
  border-radius: 6px;
  font-size: 13px;
  color: #1f2937;
  cursor: pointer;
  transition: background-color 0.12s, color 0.12s;
  padding: 0;
}

.odp-day:hover:not(.odp-day-disabled):not(.odp-day-selected) {
  background-color: #f3f4f6;
}

.odp-day-other {
  color: #d1d5db;
}

.odp-day-today {
  font-weight: 700;
  color: #2563eb;
}

.odp-day-today.odp-day-other {
  color: #93c5fd;
}

.odp-day-selected {
  background-color: #2563eb;
  color: #fff;
  font-weight: 600;
}

.odp-day-selected:hover {
  background-color: #1d4ed8;
}

.odp-day-disabled {
  color: #e5e7eb;
  cursor: not-allowed;
}

/* ----- Footer ----- */
.odp-footer {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #e5e7eb;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.odp-btn {
  border: none;
  background: none;
  color: #2563eb;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background-color 0.15s;
}

.odp-btn:hover {
  background-color: #eff6ff;
}

.odp-btn-clear {
  color: #6b7280;
}

.odp-btn-clear:hover {
  background-color: #f3f4f6;
  color: #4b5563;
}

/* ----- Responsive iPad ----- */
@media (max-width: 640px) {
  .opera-datepicker-popup {
    width: 100%;
    max-width: 360px;
  }
  .odp-day {
    height: 40px;
    font-size: 14px;
  }
  .odp-week-num {
    height: 40px;
  }
}