/* Shared period selector — one look for every date/period control across the
   admin dashboard + staff portal. Reuses the existing design tokens so it
   matches the legacy .period-toggle / .month-picker it replaces.
   Token fallbacks keep it self-contained on pages that don't define them. */

.period-sel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.period-sel__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 36px;
  padding: 0 8px;
  font-size: 16px;
  line-height: 1;
  color: var(--c-ink-2, #555);
  background: var(--c-paper, #faf9f6);
  border: 1px solid var(--c-edge, #E8E6E0);
  border-radius: var(--radius, 6px);
  cursor: pointer;
  transition: all .15s;
}
.period-sel__nav:hover:not(:disabled) {
  border-color: var(--c-brand, #F9B541);
  color: var(--c-ink, #1A1A1A);
}
.period-sel__nav:disabled { opacity: .4; cursor: default; }

.period-sel__picker {
  background: var(--c-paper, #faf9f6);
  border: 1px solid var(--c-edge, #E8E6E0);
  border-radius: var(--radius, 6px);
  font-family: var(--font, inherit);
  font-size: 13px;
  font-weight: 500;
  color: var(--c-ink, #1A1A1A);
  padding: 7px 10px;
  min-height: 36px;
  outline: none;
  cursor: pointer;
  line-height: 1.2;
}
.period-sel__picker:focus {
  border-color: var(--c-brand, #F9B541);
  box-shadow: 0 0 0 3px rgba(249, 181, 65, .18);
}
.period-sel__picker:disabled { opacity: .5; cursor: default; }

.period-sel__all {
  min-height: 36px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--c-ink-2, #555);
  font-family: var(--font, inherit);
  background: var(--c-paper, #faf9f6);
  border: 1px solid var(--c-edge, #E8E6E0);
  border-radius: var(--radius, 6px);
  cursor: pointer;
  white-space: nowrap;
  transition: all .15s;
}
.period-sel__all:hover { background: var(--c-paper-warm, #F7F4EB); color: var(--c-ink, #1A1A1A); }
/* Selected = warm tan wash (sidebar active treatment), not solid gold.
   Gold stays reserved for primary actions so the selected segment doesn't
   compete with CTAs. Fallbacks keep it working on pages without the tokens. */
.period-sel__all.active {
  background: var(--c-active-wash, #EFE3CF);
  border-color: var(--c-active-wash, #EFE3CF);
  color: var(--c-active-ink, #9D6E44);
}

/* Unified single-date entry field (record-a-date inputs in modals + staff forms).
   Mirrors the legacy .form-input look so transactional date pickers match. */
.date-field {
  background: var(--c-surface, #fff);
  border: 1px solid var(--c-edge, #E8E6E0);
  border-radius: var(--radius, 6px);
  font-family: var(--font, inherit);
  font-size: 14px;
  color: var(--c-ink, #1A1A1A);
  padding: 9px 12px;
  min-height: 38px;
  outline: none;
  line-height: 1.2;
}
.date-field:focus {
  border-color: var(--c-brand, #F9B541);
  box-shadow: 0 0 0 3px rgba(249, 181, 65, .18);
}