/* Shared app hamburger menu (spec 024) — used by base.html and the live-logging shell.
   Uses theme vars (--dropdown-bg, --hamburger-line-color, etc.) defined by the host page
   (theme.css in the app; the live shell defines them in its own <style>). */
.hamburger-menu {
    position: relative;
}

.hamburger-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 32px;
    height: 32px;
}

.hamburger-line {
    width: 24px;
    height: 4px;
    background-color: var(--hamburger-line-color);
    margin: 0;
    transition: 0.3s;
    align-self: center;
}

.hamburger-dropdown {
    position: absolute;
    top: 100%;
    right: -16px;
    background-color: var(--dropdown-bg);
    border: 1px solid var(--dropdown-border);
    border-radius: 4px;
    box-shadow: 0 4px 12px var(--dropdown-shadow);
    min-width: 160px;
    z-index: 2010;
    display: none;
}

.hamburger-dropdown.show {
    display: block;
}

.hamburger-item {
    display: block;
    padding: 12px 16px;
    text-decoration: none;
    color: var(--text-color);
    border-bottom: 1px solid var(--border-color);
    transition: background-color 0.2s;
}

.hamburger-item:last-child {
    border-bottom: none;
}

.hamburger-item:hover {
    background-color: var(--hover-bg);
    text-decoration: none;
    color: var(--text-color);
}

.hamburger-item.disabled {
    color: var(--disabled-text);
    cursor: not-allowed;
}

.hamburger-item.disabled:hover {
    background-color: transparent;
}

/* 'Find a tune' search overlay (app-wide; opens the tune-detail modal on a result) */
#find-tune-overlay { position: fixed; inset: 0; z-index: 3000; }
#find-tune-overlay .ft-scrim { position: absolute; inset: 0; background: rgba(0,0,0,0.5); }
#find-tune-overlay .ft-panel {
    position: absolute; left: 50%; top: 12%; transform: translateX(-50%);
    width: min(440px, 92vw); max-height: 72vh; display: flex; flex-direction: column;
    background: var(--dropdown-bg, #18181b); color: var(--text-color, #ececef);
    border: 1px solid var(--dropdown-border, #2a2a30); border-radius: 12px;
    box-shadow: 0 18px 50px rgba(0,0,0,0.5); overflow: hidden;
}
#find-tune-overlay .ft-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 14px; font-weight: 700; border-bottom: 1px solid var(--border-color, #2a2a30);
}
#find-tune-overlay .ft-close { background: none; border: none; color: inherit; font-size: 16px; cursor: pointer; }
#find-tune-overlay .ft-input {
    margin: 12px 14px; padding: 10px 12px; font: inherit;
    background: var(--bg-color, #0e0e10); color: var(--text-color, #ececef);
    border: 1px solid var(--border-color, #2a2a30); border-radius: 8px;
}
#find-tune-overlay .ft-results { list-style: none; margin: 0; padding: 0 6px 10px; overflow-y: auto; }
#find-tune-overlay .ft-item {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    padding: 10px 12px; border-radius: 8px; cursor: pointer;
}
#find-tune-overlay .ft-item:hover { background: var(--hover-bg, rgba(255,255,255,0.06)); }
#find-tune-overlay .ft-type { color: var(--disabled-text, #9a9aa3); font-size: 13px; flex: none; }
#find-tune-overlay .ft-empty { padding: 10px 12px; color: var(--disabled-text, #9a9aa3); font-style: italic; }