/* ==========================================================================
   FEATURE: SCORECARD VISUALIZATIONS
   Source: Renamed from Scorecard.css
   Usage: Load for dashboards using the Roadmap or Pushable Buttons
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Pillar Roadmap (Arrow Visualization)
   -------------------------------------------------------------------------- */
.pillar-roadmap-label {
    width: 10em;
    height: 3em;
    margin-top: 2px;
    justify-content: center;
    display: flex;
    align-items: center;
    margin-right: 8px;
}

.pillar-roadmap-block-heading {
    width: 8em;
    height: 3em;
    margin-left: 2px;
    justify-content: center;
    display: flex;
    align-items: center;
}

.pillar-roadmap-block {
    width: 8em;
    height: 3em;
    margin-left: 2px;
    position: relative;
}

.pillar-roadmap-block:after {
    content: " ";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0;
    height: 100%;
    right: 0;
    background-color: inherit;
    border-left: .8em solid transparent;
    border-top: 1.5em solid white;
    border-bottom: 1.5em solid white;
}

.pillar-roadmap-block:not(:first-child):before {
    content: " ";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0;
    height: 100%;
    left: 0;
    background-color: inherit;
    border-left: .8em solid #ffffff;
    border-top: 1.5em solid transparent;
    border-bottom: 1.5em solid transparent;
}

.aliceblue {
    background-color: aliceblue;
}

/* --------------------------------------------------------------------------
   2. 3D Pushable Button
   -------------------------------------------------------------------------- */
.pushable {
    background: linear-gradient(145deg, #2196F3, #2196F3);
    /* Blue to Teal Gradient */
    border-radius: 12px;
    border: none;
    padding: 0;
    cursor: pointer;
    outline-offset: 4px;
    box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.2);
    /* Shadow for 3D effect */
    transition: all 0.2s ease-in-out;
    /* Smooth transitions */
}

.front {
    display: block;
    padding: 12px 42px;
    border-radius: 12px;
    font-size: 1.25rem;
    font-weight: bold;
    background: linear-gradient(145deg, #2196F3, #2196F3);
    /* Opposite gradient for inner effect */
    color: white;
    transform: translateY(-6px);
    /* Lift effect */
    text-align: center;
    box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.2);
    /* Shadow for the inner element */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.pushable:active .front {
    transform: translateY(-2px);
    /* Pressed effect */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
    /* Adjusted shadow */
}

/* Optional Hover Effect */
.pushable:hover {
    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.3);
    /* Glow effect on hover */
}

/* --------------------------------------------------------------------------
   3. Mobile Responsive Patches
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 768px) {
    canvas {
        height: 250px !important;
        width: 100% !important;
    }

    .roadmap-mobile {
        font-size: 0.7em !important;
        overflow-wrap: anywhere;
        display: block !important;
    }

    .text-align-left-md {
        text-align: center !important;
    }

    .card-progress {
        margin-right: 0px !important;
    }
}