/* Certificate view — the Fluent theme now loads DevExpress's Bootstrap 5 build app-wide
   (DxThemes.AddFluentTheme), so the plain flex/spacing utilities the certificate markup uses
   come from Bootstrap and are no longer shimmed here. What stays below is the part of the
   certificate's look that deliberately differs from stock Bootstrap — the borderless shadow
   card, the pale status pills, the DxButton-shaped anchors, the heading sizes — still scoped
   to `.cert-view` (CertificateView.razor) and `.cert-public` (PublicCertificate.razor's
   wrapper) so it cannot leak onto other pages. */
.cert-title { font-size: 1.6rem; margin: .25rem 0; color: #1a5fb4; letter-spacing: .04em; }
.cert-photo { width: 120px; height: 160px; max-width: 100%; object-fit: cover; border-radius: 8px; border: 1px solid #cfd6df; }
.cert-summary { white-space: pre-wrap; }
/* The scoring feature's line above the answers grid; not in the brief's Step 6 block because
   its example assumed a plain <p class="mb-2">, but the file's actual markup (kept verbatim
   per Task 3 ruling 1) uses this class — dropping the rule would have orphaned it. */
.cert-answer-score { font-weight: 600; margin: .25rem 0 0; }
/* Grids and charts scroll inside their card instead of widening the page on a phone. */
.cert-scroll { overflow-x: auto; }
.cert-chart { overflow-x: auto; margin: .5rem 0; }
/* Only the inline SVG chart (PDF-style fallback); never the DevExpress chart inside — its legend
   icons are <svg> without a size, and height:auto blew them up to 150px, squashing the plot
   (2026-09-20). */
.cert-chart > svg { max-width: 100%; height: auto; }
.cert-video { margin-bottom: 1rem; }
.cert-video video { width: 100%; border-radius: 8px; background: #000; }
.cert-video-meta { color: #4a5568; font-size: .9rem; margin-top: .25rem; }
/* The rich editor and the PDF fallback share one viewport-sized box. */
.cert-document { width: 100%; height: 70vh; min-height: 420px; }
.cert-document object { width: 100%; height: 100%; border: 1px solid #cfd6df; border-radius: 8px; }
/* DxMaskedInput applies CssClass to its wrapper, not the inner <input>, so the rule targets the descendant. */
.cert-pin-input input { letter-spacing: .4em; text-align: center; font-size: 1.4rem; }

/* --- Where the certificate's look departs from stock Bootstrap, scoped as described above. --- */
/* Bootstrap's .card draws a 1px border; the certificate's cards are shadow-only by design. */
.cert-view .card, .cert-public .card {
    background: #fff;
    border: 0;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.cert-view .card-body, .cert-public .card-body { padding: 1.25rem; }

.cert-view .badge, .cert-public .badge {
    display: inline-block;
    padding: .25em .65em;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 600;
    line-height: 1.4;
}
/* !important only because Bootstrap's own .bg-* utilities carry it — without it the pale
   pills above would become Bootstrap's solid green/amber chips. */
.cert-view .bg-success, .cert-public .bg-success { background: #e7f5ea !important; color: #1e7a37; }
.cert-view .bg-warning, .cert-public .bg-warning { background: #fdecea !important; color: #7a1f16; }

/* Buttons match the DxButton Primary render style via its own CSS custom properties, so
   these anchors (report.pdf and the certificate PDF are served inline, not through the
   circuit — see the comment above the "Prenesi poročilo" link) look identical to a real
   DxButton without becoming one. */
.cert-view .btn, .cert-public .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .45rem 1.1rem;
    border-radius: 6px;
    font-size: .95rem;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
}
.cert-view .btn-primary, .cert-public .btn-primary {
    background: var(--dxbl-btn-primary-bg, #1a5fb4);
    color: var(--dxbl-btn-primary-color, #fff);
    border-color: var(--dxbl-btn-primary-border-color, transparent);
}
.cert-view .btn-primary:hover, .cert-public .btn-primary:hover {
    background: var(--dxbl-btn-primary-hover-bg, #14498c);
}
.cert-view .btn-outline-primary, .cert-public .btn-outline-primary {
    background: transparent;
    color: var(--dxds-color-content-primary-default-rest, #1a5fb4);
    border-color: var(--dxds-color-border-primary-default-rest, #1a5fb4);
}
.cert-view .btn-outline-primary:hover, .cert-public .btn-outline-primary:hover {
    background: var(--dxds-color-surface-primary-subdued-rest, #eaf1fb);
    /* Bootstrap's own .btn:hover would turn the label white on this pale background. */
    color: var(--dxds-color-content-primary-default-rest, #1a5fb4);
}

/* Heading sizes are Bootstrap's, but the certificate's headings carry no bottom margin: the
   surrounding card/flex spacing positions them instead. */
.cert-view .h4, .cert-public .h4 { font-size: 1.5rem; font-weight: 500; line-height: 1.2; margin: 0; }
.cert-view .h5, .cert-public .h5 { font-size: 1.25rem; font-weight: 500; line-height: 1.2; margin: 0; }
.cert-view .h6, .cert-public .h6 { font-size: 1rem; font-weight: 500; line-height: 1.2; margin: 0; }
/* .card-title's margin wins over .h4/.h5/.h6's when an element carries both (same specificity,
   later in source order), so a card's heading always gets the card's own spacing. */
.cert-view .card-title, .cert-public .card-title { margin: 0 0 .5rem; font-weight: 600; }

@media print {
    .cert-no-print, .participant-header { display: none !important; }
    .cert-view .card, .cert-public .card { box-shadow: none; page-break-inside: avoid; }
    .cert-view .cert-document, .cert-view .cert-document object,
    .cert-public .cert-document, .cert-public .cert-document object { height: auto; }
}

/* Scoring detail under an answer (wizard preview, certificate page): every option with its
   points, the pick in bold. Not scoped — the wizard is not inside .cert-view. */
.cert-options { margin-top: .15rem; }
.cert-options li { line-height: 1.35; }
.cert-options .cert-option-chosen { color: #111827; font-weight: 600; }
.cert-manual-score-edit { width: 5rem; }