/* SteelSeries Meters Page Styles */

.gauge-container {
    position: relative;
    display: block;
    margin: 0 auto;
    width: 100%;
    max-width: 100%; /* allow container to fill the column */
    /* Prefer a square container; browsers that support aspect-ratio will keep it square */
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gauge-container canvas {
    display: block;
    margin: 0 auto;
    box-shadow: rgba(0,0,0,0.3) 2px 2px 2px;
    border-radius: 4px;
    /* Keep a fixed maximum size for desktop to avoid stepping/resizing issues */
    width: 100%;
    height: auto;
    max-width: 221px;
}

/* Ensure the drawn gauge is centered in the circular mask and not clipped */
.gauge-container {
    overflow: hidden; /* mask drawing to circle */
}

.gauge-container canvas {
    position: absolute;
    left: 0;
    top: 0;
    transform: none;
    /* Fill the parent square exactly so the drawing coordinates match the canvas size */
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    box-shadow: none; /* let parent card show shadow, avoid double shadows */
}

/* SteelSeries-achtige styling voor de cards */
.card-body {
    padding: 1.5rem;
}

.card-title {
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--tblr-body-color);
}

/* Verbeterde spacing voor de meters */
.h5 {
    font-weight: 700;
    color: var(--tblr-primary);
}

.text-secondary {
    color: var(--tblr-secondary) !important;
}

/* Dark mode ondersteuning */
[data-theme="dark"] .card {
    background-color: var(--tblr-card-bg);
    border-color: var(--tblr-border-color);
}

[data-theme="dark"] .card-title {
    color: var(--tblr-body-color);
}

/* Responsive aanpassingen */
@media (max-width: 768px) {
    .col-6 {
        width: 100% !important;
    }

    .gauge-container {
        /* JS will set exact width/height to 181px to match canvas, avoid seams */
        display: block;
        line-height: 0;
        border-radius: 50%;
        overflow: hidden;
        margin: 0 auto;
        padding: 0;
        /* Help mobile browsers use GPU compositing and avoid subpixel artifacts */
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
        will-change: transform;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        /* Match the card background to hide thin seams */
        background: var(--tblr-card-bg, #fff);
        /* small inset shadow in the same color hides single-pixel seams from rendering */
        box-shadow: inset 1px 0 0 var(--tblr-card-bg, #fff), inset 0 -1px 0 var(--tblr-card-bg, #fff);
    }

    .gauge-container canvas {
        width: 100% !important;
        height: auto !important;
        max-width: none;
        box-shadow: none !important;
        border: none !important;
        background: transparent !important;
        /* Remove mask to avoid repaint jank; rely on border-radius + overflow */
        transform: translateZ(0.0001px);
        -webkit-transform: translateZ(0.0001px);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }

    .card-body {
        padding: 0.5rem;
    }
}