/*
 * V-MIDI — HOLOGRAPHX HARDWARE skin (v1)
 * Skins the app chrome only (header, toolbars, inspector, dialogs).
 * The controls on the canvas are designed by the user (their own colours,
 * borders and shadows), so they are deliberately left untouched.
 * Preserved: auto-learn pulse/spin, learn pulse, MIDI flash, pad retrigger.
 * Remove the <link> and body class "hx-hw" to undo.
 */

body.hx-hw {
    --hx-acc: #1fe3ff;
    --hx-acc-rgb: 31, 227, 255;
}

/* Header: two raised bars */
body.hx-hw.hx-hw #header {
    background: transparent !important;
    border: 0 !important;
    padding: 8px 10px 0 !important;
}
body.hx-hw.hx-hw #header .header-row {
    background: var(--hx-bar-bg) !important;
    border: 0 !important;
    border-radius: 12px !important;
    box-shadow: var(--hx-bar-shadow) !important;
    margin-bottom: 8px;
}
body.hx-hw.hx-hw #header .header-row-1 :is(h1, .logo, .app-title) {
    font-family: var(--hx-font) !important;
    font-style: normal !important;
    letter-spacing: .3em !important;
    color: #f1efec !important;
}
body.hx-hw.hx-hw .mode-indicator {
    font-family: var(--hx-font) !important;
    color: var(--hx-acc) !important;
    background: var(--hx-lcd-lines), var(--hx-lcd-bg) !important;
    border: 0 !important;
    box-shadow: var(--hx-lcd-shadow) !important;
    text-shadow: 0 0 8px var(--hx-acc-glow) !important;
}

/* Toolbar keys */
body.hx-hw.hx-hw #header :is(.action-btn, .control-btn, .page-nav-btn, .toolbar-menu > summary, .inspector-btn) {
    color: #d7d4d0 !important;
    background: var(--hx-key-bg) !important;
    border: 0 !important;
    border-radius: var(--hx-radius-key) !important;
    box-shadow: var(--hx-key-shadow);
    text-shadow: none !important;
}
body.hx-hw.hx-hw #header :is(.action-btn, .control-btn):hover { filter: brightness(1.2); }
body.hx-hw.hx-hw #header .action-btn.danger { color: #ff6b5e !important; }
body.hx-hw.hx-hw #header :is(.action-btn, .control-btn).active:not(.auto-learn-btn),
body.hx-hw.hx-hw #header .toolbar-menu[open] > summary {
    color: #061014 !important;
    background: var(--hx-key-on-bg) !important;
    box-shadow: var(--hx-key-on-shadow);
}
/* Auto-learn keeps its orange pulse and spinning icon */
body.hx-hw.hx-hw #header .auto-learn-btn:is(.active, .learning) {
    color: #ff9a2a !important;
    background: linear-gradient(180deg, #3a2208, #1c1004) !important;
}
body.hx-hw.hx-hw #header :is(.midi-select, select) {
    font-family: var(--hx-font) !important;
}
body.hx-hw.hx-hw .toolbar-menu-panel {
    background: linear-gradient(180deg, #1a1a1d, #0e0e10) !important;
    border: 0 !important;
    border-radius: 12px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 1px #26262a, 0 22px 48px rgba(0,0,0,.7) !important;
}
body.hx-hw.hx-hw .grid-size-input,
body.hx-hw.hx-hw .page-indicator,
body.hx-hw.hx-hw #page-indicator {
    font-family: var(--hx-font) !important;
    color: var(--hx-acc) !important;
    background: var(--hx-lcd-lines), var(--hx-lcd-bg) !important;
    border: 0 !important;
    box-shadow: var(--hx-lcd-shadow) !important;
}

/* Inspector: machined side panel */
body.hx-hw.hx-hw .inspector {
    background: linear-gradient(180deg, #19191c, #0e0e10) !important;
    border: 0 !important;
    border-radius: 12px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 1px #26262a, 0 22px 48px rgba(0,0,0,.7) !important;
}
body.hx-hw.hx-hw .inspector-header {
    font-family: var(--hx-font) !important;
    letter-spacing: .16em;
    border-bottom: 1px solid #222226 !important;
}
body.hx-hw.hx-hw .inspector :is(label, .inspector-label) {
    font-family: var(--hx-font) !important;
    letter-spacing: .12em;
    color: var(--hx-mute) !important;
}
body.hx-hw.hx-hw .inspector :is(input[type="text"], input[type="number"]) {
    font-family: var(--hx-font) !important;
    color: var(--hx-ink) !important;
    background: #0d0d0f !important;
    border: 0 !important;
    border-radius: 6px !important;
    box-shadow: inset 0 2px 5px #000, inset 0 0 0 1px #202024 !important;
}

/* Dialogs */
body.hx-hw.hx-hw .modal-content {
    background: linear-gradient(180deg, #19191c, #0e0e10) !important;
    border: 0 !important;
    border-radius: 14px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 1px #26262a, 0 30px 60px rgba(0,0,0,.75) !important;
}
body.hx-hw.hx-hw :is(.primary-btn, .secondary-btn, .modal-close) {
    font-family: var(--hx-font) !important;
    color: #d7d4d0 !important;
    background: var(--hx-key-bg) !important;
    border: 0 !important;
    border-radius: var(--hx-radius-key) !important;
    box-shadow: var(--hx-key-shadow) !important;
}
body.hx-hw.hx-hw .primary-btn {
    color: #061014 !important;
    background: var(--hx-key-on-bg) !important;
    box-shadow: var(--hx-key-on-shadow) !important;
}