/* ══════════════════════════════════════════════════════
   GTQDatePanel — stili riutilizzabili
   Includi in qualsiasi pagina che usa datepanel.js
   ══════════════════════════════════════════════════════ */

/* ── Layout pannello ─────────────────────────────────── */
.gtq-dp { display: flex; flex-direction: column; gap: 5px; }

.gtq-dp-row {
  display: flex; align-items: center; gap: 6px;
  flex-wrap: wrap; row-gap: 5px;
}

/* Lato data: label + [◄ data ►] sempre insieme */
.gtq-dp-date-side { display: flex; align-items: center; gap: 3px; flex-shrink: 0; }

.gtq-dp-field-lbl {
  font-size: 11px; font-weight: 700; color: var(--text2, #94a3b8);
  text-transform: uppercase; letter-spacing: .05em;
  width: 22px; flex-shrink: 0; text-align: right; padding-right: 4px;
}

/* ── Gruppo [◄ data ►] — button group ───────────────── */
.gtq-dp-date-grp { display: flex; align-items: center; }

/* Display data (cliccabile) */
.gtq-dp-date-val {
  font-size: 12px; font-weight: 600; color: var(--text, #f1f5f9);
  background: var(--bg2, var(--bg, #0f172a));
  border: 1px solid var(--border2, rgba(255,255,255,.1));
  border-radius: 0; padding: 0 7px;
  height: 24px; display: flex; align-items: center; justify-content: center;
  min-width: 108px;
  user-select: none; cursor: pointer; position: relative;
  margin-left: -1px; margin-right: -1px;
  transition: border-color .12s, background .12s;
}
.gtq-dp-date-val:hover {
  border-color: var(--orange, #16a34a);
  background: var(--surface, #1e293b);
  z-index: 1;
}

/* Frecce data (±1gg / Ctrl ±7gg) */
.gtq-dp-date-nav {
  width: 20px; height: 24px; padding: 0;
  background: none; border: 1px solid var(--border2, rgba(255,255,255,.1));
  border-radius: 0; color: var(--orange, #16a34a);
  font-size: 11px; line-height: 1; cursor: pointer; flex-shrink: 0;
  position: relative;
  transition: background .12s, color .12s, border-color .12s;
}
.gtq-dp-date-nav:hover {
  background: var(--orange, #16a34a);
  color: #fff;
  border-color: var(--orange, #16a34a);
  z-index: 1;
}
/* Angoli esterni arrotondati */
.gtq-dp-date-grp .gtq-dp-date-nav:first-child { border-radius: 4px 0 0 4px; }
.gtq-dp-date-grp .gtq-dp-date-nav:last-child  { border-radius: 0 4px 4px 0; }

/* ── Gruppi periodo ──────────────────────────────────── */
.gtq-dp-periods { display: flex; gap: 4px; flex-shrink: 0; }
.gtq-dp-period-grp { display: flex; align-items: center; }

/* Frecce periodo — button group */
.gtq-dp-p-nav {
  width: 16px; height: 22px; padding: 0;
  background: none; border: 1px solid var(--border2, rgba(255,255,255,.15));
  border-radius: 0; color: var(--orange, #16a34a); font-size: 10px; line-height: 1;
  cursor: pointer; flex-shrink: 0; position: relative;
  transition: color .12s, background .12s;
}
.gtq-dp-p-nav:hover {
  background: var(--orange, #16a34a);
  color: #fff;
  z-index: 1;
}

/* Label periodo */
.gtq-dp-p-label {
  width: 42px; height: 22px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: #fff;
  border: 1px solid var(--border2, rgba(255,255,255,.15));
  border-radius: 0; color: var(--orange, #16a34a);
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; cursor: pointer; white-space: nowrap;
  position: relative; margin-left: -1px; margin-right: -1px;
  transition: background .12s, color .12s;
}
.gtq-dp-p-label:hover {
  background: var(--orange, #16a34a);
  color: #fff;
  z-index: 1;
}
.gtq-dp-p-label.active {
  background: var(--orange, #16a34a);
  border-color: var(--orange, #16a34a);
  color: #fff; z-index: 1;
}
/* Angoli esterni arrotondati */
.gtq-dp-period-grp .gtq-dp-p-nav:first-child { border-radius: 4px 0 0 4px; }
.gtq-dp-period-grp .gtq-dp-p-nav:last-child  { border-radius: 0 4px 4px 0; }

/* ── Popup calendario ────────────────────────────────── */
.gtq-cal {
  position: fixed; z-index: 9999;
  display: none;
  background: #0f172a;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px; padding: 10px;
  box-shadow: 0 16px 40px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.04);
  width: 224px;
  animation: gtq-cal-in .14s ease both;
}
.gtq-cal.open { display: block; }
@keyframes gtq-cal-in {
  from { opacity:0; transform: translateY(-4px) scale(.97); }
  to   { opacity:1; transform: none; }
}

.gtq-cal-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.gtq-cal-title {
  font-size: 12px; font-weight: 700; color: #f1f5f9;
  text-transform: capitalize; text-align: center; flex: 1;
}
.gtq-cal-nav {
  width: 24px; height: 24px; padding: 0;
  background: none; border: 1px solid rgba(255,255,255,.12);
  border-radius: 5px; color: #94a3b8;
  font-size: 11px; cursor: pointer; flex-shrink: 0;
  transition: border-color .12s, color .12s, background .12s;
}
.gtq-cal-nav:hover {
  border-color: rgba(255,255,255,.3); color: #fff;
  background: rgba(255,255,255,.06);
}

/* Griglia 7 colonne per intestazione e giorni */
.gtq-cal-dow-row,
.gtq-cal-days {
  display: grid; grid-template-columns: repeat(7, 1fr);
}

.gtq-cal-dow {
  font-size: 9px; font-weight: 700;
  color: rgba(255,255,255,.3); text-align: center;
  padding: 3px 0 5px; text-transform: uppercase;
}

.gtq-cal-day {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: rgba(255,255,255,.7);
  border-radius: 4px; cursor: pointer;
  transition: background .1s, color .1s;
}
.gtq-cal-day:empty { cursor: default; pointer-events: none; }
.gtq-cal-day:not(:empty):hover { background: rgba(255,255,255,.1); color: #fff; }
.gtq-cal-day.today { color: #f59e0b; font-weight: 700; }
.gtq-cal-day.selected {
  background: var(--orange, #16a34a); color: #fff; font-weight: 700;
}
.gtq-cal-day.selected:hover { background: var(--orange-dk, #15803d); }