/**
 * SupportPONTO Components CSS
 * Reusable UI Components: Buttons, Cards, Forms, Tables, Modals, Alerts
 */

/* ===================================
 * Buttons
 * =================================== */
.btn {
  min-height: 42px;
  border-radius: var(--sp-radius-md);
  font-weight: var(--sp-font-semibold);
  padding: 0.625rem 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-space-sm);
  transition: var(--sp-transition);
  border: 1px solid transparent;
  font-size: var(--sp-font-size-base);
  text-decoration: none;
  cursor: pointer;
  line-height: 1;
}

.btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--sp-primary-light);
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

/* Button Sizes */
.btn-sm {
  min-height: 34px;
  padding: 0.375rem 0.875rem;
  font-size: var(--sp-font-size-sm);
}

.btn-lg {
  min-height: 48px;
  padding: 0.875rem 1.75rem;
  font-size: var(--sp-font-size-md);
}

/* Primary Button */
.btn-primary {
  background: var(--sp-primary);
  border-color: var(--sp-primary);
  color: white;
}

.btn-primary:hover {
  background: var(--sp-primary-dark);
  border-color: var(--sp-primary-dark);
  color: white;
  transform: translateY(-2px);
  box-shadow: var(--sp-shadow-md);
}

/* Secondary Button */
.btn-secondary {
  background: var(--sp-gray-600);
  border-color: var(--sp-gray-600);
  color: white;
}

.btn-secondary:hover {
  background: var(--sp-gray-700);
  border-color: var(--sp-gray-700);
  color: white;
}

/* Success Button */
.btn-success {
  background: var(--sp-success);
  border-color: var(--sp-success);
  color: white;
}

.btn-success:hover {
  background: var(--sp-primary-dark);
  border-color: var(--sp-primary-dark);
  color: white;
  transform: translateY(-2px);
  box-shadow: var(--sp-shadow-md);
}

/* Danger Button */
.btn-danger {
  background: var(--sp-danger);
  border-color: var(--sp-danger);
  color: white;
}

.btn-danger:hover {
  background: #c35555;
  border-color: #c35555;
  color: white;
  transform: translateY(-2px);
  box-shadow: var(--sp-shadow-md);
}

/* Warning Button */
.btn-warning {
  background: var(--sp-warning);
  border-color: var(--sp-warning);
  color: var(--sp-text-primary);
}

.btn-warning:hover {
  background: #d4ad4e;
  border-color: #d4ad4e;
  color: var(--sp-text-primary);
  transform: translateY(-2px);
  box-shadow: var(--sp-shadow-md);
}

/* Info Button */
.btn-info {
  background: var(--sp-info);
  border-color: var(--sp-info);
  color: white;
}

.btn-info:hover {
  background: #6389ab;
  border-color: #6389ab;
  color: white;
  transform: translateY(-2px);
  box-shadow: var(--sp-shadow-md);
}

/* Light Button */
.btn-light {
  background: var(--sp-gray-100);
  border-color: var(--sp-border);
  color: var(--sp-text-primary);
}

.btn-light:hover {
  background: var(--sp-gray-200);
  border-color: var(--sp-gray-300);
  color: var(--sp-text-primary);
}

/* Dark Button */
.btn-dark {
  background: var(--sp-gray-900);
  border-color: var(--sp-gray-900);
  color: white;
}

.btn-dark:hover {
  background: var(--sp-gray-800);
  border-color: var(--sp-gray-800);
  color: white;
}

/* Outline Buttons */
.btn-outline-primary {
  background: transparent;
  border-color: var(--sp-primary);
  color: var(--sp-primary);
}

.btn-outline-primary:hover {
  background: var(--sp-primary);
  border-color: var(--sp-primary);
  color: white;
}

.btn-outline-secondary {
  background: transparent;
  border-color: var(--sp-gray-400);
  color: var(--sp-gray-600);
}

.btn-outline-secondary:hover {
  background: var(--sp-gray-600);
  border-color: var(--sp-gray-600);
  color: white;
}

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

.btn-outline-danger:hover {
  background: var(--sp-danger);
  border-color: var(--sp-danger);
  color: white;
}

/* ===================================
 * Cards
 * =================================== */
.card,
.sp-card {
  background: var(--sp-bg-surface);
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius-lg);
  box-shadow: var(--sp-shadow-sm);
  transition: var(--sp-transition);
  margin-bottom: var(--sp-space-md);
}

.card:hover,
.sp-card:hover {
  box-shadow: var(--sp-shadow-md);
  transform: translateY(-2px);
}

.card-header {
  min-height: 60px;
  padding: var(--sp-space-md) var(--sp-space-lg);
  border-bottom: 1px solid var(--sp-border);
  display: flex;
  align-items: center;
  gap: var(--sp-space-sm);
  background: var(--sp-gray-50);
  border-radius: var(--sp-radius-lg) var(--sp-radius-lg) 0 0;
}

.card-header h1,
.card-header h2,
.card-header h3,
.card-header h4,
.card-header h5,
.card-header h6 {
  margin-bottom: 0;
  font-size: var(--sp-font-size-md);
  display: flex;
  align-items: center;
  gap: var(--sp-space-sm);
}

.card-header i {
  color: var(--sp-primary);
  font-size: 1.25rem;
}

.card-body {
  padding: var(--sp-space-lg);
}

.card-footer {
  padding: var(--sp-space-md) var(--sp-space-lg);
  border-top: 1px solid var(--sp-border);
  background: var(--sp-gray-50);
  border-radius: 0 0 var(--sp-radius-lg) var(--sp-radius-lg);
}

/* Card Variants */
.card-primary {
  border-color: var(--sp-primary);
}

.card-primary .card-header {
  background: var(--sp-primary-light);
  color: var(--sp-primary-dark);
  border-bottom-color: var(--sp-primary);
}

.card-success {
  border-color: var(--sp-success);
}

.card-danger {
  border-color: var(--sp-danger);
}

.card-warning {
  border-color: var(--sp-warning);
}

.card-info {
  border-color: var(--sp-info);
}

/* Stat Cards */
.stat-card {
  background: var(--sp-bg-surface);
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius-lg);
  padding: var(--sp-space-lg);
  display: flex;
  align-items: center;
  gap: var(--sp-space-md);
  transition: var(--sp-transition);
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sp-shadow-md);
}

.stat-card-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--sp-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  flex-shrink: 0;
}

.stat-card-icon.primary {
  background: var(--sp-primary-light);
  color: var(--sp-primary-dark);
}

.stat-card-icon.success {
  background: var(--sp-success-light);
  color: var(--sp-success);
}

.stat-card-icon.danger {
  background: var(--sp-danger-light);
  color: var(--sp-danger);
}

.stat-card-icon.warning {
  background: var(--sp-warning-light);
  color: var(--sp-warning);
}

.stat-card-icon.info {
  background: var(--sp-info-light);
  color: var(--sp-info);
}

.stat-card-content {
  flex: 1;
}

.stat-card-label {
  font-size: var(--sp-font-size-sm);
  color: var(--sp-text-secondary);
  margin-bottom: var(--sp-space-xs);
  font-weight: var(--sp-font-medium);
}

.stat-card-value {
  font-size: var(--sp-font-size-2xl);
  font-weight: var(--sp-font-bold);
  color: var(--sp-text-primary);
  line-height: 1;
}

/* ===================================
 * Forms
 * =================================== */
.form-control,
.form-select {
  min-height: 42px;
  border-radius: var(--sp-radius-md);
  border: 1px solid var(--sp-border);
  padding: 0.625rem var(--sp-space-md);
  font-size: var(--sp-font-size-base);
  font-family: var(--sp-font-family);
  transition: var(--sp-transition);
  background: var(--sp-bg-surface);
  color: var(--sp-text-primary);
  width: 100%;
}

.form-control:focus,
.form-select:focus {
  outline: none;
  border-color: var(--sp-primary);
  box-shadow: 0 0 0 3px var(--sp-primary-light);
}

.form-control::placeholder {
  color: var(--sp-text-muted);
}

.form-label {
  font-weight: var(--sp-font-semibold);
  color: var(--sp-text-primary);
  margin-bottom: var(--sp-space-sm);
  display: block;
  font-size: var(--sp-font-size-sm);
}

.form-text {
  font-size: var(--sp-font-size-sm);
  color: var(--sp-text-muted);
  margin-top: var(--sp-space-xs);
  display: block;
}

.form-check {
  display: flex;
  align-items: center;
  gap: var(--sp-space-sm);
  margin-bottom: var(--sp-space-sm);
}

.form-check-input {
  width: 18px;
  height: 18px;
  border: 2px solid var(--sp-border);
  border-radius: 4px;
  cursor: pointer;
  transition: var(--sp-transition);
}

.form-check-input:checked {
  background-color: var(--sp-primary);
  border-color: var(--sp-primary);
}

.form-check-input:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--sp-primary-light);
}

.form-check-label {
  font-size: var(--sp-font-size-sm);
  color: var(--sp-text-primary);
  cursor: pointer;
  margin-bottom: 0;
  font-weight: var(--sp-font-normal);
}

/* Form Groups */
.form-group {
  margin-bottom: var(--sp-space-md);
}

/* Input Groups */
.input-group {
  display: flex;
  width: 100%;
  border-radius: var(--sp-radius-md);
  overflow: hidden;
}

.input-group .form-control {
  border-radius: 0;
}

.input-group .form-control:first-child {
  border-radius: var(--sp-radius-md) 0 0 var(--sp-radius-md);
}

.input-group .form-control:last-child {
  border-radius: 0 var(--sp-radius-md) var(--sp-radius-md) 0;
}

.input-group-text {
  display: flex;
  align-items: center;
  padding: 0.625rem var(--sp-space-md);
  background: var(--sp-gray-100);
  border: 1px solid var(--sp-border);
  color: var(--sp-text-secondary);
  font-size: var(--sp-font-size-sm);
  white-space: nowrap;
}

/* Form Validation */
.form-control.is-invalid,
.form-select.is-invalid {
  border-color: var(--sp-danger);
}

.form-control.is-valid,
.form-select.is-valid {
  border-color: var(--sp-success);
}

.invalid-feedback {
  color: var(--sp-danger);
  font-size: var(--sp-font-size-sm);
  margin-top: var(--sp-space-xs);
}

.valid-feedback {
  color: var(--sp-success);
  font-size: var(--sp-font-size-sm);
  margin-top: var(--sp-space-xs);
}

/* ===================================
 * Tables
 * =================================== */
.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--sp-radius-lg);
  overflow: hidden;
  background: var(--sp-bg-surface);
  border: 1px solid var(--sp-border);
}

.table thead {
  background: var(--sp-gray-50);
}

.table thead th {
  font-size: var(--sp-font-size-sm);
  font-weight: var(--sp-font-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--sp-text-secondary);
  padding: var(--sp-space-md);
  border-bottom: 2px solid var(--sp-border);
  text-align: left;
}

.table tbody td {
  padding: 0.875rem var(--sp-space-md);
  vertical-align: middle;
  border-bottom: 1px solid var(--sp-border);
  font-size: var(--sp-font-size-sm);
  color: var(--sp-text-primary);
}

.table tbody tr:last-child td {
  border-bottom: none;
}

.table tbody tr:hover {
  background: var(--sp-gray-50);
}

/* Table Responsive */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ===================================
 * Alerts
 * =================================== */
.alert {
  padding: var(--sp-space-md) var(--sp-space-lg);
  border-radius: var(--sp-radius-md);
  border: 1px solid transparent;
  margin-bottom: var(--sp-space-md);
  display: flex;
  align-items: flex-start;
  gap: var(--sp-space-sm);
  font-size: var(--sp-font-size-sm);
}

.alert i {
  flex-shrink: 0;
  margin-top: 2px;
}

.alert-success {
  background: var(--sp-success-light);
  border-color: var(--sp-success);
  color: var(--sp-success);
}

.alert-danger {
  background: var(--sp-danger-light);
  border-color: var(--sp-danger);
  color: var(--sp-danger);
}

.alert-warning {
  background: var(--sp-warning-light);
  border-color: var(--sp-warning);
  color: var(--sp-warning);
}

.alert-info {
  background: var(--sp-info-light);
  border-color: var(--sp-info);
  color: var(--sp-info);
}

.alert-dismissible {
  padding-right: 3rem;
  position: relative;
}

.btn-close {
  position: absolute;
  top: 50%;
  right: var(--sp-space-md);
  transform: translateY(-50%);
  background: transparent;
  border: none;
  font-size: 1.25rem;
  cursor: pointer;
  opacity: 0.5;
  transition: var(--sp-transition);
}

.btn-close:hover {
  opacity: 1;
}

/* ===================================
 * Modals
 * =================================== */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1040;
  backdrop-filter: blur(2px);
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 1050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-space-md);
}

.modal-dialog {
  max-width: 500px;
  width: 100%;
  background: var(--sp-bg-surface);
  border-radius: var(--sp-radius-lg);
  box-shadow: var(--sp-shadow-lg);
  overflow: hidden;
}

.modal-dialog-lg {
  max-width: 800px;
}

.modal-dialog-xl {
  max-width: 1140px;
}

.modal-header {
  padding: var(--sp-space-lg);
  border-bottom: 1px solid var(--sp-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-title {
  font-size: var(--sp-font-size-lg);
  font-weight: var(--sp-font-bold);
  margin: 0;
}

.modal-body {
  padding: var(--sp-space-lg);
}

.modal-footer {
  padding: var(--sp-space-lg);
  border-top: 1px solid var(--sp-border);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-space-sm);
}

/* ===================================
 * Badges
 * =================================== */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  font-size: var(--sp-font-size-xs);
  font-weight: var(--sp-font-semibold);
  line-height: 1;
  border-radius: var(--sp-radius-full);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.badge-primary {
  background: var(--sp-primary-light);
  color: var(--sp-primary-dark);
}

.badge-success {
  background: var(--sp-success-light);
  color: var(--sp-success);
}

.badge-danger {
  background: var(--sp-danger-light);
  color: var(--sp-danger);
}

.badge-warning {
  background: var(--sp-warning-light);
  color: var(--sp-warning);
}

.badge-info {
  background: var(--sp-info-light);
  color: var(--sp-info);
}

/* ===================================
 * Dropdowns
 * =================================== */
.dropdown-menu {
  background: var(--sp-bg-surface);
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius-md);
  box-shadow: var(--sp-shadow-lg);
  padding: var(--sp-space-sm) 0;
  min-width: 200px;
  margin-top: var(--sp-space-xs);
}

.dropdown-item {
  padding: var(--sp-space-sm) var(--sp-space-md);
  color: var(--sp-text-primary);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: var(--sp-space-sm);
  transition: var(--sp-transition);
  font-size: var(--sp-font-size-sm);
}

.dropdown-item:hover {
  background: var(--sp-gray-50);
  color: var(--sp-primary-dark);
}

.dropdown-divider {
  height: 1px;
  background: var(--sp-border);
  margin: var(--sp-space-xs) 0;
}

/* ===================================
 * Spinner / Loading
 * =================================== */
.spinner-border {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  border: 3px solid var(--sp-primary-light);
  border-right-color: var(--sp-primary);
  border-radius: 50%;
  animation: spinner-border 0.75s linear infinite;
}

@keyframes spinner-border {
  to {
    transform: rotate(360deg);
  }
}

.spinner-border-sm {
  width: 1rem;
  height: 1rem;
  border-width: 2px;
}