.engine-room-vent-widget {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: clamp(0.55rem, calc(0.6vh + 0.35vw), 1.25rem);
    height: 100%;
    width: 100%;
    color: #ffffff;
    font-size: 1.25rem;
    --engine-room-accent: var(--app-accent, #00E5E2);
}

.engine-room-vent-title {
    font-size: 1.25rem;
}

.engine-room-vent-zones {
    display: flex;
    gap: 1rem;
    width: 100%;
    height: 90%;
}

.engine-room-zone {
    width: 49%;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.engine-room-zone.active {
    border-color: color-mix(in srgb, var(--engine-room-accent, #00E5E2) 70%, transparent);
    box-shadow: 0 0 12px color-mix(in srgb, var(--engine-room-accent, #00E5E2) 40%, transparent);
}

.engine-room-zone.inhibited {
    border-color: rgba(227, 41, 64, 0.6);
}

.zone-header {
    height: 5%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
}

.zone-name {
    font-size: 0.95rem;
    text-align: center;
    text-transform: uppercase;
}

.zone-body {
    height: 35%;
    display: flex;
    gap: 1rem;
}

.engine-room-zone.mirrored .zone-header {
    justify-content: center;
}

.engine-room-zone.mirrored .zone-name {
    text-align: center;
}

.engine-room-zone.mirrored .zone-body {
    flex-direction: row-reverse;
}

.engine-room-zone.mirrored .zone-indicators {
    direction: rtl;
}

.engine-room-zone.mirrored .zone-indicator {
    direction: ltr;
}

.fan-indicator {
    width:28%;
    height:100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.fan-icon {
    height: 40%;
    aspect-ratio: 1 / 1;
    background-image: url('/images/engine%20room%20ventilation%20icons/FAN%20icon.png');
    background-size: contain;
    background-repeat: no-repeat;
    filter: grayscale(100%);
    opacity: 0.5;
    transition: transform 0.4s ease, opacity 0.3s ease, filter 0.3s ease;
}

.fan-icon.running {
    filter: none;
    opacity: 1;
    animation: engine-room-fan-spin 1.6s linear infinite;
}

@keyframes engine-room-fan-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.fan-status-text {
    font-size: 0.8rem;
    text-transform: uppercase;
    text-align: center;
}

.fan-current {
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: clamp(0px, 1.5vh, 30px);
    gap: 1rem;
    text-transform: uppercase;
}

.fan-current-label {
    color: rgba(255, 255, 255, 0.55);
}

.fan-current-value {
    color: #ffffff;
    letter-spacing: 0.05em;
}

.zone-controls {
    width: 28%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.5rem;
}

.zone-mode-button {
    width: 100%;
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0.5rem;
    color: #fff;
    font-size: 0.95rem;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.zone-mode-button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.zone-mode-button.active {
    background: rgba(0, 229, 226, 0.2);
    border-color: rgba(0, 229, 226, 0.8);
    box-shadow: 0 0 12px rgba(0, 229, 226, 0.3);
}

.zone-temperature-display {
    width: 40%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
}

.temperature-readout {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.95rem;
}

.temperature-readout .temperature-value {
    font-size: 0.95rem;
    color: #ffffff;
    text-transform: none;
}

.temperature-threshold {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.6);
}

.zone-temperature-slider {
    position: relative;
    --value-percent: 0%;
    --threshold-percent: 0%;
    --slider-height: clamp(0.35rem, calc(0.25vh + 0.45vw), 0.7rem);
    gap: 1rem;
    height: 6vh;
}

.zone-temperature-slider::after {
    content: "";
    position: absolute;
    top: calc(50% - var(--slider-height) / 2);
    left: var(--value-percent);
    right: 0;
    height: var(--slider-height);
    border-radius: 999px;
    background: rgba(3, 12, 28, 0.55);
    z-index: 2;
    pointer-events: none;
}

.zone-temperature-slider .temperature-gradient {
    position: absolute;
    top: calc(50% - var(--slider-height) / 2);
    left: 0;
    right: 0;
    height: var(--slider-height);
    border-radius: 999px;
    background: linear-gradient(90deg, #103f8f 0%, #1891f1 30%, #f7c948 65%, #ef5350 100%);
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.35);
    opacity: 0.9;
    z-index: 1;
}

.zone-temperature-slider input[type="range"] {
    position: absolute;
    width: 100%;
    appearance: none;
    height: var(--slider-height);
    border-radius: 999px;
    background: none;
    outline: none;
    pointer-events: none;
    z-index: 3;
    top: calc(50% - var(--slider-height));
    left: 0;
}

.zone-temperature-slider input[type="range"]::-webkit-slider-thumb {
     appearance: none;
     width: clamp(12px,2vh,24px);
     height: clamp(12px,2vh,24px);
     border-radius: 50%;
     background: #ffffff;
     box-shadow: 0 0 0.4rem rgba(0, 0, 0, 0.35);
     border: none;
}

.zone-temperature-slider input[type="range"]::-moz-range-thumb {
     width: clamp(12px,2vh,24px);
     height: clamp(12px,2vh,24px);
     border-radius: 50%;
     background: #ffffff;
     border: none;
     box-shadow: 0 0 0.4rem rgba(0, 0, 0, 0.35);
}

.zone-temperature-slider input[type="range"]::-ms-thumb {
     width: clamp(12px,2vh,24px);
     height: clamp(12px,2vh,24px);
     border-radius: 50%;
     background: #ffffff;
     border: none;
     box-shadow: 0 0 0.4rem rgba(0, 0, 0, 0.35);
}

.zone-temperature-slider .threshold-marker {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 0.2rem;
    height: 1.4rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.85);
    opacity: 0.65;
    left: var(--threshold-percent);
    pointer-events: none;
    z-index: 4;
}

.zone-temperature-slider .temperature-endpoints {
     position: absolute;
     left: 0;
     right: 0;
     top: calc(50% + var(--slider-height));
     display: flex;
     justify-content: space-between;
     align-items: center;
     font-size: 0.8rem;
     color: rgba(255, 255, 255, 0.75);
     z-index: 3;
}

.zone-temperature-slider .temperature-endpoints .endpoint {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.zone-temperature-slider .temperature-endpoints .endpoint-dot {
    display: inline-flex;
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.35);
}

.zone-temperature-slider .temperature-endpoints .endpoint.cold .endpoint-dot {
    background: #1891f1;
}

.zone-temperature-slider .temperature-endpoints .endpoint.hot .endpoint-dot {
    background: #ef5350;
}

.zone-temperature-slider input[type="range"]::-webkit-slider-runnable-track {
    height: var(--slider-height);
    border-radius: 999px;
    background: transparent;
}

.zone-temperature-slider input[type="range"]::-moz-range-track {
    height: var(--slider-height);
    border-radius: 999px;
    background: transparent;
}

.zone-temperature-slider input[type="range"]::-ms-track {
    height: var(--slider-height);
    border-radius: 999px;
    background: transparent;
    border-color: transparent;
    color: transparent;
}

.zone-indicators {
    text-align: center;
    display:flex;
    flex-direction:row;
    gap:1%;
    height:26%;
}

.zone-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content:center;
    width:24.2%;
    gap: 0.6vh;
    opacity: 0.45;
    border-radius: 0.75rem;
    transition: opacity 0.2s ease;
}

.zone-indicator .indicator-icon {
    height: 45%;
    aspect-ratio: 1 / 1;

    display: inline-block;
    background: rgba(255, 255, 255, 0.55);
    -webkit-mask-image: var(--indicator-icon);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-image: var(--indicator-icon);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    transition: background 0.2s ease, filter 0.2s ease;
}

.zone-indicator .indicator-label {
    font-size: 0.8rem;
    transition: color 0.2s ease, text-shadow 0.2s ease, opacity 0.2s ease;
}

.zone-indicator.active {
    opacity: 1;
}

.zone-indicator.requested {
    opacity: 0.75;
}

.zone-indicator.requested .indicator-icon {
    background: color-mix(in srgb, var(--engine-room-accent, #00E5E2) 55%, rgba(255, 255, 255, 0.2));
}

.zone-indicator.requested .indicator-label {
    color: color-mix(in srgb, var(--engine-room-accent, #00E5E2) 65%, #ffffff 35%);
}

.zone-indicator.fuse {
    opacity: 0.75;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.25);
}

.zone-indicator.fuse .indicator-icon {
    -webkit-mask-image: none;
    mask-image: none;
    border-radius: 999px;
    background: var(--fuse-indicator-color, rgba(255, 255, 255, 0.55));
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.35);
}

.zone-indicator.fuse .indicator-label {
    color: rgba(255, 255, 255, 0.8);
}

.zone-indicator.fuse.ok {
    opacity: 1;
    border-color: rgba(61, 213, 152, 0.45);
    box-shadow: 0 0 12px rgba(61, 213, 152, 0.25);
}

.zone-indicator.fuse.ok .indicator-icon {
    --fuse-indicator-color: color-mix(in srgb, #3dd598 70%, rgba(255, 255, 255, 0.3));
}

.zone-indicator.fuse.ok .indicator-label {
    color: color-mix(in srgb, #3dd598 70%, #ffffff 30%);
}

.zone-indicator.fuse.fault {
    opacity: 1;
    border-color: rgba(239, 83, 80, 0.5);
    background: rgba(239, 83, 80, 0.15);
    box-shadow: 0 0 14px rgba(239, 83, 80, 0.35);
}

.zone-indicator.fuse.fault .indicator-icon {
    --fuse-indicator-color: #ef5350;
}

.zone-indicator.fuse.fault .indicator-label {
    color: #ffb4b0;
    text-shadow: 0 0 10px rgba(239, 83, 80, 0.45);
}

.zone-indicator.fuse.unknown {
    opacity: 0.6;
}

.zone-indicator.fuse.unknown .indicator-icon {
    --fuse-indicator-color: rgba(255, 255, 255, 0.45);
}

.zone-indicator.active .indicator-icon {
    background: var(--engine-room-accent, #00E5E2);
}

.zone-indicator.active .indicator-label {
    color: var(--engine-room-accent, #00E5E2);
    text-shadow: 0 0 0.4rem color-mix(in srgb, var(--engine-room-accent, #00E5E2) 55%, transparent);
}

.zone-warning {
    flex: 1;
    padding: 0.5rem;
    background: rgba(227, 41, 64, 0.15);
    border: 1px solid rgba(227, 41, 64, 0.35);
    border-radius: 0.25rem;
    font-size: 0.8rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
}

.engine-room-zone-settings select,
.engine-room-zone-settings input[type="text"],
.engine-room-zone-settings input[type="number"] {
    width: 100%;
}

.engine-room-zone-settings h4 {
    margin-bottom: 0.5rem;
}

.engine-room-zone-settings .dual-inputs {
    display: flex;
    gap: 0.75rem;
}

.engine-room-zone-settings .dual-inputs > div {
    flex: 1;
    display: flex;
    flex-direction: column;
}





/* === MEDIA === */

/* Mobile  */

@media (max-width: 699px) {
    .engine-room-vent-widget {
        overflow-y: auto;
    }

    .engine-room-vent-title {
        font-size: 0.95rem;
    }

    .engine-room-vent-zones {
        flex-direction: column;
    }

    .engine-room-zone {
        width: 100%;
        padding: 0.95rem;
        gap: 1rem;
    }

    .zone-name {
        font-size: 0.95rem;
    }

    .zone-controls {
        gap: 0.5rem;
    }

    .zone-mode-button {
        font-size: 0.95rem;
    }

    .temperature-readout {
        font-size: 0.95rem;
    }

    .temperature-threshold {
        font-size: 0.95rem;
    }

    .zone-temperature-slider .temperature-endpoints {
        padding-top: 0.5rem;
        font-size: 1rem;
    }

    .fan-indicator {
        gap: 0.95rem;
    }

    .fan-status-text {
        font-size: 1rem;
    }

    .zone-indicator .indicator-label {
        font-size: 0.85rem;
    }

    .zone-warning {
        padding: 0.5rem;
        font-size: 0.85rem;
    }
}

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

@media (min-width: 700px) and (max-width: 880px) {
    .engine-room-zone {
        padding: 0.5rem;
    }
}

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

@media (min-width: 881px) and (max-width: 1150px) {
    .engine-room-vent-title {
        font-size: 0.95rem;
    }

    .engine-room-zone {
        padding: 0.95rem;
    }

    .zone-name {
        font-size: 0.95rem;
    }

    .zone-controls {
        gap: 0.5rem;
    }

    .zone-mode-button {
        font-size: 0.95rem;
    }

    .temperature-readout {
        font-size: 0.95rem;
    }

    .temperature-threshold {
        font-size: 0.95rem;
    }

    .zone-temperature-slider .temperature-endpoints {
        padding-top: 0.5rem;
        font-size: 1rem;
    }

    .fan-indicator {
        gap: 0.95rem;
    }

    .fan-status-text {
        font-size: 1rem;
    }

    .zone-indicator .indicator-label {
        font-size: 0.85rem;
    }

    .zone-warning {
        padding: 0.5rem;
        font-size: 0.85rem;
    }
}

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

@media (min-width: 1151px) and (max-width: 1600px) {
    .engine-room-vent-title {
        font-size: 0.95rem;
    }

    .engine-room-zone {
        padding: 0.95rem;
    }

    .zone-name {
        font-size: 0.95rem;
    }

    .zone-controls {
        gap: 0.5rem;
    }

    .zone-mode-button {
        font-size: 0.95rem;
    }

    .temperature-readout {
        font-size: 0.95rem;
    }

    .temperature-threshold {
        font-size: 0.95rem;
    }

    .zone-temperature-slider .temperature-endpoints {
        padding-top: 0.5rem;
        font-size: 1rem;
    }

    .fan-indicator {
        gap: 0.95rem;
    }

    .fan-status-text {
        font-size: 1rem;
    }

    .zone-indicator .indicator-label {
        font-size: 0.85rem;
    }

    .zone-warning {
        padding: 0.5rem;
        font-size: 0.85rem;
    }
}

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

@media (min-width: 1601px) and (max-width: 2879px) {
    /* standard styles */
}

/* 4K (3840x2160) */

@media (min-width: 2880px) {

    .engine-room-vent-title {
        font-size: 2rem;
    }

    .engine-room-zone {
        padding: 2rem;
    }

    .zone-name {
        font-size: 2rem;
    }

    .zone-controls {
        gap: 1rem;
    }

    .zone-mode-button {
        font-size: 2rem;
    }

    .temperature-readout {
        font-size: 2rem;
    }

    .temperature-threshold {
        font-size: 2rem;
    }

    .zone-temperature-slider .temperature-endpoints {
        padding-top: 1rem;
        font-size: 1.5rem;
    }

    .fan-indicator {
        gap: 2rem;
    }

    .fan-status-text {
        font-size: 1.5rem;
    }

    .zone-indicator .indicator-label {
        font-size: 1.75rem;
    }

    .zone-warning {
        padding: 1rem;
        font-size: 1.75rem;
    }
}

/* Low height */

@media (min-width: 1000px) and (max-height: 650px) {
    .engine-room-vent-widget {
        height: 100%;
        min-height: 0;
    }

    .engine-room-zone .zone-header,
    .engine-room-zone .zone-body,
    .engine-room-zone .zone-indicators {
        height: auto;
    }

    .engine-room-vent-zones {
        flex: 1 1 auto;
        min-height: 0;
        height: auto;
        flex-direction: column;
        align-items: center;
        overflow: auto;
    }

    .engine-room-zone {
        width: 95%;
        height: max-content;
        padding: 0.25rem;
        gap: 1rem;
    }

    .zone-body {
        gap: 2rem;
    }

    .zone-controls {
        width: auto;
        gap: 0.25rem;
    }

    .zone-mode-button {
        min-width: 4rem;
        padding: 0.25rem;
    }

    .zone-temperature-display {
        gap: 0.5rem;
    }

    .temperature-threshold {
        text-align: left;
    }

    .zone-temperature-slider .temperature-endpoints .endpoint {
        font-size: 0.75rem;
    }

    .zone-indicators {
        min-height: auto !important;
    }

    .zone-indicator {
        flex-direction: row;
    }

    .zone-indicator .indicator-icon {
        height: 100%;
    }

    .zone-warning {
        min-height: 4rem;
        padding: 0.25rem;
        gap: 0rem;
        font-size: 0.75rem;
        overflow-y: auto;
    }

    .fan-icon {
        height: 30px;
    }
}

/* Override for 1024x600 */

@media (width: 1024px) and (height: 600px) {
    .engine-room-vent-widget {
        height: 100%;
        min-height: 0;
    }

    .engine-room-zone .zone-header,
    .engine-room-zone .zone-body,
    .engine-room-zone .zone-indicators {
        height: auto;
    }

    .engine-room-vent-zones {
        flex: 1 1 auto;
        min-height: 0;
        height: auto;
        flex-direction: column;
        align-items: center;
        overflow: auto;
    }

    .engine-room-zone {
        width: 95%;
        height: max-content; 
        padding: 0.25rem;
        gap: 1rem;
    }

    .zone-body {
        gap: 2rem;
    }

    .zone-controls {
        width: auto;
        gap: 0.25rem;
    }

    .zone-mode-button {
        min-width: 4rem;
        padding: 0.25rem;
    }

    .zone-temperature-display {
        gap: 0.5rem;
    }

    .temperature-threshold {
        text-align: left;
    }

    .zone-temperature-slider .temperature-endpoints .endpoint {
        font-size: 0.75rem;
    }

    .zone-indicators {
        min-height: auto !important;
    }

    .zone-indicator {
        flex-direction: row;
    }

    .zone-indicator .indicator-icon {
        height: 100%;
    }

    .zone-warning {
        min-height: 4rem;
        padding: 0.25rem;
        gap: 0rem;
        font-size: 0.75rem;
        overflow-y: auto;
    }

    .fan-icon {
        height: 30px;
    }
}