/* GTraining — enkel Bootstrap-variabelen, geen hardcoded kleuren */

/* Merkkleur: oranje in plaats van het Bootstrap-standaard blauw */
:root {
    --bs-primary: #fd7e14;
    --bs-primary-rgb: 253, 126, 20;
    --bs-primary-bg-subtle: #fff0e0;
    --bs-primary-border-subtle: #fecba1;
    --bs-primary-text-emphasis: #7a3d09;
    --bs-link-color: var(--bs-primary);
    --bs-link-color-rgb: var(--bs-primary-rgb);
    --bs-link-hover-color: #ca6510;
    --bs-link-hover-color-rgb: 202, 101, 16;
    --bs-focus-ring-color: rgba(253, 126, 20, .25);
}
[data-bs-theme="dark"] {
    --bs-primary-bg-subtle: #4a2a08;
    --bs-primary-border-subtle: #7a3d09;
    --bs-primary-text-emphasis: #fecba1;
}
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #ca6510;
    --bs-btn-hover-border-color: #bd5f0f;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #bd5f0f;
    --bs-btn-active-border-color: #b1590e;
    --bs-btn-disabled-bg: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
}
.btn-outline-primary {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bs-primary);
    --bs-btn-active-border-color: var(--bs-primary);
    --bs-btn-disabled-color: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
}
.text-primary { color: var(--bs-primary) !important; }
.text-bg-primary {
    color: #fff !important;
    background-color: RGBA(var(--bs-primary-rgb), 1) !important;
}
.border-primary { border-color: var(--bs-primary) !important; }
.bg-primary { background-color: var(--bs-primary) !important; }
.link-primary { color: var(--bs-primary) !important; }
.link-primary:hover, .link-primary:focus { color: var(--bs-link-hover-color) !important; }

.form-check-input:checked,
.form-check-input:focus,
.btn-check:checked + .btn,
.btn-check:active + .btn {
    accent-color: var(--bs-primary);
}
.form-select:focus,
.form-control:focus {
    border-color: #fecba1;
    box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color);
}
.nav-link.active,
.page-link.active,
.page-item.active .page-link {
    color: var(--bs-primary);
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--bs-primary) !important;
    color: #fff !important;
}
.page-item.active .page-link {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}
.spinner-border.text-primary,
.spinner-grow.text-primary {
    color: var(--bs-primary) !important;
}
.progress-bar {
    background-color: var(--bs-primary);
}

/* Bootstrap mist deze flex-utility (nodig voor text-truncate in flex-rijen) */
.min-w-0 { min-width: 0; }

/* Drag & drop */
.drag-handle {
    cursor: grab;
    color: var(--bs-secondary-color);
}
.drag-handle:active { cursor: grabbing; }
.sortable-ghost { opacity: 0.4; }
.sortable-chosen { background-color: var(--bs-tertiary-bg); }

/* Upload-dropzone */
.dropzone {
    border: 2px dashed var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    padding: 2rem 1rem;
    text-align: center;
    color: var(--bs-secondary-color);
    transition: border-color .15s, background-color .15s;
    cursor: pointer;
}
.dropzone.dragover {
    border-color: var(--bs-primary);
    background-color: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis);
}

/* Favoriet-ster */
.js-fav { cursor: pointer; color: var(--bs-secondary-color); }
.js-fav.is-fav { color: var(--bs-warning); }

/* Resource-lijst */
.resource-row .resource-actions { visibility: hidden; }
.resource-row:hover .resource-actions { visibility: visible; }
.resource-thumb {
    width: 80px;
    height: 45px;
    object-fit: cover;
    border-radius: var(--bs-border-radius-sm);
}

/* Categorie-navigatie */
.cat-tree .list-group-item { border: 0; padding: .3rem .75rem; }
.cat-tree a { text-decoration: none; color: var(--bs-body-color); }
.cat-tree a.active { color: var(--bs-primary); font-weight: 600; }
.cat-tree .cat-child { padding-left: 2rem; }

/* Practice mode */
.practice-timer {
    font-size: clamp(3rem, 12vw, 6rem);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    line-height: 1;
}
.practice-timer.overtime { color: var(--bs-danger); }

/* Metronoom */
.beat-dots { display: flex; gap: .5rem; justify-content: center; }
.beat-dot {
    width: 14px; height: 14px; border-radius: 50%;
    background-color: var(--bs-border-color);
    transition: background-color .05s, transform .05s;
}
.beat-dot.active { background-color: var(--bs-primary); transform: scale(1.4); }
.beat-dot.accent.active { background-color: var(--bs-danger); }
.beat-dot.active.muted { background-color: var(--bs-secondary-color); }

.bpm-display {
    font-size: 3rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

/* Rating-sterren */
.rating-btns .btn { min-width: 2.5rem; }

/* BPM-voortgang mini */
.bpm-mini {
    font-variant-numeric: tabular-nums;
    font-size: .85em;
    color: var(--bs-secondary-color);
    white-space: nowrap;
}

/* alphaTab viewer */
.at-wrap {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    overflow: auto;
    max-height: 70vh;
    background-color: var(--bs-body-bg);
}

/* YouTube embed 16:9 */
.yt-wrap { position: relative; width: 100%; aspect-ratio: 16 / 9; }
.yt-wrap iframe, .yt-wrap > div { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Dashboard */
.stat-value { font-size: 1.75rem; font-weight: 700; line-height: 1.1; }
.stat-label { color: var(--bs-secondary-color); font-size: .85rem; }