/* ===== SETTINGS TAB STYLES - PROFESSIONAL UI WITH !IMPORTANT ===== */

.settings-section {
  background: #ffffff !important;
  border-radius: 16px !important;
  padding: 0 !important;
  margin: 20px 0 !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
}

.settings-section:hover {
  box-shadow: 0 8px 24px rgba(139, 127, 245, 0.12) !important;
}

.settings-card {
  background: white !important;
  border-radius: 16px !important;
  border: none !important;
  overflow: hidden !important;
  margin-bottom: 24px !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
  transition: all 0.3s ease !important;
}

.settings-card:hover {
  box-shadow: 0 8px 24px rgba(139, 127, 245, 0.12) !important;
}

.settings-card-header {
  background: linear-gradient(135deg, #241443 0%, #3d2a5c 100%) !important;
  padding: 24px !important;
  border-bottom: none !important;
}

.settings-card-title {
  margin: 0 !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: white !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  letter-spacing: 0.3px !important;
}

.settings-card-title i {
  font-size: 1.4rem !important;
  color: white !important;
}

.settings-card-body {
  padding: 32px !important;
  background: #ffffff !important;
  color: #1a1a1a !important;
}

/* Credit Management Section */
.credit-management-section {
  color: #1a1a1a !important;
}

.credit-management-section h5 {
  color: #1a1a1a !important;
  font-weight: 700 !important;
  font-size: 1.1rem !important;
  margin-bottom: 16px !important;
  margin-top: 0 !important;
}

.credit-management-section label {
  color: #1a1a1a !important;
  font-weight: 600 !important;
  display: block !important;
  margin-bottom: 8px !important;
}

.credit-management-section small {
  color: #666 !important;
}

.credit-management-section p {
  color: #1a1a1a !important;
}

.credit-management-section table {
  color: #1a1a1a !important;
  width: 100% !important;
  border-collapse: collapse !important;
}

.credit-management-section table thead {
  background: linear-gradient(135deg, #f0f4ff 0%, #f5f8ff 100%) !important;
}

.credit-management-section table thead th {
  color: #1a1a1a !important;
  font-weight: 700 !important;
  padding: 16px 12px !important;
  border-bottom: 2px solid #e0e0e0 !important;
  text-align: left !important;
}

.credit-management-section table tbody tr td {
  color: #1a1a1a !important;
  padding: 14px 12px !important;
  border-bottom: 1px solid #e8e8e8 !important;
}

.credit-management-section table tbody tr:hover {
  background-color: #f9fafb !important;
}

/* Data Management Section */
.data-management-section {
  color: #1a1a1a !important;
}

.data-management-section h5 {
  color: #1a1a1a !important;
  font-weight: 700 !important;
}

.data-management-section label {
  color: #1a1a1a !important;
  font-weight: 600 !important;
}

.data-management-section p {
  color: #1a1a1a !important;
}

.delete-history-box {
  color: #1a1a1a !important;
  background: linear-gradient(135deg, #f8faff 0%, #f5f8ff 100%) !important;
  padding: 24px !important;
  border-radius: 12px !important;
  border: 1px solid #e8ecf5 !important;
}

.delete-history-header {
  margin-bottom: 20px !important;
}

.delete-history-header h5,
.delete-history-title {
  color: #1a1a1a !important;
  font-weight: 700 !important;
  font-size: 1.1rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 8px !important;
}

.delete-history-description {
  color: #666 !important;
  font-size: 0.95rem !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

.delete-options {
  display: grid !important;
  gap: 16px !important;
  margin-bottom: 24px !important;
}

.delete-option {
  color: #1a1a1a !important;
  background: white !important;
  padding: 16px !important;
  border-radius: 10px !important;
  border: 2px solid #e0e0e0 !important;
  transition: all 0.2s ease !important;
}

.delete-option:hover {
  border-color: var(--primary-purple) !important;
  box-shadow: 0 4px 12px rgba(139, 127, 245, 0.1) !important;
}

.delete-option label {
  color: #1a1a1a !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  margin-bottom: 0 !important;
  display: block !important;
}

.delete-option label strong {
  color: #1a1a1a !important;
  font-weight: 700 !important;
  display: block !important;
  margin-bottom: 4px !important;
}

.delete-option small {
  color: #666 !important;
  font-size: 0.9rem !important;
}

/* Form Elements */
.form-label {
  color: #1a1a1a !important;
  font-weight: 600 !important;
  margin-bottom: 8px !important;
  display: block !important;
}

.form-check-label {
  color: #1a1a1a !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  user-select: none !important;
}

.form-control {
  color: #1a1a1a !important;
  border-color: #e0e0e0 !important;
  border-radius: 10px !important;
  padding: 12px 16px !important;
  font-size: 0.95rem !important;
  background-color: white !important;
  transition: all 0.2s ease !important;
  width: 100% !important;
}

.form-control:focus {
  border-color: var(--primary-purple) !important;
  box-shadow: 0 0 0 4px rgba(139, 127, 245, 0.1) !important;
  color: #1a1a1a !important;
  background-color: white !important;
}

.form-control::placeholder {
  color: #999 !important;
}

.form-select {
  color: #1a1a1a !important;
  border-color: #e0e0e0 !important;
  border-radius: 10px !important;
  padding: 12px 16px !important;
  font-size: 0.95rem !important;
  background-color: white !important;
  cursor: pointer !important;
}

.form-select:focus {
  border-color: var(--primary-purple) !important;
  box-shadow: 0 0 0 4px rgba(139, 127, 245, 0.1) !important;
  color: #1a1a1a !important;
}

/* Table Styling */
.table {
  color: #1a1a1a !important;
  margin-bottom: 0 !important;
}

.table thead {
  background-color: #f9fafb !important;
  border-color: #e0e0e0 !important;
}

.table thead th {
  color: #1a1a1a !important;
  font-weight: 700 !important;
  border-color: #e0e0e0 !important;
  padding: 16px 12px !important;
}

.table tbody td {
  color: #1a1a1a !important;
  border-color: #e8e8e8 !important;
  padding: 14px 12px !important;
  vertical-align: middle !important;
}

.table tbody tr:hover {
  background-color: #f9fafb !important;
}

/* Override inline styles */
.row {
  margin-right: -12px !important;
  margin-left: -12px !important;
}

.col-md-6 {
  padding-right: 12px !important;
  padding-left: 12px !important;
}

/* Alert Messages */
.settings-alert {
  padding: 12px 15px !important;
  border-radius: 8px !important;
  margin-bottom: 15px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 0.95rem !important;
}

.alert-success {
  background: rgba(40, 167, 69, 0.1) !important;
  border: 1px solid rgba(40, 167, 69, 0.3) !important;
  color: #28a745 !important;
}

.alert-error {
  background: rgba(220, 53, 69, 0.1) !important;
  border: 1px solid rgba(220, 53, 69, 0.3) !important;
  color: #dc3545 !important;
}

.alert-warning {
  background: rgba(255, 193, 7, 0.1) !important;
  border: 1px solid rgba(255, 193, 7, 0.3) !important;
  color: #ffc107 !important;
}

.alert-info {
  background: rgba(139, 127, 245, 0.1) !important;
  border: 1px solid rgba(139, 127, 245, 0.3) !important;
  color: var(--primary-purple) !important;
}

/* Button Color Overrides */
.btn-success {
  --bs-btn-color: white !important;
  --bs-btn-bg: var(--primary-purple) !important;
  --bs-btn-border-color: var(--primary-purple) !important;
  --bs-btn-hover-color: white !important;
  --bs-btn-hover-bg: var(--primary-purple-light) !important;
  --bs-btn-hover-border-color: var(--primary-purple-light) !important;
  --bs-btn-focus-color: white !important;
  --bs-btn-focus-bg: var(--primary-purple-light) !important;
  --bs-btn-focus-border-color: var(--primary-purple-light) !important;
  --bs-btn-active-color: white !important;
  --bs-btn-active-bg: var(--primary-navy) !important;
  --bs-btn-active-border-color: var(--primary-navy) !important;
  --bs-btn-disabled-color: white !important;
  --bs-btn-disabled-bg: var(--primary-purple) !important;
  --bs-btn-disabled-border-color: var(--primary-purple) !important;
  background: linear-gradient(135deg, var(--primary-purple), var(--primary-purple-light)) !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(139, 127, 245, 0.3) !important;
  transition: all 0.3s ease !important;
}

.btn-success:hover {
  background: linear-gradient(135deg, var(--primary-purple-light), var(--primary-purple)) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(139, 127, 245, 0.4) !important;
}

.btn-success:active {
  transform: translateY(0) !important;
  background: linear-gradient(135deg, var(--primary-navy), var(--primary-purple)) !important;
}

.btn-success:focus {
  outline: none !important;
  box-shadow: 0 0 0 4px rgba(139, 127, 245, 0.25) !important;
}

/* Danger Button Override */
.btn-danger {
  --bs-btn-color: white !important;
  --bs-btn-bg: #ef4444 !important;
  --bs-btn-border-color: #ef4444 !important;
  --bs-btn-hover-color: white !important;
  --bs-btn-hover-bg: #dc2626 !important;
  --bs-btn-hover-border-color: #dc2626 !important;
  --bs-btn-focus-color: white !important;
  --bs-btn-focus-bg: #dc2626 !important;
  --bs-btn-focus-border-color: #dc2626 !important;
  --bs-btn-active-color: white !important;
  --bs-btn-active-bg: #b91c1c !important;
  --bs-btn-active-border-color: #b91c1c !important;
  --bs-btn-disabled-color: white !important;
  --bs-btn-disabled-bg: #ef4444 !important;
  --bs-btn-disabled-border-color: #ef4444 !important;
  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3) !important;
  transition: all 0.3s ease !important;
}

.btn-danger:hover {
  background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(220, 53, 69, 0.4) !important;
}

.btn-danger:active {
  transform: translateY(0) !important;
  background: linear-gradient(135deg, #b91c1c, #991b1b) !important;
}

.btn-danger:focus {
  outline: none !important;
  box-shadow: 0 0 0 4px rgba(220, 53, 69, 0.25) !important;
}

/* Credit Badge Color Override */
span[style*="background: #28a745"] {
  background: linear-gradient(135deg, var(--primary-purple), var(--primary-purple-light)) !important;
  color: white !important;
  padding: 6px 12px !important;
  border-radius: 6px !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 2px 8px rgba(139, 127, 245, 0.3) !important;
}

@media (max-width: 768px) {
  .settings-section {
    margin: 12px 0 !important;
  }

  .settings-card {
    margin-bottom: 16px !important;
  }

  .settings-card-header {
    padding: 16px !important;
  }

  .settings-card-body {
    padding: 20px !important;
  }

  .settings-actions {
    flex-direction: column !important;
  }

  .btn-save-settings,
  .btn-reset-settings,
  .btn-delete-data {
    width: 100% !important;
  }
}