.active-jobs-panel {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 2px 8px 0 rgba(44, 62, 80, 0.06), 0 1.5px 4px 0 rgba(44, 62, 80, 0.03);
  padding: 1.5rem 2rem;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;

  .panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;

    .panel-title {
      font-size: 1.3rem;
      font-weight: 600;
      color: #1a211c;
      margin: 0;
    }

    .view-all-link {
      font-size: 0.95rem;
      color: #2e7d32;
      font-weight: 600;
      cursor: pointer;
      text-decoration: none;

      &:hover {
        text-decoration: underline;
      }
    }
  }

  // Empty and error states
  .state-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    gap: 0.75rem;
    padding: 3rem 1rem;

    i {
      font-size: 2rem;
    }

    span {
      font-size: 1rem;
      font-weight: 500;
    }

    &.empty-state {
      color: #9e9e9e;
    }

    &.error-state {
      color: #c62828;
    }
  }

  // Skeleton loaders
  .skeleton-row {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    border: 1px solid #eef0f2;
    border-radius: 12px;
    margin-bottom: 1rem;
    overflow: hidden;
    animation: skeleton-pulse 1.4s ease-in-out infinite;

    .skeleton-bar {
      width: 6px;
      background: #e0e0e0;
    }

    .skeleton-content {
      flex: 1;
      padding: 1.2rem 1.4rem;
      display: flex;
      flex-direction: column;
      gap: 0.5rem;

      .skeleton-line {
        background: #e0e0e0;
        border-radius: 4px;
        height: 12px;

        &.wide { width: 55%; }
        &.narrow { width: 30%; }
      }

      .skeleton-progress {
        background: #e0e0e0;
        border-radius: 6px;
        height: 10px;
        width: 100%;
        margin-top: 0.25rem;
      }
    }
  }

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

  .jobs-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
    padding: 0.25rem 0.1rem;
  }

  .job-row {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    border: 1px solid #eef0f2;
    border-radius: 12px;
    box-shadow: 0 1px 4px 0 rgba(44, 62, 80, 0.07);
    background: #fff;
    cursor: pointer;
    transition: box-shadow 0.15s ease, background 0.15s ease;
    overflow: hidden;

    &:hover {
      background: #f6faf7;
      box-shadow: 0 3px 10px 0 rgba(44, 62, 80, 0.12);
    }

    // Left status color bar
    .status-bar {
      width: 6px;
      border-radius: 12px 0 0 12px;
      flex-shrink: 0;
      align-self: stretch;
    }

    &.status-new .status-bar       { background: #1976d2; }
    &.status-in-progress .status-bar { background: #f9a825; }
    &.status-completed .status-bar  { background: #2e7d32; }

    &.status-new .status-arrow       { color: #1976d2; }
    &.status-in-progress .status-arrow { color: #f9a825; }
    &.status-completed .status-arrow  { color: #2e7d32; }

    .job-row-content {
      flex: 1;
      padding: 1.5rem 1.2rem 1.5rem 1.4rem;

      .job-row-top {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        margin-bottom: 0.5rem;

        .job-info {
          display: flex;
          flex-direction: column;

          .job-title {
            font-size: 1rem;
            font-weight: 600;
            color: #1a211c;

            .status-arrow {
              margin-right: 0.3rem;
              font-weight: 700;
            }
          }

          .job-client {
            font-size: 0.85rem;
            color: #6b7680;
            margin-top: 0.1rem;
            padding-left: 1.2rem;
          }
        }

        .status-badge {
          font-size: 0.78rem;
          font-weight: 700;
          padding: 0.3rem 1rem;
          border-radius: 999px;
          letter-spacing: 0.06em;
          white-space: nowrap;
          text-transform: uppercase;
          color: #fff;

          &.badge-new {
            background: #1976d2;
          }

          &.badge-in-progress {
            background: #f9a825;
          }

          &.badge-completed {
            background: #2e7d32;
          }
        }
      }

      .job-row-bottom {
        .progress-metrics-row {
          display: flex;
          align-items: center;
          gap: 1rem;

          .progress-bar-wrap {
            flex: 1 1 auto;
            background: #e0e0e0;
            border-radius: 6px;
            height: 12px;
            overflow: hidden;

            .progress-bar-fill {
              height: 100%;
              background: linear-gradient(to right, #66bb6a, #2e7d32);
              border-radius: 6px;
              transition: width 0.3s ease;
            }
          }

          .job-metrics {
            display: flex;
            align-items: center;
            flex-shrink: 0;
            gap: 0.4rem;
            white-space: nowrap;

            .metric {
              font-size: 0.85rem;
              color: #1a211c;
              font-weight: 600;

              i {
                margin-right: 0.2rem;
                color: #2e7d32;
                font-size: 0.8rem;
              }
            }

            .metrics-sep {
              color: #bbb;
              font-size: 0.85rem;
            }
          }
        }

        &.not-started {
          display: flex;
          align-items: center;
          justify-content: space-between;

          .not-started-label {
            font-size: 0.85rem;
            color: #9e9e9e;
            font-style: italic;

            i {
              margin-right: 0.25rem;
            }
          }

          .job-metrics {
            display: flex;
            align-items: center;
            gap: 0.4rem;
            white-space: nowrap;

            .metric {
              font-size: 0.85rem;
              color: #6b7680;
              font-weight: 500;
            }

            .metrics-sep {
              color: #bbb;
              font-size: 0.85rem;
            }
          }
        }
      }
    }
  }
}

// Tablet ≤1024px
@media (max-width: 1024px) {
  .active-jobs-panel {
    .job-row .job-row-content { padding: 1.25rem 1rem 1.25rem 1.1rem; }
  }
}

// Mobile ≤768px
@media (max-width: 768px) {
  .active-jobs-panel {
    padding: 1.25rem 1.25rem;
    border-radius: 16px;

    .panel-header {
      .panel-title    { font-size: 0.9rem; }
      .view-all-link  { font-size: 0.85rem; }
    }

    .job-row .job-row-content {
      padding: 1rem 0.85rem 1rem 1rem;

      .job-row-top {
        .job-info .job-title { font-size: 0.9rem; }
        .job-info .job-client { font-size: 0.78rem; }
        .status-badge { font-size: 0.72rem; padding: 0.15rem 0.55rem; }
      }

      .job-row-bottom .progress-metrics-row {
        gap: 0.6rem;
        .job-metrics .metric { font-size: 0.78rem; }
        .job-metrics .metrics-sep { font-size: 0.78rem; }
      }
    }
  }
}

// Small mobile ≤480px
@media (max-width: 480px) {
  .active-jobs-panel {
    padding: 1rem;

    .job-row .job-row-content {
      padding: 0.875rem 0.75rem 0.875rem 0.875rem;
    }
  }
}