/* ==========================================================================
   The password meter — the strength bar, rule chips and reveal buttons from
   the supplied doctor-portal template.

   One standalone sheet rather than a block per portal: the same meter renders
   inside the doctor, patient and organization portals and on the public
   registration pages, and five copies of it would drift. Self-contained
   colours with sensible fallbacks, dark mode keyed off [data-bs-theme] like
   every other sheet.
   ========================================================================== */

.care-password-meter {
    margin-top: 16px;
}

.care-strength-row {
    display: flex;
    align-items: center;
    gap: 14px;
}

.care-strength-track {
    height: 10px;
    flex: 1;
    border-radius: 999px;
    background: rgba(7, 91, 69, .14);
    overflow: hidden;
}

.care-strength-fill {
    display: block;
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: #c14e5b;
    transition: width .25s ease, background-color .25s ease;
}

/* Width by rule count, tone by band — classes, because the content-security
   policy forbids the style attributes the template's script wrote. */
.care-strength-fill.is-step-1 { width: 20%; }
.care-strength-fill.is-step-2 { width: 40%; }
.care-strength-fill.is-step-3 { width: 60%; }
.care-strength-fill.is-step-4 { width: 80%; }
.care-strength-fill.is-step-5 { width: 100%; }
.care-strength-fill.is-medium { background: #c59b3b; }
.care-strength-fill.is-strong { background: #0a8a68; }

.care-strength-label {
    min-width: 170px;
    color: #5d6c67;
    font-size: .8rem;
    font-weight: 800;
}

.care-password-rules {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}

.care-password-rules li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px;
    border: 1px solid rgba(7, 91, 69, .14);
    border-radius: 12px;
    color: #5d6c67;
    background: #f7fbf9;
    font-size: .74rem;
    font-weight: 750;
}

.care-password-rules li svg {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: .45;
}

.care-password-rules li.passed {
    border-color: rgba(22, 162, 124, .4);
    background: #f1faf6;
    color: #075b45;
}

.care-password-rules li.passed svg {
    opacity: 1;
}

/* The reveal button, sitting inside the field it reveals. */
.care-password-field {
    position: relative;
}

.care-password-field .field,
.care-password-field .form-control {
    width: 100%;
    padding-inline-end: 52px;
}

.care-password-eye {
    position: absolute;
    inset-inline-end: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 10px;
    color: #5d6c67;
    background: transparent;
    cursor: pointer;
}

.care-password-eye:hover {
    color: #075b45;
}

.care-password-eye svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

[data-bs-theme="dark"] .care-strength-track {
    background: rgba(150, 216, 188, .16);
}

[data-bs-theme="dark"] .care-strength-label,
[data-bs-theme="dark"] .care-password-eye {
    color: #a8bbb4;
}

[data-bs-theme="dark"] .care-password-eye:hover {
    color: #a3e5c9;
}

[data-bs-theme="dark"] .care-password-rules li {
    border-color: rgba(150, 216, 188, .16);
    background: #10372c;
    color: #a8bbb4;
}

[data-bs-theme="dark"] .care-password-rules li.passed {
    border-color: rgba(122, 227, 174, .45);
    background: #103c2d;
    color: #a3e5c9;
}