/* =============================
   GAUGE CONTAINER AND BASE
   ============================= */

/* Main gauge container and visual structure 
   Creates the containing box for the entire gauge component */

   .gauge-container {
    position: relative;          /* Creates positioning context for absolute elements */
    width: var(--gauge-size, 300px);                /* Width of the gauge display area */
    height: var(--gauge-size, 300px);               /* Full circular height for gauge display */
    margin: 0 auto;              /* Centers gauge horizontally */
    overflow: visible;           /* Allows needle elements to extend beyond container */
    --gauge-color: #095700;      /* PalAcc1 - Dark Green */
    --large-needle-color: #095700; /* PalAcc1 - Dark Green */
    --small-needle-color: #D3FACC; /* PalAcc3 - Light Green */
    --small-needle-height: calc(var(--gauge-size, 300px) * 0.6);
    --large-needle-height: calc(var(--gauge-size, 300px) * 0.83);
    --needle-bottom-offset: calc(var(--gauge-size, 300px) * 0.19);
}

/* Container for the main gauge dial/face */
.gauge-base {
    position: absolute;          /* Positioned relative to the gauge container */
    top: 0;                      /* Aligned with top of container */
    left: 0;                     /* Aligned with left edge of container */
    width: 100%;                 /* Takes full width of container */
    height: 100%;                /* Takes full height of container */
    z-index: 1;                  /* Base layer in stacking order */
}

.gauge-base svg,
.gauge-svg {
    width: 100%;                 /* Full width of parent container */
    height: 100%;                /* Full height of parent container */
    color: var(--gauge-color);   /* Uses CSS variable for gauge color */
    display: block;              /* Removes default inline spacing */
    fill: currentColor;          /* Ensures SVG elements use the current color */
}

/* =============================
   NEEDLE CONTAINERS
   ============================= */

/* No separate containers needed if positioning needles directly */
/* .large-needle-container, */
/* .small-needle-container { ... } */

/* =============================
   NEEDLES: POSITIONING & PIVOT
   ============================= */

/* Container element for small needle (previous value) */
.small-needle-container{
    position: absolute;          /* Positioned relative to gauge container */
    bottom: var(--needle-bottom-offset);                 /* Distance from bottom of container */
    left:50%;                    /* Centers horizontally at container midpoint */
    transform: translateX(-50%); /* Adjusts centering to account for element width */
   
}

/* Container element for large needle (current value) */
.large-needle-container{
    position: absolute;          /* Positioned relative to gauge container */
    bottom: var(--needle-bottom-offset);                 /* Distance from bottom of container */
    left:50%;                    /* Centers horizontally at container midpoint */
    transform: translateX(-50%); /* Adjusts centering to account for element width */
   
}

/* Sets pivot point for small needle rotation */
.small-needle{
    transform-origin: center 85%; /* Defines rotation origin at center, 85% from top */
}

/* Sets pivot point for large needle rotation */
.large-needle{
    transform-origin: center 90%; /* Defines rotation origin at center, 90% from top */
}

/* Default rotation for both needles (starting position) */
.small-needle,
.large-needle {
    transform:rotate(0deg);      /* Initial rotation angle (straight up) */
}

/* Sets stacking order for needle containers */
.small-needle-container { z-index: 3; } /* Small needle appears above large needle */
.large-needle-container { z-index: 2; } /* Large needle appears below small needle */

/* =============================
   NEEDLE SVGs: SIZING & APPEARANCE
   ============================= */

/* Styling for the actual needle SVG elements */

.small-needle svg,
.large-needle svg {
    display: block;              /* Removes default inline spacing */
    object-fit: contain;         /* Maintains proper aspect ratio of SVG */
    fill: currentColor;          /* Uses color defined in parent element */
    width: auto;                 /* Width determined by height and aspect ratio */
}

/* Small needle (previous value) sizing and color */
.small-needle svg {
    height: var(--small-needle-height);               /* Visual length of small needle */
    color: var(--small-needle-color); /* Uses CSS variable for small needle color */
}

/* Large needle (current value) sizing and color */
.large-needle svg {
    height: var(--large-needle-height);               /* Visual length of large needle */
    color: var(--large-needle-color); /* Uses CSS variable for large needle color */
}

/* =============================
   ANIMATION
   ============================= */

/* Animation properties for smooth needle movement */

.rotating {
    /* Transitions removed for instant positioning */
}