.report-period-toolbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 14px 16px;
  margin-bottom: 18px;
  border: 1px solid rgba(113, 101, 205, .13);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(249, 248, 255, .95));
  box-shadow: 0 10px 28px rgba(55, 45, 113, .06);
}

.report-period-label {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 148px;
}

.report-period-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(111, 88, 229, .14);
  border-radius: 12px;
  color: #6e5ce4;
  background: linear-gradient(145deg, #f7f4ff, #eeebff);
  box-shadow: 0 6px 15px rgba(96, 74, 213, .12);
}

.report-period-icon .icon { width: 18px; height: 18px; }
.report-period-label strong { display: block; color: #25243a; font-size: 12px; font-weight: 700; }
.report-period-label small { display: block; margin-top: 3px; color: #9291a4; font-size: 10px; }

.report-period-options {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 5px;
  border: 1px solid rgba(103, 91, 190, .11);
  border-radius: 14px;
  background: rgba(241, 239, 249, .72);
}

.report-period-toolbar .report-preset {
  flex: 0 0 auto;
  justify-content: center;
  min-width: 112px;
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: #66647a;
  background: transparent;
  box-shadow: none;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.report-period-toolbar .report-preset:hover {
  color: #5948ce;
  border-color: rgba(104, 83, 217, .15);
  background: rgba(255, 255, 255, .88);
  transform: translateY(-1px);
}

.report-period-toolbar .report-preset.active {
  color: #fff;
  border-color: rgba(98, 77, 220, .35);
  background: linear-gradient(135deg, #7664e9 0%, #5d67e9 100%);
  box-shadow: 0 7px 17px rgba(91, 76, 205, .25);
}

.report-period-toolbar .report-preset .icon { width: 14px; height: 14px; stroke-width: 2.2; }

.report-period-print {
  padding-left: 14px;
  border-left: 1px solid rgba(94, 89, 130, .13);
}

.report-period-toolbar .report-print {
  min-height: 42px;
  padding-inline: 15px;
  border-color: rgba(94, 81, 181, .16);
  border-radius: 12px;
  color: #555270;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 5px 14px rgba(47, 42, 85, .06);
  white-space: nowrap;
}

.report-period-toolbar .report-print:hover { color: #5d4fd0; border-color: rgba(94, 75, 210, .28); }

@media (max-width: 1180px) {
  .report-period-toolbar { grid-template-columns: 1fr auto; }
  .report-period-label { grid-column: 1 / -1; }
  .report-period-options { justify-content: flex-start; overflow-x: auto; }
}

@media (max-width: 820px) {
  .report-period-toolbar { display: flex; align-items: stretch; flex-direction: column; gap: 11px; padding: 13px; }
  .report-period-options { display: flex; overflow-x: auto; scrollbar-width: thin; }
  .report-period-toolbar .report-preset { flex: 0 0 auto; min-width: 118px; }
  .report-period-print { padding: 10px 0 0; border-top: 1px solid rgba(94, 89, 130, .13); border-left: 0; }
  .report-period-toolbar .report-print { width: 100%; justify-content: center; }
}