/**
 * Home dashboard widgets — layout + scoped overrides for the maturity-by-domain
 * card.
 *
 * The risk and asset chart widgets simply reuse .risk-chart-card /
 * .asset-chart-card from css/risk-register.css. This file is scoped to
 * .home-dashboard-widgets so it can't bleed into the standalone Risk
 * Register / Asset Register / Dashboard pages.
 */

/* ---- Widgets grid: row 1 = risk charts; row 2 = asset; row 3 = assessment dashboard ---- */

.home-dashboard-widgets {
    margin-top: 0;
}

/* Risk row: Open & Under Review 40%, By Business Unit 60% (lg+) */
@media (min-width: 992px) {
    .home-dashboard-widgets .home-risk-charts-row > .home-risk-chart-col--open {
        flex: 0 0 auto;
        width: 40%;
    }

    .home-dashboard-widgets .home-risk-charts-row > .home-risk-chart-col--bu {
        flex: 0 0 auto;
        width: 60%;
    }

}

.home-dashboard-widgets .home-widget {
    display: flex;
    flex-direction: column;
}

.home-dashboard-widgets .home-chart-card .card-header {
    text-align: left;
}

.home-dashboard-widgets .home-chart-card .card-header h6 {
    font-weight: 600;
    color: #314d76;
}

/* Open & Under Review + BU: fixed-height canvas wrap (same pattern as
   risk-register.css). Chart.js uses maintainAspectRatio:false so the plot
   fills the wrap without CSS aspect-ratio fighting flex layout on resize. */
.home-dashboard-widgets .risk-chart-wrapper--active .risk-chart-canvas-wrap,
.home-dashboard-widgets .risk-chart-wrapper--business-unit .risk-chart-canvas-wrap {
    height: 280px;
}

.home-dashboard-widgets .risk-chart-wrapper--active .risk-chart-canvas-wrap canvas,
.home-dashboard-widgets .risk-chart-wrapper--business-unit .risk-chart-canvas-wrap canvas {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
}

.home-dashboard-widgets .risk-chart-wrapper--active .risk-chart-x-axis-label,
.home-dashboard-widgets .risk-chart-wrapper--business-unit .risk-chart-x-axis-label {
    margin-top: 0.75rem;
    text-align: center;
    font-size: 12px;
    font-weight: 500;
    color: #666;
    flex-shrink: 0;
}

/* Asset chart: same fixed-height wrap + maintainAspectRatio:false as risk widgets */
.home-dashboard-widgets .asset-chart-wrapper--home .asset-chart-canvas-wrap {
    height: 280px;
}

.home-dashboard-widgets .asset-chart-wrapper--home .asset-chart-canvas-wrap canvas {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
}

.home-dashboard-widgets .asset-chart-wrapper--home .asset-chart-x-axis-label {
    margin-top: 0.75rem;
    text-align: center;
    font-size: 12px;
    font-weight: 500;
    color: #666;
}

/* Chart plot region: fixed height + overlay anchored here (not the whole card body) */
.home-dashboard-widgets .home-chart-plot-area {
    position: relative;
    min-height: 300px;
}

.home-dashboard-widgets .risk-chart-wrapper--active .home-chart-plot-area {
    min-height: calc(280px + 1.75rem);
}

.home-dashboard-widgets .risk-chart-wrapper--business-unit .home-chart-plot-area,
.home-dashboard-widgets .asset-chart-wrapper--home .home-chart-plot-area {
    min-height: calc(280px + 1.75rem);
}

/* Empty state: dim chart behind overlay (same idea as .gauge-content.loading > .row) */
.home-dashboard-widgets .is-chart-empty .home-chart-plot-area > :not(.home-chart-empty-overlay) {
    opacity: 0.35;
    pointer-events: none;
}

.home-dashboard-widgets .home-chart-empty-overlay.incomplete-project-overlay {
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.home-dashboard-widgets .home-chart-empty-overlay .overlay-content {
    padding: 1rem;
}

.home-dashboard-widgets .home-chart-empty-overlay .overlay-message {
    font-size: 0.95rem;
    margin-bottom: 1rem;
}

/* ---- Project Dashboard widget (maturity by safeguard domain) ---- */

.home-project-dashboard-widget .home-project-dashboard-empty {
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.home-project-dashboard-widget .home-assessment-dashboard-empty-state {
    width: 100%;
}

.home-project-dashboard-widget .home-assessment-dashboard-empty-state .overlay-content {
    text-align: center;
    max-width: 500px;
    margin: 0 auto;
    padding: 1rem;
}

.home-project-dashboard-widget .home-assessment-dashboard-empty-state .overlay-message {
    font-size: 0.95rem;
    font-weight: 500;
    color: #495057;
    margin-bottom: 1rem;
}

.home-project-dashboard-widget .card-header h6 {
    font-weight: 600;
    color: #314d76;
}

.home-project-dashboard-widget .home-project-dashboard-controls {
    align-items: stretch;
    /* Dropdowns extend below the selects; keep them above the benchmark gauge (next sibling). */
    position: relative;
    z-index: 20;
}

.home-project-dashboard-widget .home-project-dashboard-controls .select2-container--open {
    z-index: 21;
}

.home-project-dashboard-widget .home-project-dashboard-benchmark {
    position: relative;
    z-index: 1;
}

/* The dashboard bundle initialises Select2 with width: '300px' which it sets
   as inline style on the container. Override with !important so the controls
   shrink to the widget's column width. */
.home-project-dashboard-widget .home-project-dashboard-controls .select2-container {
    min-width: 0;
    flex: 1 1 160px;
    width: auto !important;
    max-width: 100%;
}

.home-project-dashboard-widget .home-project-dashboard-controls .select2-container--default .select2-selection--single {
    height: calc(1.5em + 0.5rem + 2px);
    border-radius: 0.375rem;
    border: 1px solid #ced4da;
}

.home-project-dashboard-widget .home-project-dashboard-controls .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: calc(1.5em + 0.5rem);
    font-size: 0.875rem;
    padding-left: 0.5rem;
}

.home-project-dashboard-widget .home-project-dashboard-controls .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: calc(1.5em + 0.5rem);
}

.home-project-dashboard-widget .home-dashboard-placeholder {
    background: #f8f9fa;
    border: 1px dashed #dee2e6;
    border-radius: 0.375rem;
}

.home-project-dashboard-widget .home-project-dashboard-charts-row {
    margin-top: 0;
}

.home-project-dashboard-widget .home-dashboards-wrapper {
    min-height: 280px;
}

/* The chart wrapper inside the maturity-by-domain card.
   createChartFromTable() sets the canvas height to ~50px per label (capped
   at 1000px) and uses Chart.js maintainAspectRatio:false, so the canvas
   needs to be allowed to grow vertically. Do NOT cap the height here —
   matches the dashboard-crfs.php template which has no height on .chart. */
.home-project-dashboard-widget .home-domain-row .chart {
    position: relative;
    width: 100%;
    overflow-x: auto;
}

/* On the home page we only want the chart (not the table). dashboard-crfs.php
   normally shows the table via a "View Table" toggle — that toggle isn't on
   the home page widget so the table sits inside .d-none and only feeds the
   chart through createChartFromTable() (which reads td.crf-domain-* values). */
.home-project-dashboard-widget .home-domain-row .data {
    display: none !important;
}

/* ---- Benchmark gauge (right column inside assessment dashboard) ---- */

.home-project-dashboard-widget .home-project-dashboard-gauge .card {
    background: #f8f9fa;
    border: 1px solid #e9ecef !important;
    border-radius: 0.375rem;
}

.home-project-dashboard-widget .home-project-dashboard-gauge .gauge-chart-description h5 {
    font-size: 1.1rem;
}

.home-project-dashboard-widget .home-project-dashboard-gauge .overall-score {
    font-size: 1.25rem;
}

.home-project-dashboard-widget .home-benchmark-gauge-canvas-wrap {
    position: relative;
    height: 200px;
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
}

.home-project-dashboard-widget .home-project-dashboard-gauge .overlay-content {
    padding: 1rem;
}

.home-project-dashboard-widget .home-project-dashboard-gauge .overlay-message {
    font-size: 0.95rem;
}

@media (max-width: 767.98px) {
    .home-project-dashboard-widget .home-benchmark-gauge-canvas-wrap {
        max-width: 100%;
        height: 180px;
    }
}

/* ---- Project results panel (benchmark + charts) with overlay loader ---- */

.home-project-dashboard-widget .home-project-dashboard-results-panel {
    position: relative;
    min-height: 320px;
}

.home-project-dashboard-widget .home-project-dashboard-results-panel.home-project-dashboard-results-loading .home-project-dashboard-results-content {
    opacity: 0.35;
    pointer-events: none;
}

.home-project-dashboard-widget .home-project-dashboard-results-panel .home-project-dashboard-loader {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-height: 320px;
    background: rgba(255, 255, 255, 0.92);
    z-index: 15;
    --point-color: #5789bb;
    --size: 3px;
}

.home-project-dashboard-widget .home-project-dashboard-results-panel.home-project-dashboard-results-loading .home-project-dashboard-loader {
    display: block;
}

.home-project-dashboard-widget .home-project-dashboard-loader .container {
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    height: 100%;
    min-height: 320px;
}

.home-project-dashboard-widget .home-project-dashboard-loader .loader_element {
    border-radius: 100%;
    border: var(--size) solid var(--point-color);
    margin: calc(var(--size) * 2);
}

.home-project-dashboard-widget .home-project-dashboard-loader .loader_element:nth-child(1) {
    animation: preloader 0.6s ease-in-out alternate infinite;
}

.home-project-dashboard-widget .home-project-dashboard-loader .loader_element:nth-child(2) {
    animation: preloader 0.6s ease-in-out alternate 0.2s infinite;
}

.home-project-dashboard-widget .home-project-dashboard-loader .loader_element:nth-child(3) {
    animation: preloader 0.6s ease-in-out alternate 0.4s infinite;
}

/* ---- Responsive tweaks ---- */

@media (max-width: 575.98px) {
    .home-project-dashboard-widget .home-project-dashboard-controls {
        flex-direction: column;
    }
    .home-project-dashboard-widget .home-project-dashboard-controls .select2-container {
        width: 100% !important;
    }
}