/*
 * onlms additions to Tabler 1.4. Keep this file small: only what Tabler does not provide.
 */

/* Brand: logo + product name (sidebar and sign-in page); a long name is cut with an ellipsis. */
.brand-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 100%;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.brand-link:hover {
    text-decoration: none;
}

.brand-link .navbar-brand-image {
    flex-shrink: 0;
}

.brand-name {
    min-width: 0;
    overflow: hidden;
    font-size: 1.25rem;
    font-weight: var(--tblr-font-weight-bold);
    letter-spacing: -0.01em;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.navbar-vertical .navbar-brand {
    min-width: 0;
}

/* Tabler sizes SVG icons in empty states; size the icon font the same way. */
.empty-icon .ti {
    font-size: 3rem;
    line-height: 1;
}

/* Exception trace on the debug error page. */
.error-trace {
    max-height: 24rem;
    overflow: auto;
    font-size: 0.75rem;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Progress bars of finished courses (partials/progress). */
.progress-completed::-webkit-progress-value {
    background-color: var(--tblr-green);
}

.progress-completed::-moz-progress-bar {
    background-color: var(--tblr-green);
}

/*
 * Badges on light ("-lt") backgrounds. Tabler draws their text in the full colour, which stays below the WCAG AA
 * contrast of 4.5:1 for small text (yellow about 2:1, green 2.5:1, blue 4.4:1). The text is darkened just enough
 * (mixed with black; the share is computed per colour) to reach at least 5:1 on the badge background; the
 * background stays as it is.
 */
.badge.bg-blue-lt {
    color: color-mix(in srgb, var(--tblr-blue) 88%, #000) !important;
}

.badge.bg-primary-lt {
    color: color-mix(in srgb, var(--tblr-primary) 88%, #000) !important;
}

.badge.bg-azure-lt,
.badge.bg-info-lt {
    color: color-mix(in srgb, var(--tblr-azure) 67%, #000) !important;
}

.badge.bg-indigo-lt {
    color: color-mix(in srgb, var(--tblr-indigo) 88%, #000) !important;
}

.badge.bg-purple-lt {
    color: color-mix(in srgb, var(--tblr-purple) 86%, #000) !important;
}

.badge.bg-pink-lt {
    color: color-mix(in srgb, var(--tblr-pink) 83%, #000) !important;
}

.badge.bg-red-lt,
.badge.bg-danger-lt {
    color: color-mix(in srgb, var(--tblr-red) 84%, #000) !important;
}

.badge.bg-orange-lt {
    color: color-mix(in srgb, var(--tblr-orange) 66%, #000) !important;
}

.badge.bg-yellow-lt,
.badge.bg-warning-lt {
    color: color-mix(in srgb, var(--tblr-yellow) 55%, #000) !important;
}

.badge.bg-lime-lt {
    color: color-mix(in srgb, var(--tblr-lime) 59%, #000) !important;
}

.badge.bg-green-lt,
.badge.bg-success-lt {
    color: color-mix(in srgb, var(--tblr-green) 63%, #000) !important;
}

.badge.bg-teal-lt {
    color: color-mix(in srgb, var(--tblr-teal) 67%, #000) !important;
}

.badge.bg-cyan-lt {
    color: color-mix(in srgb, var(--tblr-cyan) 66%, #000) !important;
}

.badge.bg-secondary-lt {
    color: color-mix(in srgb, var(--tblr-secondary) 87%, #000) !important;
}

/* Dark already reads at about 13:1; the rule keeps every light badge colour listed here. */
.badge.bg-dark-lt {
    color: color-mix(in srgb, var(--tblr-dark) 88%, #000) !important;
}

/* "Skip to content" link of layouts/app: hidden until it gets the keyboard focus, then shown above the sidebar. */
.skip-link:focus {
    position: fixed;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 1100;
    padding: 0.5rem 1rem;
    border-radius: var(--tblr-border-radius);
    background-color: var(--tblr-bg-surface);
    box-shadow: var(--tblr-box-shadow);
}

#main:focus {
    outline: none;
}

/* Text in a table cell (name + email) that may wrap inside long words but not shrink to a few letters. */
.cell-text {
    min-width: 7.5rem;
}

/*
 * A column of text beside buttons in a row (the page title beside the page's buttons, a card's details beside its
 * actions). Bootstrap's .col counts as no width when the row decides what fits on a line, so many buttons squeezed
 * the text to a letter per line; this column counts as 15rem, and buttons that do not fit beside that move to the
 * next line instead.
 */
.col-text {
    flex: 1 1 15rem;
    min-width: 0;
}

/*
 * Icon-only buttons (.btn-icon, e.g. partials/delete-button without a label): Tabler pulls the icon out with negative
 * margins, so the button needs its own square size or it collapses to its borders.
 */
.btn-icon {
    --onlms-btn-icon-size: calc(var(--tblr-btn-line-height) * var(--tblr-btn-font-size)
        + var(--tblr-btn-padding-y) * 2 + var(--tblr-btn-border-width) * 2);
    min-width: var(--onlms-btn-icon-size);
    min-height: var(--onlms-btn-icon-size);
}

/* Exams: question texts keep the learner-visible line breaks of the question form. */
.exam-prompt {
    white-space: pre-line;
}

/* The countdown of an exam attempt stays in view while the learner scrolls through the questions. */
.exam-timer {
    position: sticky;
    top: 1rem;
    z-index: 2;
}

/* Fill-in questions (§19): the blanks sit in the text, as wide as a short answer; the lines leave room for them. */
.exam-cloze {
    line-height: 2.5;
}

.exam-blank {
    display: inline-block;
    width: 10rem;
    max-width: 100%;
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
    line-height: 1.5;
    vertical-align: baseline;
}

/* A blank with its accepted answers (question lists), and the answer a learner typed (review). */
.exam-blank-answer {
    padding: 0 0.25rem;
    border-radius: var(--tblr-border-radius-sm);
    background-color: rgba(var(--tblr-green-rgb), 0.14);
    color: inherit;
}

.exam-blank-given {
    padding: 0 0.25rem;
    border-bottom: 2px solid var(--tblr-red);
}

.exam-blank-given.is-right {
    border-bottom-color: var(--tblr-green);
}

/* Matching and ordering questions: one row per item with its select; on phones the select goes below the item. */
.exam-pairs {
    display: grid;
    gap: 0.5rem;
}

.exam-pair {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--tblr-border-color);
    border-radius: var(--tblr-border-radius);
}

.exam-pair-item {
    flex: 1 1 12rem;
    margin: 0;
}

.exam-pair .form-select {
    flex: 0 1 18rem;
    width: auto;
    max-width: 100%;
}

.exam-pair .exam-place {
    flex: 0 0 5rem;
}

/* The numbers of a draw of random questions on the exam page. */
.exam-draw-number {
    width: 5.5rem;
}

/* Question analysis (§19): bars of questions under half right are red, under three quarters orange. */
.exam-rate-low::-webkit-progress-value {
    background-color: var(--tblr-red);
}

.exam-rate-low::-moz-progress-bar {
    background-color: var(--tblr-red);
}

.exam-rate-mid::-webkit-progress-value {
    background-color: var(--tblr-orange);
}

.exam-rate-mid::-moz-progress-bar {
    background-color: var(--tblr-orange);
}

/*
 * Surveys: the rating buttons of the survey form keep their 1 - 5 order in one row, share its width (so the scale
 * labels below line up with 1 and 5) and stay a comfortable size on wide screens.
 */
.survey-rating {
    max-width: 32rem;
}

.survey-rating .form-selectgroup {
    display: flex;
    flex-wrap: nowrap;
}

.survey-rating .form-selectgroup-item {
    flex: 1 1 0;
}

.survey-rating-option {
    justify-content: center;
    width: 100%;
}

/* Results of a survey: bar labels and counts line up from row to row; written answers read as quotes. */
.survey-bar-label {
    min-width: 2.5rem;
}

.survey-bar-count {
    min-width: 5.5rem;
    text-align: end;
}

.survey-text {
    margin: 0;
    padding: 0.25rem 0 0.25rem 0.75rem;
    border-left: 3px solid var(--tblr-border-color);
}

/*
 * Course covers (partials/course-cover, docs/ARCHITECTURE.md §18): always 16:9, the image cropped to fill; without
 * an image the panel takes the light colour of the course format (bg-azure-lt / bg-purple-lt) and shows its icon.
 */
.course-cover {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.course-cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.course-cover-card .ti,
.course-cover-panel .ti {
    font-size: 2.5rem;
}

.course-cover-thumb {
    flex-shrink: 0;
    width: 4.5rem;
    border-radius: var(--tblr-border-radius);
}

.course-cover-thumb .ti {
    font-size: 1.25rem;
}

.course-cover-panel {
    border-radius: var(--tblr-border-radius);
}