/* =====================================================================
   Blog Automation – date range picker (js/daterange.js), same component as My Store Locator (controls.css, 15.10.2026).
   Blog Automation adaptations: no capital weekday labels (design rule), colours from tokens, dark-mode range, period button.
   ===================================================================== */
/* ===== date range picker (public/js/daterange.js): one calendar for start + end ===== */
.drp { position: absolute; z-index: 1200; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg, 14px); box-shadow: var(--shadow-lg); color: var(--text); }
.drp-in { display: flex; }
.drp-pre { display: flex; flex-direction: column; gap: 2px; padding: 12px 8px; border-right: 1px solid var(--border); min-width: 150px; }
.drp-pre button { text-align: left; border: 0; background: none; color: var(--text-2); font: inherit; font-size: var(--fs-sm); padding: 8px 12px; border-radius: 8px; cursor: pointer; white-space: nowrap; }
.drp-pre button:hover { background: var(--surface-2); color: var(--text); }
.drp-pre button.on { background: var(--accent-50); color: var(--accent-700); font-weight: 600; }
[data-mode="dark"] .drp-pre button.on { color: var(--text); }
.drp-cal { position: relative; padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 10px; }
.drp-nav { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; justify-content: space-between; pointer-events: none; }
.drp-nav .btn { pointer-events: auto; }
.drp-ms { display: flex; gap: 22px; }
.drp-m { width: 252px; }
.drp-mt { text-align: center; font-weight: 650; font-size: var(--fs-sm); height: 28px; line-height: 28px; margin-bottom: 6px; text-transform: capitalize; }
.drp-wd, .drp-g { display: grid; grid-template-columns: repeat(7, 36px); }
.drp-wd span { text-align: center; font-size: 11px; font-weight: 600; color: var(--text-3); padding: 4px 0; }
.drp-d { height: 36px; border: 0; background: none; font: inherit; font-size: var(--fs-sm); color: var(--text); cursor: pointer; border-radius: 0; position: relative; }
.drp-d:hover:not(:disabled) { background: var(--surface-2); border-radius: 8px; }
.drp-d:disabled { color: var(--text-3); opacity: .45; cursor: default; }
.drp-d.today { font-weight: 700; color: var(--accent-ink, var(--accent)); }
.drp-d.today::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: currentColor; }
.drp-d.in { background: var(--accent-50); border-radius: 0; }
.drp-d.start, .drp-d.end { background: var(--accent) !important; color: var(--accent-contrast) !important; border-radius: 8px; font-weight: 650; }
.drp-d.start.today::after, .drp-d.end.today::after { background: var(--accent-contrast); }
.drp-d:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 8px; }
.drp-foot { display: flex; align-items: center; gap: 8px; padding-top: 10px; border-top: 1px solid var(--border); }
.drp-sel { flex: 1; font-size: var(--fs-sm); color: var(--text-2); min-width: 0; }
.drp.sheet { position: fixed; left: 0; right: 0; bottom: 0; top: auto; border-radius: 18px 18px 0 0; max-height: 90vh; overflow-y: auto; }
.drp.sheet .drp-in { flex-direction: column; }
.drp.sheet .drp-pre { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--border); padding: 10px; min-width: 0; }
.drp.sheet .drp-pre button { flex: none; border: 1px solid var(--border); border-radius: 99px; padding: 6px 12px; }
.drp.sheet .drp-ms { justify-content: center; }
.drp.sheet .drp-m { width: min(100%, 322px); } .drp.sheet .drp-wd, .drp.sheet .drp-g { grid-template-columns: repeat(7, minmax(0, 1fr)); } .drp.sheet .drp-d { height: 42px; }
.drp.sheet .drp-foot { flex-wrap: wrap; } .drp.sheet .drp-sel { flex-basis: 100%; }
[data-mode="dark"] .drp-d.in { background: color-mix(in srgb, var(--accent) 22%, var(--surface)); }
[data-mode="dark"] .drp-d.today { color: var(--text); }
@media (prefers-reduced-motion: no-preference) { .drp { animation: dd-in .12s ease-out; } }

/* period button on Statistik (replaces the select): calendar icon, label, chevron */
.c-period { gap: 8px; min-width: 210px; justify-content: flex-start; }
.c-period .ico { width: 16px; height: 16px; color: var(--text-3); }
.c-period [data-pl] { flex: 1; text-align: left; white-space: nowrap; }
.c-period > .ico:last-child { transition: rotate .15s; }
.c-period[aria-expanded="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-100); }
.c-period[aria-expanded="true"] > .ico:last-child { rotate: 180deg; }