:root {
    --brand: #244c66;
    --brand-dark: #173345;
}

body {
    background: #f4f6f8;
    color: #20262b;
}

.bg-brand,
.btn-primary {
    background-color: var(--brand) !important;
    border-color: var(--brand) !important;
}

.btn-primary:hover {
    background-color: var(--brand-dark) !important;
}

.card {
    border-color: #dce2e6;
}

.metric-card {
    min-height: 112px;
}

.metric-value {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
}

.status {
    display: inline-block;
    border-radius: 999px;
    background: #e7ebee;
    padding: .18rem .55rem;
    font-size: .78rem;
    font-weight: 600;
}

.status-issued {
    background: #d9f2e4;
    color: #155c35;
}

.status-draft {
    background: #edf0f2;
    color: #4b565d;
}

.status-pending_validation {
    background: #fff1c9;
    color: #765500;
}

.status-failed_issuance,
.status-cancelled {
    background: #f9d9dd;
    color: #812330;
}

.login-shell {
    min-height: calc(100vh - 3rem);
    display: grid;
    place-items: center;
}

.login-card {
    width: min(100%, 420px);
}

.form-sidebar {
    top: 1rem;
}

.document-line {
    background: #f8fafb;
    border: 1px solid #e0e5e8;
    border-radius: .5rem;
    padding: .75rem;
    margin-bottom: .75rem;
}

pre {
    max-height: 28rem;
    overflow: auto;
    background: #101820;
    color: #e5edf2;
    padding: .8rem;
    border-radius: .35rem;
    white-space: pre-wrap;
    word-break: break-word;
}

details summary {
    cursor: pointer;
}

.email-preview {
    background: #fff;
    overflow-wrap: anywhere;
}

@media (max-width: 991px) {
    [data-nav] {
        display: none;
        padding-top: 1rem;
    }

    [data-nav].show {
        display: block;
    }
}