/* header.css */

:root {
    --button-square-size: 30px; 
    --button-square-size-small-osc: 22px; 
}

/* === STICKY HEADER CONTAINER === */
.sticky-header-container {
    position: fixed; /* ENSURED FOR STICKINESS */
    top: 0;          /* ENSURED FOR STICKINESS */
    left: 0;
    right: 0;
    width: 100%;
    background-color: #3a3a3a;
    border-bottom: 1px solid #4f4f4f;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    z-index: 1001;   /* ENSURED FOR STICKINESS */
    display: flex;
    flex-direction: row; 
    align-items: center; 
    box-sizing: border-box;
    padding: 3px 8px; 
    min-height: 32px; 
}

/* === HEADER BLOCKS === */
.header-block { 
    display: flex;
    align-items: center;
    height: 100%;
    overflow: hidden;
}

.header-block-left { 
    justify-content: flex-start;
    flex-shrink: 0; 
    gap: 5px; 
    margin-right: auto; 
    outline: 0px solid yellow !important; /* Outline is 0px as per your last provided file */
    padding: 1px;
}

.header-block-center {
    flex-grow: 1; 
    justify-content: flex-start; /* Content wrapper inside will push items right */
    min-width: 0; 
    padding-left: 3px !important;
    padding-right:0 !important; 
    margin-right: 0 !important; 
    border-top: 0px solid blue !important; /* Outline is 0px */
    border-bottom: 0px solid blue !important;
    border-left: 0px solid blue !important;
    border-right: none !important; 
    padding-top: 1px !important;    
    padding-bottom: 1px !important; 
}

.header-block-right {
    flex-shrink: 0; 
    justify-content: flex-end;
    padding-left: 0 !important; 
    padding-right: 3px !important;
    margin-left: 0 !important; 
    border-top: 0px solid blue !important; /* Outline is 0px */
    border-bottom: 0px solid blue !important;
    border-right: 0px solid blue !important;
    border-left: none !important;
    padding-top: 1px !important;    
    padding-bottom: 1px !important; 
}

/* === INDIVIDUAL PANELS / CONTENT PIECES within blocks === */
.sticky-header-panel {
    box-sizing: border-box;
    color: #e0e0e0;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 0; 
}

#header-panel-1-title { 
    font-weight: bold; font-size: 0.9em; white-space: nowrap; flex-shrink: 0; 
} 
#header-panel-2-clock-ticker {
    display: flex; align-items: center; gap: 8px; font-size: 1.2em; /* As per your last file */
    flex-shrink: 0;
}
.header-ticker-container { display: flex; align-items: center; gap: 4px; } 
.header-ticker-color-box { 
    width: 28px !important; height: 28px !important; border-radius: 3px !important; 
    display: flex !important; align-items: center !important; justify-content: center !important;
    font-size: 1em !important; font-weight: bold !important; color: #000000 !important; 
    border: 1px solid #222 !important; cursor: default !important; line-height: 28px !important;
}
.header-ticker-key { display: none !important; } 

#header-center-content-placeholder .header-transport-and-info-wrapper { 
    display: flex;
    justify-content: flex-end; 
    align-items: center;
    gap: 10px; 
    flex-wrap: nowrap !important; 
    width: 100%; 
}

.header-info-display-section { 
    display: flex; align-items: center; gap: 8px; font-size: 0.75em; 
    white-space: nowrap; flex-shrink: 0; 
    order: 1; 
    padding: 0; 
}
.info-item { display: flex; align-items: center; }
.info-label { color: #999; margin-right: 3px; } 
.info-value.header-info-input { 
    background-color: #2d2d2d; color: #ccc; border: 1px solid #555;
    border-radius: 3px; padding: 1px 3px !important; font-size: 0.9em !important; 
    width: 38px !important; 
    text-align: right !important; height: 22px !important; 
    line-height: 20px !important; 
    box-sizing: border-box !important;
}
.info-unit-suffix {
    color: #ccc;
    font-size: 0.9em;
    margin-left: 2px;
}

.header-transport-buttons-section { 
    display: flex; align-items: center; gap: 3px; flex-shrink: 0; 
    order: 2; 
    padding: 0;
}

#header-panel-4-master-volume {
    display:flex; 
    align-items: center; 
    justify-content: flex-end; 
    min-width: 100px; 
    max-width: 130px; 
    padding: 0; 
    margin-left:0; 
    width: 100%; 
}
.master-volume-meter-fader-container { 
    width: 100%; height: 22px; 
    position: relative; display:flex; align-items:center; justify-content:center;
}
canvas.volume-meter-canvas-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 1px solid #4f4f4f; box-sizing: border-box; background-color: #222; }
.master-volume-meter-fader-container::before { content: ""; position: absolute; left: 90%; top: 10%; bottom: 10%; width: 1px; background-color: white; z-index: 1; transform: translateX(-50%); }
input[type="range"].master-volume-overlay-fader { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-appearance: none; appearance: none; background: transparent; margin: 0; padding: 0; z-index: 2; cursor: pointer; }
input[type="range"].master-volume-overlay-fader::-webkit-slider-runnable-track { background: transparent; border: none; height: 100%; }
input[type="range"].master-volume-overlay-fader::-moz-range-track { background: transparent; border: none; height: 100%; }
input[type="range"].master-volume-overlay-fader::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 8px; height: 26px; background-color: #000000; border: 1px solid #555555; border-radius: 2px; cursor: pointer; margin-top: -1px; position: relative; z-index: 3; }
input[type="range"].master-volume-overlay-fader::-moz-range-thumb { width: 8px; height: 26px; background-color: #000000; border: 1px solid #555555; border-radius: 2px; cursor: pointer; }


/* === RESPONSIVE HEADER ADJUSTMENTS (from your last correct layout version) === */
@media (max-width: 1000px) { 
    .sticky-header-container { gap: 5px; }
    .header-block-left { gap: 5px; } 
    #header-panel-1-title { padding-right: 0px !important; } 
    .header-block-center { } 
    #header-center-content-placeholder .header-transport-and-info-wrapper { gap: 10px; }
    .header-info-display-section { gap: 5px; }
    .header-transport-buttons-section { gap: 2px; }
    #header-panel-4-master-volume { min-width: 80px; max-width: 110px; }
    .master-volume-meter-fader-container { height: 28px !important; }
}

@media (max-width: 680px) { 
    .sticky-header-container { 
        flex-direction: column !important; height: auto !important; padding: 5px !important; 
        align-items: stretch !important; gap: 5px !important; 
    }
    .header-block-left { 
        order: 1; width: 100%; justify-content: flex-start !important; 
        gap: 5px; margin-right: 0; 
    }
    #header-panel-1-title { padding-right: 0 !important; }
    .header-block-left #header-panel-2-clock-ticker .header-ticker-color-box {
        width: 28px !important; height: 28px !important;
        line-height: 28px !important; font-size: 1em !important;
    }
    .header-block-center { 
        order: 2; width: 100%; justify-content: flex-end; 
        border-right: 0px solid blue !important; 
        padding-right: 3px !important;
        border-left: 0px solid blue !important; 
    }
     .header-block-right { display:none !important; } 
    
    #header-center-content-placeholder .header-combined-info-transport-volume-wrapper {
        width: auto; justify-content: flex-end; gap: 8px; flex-shrink: 1; 
    }
    .header-combined-info-transport-volume-wrapper .header-info-display-section { flex-shrink: 1; min-width:0; } 
    .header-combined-info-transport-volume-wrapper .header-transport-buttons-section { flex-shrink: 0; }
    .header-combined-info-transport-volume-wrapper #header-panel-4-master-volume { 
        flex-shrink: 0; min-width: 70px; max-width: 90px; margin-left:0;
        border: none !important; padding:0 !important;
    }
    .info-value.header-info-input { width: 42px !important; height: 22px !important; line-height: 20px !important; }
    .header-transport-buttons-section .transport-button { 
        height: 28px !important; width: 28px !important; line-height: 28px !important; font-size: 1.2em !important; 
    }
    .header-transport-buttons-section #header-panic-button.transport-button { font-size: 1.6em !important; }
    .master-volume-meter-fader-container { height: 28px !important; }
}

@media (max-width: 480px) { 
    .header-block-left { gap: 3px; justify-content: center; flex-wrap: wrap; }
    .header-block-left #header-panel-2-clock-ticker .header-ticker-color-box {
        width: 22px !important; height: 22px !important;
        line-height: 22px !important; font-size: 0.8em !important;
    }
    .header-block-center { justify-content: center; }
    #header-center-content-placeholder .header-combined-info-transport-volume-wrapper {
        gap: 5px; flex-wrap: wrap; justify-content: center; 
    }
    .header-combined-info-transport-volume-wrapper .header-info-display-section {order:1; width:100%; justify-content:center;}
    .header-combined-info-transport-volume-wrapper .header-transport-buttons-section {order:2; width:100%; justify-content:center;}
    .header-combined-info-transport-volume-wrapper #header-panel-4-master-volume {order:3; width:100%; justify-content:center; max-width: 120px !important;}
    .header-combined-info-transport-volume-wrapper .header-info-display-section .info-value.header-info-input {
        width: 36px !important; 
    }
     .header-combined-info-transport-volume-wrapper .header-transport-buttons-section .transport-button { 
        height: 22px !important; width: 22px !important; line-height: 22px !important; font-size: 1.1em !important; 
    }
    .header-combined-info-transport-volume-wrapper .header-transport-buttons-section #header-panic-button.transport-button { font-size: 1.5em !important; }
    .header-combined-info-transport-volume-wrapper #header-panel-4-master-volume { min-width: 60px; max-width: 100px; }
    .master-volume-meter-fader-container { height: 22px !important; }
}