/* Profile page unified styling */
.profile-main {
    max-width: 640px;
    margin: 80px auto 40px auto; /* increased for header/nav separation */
    padding: 0 16px 40px 16px;
    font: 400 16px/1.4 'Segoe UI', Arial, sans-serif;
    color: #333;
    box-sizing: border-box;
}

/* Utility for global page top spacing if needed */
.page-top-spaced { padding-top: 80px; }

#profile-title h1 {
    font: 600 28px/1.25 'Segoe UI', Arial, sans-serif;
    margin: 0 0 12px 0;
    color: #222;
}

#profile-title {
    border-bottom: 1px solid #ccc;
    padding-bottom: 8px;
    margin-bottom: 24px;
}

.profile-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 18px;
    width: 100%;
}

.profile-row > label {
    font: 700 14px/1.3 'Segoe UI', Arial, sans-serif;
    color: #333;
    margin: 0;
    text-align: left;
}

.profile-row > input[type=text],
.profile-row > input[type=password],
.profile-row > input[type=email],
.profile-row > input[type=tel] {
    width: 100%;
    max-width: 100%;
    height: 40px;
    padding: 8px 10px;
    border: 1px solid #767676;
    border-radius: 2px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08) inset;
    font: 400 16px/1.3 'Segoe UI', Arial, sans-serif;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.profile-row.invalid-field > input[type=text],
.profile-row.invalid-field > input[type=password],
.profile-row.invalid-field > input[type=email],
.profile-row.invalid-field > input[type=tel] {
    border-color: #c62828 !important;
    box-shadow: 0 0 0 1px rgba(198,40,40,.35);
}

.validation-msg {
    font: 400 12px/14px 'Segoe UI', Arial, sans-serif;
    color: #c62828;
    margin-top: -2px;
}

.profile-row > input[disabled] {
    background: #f3f5f7;
    color: #555;
}

.password-input-wrapper input[disabled] {
    background:#f1f1f1;
    cursor:not-allowed;
}

.profile-row > input:not([disabled]):hover {
    border-color: #5a5a5a;
}

.profile-row > input:not([disabled]):focus {
    outline: none;
    border-color: #0A64A4;
    box-shadow: 0 0 0 2px rgba(10,100,164,.35), 0 1px 2px rgba(0,0,0,0.08) inset;
}

/* Password input with toggle */
.password-input-wrapper {
    position: relative;
    width: 100%;
}
.password-input-wrapper input.profile-password-input {
    width: 100%;
    max-width: 100%;
    height: 40px;
    padding: 8px 42px 8px 10px; /* leave space for toggle */
    border: 1px solid #767676;
    border-radius: 2px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08) inset;
    font: 400 16px/1.3 'Segoe UI', Arial, sans-serif;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.password-input-wrapper input.profile-password-input:hover:not([disabled]) { border-color:#5a5a5a; }
.password-input-wrapper input.profile-password-input:focus:not([disabled]) { outline:none; border-color:#0A64A4; box-shadow:0 0 0 2px rgba(10,100,164,.35), 0 1px 2px rgba(0,0,0,0.08) inset; }
.password-input-wrapper input.profile-password-input[disabled] { background:#f3f5f7; color:#555; }

.pw-toggle {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 40px;
    border: none;
    background: transparent;
    color: #444;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}
.pw-toggle:focus { outline: none; }
.pw-toggle:hover { color: #0A64A4; }
.pw-toggle[disabled] { opacity:.4; cursor:not-allowed; }

/* Buttons */
.profile-btn, #profile-btn-change-pwd, #modify-password-button, #save-changes-button {
    height: 44px;
    font: 700 15px/20px 'Segoe UI', Arial, sans-serif;
    border-radius: 2px;
}

#profile-btn-change-pwd, #profile-btn-edit-contact {
    width: 100%;
    margin: 0 0 4px 0;
}

/* Split action buttons when editing contact */
.contact-action-buttons { width:100%; }
.contact-action-buttons .profile-btn { flex:1 1 0; width:50%; }
.contact-action-buttons { display:flex; flex-direction:row; gap:12px; }

/* Split action buttons in password section */
.password-action-buttons { width:100%; display:flex; flex-direction:row; gap:12px; }
.password-action-buttons .profile-btn { flex:1 1 0; width:50%; }
.password-row.password-actions { gap:12px; }

#modify-password-button, #save-changes-button {
    width: 180px;
    margin-right: 12px;
}

#save-changes-button[disabled] {
    cursor: not-allowed;
    opacity: .55;
}

/* Password strength meter */
.profile-meter {
    width: 100%;
    height: 8px;
    margin-top: 4px;
}
.meter-label-profile {
    font: 400 12px/16px 'Segoe UI', Arial, sans-serif;
    margin-top: 4px;
    width: 100%;
    text-align: left;
    color: #333;
}

/* Additions for password validation icons and rules */
.pw-valid-icon { color: #2e7d32; margin-left:4px; font-size:16px; }
.pw-invalid-icon { color: #c62828; margin-left:4px; font-size:16px; }
.pw-rules {
    font: 400 12px/16px 'Segoe UI', Arial, sans-serif;
    color: #555;
    margin-top: 4px;
}

/* Right-justify password rules */
.new-password-validation { width:100%; display:flex; justify-content:flex-end; }
.new-password-validation .pw-rules { margin-left:auto; text-align:right; flex:1 1 auto; }
/* how to right justify the span this will be on? */

/* Layout when password section visible */
.profile-row.password-actions {
    flex-direction: column; /* stack buttons container + message */
    justify-content: flex-start;
    gap: 6px;
}

/* Persistent row for contact actions to prevent shifting */
.persistent-row {
    min-height: 52px; /* enough to hold buttons when visible */
}
.persistent-row .contact-action-buttons {
    display: flex;
    flex-direction: row;
    gap: 12px;
}

/* Spinner while validating current password */
.pw-validating-icon { color:#0A64A4; margin-left:6px; animation: pwspin 1s linear infinite; }
@keyframes pwspin { from{transform:rotate(0deg);} to {transform:rotate(360deg);} }
/* Responsive */
@media (max-width: 640px) {
    .profile-main { margin-top: 64px; }
    #modify-password-button, #save-changes-button { width: 48%; margin-right: 0; }
    .profile-row.password-actions { flex-direction: column; }
    .persistent-row { min-height: 96px; }
}

/* Password meta row (strength label + rules inline) */
.pw-meta-row { display:flex; width:100%; justify-content:space-between; align-items:flex-start; gap:12px; }
.pw-meta-row .meter-label-profile { width:auto; flex:0 0 auto; margin-top:0; }
.pw-meta-row .pw-rules { margin-top:0; margin-left:auto; text-align:right; flex:1 1 auto; }