/*
 * alexiuz shared floating panels
 * ------------------------------
 * Source of truth: /home/internetieruser/alexiuz-shared/styles/panels.css
 * Symlinked into each site at public/styles/shared/.
 *
 * The draggable, non-blocking panel generor uses for its standalone modals and
 * its model dropdown, and that muuic independently rebuilt for its mixer, AI
 * composer and instrument browser. Same component, two implementations; this
 * is the one copy.
 *
 * Load order:
 *     tokens.css -> [base.css] -> [ui.css] -> controls.css -> panels.css
 *                -> <site>/theme.css -> <site> app styles
 *
 * WHAT THIS FILE DOES NOT DO
 * --------------------------
 * No `position`, no `display`, no `z-index`, no coordinates. Those belong to
 * the site and its script: generor positions absolutely inside #site-wrap and
 * moves panels there on open, muuic positions fixed and toggles display from
 * panel-system.js. A shared sheet that set them would fight both. This file
 * owns appearance only — ground, border, radius, shadow, header, close, body.
 *
 * NAMING
 * ------
 * The canonical name is `.floating-panel`, NOT `.panel`. imaig already uses
 * `.panel` for a tab pane (`display:none` / `.is-active{display:block}`), so
 * claiming that name here would give every imaig sidebar pane a panel ground
 * and border and break the studio. `.floating-panel` is muuic's existing name
 * and is unused on every other site.
 *
 * Legacy names are hooked in so each site adopts this by deleting its local
 * copy rather than renaming markup — but the per-part legacy selectors are
 * SCOPED to a panel ancestor. `.modal-header` in particular is deliberately
 * only matched as `.modal-standalone .modal-header`: ui.css defines a plain
 * `.modal-header` that alexiuz relies on, and this file loads after ui.css, so
 * an unscoped hook would repaint alexiuz's auth modals.
 */

/* ======================================================================
   The panel
   ====================================================================== */

.floating-panel,
.modal-standalone,
.custom-dropdown-panel {
    display: flex;
    flex-direction: column;
    background: var(--surface-panel);
    border: 1px solid var(--border-panel);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-panel);
    color: var(--text);
    /* Clips the header's corners against the panel radius. */
    overflow: hidden;
}

/* Re-centring animates; dragging must not, or the panel lags the cursor by the
   transition duration and feels like it is on elastic. */
.floating-panel:not(.dragging),
.modal-standalone:not(.dragging),
.custom-dropdown-panel:not(.dragging) {
    transition: left 0.2s ease-out, top 0.2s ease-out;
}

.floating-panel.dragging,
.modal-standalone.dragging,
.custom-dropdown-panel.dragging {
    transition: none !important;
}

/* ======================================================================
   Header — also the drag handle
   ====================================================================== */

.floating-panel-header,
.floating-panel .panel-title-bar,
.custom-dropdown-panel .custom-dropdown-header,
.modal-standalone .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    flex-shrink: 0;
    padding: var(--space-8) var(--space-9);
    background: var(--surface-panel-header);
    border-bottom: 1px solid rgba(var(--surface-raised-rgb), 0.5);
    /* Sticky so the handle stays reachable in a panel scrolled past its own
       header. */
    position: sticky;
    top: 0;
    z-index: 10;
    cursor: move;
    user-select: none;
    -webkit-user-select: none;
}

.floating-panel-title,
.floating-panel .panel-title,
.custom-dropdown-panel .custom-dropdown-title {
    margin: 0;
    color: var(--text);
    font-size: var(--text-2xl);
    font-weight: var(--weight-semibold);
}

/* ---- Close ----
   Danger-tinted rather than a bare glyph: it is the one destructive control on
   the panel, and it reads as such without a fill. */
.floating-panel-close,
.floating-panel .panel-close-btn,
.custom-dropdown-panel .custom-dropdown-close,
.modal-standalone .modal-close {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    padding: 0;
    background: rgba(var(--danger-3-rgb), 0.1);
    border: 1px solid rgba(var(--danger-3-rgb), 0.3);
    border-radius: var(--radius-lg);
    color: var(--danger-3);
    font-size: var(--text-2xl);
    line-height: 1;
    cursor: pointer;
    transition: var(--transition);
}

.floating-panel-close:hover,
.floating-panel .panel-close-btn:hover,
.custom-dropdown-panel .custom-dropdown-close:hover,
.modal-standalone .modal-close:hover {
    background: rgba(var(--danger-3-rgb), 0.2);
    border-color: var(--danger-3);
    transform: scale(1.05);
}

.floating-panel-close:focus-visible,
.floating-panel .panel-close-btn:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}

/* ======================================================================
   Body
   ====================================================================== */

.floating-panel-body,
.floating-panel .panel-content,
.custom-dropdown-panel .custom-dropdown-options {
    flex: 1;
    min-height: 0;          /* or the body refuses to shrink inside the flex column */
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--space-5);
}

/* ---- Option rows ---- */
.floating-panel-option,
.custom-dropdown-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    width: 100%;
    box-sizing: border-box;
    margin-bottom: var(--space-3);
    padding: var(--space-5) var(--space-7);
    background: var(--surface-3);
    border: 1px solid var(--border-2);
    border-radius: var(--radius-lg);
    color: var(--text-muted-3);
    font-size: var(--text-md);
    line-height: 1.4;
    cursor: pointer;
    transition: var(--transition);
}

.floating-panel-option:last-child,
.custom-dropdown-option:last-child {
    margin-bottom: 0;
}

.floating-panel-option:hover,
.custom-dropdown-option:hover {
    border-color: var(--border-5);
    color: var(--text);
}

/* Selection is the accent as label and border, never as a fill — same rule the
   rest of the system follows. */
.floating-panel-option.selected,
.floating-panel-option[aria-selected="true"],
.custom-dropdown-option.selected {
    border-color: var(--accent);
    color: var(--accent-bright);
}

/* ---- Resize grip ----
   muuic's panels are resizable; generor's are not. Harmless where unused. */
.floating-panel-grip,
.floating-panel .panel-resize-grip {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 14px;
    height: 14px;
    background: linear-gradient(135deg, transparent 50%, var(--text-muted) 50%);
    opacity: 0.3;
    cursor: nwse-resize;
}

.floating-panel-grip:hover,
.floating-panel .panel-resize-grip:hover {
    opacity: 0.6;
}

/* ======================================================================
   Compact variant
   ======================================================================
   generor's panels are dialogs — a roomy header and an 18px title. muuic's are
   tool panels docked around a piano roll, where a 32px title bar is the whole
   chrome budget. Rather than force one metric on both, `.compact` supplies the
   tighter set; everything else stays identical, so the two still read as the
   same component. */

.floating-panel.compact .floating-panel-header,
.floating-panel.compact .panel-title-bar {
    height: 32px;
    padding: 0 var(--space-5);
}

.floating-panel.compact .floating-panel-title,
.floating-panel.compact .panel-title {
    font-size: var(--text-sm);
}

.floating-panel.compact .floating-panel-close,
.floating-panel.compact .panel-close-btn {
    width: 22px;
    height: 22px;
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
}

.floating-panel.compact .floating-panel-body,
.floating-panel.compact .panel-content {
    padding: var(--space-5);
}

/* ======================================================================
   Mobile
   ====================================================================== */

@media (max-width: 768px) {
    .floating-panel,
    .modal-standalone,
    .custom-dropdown-panel {
        max-height: 70vh;
    }

    .floating-panel-header,
    .custom-dropdown-panel .custom-dropdown-header,
    .modal-standalone .modal-header {
        padding: var(--space-7);
    }

    .floating-panel-title,
    .custom-dropdown-panel .custom-dropdown-title {
        font-size: var(--text-xl);
    }
}

/* ======================================================================
   Menus
   ======================================================================
   The File menu. imaig and vidaye had near-identical copies of this already —
   same class names, same structure — and muuic had a third implementation under
   different names (.toolbar-dropdown). This is the one copy.

   Markup:
     <div class="file-menu">
       <button class="btn btn-ghost btn-sm" aria-haspopup="true" aria-expanded="false">File</button>
       <div class="file-menu-panel" hidden>
         <button class="file-menu-item" data-action="new">New <kbd>Ctrl N</kbd></button>
         <div class="file-menu-sep"></div>
         <button class="file-menu-item file-menu-danger" data-action="delete">Delete</button>
       </div>
     </div>

   muuic's legacy names (.toolbar-dropdown / .dropdown-divider) are hooked in so
   it adopts this without rewriting its markup or its JS, which keys off
   #file-dropdown and [data-action]. */

.file-menu {
    position: relative;
    display: inline-block;
}

.file-menu-panel,
.toolbar-dropdown {
    position: absolute;
    top: calc(100% + var(--space-3));
    left: 0;
    z-index: 80;
    min-width: 240px;
    padding: var(--space-2);
    background: var(--surface-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-menu);
}

/* The class above sets `display`, so [hidden] has to be restated or the panel
   can never close — `hidden` is only a `display:none` UA default and any
   explicit display beats it. This is the trap that kept imaig's crop bar open. */
.file-menu-panel[hidden] {
    display: none;
}

/* Anchor to the trigger's right edge instead of its left. A menu hanging off a
   control near the right of the viewport — a header hamburger, an account
   button — runs off the page with the default left:0, because the panel has a
   240px min-width and the trigger is usually much narrower. */
.file-menu-panel.align-right,
.toolbar-dropdown.align-right {
    left: auto;
    right: 0;
}

/* ---- Items ----
   Deliberately borderless and transparent. A menu already has a border and a
   ground of its own; giving each row its own too is what made muuic's File
   menu read as boxes inside a box. */
.file-menu-item,
.toolbar-dropdown button {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    width: 100%;
    box-sizing: border-box;
    padding: var(--space-4) var(--space-5);
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text);
    font: inherit;
    font-size: var(--text-base);
    text-align: left;
    /* A menu row is a row, not prose. The original examples here were all
       <button>, which never underlines; the moment a row is an <a> — generor's
       hamburger has three — it inherits the site's link underline and the menu
       reads as a list of links inside a panel. */
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition-fast);
}

/* Restated for the states, or a site-wide `a:hover { text-decoration: underline }`
   still wins on hover and focus even though the base is covered above. */
.file-menu-item:hover,
.file-menu-item:focus,
.file-menu-item:visited {
    text-decoration: none;
}

.file-menu-item:hover:not(:disabled),
.toolbar-dropdown button:hover:not(:disabled) {
    background: rgba(var(--accent-rgb), 0.12);
    color: var(--accent-bright);
}

.file-menu-item:focus-visible,
.toolbar-dropdown button:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}

.file-menu-item:disabled,
.toolbar-dropdown button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Leading icon, where a site uses one. */
.file-menu-item svg {
    flex: 0 0 auto;
    color: var(--text-dim);
}

.file-menu-item:hover:not(:disabled) svg {
    color: var(--accent-bright);
}

/* Trailing shortcut hint. margin-left:auto pins it to the right edge however
   long the label is. */
.file-menu-item kbd {
    margin-left: auto;
    padding: 1px var(--space-3);
    background: rgba(var(--white-rgb), 0.04);
    border-radius: var(--radius-xs);
    color: var(--text-dim);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.file-menu-item:hover:not(:disabled) kbd {
    color: var(--accent-bright);
}

/* ---- Destructive item ---- */
.file-menu-item.file-menu-danger {
    color: var(--danger);
}

.file-menu-item.file-menu-danger:hover:not(:disabled) {
    background: rgba(var(--danger-rgb), 0.1);
    color: var(--danger);
}

.file-menu-item.file-menu-danger:hover:not(:disabled) svg,
.file-menu-item.file-menu-danger:hover:not(:disabled) kbd {
    color: var(--danger);
}

/* ---- Separator ---- */
.file-menu-sep,
.dropdown-divider {
    height: 1px;
    margin: var(--space-2) var(--space-3);
    background: var(--border);
}