/* FinOps Hub Styles - Power-Up Platform
   Minimal custom styles - most styling via Tailwind CSS classes */

/* Chart container sizing */
.chart-container {
    position: relative;
    height: 300px;
}

/* Trend indicators */
.trend-up {
    color: #dc2626; /* red-600 */
}

.trend-down {
    color: #16a34a; /* green-600 */
}

/* Microsoft Discount Slider */
#discountSlider {
    cursor: pointer;
    accent-color: #2563eb; /* blue-600 */
}

#discountSlider::-webkit-slider-thumb {
    cursor: grab;
}

#discountSlider::-webkit-slider-thumb:active {
    cursor: grabbing;
}

/* Service row transition for discount animation */
.service-row {
    transition: background-color 0.3s ease;
}

/* Chart canvas max height */
canvas {
    max-height: 400px;
}

/* Card hover effect */
.cost-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}

.cost-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Loading spinner for charts */
.chart-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.chart-loading .spinner {
    width: 2rem;
    height: 2rem;
    border: 3px solid #e5e7eb;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Hidden scrollbar for nav overflow */
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;
}