@import '../../styles/variables.scss';
@import '../../styles/mixins.scss';

.device-sync-page {
  min-height: 100vh;
  background: $bg;
  padding-bottom: env(safe-area-inset-bottom);
}

.sync-header {
  background: $pri;
  padding: 48px 32px 32px;
  color: $card;
}

.sync-header-title {
  @include section-title;
  color: $card;
}

.sync-section {
  padding: 24px;
}

.sync-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 48px 24px;
  background: $card;
  border-radius: $r;
  margin-bottom: 24px;
  box-shadow: $shadow-sm;
}

.sync-hero-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: $pri-l;
  @include flex-center;
  margin-bottom: 20px;
  color: $pri;
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: var(--tk-font-num-lg);
  font-weight: bold;
}

.sync-hero-title {
  @include section-title;
  margin-bottom: 8px;
}

.sync-hero-desc {
  font-size: var(--tk-font-h1);
  color: $tx2;
}

.sync-action {
  @include flex-center;
  background: $pri;
  border-radius: $r-sm;
  padding: 20px 40px;
  margin: 12px 0;

  &--primary {
    flex: 1;
    background: $pri;
  }

  &--danger {
    flex: 1;
    background: $dan;
    margin-left: 16px;
  }
}

.sync-action-text {
  color: $card;
  font-size: var(--tk-font-body-lg);
  font-weight: 500;
}

.sync-device-list {
  margin-top: 16px;
}

.sync-section-title {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: var(--tk-font-body-lg);
  font-weight: bold;
  color: $tx;
  margin-bottom: 12px;
  display: block;
}

.sync-device-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: $card;
  border-radius: $r-sm;
  padding: 24px;
  margin-bottom: 12px;
  box-shadow: $shadow-sm;
}

.sync-device-info {
  display: flex;
  flex-direction: column;
}

.sync-device-name {
  font-size: var(--tk-font-body-lg);
  font-weight: 500;
  color: $tx;
}

.sync-device-adapter {
  font-size: var(--tk-font-body);
  color: var(--tk-text-secondary);
  margin-top: 4px;
}

.sync-device-rssi {
  font-size: var(--tk-font-body);
  color: $tx2;
}

.sync-status-card {
  display: flex;
  align-items: center;
  background: $card;
  border-radius: $r-sm;
  padding: 24px;
  margin-bottom: 16px;
  box-shadow: $shadow-sm;
}

.sync-status-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  margin-right: 16px;
  background: $tx3;

  &--connected {
    background: $acc;
  }
}

.sync-status-text {
  font-size: var(--tk-font-body-lg);
  color: $tx;
}

.sync-readings-panel {
  background: $card;
  border-radius: $r-sm;
  padding: 24px;
  margin-bottom: 16px;
  box-shadow: $shadow-sm;
}

.sync-reading-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid $bd-l;

  &:last-child {
    border-bottom: none;
  }
}

.sync-reading-type {
  font-size: var(--tk-font-h1);
  color: $tx2;
}

.sync-reading-value {
  font-size: var(--tk-font-body-lg);
  font-weight: bold;
  color: $pri;
  @include serif-number;
}

.sync-readings-count {
  display: block;
  margin-top: 12px;
  font-size: var(--tk-font-body);
  color: var(--tk-text-secondary);
  text-align: center;
}

.sync-actions-row {
  display: flex;
  gap: 12px;
}

.sync-error {
  margin: 24px;
  padding: 20px 24px;
  background: $dan-l;
  border-radius: $r-sm;
}

.sync-error-text {
  font-size: var(--tk-font-h1);
  color: $dan;
}

.sync-loading {
  @include flex-center;
  padding: 64px 24px;
}

.sync-loading-text {
  font-size: var(--tk-font-body-lg);
  color: $tx2;
}

.sync-result-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: $card;
  border-radius: $r;
  padding: 48px 24px;
  margin-bottom: 24px;
  box-shadow: $shadow-sm;
}

.sync-result-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: $acc-l;
  @include flex-center;
  color: $acc;
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: var(--tk-font-num-lg);
  font-weight: bold;
  margin-bottom: 16px;
}

.sync-result-title {
  @include section-title;
  margin-bottom: 8px;
}

.sync-result-count {
  font-size: var(--tk-font-h1);
  color: $tx2;
}