/* transport.css */
/* Styles for all transport-related buttons (header and panel) */

.transport-button { 
    background-color: #444; 
    color: #bbb; 
    border: 1px solid #333;
    padding: 0 !important; 
    font-family: Arial, sans-serif; 
    font-size: 1.5em;  /* Base size for symbols - specific buttons will override */
    font-weight: normal; 
    width: 28px;   
    height: 28px;   
    line-height: 28px; 
    border-radius: 4px;
    margin: 0 !important; 
    display: inline-flex !important; 
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer;
    user-select: none;
    text-align: center; 
    transition: background-color 0.1s ease, color 0.1s ease, box-shadow 0.1s ease, transform 0.1s ease, filter 0.2s ease-in-out, opacity 0.2s ease-in-out;
    overflow: hidden; 
    box-sizing: border-box;
    position: relative; 
}

.transport-button:hover {
    background-color: #555;
    color: #fff; 
}

.transport-button:active {
    background-color: #666; /* Default active background */
    transform: translateY(1px); 
}

.transport-button.play-stop.playing { 
    /* background-color is set by JS to note color */
    color: #222222 !important; 
    border-color: #777 !important; 
    box-shadow: inset 0 0 3px rgba(0,0,0,0.15); 
}

/* Specific symbol font-size adjustments */
#header-sequencer-play-stop.transport-button, 
#sequencer-play-stop-row-header.transport-button 
    { 
    font-size: 1.5em; 
}

#header-metronome-toggle.transport-button, 
#toggleMetronome.transport-button 
    { 
    font-size: 1.9em;
}

#header-audio-player-toggle.transport-button, 
#toggle.transport-button 
    { 
    font-size: 1.6em;
}

#ini-button.transport-button {
    font-size: 1.4em; /* Adjust Page symbol (📄) size for good visibility */
    /* Inherits default colors and hover/active from .transport-button */
}

#header-panic-button.transport-button { 
    background-color: #444 !important; 
    border-color: #333 !important;
    color: #bbb !important;  /* Default Skull symbol (☠) color */
    font-size: 2.4em;     /* Large Skull size (adjust as needed, was 2.6em for INI) */
    font-weight: normal;  /* Skull is usually bold enough */
    padding-bottom: 3px !important;
}
#header-panic-button.transport-button:hover {
    background-color: #000000 !important; /* Black background on hover */
    color: #FFFFFF !important;       /* White symbol on hover */
}
#header-panic-button.transport-button:active { 
    background-color: #b33 !important;  /* Red background when pressed */
    border-color: #933 !important;
    color: white !important;        /* White skull when pressed */
    transform: translateY(1px);
}

/*
 * LOG-BOOK
 * 2025-06-11: Added styles for the new visualizer toggle button.
 *             - Problem: The new button needed styling for its active and inactive states.
 *             - Solution:
 *               - Added a base style for `#visualizer-toggle-button` to set its font size.
 *               - Created a `.visualizer-off` class that applies a grayscale filter and reduces
 *                 opacity, providing a clear "off" state for the rainbow emoji.
 *               - The main `.transport-button` class was updated to include `filter` and `opacity`
 *                 in its transition property for a smooth toggle effect.
 */
#visualizer-toggle-button.transport-button {
    font-size: 1.5em;
    color: #fff; /* Ensure emoji renders in color by default */
}

#visualizer-toggle-button.visualizer-off {
    filter: grayscale(100%);
    opacity: 0.5;
}
#visualizer-toggle-button.visualizer-off:hover {
    opacity: 0.8;
}


/* Responsive adjustments */
@media (max-width: 480px) { 
    .transport-button { 
        font-size: 1.0em; 
        width: 22px; 
        height: 22px; 
        line-height: 22px;
    }
    #header-sequencer-play-stop.transport-button { font-size: 1.1em; }
    #header-metronome-toggle.transport-button, 
    #toggleMetronome.transport-button { 
        font-size: 1.5em; 
    }
    #header-audio-player-toggle.transport-button,
    #toggle.transport-button { 
        font-size: 1.2em; 
    }
    #ini-button.transport-button { 
        font-size: 1.2em; /* Page symbol on mobile */
    }
    #header-panic-button.transport-button { 
        font-size: 1.6em; /* Skull on mobile */
    }
    #visualizer-toggle-button.transport-button {
        font-size: 1.2em;
    }
}