/*
  This file contains general CSS styles for the Launchpad application.
  It defines the basic appearance of the page, layout, sidebar, menus,
  and other user interface elements. By modifying this file, you can
  customize the overall look and feel of the application.
*/

/*
  BASE STYLES
  - Set fundamental properties for the entire page.
  - CUSTOMIZATION: You can change the `font-family` to use a different font,
    or modify `background-color` and `color` to change the color theme (e.g., light theme).
*/
html,
body {
    height: 100%;
    /* Ensures HTML and body always occupy 100% of the screen height. */
}

.midi-status-dot.connected {
    background-color: #4CAF50;
    /* Green */
}

.midi-status-dot.disconnected {
    background-color: #f44336;
    /* Red */
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    /* Uses a set of modern and clean system fonts. */
    background-color: #1a1a1a;
    /* Main background color, a very dark gray. */
    color: #f0f0f0;
    /* Main text color, a very light gray for contrast. */
    margin: 0;
    /* Removes default browser margins for complete control over layout. */
    overflow: hidden;
    /* Prevents scrolling at body level, useful for full-screen layouts. */
}

/*
  HEADING STYLES
  - CUSTOMIZATION: Change the color `#00aaff` to modify the main color of headings.
*/
h1,
h2 {
    color: #00aaff;
    /* A bright blue to highlight headings. */
    margin: 0;
    /* Removes margins for precise alignment. */
}

/*
  SIDEBAR HEADER
  - Styles for the side menu header.
*/
.sidebar-header {
    display: flex;
    /* Uses Flexbox to align internal elements (title and spacer). */
    align-items: center;
    /* Vertically aligns elements to center. */
    margin-bottom: 15px;
    margin-top: 5px;
}

/* Empty spacer to align the title with content below. */
.sidebar-spacer {
    width: 30px;
    /* Fixed width to match the space of the open/close button. */
    height: 28px;
    flex-shrink: 0;
    /* Prevents shrinking if space is limited. */
}

.sidebar-header h2 {
    margin: 0;
    color: #fff;
    /* White text for menu title. */
    font-size: 16px;
    font-weight: normal;
    /* Lighter font than normal. */
    text-align: center;
    transition: opacity 0.2s ease;
    /* Smooth transition for opacity. */
    white-space: nowrap;
    /* Prevents text from wrapping. */
    overflow: hidden;
    /* Hides text if it overflows the container. */
}

/*
  MAIN ELEMENT
  - Container for main content (the Launchpad).
*/
main {
    width: 100%;
    display: flex;
    justify-content: center;
    /* Centers content (the Launchpad) horizontally. */
    align-items: center;
    /* Centers content vertically. */
}

/*
  MAIN LAYOUT
  - Uses CSS Grid to define a two-column structure: sidebar and main content.
  - `grid-template-columns: 0 1fr;` defines two columns: the first (sidebar) has width 0,
    the second (body) occupies all remaining space (`1fr`).
  - The transition on `grid-template-columns` creates the sidebar open/close animation.
*/
.layout {
    width: 100%;
    height: 100vh;
    /* Occupies the entire window height. */
    display: grid;
    grid-template-columns: 0 1fr;
    gap: 8px;
    /* Space between sidebar and content. */
    transition: grid-template-columns .3s ease-in-out;
    /* Smooth animation for column width. */
    position: relative;
}

/*
  VIDEO BACKGROUND STYLES
  - Positions a full-screen video behind all other content.
  - `object-fit: cover;` ensures the video covers the entire area without distortion.
  - `z-index: -2;` places it at the lowest level.
*/
.background-video {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
}

/* Generic media background (video or image) */
.background-media {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
    display: block;
    transition: transform 0.1s ease-out, filter 0.1s ease-out;
}

/* Hide native file input to use a translated custom button */
.file-input-hidden {
    display: none;
}

/*
  VIDEO OVERLAY
  - A layer that overlays the video to apply effects like color, opacity, and blur.
  - CUSTOMIZATION: Modify `background-color` to change the filter color.
    The value `rgba(18, 18, 18, 0.15)` is a semi-transparent black.
    Opacity and blur are controlled dynamically via JavaScript, but here you can set transition values.
*/
.video-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(18, 18, 18, 0.15);
    z-index: -1;
    /* Positioned between video and content. */
    transition: opacity 0.3s ease, backdrop-filter 0.3s ease;
    /* Transitions for opacity and blur. */
    opacity: 0;
    /* Initially invisible. */
    pointer-events: none;
    /* Doesn't intercept mouse clicks. */
    backdrop-filter: blur(0px);
    /* No initial blur. */
}

/* The `.active` class is added via JS to show the overlay. */
.video-overlay.active {
    opacity: 1;
}

/*
  VIDEO CONTROLS (SLIDERS)
  - Styles for the slider container (opacity, blur, brightness).
  - The appear/disappear animation is created with `max-height` and `padding`.
*/
.video-controls {
    background-color: #252525;
    /* Slightly different background from menu to distinguish it. */
    border-radius: 4px;
    margin-top: 5px;
    padding: 0 15px;
    max-height: 0;
    /* Initially closed (zero height). */
    overflow: hidden;
    transition: max-height 0.3s ease-out, padding 0.3s ease-out;
}

/* The `.visible` class is added via JS to show controls. */
.video-controls.visible {
    padding: 15px;
    max-height: 500px;
    /* Height sufficient to contain everything. */
    transition: max-height 0.4s ease-in, padding 0.4s ease-in;
}

/*
  CONTROL GROUPS (Label + Slider)
*/
.control-group {
    margin-bottom: 12px;
    position: relative;
}

.menu-dropdown .control-group {
    padding: 12px 15px 4px 15px;
}

.control-group:last-child {
    margin-bottom: 0;
}

.control-group label,
.control-group .section-title {
    display: block;
    font-size: 12px;
    color: #ccc;
    margin-bottom: 5px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Adds ... if text is too long */
    max-width: 100%;
    /* Limits maximum width */
    box-sizing: border-box;
    /* Includes padding in width calculation */
}

.input-group {
    display: flex;
    align-items: center;
    gap: 8px;
    /* Increased gap for better spacing */
    margin-bottom: 4px;
    flex-wrap: nowrap;
    justify-content: space-between;
}

/* Numeric input container with unit suffix */
.input-with-unit {
    display: flex;
    align-items: center;
    background: #333;
    border: 1px solid #555;
    border-radius: 4px;
    padding: 0 6px;
    height: 24px;
    transition: border-color 0.2s ease;
    flex-shrink: 0;
}

.input-with-unit:focus-within {
    border-color: #00aaff;
}

/*
  SLIDER STYLES
  - CUSTOMIZATION: The main slider color is given by the `background` of the `thumb` (the dot).
    Change `#00ff88` to modify the slider dot color.
    Change the `background` of `input[type="range"]` for the bar color.
*/
.control-group input[type="range"] {
    width: calc(100% - 85px);
    height: 4px;
    background: #333;
    /* Slider bar color. */
    border-radius: 2px;
    outline: none;
    -webkit-appearance: none;
    /* Removes browser default styles. */
    appearance: none;
    margin: 0;
    flex-shrink: 1;
    min-width: 50px;
}

/* Numeric input next to the slider. */
.manual-input {
    width: 30px;
    height: 100%;
    background: transparent;
    border: none;
    color: #ccc;
    font-size: 11px;
    text-align: right;
    padding: 0;
    margin: 0;
    outline: none;
    -moz-appearance: textfield;
    /* Removes arrows in Firefox */
    appearance: textfield;
    /* Standard property for compatibility */
}

/* Removes arrows in Chrome, Safari, Edge, Opera */
.manual-input::-webkit-outer-spin-button,
.manual-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Text showing the unit of measurement (e.g., 'px', '%'). */
.value-display {
    font-size: 11px;
    color: #888;
    margin-left: 2px;
    white-space: nowrap;
    flex-shrink: 0;
    pointer-events: none;
}

/* Slider thumb for Webkit browsers (Chrome, Safari). */
.control-group input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    background: #00ff88;
    /* Thumb color (neon green). */
    border-radius: 50%;
    /* Makes it round. */
    cursor: pointer;
}

/* Slider thumb for Firefox. */
.control-group input[type="range"]::-moz-range-thumb {
    width: 14px;
    height: 14px;
    background: #00ff88;
    border-radius: 50%;
    cursor: pointer;
    border: none;
}

/* Styles for color pickers */
.control-group input[type="color"] {
    -webkit-appearance: none;
    appearance: none;
    width: 40px;
    /* Width similar to numeric input */
    height: 20px;
    background-color: transparent;
    /* Removes default background */
    border: 1px solid #555;
    border-radius: 4px;
    cursor: pointer;
    padding: 0;
}

.control-group input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 2px;
    /* Internal space for color sample */
    border-radius: 3px;
}

.control-group input[type="color"]::-webkit-color-swatch {
    border: none;
    border-radius: 2px;
}

/* Styles for dropdown menu (select) */
.control-group select {
    background-color: #333;
    color: #ccc;
    border: 1px solid #555;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 12px;
    width: 100%;
    /* Occupies all available width */
    box-sizing: border-box;
}

.control-group select:focus {
    outline: none;
    border-color: #00aaff;
}


/*
  STYLES FOR MAIN CONTENT (BODY)
*/
.body {
    position: relative;
    z-index: 2;
    /* Positioned above visualizer and background. */
}

/*
  LAYOUT WITH OPEN SIDEBAR
  - When `.layout` has the `.sidebar-open` class, the first column (sidebar) expands to 260px.
  - This change triggers the transition defined in `.layout`.
*/
.layout.sidebar-open {
    grid-template-columns: 260px 1fr;
}

/*
  SIDEBAR
  - Styles for the side menu.
  - Initially hidden (`opacity: 0`, `visibility: hidden`).
*/
.sidebar {
    grid-column: 1;
    /* Occupies the first column of the grid. */
    background-color: #2a2a2a;
    padding: 0px 16px 50px 16px;
    /* Increased bottom padding from 16px to 50px to accommodate MIDI indicator */
    height: 100%;
    position: relative;
    z-index: 1;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    box-sizing: border-box;
    /* Ensures padding is included in height calculation */
}

/* The `.sidebar-open` class on layout makes the sidebar visible. */
.layout.sidebar-open .sidebar {
    opacity: 1;
    visibility: visible;
}

.sidebar-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* Space between various menus (Project, Background, etc.). */
}

.menu-item {
    display: flex;
    flex-direction: column;
}

/*
  MENU BUTTONS
  - CUSTOMIZATION: Change `background` and `color` for button style.
    The `:hover` color defines the appearance on mouse hover.
*/
.menu-toggle {
    background: #2a2a2a;
    color: white;
    border: none;
    padding: 12px 15px;
    border-radius: 4px;
    cursor: pointer;
    text-align: left;
    font-size: 14px;
    transition: background-color 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Adds ... if text is too long */
    width: 100%;
    /* Ensures button occupies all available width */
    box-sizing: border-box;
    /* Includes padding in width calculation */
}

.menu-toggle:hover {
    background: #3a3a3a;
    /* Lighter color on mouse hover. */
}

.menu-toggle.active {
    background: #3a3a3a;
    border-left: 3px solid #00aaff;
}

/*
  DROPDOWN MENU
  - Containers for options in each menu.
  - Animation is managed through `max-height`, going from 0 to a value sufficient to show content.
*/
.menu-dropdown {
    max-height: 0;
    /* Initially closed. */
    overflow: hidden;
    transition: max-height 0.3s ease;
    background: #252525;
    border-radius: 4px;
    margin-top: 5px;
    max-width: 100%;
    /* Limits maximum width to parent container */
    box-sizing: border-box;
    /* Includes padding in width calculation */
}

/* The `.open` class is added via JS to open the dropdown. */
.menu-dropdown.open {
    max-height: 200px;
    /* Maximum height. Increase if content is not visible. */
    overflow-y: auto;
    /* Shows scrollbar if content exceeds maximum height. */
}

/*
  BUTTONS INSIDE DROPDOWN MENUS
  - CUSTOMIZATION: Change `background` and `color` of `button:hover` and `button.selected`
    to modify the appearance of selected option or on mouse hover.
*/
.menu-dropdown button {
    display: block;
    width: 100%;
    background: none;
    color: #ccc;
    border: none;
    padding: 10px 15px;
    text-align: left;
    cursor: pointer;
    font-size: 13px;
    transition: background-color 0.2s ease, color 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Adds ... if text is too long */
    box-sizing: border-box;
    /* Includes padding in width calculation */
}

.menu-dropdown button:hover,
.menu-dropdown button.selected {
    background: #333;
    color: white;
}

/*
  CUSTOM SCROLLBAR
  - Styles for the scrollbar inside dropdown menus.
  - CUSTOMIZATION: Change the `background` colors for `-track` and `-thumb` to adapt to your theme.
*/
.menu-dropdown::-webkit-scrollbar {
    width: 8px;
}

.menu-dropdown::-webkit-scrollbar-track {
    background: #2a2a2a;
    border-radius: 10px;
}

.menu-dropdown::-webkit-scrollbar-thumb {
    background: #00aaff;
    /* Scrollbar color (blue). */
    border-radius: 10px;
}

.menu-dropdown::-webkit-scrollbar-thumb:hover {
    background: #0088cc;
    /* Color on mouse hover. */
}

/*
  OPEN/CLOSE SIDEBAR BUTTON (Hamburger menu)
  - CUSTOMIZATION: Change `background-color` to modify button color.
*/
#openSidebar {
    position: fixed;
    top: 0;
    left: 0;
    background-color: #00aaff;
    /* Blue color. */
    border: none;
    color: white;
    padding: 10px 10px;
    border-radius: 3px;
    cursor: pointer;
    z-index: 3;
    /* Positioned above almost everything. */
    transition: background-color 0.3s ease;
    font-size: 18px;
    line-height: 1;
    margin: 0;
}

#openSidebar:hover {
    background-color: #0088cc;
}

/* Icon inside button (three lines). */
#openSidebar .icon {
    display: inline-block;
    transition: transform 0.3s ease;
    /* Animates rotation. */
    font-size: 20px;
    line-height: 1;
    margin: 0;
    padding: 0;
}

/* When sidebar is open, icon rotates to become an 'X' (or similar). */
.layout.sidebar-open #openSidebar .icon {
    transform: rotate(90deg);
}

/*
  MAIN BODY CONTAINER
  - Occupies the second column of the grid.
*/
.body {
    grid-column: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    position: relative;
}

/*
  AUDIO VISUALIZER STYLES (CANVAS)
  - Positions the two canvases (top and bottom) at window edges.
  - `pointer-events: none;` allows clicking through the canvas on underlying elements.
  - The transition on `left` and `width` allows canvas to smoothly adapt to sidebar opening/closing.
*/
.visualizer-canvas {
    position: fixed;
    left: 0;
    width: 100%;
    height: 25%;
    /* Visualizer height. You can change it to make it larger or smaller. */
    z-index: 1;
    /* Positioned below main content but above background. */
    pointer-events: none;
    transition: left 0.3s ease-in-out, width 0.3s ease-in-out;
}

#visualizer-canvas-top {
    top: 0;
}

#visualizer-canvas-bottom {
    bottom: 0;
}

/* Adapts visualizer position and width when sidebar is open. */
.layout.sidebar-open .visualizer-canvas {
    left: 260px;
    /* Moves canvas start to the right of sidebar. */
    width: calc(100% - 260px);
    /* Reduces width to avoid overlapping sidebar. */
}

/*
  ERROR ANIMATION
  - A 'shake' animation used to provide visual feedback, for example
    when trying to use an unavailable function (like MIDI).
*/
@keyframes shake {

    10%,
    90% {
        transform: translate3d(-1px, 0, 0);
    }

    20%,
    80% {
        transform: translate3d(2px, 0, 0);
    }

    30%,
    50%,
    70% {
        transform: translate3d(-4px, 0, 0);
    }

    40%,
    60% {
        transform: translate3d(4px, 0, 0);
    }
}

.error-shake {
    animation: shake 0.5s cubic-bezier(.36, .07, .19, .97) both;
}

/*
  NOTIFICATIONS
*/
#notification-container {
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.notification {
    padding: 10px 15px;
    border-radius: 5px;
    color: white;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    pointer-events: auto;
}

.notification.show {
    opacity: 1;
}

.notification.success {
    background-color: #4CAF50;
}

.notification.error {
    background-color: #f44336;
}

.notification.info {
    background-color: #2196F3;
}

.midi-status-fixed {
    position: absolute;
    bottom: 10px;
    left: 16px;
    /* Aligned with sidebar padding */
    right: 16px;
    /* Limits maximum width */
    display: flex;
    align-items: center;
    color: #fff;
    font-size: 0.85em;
    /* Slightly reduced to fit better */
    background-color: rgba(0, 0, 0, 0.3);
    /* Semi-transparent background to improve readability */
    padding: 8px 12px;
    border-radius: 4px;
    box-sizing: border-box;
    /* Includes padding in width calculation */
}

.midi-status-dot {
    width: 8px;
    /* Slightly reduced */
    height: 8px;
    border-radius: 50%;
    margin-right: 8px;
    flex-shrink: 0;
    /* Never shrinks */
}

#midi-status-text {
    overflow: hidden;
    text-overflow: ellipsis;
    /* Adds ... if text is too long */
    white-space: nowrap;
    /* Prevents text from wrapping */
    flex-grow: 1;
    /* Occupies remaining space */
    min-width: 0;
    /* Allows flex item to shrink */
}