/* Hope Aid 247 Foundation staff branding.
   Reuse the official logo served by the foundation's primary site. */
:root {
  --hopeaid-logo: url("https://hopeaid.ngo/Logo.png");
}

/* Replace the temporary sparkle mark with the official brand artwork. */
.brand .mark,
.startup .mark,
.locked .mark,
.workspace .symbol {
  background-image: var(--hopeaid-logo);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-color: #fff;
  color: transparent;
  font-size: 0;
}

/* The full foundation name is included in the logo, so avoid duplicate text. */
.sidebar .brand {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 0 9px 23px;
}
.sidebar .brand .mark {
  width: 154px;
  height: 116px;
  border-radius: 0;
}
.sidebar .brand b,
.sign-art .brand b {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.sidebar .brand small {
  color: #537189;
  font-size: 10px;
  letter-spacing: 1.6px;
  margin-left: 5px;
}
.sidebar .brand .sidebar-close {
  position: absolute;
  top: 0;
  right: 3px;
}
.workspace .symbol {
  width: 37px;
  height: 37px;
  flex: none;
  border-radius: 7px;
}
.sign-art .brand {
  position: relative;
  gap: 18px;
  align-items: center;
  padding: 0 0 28px;
}
.sign-art .brand .mark {
  width: 130px;
  height: 130px;
  flex: none;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 16px;
  background-color: #fff;
  box-shadow: 0 10px 32px rgba(0, 30, 48, 0.16);
}
.sign-art .brand small {
  color: #e6f6fb;
  font-size: 11px;
  letter-spacing: 1.8px;
  line-height: 1.6;
}
.startup .mark,
.locked .mark {
  width: 105px;
  height: 105px;
  border-radius: 12px;
}

/* On narrow screens the original artwork panel is hidden; retain the logo. */
@media (max-width: 710px) {
  .signin .sign-panel::before {
    content: "";
    display: block;
    justify-self: center;
    width: 108px;
    height: 108px;
    margin-bottom: 20px;
    background: #fff var(--hopeaid-logo) center / contain no-repeat;
  }
  .sign-panel {
    padding-top: 36px;
    padding-bottom: 36px;
  }
}

/* HopeAid staff account recovery and invitation forms */
.auth-setup{min-height:100vh;display:grid;place-items:center;padding:26px;background:#f4f8fb}
.auth-box{width:min(440px,100%);padding:32px;border:1px solid #dce9f1;border-radius:16px;background:#fff;box-shadow:0 10px 30px #103f6910}
.auth-setup-logo{display:block;width:100px;height:95px;margin:0 auto 24px;background:transparent var(--hopeaid-logo) center/contain no-repeat}
.auth-box h2{font-size:28px;margin:10px 0}
.auth-box p{color:#6b8395;font-size:13px;line-height:1.6;margin-bottom:18px}
.auth-box form{display:grid;gap:9px;margin:12px 0 18px}
.auth-box label{font-size:12px;font-weight:800;color:#38556d}
.auth-box input{width:100%;border:1px solid #dce5ec;border-radius:8px;padding:13px;background:white;font-size:14px}
.auth-box .button{width:100%;margin-top:7px}
.auth-box .button.secondary{margin-top:12px}
.auth-box .auth-note{font-size:11px;margin-top:10px}
.forgot-link{display:block;border:0;background:none;color:#137650;font-size:12px;font-weight:750;margin:13px 0 0 auto;padding:5px}
.forgot-link:hover{text-decoration:underline}

/* Super Admin's one-time password handoff */
.one-time-code{display:block;user-select:all;overflow-wrap:anywhere;padding:13px 14px;border:1px solid #c5e6d6;border-radius:9px;background:#edf8f2;color:#143f32;font:700 14px/1.7 ui-monospace,SFMono-Regular,Consolas,monospace}

/* Responsive authenticated staff navigation and always-reachable logout controls. */
.sidebar{height:100vh;height:100dvh;max-height:100dvh;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding-bottom:max(16px,env(safe-area-inset-bottom))}
.sidebar .navlist,.sidebar .workspace,.sidebar .brand,.sidebar-bottom{flex-shrink:0}
.sidebar-bottom{padding-top:16px}
.sidebar .navlink{min-height:43px;touch-action:manipulation}
.logout-link{color:#a9463e!important;margin-top:8px;border-top:1px solid #edf1f4!important;border-radius:0!important;padding-top:15px!important}
.logout-link:hover{color:#8f342e!important;background:#fff1ee!important}
.logout-top{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;border:1px solid #dde7ee!important;border-radius:8px;background:#fff!important;padding:9px 11px!important;color:#476578;font-size:12px;font-weight:700}
.logout-top:hover{background:#f4f8fb!important;color:#aa473c}
@media(max-height:740px){.sidebar .brand{padding-bottom:10px}.sidebar .brand .mark{height:85px;width:118px}.sidebar .workspace{margin-bottom:12px}.sidebar .navlink{padding-top:10px;padding-bottom:10px}.sidebar .support-label{margin-top:13px}.sidebar-bottom{padding-top:8px}}
@media(max-width:940px){
 .sidebar{width:min(310px,calc(100vw - 42px));max-width:calc(100vw - 42px);transform:translate3d(-110%,0,0);z-index:110;box-shadow:9px 0 28px #0e28441f;will-change:transform}
 .nav-open .sidebar{transform:translate3d(0,0,0)}
 .nav-open .screen-shade{display:block;position:fixed;inset:0;background:#092d4699;z-index:105}
 body.nav-open{overflow:hidden}
 .sidebar-close{min-width:44px;min-height:44px;display:inline-grid;place-items:center}
 .hamburger{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;border-radius:9px;touch-action:manipulation}
 .hamburger:hover{background:#f0f5f8}
}
@media(max-width:710px){.topbar .top-actions{gap:8px}.logout-top{min-width:42px;min-height:42px;padding:8px!important;justify-content:center}.logout-top span{display:none}.topbar .crumb{display:flex;align-items:center;gap:5px;min-width:0;font-size:11px}.topbar .crumb b{max-width:106px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.topbar .topuser{padding:0!important}.topbar .top-actions{flex:none}}
@media(prefers-reduced-motion:reduce){.sidebar{transition:none!important}}

/* Mobile sidebar: a dedicated, independently scrolling menu region.
   The fixed logo and close button stay accessible while short mobile
   viewports can scroll down to all sections, including Sign out. */
.sidebar{
  overflow:hidden;
  display:flex;
  flex-direction:column;
  height:100vh;
  height:100dvh;
  max-height:100dvh;
  min-height:0;
}
.sidebar > .brand{
  flex:0 0 auto;
}
.sidebar-scroll{
  flex:1 1 auto;
  display:block;
  min-height:0;
  min-width:0;
  overflow-x:hidden;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-y:contain;
  touch-action:pan-y;
  scrollbar-width:thin;
  padding:0 0 max(20px,env(safe-area-inset-bottom));
}
.sidebar-scroll .workspace,
.sidebar-scroll .navlist,
.sidebar-scroll .sidebar-bottom{
  flex:none;
}
.sidebar-scroll .sidebar-bottom{
  margin-top:18px;
}
.sidebar-scroll:focus-visible{
  outline:2px solid #91dab1;
  outline-offset:-2px;
}
@media(max-width:940px){
  .sidebar{
    overflow:hidden;
    height:100vh;
    height:100dvh;
    max-height:100dvh;
  }
  .sidebar-scroll{
    overflow-y:auto !important;
    height:auto;
    max-height:none;
    min-height:0;
    touch-action:pan-y;
  }
  .sidebar-scroll .navlink{
    min-height:44px;
  }
}