/* ========================================
   Password Modal - Blue Theme
   BEM Naming Convention

   !important usage:
   - Only for overriding .mdmodal-content (has !important in Site.css)
   - Everywhere else: rely on specificity

   Color Palette:
   - Deep Blue: var(--color-deep-blue)
   - Ocean Blue: var(--color-ocean-blue)
   - Sky Blue: var(--color-sky-blue)
   - Light Sky Blue: var(--color-light-sky-blue)
   - Dark Text: var(--color-dark-text)
   ======================================== */

@import '../core/variables.css';

/* ========================================
   PASSWORD MODAL
   ======================================== */

/* Modal Content - Override dark background to white */
.password-modal .mdmodal-content {
    background: var(--color-bg-white) !important;
    background-image: none !important;
    color: var(--color-dark-text);
    border-radius: 12px !important;
    overflow: hidden;
    padding: 0 !important;
}

/* Modal Header with Blue Gradient */
.password-modal .mdmodal-header {
    background: var(--gradient-blue-table);
    padding: 28px 32px;
    border-radius: 12px 12px 0 0;
    position: relative;
}

/* Modal Title */
.password-modal .mdmodal-title {
    color: var(--color-bg-white) !important;
    font-weight: 600;
    font-size: 1.25rem;
    margin: 0;
}

/* Close Button */
.password-modal .mdclose {
    color: var(--color-bg-white) !important;
    opacity: 1 !important;
    font-size: 1.5rem;
    transition: opacity 0.3s ease;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
}

.password-modal .mdclose:hover {
    opacity: 0.8 !important;
}

/* Modal Body */
.password-modal .mdmodal-body {
    background: var(--color-bg-white);
    color: var(--color-dark-text);
    padding: 24px;
}

/* Modal Footer */
.password-modal .mdmodal-footer {
    background: var(--color-bg-white);
    padding: 16px 24px;
}

/* Continue Button */
.password-modal #btnSavePWD {
    background: var(--gradient-blue-button);
    border: none;
    color: var(--color-bg-white) !important;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(31, 143, 200, 0.2);
}

.password-modal #btnSavePWD:hover {
    background: var(--gradient-blue-button-hover);
    box-shadow: 0 4px 8px rgba(23, 61, 182, 0.3);
    transform: translateY(-2px);
    color: var(--color-bg-white) !important;
}

/* Form Controls */
.password-modal .mdform-control {
    color: var(--color-dark-text);
    border-bottom: 2px solid #ced4da;
    transition: border-color 0.3s ease;
}

.password-modal .mdform-control:focus {
    border-bottom: 2px solid var(--color-ocean-blue);
    color: var(--color-dark-text);
    box-shadow: 0 2px 4px rgba(31, 143, 200, 0.1);
}

/* Form Placeholders */
.password-modal .mdform-control-placeholder {
    color: var(--color-gray-text);
    opacity: 0.8;
    transition: all 0.3s ease;
}

.password-modal .mdform-control:focus + .mdform-control-placeholder,
.password-modal .mdform-control:valid + .mdform-control-placeholder {
    color: var(--color-ocean-blue);
    opacity: 1;
}

/* Modal Footer */
.password-modal .mdmodal-footer {
    background: var(--color-bg-white);
}