/* WIDGET -- */

.widget-grid {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 0.2%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    cursor: grab;
    /* Performance optimizations */
    will-change: scroll-position;
    -webkit-overflow-scrolling: touch;
}

.widget-grid.dragging {
    cursor: grabbing;
}

.widget {
    position: relative;
    width: 33.2%;
    background-color: rgba(0, 0, 0, 0.75);
    flex: 0 0 auto;
    scroll-snap-align: start;
    user-select: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 0.5rem;
    /* Performance: backdrop-filter removed - too expensive during scroll */
    /* Increased opacity to maintain visual separation */
    transform: translateZ(0); /* GPU acceleration hint */
}

.widget-core {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
}

.widget-nav {
    position: fixed;
    bottom: 11%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: calc(var(--app-base-unit) * 0.5);
    z-index: 1;
}

.widget-dot {
    width: calc(var(--app-base-unit) * 0.75);
    height: calc(var(--app-base-unit) * 0.75);
    border-radius: 50%;
    background: white;
    opacity: 0.5;
    transition: opacity ease 250ms;
}

.widget-dot.active {
    opacity: 1;
}

.widget-title {
    font-weight: 500;
/*    font-size: calc(var(--app-base-unit) * 1.5);*/
    font-size: 1.5rem;
    color: #00E5E2;
    text-align: center;
    line-height: calc(var(--app-base-unit) * 1.5);
    height: calc(var(--app-base-unit) * 1.5);
    margin-top: calc(var(--app-base-unit) * 0.5);
    width: 100%;
    letter-spacing: 0.2rem;
}

.widget img {
    width: 30%;
    height: auto;
    object-fit: contain;
    pointer-events: none;
    -webkit-user-drag: none;
    user-drag: none;
}

/* -- WIDGET */



/* PAGE INFO -- */

.page-quick-info {
    font-size: calc(var(--app-base-unit) * 0.9);
    color: white;
    min-height: calc(var(--app-base-unit) * 7);
    max-height: calc(var(--app-base-unit) * 7);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: fit-content;
    gap: calc(var(--app-base-unit) * 0.4);
    margin: calc(var(--app-base-unit) * 5) auto calc(var(--app-base-unit) * 7.5) auto;
    text-align: left;
}

.page-quick-info {
    --quick-icon-height: 2.75em;
}

.page-quick-item {
    display: inline-flex;
    align-items: center;
    gap: 1.25em;
    white-space: nowrap;
    font-size: calc(var(--app-base-unit) * 1.1);
}

.page-quick-item.placeholder {
    visibility: hidden;
}

.page-quick-item .quick-temperature-icon,
.page-quick-item .quick-battery-icon,
.page-quick-item .quick-energy-icon,
.page-quick-item .quick-tank-icon {
    display: inline-block;
    height: var(--quick-icon-height);
    aspect-ratio: 10 / 40;
    width: auto;
    overflow: visible;
    flex: none;
    margin: 0 0.1em;
}

.page-quick-item .quick-temperature-icon svg,
.page-quick-item .quick-battery-icon svg,
.page-quick-item .quick-energy-icon svg,
.page-quick-item .quick-tank-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}
.qi-name::after {
    content: ":";
    margin-left: calc(var(--app-base-unit) * 0.1);
    margin-right: calc(var(--app-base-unit) * 0.15);
}

.qi-name.no-colon::after {
    content: none;
    margin: 0;
}

.qi-name,
.qi-value {
    display: inline-block;
}

.qi-value {
    font-weight: bold;
}

/* -- PAGE INFO */



/* HINT TOOLTIP -- */

.hint-icon {
    display: inline-block;
    position: relative;
    margin-left: 0.3rem;
    cursor: help;
}

.hint-icon .hint-symbol {
    font-style: normal;
    border-radius: 50%;
    background: #555;
    color: #fff;
    padding: 0 0.3rem;
    font-size: 0.75rem;
    line-height: 1rem;
    display: inline-block;
}

.hint-icon .hint-text {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s ease;
    position: fixed;
    z-index: 1000;
    background: #333;
    color: #fff;
    padding: 0.3rem 0.5rem;
    border-radius: 4px;
    width: max-content;
    max-width: 200px;
    top: 0;
    left: 0;
    transform: none;
    white-space: normal;
    pointer-events: none;
}

.hint-icon:hover .hint-text,
.hint-icon:focus-within .hint-text {
    visibility: visible;
    opacity: 1;
}

/* -- HINT TOOLTIP */






/* === MEDIA === */

/* Mobile  */

@media (max-width: 699px) {
    .widget {
        width: 98%;
    }

    .widget-grid {
        gap: 0.2rem;
    }
}

/* WVGA / WVGA-Narrow (720x480, 800x480) */

@media (min-width: 700px) and (max-width: 880px) {
    .widget-grid {
        gap: 0.2rem;
    }

    .widget {
        width: 60%;
    }
}

/* WSVGA / XGA (1024x600, 1024x768) */

@media (min-width: 881px) and (max-width: 1150px) {
    .widget-grid {
        gap: 0.3rem;
    }

    .widget {
        width: 49%;
    }
}

/* WXGA / HD720 / SXGA (1280x720/800/1024) */

@media (min-width: 1151px) and (max-width: 1600px) {
}

/* HD / WUXGA (1920x1080, 1920x1200) */

@media (min-width: 1601px) and (max-width: 2879px) {
}

/* 4K (3840x2160) */

@media (min-width: 2880px) {

    .widget-title {
        font-size: 3rem;
    }
}