/**
 * KAICE Password Field Styles
 * 비밀번호 필드 전용 스타일
 */

/* ==================== 
   Password Wrapper 
   ==================== */
.kaice-password-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 100%;
}

/* ==================== 
   Password Input 
   ==================== */
.kaice-password-wrapper input[type="password"],
.kaice-password-wrapper input[type="text"] {
    width: 100%;
    padding-right: 45px;
    box-sizing: border-box;
}

/* ==================== 
   Password Toggle Button 
   ==================== */
.kaice-password-toggle.btn-light {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    padding: 0.25rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--theme-button-radius);
    transition: all 0.2s ease;
    z-index: 10;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.kaice-password-toggle.btn-light:active {
    transform: translateY(-50%) scale(0.95);
}

.kaice-password-toggle.btn-light:focus {
    outline: 2px solid var(--theme-main-color);
    outline-offset: 2px;
}

.kaice-password-toggle:hover {
    color: var(--theme-main-color);
}

/* ==================== 
   SVG Icons 
   ==================== */
.kaice-password-toggle svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
    pointer-events: none;
    margin: 0;
    padding: 0;
}

/* 눈 감은 아이콘 기본 숨김 */
.kaice-password-toggle svg.eye-closed {
    display: none;
}

/* 눈 뜬 아이콘 기본 표시 */
.kaice-password-toggle svg.eye-open {
    display: block;
}

/* ==================== 
   Password Strength Indicator 
   ==================== */
.kaice-password-strength {
    display: block;
    font-size: var(--theme-font-size-caption, 12px);
    margin-top: 4px;
    line-height: 1.4;
}

.kaice-password-strength.weak {
    color: var(--theme-danger-button-bg, #cc1818);
}

.kaice-password-strength.medium {
    color: #f0ad4e;
}

.kaice-password-strength.strong {
    color: #00a32a;
}

/* ==================== 
   Password Strength & Match Text Styles
   (form-text 스타일 - alert-styles.css 색상 변수 사용)
   ==================== */

/* 기본 메시지 색상 */
.form-text[id*="password"] {
    color: var(--theme-alert-secondary-text, #383d41);
}

/* Font Awesome 아이콘 간격 */
.form-text[id*="password"] i {
    margin-right: 4px;
}

/* 각 상태별 색상 클래스 */
.password-text-default {
    color: var(--theme-alert-secondary-text, #383d41) !important;
}

.password-text-danger {
    color: var(--theme-alert-danger-text, #721c24) !important;
}

.password-text-warning {
    color: var(--theme-alert-warning-text, #856404) !important;
}

.password-text-info {
    color: var(--theme-alert-info-text, #408090) !important;
}

.password-text-success {
    color: var(--theme-alert-success-text, #155724) !important;
}

/* ==================== 
   Disabled State 
   ==================== */
.kaice-password-wrapper.disabled .kaice-password-toggle,
.kaice-password-wrapper input:disabled + .kaice-password-toggle {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ==================== 
   Validation States 
   ==================== */
.kaice-password-wrapper.has-error input {
    border-color: var(--theme-danger-button-bg, #cc1818);
    background-color: #ffeaea;
}

.kaice-password-wrapper.has-success input {
    border-color: #00a32a;
}

/* ==================== 
   Accessibility 
   ==================== */
.kaice-password-toggle:focus-visible {
    outline: 2px solid var(--theme-main-color, #408090);
    outline-offset: 2px;
    border-radius: 4px;
}

/* 고대비 모드 지원 */
@media (prefers-contrast: high) {
    .kaice-password-toggle {
        border: 1px solid currentColor;
    }
    
    .kaice-password-toggle svg {
        stroke-width: 2px;
    }
}

/* ==================== 
   Responsive 
   ==================== */
@media (max-width: 768px) {
    .kaice-password-toggle {
        width: 32px;
        height: 32px;
    }
    
    .kaice-password-toggle svg {
        width: 20px;
        height: 20px;
    }
}