.Graph-main-div {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.Graphical-div-1 {
    max-width: 596px;
    min-width: 48%;
    height: 424px;
    background-color: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 0.5rem;
    margin: 1rem;
    margin-left: 0px;
    margin-top: 0px;
}

.Graphical-div-2 {
    width: 100%;
    height: 524px;
    background-color: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 0.5rem;
    margin: 1rem;
    margin-left: 0px;
    margin-top: 0px;
}

.Graph-Header {
    width: 100%;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
}

.Graph-title {
    letter-spacing: -0.025rem;
    line-height: 1rem;
    font-weight: 600;
    font-size: 1.5rem;
    color: var(--text-primary);
}

.Graph-subtitle {
    margin-top: 3px;
    margin-bottom: 3px;
    color: var(--text-tertiary);
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.Graph-Body {
    width: 100%;
    padding: 1.5rem;
    padding-top: 0rem;
}

.common-chart {
    font-size: 0.75rem;
    line-height: 1rem;
    justify-content: center;
    height: 300px;
    display: flex;
}

.common-chart-horizontal {
    font-size: 0.75rem;
    line-height: 1rem;
    justify-content: center;
    height: 400px;
    display: flex;
}

.scroll-wrapper {
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
}

.scroll-wrapper ::ng-deep .apexcharts-canvas {
    min-width: 100%;
    min-height: 424px;
}

.scroll-wrapper-horizontal {
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
}

.scroll-wrapper-horizontal ::ng-deep .apexcharts-canvas {
    min-width: 100%;
    min-height: 524px;
}

.chartstyle {
    width: 100%;
    height: 100%;
}

// Tooltip custom styles for charts
:host ::ng-deep .apexcharts-tooltip {
    background: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-subtle) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* Tooltip header (date section) */
:host ::ng-deep .apexcharts-tooltip-title {
    background: var(--bg-subtle) !important;
    color: var(--text-secondary) !important;
    border-bottom: 1px solid var(--border-subtle) !important;
}

/* Field name (Net Profit / Revenue) */
:host ::ng-deep .apexcharts-tooltip-text-y-label {
    color: var(--text-secondary) !important;
}

/* Value */
:host ::ng-deep .apexcharts-tooltip-text-y-value {
    color: var(--text-primary) !important;
}

/* Marker text alignment */
:host ::ng-deep .apexcharts-tooltip-series-group {
    color: var(--text-secondary) !important;
}

/* X axis hover tooltip (Sep-2024 box) */
:host ::ng-deep .apexcharts-xaxistooltip {
    background: var(--bg-surface) !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 6px;
}

/* Arrow under the tooltip */
:host ::ng-deep .apexcharts-xaxistooltip-bottom:before {
    border-bottom-color: var(--bg-surface) !important;
}

:host ::ng-deep .apexcharts-xaxistooltip-bottom:after {
    border-bottom-color: var(--bg-surface) !important;
}