/* claves - application styles (mobile-first). No inline styles anywhere: CSP style-src 'self'. */

body {
    background: var(--bs-tertiary-bg);
    min-height: 100vh;
}

/* Dark theme support for select2 (the bootstrap-5 theme only styles light mode) */
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection,
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown,
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field {
    background-color: var(--bs-body-bg);
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered,
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option {
    color: var(--bs-body-color);
}
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--highlighted {
    background-color: var(--bs-primary);
    color: #fff;
}
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection__placeholder {
    color: var(--bs-secondary-color);
}

.app-container {
    max-width: 960px;
}

.screen-center {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.screen-center.d-none {
    display: none !important;
}

.auth-card {
    width: 100%;
    max-width: 440px;
}

/* Strength meter: width via classes (no inline style). */
.strength-bar {
    height: 6px;
}
.strength-bar .progress-bar { transition: width .2s ease; }
.strength-0 { width: 0; }
.strength-1 { width: 25%; background-color: var(--bs-danger); }
.strength-2 { width: 50%; background-color: var(--bs-warning); }
.strength-3 { width: 75%; background-color: var(--bs-info); }
.strength-4 { width: 100%; background-color: var(--bs-success); }

/* Recovery code */
.recovery-code {
    font-size: 1.05rem;
    letter-spacing: .05em;
    word-break: break-word;
    line-height: 1.8;
    user-select: all;
}

/* Entry list */
.entry-item .entry-title {
    font-weight: 500;
}
.entry-item .entry-sub {
    font-size: .85rem;
    color: var(--bs-secondary-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.entry-item .entry-main {
    min-width: 0;
}

/* Entry view fields */
.entry-fields .entry-field {
    padding: .5rem 0;
    border-bottom: 1px solid var(--bs-border-color-translucent);
}
.entry-fields .entry-field:last-child {
    border-bottom: 0;
}
.entry-fields dt {
    font-size: .8rem;
    font-weight: 500;
    color: var(--bs-secondary-color);
    margin-bottom: .15rem;
}
.entry-fields dd {
    margin: 0;
    display: flex;
    align-items: flex-start;
    gap: .5rem;
}
.entry-fields .field-value {
    flex: 1 1 auto;
    min-width: 0;
    word-break: break-word;
    overflow-wrap: anywhere;
}
.entry-fields .field-value.multiline {
    white-space: pre-wrap;
}
.entry-fields .field-value.secret {
    font-family: var(--bs-font-monospace);
}
.entry-fields .field-value.masked {
    letter-spacing: .1em;
    color: var(--bs-secondary-color);
}
.entry-fields .field-actions {
    flex: 0 0 auto;
    display: flex;
    gap: .25rem;
}
.copied-feedback {
    font-size: .75rem;
    color: var(--bs-success);
    align-self: center;
}

/* select2 inside Bootstrap 5 */
.select2-container--bootstrap-5 .select2-selection {
    min-height: calc(1.5em + .75rem + 2px);
}
.search-result-sub {
    font-size: .8rem;
    opacity: .75;
}

.placeholder-card {
    opacity: .7;
}

#print-area {
    display: none;
}

/* Print only the recovery code. */
@media print {
    body.printing-recovery > *:not(#print-area) {
        display: none !important;
    }
    body.printing-recovery #print-area {
        display: block !important;
        font-family: var(--bs-font-monospace);
        padding: 2rem;
    }
    body.printing-recovery #print-area h1 {
        font-size: 1.4rem;
        font-family: var(--bs-body-font-family);
    }
    body.printing-recovery #print-area .print-code {
        font-size: 1.3rem;
        letter-spacing: .08em;
        line-height: 2;
        margin: 1.5rem 0;
        word-break: break-word;
    }
}

/* Phase 2: PIN, TOTP */
.pin-input {
    letter-spacing: .4em;
}
.totp-qr {
    width: 200px;
    height: 200px;
    image-rendering: pixelated;
    background: #fff;
}
.min-w-0 {
    min-width: 0;
}