/* The period picker every list shares (crm-period.js, owner 2026-10-04). */
:root {
  --crm-period-ink: #1d1b1c;
  --crm-period-muted: #5f6773;
  --crm-period-line: #e4e7ec;
  --crm-period-bg: #fff;
  --crm-period-hover: #f2f4f7;
}
.dark {
  --crm-period-ink: #f2f4f7;
  --crm-period-muted: #98a2b3;
  --crm-period-line: rgba(255, 255, 255, .12);
  --crm-period-bg: #1f1f22;
  --crm-period-hover: rgba(255, 255, 255, .06);
}

.crm-period { position: relative; display: inline-flex; }

.crm-period__face {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px;
  border: 1px solid var(--crm-period-line); border-radius: 8px; background: var(--crm-period-bg);
  color: var(--crm-period-ink); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap;
}
.crm-period__face .fi { font-size: 13px; line-height: 0; color: var(--crm-period-muted); }
.crm-period__face.is-on { border-color: var(--crm-period-ink); }
.crm-period__face:hover { background: var(--crm-period-hover); }

.crm-period__menu {
  position: absolute; top: calc(100% + 6px); inset-inline-start: 0; z-index: 60; width: 240px; padding: 6px;
  border: 1px solid var(--crm-period-line); border-radius: 8px; background: var(--crm-period-bg);
  box-shadow: 0 8px 24px rgba(16, 24, 40, .12);
}

.crm-period__item {
  display: block; width: 100%; padding: 7px 10px; border: 0; border-radius: 6px; background: transparent;
  color: var(--crm-period-ink); font: inherit; font-size: 13px; text-align: start; cursor: pointer;
}
.crm-period__item:hover { background: var(--crm-period-hover); }
.crm-period__item.is-on { font-weight: 600; }

.crm-period__own { margin-top: 6px; padding: 8px 4px 2px; border-top: 1px solid var(--crm-period-line); }
.crm-period__ownt { font-size: 12px; font-weight: 600; color: var(--crm-period-muted); margin: 0 6px 6px; }
.crm-period__dates { display: flex; align-items: center; gap: 6px; padding: 0 4px; color: var(--crm-period-muted); }
.crm-period__date {
  flex: 1 1 0; min-width: 0; height: 32px; padding: 0 6px; margin: 0 !important;
  border: 1px solid var(--crm-period-line); border-radius: 8px; background: var(--crm-period-bg);
  color: var(--crm-period-ink); font: inherit; font-size: 12px;
}
.crm-period__go {
  display: block; margin: 8px 4px 2px auto; height: 30px; padding: 0 14px; border: 0; border-radius: 8px;
  background: #d4fb08; color: #000; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.crm-period__go:hover { background: #1877f2; color: #fff; }