/*
 * FrontierCo IT Admin — application styles.
 *
 * Kept in a file rather than a <style> block because the Content-Security-Policy
 * is `style-src 'self'`, which blocks inline CSS and style="" attributes.
 * Bootstrap 5 utility classes cover almost everything; only what Bootstrap
 * genuinely lacks belongs here.
 */

.login-wrap {
    min-height: 100vh;
    padding: 2rem 1rem;
}

.login-card {
    width: 100%;
    max-width: 24rem;
}

/* Stat tiles on the dashboard. */
.stat-value {
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.1;
}

/* Keep long audit payloads from stretching the table. */
.truncate-cell {
    max-width: 22rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Monospace for machine-readable values such as permission names. */
.mono {
    font-family: var(--bs-font-monospace);
    font-size: 0.875em;
}

/* Temporary-password callout needs to be visually impossible to skim past. */
.credential-box {
    font-family: var(--bs-font-monospace);
    font-size: 1.05rem;
    letter-spacing: 0.03em;
    word-break: break-all;
}

/*
 * Embedded invoice document on the review screen.
 *
 * The card is a flex column so the body — and the iframe inside it — absorbs
 * whatever height is left after the header. Giving the iframe a percentage
 * height only works if every ancestor has a resolved height, which is why the
 * card carries an explicit one rather than relying on h-100.
 *
 * `min-height: 0` on the body is load-bearing: a flex child defaults to
 * min-height:auto and will refuse to shrink below its content, which pushes
 * the frame past the bottom of the card.
 */
.doc-card {
    /* Sticky so the document stays in view while scrolling a long line-item
       list — the whole point is comparing the two side by side. */
    position: sticky;
    top: 1rem;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 7rem);
    min-height: 28rem;
}

.doc-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.doc-frame {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* Scans are images: let them scroll inside the pane rather than stretching
   the card to the height of the page. */
.doc-scroll {
    height: 100%;
    overflow: auto;
}

@media (max-width: 1199.98px) {
    /* Stacked layout: sticky would pin the document over the form, and a
       full-height pane would push the fields off screen entirely. */
    .doc-card {
        position: static;
        height: 65vh;
        min-height: 22rem;
    }
}