:root {
  --app-primary: #0b3d6e;
  --bs-primary: #0b5cad;
  --bs-primary-rgb: 11, 92, 173;
  --bs-link-color: #0b5cad;
  --bs-link-color-rgb: 11, 92, 173;
}

body { background: #f3f5f8; }
.btn-primary { --bs-btn-bg: #0b5cad; --bs-btn-border-color: #0b5cad; --bs-btn-hover-bg: #094c8f; --bs-btn-hover-border-color: #094c8f; --bs-btn-active-bg: #083f77; }
.btn-outline-primary { --bs-btn-color: #0b5cad; --bs-btn-border-color: #0b5cad; --bs-btn-hover-bg: #0b5cad; --bs-btn-hover-border-color: #0b5cad; --bs-btn-active-bg: #0b5cad; }
.app-navbar { background: var(--app-primary); }
.min-w-0 { min-width: 0; }
.thumb { width: 110px; height: 80px; object-fit: cover; }

.cat-badge { background: color-mix(in srgb, var(--cat) 14%, white); color: color-mix(in srgb, var(--cat) 80%, black); border: 1px solid color-mix(in srgb, var(--cat) 35%, white); font-weight: 600; }
.exercise-card { border-top: 4px solid var(--cat); transition: transform .1s ease, box-shadow .1s ease; }
.exercise-card:hover { transform: translateY(-2px); box-shadow: 0 .5rem 1rem rgba(0,0,0,.08) !important; }

.next-training { background: linear-gradient(135deg, #0b3d6e, #0b5cad); color: #fff; border: 0; }

.rendered > :last-child { margin-bottom: 0; }
.rendered ul, .rendered ol { padding-left: 1.2rem; }

/* wizard */
.wizard { display: flex; list-style: none; padding: 0; margin: 0 0 1rem; gap: .25rem; counter-reset: step; overflow-x: auto; }
.wizard li { flex: 1 1 0; min-width: 0; }
.wizard li > a, .wizard li > span { display: flex; align-items: center; gap: .5rem; padding: .5rem .25rem; color: #6c757d; text-decoration: none; border-bottom: 3px solid #dee2e6; white-space: nowrap; }
.wizard .num { display: inline-flex; width: 1.6rem; height: 1.6rem; border-radius: 50%; align-items: center; justify-content: center; background: #dee2e6; color: #495057; font-weight: 600; font-size: .85rem; flex: none; }
.wizard li.done .num { background: #198754; color: #fff; }
.wizard li.done > a { border-color: #198754; color: #198754; }
.wizard li.active > span, .wizard li.active > a { border-color: var(--bs-primary); color: var(--bs-primary); font-weight: 600; }
.wizard li.active .num { background: var(--bs-primary); color: #fff; }
.wizard .label { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 575.98px) { .wizard li:not(.active) .label { display: none; } .wizard li.active { flex: 3 1 0; } }

/* plan */
.block-row { border-left: 4px solid var(--cat); }
.block-row.sortable-ghost { opacity: .4; }
.drag-handle { cursor: grab; touch-action: none; font-size: 1.2rem; }
.duration-input { width: 6.5rem; flex: none; }
.nav-pills-scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
.nav-pills-scroll .nav-link { white-space: nowrap; font-size: .875rem; }
@media (min-width: 992px) { .nav-pills-scroll { flex-wrap: wrap; overflow-x: visible; } }
.nav-pills-scroll .nav-link.active { background: var(--cat); }
.catalog-list { max-height: 65vh; overflow-y: auto; }
.catalog-item.variation { background: #fafbfc; }
.block-nav .list-group-item { border-left: 4px solid var(--cat); }
.block-nav { top: 4.5rem; max-height: calc(100vh - 6rem); overflow-y: auto; }

.sticky-actions { position: sticky; bottom: 0; background: #fff; padding: .75rem 0; margin-bottom: -.75rem; border-top: 1px solid #eee; z-index: 5; }

/* training view */
.block-card { border-left: 5px solid var(--cat); scroll-margin-top: 8rem; }
.block-card.current { box-shadow: 0 0 0 3px #198754 !important; }
.block-card.done { opacity: .6; }
.block-num { display: inline-flex; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--cat, #495057); color: #fff; align-items: center; justify-content: center; font-weight: 700; font-size: .8rem; margin-right: .25rem; }
.timer-bar { top: 3.6rem; z-index: 1010; }
.comment { background: #f8f9fa; border-radius: .5rem; padding: .4rem .6rem; margin-bottom: .4rem; }
.comment-text { white-space: pre-wrap; word-break: break-word; }
.training-view .rendered { font-size: 1.02rem; }

@media (max-width: 575.98px) {
  main { padding-left: .5rem; padding-right: .5rem; }
  .card-body { padding: .85rem; }
  h1.h3 { font-size: 1.35rem; }
}

/* print */
.print-view { background: #fff; }
.print-container { max-width: 900px; }
.print-header { border-bottom: 2px solid #000; padding-bottom: .5rem; margin-bottom: .75rem; }
.print-block { border: 1px solid #ccc; border-left: 5px solid var(--cat, #999); border-radius: 4px; padding: .5rem .75rem; margin-bottom: .75rem; break-inside: avoid; page-break-inside: avoid; }
.print-block-body.has-diagram { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.print-diagram img, .print-diagram canvas { max-width: 100%; height: auto; }
.print-steps { margin-top: .5rem; }
.print-images { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.print-images img { max-height: 160px; max-width: 48%; object-fit: contain; }
.print-notes { margin-top: .5rem; border-top: 1px dashed #bbb; min-height: 2.5rem; font-size: .75rem; color: #888; }
.print-overview { font-size: .85rem; }

@media print {
  .print-stack > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }
  @page { size: A4; margin: 12mm; }
  body { background: #fff; font-size: 11pt; }
  main { padding: 0 !important; }
  .print-container { max-width: none; padding: 0; }
  a { color: inherit; text-decoration: none; }
  .block-num { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .print-block { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

@media (max-width: 575.98px) {
  .block-card .card-header > .text-end { text-align: left !important; display: flex; gap: .75rem; }
}