/* Calendário compartilhado (js/gulp-datepicker.js) — mesmo desenho do
   calendário do Almoxarifado (.almox-datepicker), que é o padrão escuro do
   painel: popup em vidro sobre var(--panel), dia escolhido em pílula
   dourada 3D. Sem backdrop-filter em nada disso, de propósito: o fundo
   aqui é opaco e esse bug (texto borrado no WebView do Android) já pegou
   este projeto três vezes. */

.gulp-datepicker{
  position:fixed;
  z-index:500;
  width:264px;
  padding:14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,0.12);
  background:
    radial-gradient(130% 75% at 14% -12%, rgba(255,255,255,0.10), rgba(255,255,255,0) 55%),
    linear-gradient(165deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.012) 45%, rgba(255,255,255,0.015) 100%),
    var(--panel);
  box-shadow:0 24px 48px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.08);
  font-family:'Inter', sans-serif;
}
.gulp-datepicker.hidden{ display:none; }
.gulp-datepicker-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
}
.gulp-datepicker-title{
  font-family:'Oswald', sans-serif;
  font-size:13px;
  font-weight:600;
  letter-spacing:0.03em;
  text-transform:uppercase;
  color:var(--text);
}
.gulp-datepicker-nav{
  width:28px;
  height:28px;
  border-radius:8px;
  border:1px solid var(--line);
  background:var(--panel-2);
  color:var(--text-dim);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  line-height:1;
}
.gulp-datepicker-nav:hover{ border-color:var(--accent); color:var(--accent); }
.gulp-datepicker-weekdays{
  display:grid;
  grid-template-columns:repeat(7, 1fr);
  margin-bottom:4px;
}
.gulp-datepicker-weekdays span{
  text-align:center;
  font-size:10.5px;
  color:var(--text-faint);
  text-transform:uppercase;
  letter-spacing:0.05em;
}
.gulp-datepicker-grid{
  display:grid;
  grid-template-columns:repeat(7, 1fr);
  gap:2px;
}
.gulp-datepicker-day{
  height:32px;
  border:none;
  border-radius:8px;
  background:transparent;
  color:var(--text);
  font-family:'Inter', sans-serif;
  font-size:12.5px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.gulp-datepicker-day:hover{ background:var(--panel-2); }
.gulp-datepicker-day--outside{ color:var(--text-faint); opacity:0.5; }
/* Dia de hoje e dia escolhido usam a MESMA pílula dourada; quem garante que
   só um fica aceso por vez é o JS (ver desenhar()), não o CSS. */
.gulp-datepicker-day--today,
.gulp-datepicker-day--selected{
  border-radius:999px;
  color:#151a1f;
  font-weight:700;
  background:linear-gradient(160deg, #ffe066 0%, #f2b705 55%, #c89100 100%);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.65),
    inset 0 -5px 7px -3px rgba(120,80,0,0.35),
    0 2px 4px rgba(0,0,0,0.35),
    0 6px 12px -4px rgba(242,183,5,0.45),
    0 10px 18px -10px rgba(0,0,0,0.6);
  transform:translateY(-1px);
}
.gulp-datepicker-day--today:hover,
.gulp-datepicker-day--selected:hover{ background:linear-gradient(160deg, #ffe066 0%, #f2b705 55%, #c89100 100%); }
.gulp-datepicker-day:disabled{ cursor:default; }
.gulp-datepicker-foot{
  display:flex;
  justify-content:space-between;
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid var(--line);
}
.gulp-datepicker-today,
.gulp-datepicker-clear{
  border:1px solid var(--line);
  background:var(--panel-2);
  color:var(--text-dim);
  border-radius:8px;
  padding:6px 10px;
  font-size:11.5px;
  cursor:pointer;
  font-family:'JetBrains Mono', monospace;
}
.gulp-datepicker-today:hover,
.gulp-datepicker-clear:hover{ border-color:var(--accent); color:var(--accent); }

/* O campo em si: ícone de calendário à direita, como no Almoxarifado. */
.gulp-date-input{
  cursor:text;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C636E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 10h18'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position: right 8px center;
  background-size:14px 14px;
  padding-right:28px;
}