/* VeriPledge Brand Variables */
:root {
    --vp-primary: #1b6ec2;
    --vp-primary-light: #e8f0fe;
    --vp-verified: #10b981;
    --vp-self-signed: #3b82f6;
    --vp-discovered: #6b7280;
    --vp-dark: #1e293b;
    --vp-surface: #f8fafc;
    --vp-border: #e2e8f0;
    --vp-sidebar-width: 240px;
}

html, body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    background: #f8fafc;
    min-height: 100vh;
}

/* Sticky footer: layouts without a sidebar use <main> as the flex grow region */
body {
    display: flex;
    flex-direction: column;
}

main {
    flex: 1 0 auto;
}

/* ── Shared cross-component styles ───────────────────────────────────────────
   These classes are used in more than one component so they must stay global.
   Do not move them to a .razor.css file or CSS isolation will break them.
*/

/* Badge card – used in BadgeCard.razor and directly in EntityProfile.razor */
.vp-badge-card {
    border-radius: 12px !important;
    border-left: 4px solid var(--vp-primary) !important;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.vp-badge-card .card-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.vp-pledge-notes {
    overflow-y: auto;
    max-height: 80px;
    flex: 1 1 auto;
    min-height: 0;
}

/* Tier badge – used in TierBadge.razor (rendered inside many parent components) */
.vp-tier-badge {
    font-size: 0.75rem;
}

/* Embed code block – used in Badge.razor and VerifyEntity.razor */
.vp-embed-code {
    background: #1e293b;
    color: #e2e8f0;
    border-radius: 8px;
    padding: 1.25rem;
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    white-space: pre-wrap;
    word-break: break-all;
}

/* Form validation */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
    font-size: 0.875rem;
}

/* Blazor error */
#blazor-error-ui {
    display: none;
}