/* ===== ZALO SERVER - COMPONENT STYLES ===== */
/* Reusable component styles for consistent UI */

/* ===== CARD COMPONENTS ===== */
.card-stats {
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
  color: var(--text-white);
  border: none;
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  position: relative;
}

.card-stats::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
  height: 100px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  transform: translate(30px, -30px);
}

.card-stats .card-body {
  position: relative;
  z-index: 1;
}

.card-stats .stats-icon {
  font-size: 2.5rem;
  opacity: 0.8;
}

.card-stats .stats-number {
  font-size: 2rem;
  font-weight: var(--font-weight-bold);
  margin: var(--spacing-sm) 0;
}

.card-stats .stats-label {
  font-size: var(--font-size-sm);
  opacity: 0.9;
}

/* ===== BUTTON COMPONENTS ===== */
.btn-group-modern .btn {
  border-radius: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-group-modern .btn:first-child {
  border-top-left-radius: var(--border-radius);
  border-bottom-left-radius: var(--border-radius);
}

.btn-group-modern .btn:last-child {
  border-top-right-radius: var(--border-radius);
  border-bottom-right-radius: var(--border-radius);
  border-right: none;
}

.btn-floating {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--box-shadow-lg);
  z-index: var(--z-fixed);
  transition: all var(--transition-normal);
}

.btn-floating:hover {
  transform: scale(1.1);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

/* ===== TABLE COMPONENTS ===== */
.table-modern {
  background: var(--bg-primary);
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: var(--box-shadow);
}

.table-modern thead th {
  background: var(--bg-secondary);
  border-bottom: 2px solid var(--border-color);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
  padding: var(--spacing-lg);
}

.table-modern tbody td {
  padding: var(--spacing-lg);
  vertical-align: middle;
  border-bottom: 1px solid var(--border-color);
}

.table-modern tbody tr:hover {
  background: var(--bg-secondary);
}

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

/* Table actions */
.table-actions {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
}

.table-actions .btn {
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: var(--font-size-sm);
}

/* ===== FORM COMPONENTS ===== */
.form-floating-modern {
  position: relative;
  margin-bottom: var(--spacing-lg);
}

.form-floating-modern .form-control {
  height: 56px;
  padding: var(--spacing-lg) var(--spacing-md);
  border: 2px solid var(--border-color);
  border-radius: var(--border-radius);
  background: var(--bg-primary);
  transition: all var(--transition-fast);
}

.form-floating-modern .form-control:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 0.2rem rgba(0, 102, 204, 0.25);
}

.form-floating-modern label {
  position: absolute;
  top: 50%;
  left: var(--spacing-md);
  transform: translateY(-50%);
  background: var(--bg-primary);
  padding: 0 var(--spacing-sm);
  color: var(--text-muted);
  transition: all var(--transition-fast);
  pointer-events: none;
}

.form-floating-modern .form-control:focus + label,
.form-floating-modern .form-control:not(:placeholder-shown) + label {
  top: 0;
  font-size: var(--font-size-sm);
  color: var(--primary-color);
}

/* ===== STATUS COMPONENTS ===== */
.status-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--border-radius-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.status-badge.status-online {
  background: rgba(40, 167, 69, 0.1);
  color: var(--accent-color);
  border: 1px solid rgba(40, 167, 69, 0.2);
}

.status-badge.status-offline {
  background: rgba(220, 53, 69, 0.1);
  color: var(--danger-color);
  border: 1px solid rgba(220, 53, 69, 0.2);
}

.status-badge.status-pending {
  background: rgba(255, 193, 7, 0.1);
  color: var(--warning-color);
  border: 1px solid rgba(255, 193, 7, 0.2);
}

.status-badge.status-info {
  background: rgba(23, 162, 184, 0.1);
  color: var(--info-color);
  border: 1px solid rgba(23, 162, 184, 0.2);
}

/* ===== PROGRESS COMPONENTS ===== */
.progress-modern {
  height: 8px;
  border-radius: var(--border-radius-sm);
  background: var(--bg-secondary);
  overflow: hidden;
}

.progress-modern .progress-bar {
  background: var(--primary-gradient);
  transition: width var(--transition-normal);
}

/* ===== MODAL COMPONENTS ===== */
.modal-modern .modal-content {
  border: none;
  border-radius: var(--border-radius-lg);
  box-shadow: var(--box-shadow-lg);
}

.modal-modern .modal-header {
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
}

.modal-modern .modal-footer {
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-color);
  border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg);
}

/* ===== ALERT COMPONENTS ===== */
.alert-modern {
  border: none;
  border-radius: var(--border-radius);
  border-left: 4px solid;
  box-shadow: var(--box-shadow);
}

.alert-modern.alert-success {
  background: rgba(40, 167, 69, 0.1);
  border-left-color: var(--accent-color);
  color: var(--accent-color);
}

.alert-modern.alert-danger {
  background: rgba(220, 53, 69, 0.1);
  border-left-color: var(--danger-color);
  color: var(--danger-color);
}

.alert-modern.alert-warning {
  background: rgba(255, 193, 7, 0.1);
  border-left-color: var(--warning-color);
  color: var(--warning-color);
}

.alert-modern.alert-info {
  background: rgba(23, 162, 184, 0.1);
  border-left-color: var(--info-color);
  color: var(--info-color);
}

/* ===== LOADING COMPONENTS ===== */
.loading-skeleton {
  background: linear-gradient(90deg, var(--bg-secondary) 25%, var(--medium-gray) 50%, var(--bg-secondary) 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
  border-radius: var(--border-radius-sm);
}

@keyframes loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.loading-dots {
  display: inline-flex;
  gap: var(--spacing-xs);
}

.loading-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary-color);
  animation: loadingDots 1.4s infinite ease-in-out both;
}

.loading-dots span:nth-child(1) { animation-delay: -0.32s; }
.loading-dots span:nth-child(2) { animation-delay: -0.16s; }

@keyframes loadingDots {
  0%, 80%, 100% { transform: scale(0); }
  40% { transform: scale(1); }
}

/* ===== RESPONSIVE UTILITIES ===== */
@media (max-width: 768px) {
  .btn-floating {
    bottom: 1rem;
    right: 1rem;
    width: 48px;
    height: 48px;
  }
  
  .table-actions {
    flex-direction: column;
    gap: var(--spacing-xs);
  }
  
  .table-actions .btn {
    width: 100%;
    justify-content: center;
  }
  
  .card-stats .stats-number {
    font-size: 1.5rem;
  }
  
  .card-stats .stats-icon {
    font-size: 2rem;
  }
}

/* ===== ANIMATION UTILITIES ===== */
.animate-fade-in {
  animation: fadeIn 0.5s ease-in-out;
}

.animate-slide-up {
  animation: slideUp 0.5s ease-out;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-bounce {
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    transform: translate3d(0,0,0);
  }
  40%, 43% {
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transform: translate3d(0, -30px, 0);
  }
  70% {
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transform: translate3d(0, -15px, 0);
  }
  90% {
    transform: translate3d(0,-4px,0);
  }
}