/* =========================================================================
   Sound to Vision — main app theme (index.php)
   -------------------------------------------------------------------------
   Applies the Reactive Editor's look to the main app. Every colour comes
   from the --t-* variables in external/themes.css, so every theme works
   here unchanged. Load after layout.css and styles.css.

   How the pieces map onto the Reactive Editor:
     .aside (left properties panel)  ->  #stage-panel
     .header (top toolbar)           ->  .rightbar
     #timeline, floating panels      ->  panel surfaces
     page background                 ->  the stage grid colour (no lines)
     timeline blocks (tl-* classes)  ->  --t-tl-* palette per theme
   ========================================================================= */

/* ---------------------------------------------------------------------------
   Page: plain background in the colour of the editor's stage grid
   --------------------------------------------------------------------------- */
html,
body {
    font-family: var(--t-font);
}
body {
    color: var(--t-on-paper);
    background: var(--t-page-bg, var(--bp-paper));
}
.page-loader { background: var(--t-page-bg, var(--bp-paper)); }
.page-loader .text-muted { color: var(--t-on-paper) !important; }

/* Text written straight onto the page: FPS, "Lock Play Mode", hints, footer */
#kt_content .text-dark,
#kt_content .text-muted,
#kt_content .text-gray-600,
#kt_content .text-gray-800,
#kt_content .text,
#fps_view,
#kt_content .menu-link {
    color: var(--t-on-paper) !important;
}

::-webkit-scrollbar-thumb { background-color: var(--t-page-scroll); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background-color: var(--t-page-scroll-hover); }
::-webkit-scrollbar-track { background-color: transparent; box-shadow: none; }

/* ---------------------------------------------------------------------------
   Shared button look (toolbar, stage controls, cards, modals, panels):
   surface at rest, hover colour + darker edge on hover — as in the editor
   --------------------------------------------------------------------------- */
.header .btn-secondary,
#kt_content .btn-secondary,
.modal .btn-secondary,
.floating-panel .btn-secondary,
.aside .btn-secondary,
.aside .btn.btn-dark,
#the_assets .btn-dark,
.btn-light {
    --bs-btn-bg: var(--t-surface);
    --bs-btn-border-color: var(--t-btn-border);
    --bs-btn-color: var(--t-text);
    --bs-btn-hover-bg: var(--t-surface-hi);
    --bs-btn-hover-border-color: var(--t-btn-hover-border);
    --bs-btn-hover-color: var(--t-hover-text);
    --bs-btn-active-bg: var(--t-surface-hi);
    --bs-btn-active-border-color: var(--t-bar-btn-active-border);
    --bs-btn-active-color: var(--t-text-strong);
    --bs-btn-disabled-bg: var(--t-surface);
    --bs-btn-disabled-border-color: var(--t-btn-border);
    --bs-btn-disabled-color: var(--t-text-dim);
    --bs-btn-focus-shadow-rgb: 240, 188, 34;
}
.header .btn-secondary.show,
.aside .btn-secondary.show { border-bottom: 2px solid var(--t-open-underline); }   /* open dropdown */

/* Primary actions (Log In, Connect, ...) use the theme accent, like Create in the editor */
.modal .btn-primary,
.modal .btn-success {
    --bs-btn-bg: var(--t-accent);
    --bs-btn-border-color: var(--t-accent);
    --bs-btn-color: var(--t-accent-text);
    --bs-btn-hover-bg: var(--t-accent-hi);
    --bs-btn-hover-border-color: var(--t-accent-hi);
    --bs-btn-hover-color: var(--t-accent-text);
    --bs-btn-active-bg: var(--t-accent-hi);
    --bs-btn-active-border-color: var(--t-accent-hi);
    --bs-btn-active-color: var(--t-accent-text);
    --bs-btn-focus-shadow-rgb: 240, 188, 34;
    font-weight: 600;
}
.modal .btn-outline-primary {
    --bs-btn-color: var(--t-accent);
    --bs-btn-border-color: var(--t-accent);
    --bs-btn-hover-bg: var(--t-accent);
    --bs-btn-hover-border-color: var(--t-accent);
    --bs-btn-hover-color: var(--t-accent-text);
    --bs-btn-active-bg: var(--t-accent-hi);
    --bs-btn-active-border-color: var(--t-accent-hi);
    --bs-btn-active-color: var(--t-accent-text);
}
.btn-danger { font-weight: 600; }

/* ---------------------------------------------------------------------------
   Menus everywhere
   --------------------------------------------------------------------------- */
.dropdown-menu {
    --bs-dropdown-bg: var(--t-menu-bg);
    --bs-dropdown-border-color: var(--t-menu-border);
    --bs-dropdown-color: var(--t-menu-text);
    --bs-dropdown-link-color: var(--t-menu-text);
    --bs-dropdown-link-hover-bg: var(--t-menu-hover-bg);
    --bs-dropdown-link-hover-color: var(--t-menu-hover-text);
    --bs-dropdown-link-active-bg: var(--t-menu-active-bg);
    --bs-dropdown-link-active-color: var(--t-menu-active-text);
    --bs-dropdown-header-color: var(--t-menu-header);
    --bs-dropdown-divider-bg: var(--t-line);
    --bs-dropdown-border-radius: 3px;
    font: 12px/1.4 var(--t-font);
}

/* ---------------------------------------------------------------------------
   Top toolbar (.header)  ->  the editor's .rightbar
   --------------------------------------------------------------------------- */
.header {
    background: var(--t-bar-bg);
    backdrop-filter: var(--t-bar-filter);
    -webkit-backdrop-filter: var(--t-bar-filter);
    border-bottom: 1px solid var(--t-bar-edge);
    box-shadow: none;
    color: var(--t-text);
}
.header .toolbar-section > label { color: var(--t-bar-label); font-family: var(--t-font); }
.header .toolbar-btn,
.header .toolbar-icon-btn {
    border-width: 1px;
    border-radius: 3px;
    font: 500 12px/1 var(--t-font);
}
.header .toolbar-btn i,
.header .toolbar-icon-btn i { color: inherit; }
.header .toolbar-icon-btn i { font-size: 16px; line-height: 1; }
.header .toolbar-icon-btn .bi-upc { font-size: 18px; }   /* thin barcode glyph needs a little more */
.header .btn-danger { --bs-btn-border-color: var(--bs-btn-bg); }
.header .toolbar-input-group {
    border-color: var(--t-btn-border);
    border-radius: 3px;
    background: var(--t-surface);
}
.header .toolbar-input-group .toolbar-icon-btn { border-right: 1px solid var(--t-btn-border) !important; }
.header .form-check-input {
    background-color: var(--t-check-off-bg);
    border-color: var(--t-check-off-border);
    --bs-form-switch-bg: var(--t-switch-knob);
}
.header .toolbar-switch .form-check-input:checked,
.header .form-check-input:checked {
    background-color: var(--t-accent);
    border-color: var(--t-accent);
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}
.header .form-check-input:focus {
    border-color: var(--t-check-focus-border);
    box-shadow: var(--t-check-focus-ring);
}

/* Account menu when it folds into the person icon (narrow windows) */
.account-toggler { color: var(--t-bar-label); }
.account-toggler:hover { color: var(--t-hover-text); }
@media (max-width: 1500px) {
    .account-nav-items {
        background: var(--t-menu-bg);
        border: 1px solid var(--t-menu-border);
        border-radius: 3px;
    }
}

/* Theme menu: an icon button showing the current theme (as in the editor) */
.theme-menu { position: relative; }
.theme-menu > .dropdown-toggle::after { display: none; }
.theme-menu .dropdown-menu { min-width: 150px; padding: 4px; }
.theme-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 2px;
}
.theme-menu .dropdown-item i:first-child { width: 14px; text-align: center; }
.theme-menu .dropdown-item .theme-check { margin-left: auto; visibility: hidden; }
.theme-menu .dropdown-item[aria-checked="true"] { font-weight: 600; }
.theme-menu .dropdown-item[aria-checked="true"] .theme-check { visibility: visible; }

/* ---------------------------------------------------------------------------
   Left properties panel (.aside)  ->  the editor's #stage-panel
   --------------------------------------------------------------------------- */
.aside {
    background: var(--t-panel-bg);
    backdrop-filter: var(--t-panel-filter);
    -webkit-backdrop-filter: var(--t-panel-filter);
    border-right: 1px solid var(--t-panel-edge);
    box-shadow: none;
    color: var(--t-text);
    font: 13px/1.45 var(--t-font);
}
.aside *:not(i) { font-family: var(--t-font); }
.aside .aside-logo {
    background: var(--t-header-bg);
    backdrop-filter: var(--t-header-filter);
    -webkit-backdrop-filter: var(--t-header-filter);
    border-bottom: 1px solid var(--t-line);
}
.aside .aside-logo img { filter: var(--t-logo-filter); }

/* Tabs: Project / Asset / Filters / Extras */
.aside .nav-tabs {
    --bs-nav-tabs-border-color: var(--t-line);
    --bs-nav-tabs-link-hover-border-color: transparent;
    --bs-nav-tabs-link-active-bg: var(--t-surface);
    --bs-nav-tabs-link-active-color: var(--t-text-strong);
    --bs-nav-tabs-link-active-border-color: var(--t-line) var(--t-line) var(--t-surface);
    --bs-nav-link-color: var(--t-text-dim);
    --bs-nav-link-hover-color: var(--t-hover-text);
    border-bottom-color: var(--t-line);
}
.aside .nav-tabs .nav-link { font-size: 12px; border-radius: 3px 3px 0 0; }

/* Section titles and text */
.aside .menu-section,
.aside .settings-section-title,
.aside .menu-title {
    color: var(--t-text-strong) !important;
    font-weight: 600;
}
.aside .text-muted,
.aside .settings-unit { color: var(--t-text-dim) !important; }
.aside .text-light,
.aside label,
.aside .settings-row label { color: var(--t-text) !important; }
.aside i { color: inherit; }
.aside .bi-question-square,
.aside #aside_zoom_in i,
.aside #aside_zoom_out i {
    color: var(--t-text-dim);
    cursor: pointer;
    transition: color 0.15s ease;
}
.aside .bi-question-square { cursor: help; }
.aside .bi-question-square:hover,
.aside #aside_zoom_in:hover i,
.aside #aside_zoom_out:hover i { color: var(--t-hover-text); }
.aside hr { border-color: var(--t-line); opacity: 1; }

/* Fields: the aside's inputs and selects (most carry a bare btn-dark class) */
.aside input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
.aside select,
.aside textarea,
.aside .form-control,
.aside .form-select,
.modal .form-control,
.modal .form-select,
.floating-panel input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
.floating-panel select,
#timeline input[type="time"],
#timeline select {
    background-color: var(--t-field-bg);
    border: 1px solid var(--t-field-border);
    border-radius: 3px;
    color: var(--t-field-text);
    color-scheme: var(--t-field-scheme);
}
.aside select,
.aside .form-select,
.modal .form-select { --bs-form-select-bg-img: var(--t-select-arrow); }
.aside input::placeholder,
.aside textarea::placeholder,
.modal .form-control::placeholder { color: var(--t-field-placeholder); }
.aside input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):hover,
.aside select:hover,
.aside textarea:hover,
.modal .form-control:hover,
.floating-panel input:hover,
.floating-panel select:hover { background-color: var(--t-field-hover-bg); }
.aside input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):focus,
.aside select:focus,
.aside textarea:focus,
.modal .form-control:focus,
.modal .form-select:focus,
.floating-panel input:focus,
.floating-panel select:focus,
#timeline input[type="time"]:focus {
    background-color: var(--t-field-focus-bg);
    border-color: var(--t-field-focus-border);
    box-shadow: var(--t-focus-ring);
    outline: none;
}
.aside .input-group-text,
.modal .input-group-text {
    background: var(--t-surface-hi);
    border-color: var(--t-field-border);
    color: var(--t-text);
}

/* Colour pickers */
.aside input[type="color"] {
    padding: 2px;
    background: var(--t-field-bg);
    border: 1px solid var(--t-field-border);
    border-radius: 3px;
    cursor: pointer;
}
.aside input[type="color"]:hover { background: var(--t-field-hover-bg); }

/* Buttons (plain <button class="btn-dark">) */
.aside button:not(.nav-link):not(.btn-close):not(.dropdown-item) {
    background: var(--t-surface);
    border: 1px solid var(--t-btn-border);
    border-radius: 3px;
    color: var(--t-text);
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}
.aside button:not(.nav-link):not(.btn-close):not(.dropdown-item):hover {
    background: var(--t-surface-hi);
    border-color: var(--t-btn-hover-border);
    color: var(--t-hover-text);
}
.aside button:not(.nav-link):not(.btn-close):not(.dropdown-item):active {
    border-color: var(--t-btn-active-border);
    color: var(--t-text-strong);
}
.aside button:not(.nav-link):not(.btn-close):not(.dropdown-item):focus-visible {
    outline: none;
    box-shadow: var(--t-focus-ring);
}
/* SVG shape icons in the Extras tab were drawn in a fixed grey */
.aside button svg[fill]:not([fill="none" i]) { fill: currentColor; }
.aside button svg[stroke] { stroke: currentColor; }

/* Switches, checkboxes and radios: accent when on */
.aside .form-check-input,
.floating-panel .form-check-input,
.modal .form-check-input,
#kt_content .form-check-input,
#timeline .form-check-input {
    background-color: var(--t-check-off-bg);
    border-color: var(--t-check-off-border);
    cursor: pointer;
}
.aside .form-check-input:checked,
.floating-panel .form-check-input:checked,
.modal .form-check-input:checked,
#kt_content .form-check-input:checked,
#timeline .form-check-input:checked {
    background-color: var(--t-accent);
    border-color: var(--t-accent);
}
.aside .form-check-input:focus,
.floating-panel .form-check-input:focus,
.modal .form-check-input:focus,
#kt_content .form-check-input:focus {
    border-color: var(--t-check-focus-border);
    box-shadow: var(--t-check-focus-ring);
}
.aside .form-switch .form-check-input:not(:checked),
.floating-panel .form-switch .form-check-input:not(:checked),
.modal .form-switch .form-check-input:not(:checked),
#kt_content .form-switch .form-check-input:not(:checked) { --bs-form-switch-bg: var(--t-switch-knob); }
.aside input[type="range"],
.floating-panel input[type="range"],
#timeline input[type="range"],
.modal input[type="range"] { accent-color: var(--t-accent); }
/* Sliders. Bootstrap 5.3 compiles the thumb colour in (#0d6efd), so it has to be
   set on the thumb and track pseudo-elements themselves. --range-thumb lets a
   slider take another colour (the animation modes below); default is the accent. */
.form-range::-webkit-slider-thumb { background-color: var(--range-thumb, var(--t-accent)); }
.form-range::-webkit-slider-thumb:active { background-color: color-mix(in srgb, var(--range-thumb, var(--t-accent)) 80%, #000); }
.form-range::-moz-range-thumb { background-color: var(--range-thumb, var(--t-accent)); }
.form-range::-moz-range-thumb:active { background-color: color-mix(in srgb, var(--range-thumb, var(--t-accent)) 80%, #000); }
.form-range::-webkit-slider-runnable-track { background-color: var(--t-range-track); }
.form-range::-moz-range-track { background-color: var(--t-range-track); }
.form-range:focus::-webkit-slider-thumb { box-shadow: var(--t-focus-ring); }
.form-range:focus::-moz-range-thumb { box-shadow: var(--t-focus-ring); }

/* Animation modes. View-properties.js and View-filters.js colour the mode
   icons (icon_ani_sel_*, fparam_*) and each mode's controls with Bootstrap's
   text-success / -primary / -warning / -secondary; inside the aside those
   mean interpolate / signal / trigger / off, in the theme's mode colours. */
.aside .text-success   { color: var(--t-mode-interp) !important; }
.aside .text-primary   { color: var(--t-mode-signal) !important; }
.aside .text-warning   { color: var(--t-mode-trigger) !important; }
.aside .text-secondary { color: var(--t-mode-off) !important; }
/* Animation-mode buttons (ease_btn_*, and the filter ones holding fparam_*):
   same height, fill and edge as the field beside them, and joined to it like
   an input group. #kt_aside outranks the general aside button rule. */
#kt_aside button[id^="ease_btn_"],
#kt_aside button:has(> [id^="fparam_"]) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 23px;
    min-width: 25px;
    padding: 0 5px !important;
    vertical-align: top;
    background: var(--t-field-bg);
    border-color: var(--t-field-border);
}
#kt_aside button[id^="ease_btn_"]:hover,
#kt_aside button:has(> [id^="fparam_"]):hover {
    background: var(--t-field-hover-bg);
    border-color: var(--t-field-border);
}
#kt_aside button[id^="ease_btn_"] i,
#kt_aside button:has(> [id^="fparam_"]) [id^="fparam_"] { font-size: 13px; line-height: 1; }
#kt_aside :is(input, select):has(+ button[id^="ease_btn_"]) {
    vertical-align: top;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
#kt_aside :is(input, select) + button[id^="ease_btn_"] {
    margin-left: -1px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
/* ...and to the mode's option select that follows it (e.g. "linear"), so the
   field, mode button and option read as one control */
#kt_aside button[id^="ease_btn_"]:has(+ select),
#kt_aside button[id^="ease_btn_"]:has(+ .dropdown-content + select) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
#kt_aside button[id^="ease_btn_"] + select,
#kt_aside button[id^="ease_btn_"] + .dropdown-content + select {
    margin-left: -1px;
    vertical-align: top;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* Mode sliders (Cutoff, Gain, mRange, ...): each sits beside its value field,
   which carries the mode's text-* class; trigger sliders also have
   form-range-warning. The thumb takes the mode colour, so it changes along
   with the controls when the mode button is clicked. */
.aside :has(> .text-success) > .form-range { --range-thumb: var(--t-mode-interp); }
.aside :has(> .text-primary) > .form-range { --range-thumb: var(--t-mode-signal); }
.aside :has(> .text-warning) > .form-range,
.aside .form-range.form-range-warning { --range-thumb: var(--t-mode-trigger); }

/* Green-outlined action buttons (Edit in Reactive Editor, Launch ... Wizard) */
.aside .btn.text-success { color: var(--t-accent) !important; }
.aside .border-success { border-color: var(--t-accent) !important; }

/* Colour palette swatches */
.palette .color { border-color: var(--t-btn-border); }
.palette .color:hover { border-color: var(--t-hover-text); }

/* Panel scrollbar */
.aside #inner_cont {
    scrollbar-width: thin;
    scrollbar-color: var(--t-scroll-color) transparent;
}
.aside #inner_cont::-webkit-scrollbar-thumb { background: var(--t-scroll-thumb); }
.aside #inner_cont::-webkit-scrollbar-thumb:hover { background: var(--t-scroll-thumb-hover); }

/* ---------------------------------------------------------------------------
   Timeline (bottom panel). "body" outranks the <style> block in _toolbar-1.php.
   --------------------------------------------------------------------------- */
body #timeline {
    background: var(--t-panel-bg);
    backdrop-filter: var(--t-panel-filter);
    -webkit-backdrop-filter: var(--t-panel-filter);
    border-top: 1px solid var(--t-panel-edge);
    box-shadow: var(--t-ai-shadow);
    color: var(--t-text);
}
body #timeline-resizer,
body #timeline-left-resizer { background: var(--t-line); }
body #timeline-resizer:hover,
body #timeline-left-resizer:hover { background: var(--t-btn-hover-border); }
#timeline .text-dark,
#timeline small { color: var(--t-text) !important; }
#timeline .btn.btn-icon-dark i,
#timeline .btn.btn-icon-dark svg,
#timeline .btn.btn-icon-primary i { color: var(--t-text); transition: color 0.15s ease; }
#timeline .btn.btn-icon-dark:hover i,
#timeline .btn.btn-icon-dark:hover svg,
#timeline .btn.btn-icon-primary:hover i { color: var(--t-hover-text); }
#timeline .btn.btn-icon-primary i { color: var(--t-accent); }
#timeline input[type="time"] { font-size: 12px; }
/* One icon size across the timeline toolbar (the markup mixes fs-4 and unsized
   icons). Copy and clipboard fill more of their box, so they go a little smaller. */
#timeline .btn-flush i { font-size: 16px !important; line-height: 1; }
#timeline #copy_asset_btn i,
#timeline #paste_asset_btn i { font-size: 14px !important; }

/* d3 axis and track labels */
.xaxis path,
.xaxis line { stroke: var(--t-text-dim); }
.xaxis text { fill: var(--t-text); }

/* Tracks. WaveformGraphic.js and AudioGraphic.js tag what they draw with
   tl-* classes; these rules outrank the fill/stroke attributes they set. */
body #cvid { background: var(--t-tl-bg); }
/* Track area: in line with the toolbar, 10px in from the left resize bar
   (Bootstrap's .row pulled it flush against the bar) */
body #timeline #cvid { margin-left: 0; margin-right: 0; }
.tl-reg:not(.tl-type-midi_note):not(.tl-type-midi_cc) { stroke: var(--t-tl-stroke); }
.tl-type-video      { fill: var(--t-tl-video); }
.tl-type-reactive   { fill: var(--t-tl-reactive); }
.tl-type-text       { fill: var(--t-tl-text); }
.tl-type-photo      { fill: var(--t-tl-photo); }
.tl-type-svg,
.tl-type-midi_cc    { fill: var(--t-tl-svg); }
.tl-type-stack      { fill: var(--t-tl-stack); }
.tl-type-midi_note  { fill: var(--t-tl-midi); }
.tl-type-audio      { fill: var(--t-tl-audio); }
.tl-reg.tl-selected {
    fill: var(--t-tl-selected);
    stroke: var(--t-tl-selected-stroke);
}
.tl-handle { fill: var(--t-tl-handle); stroke: var(--t-tl-handle); }
.tl-marker { stroke: var(--t-tl-stroke); }
.tl-playhead { fill: var(--t-tl-playhead); }
.tl-stage-label,
.tl-stage-arrow,
.lead-in,
.stereo_mix_label,
.audio_lane_label { fill: var(--t-text-dim); }
.tl-lane { stroke: var(--t-text-dim); }

/* ---------------------------------------------------------------------------
   Stage controls and asset library (on the grid)
   --------------------------------------------------------------------------- */
#kt_content .btn-secondary { border-width: 1px; }

/* Stage tools (fullscreen, dual screen, export, reset zoom): icon centred in a 45px square */
#kt_content .stage-tool-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 3px !important;
}
#kt_content .stage-tool-btn i { font-size: 20px; line-height: 1; margin: 0; }

#the_assets .card {
    --bs-card-bg: var(--t-panel-bg);
    --bs-card-border-color: var(--t-panel-edge);
    --bs-card-color: var(--t-text);
    backdrop-filter: var(--t-panel-filter);
    -webkit-backdrop-filter: var(--t-panel-filter);
    border-radius: 4px;
    color: var(--t-text);
}
#the_assets .text-light { color: var(--t-text) !important; }
/* Card header: drag handle, previous, next (View-AssetCards.js). Same size as
   the toolbar buttons, with a small gap between them. */
.asset-card-controls {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
#the_assets .asset-card-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border-width: 1px;
    border-radius: 3px;
}
#the_assets .asset-card-btn i { font-size: 14px; line-height: 1; }
#the_assets .card > div:first-child { padding: 6px 6px 0 2px; }   /* the header row */
#the_assets .draggable-handle { cursor: grab; }
/* Remove "x" on imported/created assets: a small square in the thumbnail's
   top-right corner, the icon centred at a fixed size (Bootstrap's fs-2 is
   responsive and overflowed the button) */
#the_assets .asset-remove {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 1;
    line-height: 0;
}
#the_assets .asset-remove-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    margin: 0;
    border-radius: 3px;
    opacity: 0.9;
}
#the_assets .asset-remove-btn i { font-size: 11px; line-height: 1; }
#the_assets .asset-remove-btn:hover { opacity: 1; }
#the_assets .draggable-handle:active { cursor: grabbing; }

/* Tagify keyword boxes on the cards */
.tagify {
    --tags-border-color: var(--t-field-border);
    --tags-hover-border-color: var(--t-btn-hover-border);
    --tags-focus-border-color: var(--t-field-focus-border);
    --tag-bg: var(--t-surface-hi);
    --tag-hover: var(--t-surface);
    --tag-text-color: var(--t-text);
    --tag-remove-btn-color: var(--t-text-dim);
    --tag-remove-bg: var(--t-surface);
    --input-color: var(--t-field-text);
    --placeholder-color: var(--t-field-placeholder);
    background: var(--t-field-bg);
    border-radius: 3px;
}
/* Keyword box in the aside fills its row */
.aside .tagify { width: 100%; }

/* Read-only and disabled tags: no cross-hatch (it fought with the text);
   a solid tag with a dashed edge instead, and the box less faded */
.tagify { --readonly-striped: 0; }
.tagify__tag[readonly] > div::before,
.tagify[disabled] .tagify__tag > div::before,
.tagify[readonly] .tagify__tag > div::before {
    outline: 1px dashed var(--t-field-border);
    outline-offset: -1px;
}
.tagify[disabled] { opacity: 0.75; }

/* Category tags keep their own pale fill (lightblue, pink), so they keep dark text */
.tagify__tag[style*="--tag-bg"] {
    --tag-text-color: #1f2d3a;
    --tag-remove-btn-color: #1f2d3a;
}

/* ---------------------------------------------------------------------------
   Modals and toasts
   --------------------------------------------------------------------------- */
.modal-content {
    --bs-modal-bg: var(--t-menu-bg);
    --bs-modal-color: var(--t-text);
    --bs-modal-border-color: var(--t-menu-border);
    --bs-modal-header-border-color: var(--t-line);
    --bs-modal-footer-border-color: var(--t-line);
    --bs-modal-border-radius: 4px;
    font-family: var(--t-font);
    box-shadow: var(--t-ai-shadow);
}
.modal-title { color: var(--t-text-strong); font-weight: 600; }
/* Modal titles and section headings take the floating-panel title style
   (Signal Editor, Loop Editor): small caps-style uppercase, spaced out */
.modal .modal-title,
.modal .section-title {
    color: var(--t-text-strong) !important;
    font-family: var(--t-font);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.1rem;
    line-height: 1.4;
    text-transform: uppercase;
}
.modal .section-title { margin-bottom: 0.5rem; }
.modal .card-header .section-title { margin-bottom: 0; }
.modal .text-dark { color: var(--t-text) !important; }
.modal .text-muted { color: var(--t-text-dim) !important; }
.modal a:not(.btn) { color: var(--t-accent); }
.modal .progress { background: var(--t-progress-track); }
.modal .progress-bar { background-color: var(--t-accent); }

/* The microphone, MIDI and shortcut modals were built dark (bg-dark, table-dark,
   text-light); bring them onto the theme too */
.modal-content.bg-dark {
    background-color: var(--t-menu-bg) !important;
    border-color: var(--t-menu-border) !important;
    color: var(--t-text) !important;
}
.modal .border-secondary { border-color: var(--t-line) !important; }
.modal .text-light { color: var(--t-text) !important; }
.modal .modal-title.text-light { color: var(--t-text-strong) !important; }
.modal .bg-light {
    background-color: var(--t-surface) !important;
    color: var(--t-text);
    border: 1px solid var(--t-line);
}
.modal .card {
    --bs-card-bg: var(--t-surface);
    --bs-card-cap-bg: var(--t-surface-hi);
    --bs-card-color: var(--t-text);
    --bs-card-border-color: var(--t-line);
    --bs-card-cap-color: var(--t-text-strong);
}
.modal .table,
.modal .table-dark {
    --bs-table-bg: var(--t-surface);
    --bs-table-color: var(--t-text);
    --bs-table-border-color: var(--t-line);
    --bs-table-striped-bg: var(--t-surface-hi);
    --bs-table-striped-color: var(--t-text);
    --bs-table-hover-bg: var(--t-surface-hi);
    --bs-table-hover-color: var(--t-text-strong);
}
/* Icon-only buttons in modals (MIDI zoom in/out) */
.modal .btn.btn-icon-light i,
.modal .btn.btn-icon-dark i { color: var(--t-text); transition: color 0.15s ease; }
.modal .btn.btn-icon-light:hover i,
.modal .btn.btn-icon-dark:hover i { color: var(--t-hover-text); }

/* Microphone Level Monitor: the spectrum (drawn by Modal_micro.js in the
   theme's colours) and the level meters */
#micSpectrumCanvas {
    display: block;
    width: 100%;
    background: var(--t-field-bg);
    border: 1px solid var(--t-field-border);
    border-radius: 3px;
}
.modal meter {
    width: 100%;
    height: 8px;
    border: 1px solid var(--t-field-border);
    border-radius: 4px;
    background: var(--t-progress-track);
    overflow: hidden;
    vertical-align: middle;
}
.modal meter::-webkit-meter-bar {
    height: 8px;
    border: 0;
    border-radius: 4px;
    background: var(--t-progress-track);
}
.modal meter::-webkit-meter-optimum-value { background: var(--t-mode-interp); border-radius: 4px; }
.modal meter::-webkit-meter-suboptimum-value { background: var(--t-mode-trigger); border-radius: 4px; }
.modal meter::-webkit-meter-even-less-good-value { background: #dc3545; border-radius: 4px; }
.modal meter::-moz-meter-bar { background: var(--t-mode-interp); border-radius: 4px; }
.modal meter:-moz-meter-sub-optimum::-moz-meter-bar { background: var(--t-mode-trigger); }
.modal meter:-moz-meter-sub-sub-optimum::-moz-meter-bar { background: #dc3545; }

.modal kbd {
    background: var(--t-surface-hi);
    border: 1px solid var(--t-btn-border);
    color: var(--t-text-strong);
}
/* MIDI note and CC logs: same boxes as in the Reactive Editor */
.modal #note_td,
.modal #cc_td {
    background: var(--t-field-bg);
    border: 1px solid var(--t-field-border);
    border-radius: 3px;
    color: var(--t-log-text) !important;
    font-variant-numeric: tabular-nums;
}
/* btn-close-white was only right on the old dark modals */
html[data-bs-theme="light"] .btn-close-white { filter: none; }

.toast {
    --bs-toast-bg: var(--t-menu-bg);
    --bs-toast-color: var(--t-text);
    --bs-toast-border-color: var(--t-menu-border);
    --bs-toast-header-bg: var(--t-surface-hi);
    --bs-toast-header-color: var(--t-text);
    --bs-toast-header-border-color: var(--t-line);
}
.toast .text-dark { color: var(--t-text) !important; }

/* Help popovers (the ? icons) */
.popover {
    --bs-popover-bg: var(--t-menu-bg);
    --bs-popover-border-color: var(--t-menu-border);
    --bs-popover-body-color: var(--t-text);
    --bs-popover-header-bg: var(--t-surface-hi);
    --bs-popover-header-color: var(--t-text-strong);
    --bs-popover-border-radius: 4px;
    --bs-popover-font-size: 12px;
    font-family: var(--t-font);
    box-shadow: var(--t-ai-shadow);
}
.popover a { color: var(--t-accent); }
.popover .stov-popover-close {
    display: block;
    position: absolute;
    top: 6px;
    right: 6px;
    width: 8px;
    height: 8px;
    background-size: 8px;
}
.popover:has(.stov-popover-close) .popover-body { padding-right: 24px; }

/* ---------------------------------------------------------------------------
   Floating panels (generator, signal, loop)
   --------------------------------------------------------------------------- */
.floating-panel {
    background: var(--t-panel-bg);
    backdrop-filter: var(--t-panel-filter);
    -webkit-backdrop-filter: var(--t-panel-filter);
    border: 1px solid var(--t-panel-edge);
    border-radius: 4px;
    box-shadow: var(--t-ai-shadow);
    color: var(--t-text);
    font-family: var(--t-font);
}
.floating-panel .panel-header {
    background: var(--t-header-bg);
    backdrop-filter: var(--t-header-filter);
    -webkit-backdrop-filter: var(--t-header-filter);
    border-bottom: 1px solid var(--t-line);
    border-radius: 4px 4px 0 0;
}
.floating-panel .panel-title { color: var(--t-header-text); font-weight: 600; }
.floating-panel .panel-btn { color: var(--t-header-text); }
.floating-panel .panel-btn:hover { background: var(--t-surface-hi); color: var(--t-hover-text); }
.floating-panel .ctrl label,
.floating-panel .text-dark { color: var(--t-text-dim) !important; }
.floating-panel .panel-plot { border-color: var(--t-line); }

@media (prefers-reduced-motion: reduce) {
    .aside button,
    .aside .bi-question-square,
    #timeline .btn i,
    #the_assets .bi { transition: none; }
}