/* iVault application styles. Builds on Bootstrap 5 theme variables so both
   light and dark modes work without duplicated rules. */

html, body {
    height: 100%;
}

.ivault-sidebar {
    min-width: 230px;
    max-width: 230px;
    min-height: 100vh;
}

.ivault-sidebar .nav-link {
    color: var(--bs-body-color);
    border-radius: 0.375rem;
}

.ivault-sidebar .nav-link.active,
.ivault-sidebar .nav-link:hover {
    background-color: var(--bs-primary-bg-subtle);
    color: var(--bs-primary);
}

.ivault-brand {
    font-weight: 700;
    letter-spacing: 0.02em;
}

.stat-card .stat-icon {
    font-size: 1.75rem;
    opacity: 0.85;
}

.password-mask {
    font-family: var(--bs-font-monospace);
    letter-spacing: 0.1em;
}

.auth-card {
    max-width: 430px;
    margin: 6vh auto;
}

#qr-code svg {
    max-width: 200px;
    height: auto;
}

.recovery-codes code {
    display: inline-block;
    margin: 0.15rem 0.4rem;
    font-size: 1rem;
}

/* Global search in the header; an inline style attribute would violate the CSP. */
.global-search {
    max-width: 320px;
}

/* Authenticator page */
.totp-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
}

.totp-code {
    font-size: 1.6rem;
    letter-spacing: 0.06em;
    color: var(--bs-primary);
    cursor: pointer;
    user-select: none;
}

.totp-ring {
    width: 32px;
    height: 32px;
    transform: rotate(-90deg);
}

.totp-ring-track {
    fill: none;
    stroke: var(--bs-border-color);
    stroke-width: 3;
}

.totp-ring-fill {
    fill: none;
    stroke: var(--bs-primary);
    stroke-width: 3;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.9s linear;
}

.totp-ring-fill.totp-ring-warning {
    stroke: var(--bs-danger);
}

.min-width-0 {
    min-width: 0;
}