/**
 * AI Classifier Design System - Bento Grid System
 * Version: 1.0.0
 *
 * Modern asymmetric grid layouts inspired by Vercel, Linear, and Notion.
 * Features:
 * - 12-column grid foundation
 * - Responsive bento cards with various sizes
 * - Hover animations and transitions
 * - Glass morphism effects
 */

/* ===========================================
   BENTO GRID - 12-Column Foundation
   =========================================== */

.bento-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-4);
  width: 100%;
}

/* Gap variants */
.bento-grid--gap-sm { gap: var(--space-3); }
.bento-grid--gap-md { gap: var(--space-4); }
.bento-grid--gap-lg { gap: var(--space-6); }
.bento-grid--gap-xl { gap: var(--space-8); }

/* ===========================================
   BENTO CARD - Base Styles
   =========================================== */

.bento-card {
  background: var(--color-bg-card);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border-light);
  box-shadow: var(--shadow-bento);
  padding: var(--space-6);
  position: relative;
  overflow: hidden;
  transition: var(--transition-all);
}

/* Hover state - subtle lift */
.bento-card:hover {
  box-shadow: var(--shadow-bento-hover);
  transform: translateY(-2px);
}

/* Active/Focus state */
.bento-card:focus-within,
.bento-card--active {
  box-shadow: var(--shadow-bento-active);
}

/* ===========================================
   BENTO CARD SIZES - Column Spans
   =========================================== */

/* Extra Small - 2 columns (1/6 width) */
.bento-xs { grid-column: span 2; }

/* Small - 3 columns (1/4 width) */
.bento-sm { grid-column: span 3; }

/* Medium - 4 columns (1/3 width) */
.bento-md { grid-column: span 4; }

/* Large - 6 columns (1/2 width) */
.bento-lg { grid-column: span 6; }

/* Extra Large - 8 columns (2/3 width) */
.bento-xl { grid-column: span 8; }

/* Full - 12 columns (full width) */
.bento-full { grid-column: span 12; }

/* ===========================================
   BENTO CARD ROW SPANS
   =========================================== */

.bento-row-1 { grid-row: span 1; }
.bento-row-2 { grid-row: span 2; }
.bento-row-3 { grid-row: span 3; }

/* ===========================================
   BENTO CARD VARIANTS
   =========================================== */

/* Featured card - slightly elevated */
.bento-card--featured {
  background: linear-gradient(135deg, var(--color-bg-card) 0%, var(--color-gray-50) 100%);
  border-color: var(--color-border);
}

/* Primary accent card */
.bento-card--primary {
  background: linear-gradient(135deg, var(--color-primary-bg) 0%, var(--color-bg-card) 100%);
  border-color: rgba(66, 133, 244, 0.15);
}

.bento-card--primary:hover {
  border-color: rgba(66, 133, 244, 0.3);
}

/* Success card */
.bento-card--success {
  background: linear-gradient(135deg, var(--color-secondary-bg) 0%, var(--color-bg-card) 100%);
  border-color: rgba(52, 168, 83, 0.15);
}

/* Warning card */
.bento-card--warning {
  background: linear-gradient(135deg, var(--color-accent-bg) 0%, var(--color-bg-card) 100%);
  border-color: rgba(251, 188, 4, 0.15);
}

/* Error card */
.bento-card--error {
  background: linear-gradient(135deg, var(--color-error-bg) 0%, var(--color-bg-card) 100%);
  border-color: rgba(234, 67, 53, 0.15);
}

/* Glass morphism effect */
.bento-card--glass {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-color: rgba(255, 255, 255, 0.3);
}

/* Gradient border effect */
.bento-card--gradient {
  position: relative;
  background: var(--color-bg-card);
  border: none;
}

.bento-card--gradient::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-xl);
  padding: 1px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* Subtle top border accent */
.bento-card--accent-top {
  border-top: 3px solid var(--color-primary);
}

.bento-card--accent-top.bento-card--success {
  border-top-color: var(--color-secondary);
}

.bento-card--accent-top.bento-card--warning {
  border-top-color: var(--color-accent);
}

/* ===========================================
   BENTO CARD PADDING VARIANTS
   =========================================== */

.bento-card--compact {
  padding: var(--space-4);
}

.bento-card--spacious {
  padding: var(--space-8);
}

/* ===========================================
   BENTO CARD INTERNAL LAYOUT
   =========================================== */

.bento-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.bento-card__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0;
}

.bento-card__subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-top: var(--space-1);
}

.bento-card__icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--color-gray-100);
  color: var(--color-primary);
  font-size: var(--font-size-xl);
  transition: var(--transition-all);
}

.bento-card:hover .bento-card__icon {
  transform: scale(1.05);
  background: var(--color-primary-bg);
}

.bento-card__content {
  flex: 1;
}

.bento-card__footer {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-light);
}

/* ===========================================
   BENTO STAT CARD
   =========================================== */

.bento-stat {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 140px;
}

.bento-stat__value {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  line-height: 1;
  margin-bottom: var(--space-2);
}

.bento-stat__value--primary { color: var(--color-primary); }
.bento-stat__value--success { color: var(--color-secondary); }
.bento-stat__value--warning { color: var(--color-accent); }
.bento-stat__value--error { color: var(--color-error); }

.bento-stat__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
}

.bento-stat__change {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  margin-top: var(--space-2);
}

.bento-stat__change--up {
  background: var(--color-secondary-bg);
  color: var(--color-secondary);
}

.bento-stat__change--down {
  background: var(--color-error-bg);
  color: var(--color-error);
}

/* ===========================================
   BENTO METRIC CARD (for dashboard)
   =========================================== */

.bento-metric {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.bento-metric__icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  font-size: 1.5rem;
  transition: var(--transition-all);
}

.bento-metric__icon--primary {
  background: var(--color-primary-bg);
  color: var(--color-primary);
}

.bento-metric__icon--success {
  background: var(--color-secondary-bg);
  color: var(--color-secondary);
}

.bento-metric__icon--warning {
  background: var(--color-accent-bg);
  color: var(--color-accent-dark);
}

.bento-metric__icon--error {
  background: var(--color-error-bg);
  color: var(--color-error);
}

.bento-card:hover .bento-metric__icon {
  transform: scale(1.1);
}

.bento-metric__value {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  line-height: 1.2;
}

.bento-metric__label {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-medium);
}

/* ===========================================
   BENTO LIST CARD
   =========================================== */

.bento-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.bento-list__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border-light);
  transition: var(--transition-colors);
}

.bento-list__item:last-child {
  border-bottom: none;
}

.bento-list__item:hover {
  background: var(--color-gray-50);
  margin: 0 calc(var(--space-3) * -1);
  padding-left: var(--space-3);
  padding-right: var(--space-3);
  border-radius: var(--radius-md);
}

.bento-list__icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--color-gray-100);
  font-size: 1rem;
}

.bento-list__content {
  flex: 1;
  min-width: 0;
}

.bento-list__title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bento-list__meta {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* ===========================================
   BENTO PROGRESS BAR
   =========================================== */

.bento-progress {
  width: 100%;
  height: 8px;
  background: var(--color-gray-200);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.bento-progress__fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width 0.5s var(--ease-out);
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
}

.bento-progress__fill--success {
  background: var(--color-secondary);
}

.bento-progress__fill--warning {
  background: var(--color-accent);
}

.bento-progress__fill--error {
  background: var(--color-error);
}

/* ===========================================
   RESPONSIVE ADJUSTMENTS
   =========================================== */

/* Tablet */
@media (max-width: 1024px) {
  .bento-grid {
    grid-template-columns: repeat(8, 1fr);
  }

  .bento-xs { grid-column: span 2; }
  .bento-sm { grid-column: span 2; }
  .bento-md { grid-column: span 4; }
  .bento-lg { grid-column: span 4; }
  .bento-xl { grid-column: span 8; }
  .bento-full { grid-column: span 8; }
}

/* Mobile */
@media (max-width: 768px) {
  .bento-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-3);
  }

  .bento-xs,
  .bento-sm { grid-column: span 2; }

  .bento-md,
  .bento-lg,
  .bento-xl,
  .bento-full { grid-column: span 4; }

  .bento-card {
    padding: var(--space-4);
    border-radius: var(--radius-lg);
  }

  .bento-stat__value {
    font-size: var(--font-size-3xl);
  }

  .bento-metric__value {
    font-size: var(--font-size-2xl);
  }
}

/* Small mobile */
@media (max-width: 480px) {
  .bento-grid {
    grid-template-columns: 1fr;
  }

  .bento-xs,
  .bento-sm,
  .bento-md,
  .bento-lg,
  .bento-xl,
  .bento-full {
    grid-column: span 1;
  }
}

/* ===========================================
   BENTO GRID PRESETS
   =========================================== */

/* Dashboard overview layout */
.bento-grid--dashboard {
  grid-template-areas:
    "featured featured featured featured small1 small1 small2 small2 small3 small3 small4 small4"
    "featured featured featured featured small1 small1 small2 small2 small3 small3 small4 small4"
    "activity activity activity activity activity activity activity activity activity activity activity activity";
}

.bento-grid--dashboard > .bento-featured { grid-area: featured; }
.bento-grid--dashboard > .bento-small-1 { grid-area: small1; }
.bento-grid--dashboard > .bento-small-2 { grid-area: small2; }
.bento-grid--dashboard > .bento-small-3 { grid-area: small3; }
.bento-grid--dashboard > .bento-small-4 { grid-area: small4; }
.bento-grid--dashboard > .bento-activity { grid-area: activity; }

@media (max-width: 1024px) {
  .bento-grid--dashboard {
    grid-template-areas:
      "featured featured featured featured"
      "small1 small1 small2 small2"
      "small3 small3 small4 small4"
      "activity activity activity activity";
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 640px) {
  .bento-grid--dashboard {
    grid-template-areas:
      "featured"
      "small1"
      "small2"
      "small3"
      "small4"
      "activity";
    grid-template-columns: 1fr;
  }
}

/* Feature grid layout (2 large, 4 small) */
.bento-grid--features {
  grid-template-areas:
    "large1 large1 large1 large1 large1 large1 large2 large2 large2 large2 large2 large2"
    "small1 small1 small1 small2 small2 small2 small3 small3 small3 small4 small4 small4";
}

@media (max-width: 768px) {
  .bento-grid--features {
    grid-template-areas:
      "large1"
      "large2"
      "small1"
      "small2"
      "small3"
      "small4";
    grid-template-columns: 1fr;
  }
}