/* Website (portal) pages only -- see web_include_css in hooks.py. Nothing
   here may touch the desk, which loads rnit_app.css but not this file. */

/* STICKY FOOTER
   The footer is a plain child of <body>, so on a short page (the first step
   of /register, a "request sent" confirmation, an error page) it ended up
   halfway up the window with empty background below it. Making the body a
   full-height column and letting the footer take the leftover space above it
   pins it to the bottom of the window, while a page taller than the window
   still pushes it below the fold as before.

   100dvh, with 100vh underneath it for browsers that do not know dvh: on
   mobile, 100vh counts the area behind the retractable address bar, which
   leaves the footer just off-screen on exactly the short pages this is for. */
body[data-path] {
   display: flex;
   flex-direction: column;
   /* height, not just min-height: frappe's website stylesheet sets
      html, body { height: 100% }, which pinned the body to the window even
      when the page was longer -- the column then had less room than its
      contents and squeezed them. The footer, which rnit_app.css allows down
      to min-height 0, collapsed to nothing and its navy bar disappeared on
      every page taller than the window. */
   height: auto;
   min-height: 100vh;
   min-height: 100dvh;
}

/* Nothing in the column is shrunk to make the page fit: a long page scrolls,
   as it did before this file existed. */
body[data-path] > * {
   flex-shrink: 0;
}

body[data-path] > footer.web-footer {
   margin-top: auto;
}

/* PASSWORD FIELDS ON /update-password
   frappe's reset page (frappe/www/update-password.html) draws plain password
   boxes. The eye and the checklist are added by
   public/js/rnit_update_password.js; this is what they are dressed in. */
.rnit-pw-wrap {
   position: relative;
   display: block;
}

.rnit-pw-wrap .form-control {
   /* Room for the button sitting over the right-hand edge. */
   padding-right: 42px;
}

.rnit-pw-reveal {
   position: absolute;
   top: 50%;
   right: 6px;
   transform: translateY(-50%);
   display: flex;
   align-items: center;
   justify-content: center;
   width: 32px;
   height: 32px;
   padding: 0;
   color: #6b7280;
   background: none;
   border: none;
   border-radius: 6px;
   cursor: pointer;
}

.rnit-pw-reveal:hover {
   color: #043464;
   background: rgba(4, 52, 100, 0.08);
}

/* The rules the server enforces, ticked as they are met. Grey and unticked
   until then -- never red: nothing is wrong yet, the password is half typed. */
.rnit-pw-checklist {
   margin: 8px 0 0;
   padding: 0;
   list-style: none;
   font-size: 0.8rem;
   color: #6b7280;
}

.rnit-pw-checklist li {
   position: relative;
   padding-left: 20px;
   line-height: 1.7;
}

.rnit-pw-checklist li::before {
   content: "○";
   position: absolute;
   left: 2px;
}

.rnit-pw-checklist li.is-met {
   color: #0b5d3b;
}

.rnit-pw-checklist li.is-met::before {
   content: "✓";
   font-weight: 700;
}

.rnit-pw-match {
   margin: 8px 0 0;
   font-size: 0.8rem;
   color: #9a3412;
}

.rnit-pw-match.is-ok {
   color: #0b5d3b;
}