/* Form Elements */
.form-group {
  margin-bottom: var(--spacing-md);
}

.form-label {
  display: block;
  margin-bottom: var(--spacing-xs);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
}

.form-input, .form-select {
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-base);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-bg-secondary);
  color: var(--color-text);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  min-height: 44px;
}

.form-input:focus, .form-select:focus {
  outline: none;
  border-color: var(--color-primary);
}

.form-input::placeholder {
  color: var(--color-text-tertiary);
  font-weight: lighter;
}

.form-input.error {
  border-color: var(--color-danger);
}

.form-error {
  margin-top: var(--spacing-xs);
  font-size: var(--font-size-xs);
  color: var(--color-danger);
}

.form-hint {
  margin-top: var(--spacing-xs);
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
}

/* Radio & Checkbox */
.radio-group, .checkbox-group {
  display: flex;
  gap: var(--spacing-md);
}

.radio-item, .checkbox-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  cursor: pointer;
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-md);
  transition: background-color var(--transition-fast);
}

@media (hover: hover) and (pointer: fine) {
  .radio-item:hover, .checkbox-item:hover {
    background-color: var(--color-bg-tertiary);
  }
}

.radio-item input, .checkbox-item input {
  width: 20px;
  height: 20px;
  accent-color: var(--color-primary);
}

/* Category Tags */
.category-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  padding: var(--spacing-xs);
  min-height: 44px;
  align-items: flex-start;
  justify-content: flex-start;
  overflow: hidden;
}

.category-tags.disabled {
  background-color: var(--color-bg-tertiary);
  opacity: 0.6;
  cursor: not-allowed;
}

.category-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  background-color: var(--color-bg-tertiary);
  flex-shrink: 0;
  min-width: fit-content;
  width: auto;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
}

@media (hover: hover) and (pointer: fine) {
  .category-tag:hover:not(.disabled) {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
  }
}

.category-tag.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.category-tag-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.category-tag-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Selected state - higher specificity */
.category-tag.selected,
.category-tag.default.selected,
.category-tag-income.selected {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: white !important;
  box-shadow: var(--shadow-sm);
}

.category-tag.default {
  background-color: var(--color-bg-tertiary);
  border-color: var(--color-border);
  color: var(--color-text);
}

/* Category Divider - Separator between expense and income categories */
.category-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-xs) var(--spacing-sm);
  color: var(--color-text-tertiary);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  user-select: none;
  width: 100%;
  flex-shrink: 0;
}

/* Income Category Tag Style */
.category-tag-income {
  background-color: #e3f9eb;
  /*color: white;*/
}

@media (hover: hover) and (pointer: fine) {
  .category-tag-income:hover:not(.disabled):not(.selected) {
    background-color: #d1f2dd;
  }
}

/* Dark mode for income category tags */
[data-theme="dark"] .category-tag-income {
  background-color: #1d3e2b;
}

@media (hover: hover) and (pointer: fine) {
  [data-theme="dark"] .category-tag-income:hover:not(.disabled):not(.selected) {
    background-color: #2d5e3b;
  }
}

/* 选中状态使用原来的主色调，不覆盖默认的selected样式 */

/* Reimbursement Badge Toggle */
.reimbursement-badge {
  cursor: pointer;
  opacity: 0.8;
  transition: opacity var(--transition-fast);
}

@media (hover: hover) and (pointer: fine) {
  .reimbursement-badge:hover {
    opacity: 1;
  }
}

/* Investment Filter Badge Toggle */
.investment-filter-badge {
  cursor: pointer;
  opacity: 0.8;
  transition: opacity var(--transition-fast);
}

@media (hover: hover) and (pointer: fine) {
  .investment-filter-badge:hover {
    opacity: 1;
  }
}

/* Recurring Settings */
.recurring-settings {
  padding: var(--spacing-md);
  background-color: var(--color-bg-tertiary);
  border-radius: var(--radius-md);
  margin-top: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
}

.form-checkbox {
  width: 20px;
  height: 20px;
  accent-color: var(--color-primary);
  cursor: pointer;
}

.form-radio {
  width: 20px;
  height: 20px;
  accent-color: var(--color-primary);
  cursor: pointer;
}

.radio-group {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm) var(--spacing-md);
  background-color: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
}

@media (hover: hover) and (pointer: fine) {
  .radio-group:hover {
    background-color: var(--color-bg-tertiary);
  }
}

.radio-group input[type="radio"]:checked + .radio-label {
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
}

.radio-group:has(input[type="radio"]:checked) {
  background-color: var(--color-primary-light);
  border-color: var(--color-primary);
}

/* Week Days Selector */
.week-days-selector {
  display: flex;
  gap: var(--spacing-xs);
  flex-wrap: wrap;
}

.week-day {
  flex: 0 0 calc((100% - (var(--spacing-xs) * 6)) / 7);
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  user-select: none;
}

@media (hover: hover) and (pointer: fine) {
  .week-day:hover {
    background-color: var(--color-bg-tertiary);
    border-color: var(--color-primary);
  }
}

.week-day:has(input[type="radio"]:checked) {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: white;
  font-weight: var(--font-weight-semibold);
}

.week-day span {
  font-size: var(--font-size-sm);
}

/* 周期记账 badge 样式 */
.recurring-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  background-color: var(--color-primary-light);
  color: var(--color-primary);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

/* 周期记账编辑规则按钮 */
#edit-recurring-rule-btn {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  white-space: nowrap;
}

/* 周期记账提示信息 */
.info-notice {
  background-color: var(--color-info-bg, #e3f2fd);
  border: 1px solid var(--color-info-border, #2196f3);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
}

.info-notice .alert-banner-content {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
}

.info-notice svg {
  flex-shrink: 0;
  color: var(--color-info-text, #1976d2);
}

/* Text Input Modal Field */
#text-input-field {
  width: 100%;
  height: 120px;
  resize: none;
  overflow: auto;
  border: 1px solid var(--color-border) !important;
  border-radius: 0 var(--radius-lg) var(--radius-lg) var(--radius-lg) !important;
  background-color: var(--color-bg-tertiary);
  color: var(--color-text)
}

#text-input-field:focus {
  border-color: var(--color-border) !important;
  outline: none;
}