@import url("styles/fonts.css");
@import url("styles/tokens.css");
@import url("styles/theme-light.css");
@import url("styles/base.css");
@import url("styles/filter-button.css");
@import url("styles/documents.css");


/* ── Display utilities ────────────────────────────────────── */

.d-block        { display: block; }
.d-inline-block { display: inline-block; }
.d-flex         { display: flex; }
.d-inline-flex  { display: inline-flex; }


/* ── Flexbox utilities ────────────────────────────────────── */

.flex-wrap { flex-wrap: wrap; }

.align-items-start  { align-items: flex-start; }
.align-items-center { align-items: center; }
.align-items-end    { align-items: flex-end; }

.justify-content-start   { justify-content: flex-start; }
.justify-content-center  { justify-content: center; }
.justify-content-end     { justify-content: flex-end; }
.justify-content-between { justify-content: space-between; }

.gap-2 { gap: var(--spacing-2); }
.gap-3 { gap: var(--spacing-3); }


/* ── Spacing utilities ────────────────────────────────────── */
/* Margin/padding utilities, one per side, mapped to the shared spacing scale
   (tokens.css). Only the values actually used across the app are defined —
   add more as needed rather than generating the full scale up front. */

.mb-0 { margin-bottom: var(--spacing-0); }
.mb-1 { margin-bottom: var(--spacing-1); }
.mb-2 { margin-bottom: var(--spacing-2); }
.mb-3 { margin-bottom: var(--spacing-3); }
.mb-4 { margin-bottom: var(--spacing-4); }

.mt-1 { margin-top: var(--spacing-1); }
.mt-2 { margin-top: var(--spacing-2); }
.mt-3 { margin-top: var(--spacing-3); }
.mt-4 { margin-top: var(--spacing-4); }

.me-1 { margin-right: var(--spacing-1); }
.me-2 { margin-right: var(--spacing-2); }

.p-0 { padding: var(--spacing-0); }
.p-3 { padding: var(--spacing-3); }

.pb-0 { padding-bottom: var(--spacing-0); }
.pb-1 { padding-bottom: var(--spacing-1); }
.pb-2 { padding-bottom: var(--spacing-2); }
.pb-3 { padding-bottom: var(--spacing-3); }
.pb-4 { padding-bottom: var(--spacing-4); }
.pb-5 { padding-bottom: var(--spacing-5); }
.pb-6 { padding-bottom: var(--spacing-6); }


.px-0 {
    padding-left: var(--spacing-0);
    padding-right: var(--spacing-0);
}

.py-3 {
    padding-top: var(--spacing-3);
    padding-bottom: var(--spacing-3);
}

.py-4 {
    padding-top: var(--spacing-4);
    padding-bottom: var(--spacing-4);
}


/* ── Typography utilities ─────────────────────────────────── */

.fw-semibold { font-weight: var(--font-weight-semibold); }
.fw-bold     { font-weight: var(--font-weight-bold); }

/* Class equivalent of the <small> element (base.css), for text that isn't
   semantically a <small> but should read at the same size. */
.small {
    font-size: var(--type-body-sm-size);
    line-height: var(--type-body-sm-line);
}

.text-muted     { color: var(--colour-text-muted); }
.text-primary   { color: var(--colour-text-primary); }
.text-secondary { color: var(--colour-text-secondary); }
.text-dark      { color: var(--colour-text-primary); }
.text-danger    { color: var(--colour-danger); }
.text-success   { color: var(--colour-success); }

.text-center    { text-align: center; }
.text-end       { text-align: right; }
.text-uppercase { text-transform: uppercase; }

/* 768px mirrors --breakpoint-md — custom properties can't be used inside an
   @media feature query, so the value has to be repeated as a literal here. */
@media (min-width: 768px) {
    .text-md-end { text-align: right; }
}


/* ── Blazor framework selectors ───────────────────────────── */

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: var(--border-width-1) solid var(--colour-brand);
}

.invalid {
    outline: var(--border-width-1) solid var(--colour-danger);
}

.validation-message {
    color: var(--colour-danger);
}

.blazor-error-boundary {
    background: var(--colour-danger);
    padding: var(--spacing-4);
    color: var(--colour-white);
}

.blazor-error-boundary::after {
    content: "An error has occurred.";
}


/* ── Auth utilities ───────────────────────────────────────── */

.auth-forgot-row {
    display: flex;
    justify-content: flex-end;
    margin-top: calc(var(--spacing-2) * -1);
    margin-bottom: var(--spacing-1);
}

.auth-forgot-link {
    font-size: var(--text-sm);
    color: var(--colour-text-secondary);
    text-decoration: none;
}

.auth-forgot-link:hover {
    text-decoration: underline;
}

.auth-footer {
    text-align: center;
    font-size: var(--text-xs);
    color: var(--colour-text-muted);
    margin-top: var(--spacing-6);
}

.auth-back-row {
    text-align: center;
    margin-top: var(--spacing-5);
}

.auth-back-link {
    font-size: var(--text-sm);
    color: var(--colour-text-muted);
    text-decoration: none;
}

.auth-back-link:hover {
    color: var(--colour-text-secondary);
    text-decoration: underline;
}


.auth-section-text {
    text-align: center;
    font-size: var(--text-sm);
    color: var(--colour-text-muted);
    margin-top: var(--spacing-5);
}

.auth-section-text a {
    color: var(--colour-brand);
    text-decoration: none;
}

.auth-section-text a:hover {
    text-decoration: underline;
}

.auth-manual-key {
    font-family: var(--font-mono), monospace;
    font-size: var(--text-sm);
    word-break: break-all;
    background: var(--colour-surface-subtle);
    padding: var(--spacing-2) var(--spacing-3);
    border-radius: var(--radius-sm);
    border: var(--border-width-1) solid var(--colour-border-strong);
    color: var(--colour-text-primary);
    display: block;
    margin-bottom: var(--spacing-4);
}


/* ── Certifications layout ─────────────────────────────────── */

/* Control table beside a detail panel. Scoped to .cert-grid rather than redefining the
   shared .row/.col utilities, which other pages (and definition lists) still rely on. */
.cert-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-4);
}

/* Stacked on narrow viewports; min-width:0 lets the table column shrink instead of
   forcing the row wider than the container. */
.cert-grid > .col-lg-8,
.cert-grid > .col-lg-4 {
    flex: 1 1 100%;
    min-width: 0;
}

/* At the lg breakpoint, split 2:1 — table two-thirds, detail one-third (gap-aware). */
@media (min-width: 1024px) {
    .cert-grid > .col-lg-8 {
        flex: 2 1 0;
    }

    .cert-grid > .col-lg-4 {
        flex: 1 1 0;
    }
}

/* Label/value rows in the selected-control detail panel. */
.cert-detail {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: var(--spacing-3);
    row-gap: var(--spacing-1);
    margin: 0;
}

.cert-detail dt {
    font-weight: var(--font-weight-semibold, 600);
    color: var(--colour-text-secondary);
}

.cert-detail dd {
    margin: 0;
}

/* Long, unbroken values (storage references, user ids) shouldn't overflow the narrow detail panel. */
.cert-detail__break {
    word-break: break-all;
}