.period-picker{background:var(--surface);border:1px solid var(--border);border-radius:12px;flex-wrap:wrap;align-items:flex-end;gap:12px;margin:12px 0;padding:16px;display:flex}.period-picker label,.calendar-field{color:var(--label-fg);flex-direction:column;gap:6px;font-size:13px;display:flex}.period-picker input,.period-picker select,.calendar-trigger{min-height:40px;color-scheme:inherit}.period-picker>label>input{max-width:140px}.period-picker small{color:var(--app-fg-muted);flex-basis:100%;font-size:12px}.period-picker [role=alert]{color:var(--error-fg)}.calendar-field{position:relative}.calendar-trigger{text-align:left;background:var(--input-bg);justify-content:space-between;align-items:center;gap:24px;min-width:170px;display:flex}.calendar-popover{z-index:50;background:var(--surface);border:1px solid var(--border-strong);width:296px;max-width:calc(100vw - 64px);box-shadow:0 12px 36px var(--shadow-elevated);border-radius:12px;padding:14px;position:absolute;top:calc(100% + 8px);left:0}.calendar-heading{justify-content:space-between;align-items:center;gap:6px;margin-bottom:14px;display:flex}.calendar-heading input{text-align:center;width:80px;padding:5px!important}.calendar-heading button{padding:4px 10px;font-size:22px}.calendar-months,.calendar-days{gap:4px;display:grid}.calendar-months{grid-template-columns:repeat(3,1fr)}.calendar-days{grid-template-columns:repeat(7,1fr)}.calendar-popover .calendar-days button,.calendar-popover .calendar-months button{background:0 0;border-color:#0000;min-width:0;min-height:34px;padding:8px 0;font-size:13px}.calendar-popover button[aria-pressed=true]{color:#fff;background:#5855db;border-color:#818cf8}.calendar-popover button[aria-current=date]{box-shadow:inset 0 0 0 1px #818cf8}.calendar-popover button:hover:not(:disabled):not([aria-pressed=true]){background:var(--btn-hover)}.calendar-weekday{text-align:center;color:var(--app-fg-muted);padding:5px 0;font-size:11px}.calendar-popover .calendar-today{width:100%;margin-top:12px;font-size:13px}@media (width<=600px){.period-picker,.period-picker>label,.calendar-field,.calendar-trigger{width:100%}}.page-header .inline-controls .calendar-popover button{flex:none;min-width:0}.calendar-heading input{flex:0 0 80px}.calendar-heading>span{white-space:nowrap}