.telegram-dashboard-page {
  background: #f5f8fc;
  color: #0f2342;
  display: grid;
  gap: 16px;
  padding: 24px 0;
}

.telegram-dashboard-toolbar {
  align-items: flex-end;
  background: #ffffff;
  border: 1px solid #e6edf7;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(18, 40, 78, 0.05);
  display: flex;
  gap: 14px;
  padding: 12px;
  margin-top: 20px;
}

.telegram-dashboard-toolbar > div {
  min-width: 136px;
}

.telegram-dashboard-toolbar .custom-select-field .field-label-copy,
.telegram-dashboard-toolbar .custom-select-field .field-label-copy span,
.telegram-dashboard-toolbar .custom-select-value-button,
.telegram-dashboard-toolbar .custom-select-value-button span,
.telegram-dashboard-toolbar .custom-select-icon-button {
  color: #000000 !important;
  font-weight: 900 !important;
}

.telegram-dashboard-toolbar .custom-select-value-button svg,
.telegram-dashboard-toolbar .custom-select-icon-button svg {
  color: #000000 !important;
  stroke: #000000 !important;
  stroke-width: 3;
}

.telegram-dashboard-refresh {
  align-items: center;
  background: #2f80ff;
  border: 0;
  border-radius: 8px;
  color: #ffffff;
  display: inline-flex;
  font-weight: 800;
  gap: 8px;
  height: 42px;
  justify-content: center;
  margin-left: auto;
  min-width: 116px;
  padding: 0 16px;
}

.telegram-dashboard-summary {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.telegram-dashboard-card {
  background: #ffffff;
  border: 1px solid #e6edf7;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(18, 40, 78, 0.05);
  column-gap: 14px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  min-height: 106px;
  padding: 18px;
}

.telegram-dashboard-card__icon {
  align-items: center;
  border-radius: 8px;
  display: inline-flex;
  font-size: 34px;
  grid-row: 1 / 3;
  height: 42px;
  justify-self: center;
  justify-content: center;
  align-self: center;
  overflow: hidden;
  width: 42px;
}

.telegram-dashboard-card__icon .ti {
  align-items: center;
  display: flex;
  font-size: 34px;
  height: 100%;
  justify-content: center;
  line-height: 1;
  width: 100%;
}

.telegram-dashboard-card__icon.is-sent {
  background: #dcfce7;
  color: #16a34a;
}

.telegram-dashboard-card__icon.is-pending {
  background: #fff5d6;
  color: #d99300;
}

.telegram-dashboard-card__icon.is-error {
  background: #ffe1e5;
  color: #ff3b4f;
}

.telegram-dashboard-card__icon.is-campaign {
  background: #e1efff;
  color: #2f80ff;
}

.telegram-dashboard-card strong {
  color: #071b39;
  display: block;
  font-size: 30px;
  line-height: 1;
  margin-bottom: 4px;
}

.telegram-dashboard-card span {
  color: #536783;
  display: block;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
}

.telegram-dashboard-card small {
  align-items: center;
  color: #64748b;
  display: flex;
  font-size: 12px;
  font-weight: 800;
  gap: 6px;
  grid-column: 1 / -1;
  margin-top: 14px;
}

.telegram-dashboard-card small > i,
.telegram-dashboard-card small.is-up {
  color: #16a34a;
}

.telegram-dashboard-card small.is-down {
  color: #dc2626;
}

.telegram-dashboard-card small span {
  display: inline;
  font-size: 11px;
  margin: 0;
}

.telegram-dashboard-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.telegram-dashboard-panel {
  background: #ffffff;
  border: 1px solid #e6edf7;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(18, 40, 78, 0.05);
  min-height: 320px;
  padding: 16px;
}

.telegram-dashboard-panel.is-wide {
  grid-column: 1 / -1;
}

.telegram-dashboard-panel h2 {
  color: #102548;
  font-size: 17px;
  font-weight: 900;
  line-height: 1.2;
  margin: 0;
}

.telegram-dashboard-panel p {
  color: #5f6f89;
  font-size: 12px;
  font-weight: 700;
  margin: 2px 0 0;
}

.telegram-dashboard-chart {
  height: 248px;
  position: relative;
}

.telegram-dashboard-status {
  align-items: center;
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(180px, 1fr) minmax(170px, 1fr);
  min-height: 250px;
}

.telegram-dashboard-doughnut {
  height: 230px;
  margin: 0 auto;
  max-width: 230px;
  position: relative;
  width: 100%;
}

.telegram-dashboard-doughnut > div {
  align-items: center;
  color: #516480;
  display: flex;
  flex-direction: column;
  inset: 0;
  justify-content: center;
  pointer-events: none;
  position: absolute;
  text-align: center;
}

.telegram-dashboard-doughnut strong {
  color: #071b39;
  font-size: 30px;
  line-height: 1;
}

.telegram-dashboard-status-list {
  display: grid;
  gap: 12px;
}

.telegram-dashboard-status-list div {
  align-items: center;
  background: #f7faff;
  border-radius: 8px;
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr 42px 42px;
  min-height: 40px;
  padding: 8px 12px;
}

.telegram-dashboard-status-list span {
  align-items: center;
  color: #233a5c;
  display: inline-flex;
  font-size: 13px;
  font-weight: 800;
  gap: 8px;
}

.telegram-dashboard-status-list i {
  border-radius: 999px;
  display: inline-block;
  height: 12px;
  width: 12px;
}

.telegram-dashboard-status-list strong,
.telegram-dashboard-status-list small {
  color: #233a5c;
  font-size: 12px;
  font-weight: 900;
  text-align: right;
}

.telegram-dashboard-skeleton {
  background: linear-gradient(90deg, #edf3fb 0%, #f8fbff 48%, #edf3fb 100%);
  background-size: 220% 100%;
  border-radius: 8px;
  display: block;
  overflow: hidden;
  position: relative;
  animation: telegram-dashboard-skeleton 1.2s ease-in-out infinite;
}

.telegram-dashboard-skeleton-icon {
  grid-row: 1 / 3;
  height: 42px;
  justify-self: center;
  align-self: center;
  width: 42px;
}

.telegram-dashboard-skeleton-number {
  height: 30px;
  margin-bottom: 8px;
  width: 58px;
}

.telegram-dashboard-skeleton-text,
.telegram-dashboard-skeleton-foot,
.telegram-dashboard-skeleton-subtitle {
  height: 12px;
}

.telegram-dashboard-skeleton-foot {
  grid-column: 1 / -1;
  margin-top: 16px;
  width: min(220px, 92%);
}

.telegram-dashboard-skeleton-title {
  height: 18px;
  width: min(270px, 72%);
}

.telegram-dashboard-skeleton-subtitle {
  margin-top: 8px;
  width: min(380px, 86%);
}

.telegram-dashboard-skeleton-chart {
  align-items: end;
  border-bottom: 1px solid #e3ebf5;
  border-left: 1px solid #e3ebf5;
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(6, minmax(18px, 1fr));
  height: 220px;
  margin-top: 14px;
  padding: 16px 18px 0;
}

.telegram-dashboard-skeleton-chart span {
  background: linear-gradient(180deg, rgba(226, 236, 249, 0.85), rgba(244, 248, 253, 0.9));
  border-radius: 6px 6px 0 0;
  display: block;
}

.telegram-dashboard-skeleton-chart span:nth-child(1) { height: 34%; }
.telegram-dashboard-skeleton-chart span:nth-child(2) { height: 58%; }
.telegram-dashboard-skeleton-chart span:nth-child(3) { height: 82%; }
.telegram-dashboard-skeleton-chart span:nth-child(4) { height: 46%; }
.telegram-dashboard-skeleton-chart span:nth-child(5) { height: 70%; }
.telegram-dashboard-skeleton-chart span:nth-child(6) { height: 38%; }

@keyframes telegram-dashboard-skeleton {
  0% { background-position: 120% 0; }
  100% { background-position: -120% 0; }
}

@media (max-width: 1200px) {
  .telegram-dashboard-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 992px) {
  .telegram-dashboard-grid,
  .telegram-dashboard-status {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .telegram-dashboard-toolbar,
  .telegram-dashboard-summary {
    display: grid;
    grid-template-columns: 1fr;
  }

  .telegram-dashboard-toolbar > div,
  .telegram-dashboard-refresh {
    margin-left: 0;
    width: 100%;
  }
}