@import "./theme/variables";
@import "taro-ui-vue3/dist/style/index.scss";

page {
  min-height: 100%;
  color: $text-primary;
  background: $bg-page;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html,
body,
#app {
  min-height: 100%;
  color: $text-primary;
  background: $bg-page;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

view,
text,
input,
textarea,
button {
  box-sizing: border-box;
}

.at-input {
  margin-left: 0;
}

.at-input__input {
  padding-right: 0;
}

.at-list__item {
  padding-right: 0;
  padding-left: 0;
}

.at-list__item::after {
  left: 0;
}

.page {
  box-sizing: border-box;
  padding: $space-xl $space-xl $page-bottom-space;
}

.panel {
  padding: $space-xl;
  margin-bottom: $space-lg;
  background: $bg-page !important;
  border: 1px solid $border-color;
  border-radius: $radius-md;
}

.section-title {
  margin-bottom: $space-md;
  font-size: $font-title;
  font-weight: 600;
  color: $text-primary;
}

.muted {
  color: $text-secondary;
}

.row {
  display: flex;
  gap: 16px;
  align-items: center;
}

.space-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.field {
  margin-bottom: $space-md;
}

.label {
  display: block;
  margin-bottom: $space-xs;
  font-size: $font-md;
  color: $text-regular;
}

.input,
.textarea,
.picker {
  box-sizing: border-box;
  display: block;
  width: 100%;
  min-height: $control-height;
  padding: $space-sm $space-lg;
  font-size: $font-lg;
  line-height: $line-height-control;
  color: $text-primary;
  background: $bg-page !important;
  border: 1px solid $border-color-strong;
  border-radius: $radius-md;
}

.textarea {
  min-height: $control-height;
}

.button-row {
  display: flex;
  gap: 16px;
  margin-top: $space-lg;
}

.btn,
.btn.at-button {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  width: 100%;
  height: $control-height;
  font-size: $font-lg;
  line-height: $control-height;
  color: $text-primary;
  background: $bg-soft;
  border: 0;
  border-radius: $radius-md;
}

.btn-primary,
.btn-primary.at-button {
  color: $color-white;
  background: $color-primary;
  border-color: transparent;
}

.btn-danger,
.btn-danger.at-button {
  color: $color-white;
  background: $color-danger;
  border-color: transparent;
}

.btn-plain,
.btn-plain.at-button {
  color: $color-primary;
  background: $color-primary-light;
  border-color: transparent;
}

.tag {
  display: inline-flex;
  padding: $space-xxs $space-sm;
  font-size: $font-sm;
  color: $color-primary;
  background: $color-primary-light;
  border-radius: $radius-sm;
}

.tag.at-tag {
  border: 0;
}

.record-meta-tag.at-tag {
  color: $text-primary;
  background: $bg-soft;
}

.settlement-tag-danger.at-tag,
.settlement-tag-danger {
  color: $color-danger;
  background: $color-danger-light;
}

.settlement-tag-warning.at-tag,
.settlement-tag-warning {
  color: $color-warning;
  background: $color-warning-light;
}

.settlement-tag-success.at-tag,
.settlement-tag-success {
  color: $color-success;
  background: $color-success-light;
}

.empty {
  padding: 80px 0;
  font-size: $font-xl;
  color: $text-placeholder;
  text-align: center;
}
