/* ============================================================
   Password show/hide toggle
   Shared by the dark auth pages and the light dashboard/admin
   pages, so the colours are inherited rather than fixed.
   ============================================================ */

.pw-wrap {
    position: relative;
    display: block;
    width: 100%;
}

/* Keep the input full width and stop the text running under the button */
.pw-wrap > input {
    width: 100%;
    padding-right: 46px !important;
}

/* .form-floating is already position:relative, so the button can sit in it
   directly — the input must stay a direct child for the floating label. */
.form-floating { position: relative; }
.form-floating > input[type="password"],
.form-floating > input[type="text"].pw-shown {
    padding-right: 46px !important;
}

.pw-toggle {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    border: none !important;
    border-radius: 8px;
    cursor: pointer;
    color: currentColor;
    opacity: .55;
    box-shadow: none !important;
    transition: opacity .18s ease, background-color .18s ease;
    z-index: 3;
}
.pw-toggle:hover  { opacity: 1; background: rgba(127,127,127,.12) !important; }
.pw-toggle:focus  { outline: none; }
.pw-toggle:focus-visible {
    outline: 2px solid rgba(220,38,38,.55);
    outline-offset: 1px;
    opacity: 1;
}

/* Inside .form-floating the label occupies the left, so nudge off the edge */
.form-floating > .pw-toggle { right: 8px; }

.pw-ico {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    display: block;
}

/* Show the open eye by default; swap once the password is visible. */
.pw-ico-hide { display: none; }
.pw-toggle.is-shown .pw-ico-show { display: none; }
.pw-toggle.is-shown .pw-ico-hide { display: block; }
.pw-toggle.is-shown { opacity: .9; }

/* Hide the browser's own reveal control so there are never two eyes */
.pw-wrap > input::-ms-reveal,
.pw-wrap > input::-ms-clear,
.form-floating > input::-ms-reveal,
.form-floating > input::-ms-clear { display: none; }

/* ---- Context tinting ---- */
/* Dark auth pages */
.auth-field .pw-toggle { color: #8ba3c4; }
.auth-field .pw-toggle:hover { color: #eef2ff; background: rgba(255,255,255,.08) !important; }

/* Light dashboard / admin */
.form-group .pw-toggle,
.col-md-12 .pw-toggle,
.form-floating .pw-toggle { color: #64748b; }
.form-group .pw-toggle:hover,
.col-md-12 .pw-toggle:hover,
.form-floating .pw-toggle:hover { color: #0f172a; }

/* Dark mode on the dashboard */
:root[data-theme="dark"] .pw-toggle { color: #a7b4c8; }
:root[data-theme="dark"] .pw-toggle:hover {
    color: #e8edf6;
    background: rgba(255,255,255,.08) !important;
}

/* ---- Inside the dashboard shell ---- */
/* dashboard.css and dashboard-upgrade.css both paint *every* button under
   section.dashboard-contents as a brand-red action button, and
   `section.dashboard-contents button` (0,1,2) outranks a bare `.pw-toggle`
   (0,1,0) on every property — including the !important ones. The eye was
   therefore rendering as a padded red block sitting over the field, and on
   hover its translateY(-1px) replaced the translateY(-50%) that centres it,
   so it jumped out of line. Re-stating the toggle's own look at a
   specificity that clears those rules puts it back in the field.
   The admin settings and the profile settings pages both live here. */
section.dashboard-contents button.pw-toggle,
section.dashboard-contents .pw-wrap > button.pw-toggle,
section.dashboard-contents .form-floating > button.pw-toggle {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%) !important;
    width: 34px;
    height: 34px;
    min-width: 0;
    padding: 0 !important;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    color: #64748b !important;
    font-size: inherit;
    font-weight: normal;
    line-height: 1;
    z-index: 3;
}
section.dashboard-contents button.pw-toggle:hover {
    transform: translateY(-50%) !important;   /* stay centred, do not lift */
    background: rgba(127, 127, 127, .12) !important;
    border-color: transparent !important;
    box-shadow: none !important;
    color: #0f172a !important;
    opacity: 1;
}
section.dashboard-contents button.pw-toggle:focus,
section.dashboard-contents button.pw-toggle:active {
    transform: translateY(-50%) !important;
    background: transparent !important;
    box-shadow: none !important;
}
section.dashboard-contents button.pw-toggle .pw-ico {
    width: 19px;
    height: 19px;
    stroke: currentColor;
    fill: none;
}

/* Dark mode has to out-specify the block above, which is !important. */
:root[data-theme="dark"] section.dashboard-contents button.pw-toggle {
    color: #a7b4c8 !important;
}
:root[data-theme="dark"] section.dashboard-contents button.pw-toggle:hover {
    color: #e8edf6 !important;
    background: rgba(255, 255, 255, .08) !important;
}

/* The wrapper is a <span>, so it needs to behave like the block the field
   sits in — otherwise the absolute button anchors to the wrong box. */
section.dashboard-contents .pw-wrap {
    position: relative;
    display: block;
    width: 100%;
}
section.dashboard-contents .pw-wrap > input.form-control {
    width: 100%;
    padding-right: 46px !important;
}

@media (prefers-reduced-motion: reduce) {
    .pw-toggle { transition: none; }
}