.reports-container {

  // Page Header
  .reports-header {
    margin-bottom: 1.5rem;

    .header-title {
      h1 {
        font-size: 1.5rem;
        font-weight: 700;
        color: #111827;
      }

      p {
        font-size: 0.8rem;
        color: #6B7280;
        margin: 0;
      }
    }
  }

  // Report Tabs
  .report-tabs {
    display: flex;
    gap: 0.625rem;
    margin-bottom: 1.5rem;
    padding: 0.3rem;
    background: white;
    border-radius: 0.875rem;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
    width: max-content;

    .report-tab {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.625rem;
      padding: 0.75rem 1.5rem;
      background: transparent;
      border: none;
      border-radius: 0.625rem;
      font-size: 0.9375rem;
      font-weight: 500;
      color: #6B7280;
      cursor: pointer;
      transition: all 0.2s;
      white-space: nowrap;

      svg {
        width: 18px;
        height: 18px;
      }

      &:hover {
        color: #374151;
        background: #F9FAFB;
      }

      &.active {
        background: linear-gradient(135deg, #FF6B00 0%, #FF8534 100%);
        color: white;
        box-shadow: 0 2px 8px rgba(255, 107, 0, 0.3);
        font-weight: 600;
      }
    }
  }

  // Report Section
  .report-section {
    margin-bottom: 2rem;

    .section-card {
      background: white;
      border-radius: 1rem;
      box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
      overflow: hidden;

      .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1.5rem;
        border-bottom: 1px solid #E5E7EB;
        flex-wrap: wrap;
        gap: 1rem;

        .header-left {
          display: flex;
          align-items: center;
          gap: 1rem;

          .icon-wrapper {
            width: 56px;
            height: 56px;
            border-radius: 0.875rem;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;

            &.blue {
              background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
            }

            &.orange {
              background: linear-gradient(135deg, #FF6B00 0%, #FF8534 100%);
            }

            &.green {
              background: linear-gradient(135deg, #10B981 0%, #059669 100%);
            }
          }

          .header-info {
            h2 {
              font-size: 1.25rem;
              font-weight: 700;
              color: #111827;
              margin: 0 0 0.25rem;
            }

            p {
              font-size: 0.875rem;
              color: #6B7280;
              margin: 0;
            }
          }
        }

        .header-actions {
          display: flex;
          gap: 0.75rem;

          .chart-toggle-btn {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.625rem 1rem;
            border: 1px solid #D1D5DB;
            border-radius: 0.625rem;
            font-size: 0.875rem;
            font-weight: 500;
            color: #374151;
            background: white;
            cursor: pointer;
            transition: all 0.2s;

            &:hover {
              border-color: #FF6B00;
              background: #FFF4F0;
              color: #FF6B00;
            }

            &.active {
              background: linear-gradient(135deg, #FF6B00 0%, #FF8534 100%);
              color: white;
              border-color: #FF6B00;
            }
          }

          select {
            padding: 0.625rem 1rem;
            border: 1px solid #D1D5DB;
            border-radius: 0.625rem;
            font-size: 0.875rem;
            font-weight: 500;
            color: #374151;
            background: white;
            cursor: pointer;
            transition: all 0.2s;

            &:hover {
              border-color: #9CA3AF;
            }

            &:focus {
              outline: none;
              border-color: #FF6B00;
              box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.1);
            }
          }

          .date-select {
            min-width: 150px;
          }

          .type-select {
            min-width: 160px;
          }
        }
      }

      .card-body {
        padding: 1.5rem;

        .transaction-group {
          margin-bottom: 2rem;

          &:last-child {
            margin-bottom: 1rem;
          }

          .group-header {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            margin-bottom: 1.25rem;
            padding-bottom: 0.75rem;
            border-bottom: 2px solid #F3F4F6;

            svg {
              color: #FF6B00;
            }

            h3 {
              font-size: 1.125rem;
              font-weight: 700;
              color: #111827;
              margin: 0;
            }

            .count-badge {
              white-space: nowrap;
              margin-left: auto;
              padding: 0.375rem 0.875rem;
              background: #FFF4F0;
              color: #FF6B00;
              font-size: 0.8125rem;
              font-weight: 600;
              border-radius: 0.5rem;
            }
          }
        }

        .summary-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
          gap: 1.25rem;
          margin-bottom: 1.5rem;

          .summary-item {
            padding: 1rem;
            border-radius: 0.875rem;
            transition: transform 0.2s;

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

            &.green {
              background: #D1FAE5;

              .summary-value {
                color: #059669;
              }
            }

            &.red {
              background: #FEE2E2;

              .summary-value {
                color: #DC2626;
              }
            }

            &.blue {
              background: #DBEAFE;

              .summary-value {
                color: #2563EB;
              }
            }

            &.orange {
              background: #FED7AA;

              .summary-value {
                color: #C2410C;
              }
            }

            &.grey {
              background: #F3F4F6;

              .summary-value {
                color: #374151;
              }
            }

            .summary-label {
              font-size: 0.875rem;
              color: #6B7280;
              font-weight: 500;
              margin-bottom: 0.5rem;
            }

            .summary-value {
              font-size: 1.75rem;
              font-weight: 700;
            }
          }
        }

        .charts-section {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 1.5rem;
          margin: 1.5rem 0;
          padding: 1.5rem;
          background: #F9FAFB;
          border-radius: 0.875rem;

          .chart-container {
            background: white;
            padding: 1.25rem;
            border-radius: 0.75rem;
            box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);

            .recharts-sector,
            .recharts-layer {
              outline: none !important;
              border: none !important;
            }

            .chart-header {
              display: flex;
              align-items: center;
              gap: 0.5rem;
              margin-bottom: 1rem;

              svg {
                color: #FF6B00;
              }

              h3 {
                font-size: 1rem;
                font-weight: 700;
                color: #111827;
                margin: 0;
              }
            }
          }
        }

        .download-actions {
          display: flex;
          gap: 1rem;
          padding-top: 0.5rem;
          // flex-wrap: wrap;
          width: max-content;

          .download-btn {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.625rem;
            padding: 0.875rem 1.5rem;
            border: none;
            border-radius: 0.75rem;
            font-size: 0.9375rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
            white-space: nowrap;

            &.pdf {
              background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
              color: white;

              &:hover {
                transform: translateY(-2px);
                box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
              }
            }

            &.excel {
              background: linear-gradient(135deg, #10B981 0%, #059669 100%);
              color: white;

              &:hover {
                transform: translateY(-2px);
                box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
              }
            }
          }
        }
      }
    }
  }


  .PoiChartChartMain {
    width: 100%;
    height: max-content;
    max-height: 50vh;
    overflow: auto;
    padding: 12px;
    background-color: #ffecec;
    border-radius: 8px;
  }

  .PoiChartChart {
    display: flex;
    align-items: center;
    gap: 10px;

  }

  .indicationOfColor {
    width: 15px;
    height: 15px;
    border-radius: 5pc;
  }

  .indicationOfValue {
    font-family: "Poppins";

    div {
      font-size: 14px;
      color: #222;
      font-weight: 500;
    }

    p {
      font-size: 13px;
      color: #444;
    }
  }


  .recharts-sector,
  .recharts-layer {
    outline: none !important;
    border: none !important;
  }

  // Mobile Responsive Styles
  @media (max-width: 1024px) {
    .report-tabs {
      // flex-direction: column;

      .report-tab {
        justify-content: center;
      }
    }
  }

  @media (max-width: 768px) {
    .reports-header {
      .header-title h1 {
        font-size: 1.5rem;
      }

      p {
        font-size: 0.875rem;
      }
    }

    .report-tabs {
      padding: 0.1.5rem !important;
      width: 100% !important;

      .report-tab {
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
      }
    }

    .report-section {
      .section-card {
        .card-header {
          flex-direction: column;
          align-items: flex-start !important;
          gap: 1rem;
          padding: 1rem;

          .icon-wrapper {
            width: 40px !important;
            height: 40px !important;
            border-radius: 6px !important;
            padding: 10px !important;
          }

          .header-info h2 {
            font-size: 1.125rem !important;
          }

          .header-info p {
            font-size: 0.7rem !important;
          }

          .header-actions {
            width: 100%;
            flex-wrap: wrap;
            gap: 0.5rem;
            white-space: nowrap;

            .chart-toggle-btn,
            select {
              flex: 1;
              min-width: 120px;
              font-size: 0.75rem;
              padding: 0.625rem 0.875rem;
            }
          }
        }

        .card-body {
          padding: 0.7rem;

          .transaction-group {
            margin-bottom: 1.5rem;

            .group-header {
              font-size: 1rem;
              padding-bottom: 0.625rem;

              h3 {
                font-size: 14px;
              }

              .count-badge {
                font-size: 0.65rem;
                padding: 0.25rem 0.625rem;
              }
            }
          }

          .summary-grid {
            grid-template-columns: 1fr;
            gap: 1rem;
          }

          .charts-section {
            grid-template-columns: 1fr;
            padding: 0;
            gap: 1rem;

            .chart-container {
              padding: 1rem;

              .chart-header h3 {
                font-size: 0.9375rem;
              }
            }

            // Make charts responsive
            .recharts-wrapper {
              width: 100% !important;
            }

            .recharts-surface {
              width: 100% !important;
            }
          }

          .download-actions {
            // flex-direction: column;
            gap: 0.75rem;

            .download-btn {
              width: 100%;
              padding: 0.875rem 1.25rem;
            }
          }
        }
      }
    }
  }

  @media (max-width: 480px) {

    .summary-label {
      margin-bottom: 0 !important;
    }

    .report-tabs .report-tab {
      font-size: 0.8rem !important;
      padding: 0.625rem 0.3rem !important;
      gap: 4px !important;

      svg {
        width: 14px !important;
        height: 14px !important;
      }
    }

    .summary-item {
      .summary-value {
        font-size: 1.25rem;
      }
    }

    .download-btn {
      font-size: 0.8rem !important;
      padding: 0.5rem 0.5rem !important;
      flex: unset !important;
    }
  }

  @media (max-width: 992px) {
    .download-actions {
      width: 100% !important;
    }
  }
}