/**
 * MhSys OS - Componente Universal de Senha Forte & UX Premium
 * Folha de Estilos Modular para Medidor de Força, Toggle de Visibilidade e Match Check
 * Compatível com Dark Mode (Onboarding SaaS) e Light Mode (ERP, Seller, GovTech)
 * 
 * Regras Estritas de UX / Mobile:
 * - Anti-Zoom no iOS Safari: font-size: 16px !important
 * - Target de toque mínimo de 44px para dispositivos touch
 */

/* ==========================================================================
   1. Variáveis & Tokens do Componente
   ========================================================================== */
:root {
    --mhsys-pwd-bg-track: #e2e8f0;
    --mhsys-pwd-weak: #ef4444;
    --mhsys-pwd-fair: #f97316;
    --mhsys-pwd-good: #3b82f6;
    --mhsys-pwd-strong: #10b981;
    --mhsys-pwd-radius: 8px;
    --mhsys-pwd-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --mhsys-pwd-toggle-color: #64748b;
    --mhsys-pwd-toggle-hover: #1e293b;
    --mhsys-pwd-chip-bg: rgba(148, 163, 184, 0.12);
    --mhsys-pwd-chip-color: #64748b;
    --mhsys-pwd-chip-active-bg: rgba(16, 185, 129, 0.15);
    --mhsys-pwd-chip-active-color: #059669;
    --mhsys-pwd-chip-active-border: rgba(16, 185, 129, 0.3);
}

/* Modo Escuro (Dark Mode / Onboarding SaaS) */
.dark-theme,
[data-theme="dark"],
.theme-dark,
.onboarding-dark-wrapper,
body.bg-dark,
.bg-dark-onboarding {
    --mhsys-pwd-bg-track: rgba(255, 255, 255, 0.1);
    --mhsys-pwd-toggle-color: #94a3b8;
    --mhsys-pwd-toggle-hover: #f8fafc;
    --mhsys-pwd-chip-bg: rgba(255, 255, 255, 0.05);
    --mhsys-pwd-chip-color: #94a3b8;
    --mhsys-pwd-chip-active-bg: rgba(16, 185, 129, 0.2);
    --mhsys-pwd-chip-active-color: #34d399;
    --mhsys-pwd-chip-active-border: rgba(16, 185, 129, 0.4);
}

/* ==========================================================================
   2. Container & Input Wrapper
   ========================================================================== */
.mhsys-password-guard-container {
    position: relative;
    width: 100%;
}

.mhsys-pwd-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

/* Regra Crítica Anti-Zoom iOS Safari & Acessibilidade */
.mhsys-pwd-input-wrapper input.form-control,
.mhsys-pwd-input-wrapper input[type="password"],
.mhsys-pwd-input-wrapper input[type="text"],
.mhsys-password-input,
.mhsys-password-confirm-input {
    font-size: 16px !important;
    min-height: 44px;
    padding-right: 48px !important;
    transition: var(--mhsys-pwd-transition);
}

/* Botão de Alternância de Visibilidade (Olho Mágico 👁️) */
.mhsys-password-toggle-btn {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--mhsys-pwd-toggle-color);
    cursor: pointer;
    font-size: 1.15rem;
    padding: 0;
    margin: 0;
    z-index: 5;
    transition: var(--mhsys-pwd-transition);
    user-select: none;
    touch-action: manipulation;
}

.mhsys-password-toggle-btn:hover {
    color: var(--mhsys-pwd-toggle-hover);
    background: rgba(148, 163, 184, 0.15);
}

.mhsys-password-toggle-btn:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.4);
    color: var(--mhsys-pwd-toggle-hover);
}

/* Ajuste específico para Bootstrap Form-Floating */
.form-floating .mhsys-password-toggle-btn {
    top: 50%;
    transform: translateY(-50%);
    right: 10px;
    z-index: 6;
}

/* ==========================================================================
   3. Termômetro Reativo de Força (Strength Meter)
   ========================================================================== */
.mhsys-pwd-meter-box {
    margin-top: 8px;
    margin-bottom: 8px;
}

.mhsys-pwd-meter-track {
    width: 100%;
    height: 6px;
    background-color: var(--mhsys-pwd-bg-track);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
}

.mhsys-pwd-meter-fill {
    height: 100%;
    width: 0%;
    border-radius: 999px;
    transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.35s ease;
}

/* Níveis de Cores da Barra de Força */
.mhsys-pwd-meter-fill.strength-0 {
    width: 0%;
    background-color: transparent;
}
.mhsys-pwd-meter-fill.strength-1 {
    width: 25%;
    background: linear-gradient(90deg, #ef4444, #f87171);
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.4);
}
.mhsys-pwd-meter-fill.strength-2 {
    width: 50%;
    background: linear-gradient(90deg, #f97316, #fb923c);
    box-shadow: 0 0 8px rgba(249, 115, 22, 0.4);
}
.mhsys-pwd-meter-fill.strength-3 {
    width: 75%;
    background: linear-gradient(90deg, #3b82f6, #60a5fa);
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.4);
}
.mhsys-pwd-meter-fill.strength-4 {
    width: 100%;
    background: linear-gradient(90deg, #10b981, #34d399);
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.4);
}

.mhsys-pwd-meter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    margin-top: 4px;
    font-weight: 500;
}

.mhsys-pwd-meter-label {
    color: var(--mhsys-pwd-toggle-color);
}

.mhsys-pwd-meter-status {
    font-weight: 700;
    transition: var(--mhsys-pwd-transition);
}

.mhsys-pwd-meter-status.text-strength-1 { color: var(--mhsys-pwd-weak) !important; }
.mhsys-pwd-meter-status.text-strength-2 { color: var(--mhsys-pwd-fair) !important; }
.mhsys-pwd-meter-status.text-strength-3 { color: var(--mhsys-pwd-good) !important; }
.mhsys-pwd-meter-status.text-strength-4 { color: var(--mhsys-pwd-strong) !important; }

/* ==========================================================================
   4. Checklist Visual em Chips / Badges
   ========================================================================== */
.mhsys-pwd-checklist {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.mhsys-pwd-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 500;
    background-color: var(--mhsys-pwd-chip-bg);
    color: var(--mhsys-pwd-chip-color);
    border: 1px solid transparent;
    transition: var(--mhsys-pwd-transition);
    user-select: none;
}

.mhsys-pwd-chip i {
    font-size: 0.8rem;
    transition: transform 0.2s ease;
}

.mhsys-pwd-chip.valid {
    background-color: var(--mhsys-pwd-chip-active-bg);
    color: var(--mhsys-pwd-chip-active-color);
    border-color: var(--mhsys-pwd-chip-active-border);
}

.mhsys-pwd-chip.valid i {
    transform: scale(1.1);
}

/* ==========================================================================
   5. Feedback em Tempo Real de Confirmação (Match Check)
   ========================================================================== */
.mhsys-pwd-match-feedback {
    font-size: 0.75rem;
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    transition: var(--mhsys-pwd-transition);
    border-radius: 6px;
    padding: 4px 8px;
}

.mhsys-pwd-match-feedback.match-success {
    color: var(--mhsys-pwd-strong);
    background-color: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.25);
}

.mhsys-pwd-match-feedback.match-error {
    color: var(--mhsys-pwd-weak);
    background-color: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.25);
}

.mhsys-pwd-match-feedback.d-none {
    display: none !important;
}

/* Borda Reativa no Campo de Confirmação */
input.mhsys-password-confirm-input.is-match-valid {
    border-color: var(--mhsys-pwd-strong) !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15) !important;
}

input.mhsys-password-confirm-input.is-match-invalid {
    border-color: var(--mhsys-pwd-weak) !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) !important;
}