/* Seletor de período — compartilhado /pay e /secret/dash */
.apex-period-toolbar{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.apex-period{
  position:relative;
  display:inline-flex;
  flex-direction:column;
  align-items:stretch;
}

.apex-period-btn{
  height:36px;
  min-width:148px;
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:0 12px 0 14px;
  border:1px solid var(--border, #27272a);
  border-radius:10px;
  background:var(--surface, #18181b);
  color:var(--text, #fafafa);
  font-size:13px;
  font-weight:500;
  cursor:pointer;
  transition:border-color .15s, background .15s;
}
.apex-period-btn:hover{border-color:var(--aure, #30FF00)}
.apex-period-btn[aria-expanded="true"]{
  border-color:var(--aure, #30FF00);
  box-shadow:0 0 0 1px rgba(48,255,0,.18);
}

.apex-period-chevron{
  width:16px;
  height:16px;
  stroke:currentColor;
  stroke-width:2;
  fill:none;
  flex-shrink:0;
  opacity:.7;
  transition:transform .15s;
}
.apex-period-btn[aria-expanded="true"] .apex-period-chevron{transform:rotate(180deg)}

.apex-period-menu{
  position:absolute;
  top:calc(100% + 6px);
  right:0;
  min-width:196px;
  padding:6px;
  border:1px solid var(--border, #27272a);
  border-radius:12px;
  background:var(--card, #111114);
  box-shadow:0 16px 40px rgba(0,0,0,.35);
  z-index:40;
}
.apex-period-menu[hidden]{display:none}

.apex-period-option{
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:var(--text-soft, #d4d4d8);
  font-size:13px;
  font-weight:500;
  text-align:left;
  cursor:pointer;
}
.apex-period-option:hover{background:var(--surface-hover, rgba(255,255,255,.06))}
.apex-period-option.is-active{
  background:var(--aure-soft, rgba(48,255,0,.12));
  color:var(--aure, #30FF00);
}

.apex-period-check{
  width:16px;
  display:inline-flex;
  justify-content:center;
  font-size:12px;
  opacity:0;
}
.apex-period-option.is-active .apex-period-check{opacity:1}

.apex-period-custom{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:8px;
  flex-wrap:wrap;
}
.apex-period-custom[hidden]{display:none}
.apex-period-custom input[type=date]{
  height:34px;
  padding:0 10px;
  border:1px solid var(--border, #27272a);
  border-radius:8px;
  background:var(--input-bg, #09090b);
  color:var(--text, #fafafa);
  font-size:12px;
}

html.light .apex-period-btn{
  background:var(--surface, #fff);
  color:var(--text-strong, #18181b);
}
html.light .apex-period-menu{
  background:var(--card, #fff);
  box-shadow:0 16px 40px rgba(0,0,0,.12);
}

.apex-period-toolbar .date-pill,
.apex-period-toolbar .refresh-pill{
  height:36px;
  display:flex;
  align-items:center;
  gap:8px;
  border:1px solid var(--border, #27272a);
  background:var(--surface, #18181b);
  border-radius:999px;
  padding:0 14px;
  color:var(--text-soft, #d4d4d8);
  font-size:13px;
  font-weight:500;
}
.apex-period-toolbar .refresh-pill{cursor:pointer;border:0;background:var(--surface-2, #18181b)}
.apex-period-toolbar .refresh-pill .dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--aure, #30FF00);
  box-shadow:0 0 0 4px rgba(48,255,0,.14);
  flex-shrink:0;
}