/* header.css */

#icosmo-matrix-synth-container {
    --button-square-size: 30px;
    --button-square-size-small-osc: 22px;
}

/* === STICKY HEADER CONTAINER === */
#icosmo-matrix-synth-container .sticky-header-container {
    position: sticky; /* Changed from 'fixed' to 'sticky' */
    /* The 'top' property will be set by JavaScript to account for WP admin bar and theme header */
    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;   /* High z-index to stay on top of other synth content */
    display: flex;
    flex-direction: row;
    align-items: center;
    box-sizing: border-box;
    padding: 3px 8px;
    min-height: 32px;
}

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

#icosmo-matrix-synth-container .header-block-left {
    justify-content: flex-start;
    flex-shrink: 0;
    gap: 5px;
    margin-right: auto;
}

#icosmo-matrix-synth-container .header-block-center {
    flex-grow: 1;
    justify-content: flex-end; /* Align the new wrapper to the right */
    min-width: 0;
}

#icosmo-matrix-synth-container .header-block-right {
    flex-shrink: 0;
    justify-content: flex-end;
}

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

#icosmo-matrix-synth-container #header-panel-1-title {
    font-weight: bold; font-size: 0.9em; white-space: nowrap; flex-shrink: 0;
}
#icosmo-matrix-synth-container #header-panel-1-title a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}


#icosmo-matrix-synth-container #header-panel-2-clock-ticker {
    display: flex; align-items: center; gap: 8px;
    flex-shrink: 0;
}
#icosmo-matrix-synth-container .header-ticker-container { display: flex; align-items: center; gap: 4px; }
#icosmo-matrix-synth-container .header-ticker-color-box {
    width: 28px;
    height: 28px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85em;
    font-weight: bold;
    border: 1px solid #222;
    cursor: default;
    line-height: 28px;
}
#icosmo-matrix-synth-container .header-ticker-key { display: none !important; }

/* New styles for Astro Keys in header */
#icosmo-matrix-synth-container #header-astro-keys-placeholder {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 15px;
}
#icosmo-matrix-synth-container .header-astro-keys-title {
    font-size: 0.8em;
    font-weight: bold;
    color: #ccc;
    white-space: nowrap;
}
#icosmo-matrix-synth-container .header-astro-keys-container {
    display: flex;
    gap: 4px;
}
/* Re-using the ticker color box style for consistency */
#icosmo-matrix-synth-container .header-astro-key-box {
    width: 28px;
    height: 28px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85em;
    font-weight: bold;
    border: 1px solid #222;
    cursor: default;
    line-height: 28px;
}

/* New styles for the "Apply Astro Keys" button */
#icosmo-matrix-synth-container #apply-astro-keys-to-sequencer {
    font-size: 1.6em;
    margin-left: 8px; /* Space it out from the astro keys placeholder */
}


/* New wrapper for all controls in the center/right area */
#icosmo-matrix-synth-container .header-combined-info-transport-volume-wrapper {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    width: 100%;
    flex-wrap: nowrap;
}


#icosmo-matrix-synth-container .header-info-display-section {
    display: flex; align-items: center; gap: 8px; font-size: 0.75em;
    white-space: nowrap; flex-shrink: 0;
}
#icosmo-matrix-synth-container .info-item { display: flex; align-items: center; }
#icosmo-matrix-synth-container .info-label { color: #999; margin-right: 3px; }
#icosmo-matrix-synth-container .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: 48px !important; /* Increased width */
    text-align: right !important; height: 22px !important;
    line-height: 20px !important;
    box-sizing: border-box !important;
}
#icosmo-matrix-synth-container .info-unit-suffix {
    color: #ccc;
    font-size: 0.9em;
    margin-left: 2px;
}

#icosmo-matrix-synth-container .header-transport-buttons-section {
    display: flex; align-items: center; gap: 3px; flex-shrink: 0;
}

#icosmo-matrix-synth-container #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%;
}
#icosmo-matrix-synth-container .master-volume-meter-fader-container {
    width: 100%; height: 22px;
    position: relative; display:flex; align-items:center; justify-content:center;
}
#icosmo-matrix-synth-container 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; }
#icosmo-matrix-synth-container .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%); }
#icosmo-matrix-synth-container 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; }
#icosmo-matrix-synth-container input[type="range"].master-volume-overlay-fader::-webkit-slider-runnable-track { background: transparent; border: none; height: 100%; }
#icosmo-matrix-synth-container input[type="range"].master-volume-overlay-fader::-moz-range-track { background: transparent; border: none; height: 100%; }
#icosmo-matrix-synth-container 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; }
#icosmo-matrix-synth-container 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; }

/* New styles for Fullscreen button */
#icosmo-matrix-synth-container #header-fullscreen-button-placeholder {
    margin-left: 8px;
}
#icosmo-matrix-synth-container #fullscreen-button {
    font-size: 1.6em;
    padding: 0 4px;
}


/* === RESPONSIVE HEADER ADJUSTMENTS === */
@media (max-width: 1000px) {
    #icosmo-matrix-synth-container .header-combined-info-transport-volume-wrapper { gap: 5px; }
    #icosmo-matrix-synth-container .header-info-display-section { gap: 5px; }
    #icosmo-matrix-synth-container .header-transport-buttons-section { gap: 2px; }
    #icosmo-matrix-synth-container #header-panel-4-master-volume { min-width: 80px; max-width: 110px; }
}

@media (max-width: 680px) {
    #icosmo-matrix-synth-container .sticky-header-container {
        flex-wrap: wrap;
        height: auto;
        padding: 5px;
    }
    #icosmo-matrix-synth-container .header-block-left {
        width: 100%;
        justify-content: space-between;
        flex-wrap: wrap; /* Allow astro keys to wrap if needed */
    }
    #icosmo-matrix-synth-container .header-block-center {
        width: 100%;
    }
    #icosmo-matrix-synth-container .header-combined-info-transport-volume-wrapper {
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 8px;
    }
    #icosmo-matrix-synth-container .header-info-display-section {
        order: 1;
        flex-basis: 100%;
        justify-content: center;
    }
    #icosmo-matrix-synth-container .header-transport-buttons-section {
        order: 2;
    }
    #icosmo-matrix-synth-container #header-panel-4-master-volume {
        order: 3;
    }
}

@media (max-width: 480px) {
    #icosmo-matrix-synth-container .header-block-left {
        justify-content: center;
    }
    #icosmo-matrix-synth-container .header-combined-info-transport-volume-wrapper {
        justify-content: center;
    }
    #icosmo-matrix-synth-container .header-transport-buttons-section {
        flex-basis: 100%;
        justify-content: center;
    }
    #icosmo-matrix-synth-container #header-panel-4-master-volume {
        flex-basis: 100%;
        max-width: 150px;
        margin: 0 auto;
    }
    #icosmo-matrix-synth-container #apply-astro-keys-to-sequencer {
        font-size: 1.2em;
        margin-left: 4px;
    }
}