/* ============================================
   Project Cards Page Styles
   ============================================ */

/* Visually Hidden (for accessibility) */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Data Controls Section */
.data-controls {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--spacing-lg);
  margin-block-end: var(--spacing-xl);
  position: relative;
  overflow: hidden;
}

.data-controls::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 100%;
  block-size: 4px;
  background: linear-gradient(90deg, var(--accent-purple), var(--accent-cyan), var(--accent-pink));
  pointer-events: none;
}

/* Button Group */
.button-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  justify-content: center;
}

/* Button Base Styles */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: var(--spacing-sm) var(--spacing-lg);
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: var(--font-base);
  text-decoration: none;
  cursor: pointer;
  border: 2px solid transparent;
  position: relative;
  overflow: hidden;
  transition: all var(--transition-base) ease;
  font-family: inherit;
}

.btn__icon {
  font-size: 1.2em;
}

/* Primary Button */
.btn--primary {
  background: linear-gradient(135deg, var(--accent-purple), var(--accent-cyan));
  color: white;
  border-color: transparent;
  box-shadow: 0 4px 16px color-mix(in oklab, var(--accent-purple), transparent 70%);
}

.btn--primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px color-mix(in oklab, var(--accent-purple), transparent 60%);
}

.btn--primary:active {
  transform: translateY(-1px);
}

/* Secondary Button */
.btn--secondary {
  background: var(--surface-elevated);
  color: var(--accent-cyan);
  border-color: var(--accent-cyan);
}

.btn--secondary:hover {
  background: color-mix(in oklab, var(--accent-cyan), transparent 90%);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px color-mix(in oklab, var(--accent-cyan), transparent 75%);
}

/* Ghost Button */
.btn--ghost {
  background: transparent;
  color: var(--muted);
  border-color: var(--border);
}

.btn--ghost:hover {
  color: var(--accent-red);
  border-color: var(--accent-red);
  background: color-mix(in oklab, var(--accent-red), transparent 95%);
}

/* Accent Button */
.btn--accent {
  background: linear-gradient(135deg, var(--accent-pink), var(--accent-purple));
  color: white;
  border-color: transparent;
  box-shadow: 0 4px 16px color-mix(in oklab, var(--accent-pink), transparent 70%);
}

.btn--accent:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px color-mix(in oklab, var(--accent-pink), transparent 60%);
}

/* Data Status Message */
.data-status {
  text-align: center;
  margin-block-start: var(--spacing-md);
  padding: var(--spacing-sm);
  border-radius: var(--radius-sm);
  font-size: var(--font-sm);
  font-weight: 600;
  min-height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-base) ease;
}

.data-status:empty {
  display: none;
}

.data-status--loading {
  background: color-mix(in oklab, var(--accent-blue), transparent 90%);
  color: var(--accent-blue);
  border: 1px solid var(--accent-blue);
}

.data-status--loading::before {
  content: '⏳ ';
  animation: pulse 1s ease-in-out infinite;
}

.data-status--success {
  background: color-mix(in oklab, var(--accent-cyan), transparent 90%);
  color: var(--accent-cyan);
  border: 1px solid var(--accent-cyan);
}

.data-status--success::before {
  content: '✓ ';
}

.data-status--error {
  background: color-mix(in oklab, var(--accent-red), transparent 90%);
  color: var(--accent-red);
  border: 1px solid var(--accent-red);
}

.data-status--error::before {
  content: '✗ ';
}

.data-status--warning {
  background: color-mix(in oklab, #f59e0b, transparent 90%);
  color: #f59e0b;
  border: 1px solid #f59e0b;
}

.data-status--warning::before {
  content: '⚠ ';
}

.data-status--info {
  background: color-mix(in oklab, var(--accent-purple), transparent 90%);
  color: var(--accent-purple);
  border: 1px solid var(--accent-purple);
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Cards Section */
.cards-section {
  margin-block-end: var(--spacing-xl);
}

/* Cards Grid - Using CSS Grid */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--spacing-lg);
  margin-block-start: var(--spacing-lg);
}

/* Empty State */
.empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--spacing-xl);
  color: var(--muted);
  font-size: var(--font-lg);
  background: var(--surface);
  border: 2px dashed var(--border);
  border-radius: var(--radius);
}

/* Card Animation on Load */
.cards-grid project-card {
  animation: cardFadeIn 0.5s ease-out both;
}

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

/* CRUD Link Section */
.crud-link-section {
  text-align: center;
  padding: var(--spacing-xl);
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--accent-purple), transparent 95%) 0%,
    color-mix(in oklab, var(--accent-pink), transparent 95%) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-block-end: var(--spacing-xl);
}

/* Responsive Adjustments */
@media (max-width: 820px) {
  .button-group {
    flex-direction: column;
    align-items: stretch;
  }
  
  .btn {
    width: 100%;
  }
  
  .cards-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--spacing-md);
  }
}

@media (max-width: 480px) {
  .data-controls {
    padding: var(--spacing-md);
  }
  
  .cards-grid {
    grid-template-columns: 1fr;
  }
  
  .empty-state {
    padding: var(--spacing-lg);
    font-size: var(--font-base);
  }
}