/* Button Components */

/* Base Button Styles */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-lg);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  transition: all var(--transition-base);
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
}

/* Button Variants */
.btn-primary {
  background: var(--color-primary);
  color: var(--color-surface);
}

.btn-primary:hover {
  background: var(--color-primary-hover);
}

.btn-secondary {
  background: var(--color-surface-hover);
  color: var(--color-text);
  border-color: var(--color-border);
}

.btn-secondary:hover {
  background: var(--color-border);
}

.btn-outline {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn-outline:hover {
  background: var(--color-primary);
  color: var(--color-surface);
}

.btn-ghost {
  background: transparent;
  color: var(--color-text-secondary);
  border: none;
}

.btn-ghost:hover {
  background: var(--color-surface-hover);
  color: var(--color-text);
}

.btn-danger {
  background: var(--color-error);
  color: var(--color-surface);
}

.btn-danger:hover {
  background: #b91c1c;
}

/* Button Sizes */
.btn-sm {
  padding: var(--spacing-xs) var(--spacing-md);
  font-size: var(--font-size-xs);
}

.btn-lg {
  padding: var(--spacing-lg) var(--spacing-2xl);
  font-size: var(--font-size-base);
}

/* Add Custom Income Button */
.add-custom-income-container {
  display: block;
  padding: var(--spacing-2xl) 0 var(--spacing-lg) 0;
  text-align: center;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.mobile-add-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  background: var(--color-background);
  border: 1px dashed var(--color-border-light);
  border-radius: var(--radius-md);
  padding: var(--spacing-md) var(--spacing-xl);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all var(--transition-base);
  font-size: var(--font-size-sm);
}

.mobile-add-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background-color: var(--color-background);
}

/* Upload Section Button */
.upload-area {
  background: var(--color-background);
  border: 2px dashed var(--color-border-light);
  border-radius: var(--radius-lg);
  padding: var(--spacing-4xl);
  text-align: center;
  margin-bottom: var(--spacing-2xl);
  cursor: pointer;
  transition: all var(--transition-base);
}

.upload-area:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}

.upload-btn {
  background: var(--color-primary);
  color: var(--color-surface);
  padding: var(--spacing-md) var(--spacing-2xl);
  border-radius: var(--radius-sm);
  font-weight: var(--font-weight-medium);
  margin-top: var(--spacing-lg);
}

.upload-btn:hover {
  background: var(--color-primary-hover);
}

/* Editable Cell Button */
.edit-btn {
  background: none;
  border: none;
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  cursor: pointer;
  padding: var(--spacing-xs);
  border-radius: var(--radius-sm);
  transition: all var(--transition-base);
}

.edit-btn:hover {
  background: var(--color-surface-hover);
  color: var(--color-primary);
}

/* Icon Buttons */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: none;
  border: none;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all var(--transition-base);
}

.icon-btn:hover {
  background: var(--color-surface-hover);
  color: var(--color-text);
}

/* Expand Button */
.expand-btn {
  background: none;
  border: none;
  color: var(--color-text-secondary);
  font-size: var(--font-size-base);
  cursor: pointer;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
}

.expand-btn:hover {
  background: var(--color-surface-hover);
}

/* Complex Shadow Button */
.shadow-btn {
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.06) 0px 1px 1px 0px, rgba(40, 40, 40, 0.157) 0px 0px 0px 1px, rgba(40, 40, 40, 0.64) 0px 8px 16px -8px, rgba(40, 40, 40, 0.48) 0px -1px 2px 0px inset;
  transition: box-shadow var(--transition-base);
}

.shadow-btn:hover {
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.08) 0px 1px 1px 0px, rgba(40, 40, 40, 0.2) 0px 0px 0px 1px, rgba(40, 40, 40, 0.7) 0px 8px 16px -8px, rgba(40, 40, 40, 0.5) 0px -1px 2px 0px inset;
}

.shadow-btn:active {
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.04) 0px 1px 1px 0px, rgba(40, 40, 40, 0.12) 0px 0px 0px 1px, rgba(40, 40, 40, 0.5) 0px 8px 16px -8px, rgba(40, 40, 40, 0.4) 0px -1px 2px 0px inset;
}

.shadow-btn:focus {
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.06) 0px 1px 1px 0px, rgba(40, 40, 40, 0.157) 0px 0px 0px 1px, var(--color-primary) 0px 0px 0px 2px, rgba(40, 40, 40, 0.64) 0px 8px 16px -8px, rgba(40, 40, 40, 0.48) 0px -1px 2px 0px inset;
}