/* Dashboard layout & spacing.
   Standardized spacing tokens live here so every dashboard section, card and
   header shares the same margins, padding and radius. Consumed by
   maindashboard_new.html and the inclworkflowsummary / inclchangerequestsummary
   partials. */

:root {
    --dash-radius: 10px;              /* one radius for all dashboard cards/sections */
    --dash-gap: 10px;                 /* flex gap between chart cards & header icon gap */
    --dash-section-margin-top: 20px;  /* space above each section header */
    --dash-section-margin-bottom: 15px;
    --dash-card-padding: 1.25rem;     /* matches Bootstrap .card-body & .card-body-dashboard */
    --dash-border: 1px solid #dee2e6; /* app border convention */
    --dash-accent: #0d6efd;           /* hover accent */
    --dash-chart-height: 340px;       /* shared height for all three chart columns */
}

/* Lay out the action cards in a single horizontal, scrollable row */
/* Row + flanking arrow buttons */
.chart-scroller {
    display: flex;
    align-items: center;
    gap: 6px;
    /* Single frame around the whole carousel (arrows + chart) instead of a
       border on each inner card. Fixed outer height matches the perf card so the
       two frames line up (border-box: height includes padding + border). */
    height: var(--dash-chart-height);
    border: var(--dash-border);
    border-radius: var(--dash-radius);
    padding: 6px;
}

.dashboard-chart-row {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;                       /* fill the fixed-height .chart-scroller */
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    align-items: stretch;               /* each card fills the row height */
    gap: var(--dash-gap);
    scrollbar-width: none;       /* Firefox: hide the scrollbar */
    -ms-overflow-style: none;    /* IE/Edge */
}

.dashboard-chart-row::-webkit-scrollbar {
    display: none;               /* Chrome/Safari/Edge */
}

/* Chart cards: consistent radius, no longer inheriting #smallcard styling.
   Each card fills the full carousel width so exactly ONE chart shows at a time. */
.dashboard-chart-row > .card {
    flex: 0 0 100%;
    max-width: 100%;
    height: 100%;
    border: 0;                 /* frame is on .chart-scroller now */
    box-shadow: none;
    border-radius: var(--dash-radius);
}

/* Card body is a column: chart area grows to fill, caption pinned at the bottom. */
.dashboard-chart-row .card-body,
.dashboard-chart-row .card-body-dashboard {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;     /* chart is responsive, so no scrolling/clipping needed */
    text-align: center;
}

/* Holder for the responsive Plotly sunburst: fills the space above the caption.
   The Plotly wrapper div and graph div are forced to 100% so the chart scales
   to the column at any zoom instead of overflowing a fixed 300px box. */
.dashboard-chart-row .dash-chart {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
}

.dashboard-chart-row .dash-chart > div,
.dashboard-chart-row .dash-chart .plotly-graph-div {
    width: 100% !important;
    height: 100% !important;
}

.dashboard-chart-row .chart-caption {
    flex: 0 0 auto;
}

.chart-scroll-btn {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border: var(--dash-border);
    border-radius: 50%;
    background: #fff;
    color: #495057;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
    transition: all .15s ease;
}

.chart-scroll-btn:hover {
    background: var(--dash-accent);
    color: #fff;
    border-color: var(--dash-accent);
}

.chart-scroll-btn[disabled] {
    opacity: .35;
    cursor: default;
    box-shadow: none;
    background: #fff;
    color: #495057;
    border-color: #dee2e6;
}

.chart-caption {
    text-align: center;
    padding: 6px 8px;
    font-weight: 600;
    font-size: 0.85em;
}

.dashboard-section-header {
    display: flex;
    align-items: center;
    gap: var(--dash-gap);
    padding: 12px 18px;
    margin: var(--dash-section-margin-top) 0 var(--dash-section-margin-bottom);
    background: #f8f9fa;
    border: var(--dash-border);
    border-radius: var(--dash-radius);

    color: #212529;
    text-decoration: none;
    cursor: pointer;
    font-weight: bold;

    transition: all .2s ease;
}

/* The first row of section headers sits directly beneath the metric dashboard
   (inclnicedashboard), which already contributes its own bottom spacing
   (#smallcard padding-bottom + .responsive margin-bottom). Drop the top margin
   here so the two don't stack into an oversized gap. Later section headers keep
   their normal top margin for separation. */
.mobileremoved .col-md-12 > .row:first-child .dashboard-section-header {
    margin-top: 0;
}

.dashboard-section-header:hover {
    background: #e9f2ff;
    border-color: var(--dash-accent);
    box-shadow: 0 2px 8px rgba(13, 110, 253, .15);
    transform: translateY(-1px);
    text-decoration: none;
}

.dashboard-section-header:hover span {
    color: var(--dash-accent);
}

.dashboard-section-header i:last-child {
    margin-left: auto;
    opacity: .5;
    transition: transform .2s ease;
}

.dashboard-section-header:hover i:last-child {
    transform: translateX(4px);
    opacity: 1;
}

/* Rounded container to match the chart cards' curvy corners */
.dashboard-section-card {
    border: var(--dash-border);
    border-radius: var(--dash-radius);
    overflow: hidden;
}

.dashboard-section-card .card-body,
.dashboard-section-card .card-body-dashboard {
    border-radius: var(--dash-radius);
    padding: var(--dash-card-padding);
    overflow: auto;
}

/* Approver Performance column: fix the card height to the shared chart height so
   the three columns line up, and let the (width-responsive) Google line chart
   fill it. The chart redraws to this height on load/zoom (see googlecharts.js). */
.approver-perf-card {
    height: var(--dash-chart-height);   /* outer frame matches .chart-scroller */
}

.approver-perf-card .card-body {
    height: 100%;
    overflow: hidden;
}

#approverlinecharted {
    width: 100%;
    height: 100%;
}