/* Bento Grid Layout - Custom Spans & Alignment */

@media (min-width: 1024px) {
  .bento-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(98px, auto)) repeat(2, minmax(115px, auto)) repeat(2, minmax(98px, auto));
    grid-auto-rows: minmax(98px, auto);
  }

  /* ── Row 1-2: Top Section ── */
  .grid-box-1 { /* IDX Terminal → swapped to right-mid (was Market Screener) */
    grid-column: 9 / span 4;
    grid-row: 3 / span 2;
  }

  .grid-box-2 { /* TVS */
    grid-column: 4 / span 3;
    grid-row: 1 / span 2;
  }

  .grid-box-3 { /* TF Banner */
    grid-column: 7 / span 6;
    grid-row: 1 / span 2;
  }

  /* ── Row 3-4: Middle Section ── */
  /* LOGIN FORM → LEFT (cols 1-4, rows 3-4) */
  .grid-box-5 {
    grid-column: 1 / span 4;
    grid-row: 3 / span 2;
  }

  /* Trading Journal → CENTER TOP (cols 5-8, row 3) */
  .grid-box-4 {
    grid-column: 5 / span 4;
    grid-row: 3 / span 1;
  }

  /* IDX Composite → CENTER BOTTOM (cols 5-8, row 4) */
  .grid-box-7 {
    grid-column: 5 / span 4;
    grid-row: 4 / span 1;
  }

  /* Market Screener → swapped to top-left (was IDX Terminal) */
  .grid-box-6 {
    grid-column: 1 / span 3;
    grid-row: 1 / span 2;
  }

  /* ── Row 5-6: Bottom Section ── */
  .grid-box-8 { /* Crypto Analytics → swapped to right-bottom (was Insider Monitor) */
    grid-column: 8 / span 5;
    grid-row: 5 / span 2;
  }

  .grid-box-9 { /* Meme */
    grid-column: 5 / span 3;
    grid-row: 5 / span 2;
  }

  .grid-box-10 { /* Insider Monitor → swapped to left-bottom (was Crypto Analytics) */
    grid-column: 1 / span 4;
    grid-row: 5 / span 2;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .bento-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(160px, auto);
  }

  .grid-box-1, .grid-box-2, .grid-box-3, .grid-box-5, .grid-box-6, .grid-box-8, .grid-box-10 {
    grid-column: span 2 / span 2;
  }
}

.bento-card {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, border-color 0.25s ease;
  will-change: transform;
}

.bento-card:hover {
  transform: translateY(-3px);
}

/* Shake Animation for Unauthorized Link Clicks */
@keyframes shakeAlert {
  0%, 100% { transform: translateX(0) scale(1); }
  20%, 60% { transform: translateX(-8px) scale(1.02); }
  40%, 80% { transform: translateX(8px) scale(1.02); }
}

.animate-shake {
  animation: shakeAlert 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  border-color: #ef4444 !important;
  box-shadow: 0 0 30px rgba(239, 68, 68, 0.45) !important;
}

/* Toast Animations */
@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.toast-enter {
  animation: toastIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}