/**
 * Solapi Shared CSS Framework
 * Theme-adaptive styles for all Solapi plugins
 */

/* CSS Custom Properties - will be populated by PHP */
:root {
  --solapi-primary: #007cba;
  --solapi-secondary: #0073aa;
  --solapi-text: #333333;
  --solapi-background: #ffffff;
  --solapi-border: #e0e0e0;
  
  /* Derived colors */
  --solapi-primary-light: color-mix(in srgb, var(--solapi-primary) 80%, white);
  --solapi-primary-dark: color-mix(in srgb, var(--solapi-primary) 80%, black);
  --solapi-shadow: rgba(0, 0, 0, 0.1);
  
  /* Spacing system */
  --solapi-spacing-xs: 0.25rem;
  --solapi-spacing-sm: 0.5rem;
  --solapi-spacing-md: 1rem;
  --solapi-spacing-lg: 1.5rem;
  --solapi-spacing-xl: 2rem;
  
  /* Border radius */
  --solapi-radius-sm: 4px;
  --solapi-radius-md: 8px;
  --solapi-radius-lg: 12px;
}

/* Base component styles */
.solapi-container {
  max-width: 100%;
  margin: 0 auto;
  padding: var(--solapi-spacing-md);
  background: var(--solapi-background);
  border: 1px solid var(--solapi-border);
  border-radius: var(--solapi-radius-md);
  box-shadow: 0 2px 4px var(--solapi-shadow);
}

.solapi-card {
  background: var(--solapi-background);
  border: 1px solid var(--solapi-border);
  border-radius: var(--solapi-radius-md);
  padding: var(--solapi-spacing-lg);
  margin-bottom: var(--solapi-spacing-md);
  box-shadow: 0 1px 3px var(--solapi-shadow);
}

.solapi-button {
  background: var(--solapi-primary);
  color: white;
  border: none;
  padding: var(--solapi-spacing-sm) var(--solapi-spacing-lg);
  border-radius: var(--solapi-radius-sm);
  cursor: pointer;
  font-size: 1rem;
  transition: all 0.2s ease;
  display: inline-block;
  text-decoration: none;
}

.solapi-button:hover {
  background: var(--solapi-primary-dark);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px var(--solapi-shadow);
}

.solapi-button:disabled {
  background: var(--solapi-border);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.solapi-button--secondary {
  background: var(--solapi-secondary);
}

.solapi-button--outline {
  background: transparent;
  color: var(--solapi-primary);
  border: 1px solid var(--solapi-primary);
}

.solapi-button--outline:hover {
  background: var(--solapi-primary);
  color: white;
}

.solapi-input {
  width: 100%;
  padding: var(--solapi-spacing-sm);
  border: 1px solid var(--solapi-border);
  border-radius: var(--solapi-radius-sm);
  font-size: 1rem;
  color: var(--solapi-text);
  background: var(--solapi-background);
  transition: border-color 0.2s ease;
}

.solapi-input:focus {
  outline: none;
  border-color: var(--solapi-primary);
  box-shadow: 0 0 0 2px var(--solapi-primary-light);
}

.solapi-label {
  display: block;
  margin-bottom: var(--solapi-spacing-xs);
  font-weight: 600;
  color: var(--solapi-text);
}

.solapi-form-group {
  margin-bottom: var(--solapi-spacing-md);
}

.solapi-grid {
  display: grid;
  gap: var(--solapi-spacing-md);
}

.solapi-grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.solapi-grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.solapi-alert {
  padding: var(--solapi-spacing-md);
  border-radius: var(--solapi-radius-sm);
  margin-bottom: var(--solapi-spacing-md);
}

.solapi-alert--success {
  background: color-mix(in srgb, green 10%, white);
  border: 1px solid color-mix(in srgb, green 30%, white);
  color: darkgreen;
}

.solapi-alert--error {
  background: color-mix(in srgb, red 10%, white);
  border: 1px solid color-mix(in srgb, red 30%, white);
  color: darkred;
}

.solapi-alert--warning {
  background: color-mix(in srgb, orange 10%, white);
  border: 1px solid color-mix(in srgb, orange 30%, white);
  color: darkorange;
}

.solapi-alert--info {
  background: var(--solapi-primary-light);
  border: 1px solid var(--solapi-primary);
  color: var(--solapi-primary-dark);
}

.solapi-loading {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid var(--solapi-border);
  border-radius: 50%;
  border-top: 2px solid var(--solapi-primary);
  animation: solapi-spin 1s linear infinite;
}

@keyframes solapi-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.solapi-hidden {
  display: none !important;
}

.solapi-text-center {
  text-align: center;
}

.solapi-text-right {
  text-align: right;
}

.solapi-mt-0 { margin-top: 0; }
.solapi-mt-1 { margin-top: var(--solapi-spacing-xs); }
.solapi-mt-2 { margin-top: var(--solapi-spacing-sm); }
.solapi-mt-3 { margin-top: var(--solapi-spacing-md); }
.solapi-mt-4 { margin-top: var(--solapi-spacing-lg); }

.solapi-mb-0 { margin-bottom: 0; }
.solapi-mb-1 { margin-bottom: var(--solapi-spacing-xs); }
.solapi-mb-2 { margin-bottom: var(--solapi-spacing-sm); }
.solapi-mb-3 { margin-bottom: var(--solapi-spacing-md); }
.solapi-mb-4 { margin-bottom: var(--solapi-spacing-lg); }

.solapi-p-0 { padding: 0; }
.solapi-p-1 { padding: var(--solapi-spacing-xs); }
.solapi-p-2 { padding: var(--solapi-spacing-sm); }
.solapi-p-3 { padding: var(--solapi-spacing-md); }
.solapi-p-4 { padding: var(--solapi-spacing-lg); }

/* Responsive utilities */
@media (max-width: 768px) {
  .solapi-container {
    padding: var(--solapi-spacing-sm);
  }
  
  .solapi-grid--2,
  .solapi-grid--3 {
    grid-template-columns: 1fr;
  }
  
  .solapi-button {
    width: 100%;
    margin-bottom: var(--solapi-spacing-sm);
  }
}

/* WordPress admin bar compatibility */
@media screen and (max-width: 782px) {
  .admin-bar .solapi-container {
    margin-top: 46px;
  }
}

@media screen and (min-width: 783px) {
  .admin-bar .solapi-container {
    margin-top: 32px;
  }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  :root {
    --solapi-text: #ffffff;
    --solapi-background: #1a1a1a;
    --solapi-border: #404040;
    --solapi-shadow: rgba(255, 255, 255, 0.1);
  }
}