/* Low-contrast theme baseline: cards as containers, rounded corners, soft
   shadows, icon-only action buttons (see docs/PROJECT-BRIEF.md: UI / Style). */

html {
    font-size: 14px;
}

body {
    background-color: var(--bs-tertiary-bg);
}

.card {
    --bs-card-border-radius: 1rem;
    --bs-card-inner-border-radius: 1rem;
    border: 0;
    border-radius: 1rem;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.18);
}

.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border-radius: 0.75rem;
}

.btn-icon-tight {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.5rem;
}

.btn-navbar-icon {
    border: 0;
    background: transparent;
    color: var(--bs-secondary-color);
    font-size: 1.375rem;
}

.btn-navbar-icon:hover,
.btn-navbar-icon:focus,
.btn-navbar-icon:active {
    background: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
}

.btn-navbar-icon.dropdown-toggle::after {
    display: none;
}

.sidebar-col {
    width: 20rem;
    flex: 0 0 20rem;
}

.sidebar {
    background-color: var(--bs-body-bg);
    border-radius: 1rem;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.18);
    overflow: hidden;
}

.navbar {
    background-color: color-mix(in srgb, var(--bs-secondary-bg) 70%, black 15%) !important;
    border-bottom: 0 !important;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.6);
}

.navbar-brand {
    font-size: 1.5rem;
}

.btn-dashed {
    border-style: dashed;
}

.sidebar-header {
    background-color: color-mix(in srgb, var(--bs-secondary-bg) 70%, black 15%);
    padding: 0.75rem 1rem;
}

.card-header {
    background-color: color-mix(in srgb, var(--bs-secondary-bg) 70%, black 15%);
    border-bottom: 0;
    padding: 0.75rem 1rem;
}

.modal-header {
    background-color: var(--bs-dark);
    color: #fff;
    padding: 0.5rem 1rem;
}

.modal-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

.modal-footer {
    background-color: var(--bs-secondary-bg);
}

.modal-content {
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.4);
}

.js-drag-over-top {
    box-shadow: inset 0 3px 0 0 var(--bs-primary);
}

.js-drag-over-bottom {
    box-shadow: inset 0 -3px 0 0 var(--bs-primary);
}

/* box-shadow on <tr> paints behind cell backgrounds, so table rows need the
   indicator applied per-cell instead. */
tr.js-drag-over-top > td {
    box-shadow: inset 0 3px 0 0 var(--bs-primary);
}

tr.js-drag-over-bottom > td {
    box-shadow: inset 0 -3px 0 0 var(--bs-primary);
}

.js-row-disabled > td {
    background-color: var(--bs-secondary-bg);
}

/* Bootstrap stacks a fresh .modal-backdrop per open modal, all at the same
   z-index and opacity, so a nested modal's backdrop sits flush on top of the
   parent's and reads as one flat layer instead of darkening further. Bump
   each backdrop after the first so stacked modals visibly recede. */
.modal-backdrop.show ~ .modal-backdrop.show {
    opacity: 0.75;
}

.modal-backdrop.show ~ .modal-backdrop.show ~ .modal-backdrop.show {
    opacity: 0.85;
}

/* Transport row (music clip full-file playback): three-column grid so the
   play/stop button group stays visually centered regardless of how wide the
   cursor-position and duration labels either side of it are. */
.pq-transport-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
}

.pq-transport-row > .btn-group {
    justify-self: center;
}

/* Dual-handle range slider (music clip crop range): two native <input
   type=range> stacked on top of each other. Each track is made invisible and
   non-interactive; only the thumb re-enables pointer events, so clicks land
   on whichever thumb is under the cursor instead of the top input eating
   every click. .pq-dual-range-fill is a separate div, positioned/sized in JS
   as a percentage of the slider's range, painting the selected span between
   the two thumbs (native ranges can't paint an inter-thumb fill portably). */
.pq-dual-range {
    position: relative;
    height: 1.5rem;
}

.pq-dual-range input[type="range"] {
    position: absolute;
    inset: 0;
    width: 100%;
    margin: 0;
    background: none;
    pointer-events: none;
}

.pq-dual-range input[type="range"]::-webkit-slider-runnable-track {
    background: transparent;
}

.pq-dual-range input[type="range"]::-moz-range-track {
    background: transparent;
}

.pq-dual-range input[type="range"]::-webkit-slider-thumb {
    pointer-events: auto;
}

.pq-dual-range input[type="range"]::-moz-range-thumb {
    pointer-events: auto;
}

.pq-dual-range-start {
    z-index: 2;
}

.pq-dual-range-end {
    z-index: 1;
}

.pq-dual-range-track {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 4px;
    transform: translateY(-50%);
    background: var(--bs-secondary-bg);
    border-radius: 2px;
    pointer-events: none;
}

.pq-dual-range-fill {
    position: absolute;
    top: 50%;
    height: 4px;
    transform: translateY(-50%);
    background: var(--bs-primary);
    border-radius: 2px;
    pointer-events: none;
}

/* Bootstrap sizes badges with line-height:1, which centers the font's em box
   rather than the glyphs. Fonts with a deep descent (what system-ui resolves
   to varies per browser, notably Chrome vs Firefox on Linux) then push
   descender-less text like round/question numbers visibly too high. Trimming
   to cap height and baseline centers the glyphs themselves, identically in
   every browser that supports it; the padding keeps the badge its usual size. */
@supports (text-box: trim-both cap alphabetic) {
    .badge {
        text-box: trim-both cap alphabetic;
        padding-top: 0.5em;
        padding-bottom: 0.5em;
    }
}

/* Bootstrap nudges badges up 1px inside buttons to sit on a text baseline.
   Our round/question badges are flex items in align-items-center buttons,
   where that nudge only knocks them off-center. */
.btn .badge {
    top: 0;
}