/**
 * Mini Gallery - Global Components
 * 
 * Shared UI components used across all admin views.
 * Imported by mgwpp-admin-styles.css
 */

/* ============================================
   BUTTONS - Global Styles
   ============================================ */
.mgwpp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: var(--mgwpp-border-radius-md);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: all var(--mgwpp-transition-speed) ease;
  position: relative;
  overflow: hidden;
}

.mgwpp-btn .dashicons {
  font-size: 18px;
  width: 18px;
  height: 18px;
}

.mgwpp-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Primary Button - Teal gradient */
.mgwpp-btn-primary {
  background: linear-gradient(135deg, #07babe, #069a9d);
  color: #fff;
  box-shadow: 0 4px 15px rgba(7, 186, 190, 0.3);
}

.mgwpp-btn-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #069a9d, #058588);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(7, 186, 190, 0.4);
  color: #fff;
}

.mgwpp-btn-primary:active {
  transform: translateY(0);
}

/* Secondary Button */
.mgwpp-btn-secondary {
  background: var(--mgwpp-button-bg);
  border: 1px solid var(--mgwpp-card-border);
  color: var(--mgwpp-foreground);
}

.mgwpp-btn-secondary:hover:not(:disabled) {
  background: var(--mgwpp-card-bg);
  border-color: var(--mgwpp-primary-color);
  transform: translateY(-1px);
}

/* Outline Button */
.mgwpp-btn-outline {
  background: transparent;
  border: 1px solid var(--mgwpp-card-border);
  color: var(--mgwpp-button-text);
}

.mgwpp-btn-outline:hover:not(:disabled) {
  background: var(--mgwpp-button-bg);
  border-color: var(--mgwpp-primary-color);
  color: var(--mgwpp-foreground);
}

/* Icon-only button */
.mgwpp-btn-icon {
  width: 36px;
  height: 36px;
  padding: 0;
}

/* ============================================
   CARDS - Global Styles
   ============================================ */
.mgwpp-card {
  background: var(--mgwpp-card-bg);
  border: 1px solid var(--mgwpp-card-border);
  border-radius: var(--mgwpp-border-radius-lg);
  box-shadow: var(--mgwpp-card-shadow);
  backdrop-filter: var(--mgwpp-backdrop-blur-sm);
  -webkit-backdrop-filter: var(--mgwpp-backdrop-blur-sm);
  transition: all var(--mgwpp-transition-speed) ease;
}

.mgwpp-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

body.mgwpp-dark-mode .mgwpp-card:hover {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

/* ============================================
   FORM ELEMENTS - Global Styles  
   ============================================ */
.mgwpp-input,
.mgwpp-textarea,
.mgwpp-select {
  width: 100%;
  padding: 10px 14px;
  border-radius: var(--mgwpp-border-radius-md);
  border: 1px solid var(--mgwpp-card-border);
  background: var(--mgwpp-button-bg);
  color: var(--mgwpp-foreground);
  font-size: 14px;
  transition: all var(--mgwpp-transition-speed) ease;
}

.mgwpp-input:focus,
.mgwpp-textarea:focus,
.mgwpp-select:focus {
  outline: none;
  border-color: var(--mgwpp-primary-color);
  box-shadow: 0 0 0 3px rgba(7, 186, 190, 0.15);
}

/* ============================================
   UTILITY CLASSES
   ============================================ */
.mgwpp-text-muted {
  color: var(--mgwpp-button-text);
}

.mgwpp-text-primary {
  color: var(--mgwpp-primary-color);
}

.mgwpp-flex {
  display: flex;
}

.mgwpp-flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.mgwpp-gap-1 {
  gap: 0.5rem;
}
.mgwpp-gap-2 {
  gap: 1rem;
}
.mgwpp-gap-3 {
  gap: 1.5rem;
}