/* Simulations list page — @layer split: theme (colors) + components (layout) */

/* Theme layer — colors, backgrounds, shadows only */
@layer theme {
  .simulations-page {
    .simulations-header {
      .header-icon {
        background: linear-gradient(
          135deg,
          light-dark(
            oklch(from var(--accent-primary) l c h / 0.15),
            oklch(from var(--accent-primary) l c h / 0.25)
          ),
          light-dark(
            oklch(from var(--accent-warm) l c h / 0.08),
            oklch(from var(--accent-warm) l c h / 0.15)
          )
        );
        border-color: light-dark(
          oklch(from var(--accent-primary) l c h / 0.2),
          oklch(from var(--accent-primary) l c h / 0.35)
        );
        color: var(--accent-primary);
        box-shadow: 0 4px 18px
          light-dark(
            oklch(from var(--accent-primary) l c h / 0.1),
            oklch(from var(--accent-primary) l c h / 0.2)
          );
      }

      h1::after {
        background: linear-gradient(
          90deg,
          var(--accent-primary) 0%,
          var(--accent-warm) 55%,
          transparent 100%
        );
        box-shadow: 0 0 12px oklch(from var(--accent-primary) l c h / 0.4);
      }

      .welcome-text {
        color: var(--text-secondary);
      }
    }

    .assignment-card {
      background: light-dark(oklch(100% 0 0 / 0.7), oklch(100% 0 0 / 0.04));
      backdrop-filter: blur(12px);
      border-color: oklch(from var(--glass-tint) l c h / 0.08);
      box-shadow:
        var(--shadow-sm),
        inset 0 1px 0 oklch(from var(--glass-tint) l c h / 0.05);

      &:hover {
        border-color: oklch(from var(--accent-primary) l c h / 0.3);
        box-shadow:
          var(--shadow-md),
          inset 0 1px 0 oklch(from var(--glass-tint) l c h / 0.05);
      }

      .card-left {
        background: linear-gradient(
          135deg,
          light-dark(
            oklch(from var(--accent-primary) l c h / 0.06),
            oklch(from var(--accent-primary) l c h / 0.12)
          ),
          light-dark(
            oklch(from var(--accent-warm) l c h / 0.03),
            oklch(from var(--accent-warm) l c h / 0.06)
          )
        );
        border-inline-end-color: oklch(from var(--glass-tint) l c h / 0.08);

        .card-industry-icon {
          background: linear-gradient(
            135deg,
            oklch(from var(--accent-primary) l c h / 0.2),
            oklch(from var(--accent-warm) l c h / 0.1)
          );
          border-color: oklch(from var(--accent-primary) l c h / 0.25);
          color: var(--accent-primary);
          box-shadow: 0 4px 16px oklch(from var(--accent-primary) l c h / 0.15);
        }

        .card-role {
          color: var(--text-primary);
        }

        .card-industry {
          color: var(--text-secondary);
        }
      }

      .card-right {
        .card-title {
          color: var(--text-primary);
        }

        .card-description {
          color: var(--text-secondary);
        }
      }
    }

    .status-badge {
      &.status-badge--active {
        color: var(--color-success);
        background: oklch(from var(--color-success) l c h / 0.1);
        border-color: oklch(from var(--color-success) l c h / 0.2);
      }

      &.status-badge--completed {
        color: var(--color-info);
        background: oklch(from var(--color-info) l c h / 0.1);
        border-color: oklch(from var(--color-info) l c h / 0.2);
      }

      &.status-badge--pending {
        color: var(--text-secondary);
        background: oklch(from var(--glass-tint) l c h / 0.04);
        border-color: oklch(from var(--glass-tint) l c h / 0.1);
      }

      &.status-badge--not-yet {
        color: var(--color-info);
        background: oklch(from var(--color-info) l c h / 0.08);
        border-color: oklch(from var(--color-info) l c h / 0.2);
      }

      &.status-badge--expired {
        color: var(--text-secondary);
        background: oklch(from var(--glass-tint) l c h / 0.06);
        border-color: oklch(from var(--glass-tint) l c h / 0.16);
        opacity: 0.85;
      }
    }

    .meta-badge {
      background: oklch(from var(--glass-tint) l c h / 0.04);
      border-color: oklch(from var(--glass-tint) l c h / 0.08);
      color: var(--text-secondary);
    }

    .skills-tags {
      .skill-chip {
        background: oklch(from var(--accent-primary) l c h / 0.1);
        border-color: oklch(from var(--accent-primary) l c h / 0.2);
        color: var(--accent-primary);

        &.skill-chip--more {
          background: oklch(from var(--glass-tint) l c h / 0.04);
          border-color: oklch(from var(--glass-tint) l c h / 0.1);
          color: var(--text-secondary);
        }
      }
    }

    .progress-section {
      .progress-header {
        .progress-label {
          color: var(--text-secondary);
        }

        .progress-value {
          color: var(--text-primary);
        }
      }

      .progress-bar {
        background: oklch(from var(--glass-tint) l c h / 0.08);

        .progress-fill {
          background: linear-gradient(90deg, var(--accent-primary), var(--accent-warm));
        }
      }
    }

    .action-button {
      &.action-button--start {
        background: linear-gradient(
          135deg,
          light-dark(oklch(55% 0.22 25), oklch(65% 0.2 25)),
          light-dark(oklch(50% 0.24 15), oklch(60% 0.22 15))
        );
        color: white;
        box-shadow:
          0 4px 20px light-dark(oklch(55% 0.22 25 / 0.25), oklch(65% 0.2 25 / 0.3)),
          inset 0 1px 0 oklch(100% 0 0 / 0.1);

        &:hover {
          box-shadow:
            0 6px 28px light-dark(oklch(55% 0.22 25 / 0.35), oklch(65% 0.2 25 / 0.45)),
            inset 0 1px 0 oklch(100% 0 0 / 0.15);
          color: white;
        }
      }

      &.action-button--completed {
        background: oklch(from var(--glass-tint) l c h / 0.04);
        color: var(--text-secondary);
        border-color: oklch(from var(--glass-tint) l c h / 0.08);
      }

      &.action-button--not-yet {
        background: oklch(from var(--color-info) l c h / 0.08);
        color: var(--color-info);
        border-color: oklch(from var(--color-info) l c h / 0.25);
      }

      &.action-button--expired {
        background: oklch(from var(--glass-tint) l c h / 0.05);
        color: var(--text-secondary);
        border-color: oklch(from var(--glass-tint) l c h / 0.12);
      }
    }

    .empty-state {
      .empty-icon {
        background: oklch(from var(--glass-tint) l c h / 0.04);
        border-color: oklch(from var(--glass-tint) l c h / 0.08);
        color: var(--text-secondary);
      }

      p {
        color: var(--text-secondary);
      }
    }
  }
}

/* Components layer — layout, sizing, spacing only */
@layer components {
  .simulations-page {
    position: relative;
    max-inline-size: min(1100px, 100% - 2rem);
    margin-inline: auto;
    padding: var(--space-xl) var(--space-lg);
    min-block-size: calc(100dvb - 80px);

    .simulations-header {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      gap: var(--space-lg);
      margin-block-end: var(--space-2xl);

      .header-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        inline-size: 56px;
        block-size: 56px;
        border-radius: 16px;
        border: 1px solid;
        flex-shrink: 0;
      }

      h1 {
        font-family: var(--font-heading);
        font-size: var(--fs-xxl);
        font-weight: var(--fw-bold);
        letter-spacing: -0.02em;
        position: relative;

        &::after {
          content: '';
          position: absolute;
          inset-inline-start: 0;
          inset-block-end: -4px;
          inline-size: 100%;
          block-size: 3px;
          border-radius: 3px;
        }
      }

      .welcome-text {
        font-size: var(--fs-small);
        margin-block-start: var(--space-3xs);
      }
    }

    /* Assignments grid — vertical stack */
    .assignments-grid {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      gap: var(--space-lg);
    }

    /* Assignment card */
    .assignment-card {
      display: flex;
      border-radius: 16px;
      overflow: hidden;
      border: 1px solid;
      transition:
        border-color 0.3s ease,
        box-shadow 0.3s ease;

      .card-left {
        flex-shrink: 0;
        inline-size: 200px;
        padding: var(--space-xl);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        gap: var(--space-sm);
        border-inline-end: 1px solid;

        .card-industry-icon {
          display: flex;
          align-items: center;
          justify-content: center;
          inline-size: 64px;
          block-size: 64px;
          border-radius: 50%;
          border: 1px solid;
        }

        .card-role {
          font-family: var(--font-heading);
          font-weight: var(--fw-semibold);
          font-size: var(--fs-small);
        }

        .card-industry {
          font-size: var(--fs-xsmall);
        }
      }

      .card-right {
        flex: 1;
        padding: var(--space-xl);
        display: flex;
        flex-direction: column;
        gap: var(--space-md);

        .card-top {
          display: flex;
          justify-content: space-between;
          align-items: flex-start;
        }

        .card-title {
          font-family: var(--font-heading);
          font-size: var(--fs-xl);
          font-weight: var(--fw-semibold);
          margin-block-end: var(--space-xs);
        }

        .card-meta {
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          gap: var(--space-sm);
        }

        .card-description {
          font-size: var(--fs-small);
          line-height: 1.6;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }

        .card-footer {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-block-start: auto;
        }
      }
    }

    /* Status badges */
    .status-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 12px;
      border-radius: 100px;
      font-size: var(--fs-xsmall);
      font-weight: var(--fw-semibold);
      border: 1px solid;
    }

    /* Meta badges (difficulty, duration) */
    .meta-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 4px 12px;
      border-radius: 100px;
      font-size: var(--fs-xsmall);
      border: 1px solid;
      text-transform: capitalize;
    }

    /* Skills tags */
    .skills-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;

      .skill-chip {
        padding: 4px 10px;
        border-radius: 8px;
        font-size: var(--fs-xxsmall);
        font-weight: var(--fw-medium);
        border: 1px solid;
      }
    }

    /* Progress bar */
    .progress-section {
      flex: 1;
      margin-inline-end: var(--space-lg);

      .progress-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-block-end: 4px;
        font-size: var(--fs-xsmall);

        .progress-value {
          font-weight: var(--fw-semibold);
        }
      }

      .progress-bar {
        block-size: 8px;
        border-radius: 100px;
        overflow: hidden;

        .progress-fill {
          block-size: 100%;
          border-radius: 100px;
          transition: inline-size 0.5s ease;
        }
      }
    }

    /* Action buttons */
    .action-button {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 24px;
      border-radius: 12px;
      font-family: var(--font-heading);
      font-weight: var(--fw-semibold);
      font-size: var(--fs-small);
      text-decoration: none;
      cursor: pointer;
      flex-shrink: 0;
      transition: all 0.3s ease;

      &.action-button--start {
        border: none;

        &:hover {
          transform: translateY(-2px);
        }

        svg {
          transition: transform 0.25s ease-out;
        }

        &:hover svg {
          transform: translateX(3px);
        }
      }

      &.action-button--completed {
        border: 1px solid;
        cursor: default;
      }
    }

    /* Empty state */
    .empty-state {
      position: relative;
      z-index: 1;
      text-align: center;
      padding: var(--space-3xl) var(--space-xl);

      .empty-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        inline-size: 80px;
        block-size: 80px;
        margin-inline: auto;
        margin-block-end: var(--space-lg);
        border-radius: 50%;
        border: 1px solid;
      }

      h2 {
        font-family: var(--font-heading);
        font-size: var(--fs-xl);
        font-weight: var(--fw-semibold);
        margin-block-end: var(--space-sm);
      }

      p {
        font-size: var(--fs-small);
      }

      .empty-hint {
        margin-block-start: var(--space-sm);
        font-size: var(--fs-xsmall);
        opacity: 0.7;
      }
    }
  }

  /* Responsive: stack card panels on mobile */
  @media (max-width: 640px) {
    .simulations-page {
      padding: var(--space-lg) var(--space-md);

      .simulations-header {
        flex-direction: column;
        text-align: center;
      }

      .assignment-card {
        flex-direction: column;

        .card-left {
          inline-size: 100%;
          padding: var(--space-lg);
          border-inline-end: none;
          border-block-end: 1px solid oklch(from var(--glass-tint) l c h / 0.08);
          flex-direction: row;
          gap: var(--space-md);

          .card-industry-icon {
            inline-size: 48px;
            block-size: 48px;
          }
        }

        .card-right {
          .card-footer {
            flex-direction: column;
            gap: var(--space-md);
            align-items: stretch;

            .progress-section {
              margin-inline-end: 0;
            }

            .action-button {
              justify-content: center;
            }
          }
        }
      }
    }
  }
}