// ==========================================================================
// Monitor.Cat — Dashboard Page
// Glassmorphic hero + floating cards on gradient background
// ==========================================================================

@use 'tokens' as *;

.monitorcat-wrap {
  // ---------------------------------------------------------------------------
  // Dashboard layout
  // ---------------------------------------------------------------------------
  .mc-dashboard {
    padding: 0;
  }

  // ---------------------------------------------------------------------------
  // Hero card — glassmorphic welcome banner
  // ---------------------------------------------------------------------------
  .mc-hero-card {
    position: relative;
    overflow: hidden;
    min-height: 200px;
    padding: 2.5rem;
    border-radius: 1.6rem;
    background:
      radial-gradient(ellipse 40% 60% at 5% 50%, rgba($mc-primary, 0.1) 0%, transparent 70%),
      radial-gradient(ellipse 30% 50% at 90% 20%, rgba($mc-lavender, 0.08) 0%, transparent 70%),
      radial-gradient(ellipse 30% 40% at 70% 80%, rgba($mc-mint, 0.06) 0%, transparent 70%),
      linear-gradient(135deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.76) 100%);
    border: 1px solid rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(14px);
    box-shadow:
      0 2px 4px rgba(15, 23, 42, 0.02),
      0 8px 16px rgba(15, 23, 42, 0.04),
      0 16px 40px rgba(15, 23, 42, 0.06),
      inset 0 1px 0 rgba(255, 255, 255, 0.8);
    margin-bottom: 2rem;
  }

  .mc-hero-card-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
    position: relative;
    z-index: 2;
  }

  .mc-hero-card-content {
    flex: 1;
    min-width: 280px;
    max-width: 560px;

    h1 {
      margin-bottom: 0.5rem;
    }

    p {
      margin-bottom: 1rem;
    }
  }

  .mc-hero-card-image {
    flex-shrink: 0;
    position: relative;
    z-index: 1;

    img {
      width: 180px;
      height: auto;
      object-fit: contain;
      filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.1));
    }
  }

  // ---------------------------------------------------------------------------
  // Section titles
  // ---------------------------------------------------------------------------
  .mc-section-title {
    margin-bottom: 1.25rem;
  }

  // ---------------------------------------------------------------------------
  // Module grid — cards for each module
  // ---------------------------------------------------------------------------
  .mc-module-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2.5rem;
  }

  a.mc-module-card {
    color: inherit;
    text-decoration: none;

    &:hover {
      color: inherit;
    }

    &:focus-visible {
      outline: 3px solid $mc-cyan;
      outline-offset: 4px;
      border-radius: $mc-radius-card;
    }
  }

  .mc-module-card {
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.92);
    border: 1.5px solid rgba(238, 241, 246, 0.8);
    backdrop-filter: blur(12px);
    transition:
      transform 0.4s $mc-ease-spring,
      box-shadow 0.4s $mc-ease-spring,
      border-color 0.3s ease;

    // Clay-depth shadow stack
    box-shadow:
      0 2px 4px rgba(15, 23, 42, 0.02),
      0 4px 12px rgba(15, 23, 42, 0.04),
      0 8px 24px rgba(15, 23, 42, 0.04);

    .mc-card-body {
      flex: 1;
    }

    .mc-card-footer {
      display: flex;
      justify-content: flex-end;
    }

    // Button scales up on card hover
    .mc-btn-primary {
      transition:
        transform 0.4s $mc-ease-spring,
        box-shadow 0.3s ease,
        filter 0.3s ease,
        color 0.3s ease;
    }

    &:hover {
      transform: translateY(-4px) scale(1.015);
      border-color: rgba($mc-primary, 0.2);
      box-shadow:
        0 4px 8px rgba(15, 23, 42, 0.03),
        0 8px 20px rgba(15, 23, 42, 0.06),
        0 16px 40px rgba($mc-primary, 0.08);

      .mc-btn-primary {
        transform: translateY(-1px) scale(1.04);
        box-shadow:
          0 4px 16px rgba($mc-primary, 0.35),
          0 8px 24px rgba($mc-primary, 0.15);
      }
    }

    &:active {
      transform: translateY(-1px) scale(0.985);
      transition-duration: 0.1s;
    }
  }

  .mc-module-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
  }

  // ---------------------------------------------------------------------------
  // Responsive
  // ---------------------------------------------------------------------------
  @media (max-width: 768px) {
    .mc-hero-card {
      padding: 1.75rem;
      min-height: auto;
    }

    .mc-hero-card-inner {
      flex-direction: column;
      text-align: center;
    }

    .mc-hero-card-content {
      min-width: 0;
      max-width: none;
    }

    .mc-hero-card-image img {
      width: 140px;
    }

  }
}