/* =====================================================
   PICKER (estilo iOS)
===================================================== */
:root{
  --picker-bg:#fff;
  --picker-ink:#0f172a;
  --picker-ink-2:#64748b;
  --picker-brand: #0ea5e9;
  --picker-line:#e2e8f0;
  --picker-radius:16px;
  --picker-shadow:0 8px 18px rgba(15,23,42,.06);
  --picker-row-h:44px;
  --primary-600: #0284c7; /* tom mais escuro, usado no estado ativo */
}


.picker{
  position:relative;
  display:grid;
  grid-auto-flow:column;
  gap:8px;
  background:var(--picker-bg);
  border:1px solid var(--picker-line);
  border-radius:var(--picker-radius);
  box-shadow:var(--picker-shadow);
  padding:8px;
  min-height:calc(var(--picker-row-h) * 5 + 16px);
  overflow:hidden;
}

/* colunas */
.picker__col{
  position:relative;
  width:100%;
  max-height:calc(var(--picker-row-h) * 5);
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:y mandatory;
  padding:calc(var(--picker-row-h) * 2) 0;
}
/* esconder scrollbars */
.picker__col::-webkit-scrollbar{ width:0; height:0; }
.picker__col{ scrollbar-width:none; }

/* itens */
.picker__item{
  height:var(--picker-row-h);
  display:flex; align-items:center; justify-content:center;
  width:100%;
  background:transparent; border:0;
  font-size:1.05rem;
  color:var(--picker-ink-2);
  scroll-snap-align:center;
  transition:all .15s ease;
}

/* estado selecionado (sem aria) */
.picker__item.is-selected{
  color:var(--primary-600,var(--picker-brand));
  font-weight:800;
  background: color-mix(in srgb, var(--primary-600, var(--picker-brand)) 18%, transparent);
  border-radius:10px;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--primary-600, var(--picker-brand)) 60%, transparent);
  transform:none;             /* evita “saltar” com scale */
}

.picker__item:not(.is-selected){ opacity:.55; }

/* 1) Sem a janela central */
.picker::before { content: none; }

/* 2) Respiro lateral para os itens (recomendado p/ não saltar layout) */
.picker__item { 
  border-radius: 12px;         /* suaviza todos */
}

/* separadores entre colunas */
.picker[data-columns="2"] .picker__col:not(:last-child),
.picker[data-columns="3"] .picker__col:not(:last-child),
.picker[data-columns="4"] .picker__col:not(:last-child){
  border-right:1px dashed rgba(2,6,23,.06);
}

/* toolbar opcional */
.picker-toolbar{
  display:flex; justify-content:space-between; align-items:center;
  padding:8px 2px; margin-top:8px;
}

/* ====================================== */
/* Picker dialog (overlay + bottom sheet) */
/* ====================================== */
.picker-dialog[hidden]{ display:none; }
.picker-dialog{ position:fixed; inset:0; z-index:1200; pointer-events:none; }
.picker-dialog.is-open{ pointer-events:auto; }
.picker-dialog__backdrop{
  position:absolute; inset:0; background:rgba(2,6,23,.0); transition:background .28s ease;
}
.picker-dialog.is-open .picker-dialog__backdrop{ background:rgba(2,6,23,.45); }
:root[data-theme="dark"] .picker-dialog.is-open .picker-dialog__backdrop{ background:rgba(255,255,255,.10); }

.picker-dialog__sheet{
  position:absolute; left:0; right:0; bottom:0;
  max-width:520px; margin:0 auto;
  background:var(--surface,#fff);
  border-top-left-radius:16px; border-top-right-radius:16px;
  border:1px solid var(--border-soft,#e5e7eb);
  box-shadow:0 -10px 30px rgba(15,23,42,.25);
  padding:10px 12px calc(12px + env(safe-area-inset-bottom));
  transform:translateY(12px); opacity:0;
  transition:transform .28s cubic-bezier(.22,.61,.36,1), opacity .2s ease;
}
.picker-dialog.is-open .picker-dialog__sheet{ transform:translateY(0); opacity:1; }
.picker-dialog__toolbar{ display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:8px; }

/* =====================================================
   DATEPICKER (3 colunas)
===================================================== */
.datepicker-dialog[hidden]{ display:none; }
.datepicker-dialog{ position:fixed; inset:0; z-index:1200; pointer-events:none; }
.datepicker-dialog.is-open{ pointer-events:auto; }

.datepicker-dialog__backdrop{
  position:absolute; inset:0;
  background:rgba(2,6,23,.0); transition:background .28s ease;
}
.datepicker-dialog.is-open .datepicker-dialog__backdrop{ background:rgba(2,6,23,.45); }

.datepicker-dialog__sheet{
  position:absolute; left:0; right:0; bottom:0;
  max-width:560px; margin:0 auto;
  background:#fff; color:#0f172a;
  border-top-left-radius:16px; border-top-right-radius:16px;
  border:1px solid #e5e7eb;
  padding:10px 12px calc(14px + env(safe-area-inset-bottom));
  box-shadow:0 -10px 30px rgba(15,23,42,.25);
  transform:translateY(12px); opacity:0;
  transition:transform .28s cubic-bezier(.22,.61,.36,1), opacity .2s ease;
}
.datepicker-dialog.is-open .datepicker-dialog__sheet{ transform:translateY(0); opacity:1; }

.datepicker-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; }
.datepicker-toolbar strong{ flex:1; text-align:center; }

/* botões */
.dp-btn{ appearance:none; border:0; background:transparent; padding:8px 10px; border-radius:10px; }
.dp-btn--primary{ background:#111827; color:#fff; }
.dp-btn--ghost{ color:#111827; }

/* grelha */
.datepicker{
  position:relative;
  display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px;
  height:220px;
}
.datepicker__col{
  position:relative; overflow:auto; height:100%;
  scroll-snap-type:y mandatory;
  scrollbar-width:none;                 /* esconde (Firefox) */
  border:1px solid #e5e7eb; border-radius:12px;
  background:#f8fafc;
  z-index:2;                            /* itens acima da janela central */
}
/* esconde (WebKit/Chromium) */
.datepicker__col::-webkit-scrollbar{ width:0; height:0; }

/* itens */
.datepicker__item{
  height:44px; line-height:44px;
  text-align:center; font-size:16px;
  scroll-snap-align:center;
  color:#64748b; opacity:.7;
  transition:color .15s ease, font-weight .15s ease, opacity .15s ease,
             background .12s ease, transform .12s ease, box-shadow .12s ease;
  border-radius:12px;
}

/* >>> “pill” com aro (igual ao do select) */
.datepicker__item.is-active{
  color:#0f172a; font-weight:800; opacity:1;
  background:color-mix(in srgb, var(--primary-600,#0284c7) 14%, transparent);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--primary-600,#0284c7) 65%, #ffffff);
  transform:scale(1.04);
}

/* janela central — sem bordas para não criar “riscos” */
.datepicker__window{
  pointer-events:none;
  position:absolute; left:0; right:0; top:50%;
  transform:translateY(-50%);
  height:44px;
  z-index:1;
  background:transparent;   /* sem vidro nem linhas */
  border:none;              /* <-- remove as linhas escuras */
}

/* botão tipo select (trigger fora do modal) */
.dp-select{
  width:100%; text-align:left;
  appearance:none; border:1px solid #e5e7eb; border-radius:10px;
  padding:10px 12px; background:#fff;
}

/* ==================== Dark mode ==================== */
:root[data-theme="dark"] .picker-dialog.is-open .picker-dialog__backdrop{ background:rgba(255,255,255,.10); }
:root[data-theme="dark"] .datepicker-dialog__sheet{ background:#0b1220; color:#e5e7eb; border-color:#1f2937; }
:root[data-theme="dark"] .datepicker__col{ background:#0f172a; border-color:#1f2937; }
:root[data-theme="dark"] .datepicker__item{ color:#8aa1b8; opacity:.75; }
:root[data-theme="dark"] .datepicker__item.is-active{
  color:#e5e7eb;
  background:color-mix(in srgb, var(--primary-600,#60a5fa) 18%, transparent);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--primary-600,#60a5fa) 70%, #0b1220);
}
:root[data-theme="dark"] .datepicker__window{ background:transparent; border:none; }


/* Dark mode para o Picker (1 coluna) */
:root[data-theme="dark"] {
  /* herdamos as cores do tema global (main.css) */
  --picker-bg:   var(--surface);
  --picker-ink:  var(--ink-900);
  --picker-ink-2:var(--ink-500);
  --picker-line: var(--border-soft);
  --picker-shadow: var(--shadow-md); /* opcional */
  /* --primary-600 já vem do tema global e é usado no item ativo */
}

/* (opcional) reforçar contraste do selecionado em dark */
:root[data-theme="dark"] .picker__item.is-selected{
  background: color-mix(in srgb, var(--primary-600) 18%, transparent);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--primary-600) 60%, transparent);
}