/* Styles specific to the security tool group. */

/* ---------- JWT Inspector ---------- */

.jwt-token-view {
    font-family: var(--font-mono);
    font-size: 12.5px;
    line-height: 1.7;
    padding: 12px 14px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--bg-input);
    word-break: break-all;
    max-height: 180px;
    overflow: auto;
}

.jwt-part-header {
    color: hsl(187 85% 62%);
}

.jwt-part-payload {
    color: hsl(262 85% 74%);
}

.jwt-part-signature {
    color: hsl(350 90% 70%);
}

.jwt-part-dot {
    color: var(--text-faint);
    padding: 0 1px;
}

.jwt-claims-table .kv-value {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
}

.jwt-claim-note {
    flex-basis: 100%;
    display: block;
    font-family: var(--font-ui);
    font-size: 12px;
    color: var(--text-faint);
}

.jwt-claim-time {
    font-size: 12px;
    color: var(--text-dim);
}

.jwt-badge-pulse {
    animation: jwt-badge-pulse 0.9s var(--ease-spring);
}

@keyframes jwt-badge-pulse {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 100, 116, 0.55); }
    35% { transform: scale(1.12); }
    100% { transform: scale(1); box-shadow: 0 0 0 12px rgba(255, 100, 116, 0); }
}

/* ---------- Certificate Inspector ---------- */

.certificate-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-raised);
    padding: 14px 16px;
    margin-top: 12px;
    animation: certificate-card-in 0.45s var(--ease-out) both;
    animation-delay: calc(var(--i) * 90ms);
}

@keyframes certificate-card-in {
    from { opacity: 0; transform: translateY(16px) scale(0.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.certificate-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
}

.certificate-cn {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.2px;
    word-break: break-all;
}

.certificate-card-badges {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.certificate-chip-section {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
}

.certificate-section-label {
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-faint);
    margin-right: 4px;
}

.certificate-fingerprint {
    margin-top: 8px;
}

.certificate-fingerprint .output-box {
    font-size: 12px;
}

/* ---------- Password Generator ---------- */

.password-length-row {
    display: flex;
    align-items: flex-end;
    gap: 14px;
}

.password-length-wrap {
    position: relative;
    padding-top: 28px;
}

.password-length-bubble {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    padding: 1px 9px;
    border-radius: 20px;
    background: var(--accent-soft);
    border: 1px solid var(--accent-border);
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 12px;
    white-space: nowrap;
    pointer-events: none;
    transition: left 0.08s linear;
}

.password-symbol-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.password-meter {
    height: 9px;
    min-width: 120px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--bg-input);
    overflow: hidden;
}

.password-meter-fill {
    height: 100%;
    width: 0;
    border-radius: 6px;
    transition: width 0.45s var(--ease-out), background-color 0.45s;
}

.password-meter-weak {
    background-color: var(--err);
}

.password-meter-okay {
    background-color: var(--warn);
}

.password-meter-strong {
    background-color: hsl(215 90% 62%);
}

.password-meter-excellent {
    background-color: var(--ok);
}

.password-row {
    margin-bottom: 8px;
    animation: uuid-row-in 0.35s var(--ease-out) both;
    animation-delay: calc(var(--i) * 45ms);
}

.password-value {
    letter-spacing: 0.5px;
}

/* Fixed hues — the page accent is rose on security pages, so digits get
   cyan to stay distinguishable from the rose symbols. */
.password-char-digit {
    color: hsl(187 85% 62%);
}

.password-char-symbol {
    color: hsl(350 90% 70%);
}

.password-dice-wobble {
    animation: password-dice-wobble 0.5s var(--ease-spring);
}

@keyframes password-dice-wobble {
    25% { transform: rotate(-7deg) scale(1.05); }
    55% { transform: rotate(6deg) scale(1.03); }
    80% { transform: rotate(-2deg) scale(1); }
}

/* ---------- UUID Generator ---------- */

.uuid-row {
    margin-bottom: 8px;
    animation: uuid-row-in 0.35s var(--ease-out) both;
    animation-delay: calc(var(--i) * 40ms);
}

@keyframes uuid-row-in {
    from { opacity: 0; transform: translateX(-10px); }
    to { opacity: 1; transform: translateX(0); }
}

.uuid-timestamp-chip {
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text-dim);
    white-space: nowrap;
}

/* ---------- htpasswd Generator ---------- */

.htpasswd-line-row {
    margin-bottom: 8px;
}

.htpasswd-algorithm-chip {
    width: 92px;
    justify-content: center;
}

.htpasswd-usage-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 12px;
}

.htpasswd-usage-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-input);
}

.htpasswd-usage-card .output-box {
    background: rgba(0, 0, 0, 0.25);
    font-size: 12px;
    flex: 1;
}

.htpasswd-usage-title {
    font-size: 13px;
    font-weight: 650;
}

/* ---------- Basic Auth Helper ---------- */

.basic-auth-output-row {
    margin-bottom: 8px;
}

.basic-auth-output-chip {
    width: 76px;
    justify-content: center;
}

/* ---------- Public Key Extractor ---------- */

.public-key-ssh-box {
    font-size: 12px;
}

@media (max-width: 640px) {
    .certificate-card-header {
        flex-direction: column;
    }

    .certificate-card-badges {
        justify-content: flex-start;
    }
}

.hash-source-active textarea,
.hash-source-active .dropzone {
    border-color: var(--accent-border);
    box-shadow: 0 0 0 3px var(--accent-soft);
}